@coinbase/cds-mcp-server 8.17.3 → 8.17.4

package/mcp-docs/mobile/hooks/usePreviousValue.txt

@@ -0,0 +1,74 @@
+# usePreviousValue
+
+Returns the previous value of a given variable, useful for comparing current and previous states in effects or for tracking changes over time.
+
+## Import
+
+```tsx
+import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue'
+```
+
+## API
+
+### Parameters
+
+The `usePreviousValue` hook accepts a single parameter:
+
+- `value: T` - The value to track. Can be of any type.
+
+### Returns
+
+Returns the previous value of type `T | undefined`:
+
+- Returns `undefined` on the first render
+- Returns the previous value of the tracked value on subsequent renders
+
+:::tip
+This hook is useful for comparing the current value with its previous state, such as in animations, transitions, or when you need to react to value changes. The hook uses a ref to store the previous value, ensuring it persists between renders.
+:::
+
+## Examples
+
+### Basic usage
+
+```tsx live
+function Example() {
+  const [count, setCount] = useState(0);
+  const previousCount = usePreviousValue(count);
+
+  return (
+    <VStack gap={3} alignItems="start">
+      <VStack gap={1}>
+        <TextHeadline>Current count: {count}</TextHeadline>
+        <TextHeadline>Previous count: {previousCount ?? 'None'}</TextHeadline>
+      </VStack>
+      <Button onClick={() => setCount(count + 1)}>Increment</Button>
+    </VStack>
+  );
+}
+```
+
+### With Complex Values
+
+```tsx live
+function Example() {
+  const [user, setUser] = useState({ name: 'John', age: 25 });
+  const previousUser = usePreviousValue(user);
+
+  const updateAge = () => {
+    setUser((prev) => ({ ...prev, age: prev.age + 1 }));
+  };
+
+  return (
+    <VStack gap={3} alignItems="start">
+      <VStack gap={1}>
+        <TextHeadline>Name: {user.name}</TextHeadline>
+        <TextHeadline>Age: {user.age}</TextHeadline>
+        <TextHeadline>Previous age: {previousUser?.age ?? 'None'}</TextHeadline>
+      </VStack>
+      <Button onClick={updateAge}>Add Year</Button>
+    </VStack>
+  );
+}
+```
+

package/mcp-docs/mobile/hooks/useRefMap.txt

@@ -0,0 +1,178 @@
+# useRefMap
+
+Manages a collection of refs using a key-value map structure, allowing dynamic registration and retrieval of refs by their unique identifiers. Commonly used in components that need to track multiple DOM elements, such as tabs, tours, or complex navigation systems.
+
+## Import
+
+```tsx
+import { useRefMap } from '@coinbase/cds-common/hooks/useRefMap'
+```
+
+## API
+
+### Parameters
+
+The `useRefMap` hook accepts an optional configuration object:
+
+- `options?: RefMapOptions<RefValue>` - Configuration options for the ref map
+  - `initialRefMap?: Record<string, RefValue>` - Optional initial map of refs
+
+The generic type `RefValue` represents the type of values stored in the ref map (typically `HTMLElement` or a specific element type).
+
+### Returns
+
+Returns a `RefMapApi<RefValue>` object with the following properties:
+
+- `refs: Record<string, RefValue>` - The current map of all registered refs
+- `getRef: (id: string) => RefValue | null` - Function to retrieve a ref by its ID
+- `registerRef: (id: string, ref: RefValue) => void` - Function to register a new ref with an ID
+
+:::tip
+This hook is particularly useful when working with components that need to manage multiple refs, such as in tour guides where elements need to be highlighted, or in tab systems where tab panels need to be referenced. The hook maintains a stable reference to the ref map and its utility functions across renders.
+:::
+
+## Examples
+
+### Basic usage
+
+```tsx live
+function Example() {
+  const { registerRef, getRef } = useRefMap<HTMLDivElement>();
+  const toast = useToast();
+
+  const handleClick = () => {
+    // Get the element by its ID and log its dimensions
+    const element = getRef('box1');
+    if (element) {
+      toast.show(`Box dimensions: ${element.offsetWidth}x${element.offsetHeight}`);
+    }
+  };
+
+  return (
+    <VStack gap={2}>
+      <Box
+        ref={(el) => el && registerRef('box1', el)}
+        padding={3}
+        background="bgAlternate"
+        borderRadius={300}
+      >
+        <TextBody>This box is registered with ID 'box1'</TextBody>
+      </Box>
+      <Button onClick={handleClick}>Get Box Dimensions</Button>
+    </VStack>
+  );
+}
+```
+
+### With Multiple Elements
+
+```tsx live
+function Example() {
+  const { registerRef, getRef } = useRefMap<HTMLDivElement>();
+  const [activeId, setActiveId] = useState<string | null>(null);
+
+  const highlightElement = (id: string) => {
+    // Reset previous highlight
+    if (activeId) {
+      const prevElement = getRef(activeId);
+      if (prevElement) {
+        prevElement.style.outline = 'none';
+      }
+    }
+
+    // Highlight new element
+    const element = getRef(id);
+    if (element) {
+      element.style.outline = '2px solid var(--color-fgPrimary)';
+      setActiveId(id);
+    }
+  };
+
+  return (
+    <VStack gap={3}>
+      <HStack gap={2}>
+        <Button onClick={() => highlightElement('box1')}>Highlight Box 1</Button>
+        <Button onClick={() => highlightElement('box2')}>Highlight Box 2</Button>
+        <Button onClick={() => highlightElement('box3')}>Highlight Box 3</Button>
+      </HStack>
+
+      <VStack gap={2}>
+        <Box
+          ref={(el) => el && registerRef('box1', el)}
+          padding={3}
+          background="bgAlternate"
+          borderRadius={300}
+        >
+          <TextBody>Box 1</TextBody>
+        </Box>
+
+        <Box
+          ref={(el) => el && registerRef('box2', el)}
+          padding={3}
+          background="bgAlternate"
+          borderRadius={300}
+        >
+          <TextBody>Box 2</TextBody>
+        </Box>
+
+        <Box
+          ref={(el) => el && registerRef('box3', el)}
+          padding={3}
+          background="bgAlternate"
+          borderRadius={300}
+        >
+          <TextBody>Box 3</TextBody>
+        </Box>
+      </VStack>
+    </VStack>
+  );
+}
+```
+
+### With Initial Refs
+
+```tsx live
+function Example() {
+  // Create initial refs map
+  const box1Ref = useRef<HTMLDivElement>(null);
+  const box2Ref = useRef<HTMLDivElement>(null);
+
+  const initialRefs = {
+    box1: box1Ref.current,
+    box2: box2Ref.current,
+  };
+
+  const { refs, registerRef } = useRefMap<HTMLDivElement>({
+    initialRefMap: initialRefs,
+  });
+
+  const logRefs = () => {
+    console.log('Current refs:', refs);
+  };
+
+  return (
+    <VStack gap={2}>
+      <Box
+        ref={(el) => el && registerRef('box1', el)}
+        padding={3}
+        background="bgAlternate"
+        borderRadius={300}
+      >
+        <TextBody>Box 1</TextBody>
+      </Box>
+
+      <Box
+        ref={(el) => el && registerRef('box2', el)}
+        padding={3}
+        background="bgAlternate"
+        borderRadius={300}
+      >
+        <TextBody>Box 2</TextBody>
+      </Box>
+
+      <Button onClick={logRefs}>Log Refs</Button>
+    </VStack>
+  );
+}
+```
+

package/mcp-docs/mobile/hooks/useTheme.txt

@@ -1,5 +1,5 @@
-
 # useTheme
+
 Returns the currently active theme including color schemes, spacing, typography, and other design tokens.
 
 ## Import
@@ -8,6 +8,218 @@ Returns the currently active theme including color schemes, spacing, typography,
 import { useTheme } from '@coinbase/cds-mobile'
 ```
 
+## API
+
+### Overview
+
+The `useTheme` hook returns the currently active theme based on the `ThemeProvider's` active color scheme. All values are optimized for React Native usage, with numeric values in points rather than rem units.
+
+### Parameters
+
+None. The hook takes no parameters.
+
+### Returns
+
+Returns a `Theme` object containing the following categories of design tokens:
+
+#### Color Tokens
+
+##### Color Scheme
+
+- `colorScheme`: `'light' | 'dark'`
+- `spectrum`: Raw color values in RGB format (e.g., `'245,248,255'` for `blue0`)
+
+##### Semantic Colors
+
+- Text Colors
+  - `color.fg`: Primary text color (RGB format)
+  - `color.fgMuted`: Secondary text color
+  - `color.fgInverse`: Inverted text color
+  - `color.fgPrimary`: Primary brand text color
+  - `color.fgWarning`: Warning text color
+  - `color.fgPositive`: Success text color
+  - `color.fgNegative`: Error text color
+
+- Background Colors
+  - `color.bg`: Primary background color
+  - `color.bgAlternate`: Secondary background color
+  - `color.bgInverse`: Inverted background color
+  - `color.bgOverlay`: Semi-transparent overlay
+  - `color.bgPrimary`: Primary brand background
+  - `color.bgPrimaryWash`: Light primary background
+  - `color.bgSecondary`: Secondary background
+  - `color.bgTertiary`: Tertiary background
+  - `color.bgSecondaryWash`: Light secondary background
+  - `color.bgNegative`: Error background
+  - `color.bgNegativeWash`: Light error background
+  - `color.bgPositive`: Success background
+  - `color.bgPositiveWash`: Light success background
+  - `color.bgWarning`: Warning background
+  - `color.bgWarningWash`: Light warning background
+  - `color.currentColor`: Current color context
+  - `color.bgElevation1`: First level elevation background
+  - `color.bgElevation2`: Second level elevation background
+
+- Line Colors
+  - `color.bgLine`: Default line color (semi-transparent)
+  - `color.bgLineHeavy`: Emphasized line color
+  - `color.bgLineInverse`: Inverted line color
+  - `color.bgLinePrimary`: Primary brand line color
+  - `color.bgLinePrimarySubtle`: Subtle primary line color
+
+- Accent Colors
+  - `color.accentSubtleGreen`: Subtle green accent
+  - `color.accentBoldGreen`: Bold green accent
+  - `color.accentSubtleBlue`: Subtle blue accent
+  - `color.accentBoldBlue`: Bold blue accent
+  - `color.accentSubtlePurple`: Subtle purple accent
+  - `color.accentBoldPurple`: Bold purple accent
+  - `color.accentSubtleYellow`: Subtle yellow accent
+  - `color.accentBoldYellow`: Bold yellow accent
+  - `color.accentSubtleRed`: Subtle red accent
+  - `color.accentBoldRed`: Bold red accent
+  - `color.accentSubtleGray`: Subtle gray accent
+  - `color.accentBoldGray`: Bold gray accent
+  - `color.transparent`: Transparent color
+
+#### Layout Tokens
+
+##### Spacing
+
+- `space`: Object containing spacing values from `0` to `10` in points
+
+  ```tsx
+  {
+    0: 0,
+    1: 8,
+    2: 16,
+    3: 24,
+    // ...up to 10
+  }
+  ```
+
+##### Component Sizes
+
+- `iconSize`: `{ xs: 8, s: 12, m: 16, l: 24 }`
+- `avatarSize`: `{ s: 16, m: 20, l: 24, xl: 36, xxl: 44, xxxl: 48 }`
+- `controlSize`: Form control sizes
+
+  ```tsx
+  {
+    checkboxSize: 16,
+    radioSize: 16,
+    switchWidth: 42,
+    switchHeight: 24,
+    switchThumbSize: 22,
+    tileSize: 92
+  }
+  ```
+
+##### Borders
+
+- `borderWidth`: Values from `0` to `500` in points
+- `borderRadius`: Values from `0` to `1000` in points
+
+#### Typography Tokens
+
+##### Font Families
+
+- `fontFamily`: Base font families for each text style
+
+  ```tsx
+  {
+    display1: 'CoinbaseDisplay-Regular',
+    display2: 'CoinbaseDisplay-Regular',
+    display3: 'CoinbaseDisplay-Regular',
+    title1: 'CoinbaseDisplay-Medium',
+    // ...and more variants
+  }
+  ```
+
+- `fontFamilyMono`: Monospace font families (optional)
+
+  ```tsx
+  {
+    display1: 'CoinbaseMono-Regular',
+    display2: 'CoinbaseMono-Regular',
+    // ...and more variants
+  }
+  ```
+
+##### Text Styles
+
+- `fontSize`: Font sizes in points (not rem)
+
+  ```tsx
+  {
+    display1: 64,
+    display2: 48,
+    display3: 40,
+    // ...and more variants
+  }
+  ```
+
+- `fontWeight`: Font weights as React Native TextStyle values
+
+  ```tsx
+  {
+    display1: '400',
+    title1: '600',
+    // ...and more variants
+  }
+  ```
+
+- `lineHeight`: Line heights in points (not rem)
+
+  ```tsx
+  {
+    display1: 72,
+    display2: 56,
+    // ...and more variants
+  }
+  ```
+
+- `textTransform`: Text transformations as React Native TextStyle values
+
+  ```tsx
+  {
+    caption: 'uppercase',
+    body: 'none',
+    // ...and more variants
+  }
+  ```
+
+#### Effect Tokens
+
+##### Shadows
+
+- `shadow`: React Native shadow styles
+
+  ```tsx
+  {
+    elevation1: {
+      shadowColor: '#000000',
+      shadowOffset: { width: 0, height: 8 },
+      shadowOpacity: 0.02,
+      shadowRadius: 12
+    },
+    elevation2: {
+      shadowColor: '#000000',
+      shadowOffset: { width: 0, height: 8 },
+      shadowOpacity: 0.12,
+      shadowRadius: 24
+    }
+  }
+  ```
+
+### Notes
+
+1. The hook must be used within a `ThemeProvider` component, or it will throw an error.
+2. All numeric values are in points (pt) rather than rem units, optimized for React Native.
+3. Colors are provided in RGB format for text and background colors, allowing for opacity adjustments.
+4. Shadow values are provided as React Native shadow style objects, including platform-specific implementations.
+5. Font families are platform-specific font names that should be properly linked in your React Native project.
+
 ## Examples
 
 ### `useTheme` hook
@@ -107,4 +319,3 @@ function Example() {
 }
 ```
 
-

package/mcp-docs/mobile/routes.txt

@@ -3,9 +3,12 @@
 
 ## Getting Started
 
+- [theming](mobile/getting-started/theming.txt): The theme contains design tokens like colors, fonts, spacing, and more. The ThemeProvider provides access to these values via CSS Variables for web, and React Context for both web and React Native.
+- [styling](mobile/getting-started/styling.txt): CDS includes powerful and flexible APIs for styling components. Easily access values from the theme, or go rogue with full customization.
 - [playground](mobile/getting-started/playground.txt)
-- [mcp-server](mobile/getting-started/mcp-server.txt)
 - [introduction](mobile/getting-started/introduction.txt)
+- [installation](mobile/getting-started/installation.txt): This guide will help you get started with installing CDS in your React Native project. Follow the instructions below to set up CDS and start building with our cross-platform components.
+- [ai-overview](mobile/getting-started/ai-overview.txt)
 
 ## Components
 
@@ -128,5 +131,9 @@
 ## Hooks
 
 - [useTheme](mobile/hooks/useTheme.txt): Returns the currently active theme including color schemes, spacing, typography, and other design tokens.
+- [useRefMap](mobile/hooks/useRefMap.txt): Manages a collection of refs using a key-value map structure, allowing dynamic registration and retrieval of refs by their unique identifiers. Commonly used in components that need to track multiple DOM elements, such as tabs, tours, or complex navigation systems.
+- [usePreviousValue](mobile/hooks/usePreviousValue.txt): Returns the previous value of a given variable, useful for comparing current and previous states in effects or for tracking changes over time.
 - [useOverlayContentContext](mobile/hooks/useOverlayContentContext.txt): A React context and hook for detecting if components are rendered inside overlay containers like modals, drawers, tours, and trays.
+- [useMergeRefs](mobile/hooks/useMergeRefs.txt): Combines multiple refs into a single ref callback, allowing a component to work with multiple ref instances simultaneously. Useful when you need to combine refs from different sources, such as forwarded refs and internal component state.
+- [useEventHandler](mobile/hooks/useEventHandler.txt): Creates event handlers for components based on the EventHandlerProvider configuration. It enables centralized event handling and analytics tracking by mapping component actions to configured handlers.
 - [useDimensions](mobile/hooks/useDimensions.txt): Measures the screen dimensions and status bar height.

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

@@ -4,22 +4,10 @@ A collapsible component for displaying auxiliary content.
 
 ## Import
 
-```jsx
+```tsx
 import { Accordion } from '@coinbase/cds-web/accordion/Accordion'
 ```
 
-## Props
-
-| Prop | Type | Required | Default | Description |
-| --- | --- | --- | --- | --- |
-| `activeKey` | `string \| null` | No | `-` | - |
-| `defaultActiveKey` | `string` | No | `-` | Default active accordion item key. If not specified or does not exist in the accordion items, all items will be closed on mount |
-| `onChange` | `((activeKey: string \| null) => void)` | No | `-` | Callback function fired when any of accordion items is pressed |
-| `setActiveKey` | `((activeKey: string \| null) => void)` | No | `-` | - |
-| `style` | `CSSProperties` | No | `-` | - |
-| `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
 
 Check [here](/components/layout/AccordionItem) for AccordionItem Props.
@@ -187,4 +175,15 @@ Check [here](/components/layout/AccordionItem) for AccordionItem Props.
 </Accordion>
 ```
 
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `activeKey` | `string \| null` | No | `-` | - |
+| `defaultActiveKey` | `string` | No | `-` | Default active accordion item key. If not specified or does not exist in the accordion items, all items will be closed on mount |
+| `onChange` | `((activeKey: string \| null) => void)` | No | `-` | Callback function fired when any of accordion items is pressed |
+| `setActiveKey` | `((activeKey: string \| null) => void)` | No | `-` | - |
+| `style` | `CSSProperties` | No | `-` | - |
+| `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 |
+
 

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

@@ -4,10 +4,14 @@ An individual collapsible item within an Accordion.
 
 ## Import
 
-```jsx
+```tsx
 import { AccordionItem } from '@coinbase/cds-web/accordion/AccordionItem'
 ```
 
+## Examples
+
+Check [Accordion](/components/layout/Accordion) for usage examples.
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
@@ -25,8 +29,3 @@ import { AccordionItem } from '@coinbase/cds-web/accordion/AccordionItem'
 | `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
-
-Check [Accordion](/components/layout/Accordion) for usage examples.
-
-

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

@@ -4,34 +4,10 @@ A dialog that communicates critical information and blocks user interaction.
 
 ## Import
 
-```jsx
+```tsx
 import { Alert } from '@coinbase/cds-web/overlays/Alert'
 ```
 
-## Props
-
-| Prop | Type | Required | Default | Description |
-| --- | --- | --- | --- | --- |
-| `body` | `string` | Yes | `-` | Alert body/description |
-| `onRequestClose` | `() => void` | Yes | `-` | Callback function fired when modal is closed. |
-| `preferredActionLabel` | `string` | Yes | `-` | Label of the preferred action |
-| `title` | `string` | Yes | `-` | Alert title |
-| `visible` | `boolean` | Yes | `false false` | Controls visibility of the Modal |
-| `accessibilityLabelledBy` | `string` | No | `-` | On web, maps to aria-labelledby and lists the id(s) of the element(s) that label the element on which the attribute is set. On mobile (Android only), a reference to another element nativeID used to build complex forms. |
-| `actionLayout` | `horizontal \| vertical` | No | `horizontal` | Layout of the actions |
-| `disablePortal` | `boolean` | No | `-` | Disable React portal integration |
-| `dismissActionLabel` | `string` | No | `-` | Label of the dismiss action |
-| `key` | `Key \| null` | No | `-` | - |
-| `onDidClose` | `((() => void) & (() => void))` | No | `-` | Callback fired after the component is closed. |
-| `onDismissActionPress` | `(() => void)` | No | `-` | Callback function fired when the dismiss action is pressed |
-| `onPreferredActionPress` | `(() => void)` | No | `-` | Callback function fired when the preferred action is pressed |
-| `pictogram` | `key \| done \| cardSuccess \| warning \| error \| add \| browser \| calculator \| calendar \| checkmark \| clock \| coinbaseOneLogo \| derivativesProduct \| email \| gasFees \| identityCard \| instantUnstakingClock \| laptop \| learningRewardsProduct \| lock \| passport \| paypal \| phone \| planet \| safe \| securityKey \| settings \| shield \| support \| taxes \| trading \| verifiedPools \| wallet \| 2fa \| accountsNavigation \| accreditedInvestor \| addCard \| addPayment \| addPhone \| addressBook \| addToWatchlist \| addWallet \| advancedTradingDesktop \| advancedTradingNavigation \| advancedTradingRebates \| agent \| alerts \| alertsCoinbaseOne \| analyticsNavigation \| apartOfDropsNft \| applyForHigherLimits \| apyInterest \| assetEncryption \| assetHubNavigation \| assetManagement \| assetManagementNavigation \| assetMeasurements \| assetMovement \| authenticationApp \| authenticator \| authenticatorAlt \| authenticatorProgress \| avatarAa \| avatarAb \| avatarAc \| avatarAd \| avatarAe \| avatarAf \| avatarAg \| avatarAh \| avatarAi \| avatarAj \| avatarBa \| avatarBb \| avatarBc \| avatarBd \| avatarBe \| avatarBf \| avatarBg \| avatarBh \| avatarBi \| avatarBj \| avatarCa \| avatarCb \| avatarCc \| avatarCd \| avatarCe \| avatarCf \| avatarCg \| avatarCh \| avatarCi \| avatarCj \| avatarDa \| avatarDb \| avatarDc \| avatarDd \| avatarDe \| avatarDf \| avatarDg \| avatarDh \| avatarDi \| avatarDj \| avatarEa \| avatarEb \| avatarEc \| avatarEd \| avatarEe \| avatarEf \| avatarEg \| avatarEh \| avatarEi \| avatarEj \| avatarFa \| avatarFb \| avatarFc \| avatarFd \| avatarFe \| avatarFf \| avatarFg \| avatarFh \| avatarFi \| avatarFj \| avatarGa \| avatarGb \| avatarGc \| avatarGd \| avatarGe \| avatarGf \| avatarGg \| avatarGh \| avatarGi \| avatarGj \| avatarHa \| avatarHb \| avatarHc \| avatarHd \| avatarHe \| avatarHf \| avatarHg \| avatarHh \| avatarHi \| avatarHj \| avatarIa \| avatarIb \| avatarIc \| avatarId \| avatarIe \| avatarIf \| avatarIg \| avatarIh \| avatarIi \| avatarIj \| avatarJa \| avatarJb \| avatarJc \| avatarJd \| avatarJe \| avatarJf \| avatarJg \| avatarJh \| avatarJi \| avatarJj \| barChart \| baseChartSmall \| baseCheckSmall \| baseCoinCryptoSmall \| baseCoinNetworkSmall \| baseCoinStack \| baseConnectApps \| baseConnectSmall \| baseDecentralizationSmall \| baseDiamondSmall \| baseDiamondTrophy \| baseEmptySmall \| baseErrorButterflySmall \| baseErrorSmall \| baseLoadingSmall \| baseLocationSmall \| baseLogo \| baseLogoNavigation \| baseMessaging \| baseMintNftSmall \| baseNetworkSmall \| baseNftSmall \| basePaycoinSmall \| basePeopleSmall \| basePiechartSmall \| baseSecuritySmall \| baseSendSmall \| baseSignin \| baseTargetSmall \| bitcoin \| bitcoinPizza \| bitcoinRewards \| bitcoinWhitePaper \| blockchainConnection \| bonusFivePercent \| bonusTwoPercent \| borrowCoins \| borrowingLending \| borrowNavigation \| browserMultiPlatform \| browserTransaction \| bundle \| businessProduct \| calendarCaution \| candleSticksGraph \| cardBlocked \| cardDeclined \| cardNavigation \| cb1BankTransfers \| chart \| chat \| cloudNavigation \| coinbaseLogoAdvancedBrand \| coinbaseLogoNavigation \| coinbaseOneAuthenticator \| coinbaseOneChat \| coinbaseOneEarn \| coinbaseOneEarnCoins \| coinbaseOneEarnCoinsLogo \| coinbaseOneFiat \| coinbaseOneProductIcon \| coinbaseOneProductInvestWeekly \| coinbaseOneRefreshed \| coinbaseOneShield \| coinbaseOneTrade \| coinbaseOneTrusted \| coinbaseOneUnlimitedRewards \| coinbaseUnlockOffers \| coinbaseWalletApp \| coinFocus \| coinShare \| coldStorageCheck \| collectionOfAssets \| commerceCheckout \| commerceInvoice \| commerceNavigation \| completeQuiz \| complianceNavigation \| congratulations \| connectNavigation \| contactInfo \| controlWalletStorage \| creative \| creditCard \| crypto101 \| cryptoCard \| cryptoFolder \| custodialJourney \| custodyNavigation \| dataMarketplaceNavigation \| decentralizationEverything \| decentralizedExchange \| decentralizedIdentity \| decentralizedWeb3 \| defiEarnMoment \| delegate \| delegateNavigation \| derivativesNavigation \| developerPlatformNavigation \| developerSDKNavigation \| directDepositNavigation \| dollarShowcase \| driversLicense \| driversLicenseWheel \| earnCoins \| earnGraph \| earnNavigation \| easyToUse \| economyGlobal \| emailAndMessages \| enableVoting \| envelope \| ethereumFocus \| ethRewards \| ethStaking \| ethStakingChart \| ethStakingRewards \| ethToken \| exchangeNavigation \| explore \| fast \| faucetNavigation \| feesRestriction \| fiat \| finance \| findYourSelection \| formDownload \| futures \| futuresCoinbaseOne \| gem \| genericCountryIDCard \| getStarted \| giftbox \| globalConnections \| globalPayments \| globalTransactions \| googleAuthenticator \| governance \| hardwareWallet \| helpCenterNavigation \| higherLimits \| holdingCoin \| idBlock \| idError \| idVerification \| increaseLimits \| institutionalNavigation \| institutions \| internationalExchangeNavigation \| internet \| investGraph \| laptopCharts \| laptopVideo \| layerNetworks \| leadGraph \| learn \| learningRewardsNavigation \| lightbulbLearn \| lightningNetworkSend \| linkYourAccount \| listingFees \| locationUsa \| lowFees \| manageWeb3SignersAcct \| miningCoins \| mintedNft \| mobileCharts \| mobileError \| mobileNotifcation \| mobileSuccess \| mobileWarning \| moneyEarn \| moneySwift \| monitoringPerformance \| moreThanBitcoin \| multiAccountsAndCards \| multiPlatform \| multipleAssets \| musicAndSounds \| myNumberCard \| newUserChecklistBuyCrypto \| newUserChecklistCompleteAccount \| newUserChecklistVerifyId \| nftAvatar \| nftLibrary \| nftNavigation \| noAnnualFee \| noNftFound \| notificationHubAnalysis \| notificationHubNews \| notificationHubPortfolio \| notificationHubSocial \| notifications \| noVisibility \| noWiFi \| orders \| outage \| partialCoins \| participateNavigation \| passwordWalletLocked \| payNavigation \| peerToPeer \| pieChart \| pizza \| pluginBrowser \| positiveReviews \| predictionMarkets \| premiumInvestor \| priceTracking \| primeMobileApp \| primeNavigation \| privateClientNavigation \| proNavigation \| protectionPlan \| queryTransactNavigation \| receipt \| recurringPurchases \| restaking \| reviewAndAdd \| rewardsNavigation \| riskStaking \| rosettaNavigation \| securedAssets \| security \| securityCoinShield \| seedPhrase \| selectAddNft \| selfCustodyWallet \| selfServe \| sellSendAnytime \| sendPaymentToOthers \| settled \| sideChainSide \| signInNavigation \| smsAuthenticate \| sparkleCoinbaseOne \| ssnCard \| stableCoinMetaphor \| stacking \| stakingGraph \| standWithCryptoLogoNavigation \| startToday \| strongInfo \| strongWarning \| successPhone \| supportChat \| takeQuiz \| target \| taxBeta \| taxCenterNavigation \| taxesArrangement \| taxSeason \| timingCheck \| tokenBaskets \| tokenSales \| transferSend \| transistor \| trendingAssets \| trusted \| tryAgainLater \| twoBonus \| typeScript \| ubiKey \| usaProduct \| usdcEarn \| usdcInterest \| usdcLoan \| usdcLogo \| usdcRewards \| usdcRewardsRibbon \| usdcToken \| venturesNavigation \| videoCalendar \| videoContent \| waiting \| waitingForConsensus \| walletAsServiceNavigation \| walletDeposit \| walletError \| walletExchange \| walletLinkNavigation \| walletLogoNavigation \| walletNavigation \| walletPassword \| walletSuccess \| walletWarning \| winBTC \| worldwide \| wrapEth` | No | `-` | Illustration pictogram name for alert |
-| `preferredActionVariant` | `primary \| negative` | No | `primary` | Button variant of the preferred action |
-| `ref` | `((instance: ModalRefBaseProps \| null) => void) \| RefObject<ModalRefBaseProps> \| null` | No | `-` | - |
-| `stacked` | `boolean` | No | `-` | Indicating if Alert is stacked on top of Modal |
-| `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
 
 :::tip Accessibility tip (Web only)
@@ -162,4 +138,27 @@ function AlertOnModalExample() {
 }
 ```
 
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `body` | `string` | Yes | `-` | Alert body/description |
+| `onRequestClose` | `() => void` | Yes | `-` | Callback function fired when modal is closed. |
+| `preferredActionLabel` | `string` | Yes | `-` | Label of the preferred action |
+| `title` | `string` | Yes | `-` | Alert title |
+| `visible` | `boolean` | Yes | `false false` | Controls visibility of the Modal |
+| `accessibilityLabelledBy` | `string` | No | `-` | On web, maps to aria-labelledby and lists the id(s) of the element(s) that label the element on which the attribute is set. On mobile (Android only), a reference to another element nativeID used to build complex forms. |
+| `actionLayout` | `horizontal \| vertical` | No | `horizontal` | Layout of the actions |
+| `disablePortal` | `boolean` | No | `-` | Disable React portal integration |
+| `dismissActionLabel` | `string` | No | `-` | Label of the dismiss action |
+| `key` | `Key \| null` | No | `-` | - |
+| `onDidClose` | `((() => void) & (() => void))` | No | `-` | Callback fired after the component is closed. |
+| `onDismissActionPress` | `(() => void)` | No | `-` | Callback function fired when the dismiss action is pressed |
+| `onPreferredActionPress` | `(() => void)` | No | `-` | Callback function fired when the preferred action is pressed |
+| `pictogram` | `key \| done \| cardSuccess \| warning \| error \| add \| browser \| calculator \| calendar \| checkmark \| clock \| coinbaseOneLogo \| derivativesProduct \| email \| gasFees \| identityCard \| instantUnstakingClock \| laptop \| learningRewardsProduct \| lock \| passport \| paypal \| phone \| planet \| safe \| securityKey \| settings \| shield \| support \| taxes \| tokenSales \| trading \| verifiedPools \| wallet \| 2fa \| accountsNavigation \| accreditedInvestor \| addCard \| addPayment \| addPhone \| addressBook \| addToWatchlist \| addWallet \| advancedTradingDesktop \| advancedTradingNavigation \| advancedTradingRebates \| agent \| alerts \| alertsCoinbaseOne \| analyticsNavigation \| apartOfDropsNft \| applyForHigherLimits \| apyInterest \| assetEncryption \| assetHubNavigation \| assetManagement \| assetManagementNavigation \| assetMeasurements \| assetMovement \| authenticationApp \| authenticator \| authenticatorAlt \| authenticatorProgress \| avatarAa \| avatarAb \| avatarAc \| avatarAd \| avatarAe \| avatarAf \| avatarAg \| avatarAh \| avatarAi \| avatarAj \| avatarBa \| avatarBb \| avatarBc \| avatarBd \| avatarBe \| avatarBf \| avatarBg \| avatarBh \| avatarBi \| avatarBj \| avatarCa \| avatarCb \| avatarCc \| avatarCd \| avatarCe \| avatarCf \| avatarCg \| avatarCh \| avatarCi \| avatarCj \| avatarDa \| avatarDb \| avatarDc \| avatarDd \| avatarDe \| avatarDf \| avatarDg \| avatarDh \| avatarDi \| avatarDj \| avatarEa \| avatarEb \| avatarEc \| avatarEd \| avatarEe \| avatarEf \| avatarEg \| avatarEh \| avatarEi \| avatarEj \| avatarFa \| avatarFb \| avatarFc \| avatarFd \| avatarFe \| avatarFf \| avatarFg \| avatarFh \| avatarFi \| avatarFj \| avatarGa \| avatarGb \| avatarGc \| avatarGd \| avatarGe \| avatarGf \| avatarGg \| avatarGh \| avatarGi \| avatarGj \| avatarHa \| avatarHb \| avatarHc \| avatarHd \| avatarHe \| avatarHf \| avatarHg \| avatarHh \| avatarHi \| avatarHj \| avatarIa \| avatarIb \| avatarIc \| avatarId \| avatarIe \| avatarIf \| avatarIg \| avatarIh \| avatarIi \| avatarIj \| avatarJa \| avatarJb \| avatarJc \| avatarJd \| avatarJe \| avatarJf \| avatarJg \| avatarJh \| avatarJi \| avatarJj \| barChart \| baseChartSmall \| baseCheckSmall \| baseCoinCryptoSmall \| baseCoinNetworkSmall \| baseCoinStack \| baseConnectApps \| baseConnectSmall \| baseDecentralizationSmall \| baseDiamondSmall \| baseDiamondTrophy \| baseEmptySmall \| baseErrorButterflySmall \| baseErrorSmall \| baseLoadingSmall \| baseLocationSmall \| baseLogo \| baseLogoNavigation \| baseMessaging \| baseMintNftSmall \| baseNetworkSmall \| baseNftSmall \| basePaycoinSmall \| basePeopleSmall \| basePiechartSmall \| baseSecuritySmall \| baseSendSmall \| baseSignin \| baseTargetSmall \| bitcoin \| bitcoinPizza \| bitcoinRewards \| bitcoinWhitePaper \| blockchainConnection \| bonusFivePercent \| bonusTwoPercent \| borrowCoins \| borrowingLending \| borrowNavigation \| browserMultiPlatform \| browserTransaction \| bundle \| businessProduct \| calendarCaution \| candleSticksGraph \| cardBlocked \| cardDeclined \| cardNavigation \| cb1BankTransfers \| chart \| chat \| cloudNavigation \| coinbaseLogoAdvancedBrand \| coinbaseLogoNavigation \| coinbaseOneAuthenticator \| coinbaseOneChat \| coinbaseOneEarn \| coinbaseOneEarnCoins \| coinbaseOneEarnCoinsLogo \| coinbaseOneFiat \| coinbaseOneProductIcon \| coinbaseOneProductInvestWeekly \| coinbaseOneRefreshed \| coinbaseOneShield \| coinbaseOneTrade \| coinbaseOneTrusted \| coinbaseOneUnlimitedRewards \| coinbaseUnlockOffers \| coinbaseWalletApp \| coinFocus \| coinShare \| coldStorageCheck \| collectionOfAssets \| commerceCheckout \| commerceInvoice \| commerceNavigation \| completeQuiz \| complianceNavigation \| congratulations \| connectNavigation \| contactInfo \| controlWalletStorage \| creative \| creditCard \| crypto101 \| cryptoCard \| cryptoFolder \| custodialJourney \| custodyNavigation \| dataMarketplaceNavigation \| decentralizationEverything \| decentralizedExchange \| decentralizedIdentity \| decentralizedWeb3 \| defiEarnMoment \| delegate \| delegateNavigation \| derivativesNavigation \| developerPlatformNavigation \| developerSDKNavigation \| directDepositNavigation \| dollarShowcase \| driversLicense \| driversLicenseWheel \| earnCoins \| earnGraph \| earnNavigation \| easyToUse \| economyGlobal \| emailAndMessages \| enableVoting \| envelope \| ethereumFocus \| ethRewards \| ethStaking \| ethStakingChart \| ethStakingRewards \| ethToken \| exchangeNavigation \| explore \| fast \| faucetNavigation \| feesRestriction \| fiat \| finance \| findYourSelection \| formDownload \| futures \| futuresCoinbaseOne \| gem \| genericCountryIDCard \| getStarted \| giftbox \| globalConnections \| globalPayments \| globalTransactions \| googleAuthenticator \| governance \| hardwareWallet \| helpCenterNavigation \| higherLimits \| holdingCoin \| idBlock \| idError \| idVerification \| increaseLimits \| institutionalNavigation \| institutions \| internationalExchangeNavigation \| internet \| investGraph \| laptopCharts \| laptopVideo \| layerNetworks \| leadGraph \| learn \| learningRewardsNavigation \| lightbulbLearn \| lightningNetworkSend \| linkYourAccount \| listingFees \| locationUsa \| lowFees \| manageWeb3SignersAcct \| miningCoins \| mintedNft \| mobileCharts \| mobileError \| mobileNotifcation \| mobileSuccess \| mobileWarning \| moneyEarn \| moneySwift \| monitoringPerformance \| moreThanBitcoin \| multiAccountsAndCards \| multiPlatform \| multipleAssets \| musicAndSounds \| myNumberCard \| newUserChecklistBuyCrypto \| newUserChecklistCompleteAccount \| newUserChecklistVerifyId \| nftAvatar \| nftLibrary \| nftNavigation \| noAnnualFee \| noNftFound \| notificationHubAnalysis \| notificationHubNews \| notificationHubPortfolio \| notificationHubSocial \| notifications \| noVisibility \| noWiFi \| orders \| outage \| partialCoins \| participateNavigation \| passwordWalletLocked \| payNavigation \| peerToPeer \| pieChart \| pizza \| pluginBrowser \| positiveReviews \| predictionMarkets \| premiumInvestor \| priceTracking \| primeMobileApp \| primeNavigation \| privateClientNavigation \| proNavigation \| protectionPlan \| queryTransactNavigation \| receipt \| recurringPurchases \| restaking \| reviewAndAdd \| rewardsNavigation \| riskStaking \| rosettaNavigation \| securedAssets \| security \| securityCoinShield \| seedPhrase \| selectAddNft \| selfCustodyWallet \| selfServe \| sellSendAnytime \| sendPaymentToOthers \| settled \| sideChainSide \| signInNavigation \| smsAuthenticate \| sparkleCoinbaseOne \| ssnCard \| stableCoinMetaphor \| stacking \| stakingGraph \| standWithCryptoLogoNavigation \| startToday \| strongInfo \| strongWarning \| successPhone \| supportChat \| takeQuiz \| target \| taxBeta \| taxCenterNavigation \| taxesArrangement \| taxSeason \| timingCheck \| tokenBaskets \| transferSend \| transistor \| trendingAssets \| trusted \| tryAgainLater \| twoBonus \| typeScript \| ubiKey \| usaProduct \| usdcEarn \| usdcInterest \| usdcLoan \| usdcLogo \| usdcRewards \| usdcRewardsRibbon \| usdcToken \| venturesNavigation \| videoCalendar \| videoContent \| waiting \| waitingForConsensus \| walletAsServiceNavigation \| walletDeposit \| walletError \| walletExchange \| walletLinkNavigation \| walletLogoNavigation \| walletNavigation \| walletPassword \| walletSuccess \| walletWarning \| winBTC \| worldwide \| wrapEth` | No | `-` | Illustration pictogram name for alert |
+| `preferredActionVariant` | `primary \| negative` | No | `primary` | Button variant of the preferred action |
+| `ref` | `((instance: ModalRefBaseProps \| null) => void) \| RefObject<ModalRefBaseProps> \| null` | No | `-` | - |
+| `stacked` | `boolean` | No | `-` | Indicating if Alert is stacked on top of Modal |
+| `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 |
+