@coinbase/cds-mcp-server 8.17.3 → 8.17.5

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 +8 -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,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 { FloatingAssetCard } from '@coinbase/cds-web/cards/FloatingAssetCard'
9
9
  ```
10
10
 
11
- ## Props
12
-
13
- | Prop | Type | Required | Default | Description |
14
- | --- | --- | --- | --- | --- |
15
- | `media` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | Remote Image or other node with media content. |
16
- | `title` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | Text or ReactNode to be displayed in TextHeadline |
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 | `-` | - |
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 | `-` | - |
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 | `-` | Content to be displayed below the title |
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 | `-` | - |
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 | `-` | - |
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 | `-` | - |
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 | `-` | - |
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'` | Variant for card size. Can be small or large. |
105
- | `style` | `CSSProperties` | No | `-` | - |
106
- | `subtitle` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Text or ReactNode to be displayed above Title |
107
- | `testID` | `string` | No | `floating-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' ? floatingAssetCardLargeWidth : floatingAssetCardSmallDimension` | - |
116
- | `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
117
-
118
-
119
11
  ## Examples
120
12
 
121
13
  ### Default
@@ -248,4 +140,111 @@ function Example() {
248
140
  }
249
141
  ```
250
142
 
143
+ ## Props
144
+
145
+ | Prop | Type | Required | Default | Description |
146
+ | --- | --- | --- | --- | --- |
147
+ | `media` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | Remote Image or other node with media content. |
148
+ | `title` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | Text or ReactNode to be displayed in TextHeadline |
149
+ | `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| space-between \| space-around \| space-evenly>` | No | `-` | - |
150
+ | `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
151
+ | `alignSelf` | `ResponsiveProp<center \| normal \| auto \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
152
+ | `as` | `div` | No | `-` | - |
153
+ | `aspectRatio` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
154
+ | `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 | `-` | - |
155
+ | `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
156
+ | `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
157
+ | `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
158
+ | `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 | `-` | - |
159
+ | `borderEndWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
160
+ | `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
161
+ | `borderStartWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
162
+ | `borderTopLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
163
+ | `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
164
+ | `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
165
+ | `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
166
+ | `bordered` | `boolean` | No | `-` | Add a border around all sides of the box. |
167
+ | `borderedBottom` | `boolean` | No | `-` | Add a border to the bottom side of the box. |
168
+ | `borderedEnd` | `boolean` | No | `-` | Add a border to the trailing side of the box. |
169
+ | `borderedHorizontal` | `boolean` | No | `-` | Add a border to the leading and trailing sides of the box. |
170
+ | `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
171
+ | `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
172
+ | `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
173
+ | `bottom` | `ResponsiveProp<Bottom<string \| number>>` | No | `-` | - |
174
+ | `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 | `-` | - |
175
+ | `columnGap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
176
+ | `dangerouslySetBackground` | `string` | No | `-` | - |
177
+ | `description` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Content to be displayed below the title |
178
+ | `display` | `ResponsiveProp<grid \| revert \| none \| block \| inline \| inline-block \| flex \| inline-flex \| inline-grid \| contents \| flow-root \| list-item>` | No | `-` | - |
179
+ | `elevation` | `0 \| 1 \| 2` | No | `-` | - |
180
+ | `flexBasis` | `ResponsiveProp<FlexBasis<string \| number>>` | No | `-` | - |
181
+ | `flexDirection` | `ResponsiveProp<column \| row \| row-reverse \| column-reverse>` | No | `-` | - |
182
+ | `flexGrow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
183
+ | `flexShrink` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
184
+ | `flexWrap` | `ResponsiveProp<nowrap \| wrap \| wrap-reverse>` | No | `-` | - |
185
+ | `font` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
186
+ | `fontFamily` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
187
+ | `fontSize` | `ResponsiveProp<FontSize \| inherit>` | No | `-` | - |
188
+ | `fontWeight` | `ResponsiveProp<FontWeight \| inherit>` | No | `-` | - |
189
+ | `gap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
190
+ | `grid` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
191
+ | `gridArea` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
192
+ | `gridAutoColumns` | `ResponsiveProp<GridAutoColumns<string \| number>>` | No | `-` | - |
193
+ | `gridAutoFlow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| row \| column \| dense` | No | `-` | - |
194
+ | `gridAutoRows` | `ResponsiveProp<GridAutoRows<string \| number>>` | No | `-` | - |
195
+ | `gridColumn` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
196
+ | `gridColumnEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
197
+ | `gridColumnStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
198
+ | `gridRow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
199
+ | `gridRowEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
200
+ | `gridRowStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
201
+ | `gridTemplate` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
202
+ | `gridTemplateAreas` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
203
+ | `gridTemplateColumns` | `ResponsiveProp<GridTemplateColumns<string \| number>>` | No | `-` | - |
204
+ | `gridTemplateRows` | `ResponsiveProp<GridTemplateRows<string \| number>>` | No | `-` | - |
205
+ | `height` | `ResponsiveProp<Height<string \| number>>` | No | `-` | - |
206
+ | `justifyContent` | `ResponsiveProp<left \| right \| center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| space-between \| space-around \| space-evenly>` | No | `-` | - |
207
+ | `key` | `Key \| null` | No | `-` | - |
208
+ | `left` | `ResponsiveProp<Left<string \| number>>` | No | `-` | - |
209
+ | `lineHeight` | `ResponsiveProp<LineHeight \| inherit>` | No | `-` | - |
210
+ | `margin` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
211
+ | `marginBottom` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
212
+ | `marginEnd` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
213
+ | `marginStart` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
214
+ | `marginTop` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
215
+ | `marginX` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
216
+ | `marginY` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
217
+ | `maxHeight` | `ResponsiveProp<MaxHeight<string \| number>>` | No | `-` | - |
218
+ | `maxWidth` | `ResponsiveProp<MaxWidth<string \| number>>` | No | `-` | - |
219
+ | `minHeight` | `ResponsiveProp<MinHeight<string \| number>>` | No | `-` | - |
220
+ | `minWidth` | `ResponsiveProp<MinWidth<string \| number>>` | No | `-` | - |
221
+ | `onChange` | `FormEventHandler<HTMLDivElement>` | No | `-` | - |
222
+ | `opacity` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
223
+ | `overflow` | `ResponsiveProp<hidden \| auto \| visible \| clip \| scroll>` | No | `-` | - |
224
+ | `padding` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
225
+ | `paddingBottom` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
226
+ | `paddingEnd` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
227
+ | `paddingStart` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
228
+ | `paddingTop` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
229
+ | `paddingX` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
230
+ | `paddingY` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
231
+ | `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
232
+ | `position` | `ResponsiveProp<fixed \| static \| relative \| absolute \| sticky>` | No | `-` | - |
233
+ | `ref` | `RefObject<HTMLDivElement> \| ((instance: HTMLDivElement \| null) => void) \| null` | No | `-` | - |
234
+ | `right` | `ResponsiveProp<Right<string \| number>>` | No | `-` | - |
235
+ | `rowGap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
236
+ | `size` | `s \| l` | No | `'s'` | Variant for card size. Can be small or large. |
237
+ | `style` | `CSSProperties` | No | `-` | - |
238
+ | `subtitle` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Text or ReactNode to be displayed above Title |
239
+ | `testID` | `string` | No | `floating-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 |
240
+ | `textAlign` | `ResponsiveProp<center \| start \| end \| justify>` | No | `-` | - |
241
+ | `textDecoration` | `ResponsiveProp<none \| underline \| overline \| line-through \| underline overline \| underline double>` | No | `-` | - |
242
+ | `textTransform` | `ResponsiveProp<capitalize \| lowercase \| none \| uppercase>` | No | `-` | - |
243
+ | `top` | `ResponsiveProp<Top<string \| number>>` | No | `-` | - |
244
+ | `transform` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
245
+ | `userSelect` | `ResponsiveProp<text \| none \| auto \| all>` | No | `-` | - |
246
+ | `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
247
+ | `width` | `ResponsiveProp<Width<string \| number>>` | No | `size === 'l' ? floatingAssetCardLargeWidth : floatingAssetCardSmallDimension` | - |
248
+ | `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
249
+
251
250
 
@@ -4,30 +4,10 @@ A fullscreen alert component for displaying important messages that require user
4
4
 
5
5
  ## Import
6
6
 
7
- ```jsx
7
+ ```tsx
8
8
  import { FullscreenAlert } from '@coinbase/cds-web/overlays/alert/FullscreenAlert'
9
9
  ```
10
10
 
11
- ## Props
12
-
13
- | Prop | Type | Required | Default | Description |
14
- | --- | --- | --- | --- | --- |
15
- | `body` | `string` | Yes | `-` | Alert body/description |
16
- | `onRequestClose` | `() => void` | Yes | `-` | Callback function fired when modal is closed. |
17
- | `preferredActionLabel` | `string` | Yes | `-` | Label of the main call to action button |
18
- | `title` | `string` | Yes | `-` | Alert title |
19
- | `visible` | `boolean` | Yes | `false false` | Controls visibility of the Modal |
20
- | `accessibilityLabelledBy` | `string` | No | `-` | On web, maps to aria-labelledby and lists the id(s) of the element(s) that label the element on which the attribute is set. On mobile (Android only), a reference to another element nativeID used to build complex forms. |
21
- | `closeAccessibilityLabel` | `string` | No | `-` | Sets an accessible label for the close button. On web, maps to aria-label and defines a string value that labels an interactive element. On mobile, VoiceOver will read this string when a user selects the associated element. |
22
- | `disablePortal` | `boolean` | No | `-` | Disable React portal integration |
23
- | `dismissActionLabel` | `string` | No | `-` | Label of the dismiss button |
24
- | `heroSquare` | `margin \| success \| pending \| airdrop \| blockchain \| camera \| cloud \| coinbaseOneLogo \| earn \| instantUnstakingClock \| options \| refresh \| rocket \| securityShield \| smartContract \| staking \| borrowCoins \| coinbaseOneEarn \| ethStakingRewards \| fiat \| futures \| globalTransactions \| governance \| lightningNetworkSend \| outage \| startToday \| walletWarning \| phoneNumber \| exchange \| accessToAdvancedCharts \| accountUnderReview \| add2Fa \| addBankAccount \| addCreditCard \| addMoreCrypto \| addPhoneNumber \| advancedTrading \| advancedTradingChartsIndicatorsCandles \| advancedTradingUi \| alienDonutSystemError \| anonymous \| appTrackingTransparency \| artFrameEmptyState \| automaticPayments \| backedByUsDollar \| baseChartLarge \| baseCheck \| baseCoinCryptoLarge \| baseCoinNetworkLarge \| baseConnectLarge \| baseCreatorCoin \| baseCreatorCoinEmpty \| baseDecentralizationLarge \| basedInUsa \| baseEmptyLarge \| baseErrorButterfly \| baseErrorLarge \| baseLoadingLarge \| baseLocationLarge \| baseMintNftLarge \| baseNetworkLarge \| baseNftLarge \| basePaycoinLarge \| basePeopleLarge \| basePiechartLarge \| baseRewardsCalmLarge \| baseSecurityLarge \| baseSendLarge \| baseSocial \| baseTargetLarge \| bigBtc \| bigError \| bigWarning \| bitcoinAndOtherCrypto \| bitcoinGlobe \| borrow \| borrowWallet \| brdGift \| bridge \| browseDecentralizedApps \| browserExtension \| buy \| buyFirstCrypto \| cardAndPhone \| cardBoosted \| cardError \| cardErrorCB1 \| cardReloadFunds \| cashExcitement \| catHoldingWalletEmptyState \| catLostSystemError \| cbada \| cbbtc \| cbdoge \| cbltc \| cbxrp \| chickenFishSystemError \| claimCryptoUsername \| cloudBacking \| coinbaseCard \| coinbaseCardIssue \| coinbaseCardLock \| coinbaseCardPocket \| coinbaseCardSpend \| coinbaseCardSpendCrypto \| coinbaseFees \| coinbaseIsDown \| coinbaseIsDownMobile \| coinbaseOneAirdrop \| coinbaseOneCardWarning \| coinbaseOneDiscountedAmount \| coinbaseOneDocWarning \| coinbaseOneInsufficientWallet \| coinbaseOnePercentOff \| coinbaseOnePhoneLightning \| coinbaseOneProtectedCrypto \| coinbaseOneRewards \| coinbaseOneSavingFunds \| coinbaseOneTokenRewards \| coinbaseOneUSDCBig \| coinbaseOneUSDCIncentives \| coinbaseOneWaitlist \| coinbaseOneWalletWarning \| coinbaseOneWelcome \| coinbaseOneZeroPortal \| coinbaseOneZeroPromotion \| coinbaseRedesigned \| coinbaseWalletToTrade \| coinCheckmark \| coinFifty \| coinsInWallet \| collectableNfts \| collectingNfts \| commerceAccounting \| commerceInvoices \| communication \| completeAQuiz \| congratulationsOnEarningCrypto \| connectPeople \| contactsListWarning \| crossBorderPayments \| cryptoAndMore \| cryptoApps \| cryptoAppsWallet \| cryptoAssets \| cryptoEconomy \| cryptoForBeginners \| cryptoPortfolio \| cryptoWallet \| currencyPairs \| dappsArts \| dappsFinance \| dappsGaming \| dappsGeneral \| dappsL2Support \| dappsMusic \| decentralization \| decentralizedWebWeb3 \| defiDecentralizedBorrowingLending \| defiDecentralizedTradingExchange \| defiEarn \| defiEnrollBoost \| defiHow \| defiRisk \| desktopAuthorized \| desktopUnknown \| developer \| diamondHands \| didDecentralizedIdentity \| digitalCollectibles \| digitalGold \| directDepositPhone \| discardAssets \| docError \| documentCertified \| documentSuccess \| downloadCoinbaseWallet \| earnCryptoCard \| earnCryptoInterest \| earnGlobe \| earnGrowth \| earnIdVerification \| earnInterest \| earnMore \| earnNuxHome \| earnSuccess \| earnToLearn \| emailNotification \| emptyCollection \| emptyStateCheckBackLater \| emptyStateNft404Page \| emptyStateNftSoldOut \| enableBiometrics \| encryptedEverything \| engagement \| ensProfilePic \| error400 \| errorApp500 \| errorMoblie \| errorRefresh \| errorRefreshWeb \| errorWeb \| errorWeb400 \| errorWeb404 \| errorWeb404Mobile \| errorWeb500 \| estimatedAmount \| ethereumToWallet \| ethStakingUpsell \| exchangeEmptyState \| exploreDecentralizedApps \| faceMatchReal \| feeScale \| fileYourCryptoTaxes \| fileYourCryptoTaxesCheck \| focusLimitOrders \| freeBtc \| gainsAndLosses \| gamer \| gasFeesNetworkFees \| generative \| getStartedInMinutes \| governanceMallet \| graphChartTrading \| hardwareWallets \| hiddenCollection \| holdCrypto \| holdingCrypto \| iceCreamMeltingSystemError \| idAngles \| idBack \| idCard \| idFront \| idIssue \| idVerificationSecure \| indexer \| innovation \| insufficientBalance \| insuranceProtection \| invest \| invite \| japanVerifyId \| keyGeneration \| layeredNetworks \| layerOne \| layerThree \| layerTwo \| ledgerAccess \| ledgerPlugin \| lend \| leverage \| lightningNetwork \| lightningNetworkInvoice \| lightningNetworkTransfer \| limitOrders \| linkingYourWalletToYourCoinbaseAccount \| liquidationBufferGreen \| liquidationBufferRed \| liquidationBufferRedClose \| liquidationBufferYellow \| lowCost \| marginWarning \| mic \| mining \| minting \| moneyDecentralized \| multicoinSupport \| multiPlatformMobileAppBrowserExtension \| multipleAccountsWalletsForOneUser \| multiplePortfolios \| myNameIsSatoshi \| namePortfolio \| networkWarning \| noFees \| noFeesMotion \| noLongAddresses \| notificationsAlt \| notificationsAndUpdates \| offChain \| oilAndGold \| onChain \| onTheList \| openEmail \| optInPushNotificationsEmail \| oracle \| orderBooks \| p2pGifting \| p2pPayments \| paperHands \| payUpFront \| performance \| phoneUnknown \| platform \| polling \| portfolioPerformance \| poweredByEthereum \| powerOfCrypto \| predictionsMarkets \| primeDeFi \| primeEarn \| primeStaking \| private \| privateKey \| processing \| protocol \| public \| quest \| quickAndSimple \| quickBuy \| ratingsAndReviews \| readyToTrade \| realToUSDC \| receivedCard \| receiveGift \| recommendInvest \| recurringReward \| referralsAvatars \| referralsBitcoin \| referralsCoinbaseOne \| referralsGenericCoin \| referralsWalletPhones \| remittances \| requestSent \| restrictedCountry \| retailUSDCRewards \| reviewInfo \| rotatingRewards \| routingAccount \| scalable \| secureAndTrusted \| secureGlobalTransactions \| secureStorage \| selectCorrectCrypto \| selectReward \| selfCustody \| selfCustodyCrypto \| semiCustodial \| sendCryptoFaster \| sendToUsername \| serverCatSystemError \| settlement \| shareOnSocialMedia \| sidechain \| slippageTolerance \| spacedOutSystemError \| squidEmptyState \| stablecoin \| stableValue \| stakingMissedReturns \| stakingMissedReturnsUsdc \| stayInControlSelfHostedWalletsStorage \| stopLimitOrder \| stopLimitOrderDown \| storage \| stressTestedColdStorage \| supportAndMore \| sustainable \| switchAdvancedToSimpleTrading \| taxesDetails \| tools \| tradeGeneral \| tradeHistory \| tradeImmediately \| transactionLimit \| trendingHotAssets \| twoIdVerify \| unlockKey \| usdtToUSDC \| verifyBankTransactions \| verifyCardTransactions \| verifyEmail \| verifyIdDetails \| verifyInfo \| videoRequest \| videoReview \| videoUpload \| vipBadge \| vote \| walletAsset \| walletConfirmation \| walletFlyEmptyState \| walletLoading \| walletNotifications \| walletSecurity \| walletUi \| watchVideos \| web3ActivityError \| web3ActivitySigned \| web3MobileSetupStart \| web3MobileSetupSuccess \| webRAT \| whyNotBoth \| yourContacts` | No | `-` | Name of the illustration that is rendered in the alert |
25
- | `onDismissActionPress` | `(() => void)` | No | `-` | Callback function fired when the dismiss button is pressed |
26
- | `onPreferredActionPress` | `(() => void)` | No | `-` | Callback function fired when the main call to action button is pressed |
27
- | `preferredActionVariant` | `primary \| negative` | No | `primary` | Variant of the main call to action button |
28
- | `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 |
29
-
30
-
31
11
  ## Examples
32
12
 
33
13
  `FullscreenAlert` is built on top of `FullscreenModal` with an API that is similar to `Alert`.
@@ -67,4 +47,23 @@ function DefaultAlert() {
67
47
  }
68
48
  ```
69
49
 
50
+ ## Props
51
+
52
+ | Prop | Type | Required | Default | Description |
53
+ | --- | --- | --- | --- | --- |
54
+ | `body` | `string` | Yes | `-` | Alert body/description |
55
+ | `onRequestClose` | `() => void` | Yes | `-` | Callback function fired when modal is closed. |
56
+ | `preferredActionLabel` | `string` | Yes | `-` | Label of the main call to action button |
57
+ | `title` | `string` | Yes | `-` | Alert title |
58
+ | `visible` | `boolean` | Yes | `false false` | Controls visibility of the Modal |
59
+ | `accessibilityLabelledBy` | `string` | No | `-` | On web, maps to aria-labelledby and lists the id(s) of the element(s) that label the element on which the attribute is set. On mobile (Android only), a reference to another element nativeID used to build complex forms. |
60
+ | `closeAccessibilityLabel` | `string` | No | `-` | Sets an accessible label for the close button. On web, maps to aria-label and defines a string value that labels an interactive element. On mobile, VoiceOver will read this string when a user selects the associated element. |
61
+ | `disablePortal` | `boolean` | No | `-` | Disable React portal integration |
62
+ | `dismissActionLabel` | `string` | No | `-` | Label of the dismiss button |
63
+ | `heroSquare` | `margin \| success \| pending \| airdrop \| blockchain \| camera \| cloud \| coinbaseOneLogo \| earn \| instantUnstakingClock \| options \| refresh \| rocket \| securityShield \| smartContract \| staking \| borrowCoins \| coinbaseOneEarn \| ethStakingRewards \| fiat \| futures \| globalTransactions \| governance \| lightningNetworkSend \| outage \| startToday \| walletWarning \| phoneNumber \| exchange \| accessToAdvancedCharts \| accountUnderReview \| add2Fa \| addBankAccount \| addCreditCard \| addMoreCrypto \| addPhoneNumber \| advancedTrading \| advancedTradingChartsIndicatorsCandles \| advancedTradingUi \| alienDonutSystemError \| anonymous \| appTrackingTransparency \| artFrameEmptyState \| automaticPayments \| backedByUsDollar \| baseChartLarge \| baseCheck \| baseCoinCryptoLarge \| baseCoinNetworkLarge \| baseConnectLarge \| baseCreatorCoin \| baseCreatorCoinEmpty \| baseDecentralizationLarge \| basedInUsa \| baseEmptyLarge \| baseErrorButterfly \| baseErrorLarge \| baseLoadingLarge \| baseLocationLarge \| baseMintNftLarge \| baseNetworkLarge \| baseNftLarge \| basePaycoinLarge \| basePeopleLarge \| basePiechartLarge \| baseRewardsCalmLarge \| baseSecurityLarge \| baseSendLarge \| baseSocial \| baseTargetLarge \| bigBtc \| bigError \| bigWarning \| bitcoinAndOtherCrypto \| bitcoinGlobe \| borrow \| borrowWallet \| brdGift \| bridge \| browseDecentralizedApps \| browserExtension \| buy \| buyFirstCrypto \| cardAndPhone \| cardBoosted \| cardError \| cardErrorCB1 \| cardReloadFunds \| cashExcitement \| catHoldingWalletEmptyState \| catLostSystemError \| cbada \| cbbtc \| cbdoge \| cbltc \| cbxrp \| chickenFishSystemError \| claimCryptoUsername \| cloudBacking \| coinbaseCard \| coinbaseCardIssue \| coinbaseCardLock \| coinbaseCardPocket \| coinbaseCardSpend \| coinbaseCardSpendCrypto \| coinbaseFees \| coinbaseIsDown \| coinbaseIsDownMobile \| coinbaseOneAirdrop \| coinbaseOneCardWarning \| coinbaseOneDiscountedAmount \| coinbaseOneDocWarning \| coinbaseOneInsufficientWallet \| coinbaseOnePercentOff \| coinbaseOnePhoneLightning \| coinbaseOneProtectedCrypto \| coinbaseOneRewards \| coinbaseOneSavingFunds \| coinbaseOneTokenRewards \| coinbaseOneUSDCBig \| coinbaseOneUSDCIncentives \| coinbaseOneWaitlist \| coinbaseOneWalletWarning \| coinbaseOneWelcome \| coinbaseOneZeroPortal \| coinbaseOneZeroPromotion \| coinbaseRedesigned \| coinbaseWalletToTrade \| coinCheckmark \| coinFifty \| coinsInWallet \| collectableNfts \| collectingNfts \| commerceAccounting \| commerceInvoices \| communication \| completeAQuiz \| congratulationsOnEarningCrypto \| connectPeople \| contactsListWarning \| crossBorderPayments \| cryptoAndMore \| cryptoApps \| cryptoAppsWallet \| cryptoAssets \| cryptoEconomy \| cryptoForBeginners \| cryptoPortfolio \| cryptoWallet \| currencyPairs \| dappsArts \| dappsFinance \| dappsGaming \| dappsGeneral \| dappsL2Support \| dappsMusic \| decentralization \| decentralizedWebWeb3 \| defiDecentralizedBorrowingLending \| defiDecentralizedTradingExchange \| defiEarn \| defiEnrollBoost \| defiHow \| defiRisk \| desktopAuthorized \| desktopUnknown \| developer \| diamondHands \| didDecentralizedIdentity \| digitalCollectibles \| digitalGold \| directDepositPhone \| discardAssets \| docError \| documentCertified \| documentSuccess \| downloadCoinbaseWallet \| earnCryptoCard \| earnCryptoInterest \| earnGlobe \| earnGrowth \| earnIdVerification \| earnInterest \| earnMore \| earnNuxHome \| earnSuccess \| earnToLearn \| emailNotification \| emptyCollection \| emptyStateCheckBackLater \| emptyStateNft404Page \| emptyStateNftSoldOut \| enableBiometrics \| encryptedEverything \| engagement \| ensProfilePic \| error400 \| errorApp500 \| errorMoblie \| errorRefresh \| errorRefreshWeb \| errorWeb \| errorWeb400 \| errorWeb404 \| errorWeb404Mobile \| errorWeb500 \| estimatedAmount \| ethereumToWallet \| ethStakingUpsell \| exchangeEmptyState \| exploreDecentralizedApps \| faceMatchReal \| feeScale \| fileYourCryptoTaxes \| fileYourCryptoTaxesCheck \| focusLimitOrders \| freeBtc \| gainsAndLosses \| gamer \| gasFeesNetworkFees \| generative \| getStartedInMinutes \| governanceMallet \| graphChartTrading \| hardwareWallets \| hiddenCollection \| holdCrypto \| holdingCrypto \| iceCreamMeltingSystemError \| idAngles \| idBack \| idCard \| idFront \| idIssue \| idVerificationSecure \| indexer \| innovation \| insufficientBalance \| insuranceProtection \| invest \| invite \| japanVerifyId \| keyGeneration \| layeredNetworks \| layerOne \| layerThree \| layerTwo \| ledgerAccess \| ledgerPlugin \| lend \| leverage \| lightningNetwork \| lightningNetworkInvoice \| lightningNetworkTransfer \| limitOrders \| linkingYourWalletToYourCoinbaseAccount \| liquidationBufferGreen \| liquidationBufferRed \| liquidationBufferRedClose \| liquidationBufferYellow \| lowCost \| marginWarning \| mic \| mining \| minting \| moneyDecentralized \| multicoinSupport \| multiPlatformMobileAppBrowserExtension \| multipleAccountsWalletsForOneUser \| multiplePortfolios \| myNameIsSatoshi \| namePortfolio \| networkWarning \| noFees \| noFeesMotion \| noLongAddresses \| notificationsAlt \| notificationsAndUpdates \| offChain \| oilAndGold \| onChain \| onTheList \| openEmail \| optInPushNotificationsEmail \| oracle \| orderBooks \| p2pGifting \| p2pPayments \| paperHands \| payUpFront \| performance \| phoneUnknown \| platform \| polling \| portfolioPerformance \| poweredByEthereum \| powerOfCrypto \| predictionsMarkets \| primeDeFi \| primeEarn \| primeStaking \| private \| privateKey \| processing \| protocol \| public \| quest \| quickAndSimple \| quickBuy \| ratingsAndReviews \| readyToTrade \| realToUSDC \| receivedCard \| receiveGift \| recommendInvest \| recurringReward \| referralsAvatars \| referralsBitcoin \| referralsCoinbaseOne \| referralsGenericCoin \| referralsWalletPhones \| remittances \| requestSent \| restrictedCountry \| retailUSDCRewards \| reviewInfo \| rotatingRewards \| routingAccount \| scalable \| secureAndTrusted \| secureGlobalTransactions \| secureStorage \| selectCorrectCrypto \| selectReward \| selfCustody \| selfCustodyCrypto \| semiCustodial \| sendCryptoFaster \| sendToUsername \| serverCatSystemError \| settlement \| shareOnSocialMedia \| sidechain \| slippageTolerance \| spacedOutSystemError \| squidEmptyState \| stablecoin \| stableValue \| stakingMissedReturns \| stakingMissedReturnsUsdc \| stayInControlSelfHostedWalletsStorage \| stopLimitOrder \| stopLimitOrderDown \| storage \| stressTestedColdStorage \| supportAndMore \| sustainable \| switchAdvancedToSimpleTrading \| taxesDetails \| tools \| tradeGeneral \| tradeHistory \| tradeImmediately \| transactionLimit \| trendingHotAssets \| twoIdVerify \| unlockKey \| usdtToUSDC \| verifyBankTransactions \| verifyCardTransactions \| verifyEmail \| verifyIdDetails \| verifyInfo \| videoRequest \| videoReview \| videoUpload \| vipBadge \| vote \| walletAsset \| walletConfirmation \| walletFlyEmptyState \| walletLoading \| walletNotifications \| walletSecurity \| walletUi \| watchVideos \| web3ActivityError \| web3ActivitySigned \| web3MobileSetupStart \| web3MobileSetupSuccess \| webRAT \| whyNotBoth \| yourContacts` | No | `-` | Name of the illustration that is rendered in the alert |
64
+ | `onDismissActionPress` | `(() => void)` | No | `-` | Callback function fired when the dismiss button is pressed |
65
+ | `onPreferredActionPress` | `(() => void)` | No | `-` | Callback function fired when the main call to action button is pressed |
66
+ | `preferredActionVariant` | `primary \| negative` | No | `primary` | Variant of the main call to action button |
67
+ | `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 |
68
+
70
69
 
@@ -4,38 +4,10 @@ FullscreenModal is a component that displays content in a full-screen overlay, t
4
4
 
5
5
  ## Import
6
6
 
7
- ```jsx
7
+ ```tsx
8
8
  import { FullscreenModal } from '@coinbase/cds-web/overlays/modal/FullscreenModal'
9
9
  ```
10
10
 
11
- ## Props
12
-
13
- | Prop | Type | Required | Default | Description |
14
- | --- | --- | --- | --- | --- |
15
- | `onRequestClose` | `() => void` | Yes | `-` | Callback function fired when modal is closed. |
16
- | `primaryContent` | `ReactElement` | Yes | `-` | Primary content element. Primary content is where the core of the task or information should live. |
17
- | `visible` | `boolean` | Yes | `false false` | Controls visibility of the Modal |
18
- | `accessibilityLabelledBy` | `string` | No | `-` | On web, maps to aria-labelledby and lists the id(s) of the element(s) that label the element on which the attribute is set. On mobile (Android only), a reference to another element nativeID used to build complex forms. |
19
- | `closeAccessibilityLabel` | `string` | No | `-` | Sets an accessible label for the close button. On web, maps to aria-label and defines a string value that labels an interactive element. On mobile, VoiceOver will read this string when a user selects the associated element. |
20
- | `contentContainerClassName` | `string` | No | `-` | Class applied to the content container element |
21
- | `contentStyle` | `CSSProperties` | No | `-` | Apply styles to content. |
22
- | `disableFocusTrap` | `boolean` | No | `false` | Set disableFocusTrap to disable keyboard listeners responsible for focus trap behavior This can be useful for scenarios like Yubikey 2fa Disables the focus trap to allow normal keyboard navigation. |
23
- | `disablePortal` | `boolean` | No | `-` | Disable React portal integration |
24
- | `focusTabIndexElements` | `boolean` | No | `false false` | Allow any element with tabIndex attribute to be focusable in FocusTrap, rather than only focusing specific interactive element types like button. This can be useful when having long content in a Modal. If true, the focus trap will include all elements with tabIndex values in the list of focusable elements. |
25
- | `hideDivider` | `boolean` | No | `false` | Hide header bottom divider |
26
- | `logo` | `ReactElement` | No | `-` | The logo to display |
27
- | `onDidClose` | `((() => void) & (() => void))` | No | `-` | Callback fired after the component is closed. |
28
- | `primaryContentClassName` | `string` | No | `-` | Class applied to the primary content element |
29
- | `restoreFocusOnUnmount` | `boolean` | No | `true` | If true, the focus trap will restore focus to the previously focused element when it unmounts. WARNING: If you disable this, you need to ensure that focus is restored properly so it doesnt end up on the body |
30
- | `role` | `dialog \| alertdialog` | No | `-` | WAI-ARIA Roles |
31
- | `secondaryContent` | `ReactElement` | No | `-` | Secondary content element. Secondary content is supplemental information. |
32
- | `secondaryContentClassName` | `string` | No | `-` | Class applied to the secondary content element |
33
- | `shouldCloseOnEscPress` | `boolean` | No | `true` | If pressing the esc key should close the modal |
34
- | `showSecondaryContentDivider` | `boolean` | No | `false` | Show divider between primary and secondary content |
35
- | `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 |
36
- | `title` | `string` | No | `-` | Title displayed in the Fullscreen Modal header. |
37
-
38
-
39
11
  ## Examples
40
12
 
41
13
  Please refer to the [Modal](/components/overlay/Modal) docs for more info on setup and usage.
@@ -143,4 +115,31 @@ function DefaultModal() {
143
115
  }
144
116
  ```
145
117
 
118
+ ## Props
119
+
120
+ | Prop | Type | Required | Default | Description |
121
+ | --- | --- | --- | --- | --- |
122
+ | `onRequestClose` | `() => void` | Yes | `-` | Callback function fired when modal is closed. |
123
+ | `primaryContent` | `ReactElement` | Yes | `-` | Primary content element. Primary content is where the core of the task or information should live. |
124
+ | `visible` | `boolean` | Yes | `false false` | Controls visibility of the Modal |
125
+ | `accessibilityLabelledBy` | `string` | No | `-` | On web, maps to aria-labelledby and lists the id(s) of the element(s) that label the element on which the attribute is set. On mobile (Android only), a reference to another element nativeID used to build complex forms. |
126
+ | `closeAccessibilityLabel` | `string` | No | `-` | Sets an accessible label for the close button. On web, maps to aria-label and defines a string value that labels an interactive element. On mobile, VoiceOver will read this string when a user selects the associated element. |
127
+ | `contentContainerClassName` | `string` | No | `-` | Class applied to the content container element |
128
+ | `contentStyle` | `CSSProperties` | No | `-` | Apply styles to content. |
129
+ | `disableFocusTrap` | `boolean` | No | `false` | Set disableFocusTrap to disable keyboard listeners responsible for focus trap behavior This can be useful for scenarios like Yubikey 2fa Disables the focus trap to allow normal keyboard navigation. |
130
+ | `disablePortal` | `boolean` | No | `-` | Disable React portal integration |
131
+ | `focusTabIndexElements` | `boolean` | No | `false false` | Allow any element with tabIndex attribute to be focusable in FocusTrap, rather than only focusing specific interactive element types like button. This can be useful when having long content in a Modal. If true, the focus trap will include all elements with tabIndex values in the list of focusable elements. |
132
+ | `hideDivider` | `boolean` | No | `false` | Hide header bottom divider |
133
+ | `logo` | `ReactElement` | No | `-` | The logo to display |
134
+ | `onDidClose` | `((() => void) & (() => void))` | No | `-` | Callback fired after the component is closed. |
135
+ | `primaryContentClassName` | `string` | No | `-` | Class applied to the primary content element |
136
+ | `restoreFocusOnUnmount` | `boolean` | No | `true` | If true, the focus trap will restore focus to the previously focused element when it unmounts. WARNING: If you disable this, you need to ensure that focus is restored properly so it doesnt end up on the body |
137
+ | `role` | `dialog \| alertdialog` | No | `-` | WAI-ARIA Roles |
138
+ | `secondaryContent` | `ReactElement` | No | `-` | Secondary content element. Secondary content is supplemental information. |
139
+ | `secondaryContentClassName` | `string` | No | `-` | Class applied to the secondary content element |
140
+ | `shouldCloseOnEscPress` | `boolean` | No | `true` | If pressing the esc key should close the modal |
141
+ | `showSecondaryContentDivider` | `boolean` | No | `false` | Show divider between primary and secondary content |
142
+ | `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 |
143
+ | `title` | `string` | No | `-` | Title displayed in the Fullscreen Modal header. |
144
+
146
145
 
@@ -4,29 +4,10 @@ Provides the layout structure, overlay, focus trapping, and animations for fulls
4
4
 
5
5
  ## Import
6
6
 
7
- ```jsx
7
+ ```tsx
8
8
  import { FullscreenModalLayout } from '@coinbase/cds-web/overlays/modal/FullscreenModalLayout'
9
9
  ```
10
10
 
11
- ## Props
12
-
13
- | Prop | Type | Required | Default | Description |
14
- | --- | --- | --- | --- | --- |
15
- | `onRequestClose` | `() => void` | Yes | `-` | Callback function fired when modal is closed. |
16
- | `visible` | `boolean` | Yes | `false false` | Controls visibility of the Modal |
17
- | `accessibilityLabelledBy` | `string` | No | `-` | On web, maps to aria-labelledby and lists the id(s) of the element(s) that label the element on which the attribute is set. On mobile (Android only), a reference to another element nativeID used to build complex forms. |
18
- | `disableFocusTrap` | `boolean` | No | `false` | Set disableFocusTrap to disable keyboard listeners responsible for focus trap behavior This can be useful for scenarios like Yubikey 2fa Disables the focus trap to allow normal keyboard navigation. |
19
- | `disablePortal` | `boolean` | No | `-` | Disable React portal integration |
20
- | `focusTabIndexElements` | `boolean` | No | `false false` | Allow any element with tabIndex attribute to be focusable in FocusTrap, rather than only focusing specific interactive element types like button. This can be useful when having long content in a Modal. If true, the focus trap will include all elements with tabIndex values in the list of focusable elements. |
21
- | `key` | `Key \| null` | No | `-` | - |
22
- | `onDidClose` | `((() => void) & (() => void))` | No | `-` | Callback fired after the component is closed. |
23
- | `ref` | `RefObject<HTMLDivElement> \| ((instance: HTMLDivElement \| null) => void) \| null` | No | `-` | - |
24
- | `restoreFocusOnUnmount` | `boolean` | No | `true` | If true, the focus trap will restore focus to the previously focused element when it unmounts. WARNING: If you disable this, you need to ensure that focus is restored properly so it doesnt end up on the body |
25
- | `role` | `dialog \| alertdialog` | No | `-` | WAI-ARIA Roles |
26
- | `shouldCloseOnEscPress` | `boolean` | No | `true` | If pressing the esc key should close the modal |
27
- | `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 |
28
-
29
-
30
11
  ## Examples
31
12
 
32
13
  import {
@@ -185,4 +166,22 @@ function AllPanelsExample() {
185
166
  }
186
167
  ```
187
168
 
169
+ ## Props
170
+
171
+ | Prop | Type | Required | Default | Description |
172
+ | --- | --- | --- | --- | --- |
173
+ | `onRequestClose` | `() => void` | Yes | `-` | Callback function fired when modal is closed. |
174
+ | `visible` | `boolean` | Yes | `false false` | Controls visibility of the Modal |
175
+ | `accessibilityLabelledBy` | `string` | No | `-` | On web, maps to aria-labelledby and lists the id(s) of the element(s) that label the element on which the attribute is set. On mobile (Android only), a reference to another element nativeID used to build complex forms. |
176
+ | `disableFocusTrap` | `boolean` | No | `false` | Set disableFocusTrap to disable keyboard listeners responsible for focus trap behavior This can be useful for scenarios like Yubikey 2fa Disables the focus trap to allow normal keyboard navigation. |
177
+ | `disablePortal` | `boolean` | No | `-` | Disable React portal integration |
178
+ | `focusTabIndexElements` | `boolean` | No | `false false` | Allow any element with tabIndex attribute to be focusable in FocusTrap, rather than only focusing specific interactive element types like button. This can be useful when having long content in a Modal. If true, the focus trap will include all elements with tabIndex values in the list of focusable elements. |
179
+ | `key` | `Key \| null` | No | `-` | - |
180
+ | `onDidClose` | `((() => void) & (() => void))` | No | `-` | Callback fired after the component is closed. |
181
+ | `ref` | `RefObject<HTMLDivElement> \| ((instance: HTMLDivElement \| null) => void) \| null` | No | `-` | - |
182
+ | `restoreFocusOnUnmount` | `boolean` | No | `true` | If true, the focus trap will restore focus to the previously focused element when it unmounts. WARNING: If you disable this, you need to ensure that focus is restored properly so it doesnt end up on the body |
183
+ | `role` | `dialog \| alertdialog` | No | `-` | WAI-ARIA Roles |
184
+ | `shouldCloseOnEscPress` | `boolean` | No | `true` | If pressing the esc key should close the modal |
185
+ | `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 |
186
+
188
187