@coinbase/cds-mcp-server 9.0.0-rc.1 → 9.0.0-rc.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 (96) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/mcp-docs/mobile/components/Alert.txt +1 -1
  3. package/mcp-docs/mobile/components/AreaChart.txt +13 -13
  4. package/mcp-docs/mobile/components/Avatar.txt +13 -13
  5. package/mcp-docs/mobile/components/AvatarButton.txt +14 -14
  6. package/mcp-docs/mobile/components/Banner.txt +14 -14
  7. package/mcp-docs/mobile/components/BarChart.txt +13 -13
  8. package/mcp-docs/mobile/components/Box.txt +13 -13
  9. package/mcp-docs/mobile/components/BrowserBar.txt +13 -13
  10. package/mcp-docs/mobile/components/Button.txt +16 -16
  11. package/mcp-docs/mobile/components/Calendar.txt +13 -13
  12. package/mcp-docs/mobile/components/Carousel.txt +13 -13
  13. package/mcp-docs/mobile/components/CartesianChart.txt +13 -13
  14. package/mcp-docs/mobile/components/CellMedia.txt +2 -2
  15. package/mcp-docs/mobile/components/CheckboxCell.txt +14 -14
  16. package/mcp-docs/mobile/components/Chip.txt +14 -14
  17. package/mcp-docs/mobile/components/Coachmark.txt +13 -13
  18. package/mcp-docs/mobile/components/ContainedAssetCard.txt +2 -2
  19. package/mcp-docs/mobile/components/ContentCard.txt +13 -13
  20. package/mcp-docs/mobile/components/ContentCardBody.txt +13 -13
  21. package/mcp-docs/mobile/components/ContentCardFooter.txt +13 -13
  22. package/mcp-docs/mobile/components/ContentCardHeader.txt +13 -13
  23. package/mcp-docs/mobile/components/ContentCell.txt +14 -14
  24. package/mcp-docs/mobile/components/ControlGroup.txt +13 -13
  25. package/mcp-docs/mobile/components/DataCard.txt +14 -14
  26. package/mcp-docs/mobile/components/DateInput.txt +6 -6
  27. package/mcp-docs/mobile/components/DatePicker.txt +6 -6
  28. package/mcp-docs/mobile/components/Divider.txt +13 -13
  29. package/mcp-docs/mobile/components/DotSymbol.txt +1 -1
  30. package/mcp-docs/mobile/components/Fallback.txt +12 -12
  31. package/mcp-docs/mobile/components/HStack.txt +13 -13
  32. package/mcp-docs/mobile/components/HeroSquare.txt +1 -1
  33. package/mcp-docs/mobile/components/Icon.txt +1 -1
  34. package/mcp-docs/mobile/components/IconButton.txt +15 -15
  35. package/mcp-docs/mobile/components/InputChip.txt +14 -14
  36. package/mcp-docs/mobile/components/Interactable.txt +13 -13
  37. package/mcp-docs/mobile/components/Legend.txt +13 -13
  38. package/mcp-docs/mobile/components/LineChart.txt +13 -13
  39. package/mcp-docs/mobile/components/Link.txt +15 -15
  40. package/mcp-docs/mobile/components/ListCell.txt +14 -14
  41. package/mcp-docs/mobile/components/Lottie.txt +13 -13
  42. package/mcp-docs/mobile/components/LottieStatusAnimation.txt +2 -2
  43. package/mcp-docs/mobile/components/MediaCard.txt +14 -14
  44. package/mcp-docs/mobile/components/MediaChip.txt +14 -14
  45. package/mcp-docs/mobile/components/MessagingCard.txt +14 -14
  46. package/mcp-docs/mobile/components/ModalFooter.txt +13 -13
  47. package/mcp-docs/mobile/components/ModalHeader.txt +13 -13
  48. package/mcp-docs/mobile/components/MultiContentModule.txt +13 -13
  49. package/mcp-docs/mobile/components/NavigationTitle.txt +15 -15
  50. package/mcp-docs/mobile/components/NavigationTitleSelect.txt +15 -15
  51. package/mcp-docs/mobile/components/NudgeCard.txt +3 -3
  52. package/mcp-docs/mobile/components/Numpad.txt +14 -14
  53. package/mcp-docs/mobile/components/Overlay.txt +13 -13
  54. package/mcp-docs/mobile/components/PageFooter.txt +13 -13
  55. package/mcp-docs/mobile/components/PageHeader.txt +13 -13
  56. package/mcp-docs/mobile/components/PercentageBarChart.txt +13 -13
  57. package/mcp-docs/mobile/components/PeriodSelector.txt +13 -13
  58. package/mcp-docs/mobile/components/Pictogram.txt +1 -1
  59. package/mcp-docs/mobile/components/Pressable.txt +14 -14
  60. package/mcp-docs/mobile/components/RadioCell.txt +14 -14
  61. package/mcp-docs/mobile/components/RemoteImage.txt +1 -1
  62. package/mcp-docs/mobile/components/RollingNumber.txt +15 -15
  63. package/mcp-docs/mobile/components/SearchInput.txt +6 -6
  64. package/mcp-docs/mobile/components/SegmentedTabs.txt +13 -13
  65. package/mcp-docs/mobile/components/SelectChip.txt +14 -14
  66. package/mcp-docs/mobile/components/SelectChipAlpha.txt +1 -1
  67. package/mcp-docs/mobile/components/SelectOption.txt +1 -1
  68. package/mcp-docs/mobile/components/SlideButton.txt +13 -13
  69. package/mcp-docs/mobile/components/SpotIcon.txt +1 -1
  70. package/mcp-docs/mobile/components/Stepper.txt +13 -13
  71. package/mcp-docs/mobile/components/TabLabel.txt +15 -15
  72. package/mcp-docs/mobile/components/TabNavigation.txt +13 -13
  73. package/mcp-docs/mobile/components/TabbedChips.txt +13 -13
  74. package/mcp-docs/mobile/components/TabbedChipsAlpha.txt +13 -13
  75. package/mcp-docs/mobile/components/Tabs.txt +13 -13
  76. package/mcp-docs/mobile/components/Tag.txt +17 -17
  77. package/mcp-docs/mobile/components/Text.txt +15 -15
  78. package/mcp-docs/mobile/components/TextInput.txt +6 -6
  79. package/mcp-docs/mobile/components/Toast.txt +13 -13
  80. package/mcp-docs/mobile/components/VStack.txt +13 -13
  81. package/mcp-docs/web/components/Alert.txt +1 -1
  82. package/mcp-docs/web/components/Banner.txt +1 -1
  83. package/mcp-docs/web/components/Button.txt +2 -2
  84. package/mcp-docs/web/components/CellMedia.txt +1 -1
  85. package/mcp-docs/web/components/DotSymbol.txt +1 -1
  86. package/mcp-docs/web/components/FullscreenAlert.txt +1 -1
  87. package/mcp-docs/web/components/HeroSquare.txt +1 -1
  88. package/mcp-docs/web/components/Icon.txt +1 -1
  89. package/mcp-docs/web/components/IconButton.txt +1 -1
  90. package/mcp-docs/web/components/NudgeCard.txt +1 -1
  91. package/mcp-docs/web/components/Pictogram.txt +1 -1
  92. package/mcp-docs/web/components/SpotIcon.txt +1 -1
  93. package/mcp-docs/web/components/TableCellFallback.txt +2 -2
  94. package/mcp-docs/web/components/Tag.txt +2 -2
  95. package/mcp-docs/web/components/TileButton.txt +1 -1
  96. package/package.json +1 -1
@@ -60,9 +60,9 @@ Used for displaying pictographic illustrations with accessibility hints.
60
60
  | Prop | Type | Required | Default | Description |
61
61
  | --- | --- | --- | --- | --- |
62
62
  | `illustration` | `ReactElement<PictogramBaseProps, string \| JSXElementConstructor<any>>` | Yes | `-` | - |
63
- | `name` | `filter \| search \| key \| pin \| 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 \| auto \| autoCar \| avatar \| average \| backArrow \| ballot \| ballotbox \| bandage \| bank \| barChartSimple \| barChartWindow \| base \| baseApps \| baseFeed \| baseLock \| 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 \| caretCollapse \| caretDown \| caretExpand \| 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 \| column \| comment \| commentPlus \| commerceProduct \| compass \| complianceProduct \| compose \| computerChip \| concierge \| conciergeBell \| config \| continuous \| 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 \| filterLineStack \| 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 \| loop \| 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 \| overPredictions \| pFPS \| paperAirplane \| paperclip \| participate \| participateProduct \| passKey \| passport \| pause \| pay \| payProduct \| paymentCard \| payments \| payouts \| paypal \| pencil \| peopleGroup \| peopleStar \| percentage \| perpetualSwap \| phone \| pieChartData \| pieChartWithArrow \| 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 \| underPredictions \| undo \| unfollowPeople \| unknown \| unlock \| upArrow \| upload \| usdc \| venturesProduct \| verifiedBadge \| verifiedPools \| verticalLine \| virus \| visible \| waasProduct \| wallet \| walletLogo \| walletProduct \| webhooks \| wellness \| wifi \| wind \| wireTransfer \| withdraw \| wrapToken \| xLogo` | Yes | `-` | - |
63
+ | `name` | `filter \| search \| key \| pin \| visible \| continuous \| auto \| column \| loop \| image \| menu \| list \| application \| document \| grid \| group \| warning \| error \| account \| activity \| add \| addPeople \| advancedMarketSelector \| advancedTradeProduct \| affiliates \| airdrop \| airdropAlt \| airdropCoins \| airdropParachute \| alien \| allTimeHigh \| allocation \| annotation \| api \| apiPlug \| apothecary \| appSwitcher \| apple \| appleLogo \| 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 \| baseLock \| 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 \| caretCollapse \| caretDown \| caretExpand \| 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 \| 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 \| filterLineStack \| 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 \| hamburger \| hammer \| heart \| helpCenterProduct \| helpCenterQuestionMark \| hiddenEye \| hockey \| home \| horizontalLine \| hospital \| hospitalCross \| hurricane \| ideal \| identityCard \| info \| initiator \| instagramLogo \| instantUnstakingClock \| institute \| institutionalProduct \| interest \| invisible \| invoice \| keyboard \| laptop \| leadChart \| leadCoin \| learningRewardsProduct \| light \| lightbulb \| lightning \| lightningBolt \| lineChartCrypto \| location \| lock \| login \| logout \| magnifyingGlass \| marketCap \| medal \| megaphone \| 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 \| overPredictions \| pFPS \| paperAirplane \| paperclip \| participate \| participateProduct \| passKey \| passport \| pause \| pay \| payProduct \| paymentCard \| payments \| payouts \| paypal \| pencil \| peopleGroup \| peopleStar \| percentage \| perpetualSwap \| phone \| pieChartData \| pieChartWithArrow \| 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 \| underPredictions \| undo \| unfollowPeople \| unknown \| unlock \| upArrow \| upload \| usdc \| venturesProduct \| verifiedBadge \| verifiedPools \| verticalLine \| virus \| waasProduct \| wallet \| walletLogo \| walletProduct \| webhooks \| wellness \| wifi \| wind \| wireTransfer \| withdraw \| wrapToken \| xLogo` | Yes | `-` | - |
64
64
  | `source` | `string \| number` | Yes | `-` | - |
65
- | `type` | `avatar \| image \| icon \| pictogram \| asset` | Yes | `-` | - |
65
+ | `type` | `image \| avatar \| icon \| pictogram \| asset` | Yes | `-` | - |
66
66
  | `active` | `boolean` | No | `-` | Whether the icon is active |
67
67
  | `cache` | `default \| reload \| force-cache \| only-if-cached` | No | `-` | Determines how the requests handles potentially cached responses. Not applicable to type=icon. |
68
68
  | `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 | `-` | - |
@@ -112,7 +112,7 @@ function CustomCheckboxCellExample() {
112
112
  | `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
113
113
  | `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
114
114
  | `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
115
- | `bottom` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
115
+ | `bottom` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
116
116
  | `checked` | `boolean` | No | `-` | Set the control to selected/on. |
117
117
  | `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 | `-` | - |
118
118
  | `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
@@ -126,9 +126,9 @@ function CustomCheckboxCellExample() {
126
126
  | `disabled` | `boolean` | No | `-` | Disable user interaction. Is the element currently disabled. |
127
127
  | `display` | `flex \| none \| contents` | No | `-` | - |
128
128
  | `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. |
129
- | `feedback` | `light \| none \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
130
- | `flexBasis` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
131
- | `flexDirection` | `column \| row \| row-reverse \| column-reverse` | No | `-` | - |
129
+ | `feedback` | `none \| normal \| light \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
130
+ | `flexBasis` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
131
+ | `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
132
132
  | `flexGrow` | `number` | No | `-` | - |
133
133
  | `flexShrink` | `number` | No | `-` | - |
134
134
  | `flexWrap` | `wrap \| nowrap \| wrap-reverse` | No | `-` | - |
@@ -137,10 +137,10 @@ function CustomCheckboxCellExample() {
137
137
  | `fontSize` | `inherit \| FontSize` | No | `-` | - |
138
138
  | `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
139
139
  | `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
140
- | `height` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
140
+ | `height` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
141
141
  | `indeterminate` | `boolean` | No | `-` | Enable indeterminate state. Useful when you want to indicate that sub-items of a control are partially filled. |
142
142
  | `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
143
- | `left` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
143
+ | `left` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
144
144
  | `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
145
145
  | `loading` | `boolean` | No | `-` | Is the element currenty loading. When set to true, will disable element from press and keyboard events Is the element currenty loading. |
146
146
  | `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
@@ -150,10 +150,10 @@ function CustomCheckboxCellExample() {
150
150
  | `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
151
151
  | `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
152
152
  | `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
153
- | `maxHeight` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
154
- | `maxWidth` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
155
- | `minHeight` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
156
- | `minWidth` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
153
+ | `maxHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
154
+ | `maxWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
155
+ | `minHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
156
+ | `minWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
157
157
  | `onChange` | `((value: CheckboxValue, checked?: boolean \| undefined) => void) \| undefined` | No | `-` | Toggle control selected state. |
158
158
  | `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
159
159
  | `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
@@ -183,7 +183,7 @@ function CustomCheckboxCellExample() {
183
183
  | `pressedBorderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
184
184
  | `readOnly` | `boolean` | No | `-` | Set the control to ready-only. Similar effect as disabled. |
185
185
  | `ref` | `null \| (instance: View \| null) => void \| RefObject<View \| null>` | No | `-` | - |
186
- | `right` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
186
+ | `right` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
187
187
  | `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
188
188
  | `styles` | `{ root?: StyleProp<ViewStyle>; checkboxContainer?: StyleProp<ViewStyle>; contentContainer?: StyleProp<ViewStyle>; title?: StyleProp<TextStyle>; description?: StyleProp<TextStyle>; }` | No | `-` | - |
189
189
  | `testID` | `string` | No | `-` | 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 |
@@ -191,13 +191,13 @@ function CustomCheckboxCellExample() {
191
191
  | `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
192
192
  | `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
193
193
  | `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
194
- | `top` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
194
+ | `top` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
195
195
  | `transform` | `string \| readonly (({ scaleX: AnimatableNumericValue; } & { scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { scaleX?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ perspective: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
196
196
  | `transparentWhileInactive` | `boolean` | No | `-` | Mark the background and border as transparent until the element is interacted with (hovered, pressed, etc). Must be used in conjunction with the pressed prop |
197
197
  | `transparentWhilePressed` | `boolean` | No | `-` | Mark the background and border as transparent even while element is interacted with (elevation underlay issue). Must be used in conjunction with the pressed prop |
198
- | `userSelect` | `auto \| none \| text \| contain \| all` | No | `-` | - |
198
+ | `userSelect` | `none \| auto \| text \| contain \| all` | No | `-` | - |
199
199
  | `value` | `string` | No | `-` | Value of the option. Useful for multiple choice. |
200
- | `width` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
200
+ | `width` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
201
201
  | `wrapperStyles` | `{ base?: StyleProp<ViewStyle>; pressed?: StyleProp<ViewStyle>; disabled?: StyleProp<ViewStyle>; }` | No | `-` | Apply styles to the outer container. |
202
202
  | `zIndex` | `number` | No | `-` | - |
203
203
 
@@ -150,7 +150,7 @@ function Example() {
150
150
  | `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
151
151
  | `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
152
152
  | `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
153
- | `bottom` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
153
+ | `bottom` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
154
154
  | `children` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | ReactNode placed in the center of the Chip |
155
155
  | `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 | `-` | - |
156
156
  | `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
@@ -163,9 +163,9 @@ function Example() {
163
163
  | `display` | `flex \| none \| contents` | No | `-` | - |
164
164
  | `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
165
  | `end` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | ReactNode placed after the value |
166
- | `feedback` | `light \| none \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
167
- | `flexBasis` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
168
- | `flexDirection` | `column \| row \| row-reverse \| column-reverse` | No | `-` | - |
166
+ | `feedback` | `none \| normal \| light \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
167
+ | `flexBasis` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
168
+ | `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
169
169
  | `flexGrow` | `number` | No | `-` | - |
170
170
  | `flexShrink` | `number` | No | `-` | - |
171
171
  | `flexWrap` | `wrap \| nowrap \| wrap-reverse` | No | `-` | - |
@@ -174,12 +174,12 @@ function Example() {
174
174
  | `fontSize` | `inherit \| FontSize` | No | `-` | - |
175
175
  | `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
176
176
  | `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
177
- | `height` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
177
+ | `height` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
178
178
  | `invertColorScheme` | `boolean` | No | `false` | Invert the foreground and background colors to emphasize the Chip. Depending on your theme, it may be dangerous to use this prop in conjunction with transparentWhileInactive. |
179
179
  | `inverted` | `boolean` | No | `false` | Invert the foreground and background colors to emphasize the Chip. Depending on your theme, it may be dangerous to use this prop in conjunction with transparentWhileInactive. |
180
180
  | `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
181
181
  | `key` | `Key \| null` | No | `-` | - |
182
- | `left` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
182
+ | `left` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
183
183
  | `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
184
184
  | `loading` | `boolean` | No | `-` | Is the element currenty loading. When set to true, will disable element from press and keyboard events Is the element currenty loading. |
185
185
  | `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
@@ -189,10 +189,10 @@ function Example() {
189
189
  | `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
190
190
  | `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
191
191
  | `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
192
- | `maxHeight` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
193
- | `maxWidth` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `200` | If text content overflows, it will get truncated with an ellipsis. |
194
- | `minHeight` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
195
- | `minWidth` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
192
+ | `maxHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
193
+ | `maxWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `200` | If text content overflows, it will get truncated with an ellipsis. |
194
+ | `minHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
195
+ | `minWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
196
196
  | `noScaleOnPress` | `boolean` | No | `-` | Dont scale element on press. |
197
197
  | `numberOfLines` | `number` | No | `1` | How many lines the text in the chip will be broken into. |
198
198
  | `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
@@ -222,7 +222,7 @@ function Example() {
222
222
  | `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
223
223
  | `position` | `absolute \| relative \| static` | No | `-` | - |
224
224
  | `ref` | `null \| RefObject<View \| null> \| (instance: View \| null) => void \| (() => VoidOrUndefinedOnly)` | 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). |
225
- | `right` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
225
+ | `right` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
226
226
  | `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
227
227
  | `start` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | ReactNode placed before the value |
228
228
  | `style` | `null \| false \| \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>>` | No | `-` | - |
@@ -232,12 +232,12 @@ function Example() {
232
232
  | `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
233
233
  | `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
234
234
  | `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
235
- | `top` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
235
+ | `top` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
236
236
  | `transform` | `string \| readonly (({ scaleX: AnimatableNumericValue; } & { scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { scaleX?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ perspective: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
237
237
  | `transparentWhileInactive` | `boolean` | No | `-` | Mark the background and border as transparent until the element is interacted with (hovered, pressed, etc). Must be used in conjunction with the pressed prop |
238
238
  | `transparentWhilePressed` | `boolean` | No | `-` | Mark the background and border as transparent even while element is interacted with (elevation underlay issue). Must be used in conjunction with the pressed prop |
239
- | `userSelect` | `auto \| none \| text \| contain \| all` | No | `-` | - |
240
- | `width` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
239
+ | `userSelect` | `none \| auto \| text \| contain \| all` | No | `-` | - |
240
+ | `width` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
241
241
  | `wrapperStyles` | `{ base?: StyleProp<ViewStyle>; pressed?: StyleProp<ViewStyle>; disabled?: StyleProp<ViewStyle>; }` | No | `-` | Apply styles to the outer container. |
242
242
  | `zIndex` | `number` | No | `-` | - |
243
243
 
@@ -82,7 +82,7 @@ import { Coachmark } from '@coinbase/cds-mobile/coachmark/Coachmark'
82
82
  | `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
83
83
  | `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
84
84
  | `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
85
- | `bottom` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
85
+ | `bottom` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
86
86
  | `checkbox` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Checkbox component to be rendered below the content |
87
87
  | `closeButtonAccessibilityLabel` | `string` | No | `-` | a11y label of the close button |
88
88
  | `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 | `-` | - |
@@ -90,8 +90,8 @@ import { Coachmark } from '@coinbase/cds-mobile/coachmark/Coachmark'
90
90
  | `dangerouslySetBackground` | `string` | No | `-` | - |
91
91
  | `display` | `flex \| none \| contents` | No | `-` | - |
92
92
  | `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
93
- | `flexBasis` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
94
- | `flexDirection` | `column \| row \| row-reverse \| column-reverse` | No | `-` | - |
93
+ | `flexBasis` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
94
+ | `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
95
95
  | `flexGrow` | `number` | No | `-` | - |
96
96
  | `flexShrink` | `number` | No | `-` | - |
97
97
  | `flexWrap` | `wrap \| nowrap \| wrap-reverse` | No | `-` | - |
@@ -100,10 +100,10 @@ import { Coachmark } from '@coinbase/cds-mobile/coachmark/Coachmark'
100
100
  | `fontSize` | `inherit \| FontSize` | No | `-` | - |
101
101
  | `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
102
102
  | `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
103
- | `height` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
103
+ | `height` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
104
104
  | `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
105
105
  | `key` | `Key \| null` | No | `-` | - |
106
- | `left` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
106
+ | `left` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
107
107
  | `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
108
108
  | `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
109
109
  | `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
@@ -112,11 +112,11 @@ import { Coachmark } from '@coinbase/cds-mobile/coachmark/Coachmark'
112
112
  | `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
113
113
  | `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
114
114
  | `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
115
- | `maxHeight` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
116
- | `maxWidth` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
115
+ | `maxHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
116
+ | `maxWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
117
117
  | `media` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Media of the Coachmark |
118
- | `minHeight` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
119
- | `minWidth` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
118
+ | `minHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
119
+ | `minWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
120
120
  | `onClose` | `(() => void)` | No | `-` | Callback function fired when close button is pressed |
121
121
  | `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
122
122
  | `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
@@ -142,7 +142,7 @@ import { Coachmark } from '@coinbase/cds-mobile/coachmark/Coachmark'
142
142
  | `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
143
143
  | `position` | `absolute \| relative \| static` | No | `-` | - |
144
144
  | `ref` | `null \| RefObject<View \| null> \| (instance: View \| null) => void \| (() => VoidOrUndefinedOnly)` | 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). |
145
- | `right` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
145
+ | `right` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
146
146
  | `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
147
147
  | `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 | `-` | - |
148
148
  | `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 view in end-to-end tests. |
@@ -150,10 +150,10 @@ import { Coachmark } from '@coinbase/cds-mobile/coachmark/Coachmark'
150
150
  | `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
151
151
  | `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
152
152
  | `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
153
- | `top` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
153
+ | `top` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
154
154
  | `transform` | `string \| readonly (({ scaleX: AnimatableNumericValue; } & { scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { scaleX?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ perspective: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
155
- | `userSelect` | `auto \| none \| text \| contain \| all` | No | `-` | - |
156
- | `width` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | Desired width of the Coachmark with respect to max width of windowWidth - spacing2 * 2 |
155
+ | `userSelect` | `none \| auto \| text \| contain \| all` | No | `-` | - |
156
+ | `width` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | Desired width of the Coachmark with respect to max width of windowWidth - spacing2 * 2 |
157
157
  | `zIndex` | `number` | No | `-` | - |
158
158
 
159
159
 
@@ -126,8 +126,8 @@ function Example() {
126
126
  | `title` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | Yes | `-` | Text or ReactNode to be displayed in TextHeadline |
127
127
  | `children` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Children to be rendered in the card |
128
128
  | `description` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Content to be displayed below the title |
129
- | `maxWidth` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
130
- | `minWidth` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
129
+ | `maxWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
130
+ | `minWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
131
131
  | `onPress` | `((event: GestureResponderEvent) => void) \| null` | No | `-` | Called when a single tap gesture is detected. |
132
132
  | `size` | `s \| l` | No | `'s'` | Variant for card size. Can be small or large. |
133
133
  | `subtitle` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Text or ReactNode to be displayed above Title |
@@ -342,14 +342,14 @@ When customizing card backgrounds, ensure sufficient color contrast between text
342
342
  | `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
343
343
  | `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
344
344
  | `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
345
- | `bottom` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
345
+ | `bottom` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
346
346
  | `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 | `-` | - |
347
347
  | `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
348
348
  | `dangerouslySetBackground` | `string` | No | `-` | - |
349
349
  | `display` | `flex \| none \| contents` | No | `-` | - |
350
350
  | `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
351
- | `flexBasis` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
352
- | `flexDirection` | `column \| row \| row-reverse \| column-reverse` | No | `-` | - |
351
+ | `flexBasis` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
352
+ | `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
353
353
  | `flexGrow` | `number` | No | `-` | - |
354
354
  | `flexShrink` | `number` | No | `-` | - |
355
355
  | `flexWrap` | `wrap \| nowrap \| wrap-reverse` | No | `-` | - |
@@ -358,10 +358,10 @@ When customizing card backgrounds, ensure sufficient color contrast between text
358
358
  | `fontSize` | `inherit \| FontSize` | No | `-` | - |
359
359
  | `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
360
360
  | `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
361
- | `height` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
361
+ | `height` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
362
362
  | `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
363
363
  | `key` | `Key \| null` | No | `-` | - |
364
- | `left` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
364
+ | `left` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
365
365
  | `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
366
366
  | `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
367
367
  | `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
@@ -370,10 +370,10 @@ When customizing card backgrounds, ensure sufficient color contrast between text
370
370
  | `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
371
371
  | `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
372
372
  | `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
373
- | `maxHeight` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
374
- | `maxWidth` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
375
- | `minHeight` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
376
- | `minWidth` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
373
+ | `maxHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
374
+ | `maxWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
375
+ | `minHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
376
+ | `minWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
377
377
  | `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
378
378
  | `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
379
379
  | `onPointerDown` | `((event: PointerEvent) => void)` | No | `-` | - |
@@ -398,7 +398,7 @@ When customizing card backgrounds, ensure sufficient color contrast between text
398
398
  | `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
399
399
  | `position` | `absolute \| relative \| static` | No | `-` | - |
400
400
  | `ref` | `null \| RefObject<View \| null> \| (instance: View \| null) => void \| (() => VoidOrUndefinedOnly)` | 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). |
401
- | `right` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
401
+ | `right` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
402
402
  | `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
403
403
  | `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 | `-` | - |
404
404
  | `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 view in end-to-end tests. |
@@ -406,10 +406,10 @@ When customizing card backgrounds, ensure sufficient color contrast between text
406
406
  | `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
407
407
  | `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
408
408
  | `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
409
- | `top` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
409
+ | `top` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
410
410
  | `transform` | `string \| readonly (({ scaleX: AnimatableNumericValue; } & { scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { scaleX?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ perspective: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
411
- | `userSelect` | `auto \| none \| text \| contain \| all` | No | `-` | - |
412
- | `width` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
411
+ | `userSelect` | `none \| auto \| text \| contain \| all` | No | `-` | - |
412
+ | `width` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
413
413
  | `zIndex` | `number` | No | `-` | - |
414
414
 
415
415
 
@@ -164,7 +164,7 @@ function Example() {
164
164
  | `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
165
165
  | `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
166
166
  | `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
167
- | `bottom` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
167
+ | `bottom` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
168
168
  | `children` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Custom content to display below the main content box (title/description/media). Use this when you need to render custom content that doesnt fit the standard media/title/description layout. |
169
169
  | `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 | `-` | - |
170
170
  | `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
@@ -172,8 +172,8 @@ function Example() {
172
172
  | `description` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Text or React node to display as the card description. Use a Text component to override default color and font. |
173
173
  | `display` | `flex \| none \| contents` | No | `-` | - |
174
174
  | `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
175
- | `flexBasis` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
176
- | `flexDirection` | `column \| row \| row-reverse \| column-reverse` | No | `-` | - |
175
+ | `flexBasis` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
176
+ | `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
177
177
  | `flexGrow` | `number` | No | `-` | - |
178
178
  | `flexShrink` | `number` | No | `-` | - |
179
179
  | `flexWrap` | `wrap \| nowrap \| wrap-reverse` | No | `-` | - |
@@ -182,11 +182,11 @@ function Example() {
182
182
  | `fontSize` | `inherit \| FontSize` | No | `-` | - |
183
183
  | `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
184
184
  | `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
185
- | `height` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
185
+ | `height` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
186
186
  | `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
187
187
  | `key` | `Key \| null` | No | `-` | - |
188
188
  | `label` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | - |
189
- | `left` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
189
+ | `left` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
190
190
  | `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
191
191
  | `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
192
192
  | `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
@@ -195,13 +195,13 @@ function Example() {
195
195
  | `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
196
196
  | `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
197
197
  | `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
198
- | `maxHeight` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
199
- | `maxWidth` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
198
+ | `maxHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
199
+ | `maxWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
200
200
  | `media` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | React node to display as media content (e.g., Image or RemoteImage). |
201
201
  | `mediaPlacement` | `top \| bottom \| end \| start` | No | `'top'` | Placement of the media content relative to the text content. |
202
202
  | `mediaPosition` | `top \| bottom \| left \| right` | No | `-` | - |
203
- | `minHeight` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
204
- | `minWidth` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
203
+ | `minHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
204
+ | `minWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
205
205
  | `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
206
206
  | `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
207
207
  | `onPointerDown` | `((event: PointerEvent) => void)` | No | `-` | - |
@@ -226,7 +226,7 @@ function Example() {
226
226
  | `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
227
227
  | `position` | `absolute \| relative \| static` | No | `-` | - |
228
228
  | `ref` | `null \| RefObject<View \| null> \| (instance: View \| null) => void \| (() => VoidOrUndefinedOnly)` | 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). |
229
- | `right` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
229
+ | `right` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
230
230
  | `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
231
231
  | `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 | `-` | - |
232
232
  | `styles` | `{ root?: StyleProp<ViewStyle>; contentContainer?: StyleProp<ViewStyle>; textContainer?: StyleProp<ViewStyle>; mediaContainer?: StyleProp<ViewStyle>; }` | No | `-` | - |
@@ -236,10 +236,10 @@ function Example() {
236
236
  | `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
237
237
  | `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
238
238
  | `title` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Text or React node to display as the card title. Use a Text component to override default color and font. |
239
- | `top` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
239
+ | `top` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
240
240
  | `transform` | `string \| readonly (({ scaleX: AnimatableNumericValue; } & { scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { scaleX?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ perspective: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
241
- | `userSelect` | `auto \| none \| text \| contain \| all` | No | `-` | - |
242
- | `width` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
241
+ | `userSelect` | `none \| auto \| text \| contain \| all` | No | `-` | - |
242
+ | `width` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
243
243
  | `zIndex` | `number` | No | `-` | - |
244
244
 
245
245
 
@@ -118,14 +118,14 @@ function Example() {
118
118
  | `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
119
119
  | `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
120
120
  | `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
121
- | `bottom` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
121
+ | `bottom` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
122
122
  | `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 | `-` | - |
123
123
  | `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
124
124
  | `dangerouslySetBackground` | `string` | No | `-` | - |
125
125
  | `display` | `flex \| none \| contents` | No | `-` | - |
126
126
  | `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
127
- | `flexBasis` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
128
- | `flexDirection` | `column \| row \| row-reverse \| column-reverse` | No | `-` | - |
127
+ | `flexBasis` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
128
+ | `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
129
129
  | `flexGrow` | `number` | No | `-` | - |
130
130
  | `flexShrink` | `number` | No | `-` | - |
131
131
  | `flexWrap` | `wrap \| nowrap \| wrap-reverse` | No | `-` | - |
@@ -134,10 +134,10 @@ function Example() {
134
134
  | `fontSize` | `inherit \| FontSize` | No | `-` | - |
135
135
  | `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
136
136
  | `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
137
- | `height` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
137
+ | `height` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
138
138
  | `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
139
139
  | `key` | `Key \| null` | No | `-` | - |
140
- | `left` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
140
+ | `left` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
141
141
  | `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
142
142
  | `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
143
143
  | `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
@@ -146,10 +146,10 @@ function Example() {
146
146
  | `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
147
147
  | `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
148
148
  | `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
149
- | `maxHeight` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
150
- | `maxWidth` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
151
- | `minHeight` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
152
- | `minWidth` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
149
+ | `maxHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
150
+ | `maxWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
151
+ | `minHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
152
+ | `minWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
153
153
  | `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
154
154
  | `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
155
155
  | `onPointerDown` | `((event: PointerEvent) => void)` | No | `-` | - |
@@ -174,7 +174,7 @@ function Example() {
174
174
  | `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
175
175
  | `position` | `absolute \| relative \| static` | No | `-` | - |
176
176
  | `ref` | `null \| RefObject<View \| null> \| (instance: View \| null) => void \| (() => VoidOrUndefinedOnly)` | 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). |
177
- | `right` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
177
+ | `right` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
178
178
  | `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
179
179
  | `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 | `-` | - |
180
180
  | `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 view in end-to-end tests. |
@@ -182,10 +182,10 @@ function Example() {
182
182
  | `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
183
183
  | `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
184
184
  | `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
185
- | `top` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
185
+ | `top` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
186
186
  | `transform` | `string \| readonly (({ scaleX: AnimatableNumericValue; } & { scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { scaleX?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ perspective: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
187
- | `userSelect` | `auto \| none \| text \| contain \| all` | No | `-` | - |
188
- | `width` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
187
+ | `userSelect` | `none \| auto \| text \| contain \| all` | No | `-` | - |
188
+ | `width` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
189
189
  | `zIndex` | `number` | No | `-` | - |
190
190
 
191
191