@graphcommerce/magento-product 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/ProductCustomizable/CustomizableCheckboxOption.tsx

@@ -1,7 +1,7 @@
 import { ActionCardListForm } from '@graphcommerce/ecommerce-ui'
 import { Money } from '@graphcommerce/magento-store'
 import type { ActionCardProps } from '@graphcommerce/next-ui'
-import { ActionCard, nonNullable, SectionHeader } from '@graphcommerce/next-ui'
+import { ActionCard, nonNullable, SectionHeader, sxx } from '@graphcommerce/next-ui'
 import { t } from '@lingui/core/macro'
 import { Box, Checkbox } from '@mui/material'
 import { useFormAddProductsToCart } from '../AddProductsToCart'
@@ -36,9 +36,15 @@ function CustomizableCheckboxActionCard(props: CheckboxActionCardProps) {
           ? null
           : price && (
               <Box
-                sx={{
-                  color: selected ? 'text.primary' : 'text.secondary',
-                }}
+                sx={sxx(
+                  selected
+                    ? {
+                        color: 'text.primary',
+                      }
+                    : {
+                        color: 'text.secondary',
+                      },
+                )}
               >
                 <span style={{ fontFamily: 'arial' }}>{'+ '}</span>
                 <Money

package/components/ProductCustomizable/CustomizableDateOption.tsx

@@ -38,13 +38,16 @@ export function CustomizableDateOption(props: CustomizableDateOptionProps) {
       <TextFieldElement
         control={control}
         name={name}
-        sx={{
+        sx={(theme) => ({
           width: '100%',
           '& ::-webkit-calendar-picker-indicator': {
-            filter: (theme) => (theme.palette.mode === 'dark' ? 'invert(100%)' : 'none'),
+            filter: 'none',
             mr: '10px',
+            ...theme.applyStyles('dark', {
+              filter: 'invert(100%)',
+            }),
           },
-        }}
+        })}
         required={!!required}
         type={getInputType(dateValue.type)}
         InputProps={{

package/components/ProductCustomizable/CustomizableDropDownOption.tsx

@@ -1,6 +1,6 @@
 import { useController } from '@graphcommerce/ecommerce-ui'
 import { Money } from '@graphcommerce/magento-store'
-import { filterNonNullableKeys, SectionHeader } from '@graphcommerce/next-ui'
+import { filterNonNullableKeys, SectionHeader, sxx } from '@graphcommerce/next-ui'
 import { t } from '@lingui/core/macro'
 import { Box, MenuItem, TextField } from '@mui/material'
 import { useFormAddProductsToCart } from '../AddProductsToCart'
@@ -61,13 +61,21 @@ export function CustomizableDropDownOption(props: CustomizableDropDownOptionProp
 
             {option.price ? (
               <Box
-                sx={{
-                  // display: 'flex',
-                  typography: 'body1',
-                  '&.sizeMedium': { typographty: 'subtitle1' },
-                  '&.sizeLarge': { typography: 'h6' },
-                  color: option.uid === value ? 'text.primary' : 'text.secondary',
-                }}
+                sx={sxx(
+                  {
+                    // display: 'flex',
+                    typography: 'body1',
+                    '&.sizeMedium': { typographty: 'subtitle1' },
+                    '&.sizeLarge': { typography: 'h6' },
+                  },
+                  option.uid === value
+                    ? {
+                        color: 'text.primary',
+                      }
+                    : {
+                        color: 'text.secondary',
+                      },
+                )}
               >
                 <span style={{ fontFamily: 'arial', paddingTop: '1px' }}>+&nbsp;</span>
                 <Money

package/components/ProductCustomizable/CustomizableMultipleOption.tsx

@@ -1,7 +1,7 @@
 import { ActionCardListForm } from '@graphcommerce/ecommerce-ui'
 import { Money } from '@graphcommerce/magento-store'
 import type { ActionCardProps } from '@graphcommerce/next-ui'
-import { ActionCard, filterNonNullableKeys, SectionHeader } from '@graphcommerce/next-ui'
+import { ActionCard, filterNonNullableKeys, SectionHeader, sxx } from '@graphcommerce/next-ui'
 import { t } from '@lingui/core/macro'
 import { Box } from '@mui/material'
 import { useFormAddProductsToCart } from '../AddProductsToCart'
@@ -31,9 +31,15 @@ function CustomizableMultipleActionCard(props: MultipleActionCardProps) {
           ? null
           : price && (
               <Box
-                sx={{
-                  color: selected ? 'text.primary' : 'text.secondary',
-                }}
+                sx={sxx(
+                  selected
+                    ? {
+                        color: 'text.primary',
+                      }
+                    : {
+                        color: 'text.secondary',
+                      },
+                )}
               >
                 <span style={{ fontFamily: 'arial' }}>{'+ '}</span>
                 <Money

package/components/ProductCustomizable/CustomizablePrice.tsx

@@ -2,6 +2,7 @@ import type { Control, FieldName, FieldPath } from '@graphcommerce/ecommerce-ui'
 import { useWatch, type FieldValues } from '@graphcommerce/ecommerce-ui'
 import type { PriceTypeEnum } from '@graphcommerce/graphql-mesh'
 import { Money, type MoneyFragment } from '@graphcommerce/magento-store'
+import { sxx } from '@graphcommerce/next-ui'
 import { Box } from '@mui/material'
 import { useFormAddProductsToCart, type AddProductsToCartFields } from '../AddProductsToCart'
 
@@ -21,13 +22,21 @@ export function CustomizablePrice(props: CustomizablePriceProps) {
 
   return (
     <Box
-      sx={{
-        display: 'flex',
-        typography: 'body1',
-        '&.sizeMedium': { typographty: 'subtitle1' },
-        '&.sizeLarge': { typography: 'h6' },
-        color: optionValue ? 'text.primary' : 'text.secondary',
-      }}
+      sx={sxx(
+        {
+          display: 'flex',
+          typography: 'body1',
+          '&.sizeMedium': { typographty: 'subtitle1' },
+          '&.sizeLarge': { typography: 'h6' },
+        },
+        optionValue
+          ? {
+              color: 'text.primary',
+            }
+          : {
+              color: 'text.secondary',
+            },
+      )}
     >
       {/* Change fontFamily so the + is properly outlined */}
       <span style={{ fontFamily: 'arial' }}>+{'\u00A0'}</span>

package/components/ProductCustomizable/CustomizableRadioOption.tsx

@@ -1,7 +1,7 @@
 import { ActionCardListForm } from '@graphcommerce/ecommerce-ui'
 import { Money } from '@graphcommerce/magento-store'
 import type { ActionCardProps } from '@graphcommerce/next-ui'
-import { ActionCard, filterNonNullableKeys, SectionHeader } from '@graphcommerce/next-ui'
+import { ActionCard, filterNonNullableKeys, SectionHeader, sxx } from '@graphcommerce/next-ui'
 import { t } from '@lingui/core/macro'
 import { Box } from '@mui/material'
 import { useFormAddProductsToCart } from '../AddProductsToCart'
@@ -32,9 +32,15 @@ function CustomizableRadioActionCard(props: RadioActionCardProps) {
           ? null
           : price && (
               <Box
-                sx={{
-                  color: selected ? 'text.primary' : 'text.secondary',
-                }}
+                sx={sxx(
+                  selected
+                    ? {
+                        color: 'text.primary',
+                      }
+                    : {
+                        color: 'text.secondary',
+                      },
+                )}
               >
                 {/* Change fontFamily so the + is properly outlined */}
                 <span style={{ fontFamily: 'arial' }}>{'+ '}</span>

package/components/ProductFiltersPro/PriceSlider.tsx

@@ -1,6 +1,6 @@
 import type { FilterRangeTypeInput } from '@graphcommerce/graphql-mesh'
 import { Money } from '@graphcommerce/magento-store'
-import { extendableComponent, filterNonNullableKeys } from '@graphcommerce/next-ui'
+import { extendableComponent, filterNonNullableKeys, sxx } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, Slider, useEventCallback } from '@mui/material'
 import { useCallback } from 'react'
@@ -38,14 +38,14 @@ export function PriceSlider(props: PriceSliderProps) {
 
   return (
     <Box
-      sx={[
+      sx={sxx(
         (theme) => ({
           pt: theme.spacings.md,
           pb: theme.spacings.xs,
           px: theme.spacings.xxs,
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
       className={classes.container}
     >
       <Slider

package/components/ProductFiltersPro/ProductFilterEqualChip.tsx

@@ -58,7 +58,6 @@ export function ProductFilterEqualChip(props: FilterProps) {
         })),
     [attrCode, options],
   )
-
   return (
     items.length !== 0 && (
       <ChipOverlayOrPopper

package/components/ProductFiltersPro/ProductFilterEqualSection.tsx

@@ -52,7 +52,6 @@ export function ProductFilterEqualSection(props: FilterProps) {
       })),
     [attrCode, options],
   )
-
   return (
     <ActionCardAccordion
       summary={label}

package/components/ProductFiltersPro/ProductFiltersProAllFiltersSidebar.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { Box } from '@mui/material'
 import type { ProductFiltersProAggregationsProps } from './ProductFiltersProAggregations'
@@ -23,7 +24,7 @@ export function ProductFiltersProAllFiltersSidebar(props: ProductFiltersProAllFi
   const { sort_fields, total_count, renderer, sx = [], category, params } = props
 
   return (
-    <Box sx={[{ display: { xs: 'none', md: 'grid' } }, ...(Array.isArray(sx) ? sx : [sx])]}>
+    <Box sx={sxx({ display: { xs: 'none', md: 'grid' } }, sx)}>
       <ProductFiltersProCategorySection category={category} params={params} />
       <ProductFiltersProSortSection
         sort_fields={sort_fields}

package/components/ProductFiltersPro/ProductFiltersProCategorySection.tsx

@@ -10,6 +10,7 @@ import {
   iconChevronLeft,
   IconSvg,
   responsiveVal,
+  sxx,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
@@ -33,11 +34,7 @@ export function ProductFiltersProCategoryAccordion(props: ProductFiltersProCateg
 
   return (
     <ActionCardAccordion
-      sx={[
-        hideTitle ? { '& .MuiAccordionSummary-root': { display: 'none' } } : {},
-        sx,
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+      sx={sxx(hideTitle ? { '& .MuiAccordionSummary-root': { display: 'none' } } : {}, sx, sx)}
       defaultExpanded={defaultExpanded}
       summary={<Trans>Categories</Trans>}
       right={

package/components/ProductFiltersPro/ProductFiltersProLayoutSidebar.tsx

@@ -52,9 +52,7 @@ export function ProductFiltersProLayoutSidebar(props: ProductFiltersProLayoutSid
   return (
     <>
       {headerPosition === 'before' ? header : null}
-
       <FormAutoSubmit control={form.control} disabled={autoSubmitDisabled} submit={submit} />
-
       <Container
         maxWidth={false}
         className={classes.content}
@@ -77,9 +75,7 @@ export function ProductFiltersProLayoutSidebar(props: ProductFiltersProLayoutSid
               /300px   auto
             `,
           },
-
           columnGap: { md: theme.spacings.md, xl: theme.spacings.xxl },
-
           '& .ProductListItemsBase-root.sizeNormal': {
             gridTemplateColumns: {
               xs: 'repeat(2, 1fr)',
@@ -89,25 +85,61 @@ export function ProductFiltersProLayoutSidebar(props: ProductFiltersProLayoutSid
           },
         })}
       >
-        <Box gridArea='topleft' sx={{ display: { xs: 'none', md: 'block' }, alignSelf: 'center' }}>
+        <Box
+          sx={{
+            gridArea: 'topleft',
+            display: { xs: 'none', md: 'block' },
+            alignSelf: 'center',
+          }}
+        >
           {clearAll}
         </Box>
         {sidebarFilters && (
-          <Box gridArea='sidebar' sx={{ display: { xs: 'none', md: 'block' } }}>
+          <Box
+            sx={{
+              gridArea: 'sidebar',
+              display: { xs: 'none', md: 'block' },
+            }}
+          >
             {sidebarFilters}
           </Box>
         )}
-        {children && <Box gridArea='content'>{children}</Box>}
+        {children && (
+          <Box
+            sx={{
+              gridArea: 'content',
+            }}
+          >
+            {children}
+          </Box>
+        )}
         <StickyBelowHeader sx={{ display: { md: 'none', gridArea: 'horizontalFilters' } }}>
           {horizontalFilters}
         </StickyBelowHeader>
-
-        <Box gridArea='beforeContent' sx={{ mt: { md: 0 } }}>
+        <Box
+          sx={{
+            gridArea: 'beforeContent',
+            mt: { md: 0 },
+          }}
+        >
           {count}
         </Box>
-        <Box gridArea='items'>{items}</Box>
-
-        {pagination && <Box gridArea='afterContent'>{pagination}</Box>}
+        <Box
+          sx={{
+            gridArea: 'items',
+          }}
+        >
+          {items}
+        </Box>
+        {pagination && (
+          <Box
+            sx={{
+              gridArea: 'afterContent',
+            }}
+          >
+            {pagination}
+          </Box>
+        )}
       </Container>
     </>
   )

package/components/ProductFiltersPro/ProductFiltersProNoResults.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, Typography } from '@mui/material'
@@ -22,14 +22,14 @@ export function ProductFiltersProNoResults(props: ProductFitlersProNoResultProps
   return (
     <Box
       className={classes.root}
-      sx={[
+      sx={sxx(
         (theme) => ({
           marginTop: theme.spacings.md,
           marginBottom: theme.spacings.sm,
           textAlign: 'center',
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       {term ? (
         <>

package/components/ProductListCount/ProductListCount.tsx

@@ -1,4 +1,4 @@
-import { extendableComponent, responsiveVal } from '@graphcommerce/next-ui'
+import { extendableComponent, responsiveVal, sxx } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, Divider, Typography } from '@mui/material'
@@ -20,7 +20,7 @@ export function ProductListCount(props: ProductCountProps) {
 
   return (
     <Box
-      sx={[
+      sx={sxx(
         (theme) => ({
           display: 'grid',
           gridAutoFlow: 'column',
@@ -32,16 +32,18 @@ export function ProductListCount(props: ProductCountProps) {
           my: theme.spacings.md,
           mx: 'auto',
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
       className={classes.root}
     >
       <Divider component='div' className={classes.line} />
       <Typography
         variant='body2'
-        color='text.disabled'
         className={classes.count}
-        sx={{ lineHeight: 0 }}
+        sx={{
+          color: 'text.disabled',
+          lineHeight: 0,
+        }}
       >
         {children ? <> {children} </> : null}
         {total_count === 0 && <Trans>no products</Trans>}

package/components/ProductListFilters/FilterEqualType.tsx

@@ -1,7 +1,7 @@
 import { cloneDeep } from '@graphcommerce/graphql'
 import type { FilterEqualTypeInput } from '@graphcommerce/graphql-mesh'
 import type { ChipMenuProps } from '@graphcommerce/next-ui'
-import { ChipMenu, extendableComponent, responsiveVal } from '@graphcommerce/next-ui'
+import { ChipMenu, extendableComponent, responsiveVal, sxx } from '@graphcommerce/next-ui'
 import {
   Box, // eslint-disable-next-line @typescript-eslint/no-restricted-imports
   Checkbox,
@@ -127,7 +127,7 @@ export function FilterEqualType(props: FilterEqualTypeProps) {
                   padding: `0 ${theme.spacings.xxs} 0`,
                   display: 'block',
                   '&:not(:nth-last-of-type(-n+2)) > div': {
-                    borderBottom: `1px solid ${theme.palette.divider}`,
+                    borderBottom: `1px solid ${theme.vars.palette.divider}`,
                   },
                 })}
               >
@@ -155,7 +155,7 @@ export function FilterEqualType(props: FilterEqualTypeProps) {
                         whiteSpace: 'break-spaces',
                       },
                       [`& .${listItemTextClasses.secondary}`]: {
-                        color: theme.palette.grey[500],
+                        color: theme.vars.palette.grey[500],
                         marginLeft: '4px',
                         fontSize: theme.typography.pxToRem(11),
                         display: 'inline',
@@ -172,7 +172,7 @@ export function FilterEqualType(props: FilterEqualTypeProps) {
                       disableRipple
                       inputProps={{ 'aria-labelledby': labelId }}
                       className={cls.checkbox}
-                      sx={[
+                      sx={sxx(
                         {
                           padding: 0,
                           margin: '-10px 0 0 0',
@@ -187,10 +187,10 @@ export function FilterEqualType(props: FilterEqualTypeProps) {
                         },
                         isActive &&
                           ((theme) => ({
-                            border: `1px solid ${theme.palette.primary.main}`,
-                            boxShadow: `inset 0 0 0 4px ${theme.palette.background.paper}`,
+                            border: `1px solid ${theme.vars.palette.primary.main}`,
+                            boxShadow: `inset 0 0 0 4px ${theme.vars.palette.background.paper}`,
                           })),
-                      ]}
+                      )}
                       style={
                         isColor
                           ? { background: `${option?.label}`, color: `${option?.label}` }

package/components/ProductListFiltersContainer/ProductListFiltersContainer.tsx

@@ -4,6 +4,7 @@ import {
   iconChevronLeft,
   iconChevronRight,
   IconSvg,
+  sxx,
   useScrollY,
 } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
@@ -89,7 +90,7 @@ export function ProductListFiltersContainer(props: ProductListFiltersContainerPr
     <MotionDiv
       className={classes.wrapper}
       ref={wrapperRef}
-      sx={[
+      sx={sxx(
         (theme) => ({
           display: 'flex',
           justifyContent: 'center',
@@ -98,15 +99,14 @@ export function ProductListFiltersContainer(props: ProductListFiltersContainerPr
           top: theme.page.vertical,
           zIndex: 9,
           margin: '0 auto',
-
           [theme.breakpoints.down('md')]: {
             textAlign: 'center',
             maxWidth: 'unset',
             margin: `0 calc(${theme.page.horizontal} * -1)`,
           },
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       <ScrollerProvider scrollSnapAlign='none'>
         <ScrollerButton
@@ -126,7 +126,7 @@ export function ProductListFiltersContainer(props: ProductListFiltersContainerPr
             paddingLeft: 0,
             paddingRight: 0,
             [theme.breakpoints.up('md')]: {
-              background: theme.palette.background.default,
+              background: theme.vars.palette.background.default,
               borderRadius: '99em',
             },
             display: 'grid',

package/components/ProductListItem/ProductListItemImage.tsx

@@ -1,5 +1,6 @@
 import type { ImageProps } from '@graphcommerce/image'
 import { Image } from '@graphcommerce/image'
+import { sxx } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react/macro'
 import type { BoxProps } from '@mui/material'
 import { Box, Skeleton, styled } from '@mui/material'
@@ -67,14 +68,14 @@ export function ProductListItemImage(props: ImageOrPlaceholderProps) {
         alt={alt ?? ''}
         {...image}
         className={classes?.image}
-        sx={[
+        sx={sxx(
           {
             objectFit: 'contain',
             aspectRatio: `${aspectRatio[0] / aspectRatio[1]}`,
             display: 'block',
           },
-          ...(Array.isArray(sx) ? sx : [sx]),
-        ]}
+          sx,
+        )}
       />
     )
   }
@@ -82,14 +83,14 @@ export function ProductListItemImage(props: ImageOrPlaceholderProps) {
   return (
     <PlaceHolderContainer className={`${classes?.placeholder} ${classes?.image}`}>
       <Box
-        sx={[
+        sx={sxx(
           {
             width: '100%',
             height: '100%',
             aspectRatio: `${aspectRatio[0] / aspectRatio[1]}`,
           },
-          ...(Array.isArray(sx) ? sx : [sx]),
-        ]}
+          sx,
+        )}
       >
         <Trans>No Image</Trans>
       </Box>

package/components/ProductListItem/ProductListItemImageContainer.tsx

@@ -1,4 +1,4 @@
-import { breakpointVal, responsiveVal } from '@graphcommerce/next-ui'
+import { breakpointVal, responsiveVal, sxx } from '@graphcommerce/next-ui'
 import type { BoxProps } from '@mui/material'
 import { Box } from '@mui/material'
 
@@ -10,7 +10,7 @@ export function ProductImageContainer(props: ProductImageContainerProps) {
   return (
     <Box
       {...props}
-      sx={[
+      sx={sxx(
         (theme) => ({
           display: 'grid',
           bgcolor: 'background.image',
@@ -28,8 +28,8 @@ export function ProductImageContainer(props: ProductImageContainerProps) {
             height: 'auto',
           },
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     />
   )
 }

package/components/ProductListItem/ProductListItemLinkOrDiv.tsx

@@ -1,4 +1,4 @@
-import { breakpointVal, NextLink } from '@graphcommerce/next-ui'
+import { breakpointVal, NextLink, sxx } from '@graphcommerce/next-ui'
 import type { BoxProps, ButtonBaseProps, SxProps, Theme } from '@mui/material'
 import { Box, ButtonBase } from '@mui/material'
 import React from 'react'
@@ -16,7 +16,7 @@ export const ProductListItemLinkOrDiv = React.forwardRef<
 >((props, ref) => {
   const { sx = [] } = props
 
-  const sxProps: SxProps<Theme> = [
+  const sxProps = sxx(
     (theme) => ({
       display: 'block',
       position: 'relative',
@@ -28,8 +28,8 @@ export const ProductListItemLinkOrDiv = React.forwardRef<
         theme.breakpoints.values,
       ),
     }),
-    ...(Array.isArray(sx) ? sx : [sx]),
-  ]
+    sx,
+  )
 
   return isLink(props) ? (
     <ButtonBase ref={ref} component={NextLink} {...props} sx={sxProps} focusRipple />

package/components/ProductListItem/ProductListItemParts.tsx

@@ -1,5 +1,5 @@
 import type { ImageProps } from '@graphcommerce/image'
-import { extendableComponent } from '@graphcommerce/next-ui'
+import { extendableComponent, sxx } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { Skeleton } from '@mui/material'
 import React from 'react'
@@ -93,10 +93,7 @@ export function ProductListItemReal(props: ProductListItemRealProps) {
       className={classes.root}
       onClick={(e: React.MouseEvent<HTMLAnchorElement | HTMLDivElement>) => onClick?.(e, props)}
       {...slotProps.root}
-      sx={[
-        ...(Array.isArray(sx) ? sx : [sx]),
-        ...(Array.isArray(slotProps.root?.sx) ? slotProps.root.sx : [slotProps.root?.sx]),
-      ]}
+      sx={sxx(sx, slotProps.root?.sx)}
       ref={slotProps.root?.ref as React.Ref<HTMLAnchorElement | HTMLDivElement>}
     >
       <ProductImageContainer className={classes.imageContainer}>

package/components/ProductListItem/ProductListItemTitleAndPrice.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, Typography } from '@mui/material'
 import { productListPrice } from '../ProductListPrice'
@@ -17,7 +18,7 @@ export function ProductListItemTitleAndPrice(props: ProductListItemTitleAndPrice
   return (
     <Box
       className={classes.titleContainer}
-      sx={[
+      sx={sxx(
         (theme) => ({
           display: 'grid',
           alignItems: 'baseline',
@@ -30,8 +31,8 @@ export function ProductListItemTitleAndPrice(props: ProductListItemTitleAndPrice
           gridTemplateColumns: { xs: 'unset', md: 'auto auto 1fr' },
           justifyContent: 'space-between',
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       <Typography
         component={titleComponent}

package/components/ProductListItems/ProductListItemsBase.tsx

@@ -1,4 +1,10 @@
-import { extendableComponent, LazyHydrate, RenderType, responsiveVal } from '@graphcommerce/next-ui'
+import {
+  extendableComponent,
+  LazyHydrate,
+  RenderType,
+  responsiveVal,
+  sxx,
+} from '@graphcommerce/next-ui'
 import type { BoxProps, Breakpoint, Theme } from '@mui/material'
 import { Box, useTheme } from '@mui/material'
 import React from 'react'
@@ -93,7 +99,7 @@ export function ProductListItemsBase(props: ProductItemsGridProps) {
       <Box
         ref={containerRef}
         className={classes.root}
-        sx={[
+        sx={sxx(
           ...Object.entries(columnConfig).map(([key, column]) => ({
             [theme.breakpoints.up(key as Breakpoint)]: {
               gap: column.gap ?? gap,
@@ -102,8 +108,8 @@ export function ProductListItemsBase(props: ProductItemsGridProps) {
             },
           })),
           { display: 'grid' },
-          ...(Array.isArray(sx) ? sx : [sx]),
-        ]}
+          sx,
+        )}
       >
         {items?.map((item, idx) =>
           item ? (

package/components/ProductListSort/ProductListSort.tsx

@@ -4,7 +4,7 @@ import type { ChipMenuProps } from '@graphcommerce/next-ui'
 import { ChipMenu, extendableComponent } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
-import { ListItem, ListItemText } from '@mui/material'
+import { ListItemButton, ListItemText } from '@mui/material'
 import React from 'react'
 import { useProductListLinkReplace } from '../../hooks/useProductListLinkReplace'
 import { useProductListParamsContext } from '../../hooks/useProductListParamsContext'
@@ -59,9 +59,8 @@ export function ProductListSort(props: ProductListSortProps) {
         delete linkParams.currentPage
 
         return (
-          <ListItem
+          <ListItemButton
             className={classes.item}
-            button
             key={option?.value ?? ''}
             dense
             selected={option?.value === currentSort}
@@ -81,7 +80,7 @@ export function ProductListSort(props: ProductListSortProps) {
             )}
           >
             <ListItemText>{option?.label}</ListItemText>
-          </ListItem>
+          </ListItemButton>
         )
       })}
     </ChipMenu>

package/components/ProductPage/ProductPageAddToCartRow.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { Box } from '@mui/material'
 import type { UseAddProductsToCartActionFragment } from '../AddProductsToCart/UseAddProductsToCartAction.gql'
@@ -15,10 +16,10 @@ function ProductPageAddToCartRow(props: ProductPageAddToCartRowProps) {
   return (
     <>
       <Box
-        sx={[
+        sx={sxx(
           (theme) => ({ display: 'flex', alignItems: 'center', columnGap: theme.spacings.xs }),
-          ...(Array.isArray(sx) ? sx : [sx]),
-        ]}
+          sx,
+        )}
       >
         {children}
       </Box>

package/components/ProductPageBreadcrumb/ProductPageBreadcrumb.tsx

@@ -42,7 +42,13 @@ export function ProductPageBreadcrumb(props: ProductPageBreadcrumbProps) {
           {category?.name}
         </Link>
       )}
-      <Typography color='text.primary'>{name}</Typography>
+      <Typography
+        sx={{
+          color: 'text.primary',
+        }}
+      >
+        {name}
+      </Typography>
     </Breadcrumbs>
   )
 }

package/components/ProductPageDescription/ProductPageDescription.tsx

@@ -4,17 +4,18 @@ import {
   ColumnTwoWithTop,
   extendableComponent,
   LazyHydrate,
+  sxx,
 } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, Typography } from '@mui/material'
-import type { Variant } from '@mui/material/styles/createTypography'
+import type { TypographyVariant } from '@mui/material/styles'
 import type { ProductListItemRenderer } from '../ProductListItems/renderer'
 import { ProductPageName } from '../ProductPageName'
 import type { ProductPageDescriptionFragment } from './ProductPageDescription.gql'
 
 export type ProductPageDescriptionProps = Omit<ColumnTwoWithTopProps, 'top' | 'left'> & {
   sx?: SxProps<Theme>
-  fontSize?: 'responsive' | Variant
+  fontSize?: 'responsive' | TypographyVariant
   product: ProductPageDescriptionFragment
   productListRenderer: ProductListItemRenderer
 }
@@ -51,7 +52,7 @@ export function ProductPageDescription(props: ProductPageDescriptionProps) {
               className={classes.description}
               // eslint-disable-next-line react/no-danger
               dangerouslySetInnerHTML={{ __html: product.description.html }}
-              sx={[
+              sx={sxx(
                 {
                   '& p:first-of-type': {
                     marginTop: 0,
@@ -77,7 +78,7 @@ export function ProductPageDescription(props: ProductPageDescriptionProps) {
                     fontSize,
                   },
                 },
-              ]}
+              )}
             />
           )
         }

package/components/ProductPageGallery/ProductVideo.tsx

@@ -126,7 +126,7 @@ export function ProductVideo(props: ProductVideoProps) {
             sx={(theme) => ({
               width: '100%',
               height: '100%',
-              background: theme.palette.background.image,
+              background: theme.vars.palette.background.image,
             })}
           >
             <Iframe
@@ -155,7 +155,6 @@ export function ProductVideo(props: ProductVideoProps) {
             sx={sxx(baseSx, sx, videoProps?.sx)}
           />
         ))}
-
       {!play && (
         <PlayCircle
           onClick={(e) => {

package/components/ProductPagePrice/ProductPagePrice.tsx

@@ -68,7 +68,7 @@ export function ProductPagePrice(props: ProductPagePriceProps) {
           component='span'
           className={classes.discountPrice}
           skeleton={{ variant: 'text', sx: { width: '3.5em', transform: 'none' } }}
-          sx={[{ textDecoration: 'line-through', color: 'text.disabled' }]}
+          sx={sxx({ textDecoration: 'line-through', color: 'text.disabled' })}
         >
           <Money {...regularPrice} value={regularPriceValue} asNumber={asNumber} />
         </PrivateQueryMask>
@@ -80,7 +80,6 @@ export function ProductPagePrice(props: ProductPagePriceProps) {
       >
         <Money {...price} value={finalPriceValue} asNumber={asNumber} />
       </PrivateQueryMask>
-
       {suffix && (
         <PrivateQueryMask
           component='span'

package/components/ProductShortDescription/ProductShortDescription.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 { Typography } from '@mui/material'
 import type { ProductShortDescriptionFragment } from './ProductShortDescription.gql'
@@ -22,13 +22,13 @@ export function ProductShortDescription(props: ProductShortDescriptionProps) {
       component='div'
       className={classes.description}
       dangerouslySetInnerHTML={{ __html: short_description?.html ?? '' }}
-      sx={[
+      sx={sxx(
         {
           '& > p:first-of-type': { marginTop: 0 },
           '& > p:last-of-type': { marginBottom: 0 },
         },
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     />
   )
 }

package/components/ProductSidebarDelivery/ProductSidebarDelivery.tsx

@@ -1,6 +1,6 @@
 import { breakpointVal, iconOrderBefore, IconSvg } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react/macro'
-import { Box, darken, lighten } from '@mui/material'
+import { Box } from '@mui/material'
 import type { UseAddProductsToCartActionFragment } from '../AddProductsToCart/UseAddProductsToCartAction.gql'
 
 export type ProductSidebarDeliveryProps = {
@@ -19,9 +19,7 @@ export function ProductSidebarDelivery(props: ProductSidebarDeliveryProps) {
     subtitle = <Trans>We are sorry, this product is currently out of stock.</Trans>
   } else if (stock_status === 'IN_STOCK' && only_x_left_in_stock) {
     title = <Trans>Only a few left</Trans>
-    subtitle = (
-      <Trans>Only {only_x_left_in_stock} left in stock.</Trans>
-    )
+    subtitle = <Trans>Only {only_x_left_in_stock} left in stock.</Trans>
   }
   if (only_x_left_in_stock === 1) {
     subtitle = <Trans>Only 1 left in stock.</Trans>
@@ -38,10 +36,7 @@ export function ProductSidebarDelivery(props: ProductSidebarDeliveryProps) {
         `,
         gridTemplateColumns: 'min-content auto',
         columnGap: theme.spacings.xxs,
-        background:
-          theme.palette.mode === 'light'
-            ? darken(theme.palette.background.default, 0.01)
-            : lighten(theme.palette.background.default, 0.2),
+        background: theme.lighten(theme.vars.palette.background.default, 0.2),
         padding: theme.spacings.xxs,
         ...breakpointVal(
           'borderRadius',
@@ -49,6 +44,9 @@ export function ProductSidebarDelivery(props: ProductSidebarDeliveryProps) {
           theme.shape.borderRadius * 4,
           theme.breakpoints.values,
         ),
+        ...theme.applyStyles('light', {
+          background: theme.darken(theme.vars.palette.background.default, 0.01),
+        }),
       })}
     >
       <IconSvg src={iconOrderBefore} size='small' sx={{ gridArea: 'image' }} />

package/components/ProductSpecs/ProductSpecs.tsx

@@ -1,4 +1,10 @@
-import { extendableComponent, responsiveVal, Row, SectionContainer } from '@graphcommerce/next-ui'
+import {
+  extendableComponent,
+  responsiveVal,
+  Row,
+  SectionContainer,
+  sxx,
+} from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { Box } from '@mui/material'
 import type { ProductSpecsFragment } from './ProductSpecs.gql'
@@ -25,10 +31,7 @@ export function ProductSpecs(props: ProductSpecsProps) {
   if (specs?.length === 0) return null
 
   return (
-    <Row
-      className={classes.root}
-      sx={[{ typography: 'subtitle1' }, ...(Array.isArray(sx) ? sx : [sx])]}
-    >
+    <Row className={classes.root} sx={sxx({ typography: 'subtitle1' }, sx)}>
       <SectionContainer
         labelLeft={title}
         sx={(theme) => ({ '& .SectionHeader-root': { marginBottom: theme.spacings.md } })}

package/components/index.ts

@@ -45,4 +45,3 @@ export * from './ProductStaticPaths/getProductStaticPaths'
 export * from './ProductStaticPaths/getSitemapPaths'
 export * from './ProductUpsells/UpsellProducts.gql'
 export * from './ProductWeight/ProductWeight'
-

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-product",
   "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": {
@@ -18,22 +18,22 @@
     "typescript": "5.9.3"
   },
   "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-scroller": "^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-cart": "^10.0.0-canary.67",
-    "@graphcommerce/magento-store": "^10.0.0-canary.67",
-    "@graphcommerce/next-ui": "^10.0.0-canary.67",
-    "@graphcommerce/prettier-config-pwa": "^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-scroller": "^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-cart": "^10.0.0-canary.68",
+    "@graphcommerce/magento-store": "^10.0.0-canary.68",
+    "@graphcommerce/next-ui": "^10.0.0-canary.68",
+    "@graphcommerce/prettier-config-pwa": "^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",
     "next": "*",
     "react": "^19.2.0",