@coinbase/cds-mcp-server 8.17.3 → 8.17.4

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

@@ -4,10 +4,69 @@ A card component designed to encourage users to take essential actions.
 
 ## Import
 
-```jsx
+```tsx
 import { NudgeCard } from '@coinbase/cds-web/cards/NudgeCard'
 ```
 
+## Examples
+
+### with Transparent Button
+
+Use if the nudge card's purpose is to provide a gentle reminder or a secondary option. Transparent buttons are less intrusive and blends more seamlessly with the rest of the page.
+
+```jsx live
+function Example() {
+  function NoopFn() {
+    console.log('pressed');
+  }
+  const cards = [
+    {
+      title: 'Earn more crypto',
+      description: 'You’ve got unstaked crypto. Stake it now to earn more.',
+      pictogram: 'key',
+      action: 'Start earning',
+      onActionPress: NoopFn,
+      onDismissPress: NoopFn,
+    },
+  ];
+  return (
+    <HStack minHeight={300} padding={2} alignItems="center" justifyContent="center" gap={2}>
+      {cards.map((card) => (
+        <NudgeCard {...card} />
+      ))}
+    </HStack>
+  );
+}
+```
+
+### Compact
+
+Use when space is limited.
+
+```jsx live
+function Example() {
+  function NoopFn() {
+    console.log('pressed');
+  }
+  const cards = [
+    {
+      title: 'Derivatives Trading',
+      description: 'Derivative Exchange is available for all users',
+      pictogram: 'derivativesNavigation',
+      onActionPress: NoopFn,
+      compact: true,
+    },
+  ];
+  return (
+    <HStack minHeight={300} padding={2} alignItems="center" justifyContent="center" gap={2}>
+      {cards.map((card) => (
+        <NudgeCard {...card} />
+      ))}
+    </HStack>
+  );
+}
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
@@ -100,7 +159,7 @@ import { NudgeCard } from '@coinbase/cds-web/cards/NudgeCard'
 | `paddingTop` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
 | `paddingX` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
 | `paddingY` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
-| `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 | `-` | If you pass a Pictogram name it will render a Pictogram to the right of the text content |
+| `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 | `-` | If you pass a Pictogram name it will render a Pictogram to the right of the text content |
 | `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
 | `position` | `ResponsiveProp<fixed \| static \| relative \| absolute \| sticky>` | No | `-` | - |
 | `ref` | `RefObject<HTMLDivElement> \| ((instance: HTMLDivElement \| null) => void) \| null` | No | `-` | - |
@@ -120,63 +179,3 @@ import { NudgeCard } from '@coinbase/cds-web/cards/NudgeCard'
 | `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
 
 
-## Examples
-
-### with Transparent Button
-
-Use if the nudge card's purpose is to provide a gentle reminder or a secondary option. Transparent buttons are less intrusive and blends more seamlessly with the rest of the page.
-
-```jsx live
-function Example() {
-  function NoopFn() {
-    console.log('pressed');
-  }
-  const cards = [
-    {
-      title: 'Earn more crypto',
-      description: 'You’ve got unstaked crypto. Stake it now to earn more.',
-      pictogram: 'key',
-      action: 'Start earning',
-      onActionPress: NoopFn,
-      onDismissPress: NoopFn,
-    },
-  ];
-  return (
-    <HStack minHeight={300} padding={2} alignItems="center" justifyContent="center" gap={2}>
-      {cards.map((card) => (
-        <NudgeCard {...card} />
-      ))}
-    </HStack>
-  );
-}
-```
-
-### Compact
-
-Use when space is limited.
-
-```jsx live
-function Example() {
-  function NoopFn() {
-    console.log('pressed');
-  }
-  const cards = [
-    {
-      title: 'Derivatives Trading',
-      description: 'Derivative Exchange is available for all users',
-      pictogram: 'derivativesNavigation',
-      onActionPress: NoopFn,
-      compact: true,
-    },
-  ];
-  return (
-    <HStack minHeight={300} padding={2} alignItems="center" justifyContent="center" gap={2}>
-      {cards.map((card) => (
-        <NudgeCard {...card} />
-      ))}
-    </HStack>
-  );
-}
-```
-
-

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

@@ -4,10 +4,66 @@ A semi-transparent layer that covers content.
 
 ## Import
 
-```jsx
+```tsx
 import { Overlay } from '@coinbase/cds-web/overlays/overlay/Overlay'
 ```
 
+## Examples
+
+### Basic usage
+
+```tsx live
+function BasicOverlay() {
+  const [isVisible, setIsVisible] = useState(false);
+
+  return (
+    <VStack gap={4} height={200} position="relative" width="100%">
+      <Button onClick={() => setIsVisible(!isVisible)}>
+        {isVisible ? 'Hide' : 'Show'} Overlay
+      </Button>
+      <Text>Content underneath the overlay</Text>
+      {isVisible && <Overlay onClick={() => setIsVisible(false)} />}
+    </VStack>
+  );
+}
+```
+
+### With Animation
+
+```tsx live
+function AnimatedOverlay() {
+  const [isVisible, setIsVisible] = useState(false);
+
+  return (
+    <VStack gap={4} height={200} position="relative" width="100%">
+      <Button onClick={() => setIsVisible(!isVisible)}>
+        {isVisible ? 'Hide' : 'Show'} Animated Overlay
+      </Button>
+      <Text>Content underneath the overlay</Text>
+      {isVisible && <Overlay animated onClick={() => setIsVisible(false)} />}
+    </VStack>
+  );
+}
+```
+
+### Custom Background
+
+```tsx live
+function CustomOverlay() {
+  const [isVisible, setIsVisible] = useState(false);
+
+  return (
+    <VStack gap={4} height={200} position="relative" width="100%">
+      <Button onClick={() => setIsVisible(!isVisible)}>
+        {isVisible ? 'Hide' : 'Show'} Custom Overlay
+      </Button>
+      <Text>Content underneath the overlay</Text>
+      {isVisible && <Overlay animated background="bgLine" onClick={() => setIsVisible(false)} />}
+    </VStack>
+  );
+}
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
@@ -113,60 +169,3 @@ import { Overlay } from '@coinbase/cds-web/overlays/overlay/Overlay'
 | `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
 
 
-## Examples
-
-### Basic usage
-
-```tsx live
-function BasicOverlay() {
-  const [isVisible, setIsVisible] = useState(false);
-
-  return (
-    <VStack gap={4} height={200} position="relative" width="100%">
-      <Button onClick={() => setIsVisible(!isVisible)}>
-        {isVisible ? 'Hide' : 'Show'} Overlay
-      </Button>
-      <Text>Content underneath the overlay</Text>
-      {isVisible && <Overlay onClick={() => setIsVisible(false)} />}
-    </VStack>
-  );
-}
-```
-
-### With Animation
-
-```tsx live
-function AnimatedOverlay() {
-  const [isVisible, setIsVisible] = useState(false);
-
-  return (
-    <VStack gap={4} height={200} position="relative" width="100%">
-      <Button onClick={() => setIsVisible(!isVisible)}>
-        {isVisible ? 'Hide' : 'Show'} Animated Overlay
-      </Button>
-      <Text>Content underneath the overlay</Text>
-      {isVisible && <Overlay animated onClick={() => setIsVisible(false)} />}
-    </VStack>
-  );
-}
-```
-
-### Custom Background
-
-```tsx live
-function CustomOverlay() {
-  const [isVisible, setIsVisible] = useState(false);
-
-  return (
-    <VStack gap={4} height={200} position="relative" width="100%">
-      <Button onClick={() => setIsVisible(!isVisible)}>
-        {isVisible ? 'Hide' : 'Show'} Custom Overlay
-      </Button>
-      <Text>Content underneath the overlay</Text>
-      {isVisible && <Overlay animated background="bgLine" onClick={() => setIsVisible(false)} />}
-    </VStack>
-  );
-}
-```
-
-

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

@@ -4,10 +4,86 @@ PageFooter is a layout component that provides a consistent footer area for page
 
 ## Import
 
-```jsx
+```tsx
 import { PageFooter } from '@coinbase/cds-web/page/PageFooter'
 ```
 
+## Examples
+
+### Basic usage
+
+```tsx live
+function BasicPageFooter() {
+  return (
+    <PageFooter
+      action={
+        <Button variant="primary" onClick={() => console.log('Clicked')}>
+          Submit
+        </Button>
+      }
+    />
+  );
+}
+```
+
+### Responsive Layout
+
+```tsx live
+function ResponsivePageFooter() {
+  return (
+    <Text color="foregroundMuted" font="caption">
+      Resize window to see button alignment change: centered on mobile, right-aligned on
+      tablet/desktop
+      <PageFooter
+        action={
+          <HStack gap={2}>
+            <Button variant="secondary" onClick={() => console.log('Cancel')}>
+              Cancel
+            </Button>
+            <Button variant="primary" onClick={() => console.log('Submit')}>
+              Submit
+            </Button>
+          </HStack>
+        }
+      />
+    </Text>
+  );
+}
+```
+
+### Custom Layout
+
+```tsx live
+function CustomLayoutFooter() {
+  return (
+    <VStack gap={2}>
+      {/* Override responsive defaults */}
+      <PageFooter
+        action={
+          <Button variant="primary" onClick={() => console.log('Centered')}>
+            Always Centered
+          </Button>
+        }
+        justifyContent="center"
+        paddingX={2}
+      />
+
+      {/* Custom styling */}
+      <PageFooter
+        action={
+          <Button variant="primary" onClick={() => console.log('Custom')}>
+            Custom Height
+          </Button>
+        }
+        backgroundColor="bgSecondary"
+        height={80}
+        paddingY={3}
+      />
+    </VStack>
+  );
+}
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
@@ -106,80 +182,3 @@ import { PageFooter } from '@coinbase/cds-web/page/PageFooter'
 | `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
 
 
-## Examples
-
-### Basic usage
-
-```tsx live
-function BasicPageFooter() {
-  return (
-    <PageFooter
-      action={
-        <Button variant="primary" onClick={() => console.log('Clicked')}>
-          Submit
-        </Button>
-      }
-    />
-  );
-}
-```
-
-### Responsive Layout
-
-```tsx live
-function ResponsivePageFooter() {
-  return (
-    <Text color="foregroundMuted" font="caption">
-      Resize window to see button alignment change: centered on mobile, right-aligned on
-      tablet/desktop
-      <PageFooter
-        action={
-          <HStack gap={2}>
-            <Button variant="secondary" onClick={() => console.log('Cancel')}>
-              Cancel
-            </Button>
-            <Button variant="primary" onClick={() => console.log('Submit')}>
-              Submit
-            </Button>
-          </HStack>
-        }
-      />
-    </Text>
-  );
-}
-```
-
-### Custom Layout
-
-```tsx live
-function CustomLayoutFooter() {
-  return (
-    <VStack gap={2}>
-      {/* Override responsive defaults */}
-      <PageFooter
-        action={
-          <Button variant="primary" onClick={() => console.log('Centered')}>
-            Always Centered
-          </Button>
-        }
-        justifyContent="center"
-        paddingX={2}
-      />
-
-      {/* Custom styling */}
-      <PageFooter
-        action={
-          <Button variant="primary" onClick={() => console.log('Custom')}>
-            Custom Height
-          </Button>
-        }
-        backgroundColor="bgSecondary"
-        height={80}
-        paddingY={3}
-      />
-    </VStack>
-  );
-}
-```
-
-