From 0e9ad7b99e7a40c04d852b37ab82d0a3c6d72d08 Mon Sep 17 00:00:00 2001
From: Alex Page <hi@alexpage.dev>
Date: Wed, 12 Apr 2023 15:54:18 +1000
Subject: [PATCH 1/9] Rename AlphaStack to VerticalStack

---
 .../AccountConnection/AccountConnection.tsx   |  6 +--
 .../AlphaCard/AlphaCard.stories.tsx           | 26 ++++-----
 .../components/FilterPill/FilterPill.tsx      |  6 +--
 .../src/components/AlphaStack/index.ts        |  1 -
 .../src/components/Banner/Banner.stories.tsx  |  6 +--
 .../src/components/Box/Box.stories.tsx        |  6 +--
 .../src/components/ChoiceList/ChoiceList.tsx  | 10 ++--
 .../components/Divider/Divider.stories.tsx    |  6 +--
 .../components/DropZone/DropZone.stories.tsx  | 38 ++++++-------
 .../src/components/DropZone/DropZone.tsx      |  6 +--
 .../components/FileUpload/FileUpload.tsx      | 10 ++--
 .../src/components/EmptyState/EmptyState.tsx  | 10 ++--
 polaris-react/src/components/Grid/Grid.tsx    |  1 -
 .../components/Grid/components/Cell/Cell.tsx  |  1 -
 .../src/components/Icon/Icon.stories.tsx      |  6 +--
 .../SettingToggle/SettingToggle.stories.tsx   | 26 ++++-----
 .../components/SkeletonPage/SkeletonPage.tsx  | 10 ++--
 polaris-react/src/components/Stack/Stack.tsx  |  4 +-
 .../components/Stack/components/Item/Item.tsx |  4 +-
 .../TextContainer/TextContainer.tsx           |  2 +-
 .../VerticalStack.scss}                       |  2 +-
 .../VerticalStack.stories.tsx}                | 54 +++++++++----------
 .../VerticalStack.tsx}                        | 10 ++--
 .../src/components/VerticalStack/index.ts     |  1 +
 .../tests/VerticalStack.tsx}                  | 14 ++---
 polaris-react/src/index.ts                    |  4 +-
 polaris.shopify.com/CHANGELOG.md              | 28 +++++-----
 .../components/deprecated/text-container.md   |  2 +-
 .../components/layout-and-structure/inline.md |  2 +-
 .../layout-and-structure/legacy-stack.md      |  2 +-
 .../{alpha-stack.md => vertical-stack.md}     | 10 ++--
 .../app-settings-layout/variants/default.md   | 22 ++++----
 .../date-picking/variants/date-range.md       |  6 +--
 .../date-picking/variants/single-date.md      |  4 +-
 .../variants/default.md                       | 26 ++++-----
 .../content/patterns/variant.md.template      |  2 +-
 .../examples/bleed-specific-direction.tsx     |  6 +--
 .../pages/examples/box-with-padding.tsx       |  6 +--
 .../examples/divider-with-border-color.tsx    |  6 +--
 ...ensed-with-views-search-filter-sorting.tsx |  6 +--
 .../examples/index-table-small-screen.tsx     |  6 +--
 .../pages/examples/inline-with-align.tsx      |  6 +--
 .../examples/inline-with-block-align.tsx      |  6 +--
 .../pages/examples/inline-with-gap.tsx        |  6 +--
 ...tting-toggle-with-primitive-components.tsx | 14 ++---
 ...x => veritcal-stack-with-inline-align.tsx} | 22 ++++----
 ...=> vertical-card-with-varying-padding.tsx} |  6 +--
 ...lign.tsx => vertical-stack-with-align.tsx} | 18 +++----
 ...th-gap.tsx => vertical-stack-with-gap.tsx} | 10 ++--
 .../src/components/TipBanner/TipBanner.tsx    |  6 +--
 50 files changed, 248 insertions(+), 250 deletions(-)
 delete mode 100644 polaris-react/src/components/AlphaStack/index.ts
 rename polaris-react/src/components/{AlphaStack/AlphaStack.scss => VerticalStack/VerticalStack.scss} (97%)
 rename polaris-react/src/components/{AlphaStack/AlphaStack.stories.tsx => VerticalStack/VerticalStack.stories.tsx} (79%)
 rename polaris-react/src/components/{AlphaStack/AlphaStack.tsx => VerticalStack/VerticalStack.tsx} (89%)
 create mode 100644 polaris-react/src/components/VerticalStack/index.ts
 rename polaris-react/src/components/{AlphaStack/tests/AlphaStack.test.tsx => VerticalStack/tests/VerticalStack.tsx} (75%)
 rename polaris.shopify.com/content/components/layout-and-structure/{alpha-stack.md => vertical-stack.md} (74%)
 rename polaris.shopify.com/pages/examples/{alpha-stack-with-inline-align.tsx => veritcal-stack-with-inline-align.tsx} (76%)
 rename polaris.shopify.com/pages/examples/{alpha-card-with-varying-padding.tsx => vertical-card-with-varying-padding.tsx} (90%)
 rename polaris.shopify.com/pages/examples/{alpha-stack-with-align.tsx => vertical-stack-with-align.tsx} (82%)
 rename polaris.shopify.com/pages/examples/{alpha-stack-with-gap.tsx => vertical-stack-with-gap.tsx} (78%)

diff --git a/polaris-react/src/components/AccountConnection/AccountConnection.tsx b/polaris-react/src/components/AccountConnection/AccountConnection.tsx
index 67eb3117682..0f4af011aff 100644
--- a/polaris-react/src/components/AccountConnection/AccountConnection.tsx
+++ b/polaris-react/src/components/AccountConnection/AccountConnection.tsx
@@ -8,7 +8,7 @@ import {AlphaCard} from '../AlphaCard';
 import {Box} from '../Box';
 import {Inline} from '../Inline';
 import {Text} from '../Text';
-import {AlphaStack} from '../AlphaStack';
+import {VerticalStack} from '../VerticalStack';
 
 export interface AccountConnectionProps {
   /** Content to display as title */
@@ -73,10 +73,10 @@ export function AccountConnection({
       <SettingAction action={actionElement}>
         <Inline gap="4">
           {avatarMarkup}
-          <AlphaStack gap="2">
+          <VerticalStack gap="2">
             {titleMarkup}
             {detailsMarkup}
-          </AlphaStack>
+          </VerticalStack>
         </Inline>
       </SettingAction>
       {termsOfServiceMarkup}
diff --git a/polaris-react/src/components/AlphaCard/AlphaCard.stories.tsx b/polaris-react/src/components/AlphaCard/AlphaCard.stories.tsx
index fd06c277dde..66501686962 100644
--- a/polaris-react/src/components/AlphaCard/AlphaCard.stories.tsx
+++ b/polaris-react/src/components/AlphaCard/AlphaCard.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import type {ComponentMeta} from '@storybook/react';
 import {
   AlphaCard,
-  AlphaStack,
+  VerticalStack,
   Bleed,
   Box,
   Divider,
@@ -17,12 +17,12 @@ export default {
 export function Default() {
   return (
     <AlphaCard>
-      <AlphaStack gap="5">
+      <VerticalStack gap="5">
         <Text as="h3" variant="headingMd">
           Online store dashboard
         </Text>
         <p>View a summary of your online store’s performance.</p>
-      </AlphaStack>
+      </VerticalStack>
     </AlphaCard>
   );
 }
@@ -30,12 +30,12 @@ export function Default() {
 export function WithBackgroundSubdued() {
   return (
     <AlphaCard background="bg-subdued">
-      <AlphaStack gap="5">
+      <VerticalStack gap="5">
         <Text as="h3" variant="headingMd">
           Online store dashboard
         </Text>
         <p>View a summary of your online store’s performance.</p>
-      </AlphaStack>
+      </VerticalStack>
     </AlphaCard>
   );
 }
@@ -43,12 +43,12 @@ export function WithBackgroundSubdued() {
 export function WithBorderRadiusRoundedAbove() {
   return (
     <AlphaCard roundedAbove="sm">
-      <AlphaStack gap="5">
+      <VerticalStack gap="5">
         <Text as="h3" variant="headingMd">
           Online store dashboard
         </Text>
         <p>View a summary of your online store’s performance.</p>
-      </AlphaStack>
+      </VerticalStack>
     </AlphaCard>
   );
 }
@@ -56,12 +56,12 @@ export function WithBorderRadiusRoundedAbove() {
 export function WithResponsivePadding() {
   return (
     <AlphaCard padding={{xs: '5', sm: '6', md: '8'}} roundedAbove="sm">
-      <AlphaStack gap={{xs: '4', sm: '5'}}>
+      <VerticalStack gap={{xs: '4', sm: '5'}}>
         <Text as="h3" variant="headingMd">
           Online store dashboard
         </Text>
         <p>View a summary of your online store’s performance.</p>
-      </AlphaStack>
+      </VerticalStack>
     </AlphaCard>
   );
 }
@@ -69,7 +69,7 @@ export function WithResponsivePadding() {
 export function WithSubduedSection() {
   return (
     <AlphaCard roundedAbove="sm">
-      <AlphaStack gap="5">
+      <VerticalStack gap="5">
         <Text as="h3" variant="headingMd">
           Staff accounts
         </Text>
@@ -79,14 +79,14 @@ export function WithSubduedSection() {
             <List.Item>Ezequiel Manno</List.Item>
           </List>
         </Box>
-      </AlphaStack>
+      </VerticalStack>
       <Bleed
         marginBlockEnd={{xs: '4', sm: '5'}}
         marginInline={{xs: '4', sm: '5'}}
       >
         <Divider />
         <Box background="bg-subdued" padding={{xs: '4', sm: '5'}}>
-          <AlphaStack gap="2">
+          <VerticalStack gap="2">
             <Text variant="headingSm" as="h3">
               Deactivated staff accounts
             </Text>
@@ -94,7 +94,7 @@ export function WithSubduedSection() {
               <List.Item>Felix Crafford</List.Item>
               <List.Item>Ezequiel Manno</List.Item>
             </List>
-          </AlphaStack>
+          </VerticalStack>
         </Box>
       </Bleed>
     </AlphaCard>
diff --git a/polaris-react/src/components/AlphaFilters/components/FilterPill/FilterPill.tsx b/polaris-react/src/components/AlphaFilters/components/FilterPill/FilterPill.tsx
index 4d0cb167c8c..d69144fb506 100644
--- a/polaris-react/src/components/AlphaFilters/components/FilterPill/FilterPill.tsx
+++ b/polaris-react/src/components/AlphaFilters/components/FilterPill/FilterPill.tsx
@@ -5,7 +5,7 @@ import {useI18n} from '../../../../utilities/i18n';
 import {useToggle} from '../../../../utilities/use-toggle';
 import {Popover} from '../../../Popover';
 import {Button} from '../../../Button';
-import {AlphaStack} from '../../../AlphaStack';
+import {VerticalStack} from '../../../VerticalStack';
 import {Icon} from '../../../Icon';
 import {Text} from '../../../Text';
 import {Inline} from '../../../Inline';
@@ -174,10 +174,10 @@ export function FilterPill({
       >
         <div className={styles.PopoverWrapper}>
           <Popover.Section>
-            <AlphaStack gap="1">
+            <VerticalStack gap="1">
               {filter}
               {clearButtonMarkup}
-            </AlphaStack>
+            </VerticalStack>
           </Popover.Section>
         </div>
       </Popover>
diff --git a/polaris-react/src/components/AlphaStack/index.ts b/polaris-react/src/components/AlphaStack/index.ts
deleted file mode 100644
index 832515641aa..00000000000
--- a/polaris-react/src/components/AlphaStack/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './AlphaStack';
diff --git a/polaris-react/src/components/Banner/Banner.stories.tsx b/polaris-react/src/components/Banner/Banner.stories.tsx
index bfefc6826f1..c2e02e3915f 100644
--- a/polaris-react/src/components/Banner/Banner.stories.tsx
+++ b/polaris-react/src/components/Banner/Banner.stories.tsx
@@ -1,7 +1,7 @@
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 import type {ComponentMeta} from '@storybook/react';
 import {
-  AlphaStack,
+  VerticalStack,
   Banner,
   Button,
   LegacyCard,
@@ -193,7 +193,7 @@ export function InACard() {
 export function WithEndJustifiedContent() {
   return (
     <Banner status="critical">
-      <AlphaStack gap="1">
+      <VerticalStack gap="1">
         <Inline gap="4" align="space-between">
           <Text variant="headingMd" fontWeight="semibold" as="h3">
             Deployment failed in 5min
@@ -203,7 +203,7 @@ export function WithEndJustifiedContent() {
           </Link>
         </Inline>
         <p>This order was archived on March 7, 2017 at 3:12pm EDT.</p>
-      </AlphaStack>
+      </VerticalStack>
     </Banner>
   );
 }
diff --git a/polaris-react/src/components/Box/Box.stories.tsx b/polaris-react/src/components/Box/Box.stories.tsx
index 0c5108f40c0..47df1d71ca4 100644
--- a/polaris-react/src/components/Box/Box.stories.tsx
+++ b/polaris-react/src/components/Box/Box.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {AlphaStack, Box, Icon} from '@shopify/polaris';
+import {VerticalStack, Box, Icon} from '@shopify/polaris';
 import {PaintBrushMajor} from '@shopify/polaris-icons';
 
 export default {
@@ -33,7 +33,7 @@ export function WithBorderRadius() {
 
 export function WithResponsivePadding() {
   return (
-    <AlphaStack gap="4">
+    <VerticalStack gap="4">
       <Box background="bg" padding={{xs: '2', sm: '8'}} border="dark">
         <Icon source={PaintBrushMajor} color="base" />
       </Box>
@@ -64,6 +64,6 @@ export function WithResponsivePadding() {
       <Box background="bg" paddingInlineEnd={{xs: '4', sm: '10'}} border="dark">
         <Icon source={PaintBrushMajor} color="base" />
       </Box>
-    </AlphaStack>
+    </VerticalStack>
   );
 }
diff --git a/polaris-react/src/components/ChoiceList/ChoiceList.tsx b/polaris-react/src/components/ChoiceList/ChoiceList.tsx
index 2ef38e364a5..47a17c6cc71 100644
--- a/polaris-react/src/components/ChoiceList/ChoiceList.tsx
+++ b/polaris-react/src/components/ChoiceList/ChoiceList.tsx
@@ -5,7 +5,7 @@ import type {Error} from '../../types';
 import {Checkbox} from '../Checkbox';
 import {RadioButton} from '../RadioButton';
 import {InlineError, errorTextID} from '../InlineError';
-import {AlphaStack} from '../AlphaStack';
+import {VerticalStack} from '../VerticalStack';
 import {Box} from '../Box';
 import {Bleed} from '../Bleed';
 
@@ -132,18 +132,18 @@ export function ChoiceList({
   );
 
   return (
-    <AlphaStack
+    <VerticalStack
       as="fieldset"
       gap={{xs: '4', md: '0'}}
       aria-invalid={error != null}
       id={finalName}
     >
       {titleMarkup}
-      <AlphaStack as="ul" gap={{xs: '4', md: '0'}}>
+      <VerticalStack as="ul" gap={{xs: '4', md: '0'}}>
         {choicesMarkup}
-      </AlphaStack>
+      </VerticalStack>
       {errorMarkup}
-    </AlphaStack>
+    </VerticalStack>
   );
 }
 
diff --git a/polaris-react/src/components/Divider/Divider.stories.tsx b/polaris-react/src/components/Divider/Divider.stories.tsx
index c0e839d029f..cc9d8853b2c 100644
--- a/polaris-react/src/components/Divider/Divider.stories.tsx
+++ b/polaris-react/src/components/Divider/Divider.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {AlphaStack, Divider, Text} from '@shopify/polaris';
+import {VerticalStack, Divider, Text} from '@shopify/polaris';
 
 export default {
   component: Divider,
@@ -12,7 +12,7 @@ export function Default() {
 
 export function WithBorderStyles() {
   return (
-    <AlphaStack gap="5">
+    <VerticalStack gap="5">
       <Text as="h1" variant="headingXs">
         Default
       </Text>
@@ -29,6 +29,6 @@ export function WithBorderStyles() {
         Transparent
       </Text>
       <Divider borderColor="transparent" />
-    </AlphaStack>
+    </VerticalStack>
   );
 }
diff --git a/polaris-react/src/components/DropZone/DropZone.stories.tsx b/polaris-react/src/components/DropZone/DropZone.stories.tsx
index dca88c81107..e73d89c278e 100644
--- a/polaris-react/src/components/DropZone/DropZone.stories.tsx
+++ b/polaris-react/src/components/DropZone/DropZone.stories.tsx
@@ -7,7 +7,7 @@ import {
   DropZone,
   List,
   Page,
-  AlphaStack,
+  VerticalStack,
   Thumbnail,
   Inline,
 } from '@shopify/polaris';
@@ -31,7 +31,7 @@ export function Default() {
   const fileUpload = !files.length && <DropZone.FileUpload />;
   const uploadedFiles = files.length > 0 && (
     <div style={{padding: '0'}}>
-      <AlphaStack gap="4">
+      <VerticalStack gap="4">
         {files.map((file, index) => (
           <Inline gap="4" align="center" key={index}>
             <Thumbnail
@@ -52,7 +52,7 @@ export function Default() {
             </div>
           </Inline>
         ))}
-      </AlphaStack>
+      </VerticalStack>
     </div>
   );
 
@@ -87,7 +87,7 @@ export function WithImageFileUpload() {
 
   const fileUpload = !files.length && <DropZone.FileUpload />;
   const uploadedFiles = files.length > 0 && (
-    <AlphaStack gap="4">
+    <VerticalStack gap="4">
       {files.map((file, index) => (
         <Inline gap="4" align="center" key={index}>
           <Thumbnail
@@ -104,7 +104,7 @@ export function WithImageFileUpload() {
           </div>
         </Inline>
       ))}
-    </AlphaStack>
+    </VerticalStack>
   );
 
   const errorMessage = hasError && (
@@ -123,13 +123,13 @@ export function WithImageFileUpload() {
   );
 
   return (
-    <AlphaStack gap="4">
+    <VerticalStack gap="4">
       {errorMessage}
       <DropZone accept="image/*" type="image" onDrop={handleDrop}>
         {uploadedFiles}
         {fileUpload}
       </DropZone>
-    </AlphaStack>
+    </VerticalStack>
   );
 }
 
@@ -186,7 +186,7 @@ export function WithDropOnPage() {
   const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];
 
   const uploadedFiles = files.length > 0 && (
-    <AlphaStack gap="4">
+    <VerticalStack gap="4">
       {files.map((file, index) => (
         <Inline gap="4" align="center" key={index}>
           <Thumbnail
@@ -207,7 +207,7 @@ export function WithDropOnPage() {
           </div>
         </Inline>
       ))}
-    </AlphaStack>
+    </VerticalStack>
   );
 
   const uploadMessage = !uploadedFiles && <DropZone.FileUpload />;
@@ -248,7 +248,7 @@ export function AcceptsOnlySVGFiles() {
   );
 
   const uploadedFiles = files.length > 0 && (
-    <AlphaStack gap="4">
+    <VerticalStack gap="4">
       {files.map((file, index) => (
         <Inline gap="4" align="center" key={index}>
           <Thumbnail
@@ -265,7 +265,7 @@ export function AcceptsOnlySVGFiles() {
           </div>
         </Inline>
       ))}
-    </AlphaStack>
+    </VerticalStack>
   );
 
   const errorMessage = hasError && (
@@ -284,7 +284,7 @@ export function AcceptsOnlySVGFiles() {
   );
 
   return (
-    <AlphaStack gap="4">
+    <VerticalStack gap="4">
       {errorMessage}
       <DropZone
         accept="image/svg+xml"
@@ -294,7 +294,7 @@ export function AcceptsOnlySVGFiles() {
       >
         {uploadedFiles}
       </DropZone>
-    </AlphaStack>
+    </VerticalStack>
   );
 }
 
@@ -311,7 +311,7 @@ export function Nested() {
 
   const fileUpload = !files.length && <DropZone.FileUpload />;
   const uploadedFiles = files.length > 0 && (
-    <AlphaStack gap="4">
+    <VerticalStack gap="4">
       {files.map((file, index) => (
         <Inline gap="4" align="center" key={index}>
           <Thumbnail
@@ -332,7 +332,7 @@ export function Nested() {
           </div>
         </Inline>
       ))}
-    </AlphaStack>
+    </VerticalStack>
   );
 
   return (
@@ -383,7 +383,7 @@ export function WithCustomFileUploadText() {
   );
 
   const uploadedFiles = files.length > 0 && (
-    <AlphaStack gap="4">
+    <VerticalStack gap="4">
       {files.map((file, index) => (
         <Inline gap="4" align="center" key={index}>
           <Thumbnail
@@ -404,7 +404,7 @@ export function WithCustomFileUploadText() {
           </div>
         </Inline>
       ))}
-    </AlphaStack>
+    </VerticalStack>
   );
 
   return (
@@ -432,7 +432,7 @@ export function WithCustomFileDialogTrigger() {
   const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];
 
   const uploadedFiles = files.length > 0 && (
-    <AlphaStack gap="4">
+    <VerticalStack gap="4">
       {files.map((file, index) => (
         <Inline gap="4" align="center" key={index}>
           <Thumbnail
@@ -453,7 +453,7 @@ export function WithCustomFileDialogTrigger() {
           </div>
         </Inline>
       ))}
-    </AlphaStack>
+    </VerticalStack>
   );
 
   return (
diff --git a/polaris-react/src/components/DropZone/DropZone.tsx b/polaris-react/src/components/DropZone/DropZone.tsx
index ba4b8cd8c65..1a41e8325c3 100755
--- a/polaris-react/src/components/DropZone/DropZone.tsx
+++ b/polaris-react/src/components/DropZone/DropZone.tsx
@@ -14,7 +14,7 @@ import {isServer} from '../../utilities/target';
 import {useUniqueId} from '../../utilities/unique-id';
 import {useComponentDidMount} from '../../utilities/use-component-did-mount';
 import {useToggle} from '../../utilities/use-toggle';
-import {AlphaStack} from '../AlphaStack';
+import {VerticalStack} from '../VerticalStack';
 import {useEventListener} from '../../utilities/use-event-listener';
 
 import {FileUpload} from './components';
@@ -368,14 +368,14 @@ export const DropZone: React.FunctionComponent<DropZoneProps> & {
   ) {
     return (
       <div className={styles.Overlay}>
-        <AlphaStack gap="2" inlineAlign="center">
+        <VerticalStack gap="2" inlineAlign="center">
           {size === 'small' && <Icon source={icon} color={color} />}
           {(size === 'medium' || size === 'large') && (
             <Text variant="bodySm" as="p" fontWeight="bold">
               {text}
             </Text>
           )}
-        </AlphaStack>
+        </VerticalStack>
       </div>
     );
   }
diff --git a/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.tsx b/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.tsx
index e9553e6da96..310715ea530 100755
--- a/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.tsx
+++ b/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.tsx
@@ -7,7 +7,7 @@ import {uploadArrow} from '../../images';
 import {DropZoneContext} from '../../context';
 import {useI18n} from '../../../../utilities/i18n';
 import {createAllowMultipleKey} from '../../utils';
-import {AlphaStack} from '../../../AlphaStack';
+import {VerticalStack} from '../../../VerticalStack';
 
 import styles from './FileUpload.scss';
 
@@ -55,18 +55,18 @@ export function FileUpload(props: FileUploadProps) {
   switch (size) {
     case 'large':
       viewMarkup = (
-        <AlphaStack inlineAlign="center" gap="2">
+        <VerticalStack inlineAlign="center" gap="2">
           {actionMarkup}
           {actionHintMarkup}
-        </AlphaStack>
+        </VerticalStack>
       );
       break;
     case 'medium':
       viewMarkup = (
-        <AlphaStack inlineAlign="center" gap="2">
+        <VerticalStack inlineAlign="center" gap="2">
           {actionMarkup}
           {actionHintMarkup}
-        </AlphaStack>
+        </VerticalStack>
       );
       break;
     case 'small':
diff --git a/polaris-react/src/components/EmptyState/EmptyState.tsx b/polaris-react/src/components/EmptyState/EmptyState.tsx
index ecde54bc02f..3f0d2b1ae68 100644
--- a/polaris-react/src/components/EmptyState/EmptyState.tsx
+++ b/polaris-react/src/components/EmptyState/EmptyState.tsx
@@ -7,7 +7,7 @@ import {Box} from '../Box';
 import {buttonFrom} from '../Button';
 import {Image} from '../Image';
 import {Text} from '../Text';
-import {AlphaStack} from '../AlphaStack';
+import {VerticalStack} from '../VerticalStack';
 import {Inline} from '../Inline';
 
 import styles from './EmptyState.scss';
@@ -124,11 +124,11 @@ export function EmptyState({
   const detailsMarkup =
     textContentMarkup || actionsMarkup || footerContentMarkup ? (
       <Box maxWidth={fullWidth ? '100%' : '400px'}>
-        <AlphaStack inlineAlign="center">
+        <VerticalStack inlineAlign="center">
           {textContentMarkup}
           {actionsMarkup}
           {footerContentMarkup}
-        </AlphaStack>
+        </VerticalStack>
       </Box>
     ) : null;
 
@@ -139,10 +139,10 @@ export function EmptyState({
       paddingBlockStart="5"
       paddingBlockEnd="16"
     >
-      <AlphaStack inlineAlign="center">
+      <VerticalStack inlineAlign="center">
         {imageMarkup}
         {detailsMarkup}
-      </AlphaStack>
+      </VerticalStack>
     </Box>
   );
 }
diff --git a/polaris-react/src/components/Grid/Grid.tsx b/polaris-react/src/components/Grid/Grid.tsx
index f51e65a0bc8..cdaaf2a9680 100644
--- a/polaris-react/src/components/Grid/Grid.tsx
+++ b/polaris-react/src/components/Grid/Grid.tsx
@@ -26,7 +26,6 @@ export interface GridProps {
   gap?: Gap;
   children?: React.ReactNode;
 }
-
 export const Grid: React.FunctionComponent<GridProps> & {
   Cell: typeof Cell;
 } = function Grid({gap, areas, children, columns}: GridProps) {
diff --git a/polaris-react/src/components/Grid/components/Cell/Cell.tsx b/polaris-react/src/components/Grid/components/Cell/Cell.tsx
index 6910b7785fc..1ff467c595a 100644
--- a/polaris-react/src/components/Grid/components/Cell/Cell.tsx
+++ b/polaris-react/src/components/Grid/components/Cell/Cell.tsx
@@ -30,7 +30,6 @@ export interface CellProps {
   row?: Cell;
   children?: React.ReactNode;
 }
-
 export function Cell({
   area: gridArea,
   column,
diff --git a/polaris-react/src/components/Icon/Icon.stories.tsx b/polaris-react/src/components/Icon/Icon.stories.tsx
index 6c6bcf4822d..c82f2380d94 100644
--- a/polaris-react/src/components/Icon/Icon.stories.tsx
+++ b/polaris-react/src/components/Icon/Icon.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {AlphaStack, Box, Icon} from '@shopify/polaris';
+import {VerticalStack, Box, Icon} from '@shopify/polaris';
 import type {BoxProps, IconProps} from '@shopify/polaris';
 import {CirclePlusMinor} from '@shopify/polaris-icons';
 
@@ -45,13 +45,13 @@ export function WithBackdrop() {
     </Box>
   );
   return (
-    <AlphaStack gap="1">
+    <VerticalStack gap="1">
       <BackdropIcon iconColor="base" boxBackground="bg-strong" />
       <BackdropIcon iconColor="highlight" boxBackground="bg-info" />
       <BackdropIcon iconColor="success" boxBackground="bg-success" />
       <BackdropIcon iconColor="warning" boxBackground="bg-warning" />
       <BackdropIcon iconColor="critical" boxBackground="bg-critical" />
-    </AlphaStack>
+    </VerticalStack>
   );
 }
 
diff --git a/polaris-react/src/components/SettingToggle/SettingToggle.stories.tsx b/polaris-react/src/components/SettingToggle/SettingToggle.stories.tsx
index 99ee2a3a62d..e791cc97ade 100644
--- a/polaris-react/src/components/SettingToggle/SettingToggle.stories.tsx
+++ b/polaris-react/src/components/SettingToggle/SettingToggle.stories.tsx
@@ -8,7 +8,7 @@ import {
   AlphaCard,
   Button,
   Badge,
-  AlphaStack,
+  VerticalStack,
   useBreakpoints,
 } from '@shopify/polaris';
 import {CircleInformationMajor} from '@shopify/polaris-icons';
@@ -119,7 +119,7 @@ export function WithPrimitiveComponents() {
   );
 
   const descriptionMarkup = (
-    <AlphaStack gap="4">
+    <VerticalStack gap="4">
       <Text id={descriptionId} variant="bodyMd" as="p" color="subdued">
         {description}
       </Text>
@@ -128,22 +128,22 @@ export function WithPrimitiveComponents() {
           <Inline align="start">{actionMarkup}</Inline>
         </Box>
       ) : null}
-    </AlphaStack>
+    </VerticalStack>
   );
 
   return (
     <AlphaCard>
-      <AlphaStack gap={{xs: '4', sm: '5'}}>
+      <VerticalStack gap={{xs: '4', sm: '5'}}>
         <Box width="100%">
-          <AlphaStack gap={{xs: '2', sm: '4'}}>
+          <VerticalStack gap={{xs: '2', sm: '4'}}>
             {headerMarkup}
             {descriptionMarkup}
-          </AlphaStack>
+          </VerticalStack>
         </Box>
         <Text variant="bodyMd" as="p">
           Your checkout is only accepting test payments.
         </Text>
-      </AlphaStack>
+      </VerticalStack>
     </AlphaCard>
   );
 }
@@ -228,7 +228,7 @@ export function WithPrimitiveComponentsAndLongTitle() {
   );
 
   const descriptionMarkup = (
-    <AlphaStack gap="4">
+    <VerticalStack gap="4">
       <Text id={descriptionId} variant="bodyMd" as="p" color="subdued">
         {description}
       </Text>
@@ -237,22 +237,22 @@ export function WithPrimitiveComponentsAndLongTitle() {
           <Inline align="start">{actionMarkup}</Inline>
         </Box>
       ) : null}
-    </AlphaStack>
+    </VerticalStack>
   );
 
   return (
     <AlphaCard>
-      <AlphaStack gap={{xs: '4', sm: '5'}}>
+      <VerticalStack gap={{xs: '4', sm: '5'}}>
         <Box width="100%">
-          <AlphaStack gap={{xs: '2', sm: '4'}}>
+          <VerticalStack gap={{xs: '2', sm: '4'}}>
             {headerMarkup}
             {descriptionMarkup}
-          </AlphaStack>
+          </VerticalStack>
         </Box>
         <Text variant="bodyMd" as="p">
           Your checkout is only accepting test payments.
         </Text>
-      </AlphaStack>
+      </VerticalStack>
     </AlphaCard>
   );
 }
diff --git a/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx b/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx
index e117128f925..d70a10a6a2d 100644
--- a/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx
+++ b/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import {useI18n} from '../../utilities/i18n';
 import {Box} from '../Box';
 import {Inline} from '../Inline';
-import {AlphaStack} from '../AlphaStack';
+import {VerticalStack} from '../VerticalStack';
 
 import styles from './SkeletonPage.scss';
 
@@ -70,7 +70,7 @@ export function SkeletonPage({
     ) : null;
 
   return (
-    <AlphaStack gap="4" inlineAlign="center">
+    <VerticalStack gap="4" inlineAlign="center">
       <Box
         width="100%"
         padding="0"
@@ -86,7 +86,7 @@ export function SkeletonPage({
           maxWidth: 'none',
         })}
       >
-        <AlphaStack>
+        <VerticalStack>
           <Box
             paddingBlockStart={{xs: '4', md: '5'}}
             paddingBlockEnd={{xs: '4', md: '5'}}
@@ -107,8 +107,8 @@ export function SkeletonPage({
           <Box paddingBlockEnd="2" width="100%">
             {children}
           </Box>
-        </AlphaStack>
+        </VerticalStack>
       </Box>
-    </AlphaStack>
+    </VerticalStack>
   );
 }
diff --git a/polaris-react/src/components/Stack/Stack.tsx b/polaris-react/src/components/Stack/Stack.tsx
index 28374f296c5..23c743d92df 100644
--- a/polaris-react/src/components/Stack/Stack.tsx
+++ b/polaris-react/src/components/Stack/Stack.tsx
@@ -41,7 +41,7 @@ export interface StackProps {
   distribution?: Distribution;
 }
 
-/** @deprecated Use LegacyStack or AlphaStack instead. */
+/** @deprecated Use LegacyStack or VerticalStack instead. */
 export const Stack = memo(function Stack({
   children,
   vertical,
@@ -53,7 +53,7 @@ export const Stack = memo(function Stack({
   if (process.env.NODE_ENV === 'development') {
     // eslint-disable-next-line no-console
     console.warn(
-      'Deprecation: <Stack /> is deprecated. This component will be removed in a future major version of Polaris. Use <LegacyStack /> or <AlphaStack /> instead.',
+      'Deprecation: <Stack /> is deprecated. This component will be removed in a future major version of Polaris. Use <LegacyStack /> or <VerticalStack /> instead.',
     );
   }
 
diff --git a/polaris-react/src/components/Stack/components/Item/Item.tsx b/polaris-react/src/components/Stack/components/Item/Item.tsx
index 360ab3967c0..85725a9a879 100644
--- a/polaris-react/src/components/Stack/components/Item/Item.tsx
+++ b/polaris-react/src/components/Stack/components/Item/Item.tsx
@@ -13,12 +13,12 @@ export interface ItemProps {
    */
 }
 
-/** @deprecated Use LegacyStack or AlphaStack instead. */
+/** @deprecated Use LegacyStack or VerticalStack instead. */
 export function Item({children, fill}: ItemProps) {
   if (process.env.NODE_ENV === 'development') {
     // eslint-disable-next-line no-console
     console.warn(
-      'Deprecation: <Stack /> is deprecated. This component will be removed in a future major version of Polaris. Use <LegacyStack /> or <AlphaStack /> instead.',
+      'Deprecation: <Stack /> is deprecated. This component will be removed in a future major version of Polaris. Use <LegacyStack /> or <VerticalStack /> instead.',
     );
   }
 
diff --git a/polaris-react/src/components/TextContainer/TextContainer.tsx b/polaris-react/src/components/TextContainer/TextContainer.tsx
index c4a938912df..9ef6b4e0555 100644
--- a/polaris-react/src/components/TextContainer/TextContainer.tsx
+++ b/polaris-react/src/components/TextContainer/TextContainer.tsx
@@ -13,7 +13,7 @@ export interface TextContainerProps {
   children?: React.ReactNode;
 }
 
-/** @deprecated Use AlphaStack instead */
+/** @deprecated Use VerticalStack instead */
 export function TextContainer({spacing, children}: TextContainerProps) {
   const className = classNames(
     styles.TextContainer,
diff --git a/polaris-react/src/components/AlphaStack/AlphaStack.scss b/polaris-react/src/components/VerticalStack/VerticalStack.scss
similarity index 97%
rename from polaris-react/src/components/AlphaStack/AlphaStack.scss
rename to polaris-react/src/components/VerticalStack/VerticalStack.scss
index 91bbbc41757..507a0c57fae 100644
--- a/polaris-react/src/components/AlphaStack/AlphaStack.scss
+++ b/polaris-react/src/components/VerticalStack/VerticalStack.scss
@@ -1,6 +1,6 @@
 @import '../../styles/common';
 
-.AlphaStack {
+.VerticalStack {
   @include responsive-props('stack', 'gap', 'gap');
   // stylelint-disable -- Polaris component custom properties
   --pc-stack-align: initial;
diff --git a/polaris-react/src/components/AlphaStack/AlphaStack.stories.tsx b/polaris-react/src/components/VerticalStack/VerticalStack.stories.tsx
similarity index 79%
rename from polaris-react/src/components/AlphaStack/AlphaStack.stories.tsx
rename to polaris-react/src/components/VerticalStack/VerticalStack.stories.tsx
index a18c12b482f..76ea43a473e 100644
--- a/polaris-react/src/components/AlphaStack/AlphaStack.stories.tsx
+++ b/polaris-react/src/components/VerticalStack/VerticalStack.stories.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {Box, AlphaStack} from '@shopify/polaris';
+import {Box, VerticalStack} from '@shopify/polaris';
 
 export default {
-  component: AlphaStack,
-} as ComponentMeta<typeof AlphaStack>;
+  component: VerticalStack,
+} as ComponentMeta<typeof VerticalStack>;
 
 export function Default() {
   return (
-    <AlphaStack>
+    <VerticalStack>
       <Box background="bg" padding="1">
         01
       </Box>
@@ -18,13 +18,13 @@ export function Default() {
       <Box background="bg" padding="1">
         03
       </Box>
-    </AlphaStack>
+    </VerticalStack>
   );
 }
 
 export function WithGap() {
   return (
-    <AlphaStack gap="8">
+    <VerticalStack gap="8">
       <Box background="bg" padding="1">
         01
       </Box>
@@ -34,13 +34,13 @@ export function WithGap() {
       <Box background="bg" padding="1">
         03
       </Box>
-    </AlphaStack>
+    </VerticalStack>
   );
 }
 
 export function WithResponsiveGap() {
   return (
-    <AlphaStack gap={{xs: '4', md: '10'}}>
+    <VerticalStack gap={{xs: '4', md: '10'}}>
       <Box background="bg" padding="1">
         01
       </Box>
@@ -50,14 +50,14 @@ export function WithResponsiveGap() {
       <Box background="bg" padding="1">
         03
       </Box>
-    </AlphaStack>
+    </VerticalStack>
   );
 }
 
 export function WithAlignStart() {
   return (
     <div style={{display: 'flex', height: '250px'}}>
-      <AlphaStack gap="4" align="start">
+      <VerticalStack gap="4" align="start">
         <Box background="bg" padding="1">
           01
         </Box>
@@ -67,7 +67,7 @@ export function WithAlignStart() {
         <Box background="bg" padding="1">
           03
         </Box>
-      </AlphaStack>
+      </VerticalStack>
     </div>
   );
 }
@@ -75,7 +75,7 @@ export function WithAlignStart() {
 export function WithAlignCenter() {
   return (
     <div style={{display: 'flex', height: '250px'}}>
-      <AlphaStack gap="4" align="center">
+      <VerticalStack gap="4" align="center">
         <Box background="bg" padding="1">
           01
         </Box>
@@ -85,7 +85,7 @@ export function WithAlignCenter() {
         <Box background="bg" padding="1">
           03
         </Box>
-      </AlphaStack>
+      </VerticalStack>
     </div>
   );
 }
@@ -93,7 +93,7 @@ export function WithAlignCenter() {
 export function WithAlignEnd() {
   return (
     <div style={{display: 'flex', height: '250px'}}>
-      <AlphaStack gap="4" align="end">
+      <VerticalStack gap="4" align="end">
         <Box background="bg" padding="1">
           01
         </Box>
@@ -103,7 +103,7 @@ export function WithAlignEnd() {
         <Box background="bg" padding="1">
           03
         </Box>
-      </AlphaStack>
+      </VerticalStack>
     </div>
   );
 }
@@ -111,7 +111,7 @@ export function WithAlignEnd() {
 export function WithAlignSpaceAround() {
   return (
     <div style={{display: 'flex', height: '250px'}}>
-      <AlphaStack gap="4" align="space-around">
+      <VerticalStack gap="4" align="space-around">
         <Box background="bg" padding="1">
           01
         </Box>
@@ -121,7 +121,7 @@ export function WithAlignSpaceAround() {
         <Box background="bg" padding="1">
           03
         </Box>
-      </AlphaStack>
+      </VerticalStack>
     </div>
   );
 }
@@ -129,7 +129,7 @@ export function WithAlignSpaceAround() {
 export function WithAlignSpaceBetween() {
   return (
     <div style={{display: 'flex', height: '250px'}}>
-      <AlphaStack gap="4" align="space-between">
+      <VerticalStack gap="4" align="space-between">
         <Box background="bg" padding="1">
           01
         </Box>
@@ -139,7 +139,7 @@ export function WithAlignSpaceBetween() {
         <Box background="bg" padding="1">
           03
         </Box>
-      </AlphaStack>
+      </VerticalStack>
     </div>
   );
 }
@@ -147,7 +147,7 @@ export function WithAlignSpaceBetween() {
 export function WithAlignSpaceEvenly() {
   return (
     <div style={{display: 'flex', height: '250px'}}>
-      <AlphaStack gap="4" align="space-evenly">
+      <VerticalStack gap="4" align="space-evenly">
         <Box background="bg" padding="1">
           01
         </Box>
@@ -157,14 +157,14 @@ export function WithAlignSpaceEvenly() {
         <Box background="bg" padding="1">
           03
         </Box>
-      </AlphaStack>
+      </VerticalStack>
     </div>
   );
 }
 
 export function WithInlineAlignStart() {
   return (
-    <AlphaStack gap="4" inlineAlign="start">
+    <VerticalStack gap="4" inlineAlign="start">
       <Box background="bg" padding="1">
         01
       </Box>
@@ -174,13 +174,13 @@ export function WithInlineAlignStart() {
       <Box background="bg" padding="1">
         03
       </Box>
-    </AlphaStack>
+    </VerticalStack>
   );
 }
 
 export function WithInlineAlignCenter() {
   return (
-    <AlphaStack gap="4" inlineAlign="center">
+    <VerticalStack gap="4" inlineAlign="center">
       <Box background="bg" padding="1">
         01
       </Box>
@@ -190,13 +190,13 @@ export function WithInlineAlignCenter() {
       <Box background="bg" padding="1">
         03
       </Box>
-    </AlphaStack>
+    </VerticalStack>
   );
 }
 
 export function WithInlineAlignEnd() {
   return (
-    <AlphaStack gap="4" inlineAlign="end">
+    <VerticalStack gap="4" inlineAlign="end">
       <Box background="bg" padding="1">
         01
       </Box>
@@ -206,6 +206,6 @@ export function WithInlineAlignEnd() {
       <Box background="bg" padding="1">
         03
       </Box>
-    </AlphaStack>
+    </VerticalStack>
   );
 }
diff --git a/polaris-react/src/components/AlphaStack/AlphaStack.tsx b/polaris-react/src/components/VerticalStack/VerticalStack.tsx
similarity index 89%
rename from polaris-react/src/components/AlphaStack/AlphaStack.tsx
rename to polaris-react/src/components/VerticalStack/VerticalStack.tsx
index 0439f6e1c34..e2bd5f424eb 100644
--- a/polaris-react/src/components/AlphaStack/AlphaStack.tsx
+++ b/polaris-react/src/components/VerticalStack/VerticalStack.tsx
@@ -8,7 +8,7 @@ import {
 } from '../../utilities/css';
 import type {ResponsiveProp} from '../../utilities/css';
 
-import styles from './AlphaStack.scss';
+import styles from './VerticalStack.scss';
 
 type Align =
   | 'start'
@@ -24,7 +24,7 @@ type Element = 'div' | 'ul' | 'ol' | 'fieldset';
 
 type Gap = ResponsiveProp<SpacingSpaceScale>;
 
-export interface AlphaStackProps extends React.AriaAttributes {
+export interface VerticalStackProps extends React.AriaAttributes {
   children?: React.ReactNode;
   /** HTML Element type
    * @default 'div'
@@ -44,7 +44,7 @@ export interface AlphaStackProps extends React.AriaAttributes {
   reverseOrder?: boolean;
 }
 
-export const AlphaStack = ({
+export const VerticalStack = ({
   as = 'div',
   children,
   align,
@@ -53,9 +53,9 @@ export const AlphaStack = ({
   id,
   reverseOrder = false,
   ...restProps
-}: AlphaStackProps) => {
+}: VerticalStackProps) => {
   const className = classNames(
-    styles.AlphaStack,
+    styles.VerticalStack,
     (as === 'ul' || as === 'ol') && styles.listReset,
     as === 'fieldset' && styles.fieldsetReset,
   );
diff --git a/polaris-react/src/components/VerticalStack/index.ts b/polaris-react/src/components/VerticalStack/index.ts
new file mode 100644
index 00000000000..70179f40186
--- /dev/null
+++ b/polaris-react/src/components/VerticalStack/index.ts
@@ -0,0 +1 @@
+export * from './VerticalStack';
diff --git a/polaris-react/src/components/AlphaStack/tests/AlphaStack.test.tsx b/polaris-react/src/components/VerticalStack/tests/VerticalStack.tsx
similarity index 75%
rename from polaris-react/src/components/AlphaStack/tests/AlphaStack.test.tsx
rename to polaris-react/src/components/VerticalStack/tests/VerticalStack.tsx
index c8347e5028c..145fee59041 100644
--- a/polaris-react/src/components/AlphaStack/tests/AlphaStack.test.tsx
+++ b/polaris-react/src/components/VerticalStack/tests/VerticalStack.tsx
@@ -1,20 +1,20 @@
 import React from 'react';
 import {mountWithApp} from 'tests/utilities';
 
-import {AlphaStack} from '../AlphaStack';
+import {VerticalStack} from '../VerticalStack';
 
 const text = 'This is a stack';
 const children = <p>{text}</p>;
 
-describe('<AlphaStack />', () => {
+describe('<VerticalStack />', () => {
   it('renders children', () => {
-    const stack = mountWithApp(<AlphaStack>{children}</AlphaStack>);
+    const stack = mountWithApp(<VerticalStack>{children}</VerticalStack>);
 
     expect(stack).toContainReactComponent('p', {children: text});
   });
 
   it('renders custom properties by default', () => {
-    const stack = mountWithApp(<AlphaStack>{children}</AlphaStack>);
+    const stack = mountWithApp(<VerticalStack>{children}</VerticalStack>);
 
     expect(stack).toContainReactComponent('div', {
       style: expect.objectContaining({
@@ -25,9 +25,9 @@ describe('<AlphaStack />', () => {
 
   it('overrides custom properties if they are passed in', () => {
     const stack = mountWithApp(
-      <AlphaStack inlineAlign="center" gap="10">
+      <VerticalStack inlineAlign="center" gap="10">
         {children}
-      </AlphaStack>,
+      </VerticalStack>,
     );
 
     expect(stack).toContainReactComponent('div', {
@@ -40,7 +40,7 @@ describe('<AlphaStack />', () => {
 
   it('accepts gap based on breakpoints', () => {
     const stack = mountWithApp(
-      <AlphaStack gap={{xs: '2', md: '8'}}>{children}</AlphaStack>,
+      <VerticalStack gap={{xs: '2', md: '8'}}>{children}</VerticalStack>,
     );
 
     expect(stack).toContainReactComponent('div', {
diff --git a/polaris-react/src/index.ts b/polaris-react/src/index.ts
index 135f26a4023..c943c005c1d 100644
--- a/polaris-react/src/index.ts
+++ b/polaris-react/src/index.ts
@@ -54,8 +54,8 @@ export type {AlphaCardProps} from './components/AlphaCard';
 export {AlphaFilters} from './components/AlphaFilters';
 export type {AlphaFiltersProps} from './components/AlphaFilters';
 
-export {AlphaStack} from './components/AlphaStack';
-export type {AlphaStackProps} from './components/AlphaStack';
+export {VerticalStack} from './components/VerticalStack';
+export type {VerticalStackProps} from './components/VerticalStack';
 
 export {AlphaTabs} from './components/AlphaTabs';
 export type {AlphaTabsProps, AlphaTabProps} from './components/AlphaTabs';
diff --git a/polaris.shopify.com/CHANGELOG.md b/polaris.shopify.com/CHANGELOG.md
index 2112a00f8a6..da29dccb392 100644
--- a/polaris.shopify.com/CHANGELOG.md
+++ b/polaris.shopify.com/CHANGELOG.md
@@ -149,7 +149,7 @@
 
 * [#8700](https://github.com/Shopify/polaris/pull/8700) [`47b03e639`](https://github.com/Shopify/polaris/commit/47b03e63956c3fd5a6e9ae479256c5b49a25882e) Thanks [@kyledurand](https://github.com/kyledurand)! - Added inheritance examples to Text component
 
-- [#8676](https://github.com/Shopify/polaris/pull/8676) [`b4a1c451f`](https://github.com/Shopify/polaris/commit/b4a1c451f9f911f81cd8c3d34b3a07743e72a346) Thanks [@laurkim](https://github.com/laurkim)! - Updated `AlphaStack` to support horizontal alignment with `inlineAlign` and vertical alignment with `align`
+- [#8676](https://github.com/Shopify/polaris/pull/8676) [`b4a1c451f`](https://github.com/Shopify/polaris/commit/b4a1c451f9f911f81cd8c3d34b3a07743e72a346) Thanks [@laurkim](https://github.com/laurkim)! - Updated `VerticalStack` to support horizontal alignment with `inlineAlign` and vertical alignment with `align`
 
 * [#8683](https://github.com/Shopify/polaris/pull/8683) [`41fc7726b`](https://github.com/Shopify/polaris/commit/41fc7726b19af606766e23291438660d93936879) Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed typescript converted codesandbox examples
 
@@ -175,7 +175,7 @@
 
 - [#8674](https://github.com/Shopify/polaris/pull/8674) [`8d7e45a8d`](https://github.com/Shopify/polaris/commit/8d7e45a8d289094f15eb7693d7fa22306a1127bc) Thanks [@martenbjork](https://github.com/martenbjork)! - Add Typescript typings to Banner examples
 
-* [#8673](https://github.com/Shopify/polaris/pull/8673) [`9beee4850`](https://github.com/Shopify/polaris/commit/9beee4850e936c4f159b49a3b7a00ffe3cf85a53) Thanks [@martenbjork](https://github.com/martenbjork)! - Add Typescript typings to AlphaStack examples
+* [#8673](https://github.com/Shopify/polaris/pull/8673) [`9beee4850`](https://github.com/Shopify/polaris/commit/9beee4850e936c4f159b49a3b7a00ffe3cf85a53) Thanks [@martenbjork](https://github.com/martenbjork)! - Add Typescript typings to VerticalStack examples
 
 * Updated dependencies [[`243fd6224`](https://github.com/Shopify/polaris/commit/243fd622406612370efe40dd32dcd2025cf53db7), [`d340f8471`](https://github.com/Shopify/polaris/commit/d340f8471d330e8562c0dbb67d9f3aeae8699b65)]:
   - @shopify/polaris@10.37.0
@@ -198,9 +198,9 @@
 
 * [#8622](https://github.com/Shopify/polaris/pull/8622) [`613f637c9`](https://github.com/Shopify/polaris/commit/613f637c923f18b51faf8707f185513eaff028f8) Thanks [@gwyneplaine](https://github.com/gwyneplaine)! - Fix minor layout bugs in app-settings-layout pattern code example
 
-- [#8379](https://github.com/Shopify/polaris/pull/8379) [`c8207636c`](https://github.com/Shopify/polaris/commit/c8207636cfd9493da8e0b5b1aaa4de01a5e521de) Thanks [@nayeobkim](https://github.com/nayeobkim)! - Updated documentation and guidance for `AlphaCard`, `AlphaStack`, `Box`, `Bleed`, `Columns`, and `Inline`
+- [#8379](https://github.com/Shopify/polaris/pull/8379) [`c8207636c`](https://github.com/Shopify/polaris/commit/c8207636cfd9493da8e0b5b1aaa4de01a5e521de) Thanks [@nayeobkim](https://github.com/nayeobkim)! - Updated documentation and guidance for `AlphaCard`, `VerticalStack`, `Box`, `Bleed`, `Columns`, and `Inline`
 
-* [#8614](https://github.com/Shopify/polaris/pull/8614) [`3526fc2fc`](https://github.com/Shopify/polaris/commit/3526fc2fcd3756024ad85bb8b107f9c7a36a7f74) Thanks [@laurkim](https://github.com/laurkim)! - Added best practices to `Text`, `AlphaCard`, and `AlphaStack`
+* [#8614](https://github.com/Shopify/polaris/pull/8614) [`3526fc2fc`](https://github.com/Shopify/polaris/commit/3526fc2fcd3756024ad85bb8b107f9c7a36a7f74) Thanks [@laurkim](https://github.com/laurkim)! - Added best practices to `Text`, `AlphaCard`, and `VerticalStack`
 
 - [#8616](https://github.com/Shopify/polaris/pull/8616) [`74f0bc42a`](https://github.com/Shopify/polaris/commit/74f0bc42a9eb4107328fed0bb13077e97853c597) Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed icon page layout
 
@@ -404,7 +404,7 @@
 ### Patch Changes
 
 - [#8285](https://github.com/Shopify/polaris/pull/8285) [`e70f70862`](https://github.com/Shopify/polaris/commit/e70f7086261b7f036b90550a432bf9d72e7ed8a4) Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed contrast issue on alpha status badge
-  Added default value to prop documentation for AlphaStack
+  Added default value to prop documentation for VerticalStack
 - Updated dependencies [[`e70f70862`](https://github.com/Shopify/polaris/commit/e70f7086261b7f036b90550a432bf9d72e7ed8a4), [`20bb1a668`](https://github.com/Shopify/polaris/commit/20bb1a668dcde8fcb87da35d5caaef2f0e387c01), [`f335aaf99`](https://github.com/Shopify/polaris/commit/f335aaf9968ff87b38559572f51a92b413f8aecd)]:
   - @shopify/polaris@10.27.1
 
@@ -541,7 +541,7 @@
 
 ### Minor Changes
 
-- [#7963](https://github.com/Shopify/polaris/pull/7963) [`f94cf1496`](https://github.com/Shopify/polaris/commit/f94cf149693eb7f1860eacda8c38cc5f5039dffe) Thanks [@aveline](https://github.com/aveline)! - Updated `AlphaStack` docs for `align` prop
+- [#7963](https://github.com/Shopify/polaris/pull/7963) [`f94cf1496`](https://github.com/Shopify/polaris/commit/f94cf149693eb7f1860eacda8c38cc5f5039dffe) Thanks [@aveline](https://github.com/aveline)! - Updated `VerticalStack` docs for `align` prop
 
 ### Patch Changes
 
@@ -597,7 +597,7 @@
 
 ### Patch Changes
 
-- [#7745](https://github.com/Shopify/polaris/pull/7745) [`70ed3137b`](https://github.com/Shopify/polaris/commit/70ed3137b7cb201ccb0b3715340d9f7794dd611d) Thanks [@laurkim](https://github.com/laurkim)! - Updated alpha status message that documentation is in development for `Bleed`, `Columns`, `Tiles`, `Inline`, `AlphaCard`, `AlphaStack`, and `Box`
+- [#7745](https://github.com/Shopify/polaris/pull/7745) [`70ed3137b`](https://github.com/Shopify/polaris/commit/70ed3137b7cb201ccb0b3715340d9f7794dd611d) Thanks [@laurkim](https://github.com/laurkim)! - Updated alpha status message that documentation is in development for `Bleed`, `Columns`, `Tiles`, `Inline`, `AlphaCard`, `VerticalStack`, and `Box`
 
 * [#7803](https://github.com/Shopify/polaris/pull/7803) [`23665dfd2`](https://github.com/Shopify/polaris/commit/23665dfd2b90ca7487f83560c148fe1d1f34dbe3) Thanks [@aveline](https://github.com/aveline)! - Added support for `ul` element on `Box`
 
@@ -613,13 +613,13 @@
 
 * [#7757](https://github.com/Shopify/polaris/pull/7757) [`f9e1985c9`](https://github.com/Shopify/polaris/commit/f9e1985c91e111bad0a1f35551c0c6293b16f132) Thanks [@aveline](https://github.com/aveline)! - Fixed typo in `responsive-props` mixin. Added jsdoc examples for responsive spacing props in `Box`.
 
-- [#7764](https://github.com/Shopify/polaris/pull/7764) [`9ab44a69f`](https://github.com/Shopify/polaris/commit/9ab44a69f96b9454803a2e22c70e0a5c8b0cfa85) Thanks [@laurkim](https://github.com/laurkim)! - Cleaned up prop descriptions and added missing default values for `Box`, `AlphaCard`, `AlphaStack`, `Columns`, `Tiles`, `Bleed`, and `Inline`
+- [#7764](https://github.com/Shopify/polaris/pull/7764) [`9ab44a69f`](https://github.com/Shopify/polaris/commit/9ab44a69f96b9454803a2e22c70e0a5c8b0cfa85) Thanks [@laurkim](https://github.com/laurkim)! - Cleaned up prop descriptions and added missing default values for `Box`, `AlphaCard`, `VerticalStack`, `Columns`, `Tiles`, `Bleed`, and `Inline`
 
-* [#7767](https://github.com/Shopify/polaris/pull/7767) [`cb24dbb9e`](https://github.com/Shopify/polaris/commit/cb24dbb9e0806f218a67dfec6f2cdce039dc0f7d) Thanks [@aveline](https://github.com/aveline)! - Updated `Box` and `AlphaStack` to accept aria attributes
+* [#7767](https://github.com/Shopify/polaris/pull/7767) [`cb24dbb9e`](https://github.com/Shopify/polaris/commit/cb24dbb9e0806f218a67dfec6f2cdce039dc0f7d) Thanks [@aveline](https://github.com/aveline)! - Updated `Box` and `VerticalStack` to accept aria attributes
 
 - [#7778](https://github.com/Shopify/polaris/pull/7778) [`e0c64cd5b`](https://github.com/Shopify/polaris/commit/e0c64cd5b15569c36504d535b8dae6599a1027a4) Thanks [@laurkim](https://github.com/laurkim)! - Removed link to deleted `Tiles` component and cleaned up links
 
-* [#7748](https://github.com/Shopify/polaris/pull/7748) [`ed3da747e`](https://github.com/Shopify/polaris/commit/ed3da747e1d70dfbcdfb907b13230f1d174cb0d1) Thanks [@laurkim](https://github.com/laurkim)! - Renamed `spacing` prop to `gap` on `Inline`, `AlphaStack`, `Columns`, and `Tiles`
+* [#7748](https://github.com/Shopify/polaris/pull/7748) [`ed3da747e`](https://github.com/Shopify/polaris/commit/ed3da747e1d70dfbcdfb907b13230f1d174cb0d1) Thanks [@laurkim](https://github.com/laurkim)! - Renamed `spacing` prop to `gap` on `Inline`, `VerticalStack`, `Columns`, and `Tiles`
 
 - [#7744](https://github.com/Shopify/polaris/pull/7744) [`28220456f`](https://github.com/Shopify/polaris/commit/28220456f67bb4e6e2df19ceb334635ca2d0f3a5) Thanks [@laurkim](https://github.com/laurkim)! - Fixed mapping for `TextStyle` `variation="strong"` to use `Text` `fontWeight="semibold"` instead of `fontWeight="bold"`
 
@@ -645,7 +645,7 @@
 
 ### Patch Changes
 
-- [#7711](https://github.com/Shopify/polaris/pull/7711) [`3984f26b6`](https://github.com/Shopify/polaris/commit/3984f26b69b93bf621392e16e2d842619c4fbdd4) Thanks [@nayeobkim](https://github.com/nayeobkim)! - Updated the related components copy in `AlphaStack`
+- [#7711](https://github.com/Shopify/polaris/pull/7711) [`3984f26b6`](https://github.com/Shopify/polaris/commit/3984f26b69b93bf621392e16e2d842619c4fbdd4) Thanks [@nayeobkim](https://github.com/nayeobkim)! - Updated the related components copy in `VerticalStack`
 
 * [#7569](https://github.com/Shopify/polaris/pull/7569) [`ffe1e9230`](https://github.com/Shopify/polaris/commit/ffe1e923092df65906ed7aeb0944bdfb8cb2375b) Thanks [@chazdean](https://github.com/chazdean)! - Updated `Tiles` component guidance and examples
 
@@ -747,7 +747,7 @@
 
 - [#7452](https://github.com/Shopify/polaris/pull/7452) [`8a05e840f`](https://github.com/Shopify/polaris/commit/8a05e840f0594e9d3ffa38397cb8d8e482fc97b6) Thanks [@gui-santos](https://github.com/gui-santos)! - fix visual bug in token page's navigation where text was breaking into two lines
 
-* [#7469](https://github.com/Shopify/polaris/pull/7469) [`a8d80cfd5`](https://github.com/Shopify/polaris/commit/a8d80cfd5630b659a10cf950d07fd91562b63814) Thanks [@chazdean](https://github.com/chazdean)! - Updated `AlphaStack` component docs
+* [#7469](https://github.com/Shopify/polaris/pull/7469) [`a8d80cfd5`](https://github.com/Shopify/polaris/commit/a8d80cfd5630b659a10cf950d07fd91562b63814) Thanks [@chazdean](https://github.com/chazdean)! - Updated `VerticalStack` component docs
 
 - [#7483](https://github.com/Shopify/polaris/pull/7483) [`7a78e07bf`](https://github.com/Shopify/polaris/commit/7a78e07bf1abb271b1f6bbd10042c24b6caddd85) Thanks [@laurkim](https://github.com/laurkim)! - Fixed missing `children` prop in `Columns` prop type
 
@@ -806,7 +806,7 @@
 
 ### Minor Changes
 
-- [#7056](https://github.com/Shopify/polaris/pull/7056) [`0be40aa94`](https://github.com/Shopify/polaris/commit/0be40aa94be8c95f96f0835b4df7f91f6da0b5c2) Thanks [@laurkim](https://github.com/laurkim)! - Added alpha pages for `AlphaStack`, `Box`, `Columns`, `Inline`, and `Tile` components. Updated `StatusBanner` to capitalize status value.
+- [#7056](https://github.com/Shopify/polaris/pull/7056) [`0be40aa94`](https://github.com/Shopify/polaris/commit/0be40aa94be8c95f96f0835b4df7f91f6da0b5c2) Thanks [@laurkim](https://github.com/laurkim)! - Added alpha pages for `VerticalStack`, `Box`, `Columns`, `Inline`, and `Tile` components. Updated `StatusBanner` to capitalize status value.
 
 * [#7353](https://github.com/Shopify/polaris/pull/7353) [`558b1cfae`](https://github.com/Shopify/polaris/commit/558b1cfae4b855f50b6fe69b3209e4aec4bc80c8) Thanks [@kyledurand](https://github.com/kyledurand)! - Ported codesandbox init code to React 18
 
@@ -828,7 +828,7 @@
 
 - [#7056](https://github.com/Shopify/polaris/pull/7056) [`0be40aa94`](https://github.com/Shopify/polaris/commit/0be40aa94be8c95f96f0835b4df7f91f6da0b5c2) Thanks [@laurkim](https://github.com/laurkim)! - Renamed `AlphaCard` `shadow` prop
 
-* [#7056](https://github.com/Shopify/polaris/pull/7056) [`0be40aa94`](https://github.com/Shopify/polaris/commit/0be40aa94be8c95f96f0835b4df7f91f6da0b5c2) Thanks [@laurkim](https://github.com/laurkim)! - Added `fullWidth` prop to `AlphaStack` and updated styleguide docs
+* [#7056](https://github.com/Shopify/polaris/pull/7056) [`0be40aa94`](https://github.com/Shopify/polaris/commit/0be40aa94be8c95f96f0835b4df7f91f6da0b5c2) Thanks [@laurkim](https://github.com/laurkim)! - Added `fullWidth` prop to `VerticalStack` and updated styleguide docs
 
 - [#7311](https://github.com/Shopify/polaris/pull/7311) [`fc05e3152`](https://github.com/Shopify/polaris/commit/fc05e31520b1ee4483a54a889a44fb3ac0959a62) Thanks [@martenbjork](https://github.com/martenbjork)! - Improved the layout on mobile
 
diff --git a/polaris.shopify.com/content/components/deprecated/text-container.md b/polaris.shopify.com/content/components/deprecated/text-container.md
index 51235b3f528..7d720ba8995 100644
--- a/polaris.shopify.com/content/components/deprecated/text-container.md
+++ b/polaris.shopify.com/content/components/deprecated/text-container.md
@@ -13,7 +13,7 @@ keywords:
   - padding
 status:
   value: Deprecated
-  message: The TextContainer is a simple layout component which was made redundant by the AlphaStack component. Use AlphaStack with `gap` values of 2, 4, and 5 to replicate layouts.
+  message: The TextContainer is a simple layout component which was made redundant by the VerticalStack component. Use VerticalStack with `gap` values of 2, 4, and 5 to replicate layouts.
 examples:
   - fileName: text-container-default.tsx
     title: Default
diff --git a/polaris.shopify.com/content/components/layout-and-structure/inline.md b/polaris.shopify.com/content/components/layout-and-structure/inline.md
index 858dff6a27f..f71a6a6b22f 100644
--- a/polaris.shopify.com/content/components/layout-and-structure/inline.md
+++ b/polaris.shopify.com/content/components/layout-and-structure/inline.md
@@ -39,7 +39,7 @@ examples:
 ## Related components
 
 - To create the large-scale structure of pages, [use the Columns component](https://polaris.shopify.com/components/layout-and-structure/columns)
-- To display elements vertically, [use the AlphaStack component](https://polaris.shopify.com/components/alphastack)
+- To display elements vertically, [use the VerticalStack component](https://polaris.shopify.com/components/alphastack)
 
 ## Related resources
 
diff --git a/polaris.shopify.com/content/components/layout-and-structure/legacy-stack.md b/polaris.shopify.com/content/components/layout-and-structure/legacy-stack.md
index e521cff787d..d84ec9091eb 100644
--- a/polaris.shopify.com/content/components/layout-and-structure/legacy-stack.md
+++ b/polaris.shopify.com/content/components/layout-and-structure/legacy-stack.md
@@ -20,7 +20,7 @@ keywords:
   - legacy stack
 status:
   value: Legacy
-  message: This is a legacy component and will be deprecated. The new [AlphaStack component](/components/layout-and-structure/alpha-stack) can be used in combination with the new layout primitives to achieve similar results to LegacyStack. Learn more about our [component lifecycles](/getting-started/components-lifecycle).
+  message: This is a legacy component and will be deprecated. The new [VerticalStack component](/components/layout-and-structure/alpha-stack) can be used in combination with the new layout primitives to achieve similar results to LegacyStack. Learn more about our [component lifecycles](/getting-started/components-lifecycle).
 examples:
   - fileName: legacy-stack-default.tsx
     title: Default
diff --git a/polaris.shopify.com/content/components/layout-and-structure/alpha-stack.md b/polaris.shopify.com/content/components/layout-and-structure/vertical-stack.md
similarity index 74%
rename from polaris.shopify.com/content/components/layout-and-structure/alpha-stack.md
rename to polaris.shopify.com/content/components/layout-and-structure/vertical-stack.md
index 2f0040fb971..1f83b90ceaf 100644
--- a/polaris.shopify.com/content/components/layout-and-structure/alpha-stack.md
+++ b/polaris.shopify.com/content/components/layout-and-structure/vertical-stack.md
@@ -1,5 +1,5 @@
 ---
-title: Alpha stack
+title: VerticalStack
 description: Use to display children vertically and horizontally with full width by default. Based on CSS Flexbox.
 category: Layout and structure
 keywords:
@@ -15,15 +15,15 @@ status:
   value: Alpha
   message: This component is a work in progress and ready for exploratory usage, with breaking changes expected in minor version updates. Please use with caution. Learn more about our [component lifecycles](/getting-started/components-lifecycle).
 examples:
-  - fileName: alpha-stack-with-gap.tsx
+  - fileName: vertical-stack-with-gap.tsx
     title: Gap
     description: >-
       Control the vertical space between children using the `gap` prop.
-  - fileName: alpha-stack-with-align.tsx
+  - fileName: vertical-stack-with-align.tsx
     title: Align
     description: >-
       Control the vertical alignment of children using the `align` prop.
-  - fileName: alpha-stack-with-inline-align.tsx
+  - fileName: vertical-stack-with-inline-align.tsx
     title: Inline align
     description: >-
       Control the horizontal alignment of children using the `inlineAlign` prop.
@@ -44,4 +44,4 @@ Stacks should:
 
 ## Related resources
 
-- AlphaStack props are named following the convention of CSS logical properties, such as 'padding-inline-start' and 'padding-block-start'. Learn more about [CSS logicial properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties).
+- VerticalStack props are named following the convention of CSS logical properties, such as 'padding-inline-start' and 'padding-block-start'. Learn more about [CSS logicial properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties).
diff --git a/polaris.shopify.com/content/patterns/app-settings-layout/variants/default.md b/polaris.shopify.com/content/patterns/app-settings-layout/variants/default.md
index 3b5df623888..e5f3b6b3c25 100644
--- a/polaris.shopify.com/content/patterns/app-settings-layout/variants/default.md
+++ b/polaris.shopify.com/content/patterns/app-settings-layout/variants/default.md
@@ -24,7 +24,7 @@ hideFromNav: true
 
 ## Using this pattern
 
-This pattern uses the [`AlphaStack`](/components/layout-and-structure/alpha-stack), [`AlphaCard`](/components/layout-and-structure/alpha-card), [`Columns`](/components/layout-and-structure/columns) and [`Box`](/components/layout-and-structure/box) components.
+This pattern uses the [`VerticalStack`](/components/layout-and-structure/alpha-stack), [`AlphaCard`](/components/layout-and-structure/alpha-card), [`Columns`](/components/layout-and-structure/columns) and [`Box`](/components/layout-and-structure/box) components.
 
 <!-- prettier-ignore -->
 ```javascript {"type":"previewContext","for":"example"}
@@ -48,27 +48,27 @@ function AppSettingsLayoutExample() {
         },
       ]}
     >
-      <AlphaStack gap={{xs: '8', sm: '4'}}>
+      <VerticalStack gap={{xs: '8', sm: '4'}}>
         <Columns columns={{xs: '1fr', md: '2fr 5fr'}} gap="4">
           <Box
             as="section"
             paddingInlineStart={{xs: 4, sm: 0}}
             paddingInlineEnd={{xs: 4, sm: 0}}
           >
-            <AlphaStack gap="4">
+            <VerticalStack gap="4">
               <Text as="h3" variant="headingMd">
                 InterJambs
               </Text>
               <Text as="p" variant="bodyMd">
                 Interjambs are the rounded protruding bits of your puzzlie piece
               </Text>
-            </AlphaStack>
+            </VerticalStack>
           </Box>
           <AlphaCard roundedAbove="sm">
-            <AlphaStack gap="4">
+            <VerticalStack gap="4">
               <TextField label="Interjamb style" />
               <TextField label="Interjamb ratio" />
-            </AlphaStack>
+            </VerticalStack>
           </AlphaCard>
         </Columns>
         {smUp ? <Divider /> : null}
@@ -78,23 +78,23 @@ function AppSettingsLayoutExample() {
             paddingInlineStart={{xs: 4, sm: 0}}
             paddingInlineEnd={{xs: 4, sm: 0}}
           >
-            <AlphaStack gap="4">
+            <VerticalStack gap="4">
               <Text as="h3" variant="headingMd">
                 Dimensions
               </Text>
               <Text as="p" variant="bodyMd">
                 Interjambs are the rounded protruding bits of your puzzlie piece
               </Text>
-            </AlphaStack>
+            </VerticalStack>
           </Box>
           <AlphaCard roundedAbove="sm">
-            <AlphaStack gap="4">
+            <VerticalStack gap="4">
               <TextField label="Horizontal" />
               <TextField label="Interjamb ratio" />
-            </AlphaStack>
+            </VerticalStack>
           </AlphaCard>
         </Columns>
-      </AlphaStack>
+      </VerticalStack>
     </Page>
   );
 }
diff --git a/polaris.shopify.com/content/patterns/date-picking/variants/date-range.md b/polaris.shopify.com/content/patterns/date-picking/variants/date-range.md
index e463622c57e..db3f8e4df29 100644
--- a/polaris.shopify.com/content/patterns/date-picking/variants/date-range.md
+++ b/polaris.shopify.com/content/patterns/date-picking/variants/date-range.md
@@ -32,7 +32,7 @@ This enables merchants to select a date range.
 
 ## Using this pattern
 
-This pattern uses the [`AlphaStack`](/components/layout-and-structure/alpha-stack), [`Box`](/components/layout-and-structure/box), [`Button`](/components/actions/button), [`Columns`](/components/layout-and-structure/columns), [`DatePicker`](/components/selection-and-input/date-picker), [`Inline`](/components/layout-and-structure/inline), [`OptionList`](/components/lists/option-list), [`Popover`](/components/overlays/popover) and [`TextField`](/components/selection-and-input/text-field) components.
+This pattern uses the [`VerticalStack`](/components/layout-and-structure/alpha-stack), [`Box`](/components/layout-and-structure/box), [`Button`](/components/actions/button), [`Columns`](/components/layout-and-structure/columns), [`DatePicker`](/components/selection-and-input/date-picker), [`Inline`](/components/layout-and-structure/inline), [`OptionList`](/components/lists/option-list), [`Popover`](/components/overlays/popover) and [`TextField`](/components/selection-and-input/text-field) components.
 
 <!-- prettier-ignore -->
 ```javascript {"type":"previewContext","for":"example"}
@@ -323,7 +323,7 @@ function DateRangePicker() {
             )}
           </Box>
           <Box padding={{xs: 5}} maxWidth={mdDown ? '320px' : '516px'}>
-            <AlphaStack gap="4">
+            <VerticalStack gap="4">
               <Inline gap="2">
                 <div style={{flexGrow: 1}}>
                   <TextField
@@ -365,7 +365,7 @@ function DateRangePicker() {
                   allowRange
                 />
               </div>
-            </AlphaStack>
+            </VerticalStack>
           </Box>
         </Columns>
       </Popover.Pane>
diff --git a/polaris.shopify.com/content/patterns/date-picking/variants/single-date.md b/polaris.shopify.com/content/patterns/date-picking/variants/single-date.md
index deb1d3060d3..d6e0d1cb04c 100644
--- a/polaris.shopify.com/content/patterns/date-picking/variants/single-date.md
+++ b/polaris.shopify.com/content/patterns/date-picking/variants/single-date.md
@@ -93,7 +93,7 @@ function DatePickerExample() {
     }
   }, [selectedDate]);
   return (
-    <AlphaStack inlineAlign="center" gap="4">
+    <VerticalStack inlineAlign="center" gap="4">
       <Box minWidth="276px" padding={{xs: 2}}>
         <Popover
           active={visible}
@@ -127,7 +127,7 @@ function DatePickerExample() {
           </AlphaCard>
         </Popover>
       </Box>
-    </AlphaStack>
+    </VerticalStack>
   );
 }
 ```
diff --git a/polaris.shopify.com/content/patterns/resource-details-layout/variants/default.md b/polaris.shopify.com/content/patterns/resource-details-layout/variants/default.md
index 0cc79e6f02e..a50af75b1a4 100644
--- a/polaris.shopify.com/content/patterns/resource-details-layout/variants/default.md
+++ b/polaris.shopify.com/content/patterns/resource-details-layout/variants/default.md
@@ -28,7 +28,7 @@ hideFromNav: true
 
 ## Using this pattern
 
-This pattern uses the [`AlphaCard`](/components/layout-and-structure/alpha-card), [`AlphaStack`](/components/layout-and-structure/alpha-stack), [`Columns`](/components/layout-and-structure/columns) and [`Page`](/components/layout-and-structure/page) components.
+This pattern uses the [`AlphaCard`](/components/layout-and-structure/alpha-card), [`VerticalStack`](/components/layout-and-structure/alpha-stack), [`Columns`](/components/layout-and-structure/columns) and [`Page`](/components/layout-and-structure/page) components.
 
 <!-- prettier-ignore -->
 ```javascript {"type":"previewContext","for":"example"}
@@ -86,28 +86,28 @@ function ResourceDetailsLayout() {
       }}
     >
       <Columns columns={{xs: 1, md: '2fr 1fr'}} gap="4">
-        <AlphaStack gap="4">
+        <VerticalStack gap="4">
           <AlphaCard roundedAbove="sm">
-            <AlphaStack gap="4">
+            <VerticalStack gap="4">
               <SkeletonLabel />
               <Box border="divider" borderRadius="base" minHeight="2rem" />
               <SkeletonLabel maxWidth="8rem" />
               <Box border="divider" borderRadius="base" minHeight="20rem" />
-            </AlphaStack>
+            </VerticalStack>
           </AlphaCard>
           <AlphaCard roundedAbove="sm">
-            <AlphaStack gap="4">
+            <VerticalStack gap="4">
               <SkeletonDisplayText size="small" />
               <Columns columns={{xs: 1, md: 2}}>
                 <Box border="divider" borderRadius="base" minHeight="10rem" />
                 <Box border="divider" borderRadius="base" minHeight="10rem" />
               </Columns>
-            </AlphaStack>
+            </VerticalStack>
           </AlphaCard>
-        </AlphaStack>
-        <AlphaStack gap={{xs: '4', md: '2'}}>
+        </VerticalStack>
+        <VerticalStack gap={{xs: '4', md: '2'}}>
           <AlphaCard roundedAbove="sm">
-            <AlphaStack gap="4">
+            <VerticalStack gap="4">
               <SkeletonDisplayText size="small" />
               <Box border="divider" borderRadius="base" minHeight="2rem" />
               <Box>
@@ -118,19 +118,19 @@ function ResourceDetailsLayout() {
               <SkeletonLabel />
               <Divider />
               <SkeletonBodyText />
-            </AlphaStack>
+            </VerticalStack>
           </AlphaCard>
           <AlphaCard roundedAbove="sm">
-            <AlphaStack gap="4">
+            <VerticalStack gap="4">
               <SkeletonLabel />
               <Box border="divider" borderRadius="base" minHeight="2rem" />
               <SkeletonLabel maxWidth="4rem" />
               <Box border="divider" borderRadius="base" minHeight="2rem" />
               <SkeletonLabel />
               <SkeletonBodyText />
-            </AlphaStack>
+            </VerticalStack>
           </AlphaCard>
-        </AlphaStack>
+        </VerticalStack>
       </Columns>
     </Page>
   );
diff --git a/polaris.shopify.com/content/patterns/variant.md.template b/polaris.shopify.com/content/patterns/variant.md.template
index 3c1749732c3..39f94544a7a 100644
--- a/polaris.shopify.com/content/patterns/variant.md.template
+++ b/polaris.shopify.com/content/patterns/variant.md.template
@@ -55,7 +55,7 @@ This pattern uses the <!-- [`Box`](/components/box), ... etc --> components.
 <!-- prettier-ignore -->
 ```javascript {"type":"livePreview","id":"example"}
 <Page divider>
-  <AlphaStack gap="16">Coming Soon</AlphaStack>
+  <VerticalStack gap="16">Coming Soon</VerticalStack>
 </Page>
 ```
 
diff --git a/polaris.shopify.com/pages/examples/bleed-specific-direction.tsx b/polaris.shopify.com/pages/examples/bleed-specific-direction.tsx
index e4aefaed78c..832e1ac3dab 100644
--- a/polaris.shopify.com/pages/examples/bleed-specific-direction.tsx
+++ b/polaris.shopify.com/pages/examples/bleed-specific-direction.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import {AlphaStack, Bleed, Box, Text, Inline} from '@shopify/polaris';
+import {VerticalStack, Bleed, Box, Text, Inline} from '@shopify/polaris';
 
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function BleedSpecificDirectionExample() {
   return (
-    <AlphaStack gap="6">
+    <VerticalStack gap="6">
       <Box background="bg" border="base" padding="8">
         <Bleed marginInlineStart="8">
           <Placeholder label="marginInlineStart" />
@@ -26,7 +26,7 @@ function BleedSpecificDirectionExample() {
           <Placeholder label="marginBlockEnd" />
         </Bleed>
       </Box>
-    </AlphaStack>
+    </VerticalStack>
   );
 }
 
diff --git a/polaris.shopify.com/pages/examples/box-with-padding.tsx b/polaris.shopify.com/pages/examples/box-with-padding.tsx
index c8cb86979d6..1be15233ec2 100644
--- a/polaris.shopify.com/pages/examples/box-with-padding.tsx
+++ b/polaris.shopify.com/pages/examples/box-with-padding.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import {AlphaStack, Box, Text, Inline} from '@shopify/polaris';
+import {VerticalStack, Box, Text, Inline} from '@shopify/polaris';
 
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function BoxWithPaddingExample() {
   return (
-    <AlphaStack gap="4">
+    <VerticalStack gap="4">
       <div
         style={{
           backgroundColor: 'var(--p-color-bg-info-strong)',
@@ -40,7 +40,7 @@ function BoxWithPaddingExample() {
           </Box>
         </div>
       </Inline>
-    </AlphaStack>
+    </VerticalStack>
   );
 }
 
diff --git a/polaris.shopify.com/pages/examples/divider-with-border-color.tsx b/polaris.shopify.com/pages/examples/divider-with-border-color.tsx
index f54419b8928..dfa662c37e1 100644
--- a/polaris.shopify.com/pages/examples/divider-with-border-color.tsx
+++ b/polaris.shopify.com/pages/examples/divider-with-border-color.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import {Divider, Text, AlphaStack} from '@shopify/polaris';
+import {Divider, Text, VerticalStack} from '@shopify/polaris';
 
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function DividerWithBorderColorExample() {
   return (
-    <AlphaStack gap="5">
+    <VerticalStack gap="5">
       <Text as="h1" variant="headingXs">
         Default
       </Text>
@@ -22,7 +22,7 @@ function DividerWithBorderColorExample() {
         Transparent
       </Text>
       <Divider borderColor="transparent" />
-    </AlphaStack>
+    </VerticalStack>
   );
 }
 
diff --git a/polaris.shopify.com/pages/examples/index-table-condensed-with-views-search-filter-sorting.tsx b/polaris.shopify.com/pages/examples/index-table-condensed-with-views-search-filter-sorting.tsx
index 4f76980f4b7..b985beb26ef 100644
--- a/polaris.shopify.com/pages/examples/index-table-condensed-with-views-search-filter-sorting.tsx
+++ b/polaris.shopify.com/pages/examples/index-table-condensed-with-views-search-filter-sorting.tsx
@@ -9,7 +9,7 @@ import {
   ChoiceList,
   RangeSlider,
   Badge,
-  AlphaStack,
+  VerticalStack,
   Inline,
 } from '@shopify/polaris';
 import type {IndexFiltersProps, AlphaTabProps} from '@shopify/polaris';
@@ -310,7 +310,7 @@ function IndexTableWithViewsSearchFilterSorting() {
         position={index}
       >
         <div style={{padding: '12px 16px', width: '100%'}}>
-          <AlphaStack gap="1">
+          <VerticalStack gap="1">
             <Text as="span" variant="bodySm" color="subdued">
               {order} • {date}
             </Text>
@@ -326,7 +326,7 @@ function IndexTableWithViewsSearchFilterSorting() {
               {paymentStatus}
               {fulfillmentStatus}
             </Inline>
-          </AlphaStack>
+          </VerticalStack>
         </div>
       </IndexTable.Row>
     ),
diff --git a/polaris.shopify.com/pages/examples/index-table-small-screen.tsx b/polaris.shopify.com/pages/examples/index-table-small-screen.tsx
index 2f3d6991b01..1cbd2e6aaeb 100644
--- a/polaris.shopify.com/pages/examples/index-table-small-screen.tsx
+++ b/polaris.shopify.com/pages/examples/index-table-small-screen.tsx
@@ -5,7 +5,7 @@ import {
   Text,
   Inline,
   Badge,
-  AlphaStack,
+  VerticalStack,
 } from '@shopify/polaris';
 import React from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
@@ -60,7 +60,7 @@ function SimpleSmallScreenIndexTableExample() {
         position={index}
       >
         <div style={{padding: '12px 16px', width: '100%'}}>
-          <AlphaStack gap="1">
+          <VerticalStack gap="1">
             <Text as="span" variant="bodySm" color="subdued">
               {order} • {date}
             </Text>
@@ -76,7 +76,7 @@ function SimpleSmallScreenIndexTableExample() {
               {paymentStatus}
               {fulfillmentStatus}
             </Inline>
-          </AlphaStack>
+          </VerticalStack>
         </div>
       </IndexTable.Row>
     ),
diff --git a/polaris.shopify.com/pages/examples/inline-with-align.tsx b/polaris.shopify.com/pages/examples/inline-with-align.tsx
index dc2a7cde6b6..95bed782d37 100644
--- a/polaris.shopify.com/pages/examples/inline-with-align.tsx
+++ b/polaris.shopify.com/pages/examples/inline-with-align.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import {AlphaStack, Inline, Text, Page, Divider} from '@shopify/polaris';
+import {VerticalStack, Inline, Text, Page, Divider} from '@shopify/polaris';
 
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function InlineWithAlignExample() {
   return (
     <Page narrowWidth>
-      <AlphaStack gap="16">
+      <VerticalStack gap="16">
         <Inline align="start">
           <Placeholder width="106px" label="Start" />
           <Placeholder width="106px" height="20px" showBorder />
@@ -36,7 +36,7 @@ function InlineWithAlignExample() {
           <Placeholder width="106px" height="20px" />
           <Placeholder width="106px" height="20px" showBorder />
         </Inline>
-      </AlphaStack>
+      </VerticalStack>
     </Page>
   );
 }
diff --git a/polaris.shopify.com/pages/examples/inline-with-block-align.tsx b/polaris.shopify.com/pages/examples/inline-with-block-align.tsx
index 5a9c92b0252..6624df5a228 100644
--- a/polaris.shopify.com/pages/examples/inline-with-block-align.tsx
+++ b/polaris.shopify.com/pages/examples/inline-with-block-align.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import {Inline, Text, AlphaStack, Divider} from '@shopify/polaris';
+import {Inline, Text, VerticalStack, Divider} from '@shopify/polaris';
 
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function InlineWithBlockAlignExample() {
   return (
-    <AlphaStack gap="8">
+    <VerticalStack gap="8">
       <Inline blockAlign="start">
         <Placeholder width="106px" label="Start" />
         <Placeholder width="106px" height="20px" showBorder />
@@ -50,7 +50,7 @@ function InlineWithBlockAlignExample() {
         <Placeholder width="106px" minHeight="20px" showBorder />
         <Placeholder width="106px" minHeight="20px" showBorder />
       </Inline>
-    </AlphaStack>
+    </VerticalStack>
   );
 }
 
diff --git a/polaris.shopify.com/pages/examples/inline-with-gap.tsx b/polaris.shopify.com/pages/examples/inline-with-gap.tsx
index a2dc8ea14de..a31e4b9ada8 100644
--- a/polaris.shopify.com/pages/examples/inline-with-gap.tsx
+++ b/polaris.shopify.com/pages/examples/inline-with-gap.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import {Inline, AlphaStack} from '@shopify/polaris';
+import {Inline, VerticalStack} from '@shopify/polaris';
 
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function InlineWithGapExample() {
   return (
-    <AlphaStack>
+    <VerticalStack>
       <Inline>
         <SpacingBackground width="436px" height="20px" margin>
           <Inline gap="4" wrap={false} blockAlign="center">
@@ -22,7 +22,7 @@ function InlineWithGapExample() {
           <Placeholder width="106px" height="20px" />
         </Inline>
       </SpacingBackground>
-    </AlphaStack>
+    </VerticalStack>
   );
 }
 
diff --git a/polaris.shopify.com/pages/examples/setting-toggle-with-primitive-components.tsx b/polaris.shopify.com/pages/examples/setting-toggle-with-primitive-components.tsx
index e1a6152b9c7..c2f84348be3 100644
--- a/polaris.shopify.com/pages/examples/setting-toggle-with-primitive-components.tsx
+++ b/polaris.shopify.com/pages/examples/setting-toggle-with-primitive-components.tsx
@@ -5,7 +5,7 @@ import {
   AlphaCard,
   Button,
   Badge,
-  AlphaStack,
+  VerticalStack,
   useBreakpoints,
 } from '@shopify/polaris';
 import {CircleInformationMajor} from '@shopify/polaris-icons';
@@ -91,7 +91,7 @@ export function WithPrimitiveComponents() {
   );
 
   const descriptionMarkup = (
-    <AlphaStack gap="4">
+    <VerticalStack gap="4">
       <Text id={descriptionId} variant="bodyMd" as="p" color="subdued">
         {description}
       </Text>
@@ -100,22 +100,22 @@ export function WithPrimitiveComponents() {
           <Inline align="start">{actionMarkup}</Inline>
         </Box>
       ) : null}
-    </AlphaStack>
+    </VerticalStack>
   );
 
   return (
     <AlphaCard>
-      <AlphaStack gap={{xs: '4', sm: '5'}}>
+      <VerticalStack gap={{xs: '4', sm: '5'}}>
         <Box width="100%">
-          <AlphaStack gap={{xs: '2', sm: '4'}}>
+          <VerticalStack gap={{xs: '2', sm: '4'}}>
             {headerMarkup}
             {descriptionMarkup}
-          </AlphaStack>
+          </VerticalStack>
         </Box>
         <Text variant="bodyMd" as="p">
           Your checkout is only accepting test payments.
         </Text>
-      </AlphaStack>
+      </VerticalStack>
     </AlphaCard>
   );
 }
diff --git a/polaris.shopify.com/pages/examples/alpha-stack-with-inline-align.tsx b/polaris.shopify.com/pages/examples/veritcal-stack-with-inline-align.tsx
similarity index 76%
rename from polaris.shopify.com/pages/examples/alpha-stack-with-inline-align.tsx
rename to polaris.shopify.com/pages/examples/veritcal-stack-with-inline-align.tsx
index cd4e1d6f517..1afb2022df6 100644
--- a/polaris.shopify.com/pages/examples/alpha-stack-with-inline-align.tsx
+++ b/polaris.shopify.com/pages/examples/veritcal-stack-with-inline-align.tsx
@@ -1,30 +1,30 @@
 import React from 'react';
-import {AlphaStack, Page, Inline, Text, Divider} from '@shopify/polaris';
+import {VerticalStack, Page, Inline, Text, Divider} from '@shopify/polaris';
 
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
-function AlphaStackWithInlineAlignExample() {
+function VerticalStackWithInlineAlignExample() {
   return (
     <Page>
-      <AlphaStack gap="8">
-        <AlphaStack inlineAlign="start">
+      <VerticalStack gap="8">
+        <VerticalStack inlineAlign="start">
           <Placeholder height="48px" width="320px" label="Start" showBorder />
           <Placeholder height="48px" width="320px" showBorder />
           <Placeholder height="48px" width="320px" showBorder />
-        </AlphaStack>
+        </VerticalStack>
         <Divider />
-        <AlphaStack inlineAlign="center">
+        <VerticalStack inlineAlign="center">
           <Placeholder height="48px" width="320px" label="Center" showBorder />
           <Placeholder height="48px" width="320px" showBorder />
           <Placeholder height="48px" width="320px" showBorder />
-        </AlphaStack>
+        </VerticalStack>
         <Divider />
-        <AlphaStack inlineAlign="end">
+        <VerticalStack inlineAlign="end">
           <Placeholder height="48px" width="320px" label="End" showBorder />
           <Placeholder height="48px" width="320px" showBorder />
           <Placeholder height="48px" width="320px" showBorder />
-        </AlphaStack>
-      </AlphaStack>
+        </VerticalStack>
+      </VerticalStack>
     </Page>
   );
 }
@@ -62,4 +62,4 @@ const Placeholder = ({
   );
 };
 
-export default withPolarisExample(AlphaStackWithInlineAlignExample);
+export default withPolarisExample(VerticalStackWithInlineAlignExample);
diff --git a/polaris.shopify.com/pages/examples/alpha-card-with-varying-padding.tsx b/polaris.shopify.com/pages/examples/vertical-card-with-varying-padding.tsx
similarity index 90%
rename from polaris.shopify.com/pages/examples/alpha-card-with-varying-padding.tsx
rename to polaris.shopify.com/pages/examples/vertical-card-with-varying-padding.tsx
index 29c429b36c5..646d221df08 100644
--- a/polaris.shopify.com/pages/examples/alpha-card-with-varying-padding.tsx
+++ b/polaris.shopify.com/pages/examples/vertical-card-with-varying-padding.tsx
@@ -1,10 +1,10 @@
-import {AlphaCard, Text, AlphaStack} from '@shopify/polaris';
+import {AlphaCard, Text, VerticalStack} from '@shopify/polaris';
 import React from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function AlphaCardExample() {
   return (
-    <AlphaStack gap="4">
+    <VerticalStack gap="4">
       <AlphaCard>
         <Placeholder label="Content inside a card" />
       </AlphaCard>
@@ -17,7 +17,7 @@ function AlphaCardExample() {
       <AlphaCard padding="0">
         <Placeholder label="Content inside a card" />
       </AlphaCard>
-    </AlphaStack>
+    </VerticalStack>
   );
 }
 
diff --git a/polaris.shopify.com/pages/examples/alpha-stack-with-align.tsx b/polaris.shopify.com/pages/examples/vertical-stack-with-align.tsx
similarity index 82%
rename from polaris.shopify.com/pages/examples/alpha-stack-with-align.tsx
rename to polaris.shopify.com/pages/examples/vertical-stack-with-align.tsx
index cceacca8dd4..7df3a9a4a81 100644
--- a/polaris.shopify.com/pages/examples/alpha-stack-with-align.tsx
+++ b/polaris.shopify.com/pages/examples/vertical-stack-with-align.tsx
@@ -1,34 +1,34 @@
 import React from 'react';
-import {AlphaStack, Inline, Text, Divider} from '@shopify/polaris';
+import {VerticalStack, Inline, Text, Divider} from '@shopify/polaris';
 
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
-function AlphaStackWithAlignExample() {
+function VerticalStackWithAlignExample() {
   return (
     <>
       <Divider />
       <div style={{display: 'flex', height: '200px'}}>
-        <AlphaStack align="start">
+        <VerticalStack align="start">
           <Placeholder height="48px" width="320px" label="Start" showBorder />
           <Placeholder height="48px" width="320px" showBorder />
           <Placeholder height="48px" width="320px" showBorder />
-        </AlphaStack>
+        </VerticalStack>
       </div>
       <Divider />
       <div style={{display: 'flex', height: '200px'}}>
-        <AlphaStack align="center">
+        <VerticalStack align="center">
           <Placeholder height="48px" width="320px" label="Center" showBorder />
           <Placeholder height="48px" width="320px" showBorder />
           <Placeholder height="48px" width="320px" showBorder />
-        </AlphaStack>
+        </VerticalStack>
       </div>
       <Divider />
       <div style={{display: 'flex', height: '200px'}}>
-        <AlphaStack align="end">
+        <VerticalStack align="end">
           <Placeholder height="48px" width="320px" label="End" showBorder />
           <Placeholder height="48px" width="320px" showBorder />
           <Placeholder height="48px" width="320px" showBorder />
-        </AlphaStack>
+        </VerticalStack>
       </div>
       <Divider />
     </>
@@ -68,4 +68,4 @@ const Placeholder = ({
   );
 };
 
-export default withPolarisExample(AlphaStackWithAlignExample);
+export default withPolarisExample(VerticalStackWithAlignExample);
diff --git a/polaris.shopify.com/pages/examples/alpha-stack-with-gap.tsx b/polaris.shopify.com/pages/examples/vertical-stack-with-gap.tsx
similarity index 78%
rename from polaris.shopify.com/pages/examples/alpha-stack-with-gap.tsx
rename to polaris.shopify.com/pages/examples/vertical-stack-with-gap.tsx
index 2bb44a8c807..27a94f96731 100644
--- a/polaris.shopify.com/pages/examples/alpha-stack-with-gap.tsx
+++ b/polaris.shopify.com/pages/examples/vertical-stack-with-gap.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
-import {AlphaStack} from '@shopify/polaris';
+import {VerticalStack} from '@shopify/polaris';
 
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
-function AlphaStackWithGapExample() {
+function VerticalStackWithGapExample() {
   return (
     <SpacingBackground>
-      <AlphaStack gap="5">
+      <VerticalStack gap="5">
         <Placeholder height="48px" />
         <Placeholder height="48px" />
         <Placeholder height="48px" />
-      </AlphaStack>
+      </VerticalStack>
     </SpacingBackground>
   );
 }
@@ -40,4 +40,4 @@ const Placeholder = ({height = 'auto'}) => {
   );
 };
 
-export default withPolarisExample(AlphaStackWithGapExample);
+export default withPolarisExample(VerticalStackWithGapExample);
diff --git a/polaris.shopify.com/src/components/TipBanner/TipBanner.tsx b/polaris.shopify.com/src/components/TipBanner/TipBanner.tsx
index 4738ab7f729..5112a3fcae2 100644
--- a/polaris.shopify.com/src/components/TipBanner/TipBanner.tsx
+++ b/polaris.shopify.com/src/components/TipBanner/TipBanner.tsx
@@ -1,4 +1,4 @@
-import {AlphaStack, Icon, Inline, Text} from '@shopify/polaris';
+import {VerticalStack, Icon, Inline, Text} from '@shopify/polaris';
 import {InfoMinor} from '@shopify/polaris-icons';
 import styles from './TipBanner.module.scss';
 
@@ -10,7 +10,7 @@ interface Props {
 function TipBanner({title, message}: Props) {
   return (
     <div className={styles.TipBanner}>
-      <AlphaStack gap="2">
+      <VerticalStack gap="2">
         <Inline gap="2">
           <div>
             <Icon source={InfoMinor} color="highlight" />
@@ -20,7 +20,7 @@ function TipBanner({title, message}: Props) {
           </Text>
         </Inline>
         <p>{message}</p>
-      </AlphaStack>
+      </VerticalStack>
     </div>
   );
 }

From 3e5228b573cdd5876f89914e2207db479c5ad3c5 Mon Sep 17 00:00:00 2001
From: Alex Page <hi@alexpage.dev>
Date: Wed, 12 Apr 2023 15:56:58 +1000
Subject: [PATCH 2/9] Fix URL paths

---
 .../content/components/deprecated/text-container.md |   2 +-
 .../content/components/layout-and-structure/grid.md |   2 +-
 .../components/layout-and-structure/layout.md       |   2 +-
 .../components/layout-and-structure/legacy-stack.md |   2 +-
 .../content/components/lists/list.md                |   2 +-
 .../app-settings-layout/variants/default.md         |   2 +-
 .../patterns/date-picking/variants/date-range.md    |   2 +-
 .../resource-details-layout/variants/default.md     |   2 +-
 polaris.shopify.com/next.config.js                  |   6 +++---
 .../{alpha-stack.png => vertical-stack.png}         | Bin
 10 files changed, 11 insertions(+), 11 deletions(-)
 rename polaris.shopify.com/public/images/components/layout-and-structure/{alpha-stack.png => vertical-stack.png} (100%)

diff --git a/polaris.shopify.com/content/components/deprecated/text-container.md b/polaris.shopify.com/content/components/deprecated/text-container.md
index 7d720ba8995..d65af769123 100644
--- a/polaris.shopify.com/content/components/deprecated/text-container.md
+++ b/polaris.shopify.com/content/components/deprecated/text-container.md
@@ -37,4 +37,4 @@ The closer the spacing, the closer the relationship between content topics. The
 
 ## Related components
 
-- For more layout variations, or if you’re looking to vertically space components other than text, use [Stack](https://polaris.shopify.com/components/layout-and-structure/alpha-stack).
+- For more layout variations, or if you’re looking to vertically space components other than text, use [Stack](https://polaris.shopify.com/components/layout-and-structure/vertical-stack).
diff --git a/polaris.shopify.com/content/components/layout-and-structure/grid.md b/polaris.shopify.com/content/components/layout-and-structure/grid.md
index 83384df4c4e..3eeb41ed1b4 100644
--- a/polaris.shopify.com/content/components/layout-and-structure/grid.md
+++ b/polaris.shopify.com/content/components/layout-and-structure/grid.md
@@ -33,5 +33,5 @@ examples:
 
 ## Related components
 
-- To lay out a set of smaller components in a row, [use the stack component](https://polaris.shopify.com/components/layout-and-structure/alpha-stack)
+- To lay out a set of smaller components in a row, [use the stack component](https://polaris.shopify.com/components/layout-and-structure/vertical-stack)
 - To lay out form fields, [use the form layout component](https://polaris.shopify.com/components/form-layout)
diff --git a/polaris.shopify.com/content/components/layout-and-structure/layout.md b/polaris.shopify.com/content/components/layout-and-structure/layout.md
index cd76f39bc4b..ecda59e74ae 100644
--- a/polaris.shopify.com/content/components/layout-and-structure/layout.md
+++ b/polaris.shopify.com/content/components/layout-and-structure/layout.md
@@ -81,5 +81,5 @@ Annotated section descriptions should:
 ## Related components
 
 - To visually group content in a layout section, [use the card component](https://polaris.shopify.com/components/layout-and-structure/alpha-card)
-- To lay out a set of smaller components in a row, [use the stack component](https://polaris.shopify.com/components/layout-and-structure/alpha-stack)
+- To lay out a set of smaller components in a row, [use the stack component](https://polaris.shopify.com/components/layout-and-structure/vertical-stack)
 - To lay out form fields, [use the form layout component](https://polaris.shopify.com/components/form-layout)
diff --git a/polaris.shopify.com/content/components/layout-and-structure/legacy-stack.md b/polaris.shopify.com/content/components/layout-and-structure/legacy-stack.md
index d84ec9091eb..6763bd4671b 100644
--- a/polaris.shopify.com/content/components/layout-and-structure/legacy-stack.md
+++ b/polaris.shopify.com/content/components/layout-and-structure/legacy-stack.md
@@ -20,7 +20,7 @@ keywords:
   - legacy stack
 status:
   value: Legacy
-  message: This is a legacy component and will be deprecated. The new [VerticalStack component](/components/layout-and-structure/alpha-stack) can be used in combination with the new layout primitives to achieve similar results to LegacyStack. Learn more about our [component lifecycles](/getting-started/components-lifecycle).
+  message: This is a legacy component and will be deprecated. The new [VerticalStack component](/components/layout-and-structure/vertical-stack) can be used in combination with the new layout primitives to achieve similar results to LegacyStack. Learn more about our [component lifecycles](/getting-started/components-lifecycle).
 examples:
   - fileName: legacy-stack-default.tsx
     title: Default
diff --git a/polaris.shopify.com/content/components/lists/list.md b/polaris.shopify.com/content/components/lists/list.md
index 5cfacabf5ba..f3398e4cd44 100644
--- a/polaris.shopify.com/content/components/lists/list.md
+++ b/polaris.shopify.com/content/components/lists/list.md
@@ -88,4 +88,4 @@ Every item in a list should:
 
 The list component outputs list items (`<li>`) inside a list wrapper (`<ul>` for bullet lists or `<ol>` for numbered lists). By default, list items are conveyed as a group of related elements to assistive technology users.
 
-To group items for layout only, consider using the [stack component](https://polaris.shopify.com/components/layout-and-structure/alpha-stack).
+To group items for layout only, consider using the [stack component](https://polaris.shopify.com/components/layout-and-structure/vertical-stack).
diff --git a/polaris.shopify.com/content/patterns/app-settings-layout/variants/default.md b/polaris.shopify.com/content/patterns/app-settings-layout/variants/default.md
index e5f3b6b3c25..2565d54f343 100644
--- a/polaris.shopify.com/content/patterns/app-settings-layout/variants/default.md
+++ b/polaris.shopify.com/content/patterns/app-settings-layout/variants/default.md
@@ -24,7 +24,7 @@ hideFromNav: true
 
 ## Using this pattern
 
-This pattern uses the [`VerticalStack`](/components/layout-and-structure/alpha-stack), [`AlphaCard`](/components/layout-and-structure/alpha-card), [`Columns`](/components/layout-and-structure/columns) and [`Box`](/components/layout-and-structure/box) components.
+This pattern uses the [`VerticalStack`](/components/layout-and-structure/vertical-stack), [`AlphaCard`](/components/layout-and-structure/alpha-card), [`Columns`](/components/layout-and-structure/columns) and [`Box`](/components/layout-and-structure/box) components.
 
 <!-- prettier-ignore -->
 ```javascript {"type":"previewContext","for":"example"}
diff --git a/polaris.shopify.com/content/patterns/date-picking/variants/date-range.md b/polaris.shopify.com/content/patterns/date-picking/variants/date-range.md
index db3f8e4df29..4f91c57ba09 100644
--- a/polaris.shopify.com/content/patterns/date-picking/variants/date-range.md
+++ b/polaris.shopify.com/content/patterns/date-picking/variants/date-range.md
@@ -32,7 +32,7 @@ This enables merchants to select a date range.
 
 ## Using this pattern
 
-This pattern uses the [`VerticalStack`](/components/layout-and-structure/alpha-stack), [`Box`](/components/layout-and-structure/box), [`Button`](/components/actions/button), [`Columns`](/components/layout-and-structure/columns), [`DatePicker`](/components/selection-and-input/date-picker), [`Inline`](/components/layout-and-structure/inline), [`OptionList`](/components/lists/option-list), [`Popover`](/components/overlays/popover) and [`TextField`](/components/selection-and-input/text-field) components.
+This pattern uses the [`VerticalStack`](/components/layout-and-structure/vertical-stack), [`Box`](/components/layout-and-structure/box), [`Button`](/components/actions/button), [`Columns`](/components/layout-and-structure/columns), [`DatePicker`](/components/selection-and-input/date-picker), [`Inline`](/components/layout-and-structure/inline), [`OptionList`](/components/lists/option-list), [`Popover`](/components/overlays/popover) and [`TextField`](/components/selection-and-input/text-field) components.
 
 <!-- prettier-ignore -->
 ```javascript {"type":"previewContext","for":"example"}
diff --git a/polaris.shopify.com/content/patterns/resource-details-layout/variants/default.md b/polaris.shopify.com/content/patterns/resource-details-layout/variants/default.md
index a50af75b1a4..c82865052ca 100644
--- a/polaris.shopify.com/content/patterns/resource-details-layout/variants/default.md
+++ b/polaris.shopify.com/content/patterns/resource-details-layout/variants/default.md
@@ -28,7 +28,7 @@ hideFromNav: true
 
 ## Using this pattern
 
-This pattern uses the [`AlphaCard`](/components/layout-and-structure/alpha-card), [`VerticalStack`](/components/layout-and-structure/alpha-stack), [`Columns`](/components/layout-and-structure/columns) and [`Page`](/components/layout-and-structure/page) components.
+This pattern uses the [`AlphaCard`](/components/layout-and-structure/alpha-card), [`VerticalStack`](/components/layout-and-structure/vertical-stack), [`Columns`](/components/layout-and-structure/columns) and [`Page`](/components/layout-and-structure/page) components.
 
 <!-- prettier-ignore -->
 ```javascript {"type":"previewContext","for":"example"}
diff --git a/polaris.shopify.com/next.config.js b/polaris.shopify.com/next.config.js
index 734c2a10485..7a8e5215404 100644
--- a/polaris.shopify.com/next.config.js
+++ b/polaris.shopify.com/next.config.js
@@ -341,8 +341,8 @@ const layoutAndStructure = [
     permanent: false,
   },
   {
-    source: '/components/alpha-stack',
-    destination: '/components/layout-and-structure/alpha-stack',
+    source: '/components/vertical-stack',
+    destination: '/components/layout-and-structure/vertical-stack',
     permanent: false,
   },
   {
@@ -442,7 +442,7 @@ const layoutAndStructure = [
   },
   {
     source: '/components/layout-and-structure/stack',
-    destination: '/components/layout-and-structure/alpha-stack',
+    destination: '/components/layout-and-structure/vertical-stack',
     permanent: false,
   },
 ];
diff --git a/polaris.shopify.com/public/images/components/layout-and-structure/alpha-stack.png b/polaris.shopify.com/public/images/components/layout-and-structure/vertical-stack.png
similarity index 100%
rename from polaris.shopify.com/public/images/components/layout-and-structure/alpha-stack.png
rename to polaris.shopify.com/public/images/components/layout-and-structure/vertical-stack.png

From 914cbb7e1cf835a731ce0e4908b030980e412477 Mon Sep 17 00:00:00 2001
From: Alex Page <hi@alexpage.dev>
Date: Wed, 12 Apr 2023 15:58:57 +1000
Subject: [PATCH 3/9] Create silly-meals-hang.md

---
 .changeset/silly-meals-hang.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/silly-meals-hang.md

diff --git a/.changeset/silly-meals-hang.md b/.changeset/silly-meals-hang.md
new file mode 100644
index 00000000000..f18d47bbb0a
--- /dev/null
+++ b/.changeset/silly-meals-hang.md
@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': minor
+'polaris.shopify.com': minor
+---
+
+Rename AlphaStack to VerticalStack

From 5235c4c45fe66d36087fab168f9c6f27cc458e16 Mon Sep 17 00:00:00 2001
From: Alex Page <hi@alexpage.dev>
Date: Wed, 12 Apr 2023 16:00:28 +1000
Subject: [PATCH 4/9] Update inline.md

---
 .../content/components/layout-and-structure/inline.md           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/polaris.shopify.com/content/components/layout-and-structure/inline.md b/polaris.shopify.com/content/components/layout-and-structure/inline.md
index f71a6a6b22f..78b19e0444e 100644
--- a/polaris.shopify.com/content/components/layout-and-structure/inline.md
+++ b/polaris.shopify.com/content/components/layout-and-structure/inline.md
@@ -39,7 +39,7 @@ examples:
 ## Related components
 
 - To create the large-scale structure of pages, [use the Columns component](https://polaris.shopify.com/components/layout-and-structure/columns)
-- To display elements vertically, [use the VerticalStack component](https://polaris.shopify.com/components/alphastack)
+- To display elements vertically, [use the VerticalStack component](https://polaris.shopify.com/components/vertical-stack)
 
 ## Related resources
 

From 8d6b0a602f440b0ca7a3b44ba4799ac531bbcb35 Mon Sep 17 00:00:00 2001
From: Lo Kim <lo.kim@shopify.com>
Date: Wed, 12 Apr 2023 08:09:48 -0400
Subject: [PATCH 5/9] Update
 polaris.shopify.com/content/components/layout-and-structure/vertical-stack.md

---
 .../content/components/layout-and-structure/vertical-stack.md   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/polaris.shopify.com/content/components/layout-and-structure/vertical-stack.md b/polaris.shopify.com/content/components/layout-and-structure/vertical-stack.md
index 1f83b90ceaf..4c483902f2f 100644
--- a/polaris.shopify.com/content/components/layout-and-structure/vertical-stack.md
+++ b/polaris.shopify.com/content/components/layout-and-structure/vertical-stack.md
@@ -1,5 +1,5 @@
 ---
-title: VerticalStack
+title: Vertical stack
 description: Use to display children vertically and horizontally with full width by default. Based on CSS Flexbox.
 category: Layout and structure
 keywords:

From 3026cc6fd11661731c7db443289643b627d38587 Mon Sep 17 00:00:00 2001
From: Lo Kim <lo.kim@shopify.com>
Date: Wed, 12 Apr 2023 08:11:00 -0400
Subject: [PATCH 6/9] Update .changeset/silly-meals-hang.md

---
 .changeset/silly-meals-hang.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/silly-meals-hang.md b/.changeset/silly-meals-hang.md
index f18d47bbb0a..8bb3f457a1e 100644
--- a/.changeset/silly-meals-hang.md
+++ b/.changeset/silly-meals-hang.md
@@ -3,4 +3,4 @@
 'polaris.shopify.com': minor
 ---
 
-Rename AlphaStack to VerticalStack
+Renamed AlphaStack to VerticalStack

From 3566ff9ceaf8f3df38ea462b47499e1f3e582323 Mon Sep 17 00:00:00 2001
From: Lo Kim <lo.kim@shopify.com>
Date: Wed, 12 Apr 2023 08:15:32 -0400
Subject: [PATCH 7/9] Fix file names

---
 ...th-varying-padding.tsx => alpha-card-with-varying-padding.tsx} | 0
 ...with-inline-align.tsx => vertical-stack-with-inline-align.tsx} | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 rename polaris.shopify.com/pages/examples/{vertical-card-with-varying-padding.tsx => alpha-card-with-varying-padding.tsx} (100%)
 rename polaris.shopify.com/pages/examples/{veritcal-stack-with-inline-align.tsx => vertical-stack-with-inline-align.tsx} (100%)

diff --git a/polaris.shopify.com/pages/examples/vertical-card-with-varying-padding.tsx b/polaris.shopify.com/pages/examples/alpha-card-with-varying-padding.tsx
similarity index 100%
rename from polaris.shopify.com/pages/examples/vertical-card-with-varying-padding.tsx
rename to polaris.shopify.com/pages/examples/alpha-card-with-varying-padding.tsx
diff --git a/polaris.shopify.com/pages/examples/veritcal-stack-with-inline-align.tsx b/polaris.shopify.com/pages/examples/vertical-stack-with-inline-align.tsx
similarity index 100%
rename from polaris.shopify.com/pages/examples/veritcal-stack-with-inline-align.tsx
rename to polaris.shopify.com/pages/examples/vertical-stack-with-inline-align.tsx

From 0ccf11df45a284d219e1b3f9f091241c5064776d Mon Sep 17 00:00:00 2001
From: Lo Kim <lo.kim@shopify.com>
Date: Wed, 12 Apr 2023 11:33:14 -0400
Subject: [PATCH 8/9] Undo changelog changes

---
 polaris.shopify.com/CHANGELOG.md | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/polaris.shopify.com/CHANGELOG.md b/polaris.shopify.com/CHANGELOG.md
index da29dccb392..2112a00f8a6 100644
--- a/polaris.shopify.com/CHANGELOG.md
+++ b/polaris.shopify.com/CHANGELOG.md
@@ -149,7 +149,7 @@
 
 * [#8700](https://github.com/Shopify/polaris/pull/8700) [`47b03e639`](https://github.com/Shopify/polaris/commit/47b03e63956c3fd5a6e9ae479256c5b49a25882e) Thanks [@kyledurand](https://github.com/kyledurand)! - Added inheritance examples to Text component
 
-- [#8676](https://github.com/Shopify/polaris/pull/8676) [`b4a1c451f`](https://github.com/Shopify/polaris/commit/b4a1c451f9f911f81cd8c3d34b3a07743e72a346) Thanks [@laurkim](https://github.com/laurkim)! - Updated `VerticalStack` to support horizontal alignment with `inlineAlign` and vertical alignment with `align`
+- [#8676](https://github.com/Shopify/polaris/pull/8676) [`b4a1c451f`](https://github.com/Shopify/polaris/commit/b4a1c451f9f911f81cd8c3d34b3a07743e72a346) Thanks [@laurkim](https://github.com/laurkim)! - Updated `AlphaStack` to support horizontal alignment with `inlineAlign` and vertical alignment with `align`
 
 * [#8683](https://github.com/Shopify/polaris/pull/8683) [`41fc7726b`](https://github.com/Shopify/polaris/commit/41fc7726b19af606766e23291438660d93936879) Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed typescript converted codesandbox examples
 
@@ -175,7 +175,7 @@
 
 - [#8674](https://github.com/Shopify/polaris/pull/8674) [`8d7e45a8d`](https://github.com/Shopify/polaris/commit/8d7e45a8d289094f15eb7693d7fa22306a1127bc) Thanks [@martenbjork](https://github.com/martenbjork)! - Add Typescript typings to Banner examples
 
-* [#8673](https://github.com/Shopify/polaris/pull/8673) [`9beee4850`](https://github.com/Shopify/polaris/commit/9beee4850e936c4f159b49a3b7a00ffe3cf85a53) Thanks [@martenbjork](https://github.com/martenbjork)! - Add Typescript typings to VerticalStack examples
+* [#8673](https://github.com/Shopify/polaris/pull/8673) [`9beee4850`](https://github.com/Shopify/polaris/commit/9beee4850e936c4f159b49a3b7a00ffe3cf85a53) Thanks [@martenbjork](https://github.com/martenbjork)! - Add Typescript typings to AlphaStack examples
 
 * Updated dependencies [[`243fd6224`](https://github.com/Shopify/polaris/commit/243fd622406612370efe40dd32dcd2025cf53db7), [`d340f8471`](https://github.com/Shopify/polaris/commit/d340f8471d330e8562c0dbb67d9f3aeae8699b65)]:
   - @shopify/polaris@10.37.0
@@ -198,9 +198,9 @@
 
 * [#8622](https://github.com/Shopify/polaris/pull/8622) [`613f637c9`](https://github.com/Shopify/polaris/commit/613f637c923f18b51faf8707f185513eaff028f8) Thanks [@gwyneplaine](https://github.com/gwyneplaine)! - Fix minor layout bugs in app-settings-layout pattern code example
 
-- [#8379](https://github.com/Shopify/polaris/pull/8379) [`c8207636c`](https://github.com/Shopify/polaris/commit/c8207636cfd9493da8e0b5b1aaa4de01a5e521de) Thanks [@nayeobkim](https://github.com/nayeobkim)! - Updated documentation and guidance for `AlphaCard`, `VerticalStack`, `Box`, `Bleed`, `Columns`, and `Inline`
+- [#8379](https://github.com/Shopify/polaris/pull/8379) [`c8207636c`](https://github.com/Shopify/polaris/commit/c8207636cfd9493da8e0b5b1aaa4de01a5e521de) Thanks [@nayeobkim](https://github.com/nayeobkim)! - Updated documentation and guidance for `AlphaCard`, `AlphaStack`, `Box`, `Bleed`, `Columns`, and `Inline`
 
-* [#8614](https://github.com/Shopify/polaris/pull/8614) [`3526fc2fc`](https://github.com/Shopify/polaris/commit/3526fc2fcd3756024ad85bb8b107f9c7a36a7f74) Thanks [@laurkim](https://github.com/laurkim)! - Added best practices to `Text`, `AlphaCard`, and `VerticalStack`
+* [#8614](https://github.com/Shopify/polaris/pull/8614) [`3526fc2fc`](https://github.com/Shopify/polaris/commit/3526fc2fcd3756024ad85bb8b107f9c7a36a7f74) Thanks [@laurkim](https://github.com/laurkim)! - Added best practices to `Text`, `AlphaCard`, and `AlphaStack`
 
 - [#8616](https://github.com/Shopify/polaris/pull/8616) [`74f0bc42a`](https://github.com/Shopify/polaris/commit/74f0bc42a9eb4107328fed0bb13077e97853c597) Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed icon page layout
 
@@ -404,7 +404,7 @@
 ### Patch Changes
 
 - [#8285](https://github.com/Shopify/polaris/pull/8285) [`e70f70862`](https://github.com/Shopify/polaris/commit/e70f7086261b7f036b90550a432bf9d72e7ed8a4) Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed contrast issue on alpha status badge
-  Added default value to prop documentation for VerticalStack
+  Added default value to prop documentation for AlphaStack
 - Updated dependencies [[`e70f70862`](https://github.com/Shopify/polaris/commit/e70f7086261b7f036b90550a432bf9d72e7ed8a4), [`20bb1a668`](https://github.com/Shopify/polaris/commit/20bb1a668dcde8fcb87da35d5caaef2f0e387c01), [`f335aaf99`](https://github.com/Shopify/polaris/commit/f335aaf9968ff87b38559572f51a92b413f8aecd)]:
   - @shopify/polaris@10.27.1
 
@@ -541,7 +541,7 @@
 
 ### Minor Changes
 
-- [#7963](https://github.com/Shopify/polaris/pull/7963) [`f94cf1496`](https://github.com/Shopify/polaris/commit/f94cf149693eb7f1860eacda8c38cc5f5039dffe) Thanks [@aveline](https://github.com/aveline)! - Updated `VerticalStack` docs for `align` prop
+- [#7963](https://github.com/Shopify/polaris/pull/7963) [`f94cf1496`](https://github.com/Shopify/polaris/commit/f94cf149693eb7f1860eacda8c38cc5f5039dffe) Thanks [@aveline](https://github.com/aveline)! - Updated `AlphaStack` docs for `align` prop
 
 ### Patch Changes
 
@@ -597,7 +597,7 @@
 
 ### Patch Changes
 
-- [#7745](https://github.com/Shopify/polaris/pull/7745) [`70ed3137b`](https://github.com/Shopify/polaris/commit/70ed3137b7cb201ccb0b3715340d9f7794dd611d) Thanks [@laurkim](https://github.com/laurkim)! - Updated alpha status message that documentation is in development for `Bleed`, `Columns`, `Tiles`, `Inline`, `AlphaCard`, `VerticalStack`, and `Box`
+- [#7745](https://github.com/Shopify/polaris/pull/7745) [`70ed3137b`](https://github.com/Shopify/polaris/commit/70ed3137b7cb201ccb0b3715340d9f7794dd611d) Thanks [@laurkim](https://github.com/laurkim)! - Updated alpha status message that documentation is in development for `Bleed`, `Columns`, `Tiles`, `Inline`, `AlphaCard`, `AlphaStack`, and `Box`
 
 * [#7803](https://github.com/Shopify/polaris/pull/7803) [`23665dfd2`](https://github.com/Shopify/polaris/commit/23665dfd2b90ca7487f83560c148fe1d1f34dbe3) Thanks [@aveline](https://github.com/aveline)! - Added support for `ul` element on `Box`
 
@@ -613,13 +613,13 @@
 
 * [#7757](https://github.com/Shopify/polaris/pull/7757) [`f9e1985c9`](https://github.com/Shopify/polaris/commit/f9e1985c91e111bad0a1f35551c0c6293b16f132) Thanks [@aveline](https://github.com/aveline)! - Fixed typo in `responsive-props` mixin. Added jsdoc examples for responsive spacing props in `Box`.
 
-- [#7764](https://github.com/Shopify/polaris/pull/7764) [`9ab44a69f`](https://github.com/Shopify/polaris/commit/9ab44a69f96b9454803a2e22c70e0a5c8b0cfa85) Thanks [@laurkim](https://github.com/laurkim)! - Cleaned up prop descriptions and added missing default values for `Box`, `AlphaCard`, `VerticalStack`, `Columns`, `Tiles`, `Bleed`, and `Inline`
+- [#7764](https://github.com/Shopify/polaris/pull/7764) [`9ab44a69f`](https://github.com/Shopify/polaris/commit/9ab44a69f96b9454803a2e22c70e0a5c8b0cfa85) Thanks [@laurkim](https://github.com/laurkim)! - Cleaned up prop descriptions and added missing default values for `Box`, `AlphaCard`, `AlphaStack`, `Columns`, `Tiles`, `Bleed`, and `Inline`
 
-* [#7767](https://github.com/Shopify/polaris/pull/7767) [`cb24dbb9e`](https://github.com/Shopify/polaris/commit/cb24dbb9e0806f218a67dfec6f2cdce039dc0f7d) Thanks [@aveline](https://github.com/aveline)! - Updated `Box` and `VerticalStack` to accept aria attributes
+* [#7767](https://github.com/Shopify/polaris/pull/7767) [`cb24dbb9e`](https://github.com/Shopify/polaris/commit/cb24dbb9e0806f218a67dfec6f2cdce039dc0f7d) Thanks [@aveline](https://github.com/aveline)! - Updated `Box` and `AlphaStack` to accept aria attributes
 
 - [#7778](https://github.com/Shopify/polaris/pull/7778) [`e0c64cd5b`](https://github.com/Shopify/polaris/commit/e0c64cd5b15569c36504d535b8dae6599a1027a4) Thanks [@laurkim](https://github.com/laurkim)! - Removed link to deleted `Tiles` component and cleaned up links
 
-* [#7748](https://github.com/Shopify/polaris/pull/7748) [`ed3da747e`](https://github.com/Shopify/polaris/commit/ed3da747e1d70dfbcdfb907b13230f1d174cb0d1) Thanks [@laurkim](https://github.com/laurkim)! - Renamed `spacing` prop to `gap` on `Inline`, `VerticalStack`, `Columns`, and `Tiles`
+* [#7748](https://github.com/Shopify/polaris/pull/7748) [`ed3da747e`](https://github.com/Shopify/polaris/commit/ed3da747e1d70dfbcdfb907b13230f1d174cb0d1) Thanks [@laurkim](https://github.com/laurkim)! - Renamed `spacing` prop to `gap` on `Inline`, `AlphaStack`, `Columns`, and `Tiles`
 
 - [#7744](https://github.com/Shopify/polaris/pull/7744) [`28220456f`](https://github.com/Shopify/polaris/commit/28220456f67bb4e6e2df19ceb334635ca2d0f3a5) Thanks [@laurkim](https://github.com/laurkim)! - Fixed mapping for `TextStyle` `variation="strong"` to use `Text` `fontWeight="semibold"` instead of `fontWeight="bold"`
 
@@ -645,7 +645,7 @@
 
 ### Patch Changes
 
-- [#7711](https://github.com/Shopify/polaris/pull/7711) [`3984f26b6`](https://github.com/Shopify/polaris/commit/3984f26b69b93bf621392e16e2d842619c4fbdd4) Thanks [@nayeobkim](https://github.com/nayeobkim)! - Updated the related components copy in `VerticalStack`
+- [#7711](https://github.com/Shopify/polaris/pull/7711) [`3984f26b6`](https://github.com/Shopify/polaris/commit/3984f26b69b93bf621392e16e2d842619c4fbdd4) Thanks [@nayeobkim](https://github.com/nayeobkim)! - Updated the related components copy in `AlphaStack`
 
 * [#7569](https://github.com/Shopify/polaris/pull/7569) [`ffe1e9230`](https://github.com/Shopify/polaris/commit/ffe1e923092df65906ed7aeb0944bdfb8cb2375b) Thanks [@chazdean](https://github.com/chazdean)! - Updated `Tiles` component guidance and examples
 
@@ -747,7 +747,7 @@
 
 - [#7452](https://github.com/Shopify/polaris/pull/7452) [`8a05e840f`](https://github.com/Shopify/polaris/commit/8a05e840f0594e9d3ffa38397cb8d8e482fc97b6) Thanks [@gui-santos](https://github.com/gui-santos)! - fix visual bug in token page's navigation where text was breaking into two lines
 
-* [#7469](https://github.com/Shopify/polaris/pull/7469) [`a8d80cfd5`](https://github.com/Shopify/polaris/commit/a8d80cfd5630b659a10cf950d07fd91562b63814) Thanks [@chazdean](https://github.com/chazdean)! - Updated `VerticalStack` component docs
+* [#7469](https://github.com/Shopify/polaris/pull/7469) [`a8d80cfd5`](https://github.com/Shopify/polaris/commit/a8d80cfd5630b659a10cf950d07fd91562b63814) Thanks [@chazdean](https://github.com/chazdean)! - Updated `AlphaStack` component docs
 
 - [#7483](https://github.com/Shopify/polaris/pull/7483) [`7a78e07bf`](https://github.com/Shopify/polaris/commit/7a78e07bf1abb271b1f6bbd10042c24b6caddd85) Thanks [@laurkim](https://github.com/laurkim)! - Fixed missing `children` prop in `Columns` prop type
 
@@ -806,7 +806,7 @@
 
 ### Minor Changes
 
-- [#7056](https://github.com/Shopify/polaris/pull/7056) [`0be40aa94`](https://github.com/Shopify/polaris/commit/0be40aa94be8c95f96f0835b4df7f91f6da0b5c2) Thanks [@laurkim](https://github.com/laurkim)! - Added alpha pages for `VerticalStack`, `Box`, `Columns`, `Inline`, and `Tile` components. Updated `StatusBanner` to capitalize status value.
+- [#7056](https://github.com/Shopify/polaris/pull/7056) [`0be40aa94`](https://github.com/Shopify/polaris/commit/0be40aa94be8c95f96f0835b4df7f91f6da0b5c2) Thanks [@laurkim](https://github.com/laurkim)! - Added alpha pages for `AlphaStack`, `Box`, `Columns`, `Inline`, and `Tile` components. Updated `StatusBanner` to capitalize status value.
 
 * [#7353](https://github.com/Shopify/polaris/pull/7353) [`558b1cfae`](https://github.com/Shopify/polaris/commit/558b1cfae4b855f50b6fe69b3209e4aec4bc80c8) Thanks [@kyledurand](https://github.com/kyledurand)! - Ported codesandbox init code to React 18
 
@@ -828,7 +828,7 @@
 
 - [#7056](https://github.com/Shopify/polaris/pull/7056) [`0be40aa94`](https://github.com/Shopify/polaris/commit/0be40aa94be8c95f96f0835b4df7f91f6da0b5c2) Thanks [@laurkim](https://github.com/laurkim)! - Renamed `AlphaCard` `shadow` prop
 
-* [#7056](https://github.com/Shopify/polaris/pull/7056) [`0be40aa94`](https://github.com/Shopify/polaris/commit/0be40aa94be8c95f96f0835b4df7f91f6da0b5c2) Thanks [@laurkim](https://github.com/laurkim)! - Added `fullWidth` prop to `VerticalStack` and updated styleguide docs
+* [#7056](https://github.com/Shopify/polaris/pull/7056) [`0be40aa94`](https://github.com/Shopify/polaris/commit/0be40aa94be8c95f96f0835b4df7f91f6da0b5c2) Thanks [@laurkim](https://github.com/laurkim)! - Added `fullWidth` prop to `AlphaStack` and updated styleguide docs
 
 - [#7311](https://github.com/Shopify/polaris/pull/7311) [`fc05e3152`](https://github.com/Shopify/polaris/commit/fc05e31520b1ee4483a54a889a44fb3ac0959a62) Thanks [@martenbjork](https://github.com/martenbjork)! - Improved the layout on mobile
 

From 5e0a11dbeb74979c05c137b68ba3eec51ecc0e4c Mon Sep 17 00:00:00 2001
From: Lo Kim <lo.kim@shopify.com>
Date: Wed, 12 Apr 2023 11:48:58 -0400
Subject: [PATCH 9/9] Update .changeset/silly-meals-hang.md

Co-authored-by: Chloe Rice <chloerice@users.noreply.github.com>
---
 .changeset/silly-meals-hang.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/silly-meals-hang.md b/.changeset/silly-meals-hang.md
index 8bb3f457a1e..bb5eedc4238 100644
--- a/.changeset/silly-meals-hang.md
+++ b/.changeset/silly-meals-hang.md
@@ -3,4 +3,4 @@
 'polaris.shopify.com': minor
 ---
 
-Renamed AlphaStack to VerticalStack
+Renamed `AlphaStack` to `VerticalStack`