@coinbase/cds-mcp-server 8.21.8 → 8.22.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 (153) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/mcp-docs/mobile/components/AreaChart.txt +39 -37
  3. package/mcp-docs/mobile/components/Avatar.txt +18 -18
  4. package/mcp-docs/mobile/components/AvatarButton.txt +19 -19
  5. package/mcp-docs/mobile/components/Banner.txt +62 -23
  6. package/mcp-docs/mobile/components/BarChart.txt +37 -35
  7. package/mcp-docs/mobile/components/Box.txt +18 -18
  8. package/mcp-docs/mobile/components/BrowserBar.txt +18 -18
  9. package/mcp-docs/mobile/components/Button.txt +19 -19
  10. package/mcp-docs/mobile/components/Carousel.txt +18 -18
  11. package/mcp-docs/mobile/components/CartesianChart.txt +75 -44
  12. package/mcp-docs/mobile/components/CheckboxCell.txt +19 -19
  13. package/mcp-docs/mobile/components/Chip.txt +20 -20
  14. package/mcp-docs/mobile/components/Coachmark.txt +18 -18
  15. package/mcp-docs/mobile/components/ContentCard.txt +18 -18
  16. package/mcp-docs/mobile/components/ContentCardBody.txt +18 -18
  17. package/mcp-docs/mobile/components/ContentCardFooter.txt +18 -18
  18. package/mcp-docs/mobile/components/ContentCardHeader.txt +18 -18
  19. package/mcp-docs/mobile/components/ContentCell.txt +18 -18
  20. package/mcp-docs/mobile/components/ControlGroup.txt +18 -18
  21. package/mcp-docs/mobile/components/DatePicker.txt +1 -1
  22. package/mcp-docs/mobile/components/Divider.txt +18 -18
  23. package/mcp-docs/mobile/components/DotCount.txt +1 -1
  24. package/mcp-docs/mobile/components/DotSymbol.txt +2 -2
  25. package/mcp-docs/mobile/components/Fallback.txt +18 -18
  26. package/mcp-docs/mobile/components/HStack.txt +18 -18
  27. package/mcp-docs/mobile/components/Icon.txt +6 -0
  28. package/mcp-docs/mobile/components/IconButton.txt +19 -19
  29. package/mcp-docs/mobile/components/InputChip.txt +20 -20
  30. package/mcp-docs/mobile/components/Interactable.txt +19 -19
  31. package/mcp-docs/mobile/components/LineChart.txt +1608 -898
  32. package/mcp-docs/mobile/components/Link.txt +18 -18
  33. package/mcp-docs/mobile/components/ListCell.txt +37 -19
  34. package/mcp-docs/mobile/components/Lottie.txt +18 -18
  35. package/mcp-docs/mobile/components/MediaChip.txt +20 -20
  36. package/mcp-docs/mobile/components/MultiContentModule.txt +18 -18
  37. package/mcp-docs/mobile/components/NavigationTitle.txt +18 -18
  38. package/mcp-docs/mobile/components/NavigationTitleSelect.txt +18 -18
  39. package/mcp-docs/mobile/components/Numpad.txt +18 -18
  40. package/mcp-docs/mobile/components/Overlay.txt +18 -18
  41. package/mcp-docs/mobile/components/PageFooter.txt +17 -17
  42. package/mcp-docs/mobile/components/PageHeader.txt +17 -17
  43. package/mcp-docs/mobile/components/PeriodSelector.txt +26 -26
  44. package/mcp-docs/mobile/components/Point.txt +203 -98
  45. package/mcp-docs/mobile/components/Pressable.txt +19 -19
  46. package/mcp-docs/mobile/components/ProgressBar.txt +1 -1
  47. package/mcp-docs/mobile/components/ProgressBarWithFixedLabels.txt +1 -1
  48. package/mcp-docs/mobile/components/ProgressBarWithFloatLabel.txt +1 -1
  49. package/mcp-docs/mobile/components/ProgressCircle.txt +1 -1
  50. package/mcp-docs/mobile/components/RadioCell.txt +19 -19
  51. package/mcp-docs/mobile/components/ReferenceLine.txt +197 -54
  52. package/mcp-docs/mobile/components/RollingNumber.txt +18 -18
  53. package/mcp-docs/mobile/components/Scrubber.txt +597 -79
  54. package/mcp-docs/mobile/components/SegmentedTabs.txt +18 -18
  55. package/mcp-docs/mobile/components/SelectAlpha.txt +1 -1
  56. package/mcp-docs/mobile/components/SelectChip.txt +20 -20
  57. package/mcp-docs/mobile/components/SlideButton.txt +19 -19
  58. package/mcp-docs/mobile/components/Spacer.txt +6 -6
  59. package/mcp-docs/mobile/components/SparklineInteractive.txt +3 -3
  60. package/mcp-docs/mobile/components/Spinner.txt +1 -1
  61. package/mcp-docs/mobile/components/Stepper.txt +18 -18
  62. package/mcp-docs/mobile/components/TabLabel.txt +18 -18
  63. package/mcp-docs/mobile/components/TabNavigation.txt +18 -18
  64. package/mcp-docs/mobile/components/TabbedChips.txt +18 -18
  65. package/mcp-docs/mobile/components/TabbedChipsAlpha.txt +1 -1
  66. package/mcp-docs/mobile/components/Tabs.txt +18 -18
  67. package/mcp-docs/mobile/components/Tag.txt +18 -18
  68. package/mcp-docs/mobile/components/Text.txt +18 -18
  69. package/mcp-docs/mobile/components/Toast.txt +18 -18
  70. package/mcp-docs/mobile/components/Tooltip.txt +17 -1
  71. package/mcp-docs/mobile/components/TopNavBar.txt +18 -18
  72. package/mcp-docs/mobile/components/VStack.txt +18 -18
  73. package/mcp-docs/mobile/components/XAxis.txt +86 -24
  74. package/mcp-docs/mobile/components/YAxis.txt +75 -17
  75. package/mcp-docs/mobile/routes.txt +1 -1
  76. package/mcp-docs/web/components/AreaChart.txt +523 -301
  77. package/mcp-docs/web/components/Avatar.txt +27 -27
  78. package/mcp-docs/web/components/AvatarButton.txt +28 -28
  79. package/mcp-docs/web/components/Banner.txt +71 -32
  80. package/mcp-docs/web/components/BarChart.txt +182 -313
  81. package/mcp-docs/web/components/Box.txt +28 -28
  82. package/mcp-docs/web/components/Button.txt +28 -28
  83. package/mcp-docs/web/components/Calendar.txt +27 -27
  84. package/mcp-docs/web/components/Carousel.txt +27 -27
  85. package/mcp-docs/web/components/CartesianChart.txt +62 -309
  86. package/mcp-docs/web/components/CheckboxCell.txt +25 -25
  87. package/mcp-docs/web/components/Chip.txt +27 -27
  88. package/mcp-docs/web/components/Coachmark.txt +27 -27
  89. package/mcp-docs/web/components/ContainedAssetCard.txt +27 -27
  90. package/mcp-docs/web/components/ContentCard.txt +28 -28
  91. package/mcp-docs/web/components/ContentCardBody.txt +28 -28
  92. package/mcp-docs/web/components/ContentCardFooter.txt +28 -28
  93. package/mcp-docs/web/components/ContentCardHeader.txt +28 -28
  94. package/mcp-docs/web/components/ContentCell.txt +28 -28
  95. package/mcp-docs/web/components/ControlGroup.txt +27 -27
  96. package/mcp-docs/web/components/Divider.txt +27 -27
  97. package/mcp-docs/web/components/Fallback.txt +28 -28
  98. package/mcp-docs/web/components/FloatingAssetCard.txt +27 -27
  99. package/mcp-docs/web/components/Grid.txt +28 -28
  100. package/mcp-docs/web/components/GridColumn.txt +27 -27
  101. package/mcp-docs/web/components/HStack.txt +28 -28
  102. package/mcp-docs/web/components/Icon.txt +27 -27
  103. package/mcp-docs/web/components/IconButton.txt +28 -28
  104. package/mcp-docs/web/components/InputChip.txt +27 -27
  105. package/mcp-docs/web/components/Interactable.txt +28 -28
  106. package/mcp-docs/web/components/LineChart.txt +1598 -1116
  107. package/mcp-docs/web/components/Link.txt +28 -28
  108. package/mcp-docs/web/components/ListCell.txt +48 -30
  109. package/mcp-docs/web/components/Lottie.txt +27 -27
  110. package/mcp-docs/web/components/MediaChip.txt +27 -27
  111. package/mcp-docs/web/components/Modal.txt +27 -27
  112. package/mcp-docs/web/components/ModalBody.txt +27 -27
  113. package/mcp-docs/web/components/ModalFooter.txt +27 -27
  114. package/mcp-docs/web/components/ModalHeader.txt +27 -27
  115. package/mcp-docs/web/components/MultiContentModule.txt +28 -28
  116. package/mcp-docs/web/components/NavigationBar.txt +5 -5
  117. package/mcp-docs/web/components/NudgeCard.txt +27 -27
  118. package/mcp-docs/web/components/Overlay.txt +27 -27
  119. package/mcp-docs/web/components/PageFooter.txt +26 -26
  120. package/mcp-docs/web/components/PageHeader.txt +26 -26
  121. package/mcp-docs/web/components/Pagination.txt +27 -27
  122. package/mcp-docs/web/components/PeriodSelector.txt +49 -49
  123. package/mcp-docs/web/components/Point.txt +228 -79
  124. package/mcp-docs/web/components/Pressable.txt +28 -28
  125. package/mcp-docs/web/components/RadioCell.txt +25 -25
  126. package/mcp-docs/web/components/ReferenceLine.txt +208 -60
  127. package/mcp-docs/web/components/RemoteImage.txt +26 -26
  128. package/mcp-docs/web/components/RollingNumber.txt +28 -28
  129. package/mcp-docs/web/components/Scrubber.txt +463 -68
  130. package/mcp-docs/web/components/SectionHeader.txt +27 -27
  131. package/mcp-docs/web/components/SegmentedTabs.txt +27 -27
  132. package/mcp-docs/web/components/SelectChip.txt +27 -27
  133. package/mcp-docs/web/components/SelectOption.txt +27 -27
  134. package/mcp-docs/web/components/Sidebar.txt +27 -27
  135. package/mcp-docs/web/components/SidebarItem.txt +27 -27
  136. package/mcp-docs/web/components/Spacer.txt +34 -34
  137. package/mcp-docs/web/components/SparklineInteractive.txt +1 -1
  138. package/mcp-docs/web/components/Spinner.txt +27 -27
  139. package/mcp-docs/web/components/Stepper.txt +27 -27
  140. package/mcp-docs/web/components/TabLabel.txt +27 -27
  141. package/mcp-docs/web/components/TabNavigation.txt +26 -26
  142. package/mcp-docs/web/components/TabbedChips.txt +26 -26
  143. package/mcp-docs/web/components/TabbedChipsAlpha.txt +1 -1
  144. package/mcp-docs/web/components/Tabs.txt +27 -27
  145. package/mcp-docs/web/components/Tag.txt +27 -27
  146. package/mcp-docs/web/components/Text.txt +28 -28
  147. package/mcp-docs/web/components/TileButton.txt +28 -28
  148. package/mcp-docs/web/components/Toast.txt +27 -27
  149. package/mcp-docs/web/components/Tooltip.txt +17 -1
  150. package/mcp-docs/web/components/VStack.txt +28 -28
  151. package/mcp-docs/web/components/XAxis.txt +86 -22
  152. package/mcp-docs/web/components/YAxis.txt +133 -89
  153. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -8,6 +8,18 @@ All notable changes to this project will be documented in this file.
8
8
 
9
9
  <!-- template-start -->
10
10
 
11
+ ## 8.22.2 ((11/26/2025, 04:22 PM PST))
12
+
13
+ This is an artificial version bump with no new change.
14
+
15
+ ## 8.22.1 ((11/24/2025, 02:58 PM PST))
16
+
17
+ This is an artificial version bump with no new change.
18
+
19
+ ## 8.22.0 ((11/24/2025, 10:45 AM PST))
20
+
21
+ This is an artificial version bump with no new change.
22
+
11
23
  ## 8.21.8 ((11/21/2025, 11:25 AM PST))
12
24
 
13
25
  This is an artificial version bump with no new change.
@@ -26,7 +26,6 @@ AreaChart is a cartesian chart variant that allows for easy visualization of sta
26
26
  ]}
27
27
  type="gradient"
28
28
  showLines
29
- curve="monotone"
30
29
  showYAxis
31
30
  yAxis={{
32
31
  showGrid: true,
@@ -48,7 +47,6 @@ AreaChart is a cartesian chart variant that allows for easy visualization of sta
48
47
  ]}
49
48
  type="gradient"
50
49
  showLines
51
- curve="monotone"
52
50
  />
53
51
  ```
54
52
 
@@ -151,7 +149,7 @@ You can have different area styles for each series.
151
149
  | --- | --- | --- | --- | --- |
152
150
  | `AreaComponent` | `AreaComponent` | No | `-` | Component to render the area. Takes precedence over the type prop if provided. |
153
151
  | `LineComponent` | `LineComponent` | No | `-` | Component to render the line. Takes precedence over the type prop if provided. |
154
- | `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
152
+ | `alignContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly \| stretch` | No | `-` | - |
155
153
  | `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
156
154
  | `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
157
155
  | `allowOverflowGestures` | `boolean` | No | `-` | Allows continuous gestures on the chart to continue outside the bounds of the chart element. |
@@ -179,37 +177,39 @@ You can have different area styles for each series.
179
177
  | `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
180
178
  | `bottom` | `string \| number` | No | `-` | - |
181
179
  | `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 | `-` | - |
182
- | `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
183
- | `curve` | `bump \| catmullRom \| linear \| linearClosed \| monotone \| natural \| step \| stepBefore \| stepAfter` | No | `'linear'` | The curve interpolation method to use for the line. |
180
+ | `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
181
+ | `connectNulls` | `boolean` | No | `-` | When true, the area is connected across null values. |
182
+ | `curve` | `bump \| catmullRom \| linear \| linearClosed \| monotone \| natural \| step \| stepBefore \| stepAfter` | No | `'bump'` | The curve interpolation method to use for the line. |
184
183
  | `dangerouslySetBackground` | `string` | No | `-` | - |
185
- | `display` | `flex \| none` | No | `-` | - |
184
+ | `display` | `none \| flex` | No | `-` | - |
186
185
  | `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
187
186
  | `enableScrubbing` | `boolean` | No | `-` | Enables scrubbing interactions. When true, allows scrubbing and makes scrubber components interactive. |
188
- | `fillOpacity` | `number` | No | `1` | Opacity of the area. |
187
+ | `fillOpacity` | `number` | No | `1` | Opacity of the area |
189
188
  | `flexBasis` | `string \| number` | No | `-` | - |
190
189
  | `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
191
190
  | `flexGrow` | `number` | No | `-` | - |
192
191
  | `flexShrink` | `number` | No | `-` | - |
193
192
  | `flexWrap` | `wrap \| nowrap \| wrap-reverse` | No | `-` | - |
194
193
  | `font` | `inherit \| FontFamily` | No | `-` | - |
195
- | `fontFamily` | `inherit \| FontFamily` | No | `-` | - |
196
- | `fontSize` | `inherit \| FontSize` | No | `-` | - |
194
+ | `fontFamilies` | `string[]` | No | `-` | Default font families to use within ChartText. If not provided, will be the default for the system. |
195
+ | `fontProvider` | `SkTypefaceFontProvider` | No | `-` | Skia font provider to allow for custom fonts. If not provided, the only available fonts will be those defined by the system. |
196
+ | `fontSize` | `FontSize \| inherit` | No | `-` | - |
197
197
  | `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
198
- | `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
199
- | `height` | `string \| number` | No | `-` | Chart height. If not provided, will use the containers measured height. |
198
+ | `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
199
+ | `height` | `string \| number` | No | `-` | - |
200
200
  | `inset` | `number \| Partial<ChartInset>` | No | `-` | Inset around the entire chart (outside the axes). |
201
201
  | `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
202
202
  | `key` | `Key \| null` | No | `-` | - |
203
203
  | `left` | `string \| number` | No | `-` | - |
204
204
  | `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
205
- | `lineType` | `solid \| dotted \| gradient` | No | `'solid'` | The type of line to render. |
206
- | `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
207
- | `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
208
- | `marginEnd` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
209
- | `marginStart` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
210
- | `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
211
- | `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
212
- | `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
205
+ | `lineType` | `solid \| dotted` | No | `'solid'` | The type of line to render. |
206
+ | `margin` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
207
+ | `marginBottom` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
208
+ | `marginEnd` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
209
+ | `marginStart` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
210
+ | `marginTop` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
211
+ | `marginX` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
212
+ | `marginY` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
213
213
  | `maxHeight` | `string \| number` | No | `-` | - |
214
214
  | `maxWidth` | `string \| number` | No | `-` | - |
215
215
  | `minHeight` | `string \| number` | No | `-` | - |
@@ -229,37 +229,39 @@ You can have different area styles for each series.
229
229
  | `onScrubberPositionChange` | `((index: number) => void) \| undefined` | No | `-` | Callback fired when the scrubber position changes. Receives the dataIndex of the scrubber or undefined when not scrubbing. |
230
230
  | `opacity` | `number \| AnimatedNode` | No | `-` | - |
231
231
  | `overflow` | `visible \| hidden \| scroll` | No | `-` | - |
232
- | `padding` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
233
- | `paddingBottom` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
234
- | `paddingEnd` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
235
- | `paddingStart` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
236
- | `paddingTop` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
237
- | `paddingX` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
238
- | `paddingY` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
232
+ | `padding` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
233
+ | `paddingBottom` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
234
+ | `paddingEnd` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
235
+ | `paddingStart` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
236
+ | `paddingTop` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
237
+ | `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
238
+ | `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
239
239
  | `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
240
- | `position` | `absolute \| relative \| static \| fixed \| sticky` | No | `-` | - |
240
+ | `position` | `static \| relative \| fixed \| absolute \| sticky` | No | `-` | - |
241
241
  | `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
242
242
  | `right` | `string \| number` | No | `-` | - |
243
- | `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
243
+ | `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
244
244
  | `series` | `AreaSeries[]` | No | `-` | Configuration objects that define how to visualize the data. Each series supports Area and Line component props for individual customization. |
245
245
  | `showLines` | `boolean` | No | `-` | Whether to show lines on top of the areas. Useful for stacked contexts to show the outline of each area. |
246
246
  | `showXAxis` | `boolean` | No | `-` | Whether to show the X axis. |
247
247
  | `showYAxis` | `boolean` | No | `-` | Whether to show the Y axis. |
248
248
  | `stacked` | `boolean` | No | `-` | Whether to stack the areas on top of each other. When true, each series builds cumulative values on top of the previous series. **Note**: Only applies to series data containing singular numbers (e.g., [10, 20, 30]). Series with [baseline, value] tuples (e.g., [[0, 10], [0, -5]]) will be skipped during stacking and rendered as-is. |
249
- | `strokeWidth` | `number` | No | `-` | - |
250
- | `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 | `-` | - |
249
+ | `strokeWidth` | `number` | No | `2` | Width of the line |
250
+ | `style` | `((false \| RegisteredStyle<ViewStyle> \| WithAnimatedObject<ViewStyle> \| Value \| AnimatedInterpolation<string \| number> \| WithAnimatedArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle> \| RecursiveArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>> \| readonly (ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>)[]>) & ((false \| RegisteredStyle<ViewStyle> \| WithAnimatedObject<ViewStyle> \| Value \| AnimatedInterpolation<string \| number> \| WithAnimatedArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle> \| RecursiveArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>> \| readonly (ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>)[]>) & (false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>>))) \| null` | No | `-` | Custom styles for the root element. |
251
+ | `styles` | `{ root?: StyleProp<ViewStyle>; chart?: StyleProp<ViewStyle>; }` | No | `-` | Custom styles for the component. |
251
252
  | `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. |
252
- | `textAlign` | `auto \| left \| right \| center \| justify` | No | `-` | - |
253
+ | `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
253
254
  | `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
254
- | `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
255
+ | `textDecorationStyle` | `solid \| double \| dotted \| dashed` | No | `-` | - |
255
256
  | `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
256
257
  | `top` | `string \| number` | No | `-` | - |
257
- | `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 | `-` | - |
258
+ | `transform` | `string \| (({ perspective: AnimatableNumericValue; } & { rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleX: AnimatableNumericValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
259
+ | `transition` | `{ type: timing; } & TimingConfig \| { type: spring; } & { stiffness?: number \| undefined; overshootClamping?: boolean \| undefined; restDisplacementThreshold?: number \| undefined; restSpeedThreshold?: number \| undefined; velocity?: number \| undefined; reduceMotion?: ReduceMotion \| undefined; } & { mass?: number \| undefined; damping?: number \| undefined; duration?: undefined; dampingRatio?: undefined; clamp?: undefined; } \| { type: spring; } & { stiffness?: number \| undefined; overshootClamping?: boolean \| undefined; restDisplacementThreshold?: number \| undefined; restSpeedThreshold?: number \| undefined; velocity?: number \| undefined; reduceMotion?: ReduceMotion \| undefined; } & { mass?: undefined; damping?: undefined; duration?: number \| undefined; dampingRatio?: number \| undefined; clamp?: { min?: number \| undefined; max?: number \| undefined; } \| undefined; }` | No | `-` | Transition configuration for path animations. |
258
260
  | `type` | `solid \| dotted \| gradient` | No | `'solid'` | The type of area to render. |
259
- | `userSelect` | `auto \| none \| text \| contain \| all` | No | `-` | - |
260
- | `width` | `string \| number` | No | `-` | Chart width. If not provided, will use the containers measured width. |
261
- | `xAxis` | `(Partial<AxisConfigProps> & AxisBaseProps & { className?: string; classNames?: { root?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; } & { position?: top \| bottom \| undefined; height?: number \| undefined; }) \| undefined` | No | `-` | - |
262
- | `yAxis` | `(Partial<AxisConfigProps> & AxisBaseProps & { className?: string; classNames?: { root?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; } & { axisId?: string \| undefined; position?: left \| right \| undefined; width?: number \| undefined; }) \| undefined` | No | `-` | - |
261
+ | `userSelect` | `none \| auto \| text \| contain \| all` | No | `-` | - |
262
+ | `width` | `string \| number` | No | `-` | - |
263
+ | `xAxis` | `(Partial<AxisConfigProps> & AxisBaseProps & { GridLineComponent?: LineComponent; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { position?: top \| bottom \| undefined; height?: number \| undefined; }) \| undefined` | No | `-` | Configuration for x-axis. Accepts axis config and axis props. To show the axis, set showXAxis to true. |
264
+ | `yAxis` | `(Partial<AxisConfigProps> & AxisBaseProps & { GridLineComponent?: LineComponent; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { axisId?: string \| undefined; position?: left \| right \| undefined; width?: number \| undefined; }) \| undefined` | No | `-` | Configuration for y-axis. Accepts axis config and axis props. To show the axis, set showYAxis to true. |
263
265
  | `zIndex` | `number` | No | `-` | - |
264
266
 
265
267
 
@@ -121,7 +121,7 @@ We've created a palette of identity colors using our CDS spectrum colors. When u
121
121
  | `bottom` | `string \| number` | No | `-` | - |
122
122
  | `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 | `-` | - |
123
123
  | `colorScheme` | `blue \| green \| orange \| yellow \| gray \| indigo \| pink \| purple \| red \| teal \| chartreuse` | No | `blue` | Override the default fallback background and border color |
124
- | `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
124
+ | `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
125
125
  | `dangerouslySetBackground` | `string` | No | `-` | - |
126
126
  | `dangerouslySetSize` | `number` | No | `-` | - |
127
127
  | `display` | `flex \| none` | No | `-` | - |
@@ -135,18 +135,18 @@ We've created a palette of identity colors using our CDS spectrum colors. When u
135
135
  | `fontFamily` | `inherit \| FontFamily` | No | `-` | - |
136
136
  | `fontSize` | `inherit \| FontSize` | No | `-` | - |
137
137
  | `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
138
- | `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
138
+ | `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
139
139
  | `height` | `string \| number` | No | `-` | - |
140
140
  | `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
141
141
  | `left` | `string \| number` | No | `-` | - |
142
142
  | `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
143
- | `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
144
- | `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
145
- | `marginEnd` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
146
- | `marginStart` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
147
- | `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
148
- | `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
149
- | `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
143
+ | `margin` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
144
+ | `marginBottom` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
145
+ | `marginEnd` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
146
+ | `marginStart` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
147
+ | `marginTop` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
148
+ | `marginX` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
149
+ | `marginY` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
150
150
  | `maxHeight` | `string \| number` | No | `-` | - |
151
151
  | `maxWidth` | `string \| number` | No | `-` | - |
152
152
  | `minHeight` | `string \| number` | No | `-` | - |
@@ -166,17 +166,17 @@ We've created a palette of identity colors using our CDS spectrum colors. When u
166
166
  | `onPointerUpCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
167
167
  | `opacity` | `number \| AnimatedNode` | No | `-` | - |
168
168
  | `overflow` | `visible \| hidden \| scroll` | No | `-` | - |
169
- | `padding` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
170
- | `paddingBottom` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
171
- | `paddingEnd` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
172
- | `paddingStart` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
173
- | `paddingTop` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
174
- | `paddingX` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
175
- | `paddingY` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
169
+ | `padding` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
170
+ | `paddingBottom` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
171
+ | `paddingEnd` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
172
+ | `paddingStart` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
173
+ | `paddingTop` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
174
+ | `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
175
+ | `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
176
176
  | `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
177
- | `position` | `absolute \| relative \| static \| fixed \| sticky` | No | `-` | - |
177
+ | `position` | `static \| relative \| fixed \| absolute \| sticky` | No | `-` | - |
178
178
  | `right` | `string \| number` | No | `-` | - |
179
- | `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
179
+ | `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
180
180
  | `shape` | `circle \| square \| hexagon` | No | `-` | Shape of Avatar. |
181
181
  | `size` | `s \| l \| m \| xl \| xxl \| xxxl` | No | `-` | Size for a given avatar. |
182
182
  | `src` | `string` | No | `-` | Absolute url to the image that should be shown in the Avatar. If no src is provided then a generic fallback image is used. |
@@ -152,9 +152,9 @@ AvatarButton can use fallback colors with names when no image source is provided
152
152
  | `bottom` | `string \| number` | No | `-` | - |
153
153
  | `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 | `-` | - |
154
154
  | `colorScheme` | `blue \| green \| orange \| yellow \| gray \| indigo \| pink \| purple \| red \| teal \| chartreuse` | No | `blue` | Override the default fallback background and border color |
155
- | `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
155
+ | `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
156
156
  | `compact` | `boolean` | No | `-` | Reduce the inner padding within the button itself. |
157
- | `contentStyle` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>>` | No | `-` | Apply animated styles to the inner container. |
157
+ | `contentStyle` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>>` | No | `-` | Apply animated styles to the inner container. |
158
158
  | `dangerouslySetBackground` | `string` | No | `-` | - |
159
159
  | `debounceTime` | `number` | No | `500` | The amount of time to wait (in milliseconds) before invoking the debounced function. This prop is used in conjunction with the disableDebounce prop. The debounce function is configured to be invoked as soon as its called, but subsequent calls within the debounceTime period will be ignored. |
160
160
  | `disableDebounce` | `boolean` | No | `-` | React Native is historically trash at debouncing touch events. This can cause a lot of unwanted behavior such as double navigations where we push a screen onto the stack 2 times. Debouncing the event 500 miliseconds, but taking the leading event prevents this effect and the accidental double-tap. |
@@ -171,19 +171,19 @@ AvatarButton can use fallback colors with names when no image source is provided
171
171
  | `fontFamily` | `inherit \| FontFamily` | No | `-` | - |
172
172
  | `fontSize` | `inherit \| FontSize` | No | `-` | - |
173
173
  | `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
174
- | `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
174
+ | `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
175
175
  | `height` | `string \| number` | No | `-` | - |
176
176
  | `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
177
177
  | `left` | `string \| number` | No | `-` | - |
178
178
  | `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
179
179
  | `loading` | `boolean` | No | `-` | Is the element currenty loading. When set to true, will disable element from press and keyboard events Is the element currenty loading. |
180
- | `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
181
- | `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
182
- | `marginEnd` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
183
- | `marginStart` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
184
- | `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
185
- | `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
186
- | `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
180
+ | `margin` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
181
+ | `marginBottom` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
182
+ | `marginEnd` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
183
+ | `marginStart` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
184
+ | `marginTop` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
185
+ | `marginX` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
186
+ | `marginY` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
187
187
  | `maxHeight` | `string \| number` | No | `-` | - |
188
188
  | `maxWidth` | `string \| number` | No | `-` | - |
189
189
  | `minHeight` | `string \| number` | No | `-` | - |
@@ -195,17 +195,17 @@ AvatarButton can use fallback colors with names when no image source is provided
195
195
  | `onPressOut` | `((event: GestureResponderEvent) => void)` | No | `-` | Callback fired before onPress when button is released. |
196
196
  | `opacity` | `number \| AnimatedNode` | No | `-` | - |
197
197
  | `overflow` | `visible \| hidden \| scroll` | No | `-` | - |
198
- | `padding` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
199
- | `paddingBottom` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
200
- | `paddingEnd` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
201
- | `paddingStart` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
202
- | `paddingTop` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
203
- | `paddingX` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
204
- | `paddingY` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
198
+ | `padding` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
199
+ | `paddingBottom` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
200
+ | `paddingEnd` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
201
+ | `paddingStart` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
202
+ | `paddingTop` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
203
+ | `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
204
+ | `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
205
205
  | `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
206
- | `position` | `absolute \| relative \| static \| fixed \| sticky` | No | `-` | - |
206
+ | `position` | `static \| relative \| fixed \| absolute \| sticky` | No | `-` | - |
207
207
  | `right` | `string \| number` | No | `-` | - |
208
- | `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
208
+ | `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
209
209
  | `shape` | `circle \| square \| hexagon` | No | `-` | Shape of Avatar. |
210
210
  | `src` | `string` | No | `-` | Absolute url to the image that should be shown in the Avatar. If no src is provided then a generic fallback image is used. |
211
211
  | `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. 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 |
@@ -14,7 +14,7 @@ import { Banner } from '@coinbase/cds-mobile/banner/Banner'
14
14
 
15
15
  The global warning banner is used to communicate important alerts or warnings to users across the entire platform, ensuring universal visibility and building trust.
16
16
 
17
- ```jsx live
17
+ ```tsx
18
18
  <Banner
19
19
  showDismiss
20
20
  startIcon="warning"
@@ -36,7 +36,7 @@ The global warning banner is used to communicate important alerts or warnings to
36
36
 
37
37
  The In-line Error Banner is used to display specific error messages directly beneath the relevant section headers. Use in-line banners to help users identify exactly where the error or outage is located.
38
38
 
39
- ```jsx live
39
+ ```tsx
40
40
  <Banner
41
41
  startIcon="info"
42
42
  startIconActive
@@ -57,7 +57,7 @@ The In-line Error Banner is used to display specific error messages directly ben
57
57
 
58
58
  The Contextual Promotional Banner is used to highlight special offers, promotions, or announcements within a specific context or section of the platform. It is used to increase user engagement and drive conversions.
59
59
 
60
- ```jsx live
60
+ ```tsx
61
61
  <Banner
62
62
  startIcon="info"
63
63
  startIconActive
@@ -76,7 +76,7 @@ The Contextual Promotional Banner is used to highlight special offers, promotion
76
76
 
77
77
  The in-line Informational Banner is used to provide users with additional information or helpful tips directly within the content or interface, providing relevant guidance.
78
78
 
79
- ```jsx live
79
+ ```tsx
80
80
  <VStack gap={2}>
81
81
  <Banner
82
82
  startIcon="info"
@@ -106,6 +106,45 @@ The in-line Informational Banner is used to provide users with additional inform
106
106
  </VStack>
107
107
  ```
108
108
 
109
+ ### Rounded Corner Banners
110
+
111
+ Customize `borderRadius` to align contextual or in-line banners with surrounding surfaces.
112
+
113
+ ```tsx
114
+ <VStack gap={2}>
115
+ <Banner
116
+ borderRadius={200}
117
+ startIcon="info"
118
+ startIconActive
119
+ styleVariant="contextual"
120
+ title="Rounded contextual banner"
121
+ variant="informational"
122
+ >
123
+ <TextLabel2>
124
+ Use moderate rounding to soften banners that live within card-based layouts.
125
+ </TextLabel2>
126
+ </Banner>
127
+ <Banner
128
+ borderRadius={400}
129
+ primaryAction={<Link to="https://www.coinbase.com">Primary</Link>}
130
+ secondaryAction={<Link to="https://www.coinbase.com">Secondary</Link>}
131
+ startIcon="info"
132
+ startIconActive
133
+ styleVariant="inline"
134
+ title="Rounded inline banner"
135
+ variant="promotional"
136
+ >
137
+ <TextLabel2>
138
+ Larger radii can help inline banners feel cohesive with pill-shaped buttons or chips nearby.
139
+ </TextLabel2>
140
+ </Banner>
141
+ </VStack>
142
+ ```
143
+
144
+ :::tip
145
+ Avoid setting `borderRadius` for `styleVariant="global"` so the vertical status bar remains aligned.
146
+ :::
147
+
109
148
  ## Props
110
149
 
111
150
  | Prop | Type | Required | Default | Description |
@@ -123,7 +162,7 @@ The in-line Informational Banner is used to provide users with additional inform
123
162
  | `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
124
163
  | `borderColor` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
125
164
  | `borderEndWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
126
- | `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `400` | Determines banners border radius |
165
+ | `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `400 for contextual, undefined for global and inline` | Determines banners border radius |
127
166
  | `borderStartWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
128
167
  | `borderTopLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
129
168
  | `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
@@ -140,7 +179,7 @@ The in-line Informational Banner is used to provide users with additional inform
140
179
  | `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Message of banner |
141
180
  | `closeAccessibilityLabel` | `string` | No | `'close'` | Accessibility label for close button on the banner |
142
181
  | `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 | `-` | - |
143
- | `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
182
+ | `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
144
183
  | `dangerouslySetBackground` | `string` | No | `-` | - |
145
184
  | `display` | `flex \| none` | No | `-` | - |
146
185
  | `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
@@ -153,20 +192,20 @@ The in-line Informational Banner is used to provide users with additional inform
153
192
  | `fontFamily` | `inherit \| FontFamily` | No | `-` | - |
154
193
  | `fontSize` | `inherit \| FontSize` | No | `-` | - |
155
194
  | `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
156
- | `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
195
+ | `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
157
196
  | `height` | `string \| number` | No | `-` | - |
158
197
  | `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
159
198
  | `key` | `Key \| null` | No | `-` | - |
160
199
  | `label` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Use for supplemental data |
161
200
  | `left` | `string \| number` | No | `-` | - |
162
201
  | `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
163
- | `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
164
- | `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
165
- | `marginEnd` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
166
- | `marginStart` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
167
- | `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
168
- | `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
169
- | `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
202
+ | `margin` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
203
+ | `marginBottom` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
204
+ | `marginEnd` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
205
+ | `marginStart` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
206
+ | `marginTop` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
207
+ | `marginX` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
208
+ | `marginY` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
170
209
  | `maxHeight` | `string \| number` | No | `-` | - |
171
210
  | `maxWidth` | `string \| number` | No | `-` | - |
172
211
  | `minHeight` | `string \| number` | No | `-` | - |
@@ -187,19 +226,19 @@ The in-line Informational Banner is used to provide users with additional inform
187
226
  | `onPointerUpCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
188
227
  | `opacity` | `number \| AnimatedNode` | No | `-` | - |
189
228
  | `overflow` | `visible \| hidden \| scroll` | No | `-` | - |
190
- | `padding` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
191
- | `paddingBottom` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
192
- | `paddingEnd` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
193
- | `paddingStart` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
194
- | `paddingTop` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
195
- | `paddingX` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
196
- | `paddingY` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
229
+ | `padding` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
230
+ | `paddingBottom` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
231
+ | `paddingEnd` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
232
+ | `paddingStart` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
233
+ | `paddingTop` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
234
+ | `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
235
+ | `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
197
236
  | `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
198
- | `position` | `absolute \| relative \| static \| fixed \| sticky` | No | `-` | - |
237
+ | `position` | `static \| relative \| fixed \| absolute \| sticky` | No | `-` | - |
199
238
  | `primaryAction` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Provide a CDS Link component to be used as a primary action. It will inherit colors depending on the provided variant |
200
239
  | `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
201
240
  | `right` | `string \| number` | No | `-` | - |
202
- | `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
241
+ | `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
203
242
  | `secondaryAction` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Provide a CDS Link component to be used as a secondary action. It will inherit colors depending on the provided tone |
204
243
  | `showDismiss` | `boolean` | No | `true` | Determines whether banner can be dismissed or not. Banner is not dismisable when styleVariant is set to global. |
205
244
  | `startIconAccessibilityLabel` | `string` | No | `-` | Accessibility label for start icon on the banner |