@graphcommerce/magento-customer 10.0.0-canary.67 → 10.0.0-canary.68

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 10.0.0-canary.68
+
+### Major Changes
+
+- [#2557](https://github.com/graphcommerce-org/graphcommerce/pull/2557) [`ceaadd8`](https://github.com/graphcommerce-org/graphcommerce/commit/ceaadd87f0648982a068a3b07b1fa149c9127f49) - ## Material UI v5 → v7 Migration
+
+  This release upgrades Material UI from v5 to v7 with full CSS variables support. ([@paales](https://github.com/paales))
+
 ## 10.0.0-canary.67
 
 ### Patch Changes

package/components/AccountAddress/AccountAddress.tsx

@@ -1,4 +1,4 @@
-import { extendableComponent } from '@graphcommerce/next-ui'
+import { extendableComponent, sxx } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, Link } from '@mui/material'
@@ -22,7 +22,7 @@ export function AccountAddress(props: AccountAddressProps) {
   return (
     <Box
       className={classes.root}
-      sx={[
+      sx={sxx(
         (theme) => ({
           display: 'flex',
           justifyContent: 'space-between',
@@ -30,8 +30,8 @@ export function AccountAddress(props: AccountAddressProps) {
           paddingBottom: theme.spacings.md,
           typography: 'body2',
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       <Box className={classes.address} sx={{ '& > span': { display: 'block' } }}>
         <AddressMultiLine id={id} {...addressProps} />

package/components/AccountAddresses/AccountAddresses.tsx

@@ -35,7 +35,9 @@ export function AccountAddresses(props: AccountAddressesProps) {
       >
         <Box
           className={classes.addresses}
-          sx={(theme) => ({ '& > div': { borderBottom: `1px solid ${theme.palette.divider}` } })}
+          sx={(theme) => ({
+            '& > div': { borderBottom: `1px solid ${theme.vars.palette.divider}` },
+          })}
         >
           <Skeleton height={128} />
           <Skeleton height={128} />
@@ -77,7 +79,9 @@ export function AccountAddresses(props: AccountAddressesProps) {
         <SectionContainer labelLeft={<Trans>Shipping addresses</Trans>}>
           <Box
             className={classes.addresses}
-            sx={(theme) => ({ '& > div': { borderBottom: `1px solid ${theme.palette.divider}` } })}
+            sx={(theme) => ({
+              '& > div': { borderBottom: `1px solid ${theme.vars.palette.divider}` },
+            })}
           >
             {addresses.map((address) => (
               <AccountAddress key={address.id} {...address} />

package/components/AccountDeleteForm/AccountDeleteForm.tsx

@@ -2,8 +2,8 @@ import { CheckboxElement, EmailElement } from '@graphcommerce/ecommerce-ui'
 import { useApolloClient, useMutation } from '@graphcommerce/graphql'
 import { Button, FormActions, FormRow } from '@graphcommerce/next-ui'
 import { useForm } from '@graphcommerce/react-hook-form'
-import { Trans } from '@lingui/react/macro'
 import { t } from '@lingui/core/macro'
+import { Trans } from '@lingui/react/macro'
 import { Box, Typography } from '@mui/material'
 import { useRouter } from 'next/router'
 import { CustomerDocument, CustomerTokenDocument, useCustomerQuery } from '../../hooks'
@@ -50,10 +50,20 @@ export function AccountDeleteForm() {
       {!called || error || loading ? (
         <WaitForCustomer waitFor={dashboard}>
           <Box component='form' onSubmit={submitHandler} noValidate>
-            <Typography variant='h6' textAlign='center'>
+            <Typography
+              variant='h6'
+              sx={{
+                textAlign: 'center',
+              }}
+            >
               <Trans>Are you sure you want to delete your account?</Trans>
             </Typography>
-            <Typography variant='body1' textAlign='center'>
+            <Typography
+              variant='body1'
+              sx={{
+                textAlign: 'center',
+              }}
+            >
               <Trans>
                 Doing so will remove all your data including order history and saved shipping /
                 billing addresses.
@@ -91,7 +101,7 @@ export function AccountDeleteForm() {
         </WaitForCustomer>
       ) : (
         <>
-          <Typography variant='h6' textAlign='center'>
+          <Typography variant='h6' sx={{ textAlign: 'center' }}>
             <Trans>Account deletion successful</Trans>
           </Typography>
           <FormActions>

package/components/AccountMenu/AccountMenu.tsx

@@ -1,4 +1,4 @@
-import { extendableComponent } from '@graphcommerce/next-ui'
+import { extendableComponent, sxx } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { List } from '@mui/material'
 import React from 'react'
@@ -14,7 +14,7 @@ export function AccountMenu(props: AccountMenuProps) {
     <List
       classes={classes}
       disablePadding
-      sx={[(theme) => ({ marginBottom: theme.spacings.lg }), ...(Array.isArray(sx) ? sx : [sx])]}
+      sx={sxx((theme) => ({ marginBottom: theme.spacings.lg }), sx)}
     >
       {children}
     </List>

package/components/AccountMenuItem/AccountMenuItem.tsx

@@ -6,6 +6,7 @@ import {
   iconChevronRight,
   IconSvg,
   responsiveVal,
+  sxx,
 } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { ListItem, ListItemIcon, ListItemText } from '@mui/material'
@@ -44,30 +45,29 @@ export function AccountMenuItem(props: AccountMenuItemProps) {
       href={href}
       disabled={disabled}
       className={classes.root}
-      sx={[
+      sx={sxx(
         (theme) => ({
           width: '100%',
           height: responsiveVal(88, 104),
           padding: 0,
           borderRadius: 0,
-          background: theme.palette.background.paper,
+          background: theme.vars.palette.background.paper,
           '&:hover': {
-            background: theme.palette.background.default,
+            background: theme.vars.palette.background.default,
           },
           '&:disabled': {
-            background: theme.palette.background.default,
+            background: theme.vars.palette.background.default,
           },
           '&:focus': {
             // fix: disableElevation does not work when button is focused
             boxShadow: 'none',
           },
-
           '&:not(.noBorderBottom)': {
-            borderBottom: `1px solid ${theme.palette.divider}`,
+            borderBottom: `1px solid ${theme.vars.palette.divider}`,
           },
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
       {...buttonProps}
     >
       <ListItem disableGutters>
@@ -80,16 +80,19 @@ export function AccountMenuItem(props: AccountMenuItemProps) {
           <IconSvg src={iconSrc} size='large' />
         </ListItemIcon>
         <ListItemText
-          primaryTypographyProps={{ sx: { typography: 'subtitle1' } }}
-          secondaryTypographyProps={{
-            sx: {
-              whiteSpace: 'nowrap',
-              overflow: 'hidden',
-              textOverflow: 'elipsis',
-            },
-          }}
           primary={title}
           secondary={subtitle}
+          slotProps={{
+            primary: { sx: { typography: 'subtitle1' } },
+
+            secondary: {
+              sx: {
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'elipsis',
+              },
+            },
+          }}
         />
         {endIcon ?? <IconSvg src={iconChevronRight} />}
       </ListItem>

package/components/CancelOrder/CancelOrderForm.tsx

@@ -8,6 +8,7 @@ import {
   FormRow,
   iconChevronDown,
   IconSvg,
+  sxx,
 } from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/react/macro'
@@ -52,10 +53,9 @@ export function CancelOrderForm(props: CancelOrderFormProps) {
         <Trans>Order has successfully been canceled</Trans>
       </Alert>
     )
-
   return (
     <Accordion
-      sx={[
+      sx={sxx(
         (theme) => ({
           mb: theme.spacings.xxl,
           ...breakpointVal(
@@ -69,22 +69,20 @@ export function CancelOrderForm(props: CancelOrderFormProps) {
             mb: theme.spacings.xxl,
           },
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
       {...rest}
     >
       <AccordionSummary
         expandIcon={<IconSvg src={iconChevronDown} />}
-        sx={[
-          (theme) => ({
-            px: theme.spacings.xs,
-            '& .MuiAccordionSummary-content': {
-              alignItems: 'center',
-              columnGap: 2,
-              justifyContent: 'space-between',
-            },
-          }),
-        ]}
+        sx={(theme) => ({
+          px: theme.spacings.xs,
+          '& .MuiAccordionSummary-content': {
+            alignItems: 'center',
+            columnGap: 2,
+            justifyContent: 'space-between',
+          },
+        })}
       >
         <Trans>Cancel order</Trans>
       </AccordionSummary>
@@ -103,7 +101,6 @@ export function CancelOrderForm(props: CancelOrderFormProps) {
               }))}
             />
           </FormRow>
-
           <CheckboxElement
             required
             control={control}
@@ -113,19 +110,15 @@ export function CancelOrderForm(props: CancelOrderFormProps) {
               <Trans>I understand that my order will be canceled and this can not be undone.</Trans>
             }
           />
-
           {submittedWithoutErrors && (
             <Alert>
               <Trans>Order has successfully been canceled</Trans>
             </Alert>
           )}
-
           {cancelOrderData?.cancelOrder?.error && (
             <Alert severity='error'>{cancelOrderData?.cancelOrder?.error}</Alert>
           )}
-
           <ApolloErrorSnackbar error={error} />
-
           <FormRow
             sx={(theme) => ({
               justifyContent: 'center',

package/components/ConfirmCustomer/ConfirmCustomerForm.tsx

@@ -37,7 +37,6 @@ export function ConfirmCustomerForm() {
       <LayoutTitle icon={iconPerson}>
         <Trans>Account confirmation</Trans>
       </LayoutTitle>
-
       {!key && (
         <Alert severity='error' sx={(theme) => ({ my: theme.spacings.xxs })}>
           <Trans>You can only confirm you account by clicking on the link in your email.</Trans>
@@ -45,10 +44,9 @@ export function ConfirmCustomerForm() {
       )}
       {key && (
         <>
-          <Typography variant='h6' textAlign='center'>
+          <Typography variant='h6' sx={{ textAlign: 'center' }}>
             <Trans>Fill in your email to confirm registration</Trans>
           </Typography>
-
           <FormRow>
             <EmailElement
               variant='outlined'
@@ -59,7 +57,6 @@ export function ConfirmCustomerForm() {
               disabled={isSubmitSuccessful}
             />
           </FormRow>
-
           <FormRow sx={{ justifyItems: 'center' }}>
             <Button
               type='submit'
@@ -72,7 +69,6 @@ export function ConfirmCustomerForm() {
               <Trans>Confirm registration</Trans>
             </Button>
           </FormRow>
-
           <ApolloCustomerErrorAlert
             sx={(theme) => ({ my: theme.spacings.xxs })}
             error={error}

package/components/CreditMemo/CreditMemoCard.tsx

@@ -2,7 +2,7 @@ import { Money } from '@graphcommerce/magento-store'
 import { breakpointVal, iconChevronRight, IconSvg, NextLink, sxx } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
-import { Box, lighten } from '@mui/material'
+import { Box } from '@mui/material'
 import type { CreditMemoCardFragment } from './CreditMemoCard.gql'
 
 export type CreditMemoCardProps = {
@@ -26,10 +26,10 @@ export function CreditMemoCard(props: CreditMemoCardProps) {
           px: theme.spacings.xxs,
           py: theme.spacings.xxs,
           gap: theme.spacings.sm,
-          background:
-            theme.palette.mode === 'light'
-              ? theme.palette.background.default
-              : lighten(theme.palette.background.default, 0.15),
+          background: theme.vars.palette.background.default,
+          ...theme.applyStyles('dark', {
+            background: theme.lighten(theme.vars.palette.background.default, 0.15),
+          }),
           ...breakpointVal(
             'borderRadius',
             theme.shape.borderRadius * 2,
@@ -37,7 +37,7 @@ export function CreditMemoCard(props: CreditMemoCardProps) {
             theme.breakpoints.values,
           ),
           '&:hover': {
-            backgroundColor: theme.palette.action.hover,
+            backgroundColor: theme.vars.palette.action.hover,
           },
           display: 'grid',
           gridTemplate: `

package/components/CreditMemo/CreditMemoDetails.tsx

@@ -3,10 +3,11 @@ import {
   DateTimeFormat,
   extendableComponent,
   SectionContainer,
+  sxx,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
-import { Box, lighten, Typography } from '@mui/material'
+import { Box, Typography } from '@mui/material'
 import type { CreditMemoFragment } from './CreditMemo.gql'
 
 export type CreditMemoDetailsProps = {
@@ -30,14 +31,11 @@ export function CreditMemoDetails(props: CreditMemoDetailsProps) {
   return (
     <SectionContainer
       labelLeft={<Trans>Credit Memo details</Trans>}
-      sx={[
+      sx={sxx(
         (theme) => ({
           padding: theme.spacings.sm,
           marginBottom: theme.spacings.md,
-          background:
-            theme.palette.mode === 'light'
-              ? theme.palette.background.default
-              : lighten(theme.palette.background.default, 0.15),
+          background: theme.lighten(theme.vars.palette.background.default, 0.15),
           ...breakpointVal(
             'borderRadius',
             theme.shape.borderRadius * 2,
@@ -48,13 +46,16 @@ export function CreditMemoDetails(props: CreditMemoDetailsProps) {
             mt: 0,
             mb: theme.spacings.xs,
           },
+          ...theme.applyStyles('light', {
+            background: theme.vars.palette.background.default,
+          }),
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       <Box
         className={classes.creditMemoDetailContainer}
-        sx={[
+        sx={sxx(
           (theme) => ({
             gridColumnGap: theme.spacings.xxl,
             gridRowGap: theme.spacings.md,
@@ -64,8 +65,8 @@ export function CreditMemoDetails(props: CreditMemoDetailsProps) {
               marginTop: theme.spacings.xxs,
             },
           }),
-          ...(Array.isArray(sx) ? sx : [sx]),
-        ]}
+          sx,
+        )}
       >
         <Box className={classes.creditMemoDetailRow}>
           <SectionContainer
@@ -77,7 +78,6 @@ export function CreditMemoDetails(props: CreditMemoDetailsProps) {
             <Typography>{number}</Typography>
           </SectionContainer>
         </Box>
-
         <Box className={classes.creditMemoDetailRow}>
           {/* <SectionContainer
             variantLeft='h5'

package/components/CreditMemo/CreditMemoItems.tsx

@@ -4,6 +4,7 @@ import {
   extendableComponent,
   nonNullable,
   SectionContainer,
+  sxx,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
@@ -31,11 +32,11 @@ export function CreditMemoItems(props: CreditMemoItemsProps) {
   return (
     <Box
       className={classes.root}
-      sx={[
+      sx={sxx(
         (theme) => ({
           my: theme.spacings.md,
           padding: `${theme.spacings.sm} ${theme.spacings.sm}`,
-          border: `1px ${theme.palette.divider} solid`,
+          border: `1px ${theme.vars.palette.divider} solid`,
           ...breakpointVal(
             'borderRadius',
             theme.shape.borderRadius * 2,
@@ -43,8 +44,8 @@ export function CreditMemoItems(props: CreditMemoItemsProps) {
             theme.breakpoints.values,
           ),
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       <SectionContainer
         sx={{ '& .SectionHeader-root': { mt: 0 } }}

package/components/CreditMemo/CreditMemoTotals.tsx

@@ -2,7 +2,7 @@ import { Money } from '@graphcommerce/magento-store'
 import { breakpointVal, extendableComponent, sxx } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
-import { Box, Divider, lighten, Typography } from '@mui/material'
+import { Box, Divider, Typography } from '@mui/material'
 import type { CreditMemoFragment } from './CreditMemo.gql'
 
 export type CreditMemoTotalsProps = {
@@ -32,10 +32,10 @@ export function CreditMemoTotals(props: CreditMemoTotalsProps) {
             theme.shape.borderRadius * 5,
             theme.breakpoints.values,
           ),
-          background:
-            theme.palette.mode === 'light'
-              ? theme.palette.background.default
-              : lighten(theme.palette.background.default, 0.15),
+          background: theme.vars.palette.background.default,
+          ...theme.applyStyles('dark', {
+            background: theme.lighten(theme.vars.palette.background.default, 0.15),
+          }),
           padding: `${theme.spacings.xs} ${theme.spacings.sm}`,
         }),
         sx,
@@ -86,13 +86,12 @@ export function CreditMemoTotals(props: CreditMemoTotalsProps) {
       )}
 
       <Divider sx={(theme) => ({ my: theme.spacings.xxs })} />
-
       <Box
         className={classes.totalsRow}
         sx={(theme) => ({
           display: 'flex',
           justifyContent: 'space-between',
-          color: theme.palette.primary.main,
+          color: theme.vars.palette.primary.main,
         })}
       >
         <Typography>
@@ -108,7 +107,7 @@ export function CreditMemoTotals(props: CreditMemoTotalsProps) {
           sx={(theme) => ({
             display: 'flex',
             justifyContent: 'space-between',
-            color: theme.palette.text.disabled,
+            color: theme.vars.palette.text.disabled,
           })}
         >
           <Typography>

package/components/EditAddressForm/EditAddressForm.tsx

@@ -99,7 +99,6 @@ export function EditAddressForm(props: EditAddressFormProps) {
             showValid
           />
         </FormRow>
-
         {billingAddressReadonly && address?.default_billing ? (
           <Trans>
             You can not change this address as it is your billing address. Not correct? Please
@@ -119,7 +118,6 @@ export function EditAddressForm(props: EditAddressFormProps) {
           </FormActions>
         )}
       </Form>
-
       <ApolloErrorSnackbar error={error} />
     </>
   )

package/components/ForgotPasswordForm/ForgotPasswordForm.tsx

@@ -56,9 +56,7 @@ export function ForgotPasswordForm(props: ForgotPasswordFormProps) {
           showValid
         />
       </FormRow>
-
       <ApolloCustomerErrorAlert error={error} />
-
       <FormActions>
         <Button
           type='submit'

package/components/Invoice/InvoiceCard.tsx

@@ -2,7 +2,7 @@ import { Money } from '@graphcommerce/magento-store'
 import { breakpointVal, iconChevronRight, IconSvg, NextLink, sxx } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
-import { Box, lighten } from '@mui/material'
+import { Box } from '@mui/material'
 import type { InvoiceCardFragment } from './InvoiceCard.gql'
 
 export type InvoiceCardProps = {
@@ -26,10 +26,10 @@ export function InvoiceCard(props: InvoiceCardProps) {
           px: theme.spacings.xxs,
           py: theme.spacings.xxs,
           gap: theme.spacings.sm,
-          background:
-            theme.palette.mode === 'light'
-              ? theme.palette.background.default
-              : lighten(theme.palette.background.default, 0.15),
+          background: theme.vars.palette.background.default,
+          ...theme.applyStyles('dark', {
+            background: theme.lighten(theme.vars.palette.background.default, 0.15),
+          }),
           ...breakpointVal(
             'borderRadius',
             theme.shape.borderRadius * 2,
@@ -37,7 +37,7 @@ export function InvoiceCard(props: InvoiceCardProps) {
             theme.breakpoints.values,
           ),
           '&:hover': {
-            backgroundColor: theme.palette.action.hover,
+            backgroundColor: theme.vars.palette.action.hover,
           },
           display: 'grid',
           gridTemplate: `

package/components/Invoice/InvoiceDetails.tsx

@@ -3,10 +3,11 @@ import {
   DateTimeFormat,
   extendableComponent,
   SectionContainer,
+  sxx,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
-import { Box, lighten, Typography } from '@mui/material'
+import { Box, Typography } from '@mui/material'
 import type { InvoiceFragment } from './Invoice.gql'
 
 export type InvoiceDetailsProps = {
@@ -30,14 +31,11 @@ export function InvoiceDetails(props: InvoiceDetailsProps) {
   return (
     <SectionContainer
       labelLeft={<Trans>Invoice details</Trans>}
-      sx={[
+      sx={sxx(
         (theme) => ({
           padding: theme.spacings.sm,
           marginBottom: theme.spacings.md,
-          background:
-            theme.palette.mode === 'light'
-              ? theme.palette.background.default
-              : lighten(theme.palette.background.default, 0.15),
+          background: theme.lighten(theme.vars.palette.background.default, 0.15),
           ...breakpointVal(
             'borderRadius',
             theme.shape.borderRadius * 2,
@@ -48,13 +46,16 @@ export function InvoiceDetails(props: InvoiceDetailsProps) {
             mt: 0,
             mb: theme.spacings.xs,
           },
+          ...theme.applyStyles('light', {
+            background: theme.vars.palette.background.default,
+          }),
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       <Box
         className={classes.invoiceDetailContainer}
-        sx={[
+        sx={sxx(
           (theme) => ({
             gridColumnGap: theme.spacings.xxl,
             gridRowGap: theme.spacings.md,
@@ -64,8 +65,8 @@ export function InvoiceDetails(props: InvoiceDetailsProps) {
               marginTop: theme.spacings.xxs,
             },
           }),
-          ...(Array.isArray(sx) ? sx : [sx]),
-        ]}
+          sx,
+        )}
       >
         <Box className={classes.invoiceDetailRow}>
           <SectionContainer
@@ -77,7 +78,6 @@ export function InvoiceDetails(props: InvoiceDetailsProps) {
             <Typography>{number}</Typography>
           </SectionContainer>
         </Box>
-
         <Box className={classes.invoiceDetailRow}>
           {/* <SectionContainer
             variantLeft='h5'

package/components/Invoice/InvoiceItems.tsx

@@ -4,6 +4,7 @@ import {
   extendableComponent,
   nonNullable,
   SectionContainer,
+  sxx,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
@@ -31,11 +32,11 @@ export function InvoiceItems(props: InvoiceItemsProps) {
   return (
     <Box
       className={classes.root}
-      sx={[
+      sx={sxx(
         (theme) => ({
           my: theme.spacings.md,
           padding: `${theme.spacings.sm} ${theme.spacings.sm}`,
-          border: `1px ${theme.palette.divider} solid`,
+          border: `1px ${theme.vars.palette.divider} solid`,
           ...breakpointVal(
             'borderRadius',
             theme.shape.borderRadius * 2,
@@ -43,8 +44,8 @@ export function InvoiceItems(props: InvoiceItemsProps) {
             theme.breakpoints.values,
           ),
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       <SectionContainer
         sx={{ '& .SectionHeader-root': { mt: 0 } }}

package/components/Invoice/InvoiceTotals.tsx

@@ -2,7 +2,7 @@ import { Money } from '@graphcommerce/magento-store'
 import { breakpointVal, extendableComponent, sxx } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
-import { Box, Divider, lighten, Typography } from '@mui/material'
+import { Box, Divider, Typography } from '@mui/material'
 import type { InvoiceFragment } from './Invoice.gql'
 
 export type InvoiceTotalsProps = {
@@ -32,10 +32,10 @@ export function InvoiceTotals(props: InvoiceTotalsProps) {
             theme.shape.borderRadius * 5,
             theme.breakpoints.values,
           ),
-          background:
-            theme.palette.mode === 'light'
-              ? theme.palette.background.default
-              : lighten(theme.palette.background.default, 0.15),
+          background: theme.vars.palette.background.default,
+          ...theme.applyStyles('dark', {
+            background: theme.lighten(theme.vars.palette.background.default, 0.15),
+          }),
           padding: `${theme.spacings.xs} ${theme.spacings.sm}`,
         }),
         sx,
@@ -74,13 +74,12 @@ export function InvoiceTotals(props: InvoiceTotalsProps) {
       )}
 
       <Divider sx={(theme) => ({ my: theme.spacings.xxs })} />
-
       <Box
         className={classes.totalsRow}
         sx={(theme) => ({
           display: 'flex',
           justifyContent: 'space-between',
-          color: theme.palette.primary.main,
+          color: theme.vars.palette.primary.main,
         })}
       >
         <Typography>
@@ -96,7 +95,7 @@ export function InvoiceTotals(props: InvoiceTotalsProps) {
           sx={(theme) => ({
             display: 'flex',
             justifyContent: 'space-between',
-            color: theme.palette.text.disabled,
+            color: theme.vars.palette.text.disabled,
           })}
         >
           <Typography>

package/components/NoOrdersFound/NoOrdersFound.tsx

@@ -1,4 +1,4 @@
-import { extendableComponent, iconBox, IconHeader } from '@graphcommerce/next-ui'
+import { extendableComponent, iconBox, IconHeader, sxx } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Box } from '@mui/material'
@@ -11,10 +11,7 @@ export type NoOrdersFoundProps = { sx?: SxProps<Theme> }
 export function NoOrdersFound(props: NoOrdersFoundProps) {
   const { sx = [] } = props
   return (
-    <Box
-      className={classes.root}
-      sx={[(theme) => ({ marginTop: theme.spacings.sm }), ...(Array.isArray(sx) ? sx : [sx])]}
-    >
+    <Box className={classes.root} sx={sxx((theme) => ({ marginTop: theme.spacings.sm }), sx)}>
       <IconHeader src={iconBox} size='small'>
         <Trans>No orders found</Trans>
       </IconHeader>

package/components/Order/OrderCard/OrderCard.tsx

@@ -12,7 +12,7 @@ import {
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
-import { Avatar, Box, lighten, Paper, Skeleton } from '@mui/material'
+import { Avatar, Box, Paper, Skeleton } from '@mui/material'
 import { OrderStateLabel } from '../OrderStateLabel/OrderStateLabel'
 import type { OrderCardFragment } from './OrderCard.gql'
 
@@ -55,7 +55,6 @@ export function OrderCard(props: OrderCardProps) {
       </Box>
     )
   }
-
   return (
     <Box
       component={NextLink}
@@ -69,10 +68,10 @@ export function OrderCard(props: OrderCardProps) {
           py: theme.spacings.xxs,
           gap: theme.spacings.sm,
           alignItems: 'flex-start',
-          background:
-            theme.palette.mode === 'light'
-              ? theme.palette.background.default
-              : lighten(theme.palette.background.default, 0.15),
+          background: theme.vars.palette.background.default,
+          ...theme.applyStyles('dark', {
+            background: theme.lighten(theme.vars.palette.background.default, 0.15),
+          }),
           ...breakpointVal(
             'borderRadius',
             theme.shape.borderRadius * 2,
@@ -80,7 +79,7 @@ export function OrderCard(props: OrderCardProps) {
             theme.breakpoints.values,
           ),
           '&:hover': {
-            backgroundColor: theme.palette.action.hover,
+            backgroundColor: theme.vars.palette.action.hover,
           },
         }),
         sx,

package/components/Order/OrderDetails/OrderDetails.tsx

@@ -3,10 +3,11 @@ import {
   DateTimeFormat,
   extendableComponent,
   SectionContainer,
+  sxx,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
-import { Box, lighten, Typography } from '@mui/material'
+import { Box, Typography } from '@mui/material'
 import { AddressMultiLine } from '../../AddressMultiLine/AddressMultiLine'
 import { TrackingLink } from '../../TrackingLink/TrackingLink'
 import type { OrderDetailsFragment } from './OrderDetails.gql'
@@ -41,7 +42,7 @@ export function OrderDetails(props: OrderDetailsProps) {
 
   return (
     <Box
-      sx={[
+      sx={sxx(
         (theme) => ({
           margin: `${theme.spacings.sm} 0`,
           '& > div:last-of-type': {
@@ -60,8 +61,8 @@ export function OrderDetails(props: OrderDetailsProps) {
             ),
           },
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       <Box
         className={classes.orderDetailContainer}
@@ -78,10 +79,7 @@ export function OrderDetails(props: OrderDetailsProps) {
             theme.shape.borderRadius * 3,
             theme.breakpoints.values,
           ),
-          background:
-            theme.palette.mode === 'light'
-              ? theme.palette.background.default
-              : lighten(theme.palette.background.default, 0.15),
+          background: theme.lighten(theme.vars.palette.background.default, 0.15),
           padding: theme.spacings.sm,
           gridColumnGap: theme.spacings.xxl,
           gridRowGap: theme.spacings.sm,
@@ -90,6 +88,9 @@ export function OrderDetails(props: OrderDetailsProps) {
             gridTemplateColumns: '1fr 1fr',
             marginTop: theme.spacings.xxs,
           },
+          ...theme.applyStyles('light', {
+            background: theme.vars.palette.background.default,
+          }),
         })}
       >
         <Box className={classes.orderDetailRow}>
@@ -102,7 +103,6 @@ export function OrderDetails(props: OrderDetailsProps) {
             <Typography>{number}</Typography>
           </SectionContainer>
         </Box>
-
         <Box className={classes.orderDetailRow}>
           <SectionContainer
             variantLeft='h5'
@@ -113,7 +113,6 @@ export function OrderDetails(props: OrderDetailsProps) {
             <DateTimeFormat date={order_date} />
           </SectionContainer>
         </Box>
-
         {shipping_method && (
           <Box className={classes.orderDetailRow}>
             <SectionContainer
@@ -123,7 +122,6 @@ export function OrderDetails(props: OrderDetailsProps) {
               sx={{ '& .SectionHeader-root': { marginTop: 0, paddingBottom: '4px' } }}
             >
               <Typography>{shipping_method ?? ''}</Typography>
-
               {shipments && shipments.length > 0 && (
                 <>
                   {shipments?.[0]?.tracking && shipments?.[0]?.tracking?.[0]?.title}
@@ -174,7 +172,6 @@ export function OrderDetails(props: OrderDetailsProps) {
             </SectionContainer>
           </Box>
         )}
-
         <Box className={classes.orderDetailRow}>
           <SectionContainer
             variantLeft='h5'

package/components/Order/OrderItems/OrderItems.tsx

@@ -4,6 +4,7 @@ import {
   extendableComponent,
   nonNullable,
   SectionContainer,
+  sxx,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
@@ -33,11 +34,11 @@ export function OrderItems(props: OrderItemsProps) {
   return (
     <Box
       className={classes.root}
-      sx={[
+      sx={sxx(
         (theme) => ({
           my: theme.spacings.md,
           padding: `${theme.spacings.sm} ${theme.spacings.sm}`,
-          border: `1px ${theme.palette.divider} solid`,
+          border: `1px ${theme.vars.palette.divider} solid`,
           ...breakpointVal(
             'borderRadius',
             theme.shape.borderRadius * 2,
@@ -45,8 +46,8 @@ export function OrderItems(props: OrderItemsProps) {
             theme.breakpoints.values,
           ),
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       <SectionContainer
         sx={{ '& .SectionHeader-root': { mt: 0 } }}

package/components/Order/OrderStateLabel/OrderStateLabelInline.tsx

@@ -1,4 +1,4 @@
-import { alpha } from '@mui/material'
+import { sxx } from '@graphcommerce/next-ui'
 import type { OrderStateLabelProps } from './OrderStateLabel'
 import { OrderStateLabel } from './OrderStateLabel'
 
@@ -12,33 +12,32 @@ export function OrderStateLabelInline(props: OrderStateLabelInlineProps) {
     <OrderStateLabel
       {...props}
       short
-      sx={[
+      sx={sxx(
         (theme) => ({
           fontStyle: 'normal',
           display: 'inline-block',
           padding: '0 6px',
           borderRadius: '3px',
           fontWeight: 'normal',
-          background: alpha(theme.palette.secondary.main, 0.125),
-
+          background: theme.alpha(theme.vars.palette.secondary.main, 0.125),
           '&.orderStatePending': {
-            color: theme.palette.text.disabled,
+            color: theme.vars.palette.text.disabled,
           },
           '&.orderStateProcessing': {
-            color: theme.palette.info.main,
-            background: alpha(theme.palette.info.main, 0.125),
+            color: theme.vars.palette.info.main,
+            background: theme.alpha(theme.vars.palette.info.main, 0.125),
           },
           '&.orderStateComplete': {
-            color: theme.palette.success.main,
-            background: alpha(theme.palette.success.main, 0.125),
+            color: theme.vars.palette.success.main,
+            background: theme.alpha(theme.vars.palette.success.main, 0.125),
           },
           '&.orderStateClosed': {
-            color: theme.palette.text.disabled,
-            background: alpha(theme.palette.text.disabled, 0.125),
+            color: theme.vars.palette.text.disabled,
+            background: theme.alpha(theme.vars.palette.text.disabled, 0.125),
           },
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     />
   )
 }

package/components/Order/OrderTotals/OrderTotals.tsx

@@ -2,7 +2,7 @@ import { Money } from '@graphcommerce/magento-store'
 import { breakpointVal, extendableComponent, sxx } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
-import { Box, Divider, lighten, Typography } from '@mui/material'
+import { Box, Divider, Typography } from '@mui/material'
 import type { OrderTotalsFragment } from './OrderTotals.gql'
 
 export type OrderTotalsProps = {
@@ -33,10 +33,10 @@ export function OrderTotals(props: OrderTotalsProps) {
             theme.shape.borderRadius * 5,
             theme.breakpoints.values,
           ),
-          background:
-            theme.palette.mode === 'light'
-              ? theme.palette.background.default
-              : lighten(theme.palette.background.default, 0.15),
+          background: theme.vars.palette.background.default,
+          ...theme.applyStyles('dark', {
+            background: theme.lighten(theme.vars.palette.background.default, 0.15),
+          }),
           padding: `${theme.spacings.xs} ${theme.spacings.sm}`,
         }),
         sx,
@@ -79,13 +79,12 @@ export function OrderTotals(props: OrderTotalsProps) {
       {additionalSubtotals}
 
       <Divider sx={(theme) => ({ my: theme.spacings.xxs })} />
-
       <Box
         className={classes.totalsRow}
         sx={(theme) => ({
           display: 'flex',
           justifyContent: 'space-between',
-          color: theme.palette.primary.main,
+          color: theme.vars.palette.primary.main,
         })}
       >
         <Typography>
@@ -103,7 +102,7 @@ export function OrderTotals(props: OrderTotalsProps) {
           sx={(theme) => ({
             display: 'flex',
             justifyContent: 'space-between',
-            color: theme.palette.text.disabled,
+            color: theme.vars.palette.text.disabled,
           })}
         >
           <Typography>

package/components/Shipment/ShipmentCard.tsx

@@ -9,7 +9,7 @@ import {
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
-import { Box, lighten } from '@mui/material'
+import { Box } from '@mui/material'
 import { TrackingLink } from '../TrackingLink/TrackingLink'
 import type { ShipmentCardFragment } from './ShipmentCard.gql'
 
@@ -34,10 +34,10 @@ export function ShipmentCard(props: ShipmentCardProps) {
           px: theme.spacings.xxs,
           py: theme.spacings.xxs,
           gap: theme.spacings.sm,
-          background:
-            theme.palette.mode === 'light'
-              ? theme.palette.background.default
-              : lighten(theme.palette.background.default, 0.15),
+          background: theme.vars.palette.background.default,
+          ...theme.applyStyles('dark', {
+            background: theme.lighten(theme.vars.palette.background.default, 0.15),
+          }),
           ...breakpointVal(
             'borderRadius',
             theme.shape.borderRadius * 2,
@@ -45,7 +45,7 @@ export function ShipmentCard(props: ShipmentCardProps) {
             theme.breakpoints.values,
           ),
           // '&:hover': {
-          //   backgroundColor: theme.palette.action.hover,
+          //   backgroundColor: theme.vars.palette.action.hover,
           // },
           display: 'grid',
           gridTemplate: `

package/components/Shipment/ShipmentDetails.tsx

@@ -4,10 +4,11 @@ import {
   extendableComponent,
   filterNonNullableKeys,
   SectionContainer,
+  sxx,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
-import { Box, lighten, Typography } from '@mui/material'
+import { Box, Typography } from '@mui/material'
 import { TrackingLink } from '../TrackingLink/TrackingLink'
 import type { ShipmentFragment } from './Shipment.gql'
 
@@ -32,14 +33,11 @@ export function ShipmentDetails(props: ShipmentDetailsProps) {
   return (
     <SectionContainer
       labelLeft={<Trans>Shipment details</Trans>}
-      sx={[
+      sx={sxx(
         (theme) => ({
           padding: theme.spacings.sm,
           marginBottom: theme.spacings.md,
-          background:
-            theme.palette.mode === 'light'
-              ? theme.palette.background.default
-              : lighten(theme.palette.background.default, 0.15),
+          background: theme.lighten(theme.vars.palette.background.default, 0.15),
           ...breakpointVal(
             'borderRadius',
             theme.shape.borderRadius * 2,
@@ -50,13 +48,16 @@ export function ShipmentDetails(props: ShipmentDetailsProps) {
             mt: 0,
             mb: theme.spacings.xs,
           },
+          ...theme.applyStyles('light', {
+            background: theme.vars.palette.background.default,
+          }),
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       <Box
         className={classes.shipmentDetailContainer}
-        sx={[
+        sx={sxx(
           (theme) => ({
             gridColumnGap: theme.spacings.xxl,
             gridRowGap: theme.spacings.md,
@@ -66,8 +67,8 @@ export function ShipmentDetails(props: ShipmentDetailsProps) {
               marginTop: theme.spacings.xxs,
             },
           }),
-          ...(Array.isArray(sx) ? sx : [sx]),
-        ]}
+          sx,
+        )}
       >
         <Box className={classes.shipmentDetailRow}>
           <SectionContainer
@@ -79,7 +80,6 @@ export function ShipmentDetails(props: ShipmentDetailsProps) {
             <Typography>{number}</Typography>
           </SectionContainer>
         </Box>
-
         {tracking && tracking.length > 0 && (
           <Box className={classes.shipmentDetailRow}>
             <SectionContainer

package/components/Shipment/ShipmentItems.tsx

@@ -4,6 +4,7 @@ import {
   extendableComponent,
   nonNullable,
   SectionContainer,
+  sxx,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
@@ -31,11 +32,11 @@ export function ShipmentItems(props: ShipmentItemsProps) {
   return (
     <Box
       className={classes.root}
-      sx={[
+      sx={sxx(
         (theme) => ({
           my: theme.spacings.md,
           padding: `${theme.spacings.sm} ${theme.spacings.sm}`,
-          border: `1px ${theme.palette.divider} solid`,
+          border: `1px ${theme.vars.palette.divider} solid`,
           ...breakpointVal(
             'borderRadius',
             theme.shape.borderRadius * 2,
@@ -43,8 +44,8 @@ export function ShipmentItems(props: ShipmentItemsProps) {
             theme.breakpoints.values,
           ),
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       <SectionContainer
         sx={{ '& .SectionHeader-root': { mt: 0 } }}

package/components/SignInForm/SignInForm.tsx

@@ -64,9 +64,7 @@ export function SignInForm(props: SignInFormProps) {
           }}
         />
       </FormRow>
-
       <ApolloCustomerErrorAlert error={remainingError} key='error' />
-
       <FormActions>
         <FormControl>
           <Button

package/components/SignInForm/SignInFormInline.tsx

@@ -1,5 +1,5 @@
 import { PasswordElement } from '@graphcommerce/ecommerce-ui'
-import { Button, extendableComponent } from '@graphcommerce/next-ui'
+import { Button, extendableComponent, sxx } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, Link } from '@mui/material'
@@ -27,7 +27,7 @@ export function SignInFormInline(props: InlineSignInFormProps) {
       onSubmit={submitHandler}
       noValidate
       className={classes.form}
-      sx={[
+      sx={sxx(
         (theme) => ({
           display: 'grid',
           alignItems: 'center',
@@ -38,8 +38,8 @@ export function SignInFormInline(props: InlineSignInFormProps) {
             gridTemplateColumns: '5fr 1fr',
           },
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       <PasswordElement
         control={control}
@@ -64,7 +64,10 @@ export function SignInFormInline(props: InlineSignInFormProps) {
         loading={formState.isSubmitting}
         color='secondary'
         variant='pill'
-        sx={{ alignSelf: 'start', marginTop: (theme) => `calc(${theme.spacings.xxs} * .33)` }}
+        sx={(theme) => ({
+          alignSelf: 'start',
+          marginTop: `calc(${theme.spacings.xxs} * .33)`,
+        })}
       >
         <Trans>Sign in</Trans>
       </Button>

package/components/SignUpForm/SignUpForm.tsx

@@ -1,11 +1,11 @@
 import { FormPersist, PasswordRepeatElement, SwitchElement } from '@graphcommerce/ecommerce-ui'
 import { useQuery } from '@graphcommerce/graphql'
 import { AttributesFormAutoLayout, StoreConfigDocument } from '@graphcommerce/magento-store'
-import { Button, FormActions, FormRow } from '@graphcommerce/next-ui'
 import { magentoVersion } from '@graphcommerce/next-config/config'
+import { Button, FormActions, FormRow } from '@graphcommerce/next-ui'
 import type { UseFormClearErrors, UseFormSetError } from '@graphcommerce/react-hook-form'
-import { Trans } from '@lingui/react/macro'
 import { t } from '@lingui/core/macro'
+import { Trans } from '@lingui/react/macro'
 import { Alert } from '@mui/material'
 import { useSignInForm } from '../../hooks/useSignInForm'
 import { ApolloCustomerErrorSnackbar } from '../ApolloCustomerError/ApolloCustomerErrorSnackbar'

package/components/SignUpForm/SignUpFormInline.tsx

@@ -68,7 +68,9 @@ export function SignUpFormInline(props: SignUpFormInlineProps) {
   ) {
     return (
       <Alert>
-        <Trans>Registration successful. Please check your inbox to confirm your email address ({email})</Trans>
+        <Trans>
+          Registration successful. Please check your inbox to confirm your email address ({email})
+        </Trans>
       </Alert>
     )
   }

package/components/TrackingLink/TrackingLink.tsx

@@ -1,4 +1,4 @@
-import { iconLocation, IconSvg } from '@graphcommerce/next-ui'
+import { iconLocation, IconSvg, sxx } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, Link, Typography } from '@mui/material'
@@ -14,14 +14,14 @@ export function TrackingLink(props: TrackingLinkProps) {
   return (
     <Box
       className='TrackingLink-root'
-      sx={[
+      sx={sxx(
         (theme) => ({
           display: 'flex',
           alignItems: 'center',
-          color: theme.palette.primary.main,
+          color: theme.vars.palette.primary.main,
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       {number && validUrl && (
         <Link

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-customer",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "10.0.0-canary.67",
+  "version": "10.0.0-canary.68",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -21,24 +21,24 @@
     "./plugins/magentoCustomerPrivateQueryContext": "./plugins/magentoCustomerPrivateQueryContext.ts"
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^10.0.0-canary.67",
-    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.67",
-    "@graphcommerce/framer-next-pages": "^10.0.0-canary.67",
-    "@graphcommerce/framer-utils": "^10.0.0-canary.67",
-    "@graphcommerce/graphql": "^10.0.0-canary.67",
-    "@graphcommerce/graphql-mesh": "^10.0.0-canary.67",
-    "@graphcommerce/image": "^10.0.0-canary.67",
-    "@graphcommerce/magento-graphql": "^10.0.0-canary.67",
-    "@graphcommerce/magento-store": "^10.0.0-canary.67",
-    "@graphcommerce/next-config": "^10.0.0-canary.67",
-    "@graphcommerce/next-ui": "^10.0.0-canary.67",
-    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.67",
-    "@graphcommerce/react-hook-form": "^10.0.0-canary.67",
-    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.67",
+    "@graphcommerce/ecommerce-ui": "^10.0.0-canary.68",
+    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.68",
+    "@graphcommerce/framer-next-pages": "^10.0.0-canary.68",
+    "@graphcommerce/framer-utils": "^10.0.0-canary.68",
+    "@graphcommerce/graphql": "^10.0.0-canary.68",
+    "@graphcommerce/graphql-mesh": "^10.0.0-canary.68",
+    "@graphcommerce/image": "^10.0.0-canary.68",
+    "@graphcommerce/magento-graphql": "^10.0.0-canary.68",
+    "@graphcommerce/magento-store": "^10.0.0-canary.68",
+    "@graphcommerce/next-config": "^10.0.0-canary.68",
+    "@graphcommerce/next-ui": "^10.0.0-canary.68",
+    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.68",
+    "@graphcommerce/react-hook-form": "^10.0.0-canary.68",
+    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.68",
     "@lingui/core": "^5",
     "@lingui/macro": "^5",
     "@lingui/react": "^5",
-    "@mui/material": "^5.10.16",
+    "@mui/material": "^7.0.0",
     "framer-motion": "^11.0.0",
     "graphql": "^16.0.0",
     "next": "*",