@coinbase/cds-mcp-server 8.17.1 → 8.17.3

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

@@ -0,0 +1,320 @@
+# UpsellCard
+
+A card component for promoting new features, products, or actions.
+
+## Import
+
+```jsx
+import { UpsellCard } from '@coinbase/cds-web/cards/UpsellCard'
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `title` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | Text or ReactNode to be displayed in TextHeadline |
+| `action` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Node to display for the card action |
+| `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 | `'bgPrimaryWash'` | Background color for the card. |
+| `dangerouslySetBackground` | `string` | No | `-` | - |
+| `description` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Content to be displayed below the title |
+| `media` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Remote Image or other node with media content. |
+| `onActionPress` | `MouseEventHandler<HTMLButtonElement>` | No | `-` | Callback fired when the action button is pressed |
+| `onClick` | `MouseEventHandler<HTMLButtonElement>` | No | `-` | Callback fired when the card is pressed |
+| `onDismissPress` | `MouseEventHandler<HTMLButtonElement>` | No | `-` | Callback fired when the dismiss button is pressed |
+| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
+
+
+## Examples
+
+### General Upsell
+
+Utilize our Primary Wash Upsell for general information and non-urgent promotions. Its versatile design is perfect for a broad range of content, providing a subtle yet effective approach to engage users. It's also the only Upsell Card that supports Pictogram Illustrations.
+
+```jsx live
+function Example() {
+  function NoopFn() {
+    console.log('pressed');
+  }
+  return (
+    <VStack minHeight={300} padding={2} alignItems="center" justifyContent="center">
+      <UpsellCard
+        title="Recurring Buy"
+        description="Want to add funds to your card every week or month?"
+        action={'Get started'}
+        onActionPress={NoopFn}
+        onDismissPress={NoopFn}
+        media={
+          <Box position="relative" right={24} bottom={6}>
+            <Pictogram name="recurringPurchases" dimension="64x64" />
+          </Box>
+        }
+      />
+    </VStack>
+  );
+}
+```
+
+### Feature Upsell
+
+Ideal for highlighting Coinbase tools, innovative features, and unique functionalities. Choose from our palette of four distinct colors to make your Feature Upsell stand out. Each color is carefully selected to grab attention while aligning with the specific nature of the feature being promoted
+
+```jsx live
+function Example() {
+  const { colorScheme } = useTheme();
+  function NoopFn() {
+    console.log('pressed');
+  }
+  const image = (
+    <Box position="relative" left={16} top={12}>
+      <RemoteImage source="/img/feature.png" height={174} />
+    </Box>
+  );
+  const cards = [
+    {
+      title: 'Up to 3.29% APR on ETHs',
+      description: 'Earn staking rewards on ETH by holding it on Coinbase',
+      action: 'Start earning',
+      onActionPress: NoopFn,
+      onDismissPress: NoopFn,
+      media: image,
+      dangerouslySetBackground: 'rgb(var(--purple70))',
+    },
+    {
+      title: 'Up to 3.29% APR on ETHs',
+      description: 'Earn staking rewards on ETH by holding it on Coinbase',
+      action: 'Start earning',
+      onActionPress: NoopFn,
+      onDismissPress: NoopFn,
+      media: image,
+      dangerouslySetBackground: 'rgb(var(--teal50))',
+    },
+    {
+      title: 'Up to 3.29% APR on ETHs',
+      description: 'Earn staking rewards on ETH by holding it on Coinbase',
+      action: 'Start earning',
+      onActionPress: NoopFn,
+      onDismissPress: NoopFn,
+      media: image,
+      dangerouslySetBackground: 'rgb(var(--blue80))',
+    },
+    {
+      title: 'Up to 3.29% APR on ETHs',
+      description: 'Earn staking rewards on ETH by holding it on Coinbase',
+      action: 'Start earning',
+      onActionPress: NoopFn,
+      onDismissPress: NoopFn,
+      media: image,
+      dangerouslySetBackground: 'rgb(var(--indigo70))',
+    },
+  ];
+  return (
+    <VStack minHeight={300} padding={2} alignItems="center" justifyContent="center" gap={1}>
+      {cards.map((card) => {
+        return (
+          <UpsellCard
+            {...card}
+            title={
+              <TextHeadline color="fgInverse" as="h3">
+                {card.title}
+              </TextHeadline>
+            }
+            description={
+              <TextLabel2 as="p" numberOfLines={3} color="fgInverse">
+                {card.description}
+              </TextLabel2>
+            }
+          />
+        );
+      })}
+    </VStack>
+  );
+}
+```
+
+### Community Upsell
+
+Designed for community-focused upsells, our Community Upsell uses vibrant yellow and purple hues. These energetic colors are excellent for sparking enthusiasm and encouraging active participation, fostering a sense of community engagement
+
+```jsx live
+function Example() {
+  const { colorScheme } = useTheme();
+  function NoopFn() {
+    console.log('pressed');
+  }
+  const cards = [
+    {
+      title: 'Join the community',
+      description: 'Chat with other devs in our Discord community',
+      action: 'Start earning',
+      onActionPress: NoopFn,
+      onDismissPress: NoopFn,
+      media: (
+        <Box position="relative" left={16} top={4}>
+          <RemoteImage source="/img/community.png" height={174} />
+        </Box>
+      ),
+      dangerouslySetBackground: 'rgb(var(--teal70))',
+    },
+    {
+      title: 'Join the community',
+      description: 'Chat with other devs in our Discord community',
+      action: 'Start earning',
+      onActionPress: NoopFn,
+      onDismissPress: NoopFn,
+      media: (
+        <Box position="relative" left={16} top={4}>
+          <RemoteImage source="/img/radial.png" height={174} />
+        </Box>
+      ),
+      dangerouslySetBackground: 'rgb(var(--purple70))',
+    },
+  ];
+  return (
+    <VStack minHeight={300} padding={2} alignItems="center" justifyContent="center" gap={1}>
+      {cards.map((card) => {
+        return (
+          <UpsellCard
+            {...card}
+            title={
+              <TextHeadline color="fgInverse" as="h3">
+                {card.title}
+              </TextHeadline>
+            }
+            description={
+              <TextLabel2 as="p" numberOfLines={3} color="fgInverse">
+                {card.description}
+              </TextLabel2>
+            }
+          />
+        );
+      })}
+    </VStack>
+  );
+}
+```
+
+### Product Upsell
+
+Optimal for business products, security features, and functionalities that emphasize trust and reliability, such as Coinbase One and Coinbase Card. Our blue and black card options symbolize stability, trustworthiness, and professionalism, aligning with the core values of your product offerings
+
+```jsx live
+function Example() {
+  const { colorScheme } = useTheme();
+  function NoopFn() {
+    console.log('pressed');
+  }
+  const cards = [
+    {
+      title: 'Coinbase One offer',
+      description: 'Use code NOV60 when you  sign up for Coinbase One',
+      action: 'Get 60 days free',
+      onActionPress: NoopFn,
+      onDismissPress: NoopFn,
+      media: (
+        <Box position="relative" left={16} top={0}>
+          <RemoteImage source="/img/marketing.png" height={174} />
+        </Box>
+      ),
+      dangerouslySetBackground: 'rgb(var(--blue80))',
+    },
+    {
+      title: 'Coinbase Card',
+      description: 'Spend USDC to get rewards with our Visa® debit card',
+      action: 'Get started',
+      onActionPress: NoopFn,
+      onDismissPress: NoopFn,
+      media: (
+        <Box position="relative" left={16} top={0}>
+          <RemoteImage source="/img/object.png" height={174} />
+        </Box>
+      ),
+      dangerouslySetBackground: 'rgb(var(--gray100))',
+    },
+  ];
+  return (
+    <VStack minHeight={300} padding={2} alignItems="center" justifyContent="center" gap={1}>
+      {cards.map((card) => {
+        return (
+          <UpsellCard
+            {...card}
+            title={
+              <TextHeadline color="fgInverse" as="h3">
+                {card.title}
+              </TextHeadline>
+            }
+            description={
+              <TextLabel2 as="p" numberOfLines={3} color="fgInverse">
+                {card.description}
+              </TextLabel2>
+            }
+          />
+        );
+      })}
+    </VStack>
+  );
+}
+```
+
+### News Upsell
+
+Our News Upsell is specifically tailored for company announcements and policy updates. Its design ensures that important information is conveyed clearly and prominently, ensuring users stays well-informed about the latest developments.
+
+```jsx live
+function Example() {
+  const { colorScheme } = useTheme();
+  function NoopFn() {
+    console.log('pressed');
+  }
+  const cards = [
+    {
+      title: 'Help defend crypto in America',
+      description: 'Help us keep crypto in America with a single click',
+      action: 'Join the fight',
+      onActionPress: NoopFn,
+      onDismissPress: NoopFn,
+      media: (
+        <Box position="relative" left={30} top={0}>
+          <RemoteImage source="/img/place.png" height={196} />
+        </Box>
+      ),
+      dangerouslySetBackground: 'rgb(var(--gray100))',
+    },
+    {
+      title: 'Help defend crypto in America',
+      description: 'Help us keep crypto in America with a single click',
+      action: 'Join the fight',
+      onActionPress: NoopFn,
+      onDismissPress: NoopFn,
+      media: (
+        <Box position="relative" left={30} top={0}>
+          <RemoteImage source="/img/place.png" height={196} />
+        </Box>
+      ),
+      dangerouslySetBackground: 'rgb(var(--indigo70))',
+    },
+  ];
+  return (
+    <VStack minHeight={300} padding={2} alignItems="center" justifyContent="center" gap={1}>
+      {cards.map((card) => {
+        return (
+          <UpsellCard
+            {...card}
+            title={
+              <TextHeadline color="fgInverse" as="h3">
+                {card.title}
+              </TextHeadline>
+            }
+            description={
+              <TextLabel2 as="p" numberOfLines={3} color="fgInverse">
+                {card.description}
+              </TextLabel2>
+            }
+          />
+        );
+      })}
+    </VStack>
+  );
+}
+```
+
+

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

@@ -0,0 +1,225 @@
+# VStack
+
+A Box with flexDirection="column" set by default.
+
+## Import
+
+```jsx
+import { VStack } from '@coinbase/cds-web/layout/VStack'
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `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 | `-` | - |
+| `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 | `column` | - |
+| `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 | `-` | - |
+| `height` | `ResponsiveProp<Height<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 | `-` | - |
+| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
+| `position` | `ResponsiveProp<fixed \| static \| relative \| absolute \| sticky>` | No | `-` | - |
+| `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 | `-` | - |
+| `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 | `-` | - |
+| `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
+| `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+
+
+## Examples
+
+HStack component uses [flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) to lay content out in a column.
+
+**On mobile only** HStack is essentially the same component as [Box](/components/layout/Box), because Box by default has [flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) enabled (`display: flex`) and takes `column` as its initial `flex-direction` value.
+
+You should use VStack when:
+
+- you want to lay content out in rows that are sized to their content (height only, by default each child will fill the width of the VStack)
+- you want to add gaps between columns
+- you want to lay content out in columns that fill the available space within the parent container
+- you need columns of proportionate size to each other (also known as a ratio-based layout)
+
+### Rows Sized to Content
+
+```jsx live
+<VStack gap={1}>
+  <Box height={100} bordered>
+    I am 100px tall
+  </Box>
+  <Box height={200} bordered>
+    I am 200px tall
+  </Box>
+  <Box bordered>I am as tall as my content</Box>
+</VStack>
+```
+
+### Rows with Gaps
+
+```jsx live
+<VStack gap={1}>
+  <Box gap={3} background="bgAlternate">
+    First
+  </Box>
+  <Box gap={3} background="bgAlternate">
+    Second
+  </Box>
+  <Box gap={3} background="bgAlternate">
+    Third
+  </Box>
+</VStack>
+```
+
+### Rows that Fill the Available Space
+
+```jsx live
+<Box height={200}>
+  <VStack gap={3} flexGrow={1} background="bgAlternate">
+    I will fill the entire width and height of my parent
+  </VStack>
+</Box>
+```
+
+### Rows that Have Proportionate Sizes
+
+```jsx live
+<VStack gap={1} height={600}>
+  <Box gap={3} flexGrow={1} background="bgAlternate">
+    First
+  </Box>
+  <Box gap={3} flexGrow={2} background="bgAlternate">
+    Second
+  </Box>
+  <Box gap={3} flexGrow={3} background="bgAlternate">
+    Third
+  </Box>
+</VStack>
+```
+
+### A11y
+
+Has the same accessibility requirements as [Box](/components/layout/Box#a11y).
+
+### Responsive Styles
+
+**Web only** You can create responsive layouts by passing a configuration object to each supported property of VStack and specify unique styles for phones, tablets, or desktops.
+
+Please note, there are no default responsive styles for VStack. This is an additive feature that you will need to configure yourself.
+
+#### Supported Properties
+
+- Padding
+- Margin
+- Gap
+- Flex styles (justify content, align content, align items, align self, flex direction, and flex wrap)
+- Display
+- Visibility
+
+#### Usage
+
+```jsx live
+function ResponsiveVStack() {
+  return (
+    <VStack
+      padding={{ base: 4, tablet: 3, desktop: 2 }}
+      gap={{ base: 0.5, tablet: 2, desktop: 3 }}
+      justifyContent={{ base: 'flex-end', tablet: 'flex-start', desktop: 'center' }}
+      alignItems={{ base: 'flex-end', tablet: 'flex-start', desktop: 'center' }}
+    >
+      <HStack background="bgAlternate" padding={1}>
+        <Text as="p">First</Text>
+      </HStack>
+      <HStack background="bgSecondary" padding={1}>
+        <Text as="p">Second</Text>
+      </HStack>
+      <HStack background="bgOverlay" padding={1}>
+        <Text as="p">Third</Text>
+      </HStack>
+    </VStack>
+  );
+}
+```
+
+