v6 recommendation

https://mui.com/material-ui/migration/upgrade-to-v6/#box

web/apps/photos/src/components/GalleryEmptyState.tsx

@@ -5,7 +5,7 @@ import {
 } from "@ente/shared/components/Container";
 import AddPhotoAlternateIcon from "@mui/icons-material/AddPhotoAlternateOutlined";
 import FolderIcon from "@mui/icons-material/FolderOutlined";
-import { Box, Button, Stack, Typography, styled } from "@mui/material";
+import { Button, Stack, Typography, styled } from "@mui/material";
 import { t } from "i18next";
 import { Trans } from "react-i18next";
 import uploadManager from "services/upload/uploadManager";
@@ -92,7 +92,7 @@ export default function GalleryEmptyState({ openUploader }) {
     );
 }
 
-const Wrapper = styled(Box)`
+const Wrapper = styled("div")`
     display: flex;
     flex-direction: column;
     align-items: center;

web/apps/photos/src/components/PhotoList/index.tsx

@@ -164,7 +164,7 @@ const AlbumFooterContainer = styled(ListItemContainer, {
     justify-content: center;
 `;
 
-const FullStretchContainer = styled(Box)`
+const FullStretchContainer = styled("div")`
     margin: 0 -24px;
     width: calc(100% + 46px);
     left: -24px;

web/apps/photos/src/components/PhotoViewer/FileInfo.tsx

@@ -1015,7 +1015,7 @@ const RawExif: React.FC<RawExifProps> = ({
     );
 };
 
-const ExifItem = styled(Box)`
+const ExifItem = styled("div")`
     padding-left: 8px;
     padding-right: 8px;
     display: flex;

web/apps/photos/src/components/Sidebar/SubscriptionCard.tsx

@@ -123,14 +123,14 @@ const IndividualSubscriptionCardContent: React.FC<
     );
 };
 
-const MobileSmallBox = styled(Box)`
+const MobileSmallBox = styled("div")`
     display: none;
     @media (max-width: 359px) {
         display: block;
     }
 `;
 
-const DefaultBox = styled(Box)`
+const DefaultBox = styled("div")`
     display: none;
     @media (min-width: 360px) {
         display: block;

web/apps/photos/src/components/WatchFolder.tsx

@@ -24,7 +24,6 @@ import DoNotDisturbOutlinedIcon from "@mui/icons-material/DoNotDisturbOutlined";
 import FolderCopyOutlinedIcon from "@mui/icons-material/FolderCopyOutlined";
 import FolderOpenIcon from "@mui/icons-material/FolderOpen";
 import {
-    Box,
     Button,
     CircularProgress,
     Dialog,
@@ -173,7 +172,7 @@ const WatchList: React.FC<WatchList> = ({ watches, removeWatch }) => {
     );
 };
 
-const WatchesContainer = styled(Box)(() => ({
+const WatchesContainer = styled("div")(() => ({
     height: "278px",
     overflow: "auto",
     "&::-webkit-scrollbar": {
@@ -272,7 +271,7 @@ const WatchEntry: React.FC<WatchEntryProps> = ({ watch, removeWatch }) => {
     );
 };
 
-const EntryContainer = styled(Box)({
+const EntryContainer = styled("div")({
     overflow: "hidden",
     marginLeft: "12px",
     marginRight: "6px",

web/packages/accounts/components/RecoveryKey.tsx

@@ -10,7 +10,6 @@ import { DialogCloseIconButton } from "@/new/photos/components/mui/Dialog";
 import CodeBlock from "@ente/shared/components/CodeBlock";
 import { getRecoveryKey } from "@ente/shared/crypto/helpers";
 import {
-    Box,
     Dialog,
     DialogActions,
     DialogContent,
@@ -112,7 +111,7 @@ export const RecoveryKey: React.FC<RecoveryKeyProps> = ({
     );
 };
 
-const DashedBorderWrapper = styled(Box)(({ theme }) => ({
+const DashedBorderWrapper = styled("div")(({ theme }) => ({
     border: `1px dashed ${theme.palette.grey.A400}`,
     borderRadius: theme.spacing(1),
 }));

web/packages/new/photos/components/PlanSelector.tsx

@@ -621,7 +621,7 @@ const ActivePlanButton = styled((props: ButtonProps) => (
     },
 }));
 
-const Badge = styled(Box)(({ theme }) => ({
+const Badge = styled("div")(({ theme }) => ({
     borderRadius: theme.shape.borderRadius,
     padding: "2px 4px",
     backgroundColor: theme.colors.black.muted,

web/packages/new/photos/components/SearchBar.tsx

@@ -245,7 +245,7 @@ const SearchInput: React.FC<Omit<SearchBarProps, "onShowSearchInput">> = ({
     );
 };
 
-const SearchInputWrapper = styled(Box)`
+const SearchInputWrapper = styled("div")`
     display: flex;
     width: 100%;
     align-items: center;

web/packages/new/photos/components/gallery/ListHeader.tsx

@@ -82,7 +82,7 @@ export const GalleryItemsSummary: React.FC<GalleryItemsSummaryProps> = ({
  * the gallery items list itself so that it scrolls alongwith the items. This
  * wrapper makes it take the full width of the "row" that it occupies.
  */
-export const GalleryItemsHeaderAdapter = styled(Box)`
+export const GalleryItemsHeaderAdapter = styled("div")`
     width: 100%;
     margin-bottom: 12px;
 `;

web/packages/shared/components/CodeBlock.tsx

@@ -1,6 +1,6 @@
 import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
 import { CenteredFlex } from "@ente/shared/components/Container";
-import { Box, type BoxProps, styled } from "@mui/material";
+import { type BoxProps, styled } from "@mui/material";
 import React from "react";
 import CopyButton from "./CopyButton";
 
@@ -46,7 +46,7 @@ const FreeFlowText = styled("div")`
     text-align: left;
 `;
 
-const CopyButtonWrapper = styled(Box)`
+const CopyButtonWrapper = styled("div")`
     position: absolute;
     top: 0px;
     right: 0px;