@coinbase/cds-mcp-server 8.52.2 → 8.53.1

package/mcp-docs/mobile/components/Combobox.txt

@@ -10,13 +10,35 @@ import { Combobox } from '@coinbase/cds-mobile/alpha/combobox'
 
 ## Examples
 
-### A note on search logic
+### Basics
 
-We use [fuse.js](https://www.fusejs.io/) to power the fuzzy search logic for Combobox. You can override this search logic with your own using the `filterFunction` prop.
+To start, you can provide a label, an array of options, control state.
 
-### Multi-Select
+```jsx
+function SingleSelect() {
+  const singleSelectOptions = [
+    { value: null, label: 'Remove selection' },
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+    { value: '3', label: 'Option 3' },
+  ];
+  const [value, setValue] = useState(null);
+
+  return (
+    <Combobox
+      label="Single Select"
+      onChange={setValue}
+      options={singleSelectOptions}
+      placeholder="Search..."
+      value={value}
+    />
+  );
+}
+```
+
+#### Multiple Selections
 
-Basic multi-selection combobox with search.
+You can also allow users to select multiple options with `type="multi"`.
 
 ```jsx
 function MultiSelect() {
@@ -26,11 +48,6 @@ function MultiSelect() {
     { value: '3', label: 'Option 3' },
     { value: '4', label: 'Option 4' },
     { value: '5', label: 'Option 5' },
-    { value: '6', label: 'Option 6' },
-    { value: '7', label: 'Option 7' },
-    { value: '8', label: 'Option 8' },
-    { value: '9', label: 'Option 9' },
-    { value: '10', label: 'Option 10' },
   ];
   const { value, onChange } = useMultiSelect({ initialValue: ['1'] });
 
@@ -47,56 +64,109 @@ function MultiSelect() {
 }
 ```
 
-### Single Select
+### Search
 
-Single selection combobox with an option to clear the current choice.
+We use [fuse.js](https://www.fusejs.io/) for fuzzy search by default. You can override with `filterFunction`.
 
 ```jsx
-function SingleSelect() {
-  const singleSelectOptions = [
-    { value: null, label: 'Remove selection' },
-    { value: '1', label: 'Option 1' },
-    { value: '2', label: 'Option 2' },
-    { value: '3', label: 'Option 3' },
+function CustomFilter() {
+  const cryptoOptions = [
+    { value: 'btc', label: 'Bitcoin', description: 'BTC • Digital Gold' },
+    { value: 'eth', label: 'Ethereum', description: 'ETH • Smart Contracts' },
+    { value: 'usdc', label: 'USD Coin', description: 'USDC • Stablecoin' },
+    { value: 'sol', label: 'Solana', description: 'SOL • High Performance' },
   ];
-  const [value, setValue] = useState(null);
+  const { value, onChange } = useMultiSelect({ initialValue: [] });
+
+  const filterFunction = (options, searchText) => {
+    const search = searchText.toLowerCase().trim();
+    if (!search) return options;
+    return options.filter((option) => {
+      const label = typeof option.label === 'string' ? option.label.toLowerCase() : '';
+      const description =
+        typeof option.description === 'string' ? option.description.toLowerCase() : '';
+      return label.startsWith(search) || description.startsWith(search);
+    });
+  };
 
   return (
     <Combobox
-      label="Single Select"
-      onChange={setValue}
-      options={singleSelectOptions}
-      placeholder="Search..."
+      filterFunction={filterFunction}
+      label="Custom filter (starts with)"
+      onChange={onChange}
+      options={cryptoOptions}
+      placeholder="Type to filter..."
+      type="multi"
       value={value}
     />
   );
 }
 ```
 
-### Controlled Search
+### Grouped
 
-Manage the search text externally while letting the combobox stay in sync.
+Display options under headers using `label` and `options`. Sort options by the same dimension you group by.
 
 ```jsx
-function ControlledSearch() {
+function GroupedOptions() {
+  const groupedOptions = [
+    {
+      label: 'Fruits',
+      options: [
+        { value: 'apple', label: 'Apple' },
+        { value: 'banana', label: 'Banana' },
+        { value: 'cherry', label: 'Cherry' },
+      ],
+    },
+    {
+      label: 'Vegetables',
+      options: [
+        { value: 'carrot', label: 'Carrot' },
+        { value: 'broccoli', label: 'Broccoli' },
+        { value: 'spinach', label: 'Spinach' },
+      ],
+    },
+  ];
   const { value, onChange } = useMultiSelect({ initialValue: [] });
-  const [searchText, setSearchText] = useState('');
 
-  const fruitOptions = [
-    { value: 'apple', label: 'Apple' },
-    { value: 'banana', label: 'Banana' },
-    { value: 'cherry', label: 'Cherry' },
-    { value: 'date', label: 'Date' },
+  return (
+    <Combobox
+      label="Category"
+      onChange={onChange}
+      options={groupedOptions}
+      placeholder="Search by category..."
+      type="multi"
+      value={value}
+    />
+  );
+}
+```
+
+### Accessibility
+
+Use `accessibilityLabel` and `accessibilityHint` to describe purpose and additional context. For multi-select, add hidden-selection labels so screen readers can describe +X summaries.
+
+```jsx
+function AccessibilityProps() {
+  const priorityOptions = [
+    { value: 'high', label: 'High Priority' },
+    { value: 'medium', label: 'Medium Priority' },
+    { value: 'low', label: 'Low Priority' },
   ];
 
+  const { value, onChange } = useMultiSelect({ initialValue: ['medium'] });
+
   return (
     <Combobox
-      label="Controlled search"
+      accessibilityHint="Select one or more priorities"
+      accessibilityLabel="Task priority combobox"
+      accessibilityRoles={{ option: 'button' }}
+      hiddenSelectedOptionsLabel="priorities"
+      label="Task Priority"
+      maxSelectedOptionsToShow={1}
       onChange={onChange}
-      onSearch={setSearchText}
-      options={fruitOptions}
-      placeholder="Type to search..."
-      searchText={searchText}
+      options={priorityOptions}
+      placeholder="Choose priority..."
       type="multi"
       value={value}
     />
@@ -104,28 +174,34 @@ function ControlledSearch() {
 }
 ```
 
-### Helper Text
+### Styling
 
-Use helper text to guide how many selections a user should make.
+#### Selection Display Limit
 
-```jsx
-function HelperTextExample() {
-  const { value, onChange } = useMultiSelect({ initialValue: [] });
+Cap visible chips with `maxSelectedOptionsToShow`; the rest show as +X more. Pair with `hiddenSelectedOptionsLabel` for screen readers.
 
-  const teamOptions = [
-    { value: 'john', label: 'John Smith', description: 'Engineering' },
-    { value: 'jane', label: 'Jane Doe', description: 'Design' },
-    { value: 'bob', label: 'Bob Johnson', description: 'Product' },
-    { value: 'alice', label: 'Alice Williams', description: 'Engineering' },
+```jsx
+function LimitDisplayedSelections() {
+  const countryOptions = [
+    { value: 'us', label: 'United States', description: 'North America' },
+    { value: 'ca', label: 'Canada', description: 'North America' },
+    { value: 'mx', label: 'Mexico', description: 'North America' },
+    { value: 'uk', label: 'United Kingdom', description: 'Europe' },
+    { value: 'fr', label: 'France', description: 'Europe' },
+    { value: 'de', label: 'Germany', description: 'Europe' },
   ];
+  const { value, onChange } = useMultiSelect({
+    initialValue: ['us', 'ca', 'mx', 'uk'],
+  });
 
   return (
     <Combobox
-      helperText="Select up to 4 team members"
-      label="Team members"
+      hiddenSelectedOptionsLabel="countries"
+      label="Countries"
+      maxSelectedOptionsToShow={2}
       onChange={onChange}
-      options={teamOptions}
-      placeholder="Search team members..."
+      options={countryOptions}
+      placeholder="Select countries..."
       type="multi"
       value={value}
     />
@@ -133,13 +209,9 @@ function HelperTextExample() {
 }
 ```
 
-### Alignment
+#### Alignment
 
-The alignment of the selected value(s) can be adjusted using the `align` prop.
-
-::::note
-Left / right alignment is preferred for styling.
-::::
+Align selected values with the `align` prop.
 
 ```jsx
 function AlignmentExample() {
@@ -148,27 +220,26 @@ function AlignmentExample() {
     { value: 'banana', label: 'Banana' },
     { value: 'cherry', label: 'Cherry' },
     { value: 'date', label: 'Date' },
-    { value: 'elderberry', label: 'Elderberry' },
   ];
-
-  const { value, onChange } = useMultiSelect({ initialValue: ['apple', 'banana', 'cherry'] });
+  const { value, onChange } = useMultiSelect({ initialValue: ['apple', 'banana'] });
 
   return (
     <VStack gap={2}>
       <Combobox
-        label="Default align - start"
+        align="start"
+        label="Align start"
         onChange={onChange}
         options={fruitOptions}
-        placeholder="Search fruits..."
+        placeholder="Search..."
         type="multi"
         value={value}
       />
       <Combobox
         align="end"
-        label="End align"
+        label="Align end"
         onChange={onChange}
         options={fruitOptions}
-        placeholder="Search fruits..."
+        placeholder="Search..."
         type="multi"
         value={value}
       />
@@ -177,51 +248,277 @@ function AlignmentExample() {
 }
 ```
 
-### Borderless
+#### Borderless
 
-You can remove the border from the combobox control by setting `bordered` to `false`.
+Remove the border with `bordered={false}`.
 
 ```jsx
 function BorderlessExample() {
-  const singleSelectOptions = [
-    { value: null, label: 'Remove selection' },
+  const fruitOptions = [
+    { value: 'apple', label: 'Apple' },
+    { value: 'banana', label: 'Banana' },
+    { value: 'cherry', label: 'Cherry' },
+  ];
+  const [value, setValue] = useState('apple');
+
+  return (
+    <Combobox
+      bordered={false}
+      label="Borderless"
+      onChange={setValue}
+      options={fruitOptions}
+      placeholder="Search..."
+      value={value}
+    />
+  );
+}
+```
+
+#### Compact
+
+Use smaller sizing with `compact`.
+
+```jsx
+function CompactExample() {
+  const fruitOptions = [
+    { value: 'apple', label: 'Apple' },
+    { value: 'banana', label: 'Banana' },
+    { value: 'cherry', label: 'Cherry' },
+  ];
+  const { value, onChange } = useMultiSelect({ initialValue: ['apple'] });
+
+  return (
+    <Combobox
+      compact
+      label="Compact"
+      onChange={onChange}
+      options={fruitOptions}
+      placeholder="Compact combobox..."
+      type="multi"
+      value={value}
+    />
+  );
+}
+```
+
+#### Helper Text
+
+Add guidance with `helperText`.
+
+```jsx
+function HelperTextExample() {
+  const { value, onChange } = useMultiSelect({ initialValue: [] });
+  const fruitOptions = [
     { value: 'apple', label: 'Apple' },
     { value: 'banana', label: 'Banana' },
     { value: 'cherry', label: 'Cherry' },
     { value: 'date', label: 'Date' },
   ];
 
+  return (
+    <Combobox
+      helperText="Choose more than one fruit"
+      label="Select fruits"
+      onChange={onChange}
+      options={fruitOptions}
+      placeholder="Search and select fruits..."
+      type="multi"
+      value={value}
+    />
+  );
+}
+```
+
+### Composed Examples
+
+#### Country Selection
+
+You can include flag emoji in labels to create a country selector.
+
+```jsx
+function CountrySelectionExample() {
+  const getFlagEmoji = (cc) =>
+    cc
+      .toUpperCase()
+      .split('')
+      .map((c) => String.fromCodePoint(0x1f1e6 - 65 + c.charCodeAt(0)))
+      .join('');
+
+  const countryOptions = [
+    {
+      label: 'North America',
+      options: [
+        { value: 'us', label: `${getFlagEmoji('us')} United States` },
+        { value: 'ca', label: `${getFlagEmoji('ca')} Canada` },
+        { value: 'mx', label: `${getFlagEmoji('mx')} Mexico` },
+      ],
+    },
+    {
+      label: 'Europe',
+      options: [
+        { value: 'uk', label: `${getFlagEmoji('gb')} United Kingdom` },
+        { value: 'fr', label: `${getFlagEmoji('fr')} France` },
+        { value: 'de', label: `${getFlagEmoji('de')} Germany` },
+      ],
+    },
+    {
+      label: 'Asia',
+      options: [
+        { value: 'jp', label: `${getFlagEmoji('jp')} Japan` },
+        { value: 'cn', label: `${getFlagEmoji('cn')} China` },
+        { value: 'in', label: `${getFlagEmoji('in')} India` },
+      ],
+    },
+  ];
+
+  const { value, onChange } = useMultiSelect({ initialValue: [] });
+
+  return (
+    <Combobox
+      label="Country"
+      maxSelectedOptionsToShow={3}
+      onChange={onChange}
+      options={countryOptions}
+      placeholder="Select countries..."
+      type="multi"
+      value={value}
+    />
+  );
+}
+```
+
+#### Free Solo
+
+You can add a dynamic option to Combobox to enable free solo where users can provide their own value.
+
+```jsx
+function FreeSoloComboboxExample() {
+  const CREATE_OPTION_PREFIX = '__create__';
+
+  function FreeSoloCombobox({
+    freeSolo = false,
+    options: initialOptions,
+    value,
+    onChange,
+    placeholder = 'Search or type to add...',
+    ...comboboxProps
+  }) {
+    const [searchText, setSearchText] = useState('');
+    const [options, setOptions] = useState(initialOptions);
+
+    useEffect(() => {
+      if (!freeSolo) return;
+      const initialSet = new Set(initialOptions.map((o) => o.value));
+      const valueSet = new Set(Array.isArray(value) ? value : value != null ? [value] : []);
+      setOptions((prev) => {
+        const addedStillSelected = prev.filter(
+          (o) => !initialSet.has(o.value) && valueSet.has(o.value),
+        );
+        return [...initialOptions, ...addedStillSelected];
+      });
+    }, [value, freeSolo, initialOptions]);
+
+    const optionsWithCreate = useMemo(() => {
+      if (!freeSolo) return options;
+      const trimmed = searchText.trim();
+      if (!trimmed) return options;
+      const alreadyExists = options.some(
+        (o) => typeof o.label === 'string' && o.label.toLowerCase() === trimmed.toLowerCase(),
+      );
+      if (alreadyExists) return options;
+      return [
+        ...options,
+        { value: `${CREATE_OPTION_PREFIX}${trimmed}`, label: `Add "${trimmed}"` },
+      ];
+    }, [options, searchText, freeSolo]);
+
+    const handleChange = useCallback(
+      (newValue) => {
+        if (!freeSolo) {
+          onChange(newValue);
+          return;
+        }
+        const values = Array.isArray(newValue) ? newValue : newValue ? [newValue] : [];
+        const createValue = values.find((v) => String(v).startsWith(CREATE_OPTION_PREFIX));
+        if (createValue) {
+          const newLabel = String(createValue).slice(CREATE_OPTION_PREFIX.length);
+          const newOption = { value: newLabel.toLowerCase(), label: newLabel };
+          setOptions((prev) => [...prev, newOption]);
+          const updatedValues = values
+            .filter((v) => !String(v).startsWith(CREATE_OPTION_PREFIX))
+            .concat(newOption.value);
+          onChange(comboboxProps.type === 'multi' ? updatedValues : newOption.value);
+          setSearchText('');
+        } else {
+          onChange(newValue);
+        }
+      },
+      [onChange, freeSolo, comboboxProps.type],
+    );
+
+    return (
+      <Combobox
+        {...comboboxProps}
+        {...(freeSolo ? { searchText, onSearch: setSearchText } : {})}
+        onChange={handleChange}
+        options={freeSolo ? optionsWithCreate : initialOptions}
+        placeholder={placeholder}
+        value={value}
+      />
+    );
+  }
+
+  const [standardSingleValue, setStandardSingle] = useState(null);
+  const [freeSoloSingleValue, setFreeSoloSingle] = useState(null);
+  const standardMulti = useMultiSelect({ initialValue: [] });
+  const freeSoloMulti = useMultiSelect({ initialValue: [] });
+
   const fruitOptions = [
     { value: 'apple', label: 'Apple' },
     { value: 'banana', label: 'Banana' },
     { value: 'cherry', label: 'Cherry' },
     { value: 'date', label: 'Date' },
     { value: 'elderberry', label: 'Elderberry' },
+    { value: 'fig', label: 'Fig' },
   ];
 
-  const [singleValue, setSingleValue] = useState('apple');
-  const { value: multiValue, onChange: multiOnChange } = useMultiSelect({
-    initialValue: ['apple'],
-  });
-
   return (
     <VStack gap={4}>
-      <Combobox
-        bordered={false}
-        label="Borderless single select"
-        onChange={setSingleValue}
-        options={singleSelectOptions}
+      <FreeSoloCombobox
+        freeSolo={false}
+        label="Standard single"
+        onChange={setStandardSingle}
+        options={fruitOptions}
         placeholder="Search fruits..."
-        value={singleValue}
+        type="single"
+        value={standardSingleValue}
       />
-      <Combobox
-        bordered={false}
-        label="Borderless multi select"
-        onChange={multiOnChange}
+      <FreeSoloCombobox
+        freeSolo
+        label="FreeSolo single"
+        onChange={setFreeSoloSingle}
+        options={fruitOptions}
+        placeholder="Search or type to add..."
+        type="single"
+        value={freeSoloSingleValue}
+      />
+      <FreeSoloCombobox
+        freeSolo={false}
+        label="Standard multi"
+        onChange={standardMulti.onChange}
         options={fruitOptions}
         placeholder="Search fruits..."
         type="multi"
-        value={multiValue}
+        value={standardMulti.value}
+      />
+      <FreeSoloCombobox
+        freeSolo
+        label="FreeSolo multi"
+        onChange={freeSoloMulti.onChange}
+        options={fruitOptions}
+        placeholder="Search or type to add..."
+        type="multi"
+        value={freeSoloMulti.value}
       />
     </VStack>
   );

package/mcp-docs/mobile/components/HeroSquare.txt

@@ -38,7 +38,7 @@ If `dimension` and `scaleMultiplier` are both provided the component will scale
 
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
-| `name` | `margin \| success \| pending \| airdrop \| blockchain \| camera \| cloud \| coinbaseOneLogo \| earn \| instantUnstakingClock \| options \| refresh \| rocket \| securityShield \| smartContract \| staking \| test \| baseCreatorCoin \| borrowCoins \| coinbaseOneEarn \| ethStakingRewards \| fiat \| futures \| globalTransactions \| governance \| lightningNetworkSend \| outage \| startToday \| walletWarning \| phoneNumber \| exchange \| accessToAdvancedCharts \| accountUnderReview \| add2Fa \| addBankAccount \| addCreditCard \| addMoreCrypto \| addPhoneNumber \| advancedTrading \| advancedTradingChartsIndicatorsCandles \| advancedTradingUi \| alienDonutSystemError \| anonymous \| appTrackingTransparency \| artFrameEmptyState \| automaticPayments \| backedByUsDollar \| baseChartLarge \| baseCheck \| baseCoinCryptoLarge \| baseCoinNetworkLarge \| baseConnectLarge \| baseCreatorCoinEmpty \| baseDecentralizationLarge \| basedInUsa \| baseEmptyLarge \| baseErrorButterfly \| baseErrorLarge \| baseLoadingLarge \| baseLocationLarge \| baseMintNftLarge \| baseNetworkLarge \| baseNftLarge \| basePaycoinLarge \| basePeopleLarge \| basePiechartLarge \| baseRewardsCalmLarge \| baseSecurityLarge \| baseSendLarge \| baseSocial \| baseTargetLarge \| bigBtc \| bigError \| bigWarning \| bitcoinAndOtherCrypto \| bitcoinGlobe \| borrow \| borrowCoinsBtc \| borrowWallet \| brdGift \| bridge \| browseDecentralizedApps \| browserExtension \| buy \| buyFirstCrypto \| cardAndPhone \| cardBoosted \| cardError \| cardErrorCB1 \| cardReloadFunds \| cashExcitement \| catHoldingWalletEmptyState \| catLostSystemError \| cbada \| cbbtc \| cbdoge \| cbltc \| cbxrp \| chickenFishSystemError \| claimCryptoUsername \| cloudBacking \| coinbaseCard \| coinbaseCardIssue \| coinbaseCardLock \| coinbaseCardPocket \| coinbaseCardSpend \| coinbaseCardSpendCrypto \| coinbaseFees \| coinbaseIsDown \| coinbaseIsDownMobile \| coinbaseOneAirdrop \| coinbaseOneCardWarning \| coinbaseOneDiscountedAmount \| coinbaseOneDocWarning \| coinbaseOneInsufficientWallet \| coinbaseOnePercentOff \| coinbaseOnePhoneLightning \| coinbaseOneProtectedCrypto \| coinbaseOneRewards \| coinbaseOneSavingFunds \| coinbaseOneTokenRewards \| coinbaseOneUSDCBig \| coinbaseOneUSDCIncentives \| coinbaseOneWaitlist \| coinbaseOneWalletWarning \| coinbaseOneWelcome \| coinbaseOneZeroPortal \| coinbaseOneZeroPromotion \| coinbaseRedesigned \| coinbaseWalletToTrade \| coinCheckmark \| coinFifty \| coinsInWallet \| collectableNfts \| collectingNfts \| commerceAccounting \| commerceInvoices \| communication \| completeAQuiz \| congratulationsOnEarningCrypto \| connectPeople \| contactsListWarning \| crossBorderPayments \| cryptoAndMore \| cryptoApps \| cryptoAppsWallet \| cryptoAssets \| cryptoEconomy \| cryptoForBeginners \| cryptoPortfolio \| cryptoWallet \| currencyPairs \| dappsArts \| dappsFinance \| dappsGaming \| dappsGeneral \| dappsL2Support \| dappsMusic \| decentralization \| decentralizedWebWeb3 \| defiDecentralizedBorrowingLending \| defiDecentralizedTradingExchange \| defiEarn \| defiEnrollBoost \| defiHow \| defiRisk \| desktopAuthorized \| desktopUnknown \| developer \| diamondHands \| didDecentralizedIdentity \| digitalCollectibles \| digitalGold \| directDepositPhone \| discardAssets \| docError \| documentCertified \| documentSuccess \| downloadCoinbaseWallet \| earnCryptoCard \| earnCryptoInterest \| earnGlobe \| earnGrowth \| earnIdVerification \| earnInterest \| earnMore \| earnNuxHome \| earnSuccess \| earnToLearn \| emailNotification \| emptyCollection \| emptyStateCheckBackLater \| emptyStateNft404Page \| emptyStateNftSoldOut \| enableBiometrics \| encryptedEverything \| engagement \| ensProfilePic \| error400 \| errorApp500 \| errorMoblie \| errorRefresh \| errorRefreshWeb \| errorWeb \| errorWeb400 \| errorWeb404 \| errorWeb404Mobile \| errorWeb500 \| estimatedAmount \| ethereumToWallet \| ethStakingUpsell \| exchangeEmptyState \| exploreDecentralizedApps \| faceMatchReal \| feeScale \| fileYourCryptoTaxes \| fileYourCryptoTaxesCheck \| focusLimitOrders \| freeBtc \| futuresAndPerps \| futuresExpire \| futuresVsPerps \| gainsAndLosses \| gamer \| gasFeesNetworkFees \| generative \| getStartedInMinutes \| governanceMallet \| graphChartTrading \| hardwareWallets \| hiddenCollection \| holdCrypto \| holdingCrypto \| iceCreamMeltingSystemError \| idAngles \| idBack \| idCard \| idFront \| idIssue \| idVerificationSecure \| indexer \| innovation \| insufficientBalance \| insuranceProtection \| invest \| invite \| japanVerifyId \| keyGeneration \| layeredNetworks \| layerOne \| layerThree \| layerTwo \| ledgerAccess \| ledgerPlugin \| lend \| leverage \| lightningNetwork \| lightningNetworkInvoice \| lightningNetworkTransfer \| limitOrders \| linkingYourWalletToYourCoinbaseAccount \| liquidationBufferGreen \| liquidationBufferRed \| liquidationBufferRedClose \| liquidationBufferYellow \| lowCost \| marginWarning \| mic \| mining \| minting \| moneyDecentralized \| moreGains \| multicoinSupport \| multiPlatformMobileAppBrowserExtension \| multipleAccountsWalletsForOneUser \| multiplePortfolios \| myNameIsSatoshi \| namePortfolio \| networkWarning \| noFees \| noFeesMotion \| noLongAddresses \| notificationsAlt \| notificationsAndUpdates \| offChain \| oilAndGold \| onChain \| onTheList \| openEmail \| optInPushNotificationsEmail \| oracle \| orderBooks \| p2pGifting \| p2pPayments \| paperHands \| payUpFront \| performance \| phoneUnknown \| platform \| polling \| portfolioPerformance \| poweredByEthereum \| powerOfCrypto \| predictionsMarkets \| primeDeFi \| primeEarn \| primeStaking \| private \| privateKey \| processing \| protocol \| public \| quest \| quickAndSimple \| quickBuy \| ratingsAndReviews \| readyToTrade \| realToUSDC \| receivedCard \| receiveGift \| recommendInvest \| recurringReward \| referralsAvatars \| referralsBitcoin \| referralsCoinbaseOne \| referralsGenericCoin \| referralsWalletPhones \| remittances \| requestSent \| restrictedCountry \| retailUSDCRewards \| reviewInfo \| rotatingRewards \| routingAccount \| scalable \| secureAndTrusted \| secureGlobalTransactions \| secureStorage \| selectCorrectCrypto \| selectReward \| selfCustody \| selfCustodyCrypto \| semiCustodial \| sendCryptoFaster \| sendToUsername \| serverCatSystemError \| settlement \| shareOnSocialMedia \| sidechain \| slippageTolerance \| spacedOutSystemError \| squidEmptyState \| stablecoin \| stableValue \| stakingMissedReturns \| stakingMissedReturnsUsdc \| stayInControlSelfHostedWalletsStorage \| stopLimitOrder \| stopLimitOrderDown \| storage \| stressTestedColdStorage \| supportAndMore \| sustainable \| switchAdvancedToSimpleTrading \| taxesDetails \| tools \| tradeGeneral \| tradeHistory \| tradeImmediately \| tradingWithLeverage \| transactionLimit \| trendingHotAssets \| twoIdVerify \| unlockKey \| usdAndUsdc \| usdtToUSDC \| verifyBankTransactions \| verifyCardTransactions \| verifyEmail \| verifyIdDetails \| verifyInfo \| videoRequest \| videoReview \| videoUpload \| vipBadge \| vote \| walletAsset \| walletConfirmation \| walletFlyEmptyState \| walletLoading \| walletNotifications \| walletSecurity \| walletUi \| watchVideos \| web3ActivityError \| web3ActivitySigned \| web3MobileSetupStart \| web3MobileSetupSuccess \| webRAT \| whyNotBoth \| yourContacts` | Yes | `-` | Name of illustration as defined in Figma |
+| `name` | `margin \| success \| pending \| airdrop \| blockchain \| camera \| cloud \| coinbaseOneLogo \| earn \| instantUnstakingClock \| options \| refresh \| rocket \| securityShield \| smartContract \| staking \| test \| baseCreatorCoin \| borrowCoins \| coinbaseOneEarn \| ethStakingRewards \| fiat \| futures \| globalTransactions \| governance \| lightningNetworkSend \| outage \| startToday \| walletWarning \| phoneNumber \| exchange \| accessToAdvancedCharts \| accountUnderReview \| add2Fa \| addBankAccount \| addCreditCard \| addMoreCrypto \| addPhoneNumber \| advancedTrading \| advancedTradingChartsIndicatorsCandles \| advancedTradingUi \| alienDonutSystemError \| anonymous \| appTrackingTransparency \| artFrameEmptyState \| automaticPayments \| backedByUsDollar \| baseChartLarge \| baseCheck \| baseCoinCryptoLarge \| baseCoinNetworkLarge \| baseConnectLarge \| baseCreatorCoinEmpty \| baseDecentralizationLarge \| basedInUsa \| baseEmptyLarge \| baseErrorButterfly \| baseErrorLarge \| baseLoadingLarge \| baseLocationLarge \| baseMintNftLarge \| baseNetworkLarge \| baseNftLarge \| basePaycoinLarge \| basePeopleLarge \| basePiechartLarge \| baseRewardsCalmLarge \| baseSecurityLarge \| baseSendLarge \| baseSocial \| baseTargetLarge \| bigBtc \| bigError \| bigWarning \| bitcoinAndOtherCrypto \| bitcoinGlobe \| borrow \| borrowCoinsBtc \| borrowWallet \| brdGift \| bridge \| browseDecentralizedApps \| browserExtension \| buy \| buyFirstCrypto \| cardAndPhone \| cardBoosted \| cardError \| cardErrorCB1 \| cardReloadFunds \| cashExcitement \| catHoldingWalletEmptyState \| catLostSystemError \| cbada \| cbbtc \| cbdoge \| cbltc \| cbxrp \| chickenFishSystemError \| claimCryptoUsername \| cloudBacking \| coinbaseCard \| coinbaseCardIssue \| coinbaseCardLock \| coinbaseCardPocket \| coinbaseCardSpend \| coinbaseCardSpendCrypto \| coinbaseFees \| coinbaseIsDown \| coinbaseIsDownMobile \| coinbaseOneAirdrop \| coinbaseOneCardWarning \| coinbaseOneDiscountedAmount \| coinbaseOneDocWarning \| coinbaseOneInsufficientWallet \| coinbaseOnePercentOff \| coinbaseOnePhoneLightning \| coinbaseOneProtectedCrypto \| coinbaseOneRewards \| coinbaseOneSavingFunds \| coinbaseOneTokenRewards \| coinbaseOneUSDCBig \| coinbaseOneUSDCIncentives \| coinbaseOneWaitlist \| coinbaseOneWalletWarning \| coinbaseOneWelcome \| coinbaseOneZeroPortal \| coinbaseOneZeroPromotion \| coinbaseRedesigned \| coinbaseWalletToTrade \| coinCheckmark \| coinFifty \| coinsInWallet \| collectableNfts \| collectingNfts \| commerceAccounting \| commerceInvoices \| communication \| completeAQuiz \| congratulationsOnEarningCrypto \| connectPeople \| contactsListWarning \| crossBorderPayments \| cryptoAndMore \| cryptoApps \| cryptoAppsWallet \| cryptoAssets \| cryptoEconomy \| cryptoForBeginners \| cryptoPortfolio \| cryptoPortfolioUsdc \| cryptoWallet \| currencyPairs \| dappsArts \| dappsFinance \| dappsGaming \| dappsGeneral \| dappsL2Support \| dappsMusic \| decentralization \| decentralizedWebWeb3 \| defiDecentralizedBorrowingLending \| defiDecentralizedTradingExchange \| defiEarn \| defiEnrollBoost \| defiHow \| defiRisk \| desktopAuthorized \| desktopUnknown \| developer \| diamondHands \| didDecentralizedIdentity \| digitalCollectibles \| digitalGold \| directDepositPhone \| discardAssets \| docError \| documentCertified \| documentSuccess \| downloadCoinbaseWallet \| earnCryptoCard \| earnCryptoInterest \| earnGlobe \| earnGrowth \| earnIdVerification \| earnInterest \| earnMore \| earnNuxHome \| earnSuccess \| earnToLearn \| emailNotification \| emptyCollection \| emptyStateCheckBackLater \| emptyStateNft404Page \| emptyStateNftSoldOut \| enableBiometrics \| encryptedEverything \| engagement \| ensProfilePic \| error400 \| errorApp500 \| errorMoblie \| errorRefresh \| errorRefreshWeb \| errorWeb \| errorWeb400 \| errorWeb404 \| errorWeb404Mobile \| errorWeb500 \| estimatedAmount \| ethereumToWallet \| ethStakingUpsell \| exchangeEmptyState \| exploreDecentralizedApps \| faceMatchReal \| feeScale \| fileYourCryptoTaxes \| fileYourCryptoTaxesCheck \| focusLimitOrders \| freeBtc \| futuresAndPerps \| futuresExpire \| futuresVsPerps \| gainsAndLosses \| gamer \| gasFeesNetworkFees \| generative \| getStartedInMinutes \| governanceMallet \| graphChartTrading \| hardwareWallets \| hiddenCollection \| holdCrypto \| holdingCrypto \| iceCreamMeltingSystemError \| idAngles \| idBack \| idCard \| idFront \| idIssue \| idVerificationSecure \| indexer \| innovation \| instoAdd2Fa \| instoAddBankAccount \| instoCoinbaseOneProtectedCrypto \| instoDocumentSuccess \| instoEarnGlobe \| instoEnableBiometrics \| instoEthStakingRewards \| instoEthStakingUpsell \| instoGovernance \| instoKeyGenerationComplete \| instoKeyGenerationPending \| instoOnChain \| instoOpenEmail \| instoPhoneUnknown \| instoPrimeStaking \| instoPrivateKey \| instoRequestSent \| instoSecurityKeyAuth \| instoStaking \| instoStakingMissedReturns \| instoWallet \| instoWalletSecurity \| instoWeb3MobileSetupStart \| insufficientBalance \| insuranceProtection \| invest \| invite \| japanVerifyId \| keyGeneration \| layeredNetworks \| layerOne \| layerThree \| layerTwo \| ledgerAccess \| ledgerPlugin \| lend \| leverage \| lightningNetwork \| lightningNetworkInvoice \| lightningNetworkTransfer \| limitOrders \| linkingYourWalletToYourCoinbaseAccount \| liquidationBufferGreen \| liquidationBufferRed \| liquidationBufferRedClose \| liquidationBufferYellow \| lowCost \| marginWarning \| mic \| mining \| minting \| moneyDecentralized \| moreGains \| multicoinSupport \| multiPlatformMobileAppBrowserExtension \| multipleAccountsWalletsForOneUser \| multiplePortfolios \| myNameIsSatoshi \| namePortfolio \| networkWarning \| noFees \| noFeesMotion \| noLongAddresses \| notificationsAlt \| notificationsAndUpdates \| offChain \| oilAndGold \| onChain \| onTheList \| openEmail \| optInPushNotificationsEmail \| oracle \| orderBooks \| p2pGifting \| p2pPayments \| paperHands \| payUpFront \| performance \| phoneUnknown \| platform \| polling \| portfolioPerformance \| poweredByEthereum \| powerOfCrypto \| predictionsMarkets \| primeDeFi \| primeEarn \| primeStaking \| private \| privateKey \| processing \| protocol \| public \| quest \| quickAndSimple \| quickBuy \| ratingsAndReviews \| readyToTrade \| realToUSDC \| receivedCard \| receiveGift \| recommendInvest \| recurringReward \| referralsAvatars \| referralsBitcoin \| referralsCoinbaseOne \| referralsGenericCoin \| referralsWalletPhones \| remittances \| requestSent \| restrictedCountry \| retailUSDCRewards \| reviewInfo \| rotatingRewards \| routingAccount \| scalable \| secureAndTrusted \| secureGlobalTransactions \| secureStorage \| selectCorrectCrypto \| selectReward \| selfCustody \| selfCustodyCrypto \| semiCustodial \| sendCryptoFaster \| sendToUsername \| serverCatSystemError \| settlement \| shareOnSocialMedia \| sidechain \| slippageTolerance \| spacedOutSystemError \| squidEmptyState \| stablecoin \| stableValue \| stakingMissedReturns \| stakingMissedReturnsUsdc \| stayInControlSelfHostedWalletsStorage \| stopLimitOrder \| stopLimitOrderDown \| storage \| stressTestedColdStorage \| supportAndMore \| sustainable \| switchAdvancedToSimpleTrading \| taxesDetails \| tools \| tradeGeneral \| tradeHistory \| tradeImmediately \| tradingPerpetualsUsdc \| tradingWithLeverage \| transactionLimit \| trendingHotAssets \| twoIdVerify \| unlockKey \| usdAndUsdc \| usdtToUSDC \| verifyBankTransactions \| verifyCardTransactions \| verifyEmail \| verifyIdDetails \| verifyInfo \| videoRequest \| videoReview \| videoUpload \| vipBadge \| vote \| walletAsset \| walletConfirmation \| walletFlyEmptyState \| walletLoading \| walletNotifications \| walletSecurity \| walletUi \| watchVideos \| web3ActivityError \| web3ActivitySigned \| web3MobileSetupStart \| web3MobileSetupSuccess \| webRAT \| whyNotBoth \| yourContacts` | Yes | `-` | Name of illustration as defined in Figma |
 | `dimension` | `240x240 \| 200x200` | No | `-` | HeroSquare Default:  240x240 SpotSquare Default: 96x96 Pictogram Default: 48x48 SpotRectangle Default: 240x120 |
 | `fallback` | `ReactElement<any, string \| JSXElementConstructor<any>> \| null` | No | `null` | Fallback element to render if unable to find an illustration with the matching name |
 | `scaleMultiplier` | `number` | No | `-` | Multiply the width & height while maintaining aspect ratio |