@coinbase/cds-mcp-server 8.17.3 → 8.17.4

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

@@ -4,120 +4,10 @@ A generic text element.
 
 ## Import
 
-```jsx
+```tsx
 import { Text } from '@coinbase/cds-web/typography/Text'
 ```
 
-## Props
-
-| Prop | Type | Required | Default | Description |
-| --- | --- | --- | --- | --- |
-| `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 | `-` | - |
-| `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 | `-` | - |
-| `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 | `-` | - |
-| `dangerouslySetColor` | `string` | No | `-` | - |
-| `disabled` | `boolean` | No | `-` | - |
-| `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 | `-` | - |
-| `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 | `-` | - |
-| `mono` | `boolean` | No | `-` | Use monospace font family. |
-| `noWrap` | `boolean` | No | `false` | Set text to be in a single line. |
-| `numberOfLines` | `number` | No | `-` | - |
-| `opacity` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
-| `overflow` | `clip \| wrap \| truncate \| break` | No | `-` | Set overflow behavior. |
-| `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` | `any` | No | `-` | - |
-| `renderEmptyNode` | `boolean` | 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 | `-` | - |
-| `slashedZero` | `boolean` | No | `false` | Use character for number zero with a slash through it to differentiate it from the letter O. |
-| `style` | `CSSProperties` | No | `-` | - |
-| `tabularNumbers` | `boolean` | No | `false` | Activates the set of figures where numbers are all of the same size, allowing them to be easily aligned. |
-| `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 | `-` | - |
-| `underline` | `boolean` | No | `false` | Set text decoration to underline. |
-| `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
 
 ### Display
@@ -230,4 +120,113 @@ In a nutshell, you can reference the following for the most common text semantic
 - `pre` and `code` for preformatted code blocks.
 - `span` when no semantics are required (within buttons for example) and it also has default inline display.
 
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `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 | `-` | - |
+| `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 | `-` | - |
+| `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 | `-` | - |
+| `dangerouslySetColor` | `string` | No | `-` | - |
+| `disabled` | `boolean` | No | `-` | - |
+| `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 | `-` | - |
+| `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 | `-` | - |
+| `mono` | `boolean` | No | `-` | Use monospace font family. |
+| `noWrap` | `boolean` | No | `false` | Set text to be in a single line. |
+| `numberOfLines` | `number` | No | `-` | - |
+| `opacity` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
+| `overflow` | `clip \| wrap \| truncate \| break` | No | `-` | Set overflow behavior. |
+| `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` | `any` | No | `-` | - |
+| `renderEmptyNode` | `boolean` | 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 | `-` | - |
+| `slashedZero` | `boolean` | No | `false` | Use character for number zero with a slash through it to differentiate it from the letter O. |
+| `style` | `CSSProperties` | No | `-` | - |
+| `tabularNumbers` | `boolean` | No | `false` | Activates the set of figures where numbers are all of the same size, allowing them to be easily aligned. |
+| `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 | `-` | - |
+| `underline` | `boolean` | No | `false` | Set text decoration to underline. |
+| `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 | `-` | - |
+
 

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

@@ -4,42 +4,10 @@ A control for entering text.
 
 ## Import
 
-```jsx
+```tsx
 import { TextInput } from '@coinbase/cds-web/controls/TextInput'
 ```
 
-## Props
-
-| Prop | Type | Required | Default | Description |
-| --- | --- | --- | --- | --- |
-| `align` | `center \| start \| end \| justify` | No | `start` | Aligns text inside input and helperText |
-| `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `200` | Leverage one of the borderRadius styles we offer to round the corners of the input. |
-| `bordered` | `boolean` | No | `true` | Adds border to input |
-| `compact` | `boolean` | No | `false` | Enables compact variation |
-| `disabled` | `boolean` | No | `false` | Toggles input interactability and opacity |
-| `enableColorSurge` | `boolean` | No | `-` | Enable Color Surge motion |
-| `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Adds content to the end of the inner input. Refer to diagram for location of endNode in InputStack component |
-| `height` | `((Height<string \| number> \| { base?: Height<string \| number>; phone?: Height<string \| number> \| undefined; tablet?: Height<string \| number> \| undefined; desktop?: Height<string \| number> \| undefined; }) & (string \| number)) \| undefined` | No | `-` | Height of input |
-| `helperText` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | For cases where label is not enough information to describe what the text input is for. Can also be used for showing positive/negative messages |
-| `helperTextErrorIconAccessibilityLabel` | `string` | No | `'error'` | Accessibility label for helper text error icon when variant=negative |
-| `inputNode` | `ReactElement` | No | `-` | Customize the element which the input area will be rendered as. Adds ability to render the input area as a <textarea />, <input /> etc... By default, the input area will be rendered as an <input />. |
-| `key` | `Key \| null` | No | `-` | - |
-| `label` | `string` | No | `-` | Short messageArea indicating purpose of input |
-| `labelVariant` | `inside \| outside` | No | `'outside'` | The variant of the label. Only used when compact is not true. |
-| `onChange` | `ChangeEventHandler<HTMLInputElement>` | No | `-` | - |
-| `onClick` | `(MouseEventHandler<Element> & MouseEventHandler<HTMLInputElement>)` | No | `-` | Callback fired when pressed/clicked |
-| `placeholder` | `string` | No | `-` | Placeholder text displayed inside of the input. Will be replaced if there is a value. |
-| `ref` | `((instance: HTMLInputElement \| null) => void) \| RefObject<HTMLInputElement> \| null` | No | `-` | - |
-| `start` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Adds content to the start of the inner input. Refer to diagram for location of startNode in InputStack component |
-| `suffix` | `string` | No | `-` | Adds suffix text to the end of input |
-| `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 |
-| `testIDMap` | `{ start?: string; end?: string \| undefined; label?: string \| undefined; helperText?: string \| undefined; } \| undefined` | No | `-` | Add ability to test individual parts of the input |
-| `type` | `number \| color \| button \| search \| time \| image \| text \| hidden \| string & {} \| email \| checkbox \| radio \| tel \| url \| date \| submit \| reset \| datetime-local \| file \| month \| password \| range \| week` | No | `-` | - |
-| `value` | `string \| number \| readonly string[]` | No | `-` | - |
-| `variant` | `primary \| secondary \| positive \| negative \| foregroundMuted \| foreground` | No | `foregroundMuted` | Determines the sentiment of the input. Because we allow startContent and endContent to be custom ReactNode, the content placed inside these slots will not change colors according to the variant. You will have to add that yourself |
-| `width` | `ResponsiveProp<Width<string \| number>>` | No | `100%` | Width of input as a percentage string. |
-
-
 ## Examples
 
 **Note** TextField extends props from [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) on web. On mobile, it extends [TextInputProps](https://reactnative.dev/docs/textinput#props) from react-native.
@@ -650,4 +618,35 @@ function TextInputKeyboardExample() {
 }
 ```
 
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `align` | `center \| start \| end \| justify` | No | `start` | Aligns text inside input and helperText |
+| `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `200` | Leverage one of the borderRadius styles we offer to round the corners of the input. |
+| `bordered` | `boolean` | No | `true` | Adds border to input |
+| `compact` | `boolean` | No | `false` | Enables compact variation |
+| `disabled` | `boolean` | No | `false` | Toggles input interactability and opacity |
+| `enableColorSurge` | `boolean` | No | `-` | Enable Color Surge motion |
+| `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Adds content to the end of the inner input. Refer to diagram for location of endNode in InputStack component |
+| `height` | `((Height<string \| number> \| { base?: Height<string \| number>; phone?: Height<string \| number> \| undefined; tablet?: Height<string \| number> \| undefined; desktop?: Height<string \| number> \| undefined; }) & (string \| number)) \| undefined` | No | `-` | Height of input |
+| `helperText` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | For cases where label is not enough information to describe what the text input is for. Can also be used for showing positive/negative messages |
+| `helperTextErrorIconAccessibilityLabel` | `string` | No | `'error'` | Accessibility label for helper text error icon when variant=negative |
+| `inputNode` | `ReactElement` | No | `-` | Customize the element which the input area will be rendered as. Adds ability to render the input area as a <textarea />, <input /> etc... By default, the input area will be rendered as an <input />. |
+| `key` | `Key \| null` | No | `-` | - |
+| `label` | `string` | No | `-` | Short messageArea indicating purpose of input |
+| `labelVariant` | `inside \| outside` | No | `'outside'` | The variant of the label. Only used when compact is not true. |
+| `onChange` | `ChangeEventHandler<HTMLInputElement>` | No | `-` | - |
+| `onClick` | `(MouseEventHandler<Element> & MouseEventHandler<HTMLInputElement>)` | No | `-` | Callback fired when pressed/clicked |
+| `placeholder` | `string` | No | `-` | Placeholder text displayed inside of the input. Will be replaced if there is a value. |
+| `ref` | `((instance: HTMLInputElement \| null) => void) \| RefObject<HTMLInputElement> \| null` | No | `-` | - |
+| `start` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Adds content to the start of the inner input. Refer to diagram for location of startNode in InputStack component |
+| `suffix` | `string` | No | `-` | Adds suffix text to the end of input |
+| `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 |
+| `testIDMap` | `{ start?: string; end?: string \| undefined; label?: string \| undefined; helperText?: string \| undefined; } \| undefined` | No | `-` | Add ability to test individual parts of the input |
+| `type` | `number \| color \| button \| search \| time \| image \| text \| hidden \| string & {} \| email \| checkbox \| radio \| tel \| url \| date \| submit \| reset \| datetime-local \| file \| month \| password \| range \| week` | No | `-` | - |
+| `value` | `string \| number \| readonly string[]` | No | `-` | - |
+| `variant` | `primary \| secondary \| positive \| negative \| foregroundMuted \| foreground` | No | `foregroundMuted` | Determines the sentiment of the input. Because we allow startContent and endContent to be custom ReactNode, the content placed inside these slots will not change colors according to the variant. You will have to add that yourself |
+| `width` | `ResponsiveProp<Width<string \| number>>` | No | `100%` | Width of input as a percentage string. |
+
 

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

@@ -4,37 +4,10 @@ Provides the theme context to all child components, and automatically generates
 
 ## Import
 
-```jsx
+```tsx
 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';
@@ -197,4 +170,30 @@ The InvertedThemeProvider automatically inherits from its parent theme and flips
 </ThemeProvider>
 ```
 
+## 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. |
+
 

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

@@ -4,10 +4,45 @@ A pressable tile component that displays a pictogram or custom content with a ti
 
 ## Import
 
-```jsx
+```tsx
 import { TileButton } from '@coinbase/cds-web/buttons/TileButton'
 ```
 
+## 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>
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
@@ -98,7 +133,7 @@ import { TileButton } from '@coinbase/cds-web/buttons/TileButton'
 | `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 |
+| `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 \| tokenSales \| 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 \| 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. |
@@ -121,39 +156,3 @@ import { TileButton } from '@coinbase/cds-web/buttons/TileButton'
 | `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>
-```
-
-