@coinbase/cds-mcp-server 8.62.0 → 8.66.0

package/mcp-docs/mobile/components/Tabs.txt

@@ -1,22 +1,22 @@
 # Tabs
 
-Tabs is a flexible, accessible tab navigation component for React Native, supporting animated indicators, custom tab components, and full accessibility.
+**📖 Live documentation:** https://cds.coinbase.com/components/navigation/Tabs/?platform=mobile
+
+Tabs is a flexible, accessible tab list for switching between related views. Use `DefaultTab` and `DefaultTabsActiveIndicator` for a standard underline tab row without custom tab wiring, or provide your own `TabComponent` and `TabsActiveIndicatorComponent`. For pill-style selection, see SegmentedTabs.
 
 ## Import
 
 ```tsx
-import { Tabs } from '@coinbase/cds-mobile/tabs/Tabs'
+import { Tabs, DefaultTabsActiveIndicator } from '@coinbase/cds-mobile/tabs'
 ```
 
 ## Examples
 
-Tabs is a low-level primitive for building custom tab interfaces. It requires a `TabComponent` and `TabsActiveIndicatorComponent` to render. For a ready-to-use tab experience, see [SegmentedTabs](/components/navigation/SegmentedTabs).
+Tabs manages which tab is active and positions the animated indicator. For the common **underline** pattern, pass **`TabsActiveIndicatorComponent={DefaultTabsActiveIndicator}`** and rely on the default **`TabComponent` (`DefaultTab`)**. Use a custom **`TabComponent`** when you need layout or content beyond what `DefaultTab` provides. For **pill / segmented** controls, use [SegmentedTabs](/components/navigation/SegmentedTabs/) instead.
 
 ### Basics
 
-#### Initial Value
-
-Use `useTabsContext` inside your `TabComponent` to access the active tab state. Pair with [TabLabel](/components/navigation/TabLabel) for consistent label styling and [TabsActiveIndicator](/components/navigation/TabIndicator) for the animated indicator.
+Out of the box, **`Tabs`** uses **`DefaultTab`** for each row (headline text, optional [DotCount](/components/other/DotCount/) via `count` / `max` on each tab) and **`DefaultTabsActiveIndicator`** for the animated underline. **`activeBackground`** sets the **underline color** (it is forwarded to the indicator as its `background` token).
 
 ```jsx
 function Example() {
@@ -25,44 +25,28 @@ function Example() {
     { id: 'tab2', label: 'Tab 2' },
     { id: 'tab3', label: 'Tab 3' },
   ];
-
-  const TabComponent = useCallback(({ id, label, disabled }) => {
-    const { activeTab, updateActiveTab } = useTabsContext();
-    const isActive = activeTab?.id === id;
-    return (
-      <Pressable
-        onPress={() => updateActiveTab(id)}
-        disabled={disabled}
-        accessibilityRole="tab"
-        accessibilityState={{ selected: isActive, disabled }}
-      >
-        <TabLabel id={id} active={isActive}>
-          {label}
-        </TabLabel>
-      </Pressable>
-    );
-  }, []);
-
-  const ActiveIndicator = useCallback(
-    (props) => <TabsActiveIndicator {...props} background="bgPrimary" bottom={0} height={2} />,
-    [],
-  );
-
   const [activeTab, setActiveTab] = useState(tabs[0]);
   return (
     <Tabs
-      gap={4}
-      tabs={tabs}
+      accessibilityLabel="Example tabs"
+      activeBackground="bgPrimary"
       activeTab={activeTab}
+      background="bg"
+      gap={4}
       onChange={setActiveTab}
-      TabComponent={TabComponent}
-      TabsActiveIndicatorComponent={ActiveIndicator}
+      // default value; can be omitted.
+      TabComponent={DefaultTab}
+      tabs={tabs}
+      // default value; can be omitted.
+      TabsActiveIndicatorComponent={DefaultTabsActiveIndicator}
     />
   );
 }
 ```
 
-Tabs can also start with no active selection by passing `null`.
+You can omit `TabComponent` explicitly: **`Tabs`** defaults it to **`DefaultTab`**.
+
+#### No initial selection
 
 ```jsx
 function Example() {
@@ -71,38 +55,39 @@ function Example() {
     { id: 'tab2', label: 'Tab 2' },
     { id: 'tab3', label: 'Tab 3' },
   ];
-
-  const TabComponent = useCallback(({ id, label, disabled }) => {
-    const { activeTab, updateActiveTab } = useTabsContext();
-    const isActive = activeTab?.id === id;
-    return (
-      <Pressable
-        onPress={() => updateActiveTab(id)}
-        disabled={disabled}
-        accessibilityRole="tab"
-        accessibilityState={{ selected: isActive, disabled }}
-      >
-        <TabLabel id={id} active={isActive}>
-          {label}
-        </TabLabel>
-      </Pressable>
-    );
-  }, []);
-
-  const ActiveIndicator = useCallback(
-    (props) => <TabsActiveIndicator {...props} background="bgPrimary" bottom={0} height={2} />,
-    [],
-  );
-
   const [activeTab, setActiveTab] = useState(null);
   return (
     <Tabs
+      accessibilityLabel="Example tabs"
+      activeBackground="bgPrimary"
+      activeTab={activeTab}
+      background="bg"
       gap={4}
+      onChange={setActiveTab}
       tabs={tabs}
+    />
+  );
+}
+```
+
+#### Dot counts
+
+```jsx
+function Example() {
+  const tabs = [
+    { id: 'inbox', label: 'Inbox', count: 3, max: 99 },
+    { id: 'sent', label: 'Sent' },
+  ];
+  const [activeTab, setActiveTab] = useState(tabs[0]);
+  return (
+    <Tabs
+      accessibilityLabel="Mail folders"
+      activeBackground="bgPrimary"
       activeTab={activeTab}
+      background="bg"
+      gap={4}
       onChange={setActiveTab}
-      TabComponent={TabComponent}
-      TabsActiveIndicatorComponent={ActiveIndicator}
+      tabs={tabs}
     />
   );
 }
@@ -110,60 +95,37 @@ function Example() {
 
 #### Disabled
 
-The entire component can be disabled with the `disabled` prop.
-
 ```jsx
 function Example() {
   const tabs = [
     { id: 'tab1', label: 'Tab 1' },
-    { id: 'tab2', label: 'Tab 2' },
+    { id: 'tab2', label: 'Tab 2', disabled: true },
     { id: 'tab3', label: 'Tab 3' },
   ];
-
-  const TabComponent = useCallback(({ id, label, disabled }) => {
-    const { activeTab, updateActiveTab } = useTabsContext();
-    const isActive = activeTab?.id === id;
-    return (
-      <Pressable
-        onPress={() => updateActiveTab(id)}
-        disabled={disabled}
-        accessibilityRole="tab"
-        accessibilityState={{ selected: isActive, disabled }}
-      >
-        <TabLabel id={id} active={isActive}>
-          {label}
-        </TabLabel>
-      </Pressable>
-    );
-  }, []);
-
-  const ActiveIndicator = useCallback(
-    (props) => <TabsActiveIndicator {...props} background="bgPrimary" bottom={0} height={2} />,
-    [],
-  );
-
   const [activeTab, setActiveTab] = useState(tabs[0]);
   return (
     <Tabs
-      disabled
-      gap={4}
-      tabs={tabs}
+      accessibilityLabel="Example tabs"
+      activeBackground="bgPrimary"
       activeTab={activeTab}
+      background="bg"
+      gap={4}
       onChange={setActiveTab}
-      TabComponent={TabComponent}
-      TabsActiveIndicatorComponent={ActiveIndicator}
+      tabs={tabs}
     />
   );
 }
 ```
 
-Individual tabs can also be disabled while keeping others interactive.
+### Custom `TabComponent`
+
+Use **`useTabsContext`** with your own **`Pressable`** and **`Text`** for labels (and a custom **`TabsActiveIndicatorComponent`** if needed) when you need more control than `DefaultTab`.
 
 ```jsx
 function Example() {
   const tabs = [
     { id: 'tab1', label: 'Tab 1' },
-    { id: 'tab2', label: 'Tab 2', disabled: true },
+    { id: 'tab2', label: 'Tab 2' },
     { id: 'tab3', label: 'Tab 3' },
   ];
 
@@ -177,9 +139,9 @@ function Example() {
         accessibilityRole="tab"
         accessibilityState={{ selected: isActive, disabled }}
       >
-        <TabLabel id={id} active={isActive}>
+        <Text font="headline" color={isActive ? 'fgPositive' : 'fg'}>
           {label}
-        </TabLabel>
+        </Text>
       </Pressable>
     );
   }, []);
@@ -203,11 +165,7 @@ function Example() {
 }
 ```
 
-### Custom Components
-
-#### Tab
-
-Pass additional data through the tab definitions and access it in your `TabComponent` to render custom content like icons.
+#### Custom label content
 
 ```jsx
 function Example() {
@@ -229,9 +187,9 @@ function Example() {
       >
         <HStack gap={1} alignItems="center">
           <Icon name={icon} size="s" color={isActive ? 'fgPrimary' : 'fgMuted'} />
-          <TabLabel id={id} active={isActive}>
+          <Text font="headline" color={isActive ? 'fgPrimary' : 'fg'}>
             {label}
-          </TabLabel>
+          </Text>
         </HStack>
       </Pressable>
     );
@@ -256,15 +214,19 @@ function Example() {
 }
 ```
 
+### Accessibility
+
+Set **`accessibilityLabel`** on **`Tabs`**. **`DefaultTab`** wires `accessibilityRole="tab"` and selection state; keep tab panels in sync in your screen content.
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
-| `TabComponent` | `TabComponent<TabId>` | Yes | `-` | The default Component to render each tab. |
-| `TabsActiveIndicatorComponent` | `TabsActiveIndicatorComponent` | Yes | `-` | The default Component to render the tabs active indicator. |
 | `activeTab` | `TabValue<TabId> \| null` | Yes | `-` | React state for the currently active tab. Setting it to null results in no active tab. |
-| `onChange` | `(activeTab: TabValue<TabId> \| null) => void` | Yes | `-` | Callback that is fired when the active tab changes. Use this callback to update the activeTab state. |
-| `tabs` | `(TabValue<TabId> & { Component?: TabComponent<TabId> \| undefined; })[]` | Yes | `-` | The array of tabs data. Each tab may optionally define a custom Component to render. |
+| `onChange` | `(activeTab: TTab \| null) => void` | Yes | `-` | Callback that is fired when the active tab changes. Use this callback to update the activeTab state. |
+| `tabs` | `(TTab & { Component?: TabComponent<TabId, TTab> \| undefined; })[]` | Yes | `-` | The array of tabs data. Each tab may optionally define a custom Component to render. |
+| `TabComponent` | `TabComponent<TabId, TTab>` | No | `-` | The default Component to render each tab. |
+| `TabsActiveIndicatorComponent` | `TabsActiveIndicatorComponent` | No | `-` | The default Component to render the tabs active indicator. |
 | `activeBackground` | `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 passed to the TabsActiveIndicatorComponent. |
 | `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
 | `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
@@ -350,8 +312,8 @@ function Example() {
 | `right` | `string \| number` | No | `-` | - |
 | `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
 | `style` | `false \| RegisteredStyle<ViewStyle> \| Value \| AnimatedInterpolation<string \| number> \| WithAnimatedObject<ViewStyle> \| WithAnimatedArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>> \| readonly (Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>)[]> \| null` | No | `-` | - |
-| `styles` | `{ root?: StyleProp<ViewStyle>; tab?: StyleProp<ViewStyle>; activeIndicator?: StyleProp<ViewStyle>; }` | No | `-` | - |
-| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Used to locate this view in end-to-end tests. |
+| `styles` | `{ root?: StyleProp<ViewStyle>; tab?: StyleProp<ViewStyle>; activeIndicator?: StyleProp<ViewStyle>; }` | No | `-` | Custom styles for individual elements of the Tabs component |
+| `testID` | `string` | No | `tabs-active-indicator` | Used to locate this element in unit and end-to-end tests. Used to locate this view in end-to-end tests. |
 | `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
 | `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
 | `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |

package/mcp-docs/mobile/components/Tag.txt

@@ -1,5 +1,7 @@
 # Tag
 
+**📖 Live documentation:** https://cds.coinbase.com/components/typography/Tag/?platform=mobile
+
 A small label for categorizing or labeling content.
 
 ## Import
@@ -270,7 +272,7 @@ function MarginExample() {
 | `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
 | `emphasis` | `low \| high` | No | `'low' when informational intent, 'high' when promotional intent` | Specify the emphasis of the Tag. |
 | `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Set the end node |
-| `endIcon` | `key \| search \| pin \| filter \| visible \| continuous \| auto \| loop \| image \| menu \| list \| application \| document \| grid \| group \| warning \| error \| account \| activity \| add \| addPeople \| advancedMarketSelector \| advancedTradeProduct \| affiliates \| airdrop \| airdropAlt \| airdropCoins \| airdropParachute \| alien \| allTimeHigh \| allocation \| annotation \| api \| apiPlug \| apothecary \| appSwitcher \| apple \| appleLogo \| arrowDown \| arrowLeft \| arrowRight \| arrowUp \| arrowsHorizontal \| arrowsUpDown \| arrowsVertical \| artwork \| assetHubProduct \| assetManagementProduct \| astronautHelmet \| atSign \| atomScience \| autoCar \| avatar \| average \| backArrow \| ballot \| ballotbox \| bandage \| bank \| barChartSimple \| barChartWindow \| base \| baseApps \| baseFeed \| baseNotification \| baseQuickBuy \| baseSquare \| baseTransact \| baseVerification \| baseWallet \| baseball \| basketball \| beaker \| beginningArrow \| bell \| bellCheck \| bellPlus \| birthcertificate \| block \| blockchain \| blog \| book \| bookmark \| borrowProduct \| boxing \| bridging \| briefcase \| briefcaseAlt \| browser \| bug \| building \| calculator \| calendar \| calendarBlank \| calendarDates \| calendarEmpty \| calendarHeart \| calendarMoney \| calendarStar \| camera \| candlesticks \| car \| card \| caret \| caretDown \| caretLeft \| caretRight \| caretUp \| cash \| cashAustralianDollar \| cashBrazilianReal \| cashBrazillianReal \| cashCanadianDollar \| cashCoins \| cashEUR \| cashGBP \| cashIndonesianRupiah \| cashJPY \| cashPhilippinePeso \| cashPolishZloty \| cashRupee \| cashSingaporeDollar \| cashSwissFranc \| cashThaiBaht \| cashTurkishLira \| cashUSD \| cashUaeDirham \| cashVietnameseDong \| chainLink \| chartBar \| chartCandles \| chartLine \| chartPie \| chartPieCircle \| chartVolume \| chatBotAgent \| chatBubble \| chatRequests \| checkboxChecked \| checkboxEmpty \| checkmark \| chess \| circleCheckmark \| circleCross \| circulatingSupply \| city \| clipboard \| clock \| clockOutline \| close \| closeCaption \| clothing \| cloud \| cloudPartial \| cloudProduct \| cluster \| coinbase \| coinbaseCardProduct \| coinbaseOne \| coinbaseOneCard \| coinbaseOneLogo \| coinbaseRewards \| coinsCrypto \| collapse \| collectibles \| collection \| comment \| commentPlus \| commerceProduct \| compass \| complianceProduct \| compose \| computerChip \| concierge \| conciergeBell \| config \| convert \| copy \| corporation \| creatorCoin \| cricket \| cross \| crossTrade \| crypto \| cryptobasics \| crystalBall \| crystalBallInsight \| currencies \| custodyProduct \| dashboard \| dataMarketplaceProduct \| dataStack \| defi \| delegateProduct \| deposit \| derivatives \| derivativesProduct \| derivativesProductNew \| developerAPIProduct \| developerPlatformProduct \| dex \| diagonalDownArrow \| diagonalRightArrow \| diagonalUpArrow \| diamond \| diamondIncentives \| dinnerPlate \| directDeposit \| directDepositIcon \| disabledPhone \| discordLogo \| distribution \| documentation \| dot \| doubleChevronRight \| downArrow \| download \| drag \| drops \| earn \| earnProduct \| earnRewards \| earthquake \| educationBook \| educationPencil \| email \| endArrow \| entertainment \| ethereum \| eventContracts \| exchangeProduct \| exclamationMark \| expand \| expandAddress \| expandAll \| externalLink \| eye \| faceScan \| faces \| factory \| faucet \| fib \| filmStrip \| filterLineStack \| fingerprint \| flame \| folder \| folderArrow \| folderOpen \| followAdd \| following \| football \| fork \| forwardArrow \| fscsProtection \| gab \| games \| gaming \| gasFees \| gasFeesAlt \| gauge \| gaugeEmpty \| gaugeHigh \| gaugeHighLow \| gaugeHighMid \| gaugeLow \| gaugeLowHigh \| gaugeLowMid \| gaugeMedium \| gavel \| gear \| generalCharacter \| ghost \| gif \| giftBox \| giftCard \| gitHubLogo \| globe \| golf \| googleLogo \| greenEnergy \| hamburger \| hammer \| heart \| helpCenterProduct \| helpCenterQuestionMark \| hiddenEye \| hockey \| home \| horizontalLine \| hospital \| hospitalCross \| hurricane \| ideal \| identityCard \| info \| initiator \| instagramLogo \| instantUnstakingClock \| institute \| institutionalProduct \| interest \| invisible \| invoice \| keyboard \| laptop \| leadChart \| leadCoin \| learningRewardsProduct \| light \| lightbulb \| lightning \| lightningBolt \| lineChartCrypto \| location \| lock \| login \| logout \| magnifyingGlass \| marketCap \| medal \| megaphone \| metaverse \| microphone \| microphoneCordless \| microscope \| mint \| minus \| mma \| moneyCardCoin \| moon \| more \| moreVertical \| motorsport \| music \| musicArticles \| needle \| newsFeed \| newsletter \| nft \| nftBuy \| nftOffer \| nftProduct \| nftSale \| noRocket \| noWifi \| nodeProduct \| oil \| options \| orderBook \| orderHistory \| outline \| pFPS \| paperAirplane \| paperclip \| participate \| participateProduct \| passKey \| passport \| pause \| pay \| payProduct \| paymentCard \| payments \| payouts \| paypal \| pencil \| peopleGroup \| peopleStar \| percentage \| perpetualSwap \| phone \| pieChartData \| pieChartWithArrow \| pillBottle \| pillCapsule \| plane \| planet \| play \| playbutton \| plusMinus \| podiumStar \| politicsBuilding \| politicsCandidate \| politicsFlag \| politicsGavel \| politicsPodium \| politicsStar \| powerTool \| priceAlerts \| priceAlertsCheck \| primePoduct \| privateClientProduct \| proProduct \| profile \| protection \| pulse \| pyramid \| qrCode \| qrCodeAlt \| queryTransact \| questionMark \| quotation \| rain \| ratingsCheck \| ratingsChecks \| ratingsStar \| reCenter \| rectangle \| recurring \| refresh \| regulated \| regulatedFutures \| report \| rewardsProduct \| ribbon \| robot \| rocket \| rocketShip \| rollingSpot \| rosettaProduct \| rottenTomato \| royalty \| safe \| save \| savingsBank \| scanQrCode \| scienceAtom \| scienceBeaker \| scienceMoon \| securityKey \| securityShield \| seen \| sendReceive \| setPinCode \| settings \| share \| shield \| shieldOutline \| shoe \| shoppingCart \| signinProduct \| singleCoin \| singleNote \| singlecloud \| smartContract \| snow \| soccer \| socialChat \| socialReshare \| socialShare \| sofort \| sortDoubleArrow \| sortDown \| sortDownCenter \| sortUp \| sortUpCenter \| soundOff \| soundOn \| sparkle \| speaker \| speechBubble \| stableCoin \| stablecoinStack \| staggeredList \| stake \| staking \| star \| starAward \| starBubble \| starTrophy \| statusDot \| step0 \| step1 \| step2 \| step3 \| step4 \| step5 \| step6 \| step7 \| step8 \| step9 \| strategy \| sun \| support \| tag \| taxes \| taxesReceipt \| telephone \| tennis \| test \| thermometer \| thumbsDown \| thumbsDownOutline \| thumbsUp \| thumbsUpOutline \| tokenLaunchCoin \| tokenLaunchRocket \| tokenSales \| tornado \| trading \| transactions \| trashCan \| trophy \| trophyCup \| tshirt \| tv \| tvStand \| twitterLogo \| ultility \| umbrella \| undo \| unfollowPeople \| unknown \| unlock \| upArrow \| upload \| usdc \| venturesProduct \| verifiedBadge \| verifiedPools \| verticalLine \| virus \| waasProduct \| wallet \| walletLogo \| walletProduct \| webhooks \| wellness \| wifi \| wind \| wireTransfer \| withdraw \| wrapToken \| xLogo` | No | `-` | Icon to render at the end of the tag. |
+| `endIcon` | `key \| search \| pin \| filter \| visible \| continuous \| auto \| column \| loop \| image \| menu \| list \| application \| document \| grid \| group \| warning \| error \| account \| activity \| add \| addPeople \| advancedMarketSelector \| advancedTradeProduct \| affiliates \| airdrop \| airdropAlt \| airdropCoins \| airdropParachute \| alien \| allTimeHigh \| allocation \| annotation \| api \| apiPlug \| apothecary \| appSwitcher \| apple \| appleLogo \| arrowDown \| arrowLeft \| arrowRight \| arrowUp \| arrowsHorizontal \| arrowsUpDown \| arrowsVertical \| artwork \| assetHubProduct \| assetManagementProduct \| astronautHelmet \| atSign \| atomScience \| autoCar \| avatar \| average \| backArrow \| ballot \| ballotbox \| bandage \| bank \| barChartSimple \| barChartWindow \| base \| baseApps \| baseFeed \| baseLock \| baseNotification \| baseQuickBuy \| baseSquare \| baseTransact \| baseVerification \| baseWallet \| baseball \| basketball \| beaker \| beginningArrow \| bell \| bellCheck \| bellPlus \| birthcertificate \| block \| blockchain \| blog \| book \| bookmark \| borrowProduct \| boxing \| bridging \| briefcase \| briefcaseAlt \| browser \| bug \| building \| calculator \| calendar \| calendarBlank \| calendarDates \| calendarEmpty \| calendarHeart \| calendarMoney \| calendarStar \| camera \| candlesticks \| car \| card \| caret \| caretDown \| caretLeft \| caretRight \| caretUp \| cash \| cashAustralianDollar \| cashBrazilianReal \| cashBrazillianReal \| cashCanadianDollar \| cashCoins \| cashEUR \| cashGBP \| cashIndonesianRupiah \| cashJPY \| cashPhilippinePeso \| cashPolishZloty \| cashRupee \| cashSingaporeDollar \| cashSwissFranc \| cashThaiBaht \| cashTurkishLira \| cashUSD \| cashUaeDirham \| cashVietnameseDong \| chainLink \| chartBar \| chartCandles \| chartLine \| chartPie \| chartPieCircle \| chartVolume \| chatBotAgent \| chatBubble \| chatRequests \| checkboxChecked \| checkboxEmpty \| checkmark \| chess \| circleCheckmark \| circleCross \| circulatingSupply \| city \| clipboard \| clock \| clockOutline \| close \| closeCaption \| clothing \| cloud \| cloudPartial \| cloudProduct \| cluster \| coinbase \| coinbaseCardProduct \| coinbaseOne \| coinbaseOneCard \| coinbaseOneLogo \| coinbaseRewards \| coinsCrypto \| collapse \| collectibles \| collection \| comment \| commentPlus \| commerceProduct \| compass \| complianceProduct \| compose \| computerChip \| concierge \| conciergeBell \| config \| convert \| copy \| corporation \| creatorCoin \| cricket \| cross \| crossTrade \| crypto \| cryptobasics \| crystalBall \| crystalBallInsight \| currencies \| custodyProduct \| dashboard \| dataMarketplaceProduct \| dataStack \| defi \| delegateProduct \| deposit \| derivatives \| derivativesProduct \| derivativesProductNew \| developerAPIProduct \| developerPlatformProduct \| dex \| diagonalDownArrow \| diagonalRightArrow \| diagonalUpArrow \| diamond \| diamondIncentives \| dinnerPlate \| directDeposit \| directDepositIcon \| disabledPhone \| discordLogo \| distribution \| documentation \| dot \| doubleChevronRight \| downArrow \| download \| drag \| drops \| earn \| earnProduct \| earnRewards \| earthquake \| educationBook \| educationPencil \| email \| endArrow \| entertainment \| ethereum \| eventContracts \| exchangeProduct \| exclamationMark \| expand \| expandAddress \| expandAll \| externalLink \| eye \| faceScan \| faces \| factory \| faucet \| fib \| filmStrip \| filterLineStack \| fingerprint \| flame \| folder \| folderArrow \| folderOpen \| followAdd \| following \| football \| fork \| forwardArrow \| fscsProtection \| gab \| games \| gaming \| gasFees \| gasFeesAlt \| gauge \| gaugeEmpty \| gaugeHigh \| gaugeHighLow \| gaugeHighMid \| gaugeLow \| gaugeLowHigh \| gaugeLowMid \| gaugeMedium \| gavel \| gear \| generalCharacter \| ghost \| gif \| giftBox \| giftCard \| gitHubLogo \| globe \| golf \| googleLogo \| greenEnergy \| hamburger \| hammer \| heart \| helpCenterProduct \| helpCenterQuestionMark \| hiddenEye \| hockey \| home \| horizontalLine \| hospital \| hospitalCross \| hurricane \| ideal \| identityCard \| info \| initiator \| instagramLogo \| instantUnstakingClock \| institute \| institutionalProduct \| interest \| invisible \| invoice \| keyboard \| laptop \| leadChart \| leadCoin \| learningRewardsProduct \| light \| lightbulb \| lightning \| lightningBolt \| lineChartCrypto \| location \| lock \| login \| logout \| magnifyingGlass \| marketCap \| medal \| megaphone \| metaverse \| microphone \| microphoneCordless \| microscope \| mint \| minus \| mma \| moneyCardCoin \| moon \| more \| moreVertical \| motorsport \| music \| musicArticles \| needle \| newsFeed \| newsletter \| nft \| nftBuy \| nftOffer \| nftProduct \| nftSale \| noRocket \| noWifi \| nodeProduct \| oil \| options \| orderBook \| orderHistory \| outline \| overPredictions \| pFPS \| paperAirplane \| paperclip \| participate \| participateProduct \| passKey \| passport \| pause \| pay \| payProduct \| paymentCard \| payments \| payouts \| paypal \| pencil \| peopleGroup \| peopleStar \| percentage \| perpetualSwap \| phone \| pieChartData \| pieChartWithArrow \| pillBottle \| pillCapsule \| plane \| planet \| play \| playbutton \| plusMinus \| podiumStar \| politicsBuilding \| politicsCandidate \| politicsFlag \| politicsGavel \| politicsPodium \| politicsStar \| powerTool \| priceAlerts \| priceAlertsCheck \| primePoduct \| privateClientProduct \| proProduct \| profile \| protection \| pulse \| pyramid \| qrCode \| qrCodeAlt \| queryTransact \| questionMark \| quotation \| rain \| ratingsCheck \| ratingsChecks \| ratingsStar \| reCenter \| rectangle \| recurring \| refresh \| regulated \| regulatedFutures \| report \| rewardsProduct \| ribbon \| robot \| rocket \| rocketShip \| rollingSpot \| rosettaProduct \| rottenTomato \| royalty \| safe \| save \| savingsBank \| scanQrCode \| scienceAtom \| scienceBeaker \| scienceMoon \| securityKey \| securityShield \| seen \| sendReceive \| setPinCode \| settings \| share \| shield \| shieldOutline \| shoe \| shoppingCart \| signinProduct \| singleCoin \| singleNote \| singlecloud \| smartContract \| snow \| soccer \| socialChat \| socialReshare \| socialShare \| sofort \| sortDoubleArrow \| sortDown \| sortDownCenter \| sortUp \| sortUpCenter \| soundOff \| soundOn \| sparkle \| speaker \| speechBubble \| stableCoin \| stablecoinStack \| staggeredList \| stake \| staking \| star \| starAward \| starBubble \| starTrophy \| statusDot \| step0 \| step1 \| step2 \| step3 \| step4 \| step5 \| step6 \| step7 \| step8 \| step9 \| strategy \| sun \| support \| tag \| taxes \| taxesReceipt \| telephone \| tennis \| test \| thermometer \| thumbsDown \| thumbsDownOutline \| thumbsUp \| thumbsUpOutline \| tokenLaunchCoin \| tokenLaunchRocket \| tokenSales \| tornado \| trading \| transactions \| trashCan \| trophy \| trophyCup \| tshirt \| tv \| tvStand \| twitterLogo \| ultility \| umbrella \| underPredictions \| undo \| unfollowPeople \| unknown \| unlock \| upArrow \| upload \| usdc \| venturesProduct \| verifiedBadge \| verifiedPools \| verticalLine \| virus \| waasProduct \| wallet \| walletLogo \| walletProduct \| webhooks \| wellness \| wifi \| wind \| wireTransfer \| withdraw \| wrapToken \| xLogo` | No | `-` | Icon to render at the end of the tag. |
 | `endIconActive` | `boolean` | No | `-` | Whether the end icon is active |
 | `flexBasis` | `string \| number` | No | `-` | - |
 | `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
@@ -326,7 +328,7 @@ function MarginExample() {
 | `right` | `string \| number` | No | `-` | - |
 | `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
 | `start` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Set the start node |
-| `startIcon` | `key \| search \| pin \| filter \| visible \| continuous \| auto \| loop \| image \| menu \| list \| application \| document \| grid \| group \| warning \| error \| account \| activity \| add \| addPeople \| advancedMarketSelector \| advancedTradeProduct \| affiliates \| airdrop \| airdropAlt \| airdropCoins \| airdropParachute \| alien \| allTimeHigh \| allocation \| annotation \| api \| apiPlug \| apothecary \| appSwitcher \| apple \| appleLogo \| arrowDown \| arrowLeft \| arrowRight \| arrowUp \| arrowsHorizontal \| arrowsUpDown \| arrowsVertical \| artwork \| assetHubProduct \| assetManagementProduct \| astronautHelmet \| atSign \| atomScience \| autoCar \| avatar \| average \| backArrow \| ballot \| ballotbox \| bandage \| bank \| barChartSimple \| barChartWindow \| base \| baseApps \| baseFeed \| baseNotification \| baseQuickBuy \| baseSquare \| baseTransact \| baseVerification \| baseWallet \| baseball \| basketball \| beaker \| beginningArrow \| bell \| bellCheck \| bellPlus \| birthcertificate \| block \| blockchain \| blog \| book \| bookmark \| borrowProduct \| boxing \| bridging \| briefcase \| briefcaseAlt \| browser \| bug \| building \| calculator \| calendar \| calendarBlank \| calendarDates \| calendarEmpty \| calendarHeart \| calendarMoney \| calendarStar \| camera \| candlesticks \| car \| card \| caret \| caretDown \| caretLeft \| caretRight \| caretUp \| cash \| cashAustralianDollar \| cashBrazilianReal \| cashBrazillianReal \| cashCanadianDollar \| cashCoins \| cashEUR \| cashGBP \| cashIndonesianRupiah \| cashJPY \| cashPhilippinePeso \| cashPolishZloty \| cashRupee \| cashSingaporeDollar \| cashSwissFranc \| cashThaiBaht \| cashTurkishLira \| cashUSD \| cashUaeDirham \| cashVietnameseDong \| chainLink \| chartBar \| chartCandles \| chartLine \| chartPie \| chartPieCircle \| chartVolume \| chatBotAgent \| chatBubble \| chatRequests \| checkboxChecked \| checkboxEmpty \| checkmark \| chess \| circleCheckmark \| circleCross \| circulatingSupply \| city \| clipboard \| clock \| clockOutline \| close \| closeCaption \| clothing \| cloud \| cloudPartial \| cloudProduct \| cluster \| coinbase \| coinbaseCardProduct \| coinbaseOne \| coinbaseOneCard \| coinbaseOneLogo \| coinbaseRewards \| coinsCrypto \| collapse \| collectibles \| collection \| comment \| commentPlus \| commerceProduct \| compass \| complianceProduct \| compose \| computerChip \| concierge \| conciergeBell \| config \| convert \| copy \| corporation \| creatorCoin \| cricket \| cross \| crossTrade \| crypto \| cryptobasics \| crystalBall \| crystalBallInsight \| currencies \| custodyProduct \| dashboard \| dataMarketplaceProduct \| dataStack \| defi \| delegateProduct \| deposit \| derivatives \| derivativesProduct \| derivativesProductNew \| developerAPIProduct \| developerPlatformProduct \| dex \| diagonalDownArrow \| diagonalRightArrow \| diagonalUpArrow \| diamond \| diamondIncentives \| dinnerPlate \| directDeposit \| directDepositIcon \| disabledPhone \| discordLogo \| distribution \| documentation \| dot \| doubleChevronRight \| downArrow \| download \| drag \| drops \| earn \| earnProduct \| earnRewards \| earthquake \| educationBook \| educationPencil \| email \| endArrow \| entertainment \| ethereum \| eventContracts \| exchangeProduct \| exclamationMark \| expand \| expandAddress \| expandAll \| externalLink \| eye \| faceScan \| faces \| factory \| faucet \| fib \| filmStrip \| filterLineStack \| fingerprint \| flame \| folder \| folderArrow \| folderOpen \| followAdd \| following \| football \| fork \| forwardArrow \| fscsProtection \| gab \| games \| gaming \| gasFees \| gasFeesAlt \| gauge \| gaugeEmpty \| gaugeHigh \| gaugeHighLow \| gaugeHighMid \| gaugeLow \| gaugeLowHigh \| gaugeLowMid \| gaugeMedium \| gavel \| gear \| generalCharacter \| ghost \| gif \| giftBox \| giftCard \| gitHubLogo \| globe \| golf \| googleLogo \| greenEnergy \| hamburger \| hammer \| heart \| helpCenterProduct \| helpCenterQuestionMark \| hiddenEye \| hockey \| home \| horizontalLine \| hospital \| hospitalCross \| hurricane \| ideal \| identityCard \| info \| initiator \| instagramLogo \| instantUnstakingClock \| institute \| institutionalProduct \| interest \| invisible \| invoice \| keyboard \| laptop \| leadChart \| leadCoin \| learningRewardsProduct \| light \| lightbulb \| lightning \| lightningBolt \| lineChartCrypto \| location \| lock \| login \| logout \| magnifyingGlass \| marketCap \| medal \| megaphone \| metaverse \| microphone \| microphoneCordless \| microscope \| mint \| minus \| mma \| moneyCardCoin \| moon \| more \| moreVertical \| motorsport \| music \| musicArticles \| needle \| newsFeed \| newsletter \| nft \| nftBuy \| nftOffer \| nftProduct \| nftSale \| noRocket \| noWifi \| nodeProduct \| oil \| options \| orderBook \| orderHistory \| outline \| pFPS \| paperAirplane \| paperclip \| participate \| participateProduct \| passKey \| passport \| pause \| pay \| payProduct \| paymentCard \| payments \| payouts \| paypal \| pencil \| peopleGroup \| peopleStar \| percentage \| perpetualSwap \| phone \| pieChartData \| pieChartWithArrow \| pillBottle \| pillCapsule \| plane \| planet \| play \| playbutton \| plusMinus \| podiumStar \| politicsBuilding \| politicsCandidate \| politicsFlag \| politicsGavel \| politicsPodium \| politicsStar \| powerTool \| priceAlerts \| priceAlertsCheck \| primePoduct \| privateClientProduct \| proProduct \| profile \| protection \| pulse \| pyramid \| qrCode \| qrCodeAlt \| queryTransact \| questionMark \| quotation \| rain \| ratingsCheck \| ratingsChecks \| ratingsStar \| reCenter \| rectangle \| recurring \| refresh \| regulated \| regulatedFutures \| report \| rewardsProduct \| ribbon \| robot \| rocket \| rocketShip \| rollingSpot \| rosettaProduct \| rottenTomato \| royalty \| safe \| save \| savingsBank \| scanQrCode \| scienceAtom \| scienceBeaker \| scienceMoon \| securityKey \| securityShield \| seen \| sendReceive \| setPinCode \| settings \| share \| shield \| shieldOutline \| shoe \| shoppingCart \| signinProduct \| singleCoin \| singleNote \| singlecloud \| smartContract \| snow \| soccer \| socialChat \| socialReshare \| socialShare \| sofort \| sortDoubleArrow \| sortDown \| sortDownCenter \| sortUp \| sortUpCenter \| soundOff \| soundOn \| sparkle \| speaker \| speechBubble \| stableCoin \| stablecoinStack \| staggeredList \| stake \| staking \| star \| starAward \| starBubble \| starTrophy \| statusDot \| step0 \| step1 \| step2 \| step3 \| step4 \| step5 \| step6 \| step7 \| step8 \| step9 \| strategy \| sun \| support \| tag \| taxes \| taxesReceipt \| telephone \| tennis \| test \| thermometer \| thumbsDown \| thumbsDownOutline \| thumbsUp \| thumbsUpOutline \| tokenLaunchCoin \| tokenLaunchRocket \| tokenSales \| tornado \| trading \| transactions \| trashCan \| trophy \| trophyCup \| tshirt \| tv \| tvStand \| twitterLogo \| ultility \| umbrella \| undo \| unfollowPeople \| unknown \| unlock \| upArrow \| upload \| usdc \| venturesProduct \| verifiedBadge \| verifiedPools \| verticalLine \| virus \| waasProduct \| wallet \| walletLogo \| walletProduct \| webhooks \| wellness \| wifi \| wind \| wireTransfer \| withdraw \| wrapToken \| xLogo` | No | `-` | Icon to render at the start of the tag. |
+| `startIcon` | `key \| search \| pin \| filter \| visible \| continuous \| auto \| column \| loop \| image \| menu \| list \| application \| document \| grid \| group \| warning \| error \| account \| activity \| add \| addPeople \| advancedMarketSelector \| advancedTradeProduct \| affiliates \| airdrop \| airdropAlt \| airdropCoins \| airdropParachute \| alien \| allTimeHigh \| allocation \| annotation \| api \| apiPlug \| apothecary \| appSwitcher \| apple \| appleLogo \| arrowDown \| arrowLeft \| arrowRight \| arrowUp \| arrowsHorizontal \| arrowsUpDown \| arrowsVertical \| artwork \| assetHubProduct \| assetManagementProduct \| astronautHelmet \| atSign \| atomScience \| autoCar \| avatar \| average \| backArrow \| ballot \| ballotbox \| bandage \| bank \| barChartSimple \| barChartWindow \| base \| baseApps \| baseFeed \| baseLock \| baseNotification \| baseQuickBuy \| baseSquare \| baseTransact \| baseVerification \| baseWallet \| baseball \| basketball \| beaker \| beginningArrow \| bell \| bellCheck \| bellPlus \| birthcertificate \| block \| blockchain \| blog \| book \| bookmark \| borrowProduct \| boxing \| bridging \| briefcase \| briefcaseAlt \| browser \| bug \| building \| calculator \| calendar \| calendarBlank \| calendarDates \| calendarEmpty \| calendarHeart \| calendarMoney \| calendarStar \| camera \| candlesticks \| car \| card \| caret \| caretDown \| caretLeft \| caretRight \| caretUp \| cash \| cashAustralianDollar \| cashBrazilianReal \| cashBrazillianReal \| cashCanadianDollar \| cashCoins \| cashEUR \| cashGBP \| cashIndonesianRupiah \| cashJPY \| cashPhilippinePeso \| cashPolishZloty \| cashRupee \| cashSingaporeDollar \| cashSwissFranc \| cashThaiBaht \| cashTurkishLira \| cashUSD \| cashUaeDirham \| cashVietnameseDong \| chainLink \| chartBar \| chartCandles \| chartLine \| chartPie \| chartPieCircle \| chartVolume \| chatBotAgent \| chatBubble \| chatRequests \| checkboxChecked \| checkboxEmpty \| checkmark \| chess \| circleCheckmark \| circleCross \| circulatingSupply \| city \| clipboard \| clock \| clockOutline \| close \| closeCaption \| clothing \| cloud \| cloudPartial \| cloudProduct \| cluster \| coinbase \| coinbaseCardProduct \| coinbaseOne \| coinbaseOneCard \| coinbaseOneLogo \| coinbaseRewards \| coinsCrypto \| collapse \| collectibles \| collection \| comment \| commentPlus \| commerceProduct \| compass \| complianceProduct \| compose \| computerChip \| concierge \| conciergeBell \| config \| convert \| copy \| corporation \| creatorCoin \| cricket \| cross \| crossTrade \| crypto \| cryptobasics \| crystalBall \| crystalBallInsight \| currencies \| custodyProduct \| dashboard \| dataMarketplaceProduct \| dataStack \| defi \| delegateProduct \| deposit \| derivatives \| derivativesProduct \| derivativesProductNew \| developerAPIProduct \| developerPlatformProduct \| dex \| diagonalDownArrow \| diagonalRightArrow \| diagonalUpArrow \| diamond \| diamondIncentives \| dinnerPlate \| directDeposit \| directDepositIcon \| disabledPhone \| discordLogo \| distribution \| documentation \| dot \| doubleChevronRight \| downArrow \| download \| drag \| drops \| earn \| earnProduct \| earnRewards \| earthquake \| educationBook \| educationPencil \| email \| endArrow \| entertainment \| ethereum \| eventContracts \| exchangeProduct \| exclamationMark \| expand \| expandAddress \| expandAll \| externalLink \| eye \| faceScan \| faces \| factory \| faucet \| fib \| filmStrip \| filterLineStack \| fingerprint \| flame \| folder \| folderArrow \| folderOpen \| followAdd \| following \| football \| fork \| forwardArrow \| fscsProtection \| gab \| games \| gaming \| gasFees \| gasFeesAlt \| gauge \| gaugeEmpty \| gaugeHigh \| gaugeHighLow \| gaugeHighMid \| gaugeLow \| gaugeLowHigh \| gaugeLowMid \| gaugeMedium \| gavel \| gear \| generalCharacter \| ghost \| gif \| giftBox \| giftCard \| gitHubLogo \| globe \| golf \| googleLogo \| greenEnergy \| hamburger \| hammer \| heart \| helpCenterProduct \| helpCenterQuestionMark \| hiddenEye \| hockey \| home \| horizontalLine \| hospital \| hospitalCross \| hurricane \| ideal \| identityCard \| info \| initiator \| instagramLogo \| instantUnstakingClock \| institute \| institutionalProduct \| interest \| invisible \| invoice \| keyboard \| laptop \| leadChart \| leadCoin \| learningRewardsProduct \| light \| lightbulb \| lightning \| lightningBolt \| lineChartCrypto \| location \| lock \| login \| logout \| magnifyingGlass \| marketCap \| medal \| megaphone \| metaverse \| microphone \| microphoneCordless \| microscope \| mint \| minus \| mma \| moneyCardCoin \| moon \| more \| moreVertical \| motorsport \| music \| musicArticles \| needle \| newsFeed \| newsletter \| nft \| nftBuy \| nftOffer \| nftProduct \| nftSale \| noRocket \| noWifi \| nodeProduct \| oil \| options \| orderBook \| orderHistory \| outline \| overPredictions \| pFPS \| paperAirplane \| paperclip \| participate \| participateProduct \| passKey \| passport \| pause \| pay \| payProduct \| paymentCard \| payments \| payouts \| paypal \| pencil \| peopleGroup \| peopleStar \| percentage \| perpetualSwap \| phone \| pieChartData \| pieChartWithArrow \| pillBottle \| pillCapsule \| plane \| planet \| play \| playbutton \| plusMinus \| podiumStar \| politicsBuilding \| politicsCandidate \| politicsFlag \| politicsGavel \| politicsPodium \| politicsStar \| powerTool \| priceAlerts \| priceAlertsCheck \| primePoduct \| privateClientProduct \| proProduct \| profile \| protection \| pulse \| pyramid \| qrCode \| qrCodeAlt \| queryTransact \| questionMark \| quotation \| rain \| ratingsCheck \| ratingsChecks \| ratingsStar \| reCenter \| rectangle \| recurring \| refresh \| regulated \| regulatedFutures \| report \| rewardsProduct \| ribbon \| robot \| rocket \| rocketShip \| rollingSpot \| rosettaProduct \| rottenTomato \| royalty \| safe \| save \| savingsBank \| scanQrCode \| scienceAtom \| scienceBeaker \| scienceMoon \| securityKey \| securityShield \| seen \| sendReceive \| setPinCode \| settings \| share \| shield \| shieldOutline \| shoe \| shoppingCart \| signinProduct \| singleCoin \| singleNote \| singlecloud \| smartContract \| snow \| soccer \| socialChat \| socialReshare \| socialShare \| sofort \| sortDoubleArrow \| sortDown \| sortDownCenter \| sortUp \| sortUpCenter \| soundOff \| soundOn \| sparkle \| speaker \| speechBubble \| stableCoin \| stablecoinStack \| staggeredList \| stake \| staking \| star \| starAward \| starBubble \| starTrophy \| statusDot \| step0 \| step1 \| step2 \| step3 \| step4 \| step5 \| step6 \| step7 \| step8 \| step9 \| strategy \| sun \| support \| tag \| taxes \| taxesReceipt \| telephone \| tennis \| test \| thermometer \| thumbsDown \| thumbsDownOutline \| thumbsUp \| thumbsUpOutline \| tokenLaunchCoin \| tokenLaunchRocket \| tokenSales \| tornado \| trading \| transactions \| trashCan \| trophy \| trophyCup \| tshirt \| tv \| tvStand \| twitterLogo \| ultility \| umbrella \| underPredictions \| undo \| unfollowPeople \| unknown \| unlock \| upArrow \| upload \| usdc \| venturesProduct \| verifiedBadge \| verifiedPools \| verticalLine \| virus \| waasProduct \| wallet \| walletLogo \| walletProduct \| webhooks \| wellness \| wifi \| wind \| wireTransfer \| withdraw \| wrapToken \| xLogo` | No | `-` | Icon to render at the start of the tag. |
 | `startIconActive` | `boolean` | No | `-` | Whether the start icon is active |
 | `style` | `false \| RegisteredStyle<ViewStyle> \| Value \| AnimatedInterpolation<string \| number> \| WithAnimatedObject<ViewStyle> \| WithAnimatedArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>> \| readonly (Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>)[]> \| null` | No | `-` | - |
 | `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 Used to locate this element in unit and end-to-end tests. Used to locate this view in end-to-end tests. |

package/mcp-docs/mobile/components/Text.txt

@@ -1,5 +1,7 @@
 # Text
 
+**📖 Live documentation:** https://cds.coinbase.com/components/typography/Text/?platform=mobile
+
 A generic text element.
 
 ## Import

package/mcp-docs/mobile/components/TextInput.txt

@@ -1,5 +1,7 @@
 # TextInput
 
+**📖 Live documentation:** https://cds.coinbase.com/components/inputs/TextInput/?platform=mobile
+
 A control for entering text.
 
 ## Import

package/mcp-docs/mobile/components/ThemeProvider.txt

@@ -1,5 +1,7 @@
 # ThemeProvider
 
+**📖 Live documentation:** https://cds.coinbase.com/components/other/ThemeProvider/?platform=mobile
+
 Provides the theme context to all child components.
 
 ## Import

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

@@ -1,5 +1,7 @@
 # Toast
 
+**📖 Live documentation:** https://cds.coinbase.com/components/overlay/Toast/?platform=mobile
+
 A temporary notification that appears at the bottom of the screen.
 
 ## Import

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

@@ -1,5 +1,7 @@
 # Tooltip
 
+**📖 Live documentation:** https://cds.coinbase.com/components/overlay/Tooltip/?platform=mobile
+
 A component that displays additional information on press.
 
 ## Import

package/mcp-docs/mobile/components/TopNavBar.txt

@@ -1,5 +1,7 @@
 # TopNavBar
 
+**📖 Live documentation:** https://cds.coinbase.com/components/navigation/TopNavBar/
+
 A customizable top navigation bar that can contain start, middle, and end content, as well as a bottom section for elements like tabs. It remains sticky at the top of the screen.
 
 ## Import

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

@@ -1,5 +1,7 @@
 # Tour
 
+**📖 Live documentation:** https://cds.coinbase.com/components/navigation/Tour/?platform=mobile
+
 Creates guided tours of a user interface.
 
 ## Import
@@ -487,6 +489,7 @@ function CallbacksExample() {
 | `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. |
 | `hideOverlay` | `boolean` | No | `-` | Hide overlay when tour is active |
+| `styles` | `{ root?: StyleProp<ViewStyle>; mask?: StyleProp<ViewStyle>; stepArrow?: StyleProp<ViewStyle>; stepContainer?: StyleProp<ViewStyle>; }` | No | `-` | Custom styles for individual elements of the Tour component |
 | `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. |
@@ -495,3 +498,13 @@ function CallbacksExample() {
 | `tourStepShift` | `Partial<Partial<{ boundary: any; rootBoundary: RootBoundary; elementContext: ElementContext; altBoundary: boolean; padding: Padding; }> & { mainAxis: boolean; crossAxis: boolean; limiter: { fn: (state: MiddlewareState) => Coords; options?: any; }; }>` | No | `-` | Configures @floating-ui shift options for Tour Step component. See https://floating-ui.com/docs/shift. |
 
 
+## Styles
+
+| Selector | Static class name | Description |
+| --- | --- | --- |
+| `root` | `-` | Root element |
+| `mask` | `-` | The opaque overlay/mask that emphasizes current step |
+| `stepArrow` | `-` | A steps arrow element |
+| `stepContainer` | `-` | A step elements positioned container |
+
+

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

@@ -1,5 +1,7 @@
 # Tray
 
+**📖 Live documentation:** https://cds.coinbase.com/components/overlay/Tray/?platform=mobile
+
 An elevated overlay container.
 
 ## Import

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

@@ -1,5 +1,7 @@
 # UpsellCard
 
+**📖 Live documentation:** https://cds.coinbase.com/components/cards/UpsellCard/?platform=mobile
+
 Upsell Cards are used to promote new features, products, or actions within the app. They are part of the upsell framework and aim to drive user engagement and revenue.
 
 ## Import

package/mcp-docs/mobile/components/VStack.txt

@@ -1,5 +1,7 @@
 # VStack
 
+**📖 Live documentation:** https://cds.coinbase.com/components/layout/VStack/?platform=mobile
+
 A Box with flexDirection="column" set by default.
 
 ## Import

package/mcp-docs/mobile/components/XAxis.txt

@@ -1,5 +1,7 @@
 # XAxis
 
+**📖 Live documentation:** https://cds.coinbase.com/components/charts/XAxis/?platform=mobile
+
 A horizontal axis component for CartesianChart. Displays tick marks, labels, gridlines, and supports custom formatting, positioning, and data domains.
 
 ## Import

package/mcp-docs/mobile/components/YAxis.txt

@@ -1,5 +1,7 @@
 # YAxis
 
+**📖 Live documentation:** https://cds.coinbase.com/components/charts/YAxis/?platform=mobile
+
 A vertical axis component for CartesianChart. Displays tick marks, labels, gridlines, and supports custom formatting, positioning, and data domains.
 
 ## Import

package/mcp-docs/mobile/getting-started/ai-overview.txt

@@ -1,3 +1,5 @@
+**📖 Live documentation:** https://cds.coinbase.com/getting-started/ai-overview/
+
 ---
 id: ai-overview
 title: AI Overview

package/mcp-docs/mobile/getting-started/colors.txt

@@ -0,0 +1,66 @@
+**📖 Live documentation:** https://cds.coinbase.com/getting-started/colors/
+
+---
+id: colors
+title: Colors
+hide_title: true
+---
+
+import { VStack } from '@coinbase/cds-web/layout';
+import { ContentHeader } from '@site/src/components/page/ContentHeader';
+import { MDXSection } from '@site/src/components/page/MDXSection';
+import { MDXArticle } from '@site/src/components/page/MDXArticle';
+import { ColorSchemeProvider } from '@site/src/components/page/ColorSheet/ColorSchemeProvider';
+import { ColorSwatchGrid } from '@site/src/components/page/ColorSheet/ColorSwatchGrid';
+import { SpectrumGrid } from '@site/src/components/page/ColorSheet/SpectrumGrid';
+
+<VStack gap={5}>
+<ContentHeader
+  title="Colors"
+  description="The default CDS theme ships two sets of color values: semantic color tokens (used by components) and the raw color spectrum (the underlying palette)."
+/>
+
+<MDXSection>
+<MDXArticle>
+
+## Color Tokens
+
+Semantic tokens like `bgPrimary` or `fgMuted` automatically adapt to the active color scheme. Use these tokens when styling components so that light and dark mode work without any extra code.
+
+<ColorSchemeProvider>
+  <ColorSwatchGrid />
+</ColorSchemeProvider>
+
+</MDXArticle>
+</MDXSection>
+
+<MDXSection>
+<MDXArticle>
+
+## Color Spectrum
+
+The full color palette available in the default theme, organized by family (rows) and step 0–100 (columns). Hover any swatch to see its name.
+
+<ColorSchemeProvider>
+  <SpectrumGrid />
+</ColorSchemeProvider>
+
+</MDXArticle>
+</MDXSection>
+
+<MDXSection>
+<MDXArticle>
+
+## Accessibility
+
+Every designer and engineer should uphold WCAG AA 2.1 accessibility standards. Using CDS, especially for color, gets you 90% of the way there!
+
+### Key concepts to know
+
+**Text contrast (4.5:1)** — Any text displayed on interfaces should follow a 4.5:1 color contrast between the text color and background.
+
+**Non-text contrast (3:1)** — Any graphical objects such as icons, or any shape that provides understanding like the stroke of a text input, must meet a 3:1 color contrast between the element color and its background.
+
+</MDXArticle>
+</MDXSection>
+</VStack>

package/mcp-docs/mobile/getting-started/installation.txt

@@ -1,5 +1,7 @@
 # installation
 
+**📖 Live documentation:** https://cds.coinbase.com/getting-started/installation/?platform=mobile
+
 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.
 
 ### Installation

package/mcp-docs/mobile/getting-started/introduction.txt

@@ -1,3 +1,5 @@
+**📖 Live documentation:** https://cds.coinbase.com/getting-started/introduction/
+
 ---
 id: introduction
 title: Introduction

package/mcp-docs/mobile/getting-started/playground.txt

@@ -1,3 +1,5 @@
+**📖 Live documentation:** https://cds.coinbase.com/getting-started/playground/
+
 ---
 id: playground
 title: Playground

package/mcp-docs/mobile/getting-started/styling.txt

@@ -1,5 +1,7 @@
 # styling
 
+**📖 Live documentation:** https://cds.coinbase.com/getting-started/styling/?platform=mobile
+
 CDS includes powerful and flexible APIs for styling components. Easily access values from the theme, or go rogue with full customization.
 
 ### `StyleProps` API

package/mcp-docs/mobile/getting-started/templates.txt

@@ -1,5 +1,7 @@
 # templates
 
+**📖 Live documentation:** https://cds.coinbase.com/getting-started/templates/?platform=mobile
+
 Get started quickly with a pre-built Expo template configured with CDS components and best practices.
 
 import { TemplateCard } from '@site/src/components/page/TemplateCard';

package/mcp-docs/mobile/getting-started/theming.txt

@@ -1,5 +1,7 @@
 # theming
 
+**📖 Live documentation:** https://cds.coinbase.com/getting-started/theming/?platform=mobile
+
 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.
 
 import { defaultTheme } from '@coinbase/cds-mobile/themes/defaultTheme';

package/mcp-docs/mobile/guides/v8-migration-guide.txt

@@ -1,3 +1,5 @@
+**📖 Live documentation:** https://cds.coinbase.com/guides/v8-migration-guide/
+
 ---
 id: v8-migration-guide
 title: v8 Migration Guide