refactor: [M3-8650] - Migrate Stack to @linode/ui package (#11228)

* migrate stack, update organization for divider/icon button

* Added changeset: `Stack` component to `ui` package

packages/manager/src/components/AkamaiBanner/AkamaiBanner.styles.ts

@@ -1,11 +1,9 @@
-import { Box, omittedProps } from '@linode/ui';
+import { Box, omittedProps, Stack } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 
 import Warning from 'src/assets/icons/warning.svg';
 import AkamaiLogo from 'src/assets/logo/akamai-logo.svg';
 
-import { Stack } from '../Stack';
-
 export const StyledAkamaiLogo = styled(AkamaiLogo, {
   label: 'StyledAkamaiLogo',
 })(({ theme }) => ({

packages/manager/src/components/AkamaiBanner/AkamaiBanner.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@linode/ui';
+import { Box, Stack } from '@linode/ui';
 import { useMediaQuery, useTheme } from '@mui/material';
 import * as React from 'react';
 
@@ -7,7 +7,6 @@ import { Typography } from 'src/components/Typography';
 import { useFlags } from 'src/hooks/useFlags';
 import { replaceNewlinesWithLineBreaks } from 'src/utilities/replaceNewlinesWithLineBreaks';
 
-import { Stack } from '../Stack';
 import {
   StyledAkamaiLogo,
   StyledBanner,

packages/manager/src/components/Autocomplete/Autocomplete.stories.tsx

@@ -1,6 +1,5 @@
-import { IconButton } from '@linode/ui';
+import { IconButton, Stack } from '@linode/ui';
 import Close from '@mui/icons-material/Close';
-import { Stack } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { action } from '@storybook/addon-actions';
 import React, { useState } from 'react';

packages/manager/src/components/GenerateFirewallDialog/GenerateFirewallDialog.tsx

@@ -1,3 +1,4 @@
+import { Stack } from '@linode/ui';
 import React from 'react';
 
 import { useFlags } from 'src/hooks/useFlags';
@@ -9,7 +10,6 @@ import { ErrorMessage } from '../ErrorMessage';
 import { LinearProgress } from '../LinearProgress';
 import { Link } from '../Link';
 import { Notice } from '../Notice/Notice';
-import { Stack } from '../Stack';
 import { Typography } from '../Typography';
 import { useCreateFirewallFromTemplate } from './useCreateFirewallFromTemplate';
 

packages/manager/src/components/ImageSelect/ImageOption.tsx

@@ -1,12 +1,11 @@
-import { Tooltip } from '@linode/ui';
+import { Stack, Tooltip } from '@linode/ui';
 import React from 'react';
 
 import CloudInitIcon from 'src/assets/icons/cloud-init.svg';
 import { ListItemOption } from 'src/components/ListItemOption';
 import { useFlags } from 'src/hooks/useFlags';
 
 import { OSIcon } from '../OSIcon';
-import { Stack } from '../Stack';
 import { Typography } from '../Typography';
 import { isImageDeprecated } from './utilities';
 

packages/manager/src/components/MaintenanceScreen.tsx

@@ -1,3 +1,4 @@
+import { Stack } from '@linode/ui';
 import { Box } from '@linode/ui';
 import BuildIcon from '@mui/icons-material/Build';
 import { useTheme } from '@mui/material/styles';
@@ -6,7 +7,6 @@ import * as React from 'react';
 import Logo from 'src/assets/logo/akamai-logo.svg';
 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';
 
 import type { Theme } from '@mui/material/styles';

packages/manager/src/components/MaskableText/MaskableText.tsx

@@ -1,12 +1,10 @@
-import { VisibilityTooltip } from '@linode/ui';
+import { Stack, VisibilityTooltip } from '@linode/ui';
 import { Typography } from '@mui/material';
 import * as React from 'react';
 
 import { usePreferences } from 'src/queries/profile/preferences';
 import { createMaskedText } from 'src/utilities/createMaskedText';
 
-import { Stack } from '../Stack';
-
 export type MaskableTextLength = 'ipv4' | 'ipv6' | 'plaintext';
 
 export interface MaskableTextProps {

packages/manager/src/components/PasswordInput/PasswordInput.tsx

@@ -1,8 +1,8 @@
+import { Stack } from '@linode/ui';
 import * as React from 'react';
 import zxcvbn from 'zxcvbn';
 
 import { StrengthIndicator } from '../PasswordInput/StrengthIndicator';
-import { Stack } from '../Stack';
 import { HideShowText } from './HideShowText';
 
 import type { TextFieldProps } from 'src/components/TextField';

packages/manager/src/components/PlacementGroupsSelect/PlacementGroupSelectOption.tsx

@@ -1,9 +1,8 @@
 import { PLACEMENT_GROUP_TYPES } from '@linode/api-v4';
-import { Box } from '@linode/ui';
+import { Box, Stack } from '@linode/ui';
 import React from 'react';
 
 import { ListItemOption } from 'src/components/ListItemOption';
-import { Stack } from 'src/components/Stack';
 
 import type { PlacementGroup } from '@linode/api-v4';
 import type { ListItemProps } from 'src/components/ListItemOption';

packages/manager/src/components/RegionSelect/RegionMultiSelect.tsx

@@ -1,3 +1,4 @@
+import { Stack } from '@linode/ui';
 import CloseIcon from '@mui/icons-material/Close';
 import React from 'react';
 
@@ -8,7 +9,6 @@ import { useAllAccountAvailabilitiesQuery } from 'src/queries/account/availabili
 import { getRegionCountryGroup } from 'src/utilities/formatRegion';
 
 import { StyledListItem } from '../Autocomplete/Autocomplete.styles';
-import { Stack } from '../Stack';
 import { RegionOption } from './RegionOption';
 import { StyledAutocompleteContainer } from './RegionSelect.styles';
 import {

packages/manager/src/components/RegionSelect/RegionOption.tsx

@@ -1,10 +1,9 @@
-import { Box } from '@linode/ui';
+import { Box, Stack } from '@linode/ui';
 import React from 'react';
 
 import { Flag } from 'src/components/Flag';
 import { ListItemOption } from 'src/components/ListItemOption';
 import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils';
-import { Stack } from 'src/components/Stack';
 
 import type { Region } from '@linode/api-v4';
 import type { ListItemProps } from 'src/components/ListItemOption';

packages/manager/src/components/SelectFirewallPanel/SelectFirewallPanel.tsx

@@ -1,8 +1,7 @@
-import { Box, Paper } from '@linode/ui';
+import { Box, Paper, Stack } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
-import { Stack } from 'src/components/Stack';
 import { Typography } from 'src/components/Typography';
 import { CreateFirewallDrawer } from 'src/features/Firewalls/FirewallLanding/CreateFirewallDrawer';
 import { useFlags } from 'src/hooks/useFlags';

packages/manager/src/components/Snackbar/ToastNotifications.stories.tsx

@@ -1,12 +1,11 @@
+import { Stack } from '@linode/ui';
 import { useSnackbar } from 'notistack';
 import React from 'react';
 
 import { Button } from 'src/components/Button/Button';
 import { Snackbar } from 'src/components/Snackbar/Snackbar';
 import { getEventMessage } from 'src/features/Events/utils';
 
-import { Stack } from '../Stack';
-
 import type { Meta, StoryObj } from '@storybook/react';
 import type { VariantType } from 'notistack';
 

packages/manager/src/components/Uploaders/ImageUploader/ImageUploader.tsx

@@ -1,12 +1,11 @@
-import { Box } from '@linode/ui';
+import { Box, Stack } from '@linode/ui';
 import { styled } from '@mui/material';
 import { Duration } from 'luxon';
 import * as React from 'react';
 import { useDropzone } from 'react-dropzone';
 
 import { BarPercent } from 'src/components/BarPercent';
 import { Button } from 'src/components/Button/Button';
-import { Stack } from 'src/components/Stack';
 import { Typography } from 'src/components/Typography';
 import { MAX_FILE_SIZE_IN_BYTES } from 'src/components/Uploaders/reducer';
 import { readableBytes } from 'src/utilities/unitConversions';

packages/manager/src/features/Account/Maintenance/MaintenanceLanding.tsx

@@ -1,7 +1,7 @@
+import { Stack } from '@linode/ui';
 import * as React from 'react';
 
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
-import { Stack } from 'src/components/Stack';
 
 import { MaintenanceTable } from './MaintenanceTable';
 

packages/manager/src/features/Account/ObjectStorageSettings.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@linode/ui';
+import { Box, Stack } from '@linode/ui';
 import { enqueueSnackbar } from 'notistack';
 import * as React from 'react';
 
@@ -7,7 +7,6 @@ import { Button } from 'src/components/Button/Button';
 import { CircleProgress } from 'src/components/CircleProgress';
 import { Link } from 'src/components/Link';
 import { Notice } from 'src/components/Notice/Notice';
-import { Stack } from 'src/components/Stack';
 import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog';
 import { Typography } from 'src/components/Typography';
 import { useAccountSettings } from 'src/queries/account/settings';

packages/manager/src/features/Account/SwitchAccounts/ChildAccountList.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@linode/ui';
+import { Box, Stack } from '@linode/ui';
 import React, { useState } from 'react';
 import { Waypoint } from 'react-waypoint';
 
@@ -7,7 +7,6 @@ import { Button } from 'src/components/Button/Button';
 import { StyledLinkButton } from 'src/components/Button/StyledLinkButton';
 import { CircleProgress } from 'src/components/CircleProgress';
 import { Notice } from 'src/components/Notice/Notice';
-import { Stack } from 'src/components/Stack';
 import { Typography } from 'src/components/Typography';
 import { useChildAccountsInfiniteQuery } from 'src/queries/account/account';
 

packages/manager/src/features/Backups/BackupDrawer.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@linode/ui';
+import { Box, Stack } from '@linode/ui';
 import { styled } from '@mui/material';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
@@ -8,7 +8,6 @@ import { DisplayPrice } from 'src/components/DisplayPrice';
 import { Drawer } from 'src/components/Drawer';
 import { Link } from 'src/components/Link';
 import { Notice } from 'src/components/Notice/Notice';
-import { Stack } from 'src/components/Stack';
 import { Table } from 'src/components/Table';
 import { TableBody } from 'src/components/TableBody';
 import { TableCell } from 'src/components/TableCell';

packages/manager/src/features/Betas/BetaDetails.tsx

@@ -1,10 +1,10 @@
+import { Stack } from '@linode/ui';
 import { useNavigate } from '@tanstack/react-router';
 import * as React from 'react';
 
 import { Button } from 'src/components/Button/Button';
 import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
 import { Link } from 'src/components/Link';
-import { Stack } from 'src/components/Stack';
 import { Typography } from 'src/components/Typography';
 
 import type { AccountBeta, Beta } from '@linode/api-v4';

packages/manager/src/features/Betas/BetaDetailsList.tsx

@@ -1,9 +1,8 @@
-import { Divider, Paper } from '@linode/ui';
+import { Divider, Paper, Stack } from '@linode/ui';
 import * as React from 'react';
 
 import { CircleProgress } from 'src/components/CircleProgress';
 import { ErrorState } from 'src/components/ErrorState/ErrorState';
-import { Stack } from 'src/components/Stack';
 import { Typography } from 'src/components/Typography';
 
 import BetaDetails from './BetaDetails';

packages/manager/src/features/Betas/BetaSignup.tsx

@@ -1,4 +1,4 @@
-import { Paper } from '@linode/ui';
+import { Paper, Stack } from '@linode/ui';
 import {
   createLazyRoute,
   useNavigate,
@@ -13,7 +13,6 @@ import { CircleProgress } from 'src/components/CircleProgress';
 import { HighlightedMarkdown } from 'src/components/HighlightedMarkdown/HighlightedMarkdown';
 import { LandingHeader } from 'src/components/LandingHeader/LandingHeader';
 import { NotFound } from 'src/components/NotFound';
-import { Stack } from 'src/components/Stack';
 import { Typography } from 'src/components/Typography';
 import { useCreateAccountBetaMutation } from 'src/queries/account/betas';
 import { useBetaQuery } from 'src/queries/betas';

packages/manager/src/features/Betas/BetasLanding.tsx

@@ -1,9 +1,9 @@
+import { Stack } from '@linode/ui';
 import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 
 import { LandingHeader } from 'src/components/LandingHeader/LandingHeader';
 import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
-import { Stack } from 'src/components/Stack';
 import { BetaDetailsList } from 'src/features/Betas/BetaDetailsList';
 import { useAccountBetasQuery } from 'src/queries/account/betas';
 import { useBetasQuery } from 'src/queries/betas';

packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentDrawer.tsx

@@ -1,5 +1,5 @@
 import { makePayment } from '@linode/api-v4/lib/account';
-import { Divider, InputAdornment } from '@linode/ui';
+import { Divider, InputAdornment, Stack } from '@linode/ui';
 import Grid from '@mui/material/Unstable_Grid2';
 import { useQueryClient } from '@tanstack/react-query';
 import { useSnackbar } from 'notistack';
@@ -12,7 +12,6 @@ import { Drawer } from 'src/components/Drawer';
 import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { LinearProgress } from 'src/components/LinearProgress';
 import { Notice } from 'src/components/Notice/Notice';
-import { Stack } from 'src/components/Stack';
 import { SupportLink } from 'src/components/SupportLink';
 import { TextField } from 'src/components/TextField';
 import { TooltipIcon } from 'src/components/TooltipIcon';

packages/manager/src/features/Domains/DomainBanner.tsx

@@ -1,10 +1,10 @@
+import { Stack } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 import { DateTime } from 'luxon';
 import * as React from 'react';
 
 import { DismissibleBanner } from 'src/components/DismissibleBanner/DismissibleBanner';
 import { Link } from 'src/components/Link';
-import { Stack } from 'src/components/Stack';
 import { Typography } from 'src/components/Typography';
 
 interface DomainBannerProps {

packages/manager/src/features/Footer.tsx

@@ -1,4 +1,4 @@
-import Stack from '@mui/material/Stack';
+import { Stack } from '@linode/ui';
 import * as React from 'react';
 
 import { Link } from 'src/components/Link';

packages/manager/src/features/GlobalNotifications/APIMaintenanceBanner.tsx

@@ -1,14 +1,16 @@
+import { Stack } from '@linode/ui';
 import * as React from 'react';
 
 import { DismissibleBanner } from 'src/components/DismissibleBanner/DismissibleBanner';
 import { Link } from 'src/components/Link';
-import { Stack } from 'src/components/Stack';
 import { Typography } from 'src/components/Typography';
-import { SuppliedMaintenanceData } from 'src/featureFlags';
 import { queryPresets } from 'src/queries/base';
-import { Maintenance, useMaintenanceQuery } from 'src/queries/statusPage';
+import { useMaintenanceQuery } from 'src/queries/statusPage';
 import { sanitizeHTML } from 'src/utilities/sanitizeHTML';
 
+import type { SuppliedMaintenanceData } from 'src/featureFlags';
+import type { Maintenance } from 'src/queries/statusPage';
+
 interface Props {
   suppliedMaintenances: SuppliedMaintenanceData[] | undefined;
 }

packages/manager/src/features/Images/ImagesCreate/CreateImageTab.tsx

@@ -1,4 +1,5 @@
 import { yupResolver } from '@hookform/resolvers/yup';
+import { Paper, Stack } from '@linode/ui';
 import { Box } from '@linode/ui';
 import { createImageSchema } from '@linode/validation';
 import { useSnackbar } from 'notistack';
@@ -13,8 +14,6 @@ import { DISK_ENCRYPTION_IMAGES_CAVEAT_COPY } from 'src/components/Encryption/co
 import { useIsDiskEncryptionFeatureEnabled } from 'src/components/Encryption/utils';
 import { Link } from 'src/components/Link';
 import { Notice } from 'src/components/Notice/Notice';
-import { Paper } from '@linode/ui';
-import { Stack } from 'src/components/Stack';
 import { TagsInput } from 'src/components/TagsInput/TagsInput';
 import { TextField } from 'src/components/TextField';
 import { TooltipIcon } from 'src/components/TooltipIcon';

packages/manager/src/features/Images/ImagesCreate/ImageUpload.tsx

@@ -1,4 +1,5 @@
 import { yupResolver } from '@hookform/resolvers/yup';
+import { Paper, Stack } from '@linode/ui';
 import { Box } from '@linode/ui';
 import { useSnackbar } from 'notistack';
 import React, { useState } from 'react';
@@ -13,10 +14,8 @@ import { Checkbox } from 'src/components/Checkbox';
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import { Link } from 'src/components/Link';
 import { Notice } from 'src/components/Notice/Notice';
-import { Paper } from '@linode/ui';
 import { Prompt } from 'src/components/Prompt/Prompt';
 import { RegionSelect } from 'src/components/RegionSelect/RegionSelect';
-import { Stack } from 'src/components/Stack';
 import { TagsInput } from 'src/components/TagsInput/TagsInput';
 import { TextField } from 'src/components/TextField';
 import { Typography } from 'src/components/Typography';

packages/manager/src/features/Images/ImagesLanding/ImageRegions/ImageRegionRow.tsx

@@ -1,9 +1,8 @@
-import { Box, IconButton, Tooltip } from '@linode/ui';
+import { Box, IconButton, Stack, Tooltip } from '@linode/ui';
 import Close from '@mui/icons-material/Close';
 import React from 'react';
 
 import { Flag } from 'src/components/Flag';
-import { Stack } from 'src/components/Stack';
 import { StatusIcon } from 'src/components/StatusIcon/StatusIcon';
 import { Typography } from 'src/components/Typography';
 import { useRegionsQuery } from 'src/queries/regions/regions';

packages/manager/src/features/Images/ImagesLanding/ImageRegions/ManageImageRegionsForm.tsx

@@ -1,4 +1,4 @@
-import { Paper } from '@linode/ui';
+import { Paper, Stack } from '@linode/ui';
 import { useSnackbar } from 'notistack';
 import React from 'react';
 import { useForm } from 'react-hook-form';
@@ -7,7 +7,6 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { Link } from 'src/components/Link';
 import { Notice } from 'src/components/Notice/Notice';
 import { RegionMultiSelect } from 'src/components/RegionSelect/RegionMultiSelect';
-import { Stack } from 'src/components/Stack';
 import { Typography } from 'src/components/Typography';
 import { useUpdateImageRegionsMutation } from 'src/queries/images';
 import { useRegionsQuery } from 'src/queries/regions/regions';

packages/manager/src/features/Images/ImagesLanding/ImageRow.tsx

@@ -1,10 +1,9 @@
-import { Tooltip } from '@linode/ui';
+import { Stack, Tooltip } from '@linode/ui';
 import React from 'react';
 
 import CloudInitIcon from 'src/assets/icons/cloud-init.svg';
 import { Hidden } from 'src/components/Hidden';
 import { LinkButton } from 'src/components/LinkButton';
-import { Stack } from 'src/components/Stack';
 import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';
 import { Typography } from 'src/components/Typography';