From 97a6b79af136db6ea1adf6f1b41c8c7ffa394dca Mon Sep 17 00:00:00 2001
From: Banks Nussman <banks@nussman.us>
Date: Mon, 23 Oct 2023 16:11:34 -0400
Subject: [PATCH 1/9] add stack and story

---
 .../manager/src/components/Stack.stories.tsx  | 61 +++++++++++++++++++
 packages/manager/src/components/Stack.tsx     | 14 +++++
 2 files changed, 75 insertions(+)
 create mode 100644 packages/manager/src/components/Stack.stories.tsx
 create mode 100644 packages/manager/src/components/Stack.tsx

diff --git a/packages/manager/src/components/Stack.stories.tsx b/packages/manager/src/components/Stack.stories.tsx
new file mode 100644
index 00000000000..8d3a72c301b
--- /dev/null
+++ b/packages/manager/src/components/Stack.stories.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+
+import { Divider } from './Divider';
+import { Paper } from './Paper';
+import { Stack } from './Stack';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const children = [
+  <Paper key={0} variant="outlined">
+    1
+  </Paper>,
+  <Paper key={1} variant="outlined">
+    2
+  </Paper>,
+  <Paper key={2} variant="outlined">
+    3
+  </Paper>,
+];
+
+export const Default: StoryObj<typeof Stack> = {
+  args: {
+    children,
+    spacing: 2,
+  },
+  render: (args) => <Stack {...args} />,
+};
+
+export const Vertial: StoryObj<typeof Stack> = {
+  args: {
+    children,
+    spacing: 2,
+  },
+  render: (args) => <Stack {...args} />,
+};
+
+export const Horizontal: StoryObj<typeof Stack> = {
+  args: {
+    children,
+    direction: 'row',
+    spacing: 2,
+  },
+  render: (args) => <Stack {...args} />,
+};
+
+export const WithDivider: StoryObj<typeof Stack> = {
+  args: {
+    children,
+    direction: 'row',
+    divider: <Divider flexItem orientation="vertical" />,
+    spacing: 2,
+  },
+  render: (args) => <Stack {...args} />,
+};
+
+const meta: Meta<typeof Stack> = {
+  component: Stack,
+  title: 'Components/Stack',
+};
+
+export default meta;
diff --git a/packages/manager/src/components/Stack.tsx b/packages/manager/src/components/Stack.tsx
new file mode 100644
index 00000000000..eaccf3a4e32
--- /dev/null
+++ b/packages/manager/src/components/Stack.tsx
@@ -0,0 +1,14 @@
+import { default as _Stack, StackProps } from '@mui/material/Stack';
+import React from 'react';
+
+/**
+ * A Stack is a layout component that uses flexbox to
+ * vertically or horozintally align elements with optional spacing.
+ *
+ * > Stack is ideal for one-dimensional layouts, while Grid is preferable when you need both vertical and horizontal arrangement.
+ */
+export const Stack = (props: StackProps) => {
+  return <_Stack {...props} />;
+};
+
+export type { StackProps };

From 70b6c4493e7ecea1c80d35eabb2037fdb25be7c5 Mon Sep 17 00:00:00 2001
From: Banks Nussman <banks@nussman.us>
Date: Mon, 23 Oct 2023 16:30:59 -0400
Subject: [PATCH 2/9] add a spacer component

---
 .../manager/src/components/Spacer.stories.tsx | 38 +++++++++++++++++++
 packages/manager/src/components/Spacer.tsx    | 11 ++++++
 .../Configurations/ConfigurationAccordion.tsx |  3 +-
 .../LoadBalancerDetail/LoadBalancerRoutes.tsx |  3 +-
 .../LoadBalancerServiceTargets.tsx            |  3 +-
 5 files changed, 55 insertions(+), 3 deletions(-)
 create mode 100644 packages/manager/src/components/Spacer.stories.tsx
 create mode 100644 packages/manager/src/components/Spacer.tsx

diff --git a/packages/manager/src/components/Spacer.stories.tsx b/packages/manager/src/components/Spacer.stories.tsx
new file mode 100644
index 00000000000..711977b430a
--- /dev/null
+++ b/packages/manager/src/components/Spacer.stories.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { Box } from './Box';
+import { Button } from './Button/Button';
+import { Paper } from './Paper';
+import { Spacer } from './Spacer';
+import { StatusIcon } from './StatusIcon/StatusIcon';
+import { Typography } from './Typography';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+export const Default: StoryObj<typeof Spacer> = {
+  render: () => (
+    <Box display="flex">
+      <Paper variant="outlined">1</Paper>
+      <Spacer />
+      <Paper variant="outlined">2</Paper>
+    </Box>
+  ),
+};
+
+export const Example: StoryObj<typeof Spacer> = {
+  render: () => (
+    <Box alignItems="center" display="flex">
+      <Typography variant="h2">Linode</Typography>
+      <StatusIcon ml={1} status="active" />
+      <Spacer />
+      <Button buttonType="primary">Create Linode</Button>
+    </Box>
+  ),
+};
+
+const meta: Meta<typeof Spacer> = {
+  component: Spacer,
+  title: 'Components/Spacer',
+};
+
+export default meta;
diff --git a/packages/manager/src/components/Spacer.tsx b/packages/manager/src/components/Spacer.tsx
new file mode 100644
index 00000000000..26f822f5791
--- /dev/null
+++ b/packages/manager/src/components/Spacer.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+import { Box } from './Box';
+
+/**
+ * A headless component that should be used within a flexbox
+ * to add space between flex items.
+ */
+export const Spacer = () => {
+  return <Box flexGrow={1} />;
+};
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationAccordion.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationAccordion.tsx
index 55f10da2a0b..d9890d9ffc0 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationAccordion.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationAccordion.tsx
@@ -22,6 +22,7 @@ import { CertificateTable } from './CertificateTable';
 import { DeleteConfigurationDialog } from './DeleteConfigurationDialog';
 
 import type { Configuration } from '@linode/api-v4';
+import { Spacer } from 'src/components/Spacer';
 
 interface Props {
   configuration: Configuration;
@@ -143,7 +144,7 @@ export const ConfigurationAccordion = (props: Props) => {
             <Stack alignItems="center" direction="row">
               <InputLabel sx={{ marginBottom: 0 }}>TLS Certificates</InputLabel>
               <TooltipIcon status="help" text="OMG!" />
-              <Box flexGrow={1} />
+              <Spacer />
               <Button>Upload Certificate</Button>
             </Stack>
             <CertificateTable
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerRoutes.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerRoutes.tsx
index 99b5109f460..4fab6d84730 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerRoutes.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerRoutes.tsx
@@ -31,6 +31,7 @@ import { RuleDrawer } from './Routes/RuleDrawer';
 import { RulesTable } from './RulesTable';
 
 import type { Filter, Route } from '@linode/api-v4';
+import { Spacer } from 'src/components/Spacer';
 
 const PREFERENCE_KEY = 'loadbalancer-routes';
 
@@ -219,7 +220,7 @@ export const LoadBalancerRoutes = () => {
           style={{ minWidth: '320px' }}
           value={query}
         />
-        <Box flexGrow={1} />
+        <Spacer />
         {/**
          * TODO: AGLB: The Create Route behavior should be implemented in future AGLB tickets.
          */}
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerServiceTargets.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerServiceTargets.tsx
index 5a83fd2ba41..3a9ffd82613 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerServiceTargets.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerServiceTargets.tsx
@@ -31,6 +31,7 @@ import { CreateServiceTargetDrawer } from './ServiceTargets/CreateServiceTargetD
 import { DeleteServiceTargetDialog } from './ServiceTargets/DeleteServiceTargetDialog';
 
 import type { Filter } from '@linode/api-v4';
+import { Spacer } from 'src/components/Spacer';
 
 const PREFERENCE_KEY = 'loadbalancer-service-targets';
 
@@ -118,7 +119,7 @@ export const LoadBalancerServiceTargets = () => {
           style={{ minWidth: '320px' }}
           value={query}
         />
-        <Box flexGrow={1} />
+        <Spacer />
         <Button
           buttonType="primary"
           onClick={() => setIsCreateDrawerOpen(true)}

From 53d5c929cf950957a93dd49a4b5db030895c98d4 Mon Sep 17 00:00:00 2001
From: Banks Nussman <banks@nussman.us>
Date: Mon, 23 Oct 2023 16:33:36 -0400
Subject: [PATCH 3/9] find and replace stack imports

---
 packages/manager/src/components/MaintenanceScreen.tsx          | 2 +-
 .../src/components/SelectFirewallPanel/SelectFirewallPanel.tsx | 2 +-
 packages/manager/src/features/Backups/BackupDrawer.tsx         | 2 +-
 packages/manager/src/features/Betas/BetaDetails.tsx            | 2 +-
 packages/manager/src/features/Betas/BetaDetailsList.tsx        | 2 +-
 packages/manager/src/features/Betas/BetasLanding.tsx           | 2 +-
 .../BillingSummary/PaymentDrawer/PaymentDrawer.tsx             | 2 +-
 .../src/features/GlobalNotifications/APIMaintenanceBanner.tsx  | 2 +-
 .../manager/src/features/Linodes/LinodesCreate/VPCPanel.tsx    | 2 +-
 .../Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx   | 2 +-
 .../LoadBalancerDetail/Certificates/Certificates.tsx           | 2 +-
 .../LoadBalancers/LoadBalancerDetail/Certificates/index.tsx    | 2 +-
 .../Configurations/ConfigurationAccordion.tsx                  | 2 +-
 .../LoadBalancers/LoadBalancerDetail/LoadBalancerRoutes.tsx    | 3 +--
 .../LoadBalancerDetail/LoadBalancerServiceTargets.tsx          | 3 +--
 .../LoadBalancers/LoadBalancerDetail/LoadBalancerSettings.tsx  | 2 +-
 .../LoadBalancers/LoadBalancerDetail/LoadBalancerSummary.tsx   | 2 +-
 .../LoadBalancers/LoadBalancerDetail/Routes/RuleDrawer.tsx     | 2 +-
 .../ServiceTargets/CreateServiceTargetDrawer.tsx               | 2 +-
 .../LoadBalancerDetail/ServiceTargets/LinodeOrIPSelect.tsx     | 2 +-
 .../LoadBalancers/LoadBalancerDetail/Settings/Delete.tsx       | 2 +-
 .../LoadBalancers/LoadBalancerDetail/Settings/Label.tsx        | 2 +-
 .../LoadBalancers/LoadBalancerDetail/Settings/Region.tsx       | 2 +-
 .../LoadBalancers/LoadBalancerLanding/LoadBalancerRow.tsx      | 2 +-
 packages/manager/src/features/Profile/Settings/Settings.tsx    | 2 +-
 packages/manager/src/features/Support/Hively.tsx               | 2 +-
 .../Support/SupportTicketDetail/SupportTicketDetail.tsx        | 2 +-
 packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx    | 2 +-
 packages/manager/src/features/Users/UserRow.tsx                | 2 +-
 29 files changed, 29 insertions(+), 31 deletions(-)

diff --git a/packages/manager/src/components/MaintenanceScreen.tsx b/packages/manager/src/components/MaintenanceScreen.tsx
index 599f3d5e8f2..8916186a641 100644
--- a/packages/manager/src/components/MaintenanceScreen.tsx
+++ b/packages/manager/src/components/MaintenanceScreen.tsx
@@ -1,5 +1,5 @@
 import BuildIcon from '@mui/icons-material/Build';
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import { Theme, useTheme } from '@mui/material/styles';
 import * as React from 'react';
 
diff --git a/packages/manager/src/components/SelectFirewallPanel/SelectFirewallPanel.tsx b/packages/manager/src/components/SelectFirewallPanel/SelectFirewallPanel.tsx
index f5e3386fb4f..ceeb04e7dea 100644
--- a/packages/manager/src/components/SelectFirewallPanel/SelectFirewallPanel.tsx
+++ b/packages/manager/src/components/SelectFirewallPanel/SelectFirewallPanel.tsx
@@ -1,5 +1,5 @@
 import { Firewall } from '@linode/api-v4';
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import * as React from 'react';
 
 import { Paper } from 'src/components/Paper';
diff --git a/packages/manager/src/features/Backups/BackupDrawer.tsx b/packages/manager/src/features/Backups/BackupDrawer.tsx
index b5b96857e84..a55a475ab51 100644
--- a/packages/manager/src/features/Backups/BackupDrawer.tsx
+++ b/packages/manager/src/features/Backups/BackupDrawer.tsx
@@ -1,5 +1,5 @@
 import { styled } from '@mui/material';
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import { isNumber } from 'lodash';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
diff --git a/packages/manager/src/features/Betas/BetaDetails.tsx b/packages/manager/src/features/Betas/BetaDetails.tsx
index da7127efdcc..e428a2777a1 100644
--- a/packages/manager/src/features/Betas/BetaDetails.tsx
+++ b/packages/manager/src/features/Betas/BetaDetails.tsx
@@ -1,6 +1,6 @@
 import { AccountBeta } from '@linode/api-v4/lib/account';
 import { Beta } from '@linode/api-v4/lib/betas';
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
 
diff --git a/packages/manager/src/features/Betas/BetaDetailsList.tsx b/packages/manager/src/features/Betas/BetaDetailsList.tsx
index 0bc05bf6f1d..04c765076de 100644
--- a/packages/manager/src/features/Betas/BetaDetailsList.tsx
+++ b/packages/manager/src/features/Betas/BetaDetailsList.tsx
@@ -1,7 +1,7 @@
 import { APIError } from '@linode/api-v4';
 import { AccountBeta } from '@linode/api-v4/lib/account';
 import { Beta } from '@linode/api-v4/lib/betas';
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import * as React from 'react';
 
 import { CircleProgress } from 'src/components/CircleProgress';
diff --git a/packages/manager/src/features/Betas/BetasLanding.tsx b/packages/manager/src/features/Betas/BetasLanding.tsx
index 1b565adf040..9a1b2503a69 100644
--- a/packages/manager/src/features/Betas/BetasLanding.tsx
+++ b/packages/manager/src/features/Betas/BetasLanding.tsx
@@ -1,4 +1,4 @@
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import * as React from 'react';
 
 import { LandingHeader } from 'src/components/LandingHeader/LandingHeader';
diff --git a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentDrawer.tsx b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentDrawer.tsx
index 7642f017d07..52d62bef282 100644
--- a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentDrawer.tsx
+++ b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentDrawer.tsx
@@ -1,7 +1,7 @@
 import { PaymentMethod } from '@linode/api-v4';
 import { makePayment } from '@linode/api-v4/lib/account';
 import { APIWarning } from '@linode/api-v4/lib/types';
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import Grid from '@mui/material/Unstable_Grid2';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
diff --git a/packages/manager/src/features/GlobalNotifications/APIMaintenanceBanner.tsx b/packages/manager/src/features/GlobalNotifications/APIMaintenanceBanner.tsx
index 1e43d5faee5..cb12ba6d4e8 100644
--- a/packages/manager/src/features/GlobalNotifications/APIMaintenanceBanner.tsx
+++ b/packages/manager/src/features/GlobalNotifications/APIMaintenanceBanner.tsx
@@ -1,4 +1,4 @@
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import * as React from 'react';
 
 import { DismissibleBanner } from 'src/components/DismissibleBanner';
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.tsx b/packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.tsx
index f841d73cabd..e3837b7f1a4 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.tsx
@@ -1,4 +1,4 @@
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import * as React from 'react';
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx
index 1e7bb13c0db..8e73548edae 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx
@@ -2,7 +2,7 @@ import {
   InterfacePayload,
   InterfacePurpose,
 } from '@linode/api-v4/lib/linodes/types';
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import Grid from '@mui/material/Unstable_Grid2';
 import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Certificates/Certificates.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Certificates/Certificates.tsx
index 819f9ddb2d9..f68703a1812 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Certificates/Certificates.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Certificates/Certificates.tsx
@@ -1,4 +1,4 @@
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import React, { useState } from 'react';
 import { useHistory, useLocation, useParams } from 'react-router-dom';
 
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Certificates/index.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Certificates/index.tsx
index 96be316597e..d0a6d8c852c 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Certificates/index.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Certificates/index.tsx
@@ -1,4 +1,4 @@
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import React from 'react';
 import { Route, useLocation, useRouteMatch } from 'react-router-dom';
 
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationAccordion.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationAccordion.tsx
index d9890d9ffc0..a91a128e0b3 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationAccordion.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationAccordion.tsx
@@ -1,4 +1,4 @@
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import { useFormik } from 'formik';
 import React, { useState } from 'react';
 
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerRoutes.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerRoutes.tsx
index 4fab6d84730..5088d51a7b2 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerRoutes.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerRoutes.tsx
@@ -1,11 +1,10 @@
 import CloseIcon from '@mui/icons-material/Close';
 import { Hidden, IconButton } from '@mui/material';
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import React, { useState } from 'react';
 import { useParams } from 'react-router-dom';
 
 import { ActionMenu } from 'src/components/ActionMenu';
-import { Box } from 'src/components/Box';
 import { Button } from 'src/components/Button/Button';
 import { CircleProgress } from 'src/components/CircleProgress';
 import {
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerServiceTargets.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerServiceTargets.tsx
index 3a9ffd82613..751a0e62acb 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerServiceTargets.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerServiceTargets.tsx
@@ -1,12 +1,11 @@
 import { ServiceTarget } from '@linode/api-v4';
 import CloseIcon from '@mui/icons-material/Close';
 import { Hidden, IconButton } from '@mui/material';
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import React, { useState } from 'react';
 import { useParams } from 'react-router-dom';
 
 import { ActionMenu } from 'src/components/ActionMenu';
-import { Box } from 'src/components/Box';
 import { Button } from 'src/components/Button/Button';
 import { CircleProgress } from 'src/components/CircleProgress';
 import { InputAdornment } from 'src/components/InputAdornment';
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerSettings.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerSettings.tsx
index f429815829b..65f19a9076b 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerSettings.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerSettings.tsx
@@ -1,4 +1,4 @@
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import React from 'react';
 import { useParams } from 'react-router-dom';
 
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerSummary.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerSummary.tsx
index 0ca3717c0f1..3f19583fc48 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerSummary.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerSummary.tsx
@@ -1,4 +1,4 @@
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import Grid from '@mui/material/Unstable_Grid2';
 import React from 'react';
 import { useParams } from 'react-router-dom';
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Routes/RuleDrawer.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Routes/RuleDrawer.tsx
index 1ffe7b6a017..50d3546b94d 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Routes/RuleDrawer.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Routes/RuleDrawer.tsx
@@ -1,7 +1,7 @@
 import { HTTPRuleSchema, TCPRuleSchema } from '@linode/validation';
 import CloseIcon from '@mui/icons-material/Close';
 import { IconButton } from '@mui/material';
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import { getIn, useFormik } from 'formik';
 import React, { useState } from 'react';
 
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/ServiceTargets/CreateServiceTargetDrawer.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/ServiceTargets/CreateServiceTargetDrawer.tsx
index d6081f0551d..54658bb4ed3 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/ServiceTargets/CreateServiceTargetDrawer.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/ServiceTargets/CreateServiceTargetDrawer.tsx
@@ -1,5 +1,5 @@
 import { Endpoint, ServiceTargetPayload } from '@linode/api-v4';
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import { useFormik } from 'formik';
 import React from 'react';
 
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/ServiceTargets/LinodeOrIPSelect.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/ServiceTargets/LinodeOrIPSelect.tsx
index c235126a655..97596da5055 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/ServiceTargets/LinodeOrIPSelect.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/ServiceTargets/LinodeOrIPSelect.tsx
@@ -1,4 +1,4 @@
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import React from 'react';
 
 import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Settings/Delete.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Settings/Delete.tsx
index 56b34bfe591..c3e1eefccd7 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Settings/Delete.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Settings/Delete.tsx
@@ -1,4 +1,4 @@
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import React, { useState } from 'react';
 import { useHistory } from 'react-router-dom';
 
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Settings/Label.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Settings/Label.tsx
index e6a57aca815..c46f29ae780 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Settings/Label.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Settings/Label.tsx
@@ -1,4 +1,4 @@
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import { useFormik } from 'formik';
 import React from 'react';
 
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Settings/Region.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Settings/Region.tsx
index 964b2760cc4..c4b3f924317 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Settings/Region.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Settings/Region.tsx
@@ -1,4 +1,4 @@
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import { useFormik } from 'formik';
 import React from 'react';
 
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/LoadBalancerRow.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/LoadBalancerRow.tsx
index d783c310ab6..8aa75000fcd 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/LoadBalancerRow.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/LoadBalancerRow.tsx
@@ -1,5 +1,5 @@
 import { Loadbalancer } from '@linode/api-v4';
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 
diff --git a/packages/manager/src/features/Profile/Settings/Settings.tsx b/packages/manager/src/features/Profile/Settings/Settings.tsx
index 0239c0d4a14..04d82543dc8 100644
--- a/packages/manager/src/features/Profile/Settings/Settings.tsx
+++ b/packages/manager/src/features/Profile/Settings/Settings.tsx
@@ -1,4 +1,4 @@
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import * as React from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 
diff --git a/packages/manager/src/features/Support/Hively.tsx b/packages/manager/src/features/Support/Hively.tsx
index 2a811ed047d..40fe859111d 100644
--- a/packages/manager/src/features/Support/Hively.tsx
+++ b/packages/manager/src/features/Support/Hively.tsx
@@ -1,4 +1,4 @@
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import { DateTime } from 'luxon';
 import * as React from 'react';
 
diff --git a/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.tsx b/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.tsx
index bdef853bcfd..10982e6d2a6 100644
--- a/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.tsx
+++ b/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.tsx
@@ -1,5 +1,5 @@
 import { SupportReply } from '@linode/api-v4/lib/support';
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import Grid from '@mui/material/Unstable_Grid2';
 import { Theme } from '@mui/material/styles';
 import { isEmpty } from 'ramda';
diff --git a/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx b/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
index a9024a047bf..555bab4de59 100644
--- a/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
+++ b/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
@@ -2,7 +2,7 @@ import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowUp from '@mui/icons-material/KeyboardArrowUp';
 import { Theme, styled, useMediaQuery } from '@mui/material';
 import Popover from '@mui/material/Popover';
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 
diff --git a/packages/manager/src/features/Users/UserRow.tsx b/packages/manager/src/features/Users/UserRow.tsx
index 22b7bd9e4e4..8c6182d72c3 100644
--- a/packages/manager/src/features/Users/UserRow.tsx
+++ b/packages/manager/src/features/Users/UserRow.tsx
@@ -1,4 +1,4 @@
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import React from 'react';
 
 import { Box } from 'src/components/Box';

From c4c91db919dc681426caa7fb446a4d0dc5b7b189 Mon Sep 17 00:00:00 2001
From: Banks Nussman <banks@nussman.us>
Date: Mon, 23 Oct 2023 16:39:59 -0400
Subject: [PATCH 4/9] fix some imports

---
 packages/manager/src/components/MaintenanceScreen.tsx         | 2 +-
 .../LoadBalancerDetail/LoadBalancerServiceTargets.tsx         | 4 ++--
 packages/manager/src/features/Volumes/VolumeDetailsDrawer.tsx | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/manager/src/components/MaintenanceScreen.tsx b/packages/manager/src/components/MaintenanceScreen.tsx
index 8916186a641..7b320806fb4 100644
--- a/packages/manager/src/components/MaintenanceScreen.tsx
+++ b/packages/manager/src/components/MaintenanceScreen.tsx
@@ -1,5 +1,4 @@
 import BuildIcon from '@mui/icons-material/Build';
-import { Stack } from 'src/components/Stack';
 import { Theme, useTheme } from '@mui/material/styles';
 import * as React from 'react';
 
@@ -7,6 +6,7 @@ import Logo from 'src/assets/logo/akamai-logo.svg';
 import { Box } from 'src/components/Box';
 import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { Link } from 'src/components/Link';
+import { Stack } from 'src/components/Stack';
 import { Typography } from 'src/components/Typography';
 
 export const MaintenanceScreen = () => {
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerServiceTargets.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerServiceTargets.tsx
index 751a0e62acb..e27e3b8a0e9 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerServiceTargets.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerServiceTargets.tsx
@@ -1,7 +1,6 @@
 import { ServiceTarget } from '@linode/api-v4';
 import CloseIcon from '@mui/icons-material/Close';
 import { Hidden, IconButton } from '@mui/material';
-import { Stack } from 'src/components/Stack';
 import React, { useState } from 'react';
 import { useParams } from 'react-router-dom';
 
@@ -11,6 +10,8 @@ import { CircleProgress } from 'src/components/CircleProgress';
 import { InputAdornment } from 'src/components/InputAdornment';
 import { Link } from 'src/components/Link';
 import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter';
+import { Spacer } from 'src/components/Spacer';
+import { Stack } from 'src/components/Stack';
 import { StatusIcon } from 'src/components/StatusIcon/StatusIcon';
 import { Table } from 'src/components/Table';
 import { TableBody } from 'src/components/TableBody';
@@ -30,7 +31,6 @@ import { CreateServiceTargetDrawer } from './ServiceTargets/CreateServiceTargetD
 import { DeleteServiceTargetDialog } from './ServiceTargets/DeleteServiceTargetDialog';
 
 import type { Filter } from '@linode/api-v4';
-import { Spacer } from 'src/components/Spacer';
 
 const PREFERENCE_KEY = 'loadbalancer-service-targets';
 
diff --git a/packages/manager/src/features/Volumes/VolumeDetailsDrawer.tsx b/packages/manager/src/features/Volumes/VolumeDetailsDrawer.tsx
index b4a9bea80e1..5be75d6d874 100644
--- a/packages/manager/src/features/Volumes/VolumeDetailsDrawer.tsx
+++ b/packages/manager/src/features/Volumes/VolumeDetailsDrawer.tsx
@@ -1,9 +1,9 @@
 import { Volume } from '@linode/api-v4';
-import Stack from '@mui/material/Stack/Stack';
 import React from 'react';
 
 import { CopyableTextField } from 'src/components/CopyableTextField/CopyableTextField';
 import { Drawer } from 'src/components/Drawer';
+import { Stack } from 'src/components/Stack';
 import { Typography } from 'src/components/Typography';
 
 interface Props {

From fe3cb75fc6222fdd704fb7e783077ab40be59708 Mon Sep 17 00:00:00 2001
From: Banks Nussman <banks@nussman.us>
Date: Mon, 23 Oct 2023 16:49:13 -0400
Subject: [PATCH 5/9] Added changeset: Create Stack and Spacer components

---
 .../manager/.changeset/pr-9830-tech-stories-1698094153367.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 packages/manager/.changeset/pr-9830-tech-stories-1698094153367.md

diff --git a/packages/manager/.changeset/pr-9830-tech-stories-1698094153367.md b/packages/manager/.changeset/pr-9830-tech-stories-1698094153367.md
new file mode 100644
index 00000000000..7a7484a6091
--- /dev/null
+++ b/packages/manager/.changeset/pr-9830-tech-stories-1698094153367.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Create Stack and Spacer components ([#9830](https://github.com/linode/manager/pull/9830))

From e4d5ed97f0ed7d2b0d6ee3131f3b1548a7ab0595 Mon Sep 17 00:00:00 2001
From: Banks Nussman <banks@nussman.us>
Date: Tue, 24 Oct 2023 09:58:00 -0400
Subject: [PATCH 6/9] remove `<Spacer />` component

---
 .../manager/src/components/Spacer.stories.tsx | 38 -------------------
 packages/manager/src/components/Spacer.tsx    | 11 ------
 .../Configurations/ConfigurationAccordion.tsx | 16 +++++---
 .../LoadBalancerDetail/LoadBalancerRoutes.tsx |  3 +-
 .../LoadBalancerServiceTargets.tsx            |  4 +-
 5 files changed, 13 insertions(+), 59 deletions(-)
 delete mode 100644 packages/manager/src/components/Spacer.stories.tsx
 delete mode 100644 packages/manager/src/components/Spacer.tsx

diff --git a/packages/manager/src/components/Spacer.stories.tsx b/packages/manager/src/components/Spacer.stories.tsx
deleted file mode 100644
index 711977b430a..00000000000
--- a/packages/manager/src/components/Spacer.stories.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-
-import { Box } from './Box';
-import { Button } from './Button/Button';
-import { Paper } from './Paper';
-import { Spacer } from './Spacer';
-import { StatusIcon } from './StatusIcon/StatusIcon';
-import { Typography } from './Typography';
-
-import type { Meta, StoryObj } from '@storybook/react';
-
-export const Default: StoryObj<typeof Spacer> = {
-  render: () => (
-    <Box display="flex">
-      <Paper variant="outlined">1</Paper>
-      <Spacer />
-      <Paper variant="outlined">2</Paper>
-    </Box>
-  ),
-};
-
-export const Example: StoryObj<typeof Spacer> = {
-  render: () => (
-    <Box alignItems="center" display="flex">
-      <Typography variant="h2">Linode</Typography>
-      <StatusIcon ml={1} status="active" />
-      <Spacer />
-      <Button buttonType="primary">Create Linode</Button>
-    </Box>
-  ),
-};
-
-const meta: Meta<typeof Spacer> = {
-  component: Spacer,
-  title: 'Components/Spacer',
-};
-
-export default meta;
diff --git a/packages/manager/src/components/Spacer.tsx b/packages/manager/src/components/Spacer.tsx
deleted file mode 100644
index 26f822f5791..00000000000
--- a/packages/manager/src/components/Spacer.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-
-import { Box } from './Box';
-
-/**
- * A headless component that should be used within a flexbox
- * to add space between flex items.
- */
-export const Spacer = () => {
-  return <Box flexGrow={1} />;
-};
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationAccordion.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationAccordion.tsx
index a91a128e0b3..19315c3e01d 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationAccordion.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationAccordion.tsx
@@ -22,7 +22,6 @@ import { CertificateTable } from './CertificateTable';
 import { DeleteConfigurationDialog } from './DeleteConfigurationDialog';
 
 import type { Configuration } from '@linode/api-v4';
-import { Spacer } from 'src/components/Spacer';
 
 interface Props {
   configuration: Configuration;
@@ -141,10 +140,17 @@ export const ConfigurationAccordion = (props: Props) => {
             />
           </Stack>
           <Stack maxWidth="600px">
-            <Stack alignItems="center" direction="row">
-              <InputLabel sx={{ marginBottom: 0 }}>TLS Certificates</InputLabel>
-              <TooltipIcon status="help" text="OMG!" />
-              <Spacer />
+            <Stack
+              alignItems="center"
+              direction="row"
+              justifyContent="space-between"
+            >
+              <Stack alignItems="center" direction="row">
+                <InputLabel sx={{ marginBottom: 0 }}>
+                  TLS Certificates
+                </InputLabel>
+                <TooltipIcon status="help" text="OMG!" />
+              </Stack>
               <Button>Upload Certificate</Button>
             </Stack>
             <CertificateTable
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerRoutes.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerRoutes.tsx
index 5088d51a7b2..af87dcefcb5 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerRoutes.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerRoutes.tsx
@@ -30,7 +30,6 @@ import { RuleDrawer } from './Routes/RuleDrawer';
 import { RulesTable } from './RulesTable';
 
 import type { Filter, Route } from '@linode/api-v4';
-import { Spacer } from 'src/components/Spacer';
 
 const PREFERENCE_KEY = 'loadbalancer-routes';
 
@@ -191,6 +190,7 @@ export const LoadBalancerRoutes = () => {
         direction="row"
         flexWrap="wrap"
         gap={2}
+        justifyContent="space-between"
         mb={2}
         mt={1.5}
       >
@@ -219,7 +219,6 @@ export const LoadBalancerRoutes = () => {
           style={{ minWidth: '320px' }}
           value={query}
         />
-        <Spacer />
         {/**
          * TODO: AGLB: The Create Route behavior should be implemented in future AGLB tickets.
          */}
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerServiceTargets.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerServiceTargets.tsx
index e27e3b8a0e9..56ad8bf19af 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerServiceTargets.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerServiceTargets.tsx
@@ -10,7 +10,6 @@ import { CircleProgress } from 'src/components/CircleProgress';
 import { InputAdornment } from 'src/components/InputAdornment';
 import { Link } from 'src/components/Link';
 import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter';
-import { Spacer } from 'src/components/Spacer';
 import { Stack } from 'src/components/Stack';
 import { StatusIcon } from 'src/components/StatusIcon/StatusIcon';
 import { Table } from 'src/components/Table';
@@ -86,10 +85,10 @@ export const LoadBalancerServiceTargets = () => {
   return (
     <>
       <Stack
-        alignItems="flex-end"
         direction="row"
         flexWrap="wrap"
         gap={2}
+        justifyContent="space-between"
         mb={2}
         mt={1.5}
       >
@@ -118,7 +117,6 @@ export const LoadBalancerServiceTargets = () => {
           style={{ minWidth: '320px' }}
           value={query}
         />
-        <Spacer />
         <Button
           buttonType="primary"
           onClick={() => setIsCreateDrawerOpen(true)}

From fbd79af5e1e119c9ca168b16f6cb529264662ea1 Mon Sep 17 00:00:00 2001
From: Banks Nussman <banks@nussman.us>
Date: Tue, 24 Oct 2023 09:58:47 -0400
Subject: [PATCH 7/9] update changeset

---
 .../manager/.changeset/pr-9830-tech-stories-1698094153367.md    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/manager/.changeset/pr-9830-tech-stories-1698094153367.md b/packages/manager/.changeset/pr-9830-tech-stories-1698094153367.md
index 7a7484a6091..f56d63868cb 100644
--- a/packages/manager/.changeset/pr-9830-tech-stories-1698094153367.md
+++ b/packages/manager/.changeset/pr-9830-tech-stories-1698094153367.md
@@ -2,4 +2,4 @@
 "@linode/manager": Tech Stories
 ---
 
-Create Stack and Spacer components ([#9830](https://github.com/linode/manager/pull/9830))
+Create Stack component ([#9830](https://github.com/linode/manager/pull/9830))

From dd136c2f432d4ea30b3d74dcc66599c67f920d2a Mon Sep 17 00:00:00 2001
From: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com>
Date: Tue, 24 Oct 2023 17:44:55 -0400
Subject: [PATCH 8/9] Update packages/manager/src/components/Stack.stories.tsx

Co-authored-by: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com>
---
 packages/manager/src/components/Stack.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/manager/src/components/Stack.stories.tsx b/packages/manager/src/components/Stack.stories.tsx
index 8d3a72c301b..10332c01220 100644
--- a/packages/manager/src/components/Stack.stories.tsx
+++ b/packages/manager/src/components/Stack.stories.tsx
@@ -26,7 +26,7 @@ export const Default: StoryObj<typeof Stack> = {
   render: (args) => <Stack {...args} />,
 };
 
-export const Vertial: StoryObj<typeof Stack> = {
+export const Vertical: StoryObj<typeof Stack> = {
   args: {
     children,
     spacing: 2,

From 9959d092eaa17441a0d8a04213f1ccae32aeb8e7 Mon Sep 17 00:00:00 2001
From: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com>
Date: Tue, 24 Oct 2023 17:45:01 -0400
Subject: [PATCH 9/9] Update packages/manager/src/components/Stack.tsx

Co-authored-by: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com>
---
 packages/manager/src/components/Stack.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/manager/src/components/Stack.tsx b/packages/manager/src/components/Stack.tsx
index eaccf3a4e32..abaec23cbf8 100644
--- a/packages/manager/src/components/Stack.tsx
+++ b/packages/manager/src/components/Stack.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 /**
  * A Stack is a layout component that uses flexbox to
- * vertically or horozintally align elements with optional spacing.
+ * vertically or horizontally align elements with optional spacing.
  *
  * > Stack is ideal for one-dimensional layouts, while Grid is preferable when you need both vertical and horizontal arrangement.
  */