@coinbase/cds-mcp-server 8.61.0 → 8.62.1

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 (39) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/mcp-docs/mobile/components/AvatarButton.txt +17 -4
  3. package/mcp-docs/mobile/components/ControlGroup.txt +3 -2
  4. package/mcp-docs/mobile/components/ModalBody.txt +1 -1
  5. package/mcp-docs/mobile/components/ModalFooter.txt +2 -2
  6. package/mcp-docs/mobile/components/ModalHeader.txt +3 -3
  7. package/mcp-docs/mobile/components/Numpad.txt +1 -1
  8. package/mcp-docs/mobile/components/RemoteImageGroup.txt +1 -1
  9. package/mcp-docs/mobile/components/TabbedChipsAlpha.txt +78 -4
  10. package/mcp-docs/mobile/components/Tabs.txt +1 -1
  11. package/mcp-docs/mobile/components/Tag.txt +2 -2
  12. package/mcp-docs/mobile/components/Tour.txt +2 -2
  13. package/mcp-docs/mobile/getting-started/theming.txt +96 -0
  14. package/mcp-docs/web/components/ControlGroup.txt +1 -0
  15. package/mcp-docs/web/components/DatePicker.txt +1 -1
  16. package/mcp-docs/web/components/Dropdown.txt +3 -3
  17. package/mcp-docs/web/components/FocusTrap.txt +7 -7
  18. package/mcp-docs/web/components/FullscreenModal.txt +3 -3
  19. package/mcp-docs/web/components/FullscreenModalLayout.txt +1 -1
  20. package/mcp-docs/web/components/Modal.txt +2 -2
  21. package/mcp-docs/web/components/ModalBody.txt +5 -5
  22. package/mcp-docs/web/components/ModalFooter.txt +7 -7
  23. package/mcp-docs/web/components/ModalHeader.txt +3 -3
  24. package/mcp-docs/web/components/NavigationTitleSelect.txt +102 -0
  25. package/mcp-docs/web/components/Overlay.txt +0 -1
  26. package/mcp-docs/web/components/Pagination.txt +8 -8
  27. package/mcp-docs/web/components/RemoteImageGroup.txt +1 -1
  28. package/mcp-docs/web/components/SelectChip.txt +3 -3
  29. package/mcp-docs/web/components/Switch.txt +2 -2
  30. package/mcp-docs/web/components/TabbedChipsAlpha.txt +90 -1
  31. package/mcp-docs/web/components/Table.txt +1 -0
  32. package/mcp-docs/web/components/TableCaption.txt +2 -0
  33. package/mcp-docs/web/components/TableCellFallback.txt +1 -0
  34. package/mcp-docs/web/components/TableRow.txt +3 -0
  35. package/mcp-docs/web/components/Tooltip.txt +5 -5
  36. package/mcp-docs/web/components/Tour.txt +3 -3
  37. package/mcp-docs/web/components/Tray.txt +2 -2
  38. package/mcp-docs/web/getting-started/theming.txt +98 -0
  39. package/package.json +1 -1
@@ -143,7 +143,7 @@ function LoadingExample() {
143
143
 
144
144
  | Prop | Type | Required | Default | Description |
145
145
  | --- | --- | --- | --- | --- |
146
- | `primaryAction` | `ReactElement<SharedProps & Pick<SharedAccessibilityProps, accessibilityLabel> & { variant?: ButtonVariant \| undefined; disabled?: boolean \| undefined; loading?: boolean \| undefined; progressCircleSize?: number \| undefined; transparent?: boolean \| undefined; block?: boolean \| undefined; compact?: boolean \| undefined; children: ReactNode; start?: ReactNode; startIcon?: IconName \| undefined; startIconActive?: boolean \| undefined; end?: ReactNode; endIcon?: IconName \| undefined; endIconActive?: boolean \| undefined; flush?: start \| end \| undefined; name?: string \| undefined; noScaleOnPress?: boolean \| undefined; numberOfLines?: number \| undefined; } & Omit<PressableBaseProps, children \| testID \| accessibilityLabel \| transparent \| name \| block \| start \| end \| loading \| variant \| startIcon \| startIconActive \| numberOfLines \| disabled \| noScaleOnPress \| progressCircleSize \| compact \| endIcon \| endIconActive \| flush> & { onClick?: MouseEventHandler<Element> \| undefined; }, string \| JSXElementConstructor<any>>` | Yes | `-` | Primary action button |
146
+ | `primaryAction` | `ReactElement<SharedProps & Pick<SharedAccessibilityProps, accessibilityLabel> & { variant?: ButtonVariant \| undefined; disabled?: boolean \| undefined; loading?: boolean \| undefined; progressCircleSize?: number \| undefined; transparent?: boolean \| undefined; block?: boolean \| undefined; compact?: boolean \| undefined; children: ReactNode; start?: ReactNode; startIcon?: IconName \| undefined; startIconActive?: boolean \| undefined; end?: ReactNode; endIcon?: IconName \| undefined; endIconActive?: boolean \| undefined; flush?: start \| end \| undefined; name?: string \| undefined; noScaleOnPress?: boolean \| undefined; numberOfLines?: number \| undefined; } & Omit<PressableBaseProps, testID \| children \| accessibilityLabel \| transparent \| name \| block \| start \| end \| loading \| variant \| startIcon \| startIconActive \| numberOfLines \| disabled \| noScaleOnPress \| progressCircleSize \| compact \| endIcon \| endIconActive \| flush> & { onClick?: MouseEventHandler<Element> \| undefined; }, string \| JSXElementConstructor<any>>` | Yes | `-` | Primary action button |
147
147
  | `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| space-between \| space-around \| space-evenly>` | No | `-` | - |
148
148
  | `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
149
149
  | `alignSelf` | `ResponsiveProp<center \| normal \| auto \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
@@ -183,7 +183,7 @@ function LoadingExample() {
183
183
  | `fontFamily` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
184
184
  | `fontSize` | `ResponsiveProp<FontSize \| inherit>` | No | `-` | - |
185
185
  | `fontWeight` | `ResponsiveProp<FontWeight \| inherit>` | No | `-` | - |
186
- | `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `2` | - |
186
+ | `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
187
187
  | `grid` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
188
188
  | `gridArea` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
189
189
  | `gridAutoColumns` | `ResponsiveProp<GridAutoColumns<string \| number>>` | No | `-` | - |
@@ -200,7 +200,7 @@ function LoadingExample() {
200
200
  | `gridTemplateColumns` | `ResponsiveProp<GridTemplateColumns<string \| number>>` | No | `-` | - |
201
201
  | `gridTemplateRows` | `ResponsiveProp<GridTemplateRows<string \| number>>` | No | `-` | - |
202
202
  | `height` | `ResponsiveProp<Height<string \| number>>` | No | `-` | - |
203
- | `justifyContent` | `ResponsiveProp<left \| right \| center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| space-between \| space-around \| space-evenly>` | No | `flex-end` | - |
203
+ | `justifyContent` | `ResponsiveProp<left \| right \| center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| space-between \| space-around \| space-evenly>` | No | `-` | - |
204
204
  | `key` | `Key \| null` | No | `-` | - |
205
205
  | `left` | `ResponsiveProp<Left<string \| number>>` | No | `-` | - |
206
206
  | `lineHeight` | `ResponsiveProp<LineHeight \| inherit>` | No | `-` | - |
@@ -223,14 +223,14 @@ function LoadingExample() {
223
223
  | `paddingEnd` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
224
224
  | `paddingStart` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
225
225
  | `paddingTop` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
226
- | `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `3` | - |
227
- | `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `2` | - |
226
+ | `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
227
+ | `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
228
228
  | `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
229
229
  | `position` | `ResponsiveProp<fixed \| static \| relative \| absolute \| sticky>` | No | `-` | - |
230
230
  | `ref` | `RefObject<HTMLDivElement> \| ((instance: HTMLDivElement \| null) => void) \| null` | No | `-` | - |
231
231
  | `right` | `ResponsiveProp<Right<string \| number>>` | No | `-` | - |
232
232
  | `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
233
- | `secondaryAction` | `ReactElement<SharedProps & Pick<SharedAccessibilityProps, accessibilityLabel> & { variant?: ButtonVariant; disabled?: boolean \| undefined; loading?: boolean \| undefined; progressCircleSize?: number \| undefined; transparent?: boolean \| undefined; block?: boolean \| undefined; compact?: boolean \| undefined; children: ReactNode; start?: ReactNode; startIcon?: IconName \| undefined; startIconActive?: boolean \| undefined; end?: ReactNode; endIcon?: IconName \| undefined; endIconActive?: boolean \| undefined; flush?: start \| end \| undefined; name?: string \| undefined; noScaleOnPress?: boolean \| undefined; numberOfLines?: number \| undefined; } & Omit<PressableBaseProps, children \| testID \| accessibilityLabel \| transparent \| name \| block \| start \| end \| loading \| variant \| startIcon \| startIconActive \| numberOfLines \| disabled \| noScaleOnPress \| progressCircleSize \| compact \| endIcon \| endIconActive \| flush> & { onClick?: MouseEventHandler<Element> \| undefined; }, string \| JSXElementConstructor<any>> \| undefined` | No | `-` | Secondary action button |
233
+ | `secondaryAction` | `ReactElement<SharedProps & Pick<SharedAccessibilityProps, accessibilityLabel> & { variant?: ButtonVariant; disabled?: boolean \| undefined; loading?: boolean \| undefined; progressCircleSize?: number \| undefined; transparent?: boolean \| undefined; block?: boolean \| undefined; compact?: boolean \| undefined; children: ReactNode; start?: ReactNode; startIcon?: IconName \| undefined; startIconActive?: boolean \| undefined; end?: ReactNode; endIcon?: IconName \| undefined; endIconActive?: boolean \| undefined; flush?: start \| end \| undefined; name?: string \| undefined; noScaleOnPress?: boolean \| undefined; numberOfLines?: number \| undefined; } & Omit<PressableBaseProps, testID \| children \| accessibilityLabel \| transparent \| name \| block \| start \| end \| loading \| variant \| startIcon \| startIconActive \| numberOfLines \| disabled \| noScaleOnPress \| progressCircleSize \| compact \| endIcon \| endIconActive \| flush> & { onClick?: MouseEventHandler<Element> \| undefined; }, string \| JSXElementConstructor<any>> \| undefined` | No | `-` | Secondary action button |
234
234
  | `style` | `CSSProperties` | No | `-` | - |
235
235
  | `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
236
236
  | `textAlign` | `ResponsiveProp<center \| start \| end \| justify>` | No | `-` | - |
@@ -240,7 +240,7 @@ function LoadingExample() {
240
240
  | `transform` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
241
241
  | `userSelect` | `ResponsiveProp<text \| none \| auto \| all>` | No | `-` | - |
242
242
  | `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
243
- | `width` | `ResponsiveProp<Width<string \| number>>` | No | `100%` | - |
243
+ | `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
244
244
  | `zIndex` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
245
245
 
246
246
 
@@ -220,7 +220,7 @@ function WizardExample() {
220
220
  | Prop | Type | Required | Default | Description |
221
221
  | --- | --- | --- | --- | --- |
222
222
  | `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| space-between \| space-around \| space-evenly>` | No | `-` | - |
223
- | `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `center` | - |
223
+ | `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
224
224
  | `alignSelf` | `ResponsiveProp<center \| normal \| auto \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
225
225
  | `as` | `div` | No | `-` | The underlying element or component the polymorphic component will render. Changing as also changes the inherited native props (e.g. href for as=a) and the expected ref type. |
226
226
  | `aspectRatio` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
@@ -303,8 +303,8 @@ function WizardExample() {
303
303
  | `paddingEnd` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
304
304
  | `paddingStart` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
305
305
  | `paddingTop` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
306
- | `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `3` | - |
307
- | `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `2` | - |
306
+ | `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
307
+ | `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
308
308
  | `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
309
309
  | `position` | `ResponsiveProp<fixed \| static \| relative \| absolute \| sticky>` | No | `-` | - |
310
310
  | `ref` | `RefObject<HTMLDivElement> \| ((instance: HTMLDivElement \| null) => void) \| null` | No | `-` | - |
@@ -188,5 +188,107 @@ function AccessibilityExample() {
188
188
  | `onChange` | `(value: string) => void` | Yes | `-` | - |
189
189
  | `options` | `{ label: ReactNode; id: string; }[]` | Yes | `-` | - |
190
190
  | `value` | `string` | Yes | `-` | - |
191
+ | `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| space-between \| space-around \| space-evenly>` | No | `-` | - |
192
+ | `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
193
+ | `alignSelf` | `ResponsiveProp<center \| normal \| auto \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
194
+ | `aspectRatio` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
195
+ | `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 | `-` | - |
196
+ | `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
197
+ | `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
198
+ | `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
199
+ | `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 | `-` | - |
200
+ | `borderEndWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
201
+ | `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
202
+ | `borderStartWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
203
+ | `borderTopLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
204
+ | `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
205
+ | `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
206
+ | `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
207
+ | `bordered` | `boolean` | No | `-` | Add a border around all sides of the box. |
208
+ | `borderedBottom` | `boolean` | No | `-` | Add a border to the bottom side of the box. |
209
+ | `borderedEnd` | `boolean` | No | `-` | Add a border to the trailing side of the box. |
210
+ | `borderedHorizontal` | `boolean` | No | `-` | Add a border to the leading and trailing sides of the box. |
211
+ | `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
212
+ | `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
213
+ | `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
214
+ | `bottom` | `ResponsiveProp<Bottom<string \| number>>` | No | `-` | - |
215
+ | `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 | `-` | - |
216
+ | `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
217
+ | `dangerouslySetBackground` | `string` | No | `-` | - |
218
+ | `dangerouslySetColor` | `string` | No | `-` | - |
219
+ | `disabled` | `boolean` | No | `-` | - |
220
+ | `display` | `ResponsiveProp<grid \| revert \| none \| block \| inline \| inline-block \| flex \| inline-flex \| inline-grid \| contents \| flow-root \| list-item>` | No | `-` | - |
221
+ | `elevation` | `0 \| 1 \| 2` | No | `-` | - |
222
+ | `flexBasis` | `ResponsiveProp<FlexBasis<string \| number>>` | No | `-` | - |
223
+ | `flexDirection` | `ResponsiveProp<column \| row \| row-reverse \| column-reverse>` | No | `-` | - |
224
+ | `flexGrow` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
225
+ | `flexShrink` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
226
+ | `flexWrap` | `ResponsiveProp<nowrap \| wrap \| wrap-reverse>` | No | `-` | - |
227
+ | `font` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
228
+ | `fontFamily` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
229
+ | `fontSize` | `ResponsiveProp<FontSize \| inherit>` | No | `-` | - |
230
+ | `fontWeight` | `ResponsiveProp<FontWeight \| inherit>` | No | `-` | - |
231
+ | `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
232
+ | `grid` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
233
+ | `gridArea` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
234
+ | `gridAutoColumns` | `ResponsiveProp<GridAutoColumns<string \| number>>` | No | `-` | - |
235
+ | `gridAutoFlow` | `inherit \| revert \| row \| column \| -moz-initial \| initial \| revert-layer \| unset \| dense` | No | `-` | - |
236
+ | `gridAutoRows` | `ResponsiveProp<GridAutoRows<string \| number>>` | No | `-` | - |
237
+ | `gridColumn` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
238
+ | `gridColumnEnd` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
239
+ | `gridColumnStart` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
240
+ | `gridRow` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
241
+ | `gridRowEnd` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
242
+ | `gridRowStart` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
243
+ | `gridTemplate` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
244
+ | `gridTemplateAreas` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
245
+ | `gridTemplateColumns` | `ResponsiveProp<GridTemplateColumns<string \| number>>` | No | `-` | - |
246
+ | `gridTemplateRows` | `ResponsiveProp<GridTemplateRows<string \| number>>` | No | `-` | - |
247
+ | `height` | `ResponsiveProp<Height<string \| number>>` | No | `-` | - |
248
+ | `justifyContent` | `ResponsiveProp<left \| right \| center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| space-between \| space-around \| space-evenly>` | No | `-` | - |
249
+ | `left` | `ResponsiveProp<Left<string \| number>>` | No | `-` | - |
250
+ | `lineHeight` | `ResponsiveProp<LineHeight \| inherit>` | No | `-` | - |
251
+ | `margin` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
252
+ | `marginBottom` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
253
+ | `marginEnd` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
254
+ | `marginStart` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
255
+ | `marginTop` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
256
+ | `marginX` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
257
+ | `marginY` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
258
+ | `maxHeight` | `ResponsiveProp<MaxHeight<string \| number>>` | No | `-` | - |
259
+ | `maxWidth` | `ResponsiveProp<MaxWidth<string \| number>>` | No | `-` | - |
260
+ | `minHeight` | `ResponsiveProp<MinHeight<string \| number>>` | No | `-` | - |
261
+ | `minWidth` | `ResponsiveProp<MinWidth<string \| number>>` | No | `-` | - |
262
+ | `mono` | `boolean` | No | `-` | Use monospace font family. |
263
+ | `noWrap` | `boolean` | No | `false` | Set text to be in a single line. |
264
+ | `numberOfLines` | `number` | No | `-` | - |
265
+ | `opacity` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
266
+ | `overflow` | `clip \| wrap \| truncate \| break` | No | `-` | Set overflow behavior. |
267
+ | `padding` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
268
+ | `paddingBottom` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
269
+ | `paddingEnd` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
270
+ | `paddingStart` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
271
+ | `paddingTop` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
272
+ | `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
273
+ | `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
274
+ | `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
275
+ | `position` | `ResponsiveProp<fixed \| static \| relative \| absolute \| sticky>` | No | `-` | - |
276
+ | `renderEmptyNode` | `boolean` | No | `-` | - |
277
+ | `right` | `ResponsiveProp<Right<string \| number>>` | No | `-` | - |
278
+ | `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
279
+ | `slashedZero` | `boolean` | No | `false` | Use character for number zero with a slash through it to differentiate it from the letter O. |
280
+ | `style` | `CSSProperties` | No | `-` | - |
281
+ | `tabularNumbers` | `boolean` | No | `false` | Activates the set of figures where numbers are all of the same size, allowing them to be easily aligned. |
282
+ | `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
283
+ | `textAlign` | `ResponsiveProp<center \| start \| end \| justify>` | No | `-` | - |
284
+ | `textDecoration` | `ResponsiveProp<none \| underline \| overline \| line-through \| underline overline \| underline double>` | No | `-` | - |
285
+ | `textTransform` | `ResponsiveProp<capitalize \| lowercase \| none \| uppercase>` | No | `-` | - |
286
+ | `top` | `ResponsiveProp<Top<string \| number>>` | No | `-` | - |
287
+ | `transform` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
288
+ | `underline` | `boolean` | No | `false` | Set text decoration to underline. |
289
+ | `userSelect` | `ResponsiveProp<text \| none \| auto \| all>` | No | `-` | - |
290
+ | `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
291
+ | `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
292
+ | `zIndex` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
191
293
 
192
294
 
@@ -141,7 +141,6 @@ function CustomOverlay() {
141
141
  | `minHeight` | `ResponsiveProp<MinHeight<string \| number>>` | No | `-` | - |
142
142
  | `minWidth` | `ResponsiveProp<MinWidth<string \| number>>` | No | `-` | - |
143
143
  | `onChange` | `FormEventHandler<HTMLDivElement>` | No | `-` | - |
144
- | `onClick` | `(MouseEventHandler<Element> & MouseEventHandler<HTMLDivElement>)` | No | `-` | - |
145
144
  | `opacity` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
146
145
  | `overflow` | `ResponsiveProp<hidden \| auto \| visible \| clip \| scroll>` | No | `-` | - |
147
146
  | `padding` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
@@ -411,10 +411,10 @@ function TablePaginationExample() {
411
411
  | `activePage` | `number` | Yes | `-` | React state for the currently active page. Current active page number (1-based) |
412
412
  | `onChange` | `(activePage: number) => void` | Yes | `-` | Callback that is fired when the active page changes. Use this callback to update the activePage state. |
413
413
  | `totalPages` | `number` | Yes | `-` | Total number of pages. |
414
- | `PaginationEllipsisComponent` | `PaginationEllipsisComponent` | No | `({ content = '...', testID }: PaginationEllipsisProps) => ( <Text noWrap aria-hidden="true" color="fgMuted" font="headline" testID={testID}> {content} </Text> )` | Custom component for rendering ellipsis |
415
- | `PaginationNavigationButtonComponent` | `PaginationNavigationButtonComponent` | No | `forwardRef( ( { direction, onClick, disabled, accessibilityLabel, testID }: PaginationNavigationButtonProps, ref: React.ForwardedRef<HTMLButtonElement>, ) => { return ( <IconButton ref={ref} compact transparent accessibilityLabel={accessibilityLabel} disabled={disabled} name={iconMap[direction]} onClick={onClick} testID={testID} variant="secondary" /> ); }, )` | Custom component for rendering navigation buttons. Must use forwardRef to properly receive and forward the ref to a focusable DOM element for focus management to work correctly. |
416
- | `PaginationPageButtonComponent` | `PaginationPageButtonComponent` | No | `forwardRef( ( { page, onClick, isCurrentPage, disabled, accessibilityLabel, testID, ...props }: PaginationPageButtonProps, ref: React.ForwardedRef<HTMLButtonElement>, ) => { const handleClick = useCallback(() => onClick(page), [onClick, page]); const isSingleDigit = page < 10; return ( <Button ref={ref} compact accessibilityLabel={accessibilityLabel} aria-current={isCurrentPage ? 'page' : undefined} className={cx(isSingleDigit && circularButtonCss)} disabled={disabled} onClick={handleClick} testID={testID} transparent={!isCurrentPage} variant={isCurrentPage ? 'primary' : 'secondary'} {...props} > {page} </Button> ); }, )` | Custom component for rendering page buttons. Must use forwardRef to properly receive and forward the ref to a focusable DOM element for focus management to work correctly. |
417
- | `accessibilityLabel` | `string` | No | `Pagination` | - |
414
+ | `PaginationEllipsisComponent` | `PaginationEllipsisComponent` | No | `-` | Custom component for rendering ellipsis |
415
+ | `PaginationNavigationButtonComponent` | `PaginationNavigationButtonComponent` | No | `-` | Custom component for rendering navigation buttons. Must use forwardRef to properly receive and forward the ref to a focusable DOM element for focus management to work correctly. |
416
+ | `PaginationPageButtonComponent` | `PaginationPageButtonComponent` | No | `-` | Custom component for rendering page buttons. Must use forwardRef to properly receive and forward the ref to a focusable DOM element for focus management to work correctly. |
417
+ | `accessibilityLabel` | `string` | No | `-` | - |
418
418
  | `accessibilityLabels` | `{ next?: string; previous?: string \| undefined; first?: string \| undefined; last?: string \| undefined; page?: ((page: number) => string) \| undefined; } \| undefined` | No | `-` | Custom accessibility labels for navigation buttons |
419
419
  | `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| space-between \| space-around \| space-evenly>` | No | `-` | - |
420
420
  | `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
@@ -441,14 +441,14 @@ function TablePaginationExample() {
441
441
  | `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
442
442
  | `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
443
443
  | `bottom` | `ResponsiveProp<Bottom<string \| number>>` | No | `-` | - |
444
- | `boundaryCount` | `number` | No | `1` | Number of pages to show at the beginning and end of pagination. |
444
+ | `boundaryCount` | `number` | No | `-` | Number of pages to show at the beginning and end of pagination. |
445
445
  | `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 | `-` | - |
446
446
  | `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
447
447
  | `dangerouslySetBackground` | `string` | No | `-` | - |
448
448
  | `disabled` | `boolean` | No | `-` | - |
449
449
  | `display` | `ResponsiveProp<grid \| revert \| none \| block \| inline \| inline-block \| flex \| inline-flex \| inline-grid \| contents \| flow-root \| list-item>` | No | `-` | - |
450
450
  | `elevation` | `0 \| 1 \| 2` | No | `-` | - |
451
- | `firstPageButtonLabel` | `string` | No | `First` | Custom label for the first page button |
451
+ | `firstPageButtonLabel` | `string` | No | `-` | Custom label for the first page button |
452
452
  | `flexBasis` | `ResponsiveProp<FlexBasis<string \| number>>` | No | `-` | - |
453
453
  | `flexDirection` | `ResponsiveProp<column \| row \| row-reverse \| column-reverse>` | No | `-` | - |
454
454
  | `flexGrow` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
@@ -477,7 +477,7 @@ function TablePaginationExample() {
477
477
  | `height` | `ResponsiveProp<Height<string \| number>>` | No | `-` | - |
478
478
  | `justifyContent` | `ResponsiveProp<left \| right \| center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| space-between \| space-around \| space-evenly>` | No | `-` | - |
479
479
  | `key` | `Key \| null` | No | `-` | - |
480
- | `lastPageButtonLabel` | `string` | No | `Last` | Custom label for the last page button |
480
+ | `lastPageButtonLabel` | `string` | No | `-` | Custom label for the last page button |
481
481
  | `left` | `ResponsiveProp<Left<string \| number>>` | No | `-` | - |
482
482
  | `lineHeight` | `ResponsiveProp<LineHeight \| inherit>` | No | `-` | - |
483
483
  | `margin` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
@@ -506,7 +506,7 @@ function TablePaginationExample() {
506
506
  | `right` | `ResponsiveProp<Right<string \| number>>` | No | `-` | - |
507
507
  | `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
508
508
  | `showFirstLastButtons` | `boolean` | No | `-` | Whether to show first and last page navigation buttons |
509
- | `siblingCount` | `number` | No | `1` | Number of pages to show on each side of current page. |
509
+ | `siblingCount` | `number` | No | `-` | Number of pages to show on each side of current page. |
510
510
  | `style` | `CSSProperties` | No | `-` | - |
511
511
  | `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
512
512
  | `testIDMap` | `{ nav?: string; nextButton?: string \| undefined; prevButton?: string \| undefined; firstButton?: string \| undefined; lastButton?: string \| undefined; } \| undefined` | No | `-` | Custom test IDs for specific elements within pagination |
@@ -94,7 +94,7 @@ Use the `borderWidth` and `borderColor` props to change border style of the imag
94
94
 
95
95
  | Prop | Type | Required | Default | Description |
96
96
  | --- | --- | --- | --- | --- |
97
- | `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 | `borderWidth ? 'bg' : undefined` | - |
97
+ | `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 | `-` | - |
98
98
  | `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
99
99
  | `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Children content |
100
100
  | `max` | `number` | No | `4` | Indicates the number of remote image before it collapses |
@@ -191,7 +191,7 @@ function SelectChipExample() {
191
191
  | `aspectRatio` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
192
192
  | `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). |
193
193
  | `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
194
- | `block` | `boolean` | No | `false` | Set element to block and expand to 100% width. Makes the Popover Subject fill the width of the parent container |
194
+ | `block` | `boolean` | No | `-` | Set element to block and expand to 100% width. Makes the Popover Subject fill the width of the parent container |
195
195
  | `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
196
196
  | `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
197
197
  | `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
@@ -290,11 +290,11 @@ function SelectChipExample() {
290
290
  | `position` | `ResponsiveProp<fixed \| static \| relative \| absolute \| sticky>` | No | `-` | - |
291
291
  | `pressed` | `boolean` | No | `-` | Is the element being pressed. Primarily a mobile feature, but can be used on the web. |
292
292
  | `ref` | `((instance: unknown) => void) \| RefObject<unknown> \| null` | No | `-` | - |
293
- | `respectNegativeTabIndex` | `boolean` | No | `false` | If true, the focus trap will respect negative tabIndex values, removing them from the list of focusable elements. |
293
+ | `respectNegativeTabIndex` | `boolean` | No | `-` | If true, the focus trap will respect negative tabIndex values, removing them from the list of focusable elements. |
294
294
  | `restoreFocusOnUnmount` | `boolean` | No | `true` | If true, the focus trap will restore focus to the previously focused element when it unmounts. WARNING: If you disable this, you need to ensure that focus is restored properly so it doesnt end up on the body |
295
295
  | `right` | `ResponsiveProp<Right<string \| number>>` | No | `-` | - |
296
296
  | `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
297
- | `showOverlay` | `boolean` | No | `false` | Display an overlay over all content below the Popover menu |
297
+ | `showOverlay` | `boolean` | No | `-` | Display an overlay over all content below the Popover menu |
298
298
  | `start` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | ReactNode placed before the value |
299
299
  | `style` | `CSSProperties` | No | `-` | - |
300
300
  | `styles` | `{ root?: CSSProperties; content?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for individual elements of the Chip component |
@@ -81,9 +81,9 @@ function ElevationSwitchDemo() {
81
81
  | Prop | Type | Required | Default | Description |
82
82
  | --- | --- | --- | --- | --- |
83
83
  | `accessibilityLabel` | `string` | No | `-` | Accessibility label describing the element. |
84
- | `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 | `checked ? 'bgPrimary' : 'bgTertiary'` | Background color of the overlay (element being interacted with). |
84
+ | `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). |
85
85
  | `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 | `-` | Border color of the element. |
86
- | `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `1000` | - |
86
+ | `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
87
87
  | `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
88
88
  | `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Label for the control option. |
89
89
  | `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 | `-` | - |
@@ -220,18 +220,107 @@ render(<Example />);
220
220
  | `tabs` | `TabbedChipProps<TabId>[]` | Yes | `-` | - |
221
221
  | `TabComponent` | `FC<TabbedChipProps<TabId>>` | No | `-` | - |
222
222
  | `TabsActiveIndicatorComponent` | `TabsActiveIndicatorComponent` | No | `-` | - |
223
+ | `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| space-between \| space-around \| space-evenly>` | No | `-` | - |
224
+ | `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
225
+ | `alignSelf` | `ResponsiveProp<center \| normal \| auto \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
226
+ | `aspectRatio` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
223
227
  | `autoScrollOffset` | `number` | No | `50` | X position offset when auto-scrolling to active tab (to avoid active tab being covered by the paddle on the left side, default: 50px) |
224
- | `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 | `-` | - |
228
+ | `background` | `((Color \| { base?: Color; phone?: Color \| undefined; tablet?: Color \| undefined; desktop?: Color \| undefined; }) & Color) \| undefined` | No | `-` | - |
229
+ | `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
230
+ | `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
231
+ | `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
232
+ | `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 | `-` | - |
233
+ | `borderEndWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
234
+ | `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
235
+ | `borderStartWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
236
+ | `borderTopLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
237
+ | `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
238
+ | `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
239
+ | `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
240
+ | `bordered` | `boolean` | No | `-` | Add a border around all sides of the box. |
241
+ | `borderedBottom` | `boolean` | No | `-` | Add a border to the bottom side of the box. |
242
+ | `borderedEnd` | `boolean` | No | `-` | Add a border to the trailing side of the box. |
243
+ | `borderedHorizontal` | `boolean` | No | `-` | Add a border to the leading and trailing sides of the box. |
244
+ | `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
245
+ | `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
246
+ | `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
247
+ | `bottom` | `ResponsiveProp<Bottom<string \| number>>` | No | `-` | - |
225
248
  | `classNames` | `{ root?: string; scrollContainer?: string \| undefined; tabs?: string \| undefined; } \| undefined` | No | `-` | - |
249
+ | `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 | `-` | - |
250
+ | `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
226
251
  | `compact` | `boolean` | No | `false` | Turn on to use a compact Chip component for each tab. |
252
+ | `dangerouslySetBackground` | `string` | No | `-` | - |
227
253
  | `disabled` | `boolean` | No | `-` | Disable interactions on all the tabs. |
254
+ | `display` | `ResponsiveProp<grid \| revert \| none \| block \| inline \| inline-block \| flex \| inline-flex \| inline-grid \| contents \| flow-root \| list-item>` | No | `-` | - |
255
+ | `elevation` | `0 \| 1 \| 2` | No | `-` | - |
256
+ | `flexBasis` | `ResponsiveProp<FlexBasis<string \| number>>` | No | `-` | - |
257
+ | `flexDirection` | `ResponsiveProp<column \| row \| row-reverse \| column-reverse>` | No | `-` | - |
258
+ | `flexGrow` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
259
+ | `flexShrink` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
260
+ | `flexWrap` | `ResponsiveProp<nowrap \| wrap \| wrap-reverse>` | No | `-` | - |
261
+ | `font` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
262
+ | `fontFamily` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
263
+ | `fontSize` | `ResponsiveProp<FontSize \| inherit>` | No | `-` | - |
264
+ | `fontWeight` | `ResponsiveProp<FontWeight \| inherit>` | No | `-` | - |
228
265
  | `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `1` | The spacing between Tabs |
266
+ | `grid` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
267
+ | `gridArea` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
268
+ | `gridAutoColumns` | `ResponsiveProp<GridAutoColumns<string \| number>>` | No | `-` | - |
269
+ | `gridAutoFlow` | `inherit \| revert \| row \| column \| -moz-initial \| initial \| revert-layer \| unset \| dense` | No | `-` | - |
270
+ | `gridAutoRows` | `ResponsiveProp<GridAutoRows<string \| number>>` | No | `-` | - |
271
+ | `gridColumn` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
272
+ | `gridColumnEnd` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
273
+ | `gridColumnStart` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
274
+ | `gridRow` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
275
+ | `gridRowEnd` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
276
+ | `gridRowStart` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
277
+ | `gridTemplate` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
278
+ | `gridTemplateAreas` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
279
+ | `gridTemplateColumns` | `ResponsiveProp<GridTemplateColumns<string \| number>>` | No | `-` | - |
280
+ | `gridTemplateRows` | `ResponsiveProp<GridTemplateRows<string \| number>>` | No | `-` | - |
281
+ | `height` | `ResponsiveProp<Height<string \| number>>` | No | `-` | - |
282
+ | `justifyContent` | `ResponsiveProp<left \| right \| center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| space-between \| space-around \| space-evenly>` | No | `-` | - |
283
+ | `left` | `ResponsiveProp<Left<string \| number>>` | No | `-` | - |
284
+ | `lineHeight` | `ResponsiveProp<LineHeight \| inherit>` | No | `-` | - |
285
+ | `margin` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
286
+ | `marginBottom` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
287
+ | `marginEnd` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
288
+ | `marginStart` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
289
+ | `marginTop` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
290
+ | `marginX` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
291
+ | `marginY` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
292
+ | `maxHeight` | `ResponsiveProp<MaxHeight<string \| number>>` | No | `-` | - |
293
+ | `maxWidth` | `ResponsiveProp<MaxWidth<string \| number>>` | No | `-` | - |
294
+ | `minHeight` | `ResponsiveProp<MinHeight<string \| number>>` | No | `-` | - |
295
+ | `minWidth` | `ResponsiveProp<MinWidth<string \| number>>` | No | `-` | - |
229
296
  | `nextArrowAccessibilityLabel` | `string` | No | `-` | - |
297
+ | `opacity` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
298
+ | `overflow` | `ResponsiveProp<hidden \| auto \| visible \| clip \| scroll>` | No | `-` | - |
299
+ | `padding` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
300
+ | `paddingBottom` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
301
+ | `paddingEnd` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
302
+ | `paddingStart` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
303
+ | `paddingTop` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
304
+ | `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
305
+ | `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
306
+ | `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
307
+ | `position` | `ResponsiveProp<fixed \| static \| relative \| absolute \| sticky>` | No | `-` | - |
230
308
  | `previousArrowAccessibilityLabel` | `string` | No | `-` | - |
231
309
  | `ref` | `null \| (instance: HTMLElement \| null) => void \| MutableRefObject<HTMLElement \| null>` | No | `-` | - |
310
+ | `right` | `ResponsiveProp<Right<string \| number>>` | No | `-` | - |
311
+ | `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
312
+ | `style` | `CSSProperties` | No | `-` | - |
232
313
  | `styles` | `{ root?: CSSProperties; scrollContainer?: CSSProperties \| undefined; paddle?: CSSProperties \| undefined; tabs?: CSSProperties \| undefined; } \| undefined` | No | `-` | - |
233
314
  | `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
315
+ | `textAlign` | `ResponsiveProp<center \| start \| end \| justify>` | No | `-` | - |
316
+ | `textDecoration` | `ResponsiveProp<none \| underline \| overline \| line-through \| underline overline \| underline double>` | No | `-` | - |
317
+ | `textTransform` | `ResponsiveProp<capitalize \| lowercase \| none \| uppercase>` | No | `-` | - |
318
+ | `top` | `ResponsiveProp<Top<string \| number>>` | No | `-` | - |
319
+ | `transform` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
320
+ | `userSelect` | `ResponsiveProp<text \| none \| auto \| all>` | No | `-` | - |
321
+ | `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
234
322
  | `width` | `ResponsiveProp<Width<string \| number>>` | No | `100%` | The width of the scroll container, defaults to 100% of the parent container If the tabs are wider than the width of the container, paddles will be shown to scroll the tabs. |
323
+ | `zIndex` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
235
324
 
236
325
 
237
326
  ## Styles
@@ -354,6 +354,7 @@ function SortingExample() {
354
354
  | --- | --- | --- | --- | --- |
355
355
  | `bordered` | `boolean` | No | `-` | When set, a border will be applied around the entire table |
356
356
  | `cellSpacing` | `TableCellSpacing` | No | `-` | Provide custom cell spacing for all child TableCells |
357
+ | `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Children are required, and should always include a TableBody. TableHeader and TableFooter are both optional, and will magically flow into the correct place in the table (top/bottom) |
357
358
  | `compact` | `boolean` | No | `-` | Use compact cell spacing. If set, cellSpacing will override these defaults |
358
359
  | `height` | `string \| number` | No | `-` | Set a fixed height. |
359
360
  | `key` | `Key \| null` | No | `-` | - |
@@ -94,6 +94,8 @@ import { TableCaption } from '@coinbase/cds-web/tables/TableCaption'
94
94
  | `align` | `center \| start \| end \| justify` | No | `'start'` | Specify text alignment. Only applicable when children is a string. |
95
95
  | `as` | `div \| abbr \| code \| dd \| del \| dl \| dt \| h1 \| h2 \| h3 \| h4 \| ins \| kbd \| label \| li \| output \| p \| pre \| q \| s \| span \| strong \| sub \| sup \| time` | No | `'span'` | A semantic HTML element or a React component to be rendered. Only applicable when children is a string. |
96
96
  | `backgroundColor` | `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 | `-` | Set the background color to a CDS palette background color name. |
97
+ | `children` | `(string \| ReactElement<any, string \| JSXElementConstructor<any>>) & ReactNode` | No | `-` | The children to render, either as a React element or a string. |
98
+ | `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 | `-` | Set the text color to a CDS palette foreground color name. |
97
99
  | `innerSpacing` | `CellSpacing` | No | `-` | The spacing to use on the inner content of the caption. Overrides table cell spacing defaults. |
98
100
  | `onChange` | `FormEventHandler<HTMLDivElement>` | No | `-` | - |
99
101
  | `outerSpacing` | `CellSpacing` | No | `-` | The spacing to use on the parent wrapper of the caption. Overrides table cell spacing defaults. |
@@ -87,6 +87,7 @@ Alternatively, you may create a variant with different rectangle widths by setti
87
87
  | `disableRandomRectWidth` | `boolean` | No | `-` | Disables randomization of rectangle fallback width. |
88
88
  | `end` | `image \| avatar \| icon \| pictogram \| asset` | No | `-` | Display end shimmer with a shape according to type. |
89
89
  | `innerSpacing` | `CellSpacing` | No | `{ spacingHorizontal: 0 }` | The spacing to use on the inner content of Cell |
90
+ | `onChange` | `FormEventHandler<HTMLDivElement>` | No | `-` | - |
90
91
  | `outerSpacing` | `CellSpacing` | No | `-` | The spacing to use on the parent wrapper of Cell |
91
92
  | `rectWidthVariant` | `number` | No | `-` | Creates a variant that contains rectangle fallbacks of deterministic width. Variants map to a predetermined set of width values, which are cycled through repeatedly when the set is exhausted. |
92
93
  | `start` | `image \| avatar \| icon \| pictogram \| asset` | No | `-` | Display start shimmer with a shape according to type. |
@@ -130,10 +130,13 @@ function ResponsiveExample() {
130
130
  | Prop | Type | Required | Default | Description |
131
131
  | --- | --- | --- | --- | --- |
132
132
  | `backgroundColor` | `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 | `undefined` | Set the background color for this entire row to some CDS Palette background color name |
133
+ | `children` | `string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| string & ReactElement<any, string \| JSXElementConstructor<any>> \| string & Iterable<ReactNode> \| string & ReactPortal \| number & ReactElement<any, string \| JSXElementConstructor<any>> \| number & Iterable<ReactNode> \| number & ReactPortal \| false & ReactElement<any, string \| JSXElementConstructor<any>> \| false & Iterable<ReactNode> \| false & ReactPortal \| true & ReactElement<any, string \| JSXElementConstructor<any>> \| true & Iterable<ReactNode> \| true & ReactPortal \| ReactElement<any, string \| JSXElementConstructor<any>> & string \| ReactElement<any, string \| JSXElementConstructor<any>> & number \| ReactElement<any, string \| JSXElementConstructor<any>> & false \| ReactElement<any, string \| JSXElementConstructor<any>> & true \| ReactElement<any, string \| JSXElementConstructor<any>> & Iterable<ReactNode> \| ReactElement<any, string \| JSXElementConstructor<any>> & ReactPortal \| Iterable<ReactNode> & string \| Iterable<ReactNode> & number \| Iterable<ReactNode> & false \| Iterable<ReactNode> & true \| Iterable<ReactNode> & ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> & ReactPortal \| ReactPortal & string \| ReactPortal & number \| ReactPortal & false \| ReactPortal & true \| ReactPortal & ReactElement<any, string \| JSXElementConstructor<any>> \| ReactPortal & Iterable<ReactNode>` | No | `-` | Children are required, and should always include TableCell \| TableCell[]. |
134
+ | `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 | `undefined` | Set the text color for this entire row to some CDS Palette foreground color name |
133
135
  | `disableHoverIndicator` | `boolean` | No | `false` | By default, we set a hover background color of palette.backgroundAlternate on hover for the row. Use this prop to disable this behavior |
134
136
  | `fullWidth` | `boolean` | No | `undefined` | Should this row span the entire width of the table? Useful for treating a row as a Control Strip. |
135
137
  | `innerSpacing` | `CellSpacing` | No | `-` | The spacing to use on the inner content of Cell. Will only take effect when fullWidth is set to true |
136
138
  | `onChange` | `FormEventHandler<HTMLDivElement>` | No | `-` | - |
139
+ | `onClick` | `MouseEventHandler<Element> \| (() => void)` | No | `noop` | Callback to fire when pressed |
137
140
  | `outerSpacing` | `CellSpacing` | No | `-` | The spacing to use on the parent wrapper of Cell. Will only take effect when fullWidth is set to true |
138
141
  | `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
139
142
 
@@ -215,20 +215,20 @@ function TooltipWithInteractiveContent() {
215
215
  | Prop | Type | Required | Default | Description |
216
216
  | --- | --- | --- | --- | --- |
217
217
  | `content` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | The content to render within the tooltip. |
218
- | `autoFocusDelay` | `number` | No | `undefined` | The amount of time in milliseconds to wait before auto-focusing the first focusable element. |
218
+ | `autoFocusDelay` | `number` | No | `-` | The amount of time in milliseconds to wait before auto-focusing the first focusable element. |
219
219
  | `closeDelay` | `number` | No | `-` | Delay (in ms) before hiding the tooltip after pointer leave. Keyboard blur still closes immediately. |
220
- | `disableAutoFocus` | `boolean` | No | `false` | If true, the focus trap will not automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. |
220
+ | `disableAutoFocus` | `boolean` | No | `-` | If true, the focus trap will not automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. |
221
221
  | `disableFocusTrap` | `boolean` | No | `-` | Disables the focus trap to allow normal keyboard navigation. |
222
222
  | `disablePortal` | `boolean` | No | `false` | - |
223
223
  | `disableTypeFocus` | `boolean` | No | `-` | Use for editable Search Input components to ensure focus is correctly applied |
224
224
  | `elevation` | `0 \| 1 \| 2` | No | `-` | Determines a components shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
225
- | `focusTabIndexElements` | `boolean` | No | `false` | If true, the focus trap will include all elements with tabIndex values in the list of focusable elements. |
225
+ | `focusTabIndexElements` | `boolean` | No | `-` | If true, the focus trap will include all elements with tabIndex values in the list of focusable elements. |
226
226
  | `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `1` | This value corresponds to how big the gap between the subject and the tooltip is. We do not encourage usage of this prop. But it is enabled for special cases as an escape hatch. |
227
227
  | `hasInteractiveContent` | `boolean` | No | `-` | Whether the tooltip has interactive elements inside the content. |
228
228
  | `invertColorScheme` | `boolean` | No | `true` | Invert the themes activeColorScheme for this component |
229
229
  | `openDelay` | `number` | No | `-` | Delay (in ms) before showing the tooltip on pointer hover. Keyboard focus still opens immediately for accessibility. |
230
- | `placement` | `top \| bottom \| left \| right` | No | `top` | Position of tooltip in relation to the subject. |
231
- | `respectNegativeTabIndex` | `boolean` | No | `false` | If true, the focus trap will respect negative tabIndex values, removing them from the list of focusable elements. |
230
+ | `placement` | `top \| bottom \| left \| right` | No | `-` | Position of tooltip in relation to the subject. |
231
+ | `respectNegativeTabIndex` | `boolean` | No | `-` | If true, the focus trap will respect negative tabIndex values, removing them from the list of focusable elements. |
232
232
  | `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
233
233
  | `tooltipId` | `string` | No | `-` | A unique ID used to ensure tooltips are accessible |
234
234
  | `visible` | `boolean` | No | `true` | Control whether the tooltip is shown or hidden. |
@@ -567,13 +567,13 @@ function CallbacksExample() {
567
567
  | `TourStepArrowComponent` | `TourStepArrowComponent` | No | `DefaultTourStepArrow` | The default Component to render for each TourStep arrow element. |
568
568
  | `disableAutoScroll` | `boolean` | No | `-` | Disable automatically scrolling to active elements. |
569
569
  | `disablePortal` | `boolean` | No | `-` | - |
570
- | `hideOverlay` | `boolean` | No | `false` | Hide overlay when tour is active |
571
- | `scrollOptions` | `TourScrollOptions` | No | `{ behavior: 'smooth', marginX: 100, marginY: 100, }` | Controls the scrolling behavior and margins when calling element.scrollTo() to scroll to an active TourStep target. |
570
+ | `hideOverlay` | `boolean` | No | `-` | Hide overlay when tour is active |
571
+ | `scrollOptions` | `TourScrollOptions` | No | `-` | Controls the scrolling behavior and margins when calling element.scrollTo() to scroll to an active TourStep target. |
572
572
  | `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
573
573
  | `tourMaskBorderRadius` | `string \| number` | No | `-` | Corner radius for the TourMasks content mask. Uses SVG rect elements rx and ry attributes https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/rx. |
574
574
  | `tourMaskPadding` | `string \| number` | No | `-` | Padding to add around the edges of the TourMasks content mask. |
575
575
  | `tourStepAutoPlacement` | `{ padding?: Padding; rootBoundary?: RootBoundary \| undefined; elementContext?: ElementContext \| undefined; altBoundary?: boolean \| undefined; crossAxis?: boolean \| undefined; alignment?: Alignment \| null \| undefined; autoAlignment?: boolean \| undefined; allowedPlacements?: Placement[] \| undefined; boundary?: Boundary \| undefined; } \| undefined` | No | `24` | Configures @floating-ui autoPlacement options for Tour Step component. See https://floating-ui.com/docs/autoplacement. |
576
- | `tourStepOffset` | `number \| Partial<{ mainAxis: number; crossAxis: number; alignmentAxis: number \| null; }> \| Derivable<OffsetValue>` | No | `24` | Configures @floating-ui offset options for Tour Step component. See https://floating-ui.com/docs/offset. |
576
+ | `tourStepOffset` | `number \| Partial<{ mainAxis: number; crossAxis: number; alignmentAxis: number \| null; }> \| Derivable<OffsetValue>` | No | `-` | Configures @floating-ui offset options for Tour Step component. See https://floating-ui.com/docs/offset. |
577
577
  | `tourStepShift` | `{ padding?: Padding; rootBoundary?: RootBoundary \| undefined; elementContext?: ElementContext \| undefined; altBoundary?: boolean \| undefined; crossAxis?: boolean \| undefined; mainAxis?: boolean \| undefined; limiter?: { fn: (state: MiddlewareState) => Coords; options?: any; } \| undefined; boundary?: Boundary \| undefined; } \| undefined` | No | `-` | Configures @floating-ui shift options for Tour Step component. See https://floating-ui.com/docs/shift. |
578
578
 
579
579
 
@@ -1252,8 +1252,8 @@ function ResponsiveTrayExample() {
1252
1252
  | `classNames` | `{ readonly root?: string; readonly overlay?: string \| undefined; readonly container?: string \| undefined; readonly header?: string \| undefined; readonly title?: string \| undefined; readonly content?: string \| undefined; readonly handleBar?: string \| undefined; readonly handleBarHandle?: string \| undefined; readonly closeButton?: string \| undefined; } \| undefined` | No | `-` | - |
1253
1253
  | `closeAccessibilityHint` | `string` | No | `-` | Sets an accessible hint or description for the close button. On web, maps to aria-describedby and lists the id(s) of the element(s) that describe the element on which the attribute is set. On mobile, a string that helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label. |
1254
1254
  | `closeAccessibilityLabel` | `string` | No | `-` | Sets an accessible label for the close button. On web, maps to aria-label and defines a string value that labels an interactive element. On mobile, VoiceOver will read this string when a user selects the associated element. |
1255
- | `disableArrowKeyNavigation` | `boolean` | No | `false` | If true, the focus trap will not allow arrow key navigation. |
1256
- | `focusTabIndexElements` | `boolean` | No | `false` | If true, the focus trap will include all elements with tabIndex values in the list of focusable elements. |
1255
+ | `disableArrowKeyNavigation` | `boolean` | No | `-` | If true, the focus trap will not allow arrow key navigation. |
1256
+ | `focusTabIndexElements` | `boolean` | No | `-` | If true, the focus trap will include all elements with tabIndex values in the list of focusable elements. |
1257
1257
  | `footer` | `ReactNode \| TrayRenderChildren` | No | `-` | ReactNode to render as the Drawer footer. Can be a ReactNode or a function that receives { handleClose }. |
1258
1258
  | `header` | `ReactNode \| TrayRenderChildren` | No | `-` | ReactNode to render as the Drawer header. Can be a ReactNode or a function that receives { handleClose }. |
1259
1259
  | `hideCloseButton` | `boolean` | No | ``true` when handlebar is shown, false otherwise.` | Hide the close icon on the top right. |