@coinbase/cds-mcp-server 8.17.2 → 8.17.4

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

@@ -0,0 +1,149 @@
+# DotCount
+
+Dots are component adornments, typically used to communicate a numerical value or indicate the status or identity of a component to the end-user.
+
+## Import
+
+```tsx
+import { DotCount } from '@coinbase/cds-web/dots/DotCount'
+```
+
+## Examples
+
+### Basic DotCount
+
+```jsx live
+function DotCountBasic() {
+  const counts = [1, 100, 30, 2, 0, 99];
+  return (
+    <VStack gap={2}>
+      {counts.map((count) => (
+        <Box padding={1} key={`DotCount-${count}`}>
+          <DotCount count={count} />
+        </Box>
+      ))}
+      With max prop
+      <VStack alignItems="flex-start" padding={1}>
+        <DotCount count={11} max={9} />
+      </VStack>
+    </VStack>
+  );
+}
+```
+
+### Variants
+
+```jsx live
+function Variants() {
+  return <DotCount count={30} variant="negative" />;
+}
+```
+
+### Placements
+
+```jsx live
+function Placements() {
+  return (
+    <DotCount count={30} pin="top-end">
+      <VStack bordered padding={2}>
+        Child
+      </VStack>
+    </DotCount>
+  );
+}
+```
+
+### Dotting Relative to Shape of Child
+
+You can use the overlap prop to place the dot relative to the corner of the wrapped element.
+
+```jsx live
+function DottingRelativeToShapeOfChild() {
+  return (
+    <Box gap={2} flexWrap="wrap">
+      <DotCount count={30} pin="top-end">
+        <VStack bordered padding={2}>
+          Child
+        </VStack>
+      </DotCount>
+      <DotCount count={120} pin="top-end">
+        <VStack bordered padding={2}>
+          Child
+        </VStack>
+      </DotCount>
+      <DotCount count={30} pin="top-end" overlap="circular">
+        <VStack bordered padding={2} borderRadius="800">
+          Child
+        </VStack>
+      </DotCount>
+      <DotCount count={120} pin="top-end" overlap="circular">
+        <VStack bordered padding={2} borderRadius="800">
+          Child
+        </VStack>
+      </DotCount>
+    </Box>
+  );
+}
+```
+
+### Customize Style
+
+You can use the styles or classNames prop to customize appearance.
+
+```jsx live
+function CustomizeStyle() {
+  const theme = useTheme();
+  return (
+    <HStack gap={2}>
+      <DotCount
+        count={5}
+        styles={{
+          container: {
+            backgroundColor: theme.color.bgPositive,
+            borderColor: theme.color.fgPositive,
+          },
+        }}
+      />
+      <DotCount
+        count={10}
+        styles={{
+          container: {
+            borderRadius: '4px',
+            padding: '2px 6px',
+          },
+        }}
+      />
+      <DotCount
+        count={42}
+        styles={{
+          container: {
+            backgroundColor: theme.color.bgNegative,
+            minWidth: '24px',
+          },
+          text: {
+            fontWeight: 'normal',
+          },
+        }}
+      />
+    </HStack>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `count` | `number` | Yes | `-` | The number value to be shown in the dot. If count is <= 0, dot will not show up. |
+| `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Children of where the dot will anchor to |
+| `className` | `string` | No | `-` | Custom class name for the root element. |
+| `classNames` | `{ root?: string; container?: string \| undefined; text?: string \| undefined; } \| undefined` | No | `-` | Custom class names for the component. |
+| `max` | `number` | No | `99` | If a badge count is greater than max, it will truncate the numbers so its max+ |
+| `overlap` | `circular` | No | `-` | Indicates what shape Dot is overlapping |
+| `pin` | `top-end` | No | `-` | Position of dot relative to its parent |
+| `style` | `CSSProperties` | No | `-` | Custom styles for the root element. |
+| `styles` | `{ root?: CSSProperties; container?: CSSProperties \| undefined; text?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for the component. |
+| `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 |
+| `variant` | `negative` | No | `negative` | Background color of dot |
+
+

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

@@ -0,0 +1,58 @@
+# DotStatusColor
+
+Dots are component adornments, typically used to communicate a numerical value or indicate the status or identity of a component to the end-user.
+
+## Import
+
+```tsx
+import { DotStatusColor } from '@coinbase/cds-web/dots/DotStatusColor'
+```
+
+## Examples
+
+### Sizes
+
+```jsx live
+function Sizes() {
+  const SIZES = ['xs', 's', 'm', 'l'];
+  return (
+    <VStack gap={2}>
+      {SIZES.map((size) => (
+        <VStack gap={1} key={`DotStatusColor-size-${size}`}>
+          <DotStatusColor variant="negative" size={size} />
+        </VStack>
+      ))}
+    </VStack>
+  );
+}
+```
+
+### Variants
+
+```jsx live
+function Variants() {
+  const VARIANTS = ['positive', 'negative', 'primary', 'fgMuted', 'warning'];
+  return (
+    <VStack gap={2}>
+      {VARIANTS.map((variant) => (
+        <VStack gap={1} key={`DotStatusColor-variant-${variant}`}>
+          <DotStatusColor variant={variant} />
+        </VStack>
+      ))}
+    </VStack>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `variant` | `warning \| primary \| positive \| negative \| foregroundMuted` | Yes | `-` | Background color of dot |
+| `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Children of where the dot will anchor to |
+| `overlap` | `circular` | No | `-` | Indicates what shape Dot is overlapping |
+| `pin` | `top-start \| top-end \| bottom-start \| bottom-end` | No | `-` | Position of dot relative to its parent |
+| `size` | `s \| l \| xs \| m` | No | `-` | Size of dot |
+| `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/DotSymbol.txt

@@ -0,0 +1,137 @@
+# DotSymbol
+
+Dots are component adornments, typically used to communicate a numerical value or indicate the status or identity of a component to the end-user.
+
+## Import
+
+```tsx
+import { DotSymbol } from '@coinbase/cds-web/dots/DotSymbol'
+```
+
+## Examples
+
+### Placements
+
+```jsx live
+function Placements() {
+  const PIN_DIRECTIONS = ['top-start', 'top-end', 'bottom-start', 'bottom-end'];
+  return (
+    <VStack gap={4}>
+      {PIN_DIRECTIONS.map((pinDirection) => (
+        <VStack gap={4} padding={1} key={`dotsymbol-placement-${pinDirection}`} paddingBottom={4}>
+          <DotSymbol size="m" pin={pinDirection} source={assets.btc.imageUrl}>
+            <VStack bordered padding={1}>
+              Child
+            </VStack>
+          </DotSymbol>
+          <DotSymbol size="m" pin={pinDirection} source={assets.btc.imageUrl}>
+            <Icon name="airdrop" shape="square" size="l" />
+          </DotSymbol>
+        </VStack>
+      ))}
+    </ResponsiveExample>
+  );
+}
+```
+
+### Sizes
+
+```jsx live
+function Sizes() {
+  const SIZES = ['xs', 's', 'm', 'l'];
+  return (
+    <VStack gap={2}>
+      {SIZES.map((size) => (
+        <VStack gap={1} key={`dotsymbol-size-${size}`}>
+          <DotSymbol source={assets.btc.imageUrl} size={size} />
+        </VStack>
+      ))}
+    </ResponsiveExample>
+  );
+}
+```
+
+### Dotting relative to shape of child
+
+You can use the overlap prop to place the dot relative to the corner of the wrapped element.
+
+```jsx live
+function DottingRelativeToShapeOfChild() {
+  return (
+    <VStack gap={2}>
+      <HStack gap={2}>
+        <DotSymbol source={assets.eth.imageUrl} overlap="circular" pin="bottom-end" size="m">
+          <Avatar src={assets.btc.imageUrl} size="xxxl" />
+        </DotSymbol>
+        <DotSymbol source={assets.eth.imageUrl} overlap="circular" pin="bottom-end" size="l">
+          <Avatar src={assets.btc.imageUrl} size="xxxl" />
+        </DotSymbol>
+      </HStack>
+    </VStack>
+  );
+}
+```
+
+### Use DotSymbol paired with Icon
+
+```jsx live
+function UseDotSymbolPairedWithIcon() {
+  return (
+    <VStack gap={1}>
+      <DotSymbol
+        overlap="circular"
+        active
+        iconName="lightningBolt"
+        pin="bottom-end"
+        size={avatarIconSizeMap['xxxl']}
+      >
+        <Avatar source={assets.dai.imageUrl} size="xxxl" />
+      </DotSymbol>
+    </VStack>
+  );
+}
+```
+
+### Use DotSymbol paired with another Asset
+
+```jsx live
+function UseDotSymbolPairedWithAnotherAsset() {
+  return (
+    <VStack>
+      <DotSymbol
+        overlap="circular"
+        pin="bottom-end"
+        source={assets.polygon.imageUrl}
+        size={avatarDotSizeMap['xxxl']}
+      >
+        <Avatar source={assets.dai.imageUrl} size="xxxl" />
+      </DotSymbol>
+    </ResponsiveExample>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `active` | `boolean` | No | `-` | Whether the icon is active |
+| `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 | `-` | - |
+| `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 | `-` | - |
+| `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | The element that the dot will anchor to |
+| `className` | `string` | No | `-` | - |
+| `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | The color of the icon |
+| `iconClassName` | `string` | No | `-` | - |
+| `iconName` | `key \| search \| pin \| filter \| visible \| continuous \| auto \| warning \| error \| account \| activity \| add \| addPeople \| advancedMarketSelector \| advancedTradeProduct \| affiliates \| airdrop \| allTimeHigh \| allocation \| annotation \| api \| apiPlug \| appSwitcher \| appleLogo \| application \| arrowDown \| arrowLeft \| arrowRight \| arrowUp \| arrowsHorizontal \| arrowsVertical \| artwork \| assetHubProduct \| assetManagementProduct \| astronautHelmet \| avatar \| average \| backArrow \| bank \| barChartWindow \| base \| baseApps \| baseFeed \| baseNotification \| baseSquare \| baseTransact \| baseVerification \| baseWallet \| beaker \| beginningArrow \| bell \| bellCheck \| bellPlus \| block \| blockchain \| blog \| book \| bookmark \| borrowProduct \| bridging \| briefcase \| browser \| calculator \| calendar \| calendarEmpty \| camera \| candlesticks \| car \| card \| caret \| caretDown \| caretLeft \| caretRight \| caretUp \| cash \| cashAustralianDollar \| cashBrazilianReal \| cashBrazillianReal \| cashCanadianDollar \| cashCoins \| cashEUR \| cashGBP \| cashIndonesianRupiah \| cashJPY \| cashPhilippinePeso \| cashPolishZloty \| cashRupee \| cashSingaporeDollar \| cashSwissFranc \| cashThaiBaht \| cashTurkishLira \| cashUSD \| cashUaeDirham \| cashVietnameseDong \| chainLink \| chartBar \| chartCandles \| chartLine \| chartPie \| chartPieCircle \| chartVolume \| chatBotAgent \| chatBubble \| chatRequests \| checkboxChecked \| checkboxEmpty \| checkmark \| circleCheckmark \| circleCross \| circulatingSupply \| clipboard \| clock \| clockOutline \| close \| closeCaption \| clothing \| cloud \| cloudProduct \| cluster \| coinbase \| coinbaseCardProduct \| coinbaseOne \| coinbaseOneCard \| coinbaseOneLogo \| coinbaseRewards \| collapse \| collectibles \| collection \| comment \| commentPlus \| commerceProduct \| compass \| complianceProduct \| compose \| concierge \| conciergeBell \| config \| convert \| copy \| creatorCoin \| cross \| crossTrade \| crypto \| cryptobasics \| crystalBall \| currencies \| custodyProduct \| dashboard \| dataMarketplaceProduct \| dataStack \| defi \| delegateProduct \| deposit \| derivatives \| derivativesProduct \| derivativesProductNew \| developerAPIProduct \| developerPlatformProduct \| dex \| diagonalDownArrow \| diagonalRightArrow \| diagonalUpArrow \| diamond \| diamondIncentives \| dinnerPlate \| directDeposit \| directDepositIcon \| disabledPhone \| discordLogo \| distribution \| document \| documentation \| dot \| doubleChevronRight \| downArrow \| download \| drag \| drops \| earn \| earnProduct \| earnRewards \| email \| endArrow \| ethereum \| eventContracts \| exchangeProduct \| exclamationMark \| expand \| expandAddress \| expandAll \| externalLink \| eye \| faceScan \| faces \| faucet \| fib \| fingerprint \| flame \| folder \| folderArrow \| folderOpen \| followAdd \| following \| fork \| forwardArrow \| fscsProtection \| gab \| games \| gasFees \| gauge \| gaugeEmpty \| gaugeHigh \| gaugeHighLow \| gaugeHighMid \| gaugeLow \| gaugeLowHigh \| gaugeLowMid \| gaugeMedium \| gavel \| gear \| generalCharacter \| ghost \| gif \| giftBox \| giftCard \| gitHubLogo \| globe \| googleLogo \| grid \| group \| hamburger \| hammer \| heart \| helpCenterProduct \| helpCenterQuestionMark \| hiddenEye \| home \| horizontalLine \| ideal \| identityCard \| image \| info \| initiator \| instagramLogo \| instantUnstakingClock \| institute \| institutionalProduct \| interest \| invisible \| invoice \| keyboard \| laptop \| leadChart \| leadCoin \| learningRewardsProduct \| light \| lightbulb \| lightningBolt \| lineChartCrypto \| list \| location \| lock \| login \| logout \| magnifyingGlass \| marketCap \| megaphone \| menu \| metaverse \| microphone \| mint \| minus \| moon \| more \| moreVertical \| music \| newsFeed \| newsletter \| nft \| nftBuy \| nftOffer \| nftProduct \| nftSale \| noRocket \| noWifi \| nodeProduct \| options \| orderBook \| orderHistory \| outline \| pFPS \| paperAirplane \| paperclip \| participate \| participateProduct \| passKey \| passport \| pause \| pay \| payProduct \| paymentCard \| payments \| payouts \| paypal \| pencil \| peopleGroup \| peopleStar \| percentage \| perpetualSwap \| phone \| plane \| planet \| play \| plusMinus \| powerTool \| priceAlerts \| priceAlertsCheck \| primePoduct \| privateClientProduct \| proProduct \| profile \| protection \| pulse \| pyramid \| qrCode \| qrCodeAlt \| queryTransact \| questionMark \| reCenter \| rectangle \| recurring \| refresh \| regulated \| regulatedFutures \| report \| rewardsProduct \| rocket \| rocketShip \| rollingSpot \| rosettaProduct \| royalty \| safe \| save \| savingsBank \| scanQrCode \| securityKey \| securityShield \| seen \| sendReceive \| setPinCode \| settings \| share \| shield \| shieldOutline \| shoppingCart \| signinProduct \| smartContract \| socialChat \| socialReshare \| socialShare \| sofort \| sortDoubleArrow \| sortDown \| sortDownCenter \| sortUp \| sortUpCenter \| soundOff \| soundOn \| sparkle \| speaker \| staggeredList \| stake \| staking \| star \| statusDot \| step0 \| step1 \| step2 \| step3 \| step4 \| step5 \| step6 \| step7 \| step8 \| step9 \| sun \| support \| tag \| taxes \| taxesReceipt \| telephone \| thumbsDown \| thumbsDownOutline \| thumbsUp \| thumbsUpOutline \| tokenSales \| trading \| transactions \| trashCan \| trophy \| trophyCup \| twitterLogo \| ultility \| undo \| unfollowPeople \| unknown \| unlock \| upArrow \| upload \| venturesProduct \| verifiedBadge \| verifiedPools \| verticalLine \| waasProduct \| wallet \| walletLogo \| walletProduct \| wellness \| wifi \| wireTransfer \| withdraw \| wrapToken \| xLogo` | No | `-` | Icon name to add to the dot. |
+| `iconStyle` | `CSSProperties` | No | `-` | - |
+| `imageClassName` | `string` | No | `-` | - |
+| `imageStyle` | `CSSProperties` | No | `-` | - |
+| `overlap` | `circular` | No | `-` | Indicates what shape dot is overlapping |
+| `pin` | `top-start \| top-end \| bottom-start \| bottom-end` | No | `-` | Position of the dot |
+| `size` | `s \| l \| xs \| m` | No | `-` | Size of the dot |
+| `source` | `string` | No | `-` | Image source path |
+| `style` | `CSSProperties` | No | `-` | - |
+| `symbol` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Add an arbitrary ReactNode to the dot instead of an icon. |
+| `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/Dropdown.txt

@@ -0,0 +1,119 @@
+# Dropdown
+
+An overlay that opens and closes.
+
+## Import
+
+```tsx
+import { Dropdown } from '@coinbase/cds-web/dropdown/Dropdown'
+```
+
+## Examples
+
+### Usage
+
+A Dropdown wraps a subject which when interacted with will toggle the visibility of an elevated surface called a menu.
+
+:::warning
+The `width` must be at least as large as the `content` prop's width, or the Dropdown may have issues in Safari.
+:::
+
+#### Mobile
+
+Dropdown is a web only component. If you like to use a “Dropdown” like feature on Mobile, please use Tray instead.
+
+#### Basic Dropdown
+
+Dropdown menus can show an scrim below the menu, overlaying all other content on the screen when passed `showOverlay`.
+
+Dropdown can render as a Modal on mobile web if passed `enableMobileModal`.
+
+```jsx live
+function Example() {
+  const [value, setValue] = useState(undefined);
+  const [showMobileModal, setShowMobileModal] = useState(false);
+  const [showOverlay, setShowOverlay] = useState(false);
+
+  const options = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5', 'Option 6'];
+
+  const content = useMemo(
+    () => (
+      <>
+        <HStack paddingX={2} paddingY={2}>
+          <Text font="caption" as="h2" color="foregroundMuted">
+            Section Heading
+          </Text>
+        </HStack>
+        {options.map((option) => (
+          <SelectOption value={option} title={option} />
+        ))}
+      </>
+    ),
+    [],
+  );
+
+  return (
+    <PortalProvider>
+      <VStack padding={4}>
+        <VStack width="100%" paddingTop={5} gap={3}>
+          <VStack gap={2}>
+            <Switch checked={showMobileModal} onChange={() => setShowMobileModal((v) => !v)}>
+              Enable Mobile Modal
+            </Switch>
+            <Switch checked={showOverlay} onChange={() => setShowOverlay((v) => !v)}>
+              Show Overlay
+            </Switch>
+          </VStack>
+          <Dropdown
+            value={value}
+            onChange={setValue}
+            content={content}
+            enableMobileModal={showMobileModal}
+            showOverlay={showOverlay}
+          >
+            <Button compact endIcon="caretDown">
+              Open Menu
+            </Button>
+          </Dropdown>
+        </VStack>
+      </VStack>
+    </PortalProvider>
+  );
+}
+```
+
+#### Control a Dropdown Programmatically
+
+You can control the visibility of a Dropdown menu programmatically using the exposed `openMenu` and `closeMenu` methods on a Dropdown's `ref`.
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | Subject of the Popover that when interacted with will toggle the visibility of the content |
+| `content` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | - |
+| `block` | `boolean` | No | `false` | Makes the Popover Subject fill the width of the parent container |
+| `contentPosition` | `PopoverContentPositionConfig` | No | `-` | Override content positioning defaults |
+| `controlledElementAccessibilityProps` | `{ id: string; accessibilityLabel?: string; } \| undefined` | No | `-` | - |
+| `disableCloseOnOptionChange` | `boolean` | No | `-` | Prevent menu from closing when an option is selected |
+| `disablePortal` | `boolean` | No | `-` | Does not render the Dropdown inside of a portal (react-dom createPortal). Portal is automatically disabled for SSR |
+| `disableTypeFocus` | `boolean` | No | `-` | Use for editable Search Input components to ensure focus is correctly applied |
+| `disabled` | `boolean` | No | `-` | Prevents the Dropdown menu from opening. Youll need to surface disabled state on the trigger manually. |
+| `enableMobileModal` | `boolean` | No | `-` | Enable to have Dropdown render its content inside a Modal as opposed to a relatively positioned Popover Ideal for mobile or smaller devices. |
+| `key` | `Key \| null` | No | `-` | - |
+| `maxHeight` | `MaxHeight<string \| number>` | No | `300` | Can optionally pass a maxHeight. |
+| `maxWidth` | `MaxWidth<string \| number>` | No | `-` | Maximum width of input as a percentage string or number converted to pixels. |
+| `minWidth` | `MinWidth<string \| number>` | No | `-` | Minimum width of input as a percentage string or number converted to pixels. |
+| `onBlur` | `(() => void)` | No | `-` | Callback that fires when Dropdown or trigger are blurred |
+| `onChange` | `Dispatch<SetStateAction<string>> \| ((newValue: string) => void)` | No | `-` | Callback that is fired whenever an option is selected |
+| `onCloseMenu` | `(() => void)` | No | `-` | Callback that fires when Dropdown is closed |
+| `onOpenMenu` | `(() => void)` | No | `-` | Callback that fires when Dropdown is opened |
+| `ref` | `((instance: DropdownRef \| null) => void) \| RefObject<DropdownRef> \| null` | No | `-` | - |
+| `respectNegativeTabIndex` | `boolean` | No | `false` | If true, the focus trap will respect negative tabIndex values, removing them from the list of focusable elements. |
+| `restoreFocusOnUnmount` | `boolean` | No | `true` | If true, the focus trap will restore focus to the previously focused element when it unmounts.  WARNING: If you disable this, you need to ensure that focus is restored properly so it doesnt end up on the body |
+| `showOverlay` | `boolean` | No | `false` | Display an overlay over all content below the Popover menu |
+| `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 |
+| `value` | `string` | No | `-` | Default selected value, or preselected value |
+| `width` | `Width<string \| number>` | No | `100%` | Width of input as a percentage string or number converted to pixels. |
+
+

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

@@ -0,0 +1,163 @@
+# Fallback
+
+A component that displays a fallback animation.
+
+## Import
+
+```tsx
+import { Fallback } from '@coinbase/cds-web/layout/Fallback'
+```
+
+## Examples
+
+### Basic example
+
+```jsx live
+<VStack gap={1}>
+  <Fallback width={150} height={45} />
+  <Fallback width={65} height={45} percentage />
+</VStack>
+```
+
+### Shape
+
+The shape of the fallback can further be customized with the `shape` prop.
+
+```jsx live
+<HStack gap={1}>
+  <Fallback width={50} height={50} shape="square" />
+  <Fallback width={50} height={50} shape="squircle" />
+  <Fallback width={50} height={50} shape="circle" />
+</HStack>
+```
+
+:::tip Rectangular fallback width
+
+If the fallback shape is a rectangle and the width is specified as a number, then by default, the width value will be recalculated and randomized within a predetermined threshold (e.g. to add some variety when mulitple fallbacks are presented together). If this behavior is undesirable (e.g. in server-side rendered web apps), randomization can be disabled with the `disableRandomRectWidth` prop.
+
+<br />
+
+Alternatively, you may create a rectangle width variant by setting a number value on the `rectWidthVariant` prop. Variants map to a predetermined set of width values, which are cycled through repeatedly when the set is exhausted. Therefore, it's still possible to achieve some variety, but in a deterministic manner (i.e. safe for server-side rendering). Here's an example:
+
+<br />
+
+```jsx live
+function RenderFallbacksInList() {
+  const items = [{}, {}, {}, {}, {}];
+  return (
+    <VStack gap={1}>
+      {items.map((_, i) => (
+        <Fallback width={150} rectWidthVariant={i} />
+      ))}
+    </VStack>
+  );
+}
+```
+
+:::
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `height` | `string \| number` | Yes | `-` | - |
+| `width` | `string \| number` | Yes | `-` | - |
+| `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| space-between \| space-around \| space-evenly>` | No | `-` | - |
+| `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
+| `alignSelf` | `ResponsiveProp<center \| normal \| auto \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
+| `as` | `symbol \| object \| style \| svg \| a \| abbr \| address \| area \| article \| aside \| audio \| b \| base \| bdi \| bdo \| big \| blockquote \| body \| br \| button \| canvas \| caption \| center \| cite \| code \| col \| colgroup \| data \| datalist \| dd \| del \| details \| dfn \| dialog \| div \| dl \| dt \| em \| embed \| fieldset \| figcaption \| figure \| footer \| form \| h1 \| h2 \| h3 \| h4 \| h5 \| h6 \| head \| header \| hgroup \| hr \| html \| i \| iframe \| img \| input \| ins \| kbd \| keygen \| label \| legend \| li \| link \| main \| map \| mark \| menu \| menuitem \| meta \| meter \| nav \| noindex \| noscript \| ol \| optgroup \| option \| output \| p \| param \| picture \| pre \| progress \| q \| rp \| rt \| ruby \| s \| samp \| search \| slot \| script \| section \| select \| small \| source \| span \| strong \| sub \| summary \| sup \| table \| template \| tbody \| td \| textarea \| tfoot \| th \| thead \| time \| title \| tr \| track \| u \| ul \| var \| video \| wbr \| webview \| animate \| animateMotion \| animateTransform \| circle \| clipPath \| defs \| desc \| ellipse \| feBlend \| feColorMatrix \| feComponentTransfer \| feComposite \| feConvolveMatrix \| feDiffuseLighting \| feDisplacementMap \| feDistantLight \| feDropShadow \| feFlood \| feFuncA \| feFuncB \| feFuncG \| feFuncR \| feGaussianBlur \| feImage \| feMerge \| feMergeNode \| feMorphology \| feOffset \| fePointLight \| feSpecularLighting \| feSpotLight \| feTile \| feTurbulence \| filter \| foreignObject \| g \| image \| line \| linearGradient \| marker \| mask \| metadata \| mpath \| path \| pattern \| polygon \| polyline \| radialGradient \| rect \| set \| stop \| switch \| text \| textPath \| tspan \| use \| view \| ComponentClass<any, any> \| FunctionComponent<any>` | No | `-` | - |
+| `aspectRatio` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
+| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `borderColor` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
+| `borderEndWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderStartWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `borderTopLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `bordered` | `boolean` | No | `-` | Add a border around all sides of the box. |
+| `borderedBottom` | `boolean` | No | `-` | Add a border to the bottom side of the box. |
+| `borderedEnd` | `boolean` | No | `-` | Add a border to the trailing side of the box. |
+| `borderedHorizontal` | `boolean` | No | `-` | Add a border to the leading and trailing sides of the box. |
+| `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
+| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
+| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
+| `bottom` | `ResponsiveProp<Bottom<string \| number>>` | No | `-` | - |
+| `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
+| `columnGap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `dangerouslySetBackground` | `string` | No | `-` | - |
+| `disableRandomRectWidth` | `boolean` | No | `-` | Disables randomization of rectangle shape width. |
+| `display` | `ResponsiveProp<grid \| revert \| none \| block \| inline \| inline-block \| flex \| inline-flex \| inline-grid \| contents \| flow-root \| list-item>` | No | `-` | - |
+| `elevation` | `0 \| 1 \| 2` | No | `-` | - |
+| `flexBasis` | `ResponsiveProp<FlexBasis<string \| number>>` | No | `-` | - |
+| `flexDirection` | `ResponsiveProp<column \| row \| row-reverse \| column-reverse>` | No | `-` | - |
+| `flexGrow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
+| `flexShrink` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
+| `flexWrap` | `ResponsiveProp<nowrap \| wrap \| wrap-reverse>` | No | `-` | - |
+| `font` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
+| `fontFamily` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
+| `fontSize` | `ResponsiveProp<FontSize \| inherit>` | No | `-` | - |
+| `fontWeight` | `ResponsiveProp<FontWeight \| inherit>` | No | `-` | - |
+| `gap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `grid` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
+| `gridArea` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `gridAutoColumns` | `ResponsiveProp<GridAutoColumns<string \| number>>` | No | `-` | - |
+| `gridAutoFlow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| row \| column \| dense` | No | `-` | - |
+| `gridAutoRows` | `ResponsiveProp<GridAutoRows<string \| number>>` | No | `-` | - |
+| `gridColumn` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `gridColumnEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `gridColumnStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `gridRow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `gridRowEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `gridRowStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `gridTemplate` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
+| `gridTemplateAreas` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
+| `gridTemplateColumns` | `ResponsiveProp<GridTemplateColumns<string \| number>>` | No | `-` | - |
+| `gridTemplateRows` | `ResponsiveProp<GridTemplateRows<string \| number>>` | No | `-` | - |
+| `justifyContent` | `ResponsiveProp<left \| right \| center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| space-between \| space-around \| space-evenly>` | No | `-` | - |
+| `left` | `ResponsiveProp<Left<string \| number>>` | No | `-` | - |
+| `lineHeight` | `ResponsiveProp<LineHeight \| inherit>` | No | `-` | - |
+| `margin` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `marginBottom` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `marginEnd` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `marginStart` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `marginTop` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `marginX` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `marginY` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `maxHeight` | `ResponsiveProp<MaxHeight<string \| number>>` | No | `-` | - |
+| `maxWidth` | `ResponsiveProp<MaxWidth<string \| number>>` | No | `-` | - |
+| `minHeight` | `ResponsiveProp<MinHeight<string \| number>>` | No | `-` | - |
+| `minWidth` | `ResponsiveProp<MinWidth<string \| number>>` | No | `-` | - |
+| `opacity` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
+| `overflow` | `ResponsiveProp<hidden \| auto \| visible \| clip \| scroll>` | No | `-` | - |
+| `padding` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `paddingBottom` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `paddingEnd` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `paddingStart` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `paddingTop` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `paddingX` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `paddingY` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `percentage` | `boolean` | No | `-` | Convert width to a percentage. |
+| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
+| `position` | `ResponsiveProp<fixed \| static \| relative \| absolute \| sticky>` | No | `-` | - |
+| `rectWidthVariant` | `number` | No | `-` | When shape is a rectangle, creates a variant with deterministic width. Variants map to a predetermined set of width values, which are cycled through repeatedly when the set is exhausted. |
+| `ref` | `any` | No | `-` | - |
+| `right` | `ResponsiveProp<Right<string \| number>>` | No | `-` | - |
+| `rowGap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `shape` | `rectangle \| circle \| squircle \| square \| hexagon` | No | `rectangle` | - |
+| `style` | `CSSProperties` | 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 |
+| `textAlign` | `ResponsiveProp<center \| start \| end \| justify>` | No | `-` | - |
+| `textDecoration` | `ResponsiveProp<none \| underline \| overline \| line-through \| underline overline \| underline double>` | No | `-` | - |
+| `textTransform` | `ResponsiveProp<capitalize \| lowercase \| none \| uppercase>` | No | `-` | - |
+| `top` | `ResponsiveProp<Top<string \| number>>` | No | `-` | - |
+| `transform` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
+| `userSelect` | `ResponsiveProp<text \| none \| auto \| all>` | No | `-` | - |
+| `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
+| `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+
+