@coinbase/cds-mcp-server 8.44.0 → 8.44.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (87) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/mcp-docs/mobile/components/Alert.txt +0 -1
  3. package/mcp-docs/mobile/components/AvatarButton.txt +0 -2
  4. package/mcp-docs/mobile/components/Button.txt +0 -2
  5. package/mcp-docs/mobile/components/Carousel.txt +23 -17
  6. package/mcp-docs/mobile/components/CheckboxCell.txt +5 -7
  7. package/mcp-docs/mobile/components/Chip.txt +3 -5
  8. package/mcp-docs/mobile/components/Collapsible.txt +0 -7
  9. package/mcp-docs/mobile/components/Combobox.txt +20 -20
  10. package/mcp-docs/mobile/components/ContentCell.txt +12 -12
  11. package/mcp-docs/mobile/components/DataCard.txt +5 -7
  12. package/mcp-docs/mobile/components/DotCount.txt +5 -5
  13. package/mcp-docs/mobile/components/Icon.txt +3 -10
  14. package/mcp-docs/mobile/components/IconButton.txt +0 -2
  15. package/mcp-docs/mobile/components/InputChip.txt +1 -3
  16. package/mcp-docs/mobile/components/ListCell.txt +18 -18
  17. package/mcp-docs/mobile/components/MediaCard.txt +6 -8
  18. package/mcp-docs/mobile/components/MediaChip.txt +1 -3
  19. package/mcp-docs/mobile/components/MessagingCard.txt +6 -8
  20. package/mcp-docs/mobile/components/Modal.txt +0 -1
  21. package/mcp-docs/mobile/components/NudgeCard.txt +0 -5
  22. package/mcp-docs/mobile/components/PageFooter.txt +0 -6
  23. package/mcp-docs/mobile/components/PageHeader.txt +5 -11
  24. package/mcp-docs/mobile/components/Pressable.txt +0 -2
  25. package/mcp-docs/mobile/components/ProgressBar.txt +4 -4
  26. package/mcp-docs/mobile/components/ProgressBarWithFixedLabels.txt +6 -6
  27. package/mcp-docs/mobile/components/ProgressBarWithFloatLabel.txt +5 -5
  28. package/mcp-docs/mobile/components/ProgressCircle.txt +8 -8
  29. package/mcp-docs/mobile/components/RadioCell.txt +5 -7
  30. package/mcp-docs/mobile/components/RollingNumber.txt +11 -11
  31. package/mcp-docs/mobile/components/SectionHeader.txt +0 -7
  32. package/mcp-docs/mobile/components/SelectAlpha.txt +20 -20
  33. package/mcp-docs/mobile/components/SelectChip.txt +1 -3
  34. package/mcp-docs/mobile/components/SelectChipAlpha.txt +20 -20
  35. package/mcp-docs/mobile/components/SelectOption.txt +1 -1
  36. package/mcp-docs/mobile/components/SlideButton.txt +4 -6
  37. package/mcp-docs/mobile/components/Spacer.txt +0 -3
  38. package/mcp-docs/mobile/components/Stepper.txt +8 -8
  39. package/mcp-docs/mobile/components/TabbedChipsAlpha.txt +2 -2
  40. package/mcp-docs/mobile/components/Tray.txt +15 -0
  41. package/mcp-docs/mobile/components/UpsellCard.txt +0 -1
  42. package/mcp-docs/web/components/Alert.txt +0 -1
  43. package/mcp-docs/web/components/AvatarButton.txt +0 -2
  44. package/mcp-docs/web/components/Banner.txt +22 -0
  45. package/mcp-docs/web/components/Button.txt +0 -2
  46. package/mcp-docs/web/components/Carousel.txt +36 -36
  47. package/mcp-docs/web/components/CheckboxCell.txt +5 -7
  48. package/mcp-docs/web/components/Chip.txt +4 -6
  49. package/mcp-docs/web/components/Collapsible.txt +0 -7
  50. package/mcp-docs/web/components/Combobox.txt +21 -21
  51. package/mcp-docs/web/components/ContentCell.txt +14 -14
  52. package/mcp-docs/web/components/DataCard.txt +5 -7
  53. package/mcp-docs/web/components/DotCount.txt +7 -7
  54. package/mcp-docs/web/components/FullscreenModal.txt +0 -1
  55. package/mcp-docs/web/components/FullscreenModalLayout.txt +0 -1
  56. package/mcp-docs/web/components/Icon.txt +4 -4
  57. package/mcp-docs/web/components/IconButton.txt +0 -2
  58. package/mcp-docs/web/components/InputChip.txt +2 -4
  59. package/mcp-docs/web/components/Link.txt +0 -2
  60. package/mcp-docs/web/components/ListCell.txt +16 -16
  61. package/mcp-docs/web/components/MediaCard.txt +6 -8
  62. package/mcp-docs/web/components/MediaChip.txt +2 -4
  63. package/mcp-docs/web/components/MessagingCard.txt +6 -8
  64. package/mcp-docs/web/components/Modal.txt +0 -1
  65. package/mcp-docs/web/components/PageFooter.txt +0 -6
  66. package/mcp-docs/web/components/PageHeader.txt +6 -12
  67. package/mcp-docs/web/components/Pressable.txt +0 -2
  68. package/mcp-docs/web/components/ProgressBar.txt +6 -6
  69. package/mcp-docs/web/components/ProgressBarWithFixedLabels.txt +8 -8
  70. package/mcp-docs/web/components/ProgressBarWithFloatLabel.txt +7 -7
  71. package/mcp-docs/web/components/ProgressCircle.txt +8 -8
  72. package/mcp-docs/web/components/RadioCell.txt +5 -7
  73. package/mcp-docs/web/components/ReferenceLine.txt +2 -2
  74. package/mcp-docs/web/components/RollingNumber.txt +12 -12
  75. package/mcp-docs/web/components/Scrubber.txt +6 -6
  76. package/mcp-docs/web/components/SelectAlpha.txt +21 -21
  77. package/mcp-docs/web/components/SelectChip.txt +2 -4
  78. package/mcp-docs/web/components/SelectChipAlpha.txt +21 -21
  79. package/mcp-docs/web/components/SelectOption.txt +2 -2
  80. package/mcp-docs/web/components/Sidebar.txt +6 -6
  81. package/mcp-docs/web/components/SidebarItem.txt +0 -2
  82. package/mcp-docs/web/components/Stepper.txt +9 -9
  83. package/mcp-docs/web/components/TabbedChipsAlpha.txt +4 -4
  84. package/mcp-docs/web/components/TileButton.txt +0 -2
  85. package/mcp-docs/web/components/Tray.txt +17 -2
  86. package/mcp-docs/web/components/UpsellCard.txt +0 -1
  87. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -8,6 +8,14 @@ All notable changes to this project will be documented in this file.
8
8
 
9
9
  <!-- template-start -->
10
10
 
11
+ ## 8.44.2 ((2/10/2026, 08:38 AM PST))
12
+
13
+ This is an artificial version bump with no new change.
14
+
15
+ ## 8.44.1 ((2/10/2026, 12:05 PM PST))
16
+
17
+ This is an artificial version bump with no new change.
18
+
11
19
  ## 8.44.0 ((2/9/2026, 07:07 PM PST))
12
20
 
13
21
  This is an artificial version bump with no new change.
@@ -153,6 +153,5 @@ function AlertOnModalExample() {
153
153
  | `preferredActionVariant` | `primary \| negative` | No | `primary` | Button variant of the preferred action |
154
154
  | `ref` | `((instance: ModalRefBaseProps \| null) => void) \| RefObject<ModalRefBaseProps> \| null` | No | `-` | - |
155
155
  | `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 |
156
- | `zIndex` | `number` | No | `-` | Adjust the z-index positioning layer. |
157
156
 
158
157
 
@@ -127,7 +127,6 @@ AvatarButton can use fallback colors with names when no image source is provided
127
127
  | `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
128
128
  | `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
129
129
  | `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
130
- | `analyticsId` | `string` | No | `-` | - |
131
130
  | `aspectRatio` | `string \| number` | No | `-` | - |
132
131
  | `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). |
133
132
  | `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
@@ -162,7 +161,6 @@ AvatarButton can use fallback colors with names when no image source is provided
162
161
  | `disabled` | `boolean` | No | `-` | Is the element currently disabled. |
163
162
  | `display` | `flex \| none` | No | `-` | - |
164
163
  | `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. Is the element elevated. |
165
- | `eventConfig` | `EventHandlerCustomConfig` | No | `-` | - |
166
164
  | `feedback` | `none \| light \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
167
165
  | `flexBasis` | `string \| number` | No | `-` | - |
168
166
  | `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
@@ -233,7 +233,6 @@ A full-width primary action with a compact secondary option.
233
233
  | `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
234
234
  | `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
235
235
  | `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
236
- | `analyticsId` | `string` | No | `-` | - |
237
236
  | `aspectRatio` | `string \| number` | No | `-` | - |
238
237
  | `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). |
239
238
  | `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
@@ -271,7 +270,6 @@ A full-width primary action with a compact secondary option.
271
270
  | `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Set the end node |
272
271
  | `endIcon` | `key \| search \| pin \| filter \| visible \| continuous \| auto \| loop \| warning \| error \| account \| activity \| add \| addPeople \| advancedMarketSelector \| advancedTradeProduct \| affiliates \| airdrop \| airdropAlt \| airdropCoins \| airdropParachute \| alien \| allTimeHigh \| allocation \| annotation \| api \| apiPlug \| apothecary \| appSwitcher \| apple \| appleLogo \| application \| arrowDown \| arrowLeft \| arrowRight \| arrowUp \| arrowsHorizontal \| arrowsUpDown \| arrowsVertical \| artwork \| assetHubProduct \| assetManagementProduct \| astronautHelmet \| atSign \| atomScience \| autoCar \| avatar \| average \| backArrow \| ballot \| ballotbox \| bandage \| bank \| barChartSimple \| barChartWindow \| base \| baseApps \| baseFeed \| baseNotification \| baseQuickBuy \| baseSquare \| baseTransact \| baseVerification \| baseWallet \| baseball \| basketball \| beaker \| beginningArrow \| bell \| bellCheck \| bellPlus \| birthcertificate \| block \| blockchain \| blog \| book \| bookmark \| borrowProduct \| boxing \| bridging \| briefcase \| briefcaseAlt \| browser \| bug \| building \| calculator \| calendar \| calendarBlank \| calendarDates \| calendarEmpty \| calendarHeart \| calendarMoney \| calendarStar \| camera \| candlesticks \| car \| card \| caret \| caretDown \| caretLeft \| caretRight \| caretUp \| cash \| cashAustralianDollar \| cashBrazilianReal \| cashBrazillianReal \| cashCanadianDollar \| cashCoins \| cashEUR \| cashGBP \| cashIndonesianRupiah \| cashJPY \| cashPhilippinePeso \| cashPolishZloty \| cashRupee \| cashSingaporeDollar \| cashSwissFranc \| cashThaiBaht \| cashTurkishLira \| cashUSD \| cashUaeDirham \| cashVietnameseDong \| chainLink \| chartBar \| chartCandles \| chartLine \| chartPie \| chartPieCircle \| chartVolume \| chatBotAgent \| chatBubble \| chatRequests \| checkboxChecked \| checkboxEmpty \| checkmark \| chess \| circleCheckmark \| circleCross \| circulatingSupply \| city \| clipboard \| clock \| clockOutline \| close \| closeCaption \| clothing \| cloud \| cloudPartial \| cloudProduct \| cluster \| coinbase \| coinbaseCardProduct \| coinbaseOne \| coinbaseOneCard \| coinbaseOneLogo \| coinbaseRewards \| coinsCrypto \| collapse \| collectibles \| collection \| comment \| commentPlus \| commerceProduct \| compass \| complianceProduct \| compose \| computerChip \| concierge \| conciergeBell \| config \| convert \| copy \| corporation \| creatorCoin \| cricket \| cross \| crossTrade \| crypto \| cryptobasics \| crystalBall \| crystalBallInsight \| currencies \| custodyProduct \| dashboard \| dataMarketplaceProduct \| dataStack \| defi \| delegateProduct \| deposit \| derivatives \| derivativesProduct \| derivativesProductNew \| developerAPIProduct \| developerPlatformProduct \| dex \| diagonalDownArrow \| diagonalRightArrow \| diagonalUpArrow \| diamond \| diamondIncentives \| dinnerPlate \| directDeposit \| directDepositIcon \| disabledPhone \| discordLogo \| distribution \| document \| documentation \| dot \| doubleChevronRight \| downArrow \| download \| drag \| drops \| earn \| earnProduct \| earnRewards \| earthquake \| educationBook \| educationPencil \| email \| endArrow \| entertainment \| ethereum \| eventContracts \| exchangeProduct \| exclamationMark \| expand \| expandAddress \| expandAll \| externalLink \| eye \| faceScan \| faces \| factory \| faucet \| fib \| filmStrip \| fingerprint \| flame \| folder \| folderArrow \| folderOpen \| followAdd \| following \| football \| fork \| forwardArrow \| fscsProtection \| gab \| games \| gaming \| gasFees \| gasFeesAlt \| gauge \| gaugeEmpty \| gaugeHigh \| gaugeHighLow \| gaugeHighMid \| gaugeLow \| gaugeLowHigh \| gaugeLowMid \| gaugeMedium \| gavel \| gear \| generalCharacter \| ghost \| gif \| giftBox \| giftCard \| gitHubLogo \| globe \| golf \| googleLogo \| greenEnergy \| grid \| group \| hamburger \| hammer \| heart \| helpCenterProduct \| helpCenterQuestionMark \| hiddenEye \| hockey \| home \| horizontalLine \| hospital \| hospitalCross \| hurricane \| ideal \| identityCard \| image \| info \| initiator \| instagramLogo \| instantUnstakingClock \| institute \| institutionalProduct \| interest \| invisible \| invoice \| keyboard \| laptop \| leadChart \| leadCoin \| learningRewardsProduct \| light \| lightbulb \| lightning \| lightningBolt \| lineChartCrypto \| list \| location \| lock \| login \| logout \| magnifyingGlass \| marketCap \| medal \| megaphone \| menu \| metaverse \| microphone \| microphoneCordless \| microscope \| mint \| minus \| mma \| moneyCardCoin \| moon \| more \| moreVertical \| motorsport \| music \| musicArticles \| needle \| newsFeed \| newsletter \| nft \| nftBuy \| nftOffer \| nftProduct \| nftSale \| noRocket \| noWifi \| nodeProduct \| oil \| options \| orderBook \| orderHistory \| outline \| pFPS \| paperAirplane \| paperclip \| participate \| participateProduct \| passKey \| passport \| pause \| pay \| payProduct \| paymentCard \| payments \| payouts \| paypal \| pencil \| peopleGroup \| peopleStar \| percentage \| perpetualSwap \| phone \| pieChartData \| pillBottle \| pillCapsule \| plane \| planet \| play \| playbutton \| plusMinus \| podiumStar \| politicsBuilding \| politicsCandidate \| politicsFlag \| politicsGavel \| politicsPodium \| politicsStar \| powerTool \| priceAlerts \| priceAlertsCheck \| primePoduct \| privateClientProduct \| proProduct \| profile \| protection \| pulse \| pyramid \| qrCode \| qrCodeAlt \| queryTransact \| questionMark \| quotation \| rain \| ratingsCheck \| ratingsChecks \| ratingsStar \| reCenter \| rectangle \| recurring \| refresh \| regulated \| regulatedFutures \| report \| rewardsProduct \| ribbon \| robot \| rocket \| rocketShip \| rollingSpot \| rosettaProduct \| rottenTomato \| royalty \| safe \| save \| savingsBank \| scanQrCode \| scienceAtom \| scienceBeaker \| scienceMoon \| securityKey \| securityShield \| seen \| sendReceive \| setPinCode \| settings \| share \| shield \| shieldOutline \| shoe \| shoppingCart \| signinProduct \| singleCoin \| singleNote \| singlecloud \| smartContract \| snow \| soccer \| socialChat \| socialReshare \| socialShare \| sofort \| sortDoubleArrow \| sortDown \| sortDownCenter \| sortUp \| sortUpCenter \| soundOff \| soundOn \| sparkle \| speaker \| speechBubble \| stableCoin \| stablecoinStack \| staggeredList \| stake \| staking \| star \| starAward \| starBubble \| starTrophy \| statusDot \| step0 \| step1 \| step2 \| step3 \| step4 \| step5 \| step6 \| step7 \| step8 \| step9 \| strategy \| sun \| support \| tag \| taxes \| taxesReceipt \| telephone \| tennis \| test \| thermometer \| thumbsDown \| thumbsDownOutline \| thumbsUp \| thumbsUpOutline \| tokenLaunchCoin \| tokenLaunchRocket \| tokenSales \| tornado \| trading \| transactions \| trashCan \| trophy \| trophyCup \| tshirt \| tv \| tvStand \| twitterLogo \| ultility \| umbrella \| undo \| unfollowPeople \| unknown \| unlock \| upArrow \| upload \| venturesProduct \| verifiedBadge \| verifiedPools \| verticalLine \| virus \| waasProduct \| wallet \| walletLogo \| walletProduct \| webhooks \| wellness \| wifi \| wind \| wireTransfer \| withdraw \| wrapToken \| xLogo` | No | `-` | Icon to render at the end of the button. |
273
272
  | `endIconActive` | `boolean` | No | `-` | Whether the end icon is active |
274
- | `eventConfig` | `EventHandlerCustomConfig` | No | `-` | - |
275
273
  | `feedback` | `none \| light \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
276
274
  | `flexBasis` | `string \| number` | No | `-` | - |
277
275
  | `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
@@ -47,7 +47,7 @@ function MyCarousel() {
47
47
  title="Explore Assets"
48
48
  styles={{
49
49
  root: { paddingHorizontal: theme.space[2] },
50
- carousel: { gap: theme.space[1] },
50
+ carousel: { gap: theme.space[2] },
51
51
  }}
52
52
  >
53
53
  {Object.values(assets).map((asset) => (
@@ -76,10 +76,10 @@ Items can be given a width proportional to the carousel width.
76
76
  :::tip Tip
77
77
 
78
78
  If you have a gap between items or padding between the carousel and the edge of the screen,
79
- you should account for that in the width. For example, if you have a gap of 8px,
79
+ you should account for that in the width. For example, if you have a gap of 16px,
80
80
  and want to offset 16px from edge of screen, you could do
81
81
 
82
- `<CarouselItem width={((screenWidth - (16 * 2)) - 8) / 2} ... />`
82
+ `<CarouselItem width={((screenWidth - (16 * 2)) - 16) / 2} ... />`
83
83
 
84
84
  :::
85
85
 
@@ -91,7 +91,7 @@ function DynamicSizingCarousel() {
91
91
  const horizontalPadding = theme.space[2];
92
92
 
93
93
  const carouselWidth = windowWidth - horizontalPadding * 2;
94
- const horizontalGap = theme.space[1];
94
+ const horizontalGap = theme.space[2];
95
95
 
96
96
  // 1 item per page - will rely on Carousel container's width
97
97
  const oneItemWidth = '100%'; // Could alternatively use carouselWidth
@@ -166,7 +166,7 @@ function ResponsiveSizingCarousel() {
166
166
  const horizontalPadding = theme.space[2];
167
167
 
168
168
  const carouselWidth = windowWidth - horizontalPadding * 2;
169
- const horizontalGap = theme.space[1];
169
+ const horizontalGap = theme.space[2];
170
170
 
171
171
  // 1 item per page - will rely on Carousel container's width
172
172
  const oneItemWidth = '100%'; // Could alternatively use carouselWidth
@@ -241,7 +241,7 @@ function VariedSizingCarousel() {
241
241
  const horizontalPadding = theme.space[2];
242
242
 
243
243
  const carouselWidth = windowWidth - horizontalPadding * 2;
244
- const horizontalGap = theme.space[1];
244
+ const horizontalGap = theme.space[2];
245
245
 
246
246
  // 1 item per page - will rely on Carousel container's width
247
247
  const oneItemWidth = '100%'; // Could alternatively use carouselWidth
@@ -333,7 +333,7 @@ When set to `snap`, upon release the carousel will snap to either the nearest it
333
333
  function DragCarousel() {
334
334
  const theme = useTheme();
335
335
  const horizontalPadding = theme.space[2];
336
- const horizontalGap = theme.space[1];
336
+ const horizontalGap = theme.space[2];
337
337
 
338
338
  return (
339
339
  <Carousel
@@ -370,7 +370,7 @@ When set to `item`, the carousel will snap to the nearest item.
370
370
  function SquareItemsCarousel() {
371
371
  const theme = useTheme();
372
372
  const horizontalPadding = theme.space[2];
373
- const horizontalGap = theme.space[1];
373
+ const horizontalGap = theme.space[2];
374
374
 
375
375
  return (
376
376
  <Carousel
@@ -415,7 +415,7 @@ If you want to have the next item be shown at the edge of the screen, make sure
415
415
  function OverflowCarousel() {
416
416
  const theme = useTheme();
417
417
  const horizontalPadding = theme.space[2];
418
- const horizontalGap = theme.space[1];
418
+ const horizontalGap = theme.space[2];
419
419
 
420
420
  return (
421
421
  <Carousel
@@ -451,7 +451,7 @@ It is recommended to use pagination with autoplay so users know how many pages t
451
451
  function AutoplayCarousel() {
452
452
  const theme = useTheme();
453
453
  const horizontalPadding = theme.space[2];
454
- const horizontalGap = theme.space[1];
454
+ const horizontalGap = theme.space[2];
455
455
 
456
456
  return (
457
457
  <Carousel
@@ -482,7 +482,7 @@ function AutoplayCarousel() {
482
482
  function CustomIntervalCarousel() {
483
483
  const theme = useTheme();
484
484
  const horizontalPadding = theme.space[2];
485
- const horizontalGap = theme.space[1];
485
+ const horizontalGap = theme.space[2];
486
486
 
487
487
  return (
488
488
  <Carousel
@@ -518,7 +518,7 @@ Use `loop` to allow for infinite scrolling.
518
518
  function LoopingCarousel() {
519
519
  const theme = useTheme();
520
520
  const horizontalPadding = theme.space[2];
521
- const horizontalGap = theme.space[1];
521
+ const horizontalGap = theme.space[2];
522
522
 
523
523
  return (
524
524
  <Carousel
@@ -908,8 +908,14 @@ function ComposedAutoplayCarousel() {
908
908
  const remainingTime = autoplay.getRemainingTime();
909
909
  const progress = 1 - remainingTime / autoplay.totalTime;
910
910
  const progressSpring = useSpring({
911
- width: autoplay.isPlaying ? theme.space[3] : progress * theme.space[3],
912
- config: autoplay.isPlaying ? { duration: remainingTime } : { duration: 0 },
911
+ width: showProgress
912
+ ? autoplay.isPlaying
913
+ ? theme.space[3]
914
+ : progress * theme.space[3]
915
+ : 0,
916
+ config:
917
+ showProgress && autoplay.isPlaying ? { duration: remainingTime } : { duration: 0 },
918
+ immediate: !showProgress,
913
919
  });
914
920
 
915
921
  return (
@@ -1065,7 +1071,7 @@ You can dynamically add and remove items from the carousel.
1065
1071
  function DynamicContentCarousel() {
1066
1072
  const theme = useTheme();
1067
1073
  const horizontalPadding = theme.space[2];
1068
- const horizontalGap = theme.space[1];
1074
+ const horizontalGap = theme.space[2];
1069
1075
  const [items, setItems] = useState(Object.values(assets).slice(0, 3));
1070
1076
 
1071
1077
  function addAsset() {
@@ -1117,7 +1123,7 @@ Note that this can prevent proper accessibility for the carousel, if carousel it
1117
1123
  function HideNavigationAndPaginationCarousel() {
1118
1124
  const theme = useTheme();
1119
1125
  const horizontalPadding = theme.space[2];
1120
- const horizontalGap = theme.space[1];
1126
+ const horizontalGap = theme.space[2];
1121
1127
 
1122
1128
  return (
1123
1129
  <Carousel
@@ -1241,7 +1247,7 @@ function ImperativeApiCarousel() {
1241
1247
  snapMode="item"
1242
1248
  styles={{
1243
1249
  root: { paddingHorizontal: theme.space[3] },
1244
- carousel: { gap: theme.space[1] },
1250
+ carousel: { gap: theme.space[2] },
1245
1251
  }}
1246
1252
  title="Explore Assets"
1247
1253
  >
@@ -88,7 +88,6 @@ function CustomCheckboxCellExample() {
88
88
  | `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
89
89
  | `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
90
90
  | `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
91
- | `analyticsId` | `string` | No | `-` | - |
92
91
  | `aspectRatio` | `string \| number` | No | `-` | - |
93
92
  | `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). |
94
93
  | `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
@@ -124,7 +123,6 @@ function CustomCheckboxCellExample() {
124
123
  | `disabled` | `boolean` | No | `-` | Disable user interaction. Is the element currently disabled. |
125
124
  | `display` | `flex \| none` | No | `-` | - |
126
125
  | `elevation` | `0 \| 1 \| 2` | No | `-` | Sets the elevation/drop shadow of the control. Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. Is the element elevated. |
127
- | `eventConfig` | `EventHandlerCustomConfig` | No | `-` | - |
128
126
  | `feedback` | `none \| light \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
129
127
  | `flexBasis` | `string \| number` | No | `-` | - |
130
128
  | `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
@@ -205,10 +203,10 @@ function CustomCheckboxCellExample() {
205
203
 
206
204
  | Selector | Static class name | Description |
207
205
  | --- | --- | --- |
208
- | `root` | `-` | - |
209
- | `checkboxContainer` | `-` | - |
210
- | `contentContainer` | `-` | - |
211
- | `title` | `-` | - |
212
- | `description` | `-` | - |
206
+ | `root` | `-` | Root element |
207
+ | `checkboxContainer` | `-` | Checkbox input container element |
208
+ | `contentContainer` | `-` | Content container element |
209
+ | `title` | `-` | Title text element |
210
+ | `description` | `-` | Description text element |
213
211
 
214
212
 
@@ -81,7 +81,6 @@ function Example() {
81
81
  | `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
82
82
  | `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
83
83
  | `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
84
- | `analyticsId` | `string` | No | `-` | - |
85
84
  | `aspectRatio` | `string \| number` | No | `-` | - |
86
85
  | `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). |
87
86
  | `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
@@ -117,7 +116,6 @@ function Example() {
117
116
  | `display` | `flex \| none` | No | `-` | - |
118
117
  | `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. Is the element elevated. |
119
118
  | `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | ReactNode placed after the value |
120
- | `eventConfig` | `EventHandlerCustomConfig` | No | `-` | - |
121
119
  | `feedback` | `none \| light \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
122
120
  | `flexBasis` | `string \| number` | No | `-` | - |
123
121
  | `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
@@ -181,7 +179,7 @@ function Example() {
181
179
  | `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
182
180
  | `start` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | ReactNode placed before the value |
183
181
  | `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>>` | No | `-` | - |
184
- | `styles` | `{ root?: StyleProp<ViewStyle>; content?: StyleProp<ViewStyle>; }` | No | `-` | Apply styles to the container and content. |
182
+ | `styles` | `{ root?: StyleProp<ViewStyle>; content?: StyleProp<ViewStyle>; }` | No | `-` | Custom styles for individual elements of the Chip component |
185
183
  | `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID Used to locate this element in unit and end-to-end tests. Used to locate this view in end-to-end tests. |
186
184
  | `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
187
185
  | `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
@@ -201,7 +199,7 @@ function Example() {
201
199
 
202
200
  | Selector | Static class name | Description |
203
201
  | --- | --- | --- |
204
- | `root` | `-` | - |
205
- | `content` | `-` | - |
202
+ | `root` | `-` | Root element |
203
+ | `content` | `-` | Content element |
206
204
 
207
205
 
@@ -97,13 +97,6 @@ function Horizontal() {
97
97
  | `key` | `Key \| null` | No | `-` | - |
98
98
  | `maxHeight` | `number` | No | `-` | Max height of the content. Overflow content will be scrollable. |
99
99
  | `maxWidth` | `number` | No | `-` | Max width of the content. Overflow content will be scrollable. |
100
- | `padding` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Apply padding on all sides. |
101
- | `paddingBottom` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Apply padding on the bottom side. |
102
- | `paddingEnd` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Apply padding on the end side. |
103
- | `paddingStart` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Apply padding on the start side. |
104
- | `paddingTop` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Apply padding on the top side. |
105
- | `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Apply padding on the start and end sides. |
106
- | `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Apply padding on the top and bottom sides. |
107
100
  | `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
108
101
  | `scrollViewProps` | `ScrollViewProps` | No | `-` | RN ScrollView props. Use with caution as it might break default settings. |
109
102
  | `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 |
@@ -276,7 +276,7 @@ function BorderlessExample() {
276
276
  | `setOpen` | `((open: boolean \| ((open: boolean) => boolean)) => void)` | No | `-` | Callback to update the open state |
277
277
  | `startNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Adds content to the start of the inner input. Refer to diagram for location of startNode in InputStack component |
278
278
  | `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>>` | No | `-` | Inline styles for the root element |
279
- | `styles` | `{ root?: StyleProp<ViewStyle>; control?: StyleProp<ViewStyle>; controlStartNode?: StyleProp<ViewStyle>; controlInputNode?: StyleProp<ViewStyle>; controlValueNode?: StyleProp<ViewStyle>; controlLabelNode?: StyleProp<ViewStyle>; controlHelperTextNode?: StyleProp<ViewStyle>; controlEndNode?: StyleProp<ViewStyle>; controlBlendStyles?: InteractableBlendStyles; dropdown?: StyleProp<ViewStyle>; option?: StyleProp<ViewStyle>; optionCell?: StyleProp<ViewStyle>; optionContent?: StyleProp<ViewStyle>; optionLabel?: StyleProp<ViewStyle>; optionDescription?: StyleProp<ViewStyle>; optionBlendStyles?: InteractableBlendStyles \| undefined; selectAllDivider?: StyleProp<ViewStyle>; emptyContentsContainer?: StyleProp<ViewStyle>; emptyContentsText?: StyleProp<ViewStyle>; optionGroup?: StyleProp<ViewStyle>; } \| undefined` | No | `-` | Custom styles for different parts of the select |
279
+ | `styles` | `{ root?: StyleProp<ViewStyle>; control?: StyleProp<ViewStyle>; controlStartNode?: StyleProp<ViewStyle>; controlInputNode?: StyleProp<ViewStyle>; controlValueNode?: StyleProp<ViewStyle>; controlLabelNode?: StyleProp<ViewStyle>; controlHelperTextNode?: StyleProp<ViewStyle>; controlEndNode?: StyleProp<ViewStyle>; controlBlendStyles?: InteractableBlendStyles; dropdown?: StyleProp<ViewStyle>; option?: StyleProp<ViewStyle>; optionCell?: StyleProp<ViewStyle>; optionContent?: StyleProp<ViewStyle>; optionLabel?: StyleProp<ViewStyle>; optionDescription?: StyleProp<ViewStyle>; optionBlendStyles?: InteractableBlendStyles \| undefined; selectAllDivider?: StyleProp<ViewStyle>; emptyContentsContainer?: StyleProp<ViewStyle>; emptyContentsText?: StyleProp<ViewStyle>; optionGroup?: StyleProp<ViewStyle>; } \| undefined` | No | `-` | Custom styles for individual elements of the Select component |
280
280
  | `testID` | `string` | No | `-` | Test ID for the root element |
281
281
  | `type` | `multi \| single` | No | `-` | Whether the select allows single or multiple selections |
282
282
  | `variant` | `primary \| secondary \| positive \| negative \| foregroundMuted \| foreground` | No | `-` | Determines the sentiment of the input. Because we allow startContent and endContent to be custom ReactNode, the content placed inside these slots will not change colors according to the variant. You will have to add that yourself |
@@ -286,25 +286,25 @@ function BorderlessExample() {
286
286
 
287
287
  | Selector | Static class name | Description |
288
288
  | --- | --- | --- |
289
- | `root` | `-` | root element |
290
- | `control` | `-` | control element |
291
- | `controlStartNode` | `-` | start node element |
292
- | `controlInputNode` | `-` | input node element |
293
- | `controlValueNode` | `-` | value node element |
294
- | `controlLabelNode` | `-` | label node element |
295
- | `controlHelperTextNode` | `-` | helper text node element |
296
- | `controlEndNode` | `-` | end node element |
289
+ | `root` | `-` | Root element |
290
+ | `control` | `-` | Control element |
291
+ | `controlStartNode` | `-` | Start node element |
292
+ | `controlInputNode` | `-` | Input node element |
293
+ | `controlValueNode` | `-` | Value node element |
294
+ | `controlLabelNode` | `-` | Label node element |
295
+ | `controlHelperTextNode` | `-` | Helper text node element |
296
+ | `controlEndNode` | `-` | End node element |
297
297
  | `controlBlendStyles` | `-` | Blend styles for control interactivity |
298
- | `dropdown` | `-` | dropdown container |
299
- | `option` | `-` | individual options |
300
- | `optionCell` | `-` | option cell element |
301
- | `optionContent` | `-` | option content wrapper |
302
- | `optionLabel` | `-` | option label element |
303
- | `optionDescription` | `-` | option description element |
304
- | `optionBlendStyles` | `-` | Blend styles for option interactivity |
305
- | `selectAllDivider` | `-` | select all divider element |
306
- | `emptyContentsContainer` | `-` | empty contents container element |
307
- | `emptyContentsText` | `-` | empty contents text element |
308
- | `optionGroup` | `-` | option group element |
298
+ | `dropdown` | `-` | Dropdown container element |
299
+ | `option` | `-` | Option element |
300
+ | `optionCell` | `-` | Option cell element |
301
+ | `optionContent` | `-` | Option content wrapper |
302
+ | `optionLabel` | `-` | Option label element |
303
+ | `optionDescription` | `-` | Option description element |
304
+ | `optionBlendStyles` | `-` | Option blend styles for interactivity |
305
+ | `selectAllDivider` | `-` | Select all divider element |
306
+ | `emptyContentsContainer` | `-` | Empty contents container element |
307
+ | `emptyContentsText` | `-` | Empty contents text element |
308
+ | `optionGroup` | `-` | Option group element |
309
309
 
310
310
 
@@ -267,7 +267,7 @@ The `ContentCellFallback` component provides loading state representations of `C
267
267
  | `selected` | `boolean` | No | `-` | Is the cell selected? Will apply a background and selected accessory. |
268
268
  | `spacingVariant` | `compact \| normal \| condensed` | No | `'normal'` | Spacing variant configuration. Deprecated value: compact. Prefer condensed. When spacingVariant=normal: 1. min-height is 80px 2. padding is var(--space-2) var(--space-3) 3. border-radius is var(--borderRadius-200) When spacingVariant=compact: 1. same as spacingVariant=normal, except min-height is 40px When spacingVariant=condensed: 1. min-height is undefined 2. padding is var(--space-1) var(--space-2) 3. border-radius is var(--borderRadius-0) 4. subtitle uses label1 5. title wraps to 2 lines regardless of description content |
269
269
  | `style` | `false \| RegisteredStyle<ViewStyle> \| Value \| AnimatedInterpolation<string \| number> \| WithAnimatedObject<ViewStyle> \| WithAnimatedArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>> \| readonly (Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>)[]> \| null` | No | `-` | - |
270
- | `styles` | `{ root?: StyleProp<ViewStyle>; media?: StyleProp<ViewStyle>; accessory?: StyleProp<ViewStyle>; contentContainer?: StyleProp<ViewStyle>; pressable?: StyleProp<ViewStyle>; mainContent?: StyleProp<ViewStyle>; title?: StyleProp<TextStyle>; subtitle?: StyleProp<TextStyle>; metaContainer?: StyleProp<ViewStyle>; meta?: StyleProp<TextStyle>; description?: StyleProp<TextStyle>; }` | No | `-` | Styles for the default subcomponents. Ignored when the corresponding xxNode prop is used. |
270
+ | `styles` | `{ root?: StyleProp<ViewStyle>; media?: StyleProp<ViewStyle>; accessory?: StyleProp<ViewStyle>; contentContainer?: StyleProp<ViewStyle>; pressable?: StyleProp<ViewStyle>; mainContent?: StyleProp<ViewStyle>; title?: StyleProp<TextStyle>; subtitle?: StyleProp<TextStyle>; metaContainer?: StyleProp<ViewStyle>; meta?: StyleProp<TextStyle>; description?: StyleProp<TextStyle>; }` | No | `-` | Styles for subcomponents, ignored when the corresponding xxNode prop is used |
271
271
  | `subtitle` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Subtitle of content. Max 1 line, otherwise will truncate. |
272
272
  | `subtitleNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | React node to render subtitle. Takes precedence over subtitle. When provided, styles.subtitle is not applied. |
273
273
  | `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Used to locate this view in end-to-end tests. 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 |
@@ -288,16 +288,16 @@ The `ContentCellFallback` component provides loading state representations of `C
288
288
 
289
289
  | Selector | Static class name | Description |
290
290
  | --- | --- | --- |
291
- | `root` | `-` | - |
292
- | `media` | `-` | - |
293
- | `accessory` | `-` | - |
294
- | `contentContainer` | `-` | - |
295
- | `pressable` | `-` | - |
296
- | `mainContent` | `-` | - |
297
- | `title` | `-` | - |
298
- | `subtitle` | `-` | - |
299
- | `metaContainer` | `-` | - |
300
- | `meta` | `-` | - |
301
- | `description` | `-` | - |
291
+ | `root` | `-` | Root element |
292
+ | `media` | `-` | Media element |
293
+ | `accessory` | `-` | Accessory element |
294
+ | `contentContainer` | `-` | Content container element |
295
+ | `pressable` | `-` | Pressable wrapper element |
296
+ | `mainContent` | `-` | Main content element |
297
+ | `title` | `-` | Title text element |
298
+ | `subtitle` | `-` | Subtitle text element |
299
+ | `metaContainer` | `-` | Meta container element |
300
+ | `meta` | `-` | Meta text element |
301
+ | `description` | `-` | Description text element |
302
302
 
303
303
 
@@ -609,7 +609,6 @@ import { DataCard } from '@coinbase/cds-mobile/alpha/data-card';
609
609
  | `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
610
610
  | `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
611
611
  | `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
612
- | `analyticsId` | `string` | No | `-` | - |
613
612
  | `aspectRatio` | `string \| number` | No | `-` | - |
614
613
  | `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). |
615
614
  | `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
@@ -643,7 +642,6 @@ import { DataCard } from '@coinbase/cds-mobile/alpha/data-card';
643
642
  | `disabled` | `boolean` | No | `-` | Is the element currently disabled. Whether the press behavior is disabled. |
644
643
  | `display` | `flex \| none` | No | `-` | - |
645
644
  | `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. Is the element elevated. |
646
- | `eventConfig` | `EventHandlerCustomConfig` | No | `-` | - |
647
645
  | `feedback` | `none \| light \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
648
646
  | `flexBasis` | `string \| number` | No | `-` | - |
649
647
  | `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
@@ -727,10 +725,10 @@ import { DataCard } from '@coinbase/cds-mobile/alpha/data-card';
727
725
 
728
726
  | Selector | Static class name | Description |
729
727
  | --- | --- | --- |
730
- | `layoutContainer` | `-` | - |
731
- | `headerContainer` | `-` | - |
732
- | `textContainer` | `-` | - |
733
- | `titleContainer` | `-` | - |
734
- | `root` | `-` | - |
728
+ | `layoutContainer` | `-` | Layout container element |
729
+ | `headerContainer` | `-` | Header container element |
730
+ | `textContainer` | `-` | Text container element |
731
+ | `titleContainer` | `-` | Title container element |
732
+ | `root` | `-` | Root element |
735
733
 
736
734
 
@@ -137,8 +137,8 @@ function CustomizeStyle() {
137
137
  | `max` | `number` | No | `99` | If a badge count is greater than max, it will truncate the numbers so its max+ |
138
138
  | `overlap` | `circular` | No | `-` | Indicates what shape Dot is overlapping |
139
139
  | `pin` | `top-end` | No | `-` | Position of dot relative to its parent |
140
- | `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>>` | No | `-` | Custom styles for the root element. |
141
- | `styles` | `{ root?: StyleProp<ViewStyle>; container?: StyleProp<ViewStyle>; text?: StyleProp<TextStyle>; }` | No | `-` | Custom styles for the component. |
140
+ | `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>>` | No | `-` | - |
141
+ | `styles` | `{ root?: StyleProp<ViewStyle>; container?: StyleProp<ViewStyle>; text?: StyleProp<TextStyle>; }` | No | `-` | Custom styles for individual elements of the DotCount component |
142
142
  | `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 |
143
143
  | `variant` | `negative` | No | `negative` | Background color of dot |
144
144
 
@@ -147,8 +147,8 @@ function CustomizeStyle() {
147
147
 
148
148
  | Selector | Static class name | Description |
149
149
  | --- | --- | --- |
150
- | `root` | `-` | root element. |
151
- | `container` | `-` | container element. |
152
- | `text` | `-` | text element. |
150
+ | `root` | `-` | Root element |
151
+ | `container` | `-` | Container element |
152
+ | `text` | `-` | Text element |
153
153
 
154
154
 
@@ -49,16 +49,9 @@ Mobile apps cache font files in the native build, so you must rebuild your app a
49
49
  | `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `primary` | Color of the icon when used as a foreground. |
50
50
  | `dangerouslySetColor` | `string \| AnimatedInterpolation<string>` | No | `-` | - |
51
51
  | `fallback` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `null` | Fallback element to render if unable to find an icon with matching name |
52
- | `padding` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Apply padding on all sides. |
53
- | `paddingBottom` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Apply padding on the bottom side. |
54
- | `paddingEnd` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Apply padding on the end side. |
55
- | `paddingStart` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Apply padding on the start side. |
56
- | `paddingTop` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Apply padding on the top side. |
57
- | `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Apply padding on the start and end sides. |
58
- | `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Apply padding on the top and bottom sides. |
59
52
  | `size` | `s \| l \| xs \| m` | No | `m` | Size for a given icon. |
60
53
  | `style` | `false \| Value \| AnimatedInterpolation<string \| number> \| RegisteredStyle<TextStyle> \| WithAnimatedObject<TextStyle> \| WithAnimatedArray<Falsy \| TextStyle \| RegisteredStyle<TextStyle> \| RecursiveArray<Falsy \| TextStyle \| RegisteredStyle<TextStyle>> \| readonly (Falsy \| TextStyle \| RegisteredStyle<TextStyle>)[]> \| null` | No | `-` | - |
61
- | `styles` | `{ root?: StyleProp<ViewStyle>; icon?: StyleProp<TextStyle>; }` | No | `-` | - |
54
+ | `styles` | `{ root?: StyleProp<ViewStyle>; icon?: StyleProp<TextStyle>; }` | No | `-` | Custom styles for individual elements of the Icon component |
62
55
  | `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 |
63
56
 
64
57
 
@@ -66,7 +59,7 @@ Mobile apps cache font files in the native build, so you must rebuild your app a
66
59
 
67
60
  | Selector | Static class name | Description |
68
61
  | --- | --- | --- |
69
- | `root` | `-` | - |
70
- | `icon` | `-` | - |
62
+ | `root` | `-` | Outer Box wrapper element |
63
+ | `icon` | `-` | Inner icon glyph Text element |
71
64
 
72
65
 
@@ -246,7 +246,6 @@ An icon button with a badge showing the notification count. Uses `DotCount` to d
246
246
  | `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
247
247
  | `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
248
248
  | `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
249
- | `analyticsId` | `string` | No | `-` | - |
250
249
  | `aspectRatio` | `string \| number` | No | `-` | - |
251
250
  | `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). |
252
251
  | `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
@@ -280,7 +279,6 @@ An icon button with a badge showing the notification count. Uses `DotCount` to d
280
279
  | `disabled` | `boolean` | No | `-` | Is the element currently disabled. Mark the button as disabled. |
281
280
  | `display` | `flex \| none` | No | `-` | - |
282
281
  | `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. Is the element elevated. |
283
- | `eventConfig` | `EventHandlerCustomConfig` | No | `-` | - |
284
282
  | `feedback` | `none \| light \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
285
283
  | `flexBasis` | `string \| number` | No | `-` | - |
286
284
  | `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
@@ -76,7 +76,6 @@ function Example() {
76
76
  | `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
77
77
  | `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
78
78
  | `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
79
- | `analyticsId` | `string` | No | `-` | - |
80
79
  | `aspectRatio` | `string \| number` | No | `-` | - |
81
80
  | `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). |
82
81
  | `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
@@ -112,7 +111,6 @@ function Example() {
112
111
  | `display` | `flex \| none` | No | `-` | - |
113
112
  | `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. Is the element elevated. |
114
113
  | `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | ReactNode placed after the value |
115
- | `eventConfig` | `EventHandlerCustomConfig` | No | `-` | - |
116
114
  | `feedback` | `none \| light \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
117
115
  | `flexBasis` | `string \| number` | No | `-` | - |
118
116
  | `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
@@ -176,7 +174,7 @@ function Example() {
176
174
  | `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
177
175
  | `start` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | ReactNode placed before the value |
178
176
  | `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>>` | No | `-` | - |
179
- | `styles` | `{ root?: StyleProp<ViewStyle>; content?: StyleProp<ViewStyle>; }` | No | `-` | Apply styles to the container and content. |
177
+ | `styles` | `{ root?: StyleProp<ViewStyle>; content?: StyleProp<ViewStyle>; }` | No | `-` | Custom styles for individual elements of the Chip component |
180
178
  | `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID Used to locate this element in unit and end-to-end tests. Used to locate this view in end-to-end tests. |
181
179
  | `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
182
180
  | `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
@@ -755,7 +755,7 @@ Mapping to `styles` keys:
755
755
  | `selected` | `boolean` | No | `-` | Is the cell selected? Will apply a background and selected accessory. |
756
756
  | `spacingVariant` | `compact \| normal \| condensed` | No | `'normal'` | Spacing variant configuration. Deprecated value: compact. Prefer condensed. When spacingVariant=normal: 1. min-height is 80px 2. padding is var(--space-2) var(--space-3) 3. border-radius is var(--borderRadius-200) 4. when there is a description, titles numberOfLines={1} otherwise titles numberOfLines={2} 5. description and subdetail have font body When spacingVariant=compact: 1. same as spacingVariant=normal, except min-height is 40px When spacingVariant=condensed: 1. min-height is undefined 2. padding is var(--space-1) var(--space-2) 3. border-radius is --borderRadius-0 4. titles numberOfLines={2} 5. description and subdetail have font label2 |
757
757
  | `style` | `false \| RegisteredStyle<ViewStyle> \| Value \| AnimatedInterpolation<string \| number> \| WithAnimatedObject<ViewStyle> \| WithAnimatedArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>> \| readonly (Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>)[]> \| null` | No | `-` | - |
758
- | `styles` | `({ root?: StyleProp<ViewStyle>; contentContainer?: StyleProp<ViewStyle>; topContent?: StyleProp<ViewStyle>; bottomContent?: StyleProp<ViewStyle>; pressable?: StyleProp<ViewStyle>; media?: StyleProp<ViewStyle>; childrenContainer?: StyleProp<ViewStyle>; intermediary?: StyleProp<ViewStyle>; end?: StyleProp<ViewStyle>; accessory?: StyleProp<ViewStyle>; } & { root?: StyleProp<ViewStyle>; media?: StyleProp<ViewStyle>; intermediary?: StyleProp<ViewStyle>; end?: StyleProp<ViewStyle>; accessory?: StyleProp<ViewStyle>; contentContainer?: StyleProp<ViewStyle>; pressable?: StyleProp<ViewStyle>; mainContent?: StyleProp<ViewStyle>; titleStack?: StyleProp<ViewStyle>; titleStackContainer?: StyleProp<ViewStyle>; helperText?: StyleProp<ViewStyle>; title?: StyleProp<TextStyle>; subtitle?: StyleProp<TextStyle>; description?: StyleProp<TextStyle>; })` | No | `-` | Styles for the components Styles for default subcomponents. Ignored when the corresponding xxNode prop is used. |
758
+ | `styles` | `({ root?: StyleProp<ViewStyle>; contentContainer?: StyleProp<ViewStyle>; topContent?: StyleProp<ViewStyle>; bottomContent?: StyleProp<ViewStyle>; pressable?: StyleProp<ViewStyle>; media?: StyleProp<ViewStyle>; childrenContainer?: StyleProp<ViewStyle>; intermediary?: StyleProp<ViewStyle>; end?: StyleProp<ViewStyle>; accessory?: StyleProp<ViewStyle>; } & { root?: StyleProp<ViewStyle>; media?: StyleProp<ViewStyle>; intermediary?: StyleProp<ViewStyle>; end?: StyleProp<ViewStyle>; accessory?: StyleProp<ViewStyle>; contentContainer?: StyleProp<ViewStyle>; pressable?: StyleProp<ViewStyle>; mainContent?: StyleProp<ViewStyle>; titleStack?: StyleProp<ViewStyle>; titleStackContainer?: StyleProp<ViewStyle>; helperText?: StyleProp<ViewStyle>; title?: StyleProp<TextStyle>; subtitle?: StyleProp<TextStyle>; description?: StyleProp<TextStyle>; })` | No | `-` | Custom styles for individual elements of the Cell component Styles for subcomponents, ignored when the corresponding xxNode prop is used |
759
759
  | `subdetail` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Subdetail providing more information. This prop is only intended to accept a string or Text component; other use cases, while allowed, are not supported and may result in unexpected behavior. For arbitrary content, use subdetailNode. |
760
760
  | `subdetailFont` | `inherit \| FontFamily` | No | `-` | Font to apply to the subdetail text. |
761
761
  | `subdetailNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | React node to render subdetail. Takes precedence over subdetail. |
@@ -780,22 +780,22 @@ Mapping to `styles` keys:
780
780
 
781
781
  | Selector | Static class name | Description |
782
782
  | --- | --- | --- |
783
- | `root` | `-` | - |
784
- | `contentContainer` | `-` | - |
785
- | `topContent` | `-` | - |
786
- | `bottomContent` | `-` | - |
787
- | `pressable` | `-` | - |
788
- | `media` | `-` | - |
789
- | `childrenContainer` | `-` | Wrapper around children inside the top content row (controls flex behavior). |
790
- | `intermediary` | `-` | - |
791
- | `end` | `-` | Applied to the container of detail or action |
792
- | `accessory` | `-` | - |
793
- | `mainContent` | `-` | - |
794
- | `titleStack` | `-` | Applied to the VStack of title/subtitle/description. |
795
- | `titleStackContainer` | `-` | Applied to the Box that wraps around titleStack (controls flex behavior). |
796
- | `helperText` | `-` | - |
797
- | `title` | `-` | - |
798
- | `subtitle` | `-` | - |
799
- | `description` | `-` | - |
783
+ | `root` | `-` | Root element |
784
+ | `contentContainer` | `-` | Content container element |
785
+ | `topContent` | `-` | Top content element |
786
+ | `bottomContent` | `-` | Bottom content element |
787
+ | `pressable` | `-` | Pressable wrapper element |
788
+ | `media` | `-` | Media element |
789
+ | `childrenContainer` | `-` | Children container wrapper, controls flex behavior |
790
+ | `intermediary` | `-` | Intermediary element |
791
+ | `end` | `-` | End element (detail or action container) End element |
792
+ | `accessory` | `-` | Accessory element |
793
+ | `mainContent` | `-` | Main content element |
794
+ | `titleStack` | `-` | Title stack element (title/subtitle/description VStack) |
795
+ | `titleStackContainer` | `-` | Title stack container wrapper, controls flex behavior |
796
+ | `helperText` | `-` | Helper text element |
797
+ | `title` | `-` | Title text element |
798
+ | `subtitle` | `-` | Subtitle text element |
799
+ | `description` | `-` | Description text element |
800
800
 
801
801