@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
@@ -107,7 +107,7 @@ We've created a palette of identity colors using our CDS spectrum colors. When u
107
107
  | `alignSelf` | `ResponsiveProp<center \| normal \| auto \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
108
108
  | `alt` | `string` | No | `-` | This is the name associated with the entity in the Avatar. This is used in the image alt tag for accessibility. |
109
109
  | `as` | `div` | No | `-` | - |
110
- | `aspectRatio` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
110
+ | `aspectRatio` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
111
111
  | `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
112
112
  | `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
113
113
  | `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
@@ -130,34 +130,34 @@ We've created a palette of identity colors using our CDS spectrum colors. When u
130
130
  | `bottom` | `ResponsiveProp<Bottom<string \| number>>` | No | `-` | - |
131
131
  | `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 | `-` | - |
132
132
  | `colorScheme` | `blue \| green \| orange \| yellow \| gray \| indigo \| pink \| purple \| red \| teal \| chartreuse` | No | `blue` | Override the default fallback background and border color |
133
- | `columnGap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
133
+ | `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
134
134
  | `dangerouslySetBackground` | `string` | No | `-` | - |
135
135
  | `dangerouslySetSize` | `number` | No | `-` | - |
136
136
  | `display` | `ResponsiveProp<grid \| revert \| none \| block \| inline \| inline-block \| flex \| inline-flex \| inline-grid \| contents \| flow-root \| list-item>` | No | `-` | - |
137
137
  | `elevation` | `0 \| 1 \| 2` | No | `-` | - |
138
138
  | `flexBasis` | `ResponsiveProp<FlexBasis<string \| number>>` | No | `-` | - |
139
139
  | `flexDirection` | `ResponsiveProp<column \| row \| row-reverse \| column-reverse>` | No | `-` | - |
140
- | `flexGrow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
141
- | `flexShrink` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
140
+ | `flexGrow` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
141
+ | `flexShrink` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
142
142
  | `flexWrap` | `ResponsiveProp<nowrap \| wrap \| wrap-reverse>` | No | `-` | - |
143
143
  | `font` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
144
144
  | `fontFamily` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
145
145
  | `fontSize` | `ResponsiveProp<FontSize \| inherit>` | No | `-` | - |
146
146
  | `fontWeight` | `ResponsiveProp<FontWeight \| inherit>` | No | `-` | - |
147
- | `gap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
148
- | `grid` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
149
- | `gridArea` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
147
+ | `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
148
+ | `grid` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
149
+ | `gridArea` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
150
150
  | `gridAutoColumns` | `ResponsiveProp<GridAutoColumns<string \| number>>` | No | `-` | - |
151
- | `gridAutoFlow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| row \| column \| dense` | No | `-` | - |
151
+ | `gridAutoFlow` | `inherit \| revert \| row \| column \| -moz-initial \| initial \| revert-layer \| unset \| dense` | No | `-` | - |
152
152
  | `gridAutoRows` | `ResponsiveProp<GridAutoRows<string \| number>>` | No | `-` | - |
153
- | `gridColumn` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
154
- | `gridColumnEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
155
- | `gridColumnStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
156
- | `gridRow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
157
- | `gridRowEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
158
- | `gridRowStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
159
- | `gridTemplate` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
160
- | `gridTemplateAreas` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
153
+ | `gridColumn` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
154
+ | `gridColumnEnd` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
155
+ | `gridColumnStart` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
156
+ | `gridRow` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
157
+ | `gridRowEnd` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
158
+ | `gridRowStart` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
159
+ | `gridTemplate` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
160
+ | `gridTemplateAreas` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
161
161
  | `gridTemplateColumns` | `ResponsiveProp<GridTemplateColumns<string \| number>>` | No | `-` | - |
162
162
  | `gridTemplateRows` | `ResponsiveProp<GridTemplateRows<string \| number>>` | No | `-` | - |
163
163
  | `height` | `ResponsiveProp<Height<string \| number>>` | No | `-` | - |
@@ -178,20 +178,20 @@ We've created a palette of identity colors using our CDS spectrum colors. When u
178
178
  | `minWidth` | `ResponsiveProp<MinWidth<string \| number>>` | No | `-` | - |
179
179
  | `name` | `string` | No | `-` | This is the name associated with the Avatars entity. It will be used to generate a fallback. |
180
180
  | `onChange` | `FormEventHandler<HTMLDivElement>` | No | `-` | - |
181
- | `opacity` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
181
+ | `opacity` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
182
182
  | `overflow` | `ResponsiveProp<hidden \| auto \| visible \| clip \| scroll>` | No | `-` | - |
183
- | `padding` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
184
- | `paddingBottom` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
185
- | `paddingEnd` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
186
- | `paddingStart` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
187
- | `paddingTop` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
188
- | `paddingX` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
189
- | `paddingY` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
183
+ | `padding` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
184
+ | `paddingBottom` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
185
+ | `paddingEnd` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
186
+ | `paddingStart` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
187
+ | `paddingTop` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
188
+ | `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
189
+ | `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
190
190
  | `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
191
191
  | `position` | `ResponsiveProp<fixed \| static \| relative \| absolute \| sticky>` | No | `-` | - |
192
192
  | `ref` | `RefObject<HTMLDivElement> \| ((instance: HTMLDivElement \| null) => void) \| null` | No | `-` | - |
193
193
  | `right` | `ResponsiveProp<Right<string \| number>>` | No | `-` | - |
194
- | `rowGap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
194
+ | `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
195
195
  | `selected` | `boolean` | No | `-` | Adds treatment that indicates that the Avatar is currently selected |
196
196
  | `shape` | `circle \| square \| hexagon` | No | `-` | Shape of Avatar. Note: If the shape is a hexagon, do not use name. |
197
197
  | `size` | `s \| l \| m \| xl \| xxl \| xxxl` | No | `-` | Size for a given avatar. |
@@ -202,10 +202,10 @@ We've created a palette of identity colors using our CDS spectrum colors. When u
202
202
  | `textDecoration` | `ResponsiveProp<none \| underline \| overline \| line-through \| underline overline \| underline double>` | No | `-` | - |
203
203
  | `textTransform` | `ResponsiveProp<capitalize \| lowercase \| none \| uppercase>` | No | `-` | - |
204
204
  | `top` | `ResponsiveProp<Top<string \| number>>` | No | `-` | - |
205
- | `transform` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
205
+ | `transform` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
206
206
  | `userSelect` | `ResponsiveProp<text \| none \| auto \| all>` | No | `-` | - |
207
207
  | `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
208
208
  | `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
209
- | `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
209
+ | `zIndex` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
210
210
 
211
211
 
@@ -128,8 +128,8 @@ AvatarButton can use fallback colors with names when no image source is provided
128
128
  | `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
129
129
  | `alignSelf` | `ResponsiveProp<center \| normal \| auto \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
130
130
  | `alt` | `string` | No | `-` | This is the name associated with the entity in the Avatar. This is used in the image alt tag for accessibility. |
131
- | `as` | `symbol \| object \| style \| svg \| a \| abbr \| address \| area \| article \| aside \| audio \| b \| base \| bdi \| bdo \| big \| blockquote \| body \| br \| button \| canvas \| caption \| center \| cite \| code \| col \| colgroup \| data \| datalist \| dd \| del \| details \| dfn \| dialog \| div \| dl \| dt \| em \| embed \| fieldset \| figcaption \| figure \| footer \| form \| h1 \| h2 \| h3 \| h4 \| h5 \| h6 \| head \| header \| hgroup \| hr \| html \| i \| iframe \| img \| input \| ins \| kbd \| keygen \| label \| legend \| li \| link \| main \| map \| mark \| menu \| menuitem \| meta \| meter \| nav \| noindex \| noscript \| ol \| optgroup \| option \| output \| p \| param \| picture \| pre \| progress \| q \| rp \| rt \| ruby \| s \| samp \| search \| slot \| script \| section \| select \| small \| source \| span \| strong \| sub \| summary \| sup \| table \| template \| tbody \| td \| textarea \| tfoot \| th \| thead \| time \| title \| tr \| track \| u \| ul \| var \| video \| wbr \| webview \| animate \| animateMotion \| animateTransform \| circle \| clipPath \| defs \| desc \| ellipse \| feBlend \| feColorMatrix \| feComponentTransfer \| feComposite \| feConvolveMatrix \| feDiffuseLighting \| feDisplacementMap \| feDistantLight \| feDropShadow \| feFlood \| feFuncA \| feFuncB \| feFuncG \| feFuncR \| feGaussianBlur \| feImage \| feMerge \| feMergeNode \| feMorphology \| feOffset \| fePointLight \| feSpecularLighting \| feSpotLight \| feTile \| feTurbulence \| filter \| foreignObject \| g \| image \| line \| linearGradient \| marker \| mask \| metadata \| mpath \| path \| pattern \| polygon \| polyline \| radialGradient \| rect \| set \| stop \| switch \| text \| textPath \| tspan \| use \| view \| ComponentClass<any, any> \| FunctionComponent<any>` | No | `-` | - |
132
- | `aspectRatio` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
131
+ | `as` | `symbol \| object \| style \| div \| a \| abbr \| address \| area \| article \| aside \| audio \| b \| base \| bdi \| bdo \| big \| blockquote \| body \| br \| button \| canvas \| caption \| center \| cite \| code \| col \| colgroup \| data \| datalist \| dd \| del \| details \| dfn \| dialog \| dl \| dt \| em \| embed \| fieldset \| figcaption \| figure \| footer \| form \| h1 \| h2 \| h3 \| h4 \| h5 \| h6 \| head \| header \| hgroup \| hr \| html \| i \| iframe \| img \| input \| ins \| kbd \| keygen \| label \| legend \| li \| link \| main \| map \| mark \| menu \| menuitem \| meta \| meter \| nav \| noindex \| noscript \| ol \| optgroup \| option \| output \| p \| param \| picture \| pre \| progress \| q \| rp \| rt \| ruby \| s \| samp \| search \| slot \| script \| section \| select \| small \| source \| span \| strong \| sub \| summary \| sup \| table \| template \| tbody \| td \| textarea \| tfoot \| th \| thead \| time \| title \| tr \| track \| u \| ul \| var \| video \| wbr \| webview \| svg \| animate \| animateMotion \| animateTransform \| circle \| clipPath \| defs \| desc \| ellipse \| feBlend \| feColorMatrix \| feComponentTransfer \| feComposite \| feConvolveMatrix \| feDiffuseLighting \| feDisplacementMap \| feDistantLight \| feDropShadow \| feFlood \| feFuncA \| feFuncB \| feFuncG \| feFuncR \| feGaussianBlur \| feImage \| feMerge \| feMergeNode \| feMorphology \| feOffset \| fePointLight \| feSpecularLighting \| feSpotLight \| feTile \| feTurbulence \| filter \| foreignObject \| g \| image \| line \| linearGradient \| marker \| mask \| metadata \| mpath \| path \| pattern \| polygon \| polyline \| radialGradient \| rect \| set \| stop \| switch \| text \| textPath \| tspan \| use \| view \| ComponentClass<any, any> \| FunctionComponent<any>` | No | `-` | - |
132
+ | `aspectRatio` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
133
133
  | `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | Background color of the overlay (element being interacted with). |
134
134
  | `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
135
135
  | `block` | `boolean` | No | `-` | Set element to block and expand to 100% width. |
@@ -155,7 +155,7 @@ AvatarButton can use fallback colors with names when no image source is provided
155
155
  | `className` | `string` | No | `-` | Apply class names to the outer container. |
156
156
  | `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
157
157
  | `colorScheme` | `blue \| green \| orange \| yellow \| gray \| indigo \| pink \| purple \| red \| teal \| chartreuse` | No | `blue` | Override the default fallback background and border color |
158
- | `columnGap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
158
+ | `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
159
159
  | `compact` | `boolean` | No | `-` | Reduce the inner padding within the button itself. |
160
160
  | `dangerouslySetBackground` | `string` | No | `-` | - |
161
161
  | `disabled` | `boolean` | No | `-` | Is the element currently disabled. |
@@ -163,28 +163,28 @@ AvatarButton can use fallback colors with names when no image source is provided
163
163
  | `elevation` | `0 \| 1 \| 2` | No | `-` | - |
164
164
  | `flexBasis` | `ResponsiveProp<FlexBasis<string \| number>>` | No | `-` | - |
165
165
  | `flexDirection` | `ResponsiveProp<column \| row \| row-reverse \| column-reverse>` | No | `-` | - |
166
- | `flexGrow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
167
- | `flexShrink` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
166
+ | `flexGrow` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
167
+ | `flexShrink` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
168
168
  | `flexWrap` | `ResponsiveProp<nowrap \| wrap \| wrap-reverse>` | No | `-` | - |
169
169
  | `focusable` | `boolean` | No | `-` | - |
170
170
  | `font` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
171
171
  | `fontFamily` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
172
172
  | `fontSize` | `ResponsiveProp<FontSize \| inherit>` | No | `-` | - |
173
173
  | `fontWeight` | `ResponsiveProp<FontWeight \| inherit>` | No | `-` | - |
174
- | `gap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
175
- | `grid` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
176
- | `gridArea` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
174
+ | `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
175
+ | `grid` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
176
+ | `gridArea` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
177
177
  | `gridAutoColumns` | `ResponsiveProp<GridAutoColumns<string \| number>>` | No | `-` | - |
178
- | `gridAutoFlow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| row \| column \| dense` | No | `-` | - |
178
+ | `gridAutoFlow` | `inherit \| revert \| row \| column \| -moz-initial \| initial \| revert-layer \| unset \| dense` | No | `-` | - |
179
179
  | `gridAutoRows` | `ResponsiveProp<GridAutoRows<string \| number>>` | No | `-` | - |
180
- | `gridColumn` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
181
- | `gridColumnEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
182
- | `gridColumnStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
183
- | `gridRow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
184
- | `gridRowEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
185
- | `gridRowStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
186
- | `gridTemplate` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
187
- | `gridTemplateAreas` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
180
+ | `gridColumn` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
181
+ | `gridColumnEnd` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
182
+ | `gridColumnStart` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
183
+ | `gridRow` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
184
+ | `gridRowEnd` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
185
+ | `gridRowStart` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
186
+ | `gridTemplate` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
187
+ | `gridTemplateAreas` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
188
188
  | `gridTemplateColumns` | `ResponsiveProp<GridTemplateColumns<string \| number>>` | No | `-` | - |
189
189
  | `gridTemplateRows` | `ResponsiveProp<GridTemplateRows<string \| number>>` | No | `-` | - |
190
190
  | `height` | `ResponsiveProp<Height<string \| number>>` | No | `-` | - |
@@ -205,21 +205,21 @@ AvatarButton can use fallback colors with names when no image source is provided
205
205
  | `minWidth` | `ResponsiveProp<MinWidth<string \| number>>` | No | `-` | - |
206
206
  | `name` | `string` | No | `-` | This is the name associated with the Avatars entity. It will be used to generate a fallback. |
207
207
  | `noScaleOnPress` | `boolean` | No | `-` | Dont scale element on press. |
208
- | `opacity` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
208
+ | `opacity` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
209
209
  | `overflow` | `ResponsiveProp<hidden \| auto \| visible \| clip \| scroll>` | No | `-` | - |
210
- | `padding` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
211
- | `paddingBottom` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
212
- | `paddingEnd` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
213
- | `paddingStart` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
214
- | `paddingTop` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
215
- | `paddingX` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
216
- | `paddingY` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
210
+ | `padding` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
211
+ | `paddingBottom` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
212
+ | `paddingEnd` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
213
+ | `paddingStart` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
214
+ | `paddingTop` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
215
+ | `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
216
+ | `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
217
217
  | `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
218
218
  | `position` | `ResponsiveProp<fixed \| static \| relative \| absolute \| sticky>` | No | `-` | - |
219
219
  | `pressed` | `boolean` | No | `-` | Is the element being pressed. Primarily a mobile feature, but can be used on the web. |
220
220
  | `ref` | `any` | No | `-` | - |
221
221
  | `right` | `ResponsiveProp<Right<string \| number>>` | No | `-` | - |
222
- | `rowGap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
222
+ | `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
223
223
  | `selected` | `boolean` | No | `-` | Adds treatment that indicates that the Avatar is currently selected |
224
224
  | `shape` | `circle \| square \| hexagon` | No | `-` | Shape of Avatar. Note: If the shape is a hexagon, do not use name. |
225
225
  | `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. |
@@ -229,12 +229,12 @@ AvatarButton can use fallback colors with names when no image source is provided
229
229
  | `textDecoration` | `ResponsiveProp<none \| underline \| overline \| line-through \| underline overline \| underline double>` | No | `-` | - |
230
230
  | `textTransform` | `ResponsiveProp<capitalize \| lowercase \| none \| uppercase>` | No | `-` | - |
231
231
  | `top` | `ResponsiveProp<Top<string \| number>>` | No | `-` | - |
232
- | `transform` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
232
+ | `transform` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
233
233
  | `transparentWhileInactive` | `boolean` | No | `-` | Mark the background and border as transparent until the element is interacted with (hovered, pressed, etc). Must be used in conjunction with the pressed prop |
234
234
  | `transparentWhilePressed` | `boolean` | No | `-` | Mark the background and border as transparent even while element is interacted with (elevation underlay issue). Must be used in conjunction with the pressed prop |
235
235
  | `userSelect` | `ResponsiveProp<text \| none \| auto \| all>` | No | `-` | - |
236
236
  | `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
237
237
  | `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
238
- | `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
238
+ | `zIndex` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
239
239
 
240
240
 
@@ -14,7 +14,7 @@ import { Banner } from '@coinbase/cds-web/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 live
18
18
  <Banner
19
19
  showDismiss
20
20
  label="Message last updated today at 3:33pm"
@@ -37,7 +37,7 @@ The global warning banner is used to communicate important alerts or warnings to
37
37
 
38
38
  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.
39
39
 
40
- ```jsx live
40
+ ```tsx live
41
41
  <Banner
42
42
  startIcon="info"
43
43
  startIconActive
@@ -58,7 +58,7 @@ The In-line Error Banner is used to display specific error messages directly ben
58
58
 
59
59
  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.
60
60
 
61
- ```jsx live
61
+ ```tsx live
62
62
  <Banner
63
63
  startIcon="info"
64
64
  startIconActive
@@ -77,7 +77,7 @@ The Contextual Promotional Banner is used to highlight special offers, promotion
77
77
 
78
78
  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.
79
79
 
80
- ```jsx live
80
+ ```tsx live
81
81
  <VStack gap={2}>
82
82
  <Banner
83
83
  startIcon="info"
@@ -107,6 +107,45 @@ The in-line Informational Banner is used to provide users with additional inform
107
107
  </VStack>
108
108
  ```
109
109
 
110
+ ### Rounded Corner Banners
111
+
112
+ You can customize `borderRadius` to soften contextual and in-line banners.
113
+
114
+ ```tsx live
115
+ <VStack gap={2}>
116
+ <Banner
117
+ borderRadius={200}
118
+ startIcon="info"
119
+ startIconActive
120
+ styleVariant="contextual"
121
+ title="Rounded contextual banner"
122
+ variant="informational"
123
+ >
124
+ <TextLabel2 as="p">
125
+ Rounded corners help align with softer surface treatments within a page section.
126
+ </TextLabel2>
127
+ </Banner>
128
+ <Banner
129
+ borderRadius={400}
130
+ primaryAction={<Link to="https://www.coinbase.com">Primary</Link>}
131
+ secondaryAction={<Link to="https://www.coinbase.com">Secondary</Link>}
132
+ startIcon="info"
133
+ startIconActive
134
+ styleVariant="inline"
135
+ title="Rounded inline banner"
136
+ variant="promotional"
137
+ >
138
+ <TextLabel2 as="p">
139
+ You can incrementally increase the radius to match surrounding cards or panels.
140
+ </TextLabel2>
141
+ </Banner>
142
+ </VStack>
143
+ ```
144
+
145
+ :::tip
146
+ Avoid setting `borderRadius` for `styleVariant="global"` so the vertical status bar remains aligned.
147
+ :::
148
+
110
149
  ## Props
111
150
 
112
151
  | Prop | Type | Required | Default | Description |
@@ -117,14 +156,14 @@ The in-line Informational Banner is used to provide users with additional inform
117
156
  | `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
118
157
  | `alignSelf` | `ResponsiveProp<center \| normal \| auto \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
119
158
  | `as` | `div` | No | `-` | - |
120
- | `aspectRatio` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
159
+ | `aspectRatio` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
121
160
  | `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
122
161
  | `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
123
162
  | `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
124
163
  | `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
125
164
  | `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 | `-` | - |
126
165
  | `borderEndWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
127
- | `borderRadius` | `(BorderRadius & (BorderRadius \| { base?: BorderRadius; phone?: BorderRadius \| undefined; tablet?: BorderRadius \| undefined; desktop?: BorderRadius \| undefined; })) \| undefined` | No | `400` | Determines banners border radius |
166
+ | `borderRadius` | `(BorderRadius & (BorderRadius \| { base?: BorderRadius; phone?: BorderRadius \| undefined; tablet?: BorderRadius \| undefined; desktop?: BorderRadius \| undefined; })) \| undefined` | No | `400 for contextual, undefined for global and inline` | Determines banners border radius |
128
167
  | `borderStartWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
129
168
  | `borderTopLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
130
169
  | `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
@@ -141,33 +180,33 @@ The in-line Informational Banner is used to provide users with additional inform
141
180
  | `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Message of banner |
142
181
  | `closeAccessibilityLabel` | `string` | No | `'close'` | Accessibility label for close button on the banner |
143
182
  | `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 | `-` | - |
144
- | `columnGap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
183
+ | `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
145
184
  | `dangerouslySetBackground` | `string` | No | `-` | - |
146
185
  | `display` | `ResponsiveProp<grid \| revert \| none \| block \| inline \| inline-block \| flex \| inline-flex \| inline-grid \| contents \| flow-root \| list-item>` | No | `-` | - |
147
186
  | `elevation` | `0 \| 1 \| 2` | No | `-` | - |
148
187
  | `flexBasis` | `ResponsiveProp<FlexBasis<string \| number>>` | No | `-` | - |
149
188
  | `flexDirection` | `ResponsiveProp<column \| row \| row-reverse \| column-reverse>` | No | `-` | - |
150
- | `flexGrow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
151
- | `flexShrink` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
189
+ | `flexGrow` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
190
+ | `flexShrink` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
152
191
  | `flexWrap` | `ResponsiveProp<nowrap \| wrap \| wrap-reverse>` | No | `-` | - |
153
192
  | `font` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
154
193
  | `fontFamily` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
155
194
  | `fontSize` | `ResponsiveProp<FontSize \| inherit>` | No | `-` | - |
156
195
  | `fontWeight` | `ResponsiveProp<FontWeight \| inherit>` | No | `-` | - |
157
- | `gap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
158
- | `grid` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
159
- | `gridArea` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
196
+ | `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
197
+ | `grid` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
198
+ | `gridArea` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
160
199
  | `gridAutoColumns` | `ResponsiveProp<GridAutoColumns<string \| number>>` | No | `-` | - |
161
- | `gridAutoFlow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| row \| column \| dense` | No | `-` | - |
200
+ | `gridAutoFlow` | `inherit \| revert \| row \| column \| -moz-initial \| initial \| revert-layer \| unset \| dense` | No | `-` | - |
162
201
  | `gridAutoRows` | `ResponsiveProp<GridAutoRows<string \| number>>` | No | `-` | - |
163
- | `gridColumn` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
164
- | `gridColumnEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
165
- | `gridColumnStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
166
- | `gridRow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
167
- | `gridRowEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
168
- | `gridRowStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
169
- | `gridTemplate` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
170
- | `gridTemplateAreas` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
202
+ | `gridColumn` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
203
+ | `gridColumnEnd` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
204
+ | `gridColumnStart` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
205
+ | `gridRow` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
206
+ | `gridRowEnd` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
207
+ | `gridRowStart` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
208
+ | `gridTemplate` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
209
+ | `gridTemplateAreas` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
171
210
  | `gridTemplateColumns` | `ResponsiveProp<GridTemplateColumns<string \| number>>` | No | `-` | - |
172
211
  | `gridTemplateRows` | `ResponsiveProp<GridTemplateRows<string \| number>>` | No | `-` | - |
173
212
  | `height` | `ResponsiveProp<Height<string \| number>>` | No | `-` | - |
@@ -190,21 +229,21 @@ The in-line Informational Banner is used to provide users with additional inform
190
229
  | `numberOfLines` | `number` | No | `-` | Indicates the max number of lines after which body text will be truncated |
191
230
  | `onChange` | `FormEventHandler<HTMLDivElement>` | No | `-` | - |
192
231
  | `onClose` | `(() => void)` | No | `-` | A callback fired when banner is dismissed |
193
- | `opacity` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
232
+ | `opacity` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
194
233
  | `overflow` | `ResponsiveProp<hidden \| auto \| visible \| clip \| scroll>` | No | `-` | - |
195
- | `padding` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
196
- | `paddingBottom` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
197
- | `paddingEnd` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
198
- | `paddingStart` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
199
- | `paddingTop` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
200
- | `paddingX` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
201
- | `paddingY` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
234
+ | `padding` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
235
+ | `paddingBottom` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
236
+ | `paddingEnd` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
237
+ | `paddingStart` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
238
+ | `paddingTop` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
239
+ | `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
240
+ | `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
202
241
  | `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
203
242
  | `position` | `ResponsiveProp<fixed \| static \| relative \| absolute \| sticky>` | No | `-` | - |
204
243
  | `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 |
205
244
  | `ref` | `RefObject<HTMLDivElement> \| ((instance: HTMLDivElement \| null) => void) \| null` | No | `-` | - |
206
245
  | `right` | `ResponsiveProp<Right<string \| number>>` | No | `-` | - |
207
- | `rowGap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
246
+ | `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
208
247
  | `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 |
209
248
  | `showDismiss` | `boolean` | No | `true` | Determines whether banner can be dismissed or not. Banner is not dismisable when styleVariant is set to global. |
210
249
  | `startIconAccessibilityLabel` | `string` | No | `-` | Accessibility label for start icon on the banner |
@@ -217,10 +256,10 @@ The in-line Informational Banner is used to provide users with additional inform
217
256
  | `textTransform` | `ResponsiveProp<capitalize \| lowercase \| none \| uppercase>` | No | `-` | - |
218
257
  | `title` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Title of banner. Indicates the intent of this banner |
219
258
  | `top` | `ResponsiveProp<Top<string \| number>>` | No | `-` | - |
220
- | `transform` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
259
+ | `transform` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
221
260
  | `userSelect` | `ResponsiveProp<text \| none \| auto \| all>` | No | `-` | - |
222
261
  | `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
223
262
  | `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
224
- | `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
263
+ | `zIndex` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
225
264
 
226
265