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

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