@coinbase/cds-mcp-server 8.62.1 → 8.66.0

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

@@ -1,5 +1,7 @@
 # PeriodSelector
 
+**📖 Live documentation:** https://cds.coinbase.com/components/charts/PeriodSelector/
+
 A selector component for choosing time periods in charts.
 
 ## Import
@@ -556,8 +558,8 @@ function Example() {
 | --- | --- | --- | --- | --- |
 | `activeTab` | `TabValue<string> \| null` | Yes | `-` | React state for the currently active tab. Setting it to null results in no active tab. |
 | `onChange` | `(activeTab: TabValue<string> \| null) => void` | Yes | `-` | Callback that is fired when the active tab changes. Use this callback to update the activeTab state. |
-| `tabs` | `(TabValue<string> & { Component?: TabComponent<string> \| undefined; })[]` | Yes | `-` | The array of tabs data. Each tab may optionally define a custom Component to render. |
-| `TabComponent` | `TabComponent<string>` | No | `-` | The default Component to render each tab. |
+| `tabs` | `(TabValue<string> & { Component?: TabComponent<string, TabValue<string>> \| undefined; })[]` | Yes | `-` | The array of tabs data. Each tab may optionally define a custom Component to render. |
+| `TabComponent` | `TabComponent<string, TabValue<string>>` | No | `-` | The default Component to render each tab. |
 | `TabsActiveIndicatorComponent` | `TabsActiveIndicatorComponent` | No | `-` | The default Component to render the tabs active indicator. |
 | `activeBackground` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | Background color passed to the TabsActiveIndicatorComponent. |
 | `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| space-between \| space-around \| space-evenly \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |

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

@@ -1,5 +1,7 @@
 # Pictogram
 
+**📖 Live documentation:** https://cds.coinbase.com/components/media/Pictogram/
+
 Displays elevated product icons.
 
 ## Import

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

@@ -1,5 +1,7 @@
 # Point
 
+**📖 Live documentation:** https://cds.coinbase.com/components/charts/Point/
+
 Visual markers that highlight specific data values on a chart. Points can be customized with different colors, sizes, and interactivity.
 
 ## Import

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

@@ -0,0 +1,283 @@
+# PopoverPanel
+
+**📖 Live documentation:** https://cds.coinbase.com/components/overlay/PopoverPanel/
+
+PopoverPanel anchors an elevated floating panel to a trigger element.
+
+## Import
+
+```tsx
+import { PopoverPanel } from '@coinbase/cds-web/overlays'
+```
+
+## Examples
+
+### Basics
+
+Pass `content` for the panel body and `children` as the trigger. The trigger toggles open and closed on press; the panel applies focus management and escape-to-close behavior.
+
+:::tip Use an interactive element as the trigger
+Always pass a natively interactive element — such as [Button](/components/inputs/Button/), [IconButton](/components/inputs/IconButton/), or an `<a>` tag — as `children`. Non-interactive elements (plain `div`, `span`, `Text`) are not reachable by keyboard and are invisible to assistive technology, which breaks accessibility.
+:::
+
+```jsx live
+function BasicExample() {
+  return (
+    <PortalProvider>
+      <PopoverPanel
+        content={({ closePopover }) => (
+          <VStack padding={3} gap={2}>
+            <Text font="headline">Panel title</Text>
+            <Text color="fgMuted">Arbitrary content for a floating panel.</Text>
+            <Button variant="secondary" compact onClick={closePopover}>
+              Action
+            </Button>
+          </VStack>
+        )}
+        accessibilityLabel="Example settings panel"
+      >
+        <Button>Open panel</Button>
+      </PopoverPanel>
+    </PortalProvider>
+  );
+}
+```
+
+### Selectable list
+
+Use [`ListCell`](/components/data-display/ListCell/) with local state for the selected row and `closePopover` from the `content` render callback. You do not need `SelectProvider` or `SelectContext`.
+
+After a value is chosen, the trigger often shows only the title. Set **`accessibilityLabel`** on the trigger to include the same details a sighted user gets from the list (for example title and description). Optionally set the panel **`accessibilityLabel`** so the dialog name matches the task (first choice vs. changing the value).
+
+```jsx live
+function ListCellSelectExample() {
+  const [selectedId, setSelectedId] = useState(null);
+  const options = [
+    { id: 'eth', title: 'Ethereum', description: 'Main network' },
+    { id: 'base', title: 'Base', description: 'L2 network' },
+    { id: 'sol', title: 'Solana', description: 'External wallet' },
+  ];
+  const selected = options.find((o) => o.id === selectedId);
+
+  return (
+    <PortalProvider>
+      <PopoverPanel
+        panelWidth={320}
+        accessibilityLabel={selected ? 'Change network' : 'Choose network'}
+        content={({ closePopover }) => (
+          <VStack gap={0}>
+            {options.map((option) => (
+              <ListCell
+                key={option.id}
+                spacingVariant="condensed"
+                title={option.title}
+                description={option.description}
+                selected={selectedId === option.id}
+                onClick={() => {
+                  setSelectedId(option.id);
+                  closePopover();
+                }}
+              />
+            ))}
+          </VStack>
+        )}
+      >
+        <Button
+          endIcon="caretDown"
+          width={240}
+          accessibilityLabel={
+            selected
+              ? `${selected.title}, ${selected.description}, click to change`
+              : 'Choose network'
+          }
+        >
+          {selected ? selected.title : 'Choose Network'}
+        </Button>
+      </PopoverPanel>
+    </PortalProvider>
+  );
+}
+```
+
+### Overlay and placement
+
+Use `showOverlay` to dim content behind the panel. Adjust floating placement with `contentPosition` (see [Floating UI placement](https://floating-ui.com/docs/useFloating#placement)).
+
+```jsx live
+function OverlayAndPlacementExample() {
+  return (
+    <PortalProvider>
+      <HStack gap={3} flexWrap="wrap">
+        <PopoverPanel
+          content={({ closePopover }) => (
+            <VStack padding={3} gap={2}>
+              <Text>Content with overlay and top placement.</Text>
+              <Button variant="secondary" compact onClick={closePopover}>
+                Done
+              </Button>
+            </VStack>
+          )}
+          showOverlay
+          accessibilityLabel="Panel with overlay"
+        >
+          <Button>With overlay</Button>
+        </PopoverPanel>
+        <PopoverPanel
+          content={({ closePopover }) => (
+            <VStack padding={3} gap={2}>
+              <Text>Content with overlay and top placement.</Text>
+              <Button variant="secondary" compact onClick={closePopover}>
+                Done
+              </Button>
+            </VStack>
+          )}
+          contentPosition={{ placement: 'top', gap: 1 }}
+          accessibilityLabel="Panel above trigger"
+        >
+          <Button>Top placement</Button>
+        </PopoverPanel>
+      </HStack>
+    </PortalProvider>
+  );
+}
+```
+
+### Panel sizing
+
+By default, the panel content uses the same width as the trigger. Set `panelWidth`, `minPanelWidth`, `maxPanelWidth`, and `maxPanelHeight` when you need different constraints. The default max height is exported as `POPOVER_PANEL_MAX_HEIGHT`.
+
+```jsx live
+function SizingExample() {
+  return (
+    <PortalProvider>
+      <PopoverPanel
+        content={({ closePopover }) => (
+          <VStack padding={2} gap={1}>
+            {Array.from({ length: 12 }, (_, i) => (
+              <Text key={i}>Row {i + 1}</Text>
+            ))}
+            <Button variant="secondary" compact onClick={closePopover}>
+              Close
+            </Button>
+          </VStack>
+        )}
+        panelWidth={280}
+        maxPanelHeight={200}
+        accessibilityLabel="Scrollable panel"
+      >
+        <Button>Fixed width and max height</Button>
+      </PopoverPanel>
+    </PortalProvider>
+  );
+}
+```
+
+### Mobile modal
+
+On small viewports, pass `enableMobileModal` to render the panel in a modal shell instead of a floating popover.
+
+```jsx live
+function MobileModalExample() {
+  return (
+    <PortalProvider>
+      <PopoverPanel
+        content={({ closePopover }) => (
+          <VStack padding={3} gap={2}>
+            <Text font="headline">Modal-style panel</Text>
+            <Text color="fgMuted">
+              Useful when the floating surface would be cramped on phone breakpoints.
+            </Text>
+            <Button variant="secondary" compact onClick={closePopover}>
+              Close
+            </Button>
+          </VStack>
+        )}
+        enableMobileModal
+        accessibilityLabel="Settings in modal"
+        panelWidth={320}
+        maxPanelWidth="80vw"
+      >
+        <Button>Open (modal on small screens)</Button>
+      </PopoverPanel>
+    </PortalProvider>
+  );
+}
+```
+
+### Imperative open and close
+
+Use a ref to call `openPopover` and `closePopover` when you need to drive visibility from elsewhere (for example, a separate control or analytics callback).
+
+```jsx live
+function ImperativeExample() {
+  const panelRef = useRef(null);
+
+  return (
+    <PortalProvider>
+      <HStack gap={2} flexWrap="wrap" alignItems="center">
+        <Button variant="secondary" onClick={() => panelRef.current?.openPopover()}>
+          Open programmatically
+        </Button>
+        <PopoverPanel
+          ref={panelRef}
+          content={
+            <VStack padding={3} gap={2}>
+              <Text>Panel opened from an external button.</Text>
+              <Button variant="secondary" compact onClick={() => panelRef.current?.closePopover()}>
+                Close from inside
+              </Button>
+            </VStack>
+          }
+          accessibilityLabel="Programmatic panel"
+        >
+          <Button>Trigger</Button>
+        </PopoverPanel>
+      </HStack>
+    </PortalProvider>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `content` | `ReactNode \| PopoverPanelRenderContent` | Yes | `-` | Panel body, or a function that receives closePopover (helpfulwhen actions inside the panel should dismiss it). |
+| `autoFocusDelay` | `number` | No | `-` | The amount of time in milliseconds to wait before auto-focusing the first focusable element. |
+| `block` | `boolean` | No | `-` | Makes the Popover Subject fill the width of the parent container |
+| `className` | `string` | No | `-` | - |
+| `classNames` | `{ content?: string; triggerContainer?: string \| undefined; } \| undefined` | No | `-` | - |
+| `contentPosition` | `PopoverContentPositionConfig` | No | `-` | Override content positioning defaults |
+| `controlledElementAccessibilityProps` | `{ id: string; accessibilityLabel?: string; } \| undefined` | No | `-` | - |
+| `disableAutoFocus` | `boolean` | No | `-` | If true, the focus trap will not automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. |
+| `disablePortal` | `boolean` | No | `-` | Does not render the panel inside of a portal (react-dom createPortal). Portal is automatically disabled for SSR |
+| `disableTypeFocus` | `boolean` | No | `-` | Use for editable Search Input components to ensure focus is correctly applied |
+| `disabled` | `boolean` | No | `-` | Prevents the panel from opening. Youll need to surface disabled state on the trigger manually. |
+| `enableMobileModal` | `boolean` | No | `-` | Enable to have PopoverPanel render its content inside a Modal as opposed to a relatively positioned Popover. Ideal for mobile or smaller devices. |
+| `focusTabIndexElements` | `boolean` | No | `-` | If true, the focus trap will include all elements with tabIndex values in the list of focusable elements. |
+| `key` | `Key \| null` | No | `-` | - |
+| `maxPanelHeight` | `ResponsiveProp<MaxHeight<string \| number>>` | No | `300` | Can optionally pass a maxHeight. |
+| `maxPanelWidth` | `ResponsiveProp<MaxWidth<string \| number>>` | No | `-` | Maximum width of the panel. |
+| `minPanelWidth` | `ResponsiveProp<MinWidth<string \| number>>` | No | `-` | Minimum width of the panel. |
+| `onBlur` | `(() => void)` | No | `-` | Callback that fires when PopoverPanel or trigger are blurred |
+| `onClose` | `(() => void)` | No | `-` | Callback that fires when PopoverPanel is closed |
+| `onOpen` | `(() => void)` | No | `-` | Callback that fires when PopoverPanel is opened |
+| `panelHeight` | `ResponsiveProp<Height<string \| number>>` | No | `-` | Height of the panel. |
+| `panelWidth` | `ResponsiveProp<Width<string \| number>>` | No | `-` | Width of the panel. |
+| `ref` | `null \| string \| RefObject<HTMLDivElement> \| (instance: HTMLDivElement \| null) => void` | No | `-` | Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). |
+| `respectNegativeTabIndex` | `boolean` | No | `-` | If true, the focus trap will respect negative tabIndex values, removing them from the list of focusable elements. |
+| `restoreFocusOnUnmount` | `boolean` | No | `true` | If true, the focus trap will restore focus to the previously focused element when it unmounts.  WARNING: If you disable this, you need to ensure that focus is restored properly so it doesnt end up on the body |
+| `showOverlay` | `boolean` | No | `-` | Display an overlay over all content below the Popover menu |
+| `style` | `CSSProperties` | No | `-` | - |
+| `styles` | `{ content?: CSSProperties; triggerContainer?: CSSProperties \| undefined; } \| undefined` | 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 |
+
+
+## Styles
+
+| Selector | Static class name | Description |
+| --- | --- | --- |
+| `content` | `-` | Elevated panel surface (PopoverPanelContent). |
+| `triggerContainer` | `-` | Wrapper around children (the Popover root in floating layout, or the trigger div in the mobile modal). |
+
+

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

@@ -1,5 +1,7 @@
 # PortalProvider
 
+**📖 Live documentation:** https://cds.coinbase.com/components/overlay/PortalProvider/
+
 A component that manages the rendering of portals for overlay components.
 
 ## Import

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

@@ -1,5 +1,7 @@
 # Pressable
 
+**📖 Live documentation:** https://cds.coinbase.com/components/inputs/Pressable/
+
 Extends the Interactable component to add accessibility support for press interactions.
 
 ## Import

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

@@ -1,5 +1,7 @@
 # ProgressBar
 
+**📖 Live documentation:** https://cds.coinbase.com/components/feedback/ProgressBar/
+
 A visual indicator of completion progress.
 
 ## Import

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

@@ -1,5 +1,7 @@
 # ProgressBarWithFixedLabels
 
+**📖 Live documentation:** https://cds.coinbase.com/components/feedback/ProgressBarWithFixedLabels/
+
 A ProgressBar with fixed labels at defined positions.
 
 ## Import

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

@@ -1,5 +1,7 @@
 # ProgressBarWithFloatLabel
 
+**📖 Live documentation:** https://cds.coinbase.com/components/feedback/ProgressBarWithFloatLabel/
+
 A ProgressBar with a floating label that moves with progress.
 
 ## Import

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

@@ -1,5 +1,7 @@
 # ProgressCircle
 
+**📖 Live documentation:** https://cds.coinbase.com/components/feedback/ProgressCircle/
+
 A circular visual indicator of completion progress. Supports both determinate progress (0–100%) and an indeterminate variant for loading states.
 
 ## Import

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

@@ -1,5 +1,7 @@
 # Radio
 
+**📖 Live documentation:** https://cds.coinbase.com/components/inputs/Radio/
+
 Radio is a control component that allows users to select one option from a set of mutually exclusive options.
 
 ## Import

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

@@ -1,5 +1,7 @@
 # RadioCell
 
+**📖 Live documentation:** https://cds.coinbase.com/components/inputs/RadioCell/
+
 A selectable cell that pairs a radio button with a title and description for single-choice selections.
 
 ## Import

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

@@ -1,5 +1,7 @@
 # RadioGroup
 
+**📖 Live documentation:** https://cds.coinbase.com/components/inputs/RadioGroup/
+
 Radio is a control component that allows users to select one option from a set.
 
 ## Import

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

@@ -1,5 +1,7 @@
 # ReferenceLine
 
+**📖 Live documentation:** https://cds.coinbase.com/components/charts/ReferenceLine/
+
 A horizontal or vertical reference line to mark important values on a chart, such as targets, thresholds, or baseline values.
 
 ## Import

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

@@ -1,5 +1,7 @@
 # RemoteImage
 
+**📖 Live documentation:** https://cds.coinbase.com/components/media/RemoteImage/
+
 A React component for displaying different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll.
 
 ## Import

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

@@ -1,5 +1,7 @@
 # RemoteImageGroup
 
+**📖 Live documentation:** https://cds.coinbase.com/components/media/RemoteImageGroup/
+
 A component to display a group of RemoteImage components in a stack.
 
 ## Import

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

@@ -1,5 +1,7 @@
 # RollingNumber
 
+**📖 Live documentation:** https://cds.coinbase.com/components/numbers/RollingNumber/
+
 A numeric display that animates value changes with rolling digits.
 
 ## Import

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

@@ -1,5 +1,7 @@
 # Scrubber
 
+**📖 Live documentation:** https://cds.coinbase.com/components/charts/Scrubber/
+
 An interactive scrubber component for exploring individual data points in charts. Displays values on hover or drag and supports custom labels and formatting.
 
 ## Import

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

@@ -1,5 +1,7 @@
 # SearchInput
 
+**📖 Live documentation:** https://cds.coinbase.com/components/inputs/SearchInput/
+
 A control for searching a dataset.
 
 ## Import

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

@@ -1,5 +1,7 @@
 # SectionHeader
 
+**📖 Live documentation:** https://cds.coinbase.com/components/navigation/SectionHeader/
+
 A header component used to organize and label sections of content, with support for icons, descriptions, and additional content.
 
 ## Import

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

@@ -1,5 +1,7 @@
 # SegmentedControl
 
+**📖 Live documentation:** https://cds.coinbase.com/components/inputs/SegmentedControl/
+
 A horizontal control composed of mutually exclusive segments, used to switch between related options.
 
 ## Import

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

@@ -1,5 +1,7 @@
 # SegmentedTabs
 
+**📖 Live documentation:** https://cds.coinbase.com/components/navigation/SegmentedTabs/
+
 Switches between different views of content.
 
 ## Import
@@ -246,8 +248,8 @@ function Example() {
 | --- | --- | --- | --- | --- |
 | `activeTab` | `TabValue<TabId> \| null` | Yes | `-` | React state for the currently active tab. Setting it to null results in no active tab. |
 | `onChange` | `(activeTab: TabValue<TabId> \| null) => void` | Yes | `-` | Callback that is fired when the active tab changes. Use this callback to update the activeTab state. |
-| `tabs` | `(TabValue<TabId> & { Component?: TabComponent<TabId> \| undefined; })[]` | Yes | `-` | The array of tabs data. Each tab may optionally define a custom Component to render. |
-| `TabComponent` | `TabComponent<TabId>` | No | `-` | The default Component to render each tab. |
+| `tabs` | `(TabValue<TabId> & { Component?: TabComponent<TabId, TabValue<TabId>> \| undefined; })[]` | Yes | `-` | The array of tabs data. Each tab may optionally define a custom Component to render. |
+| `TabComponent` | `TabComponent<TabId, TabValue<TabId>>` | No | `-` | The default Component to render each tab. |
 | `TabsActiveIndicatorComponent` | `TabsActiveIndicatorComponent` | No | `-` | The default Component to render the tabs active indicator. |
 | `activeBackground` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | Background color passed to the TabsActiveIndicatorComponent. |
 | `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| space-between \| space-around \| space-evenly>` | No | `-` | - |

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

@@ -1,5 +1,7 @@
 # Select
 
+**📖 Live documentation:** https://cds.coinbase.com/components/inputs/Select/
+
 A Dropdown control for selecting from a list of options.
 
 ## Import

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

@@ -1,5 +1,7 @@
 # SelectAlpha
 
+**📖 Live documentation:** https://cds.coinbase.com/components/inputs/SelectAlpha/
+
 A flexible select component for both single and multi-selection, built for web applications with comprehensive accessibility support.
 
 ## Import

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

@@ -1,5 +1,7 @@
 # SelectChip
 
+**📖 Live documentation:** https://cds.coinbase.com/components/inputs/SelectChip/
+
 A Chip and Select control for selecting from a list of options.
 
 ## Import

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

@@ -1,5 +1,7 @@
 # SelectChipAlpha
 
+**📖 Live documentation:** https://cds.coinbase.com/components/inputs/SelectChipAlpha/
+
 A chip-styled Select control built on top of the Alpha Select component. Supports both single and multi selection.
 
 ## Import

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

@@ -1,5 +1,7 @@
 # SelectOption
 
+**📖 Live documentation:** https://cds.coinbase.com/components/inputs/SelectOption/
+
 A single option of a Select component.
 
 ## Import

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

@@ -1,5 +1,7 @@
 # Sidebar
 
+**📖 Live documentation:** https://cds.coinbase.com/components/navigation/Sidebar/
+
 A composable and customizable vertical navigation component with support for multiple variants, collapsible states, and custom content areas.
 
 ## Import

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

@@ -1,5 +1,7 @@
 # SidebarItem
 
+**📖 Live documentation:** https://cds.coinbase.com/components/navigation/SidebarItem/
+
 A navigation item component designed to work within a Sidebar.
 
 ## Import
@@ -230,7 +232,7 @@ function Accessibility() {
 
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
-| `icon` | `key \| search \| pin \| filter \| visible \| continuous \| auto \| loop \| image \| menu \| list \| application \| document \| grid \| group \| warning \| error \| account \| activity \| add \| addPeople \| advancedMarketSelector \| advancedTradeProduct \| affiliates \| airdrop \| airdropAlt \| airdropCoins \| airdropParachute \| alien \| allTimeHigh \| allocation \| annotation \| api \| apiPlug \| apothecary \| appSwitcher \| apple \| appleLogo \| arrowDown \| arrowLeft \| arrowRight \| arrowUp \| arrowsHorizontal \| arrowsUpDown \| arrowsVertical \| artwork \| assetHubProduct \| assetManagementProduct \| astronautHelmet \| atSign \| atomScience \| autoCar \| avatar \| average \| backArrow \| ballot \| ballotbox \| bandage \| bank \| barChartSimple \| barChartWindow \| base \| baseApps \| baseFeed \| baseNotification \| baseQuickBuy \| baseSquare \| baseTransact \| baseVerification \| baseWallet \| baseball \| basketball \| beaker \| beginningArrow \| bell \| bellCheck \| bellPlus \| birthcertificate \| block \| blockchain \| blog \| book \| bookmark \| borrowProduct \| boxing \| bridging \| briefcase \| briefcaseAlt \| browser \| bug \| building \| calculator \| calendar \| calendarBlank \| calendarDates \| calendarEmpty \| calendarHeart \| calendarMoney \| calendarStar \| camera \| candlesticks \| car \| card \| caret \| caretDown \| caretLeft \| caretRight \| caretUp \| cash \| cashAustralianDollar \| cashBrazilianReal \| cashBrazillianReal \| cashCanadianDollar \| cashCoins \| cashEUR \| cashGBP \| cashIndonesianRupiah \| cashJPY \| cashPhilippinePeso \| cashPolishZloty \| cashRupee \| cashSingaporeDollar \| cashSwissFranc \| cashThaiBaht \| cashTurkishLira \| cashUSD \| cashUaeDirham \| cashVietnameseDong \| chainLink \| chartBar \| chartCandles \| chartLine \| chartPie \| chartPieCircle \| chartVolume \| chatBotAgent \| chatBubble \| chatRequests \| checkboxChecked \| checkboxEmpty \| checkmark \| chess \| circleCheckmark \| circleCross \| circulatingSupply \| city \| clipboard \| clock \| clockOutline \| close \| closeCaption \| clothing \| cloud \| cloudPartial \| cloudProduct \| cluster \| coinbase \| coinbaseCardProduct \| coinbaseOne \| coinbaseOneCard \| coinbaseOneLogo \| coinbaseRewards \| coinsCrypto \| collapse \| collectibles \| collection \| comment \| commentPlus \| commerceProduct \| compass \| complianceProduct \| compose \| computerChip \| concierge \| conciergeBell \| config \| convert \| copy \| corporation \| creatorCoin \| cricket \| cross \| crossTrade \| crypto \| cryptobasics \| crystalBall \| crystalBallInsight \| currencies \| custodyProduct \| dashboard \| dataMarketplaceProduct \| dataStack \| defi \| delegateProduct \| deposit \| derivatives \| derivativesProduct \| derivativesProductNew \| developerAPIProduct \| developerPlatformProduct \| dex \| diagonalDownArrow \| diagonalRightArrow \| diagonalUpArrow \| diamond \| diamondIncentives \| dinnerPlate \| directDeposit \| directDepositIcon \| disabledPhone \| discordLogo \| distribution \| documentation \| dot \| doubleChevronRight \| downArrow \| download \| drag \| drops \| earn \| earnProduct \| earnRewards \| earthquake \| educationBook \| educationPencil \| email \| endArrow \| entertainment \| ethereum \| eventContracts \| exchangeProduct \| exclamationMark \| expand \| expandAddress \| expandAll \| externalLink \| eye \| faceScan \| faces \| factory \| faucet \| fib \| filmStrip \| filterLineStack \| fingerprint \| flame \| folder \| folderArrow \| folderOpen \| followAdd \| following \| football \| fork \| forwardArrow \| fscsProtection \| gab \| games \| gaming \| gasFees \| gasFeesAlt \| gauge \| gaugeEmpty \| gaugeHigh \| gaugeHighLow \| gaugeHighMid \| gaugeLow \| gaugeLowHigh \| gaugeLowMid \| gaugeMedium \| gavel \| gear \| generalCharacter \| ghost \| gif \| giftBox \| giftCard \| gitHubLogo \| globe \| golf \| googleLogo \| greenEnergy \| hamburger \| hammer \| heart \| helpCenterProduct \| helpCenterQuestionMark \| hiddenEye \| hockey \| home \| horizontalLine \| hospital \| hospitalCross \| hurricane \| ideal \| identityCard \| info \| initiator \| instagramLogo \| instantUnstakingClock \| institute \| institutionalProduct \| interest \| invisible \| invoice \| keyboard \| laptop \| leadChart \| leadCoin \| learningRewardsProduct \| light \| lightbulb \| lightning \| lightningBolt \| lineChartCrypto \| location \| lock \| login \| logout \| magnifyingGlass \| marketCap \| medal \| megaphone \| metaverse \| microphone \| microphoneCordless \| microscope \| mint \| minus \| mma \| moneyCardCoin \| moon \| more \| moreVertical \| motorsport \| music \| musicArticles \| needle \| newsFeed \| newsletter \| nft \| nftBuy \| nftOffer \| nftProduct \| nftSale \| noRocket \| noWifi \| nodeProduct \| oil \| options \| orderBook \| orderHistory \| outline \| pFPS \| paperAirplane \| paperclip \| participate \| participateProduct \| passKey \| passport \| pause \| pay \| payProduct \| paymentCard \| payments \| payouts \| paypal \| pencil \| peopleGroup \| peopleStar \| percentage \| perpetualSwap \| phone \| pieChartData \| pieChartWithArrow \| pillBottle \| pillCapsule \| plane \| planet \| play \| playbutton \| plusMinus \| podiumStar \| politicsBuilding \| politicsCandidate \| politicsFlag \| politicsGavel \| politicsPodium \| politicsStar \| powerTool \| priceAlerts \| priceAlertsCheck \| primePoduct \| privateClientProduct \| proProduct \| profile \| protection \| pulse \| pyramid \| qrCode \| qrCodeAlt \| queryTransact \| questionMark \| quotation \| rain \| ratingsCheck \| ratingsChecks \| ratingsStar \| reCenter \| rectangle \| recurring \| refresh \| regulated \| regulatedFutures \| report \| rewardsProduct \| ribbon \| robot \| rocket \| rocketShip \| rollingSpot \| rosettaProduct \| rottenTomato \| royalty \| safe \| save \| savingsBank \| scanQrCode \| scienceAtom \| scienceBeaker \| scienceMoon \| securityKey \| securityShield \| seen \| sendReceive \| setPinCode \| settings \| share \| shield \| shieldOutline \| shoe \| shoppingCart \| signinProduct \| singleCoin \| singleNote \| singlecloud \| smartContract \| snow \| soccer \| socialChat \| socialReshare \| socialShare \| sofort \| sortDoubleArrow \| sortDown \| sortDownCenter \| sortUp \| sortUpCenter \| soundOff \| soundOn \| sparkle \| speaker \| speechBubble \| stableCoin \| stablecoinStack \| staggeredList \| stake \| staking \| star \| starAward \| starBubble \| starTrophy \| statusDot \| step0 \| step1 \| step2 \| step3 \| step4 \| step5 \| step6 \| step7 \| step8 \| step9 \| strategy \| sun \| support \| tag \| taxes \| taxesReceipt \| telephone \| tennis \| test \| thermometer \| thumbsDown \| thumbsDownOutline \| thumbsUp \| thumbsUpOutline \| tokenLaunchCoin \| tokenLaunchRocket \| tokenSales \| tornado \| trading \| transactions \| trashCan \| trophy \| trophyCup \| tshirt \| tv \| tvStand \| twitterLogo \| ultility \| umbrella \| undo \| unfollowPeople \| unknown \| unlock \| upArrow \| upload \| usdc \| venturesProduct \| verifiedBadge \| verifiedPools \| verticalLine \| virus \| waasProduct \| wallet \| walletLogo \| walletProduct \| webhooks \| wellness \| wifi \| wind \| wireTransfer \| withdraw \| wrapToken \| xLogo` | Yes | `undefined` | The Navigation Icon this item represents |
+| `icon` | `key \| search \| pin \| filter \| visible \| continuous \| auto \| column \| loop \| image \| menu \| list \| application \| document \| grid \| group \| warning \| error \| account \| activity \| add \| addPeople \| advancedMarketSelector \| advancedTradeProduct \| affiliates \| airdrop \| airdropAlt \| airdropCoins \| airdropParachute \| alien \| allTimeHigh \| allocation \| annotation \| api \| apiPlug \| apothecary \| appSwitcher \| apple \| appleLogo \| arrowDown \| arrowLeft \| arrowRight \| arrowUp \| arrowsHorizontal \| arrowsUpDown \| arrowsVertical \| artwork \| assetHubProduct \| assetManagementProduct \| astronautHelmet \| atSign \| atomScience \| autoCar \| avatar \| average \| backArrow \| ballot \| ballotbox \| bandage \| bank \| barChartSimple \| barChartWindow \| base \| baseApps \| baseFeed \| baseLock \| baseNotification \| baseQuickBuy \| baseSquare \| baseTransact \| baseVerification \| baseWallet \| baseball \| basketball \| beaker \| beginningArrow \| bell \| bellCheck \| bellPlus \| birthcertificate \| block \| blockchain \| blog \| book \| bookmark \| borrowProduct \| boxing \| bridging \| briefcase \| briefcaseAlt \| browser \| bug \| building \| calculator \| calendar \| calendarBlank \| calendarDates \| calendarEmpty \| calendarHeart \| calendarMoney \| calendarStar \| camera \| candlesticks \| car \| card \| caret \| caretDown \| caretLeft \| caretRight \| caretUp \| cash \| cashAustralianDollar \| cashBrazilianReal \| cashBrazillianReal \| cashCanadianDollar \| cashCoins \| cashEUR \| cashGBP \| cashIndonesianRupiah \| cashJPY \| cashPhilippinePeso \| cashPolishZloty \| cashRupee \| cashSingaporeDollar \| cashSwissFranc \| cashThaiBaht \| cashTurkishLira \| cashUSD \| cashUaeDirham \| cashVietnameseDong \| chainLink \| chartBar \| chartCandles \| chartLine \| chartPie \| chartPieCircle \| chartVolume \| chatBotAgent \| chatBubble \| chatRequests \| checkboxChecked \| checkboxEmpty \| checkmark \| chess \| circleCheckmark \| circleCross \| circulatingSupply \| city \| clipboard \| clock \| clockOutline \| close \| closeCaption \| clothing \| cloud \| cloudPartial \| cloudProduct \| cluster \| coinbase \| coinbaseCardProduct \| coinbaseOne \| coinbaseOneCard \| coinbaseOneLogo \| coinbaseRewards \| coinsCrypto \| collapse \| collectibles \| collection \| comment \| commentPlus \| commerceProduct \| compass \| complianceProduct \| compose \| computerChip \| concierge \| conciergeBell \| config \| convert \| copy \| corporation \| creatorCoin \| cricket \| cross \| crossTrade \| crypto \| cryptobasics \| crystalBall \| crystalBallInsight \| currencies \| custodyProduct \| dashboard \| dataMarketplaceProduct \| dataStack \| defi \| delegateProduct \| deposit \| derivatives \| derivativesProduct \| derivativesProductNew \| developerAPIProduct \| developerPlatformProduct \| dex \| diagonalDownArrow \| diagonalRightArrow \| diagonalUpArrow \| diamond \| diamondIncentives \| dinnerPlate \| directDeposit \| directDepositIcon \| disabledPhone \| discordLogo \| distribution \| documentation \| dot \| doubleChevronRight \| downArrow \| download \| drag \| drops \| earn \| earnProduct \| earnRewards \| earthquake \| educationBook \| educationPencil \| email \| endArrow \| entertainment \| ethereum \| eventContracts \| exchangeProduct \| exclamationMark \| expand \| expandAddress \| expandAll \| externalLink \| eye \| faceScan \| faces \| factory \| faucet \| fib \| filmStrip \| filterLineStack \| fingerprint \| flame \| folder \| folderArrow \| folderOpen \| followAdd \| following \| football \| fork \| forwardArrow \| fscsProtection \| gab \| games \| gaming \| gasFees \| gasFeesAlt \| gauge \| gaugeEmpty \| gaugeHigh \| gaugeHighLow \| gaugeHighMid \| gaugeLow \| gaugeLowHigh \| gaugeLowMid \| gaugeMedium \| gavel \| gear \| generalCharacter \| ghost \| gif \| giftBox \| giftCard \| gitHubLogo \| globe \| golf \| googleLogo \| greenEnergy \| hamburger \| hammer \| heart \| helpCenterProduct \| helpCenterQuestionMark \| hiddenEye \| hockey \| home \| horizontalLine \| hospital \| hospitalCross \| hurricane \| ideal \| identityCard \| info \| initiator \| instagramLogo \| instantUnstakingClock \| institute \| institutionalProduct \| interest \| invisible \| invoice \| keyboard \| laptop \| leadChart \| leadCoin \| learningRewardsProduct \| light \| lightbulb \| lightning \| lightningBolt \| lineChartCrypto \| location \| lock \| login \| logout \| magnifyingGlass \| marketCap \| medal \| megaphone \| metaverse \| microphone \| microphoneCordless \| microscope \| mint \| minus \| mma \| moneyCardCoin \| moon \| more \| moreVertical \| motorsport \| music \| musicArticles \| needle \| newsFeed \| newsletter \| nft \| nftBuy \| nftOffer \| nftProduct \| nftSale \| noRocket \| noWifi \| nodeProduct \| oil \| options \| orderBook \| orderHistory \| outline \| overPredictions \| pFPS \| paperAirplane \| paperclip \| participate \| participateProduct \| passKey \| passport \| pause \| pay \| payProduct \| paymentCard \| payments \| payouts \| paypal \| pencil \| peopleGroup \| peopleStar \| percentage \| perpetualSwap \| phone \| pieChartData \| pieChartWithArrow \| pillBottle \| pillCapsule \| plane \| planet \| play \| playbutton \| plusMinus \| podiumStar \| politicsBuilding \| politicsCandidate \| politicsFlag \| politicsGavel \| politicsPodium \| politicsStar \| powerTool \| priceAlerts \| priceAlertsCheck \| primePoduct \| privateClientProduct \| proProduct \| profile \| protection \| pulse \| pyramid \| qrCode \| qrCodeAlt \| queryTransact \| questionMark \| quotation \| rain \| ratingsCheck \| ratingsChecks \| ratingsStar \| reCenter \| rectangle \| recurring \| refresh \| regulated \| regulatedFutures \| report \| rewardsProduct \| ribbon \| robot \| rocket \| rocketShip \| rollingSpot \| rosettaProduct \| rottenTomato \| royalty \| safe \| save \| savingsBank \| scanQrCode \| scienceAtom \| scienceBeaker \| scienceMoon \| securityKey \| securityShield \| seen \| sendReceive \| setPinCode \| settings \| share \| shield \| shieldOutline \| shoe \| shoppingCart \| signinProduct \| singleCoin \| singleNote \| singlecloud \| smartContract \| snow \| soccer \| socialChat \| socialReshare \| socialShare \| sofort \| sortDoubleArrow \| sortDown \| sortDownCenter \| sortUp \| sortUpCenter \| soundOff \| soundOn \| sparkle \| speaker \| speechBubble \| stableCoin \| stablecoinStack \| staggeredList \| stake \| staking \| star \| starAward \| starBubble \| starTrophy \| statusDot \| step0 \| step1 \| step2 \| step3 \| step4 \| step5 \| step6 \| step7 \| step8 \| step9 \| strategy \| sun \| support \| tag \| taxes \| taxesReceipt \| telephone \| tennis \| test \| thermometer \| thumbsDown \| thumbsDownOutline \| thumbsUp \| thumbsUpOutline \| tokenLaunchCoin \| tokenLaunchRocket \| tokenSales \| tornado \| trading \| transactions \| trashCan \| trophy \| trophyCup \| tshirt \| tv \| tvStand \| twitterLogo \| ultility \| umbrella \| underPredictions \| undo \| unfollowPeople \| unknown \| unlock \| upArrow \| upload \| usdc \| venturesProduct \| verifiedBadge \| verifiedPools \| verticalLine \| virus \| waasProduct \| wallet \| walletLogo \| walletProduct \| webhooks \| wellness \| wifi \| wind \| wireTransfer \| withdraw \| wrapToken \| xLogo` | Yes | `undefined` | The Navigation Icon this item represents |
 | `Component` | `symbol \| object \| style \| title \| div \| a \| abbr \| address \| area \| article \| aside \| audio \| b \| base \| bdi \| bdo \| big \| blockquote \| body \| br \| button \| canvas \| caption \| center \| cite \| code \| col \| colgroup \| data \| datalist \| dd \| del \| details \| dfn \| dialog \| dl \| dt \| em \| embed \| fieldset \| figcaption \| figure \| footer \| form \| h1 \| h2 \| h3 \| h4 \| h5 \| h6 \| head \| header \| hgroup \| hr \| html \| i \| iframe \| img \| input \| ins \| kbd \| keygen \| label \| legend \| li \| link \| main \| map \| mark \| menu \| menuitem \| meta \| meter \| nav \| noindex \| noscript \| ol \| optgroup \| option \| output \| p \| param \| picture \| pre \| progress \| q \| rp \| rt \| ruby \| s \| samp \| search \| slot \| script \| section \| select \| small \| source \| span \| strong \| sub \| summary \| sup \| table \| template \| tbody \| td \| textarea \| tfoot \| th \| thead \| time \| tr \| track \| u \| ul \| var \| video \| wbr \| webview \| svg \| animate \| animateMotion \| animateTransform \| circle \| clipPath \| defs \| desc \| ellipse \| feBlend \| feColorMatrix \| feComponentTransfer \| feComposite \| feConvolveMatrix \| feDiffuseLighting \| feDisplacementMap \| feDistantLight \| feDropShadow \| feFlood \| feFuncA \| feFuncB \| feFuncG \| feFuncR \| feGaussianBlur \| feImage \| feMerge \| feMergeNode \| feMorphology \| feOffset \| fePointLight \| feSpecularLighting \| feSpotLight \| feTile \| feTurbulence \| filter \| foreignObject \| g \| image \| line \| linearGradient \| marker \| mask \| metadata \| mpath \| path \| pattern \| polygon \| polyline \| radialGradient \| rect \| set \| stop \| switch \| text \| textPath \| tspan \| use \| view \| ComponentClass<CustomSidebarItemProps, any> \| FunctionComponent<CustomSidebarItemProps>` | No | `-` | Optional presentational component to render for the SidebarItem. By default, the SidebarItem will render as a row with an Icon and Headline Text element  The component must implement the CustomSidebarItemProps props interface |
 | `active` | `boolean` | No | `false` | Use the active prop to identify the current page |
 | `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| space-between \| space-around \| space-evenly>` | No | `-` | - |

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

@@ -1,5 +1,7 @@
 # SidebarMoreMenu
 
+**📖 Live documentation:** https://cds.coinbase.com/components/navigation/SidebarMoreMenu/
+
 SidebarMoreMenu provides a dropdown menu for additional navigation options in the Sidebar. Use it when you have more navigation items than can comfortably fit in the visible sidebar area.
 
 ## Import

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

@@ -1,5 +1,7 @@
 # Spacer
 
+**📖 Live documentation:** https://cds.coinbase.com/components/layout/Spacer/
+
 Creates space between elements.
 
 ## Import

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

@@ -1,5 +1,7 @@
 # Sparkline
 
+**📖 Live documentation:** https://cds.coinbase.com/components/charts/Sparkline/
+
 A small line chart component for displaying data trends.
 
 ## Import

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

@@ -1,5 +1,7 @@
 # SparklineGradient
 
+**📖 Live documentation:** https://cds.coinbase.com/components/charts/SparklineGradient/
+
 A small line chart component with gradient fill below the line.
 
 ## Import

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

@@ -1,5 +1,7 @@
 # SparklineInteractive
 
+**📖 Live documentation:** https://cds.coinbase.com/components/charts/SparklineInteractive/
+
 The SparklineInteractive is used to display a Sparkline that has multiple time periods
 
 ## Import