@coinbase/cds-mcp-server 8.17.3 → 8.17.4

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

@@ -4,25 +4,10 @@ A ProgressBar with fixed labels at defined positions.
 
 ## Import
 
-```jsx
+```tsx
 import { ProgressBarWithFixedLabels } from '@coinbase/cds-web/visualizations/ProgressBarWithFixedLabels'
 ```
 
-## Props
-
-| Prop | Type | Required | Default | Description |
-| --- | --- | --- | --- | --- |
-| `className` | `string` | No | `-` | Custom class name for the progress bar with fixed labels root. |
-| `classNames` | `{ root?: string; labelContainer?: string \| undefined; startLabel?: string \| undefined; endLabel?: string \| undefined; } \| undefined` | No | `-` | Custom class names for the progress bar with fixed labels. |
-| `disabled` | `boolean` | No | `false` | Toggle used to show a disabled progress visualization |
-| `endLabel` | `number \| { value: number; render: (num: number, disabled?: boolean \| undefined) => ReactNode; }` | No | `-` | Label that is pinned to the end of the container. If a number is used then it will format it as a percentage. |
-| `labelPlacement` | `above \| below \| beside` | No | `beside` | Position of label relative to the bar |
-| `startLabel` | `number \| { value: number; render: (num: number, disabled?: boolean \| undefined) => ReactNode; }` | No | `-` | Label that is pinned to the start of the container. If a number is used then it will format it as a percentage. |
-| `style` | `CSSProperties` | No | `-` | Custom styles for the progress bar with fixed labels root. |
-| `styles` | `{ root?: CSSProperties; labelContainer?: CSSProperties \| undefined; startLabel?: CSSProperties \| undefined; endLabel?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for the progress bar with fixed labels. |
-| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
-
-
 ## Examples
 
 ### Label Below
@@ -210,4 +195,18 @@ This is for demo purposes. ProgressContainerWithButtons isn't designed for produ
 </ProgressContainerWithButtons>
 ```
 
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `className` | `string` | No | `-` | Custom class name for the progress bar with fixed labels root. |
+| `classNames` | `{ root?: string; labelContainer?: string \| undefined; startLabel?: string \| undefined; endLabel?: string \| undefined; } \| undefined` | No | `-` | Custom class names for the progress bar with fixed labels. |
+| `disabled` | `boolean` | No | `false` | Toggle used to show a disabled progress visualization |
+| `endLabel` | `number \| { value: number; render: (num: number, disabled?: boolean \| undefined) => ReactNode; }` | No | `-` | Label that is pinned to the end of the container. If a number is used then it will format it as a percentage. |
+| `labelPlacement` | `above \| below \| beside` | No | `beside` | Position of label relative to the bar |
+| `startLabel` | `number \| { value: number; render: (num: number, disabled?: boolean \| undefined) => ReactNode; }` | No | `-` | Label that is pinned to the start of the container. If a number is used then it will format it as a percentage. |
+| `style` | `CSSProperties` | No | `-` | Custom styles for the progress bar with fixed labels root. |
+| `styles` | `{ root?: CSSProperties; labelContainer?: CSSProperties \| undefined; startLabel?: CSSProperties \| undefined; endLabel?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for the progress bar with fixed labels. |
+| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
+
 

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

@@ -4,25 +4,10 @@ A ProgressBar with a floating label that moves with progress.
 
 ## Import
 
-```jsx
+```tsx
 import { ProgressBarWithFloatLabel } from '@coinbase/cds-web/visualizations/ProgressBarWithFloatLabel'
 ```
 
-## Props
-
-| Prop | Type | Required | Default | Description |
-| --- | --- | --- | --- | --- |
-| `label` | `number \| { value: number; render: (num: number, disabled?: boolean \| undefined) => ReactNode; }` | Yes | `-` | Label that is floated at the end of the filled in bar. If a number is used then it will format it as a percentage. |
-| `progress` | `number` | Yes | `-` | Number between 0-1 representing the progress percentage |
-| `className` | `string` | No | `-` | Custom class name for the progress bar with float label root. |
-| `classNames` | `{ root?: string; labelContainer?: string \| undefined; label?: string \| undefined; } \| undefined` | No | `-` | Custom class names for the progress bar with float label. |
-| `disabled` | `boolean` | No | `false` | Toggle used to show a disabled progress visualization |
-| `labelPlacement` | `above \| below` | No | `above` | Position of label relative to the bar |
-| `style` | `CSSProperties` | No | `-` | Custom styles for the progress bar with float label root. |
-| `styles` | `{ root?: CSSProperties; labelContainer?: CSSProperties \| undefined; label?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for the progress bar with float label. |
-| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
-
-
 ## Examples
 
 ### Label Above
@@ -179,4 +164,18 @@ This is for demo purposes. ProgressContainerWithButtons isn't designed for produ
 </ProgressContainerWithButtons>
 ```
 
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `label` | `number \| { value: number; render: (num: number, disabled?: boolean \| undefined) => ReactNode; }` | Yes | `-` | Label that is floated at the end of the filled in bar. If a number is used then it will format it as a percentage. |
+| `progress` | `number` | Yes | `-` | Number between 0-1 representing the progress percentage |
+| `className` | `string` | No | `-` | Custom class name for the progress bar with float label root. |
+| `classNames` | `{ root?: string; labelContainer?: string \| undefined; label?: string \| undefined; } \| undefined` | No | `-` | Custom class names for the progress bar with float label. |
+| `disabled` | `boolean` | No | `false` | Toggle used to show a disabled progress visualization |
+| `labelPlacement` | `above \| below` | No | `above` | Position of label relative to the bar |
+| `style` | `CSSProperties` | No | `-` | Custom styles for the progress bar with float label root. |
+| `styles` | `{ root?: CSSProperties; labelContainer?: CSSProperties \| undefined; label?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for the progress bar with float label. |
+| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
+
 

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

@@ -4,34 +4,10 @@ A circular visual indicator of completion progress.
 
 ## Import
 
-```jsx
+```tsx
 import { ProgressCircle } from '@coinbase/cds-web/visualizations/ProgressCircle'
 ```
 
-## Props
-
-| Prop | Type | Required | Default | Description |
-| --- | --- | --- | --- | --- |
-| `progress` | `number` | Yes | `-` | Number between 0-1 representing the progress percentage |
-| `className` | `string` | No | `-` | Custom class name for the progress circle root. |
-| `classNames` | `{ root?: string; svg?: string \| undefined; circle?: string \| undefined; progress?: string \| undefined; } \| undefined` | No | `-` | Custom class names for the progress circle. |
-| `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 | `primary` | Custom progress color. |
-| `contentNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Optional component to override the default content rendered inside the circle. |
-| `disableAnimateOnMount` | `boolean` | No | `false` | Disable animation on component mount |
-| `disabled` | `boolean` | No | `false` | Toggle used to show a disabled progress visualization |
-| `hideContent` | `boolean` | No | `-` | Toggle used to hide the content node rendered inside the circle. |
-| `hideText` | `boolean` | No | `-` | - |
-| `key` | `Key \| null` | No | `-` | - |
-| `onAnimationEnd` | `(() => void)` | No | `-` | Callback fired when the progress animation ends. |
-| `onAnimationStart` | `(() => void)` | No | `-` | Callback fired when the progress animation starts. |
-| `ref` | `RefObject<HTMLDivElement> \| ((instance: HTMLDivElement \| null) => void) \| null` | No | `-` | - |
-| `size` | `number` | No | `-` | Optional size in px for the visualization. This is useful if the visualization is used in an HStack. If this is omitted the visualization will fill the parent width or height. Since its a circular visualization it will fill the smaller of the parent width or height |
-| `style` | `CSSProperties` | No | `-` | Custom styles for the progress circle root. |
-| `styles` | `{ root?: CSSProperties; svg?: CSSProperties \| undefined; circle?: CSSProperties \| undefined; progress?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for the progress circle. |
-| `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 |
-| `weight` | `normal \| heavy \| thin \| semiheavy` | No | `normal` | Toggle used to change thickness of progress visualization |
-
-
 ## Examples
 
 ### Default
@@ -441,4 +417,27 @@ function Example() {
 }
 ```
 
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `progress` | `number` | Yes | `-` | Number between 0-1 representing the progress percentage |
+| `className` | `string` | No | `-` | Custom class name for the progress circle root. |
+| `classNames` | `{ root?: string; svg?: string \| undefined; circle?: string \| undefined; progress?: string \| undefined; } \| undefined` | No | `-` | Custom class names for the progress circle. |
+| `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 | `primary` | Custom progress color. |
+| `contentNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Optional component to override the default content rendered inside the circle. |
+| `disableAnimateOnMount` | `boolean` | No | `false` | Disable animation on component mount |
+| `disabled` | `boolean` | No | `false` | Toggle used to show a disabled progress visualization |
+| `hideContent` | `boolean` | No | `-` | Toggle used to hide the content node rendered inside the circle. |
+| `hideText` | `boolean` | No | `-` | - |
+| `key` | `Key \| null` | No | `-` | - |
+| `onAnimationEnd` | `(() => void)` | No | `-` | Callback fired when the progress animation ends. |
+| `onAnimationStart` | `(() => void)` | No | `-` | Callback fired when the progress animation starts. |
+| `ref` | `RefObject<HTMLDivElement> \| ((instance: HTMLDivElement \| null) => void) \| null` | No | `-` | - |
+| `size` | `number` | No | `-` | Optional size in px for the visualization. This is useful if the visualization is used in an HStack. If this is omitted the visualization will fill the parent width or height. Since its a circular visualization it will fill the smaller of the parent width or height |
+| `style` | `CSSProperties` | No | `-` | Custom styles for the progress circle root. |
+| `styles` | `{ root?: CSSProperties; svg?: CSSProperties \| undefined; circle?: CSSProperties \| undefined; progress?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for the progress circle. |
+| `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 |
+| `weight` | `normal \| heavy \| thin \| semiheavy` | No | `normal` | Toggle used to change thickness of progress visualization |
+
 

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

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

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

@@ -4,10 +4,92 @@ A selectable cell that pairs a radio button with a title and description for sin
 
 ## Import
 
-```jsx
+```tsx
 import { RadioCell } from '@coinbase/cds-web/controls/RadioCell'
 ```
 
+## Examples
+
+### Basic usage
+
+```tsx live
+function RadioCellExample() {
+  const [value, setValue] = React.useState('one');
+  return (
+    <VStack gap={2}>
+      <RadioCell
+        title="Option one"
+        description="With a description"
+        checked={value === 'one'}
+        onChange={() => setValue('one')}
+        value="one"
+        name="radio-cell-example"
+      />
+      <RadioCell
+        title="Option two"
+        checked={value === 'two'}
+        onChange={() => setValue('two')}
+        value="two"
+        name="radio-cell-example"
+      />
+      <RadioCell
+        title="Disabled option"
+        checked={false}
+        onChange={() => {}}
+        value="three"
+        name="radio-cell-example"
+        disabled
+      />
+    </VStack>
+  );
+}
+```
+
+### With Custom Content and Styling
+
+```tsx live
+function CustomRadioCellExample() {
+  const [selectedPlan, setSelectedPlan] = useState('pro');
+  return (
+    <VStack gap={2}>
+      <RadioCell
+        checked={selectedPlan === 'basic'}
+        description={
+          <VStack gap={1}>
+            <Text color="fgMuted" font="body">
+              Perfect for individuals getting started
+            </Text>
+            <Text font="label1">$9/month • Up to 5 projects • 1GB storage</Text>
+          </VStack>
+        }
+        onChange={(e) => setSelectedPlan(e.target.value)}
+        title="Basic Plan"
+        value="basic"
+        name="subscription-plan"
+      />
+      <RadioCell
+        checked={selectedPlan === 'pro'}
+        description={
+          <VStack gap={1}>
+            <Text color="fgMuted" font="body">
+              Great for growing teams and businesses
+            </Text>
+            <Text font="label1">$29/month • Unlimited projects • 10GB storage</Text>
+            <Text color="fgPositive" font="caption">
+              • Most Popular
+            </Text>
+          </VStack>
+        }
+        onChange={(e) => setSelectedPlan(e.target.value)}
+        title="Pro Plan"
+        value="pro"
+        name="subscription-plan"
+      />
+    </VStack>
+  );
+}
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
@@ -131,86 +213,3 @@ import { RadioCell } from '@coinbase/cds-web/controls/RadioCell'
 | `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
 
 
-## Examples
-
-### Basic usage
-
-```tsx live
-function RadioCellExample() {
-  const [value, setValue] = React.useState('one');
-  return (
-    <VStack gap={2}>
-      <RadioCell
-        title="Option one"
-        description="With a description"
-        checked={value === 'one'}
-        onChange={() => setValue('one')}
-        value="one"
-        name="radio-cell-example"
-      />
-      <RadioCell
-        title="Option two"
-        checked={value === 'two'}
-        onChange={() => setValue('two')}
-        value="two"
-        name="radio-cell-example"
-      />
-      <RadioCell
-        title="Disabled option"
-        checked={false}
-        onChange={() => {}}
-        value="three"
-        name="radio-cell-example"
-        disabled
-      />
-    </VStack>
-  );
-}
-```
-
-### With Custom Content and Styling
-
-```tsx live
-function CustomRadioCellExample() {
-  const [selectedPlan, setSelectedPlan] = useState('pro');
-  return (
-    <VStack gap={2}>
-      <RadioCell
-        checked={selectedPlan === 'basic'}
-        description={
-          <VStack gap={1}>
-            <Text color="fgMuted" font="body">
-              Perfect for individuals getting started
-            </Text>
-            <Text font="label1">$9/month • Up to 5 projects • 1GB storage</Text>
-          </VStack>
-        }
-        onChange={(e) => setSelectedPlan(e.target.value)}
-        title="Basic Plan"
-        value="basic"
-        name="subscription-plan"
-      />
-      <RadioCell
-        checked={selectedPlan === 'pro'}
-        description={
-          <VStack gap={1}>
-            <Text color="fgMuted" font="body">
-              Great for growing teams and businesses
-            </Text>
-            <Text font="label1">$29/month • Unlimited projects • 10GB storage</Text>
-            <Text color="fgPositive" font="caption">
-              • Most Popular
-            </Text>
-          </VStack>
-        }
-        onChange={(e) => setSelectedPlan(e.target.value)}
-        title="Pro Plan"
-        value="pro"
-        name="subscription-plan"
-      />
-    </VStack>
-  );
-}
-```
-
-

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

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

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

@@ -4,32 +4,10 @@ A horizontal or vertical reference line to mark important values on a chart, suc
 
 ## Import
 
-```jsx
+```tsx
 import { ReferenceLine } from '@coinbase/cds-web-visualization'
 ```
 
-## Props
-
-| Prop | Type | Required | Default | Description |
-| --- | --- | --- | --- | --- |
-| `BeaconComponent` | `ComponentClass<ScrubberBeaconProps, any> \| FunctionComponent<ScrubberBeaconProps>` | No | `-` | Custom component for the scrubber beacon. |
-| `BeaconLabelComponent` | `ComponentClass<ChartTextProps, any> \| FunctionComponent<ChartTextProps>` | No | `-` | Custom component for the scrubber beacon label. |
-| `LineComponent` | `FunctionComponent<ReferenceLineProps> \| ComponentClass<ReferenceLineProps, any>` | No | `-` | Custom component for the scrubber line. |
-| `classNames` | `{ overlay?: string; beacon?: string \| undefined; line?: string \| undefined; beaconLabel?: string \| undefined; } \| undefined` | No | `-` | Custom class names for scrubber elements. |
-| `hideLine` | `boolean` | No | `-` | Hides the scrubber line |
-| `hideOverlay` | `boolean` | No | `-` | Whether to hide the overlay rect which obscures future data. |
-| `idlePulse` | `boolean` | No | `-` | Pulse the scrubber beacon while it is at rest. |
-| `key` | `Key \| null` | No | `-` | - |
-| `label` | `ChartTextChildren \| ((dataIndex: number) => ChartTextChildren)` | No | `-` | Label text displayed above the scrubber line. |
-| `labelProps` | `ReferenceLineLabelProps` | No | `-` | Props passed to the scrubber lines label. |
-| `lineStroke` | `string` | No | `-` | Stroke color for the scrubber line. |
-| `overlayOffset` | `number` | No | `2` | Offset of the overlay rect relative to the drawing area. Useful for when scrubbing over lines, where the stroke width would cause part of the line to be visible. |
-| `ref` | `((instance: ScrubberBeaconRef \| null) => void) \| RefObject<ScrubberBeaconRef> \| null` | No | `-` | - |
-| `seriesIds` | `string[]` | No | `-` | An array of series IDs that will receive visual emphasis as the user scrubs through the chart. Use this prop to restrict the scrubbing visual behavior to specific series. By default, all series will be highlighted by the Scrubber. |
-| `styles` | `{ overlay?: CSSProperties; beacon?: CSSProperties \| undefined; line?: CSSProperties \| undefined; beaconLabel?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for scrubber elements. |
-| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
-
-
 ## Examples
 
 ### Basic Example
@@ -449,4 +427,25 @@ function DraggablePriceTarget() {
 }
 ```
 
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `BeaconComponent` | `ComponentClass<ScrubberBeaconProps, any> \| FunctionComponent<ScrubberBeaconProps>` | No | `-` | Custom component for the scrubber beacon. |
+| `BeaconLabelComponent` | `ComponentClass<ChartTextProps, any> \| FunctionComponent<ChartTextProps>` | No | `-` | Custom component for the scrubber beacon label. |
+| `LineComponent` | `FunctionComponent<ReferenceLineProps> \| ComponentClass<ReferenceLineProps, any>` | No | `-` | Custom component for the scrubber line. |
+| `classNames` | `{ overlay?: string; beacon?: string \| undefined; line?: string \| undefined; beaconLabel?: string \| undefined; } \| undefined` | No | `-` | Custom class names for scrubber elements. |
+| `hideLine` | `boolean` | No | `-` | Hides the scrubber line |
+| `hideOverlay` | `boolean` | No | `-` | Whether to hide the overlay rect which obscures future data. |
+| `idlePulse` | `boolean` | No | `-` | Pulse the scrubber beacon while it is at rest. |
+| `key` | `Key \| null` | No | `-` | - |
+| `label` | `ChartTextChildren \| ((dataIndex: number) => ChartTextChildren)` | No | `-` | Label text displayed above the scrubber line. |
+| `labelProps` | `ReferenceLineLabelProps` | No | `-` | Props passed to the scrubber lines label. |
+| `lineStroke` | `string` | No | `-` | Stroke color for the scrubber line. |
+| `overlayOffset` | `number` | No | `2` | Offset of the overlay rect relative to the drawing area. Useful for when scrubbing over lines, where the stroke width would cause part of the line to be visible. |
+| `ref` | `((instance: ScrubberBeaconRef \| null) => void) \| RefObject<ScrubberBeaconRef> \| null` | No | `-` | - |
+| `seriesIds` | `string[]` | No | `-` | An array of series IDs that will receive visual emphasis as the user scrubs through the chart. Use this prop to restrict the scrubbing visual behavior to specific series. By default, all series will be highlighted by the Scrubber. |
+| `styles` | `{ overlay?: CSSProperties; beacon?: CSSProperties \| undefined; line?: CSSProperties \| undefined; beaconLabel?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for scrubber elements. |
+| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
+
 

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

@@ -4,10 +4,58 @@ A React component for displaying different types of images, including network im
 
 ## Import
 
-```jsx
+```tsx
 import { RemoteImage } from '@coinbase/cds-web/media/RemoteImage'
 ```
 
+## Examples
+
+### Border Color
+
+Adjust the borderColor of RemoteImages
+
+```jsx live
+<RemoteImage source={assets.eth.imageUrl} shape="circle" size="xxxl" borderColor="secondary" />
+```
+
+### size
+
+Adjust size of RemoteImage using AvatarSizes
+
+```jsx live
+<HStack gap={1}>
+  <RemoteImage source={assets.ada.imageUrl} size="m" shape="circle" />
+  <RemoteImage source={assets.eth.imageUrl} size="l" shape="circle" />
+  <RemoteImage source={assets.ltc.imageUrl} size="xl" shape="circle" />
+  <RemoteImage source={assets.sushi.imageUrl} size="xxl" shape="circle" />
+  <RemoteImage source={assets.uni.imageUrl} size="xxxl" shape="circle" />
+</HStack>
+```
+
+### Shape
+
+```jsx live
+<VStack gap={2}>
+  <RemoteImage source={assets.ada.imageUrl} size="xxxl" shape="circle" />
+  <RemoteImage source={squareAssets.human1} size="xxxl" shape="squircle" />
+  <RemoteImage source={squareAssets.human2} size="xxxl" shape="square" />
+  <RemoteImage source={squareAssets.human3} width={40} height={60} shape="rectangle" />
+</VStack>
+```
+
+### Default fallback
+
+If no images are shown, RemoteImage will show a default Fallback. Be aware that a rectangular fallback will truncate content from the fallback to fit the rectangle.
+
+```jsx live
+<VStack gap={2}>
+  <RemoteImage size="m" shape="squircle" />
+  <RemoteImage size="l" shape="circle" />
+  <RemoteImage size="xl" shape="square" />
+  <RemoteImage width={50} height={80} shape="rectangle" />
+</VStack>
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
@@ -115,52 +163,3 @@ import { RemoteImage } from '@coinbase/cds-web/media/RemoteImage'
 | `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
 
 
-## Examples
-
-### Border Color
-
-Adjust the borderColor of RemoteImages
-
-```jsx live
-<RemoteImage source={assets.eth.imageUrl} shape="circle" size="xxxl" borderColor="secondary" />
-```
-
-### size
-
-Adjust size of RemoteImage using AvatarSizes
-
-```jsx live
-<HStack gap={1}>
-  <RemoteImage source={assets.ada.imageUrl} size="m" shape="circle" />
-  <RemoteImage source={assets.eth.imageUrl} size="l" shape="circle" />
-  <RemoteImage source={assets.ltc.imageUrl} size="xl" shape="circle" />
-  <RemoteImage source={assets.sushi.imageUrl} size="xxl" shape="circle" />
-  <RemoteImage source={assets.uni.imageUrl} size="xxxl" shape="circle" />
-</HStack>
-```
-
-### Shape
-
-```jsx live
-<VStack gap={2}>
-  <RemoteImage source={assets.ada.imageUrl} size="xxxl" shape="circle" />
-  <RemoteImage source={squareAssets.human1} size="xxxl" shape="squircle" />
-  <RemoteImage source={squareAssets.human2} size="xxxl" shape="square" />
-  <RemoteImage source={squareAssets.human3} width={40} height={60} shape="rectangle" />
-</VStack>
-```
-
-### Default fallback
-
-If no images are shown, RemoteImage will show a default Fallback. Be aware that a rectangular fallback will truncate content from the fallback to fit the rectangle.
-
-```jsx live
-<VStack gap={2}>
-  <RemoteImage size="m" shape="squircle" />
-  <RemoteImage size="l" shape="circle" />
-  <RemoteImage size="xl" shape="square" />
-  <RemoteImage width={50} height={80} shape="rectangle" />
-</VStack>
-```
-
-