@coinbase/cds-mcp-server 8.33.0 → 8.33.1

package/CHANGELOG.md

@@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.33.1 ((12/19/2025, 08:09 AM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.33.0 ((12/18/2025, 11:46 AM PST))
 
 This is an artificial version bump with no new change.

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

@@ -190,6 +190,59 @@ function ExampleMultiGroups() {
 }
 ```
 
+### Multi-select with assets
+
+```tsx
+function ExampleMultiAssets() {
+  const assetImageMap: Record<string, string> = {
+    btc: assets.btc.imageUrl,
+    eth: assets.eth.imageUrl,
+    dai: assets.dai.imageUrl,
+    ltc: assets.ltc.imageUrl,
+    xrp: assets.xrp.imageUrl,
+  };
+  const exampleOptions = [
+    { value: 'btc', label: assets.btc.name },
+    { value: 'eth', label: assets.eth.name },
+    { value: 'dai', label: assets.dai.name },
+    { value: 'ltc', label: assets.ltc.name },
+    { value: 'xrp', label: assets.xrp.name },
+  ];
+  const { value, onChange } = useMultiSelect({
+    initialValue: ['eth', 'btc'],
+  });
+
+  // Get startNode based on selected assets
+  const startNode = useMemo(() => {
+    if (value.length === 0) return null;
+
+    // Multiple assets selected - use RemoteImageGroup
+    return (
+      <RemoteImageGroup shape="circle" size={24}>
+        {value.map((assetValue) => {
+          const imageUrl = assetImageMap[assetValue];
+          if (!imageUrl) return null;
+          return <RemoteImage key={assetValue} source={imageUrl} />;
+        })}
+      </RemoteImageGroup>
+    );
+  }, [value]);
+
+  return (
+    <SelectChip
+      accessibilityLabel="Select multiple assets"
+      maxWidth={400}
+      onChange={onChange}
+      options={exampleOptions}
+      placeholder="Choose assets"
+      startNode={startNode}
+      type="multi"
+      value={value}
+    />
+  );
+}
+```
+
 ### Compact
 
 ```tsx

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

@@ -43,7 +43,7 @@ function MyCarousel() {
     );
   }
   return (
-    <Box style={{ marginInline: 'calc(-1 * var(--space-3))' }}>
+    <Box marginX={-3}>
       <Carousel
         hidePagination
         title="Explore Assets"
@@ -122,7 +122,7 @@ function DynamicSizingCarousel() {
           tabs={itemsPerPage}
         />
       </HStack>
-      <Box style={{ marginInline: 'calc(-1 * var(--space-3))' }}>
+      <Box marginX={-3}>
         <Carousel
           hidePagination
           title="Learn more"
@@ -310,7 +310,7 @@ function ResponsiveSizingCarousel() {
     );
   }
   return (
-    <Box style={{ marginInline: 'calc(-1 * var(--space-3))' }}>
+    <Box marginX={-3}>
       <Carousel
         hidePagination
         title="Learn more"
@@ -403,7 +403,7 @@ function VariedSizingCarousel() {
     desktop: 'calc((100% - var(--space-1)) / 2)',
   };
   return (
-    <Box style={{ marginInline: 'calc(-1 * var(--space-3))' }}>
+    <Box marginX={-3}>
       <Carousel
         hidePagination
         title="Varied Sizing"
@@ -495,7 +495,7 @@ function DragCarousel() {
         </Text>
         <SegmentedTabs activeTab={drag} onChange={setDrag} tabs={dragOptions} />
       </HStack>
-      <Box style={{ marginInline: 'calc(-1 * var(--space-3))' }}>
+      <Box marginX={-3}>
         <Carousel
           title="Explore Assets"
           hidePagination
@@ -554,7 +554,7 @@ function SnapModeCarousel() {
         </Text>
         <SegmentedTabs activeTab={snapMode} onChange={setSnapMode} tabs={snapModeOptions} />
       </HStack>
-      <Box style={{ marginInline: 'calc(-1 * var(--space-3))' }}>
+      <Box marginX={-3}>
         <Carousel
           title="Explore Assets"
           styles={{
@@ -609,7 +609,7 @@ function OverflowCarousel() {
     );
   }
   return (
-    <Box style={{ marginInline: 'calc(-1 * var(--space-3))' }}>
+    <Box marginX={-3}>
       <Carousel
         title="Explore Assets"
         snapMode="item"
@@ -770,7 +770,7 @@ function CustomComponentsCarousel() {
     desktop: 'round(down, calc((100% - var(--space-1)) / 2), 1px)',
   };
   return (
-    <Box style={{ marginInline: 'calc(-1 * var(--space-3))' }}>
+    <Box marginX={-3}>
       <Carousel
         NavigationComponent={SeeAllComponent}
         PaginationComponent={PaginationComponent}
@@ -913,7 +913,7 @@ You can use the `classNames` and `styles` props to customize different parts of
 ```jsx live
 function CustomStylesCarousel() {
   return (
-    <Box style={{ marginInline: 'calc(-1 * var(--space-3))' }}>
+    <Box marginX={-3}>
       <Carousel
         styles={{
           root: { position: 'relative', paddingInline: 'var(--space-6)' },
@@ -1033,7 +1033,7 @@ function DynamicContentCarousel() {
           Remove Last
         </Button>
       </HStack>
-      <Box style={{ marginInline: 'calc(-1 * var(--space-3))' }}>
+      <Box marginX={-3}>
         <Carousel
           title="Explore Assets"
           styles={{
@@ -1087,7 +1087,7 @@ function AnimatedCarousel() {
     );
   }
   return (
-    <Box style={{ marginInline: 'calc(-1 * var(--space-3))' }}>
+    <Box marginX={-3}>
       <Carousel
         title="Explore Assets"
         styles={{
@@ -1171,7 +1171,7 @@ function AnimatedSelectionCarousel() {
     );
   });
   return (
-    <Box style={{ marginInline: 'calc(-1 * var(--space-3))' }}>
+    <Box marginX={-3}>
       <Carousel
         title="Explore Assets"
         styles={{
@@ -1222,7 +1222,7 @@ function HideNavigationAndPaginationCarousel() {
     );
   }
   return (
-    <Box style={{ marginInline: 'calc(-1 * var(--space-3))' }}>
+    <Box marginX={-3}>
       <Carousel
         title="Explore Assets"
         hidePagination
@@ -1300,7 +1300,7 @@ function AnimatedPaginationCarousel() {
   }
 
   return (
-    <Box style={{ marginInline: 'calc(-1 * var(--space-3))' }}>
+    <Box marginX={-3}>
       <Carousel
         PaginationComponent={AnimatedPagination}
         drag="snap"
@@ -1424,7 +1424,7 @@ function ImperativeApiCarousel() {
           />
         </HStack>
       </HStack>
-      <Box style={{ marginInline: 'calc(-1 * var(--space-3))' }}>
+      <Box marginX={-3}>
         <Carousel
           ref={carouselRef}
           hidePagination

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

@@ -1103,11 +1103,11 @@ function DynamicChartSizing() {
         borderBottomLeftRadius={300}
         borderTopLeftRadius={300}
         flexGrow={1}
+        marginTop={-3}
+        marginStart={-3}
+        marginBottom={-3}
         style={{
           background: 'linear-gradient(0deg, #D07609 0%, #F7931A 100%)',
-          marginTop: 'calc(-1 * var(--space-3))',
-          marginLeft: 'calc(-1 * var(--space-3))',
-          marginBottom: 'calc(-1 * var(--space-3))',
         }}
       >
         {/* LineChart fills to take up available width and height */}
@@ -1688,12 +1688,7 @@ function AssetPriceWidget() {
           </Text>
         </VStack>
       </HStack>
-      <div
-        style={{
-          marginLeft: 'calc(-1 * var(--space-2))',
-          marginRight: 'calc(-1 * var(--space-2))',
-        }}
-      >
+      <Box marginX={-2}>
         <LineChart
           showArea
           accessibilityLabel={chartAccessibilityLabel}
@@ -1714,7 +1709,7 @@ function AssetPriceWidget() {
             styles={{ beacon: { stroke: 'white' } }}
           />
         </LineChart>
-      </div>
+      </Box>
     </VStack>
   );
 }

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

@@ -148,7 +148,7 @@ You can customize label appearance using `labelFont`, `labelDx`, `labelDy`, `lab
 Use `labelBoundsInset` to prevent labels from getting too close to chart edges.
 
 ```jsx live
-<Box style={{ marginLeft: 'calc(-1 * var(--space-3))', marginRight: 'calc(-1 * var(--space-3))' }}>
+<Box marginX={-3}>
   <LineChart
     height={{ base: 150, tablet: 200, desktop: 250 }}
     inset={{ left: 0, right: 0 }}

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

@@ -480,7 +480,7 @@ You can use `labelFont` to customize the font of the scrubber line label and `be
 Use `labelBoundsInset` to prevent the scrubber line label from getting too close to chart edges.
 
 ```jsx live
-<Box style={{ marginLeft: 'calc(-1 * var(--space-3))', marginRight: 'calc(-1 * var(--space-3))' }}>
+<Box marginX={-3}>
   <LineChart
     enableScrubbing
     showArea
@@ -499,7 +499,7 @@ Use `labelBoundsInset` to prevent the scrubber line label from getting too close
 ```
 
 ```jsx live
-<Box style={{ marginLeft: 'calc(-1 * var(--space-3))', marginRight: 'calc(-1 * var(--space-3))' }}>
+<Box marginX={-3}>
   <LineChart
     enableScrubbing
     showArea

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

@@ -185,6 +185,60 @@ function ExampleMultiGroups() {
 }
 ```
 
+### Multi-select with assets
+
+```jsx live
+function ExampleMultiAssets() {
+  const assetImageMap: Record<string, string> = {
+    btc: assets.btc.imageUrl,
+    eth: assets.eth.imageUrl,
+    dai: assets.dai.imageUrl,
+    ltc: assets.ltc.imageUrl,
+    xrp: assets.xrp.imageUrl,
+  };
+
+  const exampleOptions = [
+    { value: 'btc', label: assets.btc.name },
+    { value: 'eth', label: assets.eth.name },
+    { value: 'dai', label: assets.dai.name },
+    { value: 'ltc', label: assets.ltc.name },
+    { value: 'xrp', label: assets.xrp.name },
+  ];
+  const { value, onChange } = useMultiSelect({
+    initialValue: ['eth', 'btc'],
+  });
+
+  // Get startNode based on selected assets
+  const startNode = useMemo(() => {
+    if (value.length === 0) return null;
+
+    // Multiple assets selected - use RemoteImageGroup
+    return (
+      <RemoteImageGroup shape="circle" size={24}>
+        {value.map((assetValue) => {
+          const imageUrl = assetImageMap[assetValue];
+          if (!imageUrl) return null;
+          return <RemoteImage key={assetValue} source={imageUrl} />;
+        })}
+      </RemoteImageGroup>
+    );
+  }, [value]);
+
+  return (
+    <SelectChip
+      controlAccessibilityLabel="Select multiple assets"
+      maxWidth={400}
+      onChange={onChange}
+      options={exampleOptions}
+      placeholder="Choose assets"
+      startNode={startNode}
+      type="multi"
+      value={value}
+    />
+  );
+}
+```
+
 ### Compact
 
 ```jsx live

package/package.json

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