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

package/Container/Container.tsx

@@ -5,6 +5,7 @@ import type { LiteralUnion } from 'type-fest'
 import { extendableComponent } from '../Styles/extendableComponent'
 import type { ContainerSizingVariant } from '../Theme/useContainerSizing'
 import { useContainerSizing } from '../Theme/useContainerSizing'
+import { sxx } from '../utils/sxx'
 
 type OwnerProps = {
   /** Can be a breakpoint, 'full' or a actual value */
@@ -74,19 +75,18 @@ export const Container = React.forwardRef(
         {...rest}
         ref={ref}
         className={[className, classes.root].filter((v) => !!v).join(' ')}
-        sx={[
+        sx={sxx(
           {
             width: '100%',
             pl: !breakoutLeft ? padding : undefined,
             pr: !breakoutRight ? padding : undefined,
             '&.breakoutLeft': { pl: 'unset' },
             '&.breakoutRight': { pr: 'unset' },
-
             // Nesting containers will not have padding applied.
             '.MuiContainer-root &': { pl: 0, pr: 0 },
           },
-          ...(Array.isArray(sx) ? sx : [sx]),
-        ]}
+          sx,
+        )}
       />
     )
   },

package/Fab/Fab.tsx

@@ -36,7 +36,7 @@ export function Fab(props: FabProps) {
       size={size}
       {...fabProps}
       disabled={disabled}
-      sx={[{ display: 'grid' }, ...(Array.isArray(sx) ? sx : [sx])]}
+      sx={sxx({ display: 'grid' }, sx)}
     >
       <Box sx={{ display: 'flex', placeContent: 'center', gridArea: '1/1' }}>
         <IconSvg src={icon} size='medium' {...slotProps?.icon} />

package/Footer/Footer.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import type { ContainerProps } from '@mui/material'
 import { Box } from '@mui/material'
 import React from 'react'
@@ -37,10 +38,10 @@ export function Footer(props: FooterProps) {
       <Container
         maxWidth={false}
         sizing='shell'
-        sx={[
+        sx={sxx(
           (theme) => ({
             gridTemplateColumns: '5fr 3fr',
-            borderTop: `1px solid ${theme.palette.divider}`,
+            borderTop: `1px solid ${theme.vars.palette.divider}`,
             display: 'grid',
             alignItems: 'center',
             pt: theme.spacings.lg,
@@ -54,7 +55,6 @@ export function Footer(props: FooterProps) {
             `,
             gap: theme.spacings.md,
             '& > *': { maxWidth: 'max-content' },
-
             [theme.breakpoints.up('md')]: {
               gap: theme.spacings.sm,
               gridTemplateAreas: `
@@ -68,8 +68,8 @@ export function Footer(props: FooterProps) {
               justifyContent: 'space-between',
             },
           }),
-          ...(Array.isArray(sx) ? sx : [sx]),
-        ]}
+          sx,
+        )}
         className={classes.root}
         {...containerProps}
       >

package/Form/Form.tsx

@@ -1,5 +1,5 @@
 import type { Theme } from '@mui/material'
-import { darken, lighten, styled } from '@mui/material'
+import { styled } from '@mui/material'
 import { breakpointVal } from '../Styles/breakpointVal'
 
 type FormStyleProps = {
@@ -15,13 +15,13 @@ const styles = ({ theme, contained = false, background }: { theme: Theme } & For
       padding: `${theme.spacings.xxs} 0`,
     },
     background === 'default' && {
-      background:
-        theme.palette.mode === 'light'
-          ? darken(theme.palette.background.default, 0.03)
-          : lighten(theme.palette.background.default, 0.1),
+      background: theme.darken(theme.vars.palette.background.default, 0.03),
+      ...theme.applyStyles('dark', {
+        background: theme.lighten(theme.vars.palette.background.default, 0.1),
+      }),
     },
     background === 'secondary' && {
-      background: theme.palette.secondary.light,
+      background: theme.vars.palette.secondary.light,
     },
     contained && {
       padding: `${theme.spacings.xxs} ${theme.spacings.sm}`,

package/Form/FormDivider.tsx

@@ -1,7 +1,7 @@
 import { styled } from '@mui/material'
 
 export const FormDivider = styled('div', { name: 'FormDivider' })(({ theme }) => ({
-  background: theme.palette.divider,
+  background: theme.vars.palette.divider,
   height: 1,
   width: '100%',
   marginTop: theme.spacings.xxs,

package/Form/InputCheckmark.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import { iconCheckmark } from '../icons'
 import type { IconSvgProps } from '../IconSvg'
 import { IconSvg } from '../IconSvg'
@@ -24,7 +25,7 @@ export function InputCheckmark(props: InputCheckmarkProps) {
     <IconSvg
       src={iconCheckmark}
       className='InputCheckmark'
-      sx={[{ stroke: '#01D26A' }, select && { marginRight: '15px' }]}
+      sx={sxx({ stroke: '#01D26A' }, select && { marginRight: '15px' })}
     />
   )
 }

package/FramerScroller/SidebarGallery.tsx

@@ -11,6 +11,7 @@ import {
 } from '@graphcommerce/framer-scroller'
 import { dvh } from '@graphcommerce/framer-utils'
 import { sidebarGallery } from '@graphcommerce/next-config/config'
+import { sxx } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, Fab, styled, Unstable_TrapFocus as TrapFocus, useTheme } from '@mui/material'
 import { m, useDomEvent, useMotionValue } from 'framer-motion'
@@ -148,50 +149,52 @@ export function SidebarGallery(props: SidebarGalleryProps) {
         disableGutters
         className={classes.row}
         breakoutLeft={variantMd === 'default' && !theme.appShell.containerSizingContent}
-        sx={[
-          { bgcolor: theme.palette.mode === 'light' ? 'background.image' : 'background.paper' },
-          ...(Array.isArray(sx) ? sx : [sx]),
-        ]}
+        sx={sxx(
+          (theme) => ({
+            bgcolor: 'background.paper',
+            ...theme.applyStyles('light', {
+              bgcolor: 'background.image',
+            }),
+          }),
+          sx,
+        )}
       >
         <MotionBox
           layout
           layoutDependency={zoomed}
           className={classes.root}
-          sx={[
-            {
-              willChange: 'transform',
-              display: 'grid',
-              gridTemplate: '"left" "right"',
-              [theme.breakpoints.up('md')]: {
-                '&:not(.variantMdOneColumn)': {
-                  gridTemplate: `"left right" / 1fr ${sidebarSize}`,
-                },
+          sx={(theme) => ({
+            willChange: 'transform',
+            display: 'grid',
+            gridTemplate: '"left" "right"',
+            [theme.breakpoints.up('md')]: {
+              '&:not(.variantMdOneColumn)': {
+                gridTemplate: `"left right" / 1fr ${sidebarSize}`,
               },
-
-              '&.zoomed': {
-                position: 'relative',
-                zIndex: theme.zIndex.modal,
-                marginTop: `calc(${theme.appShell.headerHeightSm} * -1)`,
-                [theme.breakpoints.up('md')]: {
-                  marginTop: `calc(${theme.appShell.headerHeightMd} * -1  - ${theme.spacings.lg})`,
-                  gridTemplateColumns: '1fr auto',
-                },
-                px: 0,
+            },
+            '&.zoomed': {
+              position: 'relative',
+              zIndex: theme.zIndex.modal,
+              marginTop: `calc(${theme.appShell.headerHeightSm} * -1)`,
+              [theme.breakpoints.up('md')]: {
+                marginTop: `calc(${theme.appShell.headerHeightMd} * -1  - ${theme.spacings.lg})`,
+                gridTemplateColumns: '1fr auto',
               },
+              px: 0,
             },
-          ]}
+          })}
         >
           <TrapFocus open={zoomed}>
             <MotionBox
               layout
               layoutDependency={zoomed}
               className={classes.scrollerContainer}
-              sx={[
+              sx={sxx(
                 {
                   gridArea: 'left',
                   willChange: 'transform',
                   height: 0, // https://stackoverflow.com/questions/44770074/css-grid-row-height-safari-bug
-                  backgroundColor: theme.palette.background.image,
+                  backgroundColor: theme.vars.palette.background.image,
                   position: 'relative',
                   paddingTop: `min(${ratio}, ${maxHeight})`,
                   [theme.breakpoints.down('md')]: {
@@ -213,7 +216,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                   marginTop: 0,
                   paddingTop: dvh(100),
                 },
-              ]}
+              )}
               onLayoutAnimationComplete={() => {
                 if (!zoomed) document.body.style.overflow = ''
               }}
@@ -224,7 +227,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                 hideScrollbar
                 onMouseDown={onMouseDownScroller}
                 onMouseUp={onMouseUpScroller}
-                sx={[
+                sx={sxx(
                   {
                     willChange: 'transform',
                     position: 'absolute',
@@ -233,13 +236,19 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                     height: '100%',
                     gridAutoColumns: '100%',
                     gridTemplateRows: '100%',
-                    cursor: disableZoom ? 'auto' : 'zoom-in',
                   },
+                  disableZoom
+                    ? {
+                        cursor: 'auto',
+                      }
+                    : {
+                        cursor: 'zoom-in',
+                      },
                   zoomed && {
                     height: 'var(--client-size-y)',
                     cursor: 'inherit',
                   },
-                ]}
+                )}
               >
                 {images.map((image, idx) => (
                   <MotionImageAspect
@@ -361,7 +370,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
           </TrapFocus>
           <Box
             className={classes.sidebarWrapper}
-            sx={[
+            sx={sxx(
               {
                 width: { xs: '100%', md: sidebarSize },
                 gridArea: 'right',
@@ -381,13 +390,13 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                   } * 2)`,
                 },
               },
-            ]}
+            )}
           >
             <MotionBox
               layout='position'
               layoutDependency={zoomed}
               className={classes.sidebar}
-              sx={{
+              sx={(theme) => ({
                 boxSizing: 'border-box',
                 width: '100%',
                 '&:not(.variantMdOneColumn)': {
@@ -396,7 +405,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                     paddingLeft: theme.spacings.lg,
                   },
                 },
-              }}
+              })}
             >
               {sidebar}
             </MotionBox>

package/FullPageMessage/FullPageMessage.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, Container, Typography } from '@mui/material'
 import React from 'react'
@@ -29,7 +30,7 @@ export function FullPageMessage(props: FullPageMessageProps) {
   return (
     <Box
       className={classes.root}
-      sx={[
+      sx={sxx(
         (theme) => ({
           alignItems: 'center',
           marginTop: theme.spacings.md,
@@ -39,8 +40,8 @@ export function FullPageMessage(props: FullPageMessageProps) {
           marginTop: responsiveVal(50, 250),
           marginBottom: responsiveVal(50, 250),
         },
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       <Container
         maxWidth='md'
@@ -60,7 +61,15 @@ export function FullPageMessage(props: FullPageMessageProps) {
           <Typography variant='h3' gutterBottom>
             {title}
           </Typography>
-          {children && <Box typography='body1'>{children}</Box>}
+          {children && (
+            <Box
+              sx={{
+                typography: 'body1',
+              }}
+            >
+              {children}
+            </Box>
+          )}
         </Box>
 
         <Box className={classes.button} sx={(theme) => ({ marginTop: theme.spacings.sm })}>

package/IconHeader/IconHeader.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 type { IconSvgProps } from '../IconSvg'
@@ -49,7 +50,7 @@ export function IconHeader(props: IconHeaderProps) {
   return (
     <Box
       className={classes.root}
-      sx={[
+      sx={sxx(
         {
           typography: 'subtitle1',
           textAlign: 'center',
@@ -59,19 +60,32 @@ export function IconHeader(props: IconHeaderProps) {
             marginTop: theme.spacings.sm,
             marginBottom: theme.spacings.sm,
           })),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       <Box
         className={`${classes.innerContainer} ${!stayInline ? classes.breakColumnsDesktop : ''}`}
-        sx={[
+        sx={sxx(
           {
-            display: { xs: 'flex', md: stayInline ? 'flex' : 'unset' },
+            display: {
+              xs: 'flex',
+            },
             alignItems: 'center',
             justifyContent: 'center',
             gap: 4,
           },
-        ]}
+          stayInline
+            ? {
+                display: {
+                  md: 'flex',
+                },
+              }
+            : {
+                display: {
+                  md: 'unset',
+                },
+              },
+        )}
       >
         <IconSvg src={src} />
         <Typography
@@ -80,14 +94,14 @@ export function IconHeader(props: IconHeaderProps) {
           className={`${ellipsis ? classes.ellipsis : ''} ${
             size === 'medium' ? classes.mediumFontWeight : ''
           }`}
-          sx={[
+          sx={sxx(
             ellipsis && {
               whiteSpace: 'nowrap',
               overflow: 'hidden',
               textOverflow: 'ellipsis',
             },
             size === 'medium' && { fontWeight: 'bold' },
-          ]}
+          )}
         >
           {children}
         </Typography>

package/IconSvg/IconSvg.tsx

@@ -18,7 +18,7 @@ type StyleProps = {
 const { withState } = extendableComponent<StyleProps, typeof name, typeof parts>(name, parts)
 
 /** Expose the component to be exendable in your theme.components */
-declare module '@mui/material/styles/components' {
+declare module '@mui/material/styles' {
   interface Components {
     IconSvg?: ExtendableComponent<StyleProps> & {
       /**

package/Layout/components/LayoutHeader.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { Box } from '@mui/material'
 import React from 'react'
@@ -111,12 +112,10 @@ export const LayoutHeader = React.memo<LayoutHeaderProps>((props) => {
   return (
     <Box
       className={classes.root}
-      sx={[
+      sx={sxx(
         (theme) => ({
-          zIndex: children ? theme.zIndex.appBar : theme.zIndex.appBar - 2,
           position: 'sticky',
           pointerEvents: 'none',
-
           [theme.breakpoints.down('md')]: {
             top: 0,
             marginTop: `calc(${theme.appShell.headerHeightSm} * -1)`,
@@ -137,7 +136,6 @@ export const LayoutHeader = React.memo<LayoutHeaderProps>((props) => {
               display: 'none',
             },
           },
-
           [theme.breakpoints.up('md')]: {
             top: 0,
             height: theme.appShell.appBarHeightMd,
@@ -166,8 +164,11 @@ export const LayoutHeader = React.memo<LayoutHeaderProps>((props) => {
             },
           },
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        children
+          ? (theme) => ({ zIndex: theme.zIndex.appBar })
+          : (theme) => ({ zIndex: theme.zIndex.appBar - 2 }),
+        sx,
+      )}
     >
       <LayoutHeaderContent
         size={size}

package/Layout/components/LayoutHeaderBack.tsx

@@ -77,7 +77,6 @@ export function LayoutHeaderBack(props: BackProps) {
       </LinkOrButton>
     )
   }
-
   if (up?.href && up.href !== path)
     return (
       <LinkOrButton
@@ -93,6 +92,5 @@ export function LayoutHeaderBack(props: BackProps) {
         </Box>
       </LinkOrButton>
     )
-
   return null
 }

package/Layout/components/LayoutHeaderContent.tsx

@@ -1,4 +1,5 @@
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
+import { sxx } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, styled } from '@mui/material'
 import type { LayoutProps } from 'framer-motion'
@@ -65,14 +66,13 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
     <>
       <Box
         className={classes.bg}
-        sx={[
+        sx={sxx(
           (theme) => ({
             position: 'absolute',
             left: 0,
             width: '100%',
-            backgroundColor: theme.palette.background[bgColor],
+            backgroundColor: theme.vars.palette.background[bgColor],
             boxShadow: theme.shadows[1],
-
             height: theme.appShell.headerHeightSm,
             [theme.breakpoints.up('md')]: {
               height: theme.appShell.appBarHeightMd,
@@ -80,9 +80,6 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
             '&.sizeSmall': {
               height: theme.appShell.headerHeightSm,
             },
-            borderTopLeftRadius: switchPoint <= 0 ? theme.shape.borderRadius * 3 : 0,
-            borderTopRightRadius: switchPoint <= 0 ? theme.shape.borderRadius * 3 : 0,
-
             '&.floatingSm': {
               [theme.breakpoints.down('md')]: {
                 display: 'none',
@@ -93,26 +90,38 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
                 display: 'none',
               },
             },
-
             opacity: 0,
             transition: 'opacity 150ms',
             '&.scrolled': {
               opacity: 1,
             },
-
             '&.divider': {
               boxShadow: 'unset',
             },
           }),
-          ...(Array.isArray(sxBg) ? sxBg : [sxBg]),
-        ]}
+          switchPoint <= 0
+            ? (theme) => ({
+                borderTopLeftRadius: theme.shape.borderRadius * 3,
+              })
+            : {
+                borderTopLeftRadius: 0,
+              },
+          switchPoint <= 0
+            ? (theme) => ({
+                borderTopRightRadius: theme.shape.borderRadius * 3,
+              })
+            : {
+                borderTopRightRadius: 0,
+              },
+          sxBg,
+        )}
       />
       <Container
         maxWidth={false}
         className={classes.content}
         sizing='shell'
         ref={ref}
-        sx={[
+        sx={sxx(
           (theme) => ({
             position: 'absolute',
             inset: 0,
@@ -133,7 +142,6 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
                 px: 2,
               },
             },
-
             '&.floatingSm': {
               [theme.breakpoints.down('md')]: {
                 background: 'none',
@@ -147,8 +155,8 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
               },
             },
           }),
-          ...(Array.isArray(sx) ? sx : [sx]),
-        ]}
+          sx,
+        )}
       >
         {left && (
           <Box
@@ -177,20 +185,17 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
             justifyContent: 'start',
             overflow: 'hidden',
             justifySelf: 'center',
-
             transition: 'opacity 150ms',
             opacity: 0,
             '&.scrolled': {
               opacity: 1,
               '& > *': { pointerEvents: 'all' },
             },
-
             '&.floatingSm': {
               [theme.breakpoints.down('md')]: {
                 display: 'none',
               },
             },
-
             '&.floatingMd': {
               [theme.breakpoints.up('md')]: {
                 display: 'none',
@@ -228,7 +233,6 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
               bottom: 0,
               left: 0,
               right: 0,
-
               '&.floatingSm': {
                 [theme.breakpoints.down('md')]: {
                   display: 'none',

package/Layout/components/LayoutTitle.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import type { SxProps, Theme, TypographyProps } from '@mui/material'
 import { Box, Typography } from '@mui/material'
 import React from 'react'
@@ -36,7 +37,7 @@ export const LayoutTitle = React.forwardRef<HTMLDivElement, TitleProps>((props,
   return (
     <Box
       className={classes.root}
-      sx={[
+      sx={sxx(
         (theme) => ({
           display: 'flex',
           alignItems: 'center',
@@ -63,8 +64,8 @@ export const LayoutTitle = React.forwardRef<HTMLDivElement, TitleProps>((props,
             marginBottom: theme.spacings.xl,
           },
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       {icon && (
         <IconSvg src={icon} size={size === 'small' ? 'large' : 'xl'} className={classes.icon} />

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,
+      )}
     />
   )
 }