@coinbase/cds-mcp-server 8.47.2 → 8.47.3

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

@@ -40,7 +40,7 @@ You can also provide multiple series of data to the chart. Series will have thei
 
 ```jsx live
 function MonthlyGainsByAsset() {
-  const ThinSolidLine = memo((props: SolidLineProps) => <SolidLine {...props} strokeWidth={1} />);
+  const ThinSolidLine = memo((props) => <SolidLine {...props} strokeWidth={1} />);
 
   const tickFormatter = useCallback(
     (amount) =>
@@ -91,7 +91,7 @@ You can also configure stacking for your chart using the `stacked` prop.
 
 ```jsx live
 function MonthlyGainsByAsset() {
-  const ThinSolidLine = memo((props: SolidLineProps) => <SolidLine {...props} strokeWidth={1} />);
+  const ThinSolidLine = memo((props) => <SolidLine {...props} strokeWidth={1} />);
 
   const tickFormatter = useCallback(
     (amount) =>
@@ -157,7 +157,7 @@ You can also configure multiple stacks by setting the `stackId` prop on each ser
 
 ```jsx live
 function MonthlyGainsMultipleStacks() {
-  const ThinSolidLine = memo((props: SolidLineProps) => <SolidLine {...props} strokeWidth={1} />);
+  const ThinSolidLine = memo((props) => <SolidLine {...props} strokeWidth={1} />);
 
   const tickFormatter = useCallback(
     (amount) =>
@@ -227,7 +227,7 @@ function MonthlyGainsMultipleStacks() {
 
 ```jsx live
 function MonthlyGainsByAsset() {
-  const ThinSolidLine = memo((props: SolidLineProps) => <SolidLine {...props} strokeWidth={1} />);
+  const ThinSolidLine = memo((props) => <SolidLine {...props} strokeWidth={1} />);
 
   const tickFormatter = useCallback(
     (amount) =>
@@ -284,7 +284,7 @@ function MonthlyGainsByAsset() {
         GridLineComponent: ThinSolidLine,
         tickLabelFormatter: tickFormatter,
         width: 70,
-        domainLimit: 'strict'
+        domainLimit: 'strict',
       }}
     />
   );
@@ -368,7 +368,7 @@ You can also round the baseline of the bars by setting the `roundBaseline` prop
 
 ```jsx live
 function PositiveAndNegativeCashFlow() {
-  const ThinSolidLine = memo((props: SolidLineProps) => <SolidLine {...props} strokeWidth={1} />);
+  const ThinSolidLine = memo((props) => <SolidLine {...props} strokeWidth={1} />);
 
   const categories = Array.from({ length: 31 }, (_, i) => `3/${i + 1}`);
   const gains = [
@@ -455,7 +455,7 @@ function MonthlyRewards() {
     { id: 'green', data: green, color: '#33c481' },
   ];
 
-  const CustomBarStackComponent = ({ children, ...props }: BarStackComponentProps) => {
+  const CustomBarStackComponent = ({ children, ...props }) => {
     if (props.height === 0) {
       const diameter = props.width;
       return (
@@ -499,7 +499,7 @@ function MonthlyRewards() {
       }}
     />
   );
-};
+}
 ```
 
 ### Customization
@@ -677,13 +677,12 @@ You can set the `BarComponent` prop to render a custom component for bars.
 ```jsx live
 function Candlesticks() {
   const infoTextId = useId();
-  const infoTextRef = React.useRef<HTMLSpanElement>(null);
-  const selectedIndexRef = React.useRef<number | null>(null);
-  const stockData = btcCandles.slice(0, 90)
-    .reverse();
+  const infoTextRef = React.useRef(null);
+  const selectedIndexRef = React.useRef(null);
+  const stockData = btcCandles.slice(0, 90).reverse();
   const min = Math.min(...stockData.map((data) => parseFloat(data.low)));
 
-  const ThinSolidLine = memo((props: SolidLineProps) => <SolidLine {...props} strokeWidth={1} />);
+  const ThinSolidLine = memo((props) => <SolidLine {...props} strokeWidth={1} />);
 
   // Custom line component that renders a rect to highlight the entire bandwidth
   const BandwidthHighlight = memo(({ d, stroke }) => {
@@ -692,11 +691,11 @@ function Candlesticks() {
     const xScale = getXScale();
     const xAxis = getXAxis();
 
-    if (!xScale || scrubberPosition === undefined) return
+    if (!xScale || scrubberPosition === undefined) return;
 
     const xPos = xScale(scrubberPosition);
 
-    if (xPos === undefined) return
+    if (xPos === undefined) return;
 
     return (
       <rect
@@ -709,49 +708,43 @@ function Candlesticks() {
     );
   });
 
-  const candlesData = stockData.map((data) => [parseFloat(data.low), parseFloat(data.high)]) as [
-    number,
-    number,
-  ][];
+  const candlesData = stockData.map((data) => [parseFloat(data.low), parseFloat(data.high)]);
 
-  const CandlestickBarComponent = memo<BarComponentProps>(
-    ({ x, y, width, height, originY, dataX, ...props }) => {
-      const { getYScale } = useCartesianChartContext();
-      const yScale = getYScale();
+  const CandlestickBarComponent = memo(({ x, y, width, height, originY, dataX, ...props }) => {
+    const { getYScale } = useCartesianChartContext();
+    const yScale = getYScale();
 
-      const wickX = x + width / 2;
+    const wickX = x + width / 2;
 
-      const timePeriodValue = stockData[dataX as number];
+    const timePeriodValue = stockData[dataX];
 
-      const open = parseFloat(timePeriodValue.open);
-      const close = parseFloat(timePeriodValue.close);
+    const open = parseFloat(timePeriodValue.open);
+    const close = parseFloat(timePeriodValue.close);
 
-      const bullish = open < close;
-      const color = bullish ? 'var(--color-fgPositive)' : 'var(--color-fgNegative)';
-      const openY = yScale?.(open) ?? 0;
-      const closeY = yScale?.(close) ?? 0;
+    const bullish = open < close;
+    const color = bullish ? 'var(--color-fgPositive)' : 'var(--color-fgNegative)';
+    const openY = yScale?.(open) ?? 0;
+    const closeY = yScale?.(close) ?? 0;
 
-      const bodyHeight = Math.abs(openY - closeY);
-      const bodyY = openY < closeY ? openY : closeY;
+    const bodyHeight = Math.abs(openY - closeY);
+    const bodyY = openY < closeY ? openY : closeY;
 
-      return (
-        <g>
-          <line stroke={color} strokeWidth={1} x1={wickX} x2={wickX} y1={y} y2={y + height} />
-          <rect fill={color} height={bodyHeight} width={width} x={x} y={bodyY} />
-        </g>
-      );
-    },
-  );
+    return (
+      <g>
+        <line stroke={color} strokeWidth={1} x1={wickX} x2={wickX} y1={y} y2={y + height} />
+        <rect fill={color} height={bodyHeight} width={width} x={x} y={bodyY} />
+      </g>
+    );
+  });
 
-  const formatPrice = React.useCallback((price: string) => {
+  const formatPrice = React.useCallback((price) => {
     return new Intl.NumberFormat('en-US', {
       style: 'currency',
       currency: 'USD',
     }).format(parseFloat(price));
   }, []);
 
-
-  const formatThousandsPrice = React.useCallback((price: string) => {
+  const formatThousandsPrice = React.useCallback((price) => {
     const formattedPrice = new Intl.NumberFormat('en-US', {
       style: 'currency',
       currency: 'USD',
@@ -762,8 +755,7 @@ function Candlesticks() {
     return `${formattedPrice}k`;
   }, []);
 
-
-  const formatVolume = React.useCallback((volume: string) => {
+  const formatVolume = React.useCallback((volume) => {
     const volumeInThousands = parseFloat(volume) / 1000;
     return (
       new Intl.NumberFormat('en-US', {
@@ -847,7 +839,7 @@ function Candlesticks() {
       </BarChart>
     </VStack>
   );
-};
+}
 ```
 
 ##### Outlined Stacks
@@ -856,7 +848,7 @@ You can set the `BarStackComponent` prop to render a custom component for stacks
 
 ```jsx live
 function MonthlyRewards() {
-  const CustomBarStackComponent = ({ children, ...props }: BarStackComponentProps) => {
+  const CustomBarStackComponent = ({ children, ...props }) => {
     return (
       <>
         <Bar

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

@@ -1007,7 +1007,7 @@ function CustomComponentsCarousel() {
               dangerouslySetBackground="rgb(var(--blue80))"
               description={
                 <Text as="p" font="label2" numberOfLines={3} color="fgInverse">
-                  Use code NOV60 when you  sign up for Coinbase One
+                  Use code NOV60 when you sign up for Coinbase One
                 </Text>
               }
               media={
@@ -1691,7 +1691,7 @@ function ImperativeApiCarousel() {
   const carouselRef = useRef(null);
   const [currentPageInfo, setCurrentPageInfo] = useState('Page 1');
 
-  function handleGoToPage(pageIndex: number) {
+  function handleGoToPage(pageIndex) {
     if (carouselRef.current) {
       const clampedPageIndex = Math.max(0, Math.min(carouselRef.current.totalPages - 1, pageIndex));
       carouselRef.current.goToPage(clampedPageIndex);

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

@@ -268,13 +268,13 @@ You can also remove the default inset, such as to have a compact line chart.
 function Insets() {
   const data = [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58];
 
-const formatPrice = useCallback((dataIndex: number) => {
-  const price = data[dataIndex];
-  return `$${price.toLocaleString('en-US', {
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 2,
-  })}`;
-}, []);
+  const formatPrice = useCallback((dataIndex) => {
+    const price = data[dataIndex];
+    return `$${price.toLocaleString('en-US', {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    })}`;
+  }, []);
 
   return (
     <HStack gap={2}>
@@ -290,7 +290,6 @@ const formatPrice = useCallback((dataIndex: number) => {
             },
           ]}
           yAxis={{ domainLimit: 'strict' }}
-
           showArea
           style={{ border: '2px solid var(--color-fgPrimary)' }}
         />
@@ -308,7 +307,6 @@ const formatPrice = useCallback((dataIndex: number) => {
             },
           ]}
           yAxis={{ domainLimit: 'strict' }}
-
           showArea
           style={{ border: '2px solid var(--color-fgPrimary)' }}
         >
@@ -327,7 +325,6 @@ const formatPrice = useCallback((dataIndex: number) => {
             },
           ]}
           yAxis={{ domainLimit: 'strict' }}
-
           showArea
           style={{ border: '2px solid var(--color-fgPrimary)' }}
         >
@@ -347,13 +344,13 @@ CartesianChart has built-in scrubbing functionality that can be enabled with the
 function Scrubbing() {
   const [scrubIndex, setScrubIndex] = useState(undefined);
 
-  const onScrubberPositionChange = useCallback((index: number | undefined) => {
+  const onScrubberPositionChange = useCallback((index) => {
     setScrubIndex(index);
   }, []);
 
   return (
     <VStack gap={2}>
-    <Text font="label1">Scrubber index: {scrubIndex ?? 'none'}</Text>
+      <Text font="label1">Scrubber index: {scrubIndex ?? 'none'}</Text>
       <LineChart
         enableScrubbing
         onScrubberPositionChange={onScrubberPositionChange}
@@ -364,12 +361,11 @@ function Scrubbing() {
             data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
           },
         ]}
-
         showYAxis
         showArea
         yAxis={{
           showGrid: true,
-          width: 32
+          width: 32,
         }}
         inset={{ right: 0 }}
       >
@@ -389,33 +385,31 @@ You can showcase the price and volume of an asset over time within one chart.
 ```jsx live
 function PriceWithVolume() {
   const [scrubIndex, setScrubIndex] = useState(null);
-  const btcData = btcCandles
-    .slice(0, 180)
-    .reverse()
+  const btcData = btcCandles.slice(0, 180).reverse();
 
   const btcPrices = btcData.map((candle) => parseFloat(candle.close));
   const btcVolumes = btcData.map((candle) => parseFloat(candle.volume));
   const btcDates = btcData.map((candle) => new Date(parseInt(candle.start) * 1000));
 
-  const formatPrice = useCallback((price: number) => {
+  const formatPrice = useCallback((price) => {
     return `$${price.toLocaleString('en-US', {
       minimumFractionDigits: 2,
       maximumFractionDigits: 2,
     })}`;
   }, []);
 
-  const formatPriceInThousands = useCallback((price: number) => {
+  const formatPriceInThousands = useCallback((price) => {
     return `$${(price / 1000).toLocaleString('en-US', {
       minimumFractionDigits: 0,
       maximumFractionDigits: 2,
     })}k`;
   }, []);
 
-  const formatVolume = useCallback((volume: number) => {
+  const formatVolume = useCallback((volume) => {
     return `${(volume / 1000).toFixed(2)}K`;
   }, []);
 
-  const formatDate = useCallback((date: Date) => {
+  const formatDate = useCallback((date) => {
     return date.toLocaleDateString('en-US', {
       month: 'short',
       day: 'numeric',
@@ -426,22 +420,24 @@ function PriceWithVolume() {
   const currentPrice = btcPrices[displayIndex];
   const currentVolume = btcVolumes[displayIndex];
   const currentDate = btcDates[displayIndex];
-  const priceChange = displayIndex > 0
-    ? ((currentPrice - btcPrices[displayIndex - 1]) / btcPrices[displayIndex - 1])
-    : 0;
+  const priceChange =
+    displayIndex > 0
+      ? (currentPrice - btcPrices[displayIndex - 1]) / btcPrices[displayIndex - 1]
+      : 0;
 
   const accessibilityLabel = useMemo(() => {
-    if (scrubIndex === null) return `Current Bitcoin price: ${formatPrice(currentPrice)}, Volume: ${formatVolume(currentVolume)}`;
+    if (scrubIndex === null)
+      return `Current Bitcoin price: ${formatPrice(currentPrice)}, Volume: ${formatVolume(currentVolume)}`;
     return `Bitcoin price at ${formatDate(currentDate)}: ${formatPrice(currentPrice)}, Volume: ${formatVolume(currentVolume)}`;
   }, [scrubIndex, currentPrice, currentVolume, currentDate, formatPrice, formatVolume, formatDate]);
 
-  const ThinSolidLine = memo((props: SolidLineProps) => <SolidLine {...props} strokeWidth={1} />);
+  const ThinSolidLine = memo((props) => <SolidLine {...props} strokeWidth={1} />);
 
   const headerId = useId();
 
   return (
     <VStack gap={2}>
-     <SectionHeader
+      <SectionHeader
         id={headerId}
         style={{ padding: 0 }}
         title={<Text font="title1">Bitcoin</Text>}
@@ -492,9 +488,15 @@ function PriceWithVolume() {
         aria-labelledby={headerId}
         inset={{ top: 8, left: 8, right: 0, bottom: 0 }}
       >
-        <YAxis axisId="price" showGrid tickLabelFormatter={formatPriceInThousands} width={48} GridLineComponent={ThinSolidLine} />
+        <YAxis
+          axisId="price"
+          showGrid
+          tickLabelFormatter={formatPriceInThousands}
+          width={48}
+          GridLineComponent={ThinSolidLine}
+        />
         <BarPlot seriesIds={['volume']} />
-        <Line seriesId="prices"  showArea />
+        <Line seriesId="prices" showArea />
         <Scrubber seriesIds={['prices']} />
       </CartesianChart>
     </VStack>
@@ -508,8 +510,9 @@ You can also create your own type of cartesian chart by using `getSeriesData`, `
 
 ```jsx live
 function EarningsHistory() {
-  const CirclePlot = memo(({ seriesId, opacity = 1 }: { seriesId: string, opacity?: number }) => {
-    const { drawingArea, getSeries, getSeriesData, getXScale, getYScale } = useCartesianChartContext();
+  const CirclePlot = memo(({ seriesId, opacity = 1 }) => {
+    const { drawingArea, getSeries, getSeriesData, getXScale, getYScale } =
+      useCartesianChartContext();
     const series = getSeries(seriesId);
     const data = getSeriesData(seriesId);
     const xScale = getXScale();
@@ -557,7 +560,7 @@ function EarningsHistory() {
   const estimatedEPS = useMemo(() => [1.71, 1.82, 1.93, 2.34], []);
   const actualEPS = useMemo(() => [1.68, 1.83, 2.01, 2.24], []);
 
-  const formatEarningAmount = useCallback((value: number) => {
+  const formatEarningAmount = useCallback((value) => {
     return `$${value.toLocaleString('en-US', {
       minimumFractionDigits: 2,
       maximumFractionDigits: 2,
@@ -565,7 +568,7 @@ function EarningsHistory() {
   }, []);
 
   const surprisePercentage = useCallback(
-    (index: number): ChartTextChildren => {
+    (index) => {
       const percentage = (actualEPS[index] - estimatedEPS[index]) / estimatedEPS[index];
       const percentageString = percentage.toLocaleString('en-US', {
         style: 'percent',
@@ -588,7 +591,7 @@ function EarningsHistory() {
     [actualEPS, estimatedEPS],
   );
 
-  const LegendEntry = memo(({ opacity = 1, label }: { opacity?: number, label: string }) => {
+  const LegendEntry = memo(({ opacity = 1, label }) => {
     return (
       <Box alignItems="center" gap={0.5}>
         <LegendDot opacity={opacity} />
@@ -597,7 +600,7 @@ function EarningsHistory() {
     );
   });
 
-  const LegendDot = memo((props: BoxBaseProps) => {
+  const LegendDot = memo((props) => {
     return <Box borderRadius={1000} width={10} height={10} background="bgPositive" {...props} />;
   });
 
@@ -647,19 +650,35 @@ function TradingTrends() {
   const gains = profitData.map((value) => (value > 0 ? value : 0));
   const losses = profitData.map((value) => (value < 0 ? value : 0));
 
-  const renderProfit = useCallback((value: number) => {
+  const renderProfit = useCallback((value) => {
     return `$${value}M`;
   }, []);
 
-  const ThinSolidLine = memo((props: SolidLineProps) => <SolidLine {...props} strokeWidth={1} strokeLinecap="butt" />);
-  const ThickSolidLine = memo((props: SolidLineProps) => <SolidLine {...props} strokeWidth={2} strokeLinecap="butt" />);
+  const ThinSolidLine = memo((props) => (
+    <SolidLine {...props} strokeWidth={1} strokeLinecap="butt" />
+  ));
+  const ThickSolidLine = memo((props) => (
+    <SolidLine {...props} strokeWidth={2} strokeLinecap="butt" />
+  ));
 
   return (
     <CartesianChart
       height={250}
       series={[
-        { id: 'gains', data: gains, yAxisId: 'profit', color: 'var(--color-bgPositive)', stackId: 'bars' },
-        { id: 'losses', data: losses, yAxisId: 'profit', color: 'var(--color-bgNegative)', stackId: 'bars' },
+        {
+          id: 'gains',
+          data: gains,
+          yAxisId: 'profit',
+          color: 'var(--color-bgPositive)',
+          stackId: 'bars',
+        },
+        {
+          id: 'losses',
+          data: losses,
+          yAxisId: 'profit',
+          color: 'var(--color-bgNegative)',
+          stackId: 'bars',
+        },
         {
           id: 'revenue',
           data: [128, 118, 122, 116, 120, 114, 118, 122, 126, 130, 134, 138],
@@ -667,17 +686,35 @@ function TradingTrends() {
           color: 'var(--color-fgMuted)',
         },
       ]}
-      xAxis={{ scaleType: 'band', data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }}
+      xAxis={{
+        scaleType: 'band',
+        data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+      }}
       yAxis={[
-        { id: 'profit', range: ({ min, max }) => ({ min: min, max: max - 64 }), domain: { min: -40, max: 40 } },
+        {
+          id: 'profit',
+          range: ({ min, max }) => ({ min: min, max: max - 64 }),
+          domain: { min: -40, max: 40 },
+        },
         { id: 'revenue', range: ({ min, max }) => ({ min: max - 64, max }), domain: { min: 100 } },
       ]}
     >
-      <YAxis axisId="profit" position="left" showGrid tickLabelFormatter={renderProfit} GridLineComponent={ThinSolidLine} />
+      <YAxis
+        axisId="profit"
+        position="left"
+        showGrid
+        tickLabelFormatter={renderProfit}
+        GridLineComponent={ThinSolidLine}
+      />
       <XAxis />
-      <ReferenceLine LineComponent={ThickSolidLine} dataY={0} yAxisId="profit" stroke="rgb(var(--gray15))" />
+      <ReferenceLine
+        LineComponent={ThickSolidLine}
+        dataY={0}
+        yAxisId="profit"
+        stroke="rgb(var(--gray15))"
+      />
       <BarPlot seriesIds={['gains', 'losses']} />
-      <Line seriesId="revenue"  showArea />
+      <Line seriesId="revenue" showArea />
     </CartesianChart>
   );
 }

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

@@ -18,37 +18,37 @@ We use [fuse.js](https://www.fusejs.io/) to power the fuzzy search logic for Com
 
 Basic multi-selection combobox with search.
 
-```jsx live
+```tsx live
 function MultiSelect() {
-const fruitOptions: SelectOption[] = [
-  { value: 'apple', label: 'Apple' },
-  { value: 'banana', label: 'Banana' },
-  { value: 'cherry', label: 'Cherry' },
-  { value: 'date', label: 'Date' },
-  { value: 'elderberry', label: 'Elderberry' },
-  { value: 'fig', label: 'Fig' },
-  { value: 'grape', label: 'Grape' },
-  { value: 'honeydew', label: 'Honeydew' },
-  { value: 'kiwi', label: 'Kiwi' },
-  { value: 'lemon', label: 'Lemon' },
-  { value: 'mango', label: 'Mango' },
-  { value: 'orange', label: 'Orange' },
-  { value: 'papaya', label: 'Papaya' },
-  { value: 'raspberry', label: 'Raspberry' },
-  { value: 'strawberry', label: 'Strawberry' },
-];
+  const fruitOptions: SelectOption[] = [
+    { value: 'apple', label: 'Apple' },
+    { value: 'banana', label: 'Banana' },
+    { value: 'cherry', label: 'Cherry' },
+    { value: 'date', label: 'Date' },
+    { value: 'elderberry', label: 'Elderberry' },
+    { value: 'fig', label: 'Fig' },
+    { value: 'grape', label: 'Grape' },
+    { value: 'honeydew', label: 'Honeydew' },
+    { value: 'kiwi', label: 'Kiwi' },
+    { value: 'lemon', label: 'Lemon' },
+    { value: 'mango', label: 'Mango' },
+    { value: 'orange', label: 'Orange' },
+    { value: 'papaya', label: 'Papaya' },
+    { value: 'raspberry', label: 'Raspberry' },
+    { value: 'strawberry', label: 'Strawberry' },
+  ];
 
   const { value, onChange } = useMultiSelect({ initialValue: ['apple', 'banana'] });
 
   return (
-      <Combobox
-        label="Select fruits"
-        onChange={onChange}
-        options={fruitOptions}
-        placeholder="Search and select fruits..."
-        type="multi"
-        value={value}
-      />
+    <Combobox
+      label="Select fruits"
+      onChange={onChange}
+      options={fruitOptions}
+      placeholder="Search and select fruits..."
+      type="multi"
+      value={value}
+    />
   );
 }
 ```
@@ -85,38 +85,38 @@ function SingleSelect() {
 
 Communicate limits or guidance by pairing helper text with multi-select usage.
 
-```jsx live
+```tsx live
 function HelperText() {
-const fruitOptions: SelectOption[] = [
-  { value: 'apple', label: 'Apple' },
-  { value: 'banana', label: 'Banana' },
-  { value: 'cherry', label: 'Cherry' },
-  { value: 'date', label: 'Date' },
-  { value: 'elderberry', label: 'Elderberry' },
-  { value: 'fig', label: 'Fig' },
-  { value: 'grape', label: 'Grape' },
-  { value: 'honeydew', label: 'Honeydew' },
-  { value: 'kiwi', label: 'Kiwi' },
-  { value: 'lemon', label: 'Lemon' },
-  { value: 'mango', label: 'Mango' },
-  { value: 'orange', label: 'Orange' },
-  { value: 'papaya', label: 'Papaya' },
-  { value: 'raspberry', label: 'Raspberry' },
-  { value: 'strawberry', label: 'Strawberry' },
-];
+  const fruitOptions: SelectOption[] = [
+    { value: 'apple', label: 'Apple' },
+    { value: 'banana', label: 'Banana' },
+    { value: 'cherry', label: 'Cherry' },
+    { value: 'date', label: 'Date' },
+    { value: 'elderberry', label: 'Elderberry' },
+    { value: 'fig', label: 'Fig' },
+    { value: 'grape', label: 'Grape' },
+    { value: 'honeydew', label: 'Honeydew' },
+    { value: 'kiwi', label: 'Kiwi' },
+    { value: 'lemon', label: 'Lemon' },
+    { value: 'mango', label: 'Mango' },
+    { value: 'orange', label: 'Orange' },
+    { value: 'papaya', label: 'Papaya' },
+    { value: 'raspberry', label: 'Raspberry' },
+    { value: 'strawberry', label: 'Strawberry' },
+  ];
 
   const { value, onChange } = useMultiSelect({ initialValue: ['apple', 'banana'] });
 
   return (
-      <Combobox
+    <Combobox
       helperText="Choose more than one fruit"
-        label="Select fruits"
-        onChange={onChange}
-        options={fruitOptions}
-        placeholder="Search and select fruits..."
-        type="multi"
-        value={value}
-      />
+      label="Select fruits"
+      onChange={onChange}
+      options={fruitOptions}
+      placeholder="Search and select fruits..."
+      type="multi"
+      value={value}
+    />
   );
 }
 ```
@@ -129,16 +129,16 @@ The alignment of the selected value(s) can be adjusted using the `align` prop.
 Left / right alignment is preferred for styling.
 ::::
 
-```jsx live
+```tsx live
 function AlignmentExample() {
   const fruitOptions: SelectOption[] = [
-  { value: 'apple', label: 'Apple' },
-  { value: 'banana', label: 'Banana' },
-  { value: 'cherry', label: 'Cherry' },
-  { value: 'date', label: 'Date' },
-  { value: 'elderberry', label: 'Elderberry' },
-  { value: 'fig', label: 'Fig' }
-];
+    { value: 'apple', label: 'Apple' },
+    { value: 'banana', label: 'Banana' },
+    { value: 'cherry', label: 'Cherry' },
+    { value: 'date', label: 'Date' },
+    { value: 'elderberry', label: 'Elderberry' },
+    { value: 'fig', label: 'Fig' },
+  ];
   const { value: multiValue, onChange: multiOnChange } = useMultiSelect({
     initialValue: ['apple', 'banana'],
   });
@@ -163,7 +163,7 @@ function AlignmentExample() {
         value={multiValue}
       />
     </VStack>
-  )
+  );
 }
 ```