@coinbase/cds-mcp-server 8.28.1 → 8.29.0

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

@@ -32,9 +32,9 @@ function MyCarousel() {
     return (
       <ContainedAssetCard
         description={
-          <TextLabel2 as="p" color="fgPositive" numberOfLines={2}>
+          <Text as="p" font="label2" color="fgPositive" numberOfLines={2}>
             ↗6.37%
-          </TextLabel2>
+          </Text>
         }
         header={<RemoteImage height="32px" source={imageUrl} width="32px" />}
         subtitle={name}
@@ -113,7 +113,9 @@ function DynamicSizingCarousel() {
   return (
     <VStack gap={2}>
       <HStack justifyContent="flex-end" gap={2} alignItems="center">
-        <TextHeadline as="h3">Items per page</TextHeadline>
+        <Text as="h3" font="headline">
+          Items per page
+        </Text>
         <SegmentedTabs
           activeTab={selectedItemsPerPage}
           onChange={setSelectedItemsPerPage}
@@ -146,9 +148,9 @@ function DynamicSizingCarousel() {
                 }
                 minWidth="0"
                 title={
-                  <TextHeadline as="h3" id="recurring-buy-label">
+                  <Text as="h3" font="headline" id="recurring-buy-label">
                     Recurring Buy
-                  </TextHeadline>
+                  </Text>
                 }
                 width="100%"
               />
@@ -164,9 +166,9 @@ function DynamicSizingCarousel() {
                 action={<ActionButton isVisible={isVisible}>Start earning</ActionButton>}
                 dangerouslySetBackground="rgb(var(--purple70))"
                 description={
-                  <TextLabel2 as="p" numberOfLines={3} color="fgInverse">
+                  <Text as="p" font="label2" numberOfLines={3} color="fgInverse">
                     Earn staking rewards on ETH by holding it on Coinbase
-                  </TextLabel2>
+                  </Text>
                 }
                 media={
                   <Box left={16} position="relative" top={12}>
@@ -175,9 +177,9 @@ function DynamicSizingCarousel() {
                 }
                 minWidth="0"
                 title={
-                  <TextHeadline id="eths-apr-label" color="fgInverse" as="h3">
+                  <Text id="eths-apr-label" color="fgInverse" as="h3">
                     Up to 3.29% APR on ETHs
-                  </TextHeadline>
+                  </Text>
                 }
                 width="100%"
               />
@@ -193,9 +195,9 @@ function DynamicSizingCarousel() {
                 action={<ActionButton isVisible={isVisible}>Start chatting</ActionButton>}
                 dangerouslySetBackground="rgb(var(--teal70))"
                 description={
-                  <TextLabel2 as="p" numberOfLines={3} color="fgInverse">
+                  <Text as="p" font="label2" numberOfLines={3} color="fgInverse">
                     Chat with other devs in our Discord community
-                  </TextLabel2>
+                  </Text>
                 }
                 media={
                   <Box left={16} position="relative" top={4}>
@@ -204,9 +206,9 @@ function DynamicSizingCarousel() {
                 }
                 minWidth="0"
                 title={
-                  <TextHeadline id="join-the-community-label" color="fgInverse" as="h3">
+                  <Text id="join-the-community-label" color="fgInverse" as="h3">
                     Join the community
-                  </TextHeadline>
+                  </Text>
                 }
                 width="100%"
               />
@@ -222,9 +224,9 @@ function DynamicSizingCarousel() {
                 action={<ActionButton isVisible={isVisible}>Get 60 days free</ActionButton>}
                 dangerouslySetBackground="rgb(var(--blue80))"
                 description={
-                  <TextLabel2 as="p" numberOfLines={3} color="fgInverse">
+                  <Text as="p" font="label2" numberOfLines={3} color="fgInverse">
                     Use code NOV60 when you sign up for Coinbase One
-                  </TextLabel2>
+                  </Text>
                 }
                 media={
                   <Box left={16} position="relative" top={0}>
@@ -233,9 +235,9 @@ function DynamicSizingCarousel() {
                 }
                 minWidth="0"
                 title={
-                  <TextHeadline id="coinbase-one-offer-label" color="fgInverse" as="h3">
+                  <Text id="coinbase-one-offer-label" color="fgInverse" as="h3">
                     Coinbase One offer
-                  </TextHeadline>
+                  </Text>
                 }
                 width="100%"
               />
@@ -251,9 +253,9 @@ function DynamicSizingCarousel() {
                 action={<ActionButton isVisible={isVisible}>Get started</ActionButton>}
                 dangerouslySetBackground="rgb(var(--gray100))"
                 description={
-                  <TextLabel2 as="p" numberOfLines={3} color="fgInverse">
+                  <Text as="p" font="label2" numberOfLines={3} color="fgInverse">
                     Spend USDC to get rewards with our Visa® debit card
-                  </TextLabel2>
+                  </Text>
                 }
                 media={
                   <Box left={16} position="relative" top={0}>
@@ -262,9 +264,9 @@ function DynamicSizingCarousel() {
                 }
                 minWidth="0"
                 title={
-                  <TextHeadline id="coinbase-card-label" color="fgInverse" as="h3">
+                  <Text id="coinbase-card-label" color="fgInverse" as="h3">
                     Coinbase Card
-                  </TextHeadline>
+                  </Text>
                 }
                 width="100%"
               />
@@ -367,9 +369,9 @@ function VariedSizingCarousel() {
     return (
       <ContainedAssetCard
         description={
-          <TextLabel2 as="p" color="fgPositive" numberOfLines={2}>
+          <Text as="p" font="label2" color="fgPositive" numberOfLines={2}>
             ↗6.37%
-          </TextLabel2>
+          </Text>
         }
         header={<RemoteImage height="32px" source={imageUrl} width="32px" />}
         subtitle={name}
@@ -475,9 +477,9 @@ function DragCarousel() {
     return (
       <ContainedAssetCard
         description={
-          <TextLabel2 as="p" color="fgPositive" numberOfLines={2}>
+          <Text as="p" font="label2" color="fgPositive" numberOfLines={2}>
             ↗6.37%
-          </TextLabel2>
+          </Text>
         }
         header={<RemoteImage height="32px" source={imageUrl} width="32px" />}
         subtitle={name}
@@ -488,7 +490,9 @@ function DragCarousel() {
   return (
     <VStack gap={2}>
       <HStack justifyContent="flex-end" gap={2} alignItems="center">
-        <TextHeadline as="h3">Drag</TextHeadline>
+        <Text as="h3" font="headline">
+          Drag
+        </Text>
         <SegmentedTabs activeTab={drag} onChange={setDrag} tabs={dragOptions} />
       </HStack>
       <Box style={{ marginInline: 'calc(-1 * var(--space-3))' }}>
@@ -532,9 +536,9 @@ function SnapModeCarousel() {
     return (
       <ContainedAssetCard
         description={
-          <TextLabel2 as="p" color="fgPositive" numberOfLines={2}>
+          <Text as="p" font="label2" color="fgPositive" numberOfLines={2}>
             ↗6.37%
-          </TextLabel2>
+          </Text>
         }
         header={<RemoteImage height="32px" source={imageUrl} width="32px" />}
         subtitle={name}
@@ -545,7 +549,9 @@ function SnapModeCarousel() {
   return (
     <VStack gap={2}>
       <HStack justifyContent="flex-end" gap={2} alignItems="center">
-        <TextHeadline as="h3">Snap mode</TextHeadline>
+        <Text as="h3" font="headline">
+          Snap mode
+        </Text>
         <SegmentedTabs activeTab={snapMode} onChange={setSnapMode} tabs={snapModeOptions} />
       </HStack>
       <Box style={{ marginInline: 'calc(-1 * var(--space-3))' }}>
@@ -591,9 +597,9 @@ function OverflowCarousel() {
     return (
       <ContainedAssetCard
         description={
-          <TextLabel2 as="p" color="fgPositive" numberOfLines={2}>
+          <Text as="p" font="label2" color="fgPositive" numberOfLines={2}>
             ↗6.37%
-          </TextLabel2>
+          </Text>
         }
         header={<RemoteImage height="32px" source={imageUrl} width="32px" />}
         onClick={isVisible ? () => console.log('clicked') : undefined}
@@ -665,9 +671,9 @@ If you have elements that are focusable, you can use `isVisible` render prop to
         }
         minWidth="0"
         title={
-          <TextHeadline as="h3" id="recurring-buy-label">
+          <Text as="h3" font="headline" id="recurring-buy-label">
             Recurring Buy
-          </TextHeadline>
+          </Text>
         }
         width="100%"
       />
@@ -686,11 +692,11 @@ You can customize the navigation and pagination components of the carousel using
 function CustomComponentsCarousel() {
   function SeeAllComponent({ style }) {
     return (
-      <TextHeadline style={style}>
+      <Text style={style}>
         <Link openInNewWindow href="https://coinbase.com/">
           See all
         </Link>
-      </TextHeadline>
+      </Text>
     );
   }
   function PaginationComponent({ totalPages, activePageIndex, onClickPage, style }) {
@@ -773,9 +779,9 @@ function CustomComponentsCarousel() {
           carousel: { gap: 'var(--space-1)' },
         }}
         title={
-          <TextHeadline as="h3">
+          <Text as="h3" font="headline">
             Learn more
-          </TextHeadline>
+          </Text>
         }
       >
         <CarouselItem id="recurring-buy" width={itemWidth}>
@@ -800,9 +806,9 @@ function CustomComponentsCarousel() {
               action={<ActionButton isVisible={isVisible}>Start earning</ActionButton>}
               dangerouslySetBackground="rgb(var(--purple70))"
               description={
-                <TextLabel2 as="p" numberOfLines={3} color="fgInverse">
+                <Text as="p" font="label2" numberOfLines={3} color="fgInverse">
                   Earn staking rewards on ETH by holding it on Coinbase
-                </TextLabel2>
+                </Text>
               }
               media={
                 <Box left={16} position="relative" top={12}>
@@ -811,9 +817,9 @@ function CustomComponentsCarousel() {
               }
               minWidth="0"
               title={
-                <TextHeadline color="fgInverse" as="h3">
+                <Text color="fgInverse" as="h3" font="headline">
                   Up to 3.29% APR on ETHs
-                </TextHeadline>
+                </Text>
               }
               width="100%"
             />
@@ -825,9 +831,9 @@ function CustomComponentsCarousel() {
               action={<ActionButton isVisible={isVisible}>Start chatting</ActionButton>}
               dangerouslySetBackground="rgb(var(--teal70))"
               description={
-                <TextLabel2 as="p" numberOfLines={3} color="fgInverse">
+                <Text as="p" font="label2" numberOfLines={3} color="fgInverse">
                   Chat with other devs in our Discord community
-                </TextLabel2>
+                </Text>
               }
               media={
                 <Box left={16} position="relative" top={4}>
@@ -836,9 +842,9 @@ function CustomComponentsCarousel() {
               }
               minWidth="0"
               title={
-                <TextHeadline color="fgInverse" as="h3">
+                <Text color="fgInverse" as="h3" font="headline">
                   Join the community
-                </TextHeadline>
+                </Text>
               }
               width="100%"
             />
@@ -850,9 +856,9 @@ function CustomComponentsCarousel() {
               action={<ActionButton isVisible={isVisible}>Get 60 days free</ActionButton>}
               dangerouslySetBackground="rgb(var(--blue80))"
               description={
-                <TextLabel2 as="p" numberOfLines={3} color="fgInverse">
+                <Text as="p" font="label2" numberOfLines={3} color="fgInverse">
                   Use code NOV60 when you  sign up for Coinbase One
-                </TextLabel2>
+                </Text>
               }
               media={
                 <Box left={16} position="relative" top={0}>
@@ -861,9 +867,9 @@ function CustomComponentsCarousel() {
               }
               minWidth="0"
               title={
-                <TextHeadline color="fgInverse" as="h3">
+                <Text color="fgInverse" as="h3" font="headline">
                   Coinbase One offer
-                </TextHeadline>
+                </Text>
               }
               width="100%"
             />
@@ -875,9 +881,9 @@ function CustomComponentsCarousel() {
               action={<ActionButton isVisible={isVisible}>Get started</ActionButton>}
               dangerouslySetBackground="rgb(var(--gray100))"
               description={
-                <TextLabel2 as="p" numberOfLines={3} color="fgInverse">
+                <Text as="p" font="label2" numberOfLines={3} color="fgInverse">
                   Spend USDC to get rewards with our Visa® debit card
-                </TextLabel2>
+                </Text>
               }
               media={
                 <Box left={16} position="relative" top={0}>
@@ -886,9 +892,9 @@ function CustomComponentsCarousel() {
               }
               minWidth="0"
               title={
-                <TextHeadline color="fgInverse" as="h3">
+                <Text color="fgInverse" as="h3" font="headline">
                   Coinbase Card
-                </TextHeadline>
+                </Text>
               }
               width="100%"
             />
@@ -1002,9 +1008,9 @@ function DynamicContentCarousel() {
     return (
       <ContainedAssetCard
         description={
-          <TextLabel2 as="p" color="fgPositive" numberOfLines={2}>
+          <Text as="p" font="label2" color="fgPositive" numberOfLines={2}>
             ↗6.37%
-          </TextLabel2>
+          </Text>
         }
         header={<RemoteImage height="32px" source={imageUrl} width="32px" />}
         subtitle={name}
@@ -1069,9 +1075,9 @@ function AnimatedCarousel() {
       >
         <ContainedAssetCard
           description={
-            <TextLabel2 as="p" color="fgPositive" numberOfLines={2}>
+            <Text as="p" font="label2" color="fgPositive" numberOfLines={2}>
               ↗6.37%
-            </TextLabel2>
+            </Text>
           }
           header={<RemoteImage height="32px" source={imageUrl} width="32px" />}
           subtitle={name}
@@ -1146,9 +1152,9 @@ function AnimatedSelectionCarousel() {
         >
           <ContainedAssetCard
             description={
-              <TextLabel2 as="p" color="fgPositive" numberOfLines={2}>
+              <Text as="p" font="label2" color="fgPositive" numberOfLines={2}>
                 ↗6.37%
-              </TextLabel2>
+              </Text>
             }
             header={<RemoteImage height="32px" source={imageUrl} width="32px" />}
             subtitle={name}
@@ -1205,9 +1211,9 @@ function HideNavigationAndPaginationCarousel() {
     return (
       <ContainedAssetCard
         description={
-          <TextLabel2 as="p" color="fgPositive" numberOfLines={2}>
+          <Text as="p" font="label2" color="fgPositive" numberOfLines={2}>
             ↗6.37%
-          </TextLabel2>
+          </Text>
         }
         header={<RemoteImage height="32px" source={imageUrl} width="32px" />}
         subtitle={name}
@@ -1282,9 +1288,9 @@ function AnimatedPaginationCarousel() {
     return (
       <ContainedAssetCard
         description={
-          <TextLabel2 as="p" color="fgPositive" numberOfLines={2}>
+          <Text as="p" font="label2" color="fgPositive" numberOfLines={2}>
             ↗6.37%
-          </TextLabel2>
+          </Text>
         }
         header={<RemoteImage height="32px" source={imageUrl} width="32px" />}
         subtitle={name}
@@ -1359,9 +1365,9 @@ function ImperativeApiCarousel() {
     return (
       <ContainedAssetCard
         description={
-          <TextLabel2 as="p" color="fgPositive" numberOfLines={2}>
+          <Text as="p" font="label2" color="fgPositive" numberOfLines={2}>
             ↗6.37%
-          </TextLabel2>
+          </Text>
         }
         header={<RemoteImage height="32px" source={imageUrl} width="32px" />}
         subtitle={name}

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

@@ -0,0 +1,176 @@
+# Combobox
+
+A flexible combobox component for both single and multi-selection, built for web applications with comprehensive accessibility support.
+
+## Import
+
+```tsx
+import { Combobox } from '@coinbase/cds-web/alpha/combobox'
+```
+
+## Examples
+
+### A note on search logic
+
+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.
+
+### Multi-Select
+
+Basic multi-selection combobox with search.
+
+```jsx live
+function MultiSelect() {
+const fruitOptions: SelectOption[] = [
+  { value: 'apple', label: 'Apple' },
+  { value: 'banana', label: 'Banana' },
+  { value: 'cherry', label: 'Cherry' },
+  { value: 'date', label: 'Date' },
+  { value: 'elderberry', label: 'Elderberry' },
+  { value: 'fig', label: 'Fig' },
+  { value: 'grape', label: 'Grape' },
+  { value: 'honeydew', label: 'Honeydew' },
+  { value: 'kiwi', label: 'Kiwi' },
+  { value: 'lemon', label: 'Lemon' },
+  { value: 'mango', label: 'Mango' },
+  { value: 'orange', label: 'Orange' },
+  { value: 'papaya', label: 'Papaya' },
+  { value: 'raspberry', label: 'Raspberry' },
+  { value: 'strawberry', label: 'Strawberry' },
+];
+
+  const { value, onChange } = useMultiSelect({ initialValue: ['apple', 'banana'] });
+
+  return (
+      <Combobox
+        label="Select fruits"
+        onChange={onChange}
+        options={fruitOptions}
+        placeholder="Search and select fruits..."
+        type="multi"
+        value={value}
+      />
+  );
+}
+```
+
+### Single Select
+
+Standard single-selection combobox with an option to clear the current value.
+
+```jsx live
+function SingleSelect() {
+  const singleSelectOptions = [
+    { value: null, label: 'Remove selection' },
+    { value: 'apple', label: 'Apple' },
+    { value: 'banana', label: 'Banana' },
+    { value: 'cherry', label: 'Cherry' },
+    { value: 'date', label: 'Date' },
+  ];
+
+  const [value, setValue] = useState('apple');
+
+  return (
+    <Combobox
+      label="Favorite fruit"
+      onChange={setValue}
+      options={singleSelectOptions}
+      placeholder="Search fruits..."
+      value={value}
+    />
+  );
+}
+```
+
+### Helper Text
+
+Communicate limits or guidance by pairing helper text with multi-select usage.
+
+```jsx live
+function HelperText() {
+const fruitOptions: SelectOption[] = [
+  { value: 'apple', label: 'Apple' },
+  { value: 'banana', label: 'Banana' },
+  { value: 'cherry', label: 'Cherry' },
+  { value: 'date', label: 'Date' },
+  { value: 'elderberry', label: 'Elderberry' },
+  { value: 'fig', label: 'Fig' },
+  { value: 'grape', label: 'Grape' },
+  { value: 'honeydew', label: 'Honeydew' },
+  { value: 'kiwi', label: 'Kiwi' },
+  { value: 'lemon', label: 'Lemon' },
+  { value: 'mango', label: 'Mango' },
+  { value: 'orange', label: 'Orange' },
+  { value: 'papaya', label: 'Papaya' },
+  { value: 'raspberry', label: 'Raspberry' },
+  { value: 'strawberry', label: 'Strawberry' },
+];
+
+  const { value, onChange } = useMultiSelect({ initialValue: ['apple', 'banana'] });
+
+  return (
+      <Combobox
+      helperText="Choose more than one fruit"
+        label="Select fruits"
+        onChange={onChange}
+        options={fruitOptions}
+        placeholder="Search and select fruits..."
+        type="multi"
+        value={value}
+      />
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `onChange` | `(value: Type extends multi ? SelectOptionValue \| SelectOptionValue[] \| null : SelectOptionValue \| null) => void` | Yes | `-` | - |
+| `options` | `SelectOptionList<Type, SelectOptionValue>` | Yes | `-` | Array of options to display in the select dropdown. Can be individual options or groups with label and options |
+| `value` | `string \| SelectOptionValue[] \| null` | Yes | `-` | - |
+| `ComboboxControlComponent` | `ComboboxControlComponent` | No | `-` | Custom ComboboxControlComponent to wrap SelectControlComponent. This component must be a stable reference |
+| `SelectAllOptionComponent` | `SelectOptionComponent<Type, SelectOptionValue>` | No | `-` | Custom component to render the Select All option |
+| `SelectControlComponent` | `SelectControlComponent<Type, SelectOptionValue>` | No | `-` | Custom component to render the select control |
+| `SelectDropdownComponent` | `SelectDropdownComponent<Type, SelectOptionValue>` | No | `-` | Custom component to render the dropdown container |
+| `SelectEmptyDropdownContentsComponent` | `SelectEmptyDropdownContentComponent` | No | `-` | Custom component to render when no options are available |
+| `SelectOptionComponent` | `SelectOptionComponent<Type, SelectOptionValue>` | No | `-` | Custom component to render individual options |
+| `SelectOptionGroupComponent` | `SelectOptionGroupComponent<Type, SelectOptionValue>` | No | `-` | Custom component to render group headers |
+| `accessibilityRoles` | `{ dropdown?: AriaHasPopupType; option?: string \| undefined; } \| undefined` | No | `-` | Accessibility roles for dropdown and option elements |
+| `accessory` | `ReactElement<CellAccessoryProps, string \| JSXElementConstructor<any>>` | No | `-` | Accessory element rendered at the end of the cell (e.g., chevron). |
+| `className` | `string` | No | `-` | CSS class name for the root element |
+| `classNames` | `{ root?: string; control?: string \| undefined; controlStartNode?: string \| undefined; controlInputNode?: string \| undefined; controlValueNode?: string \| undefined; controlLabelNode?: string \| undefined; controlHelperTextNode?: string \| undefined; controlEndNode?: string \| undefined; dropdown?: string \| undefined; option?: string \| undefined; optionCell?: string \| undefined; optionContent?: string \| undefined; optionLabel?: string \| undefined; optionDescription?: string \| undefined; selectAllDivider?: string \| undefined; emptyContentsContainer?: string \| undefined; emptyContentsText?: string \| undefined; optionGroup?: string \| undefined; } \| undefined` | No | `-` | Custom class names for different parts of the select |
+| `clearAllLabel` | `string` | No | `-` | Label for the Clear All option in multi-select mode |
+| `compact` | `boolean` | No | `-` | Whether to use compact styling for the select |
+| `controlAccessibilityLabel` | `string` | No | `-` | Accessibility label for the control |
+| `defaultOpen` | `boolean` | No | `-` | Initial open state when component mounts (uncontrolled mode) |
+| `defaultSearchText` | `string` | No | `-` | Default search text value for uncontrolled mode |
+| `disableClickOutsideClose` | `boolean` | No | `-` | Whether clicking outside the dropdown should close it |
+| `disabled` | `boolean` | No | `false` | Toggles input interactability and opacity |
+| `emptyOptionsLabel` | `string` | No | `-` | Label displayed when there are no options available |
+| `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | End-aligned content (e.g., value, status). Replaces the deprecated detail prop. |
+| `endNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Adds content to the end of the inner input. Refer to diagram for location of endNode in InputStack component |
+| `filterFunction` | `((options: SelectOptionList<Type, SelectOptionValue>, searchText: string) => SelectOption<SelectOptionValue>[])` | No | `-` | Custom filter function for searching options |
+| `helperText` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Helper text displayed below the select |
+| `hiddenSelectedOptionsLabel` | `string` | No | `-` | Label to show for showcasing count of hidden selected options |
+| `hideSearchInput` | `boolean` | No | `-` | Hide the search input |
+| `hideSelectAll` | `boolean` | No | `-` | Whether to hide the Select All option in multi-select mode |
+| `label` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Label displayed above the control |
+| `labelVariant` | `inside \| outside` | No | `'outside'` | The variant of the label. Only used when compact is not true. |
+| `maxSelectedOptionsToShow` | `number` | No | `-` | Maximum number of selected options to show before truncating |
+| `media` | `ReactElement` | No | `-` | Media rendered at the start of the cell (icon, avatar, image, etc). |
+| `onSearch` | `((searchText: string) => void)` | No | `-` | Search text change handler |
+| `open` | `boolean` | No | `-` | Controlled open state of the dropdown |
+| `placeholder` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Placeholder text displayed when no option is selected |
+| `ref` | `null \| (instance: SelectRef \| null) => void \| RefObject<SelectRef>` | No | `-` | - |
+| `removeSelectedOptionAccessibilityLabel` | `string` | No | `-` | Accessibility label for each chip in a multi-select |
+| `searchText` | `string` | No | `-` | Controlled search text value |
+| `selectAllLabel` | `string` | No | `-` | Label for the Select All option in multi-select mode |
+| `setOpen` | `((open: boolean \| ((open: boolean) => boolean)) => void)` | No | `-` | Callback to update the open state |
+| `startNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Adds content to the start of the inner input. Refer to diagram for location of startNode in InputStack component |
+| `style` | `CSSProperties` | No | `-` | Inline styles for the root element |
+| `styles` | `{ root?: CSSProperties; control?: CSSProperties \| undefined; controlStartNode?: CSSProperties \| undefined; controlInputNode?: CSSProperties \| undefined; controlValueNode?: CSSProperties \| undefined; controlLabelNode?: CSSProperties \| undefined; controlHelperTextNode?: CSSProperties \| undefined; controlEndNode?: CSSProperties \| undefined; controlBlendStyles?: InteractableBlendStyles \| undefined; dropdown?: CSSProperties \| undefined; option?: CSSProperties \| undefined; optionCell?: CSSProperties \| undefined; optionContent?: CSSProperties \| undefined; optionLabel?: CSSProperties \| undefined; optionDescription?: CSSProperties \| undefined; optionBlendStyles?: InteractableBlendStyles \| undefined; selectAllDivider?: CSSProperties \| undefined; emptyContentsContainer?: CSSProperties \| undefined; emptyContentsText?: CSSProperties \| undefined; optionGroup?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for different parts of the select |
+| `testID` | `string` | No | `-` | Test ID for the root element |
+| `type` | `multi \| single` | No | `-` | Whether the select allows single or multiple selections |
+| `variant` | `primary \| secondary \| positive \| negative \| foregroundMuted \| foreground` | No | `foregroundMuted` | Determines the sentiment of the input. Because we allow startContent and endContent to be custom ReactNode, the content placed inside these slots will not change colors according to the variant. You will have to add that yourself |
+
+

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

@@ -23,9 +23,9 @@ function Example() {
     {
       title: '$4.15',
       description: (
-        <TextLabel2 as="p" color="fgPositive" numberOfLines={2}>
+        <Text as="p" font="label2" color="fgPositive" numberOfLines={2}>
           &#x2197;73.37%
-        </TextLabel2>
+        </Text>
       ),
       subtitle: 'ETH',
       onClick: NoopFn,
@@ -55,9 +55,9 @@ function Example() {
     {
       title: '$309.43',
       description: (
-        <TextLabel2 as="p" color="fgPositive" numberOfLines={2}>
+        <Text as="p" font="label2" color="fgPositive" numberOfLines={2}>
           &#x2197;3.37%
-        </TextLabel2>
+        </Text>
       ),
       subtitle: 'Bitcoin',
       onClick: NoopFn,