@coinbase/cds-mcp-server 8.34.2 → 8.35.1

package/CHANGELOG.md

@@ -8,6 +8,14 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.35.1 ((1/5/2026, 03:28 PM PST))
+
+This is an artificial version bump with no new change.
+
+## 8.35.0 ((1/5/2026, 10:03 AM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.34.2 ((1/2/2026, 09:41 AM PST))
 
 This is an artificial version bump with no new change.

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

@@ -10,7 +10,7 @@ import { ProgressBar } from '@coinbase/cds-mobile/visualizations/ProgressBar'
 
 ## Examples
 
-### Default
+#### Default
 
 ```tsx
 <VStack gap={2}>
@@ -20,7 +20,7 @@ import { ProgressBar } from '@coinbase/cds-mobile/visualizations/ProgressBar'
 </VStack>
 ```
 
-### Weights
+#### Weights
 
 ```tsx
 <VStack gap={2}>
@@ -31,7 +31,7 @@ import { ProgressBar } from '@coinbase/cds-mobile/visualizations/ProgressBar'
 </VStack>
 ```
 
-### Disabled
+#### Disabled
 
 ```tsx
 <VStack gap={2}>
@@ -41,7 +41,7 @@ import { ProgressBar } from '@coinbase/cds-mobile/visualizations/ProgressBar'
 </VStack>
 ```
 
-### Colors
+#### Colors
 
 ```tsx
 <VStack gap={2}>
@@ -54,11 +54,11 @@ import { ProgressBar } from '@coinbase/cds-mobile/visualizations/ProgressBar'
 </VStack>
 ```
 
-### Custom Styles
+#### Custom Styles
 
 You can customize the appearance of the progress bar using the `styles` prop. The `root` style controls the container, and `progress` controls the fill bar.
 
-```tsx live
+```tsx
 <ProgressContainerWithButtons>
   {({ calculateProgress }) => (
     <VStack gap={2}>
@@ -80,7 +80,21 @@ You can customize the appearance of the progress bar using the `styles` prop. Th
 </ProgressContainerWithButtons>
 ```
 
-### Animation Callbacks
+### Animation
+
+By default, ProgressBar animates progress changes. Use `disableAnimateOnMount` to skip the initial animation while still animating subsequent changes.
+
+```tsx
+<VStack gap={2}>
+  <Text variant="label2">Normal animation</Text>
+  <ProgressBar progress={0.5} />
+
+  <Text variant="label2">Disable animation on mount</Text>
+  <ProgressBar disableAnimateOnMount progress={0.5} />
+</VStack>
+```
+
+#### Callbacks
 
 You can use the `onAnimationStart` and `onAnimationEnd` callbacks to track the progress of the animation.
 
@@ -102,7 +116,7 @@ function Example() {
       <ProgressBar
         onAnimationEnd={handleAnimationEnd}
         onAnimationStart={handleAnimationStart}
-        progress={calculateProgress(0.2)}
+        progress={0.2}
       />
     </VStack>
   );
@@ -116,7 +130,7 @@ function Example() {
 | `progress` | `number` | Yes | `-` | Number between 0-1 representing the progress percentage |
 | `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. |
 | `disableAnimateOnMount` | `boolean` | No | `false` | Disable animation on component mount |
-| `disabled` | `boolean` | No | `false` | Toggle used to show a disabled progress visualization |
+| `disabled` | `boolean` | No | `-` | Toggle used to show a disabled progress visualization |
 | `key` | `Key \| null` | No | `-` | - |
 | `onAnimationEnd` | `(() => void)` | No | `-` | Callback fired when the progress animation ends. |
 | `onAnimationStart` | `(() => void)` | No | `-` | Callback fired when the progress animation starts. |

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

@@ -12,7 +12,7 @@ import { ProgressBarWithFixedLabels } from '@coinbase/cds-mobile/visualizations/
 
 ### Label Below
 
-```jsx live
+```jsx
 <VStack gap={2}>
   <ProgressBarWithFixedLabels startLabel={0} endLabel={20} labelPlacement="below">
     <ProgressBar progress={0.2} />
@@ -25,7 +25,7 @@ import { ProgressBarWithFixedLabels } from '@coinbase/cds-mobile/visualizations/
 
 ### Label Beside
 
-```jsx live
+```jsx
 <VStack gap={2}>
   <ProgressBarWithFixedLabels startLabel={0} endLabel={20} labelPlacement="beside">
     <ProgressBar progress={0.2} />
@@ -38,7 +38,7 @@ import { ProgressBarWithFixedLabels } from '@coinbase/cds-mobile/visualizations/
 
 ### Disabled
 
-```jsx live
+```jsx
 <VStack gap={2}>
   <ProgressBarWithFixedLabels startLabel={0} endLabel={20} disabled labelPlacement="beside">
     <ProgressBar disabled progress={0.2} />
@@ -51,7 +51,7 @@ import { ProgressBarWithFixedLabels } from '@coinbase/cds-mobile/visualizations/
 
 ### Custom Labels
 
-```jsx live
+```jsx
 function Example() {
   const renderStartLabelNumStr = useCallback((num) => {
     return `$${num.toLocaleString()}`;
@@ -119,7 +119,7 @@ function Example() {
 
 You can customize the appearance of the progress bar and labels using the `styles` prop.
 
-```tsx live
+```tsx
 <ProgressContainerWithButtons>
   {({ calculateProgress }) => (
     <VStack gap={2}>
@@ -145,11 +145,66 @@ You can customize the appearance of the progress bar and labels using the `style
 </ProgressContainerWithButtons>
 ```
 
+### Animation
+
+By default, ProgressBar animates progress changes. Use `disableAnimateOnMount` to skip the initial animation while still animating subsequent changes.
+
+```tsx
+<VStack gap={2}>
+  <Text variant="label2">Normal animation</Text>
+  <ProgressBarWithFixedLabels startLabel={0} endLabel={50} labelPlacement="above">
+    <ProgressBar progress={0.5} />
+  </ProgressBarWithFixedLabels>
+
+  <Text variant="label2">Disable animation on mount</Text>
+  <ProgressBarWithFixedLabels
+    disableAnimateOnMount
+    startLabel={0}
+    endLabel={50}
+    labelPlacement="above"
+  >
+    <ProgressBar disableAnimateOnMount progress={0.5} />
+  </ProgressBarWithFixedLabels>
+</VStack>
+```
+
+#### Callbacks
+
+You can use the `onAnimationStart` and `onAnimationEnd` callbacks to track the progress of the animation.
+
+```jsx
+function Example() {
+  const [animationStatus, setAnimationStatus] = React.useState('Ready');
+
+  const handleAnimationStart = useCallback(() => {
+    setAnimationStatus('Animating...');
+  }, []);
+
+  const handleAnimationEnd = useCallback(() => {
+    setAnimationStatus('Animation Ended');
+  }, []);
+
+  return (
+    <VStack gap={2}>
+      <Text>Animation Status: {animationStatus}</Text>
+      <ProgressBarWithFixedLabels startLabel={0} endLabel={20} labelPlacement="above">
+        <ProgressBar
+          onAnimationEnd={handleAnimationEnd}
+          onAnimationStart={handleAnimationStart}
+          progress={0.2}
+        />
+      </ProgressBarWithFixedLabels>
+    </VStack>
+  );
+}
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
-| `disabled` | `boolean` | No | `false` | Toggle used to show a disabled progress visualization |
+| `disableAnimateOnMount` | `boolean` | No | `false` | Disable animation on component mount |
+| `disabled` | `boolean` | No | `-` | 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. |

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

@@ -12,7 +12,7 @@ import { ProgressBarWithFloatLabel } from '@coinbase/cds-mobile/visualizations/P
 
 ### Label Above
 
-```jsx live
+```jsx
 <VStack gap={2}>
   <ProgressBarWithFloatLabel label={0} progress={0} labelPlacement="above">
     <ProgressBar progress={0} />
@@ -25,7 +25,7 @@ import { ProgressBarWithFloatLabel } from '@coinbase/cds-mobile/visualizations/P
 
 ### Label Below
 
-```jsx live
+```jsx
 <VStack gap={2}>
   <ProgressBarWithFloatLabel label={0} progress={0} labelPlacement="below">
     <ProgressBar progress={0} />
@@ -38,7 +38,7 @@ import { ProgressBarWithFloatLabel } from '@coinbase/cds-mobile/visualizations/P
 
 ### Disabled
 
-```jsx live
+```jsx
 <VStack gap={2}>
   <ProgressBarWithFloatLabel label={70} progress={0.7} disabled>
     <ProgressBar progress={0.7} disabled />
@@ -48,7 +48,7 @@ import { ProgressBarWithFloatLabel } from '@coinbase/cds-mobile/visualizations/P
 
 ### Custom Labels
 
-```jsx live
+```jsx
 function Example() {
   const renderLabelNumStr = useCallback((num) => {
     return `$${num.toLocaleString()}`;
@@ -103,7 +103,7 @@ function Example() {
 
 You can customize the appearance of the progress bar and float label using the `styles` prop.
 
-```tsx live
+```tsx
 <ProgressContainerWithButtons>
   {({ calculateProgress }) => (
     <VStack gap={2}>
@@ -122,13 +122,63 @@ You can customize the appearance of the progress bar and float label using the `
 </ProgressContainerWithButtons>
 ```
 
+### Animation
+
+By default, ProgressBar animates progress changes. Use `disableAnimateOnMount` to skip the initial animation while still animating subsequent changes.
+
+```tsx
+<VStack gap={2}>
+  <Text variant="label2">Normal animation</Text>
+  <ProgressBarWithFloatLabel label={50} progress={0.5} labelPlacement="above">
+    <ProgressBar progress={0.5} />
+  </ProgressBarWithFloatLabel>
+
+  <Text variant="label2">Disable animation on mount</Text>
+  <ProgressBarWithFloatLabel disableAnimateOnMount label={50} progress={0.5} labelPlacement="above">
+    <ProgressBar disableAnimateOnMount progress={0.5} />
+  </ProgressBarWithFloatLabel>
+</VStack>
+```
+
+#### Callbacks
+
+You can use the `onAnimationStart` and `onAnimationEnd` callbacks to track the progress of the animation.
+
+```jsx
+function Example() {
+  const [animationStatus, setAnimationStatus] = React.useState('Ready');
+
+  const handleAnimationStart = useCallback(() => {
+    setAnimationStatus('Animating...');
+  }, []);
+
+  const handleAnimationEnd = useCallback(() => {
+    setAnimationStatus('Animation Ended');
+  }, []);
+
+  return (
+    <VStack gap={2}>
+      <Text>Animation Status: {animationStatus}</Text>
+      <ProgressBarWithFloatLabel label={20} progress={0.2} labelPlacement="above">
+        <ProgressBar
+          onAnimationEnd={handleAnimationEnd}
+          onAnimationStart={handleAnimationStart}
+          progress={0.2}
+        />
+      </ProgressBarWithFloatLabel>
+    </VStack>
+  );
+}
+```
+
 ## 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 |
-| `disabled` | `boolean` | No | `false` | Toggle used to show a disabled progress visualization |
+| `disableAnimateOnMount` | `boolean` | No | `false` | Disable animation on component mount |
+| `disabled` | `boolean` | No | `-` | Toggle used to show a disabled progress visualization |
 | `labelPlacement` | `above \| below` | No | `above` | Position of label relative to the bar |
 | `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>>` | No | `-` | Custom styles for the progress bar with float label root. |
 | `styles` | `{ root?: StyleProp<ViewStyle>; labelContainer?: StyleProp<ViewStyle>; label?: StyleProp<TextStyle>; }` | No | `-` | Custom styles for the progress bar with float label. |

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

@@ -186,7 +186,25 @@ The progress circle can be customized with styles.
 </HStack>
 ```
 
-#### Animation Callbacks
+### Animation
+
+By default, ProgressCircle animates progress changes. Use `disableAnimateOnMount` to skip the initial animation while still animating subsequent changes.
+
+```tsx
+<HStack gap={2}>
+  <VStack gap={1} alignItems="center">
+    <Text variant="label2">Normal animation</Text>
+    <ProgressCircle progress={0.5} size={100} />
+  </VStack>
+
+  <VStack gap={1} alignItems="center">
+    <Text variant="label2">Disable animation on mount</Text>
+    <ProgressCircle disableAnimateOnMount progress={0.5} size={100} />
+  </VStack>
+</HStack>
+```
+
+#### Callbacks
 
 You can use the `onAnimationStart` and `onAnimationEnd` callbacks to track the progress of the animation.
 
@@ -208,7 +226,7 @@ function Example() {
       <ProgressCircle
         onAnimationEnd={handleAnimationEnd}
         onAnimationStart={handleAnimationStart}
-        progress={calculateProgress(0.2)}
+        progress={0.2}
         size={100}
       />
     </VStack>
@@ -224,7 +242,7 @@ function Example() {
 | `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 |
+| `disabled` | `boolean` | No | `-` | 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 | `-` | - |

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

@@ -47,10 +47,25 @@ import { RemoteImageGroup } from '@coinbase/cds-mobile/media/RemoteImageGroup'
 </RemoteImageGroup>
 ```
 
+### Bordered Images
+
+Use the `borderWidth` and `borderColor` props to change border style of the images in the group. `borderColor` defaults to `bg` when `borderWidth` is set.
+
+```tsx
+<RemoteImageGroup borderWidth={300} max={3}>
+  <RemoteImage source={assets.eth.imageUrl} />
+  <RemoteImage source={assets.btc.imageUrl} />
+  <RemoteImage source={assets.dai.imageUrl} />
+  <RemoteImage source={assets.hbar.imageUrl} />
+</RemoteImageGroup>
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
+| `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 | `borderWidth ? 'bg' : undefined` | - |
+| `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
 | `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Children content |
 | `max` | `number` | No | `4` | Indicates the number of remote image before it collapses |
 | `shape` | `rectangle \| circle \| squircle \| square \| hexagon` | No | `circle` | Shape of all RemoteImage children in the group |

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

@@ -383,7 +383,7 @@ function CustomBeaconLabel() {
 
 Using `labelElevated` will elevate the Scrubber's reference line label with a shadow.
 
-```jsx live
+```jsx
 <LineChart
   enableScrubbing
   height={200}

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

@@ -324,7 +324,7 @@ When using the `inside` label variant, you should always include a `placeholder`
   label="Password"
   labelVariant="inside"
   secureTextEntry
-  end={<InputIconButton name="visibleInactive" />}
+  end={<InputIconButton name="visible" />}
   placeholder="Enter your password"
 />
 ```
@@ -409,6 +409,7 @@ Password Input - Use Icon Buttons at the end for actions like showing a password
 function PasswordInput() {
   const [isVisible, setIsVisible] = useState(false);
   const type = useMemo(() => (isVisible ? 'text' : 'password'), [isVisible]);
+  const iconName = useMemo(() => (isVisible ? 'visible' : 'invisible'), [isVisible]);
 
   return (
     <TextInput
@@ -416,8 +417,8 @@ function PasswordInput() {
       type={type}
       end={
         <InputIconButton
-          name={isVisible ? 'visibleActive' : 'visibleInactive'}
-          onPress={() => setIsVisible((isVisible) => !setIsVisible)}
+          name={iconName}
+          onPress={() => setIsVisible((isVisible) => !isVisible)}
           accessibilityLabel={isVisible ? 'Hide password' : 'Show password'}
         />
       }

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

@@ -108,7 +108,25 @@ This is for demo purposes. ProgressContainerWithButtons isn't designed for produ
 </ProgressContainerWithButtons>
 ```
 
-### Animation Callbacks
+### Animation
+
+By default, ProgressBar animates progress changes. Use `disableAnimateOnMount` to skip the initial animation while still animating subsequent changes.
+
+```tsx live
+<ProgressContainerWithButtons>
+  {({ calculateProgress }) => (
+    <VStack gap={2}>
+      <Text variant="label2">Normal animation</Text>
+      <ProgressBar progress={calculateProgress(0)} />
+
+      <Text variant="label2">Disable animation on mount</Text>
+      <ProgressBar disableAnimateOnMount progress={calculateProgress(0.3)} />
+    </VStack>
+  )}
+</ProgressContainerWithButtons>
+```
+
+#### Callbacks
 
 You can use the `onAnimationStart` and `onAnimationEnd` callbacks to track the progress of the animation.
 
@@ -150,7 +168,7 @@ function Example() {
 | `classNames` | `{ root?: string; progress?: string \| undefined; } \| undefined` | No | `-` | Custom class names for the progress bar. |
 | `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. |
 | `disableAnimateOnMount` | `boolean` | No | `false` | Disable animation on component mount |
-| `disabled` | `boolean` | No | `false` | Toggle used to show a disabled progress visualization |
+| `disabled` | `boolean` | No | `-` | Toggle used to show a disabled progress visualization |
 | `key` | `Key \| null` | No | `-` | - |
 | `onAnimationEnd` | `(() => void)` | No | `-` | Callback fired when the progress animation ends. |
 | `onAnimationStart` | `(() => void)` | No | `-` | Callback fired when the progress animation starts. |

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

@@ -195,13 +195,84 @@ This is for demo purposes. ProgressContainerWithButtons isn't designed for produ
 </ProgressContainerWithButtons>
 ```
 
+### Animation
+
+By default, ProgressBar animates progress changes. Use `disableAnimateOnMount` to skip the initial animation while still animating subsequent changes.
+
+```tsx live
+<ProgressContainerWithButtons>
+  {({ calculateProgress }) => (
+    <VStack gap={2}>
+      <Text variant="label2">Normal animation</Text>
+      <ProgressBarWithFixedLabels
+        startLabel={0}
+        endLabel={Math.round(calculateProgress(0) * 100)}
+        labelPlacement="above"
+      >
+        <ProgressBar progress={calculateProgress(0)} />
+      </ProgressBarWithFixedLabels>
+
+      <Text variant="label2">Disable animation on mount</Text>
+      <ProgressBarWithFixedLabels
+        disableAnimateOnMount
+        startLabel={0}
+        endLabel={Math.round(calculateProgress(0.3) * 100)}
+        labelPlacement="above"
+      >
+        <ProgressBar disableAnimateOnMount progress={calculateProgress(0.3)} />
+      </ProgressBarWithFixedLabels>
+    </VStack>
+  )}
+</ProgressContainerWithButtons>
+```
+
+#### Callbacks
+
+You can use the `onAnimationStart` and `onAnimationEnd` callbacks to track the progress of the animation.
+
+```jsx live
+function Example() {
+  const [animationStatus, setAnimationStatus] = React.useState('Ready');
+
+  const handleAnimationStart = useCallback(() => {
+    setAnimationStatus('Animating...');
+  }, []);
+
+  const handleAnimationEnd = useCallback(() => {
+    setAnimationStatus('Animation Ended');
+  }, []);
+
+  return (
+    <ProgressContainerWithButtons>
+      {({ calculateProgress }) => (
+        <VStack gap={2}>
+          <Text>Animation Status: {animationStatus}</Text>
+          <ProgressBarWithFixedLabels
+            startLabel={0}
+            endLabel={Math.round(calculateProgress(0.2) * 100)}
+            labelPlacement="above"
+          >
+            <ProgressBar
+              onAnimationEnd={handleAnimationEnd}
+              onAnimationStart={handleAnimationStart}
+              progress={calculateProgress(0.2)}
+            />
+          </ProgressBarWithFixedLabels>
+        </VStack>
+      )}
+    </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 |
+| `disableAnimateOnMount` | `boolean` | No | `false` | Disable animation on component mount |
+| `disabled` | `boolean` | No | `-` | 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. |

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

@@ -164,6 +164,76 @@ This is for demo purposes. ProgressContainerWithButtons isn't designed for produ
 </ProgressContainerWithButtons>
 ```
 
+### Animation
+
+By default, ProgressBar animates progress changes. Use `disableAnimateOnMount` to skip the initial animation while still animating subsequent changes.
+
+```tsx live
+<ProgressContainerWithButtons>
+  {({ calculateProgress }) => (
+    <VStack gap={2}>
+      <Text variant="label2">Normal animation</Text>
+      <ProgressBarWithFloatLabel
+        label={Math.round(calculateProgress(0) * 100)}
+        progress={calculateProgress(0)}
+        labelPlacement="above"
+      >
+        <ProgressBar progress={calculateProgress(0)} />
+      </ProgressBarWithFloatLabel>
+
+      <Text variant="label2">Disable animation on mount</Text>
+      <ProgressBarWithFloatLabel
+        disableAnimateOnMount
+        label={Math.round(calculateProgress(0.3) * 100)}
+        progress={calculateProgress(0.3)}
+        labelPlacement="above"
+      >
+        <ProgressBar disableAnimateOnMount progress={calculateProgress(0.3)} />
+      </ProgressBarWithFloatLabel>
+    </VStack>
+  )}
+</ProgressContainerWithButtons>
+```
+
+#### Callbacks
+
+You can use the `onAnimationStart` and `onAnimationEnd` callbacks to track the progress of the animation.
+
+```jsx live
+function Example() {
+  const [animationStatus, setAnimationStatus] = React.useState('Ready');
+
+  const handleAnimationStart = useCallback(() => {
+    setAnimationStatus('Animating...');
+  }, []);
+
+  const handleAnimationEnd = useCallback(() => {
+    setAnimationStatus('Animation Ended');
+  }, []);
+
+  return (
+    <ProgressContainerWithButtons>
+      {({ calculateProgress }) => (
+        <VStack gap={2}>
+          <Text>Animation Status: {animationStatus}</Text>
+          <ProgressBarWithFloatLabel
+            label={Math.round(calculateProgress(0.2) * 100)}
+            progress={calculateProgress(0.2)}
+            labelPlacement="above"
+          >
+            <ProgressBar
+              onAnimationEnd={handleAnimationEnd}
+              onAnimationStart={handleAnimationStart}
+              progress={calculateProgress(0.2)}
+            />
+          </ProgressBarWithFloatLabel>
+        </VStack>
+      )}
+    </ProgressContainerWithButtons>
+  );
+}
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
@@ -172,7 +242,8 @@ This is for demo purposes. ProgressContainerWithButtons isn't designed for produ
 | `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 |
+| `disableAnimateOnMount` | `boolean` | No | `false` | Disable animation on component mount |
+| `disabled` | `boolean` | No | `-` | 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. |

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

@@ -13,7 +13,7 @@ import { ProgressCircle } from '@coinbase/cds-web/visualizations/ProgressCircle'
 ### Default
 
 ```jsx live
-<HStack gap={2}>
+<HStack gap={2} flexWrap="wrap">
   <ProgressCircle progress={0} size={100} />
   <ProgressCircle progress={0.5} size={100} />
   <ProgressCircle progress={1} size={100} />
@@ -23,7 +23,7 @@ import { ProgressCircle } from '@coinbase/cds-web/visualizations/ProgressCircle'
 ### Thin
 
 ```jsx live
-<HStack gap={2}>
+<HStack gap={2} flexWrap="wrap">
   <ProgressCircle progress={0} weight="thin" size={100} />
   <ProgressCircle progress={0.5} weight="thin" size={100} />
   <ProgressCircle progress={1} weight="thin" size={100} />
@@ -33,7 +33,7 @@ import { ProgressCircle } from '@coinbase/cds-web/visualizations/ProgressCircle'
 ### Semiheavy
 
 ```jsx live
-<HStack gap={2}>
+<HStack gap={2} flexWrap="wrap">
   <ProgressCircle progress={0} weight="semiheavy" size={100} />
   <ProgressCircle progress={0.5} weight="semiheavy" size={100} />
   <ProgressCircle progress={1} weight="semiheavy" size={100} />
@@ -43,7 +43,7 @@ import { ProgressCircle } from '@coinbase/cds-web/visualizations/ProgressCircle'
 ### Heavy
 
 ```jsx live
-<HStack gap={2}>
+<HStack gap={2} flexWrap="wrap">
   <ProgressCircle progress={0} weight="heavy" size={100} />
   <ProgressCircle progress={0.5} weight="heavy" size={100} />
   <ProgressCircle progress={1} weight="heavy" size={100} />
@@ -53,7 +53,7 @@ import { ProgressCircle } from '@coinbase/cds-web/visualizations/ProgressCircle'
 ### No Text
 
 ```jsx live
-<HStack gap={2}>
+<HStack gap={2} flexWrap="wrap">
   <ProgressCircle progress={0} hideContent size={25} />
   <ProgressCircle progress={0.5} hideContent size={25} />
   <ProgressCircle progress={1} hideContent size={25} />
@@ -63,7 +63,7 @@ import { ProgressCircle } from '@coinbase/cds-web/visualizations/ProgressCircle'
 ### Disabled
 
 ```jsx live
-<HStack gap={2}>
+<HStack gap={2} flexWrap="wrap">
   <ProgressCircle progress={0} disabled size={100} />
   <ProgressCircle progress={0.5} disabled size={100} />
   <ProgressCircle progress={1} disabled size={100} />
@@ -73,7 +73,7 @@ import { ProgressCircle } from '@coinbase/cds-web/visualizations/ProgressCircle'
 ### Colors
 
 ```jsx live
-<HStack gap={2}>
+<HStack gap={2} flexWrap="wrap">
   <ProgressCircle progress={0.5} color="bgPositive" size={100} />
   <ProgressCircle progress={0.5} color="bgNegative" size={100} />
   <ProgressCircle progress={0.5} color="bgPrimary" size={100} />
@@ -109,7 +109,7 @@ You can provide an image, such as an asset, as the content node.
 
 ```jsx live
 <VStack gap={2}>
-  <HStack gap={2}>
+  <HStack gap={2} flexWrap="wrap">
     <ProgressCircle
       progress={1}
       size={56}
@@ -211,7 +211,7 @@ You can provide an image, such as an asset, as the content node.
       weight="thin"
     />
   </HStack>
-  <HStack gap={2}>
+  <HStack gap={2} flexWrap="wrap">
     <ProgressCircle
       styles={{
         progress: {
@@ -387,7 +387,29 @@ This is for demo purposes. ProgressContainerWithButtons isn't designed for produ
 </ProgressContainerWithButtons>
 ```
 
-### Animation Callbacks
+### Animation
+
+By default, ProgressCircle animates progress changes. Use `disableAnimateOnMount` to skip the initial animation while still animating subsequent changes.
+
+```tsx live
+<ProgressContainerWithButtons>
+  {({ calculateProgress }) => (
+    <HStack gap={2}>
+      <VStack gap={1} alignItems="center">
+        <Text variant="label2">Normal animation</Text>
+        <ProgressCircle progress={calculateProgress(0)} size={100} />
+      </VStack>
+
+      <VStack gap={1} alignItems="center">
+        <Text variant="label2">Disable animation on mount</Text>
+        <ProgressCircle disableAnimateOnMount progress={calculateProgress(0.3)} size={100} />
+      </VStack>
+    </HStack>
+  )}
+</ProgressContainerWithButtons>
+```
+
+#### Callbacks
 
 You can use the `onAnimationStart` and `onAnimationEnd` callbacks to track the progress of the animation.
 
@@ -431,7 +453,7 @@ function Example() {
 | `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 |
+| `disabled` | `boolean` | No | `-` | 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 | `-` | - |

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

@@ -77,10 +77,25 @@ function Component() {
 }
 ```
 
+### Bordered Images
+
+Use the `borderWidth` and `borderColor` props to change border style of the images in the group. `borderColor` defaults to `bg` when `borderWidth` is set.
+
+```tsx live
+<RemoteImageGroup borderWidth={300} max={3}>
+  <RemoteImage source={assets.eth.imageUrl} />
+  <RemoteImage source={assets.btc.imageUrl} />
+  <RemoteImage source={assets.dai.imageUrl} />
+  <RemoteImage source={assets.hbar.imageUrl} />
+</RemoteImageGroup>
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
+| `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 | `borderWidth ? 'bg' : undefined` | - |
+| `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
 | `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Children content |
 | `max` | `number` | No | `4` | Indicates the number of remote image before it collapses |
 | `shape` | `rectangle \| circle \| squircle \| square \| hexagon` | No | `circle` | Shape of all RemoteImage children in the group |

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

@@ -265,7 +265,7 @@ When using the `inside` label variant, you should always include a `placeholder`
       label="Password"
       labelVariant="inside"
       type="password"
-      end={<InputIconButton name="visibleInactive" />}
+      end={<InputIconButton name="visible" />}
       placeholder="Enter your password"
     />
   </VStack>
@@ -422,6 +422,7 @@ Password Input - Use Icon Buttons at the end for actions like showing a password
 function PasswordInput() {
   const [isVisible, setIsVisible] = useState(false);
   const type = useMemo(() => (isVisible ? 'text' : 'password'), [isVisible]);
+  const iconName = useMemo(() => (isVisible ? 'visible' : 'invisible'), [isVisible]);
 
   return (
     <TextInput
@@ -429,8 +430,8 @@ function PasswordInput() {
       type={type}
       end={
         <InputIconButton
-          name={isVisible ? 'visibleActive' : 'visibleInactive'}
-          onClick={() => setIsVisible((isVisible) => !setIsVisible)}
+          name={iconName}
+          onClick={() => setIsVisible((isVisible) => !isVisible)}
           accessibilityLabel={isVisible ? 'Hide password' : 'Show password'}
         />
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mcp-server",
-  "version": "8.34.2",
+  "version": "8.35.1",
   "description": "Coinbase Design System - MCP Server",
   "repository": {
     "type": "git",