@coinbase/cds-mcp-server 8.66.2 → 9.0.0-rc.2

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 (260) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/mcp-docs/mobile/components/AccordionItem.txt +4 -4
  3. package/mcp-docs/mobile/components/Alert.txt +2 -1
  4. package/mcp-docs/mobile/components/AreaChart.txt +40 -40
  5. package/mcp-docs/mobile/components/Avatar.txt +33 -33
  6. package/mcp-docs/mobile/components/AvatarButton.txt +35 -35
  7. package/mcp-docs/mobile/components/Banner.txt +55 -40
  8. package/mcp-docs/mobile/components/BarChart.txt +40 -40
  9. package/mcp-docs/mobile/components/Box.txt +34 -34
  10. package/mcp-docs/mobile/components/BrowserBar.txt +35 -35
  11. package/mcp-docs/mobile/components/Button.txt +52 -42
  12. package/mcp-docs/mobile/components/Calendar.txt +34 -34
  13. package/mcp-docs/mobile/components/Carousel.txt +48 -58
  14. package/mcp-docs/mobile/components/CartesianChart.txt +40 -40
  15. package/mcp-docs/mobile/components/CellMedia.txt +1 -1
  16. package/mcp-docs/mobile/components/Checkbox.txt +3 -3
  17. package/mcp-docs/mobile/components/CheckboxCell.txt +37 -37
  18. package/mcp-docs/mobile/components/CheckboxGroup.txt +4 -4
  19. package/mcp-docs/mobile/components/Chip.txt +39 -39
  20. package/mcp-docs/mobile/components/Coachmark.txt +39 -39
  21. package/mcp-docs/mobile/components/Collapsible.txt +2 -2
  22. package/mcp-docs/mobile/components/Combobox.txt +10 -10
  23. package/mcp-docs/mobile/components/ContainedAssetCard.txt +7 -7
  24. package/mcp-docs/mobile/components/ContentCard.txt +37 -37
  25. package/mcp-docs/mobile/components/ContentCardBody.txt +42 -42
  26. package/mcp-docs/mobile/components/ContentCardFooter.txt +34 -34
  27. package/mcp-docs/mobile/components/ContentCardHeader.txt +41 -41
  28. package/mcp-docs/mobile/components/ContentCell.txt +49 -49
  29. package/mcp-docs/mobile/components/ControlGroup.txt +36 -36
  30. package/mcp-docs/mobile/components/DataCard.txt +47 -47
  31. package/mcp-docs/mobile/components/DateInput.txt +25 -22
  32. package/mcp-docs/mobile/components/DatePicker.txt +25 -22
  33. package/mcp-docs/mobile/components/Divider.txt +33 -33
  34. package/mcp-docs/mobile/components/DotCount.txt +4 -2
  35. package/mcp-docs/mobile/components/DotStatusColor.txt +1 -1
  36. package/mcp-docs/mobile/components/DotSymbol.txt +6 -6
  37. package/mcp-docs/mobile/components/Fallback.txt +32 -32
  38. package/mcp-docs/mobile/components/FloatingAssetCard.txt +4 -4
  39. package/mcp-docs/mobile/components/HStack.txt +34 -34
  40. package/mcp-docs/mobile/components/HeroSquare.txt +1 -1
  41. package/mcp-docs/mobile/components/Icon.txt +3 -3
  42. package/mcp-docs/mobile/components/IconButton.txt +38 -58
  43. package/mcp-docs/mobile/components/InputChip.txt +39 -39
  44. package/mcp-docs/mobile/components/Interactable.txt +34 -34
  45. package/mcp-docs/mobile/components/Legend.txt +43 -41
  46. package/mcp-docs/mobile/components/LineChart.txt +40 -40
  47. package/mcp-docs/mobile/components/Link.txt +41 -38
  48. package/mcp-docs/mobile/components/ListCell.txt +52 -52
  49. package/mcp-docs/mobile/components/Lottie.txt +34 -34
  50. package/mcp-docs/mobile/components/LottieStatusAnimation.txt +2 -2
  51. package/mcp-docs/mobile/components/MediaCard.txt +41 -41
  52. package/mcp-docs/mobile/components/MediaChip.txt +39 -39
  53. package/mcp-docs/mobile/components/MessagingCard.txt +42 -42
  54. package/mcp-docs/mobile/components/Modal.txt +6 -2
  55. package/mcp-docs/mobile/components/ModalBody.txt +8 -8
  56. package/mcp-docs/mobile/components/ModalFooter.txt +33 -33
  57. package/mcp-docs/mobile/components/ModalHeader.txt +34 -34
  58. package/mcp-docs/mobile/components/MultiContentModule.txt +40 -40
  59. package/mcp-docs/mobile/components/NavigationTitle.txt +38 -36
  60. package/mcp-docs/mobile/components/NavigationTitleSelect.txt +38 -36
  61. package/mcp-docs/mobile/components/NudgeCard.txt +6 -6
  62. package/mcp-docs/mobile/components/Numpad.txt +37 -37
  63. package/mcp-docs/mobile/components/Overlay.txt +33 -33
  64. package/mcp-docs/mobile/components/PageFooter.txt +36 -30
  65. package/mcp-docs/mobile/components/PageHeader.txt +38 -32
  66. package/mcp-docs/mobile/components/PercentageBarChart.txt +40 -40
  67. package/mcp-docs/mobile/components/PeriodSelector.txt +39 -39
  68. package/mcp-docs/mobile/components/Pictogram.txt +1 -1
  69. package/mcp-docs/mobile/components/Point.txt +2 -2
  70. package/mcp-docs/mobile/components/PortalProvider.txt +2 -2
  71. package/mcp-docs/mobile/components/Pressable.txt +36 -36
  72. package/mcp-docs/mobile/components/ProgressBar.txt +2 -2
  73. package/mcp-docs/mobile/components/ProgressBarWithFixedLabels.txt +1 -1
  74. package/mcp-docs/mobile/components/ProgressBarWithFloatLabel.txt +1 -1
  75. package/mcp-docs/mobile/components/ProgressCircle.txt +3 -3
  76. package/mcp-docs/mobile/components/Radio.txt +3 -3
  77. package/mcp-docs/mobile/components/RadioCell.txt +37 -37
  78. package/mcp-docs/mobile/components/RadioGroup.txt +3 -3
  79. package/mcp-docs/mobile/components/ReferenceLine.txt +1 -1
  80. package/mcp-docs/mobile/components/RemoteImage.txt +6 -6
  81. package/mcp-docs/mobile/components/RemoteImageGroup.txt +1 -1
  82. package/mcp-docs/mobile/components/RollingNumber.txt +41 -39
  83. package/mcp-docs/mobile/components/Scrubber.txt +2 -2
  84. package/mcp-docs/mobile/components/SearchInput.txt +25 -22
  85. package/mcp-docs/mobile/components/SectionHeader.txt +7 -7
  86. package/mcp-docs/mobile/components/SegmentedTabs.txt +34 -34
  87. package/mcp-docs/mobile/components/Select.txt +3 -3
  88. package/mcp-docs/mobile/components/SelectAlpha.txt +10 -10
  89. package/mcp-docs/mobile/components/SelectChip.txt +42 -40
  90. package/mcp-docs/mobile/components/SelectChipAlpha.txt +11 -11
  91. package/mcp-docs/mobile/components/SelectOption.txt +10 -10
  92. package/mcp-docs/mobile/components/SlideButton.txt +40 -40
  93. package/mcp-docs/mobile/components/Spacer.txt +7 -7
  94. package/mcp-docs/mobile/components/Sparkline.txt +3 -3
  95. package/mcp-docs/mobile/components/SparklineGradient.txt +3 -3
  96. package/mcp-docs/mobile/components/SparklineInteractive.txt +6 -6
  97. package/mcp-docs/mobile/components/SparklineInteractiveHeader.txt +5 -5
  98. package/mcp-docs/mobile/components/Spinner.txt +2 -2
  99. package/mcp-docs/mobile/components/SpotIcon.txt +1 -1
  100. package/mcp-docs/mobile/components/SpotRectangle.txt +1 -1
  101. package/mcp-docs/mobile/components/SpotSquare.txt +1 -1
  102. package/mcp-docs/mobile/components/Stepper.txt +37 -36
  103. package/mcp-docs/mobile/components/Switch.txt +13 -3
  104. package/mcp-docs/mobile/components/TabIndicator.txt +1 -1
  105. package/mcp-docs/mobile/components/TabLabel.txt +39 -37
  106. package/mcp-docs/mobile/components/TabNavigation.txt +34 -34
  107. package/mcp-docs/mobile/components/TabbedChips.txt +34 -34
  108. package/mcp-docs/mobile/components/TabbedChipsAlpha.txt +34 -34
  109. package/mcp-docs/mobile/components/Tabs.txt +34 -34
  110. package/mcp-docs/mobile/components/Tag.txt +41 -41
  111. package/mcp-docs/mobile/components/Text.txt +51 -58
  112. package/mcp-docs/mobile/components/TextInput.txt +25 -22
  113. package/mcp-docs/mobile/components/ThemeProvider.txt +3 -1
  114. package/mcp-docs/mobile/components/Toast.txt +34 -34
  115. package/mcp-docs/mobile/components/Tooltip.txt +2 -2
  116. package/mcp-docs/mobile/components/TopNavBar.txt +9 -9
  117. package/mcp-docs/mobile/components/Tray.txt +5 -3
  118. package/mcp-docs/mobile/components/UpsellCard.txt +15 -14
  119. package/mcp-docs/mobile/components/VStack.txt +34 -34
  120. package/mcp-docs/mobile/components/XAxis.txt +1 -1
  121. package/mcp-docs/mobile/components/YAxis.txt +1 -1
  122. package/mcp-docs/mobile/getting-started/installation.txt +9 -3
  123. package/mcp-docs/mobile/hooks/useMergeRefs.txt +5 -5
  124. package/mcp-docs/mobile/routes.txt +1 -1
  125. package/mcp-docs/web/components/AccordionItem.txt +4 -4
  126. package/mcp-docs/web/components/Alert.txt +3 -2
  127. package/mcp-docs/web/components/AreaChart.txt +63 -63
  128. package/mcp-docs/web/components/Avatar.txt +49 -49
  129. package/mcp-docs/web/components/AvatarButton.txt +54 -324
  130. package/mcp-docs/web/components/Banner.txt +71 -55
  131. package/mcp-docs/web/components/BarChart.txt +58 -58
  132. package/mcp-docs/web/components/Box.txt +49 -312
  133. package/mcp-docs/web/components/Button.txt +62 -324
  134. package/mcp-docs/web/components/Calendar.txt +49 -49
  135. package/mcp-docs/web/components/Carousel.txt +65 -72
  136. package/mcp-docs/web/components/CartesianChart.txt +63 -63
  137. package/mcp-docs/web/components/CellMedia.txt +1 -1
  138. package/mcp-docs/web/components/Checkbox.txt +9 -7
  139. package/mcp-docs/web/components/CheckboxCell.txt +52 -52
  140. package/mcp-docs/web/components/CheckboxGroup.txt +3 -3
  141. package/mcp-docs/web/components/Chip.txt +51 -51
  142. package/mcp-docs/web/components/Coachmark.txt +55 -55
  143. package/mcp-docs/web/components/Collapsible.txt +2 -2
  144. package/mcp-docs/web/components/Combobox.txt +8 -8
  145. package/mcp-docs/web/components/ContainedAssetCard.txt +60 -55
  146. package/mcp-docs/web/components/ContentCard.txt +54 -317
  147. package/mcp-docs/web/components/ContentCardBody.txt +57 -318
  148. package/mcp-docs/web/components/ContentCardFooter.txt +49 -312
  149. package/mcp-docs/web/components/ContentCardHeader.txt +56 -318
  150. package/mcp-docs/web/components/ContentCell.txt +63 -322
  151. package/mcp-docs/web/components/ControlGroup.txt +50 -50
  152. package/mcp-docs/web/components/DataCard.txt +60 -60
  153. package/mcp-docs/web/components/DateInput.txt +54 -54
  154. package/mcp-docs/web/components/DatePicker.txt +54 -54
  155. package/mcp-docs/web/components/Divider.txt +49 -49
  156. package/mcp-docs/web/components/DotCount.txt +3 -1
  157. package/mcp-docs/web/components/DotStatusColor.txt +1 -1
  158. package/mcp-docs/web/components/DotSymbol.txt +6 -6
  159. package/mcp-docs/web/components/Dropdown.txt +3 -3
  160. package/mcp-docs/web/components/Fallback.txt +49 -312
  161. package/mcp-docs/web/components/FloatingAssetCard.txt +53 -53
  162. package/mcp-docs/web/components/FullscreenAlert.txt +1 -1
  163. package/mcp-docs/web/components/FullscreenModal.txt +5 -4
  164. package/mcp-docs/web/components/FullscreenModalLayout.txt +3 -2
  165. package/mcp-docs/web/components/Grid.txt +51 -314
  166. package/mcp-docs/web/components/GridColumn.txt +48 -311
  167. package/mcp-docs/web/components/HStack.txt +49 -312
  168. package/mcp-docs/web/components/HeroSquare.txt +1 -1
  169. package/mcp-docs/web/components/Icon.txt +51 -51
  170. package/mcp-docs/web/components/IconButton.txt +51 -341
  171. package/mcp-docs/web/components/InputChip.txt +51 -51
  172. package/mcp-docs/web/components/Interactable.txt +48 -319
  173. package/mcp-docs/web/components/Legend.txt +62 -62
  174. package/mcp-docs/web/components/LineChart.txt +63 -63
  175. package/mcp-docs/web/components/Link.txt +48 -318
  176. package/mcp-docs/web/components/ListCell.txt +66 -325
  177. package/mcp-docs/web/components/Lottie.txt +49 -49
  178. package/mcp-docs/web/components/LottieStatusAnimation.txt +2 -2
  179. package/mcp-docs/web/components/MediaCard.txt +53 -53
  180. package/mcp-docs/web/components/MediaChip.txt +51 -51
  181. package/mcp-docs/web/components/MessagingCard.txt +54 -54
  182. package/mcp-docs/web/components/Modal.txt +51 -50
  183. package/mcp-docs/web/components/ModalBody.txt +49 -49
  184. package/mcp-docs/web/components/ModalFooter.txt +49 -49
  185. package/mcp-docs/web/components/ModalHeader.txt +50 -50
  186. package/mcp-docs/web/components/MultiContentModule.txt +55 -316
  187. package/mcp-docs/web/components/NavigationBar.txt +53 -53
  188. package/mcp-docs/web/components/NavigationTitle.txt +103 -0
  189. package/mcp-docs/web/components/NavigationTitleSelect.txt +48 -48
  190. package/mcp-docs/web/components/NudgeCard.txt +53 -53
  191. package/mcp-docs/web/components/Overlay.txt +49 -49
  192. package/mcp-docs/web/components/PageFooter.txt +54 -48
  193. package/mcp-docs/web/components/PageHeader.txt +58 -52
  194. package/mcp-docs/web/components/Pagination.txt +49 -49
  195. package/mcp-docs/web/components/PercentageBarChart.txt +58 -58
  196. package/mcp-docs/web/components/PeriodSelector.txt +62 -62
  197. package/mcp-docs/web/components/Pictogram.txt +1 -1
  198. package/mcp-docs/web/components/Point.txt +5 -14
  199. package/mcp-docs/web/components/PopoverPanel.txt +1 -1
  200. package/mcp-docs/web/components/PortalProvider.txt +2 -2
  201. package/mcp-docs/web/components/Pressable.txt +48 -319
  202. package/mcp-docs/web/components/ProgressBar.txt +1 -1
  203. package/mcp-docs/web/components/ProgressCircle.txt +2 -2
  204. package/mcp-docs/web/components/Radio.txt +9 -7
  205. package/mcp-docs/web/components/RadioCell.txt +52 -52
  206. package/mcp-docs/web/components/RadioGroup.txt +3 -3
  207. package/mcp-docs/web/components/ReferenceLine.txt +2 -2
  208. package/mcp-docs/web/components/RemoteImage.txt +48 -48
  209. package/mcp-docs/web/components/RemoteImageGroup.txt +3 -3
  210. package/mcp-docs/web/components/RollingNumber.txt +51 -313
  211. package/mcp-docs/web/components/Scrubber.txt +2 -2
  212. package/mcp-docs/web/components/SearchInput.txt +56 -56
  213. package/mcp-docs/web/components/SectionHeader.txt +55 -55
  214. package/mcp-docs/web/components/SegmentedControl.txt +1 -1
  215. package/mcp-docs/web/components/SegmentedTabs.txt +49 -49
  216. package/mcp-docs/web/components/Select.txt +3 -3
  217. package/mcp-docs/web/components/SelectAlpha.txt +8 -8
  218. package/mcp-docs/web/components/SelectChip.txt +55 -55
  219. package/mcp-docs/web/components/SelectChipAlpha.txt +8 -8
  220. package/mcp-docs/web/components/SelectOption.txt +56 -56
  221. package/mcp-docs/web/components/Sidebar.txt +66 -56
  222. package/mcp-docs/web/components/SidebarItem.txt +10 -111
  223. package/mcp-docs/web/components/SidebarMoreMenu.txt +2 -2
  224. package/mcp-docs/web/components/Spacer.txt +55 -318
  225. package/mcp-docs/web/components/Sparkline.txt +3 -3
  226. package/mcp-docs/web/components/SparklineGradient.txt +3 -3
  227. package/mcp-docs/web/components/SparklineInteractive.txt +4 -4
  228. package/mcp-docs/web/components/SparklineInteractiveHeader.txt +4 -4
  229. package/mcp-docs/web/components/Spinner.txt +49 -49
  230. package/mcp-docs/web/components/SpotIcon.txt +1 -1
  231. package/mcp-docs/web/components/SpotRectangle.txt +1 -1
  232. package/mcp-docs/web/components/SpotSquare.txt +1 -1
  233. package/mcp-docs/web/components/Stepper.txt +53 -53
  234. package/mcp-docs/web/components/Switch.txt +21 -7
  235. package/mcp-docs/web/components/TabIndicator.txt +1 -1
  236. package/mcp-docs/web/components/TabLabel.txt +50 -50
  237. package/mcp-docs/web/components/TabNavigation.txt +48 -48
  238. package/mcp-docs/web/components/TabbedChips.txt +49 -49
  239. package/mcp-docs/web/components/TabbedChipsAlpha.txt +49 -49
  240. package/mcp-docs/web/components/Table.txt +4 -4
  241. package/mcp-docs/web/components/TableCaption.txt +1 -1
  242. package/mcp-docs/web/components/TableCell.txt +2 -2
  243. package/mcp-docs/web/components/TableRow.txt +1 -1
  244. package/mcp-docs/web/components/Tabs.txt +49 -49
  245. package/mcp-docs/web/components/Tag.txt +52 -52
  246. package/mcp-docs/web/components/Text.txt +49 -312
  247. package/mcp-docs/web/components/TextInput.txt +56 -56
  248. package/mcp-docs/web/components/ThemeProvider.txt +24 -4
  249. package/mcp-docs/web/components/TileButton.txt +48 -318
  250. package/mcp-docs/web/components/Toast.txt +51 -51
  251. package/mcp-docs/web/components/Tooltip.txt +3 -3
  252. package/mcp-docs/web/components/Tray.txt +2 -2
  253. package/mcp-docs/web/components/UpsellCard.txt +15 -14
  254. package/mcp-docs/web/components/VStack.txt +49 -312
  255. package/mcp-docs/web/components/XAxis.txt +1 -1
  256. package/mcp-docs/web/components/YAxis.txt +1 -1
  257. package/mcp-docs/web/getting-started/installation.txt +13 -5
  258. package/mcp-docs/web/hooks/useMergeRefs.txt +5 -5
  259. package/mcp-docs/web/routes.txt +1 -1
  260. package/package.json +1 -1
@@ -238,13 +238,13 @@ function MarginExample() {
238
238
 
239
239
  | Prop | Type | Required | Default | Description |
240
240
  | --- | --- | --- | --- | --- |
241
- | `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | Children to render within the Tag. |
241
+ | `children` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | Yes | `-` | Children to render within the Tag. |
242
242
  | `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
243
243
  | `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
244
244
  | `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
245
245
  | `animated` | `boolean` | No | `-` | - |
246
246
  | `aspectRatio` | `string \| number` | No | `-` | - |
247
- | `background` | `blue0 \| blue5 \| blue10 \| blue15 \| blue20 \| blue100 \| blue30 \| blue40 \| blue50 \| blue60 \| blue70 \| blue80 \| blue90 \| green0 \| green5 \| green10 \| green15 \| green20 \| green100 \| green30 \| green40 \| green50 \| green60 \| green70 \| green80 \| green90 \| orange0 \| orange5 \| orange10 \| orange15 \| orange20 \| orange100 \| orange30 \| orange40 \| orange50 \| orange60 \| orange70 \| orange80 \| orange90 \| yellow0 \| yellow5 \| yellow10 \| yellow15 \| yellow20 \| yellow100 \| yellow30 \| yellow40 \| yellow50 \| yellow60 \| yellow70 \| yellow80 \| yellow90 \| gray0 \| gray5 \| gray10 \| gray15 \| gray20 \| gray100 \| gray30 \| gray40 \| gray50 \| gray60 \| gray70 \| gray80 \| gray90 \| indigo0 \| indigo5 \| indigo10 \| indigo15 \| indigo20 \| indigo100 \| indigo30 \| indigo40 \| indigo50 \| indigo60 \| indigo70 \| indigo80 \| indigo90 \| pink0 \| pink5 \| pink10 \| pink15 \| pink20 \| pink100 \| pink30 \| pink40 \| pink50 \| pink60 \| pink70 \| pink80 \| pink90 \| purple0 \| purple5 \| purple10 \| purple15 \| purple20 \| purple100 \| purple30 \| purple40 \| purple50 \| purple60 \| purple70 \| purple80 \| purple90 \| red0 \| red5 \| red10 \| red15 \| red20 \| red100 \| red30 \| red40 \| red50 \| red60 \| red70 \| red80 \| red90 \| teal0 \| teal5 \| teal10 \| teal15 \| teal20 \| teal100 \| teal30 \| teal40 \| teal50 \| teal60 \| teal70 \| teal80 \| teal90 \| chartreuse0 \| chartreuse5 \| chartreuse10 \| chartreuse15 \| chartreuse20 \| chartreuse100 \| chartreuse30 \| chartreuse40 \| chartreuse50 \| chartreuse60 \| chartreuse70 \| chartreuse80 \| chartreuse90` | No | `-` | - |
247
+ | `background` | `blue0 \| blue5 \| blue10 \| blue15 \| blue20 \| blue100 \| blue40 \| blue30 \| blue50 \| blue60 \| blue70 \| blue80 \| blue90 \| green0 \| green5 \| green10 \| green15 \| green20 \| green100 \| green40 \| green30 \| green50 \| green60 \| green70 \| green80 \| green90 \| orange0 \| orange5 \| orange10 \| orange15 \| orange20 \| orange100 \| orange40 \| orange30 \| orange50 \| orange60 \| orange70 \| orange80 \| orange90 \| yellow0 \| yellow5 \| yellow10 \| yellow15 \| yellow20 \| yellow100 \| yellow40 \| yellow30 \| yellow50 \| yellow60 \| yellow70 \| yellow80 \| yellow90 \| gray0 \| gray5 \| gray10 \| gray15 \| gray20 \| gray100 \| gray40 \| gray30 \| gray50 \| gray60 \| gray70 \| gray80 \| gray90 \| indigo0 \| indigo5 \| indigo10 \| indigo15 \| indigo20 \| indigo100 \| indigo40 \| indigo30 \| indigo50 \| indigo60 \| indigo70 \| indigo80 \| indigo90 \| pink0 \| pink5 \| pink10 \| pink15 \| pink20 \| pink100 \| pink40 \| pink30 \| pink50 \| pink60 \| pink70 \| pink80 \| pink90 \| purple0 \| purple5 \| purple10 \| purple15 \| purple20 \| purple100 \| purple40 \| purple30 \| purple50 \| purple60 \| purple70 \| purple80 \| purple90 \| red0 \| red5 \| red10 \| red15 \| red20 \| red100 \| red40 \| red30 \| red50 \| red60 \| red70 \| red80 \| red90 \| teal0 \| teal5 \| teal10 \| teal15 \| teal20 \| teal100 \| teal40 \| teal30 \| teal50 \| teal60 \| teal70 \| teal80 \| teal90 \| chartreuse0 \| chartreuse5 \| chartreuse10 \| chartreuse15 \| chartreuse20 \| chartreuse100 \| chartreuse40 \| chartreuse30 \| chartreuse50 \| chartreuse60 \| chartreuse70 \| chartreuse80 \| chartreuse90` | No | `-` | - |
248
248
  | `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
249
249
  | `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
250
250
  | `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
@@ -263,18 +263,18 @@ function MarginExample() {
263
263
  | `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
264
264
  | `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
265
265
  | `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
266
- | `bottom` | `string \| number` | No | `-` | - |
267
- | `color` | `blue0 \| blue5 \| blue10 \| blue15 \| blue20 \| blue100 \| blue30 \| blue40 \| blue50 \| blue60 \| blue70 \| blue80 \| blue90 \| green0 \| green5 \| green10 \| green15 \| green20 \| green100 \| green30 \| green40 \| green50 \| green60 \| green70 \| green80 \| green90 \| orange0 \| orange5 \| orange10 \| orange15 \| orange20 \| orange100 \| orange30 \| orange40 \| orange50 \| orange60 \| orange70 \| orange80 \| orange90 \| yellow0 \| yellow5 \| yellow10 \| yellow15 \| yellow20 \| yellow100 \| yellow30 \| yellow40 \| yellow50 \| yellow60 \| yellow70 \| yellow80 \| yellow90 \| gray0 \| gray5 \| gray10 \| gray15 \| gray20 \| gray100 \| gray30 \| gray40 \| gray50 \| gray60 \| gray70 \| gray80 \| gray90 \| indigo0 \| indigo5 \| indigo10 \| indigo15 \| indigo20 \| indigo100 \| indigo30 \| indigo40 \| indigo50 \| indigo60 \| indigo70 \| indigo80 \| indigo90 \| pink0 \| pink5 \| pink10 \| pink15 \| pink20 \| pink100 \| pink30 \| pink40 \| pink50 \| pink60 \| pink70 \| pink80 \| pink90 \| purple0 \| purple5 \| purple10 \| purple15 \| purple20 \| purple100 \| purple30 \| purple40 \| purple50 \| purple60 \| purple70 \| purple80 \| purple90 \| red0 \| red5 \| red10 \| red15 \| red20 \| red100 \| red30 \| red40 \| red50 \| red60 \| red70 \| red80 \| red90 \| teal0 \| teal5 \| teal10 \| teal15 \| teal20 \| teal100 \| teal30 \| teal40 \| teal50 \| teal60 \| teal70 \| teal80 \| teal90 \| chartreuse0 \| chartreuse5 \| chartreuse10 \| chartreuse15 \| chartreuse20 \| chartreuse100 \| chartreuse30 \| chartreuse40 \| chartreuse50 \| chartreuse60 \| chartreuse70 \| chartreuse80 \| chartreuse90` | No | `-` | - |
266
+ | `bottom` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
267
+ | `color` | `blue0 \| blue5 \| blue10 \| blue15 \| blue20 \| blue100 \| blue40 \| blue30 \| blue50 \| blue60 \| blue70 \| blue80 \| blue90 \| green0 \| green5 \| green10 \| green15 \| green20 \| green100 \| green40 \| green30 \| green50 \| green60 \| green70 \| green80 \| green90 \| orange0 \| orange5 \| orange10 \| orange15 \| orange20 \| orange100 \| orange40 \| orange30 \| orange50 \| orange60 \| orange70 \| orange80 \| orange90 \| yellow0 \| yellow5 \| yellow10 \| yellow15 \| yellow20 \| yellow100 \| yellow40 \| yellow30 \| yellow50 \| yellow60 \| yellow70 \| yellow80 \| yellow90 \| gray0 \| gray5 \| gray10 \| gray15 \| gray20 \| gray100 \| gray40 \| gray30 \| gray50 \| gray60 \| gray70 \| gray80 \| gray90 \| indigo0 \| indigo5 \| indigo10 \| indigo15 \| indigo20 \| indigo100 \| indigo40 \| indigo30 \| indigo50 \| indigo60 \| indigo70 \| indigo80 \| indigo90 \| pink0 \| pink5 \| pink10 \| pink15 \| pink20 \| pink100 \| pink40 \| pink30 \| pink50 \| pink60 \| pink70 \| pink80 \| pink90 \| purple0 \| purple5 \| purple10 \| purple15 \| purple20 \| purple100 \| purple40 \| purple30 \| purple50 \| purple60 \| purple70 \| purple80 \| purple90 \| red0 \| red5 \| red10 \| red15 \| red20 \| red100 \| red40 \| red30 \| red50 \| red60 \| red70 \| red80 \| red90 \| teal0 \| teal5 \| teal10 \| teal15 \| teal20 \| teal100 \| teal40 \| teal30 \| teal50 \| teal60 \| teal70 \| teal80 \| teal90 \| chartreuse0 \| chartreuse5 \| chartreuse10 \| chartreuse15 \| chartreuse20 \| chartreuse100 \| chartreuse40 \| chartreuse30 \| chartreuse50 \| chartreuse60 \| chartreuse70 \| chartreuse80 \| chartreuse90` | No | `-` | - |
268
268
  | `colorScheme` | `blue \| green \| yellow \| gray \| purple \| red` | No | `blue` | Specify the colorScheme of the Tag |
269
- | `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
269
+ | `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
270
270
  | `dangerouslySetBackground` | `string` | No | `-` | - |
271
- | `display` | `flex \| none` | No | `-` | - |
271
+ | `display` | `flex \| none \| contents` | No | `-` | - |
272
272
  | `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
273
273
  | `emphasis` | `low \| high` | No | `'low' when informational intent, 'high' when promotional intent` | Specify the emphasis of the Tag. |
274
- | `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Set the end node |
275
- | `endIcon` | `key \| search \| pin \| filter \| visible \| continuous \| auto \| column \| loop \| image \| menu \| list \| application \| document \| grid \| group \| warning \| error \| account \| activity \| add \| addPeople \| advancedMarketSelector \| advancedTradeProduct \| affiliates \| airdrop \| airdropAlt \| airdropCoins \| airdropParachute \| alien \| allTimeHigh \| allocation \| annotation \| api \| apiPlug \| apothecary \| appSwitcher \| apple \| appleLogo \| arrowDown \| arrowLeft \| arrowRight \| arrowUp \| arrowsHorizontal \| arrowsUpDown \| arrowsVertical \| artwork \| assetHubProduct \| assetManagementProduct \| astronautHelmet \| atSign \| atomScience \| autoCar \| avatar \| average \| backArrow \| ballot \| ballotbox \| bandage \| bank \| barChartSimple \| barChartWindow \| base \| baseApps \| baseFeed \| baseLock \| baseNotification \| baseQuickBuy \| baseSquare \| baseTransact \| baseVerification \| baseWallet \| baseball \| basketball \| beaker \| beginningArrow \| bell \| bellCheck \| bellPlus \| birthcertificate \| block \| blockchain \| blog \| book \| bookmark \| borrowProduct \| boxing \| bridging \| briefcase \| briefcaseAlt \| browser \| bug \| building \| calculator \| calendar \| calendarBlank \| calendarDates \| calendarEmpty \| calendarHeart \| calendarMoney \| calendarStar \| camera \| candlesticks \| car \| card \| caret \| caretCollapse \| caretDown \| caretExpand \| caretLeft \| caretRight \| caretUp \| cash \| cashAustralianDollar \| cashBrazilianReal \| cashBrazillianReal \| cashCanadianDollar \| cashCoins \| cashEUR \| cashGBP \| cashIndonesianRupiah \| cashJPY \| cashPhilippinePeso \| cashPolishZloty \| cashRupee \| cashSingaporeDollar \| cashSwissFranc \| cashThaiBaht \| cashTurkishLira \| cashUSD \| cashUaeDirham \| cashVietnameseDong \| chainLink \| chartBar \| chartCandles \| chartLine \| chartPie \| chartPieCircle \| chartVolume \| chatBotAgent \| chatBubble \| chatRequests \| checkboxChecked \| checkboxEmpty \| checkmark \| chess \| circleCheckmark \| circleCross \| circulatingSupply \| city \| clipboard \| clock \| clockOutline \| close \| closeCaption \| clothing \| cloud \| cloudPartial \| cloudProduct \| cluster \| coinbase \| coinbaseCardProduct \| coinbaseOne \| coinbaseOneCard \| coinbaseOneLogo \| coinbaseRewards \| coinsCrypto \| collapse \| collectibles \| collection \| comment \| commentPlus \| commerceProduct \| compass \| complianceProduct \| compose \| computerChip \| concierge \| conciergeBell \| config \| convert \| copy \| corporation \| creatorCoin \| cricket \| cross \| crossTrade \| crypto \| cryptobasics \| crystalBall \| crystalBallInsight \| currencies \| custodyProduct \| dashboard \| dataMarketplaceProduct \| dataStack \| defi \| delegateProduct \| deposit \| derivatives \| derivativesProduct \| derivativesProductNew \| developerAPIProduct \| developerPlatformProduct \| dex \| diagonalDownArrow \| diagonalRightArrow \| diagonalUpArrow \| diamond \| diamondIncentives \| dinnerPlate \| directDeposit \| directDepositIcon \| disabledPhone \| discordLogo \| distribution \| documentation \| dot \| doubleChevronRight \| downArrow \| download \| drag \| drops \| earn \| earnProduct \| earnRewards \| earthquake \| educationBook \| educationPencil \| email \| endArrow \| entertainment \| ethereum \| eventContracts \| exchangeProduct \| exclamationMark \| expand \| expandAddress \| expandAll \| externalLink \| eye \| faceScan \| faces \| factory \| faucet \| fib \| filmStrip \| filterLineStack \| fingerprint \| flame \| folder \| folderArrow \| folderOpen \| followAdd \| following \| football \| fork \| forwardArrow \| fscsProtection \| gab \| games \| gaming \| gasFees \| gasFeesAlt \| gauge \| gaugeEmpty \| gaugeHigh \| gaugeHighLow \| gaugeHighMid \| gaugeLow \| gaugeLowHigh \| gaugeLowMid \| gaugeMedium \| gavel \| gear \| generalCharacter \| ghost \| gif \| giftBox \| giftCard \| gitHubLogo \| globe \| golf \| googleLogo \| greenEnergy \| hamburger \| hammer \| heart \| helpCenterProduct \| helpCenterQuestionMark \| hiddenEye \| hockey \| home \| horizontalLine \| hospital \| hospitalCross \| hurricane \| ideal \| identityCard \| info \| initiator \| instagramLogo \| instantUnstakingClock \| institute \| institutionalProduct \| interest \| invisible \| invoice \| keyboard \| laptop \| leadChart \| leadCoin \| learningRewardsProduct \| light \| lightbulb \| lightning \| lightningBolt \| lineChartCrypto \| location \| lock \| login \| logout \| magnifyingGlass \| marketCap \| medal \| megaphone \| metaverse \| microphone \| microphoneCordless \| microscope \| mint \| minus \| mma \| moneyCardCoin \| moon \| more \| moreVertical \| motorsport \| music \| musicArticles \| needle \| newsFeed \| newsletter \| nft \| nftBuy \| nftOffer \| nftProduct \| nftSale \| noRocket \| noWifi \| nodeProduct \| oil \| options \| orderBook \| orderHistory \| outline \| overPredictions \| pFPS \| paperAirplane \| paperclip \| participate \| participateProduct \| passKey \| passport \| pause \| pay \| payProduct \| paymentCard \| payments \| payouts \| paypal \| pencil \| peopleGroup \| peopleStar \| percentage \| perpetualSwap \| phone \| pieChartData \| pieChartWithArrow \| pillBottle \| pillCapsule \| plane \| planet \| play \| playbutton \| plusMinus \| podiumStar \| politicsBuilding \| politicsCandidate \| politicsFlag \| politicsGavel \| politicsPodium \| politicsStar \| powerTool \| priceAlerts \| priceAlertsCheck \| primePoduct \| privateClientProduct \| proProduct \| profile \| protection \| pulse \| pyramid \| qrCode \| qrCodeAlt \| queryTransact \| questionMark \| quotation \| rain \| ratingsCheck \| ratingsChecks \| ratingsStar \| reCenter \| rectangle \| recurring \| refresh \| regulated \| regulatedFutures \| report \| rewardsProduct \| ribbon \| robot \| rocket \| rocketShip \| rollingSpot \| rosettaProduct \| rottenTomato \| royalty \| safe \| save \| savingsBank \| scanQrCode \| scienceAtom \| scienceBeaker \| scienceMoon \| securityKey \| securityShield \| seen \| sendReceive \| setPinCode \| settings \| share \| shield \| shieldOutline \| shoe \| shoppingCart \| signinProduct \| singleCoin \| singleNote \| singlecloud \| smartContract \| snow \| soccer \| socialChat \| socialReshare \| socialShare \| sofort \| sortDoubleArrow \| sortDown \| sortDownCenter \| sortUp \| sortUpCenter \| soundOff \| soundOn \| sparkle \| speaker \| speechBubble \| stableCoin \| stablecoinStack \| staggeredList \| stake \| staking \| star \| starAward \| starBubble \| starTrophy \| statusDot \| step0 \| step1 \| step2 \| step3 \| step4 \| step5 \| step6 \| step7 \| step8 \| step9 \| strategy \| sun \| support \| tag \| taxes \| taxesReceipt \| telephone \| tennis \| test \| thermometer \| thumbsDown \| thumbsDownOutline \| thumbsUp \| thumbsUpOutline \| tokenLaunchCoin \| tokenLaunchRocket \| tokenSales \| tornado \| trading \| transactions \| trashCan \| trophy \| trophyCup \| tshirt \| tv \| tvStand \| twitterLogo \| ultility \| umbrella \| underPredictions \| undo \| unfollowPeople \| unknown \| unlock \| upArrow \| upload \| usdc \| venturesProduct \| verifiedBadge \| verifiedPools \| verticalLine \| virus \| waasProduct \| wallet \| walletLogo \| walletProduct \| webhooks \| wellness \| wifi \| wind \| wireTransfer \| withdraw \| wrapToken \| xLogo` | No | `-` | Icon to render at the end of the tag. |
274
+ | `end` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Set the end node |
275
+ | `endIcon` | `filter \| search \| key \| pin \| visible \| continuous \| auto \| column \| loop \| image \| menu \| list \| application \| document \| grid \| group \| warning \| error \| account \| activity \| add \| addPeople \| advancedMarketSelector \| advancedTradeProduct \| affiliates \| airdrop \| airdropAlt \| airdropCoins \| airdropParachute \| alien \| allTimeHigh \| allocation \| annotation \| api \| apiPlug \| apothecary \| appSwitcher \| apple \| appleLogo \| arrowDown \| arrowLeft \| arrowRight \| arrowUp \| arrowsHorizontal \| arrowsUpDown \| arrowsVertical \| artwork \| assetHubProduct \| assetManagementProduct \| astronautHelmet \| atSign \| atomScience \| autoCar \| avatar \| average \| backArrow \| ballot \| ballotbox \| bandage \| bank \| barChartSimple \| barChartWindow \| base \| baseApps \| baseFeed \| baseLock \| baseNotification \| baseQuickBuy \| baseSquare \| baseTransact \| baseVerification \| baseWallet \| baseball \| basketball \| beaker \| beginningArrow \| bell \| bellCheck \| bellPlus \| birthcertificate \| block \| blockchain \| blog \| book \| bookmark \| borrowProduct \| boxing \| bridging \| briefcase \| briefcaseAlt \| browser \| bug \| building \| calculator \| calendar \| calendarBlank \| calendarDates \| calendarEmpty \| calendarHeart \| calendarMoney \| calendarStar \| camera \| candlesticks \| car \| card \| caret \| caretCollapse \| caretDown \| caretExpand \| caretLeft \| caretRight \| caretUp \| cash \| cashAustralianDollar \| cashBrazilianReal \| cashBrazillianReal \| cashCanadianDollar \| cashCoins \| cashEUR \| cashGBP \| cashIndonesianRupiah \| cashJPY \| cashPhilippinePeso \| cashPolishZloty \| cashRupee \| cashSingaporeDollar \| cashSwissFranc \| cashThaiBaht \| cashTurkishLira \| cashUSD \| cashUaeDirham \| cashVietnameseDong \| chainLink \| chartBar \| chartCandles \| chartLine \| chartPie \| chartPieCircle \| chartVolume \| chatBotAgent \| chatBubble \| chatRequests \| checkboxChecked \| checkboxEmpty \| checkmark \| chess \| circleCheckmark \| circleCross \| circulatingSupply \| city \| clipboard \| clock \| clockOutline \| close \| closeCaption \| clothing \| cloud \| cloudPartial \| cloudProduct \| cluster \| coinbase \| coinbaseCardProduct \| coinbaseOne \| coinbaseOneCard \| coinbaseOneLogo \| coinbaseRewards \| coinsCrypto \| collapse \| collectibles \| collection \| comment \| commentPlus \| commerceProduct \| compass \| complianceProduct \| compose \| computerChip \| concierge \| conciergeBell \| config \| convert \| copy \| corporation \| creatorCoin \| cricket \| cross \| crossTrade \| crypto \| cryptobasics \| crystalBall \| crystalBallInsight \| currencies \| custodyProduct \| dashboard \| dataMarketplaceProduct \| dataStack \| defi \| delegateProduct \| deposit \| derivatives \| derivativesProduct \| derivativesProductNew \| developerAPIProduct \| developerPlatformProduct \| dex \| diagonalDownArrow \| diagonalRightArrow \| diagonalUpArrow \| diamond \| diamondIncentives \| dinnerPlate \| directDeposit \| directDepositIcon \| disabledPhone \| discordLogo \| distribution \| documentation \| dot \| doubleChevronRight \| downArrow \| download \| drag \| drops \| earn \| earnProduct \| earnRewards \| earthquake \| educationBook \| educationPencil \| email \| endArrow \| entertainment \| ethereum \| eventContracts \| exchangeProduct \| exclamationMark \| expand \| expandAddress \| expandAll \| externalLink \| eye \| faceScan \| faces \| factory \| faucet \| fib \| filmStrip \| filterLineStack \| fingerprint \| flame \| folder \| folderArrow \| folderOpen \| followAdd \| following \| football \| fork \| forwardArrow \| fscsProtection \| gab \| games \| gaming \| gasFees \| gasFeesAlt \| gauge \| gaugeEmpty \| gaugeHigh \| gaugeHighLow \| gaugeHighMid \| gaugeLow \| gaugeLowHigh \| gaugeLowMid \| gaugeMedium \| gavel \| gear \| generalCharacter \| ghost \| gif \| giftBox \| giftCard \| gitHubLogo \| globe \| golf \| googleLogo \| greenEnergy \| hamburger \| hammer \| heart \| helpCenterProduct \| helpCenterQuestionMark \| hiddenEye \| hockey \| home \| horizontalLine \| hospital \| hospitalCross \| hurricane \| ideal \| identityCard \| info \| initiator \| instagramLogo \| instantUnstakingClock \| institute \| institutionalProduct \| interest \| invisible \| invoice \| keyboard \| laptop \| leadChart \| leadCoin \| learningRewardsProduct \| light \| lightbulb \| lightning \| lightningBolt \| lineChartCrypto \| location \| lock \| login \| logout \| magnifyingGlass \| marketCap \| medal \| megaphone \| metaverse \| microphone \| microphoneCordless \| microscope \| mint \| minus \| mma \| moneyCardCoin \| moon \| more \| moreVertical \| motorsport \| music \| musicArticles \| needle \| newsFeed \| newsletter \| nft \| nftBuy \| nftOffer \| nftProduct \| nftSale \| noRocket \| noWifi \| nodeProduct \| oil \| options \| orderBook \| orderHistory \| outline \| overPredictions \| pFPS \| paperAirplane \| paperclip \| participate \| participateProduct \| passKey \| passport \| pause \| pay \| payProduct \| paymentCard \| payments \| payouts \| paypal \| pencil \| peopleGroup \| peopleStar \| percentage \| perpetualSwap \| phone \| pieChartData \| pieChartWithArrow \| pillBottle \| pillCapsule \| plane \| planet \| play \| playbutton \| plusMinus \| podiumStar \| politicsBuilding \| politicsCandidate \| politicsFlag \| politicsGavel \| politicsPodium \| politicsStar \| powerTool \| priceAlerts \| priceAlertsCheck \| primePoduct \| privateClientProduct \| proProduct \| profile \| protection \| pulse \| pyramid \| qrCode \| qrCodeAlt \| queryTransact \| questionMark \| quotation \| rain \| ratingsCheck \| ratingsChecks \| ratingsStar \| reCenter \| rectangle \| recurring \| refresh \| regulated \| regulatedFutures \| report \| rewardsProduct \| ribbon \| robot \| rocket \| rocketShip \| rollingSpot \| rosettaProduct \| rottenTomato \| royalty \| safe \| save \| savingsBank \| scanQrCode \| scienceAtom \| scienceBeaker \| scienceMoon \| securityKey \| securityShield \| seen \| sendReceive \| setPinCode \| settings \| share \| shield \| shieldOutline \| shoe \| shoppingCart \| signinProduct \| singleCoin \| singleNote \| singlecloud \| smartContract \| snow \| soccer \| socialChat \| socialReshare \| socialShare \| sofort \| sortDoubleArrow \| sortDown \| sortDownCenter \| sortUp \| sortUpCenter \| soundOff \| soundOn \| sparkle \| speaker \| speechBubble \| stableCoin \| stablecoinStack \| staggeredList \| stake \| staking \| star \| starAward \| starBubble \| starTrophy \| statusDot \| step0 \| step1 \| step2 \| step3 \| step4 \| step5 \| step6 \| step7 \| step8 \| step9 \| strategy \| sun \| support \| tag \| taxes \| taxesReceipt \| telephone \| tennis \| test \| thermometer \| thumbsDown \| thumbsDownOutline \| thumbsUp \| thumbsUpOutline \| tokenLaunchCoin \| tokenLaunchRocket \| tokenSales \| tornado \| trading \| transactions \| trashCan \| trophy \| trophyCup \| tshirt \| tv \| tvStand \| twitterLogo \| ultility \| umbrella \| underPredictions \| undo \| unfollowPeople \| unknown \| unlock \| upArrow \| upload \| usdc \| venturesProduct \| verifiedBadge \| verifiedPools \| verticalLine \| virus \| waasProduct \| wallet \| walletLogo \| walletProduct \| webhooks \| wellness \| wifi \| wind \| wireTransfer \| withdraw \| wrapToken \| xLogo` | No | `-` | Icon to render at the end of the tag. |
276
276
  | `endIconActive` | `boolean` | No | `-` | Whether the end icon is active |
277
- | `flexBasis` | `string \| number` | No | `-` | - |
277
+ | `flexBasis` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
278
278
  | `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
279
279
  | `flexGrow` | `number` | No | `-` | - |
280
280
  | `flexShrink` | `number` | No | `-` | - |
@@ -283,24 +283,24 @@ function MarginExample() {
283
283
  | `fontFamily` | `inherit \| FontFamily` | No | `-` | - |
284
284
  | `fontSize` | `inherit \| FontSize` | No | `-` | - |
285
285
  | `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
286
- | `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
287
- | `height` | `string \| number` | No | `-` | - |
286
+ | `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
287
+ | `height` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
288
288
  | `intent` | `promotional \| informational` | No | `informational` | Specify the intent of the Tag |
289
289
  | `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
290
290
  | `key` | `Key \| null` | No | `-` | - |
291
- | `left` | `string \| number` | No | `-` | - |
291
+ | `left` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
292
292
  | `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
293
- | `margin` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
294
- | `marginBottom` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
295
- | `marginEnd` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
296
- | `marginStart` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
297
- | `marginTop` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
298
- | `marginX` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
299
- | `marginY` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
300
- | `maxHeight` | `string \| number` | No | `-` | - |
301
- | `maxWidth` | `string \| number` | No | `-` | Setting a custom max width for this tag will enable text truncation |
302
- | `minHeight` | `string \| number` | No | `-` | - |
303
- | `minWidth` | `string \| number` | No | `-` | - |
293
+ | `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
294
+ | `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
295
+ | `marginEnd` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
296
+ | `marginStart` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
297
+ | `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
298
+ | `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
299
+ | `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
300
+ | `maxHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
301
+ | `maxWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | Setting a custom max width for this tag will enable text truncation |
302
+ | `minHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
303
+ | `minWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
304
304
  | `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
305
305
  | `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
306
306
  | `onPointerDown` | `((event: PointerEvent) => void)` | No | `-` | - |
@@ -315,31 +315,31 @@ function MarginExample() {
315
315
  | `onPointerUpCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
316
316
  | `opacity` | `number \| AnimatedNode` | No | `-` | - |
317
317
  | `overflow` | `visible \| hidden \| scroll` | No | `-` | - |
318
- | `padding` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
319
- | `paddingBottom` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
320
- | `paddingEnd` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
321
- | `paddingStart` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
322
- | `paddingTop` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
323
- | `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
324
- | `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
318
+ | `padding` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
319
+ | `paddingBottom` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
320
+ | `paddingEnd` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
321
+ | `paddingStart` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
322
+ | `paddingTop` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
323
+ | `paddingX` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
324
+ | `paddingY` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
325
325
  | `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
326
- | `position` | `static \| relative \| fixed \| absolute \| sticky` | No | `-` | - |
327
- | `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
328
- | `right` | `string \| number` | No | `-` | - |
329
- | `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
330
- | `start` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Set the start node |
331
- | `startIcon` | `key \| search \| pin \| filter \| visible \| continuous \| auto \| column \| loop \| image \| menu \| list \| application \| document \| grid \| group \| warning \| error \| account \| activity \| add \| addPeople \| advancedMarketSelector \| advancedTradeProduct \| affiliates \| airdrop \| airdropAlt \| airdropCoins \| airdropParachute \| alien \| allTimeHigh \| allocation \| annotation \| api \| apiPlug \| apothecary \| appSwitcher \| apple \| appleLogo \| arrowDown \| arrowLeft \| arrowRight \| arrowUp \| arrowsHorizontal \| arrowsUpDown \| arrowsVertical \| artwork \| assetHubProduct \| assetManagementProduct \| astronautHelmet \| atSign \| atomScience \| autoCar \| avatar \| average \| backArrow \| ballot \| ballotbox \| bandage \| bank \| barChartSimple \| barChartWindow \| base \| baseApps \| baseFeed \| baseLock \| baseNotification \| baseQuickBuy \| baseSquare \| baseTransact \| baseVerification \| baseWallet \| baseball \| basketball \| beaker \| beginningArrow \| bell \| bellCheck \| bellPlus \| birthcertificate \| block \| blockchain \| blog \| book \| bookmark \| borrowProduct \| boxing \| bridging \| briefcase \| briefcaseAlt \| browser \| bug \| building \| calculator \| calendar \| calendarBlank \| calendarDates \| calendarEmpty \| calendarHeart \| calendarMoney \| calendarStar \| camera \| candlesticks \| car \| card \| caret \| caretCollapse \| caretDown \| caretExpand \| caretLeft \| caretRight \| caretUp \| cash \| cashAustralianDollar \| cashBrazilianReal \| cashBrazillianReal \| cashCanadianDollar \| cashCoins \| cashEUR \| cashGBP \| cashIndonesianRupiah \| cashJPY \| cashPhilippinePeso \| cashPolishZloty \| cashRupee \| cashSingaporeDollar \| cashSwissFranc \| cashThaiBaht \| cashTurkishLira \| cashUSD \| cashUaeDirham \| cashVietnameseDong \| chainLink \| chartBar \| chartCandles \| chartLine \| chartPie \| chartPieCircle \| chartVolume \| chatBotAgent \| chatBubble \| chatRequests \| checkboxChecked \| checkboxEmpty \| checkmark \| chess \| circleCheckmark \| circleCross \| circulatingSupply \| city \| clipboard \| clock \| clockOutline \| close \| closeCaption \| clothing \| cloud \| cloudPartial \| cloudProduct \| cluster \| coinbase \| coinbaseCardProduct \| coinbaseOne \| coinbaseOneCard \| coinbaseOneLogo \| coinbaseRewards \| coinsCrypto \| collapse \| collectibles \| collection \| comment \| commentPlus \| commerceProduct \| compass \| complianceProduct \| compose \| computerChip \| concierge \| conciergeBell \| config \| convert \| copy \| corporation \| creatorCoin \| cricket \| cross \| crossTrade \| crypto \| cryptobasics \| crystalBall \| crystalBallInsight \| currencies \| custodyProduct \| dashboard \| dataMarketplaceProduct \| dataStack \| defi \| delegateProduct \| deposit \| derivatives \| derivativesProduct \| derivativesProductNew \| developerAPIProduct \| developerPlatformProduct \| dex \| diagonalDownArrow \| diagonalRightArrow \| diagonalUpArrow \| diamond \| diamondIncentives \| dinnerPlate \| directDeposit \| directDepositIcon \| disabledPhone \| discordLogo \| distribution \| documentation \| dot \| doubleChevronRight \| downArrow \| download \| drag \| drops \| earn \| earnProduct \| earnRewards \| earthquake \| educationBook \| educationPencil \| email \| endArrow \| entertainment \| ethereum \| eventContracts \| exchangeProduct \| exclamationMark \| expand \| expandAddress \| expandAll \| externalLink \| eye \| faceScan \| faces \| factory \| faucet \| fib \| filmStrip \| filterLineStack \| fingerprint \| flame \| folder \| folderArrow \| folderOpen \| followAdd \| following \| football \| fork \| forwardArrow \| fscsProtection \| gab \| games \| gaming \| gasFees \| gasFeesAlt \| gauge \| gaugeEmpty \| gaugeHigh \| gaugeHighLow \| gaugeHighMid \| gaugeLow \| gaugeLowHigh \| gaugeLowMid \| gaugeMedium \| gavel \| gear \| generalCharacter \| ghost \| gif \| giftBox \| giftCard \| gitHubLogo \| globe \| golf \| googleLogo \| greenEnergy \| hamburger \| hammer \| heart \| helpCenterProduct \| helpCenterQuestionMark \| hiddenEye \| hockey \| home \| horizontalLine \| hospital \| hospitalCross \| hurricane \| ideal \| identityCard \| info \| initiator \| instagramLogo \| instantUnstakingClock \| institute \| institutionalProduct \| interest \| invisible \| invoice \| keyboard \| laptop \| leadChart \| leadCoin \| learningRewardsProduct \| light \| lightbulb \| lightning \| lightningBolt \| lineChartCrypto \| location \| lock \| login \| logout \| magnifyingGlass \| marketCap \| medal \| megaphone \| metaverse \| microphone \| microphoneCordless \| microscope \| mint \| minus \| mma \| moneyCardCoin \| moon \| more \| moreVertical \| motorsport \| music \| musicArticles \| needle \| newsFeed \| newsletter \| nft \| nftBuy \| nftOffer \| nftProduct \| nftSale \| noRocket \| noWifi \| nodeProduct \| oil \| options \| orderBook \| orderHistory \| outline \| overPredictions \| pFPS \| paperAirplane \| paperclip \| participate \| participateProduct \| passKey \| passport \| pause \| pay \| payProduct \| paymentCard \| payments \| payouts \| paypal \| pencil \| peopleGroup \| peopleStar \| percentage \| perpetualSwap \| phone \| pieChartData \| pieChartWithArrow \| pillBottle \| pillCapsule \| plane \| planet \| play \| playbutton \| plusMinus \| podiumStar \| politicsBuilding \| politicsCandidate \| politicsFlag \| politicsGavel \| politicsPodium \| politicsStar \| powerTool \| priceAlerts \| priceAlertsCheck \| primePoduct \| privateClientProduct \| proProduct \| profile \| protection \| pulse \| pyramid \| qrCode \| qrCodeAlt \| queryTransact \| questionMark \| quotation \| rain \| ratingsCheck \| ratingsChecks \| ratingsStar \| reCenter \| rectangle \| recurring \| refresh \| regulated \| regulatedFutures \| report \| rewardsProduct \| ribbon \| robot \| rocket \| rocketShip \| rollingSpot \| rosettaProduct \| rottenTomato \| royalty \| safe \| save \| savingsBank \| scanQrCode \| scienceAtom \| scienceBeaker \| scienceMoon \| securityKey \| securityShield \| seen \| sendReceive \| setPinCode \| settings \| share \| shield \| shieldOutline \| shoe \| shoppingCart \| signinProduct \| singleCoin \| singleNote \| singlecloud \| smartContract \| snow \| soccer \| socialChat \| socialReshare \| socialShare \| sofort \| sortDoubleArrow \| sortDown \| sortDownCenter \| sortUp \| sortUpCenter \| soundOff \| soundOn \| sparkle \| speaker \| speechBubble \| stableCoin \| stablecoinStack \| staggeredList \| stake \| staking \| star \| starAward \| starBubble \| starTrophy \| statusDot \| step0 \| step1 \| step2 \| step3 \| step4 \| step5 \| step6 \| step7 \| step8 \| step9 \| strategy \| sun \| support \| tag \| taxes \| taxesReceipt \| telephone \| tennis \| test \| thermometer \| thumbsDown \| thumbsDownOutline \| thumbsUp \| thumbsUpOutline \| tokenLaunchCoin \| tokenLaunchRocket \| tokenSales \| tornado \| trading \| transactions \| trashCan \| trophy \| trophyCup \| tshirt \| tv \| tvStand \| twitterLogo \| ultility \| umbrella \| underPredictions \| undo \| unfollowPeople \| unknown \| unlock \| upArrow \| upload \| usdc \| venturesProduct \| verifiedBadge \| verifiedPools \| verticalLine \| virus \| waasProduct \| wallet \| walletLogo \| walletProduct \| webhooks \| wellness \| wifi \| wind \| wireTransfer \| withdraw \| wrapToken \| xLogo` | No | `-` | Icon to render at the start of the tag. |
326
+ | `position` | `absolute \| relative \| static` | No | `-` | - |
327
+ | `ref` | `null \| RefObject<View \| null> \| (instance: View \| null) => void \| (() => VoidOrUndefinedOnly)` | No | `-` | Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). |
328
+ | `right` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
329
+ | `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
330
+ | `start` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Set the start node |
331
+ | `startIcon` | `filter \| search \| key \| pin \| visible \| continuous \| auto \| column \| loop \| image \| menu \| list \| application \| document \| grid \| group \| warning \| error \| account \| activity \| add \| addPeople \| advancedMarketSelector \| advancedTradeProduct \| affiliates \| airdrop \| airdropAlt \| airdropCoins \| airdropParachute \| alien \| allTimeHigh \| allocation \| annotation \| api \| apiPlug \| apothecary \| appSwitcher \| apple \| appleLogo \| arrowDown \| arrowLeft \| arrowRight \| arrowUp \| arrowsHorizontal \| arrowsUpDown \| arrowsVertical \| artwork \| assetHubProduct \| assetManagementProduct \| astronautHelmet \| atSign \| atomScience \| autoCar \| avatar \| average \| backArrow \| ballot \| ballotbox \| bandage \| bank \| barChartSimple \| barChartWindow \| base \| baseApps \| baseFeed \| baseLock \| baseNotification \| baseQuickBuy \| baseSquare \| baseTransact \| baseVerification \| baseWallet \| baseball \| basketball \| beaker \| beginningArrow \| bell \| bellCheck \| bellPlus \| birthcertificate \| block \| blockchain \| blog \| book \| bookmark \| borrowProduct \| boxing \| bridging \| briefcase \| briefcaseAlt \| browser \| bug \| building \| calculator \| calendar \| calendarBlank \| calendarDates \| calendarEmpty \| calendarHeart \| calendarMoney \| calendarStar \| camera \| candlesticks \| car \| card \| caret \| caretCollapse \| caretDown \| caretExpand \| caretLeft \| caretRight \| caretUp \| cash \| cashAustralianDollar \| cashBrazilianReal \| cashBrazillianReal \| cashCanadianDollar \| cashCoins \| cashEUR \| cashGBP \| cashIndonesianRupiah \| cashJPY \| cashPhilippinePeso \| cashPolishZloty \| cashRupee \| cashSingaporeDollar \| cashSwissFranc \| cashThaiBaht \| cashTurkishLira \| cashUSD \| cashUaeDirham \| cashVietnameseDong \| chainLink \| chartBar \| chartCandles \| chartLine \| chartPie \| chartPieCircle \| chartVolume \| chatBotAgent \| chatBubble \| chatRequests \| checkboxChecked \| checkboxEmpty \| checkmark \| chess \| circleCheckmark \| circleCross \| circulatingSupply \| city \| clipboard \| clock \| clockOutline \| close \| closeCaption \| clothing \| cloud \| cloudPartial \| cloudProduct \| cluster \| coinbase \| coinbaseCardProduct \| coinbaseOne \| coinbaseOneCard \| coinbaseOneLogo \| coinbaseRewards \| coinsCrypto \| collapse \| collectibles \| collection \| comment \| commentPlus \| commerceProduct \| compass \| complianceProduct \| compose \| computerChip \| concierge \| conciergeBell \| config \| convert \| copy \| corporation \| creatorCoin \| cricket \| cross \| crossTrade \| crypto \| cryptobasics \| crystalBall \| crystalBallInsight \| currencies \| custodyProduct \| dashboard \| dataMarketplaceProduct \| dataStack \| defi \| delegateProduct \| deposit \| derivatives \| derivativesProduct \| derivativesProductNew \| developerAPIProduct \| developerPlatformProduct \| dex \| diagonalDownArrow \| diagonalRightArrow \| diagonalUpArrow \| diamond \| diamondIncentives \| dinnerPlate \| directDeposit \| directDepositIcon \| disabledPhone \| discordLogo \| distribution \| documentation \| dot \| doubleChevronRight \| downArrow \| download \| drag \| drops \| earn \| earnProduct \| earnRewards \| earthquake \| educationBook \| educationPencil \| email \| endArrow \| entertainment \| ethereum \| eventContracts \| exchangeProduct \| exclamationMark \| expand \| expandAddress \| expandAll \| externalLink \| eye \| faceScan \| faces \| factory \| faucet \| fib \| filmStrip \| filterLineStack \| fingerprint \| flame \| folder \| folderArrow \| folderOpen \| followAdd \| following \| football \| fork \| forwardArrow \| fscsProtection \| gab \| games \| gaming \| gasFees \| gasFeesAlt \| gauge \| gaugeEmpty \| gaugeHigh \| gaugeHighLow \| gaugeHighMid \| gaugeLow \| gaugeLowHigh \| gaugeLowMid \| gaugeMedium \| gavel \| gear \| generalCharacter \| ghost \| gif \| giftBox \| giftCard \| gitHubLogo \| globe \| golf \| googleLogo \| greenEnergy \| hamburger \| hammer \| heart \| helpCenterProduct \| helpCenterQuestionMark \| hiddenEye \| hockey \| home \| horizontalLine \| hospital \| hospitalCross \| hurricane \| ideal \| identityCard \| info \| initiator \| instagramLogo \| instantUnstakingClock \| institute \| institutionalProduct \| interest \| invisible \| invoice \| keyboard \| laptop \| leadChart \| leadCoin \| learningRewardsProduct \| light \| lightbulb \| lightning \| lightningBolt \| lineChartCrypto \| location \| lock \| login \| logout \| magnifyingGlass \| marketCap \| medal \| megaphone \| metaverse \| microphone \| microphoneCordless \| microscope \| mint \| minus \| mma \| moneyCardCoin \| moon \| more \| moreVertical \| motorsport \| music \| musicArticles \| needle \| newsFeed \| newsletter \| nft \| nftBuy \| nftOffer \| nftProduct \| nftSale \| noRocket \| noWifi \| nodeProduct \| oil \| options \| orderBook \| orderHistory \| outline \| overPredictions \| pFPS \| paperAirplane \| paperclip \| participate \| participateProduct \| passKey \| passport \| pause \| pay \| payProduct \| paymentCard \| payments \| payouts \| paypal \| pencil \| peopleGroup \| peopleStar \| percentage \| perpetualSwap \| phone \| pieChartData \| pieChartWithArrow \| pillBottle \| pillCapsule \| plane \| planet \| play \| playbutton \| plusMinus \| podiumStar \| politicsBuilding \| politicsCandidate \| politicsFlag \| politicsGavel \| politicsPodium \| politicsStar \| powerTool \| priceAlerts \| priceAlertsCheck \| primePoduct \| privateClientProduct \| proProduct \| profile \| protection \| pulse \| pyramid \| qrCode \| qrCodeAlt \| queryTransact \| questionMark \| quotation \| rain \| ratingsCheck \| ratingsChecks \| ratingsStar \| reCenter \| rectangle \| recurring \| refresh \| regulated \| regulatedFutures \| report \| rewardsProduct \| ribbon \| robot \| rocket \| rocketShip \| rollingSpot \| rosettaProduct \| rottenTomato \| royalty \| safe \| save \| savingsBank \| scanQrCode \| scienceAtom \| scienceBeaker \| scienceMoon \| securityKey \| securityShield \| seen \| sendReceive \| setPinCode \| settings \| share \| shield \| shieldOutline \| shoe \| shoppingCart \| signinProduct \| singleCoin \| singleNote \| singlecloud \| smartContract \| snow \| soccer \| socialChat \| socialReshare \| socialShare \| sofort \| sortDoubleArrow \| sortDown \| sortDownCenter \| sortUp \| sortUpCenter \| soundOff \| soundOn \| sparkle \| speaker \| speechBubble \| stableCoin \| stablecoinStack \| staggeredList \| stake \| staking \| star \| starAward \| starBubble \| starTrophy \| statusDot \| step0 \| step1 \| step2 \| step3 \| step4 \| step5 \| step6 \| step7 \| step8 \| step9 \| strategy \| sun \| support \| tag \| taxes \| taxesReceipt \| telephone \| tennis \| test \| thermometer \| thumbsDown \| thumbsDownOutline \| thumbsUp \| thumbsUpOutline \| tokenLaunchCoin \| tokenLaunchRocket \| tokenSales \| tornado \| trading \| transactions \| trashCan \| trophy \| trophyCup \| tshirt \| tv \| tvStand \| twitterLogo \| ultility \| umbrella \| underPredictions \| undo \| unfollowPeople \| unknown \| unlock \| upArrow \| upload \| usdc \| venturesProduct \| verifiedBadge \| verifiedPools \| verticalLine \| virus \| waasProduct \| wallet \| walletLogo \| walletProduct \| webhooks \| wellness \| wifi \| wind \| wireTransfer \| withdraw \| wrapToken \| xLogo` | No | `-` | Icon to render at the start of the tag. |
332
332
  | `startIconActive` | `boolean` | No | `-` | Whether the start icon is active |
333
- | `style` | `false \| RegisteredStyle<ViewStyle> \| Value \| AnimatedInterpolation<string \| number> \| WithAnimatedObject<ViewStyle> \| WithAnimatedArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>> \| readonly (Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>)[]> \| null` | No | `-` | - |
334
- | `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID Used to locate this element in unit and end-to-end tests. Used to locate this view in end-to-end tests. |
333
+ | `style` | `false \| \| RegisteredStyle<ViewStyle> \| Value \| AnimatedInterpolation<string \| number> \| WithAnimatedObject<ViewStyle> \| WithAnimatedArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>> \| readonly (Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>)[]> \| null` | No | `-` | - |
334
+ | `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID Used to locate this view in end-to-end tests. |
335
335
  | `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
336
336
  | `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
337
337
  | `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
338
338
  | `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
339
- | `top` | `string \| number` | No | `-` | - |
340
- | `transform` | `string \| (({ scaleX: AnimatableNumericValue; } & { scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { scaleX?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ perspective: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
339
+ | `top` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
340
+ | `transform` | `string \| readonly (({ scaleX: AnimatableNumericValue; } & { scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { scaleX?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ perspective: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
341
341
  | `userSelect` | `none \| auto \| text \| contain \| all` | No | `-` | - |
342
- | `width` | `string \| number` | No | `-` | - |
342
+ | `width` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
343
343
  | `zIndex` | `number` | No | `-` | - |
344
344
 
345
345
 
@@ -71,34 +71,25 @@ All text components support a few numeric typography styles, overflow, text tran
71
71
 
72
72
  ### A11y
73
73
 
74
- On the web, there are different HTML elements to wrap texts with to communicated semantic meanings of the strings. Therefore, CDS does not make any assumptions about the semantic of the text but ask developers to choose the approriate semantic HTML element via the `as` prop.
74
+ On mobile, `Text` automatically sets `accessibilityRole="header"` for display and title font variants (`display1`, `display2`, `display3`, `title1`, `title2`). This ensures screen readers correctly identify these elements as headings without requiring any additional props.
75
75
 
76
76
  ```jsx
77
- <Text font="display1" as="h1">Display</Text>
77
+ // accessibilityRole="header" is applied automatically
78
+ <Text font="title1">Page Title</Text>
78
79
 
79
- // If we want large text but not as the page title
80
- <Text font="display1" as="p">Display</Text>
80
+ // Other font variants do not receive a default accessibilityRole
81
+ <Text font="body">Regular body text</Text>
81
82
  ```
82
83
 
83
- ### Headings
84
+ You can override the default `accessibilityRole` if needed:
84
85
 
85
- Headings help users understand the hierarchical page organization. All pages on the web should at least have a `<h1>` level heading providing the title or summary of the page. Screen readers users prefer that only the document title be `<h1>` on a page. Headings should NOT be used inside tables header elements (`<th>`).
86
-
87
- When using headings, it is confusing to screen reader users to skip heading levels to be more specific (ex. do not go from `<h2>` to ` <h4>`). However, it is permissible to use a higher heading level after a lower heading level, i.e. from `<h4>`to`<h2>`, if the outline of the page calls for it.
88
-
89
- One common misconception is that headings for a web app have consistent typography across different pages. That is not an accessibility requirement or a design guideline that our product designers follow. Therefore, based on the content layouts, product engineers should determine the approriate semantic tags to use for each string and choose the proper heading element when the texts convey hierarchical content information.
90
-
91
- Yale has a detailed [web accessibility article](https://usability.yale.edu/web-accessibility/articles/headings#:~:text=One%20of%20the%20most%20common,Do%20not%20overuse%20headings) about how to use headings if you want to learn more.
92
-
93
- In a nutshell, you can reference the following for the most common text semantics.
86
+ ```jsx
87
+ // Override to remove the default header role
88
+ <Text font="title1" accessibilityRole="none">Decorative Title</Text>
94
89
 
95
- - `h1` for page title (exactly one per page)
96
- - `h2`-`h4` for hierarchical section headings (CDS does not foresee the need for heading level 5 or 6 in Coinbase products).
97
- - `p` for paragraphs of text with default block display. It can be wrapped inside `blockquote`, `li`, or `label` elements for additional semantics.
98
- - `li` for bullet points in a list.
99
- - `time`, `abbr`, `sup`, `kbd`, etc, for granular semantics.
100
- - `pre` and `code` for preformatted code blocks.
101
- - `span` when no semantics are required (within buttons for example) and it also has default inline display.
90
+ // Explicitly set a different role
91
+ <Text font="title1" accessibilityRole="summary">Summary Section</Text>
92
+ ```
102
93
 
103
94
  ### With Links
104
95
 
@@ -137,19 +128,19 @@ When applying padding to a `Text` component that contains instances of `Link`, w
137
128
  | `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
138
129
  | `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
139
130
  | `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
140
- | `bottom` | `string \| number` | No | `-` | - |
131
+ | `bottom` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
141
132
  | `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 | `-` | - |
142
- | `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
133
+ | `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
143
134
  | `dangerouslySetBackground` | `string \| OpaqueColorValue` | No | `-` | - |
144
135
  | `dangerouslySetColor` | `string \| OpaqueColorValue` | No | `-` | - |
145
136
  | `dataDetectorType` | `link \| none \| all \| email \| phoneNumber \| null` | No | `-` | Determines the types of data converted to clickable URLs in the text element. By default no data types are detected. |
146
137
  | `disabled` | `boolean` | No | `-` | Add disabled opacity style to text Specifies the disabled state of the text view for testing purposes. |
147
- | `display` | `flex \| none` | No | `-` | - |
138
+ | `display` | `flex \| none \| contents` | No | `-` | - |
148
139
  | `dynamicTypeRamp` | `title1 \| title2 \| title3 \| headline \| body \| caption2 \| caption1 \| footnote \| subheadline \| callout \| largeTitle` | No | `-` | The Dynamic Type scale ramp to apply to this element on iOS. |
149
140
  | `elevation` | `0 \| 1 \| 2` | No | `-` | - |
150
- | `ellipsize` | `middle \| head \| tail \| clip` | No | `-` | Choose ellipsize mode. |
151
- | `ellipsizeMode` | `middle \| head \| tail \| clip` | No | `-` | This can be one of the following values: - head - The line is displayed so that the end fits in the container and the missing text at the beginning of the line is indicated by an ellipsis glyph. e.g., ...wxyz - middle - The line is displayed so that the beginning and end fit in the container and the missing text in the middle is indicated by an ellipsis glyph. ab...yz - tail - The line is displayed so that the beginning fits in the container and the missing text at the end of the line is indicated by an ellipsis glyph. e.g., abcd... - clip - Lines are not drawn past the edge of the text container. The default is tail. numberOfLines must be set in conjunction with this prop. > clip is working only for iOS |
152
- | `flexBasis` | `string \| number` | No | `-` | - |
141
+ | `ellipsize` | `middle \| clip \| head \| tail` | No | `-` | Choose ellipsize mode. |
142
+ | `ellipsizeMode` | `middle \| clip \| head \| tail` | No | `-` | This can be one of the following values: - head - The line is displayed so that the end fits in the container and the missing text at the beginning of the line is indicated by an ellipsis glyph. e.g., ...wxyz - middle - The line is displayed so that the beginning and end fit in the container and the missing text in the middle is indicated by an ellipsis glyph. ab...yz - tail - The line is displayed so that the beginning fits in the container and the missing text at the end of the line is indicated by an ellipsis glyph. e.g., abcd... - clip - Lines are not drawn past the edge of the text container. The default is tail. numberOfLines must be set in conjunction with this prop. > clip is working only for iOS |
143
+ | `flexBasis` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
153
144
  | `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
154
145
  | `flexGrow` | `number` | No | `-` | - |
155
146
  | `flexShrink` | `number` | No | `-` | - |
@@ -158,27 +149,27 @@ When applying padding to a `Text` component that contains instances of `Link`, w
158
149
  | `fontFamily` | `inherit \| FontFamily` | No | `-` | - |
159
150
  | `fontSize` | `inherit \| FontSize` | No | `-` | - |
160
151
  | `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
161
- | `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
162
- | `height` | `string \| number` | No | `-` | - |
152
+ | `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
153
+ | `height` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
163
154
  | `id` | `string` | No | `-` | Used to reference react managed views from native code. |
164
155
  | `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
165
156
  | `key` | `Key \| null` | No | `-` | - |
166
- | `left` | `string \| number` | No | `-` | - |
167
- | `lineBreakMode` | `middle \| head \| tail \| clip` | No | `-` | Line Break mode. Works only with numberOfLines. clip is working only for iOS |
157
+ | `left` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
158
+ | `lineBreakMode` | `middle \| clip \| head \| tail` | No | `-` | Line Break mode. Works only with numberOfLines. clip is working only for iOS |
168
159
  | `lineBreakStrategyIOS` | `none \| standard \| hangul-word \| push-out` | No | `-` | Set line break strategy on iOS. |
169
160
  | `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
170
- | `margin` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
171
- | `marginBottom` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
172
- | `marginEnd` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
173
- | `marginStart` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
174
- | `marginTop` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
175
- | `marginX` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
176
- | `marginY` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
161
+ | `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
162
+ | `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
163
+ | `marginEnd` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
164
+ | `marginStart` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
165
+ | `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
166
+ | `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
167
+ | `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
177
168
  | `maxFontSizeMultiplier` | `number \| null` | No | `-` | Specifies largest possible scale a font can reach when allowFontScaling is enabled. Possible values: - null/undefined (default): inherit from the parent node or the global default (0) - 0: no max, ignore parent/global default - >= 1: sets the maxFontSizeMultiplier of this node to this value |
178
- | `maxHeight` | `string \| number` | No | `-` | - |
179
- | `maxWidth` | `string \| number` | No | `-` | - |
180
- | `minHeight` | `string \| number` | No | `-` | - |
181
- | `minWidth` | `string \| number` | No | `-` | - |
169
+ | `maxHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
170
+ | `maxWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
171
+ | `minHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
172
+ | `minWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
182
173
  | `minimumFontScale` | `number` | No | `-` | Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0). |
183
174
  | `mono` | `boolean` | No | `-` | Use monospace font family. |
184
175
  | `nativeID` | `string` | No | `-` | Used to reference react managed views from native code. |
@@ -189,24 +180,26 @@ When applying padding to a `Text` component that contains instances of `Link`, w
189
180
  | `onPress` | `((event: GestureResponderEvent) => void)` | No | `-` | This function is called on press. Text intrinsically supports press handling with a default highlight state (which can be disabled with suppressHighlighting). |
190
181
  | `onPressIn` | `((event: GestureResponderEvent) => void)` | No | `-` | - |
191
182
  | `onPressOut` | `((event: GestureResponderEvent) => void)` | No | `-` | - |
192
- | `onTextLayout` | `((event: NativeSyntheticEvent<TextLayoutEventData>) => void)` | No | `-` | Invoked on Text layout |
183
+ | `onTextLayout` | `((event: TextLayoutEvent) => void)` | No | `-` | Invoked on Text layout |
193
184
  | `opacity` | `number \| AnimatedNode` | No | `-` | - |
194
185
  | `overflow` | `visible \| hidden \| scroll` | No | `-` | - |
195
- | `padding` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
196
- | `paddingBottom` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
197
- | `paddingEnd` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
198
- | `paddingStart` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
199
- | `paddingTop` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
200
- | `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
201
- | `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
202
- | `position` | `static \| relative \| fixed \| absolute \| sticky` | No | `-` | - |
203
- | `ref` | `((instance: Text \| null) => void) \| RefObject<Text> \| null` | No | `-` | - |
186
+ | `padding` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
187
+ | `paddingBottom` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
188
+ | `paddingEnd` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
189
+ | `paddingStart` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
190
+ | `paddingTop` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
191
+ | `paddingX` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
192
+ | `paddingY` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
193
+ | `pointerEvents` | `box-none \| none \| box-only \| auto` | No | `-` | Controls how touch events are handled. Similar to Views pointerEvents. |
194
+ | `position` | `absolute \| relative \| static` | No | `-` | - |
195
+ | `pressRetentionOffset` | `{ top: number; left: number; bottom: number; right: number; }` | No | `-` | Defines how far your touch may move off of the button, before deactivating the button. |
196
+ | `ref` | `null \| RefObject<View \| null> \| (instance: View \| null) => void \| (() => VoidOrUndefinedOnly)` | No | `-` | Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). |
204
197
  | `renderEmptyNode` | `boolean` | No | `-` | - |
205
- | `right` | `string \| number` | No | `-` | - |
206
- | `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
198
+ | `right` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
199
+ | `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
207
200
  | `selectable` | `boolean` | No | `-` | Lets the user select text, to use the native copy and paste functionality. |
208
201
  | `selectionColor` | `string \| OpaqueColorValue` | No | `-` | The highlight color of the text. |
209
- | `style` | `false \| Value \| AnimatedInterpolation<string \| number> \| RegisteredStyle<TextStyle> \| WithAnimatedObject<TextStyle> \| WithAnimatedArray<Falsy \| TextStyle \| RegisteredStyle<TextStyle> \| RecursiveArray<Falsy \| TextStyle \| RegisteredStyle<TextStyle>> \| readonly (Falsy \| TextStyle \| RegisteredStyle<TextStyle>)[]> \| null` | No | `-` | - |
202
+ | `style` | `false \| \| Value \| AnimatedInterpolation<string \| number> \| RegisteredStyle<TextStyle> \| WithAnimatedObject<TextStyle> \| WithAnimatedArray<Falsy \| TextStyle \| RegisteredStyle<TextStyle> \| RecursiveArray<Falsy \| TextStyle \| RegisteredStyle<TextStyle>> \| readonly (Falsy \| TextStyle \| RegisteredStyle<TextStyle>)[]> \| null` | No | `-` | - |
210
203
  | `suppressHighlighting` | `boolean` | No | `-` | When true, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press down. |
211
204
  | `tabularNumbers` | `boolean` | No | `false` | Activates the set of figures where numbers are all of the same size, allowing them to be easily aligned. |
212
205
  | `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Used to locate this view in end-to-end tests. |
@@ -215,11 +208,11 @@ When applying padding to a `Text` component that contains instances of `Link`, w
215
208
  | `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
216
209
  | `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
217
210
  | `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
218
- | `top` | `string \| number` | No | `-` | - |
219
- | `transform` | `string \| (({ scaleX: AnimatableNumericValue; } & { scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { scaleX?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ perspective: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
211
+ | `top` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
212
+ | `transform` | `string \| readonly (({ scaleX: AnimatableNumericValue; } & { scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { scaleX?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ perspective: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
220
213
  | `underline` | `boolean` | No | `false` | Set text decoration to underline. |
221
214
  | `userSelect` | `none \| auto \| text \| contain \| all` | No | `-` | - |
222
- | `width` | `string \| number` | No | `-` | - |
215
+ | `width` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
223
216
  | `zIndex` | `number` | No | `-` | - |
224
217
 
225
218