@coinbase/cds-mcp-server 8.17.3 → 8.17.5

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

@@ -4,24 +4,10 @@ Displays media within cells.
 
 ## Import
 
-```jsx
+```tsx
 import { CellMedia } from '@coinbase/cds-web/cells/CellMedia'
 ```
 
-## Props
-
-| Prop | Type | Required | Default | Description |
-| --- | --- | --- | --- | --- |
-| `illustration` | `ReactElement<PictogramBaseProps, string \| JSXElementConstructor<any>>` | Yes | `-` | - |
-| `name` | `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` | Yes | `-` | - |
-| `source` | `string \| number` | Yes | `-` | - |
-| `type` | `image \| avatar \| pictogram \| asset \| icon` | Yes | `-` | - |
-| `active` | `boolean` | No | `-` | Whether the icon is active |
-| `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 | `-` | - |
-| `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 |
-| `title` | `string` | No | `-` | - |
-
-
 ## Examples
 
 :::warning Deprecated
@@ -54,4 +40,17 @@ Used for displaying pictographic illustrations, commonly used in empty states or
 />
 ```
 
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `illustration` | `ReactElement<PictogramBaseProps, string \| JSXElementConstructor<any>>` | Yes | `-` | - |
+| `name` | `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` | Yes | `-` | - |
+| `source` | `string \| number` | Yes | `-` | - |
+| `type` | `image \| avatar \| pictogram \| asset \| icon` | Yes | `-` | - |
+| `active` | `boolean` | No | `-` | Whether the icon is active |
+| `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 | `-` | - |
+| `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 |
+| `title` | `string` | No | `-` | - |
+
 

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

@@ -4,32 +4,10 @@ Checkbox is a type of control component that allows user to select one or more o
 
 ## Import
 
-```jsx
+```tsx
 import { Checkbox } from '@coinbase/cds-web/controls/Checkbox'
 ```
 
-## Props
-
-| Prop | Type | Required | Default | Description |
-| --- | --- | --- | --- | --- |
-| `accessibilityLabel` | `string` | No | `-` | Accessibility label describing the element. |
-| `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | Background color of the overlay (element being interacted with). |
-| `borderColor` | `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 | `-` | Border color of the element. |
-| `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
-| `borderWidth` | `((BorderWidth \| { base?: BorderWidth; phone?: BorderWidth \| undefined; tablet?: BorderWidth \| undefined; desktop?: BorderWidth \| undefined; }) & BorderWidth) \| undefined` | No | `100` | Optional.Sets the border width of the control. |
-| `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Label for the control option. |
-| `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 | `-` | - |
-| `controlColor` | `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 | `fgInverse` | Sets the checked/active color of the control. |
-| `iconStyle` | `CSSProperties` | No | `-` | Style for the icon element |
-| `indeterminate` | `boolean` | No | `-` | Enable indeterminate state. Useful when you want to indicate that sub-items of a control are partially filled. |
-| `labelStyle` | `CSSProperties` | No | `-` | Style for the label element |
-| `onChange` | `ChangeEventHandler<HTMLInputElement>` | No | `-` | - |
-| `ref` | `null \| (instance: HTMLInputElement \| null) => void \| RefObject<HTMLInputElement>` | 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 |
-| `type` | `number \| color \| button \| search \| time \| image \| text \| hidden \| string & {} \| email \| checkbox \| radio \| tel \| url \| date \| submit \| reset \| datetime-local \| file \| month \| password \| range \| week` | No | `-` | - |
-| `value` | `string` | No | `-` | Value of the option. Useful for multiple choice. |
-
-
 ## Examples
 
 ### Basic Usage
@@ -186,4 +164,25 @@ function MultipleCheckboxes() {
 }
 ```
 
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `accessibilityLabel` | `string` | No | `-` | Accessibility label describing the element. |
+| `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | Background color of the overlay (element being interacted with). |
+| `borderColor` | `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 | `-` | Border color of the element. |
+| `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderWidth` | `((BorderWidth \| { base?: BorderWidth; phone?: BorderWidth \| undefined; tablet?: BorderWidth \| undefined; desktop?: BorderWidth \| undefined; }) & BorderWidth) \| undefined` | No | `100` | Optional.Sets the border width of the control. |
+| `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Label for the control option. |
+| `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 | `-` | - |
+| `controlColor` | `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 | `fgInverse` | Sets the checked/active color of the control. |
+| `iconStyle` | `CSSProperties` | No | `-` | Style for the icon element |
+| `indeterminate` | `boolean` | No | `-` | Enable indeterminate state. Useful when you want to indicate that sub-items of a control are partially filled. |
+| `labelStyle` | `CSSProperties` | No | `-` | Style for the label element |
+| `onChange` | `ChangeEventHandler<HTMLInputElement>` | No | `-` | - |
+| `ref` | `null \| (instance: HTMLInputElement \| null) => void \| RefObject<HTMLInputElement>` | 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 |
+| `type` | `number \| color \| button \| search \| time \| image \| text \| hidden \| string & {} \| email \| checkbox \| radio \| tel \| url \| date \| submit \| reset \| datetime-local \| file \| month \| password \| range \| week` | No | `-` | - |
+| `value` | `string` | No | `-` | Value of the option. Useful for multiple choice. |
+
 

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

@@ -4,10 +4,79 @@ A selectable cell that pairs a checkbox with a title and description for multi-c
 
 ## Import
 
-```jsx
+```tsx
 import { CheckboxCell } from '@coinbase/cds-web/controls/CheckboxCell'
 ```
 
+## Examples
+
+### Basic usage
+
+```tsx live
+function CheckboxCellExample() {
+  const [checked, setChecked] = React.useState(false);
+  return (
+    <CheckboxCell
+      title="Enable notifications"
+      description="Get updates on your account activity."
+      checked={checked}
+      onChange={(e) => setChecked(e.target.checked)}
+      value="notifications"
+    />
+  );
+}
+```
+
+### States
+
+```tsx live
+<VStack gap={2}>
+  <CheckboxCell
+    title="Disabled and unchecked"
+    value="disabled-unchecked"
+    checked={false}
+    disabled
+  />
+  <CheckboxCell title="Disabled and checked" value="disabled-checked" checked disabled />
+</VStack>
+```
+
+### With Custom Content
+
+```tsx live
+function CustomCheckboxCellExample() {
+  const [checked, setChecked] = React.useState(true);
+  return (
+    <CheckboxCell
+      checked={checked}
+      description={
+        <VStack gap={1}>
+          <Text color="fgMuted" font="body">
+            Stay updated with important information
+          </Text>
+          <Text color="fgPrimary" font="label1">
+            • Security alerts
+          </Text>
+          <Text color="fgPrimary" font="label1">
+            • Account updates
+          </Text>
+        </VStack>
+      }
+      onChange={(e) => setChecked(e.target.checked)}
+      title={
+        <VStack gap={0}>
+          <Text font="headline">Email Notifications</Text>
+          <Text color="fgPositive" font="caption">
+            Recommended
+          </Text>
+        </VStack>
+      }
+      value="notifications"
+    />
+  );
+}
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
@@ -131,73 +200,3 @@ import { CheckboxCell } from '@coinbase/cds-web/controls/CheckboxCell'
 | `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
 
 
-## Examples
-
-### Basic usage
-
-```tsx live
-function CheckboxCellExample() {
-  const [checked, setChecked] = React.useState(false);
-  return (
-    <CheckboxCell
-      title="Enable notifications"
-      description="Get updates on your account activity."
-      checked={checked}
-      onChange={(e) => setChecked(e.target.checked)}
-      value="notifications"
-    />
-  );
-}
-```
-
-### States
-
-```tsx live
-<VStack gap={2}>
-  <CheckboxCell
-    title="Disabled and unchecked"
-    value="disabled-unchecked"
-    checked={false}
-    disabled
-  />
-  <CheckboxCell title="Disabled and checked" value="disabled-checked" checked disabled />
-</VStack>
-```
-
-### With Custom Content
-
-```tsx live
-function CustomCheckboxCellExample() {
-  const [checked, setChecked] = React.useState(true);
-  return (
-    <CheckboxCell
-      checked={checked}
-      description={
-        <VStack gap={1}>
-          <Text color="fgMuted" font="body">
-            Stay updated with important information
-          </Text>
-          <Text color="fgPrimary" font="label1">
-            • Security alerts
-          </Text>
-          <Text color="fgPrimary" font="label1">
-            • Account updates
-          </Text>
-        </VStack>
-      }
-      onChange={(e) => setChecked(e.target.checked)}
-      title={
-        <VStack gap={0}>
-          <Text font="headline">Email Notifications</Text>
-          <Text color="fgPositive" font="caption">
-            Recommended
-          </Text>
-        </VStack>
-      }
-      value="notifications"
-    />
-  );
-}
-```
-
-

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

@@ -4,25 +4,10 @@ CheckboxGroup is a control component that allows users to select multiple option
 
 ## Import
 
-```jsx
+```tsx
 import { CheckboxGroup } from '@coinbase/cds-web/controls/CheckboxGroup'
 ```
 
-## Props
-
-| Prop | Type | Required | Default | Description |
-| --- | --- | --- | --- | --- |
-| `children` | `ReactElement<any, string \| JSXElementConstructor<any>>[]` | Yes | `-` | Checkbox elements that are part of the checkbox group. |
-| `selectedValues` | `Set<string>` | Yes | `-` | Checkbox options that are checked. |
-| `className` | `string` | No | `-` | - |
-| `key` | `Key \| null` | No | `-` | - |
-| `label` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Set a label summary for the group of checkboxes. |
-| `onChange` | `ChangeEventHandler<HTMLInputElement>` | No | `-` | Handle change event when pressing on a checkbox option. |
-| `ref` | `null \| string \| (instance: HTMLFieldSetElement \| null) => void \| RefObject<HTMLFieldSetElement>` | No | `-` | Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). |
-| `style` | `CSSProperties` | No | `-` | - |
-| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
-
-
 ## Examples
 
 ### Deprecation Notice
@@ -217,4 +202,18 @@ function LegacyCheckboxGroupWithLabel() {
 }
 ```
 
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `children` | `ReactElement<any, string \| JSXElementConstructor<any>>[]` | Yes | `-` | Checkbox elements that are part of the checkbox group. |
+| `selectedValues` | `Set<string>` | Yes | `-` | Checkbox options that are checked. |
+| `className` | `string` | No | `-` | - |
+| `key` | `Key \| null` | No | `-` | - |
+| `label` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Set a label summary for the group of checkboxes. |
+| `onChange` | `ChangeEventHandler<HTMLInputElement>` | No | `-` | Handle change event when pressing on a checkbox option. |
+| `ref` | `null \| string \| (instance: HTMLFieldSetElement \| null) => void \| RefObject<HTMLFieldSetElement>` | No | `-` | Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). |
+| `style` | `CSSProperties` | No | `-` | - |
+| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
+
 

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

@@ -4,10 +4,76 @@ A compact, interactive content element.
 
 ## Import
 
-```jsx
+```tsx
 import { Chip } from '@coinbase/cds-web/chips/Chip'
 ```
 
+## Examples
+
+### Basic usage
+
+```tsx live
+function Example() {
+  return (
+    <HStack gap={2}>
+      <Chip>Basic Chip</Chip>
+      <Chip disabled>Disabled Chip</Chip>
+      <Chip onClick={() => alert('Clicked!')}>Interactive Chip</Chip>
+    </HStack>
+  );
+}
+```
+
+### Variants
+
+```tsx live
+function Example() {
+  return (
+    <VStack gap={2}>
+      <HStack gap={2}>
+        <Chip compact>Compact</Chip>
+        <Chip inverted>Inverted</Chip>
+        <Chip maxWidth={100} numberOfLines={1}>
+          Long text that should truncate nicely
+        </Chip>
+      </HStack>
+    </VStack>
+  );
+}
+```
+
+### With Icons and Images
+
+```tsx live
+function Example() {
+  return (
+    <VStack gap={2}>
+      <HStack gap={2}>
+        <Chip start={<Icon name="star" />}>With Start Icon</Chip>
+        <Chip end={<Icon name="chevronDown" />}>With End Icon</Chip>
+        <Chip start={<Icon name="star" />} end={<Icon name="chevronDown" />}>
+          Both Icons
+        </Chip>
+      </HStack>
+      <HStack gap={2}>
+        <Chip
+          start={<RemoteImage source={assets.btc.imageUrl} width={16} height={16} />}
+          onClick={() => alert('BTC selected')}
+        >
+          BTC
+        </Chip>
+        <Chip
+          start={<RemoteImage source={assets.eth.imageUrl} width={16} height={16} />}
+          onClick={() => alert('ETH selected')}
+        >
+          ETH
+        </Chip>
+      </HStack>
+    </VStack>
+  );
+}
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
@@ -128,70 +194,3 @@ import { Chip } from '@coinbase/cds-web/chips/Chip'
 | `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
 
 
-## Examples
-
-### Basic usage
-
-```tsx live
-function Example() {
-  return (
-    <HStack gap={2}>
-      <Chip>Basic Chip</Chip>
-      <Chip disabled>Disabled Chip</Chip>
-      <Chip onClick={() => alert('Clicked!')}>Interactive Chip</Chip>
-    </HStack>
-  );
-}
-```
-
-### Variants
-
-```tsx live
-function Example() {
-  return (
-    <VStack gap={2}>
-      <HStack gap={2}>
-        <Chip compact>Compact</Chip>
-        <Chip inverted>Inverted</Chip>
-        <Chip maxWidth={100} numberOfLines={1}>
-          Long text that should truncate nicely
-        </Chip>
-      </HStack>
-    </VStack>
-  );
-}
-```
-
-### With Icons and Images
-
-```tsx live
-function Example() {
-  return (
-    <VStack gap={2}>
-      <HStack gap={2}>
-        <Chip start={<Icon name="star" />}>With Start Icon</Chip>
-        <Chip end={<Icon name="chevronDown" />}>With End Icon</Chip>
-        <Chip start={<Icon name="star" />} end={<Icon name="chevronDown" />}>
-          Both Icons
-        </Chip>
-      </HStack>
-      <HStack gap={2}>
-        <Chip
-          start={<RemoteImage source={assets.btc.imageUrl} width={16} height={16} />}
-          onClick={() => alert('BTC selected')}
-        >
-          BTC
-        </Chip>
-        <Chip
-          start={<RemoteImage source={assets.eth.imageUrl} width={16} height={16} />}
-          onClick={() => alert('ETH selected')}
-        >
-          ETH
-        </Chip>
-      </HStack>
-    </VStack>
-  );
-}
-```
-
-

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

@@ -4,10 +4,78 @@ Coachmark is a flexible, accessible overlay component for onboarding, feature to
 
 ## Import
 
-```jsx
+```tsx
 import { Coachmark } from '@coinbase/cds-web/coachmark/Coachmark'
 ```
 
+## Examples
+
+### Basic usage
+
+```tsx live
+() => {
+  const [open, setOpen] = useState(true);
+  if (!open) return <Button onClick={() => setOpen(true)}>Show Coachmark</Button>;
+  return (
+    <Coachmark
+      title="Welcome!"
+      content="This is a Coachmark. Use it to guide users."
+      action={
+        <Button compact onClick={() => setOpen(false)}>
+          Got it
+        </Button>
+      }
+      onClose={() => setOpen(false)}
+    />
+  );
+};
+```
+
+### With Media
+
+```tsx live
+() => {
+  const [open, setOpen] = useState(true);
+  if (!open) return <Button onClick={() => setOpen(true)}>Show Coachmark</Button>;
+  return (
+    <Coachmark
+      title="Feature Highlight"
+      content="You can add media to your Coachmark."
+      media={<RemoteImage height={150} width="100%" source={ethBackground} alt="feature" />}
+      action={
+        <Button compact onClick={() => setOpen(false)}>
+          Next
+        </Button>
+      }
+      onClose={() => setOpen(false)}
+    />
+  );
+};
+```
+
+### With Checkbox
+
+```tsx live
+() => {
+  const [open, setOpen] = useState(true);
+  const [checked, setChecked] = useState(false);
+  if (!open) return <Button onClick={() => setOpen(true)}>Show Coachmark</Button>;
+  return (
+    <Coachmark
+      title="Dismiss Coachmark"
+      content="You can add a checkbox to let users opt out."
+      checkbox={
+        <Checkbox checked={checked} onChange={(e) => setChecked(e.target.checked)}>
+          Don't show again
+        </Checkbox>
+      }
+      action={<button onClick={() => setOpen(false)}>Close</button>}
+      onClose={() => setOpen(false)}
+    />
+  );
+};
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
@@ -118,72 +186,3 @@ import { Coachmark } from '@coinbase/cds-web/coachmark/Coachmark'
 | `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
 
 
-## Examples
-
-### Basic usage
-
-```tsx live
-() => {
-  const [open, setOpen] = useState(true);
-  if (!open) return <Button onClick={() => setOpen(true)}>Show Coachmark</Button>;
-  return (
-    <Coachmark
-      title="Welcome!"
-      content="This is a Coachmark. Use it to guide users."
-      action={
-        <Button compact onClick={() => setOpen(false)}>
-          Got it
-        </Button>
-      }
-      onClose={() => setOpen(false)}
-    />
-  );
-};
-```
-
-### With Media
-
-```tsx live
-() => {
-  const [open, setOpen] = useState(true);
-  if (!open) return <Button onClick={() => setOpen(true)}>Show Coachmark</Button>;
-  return (
-    <Coachmark
-      title="Feature Highlight"
-      content="You can add media to your Coachmark."
-      media={<RemoteImage height={150} width="100%" source={ethBackground} alt="feature" />}
-      action={
-        <Button compact onClick={() => setOpen(false)}>
-          Next
-        </Button>
-      }
-      onClose={() => setOpen(false)}
-    />
-  );
-};
-```
-
-### With Checkbox
-
-```tsx live
-() => {
-  const [open, setOpen] = useState(true);
-  const [checked, setChecked] = useState(false);
-  if (!open) return <Button onClick={() => setOpen(true)}>Show Coachmark</Button>;
-  return (
-    <Coachmark
-      title="Dismiss Coachmark"
-      content="You can add a checkbox to let users opt out."
-      checkbox={
-        <Checkbox checked={checked} onChange={(e) => setChecked(e.target.checked)}>
-          Don't show again
-        </Checkbox>
-      }
-      action={<button onClick={() => setOpen(false)}>Close</button>}
-      onClose={() => setOpen(false)}
-    />
-  );
-};
-```
-
-