diff --git a/.changeset/light-mails-type.md b/.changeset/light-mails-type.md
new file mode 100644
index 00000000000..129a997ab95
--- /dev/null
+++ b/.changeset/light-mails-type.md
@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': minor
+'polaris.shopify.com': minor
+---
+
+Replaced `Stack` with `AlphaStack`
diff --git a/polaris-react/src/components/AccountConnection/AccountConnection.tsx b/polaris-react/src/components/AccountConnection/AccountConnection.tsx
index a06b429f856..64790a4a107 100644
--- a/polaris-react/src/components/AccountConnection/AccountConnection.tsx
+++ b/polaris-react/src/components/AccountConnection/AccountConnection.tsx
@@ -8,7 +8,7 @@ import {Card} from '../Card';
 import {Box} from '../Box';
 import {Inline} from '../Inline';
 import {Text} from '../Text';
-import {AlphaStack} from '../AlphaStack';
+import {Stack} from '../Stack';
 
 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">
+          <Stack gap="2">
             {titleMarkup}
             {detailsMarkup}
-          </AlphaStack>
+          </Stack>
         </Inline>
       </SettingAction>
       {termsOfServiceMarkup}
diff --git a/polaris-react/src/components/AlphaStack/AlphaStack.scss b/polaris-react/src/components/AlphaStack/AlphaStack.scss
deleted file mode 100644
index 23380cc37b1..00000000000
--- a/polaris-react/src/components/AlphaStack/AlphaStack.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-@import '../../styles/common';
-
-.AlphaStack {
-  // stylelint-disable -- Polaris component custom properties
-  --pc-stack-gap-xs: 0;
-  --pc-stack-gap-sm: var(--pc-stack-gap-xs);
-  --pc-stack-gap-md: var(--pc-stack-gap-sm);
-  --pc-stack-gap-lg: var(--pc-stack-gap-md);
-  --pc-stack-gap-xl: var(--pc-stack-gap-lg);
-  // stylelint-enable
-
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  display: flex;
-  // stylelint-disable-next-line -- local component custom property is required for flex direction
-  flex-direction: var(--pc-stack-order);
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  align-items: var(--pc-stack-align);
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  gap: var(--pc-stack-gap-xs);
-
-  @media #{$p-breakpoints-sm-up} {
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    gap: var(--pc-stack-gap-sm);
-  }
-
-  @media #{$p-breakpoints-md-up} {
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    gap: var(--pc-stack-gap-md);
-  }
-
-  @media #{$p-breakpoints-lg-up} {
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    gap: var(--pc-stack-gap-lg);
-  }
-
-  @media #{$p-breakpoints-xl-up} {
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    gap: var(--pc-stack-gap-xl);
-  }
-}
-
-.listReset {
-  list-style-type: none;
-  margin-block-start: 0;
-  margin-block-end: 0;
-  padding-inline-start: 0;
-}
-
-.fieldsetReset {
-  border: none;
-  margin: 0;
-  padding: 0;
-}
-
-.fullWidth {
-  > * {
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    width: 100%;
-  }
-}
diff --git a/polaris-react/src/components/AlphaStack/AlphaStack.stories.tsx b/polaris-react/src/components/AlphaStack/AlphaStack.stories.tsx
deleted file mode 100644
index ceac4cd8c78..00000000000
--- a/polaris-react/src/components/AlphaStack/AlphaStack.stories.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import React from 'react';
-import type {ComponentMeta} from '@storybook/react';
-import {Box, AlphaStack} from '@shopify/polaris';
-
-export default {
-  component: AlphaStack,
-} as ComponentMeta<typeof AlphaStack>;
-
-export function Default() {
-  return (
-    <AlphaStack>
-      <Box background="surface" padding="1">
-        01
-      </Box>
-      <Box background="surface" padding="1">
-        02
-      </Box>
-      <Box background="surface" padding="1">
-        03
-      </Box>
-    </AlphaStack>
-  );
-}
-
-export function WithGap() {
-  return (
-    <AlphaStack gap="8">
-      <Box background="surface" padding="1">
-        01
-      </Box>
-      <Box background="surface" padding="1">
-        02
-      </Box>
-      <Box background="surface" padding="1">
-        03
-      </Box>
-    </AlphaStack>
-  );
-}
-
-export function WithResponsiveGap() {
-  return (
-    <AlphaStack gap={{xs: '4', md: '10'}}>
-      <Box background="surface" padding="1">
-        01
-      </Box>
-      <Box background="surface" padding="1">
-        02
-      </Box>
-      <Box background="surface" padding="1">
-        03
-      </Box>
-    </AlphaStack>
-  );
-}
-
-export function WithAlignStart() {
-  return (
-    <AlphaStack gap="4" align="start">
-      <Box background="surface" padding="1">
-        01
-      </Box>
-      <Box background="surface" padding="1">
-        02
-      </Box>
-      <Box background="surface" padding="1">
-        03
-      </Box>
-    </AlphaStack>
-  );
-}
-
-export function WithAlignCenter() {
-  return (
-    <AlphaStack gap="4" align="center">
-      <Box background="surface" padding="1">
-        01
-      </Box>
-      <Box background="surface" padding="1">
-        02
-      </Box>
-      <Box background="surface" padding="1">
-        03
-      </Box>
-    </AlphaStack>
-  );
-}
-
-export function WithAlignEnd() {
-  return (
-    <AlphaStack gap="4" align="end">
-      <Box background="surface" padding="1">
-        01
-      </Box>
-      <Box background="surface" padding="1">
-        02
-      </Box>
-      <Box background="surface" padding="1">
-        03
-      </Box>
-    </AlphaStack>
-  );
-}
-
-export function WithFullWidthChildren() {
-  return (
-    <AlphaStack gap="4" fullWidth>
-      <Box background="surface" padding="1">
-        01
-      </Box>
-      <Box background="surface" padding="1">
-        02
-      </Box>
-      <Box background="surface" padding="1">
-        03
-      </Box>
-    </AlphaStack>
-  );
-}
diff --git a/polaris-react/src/components/AlphaStack/AlphaStack.tsx b/polaris-react/src/components/AlphaStack/AlphaStack.tsx
deleted file mode 100644
index 47c823eac61..00000000000
--- a/polaris-react/src/components/AlphaStack/AlphaStack.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import React, {createElement} from 'react';
-import type {SpacingSpaceScale} from '@shopify/polaris-tokens';
-
-import {
-  classNames,
-  sanitizeCustomProperties,
-  getResponsiveProps,
-} from '../../utilities/css';
-import type {ResponsiveProp} from '../../utilities/css';
-
-import styles from './AlphaStack.scss';
-
-type Align = 'start' | 'end' | 'center';
-
-type Element = 'div' | 'ul' | 'ol' | 'fieldset';
-
-type Gap = ResponsiveProp<SpacingSpaceScale>;
-
-export interface AlphaStackProps extends React.AriaAttributes {
-  children?: React.ReactNode;
-  /** HTML Element type
-   * @default 'div'
-   */
-  as?: Element;
-  /** Horizontal alignment of children */
-  align?: Align;
-  /** Toggle children to be full width
-   * @default false
-   */
-  fullWidth?: boolean;
-  /** The spacing between children */
-  gap?: Gap;
-  /** HTML id attribute */
-  id?: string;
-  /** Reverse the render order of child items
-   * @default false
-   */
-  reverseOrder?: boolean;
-}
-
-export const AlphaStack = ({
-  as = 'div',
-  children,
-  align,
-  fullWidth = false,
-  gap,
-  id,
-  reverseOrder = false,
-  ...restProps
-}: AlphaStackProps) => {
-  const className = classNames(
-    styles.AlphaStack,
-    fullWidth && styles.fullWidth,
-    as === 'ul' && styles.listReset,
-    as === 'fieldset' && styles.fieldsetReset,
-  );
-
-  const style = {
-    '--pc-stack-align': align ? `${align}` : '',
-    '--pc-stack-order': reverseOrder ? 'column-reverse' : 'column',
-    ...getResponsiveProps('stack', 'gap', 'space', gap),
-  } as React.CSSProperties;
-
-  return createElement(
-    as,
-    {
-      className,
-      style: sanitizeCustomProperties(style),
-      ...restProps,
-    },
-    children,
-  );
-};
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/AlphaStack/tests/AlphaStack.test.tsx b/polaris-react/src/components/AlphaStack/tests/AlphaStack.test.tsx
deleted file mode 100644
index 8b55eaa455a..00000000000
--- a/polaris-react/src/components/AlphaStack/tests/AlphaStack.test.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from 'react';
-import {mountWithApp} from 'tests/utilities';
-
-import {AlphaStack} from '../AlphaStack';
-
-const text = 'This is a stack';
-const children = <p>{text}</p>;
-
-describe('<AlphaStack />', () => {
-  it('renders children', () => {
-    const stack = mountWithApp(<AlphaStack>{children}</AlphaStack>);
-
-    expect(stack).toContainReactComponent('p', {children: text});
-  });
-
-  it('renders custom properties by default', () => {
-    const stack = mountWithApp(<AlphaStack>{children}</AlphaStack>);
-
-    expect(stack).toContainReactComponent('div', {
-      style: expect.objectContaining({
-        '--pc-stack-order': 'column',
-      }) as React.CSSProperties,
-    });
-  });
-
-  it('overrides custom properties if they are passed in', () => {
-    const stack = mountWithApp(
-      <AlphaStack align="center" gap="10">
-        {children}
-      </AlphaStack>,
-    );
-
-    expect(stack).toContainReactComponent('div', {
-      style: expect.objectContaining({
-        '--pc-stack-align': 'center',
-        '--pc-stack-gap-xs': 'var(--p-space-10)',
-      }) as React.CSSProperties,
-    });
-  });
-
-  it('accepts gap based on breakpoints', () => {
-    const stack = mountWithApp(
-      <AlphaStack gap={{xs: '2', md: '8'}}>{children}</AlphaStack>,
-    );
-
-    expect(stack).toContainReactComponent('div', {
-      style: expect.objectContaining({
-        '--pc-stack-gap-md': 'var(--p-space-8)',
-        '--pc-stack-gap-xs': 'var(--p-space-2)',
-      }) as React.CSSProperties,
-    });
-  });
-});
diff --git a/polaris-react/src/components/Banner/Banner.stories.tsx b/polaris-react/src/components/Banner/Banner.stories.tsx
index 0588add13e3..e94edb89424 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,
+  Stack,
   Banner,
   Button,
   LegacyCard,
@@ -193,7 +193,7 @@ export function InACard() {
 export function WithEndJustifiedContent() {
   return (
     <Banner status="critical">
-      <AlphaStack gap="1" fullWidth>
+      <Stack gap="1" fullWidth>
         <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>
+      </Stack>
     </Banner>
   );
 }
diff --git a/polaris-react/src/components/Box/Box.stories.tsx b/polaris-react/src/components/Box/Box.stories.tsx
index 62db7d10a78..79a3432e349 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 {Stack, 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">
+    <Stack gap="4">
       <Box background="surface" padding={{xs: '2', sm: '8'}} border="dark">
         <Icon source={PaintBrushMajor} color="base" />
       </Box>
@@ -68,6 +68,6 @@ export function WithResponsivePadding() {
       >
         <Icon source={PaintBrushMajor} color="base" />
       </Box>
-    </AlphaStack>
+    </Stack>
   );
 }
diff --git a/polaris-react/src/components/Card/Card.stories.tsx b/polaris-react/src/components/Card/Card.stories.tsx
index 7132b345a62..7a3df5227ea 100644
--- a/polaris-react/src/components/Card/Card.stories.tsx
+++ b/polaris-react/src/components/Card/Card.stories.tsx
@@ -1,14 +1,6 @@
 import React from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {
-  Card,
-  AlphaStack,
-  Bleed,
-  Box,
-  Divider,
-  List,
-  Text,
-} from '@shopify/polaris';
+import {Card, Stack, Bleed, Box, Divider, List, Text} from '@shopify/polaris';
 
 export default {
   component: Card,
@@ -17,14 +9,14 @@ export default {
 export function Default() {
   return (
     <Card>
-      <AlphaStack gap="5">
+      <Stack gap="5">
         <Text as="h3" variant="headingMd">
           Online store dashboard
         </Text>
         <Text variant="bodyMd" as="p">
           View a summary of your online store’s performance.
         </Text>
-      </AlphaStack>
+      </Stack>
     </Card>
   );
 }
@@ -32,14 +24,14 @@ export function Default() {
 export function WithBackgroundSubdued() {
   return (
     <Card background="surface-subdued">
-      <AlphaStack gap="5">
+      <Stack gap="5">
         <Text as="h3" variant="headingMd">
           Online store dashboard
         </Text>
         <Text variant="bodyMd" as="p">
           View a summary of your online store’s performance.
         </Text>
-      </AlphaStack>
+      </Stack>
     </Card>
   );
 }
@@ -47,14 +39,14 @@ export function WithBackgroundSubdued() {
 export function WithBorderRadiusRoundedAbove() {
   return (
     <Card roundedAbove="sm">
-      <AlphaStack gap="5">
+      <Stack gap="5">
         <Text as="h3" variant="headingMd">
           Online store dashboard
         </Text>
         <Text variant="bodyMd" as="p">
           View a summary of your online store’s performance.
         </Text>
-      </AlphaStack>
+      </Stack>
     </Card>
   );
 }
@@ -62,14 +54,14 @@ export function WithBorderRadiusRoundedAbove() {
 export function WithResponsivePadding() {
   return (
     <Card padding={{xs: '5', sm: '6', md: '8'}} roundedAbove="sm">
-      <AlphaStack gap={{xs: '4', sm: '5'}}>
+      <Stack gap={{xs: '4', sm: '5'}}>
         <Text as="h3" variant="headingMd">
           Online store dashboard
         </Text>
         <Text variant="bodyMd" as="p">
           View a summary of your online store’s performance.
         </Text>
-      </AlphaStack>
+      </Stack>
     </Card>
   );
 }
@@ -77,7 +69,7 @@ export function WithResponsivePadding() {
 export function WithSubduedSection() {
   return (
     <Card roundedAbove="sm">
-      <AlphaStack gap="5">
+      <Stack gap="5">
         <Text as="h3" variant="headingMd">
           Staff accounts
         </Text>
@@ -87,7 +79,7 @@ export function WithSubduedSection() {
             <List.Item>Ezequiel Manno</List.Item>
           </List>
         </Box>
-      </AlphaStack>
+      </Stack>
       <Bleed marginBlockEnd="5" marginInline="5">
         <Divider />
         <Box
@@ -96,7 +88,7 @@ export function WithSubduedSection() {
           borderRadiusEndEnd="2"
           padding="5"
         >
-          <AlphaStack gap="2">
+          <Stack gap="2">
             <Text variant="headingSm" as="h3">
               Deactivated staff accounts
             </Text>
@@ -104,7 +96,7 @@ export function WithSubduedSection() {
               <List.Item>Felix Crafford</List.Item>
               <List.Item>Ezequiel Manno</List.Item>
             </List>
-          </AlphaStack>
+          </Stack>
         </Box>
       </Bleed>
     </Card>
diff --git a/polaris-react/src/components/ChoiceList/ChoiceList.tsx b/polaris-react/src/components/ChoiceList/ChoiceList.tsx
index 2e003af132f..37424b7261d 100644
--- a/polaris-react/src/components/ChoiceList/ChoiceList.tsx
+++ b/polaris-react/src/components/ChoiceList/ChoiceList.tsx
@@ -4,7 +4,7 @@ import type {Error} from '../../types';
 import {Checkbox} from '../Checkbox';
 import {RadioButton} from '../RadioButton';
 import {InlineError, errorTextID} from '../InlineError';
-import {AlphaStack} from '../AlphaStack';
+import {Stack} from '../Stack';
 import {Box} from '../Box';
 import {Bleed} from '../Bleed';
 
@@ -132,7 +132,7 @@ export function ChoiceList({
   );
 
   return (
-    <AlphaStack
+    <Stack
       as="fieldset"
       gap={{xs: '4', md: '0'}}
       fullWidth
@@ -140,11 +140,11 @@ export function ChoiceList({
       id={finalName}
     >
       {titleMarkup}
-      <AlphaStack as="ul" gap={{xs: '4', md: '0'}} fullWidth>
+      <Stack as="ul" gap={{xs: '4', md: '0'}} fullWidth>
         {choicesMarkup}
-      </AlphaStack>
+      </Stack>
       {errorMarkup}
-    </AlphaStack>
+    </Stack>
   );
 }
 
diff --git a/polaris-react/src/components/Divider/Divider.stories.tsx b/polaris-react/src/components/Divider/Divider.stories.tsx
index e226d2b825b..edab42be27c 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 {Stack, Divider, Text} from '@shopify/polaris';
 
 export default {
   component: Divider,
@@ -12,7 +12,7 @@ export function Default() {
 
 export function WithBorderStyles() {
   return (
-    <AlphaStack gap="5" fullWidth>
+    <Stack gap="5" fullWidth>
       <Text as="h1" variant="headingXs">
         Base
       </Text>
@@ -33,6 +33,6 @@ export function WithBorderStyles() {
         Transparent
       </Text>
       <Divider borderStyle="transparent" />
-    </AlphaStack>
+    </Stack>
   );
 }
diff --git a/polaris-react/src/components/DropZone/DropZone.stories.tsx b/polaris-react/src/components/DropZone/DropZone.stories.tsx
index afa3aaa68f8..328f17e6752 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,
+  Stack,
   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">
+      <Stack gap="4">
         {files.map((file, index) => (
           <Inline gap="4" align="center" key={index}>
             <Thumbnail
@@ -51,7 +51,7 @@ export function Default() {
             </div>
           </Inline>
         ))}
-      </AlphaStack>
+      </Stack>
     </div>
   );
 
@@ -86,7 +86,7 @@ export function WithImageFileUpload() {
 
   const fileUpload = !files.length && <DropZone.FileUpload />;
   const uploadedFiles = files.length > 0 && (
-    <AlphaStack gap="4">
+    <Stack gap="4">
       {files.map((file, index) => (
         <Inline gap="4" align="center" key={index}>
           <Thumbnail
@@ -102,7 +102,7 @@ export function WithImageFileUpload() {
           </div>
         </Inline>
       ))}
-    </AlphaStack>
+    </Stack>
   );
 
   const errorMessage = hasError && (
@@ -121,13 +121,13 @@ export function WithImageFileUpload() {
   );
 
   return (
-    <AlphaStack gap="4" fullWidth>
+    <Stack gap="4" fullWidth>
       {errorMessage}
       <DropZone accept="image/*" type="image" onDrop={handleDrop}>
         {uploadedFiles}
         {fileUpload}
       </DropZone>
-    </AlphaStack>
+    </Stack>
   );
 }
 
@@ -183,7 +183,7 @@ export function WithDropOnPage() {
   const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];
 
   const uploadedFiles = files.length > 0 && (
-    <AlphaStack gap="4">
+    <Stack gap="4">
       {files.map((file, index) => (
         <Inline gap="4" align="center" key={index}>
           <Thumbnail
@@ -203,7 +203,7 @@ export function WithDropOnPage() {
           </div>
         </Inline>
       ))}
-    </AlphaStack>
+    </Stack>
   );
 
   const uploadMessage = !uploadedFiles && <DropZone.FileUpload />;
@@ -244,7 +244,7 @@ export function AcceptsOnlySVGFiles() {
   );
 
   const uploadedFiles = files.length > 0 && (
-    <AlphaStack gap="4">
+    <Stack gap="4">
       {files.map((file, index) => (
         <Inline gap="4" align="center" key={index}>
           <Thumbnail
@@ -260,7 +260,7 @@ export function AcceptsOnlySVGFiles() {
           </div>
         </Inline>
       ))}
-    </AlphaStack>
+    </Stack>
   );
 
   const errorMessage = hasError && (
@@ -279,7 +279,7 @@ export function AcceptsOnlySVGFiles() {
   );
 
   return (
-    <AlphaStack gap="4" fullWidth>
+    <Stack gap="4" fullWidth>
       {errorMessage}
       <DropZone
         accept="image/svg+xml"
@@ -289,7 +289,7 @@ export function AcceptsOnlySVGFiles() {
       >
         {uploadedFiles}
       </DropZone>
-    </AlphaStack>
+    </Stack>
   );
 }
 
@@ -306,7 +306,7 @@ export function Nested() {
 
   const fileUpload = !files.length && <DropZone.FileUpload />;
   const uploadedFiles = files.length > 0 && (
-    <AlphaStack gap="4">
+    <Stack gap="4">
       {files.map((file, index) => (
         <Inline gap="4" align="center" key={index}>
           <Thumbnail
@@ -326,7 +326,7 @@ export function Nested() {
           </div>
         </Inline>
       ))}
-    </AlphaStack>
+    </Stack>
   );
 
   return (
@@ -377,7 +377,7 @@ export function WithCustomFileUploadText() {
   );
 
   const uploadedFiles = files.length > 0 && (
-    <AlphaStack gap="4">
+    <Stack gap="4">
       {files.map((file, index) => (
         <Inline gap="4" align="center" key={index}>
           <Thumbnail
@@ -397,7 +397,7 @@ export function WithCustomFileUploadText() {
           </div>
         </Inline>
       ))}
-    </AlphaStack>
+    </Stack>
   );
 
   return (
@@ -425,7 +425,7 @@ export function WithCustomFileDialogTrigger() {
   const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];
 
   const uploadedFiles = files.length > 0 && (
-    <AlphaStack gap="4">
+    <Stack gap="4">
       {files.map((file, index) => (
         <Inline gap="4" align="center" key={index}>
           <Thumbnail
@@ -445,7 +445,7 @@ export function WithCustomFileDialogTrigger() {
           </div>
         </Inline>
       ))}
-    </AlphaStack>
+    </Stack>
   );
 
   return (
diff --git a/polaris-react/src/components/DropZone/DropZone.tsx b/polaris-react/src/components/DropZone/DropZone.tsx
index 41eb4aa8000..147b69e7405 100755
--- a/polaris-react/src/components/DropZone/DropZone.tsx
+++ b/polaris-react/src/components/DropZone/DropZone.tsx
@@ -19,7 +19,7 @@ import {useI18n} from '../../utilities/i18n';
 import {isServer} from '../../utilities/target';
 import {useComponentDidMount} from '../../utilities/use-component-did-mount';
 import {useToggle} from '../../utilities/use-toggle';
-import {AlphaStack} from '../AlphaStack';
+import {Stack} from '../Stack';
 import {useEventListener} from '../../utilities/use-event-listener';
 
 import {FileUpload} from './components';
@@ -374,14 +374,14 @@ export const DropZone: React.FunctionComponent<DropZoneProps> & {
   ) {
     return (
       <div className={styles.Overlay}>
-        <AlphaStack gap="2" align="center">
+        <Stack gap="2" align="center">
           {size === 'small' && <Icon source={icon} color={color} />}
           {(size === 'medium' || size === 'large') && (
             <Text variant="bodySm" as="p" fontWeight="bold">
               {text}
             </Text>
           )}
-        </AlphaStack>
+        </Stack>
       </div>
     );
   }
diff --git a/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.tsx b/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.tsx
index 372c08bbded..24c98bce014 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 {Stack} from '../../../Stack';
 
 import styles from './FileUpload.scss';
 
@@ -55,18 +55,18 @@ export function FileUpload(props: FileUploadProps) {
   switch (size) {
     case 'large':
       viewMarkup = (
-        <AlphaStack align="center" gap="2">
+        <Stack align="center" gap="2">
           {actionMarkup}
           {actionHintMarkup}
-        </AlphaStack>
+        </Stack>
       );
       break;
     case 'medium':
       viewMarkup = (
-        <AlphaStack align="center" gap="2">
+        <Stack align="center" gap="2">
           {actionMarkup}
           {actionHintMarkup}
-        </AlphaStack>
+        </Stack>
       );
       break;
     case 'small':
diff --git a/polaris-react/src/components/EmptyState/EmptyState.tsx b/polaris-react/src/components/EmptyState/EmptyState.tsx
index 6471b7e4dd0..8f64a18d289 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 {Stack} from '../Stack';
 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 align="center">
+        <Stack align="center">
           {textContentMarkup}
           {actionsMarkup}
           {footerContentMarkup}
-        </AlphaStack>
+        </Stack>
       </Box>
     ) : null;
 
@@ -139,10 +139,10 @@ export function EmptyState({
       paddingBlockStart="5"
       paddingBlockEnd="16"
     >
-      <AlphaStack align="center">
+      <Stack align="center">
         {imageMarkup}
         {detailsMarkup}
-      </AlphaStack>
+      </Stack>
     </Box>
   );
 }
diff --git a/polaris-react/src/components/Grid/Grid.tsx b/polaris-react/src/components/Grid/Grid.tsx
index 2dcb24f3ee9..5ec683d2d96 100644
--- a/polaris-react/src/components/Grid/Grid.tsx
+++ b/polaris-react/src/components/Grid/Grid.tsx
@@ -27,7 +27,7 @@ export interface GridProps {
   gap?: Gap;
   children?: React.ReactNode;
 }
-/** @deprecated Use `Columns` instead or a combination of layout primitives (`Columns`, `Inline`, and `AlphaStack`) */
+/** @deprecated Use `Columns` instead or a combination of layout primitives (`Columns`, `Inline`, and `Stack`) */
 export const Grid: React.FunctionComponent<GridProps> & {
   // eslint-disable-next-line import/no-deprecated
   Cell: typeof Cell;
@@ -54,7 +54,7 @@ export const Grid: React.FunctionComponent<GridProps> & {
     if (process.env.NODE_ENV === 'development') {
       // eslint-disable-next-line no-console
       console.warn(
-        'Deprecation: <Grid /> is deprecated. This component will be removed in a future major version of Polaris. Use <Columns /> instead or a combination of <Columns />, <Inline />, and <AlphaStack />',
+        'Deprecation: <Grid /> is deprecated. This component will be removed in a future major version of Polaris. Use <Columns /> instead or a combination of <Columns />, <Inline />, and <Stack />',
       );
     }
   }, []);
diff --git a/polaris-react/src/components/Grid/components/Cell/Cell.tsx b/polaris-react/src/components/Grid/components/Cell/Cell.tsx
index 35882f8e3ee..f2784a7a9e3 100644
--- a/polaris-react/src/components/Grid/components/Cell/Cell.tsx
+++ b/polaris-react/src/components/Grid/components/Cell/Cell.tsx
@@ -30,7 +30,7 @@ export interface CellProps {
   row?: Cell;
   children?: React.ReactNode;
 }
-/** @deprecated Use `Columns` instead or a combination of layout primitives (`Columns`, `Inline`, and `AlphaStack`) */
+/** @deprecated Use `Columns` instead or a combination of layout primitives (`Columns`, `Inline`, and `Stack`) */
 export function Cell({
   area: gridArea,
   column,
diff --git a/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx b/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx
index 135d09e8b60..d6b0411431e 100644
--- a/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx
+++ b/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx
@@ -4,7 +4,7 @@ import {useI18n} from '../../utilities/i18n';
 import {SkeletonBodyText} from '../SkeletonBodyText';
 import {Box} from '../Box';
 import {Inline} from '../Inline';
-import {AlphaStack} from '../AlphaStack';
+import {Stack} from '../Stack';
 
 import styles from './SkeletonPage.scss';
 
@@ -63,7 +63,7 @@ export function SkeletonPage({
   ) : null;
 
   return (
-    <AlphaStack gap="4" align="center" fullWidth>
+    <Stack gap="4" align="center" fullWidth>
       <Box
         padding="0"
         paddingInlineStart={{sm: '6'}}
@@ -78,7 +78,7 @@ export function SkeletonPage({
           maxWidth: 'none',
         })}
       >
-        <AlphaStack fullWidth>
+        <Stack fullWidth>
           <Box
             paddingBlockStart={{xs: '4', md: '5'}}
             paddingBlockEnd={{xs: '4', md: '5'}}
@@ -94,8 +94,8 @@ export function SkeletonPage({
             </Inline>
           </Box>
           <Box paddingBlockEnd="2">{children}</Box>
-        </AlphaStack>
+        </Stack>
       </Box>
-    </AlphaStack>
+    </Stack>
   );
 }
diff --git a/polaris-react/src/components/Stack/Stack.scss b/polaris-react/src/components/Stack/Stack.scss
index 1c006935e5e..375a1aa5192 100644
--- a/polaris-react/src/components/Stack/Stack.scss
+++ b/polaris-react/src/components/Stack/Stack.scss
@@ -1,136 +1,60 @@
+@import '../../styles/common';
+
 .Stack {
-  // stylelint-disable-next-line -- Polaris component custom properties
-  --pc-stack-spacing: var(--p-space-4);
+  // stylelint-disable -- Polaris component custom properties
+  --pc-stack-gap-xs: 0;
+  --pc-stack-gap-sm: var(--pc-stack-gap-xs);
+  --pc-stack-gap-md: var(--pc-stack-gap-sm);
+  --pc-stack-gap-lg: var(--pc-stack-gap-md);
+  --pc-stack-gap-xl: var(--pc-stack-gap-lg);
+  // stylelint-enable
+
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   display: flex;
-  flex-wrap: wrap;
+  // stylelint-disable-next-line -- local component custom property is required for flex direction
+  flex-direction: var(--pc-stack-order);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  align-items: stretch;
+  align-items: var(--pc-stack-align);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  margin-top: calc(-1 * var(--pc-stack-spacing));
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  margin-left: calc(-1 * var(--pc-stack-spacing));
+  gap: var(--pc-stack-gap-xs);
 
-  > .Item {
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    margin-top: var(--pc-stack-spacing);
+  @media #{$p-breakpoints-sm-up} {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    margin-left: var(--pc-stack-spacing);
-    max-width: 100%;
+    gap: var(--pc-stack-gap-sm);
   }
-}
-
-.noWrap {
-  flex-wrap: nowrap;
-}
-
-.spacingNone {
-  // stylelint-disable-next-line -- Polaris component custom properties
-  --pc-stack-spacing: 0;
-}
-
-.spacingExtraTight {
-  // stylelint-disable-next-line -- Polaris component custom properties
-  --pc-stack-spacing: var(--p-space-1);
-}
-
-.spacingTight {
-  // stylelint-disable-next-line -- Polaris component custom properties
-  --pc-stack-spacing: var(--p-space-2);
-}
-
-.spacingBaseTight {
-  // stylelint-disable-next-line -- Polaris component custom properties
-  --pc-stack-spacing: var(--p-space-3);
-}
 
-.spacingLoose {
-  // stylelint-disable-next-line -- Polaris component custom properties
-  --pc-stack-spacing: var(--p-space-5);
-}
-
-.spacingExtraLoose {
-  // stylelint-disable-next-line -- Polaris component custom properties
-  --pc-stack-spacing: var(--p-space-8);
-}
-
-.distributionLeading {
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  justify-content: flex-start;
-}
-
-.distributionTrailing {
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  justify-content: flex-end;
-}
-
-.distributionCenter {
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  justify-content: center;
-}
-
-.distributionEqualSpacing {
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  justify-content: space-between;
-}
-
-.distributionFill > .Item {
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  flex: 1 1 auto;
-}
-
-.distributionFillEvenly > .Item {
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  flex: 1 1 auto;
-
-  @supports (min-width: fit-content) {
+  @media #{$p-breakpoints-md-up} {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    flex: 1 0 0%;
-    min-width: fit-content;
+    gap: var(--pc-stack-gap-md);
   }
-}
-
-.alignmentLeading {
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  align-items: flex-start;
-}
 
-.alignmentTrailing {
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  align-items: flex-end;
-}
+  @media #{$p-breakpoints-lg-up} {
+    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
+    gap: var(--pc-stack-gap-lg);
+  }
 
-.alignmentCenter {
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  align-items: center;
+  @media #{$p-breakpoints-xl-up} {
+    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
+    gap: var(--pc-stack-gap-xl);
+  }
 }
 
-.alignmentFill {
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  align-items: stretch;
+.listReset {
+  list-style-type: none;
+  margin-block-start: 0;
+  margin-block-end: 0;
+  padding-inline-start: 0;
 }
 
-.alignmentBaseline {
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  align-items: baseline;
+.fieldsetReset {
+  border: none;
+  margin: 0;
+  padding: 0;
 }
 
-.vertical {
-  flex-direction: column;
-  margin-left: 0;
-
-  > .Item {
-    margin-left: 0;
+.fullWidth {
+  > * {
+    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
+    width: 100%;
   }
 }
-
-.Item {
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  flex: 0 0 auto;
-  min-width: 0;
-}
-
-.Item-fill {
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  flex: 1 1 auto;
-}
diff --git a/polaris-react/src/components/Stack/Stack.stories.tsx b/polaris-react/src/components/Stack/Stack.stories.tsx
index 7394573ce2d..bc09c509889 100644
--- a/polaris-react/src/components/Stack/Stack.stories.tsx
+++ b/polaris-react/src/components/Stack/Stack.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {Badge, Text, Stack} from '@shopify/polaris';
+import {Box, Stack} from '@shopify/polaris';
 
 export default {
   component: Stack,
@@ -9,88 +9,111 @@ export default {
 export function Default() {
   return (
     <Stack>
-      <Badge>Paid</Badge>
-      <Badge>Processing</Badge>
-      <Badge>Fulfilled</Badge>
-      <Badge>Completed</Badge>
+      <Box background="surface" padding="1">
+        01
+      </Box>
+      <Box background="surface" padding="1">
+        02
+      </Box>
+      <Box background="surface" padding="1">
+        03
+      </Box>
     </Stack>
   );
 }
 
-export function NonWrapping() {
+export function WithGap() {
   return (
-    <Stack wrap={false}>
-      <Badge>Paid</Badge>
-      <Badge>Processing</Badge>
-      <Badge>Fulfilled</Badge>
-      <Badge>Completed</Badge>
+    <Stack gap="8">
+      <Box background="surface" padding="1">
+        01
+      </Box>
+      <Box background="surface" padding="1">
+        02
+      </Box>
+      <Box background="surface" padding="1">
+        03
+      </Box>
     </Stack>
   );
 }
 
-export function Spacing() {
+export function WithResponsiveGap() {
   return (
-    <Stack spacing="loose">
-      <Badge>Paid</Badge>
-      <Badge>Fulfilled</Badge>
+    <Stack gap={{xs: '4', md: '10'}}>
+      <Box background="surface" padding="1">
+        01
+      </Box>
+      <Box background="surface" padding="1">
+        02
+      </Box>
+      <Box background="surface" padding="1">
+        03
+      </Box>
     </Stack>
   );
 }
 
-export function VerticalCentering() {
+export function WithAlignStart() {
   return (
-    <Stack alignment="center">
-      <Text variant="headingMd" as="h2">
-        Order
-        <br />
-        #1136
-        <br />
-        was paid
-      </Text>
-      <Badge>Paid</Badge>
-      <Badge>Fulfilled</Badge>
+    <Stack gap="4" align="start">
+      <Box background="surface" padding="1">
+        01
+      </Box>
+      <Box background="surface" padding="1">
+        02
+      </Box>
+      <Box background="surface" padding="1">
+        03
+      </Box>
     </Stack>
   );
 }
 
-export function FillAvailableSpaceProportionally() {
+export function WithAlignCenter() {
   return (
-    <Stack distribution="fill">
-      <Text variant="headingMd" as="h2">
-        Order #1136
-      </Text>
-      <Badge>Paid</Badge>
-      <Badge>Fulfilled</Badge>
+    <Stack gap="4" align="center">
+      <Box background="surface" padding="1">
+        01
+      </Box>
+      <Box background="surface" padding="1">
+        02
+      </Box>
+      <Box background="surface" padding="1">
+        03
+      </Box>
     </Stack>
   );
 }
 
-export function WhereItemsFillSpaceEvenly() {
+export function WithAlignEnd() {
   return (
-    <Stack distribution="fillEvenly">
-      <Text variant="headingMd" as="h2">
-        Order #1136
-      </Text>
-      <Badge>Paid</Badge>
-      <Badge>Fulfilled</Badge>
+    <Stack gap="4" align="end">
+      <Box background="surface" padding="1">
+        01
+      </Box>
+      <Box background="surface" padding="1">
+        02
+      </Box>
+      <Box background="surface" padding="1">
+        03
+      </Box>
     </Stack>
   );
 }
 
-export function WhereASingleItemFillsTheRemainingSpace() {
+export function WithFullWidthChildren() {
   return (
-    <Stack>
-      <Stack.Item fill>
-        <Text variant="headingMd" as="h2">
-          Order #1136
-        </Text>
-      </Stack.Item>
-      <Stack.Item>
-        <Badge>Paid</Badge>
-      </Stack.Item>
-      <Stack.Item>
-        <Badge>Fulfilled</Badge>
-      </Stack.Item>
+    <Stack gap="4" fullWidth>
+      <Box background="surface" padding="1">
+        01
+      </Box>
+      <Box background="surface" padding="1">
+        02
+      </Box>
+      <Box background="surface" padding="1">
+        03
+      </Box>
     </Stack>
   );
 }
diff --git a/polaris-react/src/components/Stack/Stack.tsx b/polaris-react/src/components/Stack/Stack.tsx
index 5d41a7db0d9..e0ddd203478 100644
--- a/polaris-react/src/components/Stack/Stack.tsx
+++ b/polaris-react/src/components/Stack/Stack.tsx
@@ -1,81 +1,73 @@
-import React, {memo, NamedExoticComponent} from 'react';
+import React, {createElement} from 'react';
+import type {SpacingSpaceScale} from '@shopify/polaris-tokens';
 
-import {classNames, variationName} from '../../utilities/css';
-import {elementChildren, wrapWithComponent} from '../../utilities/components';
+import {
+  classNames,
+  sanitizeCustomProperties,
+  getResponsiveProps,
+} from '../../utilities/css';
+import type {ResponsiveProp} from '../../utilities/css';
 
-// eslint-disable-next-line import/no-deprecated
-import {Item} from './components';
 import styles from './Stack.scss';
 
-type Spacing =
-  | 'extraTight'
-  | 'tight'
-  | 'baseTight'
-  | 'loose'
-  | 'extraLoose'
-  | 'none';
+type Align = 'start' | 'end' | 'center';
 
-type Alignment = 'leading' | 'trailing' | 'center' | 'fill' | 'baseline';
+type Element = 'div' | 'ul' | 'ol' | 'fieldset';
 
-type Distribution =
-  | 'equalSpacing'
-  | 'leading'
-  | 'trailing'
-  | 'center'
-  | 'fill'
-  | 'fillEvenly';
+type Gap = ResponsiveProp<SpacingSpaceScale>;
 
-export interface StackProps {
-  /** Elements to display inside stack */
+export interface StackProps extends React.AriaAttributes {
   children?: React.ReactNode;
-  /** Wrap stack elements to additional rows as needed on small screens (Defaults to true) */
-  wrap?: boolean;
-  /** Stack the elements vertically */
-  vertical?: boolean;
-  /** Adjust spacing between elements */
-  spacing?: Spacing;
-  /** Adjust vertical alignment of elements */
-  alignment?: Alignment;
-  /** Adjust horizontal alignment of elements */
-  distribution?: Distribution;
+  /** HTML Element type
+   * @default 'div'
+   */
+  as?: Element;
+  /** Horizontal alignment of children */
+  align?: Align;
+  /** Toggle children to be full width
+   * @default false
+   */
+  fullWidth?: boolean;
+  /** The spacing between children */
+  gap?: Gap;
+  /** HTML id attribute */
+  id?: string;
+  /** Reverse the render order of child items
+   * @default false
+   */
+  reverseOrder?: boolean;
 }
 
-/** @deprecated Use LegacyStack or AlphaStack instead. */
-export const Stack = memo(function Stack({
+export const Stack = ({
+  as = 'div',
   children,
-  vertical,
-  spacing,
-  distribution,
-  alignment,
-  wrap,
-}: StackProps) {
-  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.',
-    );
-  }
-
+  align,
+  fullWidth = false,
+  gap,
+  id,
+  reverseOrder = false,
+  ...restProps
+}: StackProps) => {
   const className = classNames(
     styles.Stack,
-    vertical && styles.vertical,
-    spacing && styles[variationName('spacing', spacing)],
-    distribution && styles[variationName('distribution', distribution)],
-    alignment && styles[variationName('alignment', alignment)],
-    wrap === false && styles.noWrap,
+    fullWidth && styles.fullWidth,
+    as === 'ul' && styles.listReset,
+    as === 'fieldset' && styles.fieldsetReset,
   );
 
-  const itemMarkup = elementChildren(children).map((child, index) => {
-    const props = {key: index};
-    // eslint-disable-next-line import/no-deprecated
-    return wrapWithComponent(child, Item, props);
-  });
+  const style = {
+    '--pc-stack-align': align ? `${align}` : '',
+    '--pc-stack-order': reverseOrder ? 'column-reverse' : 'column',
+    ...getResponsiveProps('stack', 'gap', 'space', gap),
+  } as React.CSSProperties;
 
-  return <div className={className}>{itemMarkup}</div>;
-}) as NamedExoticComponent<StackProps> & {
-  // eslint-disable-next-line import/no-deprecated
-  Item: typeof Item;
+  return createElement(
+    as,
+    {
+      className,
+      style: sanitizeCustomProperties(style),
+      ...restProps,
+    },
+    children,
+  );
 };
-
-// eslint-disable-next-line import/no-deprecated
-Stack.Item = Item;
diff --git a/polaris-react/src/components/Stack/components/Item/Item.tsx b/polaris-react/src/components/Stack/components/Item/Item.tsx
deleted file mode 100644
index 360ab3967c0..00000000000
--- a/polaris-react/src/components/Stack/components/Item/Item.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react';
-
-import {classNames} from '../../../../utilities/css';
-import styles from '../../Stack.scss';
-
-export interface ItemProps {
-  /** Elements to display inside item */
-  children?: React.ReactNode;
-  /** Fill the remaining horizontal space in the stack with the item  */
-  fill?: boolean;
-  /**
-   * @default false
-   */
-}
-
-/** @deprecated Use LegacyStack or AlphaStack 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.',
-    );
-  }
-
-  const className = classNames(styles.Item, fill && styles['Item-fill']);
-
-  return <div className={className}>{children}</div>;
-}
diff --git a/polaris-react/src/components/Stack/components/Item/index.ts b/polaris-react/src/components/Stack/components/Item/index.ts
deleted file mode 100644
index c924835a042..00000000000
--- a/polaris-react/src/components/Stack/components/Item/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Item';
diff --git a/polaris-react/src/components/Stack/components/index.ts b/polaris-react/src/components/Stack/components/index.ts
deleted file mode 100644
index c924835a042..00000000000
--- a/polaris-react/src/components/Stack/components/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Item';
diff --git a/polaris-react/src/components/Stack/tests/Stack.test.tsx b/polaris-react/src/components/Stack/tests/Stack.test.tsx
index d095fff3ebb..a663ba5ad27 100644
--- a/polaris-react/src/components/Stack/tests/Stack.test.tsx
+++ b/polaris-react/src/components/Stack/tests/Stack.test.tsx
@@ -1,16 +1,53 @@
 import React from 'react';
 import {mountWithApp} from 'tests/utilities';
 
-// eslint-disable-next-line import/no-deprecated
 import {Stack} from '../Stack';
 
+const text = 'This is a stack';
+const children = <p>{text}</p>;
+
 describe('<Stack />', () => {
-  const renderChildren = () => [0, 1].map((i) => <div key={i}>Child {i}</div>);
+  it('renders children', () => {
+    const stack = mountWithApp(<Stack>{children}</Stack>);
+
+    expect(stack).toContainReactComponent('p', {children: text});
+  });
+
+  it('renders custom properties by default', () => {
+    const stack = mountWithApp(<Stack>{children}</Stack>);
+
+    expect(stack).toContainReactComponent('div', {
+      style: expect.objectContaining({
+        '--pc-stack-order': 'column',
+      }) as React.CSSProperties,
+    });
+  });
+
+  it('overrides custom properties if they are passed in', () => {
+    const stack = mountWithApp(
+      <Stack align="center" gap="10">
+        {children}
+      </Stack>,
+    );
+
+    expect(stack).toContainReactComponent('div', {
+      style: expect.objectContaining({
+        '--pc-stack-align': 'center',
+        '--pc-stack-gap-xs': 'var(--p-space-10)',
+      }) as React.CSSProperties,
+    });
+  });
 
-  it('renders its children', () => {
-    const stack = mountWithApp(<Stack>{renderChildren()}</Stack>);
+  it('accepts gap based on breakpoints', () => {
+    const stack = mountWithApp(
+      <Stack gap={{xs: '2', md: '8'}}>{children}</Stack>,
+    );
 
-    // eslint-disable-next-line import/no-deprecated
-    expect(stack).toContainReactComponentTimes(Stack.Item, 2);
+    expect(stack).toContainReactComponent('div', {
+      style: expect.objectContaining({
+        '--pc-stack-gap-md': 'var(--p-space-8)',
+        '--pc-stack-gap-xs': 'var(--p-space-2)',
+      }) as React.CSSProperties,
+    });
   });
 });
diff --git a/polaris-react/src/components/TextContainer/TextContainer.tsx b/polaris-react/src/components/TextContainer/TextContainer.tsx
index c4a938912df..ef217df9ca4 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 Stack instead */
 export function TextContainer({spacing, children}: TextContainerProps) {
   const className = classNames(
     styles.TextContainer,
diff --git a/polaris-react/src/index.ts b/polaris-react/src/index.ts
index 5e5ff03fd02..54cbec16c9d 100644
--- a/polaris-react/src/index.ts
+++ b/polaris-react/src/index.ts
@@ -46,9 +46,6 @@ export type {
 export {ActionMenu} from './components/ActionMenu';
 export type {ActionMenuProps} from './components/ActionMenu';
 
-export {AlphaStack} from './components/AlphaStack';
-export type {AlphaStackProps} from './components/AlphaStack';
-
 export {Autocomplete} from './components/Autocomplete';
 export type {AutocompleteProps} from './components/Autocomplete';
 
diff --git a/polaris.shopify.com/content/components/deprecated/stack.md b/polaris.shopify.com/content/components/deprecated/stack.md
deleted file mode 100644
index 352a29f3e0f..00000000000
--- a/polaris.shopify.com/content/components/deprecated/stack.md
+++ /dev/null
@@ -1,81 +0,0 @@
----
-title: Stack
-description: Use to lay out a horizontal row of components or to achieve no-fuss vertical centering. A stack is made of flexible items that wrap each of the stack’s children. Options provide control of the wrapping, spacing, and relative size of the items in the stack.
-category: Deprecated
-keywords:
-  - rows
-  - vertical centering
-  - horizontal row of components
-  - flexible items
-  - flexbox
-  - row of components
-  - stack spacing
-  - vertical centering
-  - fill available space
-  - fill space
-  - equal width
-  - right-aligned stack
-  - stack layout
-  - layout
-status:
-  value: Deprecated
-  message: >-
-    Stack was built prior to layout primitives like box, inline, and alpha stack.
-    The new layout primitives can be used in combination to achieve similar results to stack, or the existing legacy stack.
-examples:
-  - fileName: stack-default.tsx
-    title: Default
-    description: Use to quickly lay out a horizontal row of components and maintain their relative sizes. On small screens, children rows wrap down to additional rows as needed.
-  - fileName: stack-non-wrapping.tsx
-    title: Non-wrapping
-    description: Use to create a stack where the children will not wrap to new rows on small screens. As noted above, the wrap option defaults to true. This means you must explicitly set it to false to turn it off.
-  - fileName: stack-spacing.tsx
-    title: Spacing
-    description: Use to control spacing of items in a stack in standard increments. Use tight for less spacing, loose for more spacing, or none to remove normal spacing altogether.
-  - fileName: stack-vertical-centering.tsx
-    title: Vertical centering
-    description: Use to vertically center a set of items that have different heights.
-  - fileName: stack-fill-available-space-proportionally.tsx
-    title: Fill available space proportionally
-    description: Use to have the stack’s items fill the horizontal space in the container but maintain their relative proportions.
-  - fileName: stack-where-items-fill-space-evenly.tsx
-    title: Where items fill space evenly
-    description: Use to have the stack’s items fill the horizontal space in the container and be equal widths, regardless of their content.
-  - fileName: stack-where-a-single-item-fills-the-remaining-space.tsx
-    title: Where a single item fills the remaining space
-    description: Use for aligning buttons or secondary content to the right edge of another element, allowing it to wrap below on small screens.
----
-
-## Best practices
-
-Stacks should:
-
-- Be used for small-scale layout tasks when you want a row of components that should wrap on small screen widths
-- Be used to vertically center two elements
-- Not be used for complex or unique arrangements of components
-- Not be used for large-scale page layout
-
----
-
-## Stack item
-
-The stack component will treat multiple elements wrapped in a stack item component as one item. By default, each individual element is treated as one stack item. Use the fill prop on a single stack item component to make it fill the rest of the available horizontal space. See the “Stack where a single item fills the remaining space” example.
-
-### Stack item properties
-
-| Prop     | Type    | Description                                                    | Default |
-| -------- | ------- | -------------------------------------------------------------- | ------- |
-| fill     | boolean | Fill the available horizontal space in the stack with the item | false   |
-| children | any     | Elements to display inside stack item                          |         |
-
----
-
-## Related components
-
-- To create the large-scale structure of pages, [use the layout component](https://polaris.shopify.com/components/layout-and-structure/layout)
-
----
-
-## Accessibility
-
-The stack component is for alignment only and doesn’t provide any structural information for assistive technologies. To convey relationships between specific items, consider using the [list component](https://polaris.shopify.com/components/lists/list).
diff --git a/polaris.shopify.com/content/components/deprecated/text-container.md b/polaris.shopify.com/content/components/deprecated/text-container.md
index 51235b3f528..d88e15a0508 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 Stack component. Use Stack 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 9327312e938..916a53eb503 100644
--- a/polaris.shopify.com/content/components/layout-and-structure/inline.md
+++ b/polaris.shopify.com/content/components/layout-and-structure/inline.md
@@ -32,4 +32,4 @@ examples:
 
 ## Related components
 
-- To display elements vertically, [use the AlphaStack component](https://polaris.shopify.com/components/layout-and-structure/alpha-stack)
+- To display elements vertically, [use the Stack component](https://polaris.shopify.com/components/layout-and-structure/stack)
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..2d7bb1f22cd 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 [Stack component](/components/layout-and-structure/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/stack.md
similarity index 83%
rename from polaris.shopify.com/content/components/layout-and-structure/alpha-stack.md
rename to polaris.shopify.com/content/components/layout-and-structure/stack.md
index ef57db11aac..459dae32df4 100644
--- a/polaris.shopify.com/content/components/layout-and-structure/alpha-stack.md
+++ b/polaris.shopify.com/content/components/layout-and-structure/stack.md
@@ -1,5 +1,5 @@
 ---
-title: Alpha stack
+title: Stack
 description: Use to display elements vertically with items placed directly below the preceding item.
 category: Layout and structure
 keywords:
@@ -8,19 +8,19 @@ 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-default.tsx
+  - fileName: stack-default.tsx
     title: Default
     description: >-
       By default, stack is left aligned and stacked items are spaced with 16px in between.
-  - fileName: alpha-stack-with-gap.tsx
+  - fileName: stack-with-gap.tsx
     title: Gap
     description: >-
       Gaps between stack children can be adjusted using the Space token.
-  - fileName: alpha-stack-with-full-width-children.tsx
+  - fileName: stack-with-full-width-children.tsx
     title: Full width
     description: >-
       Use a boolean to make Stack full width.
-  - fileName: alpha-stack-with-align.tsx
+  - fileName: stack-with-align.tsx
     title: Alignment
     description: >-
       Use to horizontally align 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 91515dc8561..ad4a8e9536b 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 [`Stack`](/components/layout-and-structure/stack), [`Card`](/components/layout-and-structure/card), [`Columns`](/components/layout-and-structure/columns) and [`Box`](/components/layout-and-structure/box) components.
 
 <!-- prettier-ignore -->
 ```javascript {"type":"previewContext","for":"example"}
@@ -45,28 +45,28 @@ This pattern uses the [`AlphaStack`](/components/layout-and-structure/alpha-stac
     },
   ]}
 >
-  <AlphaStack gap="16" align="center">
+  <Stack gap="16" align="center">
     <Columns columns={{xs: '1fr', md: '2fr 5fr'}}>
       <Box
         as="section"
         paddingInlineStart={{xs: 4, sm: 0}}
         paddingInlineEnd={{xs: 2, sm: 0}}
       >
-        <AlphaStack align="start" gap="4">
+        <Stack align="start" gap="4">
           <Text as="h3" variant="headingMd">
             InterJambs
           </Text>
           <p>
             Interjambs are the rounded protruding bits of your puzzlie piece
           </p>
-        </AlphaStack>
+        </Stack>
       </Box>
-      <AlphaCard roundedAbove="sm">
-        <AlphaStack gap="4" fullWidth>
+      <Card roundedAbove="sm">
+        <Stack gap="4" fullWidth>
           <TextField label="Interjamb style" />
           <TextField label="Interjamb ratio" />
-        </AlphaStack>
-      </AlphaCard>
+        </Stack>
+      </Card>
     </Columns>
     <Columns columns={{xs: '1fr', md: '2fr 5fr'}}>
       <Box
@@ -74,23 +74,23 @@ This pattern uses the [`AlphaStack`](/components/layout-and-structure/alpha-stac
         paddingInlineStart={{xs: 2, sm: 0}}
         paddingInlineEnd={{xs: 2, sm: 0}}
       >
-        <AlphaStack align="start" gap="4">
+        <Stack align="start" gap="4">
           <Text as="h3" variant="headingMd">
             Dimensions
           </Text>
           <p>
             Interjambs are the rounded protruding bits of your puzzlie piece
           </p>
-        </AlphaStack>
+        </Stack>
       </Box>
-      <AlphaCard roundedAbove="sm">
-        <AlphaStack gap="4" fullWidth>
+      <Card roundedAbove="sm">
+        <Stack gap="4" fullWidth>
           <TextField label="Horizontal" />
           <TextField label="Interjamb ratio" />
-        </AlphaStack>
-      </AlphaCard>
+        </Stack>
+      </Card>
     </Columns>
-  </AlphaStack>
+  </Stack>
 </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 bb8e06a88fb..b19cc0c8075 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 [`Stack`](/components/layout-and-structure/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 align="start" fullWidth gap="4">
+            <Stack align="start" fullWidth gap="4">
               <Inline gap="2">
                 <div style={{flexGrow: 1}}>
                   <TextField
@@ -365,7 +365,7 @@ function DateRangePicker() {
                   allowRange
                 />
               </div>
-            </AlphaStack>
+            </Stack>
           </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 c876b1abbfe..6396b0a6fcf 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 align="center" gap="4">
+    <Stack align="center" gap="4">
       <Box minWidth="276px" padding={{xs: 2}}>
         <Popover
           active={visible}
@@ -127,7 +127,7 @@ function DatePickerExample() {
           </AlphaCard>
         </Popover>
       </Box>
-    </AlphaStack>
+    </Stack>
   );
 }
 ```
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 74d27c7be38..82ddfd0314a 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
@@ -86,28 +86,28 @@ function ResourceDetailsLayout() {
       }}
     >
       <Columns columns={{xs: 1, md: '2fr 1fr'}} gap="4">
-        <AlphaStack fullWidth gap="4">
-          <AlphaCard roundedAbove="sm">
-            <AlphaStack fullWidth gap="4">
+        <Stack fullWidth gap="4">
+          <Card roundedAbove="sm">
+            <Stack fullWidth gap="4">
               <SkeletonLabel />
               <Box border="divider" borderRadius="base" minHeight="2rem" />
               <SkeletonLabel maxWidth="8rem" />
               <Box border="divider" borderRadius="base" minHeight="20rem" />
-            </AlphaStack>
-          </AlphaCard>
-          <AlphaCard roundedAbove="sm">
-            <AlphaStack fullWidth gap="4">
+            </Stack>
+          </Card>
+          <Card roundedAbove="sm">
+            <Stack fullWidth 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>
-          </AlphaCard>
-        </AlphaStack>
-        <AlphaStack fullWidth gap={{xs: '4', md: '2'}}>
-          <AlphaCard roundedAbove="sm">
-            <AlphaStack fullWidth gap="4">
+            </Stack>
+          </Card>
+        </Stack>
+        <Stack fullWidth gap={{xs: '4', md: '2'}}>
+          <Card roundedAbove="sm">
+            <Stack fullWidth gap="4">
               <SkeletonDisplayText size="small" />
               <Box border="divider" borderRadius="base" minHeight="2rem" />
               <Box>
@@ -118,19 +118,19 @@ function ResourceDetailsLayout() {
               <SkeletonLabel />
               <Divider borderStyle="divider" />
               <SkeletonBodyText />
-            </AlphaStack>
-          </AlphaCard>
-          <AlphaCard roundedAbove="sm">
-            <AlphaStack fullWidth gap="4">
+            </Stack>
+          </Card>
+          <Card roundedAbove="sm">
+            <Stack fullWidth gap="4">
               <SkeletonLabel />
               <Box border="divider" borderRadius="base" minHeight="2rem" />
               <SkeletonLabel maxWidth="4rem" />
               <Box border="divider" borderRadius="base" minHeight="2rem" />
               <SkeletonLabel />
               <SkeletonBodyText />
-            </AlphaStack>
-          </AlphaCard>
-        </AlphaStack>
+            </Stack>
+          </Card>
+        </Stack>
       </Columns>
     </Page>
   );
diff --git a/polaris.shopify.com/content/patterns/variant.md.template b/polaris.shopify.com/content/patterns/variant.md.template
index 3c1749732c3..bab28d62c9d 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>
+  <Stack gap="16">Coming Soon</Stack>
 </Page>
 ```
 
diff --git a/polaris.shopify.com/next.config.js b/polaris.shopify.com/next.config.js
index 646908f0086..62edd3ba992 100644
--- a/polaris.shopify.com/next.config.js
+++ b/polaris.shopify.com/next.config.js
@@ -211,11 +211,6 @@ const deprecated = [
     destination: '/components/deprecated/sheet',
     permanent: false,
   },
-  {
-    source: '/components/stack',
-    destination: '/components/deprecated/stack',
-    permanent: false,
-  },
   {
     source: '/components/subheading',
     destination: '/components/deprecated/subheading',
@@ -345,11 +340,6 @@ const layoutAndStructure = [
     destination: '/components/layout-and-structure/alpha-card',
     permanent: false,
   },
-  {
-    source: '/components/alpha-stack',
-    destination: '/components/layout-and-structure/alpha-stack',
-    permanent: false,
-  },
   {
     source: '/components/bleed',
     destination: '/components/layout-and-structure/bleed',
@@ -440,6 +430,11 @@ const layoutAndStructure = [
     destination: '/components/layout-and-structure/page',
     permanent: false,
   },
+  {
+    source: '/components/layout-and-structure/alpha-stack',
+    destination: '/components/layout-and-structure/stack',
+    permanent: false,
+  },
   {
     source: '/components/stack',
     destination: '/components/layout-and-structure/stack',
diff --git a/polaris.shopify.com/pages/examples/alpha-stack-default.tsx b/polaris.shopify.com/pages/examples/alpha-stack-default.tsx
deleted file mode 100644
index b95e2b3f011..00000000000
--- a/polaris.shopify.com/pages/examples/alpha-stack-default.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-import {AlphaStack, Text} from '@shopify/polaris';
-
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function AlphaStackExample() {
-  return (
-    <AlphaStack>
-      <Placeholder width="320px" label="Stack child" />
-      <Placeholder width="320px" />
-      <Placeholder width="320px" />
-    </AlphaStack>
-  );
-}
-
-const Placeholder = ({
-  label = '',
-  height = 'auto',
-  width = 'auto',
-  childWidth = 'auto',
-}) => {
-  return (
-    <div
-      style={{
-        background: '#7B47F1',
-        padding: '14px var(--p-space-2)',
-        height: height ?? undefined,
-        width: width ?? undefined,
-      }}
-    >
-      <div
-        style={{
-          display: 'inline-block',
-          background: 'rgba(255, 255, 255, 0.3)',
-          color: '#FFFFFF',
-          width: childWidth ?? undefined,
-        }}
-      >
-        <Text as="h2" variant="bodyMd" fontWeight="medium">
-          {label}
-        </Text>
-      </div>
-    </div>
-  );
-};
-
-export default withPolarisExample(AlphaStackExample);
diff --git a/polaris.shopify.com/pages/examples/bleed-specific-direction.tsx b/polaris.shopify.com/pages/examples/bleed-specific-direction.tsx
index 297205058fd..ed564b14d81 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 {Stack, Bleed, Box, Text, Inline} from '@shopify/polaris';
 
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function BleedSpecificDirectionExample() {
   return (
-    <AlphaStack gap="6" fullWidth>
+    <Stack gap="6" fullWidth>
       <Box background="surface" border="base" padding="5">
         <Bleed marginBlockStart="5">
           <Placeholder label="Top" />
@@ -26,7 +26,7 @@ function BleedSpecificDirectionExample() {
           <Placeholder label="Right" />
         </Bleed>
       </Box>
-    </AlphaStack>
+    </Stack>
   );
 }
 
diff --git a/polaris.shopify.com/pages/examples/box-with-padding.tsx b/polaris.shopify.com/pages/examples/box-with-padding.tsx
index 5e8faabe37c..9c7bb179a7e 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, LegacyStack, Text, Inline} from '@shopify/polaris';
+import {Stack, Box, Text, Inline} from '@shopify/polaris';
 
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function BoxWithPaddingExample() {
   return (
-    <AlphaStack gap="4">
+    <Stack gap="4">
       <div style={{backgroundColor: '#986BFF'}}>
         <Box padding="4" width="586px">
           <Placeholder label="All side padding" childAlign="center" />
@@ -35,7 +35,7 @@ function BoxWithPaddingExample() {
           </Box>
         </div>
       </Inline>
-    </AlphaStack>
+    </Stack>
   );
 }
 
diff --git a/polaris.shopify.com/pages/examples/card-with-varying-padding.tsx b/polaris.shopify.com/pages/examples/card-with-varying-padding.tsx
index 13d1dd61382..3ffe996ecb0 100644
--- a/polaris.shopify.com/pages/examples/card-with-varying-padding.tsx
+++ b/polaris.shopify.com/pages/examples/card-with-varying-padding.tsx
@@ -1,10 +1,10 @@
-import {Card, Text, AlphaStack} from '@shopify/polaris';
+import {Card, Text, Stack} from '@shopify/polaris';
 import React from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function CardExample() {
   return (
-    <AlphaStack gap="4" fullWidth>
+    <Stack gap="4" fullWidth>
       <Card>
         <Placeholder label="Content inside a card" />
       </Card>
@@ -17,7 +17,7 @@ function CardExample() {
       <Card padding="0">
         <Placeholder label="Content inside a card" />
       </Card>
-    </AlphaStack>
+    </Stack>
   );
 }
 
diff --git a/polaris.shopify.com/pages/examples/divider-with-border-styles.tsx b/polaris.shopify.com/pages/examples/divider-with-border-styles.tsx
index cd8f052524a..b1d021898cb 100644
--- a/polaris.shopify.com/pages/examples/divider-with-border-styles.tsx
+++ b/polaris.shopify.com/pages/examples/divider-with-border-styles.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import {Divider, Text, AlphaStack} from '@shopify/polaris';
+import {Divider, Text, Stack} from '@shopify/polaris';
 
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function DividerWithBorderStylesExample() {
   return (
-    <AlphaStack gap="5" fullWidth>
+    <Stack gap="5" fullWidth>
       <Text as="h1" variant="headingXs">
         Base
       </Text>
@@ -26,7 +26,7 @@ function DividerWithBorderStylesExample() {
         Transparent
       </Text>
       <Divider borderStyle="transparent" />
-    </AlphaStack>
+    </Stack>
   );
 }
 
diff --git a/polaris.shopify.com/pages/examples/inline-with-gap.tsx b/polaris.shopify.com/pages/examples/inline-with-gap.tsx
index 5fe75d52b8c..a41ea54e986 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, Stack} from '@shopify/polaris';
 
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function InlineWithGapExample() {
   return (
-    <AlphaStack gap="8">
+    <Stack gap="8">
       <Inline gap="4" blockAlign="center">
         <SpacingBackground width="436px">
           <Inline gap="4" wrap={false}>
@@ -22,7 +22,7 @@ function InlineWithGapExample() {
           <Placeholder width="106px" height="20px" />
         </Inline>
       </SpacingBackground>
-    </AlphaStack>
+    </Stack>
   );
 }
 
diff --git a/polaris.shopify.com/pages/examples/inline-with-horizontal-alignment.tsx b/polaris.shopify.com/pages/examples/inline-with-horizontal-alignment.tsx
index 9eb15f15ec5..6a188deb336 100644
--- a/polaris.shopify.com/pages/examples/inline-with-horizontal-alignment.tsx
+++ b/polaris.shopify.com/pages/examples/inline-with-horizontal-alignment.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import {AlphaStack, Inline, Text, Page} from '@shopify/polaris';
+import {Stack, Inline, Text, Page} from '@shopify/polaris';
 
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function InlineWithHorizontalAlignmentExample() {
   return (
     <Page narrowWidth>
-      <AlphaStack gap="16">
+      <Stack gap="16">
         <Inline gap="4" align="start">
           <Placeholder width="106px" label="Start" />
           <Placeholder width="106px" height="20px" />
@@ -31,7 +31,7 @@ function InlineWithHorizontalAlignmentExample() {
           <Placeholder width="106px" height="20px" />
           <Placeholder width="106px" height="20px" />
         </Inline>
-      </AlphaStack>
+      </Stack>
     </Page>
   );
 }
diff --git a/polaris.shopify.com/pages/examples/inline-with-vertical-alignment.tsx b/polaris.shopify.com/pages/examples/inline-with-vertical-alignment.tsx
index 45c166217ae..2d41a6409ba 100644
--- a/polaris.shopify.com/pages/examples/inline-with-vertical-alignment.tsx
+++ b/polaris.shopify.com/pages/examples/inline-with-vertical-alignment.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import {Inline, Text, AlphaStack} from '@shopify/polaris';
+import {Inline, Text, Stack} from '@shopify/polaris';
 
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function InlineWithVerticalAlignmentExample() {
   return (
-    <AlphaStack gap="16">
+    <Stack gap="16">
       <Inline gap="4" blockAlign="start">
         <Placeholder width="106px" label="Start" />
         <Placeholder width="106px" height="20px" />
@@ -38,7 +38,7 @@ function InlineWithVerticalAlignmentExample() {
         <Placeholder width="106px" padding="0" label="text" />
         <Placeholder width="106px" padding="0" label="text" />
       </Inline>
-    </AlphaStack>
+    </Stack>
   );
 }
 
diff --git a/polaris.shopify.com/pages/examples/stack-default.tsx b/polaris.shopify.com/pages/examples/stack-default.tsx
index 639dac7df51..38beccf2c3f 100644
--- a/polaris.shopify.com/pages/examples/stack-default.tsx
+++ b/polaris.shopify.com/pages/examples/stack-default.tsx
@@ -1,16 +1,47 @@
-import {Stack, Badge} from '@shopify/polaris';
 import React from 'react';
+import {Stack, Text} from '@shopify/polaris';
+
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function StackExample() {
   return (
     <Stack>
-      <Badge>Paid</Badge>
-      <Badge>Processing</Badge>
-      <Badge>Fulfilled</Badge>
-      <Badge>Completed</Badge>
+      <Placeholder width="320px" label="Stack child" />
+      <Placeholder width="320px" />
+      <Placeholder width="320px" />
     </Stack>
   );
 }
 
+const Placeholder = ({
+  label = '',
+  height = 'auto',
+  width = 'auto',
+  childWidth = 'auto',
+}) => {
+  return (
+    <div
+      style={{
+        background: '#7B47F1',
+        padding: '14px var(--p-space-2)',
+        height: height ?? undefined,
+        width: width ?? undefined,
+      }}
+    >
+      <div
+        style={{
+          display: 'inline-block',
+          background: 'rgba(255, 255, 255, 0.3)',
+          color: '#FFFFFF',
+          width: childWidth ?? undefined,
+        }}
+      >
+        <Text as="h2" variant="bodyMd" fontWeight="medium">
+          {label}
+        </Text>
+      </div>
+    </div>
+  );
+};
+
 export default withPolarisExample(StackExample);
diff --git a/polaris.shopify.com/pages/examples/stack-fill-available-space-proportionally.tsx b/polaris.shopify.com/pages/examples/stack-fill-available-space-proportionally.tsx
deleted file mode 100644
index 572d9af85f2..00000000000
--- a/polaris.shopify.com/pages/examples/stack-fill-available-space-proportionally.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import {Stack, Badge, Text} from '@shopify/polaris';
-import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function StackExample() {
-  return (
-    <Stack distribution="fill">
-      <Text variant="headingMd" as="h2">
-        Order #1136
-      </Text>
-      <Badge>Paid</Badge>
-      <Badge>Fulfilled</Badge>
-    </Stack>
-  );
-}
-
-export default withPolarisExample(StackExample);
diff --git a/polaris.shopify.com/pages/examples/stack-non-wrapping.tsx b/polaris.shopify.com/pages/examples/stack-non-wrapping.tsx
deleted file mode 100644
index 0069e4199c3..00000000000
--- a/polaris.shopify.com/pages/examples/stack-non-wrapping.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import {Stack, Badge} from '@shopify/polaris';
-import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function StackExample() {
-  return (
-    <Stack wrap={false}>
-      <Badge>Paid</Badge>
-      <Badge>Processing</Badge>
-      <Badge>Fulfilled</Badge>
-      <Badge>Completed</Badge>
-    </Stack>
-  );
-}
-
-export default withPolarisExample(StackExample);
diff --git a/polaris.shopify.com/pages/examples/stack-spacing.tsx b/polaris.shopify.com/pages/examples/stack-spacing.tsx
deleted file mode 100644
index 7e5bd3535c6..00000000000
--- a/polaris.shopify.com/pages/examples/stack-spacing.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import {Stack, Badge} from '@shopify/polaris';
-import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function StackExample() {
-  return (
-    <Stack spacing="loose">
-      <Badge>Paid</Badge>
-      <Badge>Fulfilled</Badge>
-    </Stack>
-  );
-}
-
-export default withPolarisExample(StackExample);
diff --git a/polaris.shopify.com/pages/examples/stack-vertical-centering.tsx b/polaris.shopify.com/pages/examples/stack-vertical-centering.tsx
deleted file mode 100644
index 5afbf183379..00000000000
--- a/polaris.shopify.com/pages/examples/stack-vertical-centering.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import {Stack, Badge, Text} from '@shopify/polaris';
-import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function StackExample() {
-  return (
-    <Stack alignment="center">
-      <Text variant="headingMd" as="h2">
-        Order
-        <br />
-        #1136
-        <br />
-        was paid
-      </Text>
-      <Badge>Paid</Badge>
-      <Badge>Fulfilled</Badge>
-    </Stack>
-  );
-}
-
-export default withPolarisExample(StackExample);
diff --git a/polaris.shopify.com/pages/examples/stack-where-a-single-item-fills-the-remaining-space.tsx b/polaris.shopify.com/pages/examples/stack-where-a-single-item-fills-the-remaining-space.tsx
deleted file mode 100644
index 567327e49b8..00000000000
--- a/polaris.shopify.com/pages/examples/stack-where-a-single-item-fills-the-remaining-space.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import {Stack, Badge, Text} from '@shopify/polaris';
-import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function StackExample() {
-  return (
-    <Stack>
-      <Stack.Item fill>
-        <Text variant="headingMd" as="h2">
-          Order #1136
-        </Text>
-      </Stack.Item>
-      <Stack.Item>
-        <Badge>Paid</Badge>
-      </Stack.Item>
-      <Stack.Item>
-        <Badge>Fulfilled</Badge>
-      </Stack.Item>
-    </Stack>
-  );
-}
-
-export default withPolarisExample(StackExample);
diff --git a/polaris.shopify.com/pages/examples/stack-where-items-fill-space-evenly.tsx b/polaris.shopify.com/pages/examples/stack-where-items-fill-space-evenly.tsx
deleted file mode 100644
index 511f3db5909..00000000000
--- a/polaris.shopify.com/pages/examples/stack-where-items-fill-space-evenly.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import {Stack, Badge, Text} from '@shopify/polaris';
-import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function StackExample() {
-  return (
-    <Stack distribution="fillEvenly">
-      <Text variant="headingMd" as="h2">
-        Order #1136
-      </Text>
-      <Badge>Paid</Badge>
-      <Badge>Fulfilled</Badge>
-    </Stack>
-  );
-}
-
-export default withPolarisExample(StackExample);
diff --git a/polaris.shopify.com/pages/examples/alpha-stack-with-align.tsx b/polaris.shopify.com/pages/examples/stack-with-align.tsx
similarity index 76%
rename from polaris.shopify.com/pages/examples/alpha-stack-with-align.tsx
rename to polaris.shopify.com/pages/examples/stack-with-align.tsx
index 9e706e5613c..337c5ff6205 100644
--- a/polaris.shopify.com/pages/examples/alpha-stack-with-align.tsx
+++ b/polaris.shopify.com/pages/examples/stack-with-align.tsx
@@ -1,28 +1,28 @@
 import React from 'react';
-import {AlphaStack, Page, Inline, Text} from '@shopify/polaris';
+import {Stack, Page, Inline, Text} from '@shopify/polaris';
 
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
-function AlphaStackWithAlignExample() {
+function StackWithAlignExample() {
   return (
     <Page>
-      <AlphaStack gap="5" fullWidth>
-        <AlphaStack gap="4" align="start">
+      <Stack gap="5" fullWidth>
+        <Stack gap="4" align="start">
           <Placeholder width="320px" label="Start" childAlign="start" />
           <Placeholder width="320px" childAlign="start" />
           <Placeholder width="320px" childAlign="start" />
-        </AlphaStack>
-        <AlphaStack gap="4" align="center">
+        </Stack>
+        <Stack gap="4" align="center">
           <Placeholder width="320px" label="Center" childAlign="center" />
           <Placeholder width="320px" childAlign="center" />
           <Placeholder width="320px" childAlign="center" />
-        </AlphaStack>
-        <AlphaStack gap="4" align="end">
+        </Stack>
+        <Stack gap="4" align="end">
           <Placeholder width="320px" label="End" childAlign="end" />
           <Placeholder width="320px" childAlign="center" />
           <Placeholder width="320px" childAlign="center" />
-        </AlphaStack>
-      </AlphaStack>
+        </Stack>
+      </Stack>
     </Page>
   );
 }
@@ -59,4 +59,4 @@ const Placeholder = ({
   );
 };
 
-export default withPolarisExample(AlphaStackWithAlignExample);
+export default withPolarisExample(StackWithAlignExample);
diff --git a/polaris.shopify.com/pages/examples/alpha-stack-with-full-width-children.tsx b/polaris.shopify.com/pages/examples/stack-with-full-width-children.tsx
similarity index 78%
rename from polaris.shopify.com/pages/examples/alpha-stack-with-full-width-children.tsx
rename to polaris.shopify.com/pages/examples/stack-with-full-width-children.tsx
index 5e6a2744cb1..babe2e2bc88 100644
--- a/polaris.shopify.com/pages/examples/alpha-stack-with-full-width-children.tsx
+++ b/polaris.shopify.com/pages/examples/stack-with-full-width-children.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
-import {AlphaStack, Text} from '@shopify/polaris';
+import {Stack, Text} from '@shopify/polaris';
 
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
-function AlphaStackWithFullWidthChildrenExample() {
+function StackWithFullWidthChildrenExample() {
   return (
-    <AlphaStack gap="4" fullWidth>
+    <Stack gap="4" fullWidth>
       <Placeholder label="Stack child" childWidth="100%" />
       <Placeholder />
       <Placeholder />
-    </AlphaStack>
+    </Stack>
   );
 }
 
@@ -44,4 +44,4 @@ const Placeholder = ({
   );
 };
 
-export default withPolarisExample(AlphaStackWithFullWidthChildrenExample);
+export default withPolarisExample(StackWithFullWidthChildrenExample);
diff --git a/polaris.shopify.com/pages/examples/alpha-stack-with-gap.tsx b/polaris.shopify.com/pages/examples/stack-with-gap.tsx
similarity index 86%
rename from polaris.shopify.com/pages/examples/alpha-stack-with-gap.tsx
rename to polaris.shopify.com/pages/examples/stack-with-gap.tsx
index 739ba85c012..fa9dbb7caee 100644
--- a/polaris.shopify.com/pages/examples/alpha-stack-with-gap.tsx
+++ b/polaris.shopify.com/pages/examples/stack-with-gap.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
-import {AlphaStack, Text} from '@shopify/polaris';
+import {Stack, Text} from '@shopify/polaris';
 
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
-function AlphaStackWithGapExample() {
+function StackWithGapExample() {
   return (
     <SpacingBackground width="320px">
-      <AlphaStack gap="5">
+      <Stack gap="5">
         <Placeholder width="320px" label="Stack child" />
         <Placeholder width="320px" />
         <Placeholder width="320px" />
-      </AlphaStack>
+      </Stack>
     </SpacingBackground>
   );
 }
@@ -61,4 +61,4 @@ const Placeholder = ({
   );
 };
 
-export default withPolarisExample(AlphaStackWithGapExample);
+export default withPolarisExample(StackWithGapExample);
diff --git a/polaris.shopify.com/public/images/components/deprecated/stack.png b/polaris.shopify.com/public/images/components/deprecated/stack.png
deleted file mode 100644
index 521e95bfdf7..00000000000
Binary files a/polaris.shopify.com/public/images/components/deprecated/stack.png and /dev/null differ
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/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/stack.png
diff --git a/polaris.shopify.com/src/components/TipBanner/TipBanner.tsx b/polaris.shopify.com/src/components/TipBanner/TipBanner.tsx
index 4738ab7f729..90cef7f7432 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 {Stack, 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">
+      <Stack 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>
+      </Stack>
     </div>
   );
 }