@coinbase/cds-mcp-server 8.17.3 → 8.17.4

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

@@ -4,18 +4,10 @@ Coinbase sub-brand logo marks for specialized branding.
 
 ## Import
 
-```jsx
+```tsx
 import { SubBrandLogoMark } from '@coinbase/cds-web/icons/SubBrandLogoMark'
 ```
 
-## Props
-
-| Prop | Type | Required | Default | Description |
-| --- | --- | --- | --- | --- |
-| `type` | `base \| keyof SubBrandLogoDataByType` | Yes | `-` | - |
-| `foreground` | `boolean` | No | `-` | - |
-
-
 ## Examples
 
 ### Basic usage
@@ -123,4 +115,11 @@ SubBrandLogoMark doesn't have a `size` prop. Instead, control its size by settin
 </VStack>
 ```
 
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `type` | `base \| keyof SubBrandLogoDataByType` | Yes | `-` | - |
+| `foreground` | `boolean` | No | `-` | - |
+
 

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

@@ -4,18 +4,10 @@ Coinbase sub-brand logo wordmarks for specialized branding.
 
 ## Import
 
-```jsx
+```tsx
 import { SubBrandLogoWordmark } from '@coinbase/cds-web/icons/SubBrandLogoWordmark'
 ```
 
-## Props
-
-| Prop | Type | Required | Default | Description |
-| --- | --- | --- | --- | --- |
-| `type` | `keyof SubBrandLogoDataByType \| advanced \| derivativesExchange \| prime` | Yes | `-` | - |
-| `foreground` | `boolean` | No | `-` | - |
-
-
 ## Examples
 
 ### Basic usage
@@ -123,4 +115,11 @@ SubBrandLogoWordmark doesn't have a `size` prop. Instead, control its size by se
 </VStack>
 ```
 
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `type` | `keyof SubBrandLogoDataByType \| advanced \| derivativesExchange \| prime` | Yes | `-` | - |
+| `foreground` | `boolean` | No | `-` | - |
+
 

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

@@ -4,33 +4,10 @@ A control for toggling between on and off.
 
 ## Import
 
-```jsx
+```tsx
 import { Switch } from '@coinbase/cds-web/controls/Switch'
 ```
 
-## Props
-
-| Prop | Type | Required | Default | Description |
-| --- | --- | --- | --- | --- |
-| `accessibilityLabel` | `string` | No | `-` | Accessibility label describing the element. |
-| `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `checked ? 'bgPrimary' : 'bgTertiary'` | Background color of the overlay (element being interacted with). |
-| `borderColor` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | Border color of the element. |
-| `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `1000` | - |
-| `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
-| `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Label for the control option. |
-| `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
-| `controlColor` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `bgPrimary` | Sets the checked/active color of the control. |
-| `iconStyle` | `CSSProperties` | No | `-` | Style for the icon element |
-| `indeterminate` | `boolean` | No | `-` | Enable indeterminate state. Useful when you want to indicate that sub-items of a control are partially filled. |
-| `key` | `Key \| null` | No | `-` | - |
-| `labelStyle` | `CSSProperties` | No | `-` | Style for the label element |
-| `onChange` | `ChangeEventHandler<HTMLInputElement>` | No | `-` | - |
-| `ref` | `((instance: HTMLInputElement \| null) => void) \| RefObject<HTMLInputElement> \| null` | No | `-` | - |
-| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
-| `type` | `number \| color \| button \| search \| time \| image \| text \| hidden \| string & {} \| email \| checkbox \| radio \| tel \| url \| date \| submit \| reset \| datetime-local \| file \| month \| password \| range \| week` | No | `-` | - |
-| `value` | `string` | No | `-` | Value of the option. Useful for multiple choice. |
-
-
 ## Examples
 
 ```jsx live
@@ -83,4 +60,26 @@ function AdvancedSwitchDemo() {
 }
 ```
 
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `accessibilityLabel` | `string` | No | `-` | Accessibility label describing the element. |
+| `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `checked ? 'bgPrimary' : 'bgTertiary'` | Background color of the overlay (element being interacted with). |
+| `borderColor` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | Border color of the element. |
+| `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `1000` | - |
+| `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Label for the control option. |
+| `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
+| `controlColor` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `bgPrimary` | Sets the checked/active color of the control. |
+| `iconStyle` | `CSSProperties` | No | `-` | Style for the icon element |
+| `indeterminate` | `boolean` | No | `-` | Enable indeterminate state. Useful when you want to indicate that sub-items of a control are partially filled. |
+| `key` | `Key \| null` | No | `-` | - |
+| `labelStyle` | `CSSProperties` | No | `-` | Style for the label element |
+| `onChange` | `ChangeEventHandler<HTMLInputElement>` | No | `-` | - |
+| `ref` | `((instance: HTMLInputElement \| null) => void) \| RefObject<HTMLInputElement> \| null` | No | `-` | - |
+| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
+| `type` | `number \| color \| button \| search \| time \| image \| text \| hidden \| string & {} \| email \| checkbox \| radio \| tel \| url \| date \| submit \| reset \| datetime-local \| file \| month \| password \| range \| week` | No | `-` | - |
+| `value` | `string` | No | `-` | Value of the option. Useful for multiple choice. |
+
 

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

@@ -4,22 +4,10 @@ A visual indicator that shows the active tab position.
 
 ## Import
 
-```jsx
+```tsx
 import { TabIndicator } from '@coinbase/cds-web/tabs/TabIndicator'
 ```
 
-## Props
-
-| Prop | Type | Required | Default | Description |
-| --- | --- | --- | --- | --- |
-| `width` | `number` | Yes | `-` | The width of the active TabLabel. |
-| `x` | `number` | Yes | `-` | The xPosition of the active TabLabel. |
-| `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `: 'bg'` | This should always match the background color of the parent container |
-| `key` | `Key \| null` | No | `-` | - |
-| `ref` | `RefObject<HTMLDivElement> \| ((instance: HTMLDivElement \| null) => void) \| null` | No | `-` | - |
-| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
-
-
 ## Examples
 
 ### Basic Example
@@ -46,4 +34,15 @@ function TabIndicatorExample() {
 }
 ```
 
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `width` | `number` | Yes | `-` | The width of the active TabLabel. |
+| `x` | `number` | Yes | `-` | The xPosition of the active TabLabel. |
+| `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `: 'bg'` | This should always match the background color of the parent container |
+| `key` | `Key \| null` | No | `-` | - |
+| `ref` | `RefObject<HTMLDivElement> \| ((instance: HTMLDivElement \| null) => void) \| null` | No | `-` | - |
+| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
+
 

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

@@ -4,10 +4,37 @@ A text label component used within tab navigation.
 
 ## Import
 
-```jsx
+```tsx
 import { TabLabel } from '@coinbase/cds-web/tabs/TabLabel'
 ```
 
+## Examples
+
+### Basic Example
+
+```jsx live
+<VStack gap={2}>
+  <HStack gap={2}>
+    <TabLabel>Primary tab</TabLabel>
+    <TabLabel count={1}>Primary tab</TabLabel>
+    <TabLabel count={10}>Primary tab</TabLabel>
+    <TabLabel count={100}>Primary tab</TabLabel>
+  </HStack>
+  <HStack gap={2}>
+    <TabLabel variant="secondary">Secondary tab</TabLabel>
+    <TabLabel variant="secondary" count={1}>
+      Secondary tab
+    </TabLabel>
+    <TabLabel variant="secondary" count={10}>
+      Secondary tab
+    </TabLabel>
+    <TabLabel variant="secondary" count={100}>
+      Secondary tab
+    </TabLabel>
+  </HStack>
+</VStack>
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
@@ -129,31 +156,3 @@ import { TabLabel } from '@coinbase/cds-web/tabs/TabLabel'
 | `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
 
 
-## Examples
-
-### Basic Example
-
-```jsx live
-<VStack gap={2}>
-  <HStack gap={2}>
-    <TabLabel>Primary tab</TabLabel>
-    <TabLabel count={1}>Primary tab</TabLabel>
-    <TabLabel count={10}>Primary tab</TabLabel>
-    <TabLabel count={100}>Primary tab</TabLabel>
-  </HStack>
-  <HStack gap={2}>
-    <TabLabel variant="secondary">Secondary tab</TabLabel>
-    <TabLabel variant="secondary" count={1}>
-      Secondary tab
-    </TabLabel>
-    <TabLabel variant="secondary" count={10}>
-      Secondary tab
-    </TabLabel>
-    <TabLabel variant="secondary" count={100}>
-      Secondary tab
-    </TabLabel>
-  </HStack>
-</VStack>
-```
-
-

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

@@ -4,10 +4,50 @@ Organizes content across different screens or data sets.
 
 ## Import
 
-```jsx
+```tsx
 import { TabNavigation } from '@coinbase/cds-web/tabs/TabNavigation'
 ```
 
+## Examples
+
+### Basic Example
+
+```jsx live
+function TabNavigationExample() {
+  // TAB MOCK DATA
+  const tabs = useMemo(() => [
+    { id: 'first_primary_tab', label: 'Tab one' },
+    { id: 'second_primary_tab', label: 'Tab two' },
+    { id: 'third_primary_tab', label: 'Tab three' },
+    { id: 'fourth_primary_tab', label: 'Tab four' },
+    { id: 'fifth_primary_tab', label: 'Tab five' },
+  ]);
+  const secondaryTabs = useMemo(() => [
+    { id: 'first_secondary_tab', label: 'Tab one' },
+    { id: 'second_secondary_tab', label: 'Tab two' },
+  ]);
+
+  const [primary, setPrimary] = useState();
+  const [secondary, setSecondary] = useState();
+
+  return (
+    <VStack gap={2}>
+      <TabNavigation value={primary} tabs={tabs} onChange={setPrimary} />
+      <TabNavigation
+        variant="secondary"
+        value={secondary}
+        tabs={secondaryTabs}
+        onChange={setSecondary}
+      />
+    </VStack>
+  );
+}
+```
+
+import A11y from './a11y.mdx';
+
+<A11y />
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
@@ -117,44 +157,3 @@ import { TabNavigation } from '@coinbase/cds-web/tabs/TabNavigation'
 | `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
 
 
-## Examples
-
-### Basic Example
-
-```jsx live
-function TabNavigationExample() {
-  // TAB MOCK DATA
-  const tabs = useMemo(() => [
-    { id: 'first_primary_tab', label: 'Tab one' },
-    { id: 'second_primary_tab', label: 'Tab two' },
-    { id: 'third_primary_tab', label: 'Tab three' },
-    { id: 'fourth_primary_tab', label: 'Tab four' },
-    { id: 'fifth_primary_tab', label: 'Tab five' },
-  ]);
-  const secondaryTabs = useMemo(() => [
-    { id: 'first_secondary_tab', label: 'Tab one' },
-    { id: 'second_secondary_tab', label: 'Tab two' },
-  ]);
-
-  const [primary, setPrimary] = useState();
-  const [secondary, setSecondary] = useState();
-
-  return (
-    <VStack gap={2}>
-      <TabNavigation value={primary} tabs={tabs} onChange={setPrimary} />
-      <TabNavigation
-        variant="secondary"
-        value={secondary}
-        tabs={secondaryTabs}
-        onChange={setSecondary}
-      />
-    </VStack>
-  );
-}
-```
-
-import A11y from './a11y.mdx';
-
-<A11y />
-
-

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

@@ -4,10 +4,47 @@ Tab chips are to be used in a filter setting where the user is given the ability
 
 ## Import
 
-```jsx
+```tsx
 import { TabbedChips } from '@coinbase/cds-web/chips/TabbedChips'
 ```
 
+## Examples
+
+### Basic Example
+
+```jsx live
+function TabbedChipsExample() {
+  const tabs = [
+    {
+      id: 'all_tab',
+      label: 'All',
+    },
+    {
+      id: 'swap_',
+      label: 'Swap',
+    },
+    {
+      id: 'collect_tab',
+      label: 'Collect',
+    },
+    {
+      id: 'bridge_tab',
+      label: 'Bridge',
+    },
+  ];
+  const [value, setValue] = useState(tabs[0].id);
+  return (
+    <VStack maxWidth={375} borderRadius={400} bordered paddingX={3} gap={2} paddingY={3}>
+      <VStack paddingTop={1}>
+        <TextTitle3 as="p">Popular assets</TextTitle3>
+      </VStack>
+      <SearchInput compact placeholder="Search by name" />
+      <TabbedChips value={value} onChange={setValue} tabs={tabs} />
+    </VStack>
+  );
+}
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
@@ -116,41 +153,3 @@ import { TabbedChips } from '@coinbase/cds-web/chips/TabbedChips'
 | `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
 
 
-## Examples
-
-### Basic Example
-
-```jsx live
-function TabbedChipsExample() {
-  const tabs = [
-    {
-      id: 'all_tab',
-      label: 'All',
-    },
-    {
-      id: 'swap_',
-      label: 'Swap',
-    },
-    {
-      id: 'collect_tab',
-      label: 'Collect',
-    },
-    {
-      id: 'bridge_tab',
-      label: 'Bridge',
-    },
-  ];
-  const [value, setValue] = useState(tabs[0].id);
-  return (
-    <VStack maxWidth={375} borderRadius={400} bordered paddingX={3} gap={2} paddingY={3}>
-      <VStack paddingTop={1}>
-        <TextTitle3 as="p">Popular assets</TextTitle3>
-      </VStack>
-      <SearchInput compact placeholder="Search by name" />
-      <TabbedChips value={value} onChange={setValue} tabs={tabs} />
-    </VStack>
-  );
-}
-```
-
-

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

@@ -4,27 +4,10 @@ Displays data in rows and columns.
 
 ## Import
 
-```jsx
+```tsx
 import { Table } from '@coinbase/cds-web/tables/Table'
 ```
 
-## Props
-
-| Prop | Type | Required | Default | Description |
-| --- | --- | --- | --- | --- |
-| `bordered` | `boolean` | No | `-` | When set, a border will be applied around the entire table |
-| `cellSpacing` | `TableCellSpacing` | No | `-` | Provide custom cell spacing for all child TableCells |
-| `compact` | `boolean` | No | `-` | Use compact cell spacing. If set, cellSpacing will override these defaults |
-| `height` | `string \| number` | No | `-` | Set a fixed height. |
-| `key` | `Key \| null` | No | `-` | - |
-| `maxHeight` | `string \| number` | No | `-` | Set a maximum height. |
-| `onChange` | `FormEventHandler<HTMLTableElement>` | No | `-` | - |
-| `ref` | `((instance: HTMLTableElement \| null) => void) \| RefObject<HTMLTableElement> \| null` | No | `-` | - |
-| `tableLayout` | `fixed \| auto` | No | `'auto'` | Use tableLayout=fixed if you need full control over cell width |
-| `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 |
-| `variant` | `default \| graph \| ruled` | No | `undefined` | The variant prop allows clients to use a CDS approved style for their Table. |
-
-
 ## Examples
 
 CDS Data Tables allow product teams to place their content in an organized display of rows and columns enabling them to group their data by different classifications so their product users can make comparisons, glean insights and make informed decisions.
@@ -365,4 +348,20 @@ function SortingExample() {
 }
 ```
 
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `bordered` | `boolean` | No | `-` | When set, a border will be applied around the entire table |
+| `cellSpacing` | `TableCellSpacing` | No | `-` | Provide custom cell spacing for all child TableCells |
+| `compact` | `boolean` | No | `-` | Use compact cell spacing. If set, cellSpacing will override these defaults |
+| `height` | `string \| number` | No | `-` | Set a fixed height. |
+| `key` | `Key \| null` | No | `-` | - |
+| `maxHeight` | `string \| number` | No | `-` | Set a maximum height. |
+| `onChange` | `FormEventHandler<HTMLTableElement>` | No | `-` | - |
+| `ref` | `((instance: HTMLTableElement \| null) => void) \| RefObject<HTMLTableElement> \| null` | No | `-` | - |
+| `tableLayout` | `fixed \| auto` | No | `'auto'` | Use tableLayout=fixed if you need full control over cell width |
+| `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 |
+| `variant` | `default \| graph \| ruled` | No | `undefined` | The variant prop allows clients to use a CDS approved style for their Table. |
+
 

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

@@ -4,19 +4,10 @@ Defines the body section of Table.
 
 ## Import
 
-```jsx
+```tsx
 import { TableBody } from '@coinbase/cds-web/tables/TableBody'
 ```
 
-## Props
-
-| Prop | Type | Required | Default | Description |
-| --- | --- | --- | --- | --- |
-| `as` | `div \| tbody \| tfoot \| thead` | No | `undefined` | Internal only |
-| `className` | `string` | No | `-` | - |
-| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
-
-
 ## Examples
 
 ### Basic usage
@@ -81,4 +72,12 @@ import { TableBody } from '@coinbase/cds-web/tables/TableBody'
 </Table>
 ```
 
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `as` | `div \| tbody \| tfoot \| thead` | No | `undefined` | Internal only |
+| `className` | `string` | No | `-` | - |
+| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
+
 

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

@@ -4,23 +4,10 @@ Sets an accessible title or caption for Table.
 
 ## Import
 
-```jsx
+```tsx
 import { TableCaption } from '@coinbase/cds-web/tables/TableCaption'
 ```
 
-## Props
-
-| Prop | Type | Required | Default | Description |
-| --- | --- | --- | --- | --- |
-| `align` | `center \| start \| end \| justify` | No | `'start'` | Specify text alignment. Only applicable when children is a string. |
-| `as` | `div \| abbr \| code \| dd \| del \| dl \| dt \| h1 \| h2 \| h3 \| h4 \| ins \| kbd \| label \| li \| output \| p \| pre \| q \| s \| span \| strong \| sub \| sup \| time` | No | `'span'` | A semantic HTML element or a React component to be rendered. Only applicable when children is a string. |
-| `backgroundColor` | `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 | `-` | Set the background color to a CDS palette background color name. |
-| `innerSpacing` | `CellSpacing` | No | `-` | The spacing to use on the inner content of the caption. Overrides table cell spacing defaults. |
-| `onChange` | `FormEventHandler<HTMLTableCaptionElement>` | No | `-` | - |
-| `outerSpacing` | `CellSpacing` | No | `-` | The spacing to use on the parent wrapper of the caption. Overrides table cell spacing defaults. |
-| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
-
-
 ## Examples
 
 ### Basic usage
@@ -100,4 +87,16 @@ import { TableCaption } from '@coinbase/cds-web/tables/TableCaption'
 </Table>
 ```
 
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `align` | `center \| start \| end \| justify` | No | `'start'` | Specify text alignment. Only applicable when children is a string. |
+| `as` | `div \| abbr \| code \| dd \| del \| dl \| dt \| h1 \| h2 \| h3 \| h4 \| ins \| kbd \| label \| li \| output \| p \| pre \| q \| s \| span \| strong \| sub \| sup \| time` | No | `'span'` | A semantic HTML element or a React component to be rendered. Only applicable when children is a string. |
+| `backgroundColor` | `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 | `-` | Set the background color to a CDS palette background color name. |
+| `innerSpacing` | `CellSpacing` | No | `-` | The spacing to use on the inner content of the caption. Overrides table cell spacing defaults. |
+| `onChange` | `FormEventHandler<HTMLTableCaptionElement>` | No | `-` | - |
+| `outerSpacing` | `CellSpacing` | No | `-` | The spacing to use on the parent wrapper of the caption. Overrides table cell spacing defaults. |
+| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
+
 

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

@@ -4,31 +4,10 @@ Defines individual cells within a Table.
 
 ## Import
 
-```jsx
+```tsx
 import { TableCell } from '@coinbase/cds-web/tables/TableCell'
 ```
 
-## Props
-
-| Prop | Type | Required | Default | Description |
-| --- | --- | --- | --- | --- |
-| `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `'center'` | This prop us useful for aligning the last item to the right, or top-aligning cells |
-| `as` | `td \| th` | No | ``th` when rendered inside a TableHeader, `td` when rendered inside a TableBody or TableFooter` | Use as=th to mark this cell as a header for screen readers |
-| `dangerouslySetHtmlWidth` | `string \| number` | No | `undefined` | - |
-| `direction` | `horizontal \| vertical` | No | `vertical` | Direction provides content flow control. Use vertical to inherit a VStask, horizontal for an HStack |
-| `end` | `ReactElement` | No | `undefined` | Element (icon, asset, image, etc) to display at the end of the cell |
-| `innerSpacing` | `CellSpacing` | No | `{ spacingHorizontal: 0 }` | The spacing to use on the inner content of Cell |
-| `justifyContent` | `space-evenly \| FlexAxisValue \| FlexSpaceCommon` | No | `'flex-start'` | This prop us useful for right-aligning the last column |
-| `onChange` | `FormEventHandler<HTMLTableCellElement>` | No | `-` | - |
-| `outerSpacing` | `CellSpacing` | No | `-` | The spacing to use on the parent wrapper of Cell |
-| `overflow` | `clip \| wrap \| truncate \| break` | No | `false` | Should the title/subtitle text truncate |
-| `start` | `ReactElement` | No | `undefined` | Element (icon, asset, image, etc) to display at the start of the cell |
-| `subtitle` | `string` | No | `undefined` | A subtitle will appear below the title with font=label2. |
-| `subtitleColor` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
-| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
-| `titleColor` | `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 | `-` | - |
-
-
 ## Examples
 
 ### Basic usage
@@ -163,4 +142,24 @@ import { TableCell } from '@coinbase/cds-web/tables/TableCell'
 </Table>
 ```
 
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `'center'` | This prop us useful for aligning the last item to the right, or top-aligning cells |
+| `as` | `td \| th` | No | ``th` when rendered inside a TableHeader, `td` when rendered inside a TableBody or TableFooter` | Use as=th to mark this cell as a header for screen readers |
+| `dangerouslySetHtmlWidth` | `string \| number` | No | `undefined` | - |
+| `direction` | `horizontal \| vertical` | No | `vertical` | Direction provides content flow control. Use vertical to inherit a VStask, horizontal for an HStack |
+| `end` | `ReactElement` | No | `undefined` | Element (icon, asset, image, etc) to display at the end of the cell |
+| `innerSpacing` | `CellSpacing` | No | `{ spacingHorizontal: 0 }` | The spacing to use on the inner content of Cell |
+| `justifyContent` | `space-evenly \| FlexAxisValue \| FlexSpaceCommon` | No | `'flex-start'` | This prop us useful for right-aligning the last column |
+| `onChange` | `FormEventHandler<HTMLTableCellElement>` | No | `-` | - |
+| `outerSpacing` | `CellSpacing` | No | `-` | The spacing to use on the parent wrapper of Cell |
+| `overflow` | `clip \| wrap \| truncate \| break` | No | `false` | Should the title/subtitle text truncate |
+| `start` | `ReactElement` | No | `undefined` | Element (icon, asset, image, etc) to display at the start of the cell |
+| `subtitle` | `string` | No | `undefined` | A subtitle will appear below the title with font=label2. |
+| `subtitleColor` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
+| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
+| `titleColor` | `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 | `-` | - |
+