@coinbase/cds-mcp-server 8.17.3 → 8.17.4

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

@@ -4,22 +4,10 @@ Displays elevated product icons.
 
 ## Import
 
-```jsx
-import { Pictogram } from '@coinbase/cds-web/illustratations/Pictogram'
+```tsx
+import { Pictogram } from '@coinbase/cds-web/illustrations/Pictogram'
 ```
 
-## Props
-
-| Prop | Type | Required | Default | Description |
-| --- | --- | --- | --- | --- |
-| `name` | `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` | Yes | `-` | Name of illustration as defined in Figma |
-| `alt` | `string` | No | `"" will identify the image as decorative` | Alt tag to apply to the img |
-| `dimension` | `48x48 \| 64x64` | No | `-` | HeroSquare Default:  240x240 SpotSquare Default: 96x96 Pictogram Default: 48x48 SpotRectangle Default: 240x120 |
-| `fallback` | `ReactElement<any, string \| JSXElementConstructor<any>> \| null` | No | `null` | Fallback element to render if unable to find an illustration with the matching name |
-| `scaleMultiplier` | `number` | No | `-` | Multiply the width & height while maintaining aspect ratio |
-| `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
 
 ### Basic example
@@ -46,4 +34,15 @@ If `dimension` and `scaleMultiplier` are both provided the component will scale
 <Pictogram name="shield" dimension="48x48" scaleMultiplier={2.5} />
 ```
 
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `name` | `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` | Yes | `-` | Name of illustration as defined in Figma |
+| `alt` | `string` | No | `"" will identify the image as decorative` | Alt tag to apply to the img |
+| `dimension` | `48x48 \| 64x64` | No | `-` | HeroSquare Default:  240x240 SpotSquare Default: 96x96 Pictogram Default: 48x48 SpotRectangle Default: 240x120 |
+| `fallback` | `ReactElement<any, string \| JSXElementConstructor<any>> \| null` | No | `null` | Fallback element to render if unable to find an illustration with the matching name |
+| `scaleMultiplier` | `number` | No | `-` | Multiply the width & height while maintaining aspect ratio |
+| `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/Point.txt

@@ -4,10 +4,178 @@ Visual markers that highlight specific data values on a chart. Points can be cus
 
 ## Import
 
-```jsx
+```tsx
 import { Point } from '@coinbase/cds-web-visualization'
 ```
 
+## Examples
+
+### Basic Example
+
+Points are visual markers that highlight specific data values on a chart. They can be used to emphasize important data points, show discrete values, or provide interactive elements.
+
+```jsx live
+<LineChart
+  enableScrubbing
+  height={{ base: 150, tablet: 200, desktop: 250 }}
+  series={[
+    {
+      id: 'prices',
+      data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+    },
+  ]}
+  curve="monotone"
+  showYAxis
+  showArea
+  yAxis={{
+    showGrid: true,
+  }}
+  renderPoints={() => true}
+>
+  <Scrubber />
+</LineChart>
+```
+
+### Conditional Points
+
+You can conditionally render points to highlight specific values in your data, such as maximum/minimum values or outliers.
+
+```jsx live
+function AssetPriceWithMinMax() {
+  const data = sparklineInteractiveData.hour.map((d) => d.value);
+
+  const minPrice = Math.min(...data);
+  const maxPrice = Math.max(...data);
+
+  const formatPrice = useCallback((price: number) => {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD',
+    }).format(price);
+  }, []);
+
+  return (
+    <LineChart
+      series={[
+        {
+          id: 'btc',
+          data: data,
+          color: assets.btc.color,
+        },
+      ]}
+      showArea
+      areaType="dotted"
+      height={{ base: 150, tablet: 200, desktop: 250 }}
+      style={{ outlineColor: assets.btc.color }}
+      renderPoints={({ dataX, dataY }) => {
+        const isMin = dataY === minPrice;
+        const isMax = dataY === maxPrice;
+
+        if (isMin) {
+          return { label: formatPrice(dataY), labelProps: {  dy: 6, verticalAlignment: 'top' } };
+        }
+
+        if (isMax) {
+          return { label: formatPrice(dataY), labelProps: { dy: -6, verticalAlignment: 'bottom' } };
+        }
+      }}
+    />
+  );
+};
+```
+
+### Interactive Points
+
+Points can be made interactive by adding click handlers, allowing users to explore data in more detail.
+
+```jsx live
+<LineChart
+  height={{ base: 150, tablet: 200, desktop: 250 }}
+  series={[
+    {
+      id: 'sales',
+      data: [120, 132, 101, 134, 90, 230, 210, 120, 180, 190, 210, 176],
+    },
+  ]}
+  curve="monotone"
+  showYAxis
+  showArea
+  yAxis={{
+    showGrid: true,
+    label: 'Sales (units)',
+  }}
+  renderPoints={({ dataX, dataY }) => {
+    const months = [
+      'Jan',
+      'Feb',
+      'Mar',
+      'Apr',
+      'May',
+      'Jun',
+      'Jul',
+      'Aug',
+      'Sep',
+      'Oct',
+      'Nov',
+      'Dec',
+    ];
+    return {
+      radius: 4,
+      onClick: () => alert(`${months[dataX]}: ${dataY} units sold`),
+      accessibilityLabel: `${months[dataX]} sales: ${dataY} units`,
+    };
+  }}
+/>
+```
+
+### Customization
+
+Points support extensive customization through various properties including colors, sizes, animations, and labels.
+
+```jsx live
+<LineChart
+  height={{ base: 150, tablet: 200, desktop: 250 }}
+  series={[
+    {
+      id: 'performance',
+      data: [65, 70, 72, 85, 88, 92, 78, 82, 90, 95, 91, 94],
+    },
+  ]}
+  curve="monotone"
+  showYAxis
+  showArea
+  yAxis={{
+    showGrid: true,
+    label: 'Performance Score',
+  }}
+  renderPoints={({ dataX, dataY }) => {
+    const isHighPerformance = dataY >= 90;
+    const isLowPerformance = dataY < 75;
+
+    return {
+      fill: isHighPerformance
+        ? 'var(--color-bgPositive)'
+        : isLowPerformance
+          ? 'var(--color-bgNegative)'
+          : 'var(--color-fgPrimary)',
+      radius: isHighPerformance ? 6 : 4,
+      strokeWidth: 2,
+      stroke: 'var(--color-bg)',
+      label: isHighPerformance || isLowPerformance ? `${dataY}%` : undefined,
+      labelProps: {
+        verticalAlignment: isHighPerformance ? 'bottom' : 'top',
+        dy: isHighPerformance ? -10 : 10,
+        color: isHighPerformance
+          ? 'var(--color-fgPositive)'
+          : isLowPerformance
+            ? 'var(--color-fgNegative)'
+            : undefined,
+      },
+    };
+  }}
+/>
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
@@ -290,172 +458,3 @@ import { Point } from '@coinbase/cds-web-visualization'
 | `zoomAndPan` | `string` | No | `-` | - |
 
 
-## Examples
-
-### Basic Example
-
-Points are visual markers that highlight specific data values on a chart. They can be used to emphasize important data points, show discrete values, or provide interactive elements.
-
-```jsx live
-<LineChart
-  enableScrubbing
-  height={{ base: 150, tablet: 200, desktop: 250 }}
-  series={[
-    {
-      id: 'prices',
-      data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
-    },
-  ]}
-  curve="monotone"
-  showYAxis
-  showArea
-  yAxis={{
-    showGrid: true,
-  }}
-  renderPoints={() => true}
->
-  <Scrubber />
-</LineChart>
-```
-
-### Conditional Points
-
-You can conditionally render points to highlight specific values in your data, such as maximum/minimum values or outliers.
-
-```jsx live
-function AssetPriceWithMinMax() {
-  const data = sparklineInteractiveData.hour.map((d) => d.value);
-
-  const minPrice = Math.min(...data);
-  const maxPrice = Math.max(...data);
-
-  const formatPrice = useCallback((price: number) => {
-    return new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'USD',
-    }).format(price);
-  }, []);
-
-  return (
-    <LineChart
-      series={[
-        {
-          id: 'btc',
-          data: data,
-          color: assets.btc.color,
-        },
-      ]}
-      showArea
-      areaType="dotted"
-      height={{ base: 150, tablet: 200, desktop: 250 }}
-      style={{ outlineColor: assets.btc.color }}
-      renderPoints={({ dataX, dataY }) => {
-        const isMin = dataY === minPrice;
-        const isMax = dataY === maxPrice;
-
-        if (isMin) {
-          return { label: formatPrice(dataY), labelProps: {  dy: 6, verticalAlignment: 'top' } };
-        }
-
-        if (isMax) {
-          return { label: formatPrice(dataY), labelProps: { dy: -6, verticalAlignment: 'bottom' } };
-        }
-      }}
-    />
-  );
-};
-```
-
-### Interactive Points
-
-Points can be made interactive by adding click handlers, allowing users to explore data in more detail.
-
-```jsx live
-<LineChart
-  height={{ base: 150, tablet: 200, desktop: 250 }}
-  series={[
-    {
-      id: 'sales',
-      data: [120, 132, 101, 134, 90, 230, 210, 120, 180, 190, 210, 176],
-    },
-  ]}
-  curve="monotone"
-  showYAxis
-  showArea
-  yAxis={{
-    showGrid: true,
-    label: 'Sales (units)',
-  }}
-  renderPoints={({ dataX, dataY }) => {
-    const months = [
-      'Jan',
-      'Feb',
-      'Mar',
-      'Apr',
-      'May',
-      'Jun',
-      'Jul',
-      'Aug',
-      'Sep',
-      'Oct',
-      'Nov',
-      'Dec',
-    ];
-    return {
-      radius: 4,
-      onClick: () => alert(`${months[dataX]}: ${dataY} units sold`),
-      accessibilityLabel: `${months[dataX]} sales: ${dataY} units`,
-    };
-  }}
-/>
-```
-
-### Customization
-
-Points support extensive customization through various properties including colors, sizes, animations, and labels.
-
-```jsx live
-<LineChart
-  height={{ base: 150, tablet: 200, desktop: 250 }}
-  series={[
-    {
-      id: 'performance',
-      data: [65, 70, 72, 85, 88, 92, 78, 82, 90, 95, 91, 94],
-    },
-  ]}
-  curve="monotone"
-  showYAxis
-  showArea
-  yAxis={{
-    showGrid: true,
-    label: 'Performance Score',
-  }}
-  renderPoints={({ dataX, dataY }) => {
-    const isHighPerformance = dataY >= 90;
-    const isLowPerformance = dataY < 75;
-
-    return {
-      fill: isHighPerformance
-        ? 'var(--color-bgPositive)'
-        : isLowPerformance
-          ? 'var(--color-bgNegative)'
-          : 'var(--color-fgPrimary)',
-      radius: isHighPerformance ? 6 : 4,
-      strokeWidth: 2,
-      stroke: 'var(--color-bg)',
-      label: isHighPerformance || isLowPerformance ? `${dataY}%` : undefined,
-      labelProps: {
-        verticalAlignment: isHighPerformance ? 'bottom' : 'top',
-        dy: isHighPerformance ? -10 : 10,
-        color: isHighPerformance
-          ? 'var(--color-fgPositive)'
-          : isLowPerformance
-            ? 'var(--color-fgNegative)'
-            : undefined,
-      },
-    };
-  }}
-/>
-```
-
-

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

@@ -4,16 +4,10 @@ A component that manages the rendering of portals for overlay components.
 
 ## Import
 
-```jsx
+```tsx
 import { PortalProvider } from '@coinbase/cds-web/overlays/PortalProvider'
 ```
 
-## Props
-
-| Prop | Type | Required | Default | Description |
-| --- | --- | --- | --- | --- |
-
-
 ## Examples
 
 ### Basic usage
@@ -74,4 +68,9 @@ function Example() {
 }
 ```
 
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+
 

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

@@ -4,10 +4,82 @@ Extends the Interactable component to add accessibility support for press intera
 
 ## Import
 
-```jsx
+```tsx
 import { Pressable } from '@coinbase/cds-web/system/Pressable'
 ```
 
+## Examples
+
+### Basic Pressable
+
+Pressables support an `onClick` prop for handling click/press interactions. When being pressed, the element will scale down to mimic a real-world button press. If this functionality is not desired, pass the `noScaleOnPress` prop.
+
+```jsx live
+<Pressable
+  onClick={console.log}
+  as="button"
+  background="bgAlternate"
+  borderColor="lineHeavy"
+  borderWidth={100}
+  borderRadius={300}
+>
+  <Box as="span" padding={2}>
+    <Text font="headline" as="span">
+      Click me...
+    </Text>
+  </Box>
+</Pressable>
+```
+
+### Pressable with Transparent Background
+
+```jsx live
+<Pressable
+  onClick={console.log}
+  as="button"
+  background="transparent"
+  borderColor="lineHeavy"
+  borderWidth={100}
+  borderRadius={300}
+>
+  <Box as="span" padding={2}>
+    <Text font="headline" as="span">
+      Click me...
+    </Text>
+  </Box>
+</Pressable>
+```
+
+### Block Pressable
+
+Pressables expand to 100% width when the `block` prop is passed.
+
+```jsx live
+<Pressable
+  block
+  as="button"
+  onClick={console.log}
+  background="bgAlternate"
+  borderColor="lineHeavy"
+  borderWidth={100}
+  borderRadius={300}
+>
+  <Box as="span" padding={2}>
+    <Text font="headline" as="span">
+      Click me...
+    </Text>
+  </Box>
+</Pressable>
+```
+
+### A11y
+
+On mobile, all [AccessibilityProps](https://reactnative.dev/docs/accessibility#accessibility-properties) can be passed, with `accessibilityComponentType` and `accessibilityTraits` defaulting to `button`, and `accessibilityState` being set based on loading/disabled props.
+
+On web, all [ARIA attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) can be passed, with `aria-busy` being set based on loading/disabled props.
+
+> The `as` prop allows any component to be used, but be sure you are using semantically correct elements! For example, no clickable divs.
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
@@ -119,76 +191,3 @@ import { Pressable } from '@coinbase/cds-web/system/Pressable'
 | `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
 
 
-## Examples
-
-### Basic Pressable
-
-Pressables support an `onClick` prop for handling click/press interactions. When being pressed, the element will scale down to mimic a real-world button press. If this functionality is not desired, pass the `noScaleOnPress` prop.
-
-```jsx live
-<Pressable
-  onClick={console.log}
-  as="button"
-  background="bgAlternate"
-  borderColor="lineHeavy"
-  borderWidth={100}
-  borderRadius={300}
->
-  <Box as="span" padding={2}>
-    <Text font="headline" as="span">
-      Click me...
-    </Text>
-  </Box>
-</Pressable>
-```
-
-### Pressable with Transparent Background
-
-```jsx live
-<Pressable
-  onClick={console.log}
-  as="button"
-  background="transparent"
-  borderColor="lineHeavy"
-  borderWidth={100}
-  borderRadius={300}
->
-  <Box as="span" padding={2}>
-    <Text font="headline" as="span">
-      Click me...
-    </Text>
-  </Box>
-</Pressable>
-```
-
-### Block Pressable
-
-Pressables expand to 100% width when the `block` prop is passed.
-
-```jsx live
-<Pressable
-  block
-  as="button"
-  onClick={console.log}
-  background="bgAlternate"
-  borderColor="lineHeavy"
-  borderWidth={100}
-  borderRadius={300}
->
-  <Box as="span" padding={2}>
-    <Text font="headline" as="span">
-      Click me...
-    </Text>
-  </Box>
-</Pressable>
-```
-
-### A11y
-
-On mobile, all [AccessibilityProps](https://reactnative.dev/docs/accessibility#accessibility-properties) can be passed, with `accessibilityComponentType` and `accessibilityTraits` defaulting to `button`, and `accessibilityState` being set based on loading/disabled props.
-
-On web, all [ARIA attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) can be passed, with `aria-busy` being set based on loading/disabled props.
-
-> The `as` prop allows any component to be used, but be sure you are using semantically correct elements! For example, no clickable divs.
-
-

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

@@ -4,30 +4,10 @@ A visual indicator of completion progress.
 
 ## Import
 
-```jsx
+```tsx
 import { ProgressBar } from '@coinbase/cds-web/visualizations/ProgressBar'
 ```
 
-## Props
-
-| Prop | Type | Required | Default | Description |
-| --- | --- | --- | --- | --- |
-| `progress` | `number` | Yes | `-` | Number between 0-1 representing the progress percentage |
-| `className` | `string` | No | `-` | Custom class name for the progress bar root. |
-| `classNames` | `{ root?: string; progress?: string \| undefined; } \| undefined` | No | `-` | Custom class names for the progress bar. |
-| `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `primary` | Custom progress color. |
-| `disableAnimateOnMount` | `boolean` | No | `false` | Disable animation on component mount |
-| `disabled` | `boolean` | No | `false` | Toggle used to show a disabled progress visualization |
-| `key` | `Key \| null` | No | `-` | - |
-| `onAnimationEnd` | `(() => void)` | No | `-` | Callback fired when the progress animation ends. |
-| `onAnimationStart` | `(() => void)` | No | `-` | Callback fired when the progress animation starts. |
-| `ref` | `RefObject<HTMLDivElement> \| ((instance: HTMLDivElement \| null) => void) \| null` | No | `-` | - |
-| `style` | `CSSProperties` | No | `-` | Custom styles for the progress bar root. |
-| `styles` | `{ root?: CSSProperties; progress?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for the progress bar. |
-| `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 |
-| `weight` | `normal \| heavy \| thin \| semiheavy` | No | `normal` | Toggle used to change thickness of progress visualization |
-
-
 ## Examples
 
 #### Default
@@ -161,4 +141,23 @@ function Example() {
 }
 ```
 
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `progress` | `number` | Yes | `-` | Number between 0-1 representing the progress percentage |
+| `className` | `string` | No | `-` | Custom class name for the progress bar root. |
+| `classNames` | `{ root?: string; progress?: string \| undefined; } \| undefined` | No | `-` | Custom class names for the progress bar. |
+| `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `primary` | Custom progress color. |
+| `disableAnimateOnMount` | `boolean` | No | `false` | Disable animation on component mount |
+| `disabled` | `boolean` | No | `false` | Toggle used to show a disabled progress visualization |
+| `key` | `Key \| null` | No | `-` | - |
+| `onAnimationEnd` | `(() => void)` | No | `-` | Callback fired when the progress animation ends. |
+| `onAnimationStart` | `(() => void)` | No | `-` | Callback fired when the progress animation starts. |
+| `ref` | `RefObject<HTMLDivElement> \| ((instance: HTMLDivElement \| null) => void) \| null` | No | `-` | - |
+| `style` | `CSSProperties` | No | `-` | Custom styles for the progress bar root. |
+| `styles` | `{ root?: CSSProperties; progress?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for the progress bar. |
+| `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 |
+| `weight` | `normal \| heavy \| thin \| semiheavy` | No | `normal` | Toggle used to change thickness of progress visualization |
+