@graphcommerce/next-ui 10.0.0-canary.67 → 10.0.0-canary.72

package/LayoutDefault/components/LayoutDefault.tsx

@@ -1,5 +1,6 @@
 import { useScrollOffset } from '@graphcommerce/framer-next-pages'
 import { dvh } from '@graphcommerce/framer-utils'
+import { sxx } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { Box } from '@mui/material'
 import { useScroll, useTransform } from 'framer-motion'
@@ -55,7 +56,7 @@ export function LayoutDefault(props: LayoutDefaultProps) {
   return (
     <Box
       className={`${classes.root} ${className ?? ''}`}
-      sx={[
+      sx={sxx(
         (theme) => ({
           minHeight: dvh(100),
           '@supports (-webkit-touch-callout: none)': {
@@ -64,10 +65,10 @@ export function LayoutDefault(props: LayoutDefaultProps) {
           display: 'grid',
           gridTemplateRows: { xs: 'auto 1fr auto', md: 'auto auto 1fr auto' },
           gridTemplateColumns: '100%',
-          background: theme.palette.background.default,
+          background: theme.vars.palette.background.default,
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       <SkipLink />
       <LayoutProvider scroll={scrollYOffset}>

package/LayoutOverlay/components/LayoutOverlayHeader.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import type { LayoutHeaderProps } from '../../Layout'
 import { LayoutHeader } from '../../Layout'
 
@@ -8,7 +9,7 @@ export function LayoutOverlayHeader(props: LayoutHeaderProps) {
       {...props}
       noAlign
       switchPoint={switchPoint !== 0 ? switchPoint : -1000}
-      sx={[
+      sx={sxx(
         (theme) => ({
           [theme.breakpoints.down('md')]: {
             '&.noAlign': {
@@ -25,8 +26,8 @@ export function LayoutOverlayHeader(props: LayoutHeaderProps) {
             },
           },
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     />
   )
 }

package/LayoutOverlay/components/LayoutOverlayHeader2.tsx

@@ -96,7 +96,6 @@ export const LayoutOverlayHeader2 = React.memo<LayoutOverlayHeader2Props>((props
           right: 0,
           top: 0,
           marginTop: 0,
-
           // Special positioning for bottom overlays
           [theme.breakpoints.down('md')]: {
             height: theme.appShell.headerHeightSm,
@@ -109,7 +108,6 @@ export const LayoutOverlayHeader2 = React.memo<LayoutOverlayHeader2Props>((props
             '.variantMdBottom.sizeMdFull &, .variantMdBottom.sizeMdMinimal &': {
               top: `calc(${theme.appShell.appBarHeightMd} * 0.5 * -1)`,
             },
-
             '&.sizeSmall': {
               height: theme.appShell.headerHeightSm,
             },
@@ -135,27 +133,23 @@ export const LayoutOverlayHeader2 = React.memo<LayoutOverlayHeader2Props>((props
               height: theme.appShell.headerHeightSm,
             },
           },
-
           // Default: center only
           gridTemplateAreas: '"center"',
           gridTemplateColumns: '1fr',
-
           // Left only
           '&.left:not(.right)': {
             gridTemplateAreas: '"left center"',
-            gridTemplateColumns: justify === 'center' ? '1fr max-content' : 'auto 1fr',
+            gridTemplateColumns: justify === 'center' ? '1fr auto' : 'auto 1fr',
           },
-
           // Right only
           '&.right:not(.left)': {
             gridTemplateAreas: '"center right"',
-            gridTemplateColumns: justify === 'center' ? 'max-content 1fr' : '1fr auto',
+            gridTemplateColumns: justify === 'center' ? 'auto 1fr' : '1fr auto',
           },
-
           // Both left and right
           '&.left.right': {
             gridTemplateAreas: '"left center right"',
-            gridTemplateColumns: justify === 'center' ? '1fr max-content 1fr' : 'auto 1fr auto',
+            gridTemplateColumns: justify === 'center' ? '1fr auto 1fr' : 'auto 1fr auto',
           },
         }))}
       >

package/LayoutParts/DesktopHeaderBadge.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import type { BadgeProps } from '@mui/material'
 import { Badge } from '@mui/material'
 
@@ -8,7 +9,7 @@ export function DesktopHeaderBadge(props: BadgeProps) {
   return (
     <Badge
       {...props}
-      sx={[
+      sx={sxx(
         {
           '& .MuiBadge-colorError': {
             bgcolor: 'text.disabled',
@@ -23,8 +24,8 @@ export function DesktopHeaderBadge(props: BadgeProps) {
             padding: { xs: '3px', md: '5px' },
           },
         },
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     />
   )
 }

package/LayoutParts/DesktopNavBar.tsx

@@ -1,4 +1,5 @@
 import { Scroller, ScrollerButton, ScrollerProvider } from '@graphcommerce/framer-scroller'
+import { sxx } from '@graphcommerce/next-ui'
 import type { BoxProps } from '@mui/material'
 import React from 'react'
 import { iconChevronLeft, iconChevronRight } from '../icons'
@@ -30,7 +31,7 @@ export function DesktopNavBar(props: MenuTabsProps) {
       query={(theme) => theme.breakpoints.up('md')}
       display='grid'
       className={classes.root}
-      sx={[
+      sx={sxx(
         {
           width: '100%',
           alignItems: 'center',
@@ -38,8 +39,8 @@ export function DesktopNavBar(props: MenuTabsProps) {
           pointerEvents: 'all',
           gridTemplateColumns: 'auto 1fr auto',
         },
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       <ScrollerProvider scrollSnapAlign='none'>
         <Scroller
@@ -61,16 +62,15 @@ export function DesktopNavBar(props: MenuTabsProps) {
             pointerEvents: 'none',
             '& > *': { pointerEvents: 'all' },
           }}
-          sx={{
+          sx={(theme) => ({
             pointerEvents: 'all',
             boxShadow: 'none',
             height: 48,
             borderTopLeftRadius: 0,
             borderBottomLeftRadius: 0,
             backgroundColor: 'transparent',
-            backgroundImage: (theme) =>
-              `linear-gradient(to left, rgba(255,255,255,0) 0%, ${theme.palette.background.default} 35%)`,
-          }}
+            backgroundImage: `linear-gradient(to left, rgba(255,255,255,0) 0%, ${theme.vars.palette.background.default} 35%)`,
+          })}
           direction='left'
           size='small'
           tabIndex={-1}
@@ -87,16 +87,15 @@ export function DesktopNavBar(props: MenuTabsProps) {
               pointerEvents: 'all',
             },
           }}
-          sx={{
+          sx={(theme) => ({
             pointerEvents: 'all',
             boxShadow: 'none',
             height: 48,
             borderTopRightRadius: 0,
             borderBottomRightRadius: 0,
             backgroundColor: 'transparent',
-            backgroundImage: (theme) =>
-              `linear-gradient(to right, rgba(255,255,255,0) 0%, ${theme.palette.background.default} 35%)`,
-          }}
+            backgroundImage: `linear-gradient(to right, rgba(255,255,255,0) 0%, ${theme.vars.palette.background.default} 35%)`,
+          })}
           direction='right'
           size='small'
           tabIndex={-1}

package/LayoutParts/DesktopNavBarItem.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import type { LinkProps } from '@mui/material'
 import { Box, Link } from '@mui/material'
 import { useRouter } from 'next/router'
@@ -34,10 +35,7 @@ export function DesktopNavItem(props: DesktopNavItemLinkProps | DesktopNavItemBu
         underline='none'
         {...linkProps}
         onClick={onClick}
-        sx={[
-          { whiteSpace: 'nowrap', paddingTop: '6px', cursor: 'pointer' },
-          ...(Array.isArray(sx) ? sx : [sx]),
-        ]}
+        sx={sxx({ whiteSpace: 'nowrap', paddingTop: '6px', cursor: 'pointer' }, sx)}
       >
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>{children}</Box>
       </Link>
@@ -56,23 +54,31 @@ export function DesktopNavItem(props: DesktopNavItemLinkProps | DesktopNavItemBu
       color='text.primary'
       underline='none'
       {...linkProps}
-      sx={[{ whiteSpace: 'nowrap', paddingTop: '6px' }, ...(Array.isArray(sx) ? sx : [sx])]}
+      sx={sxx({ whiteSpace: 'nowrap', paddingTop: '6px' }, sx)}
     >
       <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>{children}</Box>
       <Box
         component='span'
         className={classes.line}
-        sx={{
-          maxWidth: 40,
-          width: '100%',
-          display: 'flex',
-          justifyContent: 'center',
-          height: 2,
-          background: (theme) => theme.palette.primary.main,
-          margin: '0 auto',
-          marginTop: '6px',
-          opacity: activeValue ? 1 : 0,
-        }}
+        sx={sxx(
+          (theme) => ({
+            maxWidth: 40,
+            width: '100%',
+            display: 'flex',
+            justifyContent: 'center',
+            height: 2,
+            background: theme.vars.palette.primary.main,
+            margin: '0 auto',
+            marginTop: '6px',
+          }),
+          activeValue
+            ? {
+                opacity: 1,
+              }
+            : {
+                opacity: 0,
+              },
+        )}
       />
     </Link>
   )

package/LayoutParts/GlobalHead.tsx

@@ -13,7 +13,7 @@ export function GlobalHead(props: GlobalHeadProps) {
 
   return (
     <Head>
-      <meta name='theme-color' content={theme.palette.background.default} key='theme-color' />
+      <meta name='theme-color' content={theme.vars.palette.background.default} key='theme-color' />
       <meta
         name='viewport'
         content='minimum-scale=1, initial-scale=1, width=device-width'

package/LayoutParts/Logo.tsx

@@ -1,5 +1,6 @@
 import type { ImageProps } from '@graphcommerce/image'
 import { Image } from '@graphcommerce/image'
+import { sxx } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import {
   Box,
@@ -66,7 +67,7 @@ export const Logo = forwardRef<HTMLAnchorElement, LogoProps>((props, ref) => {
       component={shouldRedirect ? LogoContainer : 'div'}
       href={shouldRedirect ? href : undefined}
       ref={ref}
-      sx={[...(Array.isArray(sx) ? sx : [sx]), commonLogoStyles]}
+      sx={sxx(sx, commonLogoStyles)}
       className={classes.parent}
     >
       {img}

package/LayoutParts/MenuFab.tsx

@@ -1,4 +1,5 @@
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
+import { sxx } from '@graphcommerce/next-ui'
 import type { FabProps, MenuProps as MenuPropsType, SxProps, Theme } from '@mui/material'
 import { Box, Divider, Fab, ListItem, Menu, styled } from '@mui/material'
 import { m } from 'framer-motion'
@@ -65,12 +66,7 @@ export function MenuFab(props: MenuFabProps) {
   const classes = withState({ scrolled })
 
   return (
-    <Box
-      sx={[
-        { position: 'relative', width: fabIconSize, height: fabIconSize },
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
-    >
+    <Box sx={sxx({ position: 'relative', width: fabIconSize, height: fabIconSize }, sx)}>
       <MotionDiv
         className={classes.wrapper}
         sx={(theme) => ({
@@ -92,20 +88,44 @@ export function MenuFab(props: MenuFabProps) {
             boxShadow: 'none',
             '&:hover, &:focus': {
               boxShadow: 'none',
-              background: theme.palette.text.primary,
+              background: theme.vars.palette.text.primary,
             },
-            background: theme.palette.text.primary,
+            background: theme.vars.palette.text.primary,
             pointerEvents: 'all',
-            color: theme.palette.background.paper,
+            color: theme.vars.palette.background.paper,
           })}
           className={classes.fab}
           {...fabProps}
         >
           {closeIcon ?? (
-            <IconSvg src={iconClose} size='large' sx={{ display: openEl ? 'block' : 'none' }} />
+            <IconSvg
+              src={iconClose}
+              size='large'
+              sx={sxx(
+                openEl
+                  ? {
+                      display: 'block',
+                    }
+                  : {
+                      display: 'none',
+                    },
+              )}
+            />
           )}
           {menuIcon ?? (
-            <IconSvg src={iconMenu} size='large' sx={{ display: openEl ? 'none' : 'block' }} />
+            <IconSvg
+              src={iconMenu}
+              size='large'
+              sx={sxx(
+                openEl
+                  ? {
+                      display: 'none',
+                    }
+                  : {
+                      display: 'block',
+                    },
+              )}
+            />
           )}
         </Fab>
         <MotionDiv
@@ -132,9 +152,9 @@ export function MenuFab(props: MenuFabProps) {
           transitionDuration={{ appear: 175, enter: 175, exit: 175 }}
           PaperProps={{
             sx: (theme) => ({
-              backgroundColor: theme.palette.background.paper,
+              backgroundColor: theme.vars.palette.background.paper,
               backgroundImage: 'unset',
-              color: theme.palette.text.primary,
+              color: theme.vars.palette.text.primary,
               minWidth: responsiveVal(200, 280),
               marginTop: '12px',
               [theme.breakpoints.down('md')]: {
@@ -143,8 +163,10 @@ export function MenuFab(props: MenuFabProps) {
             }),
           }}
           className={classes.menu}
-          MenuListProps={{ dense: true }}
           {...MenuProps}
+          slotProps={{
+            list: { dense: true },
+          }}
         >
           {[
             search ? (

package/LayoutParts/MenuFabItem.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import type { ListItemButtonProps } from '@mui/material'
 import { ListItemButton, ListItemText } from '@mui/material'
 import { useRouter } from 'next/router'
@@ -20,7 +21,7 @@ export function MenuFabItem(props: MenuFabItemProps) {
   return (
     <ListItemButton href={href} component={NextLink} dense selected={active} {...listItemProps}>
       <ListItemText
-        sx={[{ typography: 'h4', lineHeight: 1.1 }, ...(Array.isArray(sx) ? sx : [sx])]}
+        sx={sxx({ typography: 'h4', lineHeight: 1.1 }, sx)}
         disableTypography
         primary={children}
       />

package/LayoutParts/MenuFabSecondaryItem.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { ListItemButton, ListItemIcon, ListItemText } from '@mui/material'
 import { useRouter } from 'next/router'
@@ -34,7 +35,7 @@ export function MenuFabSecondaryItem(props: FabMenuSecondaryItemProps) {
       component={NextLink}
       href={href}
       className={classes.root}
-      sx={[{}, ...(Array.isArray(sx) ? sx : [sx])]}
+      sx={sx}
       dense
       selected={router.asPath.startsWith(href)}
     >
@@ -45,8 +46,10 @@ export function MenuFabSecondaryItem(props: FabMenuSecondaryItemProps) {
       )}
       <ListItemText
         className={classes.icon}
-        primaryTypographyProps={{
-          sx: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' },
+        slotProps={{
+          primary: {
+            sx: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' },
+          },
         }}
       >
         {children}

package/LayoutParts/PlaceholderFab.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import type { FabProps } from '@mui/material'
 import { Fab } from '@mui/material'
 
@@ -7,7 +8,7 @@ export function PlaceholderFab(props: Omit<FabProps, 'children'>) {
     <Fab
       size='responsive'
       {...props}
-      sx={[{ visibility: 'hidden', pointerEvents: 'none' }, ...(Array.isArray(sx) ? sx : [sx])]}
+      sx={sxx({ visibility: 'hidden', pointerEvents: 'none' }, sx)}
     />
   )
 }

package/LayoutParts/StickyBelowHeader.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { Container } from '@mui/material'
 import React from 'react'
@@ -18,7 +19,7 @@ export function StickyBelowHeader(props: StickyBelowHeaderProps) {
       className={classes.root}
       maxWidth={false}
       {...props}
-      sx={[
+      sx={sxx(
         (theme) => ({
           position: 'sticky',
           top: { xs: theme.appShell.headerHeightSm, md: `${theme.page.vertical} !important` },
@@ -28,8 +29,8 @@ export function StickyBelowHeader(props: StickyBelowHeaderProps) {
             pointerEvents: 'auto',
           },
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     />
   )
 }

package/MediaQuery/MediaQuery.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import type { BoxProps, Theme } from '@mui/material'
 import { Box, useTheme } from '@mui/material'
 import type { CSSProperties } from 'react'
@@ -84,10 +85,7 @@ function MediaQueryBase(props: MediaQueryProps) {
     return () => controller.abort()
   }, [matchMedia])
 
-  const sxVal = [
-    { display: 'none', [queryString]: { display } },
-    ...(Array.isArray(sx) ? sx : [sx]),
-  ]
+  const sxVal = sxx({ display: 'none', [queryString]: { display } }, sx)
 
   if (typeof window === 'undefined' || matches) {
     return (

package/Navigation/components/NavigationFab.tsx

@@ -1,4 +1,5 @@
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
+import { sxx } from '@graphcommerce/next-ui'
 import type { FabProps, SxProps, Theme } from '@mui/material'
 import { Box, Fab, styled, useTheme } from '@mui/material'
 import { m } from 'framer-motion'
@@ -49,12 +50,7 @@ export function NavigationFab(props: NavigationFabProps) {
   const classes = withState({ scrolled })
 
   return (
-    <Box
-      sx={[
-        { position: 'relative', width: fabIconSize, height: fabIconSize },
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
-    >
+    <Box sx={sxx({ position: 'relative', width: fabIconSize, height: fabIconSize }, sx)}>
       <MotionDiv
         className={classes.wrapper}
         sx={{
@@ -73,20 +69,44 @@ export function NavigationFab(props: NavigationFabProps) {
             boxShadow: 'none',
             '&:hover, &:focus': {
               boxShadow: 'none',
-              background: theme.palette.text.primary,
+              background: theme.vars.palette.text.primary,
             },
-            background: theme.palette.text.primary,
+            background: theme.vars.palette.text.primary,
             pointerEvents: 'all',
-            color: theme.palette.background.paper,
+            color: theme.vars.palette.background.paper,
           }}
           className={classes.fab}
           {...fabProps}
         >
           {closeIcon ?? (
-            <IconSvg src={iconClose} size='large' sx={{ display: openEl ? 'block' : 'none' }} />
+            <IconSvg
+              src={iconClose}
+              size='large'
+              sx={sxx(
+                openEl
+                  ? {
+                      display: 'block',
+                    }
+                  : {
+                      display: 'none',
+                    },
+              )}
+            />
           )}
           {menuIcon ?? (
-            <IconSvg src={iconMenu} size='large' sx={{ display: openEl ? 'none' : 'block' }} />
+            <IconSvg
+              src={iconMenu}
+              size='large'
+              sx={sxx(
+                openEl
+                  ? {
+                      display: 'none',
+                    }
+                  : {
+                      display: 'block',
+                    },
+              )}
+            />
           )}
         </Fab>
         <MotionDiv

package/Navigation/components/NavigationItem.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
-import { alpha, Box, ListItemButton, styled, useEventCallback } from '@mui/material'
+import { sxx } from '@graphcommerce/next-ui'
+import { Box, ListItemButton, styled, useEventCallback } from '@mui/material'
 import React from 'react'
 import { useMatchMedia } from '../../hooks'
 import { iconChevronRight } from '../../icons'
@@ -89,17 +90,23 @@ export const NavigationItem = React.memo<NavigationItemProps>((props) => {
           href={href}
           className={classes.item}
           role='button'
-          sx={[
+          sx={sxx(
             (theme) => ({
               gridRowStart: row,
               gridColumnStart: column,
               gap: theme.spacings.xxs,
-              display: hideItem ? 'none' : 'flex',
               '&.Mui-disabled': {
                 opacity: 1,
-                background: alpha(theme.palette.action.hover, 0.025),
+                background: theme.alpha(theme.vars.palette.action.hover, 0.025),
               },
             }),
+            hideItem
+              ? {
+                  display: 'none',
+                }
+              : {
+                  display: 'flex',
+                },
             mouseEvent === 'hover'
               ? {
                   '&.Mui-disabled': {
@@ -108,7 +115,7 @@ export const NavigationItem = React.memo<NavigationItemProps>((props) => {
                   },
                 }
               : {},
-          ]}
+          )}
           disabled={isSelected}
           tabIndex={tabIndex}
           onClick={(e) => {
@@ -141,7 +148,6 @@ export const NavigationItem = React.memo<NavigationItemProps>((props) => {
           </Box>
           <IconSvg src={iconChevronRight} sx={{ flexShrink: 0 }} />
         </ListItemButton>
-
         {!skipChildren && (
           <NavigationList
             items={childItems}
@@ -158,7 +164,7 @@ export const NavigationItem = React.memo<NavigationItemProps>((props) => {
     const { name, href } = props
 
     return (
-      <NavigationLI sx={[hideItem && { display: 'none' }]} className={classes.li}>
+      <NavigationLI sx={sxx(hideItem && { display: 'none' })} className={classes.li}>
         <ListItemButton
           component={NextLink}
           prefetch={false}
@@ -190,17 +196,15 @@ export const NavigationItem = React.memo<NavigationItemProps>((props) => {
   if (isNavigationComponent(props)) {
     const { component } = props
     return (
-      <NavigationLI sx={[hideItem && { display: 'none' }]} className={classes.li}>
+      <NavigationLI sx={sxx(hideItem && { display: 'none' })} className={classes.li}>
         <Box sx={{ gridRowStart: row, gridColumnStart: column }} className={classes.item}>
           {component}
         </Box>
       </NavigationLI>
     )
   }
-
   return null
 })
-
 if (process.env.NODE_ENV !== 'production') {
   NavigationItem.displayName = 'NavigationItem'
 }