@coinbase/cds-mcp-server 8.17.1 → 8.17.3

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

@@ -0,0 +1,200 @@
+# ThemeProvider
+
+Provides the theme context to all child components, and automatically generates CSS Variables for dynamic theming.
+
+## Import
+
+```jsx
+import { ThemeProvider } from '@coinbase/cds-web'
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `activeColorScheme` | `light \| dark` | Yes | `-` | The currently active color scheme for the parent ThemeProvider, either light or dark. |
+| `avatarSize` | `{ s: number; m: number; l: number; xl: number; xxl: number; xxxl: number; }` | Yes | `-` | The avatar size values. |
+| `borderRadius` | `{ 0: number; 100: number; 200: number; 300: number; 400: number; 500: number; 600: number; 700: number; 800: number; 900: number; 1000: number; }` | Yes | `-` | The border radius values. |
+| `borderWidth` | `{ 0: number; 100: number; 200: number; 300: number; 400: number; 500: number; }` | Yes | `-` | The border width values. |
+| `color` | `{ currentColor: Color; fg: Color; fgMuted: Color; fgInverse: Color; fgPrimary: Color; fgWarning: Color; fgPositive: Color; fgNegative: Color; bg: Color; bgAlternate: Color; bgInverse: Color; bgOverlay: Color; bgElevation1: Color; bgElevation2: Color; bgPrimary: Color; bgPrimaryWash: Color; bgSecondary: Color; bgTertiary: Color; bgSecondaryWash: Color; bgNegative: Color; bgNegativeWash: Color; bgPositive: Color; bgPositiveWash: Color; bgWarning: Color; bgWarningWash: Color; bgLine: Color; bgLineHeavy: Color; bgLineInverse: Color; bgLinePrimary: Color; bgLinePrimarySubtle: Color; accentSubtleRed: Color; accentBoldRed: Color; accentSubtleGreen: Color; accentBoldGreen: Color; accentSubtleBlue: Color; accentBoldBlue: Color; accentSubtlePurple: Color; accentBoldPurple: Color; accentSubtleYellow: Color; accentBoldYellow: Color; accentSubtleGray: Color; accentBoldGray: Color; transparent: Color; }` | Yes | `-` | The light or dark color palette, as appropriate based on the activeColorScheme. |
+| `controlSize` | `{ checkboxSize: number; radioSize: number; switchWidth: number; switchHeight: number; switchThumbSize: number; tileSize: number; }` | Yes | `-` | The control size values. |
+| `fontFamily` | `{ body: FontFamily; caption: FontFamily; display1: FontFamily; display2: FontFamily; display3: FontFamily; title1: FontFamily; title2: FontFamily; title3: FontFamily; title4: FontFamily; headline: FontFamily; label1: FontFamily; label2: FontFamily; legal: FontFamily; }` | Yes | `-` | The font family values. |
+| `fontSize` | `{ body: FontSize<0 \| (string & {})>; caption: FontSize<0 \| (string & {})>; display1: FontSize<0 \| (string & {})>; display2: FontSize<0 \| (string & {})>; display3: FontSize<0 \| (string & {})>; title1: FontSize<0 \| (string & {})>; title2: FontSize<0 \| (string & {})>; title3: FontSize<0 \| (string & {})>; title4: FontSize<0 \| (string & {})>; headline: FontSize<0 \| (string & {})>; label1: FontSize<0 \| (string & {})>; label2: FontSize<0 \| (string & {})>; legal: FontSize<0 \| (string & {})>; }` | Yes | `-` | The font size values. |
+| `fontWeight` | `{ body: FontWeight; caption: FontWeight; display1: FontWeight; display2: FontWeight; display3: FontWeight; title1: FontWeight; title2: FontWeight; title3: FontWeight; title4: FontWeight; headline: FontWeight; label1: FontWeight; label2: FontWeight; legal: FontWeight; }` | Yes | `-` | The font weight values. |
+| `iconSize` | `{ s: number; xs: number; m: number; l: number; }` | Yes | `-` | The icon size values. |
+| `lineHeight` | `{ body: LineHeight<0 \| (string & {})>; caption: LineHeight<0 \| (string & {})>; display1: LineHeight<0 \| (string & {})>; display2: LineHeight<0 \| (string & {})>; display3: LineHeight<0 \| (string & {})>; title1: LineHeight<0 \| (string & {})>; title2: LineHeight<0 \| (string & {})>; title3: LineHeight<0 \| (string & {})>; title4: LineHeight<0 \| (string & {})>; headline: LineHeight<0 \| (string & {})>; label1: LineHeight<0 \| (string & {})>; label2: LineHeight<0 \| (string & {})>; legal: LineHeight<0 \| (string & {})>; }` | Yes | `-` | The line height values. |
+| `shadow` | `{ elevation1: BoxShadow; elevation2: BoxShadow; }` | Yes | `-` | The shadow values. |
+| `space` | `{ 0: number; 5: number; 10: number; 0.25: number; 0.5: number; 0.75: number; 1: number; 1.5: number; 2: number; 3: number; 4: number; 6: number; 7: number; 8: number; 9: number; }` | Yes | `-` | The space values, used for margin and padding. |
+| `spectrum` | `{ blue0: string; blue100: string; blue5: string; blue10: string; blue15: string; blue20: string; blue30: string; blue40: string; blue50: string; blue60: string; blue70: string; blue80: string; blue90: string; green0: string; green100: string; green5: string; green10: string; green15: string; green20: string; green30: string; green40: string; green50: string; green60: string; green70: string; green80: string; green90: string; orange0: string; orange100: string; orange5: string; orange10: string; orange15: string; orange20: string; orange30: string; orange40: string; orange50: string; orange60: string; orange70: string; orange80: string; orange90: string; yellow0: string; yellow100: string; yellow5: string; yellow10: string; yellow15: string; yellow20: string; yellow30: string; yellow40: string; yellow50: string; yellow60: string; yellow70: string; yellow80: string; yellow90: string; gray0: string; gray100: string; gray5: string; gray10: string; gray15: string; gray20: string; gray30: string; gray40: string; gray50: string; gray60: string; gray70: string; gray80: string; gray90: string; indigo0: string; indigo100: string; indigo5: string; indigo10: string; indigo15: string; indigo20: string; indigo30: string; indigo40: string; indigo50: string; indigo60: string; indigo70: string; indigo80: string; indigo90: string; pink0: string; pink100: string; pink5: string; pink10: string; pink15: string; pink20: string; pink30: string; pink40: string; pink50: string; pink60: string; pink70: string; pink80: string; pink90: string; purple0: string; purple100: string; purple5: string; purple10: string; purple15: string; purple20: string; purple30: string; purple40: string; purple50: string; purple60: string; purple70: string; purple80: string; purple90: string; red0: string; red100: string; red5: string; red10: string; red15: string; red20: string; red30: string; red40: string; red50: string; red60: string; red70: string; red80: string; red90: string; teal0: string; teal100: string; teal5: string; teal10: string; teal15: string; teal20: string; teal30: string; teal40: string; teal50: string; teal60: string; teal70: string; teal80: string; teal90: string; chartreuse0: string; chartreuse100: string; chartreuse5: string; chartreuse10: string; chartreuse15: string; chartreuse20: string; chartreuse30: string; chartreuse40: string; chartreuse50: string; chartreuse60: string; chartreuse70: string; chartreuse80: string; chartreuse90: string; }` | Yes | `-` | The light or dark spectrum color values, as appropriate based on the activeColorScheme. |
+| `textTransform` | `{ body: TextTransform; caption: TextTransform; display1: TextTransform; display2: TextTransform; display3: TextTransform; title1: TextTransform; title2: TextTransform; title3: TextTransform; title4: TextTransform; headline: TextTransform; label1: TextTransform; label2: TextTransform; legal: TextTransform; }` | Yes | `-` | The text transform values. |
+| `darkColor` | `{ currentColor: Color; fg: Color; fgMuted: Color; fgInverse: Color; fgPrimary: Color; fgWarning: Color; fgPositive: Color; fgNegative: Color; bg: Color; bgAlternate: Color; bgInverse: Color; bgOverlay: Color; bgElevation1: Color; bgElevation2: Color; bgPrimary: Color; bgPrimaryWash: Color; bgSecondary: Color; bgTertiary: Color; bgSecondaryWash: Color; bgNegative: Color; bgNegativeWash: Color; bgPositive: Color; bgPositiveWash: Color; bgWarning: Color; bgWarningWash: Color; bgLine: Color; bgLineHeavy: Color; bgLineInverse: Color; bgLinePrimary: Color; bgLinePrimarySubtle: Color; accentSubtleRed: Color; accentBoldRed: Color; accentSubtleGreen: Color; accentBoldGreen: Color; accentSubtleBlue: Color; accentBoldBlue: Color; accentSubtlePurple: Color; accentBoldPurple: Color; accentSubtleYellow: Color; accentBoldYellow: Color; accentSubtleGray: Color; accentBoldGray: Color; transparent: Color; }` | No | `-` | The dark color palette. |
+| `darkSpectrum` | `{ blue0: string; blue100: string; blue5: string; blue10: string; blue15: string; blue20: string; blue30: string; blue40: string; blue50: string; blue60: string; blue70: string; blue80: string; blue90: string; green0: string; green100: string; green5: string; green10: string; green15: string; green20: string; green30: string; green40: string; green50: string; green60: string; green70: string; green80: string; green90: string; orange0: string; orange100: string; orange5: string; orange10: string; orange15: string; orange20: string; orange30: string; orange40: string; orange50: string; orange60: string; orange70: string; orange80: string; orange90: string; yellow0: string; yellow100: string; yellow5: string; yellow10: string; yellow15: string; yellow20: string; yellow30: string; yellow40: string; yellow50: string; yellow60: string; yellow70: string; yellow80: string; yellow90: string; gray0: string; gray100: string; gray5: string; gray10: string; gray15: string; gray20: string; gray30: string; gray40: string; gray50: string; gray60: string; gray70: string; gray80: string; gray90: string; indigo0: string; indigo100: string; indigo5: string; indigo10: string; indigo15: string; indigo20: string; indigo30: string; indigo40: string; indigo50: string; indigo60: string; indigo70: string; indigo80: string; indigo90: string; pink0: string; pink100: string; pink5: string; pink10: string; pink15: string; pink20: string; pink30: string; pink40: string; pink50: string; pink60: string; pink70: string; pink80: string; pink90: string; purple0: string; purple100: string; purple5: string; purple10: string; purple15: string; purple20: string; purple30: string; purple40: string; purple50: string; purple60: string; purple70: string; purple80: string; purple90: string; red0: string; red100: string; red5: string; red10: string; red15: string; red20: string; red30: string; red40: string; red50: string; red60: string; red70: string; red80: string; red90: string; teal0: string; teal100: string; teal5: string; teal10: string; teal15: string; teal20: string; teal30: string; teal40: string; teal50: string; teal60: string; teal70: string; teal80: string; teal90: string; chartreuse0: string; chartreuse100: string; chartreuse5: string; chartreuse10: string; chartreuse15: string; chartreuse20: string; chartreuse30: string; chartreuse40: string; chartreuse50: string; chartreuse60: string; chartreuse70: string; chartreuse80: string; chartreuse90: string; }` | No | `-` | The dark spectrum color values. |
+| `fontFamilyMono` | `{ body: FontFamily; caption: FontFamily; display1: FontFamily; display2: FontFamily; display3: FontFamily; title1: FontFamily; title2: FontFamily; title3: FontFamily; title4: FontFamily; headline: FontFamily; label1: FontFamily; label2: FontFamily; legal: FontFamily; }` | No | `-` | The font family values for monospace fonts. |
+| `id` | `string` | No | `-` | A unique identifier for the theme. Must be a valid CSS class name. |
+| `lightColor` | `{ currentColor: Color; fg: Color; fgMuted: Color; fgInverse: Color; fgPrimary: Color; fgWarning: Color; fgPositive: Color; fgNegative: Color; bg: Color; bgAlternate: Color; bgInverse: Color; bgOverlay: Color; bgElevation1: Color; bgElevation2: Color; bgPrimary: Color; bgPrimaryWash: Color; bgSecondary: Color; bgTertiary: Color; bgSecondaryWash: Color; bgNegative: Color; bgNegativeWash: Color; bgPositive: Color; bgPositiveWash: Color; bgWarning: Color; bgWarningWash: Color; bgLine: Color; bgLineHeavy: Color; bgLineInverse: Color; bgLinePrimary: Color; bgLinePrimarySubtle: Color; accentSubtleRed: Color; accentBoldRed: Color; accentSubtleGreen: Color; accentBoldGreen: Color; accentSubtleBlue: Color; accentBoldBlue: Color; accentSubtlePurple: Color; accentBoldPurple: Color; accentSubtleYellow: Color; accentBoldYellow: Color; accentSubtleGray: Color; accentBoldGray: Color; transparent: Color; }` | No | `-` | The light color palette. |
+| `lightSpectrum` | `{ blue0: string; blue100: string; blue5: string; blue10: string; blue15: string; blue20: string; blue30: string; blue40: string; blue50: string; blue60: string; blue70: string; blue80: string; blue90: string; green0: string; green100: string; green5: string; green10: string; green15: string; green20: string; green30: string; green40: string; green50: string; green60: string; green70: string; green80: string; green90: string; orange0: string; orange100: string; orange5: string; orange10: string; orange15: string; orange20: string; orange30: string; orange40: string; orange50: string; orange60: string; orange70: string; orange80: string; orange90: string; yellow0: string; yellow100: string; yellow5: string; yellow10: string; yellow15: string; yellow20: string; yellow30: string; yellow40: string; yellow50: string; yellow60: string; yellow70: string; yellow80: string; yellow90: string; gray0: string; gray100: string; gray5: string; gray10: string; gray15: string; gray20: string; gray30: string; gray40: string; gray50: string; gray60: string; gray70: string; gray80: string; gray90: string; indigo0: string; indigo100: string; indigo5: string; indigo10: string; indigo15: string; indigo20: string; indigo30: string; indigo40: string; indigo50: string; indigo60: string; indigo70: string; indigo80: string; indigo90: string; pink0: string; pink100: string; pink5: string; pink10: string; pink15: string; pink20: string; pink30: string; pink40: string; pink50: string; pink60: string; pink70: string; pink80: string; pink90: string; purple0: string; purple100: string; purple5: string; purple10: string; purple15: string; purple20: string; purple30: string; purple40: string; purple50: string; purple60: string; purple70: string; purple80: string; purple90: string; red0: string; red100: string; red5: string; red10: string; red15: string; red20: string; red30: string; red40: string; red50: string; red60: string; red70: string; red80: string; red90: string; teal0: string; teal100: string; teal5: string; teal10: string; teal15: string; teal20: string; teal30: string; teal40: string; teal50: string; teal60: string; teal70: string; teal80: string; teal90: string; chartreuse0: string; chartreuse100: string; chartreuse5: string; chartreuse10: string; chartreuse15: string; chartreuse20: string; chartreuse30: string; chartreuse40: string; chartreuse50: string; chartreuse60: string; chartreuse70: string; chartreuse80: string; chartreuse90: string; }` | No | `-` | The light spectrum color values. |
+
+
+## Examples
+
+import { defaultTheme } from '@coinbase/cds-web/themes/defaultTheme';
+import { createThemeCssVars } from '@coinbase/cds-web/core/createThemeCssVars';
+import { JSONCodeBlock } from '@site/src/components/page/JSONCodeBlock';
+
+### ThemeProvider component
+
+The ThemeProvider provides the theme context to all child components, and automatically generates CSS Variables for dynamic theming.
+
+You must pass the `theme` prop to configure the theme, and the `activeColorScheme` prop to set light or dark mode.
+
+```tsx
+import { ThemeProvider } from '@coinbase/cds-web/system/ThemeProvider';
+import { defaultTheme } from '@coinbase/cds-web/themes/defaultTheme';
+
+const App = () => (
+  <ThemeProvider theme={defaultTheme} activeColorScheme="light">
+    {/* Your app components */}
+  </ThemeProvider>
+);
+```
+
+:::tip
+Changing the `activeColorScheme` automatically updates the values returned from the `useTheme` hook and from CSS Variables.
+:::
+
+### `useTheme` hook
+
+The `useTheme` hook provides access to the current `theme` and `activeColorScheme`.
+
+The `color` and `spectrum` objects automatically change based on the `activeColorScheme`.
+
+[See the `useTheme` docs here &rarr;](/hooks/useTheme)
+
+```jsx
+const theme = useTheme();
+theme.activeColorScheme; // "light" or "dark"
+theme.spectrum; // Resolves to lightSpectrum or darkSpectrum, depends on activeColorScheme
+theme.color; // Resolves to lightColor or darkColor, depends on activeColorScheme
+theme.color.bgPrimary; // "rgb(0,82,255)" or "rgb(87,139,250)", depends on activeColorScheme
+theme.space[2]; // 16
+theme.borderRadius[200]; // 8
+theme.fontSize.display3; // "2.5rem"
+```
+
+:::tip
+For best performance, prefer to use CSS Variables instead of the `useTheme` hook whenever possible.
+:::
+
+### ThemeProvider CSS Variables
+
+CSS Variables are created for every value in the theme.
+
+For best performance, prefer to use CSS Variables instead of the `useTheme` hook whenever possible.
+
+```jsx
+const theme = useTheme();
+theme.color.bgPrimary; // --color-bgPrimary
+theme.lightColor.bgPrimary; // --lightColor-bgPrimary
+theme.darkColor.bgPrimary; // --darkColor-bgPrimary
+theme.spectrum.blue10; // --blue10
+theme.lightSpectrum.blue10; // --light-blue10
+theme.darkSpectrum.blue10; // --dark-blue10
+theme.space[2]; // --space-2
+theme.space[0.25]; // --space-0_25
+theme.borderRadius[400]; // --borderRadius-400
+theme.fontSize.body; // --fontSize-body
+```
+
+You can see all the CSS Variables for the `defaultTheme` below.
+
+<JSONCodeBlock json={createThemeCssVars(defaultTheme)} />
+
+### ThemeProvider classnames
+
+The ThemeProvider renders with CSS classnames based on the `activeColorScheme` and the theme's `id`.
+
+This allows you to style components based on the `activeColorScheme` or the theme's `id`.
+
+```jsx
+// Renders with a .cds-default class and a .light class
+<ThemeProvider theme={defaultTheme} activeColorScheme="light" />
+```
+
+### Nested themes
+
+ThemeProviders can be nested to create theme overrides for specific sections.
+
+```jsx
+<ThemeProvider theme={defaultTheme} activeColorScheme="light">
+  {/* Default theme in light color scheme */}
+
+  <ThemeProvider theme={customTheme} activeColorScheme="dark">
+    {/* Custom theme in dark color scheme */}
+  </ThemeProvider>
+</ThemeProvider>
+```
+
+When nesting, you may want to override specific color values from the current theme. Overrides must be conditionally applied because we don't enforce that a theme has both light and dark colors defined.
+
+```jsx
+// Override parts of the parent theme
+const theme = useTheme();
+const customTheme = {
+  ...theme,
+  ...(theme.lightColor &&
+    theme.lightSpectrum && {
+      lightColor: {
+        ...theme.lightColor,
+        bg: `rgb(${theme.lightSpectrum.orange50})`,
+        bgPrimary: `rgb(${theme.lightSpectrum.red20})`,
+        bgSecondary: `rgb(${theme.lightSpectrum.blue50})`,
+      },
+    }),
+  ...(theme.darkColor &&
+    theme.darkSpectrum && {
+      darkColor: {
+        ...theme.darkColor,
+        bg: `rgb(${theme.darkSpectrum.orange50})`,
+        bgPrimary: `rgb(${theme.darkSpectrum.red20})`,
+        bgSecondary: `rgb(${theme.darkSpectrum.blue50})`,
+      },
+    }),
+} as const satisfies Theme;
+```
+
+### Theme inheritence
+
+Nested ThemeProviders do not automatically inherit the theme from their parent provider. You can manually inherit the theme with the `useTheme` hook.
+
+```jsx
+const Example = () => {
+  // Pass the parent theme down to another ThemeProvider
+  const theme = useTheme();
+  return (
+    <ThemeProvider theme={theme} activeColorScheme={theme.activeColorScheme}>
+      {children}
+    </ThemeProvider>
+  );
+};
+```
+
+### InvertedThemeProvider component
+
+The InvertedThemeProvider automatically inherits from its parent theme and flips the `activeColorScheme` to the opposite value.
+
+```jsx live
+<ThemeProvider theme={defaultTheme} activeColorScheme="light">
+  {/* Default theme in light color scheme */}
+  <Box background="bg" padding={2} borderRadius={400}>
+    <Button>Hello world!</Button>
+  </Box>
+  <InvertedThemeProvider>
+    {/* Default theme in inverse (dark) color scheme */}
+    <Box background="bg" padding={2} borderRadius={400}>
+      <Button>Hello world!</Button>
+    </Box>
+  </InvertedThemeProvider>
+</ThemeProvider>
+```
+
+

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

@@ -0,0 +1,159 @@
+# TileButton
+
+A pressable tile component that displays a pictogram or custom content with a title and optional count. Used for grid-based navigation and quick actions.
+
+## Import
+
+```jsx
+import { TileButton } from '@coinbase/cds-web/buttons/TileButton'
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `title` | `string` | Yes | `-` | - |
+| `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| space-between \| space-around \| space-evenly>` | No | `-` | - |
+| `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
+| `alignSelf` | `ResponsiveProp<center \| normal \| auto \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
+| `as` | `symbol \| object \| style \| svg \| 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 \| div \| 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 \| title \| tr \| track \| u \| ul \| var \| video \| wbr \| webview \| 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<any, any> \| FunctionComponent<any>` | No | `-` | - |
+| `aspectRatio` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `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 | `-` | Background color of the overlay (element being interacted with). |
+| `blendStyles` | `{ background?: string; pressedBackground?: string \| undefined; disabledBackground?: string \| undefined; hoveredBackground?: string \| undefined; borderColor?: string \| undefined; pressedBorderColor?: string \| undefined; disabledBorderColor?: string \| undefined; hoveredBorderColor?: string \| undefined; } \| undefined` | No | `-` | Custom color overrides for different interaction states. Base colors (background, borderColor) are used directly, while interaction state colors (hovered, pressed, disabled) are used as alternative base colors for blending calculations with blend strength and color scheme considerations. |
+| `block` | `boolean` | No | `-` | Set element to block and expand to 100% width. |
+| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `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. |
+| `borderEndWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderStartWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `borderTopLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `bordered` | `boolean` | No | `-` | Add a border around all sides of the box. |
+| `borderedBottom` | `boolean` | No | `-` | Add a border to the bottom side of the box. |
+| `borderedEnd` | `boolean` | No | `-` | Add a border to the trailing side of the box. |
+| `borderedHorizontal` | `boolean` | No | `-` | Add a border to the leading and trailing sides of the box. |
+| `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
+| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
+| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
+| `bottom` | `ResponsiveProp<Bottom<string \| number>>` | No | `-` | - |
+| `className` | `string` | No | `-` | Apply class names to the outer container. |
+| `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 | `-` | - |
+| `columnGap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `count` | `number` | No | `-` | Surfaces a DotCount around the content |
+| `dangerouslySetBackground` | `string` | No | `-` | - |
+| `disabled` | `boolean` | No | `-` | Is the element currently disabled. |
+| `display` | `ResponsiveProp<grid \| revert \| none \| block \| inline \| inline-block \| flex \| inline-flex \| inline-grid \| contents \| flow-root \| list-item>` | No | `-` | - |
+| `elevation` | `0 \| 1 \| 2` | No | `-` | - |
+| `flexBasis` | `ResponsiveProp<FlexBasis<string \| number>>` | No | `-` | - |
+| `flexDirection` | `ResponsiveProp<column \| row \| row-reverse \| column-reverse>` | No | `-` | - |
+| `flexGrow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
+| `flexShrink` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
+| `flexWrap` | `ResponsiveProp<nowrap \| wrap \| wrap-reverse>` | No | `-` | - |
+| `focusable` | `boolean` | No | `-` | - |
+| `font` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
+| `fontFamily` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
+| `fontSize` | `ResponsiveProp<FontSize \| inherit>` | No | `-` | - |
+| `fontWeight` | `ResponsiveProp<FontWeight \| inherit>` | No | `-` | - |
+| `gap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `grid` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
+| `gridArea` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `gridAutoColumns` | `ResponsiveProp<GridAutoColumns<string \| number>>` | No | `-` | - |
+| `gridAutoFlow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| row \| column \| dense` | No | `-` | - |
+| `gridAutoRows` | `ResponsiveProp<GridAutoRows<string \| number>>` | No | `-` | - |
+| `gridColumn` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `gridColumnEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `gridColumnStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `gridRow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `gridRowEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `gridRowStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `gridTemplate` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
+| `gridTemplateAreas` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
+| `gridTemplateColumns` | `ResponsiveProp<GridTemplateColumns<string \| number>>` | No | `-` | - |
+| `gridTemplateRows` | `ResponsiveProp<GridTemplateRows<string \| number>>` | No | `-` | - |
+| `height` | `ResponsiveProp<Height<string \| number>>` | No | `-` | - |
+| `justifyContent` | `ResponsiveProp<left \| right \| center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| space-between \| space-around \| space-evenly>` | No | `-` | - |
+| `left` | `ResponsiveProp<Left<string \| number>>` | No | `-` | - |
+| `lineHeight` | `ResponsiveProp<LineHeight \| inherit>` | No | `-` | - |
+| `margin` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `marginBottom` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `marginEnd` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `marginStart` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `marginTop` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `marginX` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `marginY` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `maxHeight` | `ResponsiveProp<MaxHeight<string \| number>>` | No | `-` | - |
+| `maxWidth` | `ResponsiveProp<MaxWidth<string \| number>>` | No | `-` | - |
+| `minHeight` | `ResponsiveProp<MinHeight<string \| number>>` | No | `-` | - |
+| `minWidth` | `ResponsiveProp<MinWidth<string \| number>>` | No | `-` | - |
+| `opacity` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
+| `overflow` | `ResponsiveProp<hidden \| auto \| visible \| clip \| scroll>` | No | `-` | - |
+| `padding` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `paddingBottom` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `paddingEnd` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `paddingStart` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `paddingTop` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `paddingX` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `paddingY` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `pictogram` | `key \| done \| cardSuccess \| warning \| error \| add \| browser \| calculator \| calendar \| checkmark \| clock \| coinbaseOneLogo \| derivativesProduct \| email \| gasFees \| identityCard \| instantUnstakingClock \| laptop \| learningRewardsProduct \| lock \| passport \| paypal \| phone \| planet \| safe \| securityKey \| settings \| shield \| support \| taxes \| trading \| verifiedPools \| wallet \| 2fa \| accountsNavigation \| accreditedInvestor \| addCard \| addPayment \| addPhone \| addressBook \| addToWatchlist \| addWallet \| advancedTradingDesktop \| advancedTradingNavigation \| advancedTradingRebates \| agent \| alerts \| alertsCoinbaseOne \| analyticsNavigation \| apartOfDropsNft \| applyForHigherLimits \| apyInterest \| assetEncryption \| assetHubNavigation \| assetManagement \| assetManagementNavigation \| assetMeasurements \| assetMovement \| authenticationApp \| authenticator \| authenticatorAlt \| authenticatorProgress \| avatarAa \| avatarAb \| avatarAc \| avatarAd \| avatarAe \| avatarAf \| avatarAg \| avatarAh \| avatarAi \| avatarAj \| avatarBa \| avatarBb \| avatarBc \| avatarBd \| avatarBe \| avatarBf \| avatarBg \| avatarBh \| avatarBi \| avatarBj \| avatarCa \| avatarCb \| avatarCc \| avatarCd \| avatarCe \| avatarCf \| avatarCg \| avatarCh \| avatarCi \| avatarCj \| avatarDa \| avatarDb \| avatarDc \| avatarDd \| avatarDe \| avatarDf \| avatarDg \| avatarDh \| avatarDi \| avatarDj \| avatarEa \| avatarEb \| avatarEc \| avatarEd \| avatarEe \| avatarEf \| avatarEg \| avatarEh \| avatarEi \| avatarEj \| avatarFa \| avatarFb \| avatarFc \| avatarFd \| avatarFe \| avatarFf \| avatarFg \| avatarFh \| avatarFi \| avatarFj \| avatarGa \| avatarGb \| avatarGc \| avatarGd \| avatarGe \| avatarGf \| avatarGg \| avatarGh \| avatarGi \| avatarGj \| avatarHa \| avatarHb \| avatarHc \| avatarHd \| avatarHe \| avatarHf \| avatarHg \| avatarHh \| avatarHi \| avatarHj \| avatarIa \| avatarIb \| avatarIc \| avatarId \| avatarIe \| avatarIf \| avatarIg \| avatarIh \| avatarIi \| avatarIj \| avatarJa \| avatarJb \| avatarJc \| avatarJd \| avatarJe \| avatarJf \| avatarJg \| avatarJh \| avatarJi \| avatarJj \| barChart \| baseChartSmall \| baseCheckSmall \| baseCoinCryptoSmall \| baseCoinNetworkSmall \| baseCoinStack \| baseConnectApps \| baseConnectSmall \| baseDecentralizationSmall \| baseDiamondSmall \| baseDiamondTrophy \| baseEmptySmall \| baseErrorButterflySmall \| baseErrorSmall \| baseLoadingSmall \| baseLocationSmall \| baseLogo \| baseLogoNavigation \| baseMessaging \| baseMintNftSmall \| baseNetworkSmall \| baseNftSmall \| basePaycoinSmall \| basePeopleSmall \| basePiechartSmall \| baseSecuritySmall \| baseSendSmall \| baseSignin \| baseTargetSmall \| bitcoin \| bitcoinPizza \| bitcoinRewards \| bitcoinWhitePaper \| blockchainConnection \| bonusFivePercent \| bonusTwoPercent \| borrowCoins \| borrowingLending \| borrowNavigation \| browserMultiPlatform \| browserTransaction \| bundle \| businessProduct \| calendarCaution \| candleSticksGraph \| cardBlocked \| cardDeclined \| cardNavigation \| cb1BankTransfers \| chart \| chat \| cloudNavigation \| coinbaseLogoAdvancedBrand \| coinbaseLogoNavigation \| coinbaseOneAuthenticator \| coinbaseOneChat \| coinbaseOneEarn \| coinbaseOneEarnCoins \| coinbaseOneEarnCoinsLogo \| coinbaseOneFiat \| coinbaseOneProductIcon \| coinbaseOneProductInvestWeekly \| coinbaseOneRefreshed \| coinbaseOneShield \| coinbaseOneTrade \| coinbaseOneTrusted \| coinbaseOneUnlimitedRewards \| coinbaseUnlockOffers \| coinbaseWalletApp \| coinFocus \| coinShare \| coldStorageCheck \| collectionOfAssets \| commerceCheckout \| commerceInvoice \| commerceNavigation \| completeQuiz \| complianceNavigation \| congratulations \| connectNavigation \| contactInfo \| controlWalletStorage \| creative \| creditCard \| crypto101 \| cryptoCard \| cryptoFolder \| custodialJourney \| custodyNavigation \| dataMarketplaceNavigation \| decentralizationEverything \| decentralizedExchange \| decentralizedIdentity \| decentralizedWeb3 \| defiEarnMoment \| delegate \| delegateNavigation \| derivativesNavigation \| developerPlatformNavigation \| developerSDKNavigation \| directDepositNavigation \| dollarShowcase \| driversLicense \| driversLicenseWheel \| earnCoins \| earnGraph \| earnNavigation \| easyToUse \| economyGlobal \| emailAndMessages \| enableVoting \| envelope \| ethereumFocus \| ethRewards \| ethStaking \| ethStakingChart \| ethStakingRewards \| ethToken \| exchangeNavigation \| explore \| fast \| faucetNavigation \| feesRestriction \| fiat \| finance \| findYourSelection \| formDownload \| futures \| futuresCoinbaseOne \| gem \| genericCountryIDCard \| getStarted \| giftbox \| globalConnections \| globalPayments \| globalTransactions \| googleAuthenticator \| governance \| hardwareWallet \| helpCenterNavigation \| higherLimits \| holdingCoin \| idBlock \| idError \| idVerification \| increaseLimits \| institutionalNavigation \| institutions \| internationalExchangeNavigation \| internet \| investGraph \| laptopCharts \| laptopVideo \| layerNetworks \| leadGraph \| learn \| learningRewardsNavigation \| lightbulbLearn \| lightningNetworkSend \| linkYourAccount \| listingFees \| locationUsa \| lowFees \| manageWeb3SignersAcct \| miningCoins \| mintedNft \| mobileCharts \| mobileError \| mobileNotifcation \| mobileSuccess \| mobileWarning \| moneyEarn \| moneySwift \| monitoringPerformance \| moreThanBitcoin \| multiAccountsAndCards \| multiPlatform \| multipleAssets \| musicAndSounds \| myNumberCard \| newUserChecklistBuyCrypto \| newUserChecklistCompleteAccount \| newUserChecklistVerifyId \| nftAvatar \| nftLibrary \| nftNavigation \| noAnnualFee \| noNftFound \| notificationHubAnalysis \| notificationHubNews \| notificationHubPortfolio \| notificationHubSocial \| notifications \| noVisibility \| noWiFi \| orders \| outage \| partialCoins \| participateNavigation \| passwordWalletLocked \| payNavigation \| peerToPeer \| pieChart \| pizza \| pluginBrowser \| positiveReviews \| predictionMarkets \| premiumInvestor \| priceTracking \| primeMobileApp \| primeNavigation \| privateClientNavigation \| proNavigation \| protectionPlan \| queryTransactNavigation \| receipt \| recurringPurchases \| restaking \| reviewAndAdd \| rewardsNavigation \| riskStaking \| rosettaNavigation \| securedAssets \| security \| securityCoinShield \| seedPhrase \| selectAddNft \| selfCustodyWallet \| selfServe \| sellSendAnytime \| sendPaymentToOthers \| settled \| sideChainSide \| signInNavigation \| smsAuthenticate \| sparkleCoinbaseOne \| ssnCard \| stableCoinMetaphor \| stacking \| stakingGraph \| standWithCryptoLogoNavigation \| startToday \| strongInfo \| strongWarning \| successPhone \| supportChat \| takeQuiz \| target \| taxBeta \| taxCenterNavigation \| taxesArrangement \| taxSeason \| timingCheck \| tokenBaskets \| tokenSales \| transferSend \| transistor \| trendingAssets \| trusted \| tryAgainLater \| twoBonus \| typeScript \| ubiKey \| usaProduct \| usdcEarn \| usdcInterest \| usdcLoan \| usdcLogo \| usdcRewards \| usdcRewardsRibbon \| usdcToken \| venturesNavigation \| videoCalendar \| videoContent \| waiting \| waitingForConsensus \| walletAsServiceNavigation \| walletDeposit \| walletError \| walletExchange \| walletLinkNavigation \| walletLogoNavigation \| walletNavigation \| walletPassword \| walletSuccess \| walletWarning \| winBTC \| worldwide \| wrapEth` | No | `-` | Name of illustration as defined in Figma |
+| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
+| `position` | `ResponsiveProp<fixed \| static \| relative \| absolute \| sticky>` | No | `-` | - |
+| `pressed` | `boolean` | No | `-` | Is the element being pressed. Primarily a mobile feature, but can be used on the web. |
+| `ref` | `any` | No | `-` | - |
+| `right` | `ResponsiveProp<Right<string \| number>>` | No | `-` | - |
+| `rowGap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `showOverflow` | `boolean` | No | `-` | Reveals truncated title text |
+| `style` | `CSSProperties` | 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 |
+| `textAlign` | `ResponsiveProp<center \| start \| end \| justify>` | No | `-` | - |
+| `textDecoration` | `ResponsiveProp<none \| underline \| overline \| line-through \| underline overline \| underline double>` | No | `-` | - |
+| `textTransform` | `ResponsiveProp<capitalize \| lowercase \| none \| uppercase>` | No | `-` | - |
+| `top` | `ResponsiveProp<Top<string \| number>>` | No | `-` | - |
+| `transform` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
+| `transparentWhileInactive` | `boolean` | No | `-` | Mark the background and border as transparent until the element is interacted with (hovered, pressed, etc). Must be used in conjunction with the pressed prop |
+| `transparentWhilePressed` | `boolean` | No | `-` | Mark the background and border as transparent even while element is interacted with (elevation underlay issue). Must be used in conjunction with the pressed prop |
+| `userSelect` | `ResponsiveProp<text \| none \| auto \| all>` | No | `-` | - |
+| `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
+| `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
+| `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+
+
+## Examples
+
+### Basic usage
+
+```tsx live
+<TileButton title="Coinbase" pictogram="2fa" onClick={() => {}} />
+```
+
+### With count
+
+```tsx live
+<TileButton title="Notifications" pictogram="addToWatchlist" count={3} onClick={() => {}} />
+```
+
+### With custom content
+
+```tsx live
+<TileButton count={0} onClick={() => {}} title="Bitcoin">
+  <RemoteImage source={assets.btc.imageUrl} />
+</TileButton>
+```
+
+### Show overflow
+
+```tsx live
+<Box height={180}>
+  <TileButton
+    title="A very long title that will overflow and show the full text on hover"
+    pictogram="chart"
+    showOverflow
+    onClick={() => {}}
+  />
+</Box>
+```
+
+

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

@@ -0,0 +1,204 @@
+# Toast
+
+A temporary notification that appears at the bottom of the screen.
+
+## Import
+
+```jsx
+import { Toast } from '@coinbase/cds-web/overlays/Toast'
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `text` | `string` | Yes | `-` | The message to be displayed in the toast |
+| `action` | `ToastAction` | No | `-` | Optional toast action i.e. a CTA button |
+| `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| space-between \| space-around \| space-evenly>` | No | `-` | - |
+| `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
+| `alignSelf` | `ResponsiveProp<center \| normal \| auto \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
+| `as` | `div` | No | `-` | - |
+| `aspectRatio` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `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 | `-` | - |
+| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `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 | `-` | - |
+| `borderEndWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderStartWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `borderTopLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `bordered` | `boolean` | No | `-` | Add a border around all sides of the box. |
+| `borderedBottom` | `boolean` | No | `-` | Add a border to the bottom side of the box. |
+| `borderedEnd` | `boolean` | No | `-` | Add a border to the trailing side of the box. |
+| `borderedHorizontal` | `boolean` | No | `-` | Add a border to the leading and trailing sides of the box. |
+| `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
+| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
+| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
+| `bottom` | `ResponsiveProp<Bottom<string \| number>>` | No | `-` | - |
+| `bottomOffset` | `string \| number` | No | `-` | The vertical offset from the bottom of the screen |
+| `closeButtonAccessibilityProps` | `SharedAccessibilityProps` | No | `{ accessibilityLabel: "close" }` | Accessibility props are provided to ensure i18n support for all relevant a11y props |
+| `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 | `-` | - |
+| `columnGap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `dangerouslySetBackground` | `string` | No | `-` | - |
+| `disablePortal` | `boolean` | No | `-` | Disable React portal integration |
+| `display` | `ResponsiveProp<grid \| revert \| none \| block \| inline \| inline-block \| flex \| inline-flex \| inline-grid \| contents \| flow-root \| list-item>` | No | `-` | - |
+| `elevation` | `0 \| 1 \| 2` | No | `-` | - |
+| `flexBasis` | `ResponsiveProp<FlexBasis<string \| number>>` | No | `-` | - |
+| `flexDirection` | `ResponsiveProp<column \| row \| row-reverse \| column-reverse>` | No | `-` | - |
+| `flexGrow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
+| `flexShrink` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
+| `flexWrap` | `ResponsiveProp<nowrap \| wrap \| wrap-reverse>` | No | `-` | - |
+| `font` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
+| `fontFamily` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
+| `fontSize` | `ResponsiveProp<FontSize \| inherit>` | No | `-` | - |
+| `fontWeight` | `ResponsiveProp<FontWeight \| inherit>` | No | `-` | - |
+| `gap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `grid` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
+| `gridArea` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `gridAutoColumns` | `ResponsiveProp<GridAutoColumns<string \| number>>` | No | `-` | - |
+| `gridAutoFlow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| row \| column \| dense` | No | `-` | - |
+| `gridAutoRows` | `ResponsiveProp<GridAutoRows<string \| number>>` | No | `-` | - |
+| `gridColumn` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `gridColumnEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `gridColumnStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `gridRow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `gridRowEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `gridRowStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `gridTemplate` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
+| `gridTemplateAreas` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
+| `gridTemplateColumns` | `ResponsiveProp<GridTemplateColumns<string \| number>>` | No | `-` | - |
+| `gridTemplateRows` | `ResponsiveProp<GridTemplateRows<string \| number>>` | No | `-` | - |
+| `height` | `ResponsiveProp<Height<string \| number>>` | No | `-` | - |
+| `hideCloseButton` | `boolean` | No | `false` | Hide the close button on the right |
+| `justifyContent` | `ResponsiveProp<left \| right \| center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| space-between \| space-around \| space-evenly>` | No | `-` | - |
+| `key` | `Key \| null` | No | `-` | - |
+| `left` | `ResponsiveProp<Left<string \| number>>` | No | `-` | - |
+| `lineHeight` | `ResponsiveProp<LineHeight \| inherit>` | No | `-` | - |
+| `margin` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `marginBottom` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `marginEnd` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `marginStart` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `marginTop` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `marginX` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `marginY` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `maxHeight` | `ResponsiveProp<MaxHeight<string \| number>>` | No | `-` | - |
+| `maxWidth` | `ResponsiveProp<MaxWidth<string \| number>>` | No | `-` | - |
+| `minHeight` | `ResponsiveProp<MinHeight<string \| number>>` | No | `-` | - |
+| `minWidth` | `ResponsiveProp<MinWidth<string \| number>>` | No | `-` | - |
+| `onChange` | `FormEventHandler<HTMLDivElement>` | No | `-` | - |
+| `onDidHide` | `(() => void)` | No | `-` | Callback fired after the component is hidden. |
+| `onWillHide` | `(() => void)` | No | `-` | Callback fired before the component hides. |
+| `opacity` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
+| `overflow` | `ResponsiveProp<hidden \| auto \| visible \| clip \| scroll>` | No | `-` | - |
+| `padding` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `paddingBottom` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `paddingEnd` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `paddingStart` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `paddingTop` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `paddingX` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `paddingY` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
+| `position` | `ResponsiveProp<fixed \| static \| relative \| absolute \| sticky>` | No | `-` | - |
+| `ref` | `((instance: ToastRefHandle \| null) => void) \| RefObject<ToastRefHandle> \| null` | No | `-` | - |
+| `right` | `ResponsiveProp<Right<string \| number>>` | No | `-` | - |
+| `rowGap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `style` | `CSSProperties` | 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 |
+| `textAlign` | `ResponsiveProp<center \| start \| end \| justify>` | No | `-` | - |
+| `textDecoration` | `ResponsiveProp<none \| underline \| overline \| line-through \| underline overline \| underline double>` | No | `-` | - |
+| `textTransform` | `ResponsiveProp<capitalize \| lowercase \| none \| uppercase>` | No | `-` | - |
+| `top` | `ResponsiveProp<Top<string \| number>>` | No | `-` | - |
+| `transform` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
+| `userSelect` | `ResponsiveProp<text \| none \| auto \| all>` | No | `-` | - |
+| `variant` | `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 | `primary` | Controls color surge of the Toast background |
+| `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
+| `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
+| `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+
+
+## Examples
+
+### Get Started
+
+1. Add `PortalProvider` to the root of your app if it doesn't exist.
+2. Import the `useToast` hook: `import { useToast } from '@coinbase/cds-web/overlays/useToast'`;
+3. Show a toast
+
+```jsx
+const toast = useToast();
+toast.show('Copied to clipboard');
+```
+
+### Basic Example
+
+```jsx live
+function ToastExample() {
+  function BasicToast() {
+    const toast = useToast();
+    const [toastText, setToastText] = useState('Copied to clipboard');
+
+    const handleShowToast = useCallback(() => {
+      toast.show(toastText, {
+        action: { label: 'Action', onClick: () => console.log('action pressed') },
+        onWillHide: () => {
+          console.log('toast hiding');
+        },
+        onDidHide: () => {
+          console.log('toast hidden');
+        },
+      });
+    }, [toast, toastText]);
+
+    const handleNoAction = () => toast.show(toastText);
+
+    const handleNoClose = () =>
+      toast.show(toastText, {
+        action: { label: 'Action', onPress: () => console.log('action pressed') },
+        hideCloseButton: true,
+      });
+
+    const handleTextOnly = () => toast.show(toastText, { hideCloseButton: true });
+
+    const handleBottomOffset = () => {
+      toast.show('Toast copy', {
+        bottomOffset: 100,
+      });
+    };
+
+    const handleVariant = () => {
+      toast.show('Toast copy', {
+        variant: 'negative',
+      });
+    };
+
+    return (
+      <>
+        <Box paddingBottom={3}>
+          <TextInput
+            label="Toast text"
+            placeholder="Type anything to show in toast"
+            value={toastText}
+            onChange={(e) => setToastText(e.target.value)}
+          />
+        </Box>
+        <HStack gap={1} flexWrap="wrap">
+          <Button onClick={handleShowToast}>Show Toast</Button>
+          <Button onClick={handleNoAction}>No Action</Button>
+          <Button onClick={handleNoClose}>No Close</Button>
+          <Button onClick={handleTextOnly}>Text Only</Button>
+          <Button onClick={handleBottomOffset}>Bottom Offset</Button>
+          <Button onClick={handleVariant}>Variant</Button>
+        </HStack>
+      </>
+    );
+  }
+
+  return <BasicToast />;
+}
+```
+
+