@coinbase/cds-mcp-server 8.17.3 → 8.17.4

package/mcp-docs/web/components/Toast.txt

@@ -4,10 +4,91 @@ A temporary notification that appears at the bottom of the screen.
 
 ## Import
 
-```jsx
+```tsx
 import { Toast } from '@coinbase/cds-web/overlays/Toast'
 ```
 
+## Examples
+
+### Get Started
+
+1. Add `PortalProvider` to the root of your app if it doesn't exist.
+2. Import the `useToast` hook: `import { useToast } from '@coinbase/cds-web/overlays/useToast'`;
+3. Show a toast
+
+```jsx
+const toast = useToast();
+toast.show('Copied to clipboard');
+```
+
+### Basic Example
+
+```jsx live
+function ToastExample() {
+  function BasicToast() {
+    const toast = useToast();
+    const [toastText, setToastText] = useState('Copied to clipboard');
+
+    const handleShowToast = useCallback(() => {
+      toast.show(toastText, {
+        action: { label: 'Action', onClick: () => console.log('action pressed') },
+        onWillHide: () => {
+          console.log('toast hiding');
+        },
+        onDidHide: () => {
+          console.log('toast hidden');
+        },
+      });
+    }, [toast, toastText]);
+
+    const handleNoAction = () => toast.show(toastText);
+
+    const handleNoClose = () =>
+      toast.show(toastText, {
+        action: { label: 'Action', onPress: () => console.log('action pressed') },
+        hideCloseButton: true,
+      });
+
+    const handleTextOnly = () => toast.show(toastText, { hideCloseButton: true });
+
+    const handleBottomOffset = () => {
+      toast.show('Toast copy', {
+        bottomOffset: 100,
+      });
+    };
+
+    const handleVariant = () => {
+      toast.show('Toast copy', {
+        variant: 'negative',
+      });
+    };
+
+    return (
+      <>
+        <Box paddingBottom={3}>
+          <TextInput
+            label="Toast text"
+            placeholder="Type anything to show in toast"
+            value={toastText}
+            onChange={(e) => setToastText(e.target.value)}
+          />
+        </Box>
+        <HStack gap={1} flexWrap="wrap">
+          <Button onClick={handleShowToast}>Show Toast</Button>
+          <Button onClick={handleNoAction}>No Action</Button>
+          <Button onClick={handleNoClose}>No Close</Button>
+          <Button onClick={handleTextOnly}>Text Only</Button>
+          <Button onClick={handleBottomOffset}>Bottom Offset</Button>
+          <Button onClick={handleVariant}>Variant</Button>
+        </HStack>
+      </>
+    );
+  }
+
+  return <BasicToast />;
+}
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
@@ -120,85 +201,3 @@ import { Toast } from '@coinbase/cds-web/overlays/Toast'
 | `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
 
 
-## Examples
-
-### Get Started
-
-1. Add `PortalProvider` to the root of your app if it doesn't exist.
-2. Import the `useToast` hook: `import { useToast } from '@coinbase/cds-web/overlays/useToast'`;
-3. Show a toast
-
-```jsx
-const toast = useToast();
-toast.show('Copied to clipboard');
-```
-
-### Basic Example
-
-```jsx live
-function ToastExample() {
-  function BasicToast() {
-    const toast = useToast();
-    const [toastText, setToastText] = useState('Copied to clipboard');
-
-    const handleShowToast = useCallback(() => {
-      toast.show(toastText, {
-        action: { label: 'Action', onClick: () => console.log('action pressed') },
-        onWillHide: () => {
-          console.log('toast hiding');
-        },
-        onDidHide: () => {
-          console.log('toast hidden');
-        },
-      });
-    }, [toast, toastText]);
-
-    const handleNoAction = () => toast.show(toastText);
-
-    const handleNoClose = () =>
-      toast.show(toastText, {
-        action: { label: 'Action', onPress: () => console.log('action pressed') },
-        hideCloseButton: true,
-      });
-
-    const handleTextOnly = () => toast.show(toastText, { hideCloseButton: true });
-
-    const handleBottomOffset = () => {
-      toast.show('Toast copy', {
-        bottomOffset: 100,
-      });
-    };
-
-    const handleVariant = () => {
-      toast.show('Toast copy', {
-        variant: 'negative',
-      });
-    };
-
-    return (
-      <>
-        <Box paddingBottom={3}>
-          <TextInput
-            label="Toast text"
-            placeholder="Type anything to show in toast"
-            value={toastText}
-            onChange={(e) => setToastText(e.target.value)}
-          />
-        </Box>
-        <HStack gap={1} flexWrap="wrap">
-          <Button onClick={handleShowToast}>Show Toast</Button>
-          <Button onClick={handleNoAction}>No Action</Button>
-          <Button onClick={handleNoClose}>No Close</Button>
-          <Button onClick={handleTextOnly}>Text Only</Button>
-          <Button onClick={handleBottomOffset}>Bottom Offset</Button>
-          <Button onClick={handleVariant}>Variant</Button>
-        </HStack>
-      </>
-    );
-  }
-
-  return <BasicToast />;
-}
-```
-
-

package/mcp-docs/web/components/Tooltip.txt

@@ -4,32 +4,10 @@ A component that displays additional information on hover.
 
 ## Import
 
-```jsx
+```tsx
 import { Tooltip } from '@coinbase/cds-web/overlays/Tooltip'
 ```
 
-## Props
-
-| Prop | Type | Required | Default | Description |
-| --- | --- | --- | --- | --- |
-| `content` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | The content to render within the tooltip. |
-| `autoFocusDelay` | `number` | No | `undefined` | The amount of time in milliseconds to wait before auto-focusing the first focusable element. |
-| `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. |
-| `disableFocusTrap` | `boolean` | No | `-` | Disables the focus trap to allow normal keyboard navigation. |
-| `disablePortal` | `boolean` | No | `false` | - |
-| `disableTypeFocus` | `boolean` | No | `-` | Use for editable Search Input components to ensure focus is correctly applied |
-| `elevation` | `0 \| 1 \| 2` | No | `-` | Determines a components shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
-| `focusTabIndexElements` | `boolean` | No | `false` | If true, the focus trap will include all elements with tabIndex values in the list of focusable elements. |
-| `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | 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. |
-| `invertColorScheme` | `boolean` | No | `true` | Invert the themes activeColorScheme for this component |
-| `placement` | `top \| bottom \| left \| right` | No | `top` | Position of tooltip in relation to the subject. |
-| `respectNegativeTabIndex` | `boolean` | No | `false` | If true, the focus trap will respect negative tabIndex values, removing them from the list of focusable elements. |
-| `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 |
-| `tooltipId` | `string` | No | `-` | A unique ID used to ensure tooltips are accessible |
-| `visible` | `boolean` | No | `true` | Control whether the tooltip is shown or hidden. |
-| `zIndex` | `number` | No | `4` | Typically only used when disablePortal is set to true to adjust zIndex of tooltip. When using portal this value should remain as default. |
-
-
 ## Examples
 
 ### Placement
@@ -87,4 +65,25 @@ function TooltipPosition() {
 }
 ```
 
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `content` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | The content to render within the tooltip. |
+| `autoFocusDelay` | `number` | No | `undefined` | The amount of time in milliseconds to wait before auto-focusing the first focusable element. |
+| `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. |
+| `disableFocusTrap` | `boolean` | No | `-` | Disables the focus trap to allow normal keyboard navigation. |
+| `disablePortal` | `boolean` | No | `false` | - |
+| `disableTypeFocus` | `boolean` | No | `-` | Use for editable Search Input components to ensure focus is correctly applied |
+| `elevation` | `0 \| 1 \| 2` | No | `-` | Determines a components shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
+| `focusTabIndexElements` | `boolean` | No | `false` | If true, the focus trap will include all elements with tabIndex values in the list of focusable elements. |
+| `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | 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. |
+| `invertColorScheme` | `boolean` | No | `true` | Invert the themes activeColorScheme for this component |
+| `placement` | `top \| bottom \| left \| right` | No | `top` | Position of tooltip in relation to the subject. |
+| `respectNegativeTabIndex` | `boolean` | No | `false` | If true, the focus trap will respect negative tabIndex values, removing them from the list of focusable elements. |
+| `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 |
+| `tooltipId` | `string` | No | `-` | A unique ID used to ensure tooltips are accessible |
+| `visible` | `boolean` | No | `true` | Control whether the tooltip is shown or hidden. |
+| `zIndex` | `number` | No | `4` | Typically only used when disablePortal is set to true to adjust zIndex of tooltip. When using portal this value should remain as default. |
+
 

package/mcp-docs/web/components/Tour.txt

@@ -4,31 +4,10 @@ Creates guided tours of a user interface.
 
 ## Import
 
-```jsx
+```tsx
 import { Tour, TourStep } from '@coinbase/cds-web/tour'
 ```
 
-## Props
-
-| Prop | Type | Required | Default | Description |
-| --- | --- | --- | --- | --- |
-| `activeTourStep` | `TourStepValue<T> \| null` | Yes | `-` | - |
-| `onChange` | `(tourStep: TourStepValue<T> \| null) => void` | Yes | `-` | - |
-| `steps` | `TourStepValue<T>[]` | Yes | `-` | - |
-| `TourMaskComponent` | `TourMaskComponent` | No | `DefaultTourMask` | The Component to render as a tour overlay and mask. |
-| `TourStepArrowComponent` | `TourStepArrowComponent` | No | `DefaultTourStepArrow` | The default Component to render for each TourStep arrow element. |
-| `disableAutoScroll` | `boolean` | No | `-` | Disable automatically scrolling to active elements. |
-| `disablePortal` | `boolean` | No | `-` | - |
-| `hideOverlay` | `boolean` | No | `false` | Hide overlay when tour is active |
-| `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. |
-| `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 |
-| `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. |
-| `tourMaskPadding` | `string \| number` | No | `-` | Padding to add around the edges of the TourMasks content mask. |
-| `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. |
-| `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. |
-| `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. |
-
-
 ## Examples
 
 ### Basic usage
@@ -177,4 +156,24 @@ function Example() {
 }
 ```
 
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `activeTourStep` | `TourStepValue<T> \| null` | Yes | `-` | - |
+| `onChange` | `(tourStep: TourStepValue<T> \| null) => void` | Yes | `-` | - |
+| `steps` | `TourStepValue<T>[]` | Yes | `-` | - |
+| `TourMaskComponent` | `TourMaskComponent` | No | `DefaultTourMask` | The Component to render as a tour overlay and mask. |
+| `TourStepArrowComponent` | `TourStepArrowComponent` | No | `DefaultTourStepArrow` | The default Component to render for each TourStep arrow element. |
+| `disableAutoScroll` | `boolean` | No | `-` | Disable automatically scrolling to active elements. |
+| `disablePortal` | `boolean` | No | `-` | - |
+| `hideOverlay` | `boolean` | No | `false` | Hide overlay when tour is active |
+| `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. |
+| `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 |
+| `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. |
+| `tourMaskPadding` | `string \| number` | No | `-` | Padding to add around the edges of the TourMasks content mask. |
+| `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. |
+| `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. |
+| `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. |
+
 

package/mcp-docs/web/components/Tray.txt

@@ -4,33 +4,10 @@ An elevated container pinned to the bottom of the screen.
 
 ## Import
 
-```jsx
+```tsx
 import { Tray } from '@coinbase/cds-web/overlays/tray/Tray'
 ```
 
-## Props
-
-| Prop | Type | Required | Default | Description |
-| --- | --- | --- | --- | --- |
-| `onCloseComplete` | `() => void` | Yes | `-` | Action that will happen when tray is dismissed |
-| `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. |
-| `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. |
-| `focusTabIndexElements` | `boolean` | No | `false` | Allow any element with tabIndex attribute to be focusable in FocusTrap, rather than only focusing specific interactive element types like button. This can be useful when having long content in a Modal. |
-| `footer` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Optional footer content that will be fixed to the bottom of the tray |
-| `id` | `string` | No | `-` | HTML ID for the tray |
-| `key` | `Key \| null` | No | `-` | - |
-| `onBlur` | `(() => void)` | No | `-` | Callback fired when the overlay is pressed, or swipe to close |
-| `onClose` | `(() => void)` | No | `-` | Action that will happen when tray is dismissed |
-| `onVisibilityChange` | `((context: hidden \| visible) => void)` | No | `-` | Optional callback that, if provided, will be triggered when the Tray is toggled open/ closed If used for analytics, context (visible \| hidden) can be bundled with the event info to track whether the multiselect was toggled into or out of view |
-| `preventDismiss` | `boolean` | No | `-` | Prevents a user from dismissing the tray by pressing the overlay or swiping |
-| `ref` | `((instance: TrayRefProps \| null) => void) \| RefObject<TrayRefProps> \| null` | No | `-` | - |
-| `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 |
-| `role` | `dialog \| alertdialog` | No | `-` | WAI-ARIA Roles |
-| `title` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Text or ReactNode for optional Tray title |
-| `verticalDrawerPercentageOfView` | `string` | No | `-` | Allow user of component to define maximum percentage of screen that can be taken up by the Drawer |
-| `zIndex` | `number` | No | `-` | z-index for the tray overlay |
-
-
 ## Examples
 
 :::tip Accessibility tip
@@ -286,4 +263,26 @@ Note: The Tray component is an elevated container that is pinned to the bottom o
 - The `ref` provides `open()` and `close()` methods for controlling the tray
 - When transitioning between overlays, ensure proper dismounting using lifecycle methods
 
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `onCloseComplete` | `() => void` | Yes | `-` | Action that will happen when tray is dismissed |
+| `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. |
+| `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. |
+| `focusTabIndexElements` | `boolean` | No | `false` | Allow any element with tabIndex attribute to be focusable in FocusTrap, rather than only focusing specific interactive element types like button. This can be useful when having long content in a Modal. |
+| `footer` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Optional footer content that will be fixed to the bottom of the tray |
+| `id` | `string` | No | `-` | HTML ID for the tray |
+| `key` | `Key \| null` | No | `-` | - |
+| `onBlur` | `(() => void)` | No | `-` | Callback fired when the overlay is pressed, or swipe to close |
+| `onClose` | `(() => void)` | No | `-` | Action that will happen when tray is dismissed |
+| `onVisibilityChange` | `((context: hidden \| visible) => void)` | No | `-` | Optional callback that, if provided, will be triggered when the Tray is toggled open/ closed If used for analytics, context (visible \| hidden) can be bundled with the event info to track whether the multiselect was toggled into or out of view |
+| `preventDismiss` | `boolean` | No | `-` | Prevents a user from dismissing the tray by pressing the overlay or swiping |
+| `ref` | `((instance: TrayRefProps \| null) => void) \| RefObject<TrayRefProps> \| null` | No | `-` | - |
+| `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 |
+| `role` | `dialog \| alertdialog` | No | `-` | WAI-ARIA Roles |
+| `title` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Text or ReactNode for optional Tray title |
+| `verticalDrawerPercentageOfView` | `string` | No | `-` | Allow user of component to define maximum percentage of screen that can be taken up by the Drawer |
+| `zIndex` | `number` | No | `-` | z-index for the tray overlay |
+
 

package/mcp-docs/web/components/UpsellCard.txt

@@ -4,26 +4,10 @@ A card component for promoting new features, products, or actions.
 
 ## Import
 
-```jsx
+```tsx
 import { UpsellCard } from '@coinbase/cds-web/cards/UpsellCard'
 ```
 
-## Props
-
-| Prop | Type | Required | Default | Description |
-| --- | --- | --- | --- | --- |
-| `title` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | Text or ReactNode to be displayed in TextHeadline |
-| `action` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Node to display for the card action |
-| `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 | `'bgPrimaryWash'` | Background color for the card. |
-| `dangerouslySetBackground` | `string` | No | `-` | - |
-| `description` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Content to be displayed below the title |
-| `media` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Remote Image or other node with media content. |
-| `onActionPress` | `MouseEventHandler<HTMLButtonElement>` | No | `-` | Callback fired when the action button is pressed |
-| `onClick` | `MouseEventHandler<HTMLButtonElement>` | No | `-` | Callback fired when the card is pressed |
-| `onDismissPress` | `MouseEventHandler<HTMLButtonElement>` | No | `-` | Callback fired when the dismiss button is pressed |
-| `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 |
-
-
 ## Examples
 
 ### General Upsell
@@ -317,4 +301,19 @@ function Example() {
 }
 ```
 
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `title` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | Text or ReactNode to be displayed in TextHeadline |
+| `action` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Node to display for the card action |
+| `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 | `'bgPrimaryWash'` | Background color for the card. |
+| `dangerouslySetBackground` | `string` | No | `-` | - |
+| `description` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Content to be displayed below the title |
+| `media` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Remote Image or other node with media content. |
+| `onActionPress` | `MouseEventHandler<HTMLButtonElement>` | No | `-` | Callback fired when the action button is pressed |
+| `onClick` | `MouseEventHandler<HTMLButtonElement>` | No | `-` | Callback fired when the card is pressed |
+| `onDismissPress` | `MouseEventHandler<HTMLButtonElement>` | No | `-` | Callback fired when the dismiss button is pressed |
+| `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 |
+