@coinbase/cds-mcp-server 8.17.3 → 8.17.4

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

@@ -4,10 +4,74 @@ A generic container, like a supercharged div.
 
 ## Import
 
-```jsx
+```tsx
 import { Box } from '@coinbase/cds-web/layout/Box'
 ```
 
+## Examples
+
+:::tip
+By default, Box has [flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) enabled (`display: flex`), but you can use a Box for any kind of layout via the `display` prop.
+:::
+
+If you want to lay your content out in columns you should reach for [HStack](/components/layout/HStack) (a specialized Box that also allows for gaps between children). When you want to compose more complex layouts with columns of equal size or custom configurations you should use [Grid](/components/layout/Grid) (which leverages [CSS grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)). If you want to lay out content in a single column, you should use [VStack](/components/layout/VStack).
+
+```jsx live
+<Box bordered borderRadius="400" background="bgAlternate" paddingX={3} paddingY={2}>
+  Any kind of content can go here!
+</Box>
+```
+
+### A11y
+
+**Web only** By default the box is not accessibility aware as it renders a standard `div`. We highly encourage the use of semantic elements so that screen readers can easily infer intent. This can be achieved through the `as` and `role` props.
+
+```jsx
+<Box as="aside" role="complementary">
+  <SideBar />
+</Box>
+```
+
+### Responsive Styles
+
+**Web only** You can create responsive layouts by passing a configuration object to each supported property of box and specify unique styles for phones, tablets, or desktops.
+
+Please note, there are no default responsive styles for Box. This is an additive feature that you will need to configure yourself.
+
+#### Supported Properties
+
+- Padding
+- Margin
+- Gap
+- Flex styles (justify content, align content, align items, align self, flex direction, and flex wrap)
+- Display
+- Visibility
+
+#### Usage
+
+```jsx live
+function ResponsiveBox() {
+  return (
+    <Box
+      padding={{ base: 4, tablet: 3, desktop: 2 }}
+      gap={{ base: 0.5, tablet: 2, desktop: 3 }}
+      justifyContent={{ base: 'flex-end', tablet: 'flex-start', desktop: 'center' }}
+      alignItems={{ base: 'flex-end', tablet: 'flex-start', desktop: 'center' }}
+    >
+      <HStack padding={1}>
+        <Text as="p">First</Text>
+      </HStack>
+      <HStack background="bgAlternate" padding={1}>
+        <Text as="p">Second</Text>
+      </HStack>
+      <HStack background="bgOverlay" padding={1}>
+        <Text as="p">Third</Text>
+      </HStack>
+    </Box>
+  );
+}
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
@@ -109,68 +173,3 @@ import { Box } from '@coinbase/cds-web/layout/Box'
 | `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
 
 
-## Examples
-
-:::tip
-By default, Box has [flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) enabled (`display: flex`), but you can use a Box for any kind of layout via the `display` prop.
-:::
-
-If you want to lay your content out in columns you should reach for [HStack](/components/layout/HStack) (a specialized Box that also allows for gaps between children). When you want to compose more complex layouts with columns of equal size or custom configurations you should use [Grid](/components/layout/Grid) (which leverages [CSS grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)). If you want to lay out content in a single column, you should use [VStack](/components/layout/VStack).
-
-```jsx live
-<Box bordered borderRadius="400" background="bgAlternate" paddingX={3} paddingY={2}>
-  Any kind of content can go here!
-</Box>
-```
-
-### A11y
-
-**Web only** By default the box is not accessibility aware as it renders a standard `div`. We highly encourage the use of semantic elements so that screen readers can easily infer intent. This can be achieved through the `as` and `role` props.
-
-```jsx
-<Box as="aside" role="complementary">
-  <SideBar />
-</Box>
-```
-
-### Responsive Styles
-
-**Web only** You can create responsive layouts by passing a configuration object to each supported property of box and specify unique styles for phones, tablets, or desktops.
-
-Please note, there are no default responsive styles for Box. This is an additive feature that you will need to configure yourself.
-
-#### Supported Properties
-
-- Padding
-- Margin
-- Gap
-- Flex styles (justify content, align content, align items, align self, flex direction, and flex wrap)
-- Display
-- Visibility
-
-#### Usage
-
-```jsx live
-function ResponsiveBox() {
-  return (
-    <Box
-      padding={{ base: 4, tablet: 3, desktop: 2 }}
-      gap={{ base: 0.5, tablet: 2, desktop: 3 }}
-      justifyContent={{ base: 'flex-end', tablet: 'flex-start', desktop: 'center' }}
-      alignItems={{ base: 'flex-end', tablet: 'flex-start', desktop: 'center' }}
-    >
-      <HStack padding={1}>
-        <Text as="p">First</Text>
-      </HStack>
-      <HStack background="bgAlternate" padding={1}>
-        <Text as="p">Second</Text>
-      </HStack>
-      <HStack background="bgOverlay" padding={1}>
-        <Text as="p">Third</Text>
-      </HStack>
-    </Box>
-  );
-}
-```
-
-

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

@@ -4,10 +4,88 @@ A pressable button element.
 
 ## Import
 
-```jsx
+```tsx
 import { Button } from '@coinbase/cds-web/buttons/Button'
 ```
 
+## Examples
+
+### Primary Button
+
+Use primary buttons for high emphasis actions. These buttons have the most visual impact and should be reserved for the most important, final actions that complete a flow, like Save, Join now, or Confirm. Try to use one per screen. Multiple primary buttons make it confusing for the user to understand what action they should take.
+
+```jsx live
+<Button onClick={console.log} variant="primary">
+  Primary
+</Button>
+```
+
+### Secondary Button
+
+These buttons have a medium level of emphasis that should be used for non-critical actions. Secondary buttons can be used on pages without restrictions and works well for multiple actions of equal weight. They can be used in conjunction with a Primary Button or independently.
+
+```jsx live
+<Button onClick={console.log} variant="secondary">
+  Secondary
+</Button>
+```
+
+### Tertiary Button
+
+These buttons provide high contrast with the background through the use of the themable inverted background color.
+
+```jsx live
+<Button onClick={console.log} variant="tertiary">
+  Tertiary
+</Button>
+```
+
+### Negative Button
+
+Negative buttons should be used sparingly for destructive actions that will result in data loss, can’t be undone, or will have significant consequences. They commonly appear in confirmation dialogs as the final confirmation before deleting.
+
+```jsx live
+<Button onClick={console.log} variant="negative">
+  Negative
+</Button>
+```
+
+### Transparent Button
+
+Transparent buttons are used for less important actions that are supplementary. These buttons have lower prominence since its container is not visible until the button is interacted with. Transparent buttons are frequently used on Cards and can be placed on a variety of backgrounds.
+
+```jsx live
+<HStack gap={2}>
+  <Button onClick={console.log} transparent>
+    Primary
+  </Button>
+  <Button onClick={console.log} variant="secondary" transparent>
+    Secondary
+  </Button>
+  <Button onClick={console.log} variant="tertiary" transparent>
+    Secondary
+  </Button>
+  <Button onClick={console.log} variant="negative" transparent>
+    Negative
+  </Button>
+</HStack>
+```
+
+### Buttons with end icon
+
+You can add an icon after the label of a button.
+
+```jsx live
+<HStack gap={2}>
+  <Button onClick={console.log} endIcon="add" endIconActive variant="secondary" compact>
+    Select file
+  </Button>
+  <Button onClick={console.log} endIcon="forwardArrow" variant="secondary" compact>
+    See more
+  </Button>
+</HStack>
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
@@ -49,7 +127,7 @@ import { Button } from '@coinbase/cds-web/buttons/Button'
 | `display` | `ResponsiveProp<grid \| revert \| none \| block \| inline \| inline-block \| flex \| inline-flex \| inline-grid \| contents \| flow-root \| list-item>` | No | `-` | - |
 | `elevation` | `0 \| 1 \| 2` | No | `-` | - |
 | `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 \| warning \| error \| account \| activity \| add \| addPeople \| advancedMarketSelector \| advancedTradeProduct \| affiliates \| airdrop \| allTimeHigh \| allocation \| annotation \| api \| apiPlug \| appSwitcher \| appleLogo \| application \| arrowDown \| arrowLeft \| arrowRight \| arrowUp \| arrowsHorizontal \| arrowsVertical \| artwork \| assetHubProduct \| assetManagementProduct \| astronautHelmet \| avatar \| average \| backArrow \| bank \| barChartWindow \| base \| baseApps \| baseFeed \| baseNotification \| baseSquare \| baseTransact \| baseVerification \| baseWallet \| beaker \| beginningArrow \| bell \| bellCheck \| bellPlus \| block \| blockchain \| blog \| book \| bookmark \| borrowProduct \| bridging \| briefcase \| browser \| calculator \| calendar \| calendarEmpty \| 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 \| circleCheckmark \| circleCross \| circulatingSupply \| clipboard \| clock \| clockOutline \| close \| closeCaption \| clothing \| cloud \| cloudProduct \| cluster \| coinbase \| coinbaseCardProduct \| coinbaseOne \| coinbaseOneCard \| coinbaseOneLogo \| coinbaseRewards \| collapse \| collectibles \| collection \| comment \| commentPlus \| commerceProduct \| compass \| complianceProduct \| compose \| concierge \| conciergeBell \| config \| convert \| copy \| creatorCoin \| cross \| crossTrade \| crypto \| cryptobasics \| crystalBall \| 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 \| document \| documentation \| dot \| doubleChevronRight \| downArrow \| download \| drag \| drops \| earn \| earnProduct \| earnRewards \| email \| endArrow \| ethereum \| eventContracts \| exchangeProduct \| exclamationMark \| expand \| expandAddress \| expandAll \| externalLink \| eye \| faceScan \| faces \| faucet \| fib \| fingerprint \| flame \| folder \| folderArrow \| folderOpen \| followAdd \| following \| fork \| forwardArrow \| fscsProtection \| gab \| games \| gasFees \| gauge \| gaugeEmpty \| gaugeHigh \| gaugeHighLow \| gaugeHighMid \| gaugeLow \| gaugeLowHigh \| gaugeLowMid \| gaugeMedium \| gavel \| gear \| generalCharacter \| ghost \| gif \| giftBox \| giftCard \| gitHubLogo \| globe \| googleLogo \| grid \| group \| hamburger \| hammer \| heart \| helpCenterProduct \| helpCenterQuestionMark \| hiddenEye \| home \| horizontalLine \| ideal \| identityCard \| image \| info \| initiator \| instagramLogo \| instantUnstakingClock \| institute \| institutionalProduct \| interest \| invisible \| invoice \| keyboard \| laptop \| leadChart \| leadCoin \| learningRewardsProduct \| light \| lightbulb \| lightningBolt \| lineChartCrypto \| list \| location \| lock \| login \| logout \| magnifyingGlass \| marketCap \| megaphone \| menu \| metaverse \| microphone \| mint \| minus \| moon \| more \| moreVertical \| music \| newsFeed \| newsletter \| nft \| nftBuy \| nftOffer \| nftProduct \| nftSale \| noRocket \| noWifi \| nodeProduct \| options \| orderBook \| orderHistory \| outline \| pFPS \| paperAirplane \| paperclip \| participate \| participateProduct \| passKey \| passport \| pause \| pay \| payProduct \| paymentCard \| payments \| payouts \| paypal \| pencil \| peopleGroup \| peopleStar \| percentage \| perpetualSwap \| phone \| plane \| planet \| play \| plusMinus \| powerTool \| priceAlerts \| priceAlertsCheck \| primePoduct \| privateClientProduct \| proProduct \| profile \| protection \| pulse \| pyramid \| qrCode \| qrCodeAlt \| queryTransact \| questionMark \| reCenter \| rectangle \| recurring \| refresh \| regulated \| regulatedFutures \| report \| rewardsProduct \| rocket \| rocketShip \| rollingSpot \| rosettaProduct \| royalty \| safe \| save \| savingsBank \| scanQrCode \| securityKey \| securityShield \| seen \| sendReceive \| setPinCode \| settings \| share \| shield \| shieldOutline \| shoppingCart \| signinProduct \| smartContract \| socialChat \| socialReshare \| socialShare \| sofort \| sortDoubleArrow \| sortDown \| sortDownCenter \| sortUp \| sortUpCenter \| soundOff \| soundOn \| sparkle \| speaker \| staggeredList \| stake \| staking \| star \| statusDot \| step0 \| step1 \| step2 \| step3 \| step4 \| step5 \| step6 \| step7 \| step8 \| step9 \| sun \| support \| tag \| taxes \| taxesReceipt \| telephone \| thumbsDown \| thumbsDownOutline \| thumbsUp \| thumbsUpOutline \| trading \| transactions \| trashCan \| trophy \| trophyCup \| twitterLogo \| ultility \| undo \| unknown \| unlock \| upArrow \| upload \| venturesProduct \| verifiedBadge \| verifiedPools \| verticalLine \| waasProduct \| wallet \| walletLogo \| walletProduct \| wellness \| wifi \| wireTransfer \| withdraw \| wrapToken \| xLogo` | No | `-` | Icon to render at the end of the button. |
+| `endIcon` | `key \| search \| pin \| filter \| visible \| continuous \| auto \| warning \| error \| account \| activity \| add \| addPeople \| advancedMarketSelector \| advancedTradeProduct \| affiliates \| airdrop \| allTimeHigh \| allocation \| annotation \| api \| apiPlug \| appSwitcher \| appleLogo \| application \| arrowDown \| arrowLeft \| arrowRight \| arrowUp \| arrowsHorizontal \| arrowsVertical \| artwork \| assetHubProduct \| assetManagementProduct \| astronautHelmet \| avatar \| average \| backArrow \| bank \| barChartWindow \| base \| baseApps \| baseFeed \| baseNotification \| baseSquare \| baseTransact \| baseVerification \| baseWallet \| beaker \| beginningArrow \| bell \| bellCheck \| bellPlus \| block \| blockchain \| blog \| book \| bookmark \| borrowProduct \| bridging \| briefcase \| browser \| calculator \| calendar \| calendarEmpty \| 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 \| circleCheckmark \| circleCross \| circulatingSupply \| clipboard \| clock \| clockOutline \| close \| closeCaption \| clothing \| cloud \| cloudProduct \| cluster \| coinbase \| coinbaseCardProduct \| coinbaseOne \| coinbaseOneCard \| coinbaseOneLogo \| coinbaseRewards \| collapse \| collectibles \| collection \| comment \| commentPlus \| commerceProduct \| compass \| complianceProduct \| compose \| concierge \| conciergeBell \| config \| convert \| copy \| creatorCoin \| cross \| crossTrade \| crypto \| cryptobasics \| crystalBall \| 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 \| document \| documentation \| dot \| doubleChevronRight \| downArrow \| download \| drag \| drops \| earn \| earnProduct \| earnRewards \| email \| endArrow \| ethereum \| eventContracts \| exchangeProduct \| exclamationMark \| expand \| expandAddress \| expandAll \| externalLink \| eye \| faceScan \| faces \| faucet \| fib \| fingerprint \| flame \| folder \| folderArrow \| folderOpen \| followAdd \| following \| fork \| forwardArrow \| fscsProtection \| gab \| games \| gasFees \| gauge \| gaugeEmpty \| gaugeHigh \| gaugeHighLow \| gaugeHighMid \| gaugeLow \| gaugeLowHigh \| gaugeLowMid \| gaugeMedium \| gavel \| gear \| generalCharacter \| ghost \| gif \| giftBox \| giftCard \| gitHubLogo \| globe \| googleLogo \| grid \| group \| hamburger \| hammer \| heart \| helpCenterProduct \| helpCenterQuestionMark \| hiddenEye \| home \| horizontalLine \| ideal \| identityCard \| image \| info \| initiator \| instagramLogo \| instantUnstakingClock \| institute \| institutionalProduct \| interest \| invisible \| invoice \| keyboard \| laptop \| leadChart \| leadCoin \| learningRewardsProduct \| light \| lightbulb \| lightningBolt \| lineChartCrypto \| list \| location \| lock \| login \| logout \| magnifyingGlass \| marketCap \| megaphone \| menu \| metaverse \| microphone \| mint \| minus \| moon \| more \| moreVertical \| music \| newsFeed \| newsletter \| nft \| nftBuy \| nftOffer \| nftProduct \| nftSale \| noRocket \| noWifi \| nodeProduct \| options \| orderBook \| orderHistory \| outline \| pFPS \| paperAirplane \| paperclip \| participate \| participateProduct \| passKey \| passport \| pause \| pay \| payProduct \| paymentCard \| payments \| payouts \| paypal \| pencil \| peopleGroup \| peopleStar \| percentage \| perpetualSwap \| phone \| plane \| planet \| play \| plusMinus \| powerTool \| priceAlerts \| priceAlertsCheck \| primePoduct \| privateClientProduct \| proProduct \| profile \| protection \| pulse \| pyramid \| qrCode \| qrCodeAlt \| queryTransact \| questionMark \| reCenter \| rectangle \| recurring \| refresh \| regulated \| regulatedFutures \| report \| rewardsProduct \| rocket \| rocketShip \| rollingSpot \| rosettaProduct \| royalty \| safe \| save \| savingsBank \| scanQrCode \| securityKey \| securityShield \| seen \| sendReceive \| setPinCode \| settings \| share \| shield \| shieldOutline \| shoppingCart \| signinProduct \| smartContract \| socialChat \| socialReshare \| socialShare \| sofort \| sortDoubleArrow \| sortDown \| sortDownCenter \| sortUp \| sortUpCenter \| soundOff \| soundOn \| sparkle \| speaker \| staggeredList \| stake \| staking \| star \| statusDot \| step0 \| step1 \| step2 \| step3 \| step4 \| step5 \| step6 \| step7 \| step8 \| step9 \| sun \| support \| tag \| taxes \| taxesReceipt \| telephone \| thumbsDown \| thumbsDownOutline \| thumbsUp \| thumbsUpOutline \| tokenSales \| trading \| transactions \| trashCan \| trophy \| trophyCup \| twitterLogo \| ultility \| undo \| unfollowPeople \| unknown \| unlock \| upArrow \| upload \| venturesProduct \| verifiedBadge \| verifiedPools \| verticalLine \| waasProduct \| wallet \| walletLogo \| walletProduct \| wellness \| wifi \| wireTransfer \| withdraw \| wrapToken \| xLogo` | No | `-` | Icon to render at the end of the button. |
 | `endIconActive` | `boolean` | No | `-` | Whether the end icon is active |
 | `flexBasis` | `ResponsiveProp<FlexBasis<string \| number>>` | No | `-` | - |
 | `flexDirection` | `ResponsiveProp<column \| row \| row-reverse \| column-reverse>` | No | `-` | - |
@@ -113,7 +191,7 @@ import { Button } from '@coinbase/cds-web/buttons/Button'
 | `right` | `ResponsiveProp<Right<string \| number>>` | No | `-` | - |
 | `rowGap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | 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 \| warning \| error \| account \| activity \| add \| addPeople \| advancedMarketSelector \| advancedTradeProduct \| affiliates \| airdrop \| allTimeHigh \| allocation \| annotation \| api \| apiPlug \| appSwitcher \| appleLogo \| application \| arrowDown \| arrowLeft \| arrowRight \| arrowUp \| arrowsHorizontal \| arrowsVertical \| artwork \| assetHubProduct \| assetManagementProduct \| astronautHelmet \| avatar \| average \| backArrow \| bank \| barChartWindow \| base \| baseApps \| baseFeed \| baseNotification \| baseSquare \| baseTransact \| baseVerification \| baseWallet \| beaker \| beginningArrow \| bell \| bellCheck \| bellPlus \| block \| blockchain \| blog \| book \| bookmark \| borrowProduct \| bridging \| briefcase \| browser \| calculator \| calendar \| calendarEmpty \| 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 \| circleCheckmark \| circleCross \| circulatingSupply \| clipboard \| clock \| clockOutline \| close \| closeCaption \| clothing \| cloud \| cloudProduct \| cluster \| coinbase \| coinbaseCardProduct \| coinbaseOne \| coinbaseOneCard \| coinbaseOneLogo \| coinbaseRewards \| collapse \| collectibles \| collection \| comment \| commentPlus \| commerceProduct \| compass \| complianceProduct \| compose \| concierge \| conciergeBell \| config \| convert \| copy \| creatorCoin \| cross \| crossTrade \| crypto \| cryptobasics \| crystalBall \| 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 \| document \| documentation \| dot \| doubleChevronRight \| downArrow \| download \| drag \| drops \| earn \| earnProduct \| earnRewards \| email \| endArrow \| ethereum \| eventContracts \| exchangeProduct \| exclamationMark \| expand \| expandAddress \| expandAll \| externalLink \| eye \| faceScan \| faces \| faucet \| fib \| fingerprint \| flame \| folder \| folderArrow \| folderOpen \| followAdd \| following \| fork \| forwardArrow \| fscsProtection \| gab \| games \| gasFees \| gauge \| gaugeEmpty \| gaugeHigh \| gaugeHighLow \| gaugeHighMid \| gaugeLow \| gaugeLowHigh \| gaugeLowMid \| gaugeMedium \| gavel \| gear \| generalCharacter \| ghost \| gif \| giftBox \| giftCard \| gitHubLogo \| globe \| googleLogo \| grid \| group \| hamburger \| hammer \| heart \| helpCenterProduct \| helpCenterQuestionMark \| hiddenEye \| home \| horizontalLine \| ideal \| identityCard \| image \| info \| initiator \| instagramLogo \| instantUnstakingClock \| institute \| institutionalProduct \| interest \| invisible \| invoice \| keyboard \| laptop \| leadChart \| leadCoin \| learningRewardsProduct \| light \| lightbulb \| lightningBolt \| lineChartCrypto \| list \| location \| lock \| login \| logout \| magnifyingGlass \| marketCap \| megaphone \| menu \| metaverse \| microphone \| mint \| minus \| moon \| more \| moreVertical \| music \| newsFeed \| newsletter \| nft \| nftBuy \| nftOffer \| nftProduct \| nftSale \| noRocket \| noWifi \| nodeProduct \| options \| orderBook \| orderHistory \| outline \| pFPS \| paperAirplane \| paperclip \| participate \| participateProduct \| passKey \| passport \| pause \| pay \| payProduct \| paymentCard \| payments \| payouts \| paypal \| pencil \| peopleGroup \| peopleStar \| percentage \| perpetualSwap \| phone \| plane \| planet \| play \| plusMinus \| powerTool \| priceAlerts \| priceAlertsCheck \| primePoduct \| privateClientProduct \| proProduct \| profile \| protection \| pulse \| pyramid \| qrCode \| qrCodeAlt \| queryTransact \| questionMark \| reCenter \| rectangle \| recurring \| refresh \| regulated \| regulatedFutures \| report \| rewardsProduct \| rocket \| rocketShip \| rollingSpot \| rosettaProduct \| royalty \| safe \| save \| savingsBank \| scanQrCode \| securityKey \| securityShield \| seen \| sendReceive \| setPinCode \| settings \| share \| shield \| shieldOutline \| shoppingCart \| signinProduct \| smartContract \| socialChat \| socialReshare \| socialShare \| sofort \| sortDoubleArrow \| sortDown \| sortDownCenter \| sortUp \| sortUpCenter \| soundOff \| soundOn \| sparkle \| speaker \| staggeredList \| stake \| staking \| star \| statusDot \| step0 \| step1 \| step2 \| step3 \| step4 \| step5 \| step6 \| step7 \| step8 \| step9 \| sun \| support \| tag \| taxes \| taxesReceipt \| telephone \| thumbsDown \| thumbsDownOutline \| thumbsUp \| thumbsUpOutline \| trading \| transactions \| trashCan \| trophy \| trophyCup \| twitterLogo \| ultility \| undo \| unknown \| unlock \| upArrow \| upload \| venturesProduct \| verifiedBadge \| verifiedPools \| verticalLine \| waasProduct \| wallet \| walletLogo \| walletProduct \| wellness \| wifi \| wireTransfer \| withdraw \| wrapToken \| xLogo` | No | `-` | Icon to render at the start of the button. |
+| `startIcon` | `key \| search \| pin \| filter \| visible \| continuous \| auto \| warning \| error \| account \| activity \| add \| addPeople \| advancedMarketSelector \| advancedTradeProduct \| affiliates \| airdrop \| allTimeHigh \| allocation \| annotation \| api \| apiPlug \| appSwitcher \| appleLogo \| application \| arrowDown \| arrowLeft \| arrowRight \| arrowUp \| arrowsHorizontal \| arrowsVertical \| artwork \| assetHubProduct \| assetManagementProduct \| astronautHelmet \| avatar \| average \| backArrow \| bank \| barChartWindow \| base \| baseApps \| baseFeed \| baseNotification \| baseSquare \| baseTransact \| baseVerification \| baseWallet \| beaker \| beginningArrow \| bell \| bellCheck \| bellPlus \| block \| blockchain \| blog \| book \| bookmark \| borrowProduct \| bridging \| briefcase \| browser \| calculator \| calendar \| calendarEmpty \| 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 \| circleCheckmark \| circleCross \| circulatingSupply \| clipboard \| clock \| clockOutline \| close \| closeCaption \| clothing \| cloud \| cloudProduct \| cluster \| coinbase \| coinbaseCardProduct \| coinbaseOne \| coinbaseOneCard \| coinbaseOneLogo \| coinbaseRewards \| collapse \| collectibles \| collection \| comment \| commentPlus \| commerceProduct \| compass \| complianceProduct \| compose \| concierge \| conciergeBell \| config \| convert \| copy \| creatorCoin \| cross \| crossTrade \| crypto \| cryptobasics \| crystalBall \| 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 \| document \| documentation \| dot \| doubleChevronRight \| downArrow \| download \| drag \| drops \| earn \| earnProduct \| earnRewards \| email \| endArrow \| ethereum \| eventContracts \| exchangeProduct \| exclamationMark \| expand \| expandAddress \| expandAll \| externalLink \| eye \| faceScan \| faces \| faucet \| fib \| fingerprint \| flame \| folder \| folderArrow \| folderOpen \| followAdd \| following \| fork \| forwardArrow \| fscsProtection \| gab \| games \| gasFees \| gauge \| gaugeEmpty \| gaugeHigh \| gaugeHighLow \| gaugeHighMid \| gaugeLow \| gaugeLowHigh \| gaugeLowMid \| gaugeMedium \| gavel \| gear \| generalCharacter \| ghost \| gif \| giftBox \| giftCard \| gitHubLogo \| globe \| googleLogo \| grid \| group \| hamburger \| hammer \| heart \| helpCenterProduct \| helpCenterQuestionMark \| hiddenEye \| home \| horizontalLine \| ideal \| identityCard \| image \| info \| initiator \| instagramLogo \| instantUnstakingClock \| institute \| institutionalProduct \| interest \| invisible \| invoice \| keyboard \| laptop \| leadChart \| leadCoin \| learningRewardsProduct \| light \| lightbulb \| lightningBolt \| lineChartCrypto \| list \| location \| lock \| login \| logout \| magnifyingGlass \| marketCap \| megaphone \| menu \| metaverse \| microphone \| mint \| minus \| moon \| more \| moreVertical \| music \| newsFeed \| newsletter \| nft \| nftBuy \| nftOffer \| nftProduct \| nftSale \| noRocket \| noWifi \| nodeProduct \| options \| orderBook \| orderHistory \| outline \| pFPS \| paperAirplane \| paperclip \| participate \| participateProduct \| passKey \| passport \| pause \| pay \| payProduct \| paymentCard \| payments \| payouts \| paypal \| pencil \| peopleGroup \| peopleStar \| percentage \| perpetualSwap \| phone \| plane \| planet \| play \| plusMinus \| powerTool \| priceAlerts \| priceAlertsCheck \| primePoduct \| privateClientProduct \| proProduct \| profile \| protection \| pulse \| pyramid \| qrCode \| qrCodeAlt \| queryTransact \| questionMark \| reCenter \| rectangle \| recurring \| refresh \| regulated \| regulatedFutures \| report \| rewardsProduct \| rocket \| rocketShip \| rollingSpot \| rosettaProduct \| royalty \| safe \| save \| savingsBank \| scanQrCode \| securityKey \| securityShield \| seen \| sendReceive \| setPinCode \| settings \| share \| shield \| shieldOutline \| shoppingCart \| signinProduct \| smartContract \| socialChat \| socialReshare \| socialShare \| sofort \| sortDoubleArrow \| sortDown \| sortDownCenter \| sortUp \| sortUpCenter \| soundOff \| soundOn \| sparkle \| speaker \| staggeredList \| stake \| staking \| star \| statusDot \| step0 \| step1 \| step2 \| step3 \| step4 \| step5 \| step6 \| step7 \| step8 \| step9 \| sun \| support \| tag \| taxes \| taxesReceipt \| telephone \| thumbsDown \| thumbsDownOutline \| thumbsUp \| thumbsUpOutline \| tokenSales \| trading \| transactions \| trashCan \| trophy \| trophyCup \| twitterLogo \| ultility \| undo \| unfollowPeople \| unknown \| unlock \| upArrow \| upload \| venturesProduct \| verifiedBadge \| verifiedPools \| verticalLine \| waasProduct \| wallet \| walletLogo \| walletProduct \| wellness \| wifi \| wireTransfer \| withdraw \| wrapToken \| xLogo` | No | `-` | Icon to render at the start of the button. |
 | `startIconActive` | `boolean` | No | `-` | Whether the start icon is active |
 | `style` | `CSSProperties` | No | `-` | - |
 | `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
@@ -132,82 +210,3 @@ import { Button } from '@coinbase/cds-web/buttons/Button'
 | `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
 
 
-## Examples
-
-### Primary Button
-
-Use primary buttons for high emphasis actions. These buttons have the most visual impact and should be reserved for the most important, final actions that complete a flow, like Save, Join now, or Confirm. Try to use one per screen. Multiple primary buttons make it confusing for the user to understand what action they should take.
-
-```jsx live
-<Button onClick={console.log} variant="primary">
-  Primary
-</Button>
-```
-
-### Secondary Button
-
-These buttons have a medium level of emphasis that should be used for non-critical actions. Secondary buttons can be used on pages without restrictions and works well for multiple actions of equal weight. They can be used in conjunction with a Primary Button or independently.
-
-```jsx live
-<Button onClick={console.log} variant="secondary">
-  Secondary
-</Button>
-```
-
-### Tertiary Button
-
-These buttons provide high contrast with the background through the use of the themable inverted background color.
-
-```jsx live
-<Button onClick={console.log} variant="tertiary">
-  Tertiary
-</Button>
-```
-
-### Negative Button
-
-Negative buttons should be used sparingly for destructive actions that will result in data loss, can’t be undone, or will have significant consequences. They commonly appear in confirmation dialogs as the final confirmation before deleting.
-
-```jsx live
-<Button onClick={console.log} variant="negative">
-  Negative
-</Button>
-```
-
-### Transparent Button
-
-Transparent buttons are used for less important actions that are supplementary. These buttons have lower prominence since its container is not visible until the button is interacted with. Transparent buttons are frequently used on Cards and can be placed on a variety of backgrounds.
-
-```jsx live
-<HStack gap={2}>
-  <Button onClick={console.log} transparent>
-    Primary
-  </Button>
-  <Button onClick={console.log} variant="secondary" transparent>
-    Secondary
-  </Button>
-  <Button onClick={console.log} variant="tertiary" transparent>
-    Secondary
-  </Button>
-  <Button onClick={console.log} variant="negative" transparent>
-    Negative
-  </Button>
-</HStack>
-```
-
-### Buttons with end icon
-
-You can add an icon after the label of a button.
-
-```jsx live
-<HStack gap={2}>
-  <Button onClick={console.log} endIcon="add" endIconActive variant="secondary" compact>
-    Select file
-  </Button>
-  <Button onClick={console.log} endIcon="forwardArrow" variant="secondary" compact>
-    See more
-  </Button>
-</HStack>
-```
-
-

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

@@ -4,20 +4,10 @@ Groups buttons with consistent spacing.
 
 ## Import
 
-```jsx
+```tsx
 import { ButtonGroup } from '@coinbase/cds-web/buttons/ButtonGroup'
 ```
 
-## Props
-
-| Prop | Type | Required | Default | Description |
-| --- | --- | --- | --- | --- |
-| `children` | `undefined \| null \| false \| ReactElement<ButtonBaseProps, string \| JSXElementConstructor<any>> \| OptionalElement<ButtonBaseProps>[]` | Yes | `-` | Buttons to render as a group. |
-| `block` | `boolean` | No | `-` | Expand buttons to fill available space within the group. |
-| `direction` | `horizontal \| vertical` | No | `horizontal Stack buttons vertically or horizontally.` | - |
-| `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 Button Group
@@ -77,4 +67,13 @@ All button groups _require_ an accessibility label describing the group's conten
 </ButtonGroup>
 ```
 
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `children` | `undefined \| null \| false \| ReactElement<ButtonBaseProps, string \| JSXElementConstructor<any>> \| OptionalElement<ButtonBaseProps>[]` | Yes | `-` | Buttons to render as a group. |
+| `block` | `boolean` | No | `-` | Expand buttons to fill available space within the group. |
+| `direction` | `horizontal \| vertical` | No | `horizontal Stack buttons vertically or horizontally.` | - |
+| `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/Calendar.txt

@@ -4,10 +4,65 @@ Calendar is a flexible, accessible date grid component for selecting dates, supp
 
 ## Import
 
-```jsx
+```tsx
 import { Calendar } from '@coinbase/cds-web/dates/Calendar'
 ```
 
+## Examples
+
+### Basic usage
+
+```tsx live
+() => {
+  const [selectedDate, setSelectedDate] = useState(new Date());
+  return <Calendar selectedDate={selectedDate} onPressDate={setSelectedDate} />;
+};
+```
+
+### Disabled Dates
+
+```tsx live
+() => {
+  const [selectedDate, setSelectedDate] = useState(new Date());
+  // Disable today and tomorrow
+  const today = new Date();
+  const tomorrow = new Date(today);
+  tomorrow.setDate(today.getDate() + 1);
+  return (
+    <Calendar
+      selectedDate={selectedDate}
+      onPressDate={setSelectedDate}
+      disabledDates={[today, tomorrow]}
+      disabledDateError="This date is not selectable."
+    />
+  );
+};
+```
+
+### Highlighted Dates
+
+```tsx live
+() => {
+  const [selectedDate, setSelectedDate] = useState(new Date());
+  // Highlight the 10th, 15th, and 20th of the current month
+  const now = new Date();
+  const year = now.getFullYear();
+  const month = now.getMonth();
+  const highlightedDates = [
+    new Date(year, month, 10),
+    new Date(year, month, 15),
+    new Date(year, month, 20),
+  ];
+  return (
+    <Calendar
+      selectedDate={selectedDate}
+      onPressDate={setSelectedDate}
+      highlightedDates={highlightedDates}
+    />
+  );
+};
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
@@ -124,59 +179,3 @@ import { Calendar } from '@coinbase/cds-web/dates/Calendar'
 | `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
 
 
-## Examples
-
-### Basic usage
-
-```tsx live
-() => {
-  const [selectedDate, setSelectedDate] = useState(new Date());
-  return <Calendar selectedDate={selectedDate} onPressDate={setSelectedDate} />;
-};
-```
-
-### Disabled Dates
-
-```tsx live
-() => {
-  const [selectedDate, setSelectedDate] = useState(new Date());
-  // Disable today and tomorrow
-  const today = new Date();
-  const tomorrow = new Date(today);
-  tomorrow.setDate(today.getDate() + 1);
-  return (
-    <Calendar
-      selectedDate={selectedDate}
-      onPressDate={setSelectedDate}
-      disabledDates={[today, tomorrow]}
-      disabledDateError="This date is not selectable."
-    />
-  );
-};
-```
-
-### Highlighted Dates
-
-```tsx live
-() => {
-  const [selectedDate, setSelectedDate] = useState(new Date());
-  // Highlight the 10th, 15th, and 20th of the current month
-  const now = new Date();
-  const year = now.getFullYear();
-  const month = now.getMonth();
-  const highlightedDates = [
-    new Date(year, month, 10),
-    new Date(year, month, 15),
-    new Date(year, month, 20),
-  ];
-  return (
-    <Calendar
-      selectedDate={selectedDate}
-      onPressDate={setSelectedDate}
-      highlightedDates={highlightedDates}
-    />
-  );
-};
-```
-
-