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

package/Row/ColumnTwo/ColumnTwo.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'
@@ -21,7 +22,7 @@ export function ColumnTwo(props: ColumnTwoProps) {
       maxWidth='lg'
       {...containerProps}
       className={classes.root}
-      sx={[
+      sx={sxx(
         (theme) => ({
           gridColumnGap: theme.spacings.md,
           gridRowGap: theme.spacings.lg,
@@ -33,13 +34,23 @@ export function ColumnTwo(props: ColumnTwoProps) {
             gridTemplateAreas: '"one two"',
           },
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
-      <Box className={classes.colOne} gridArea='one'>
+      <Box
+        className={classes.colOne}
+        sx={{
+          gridArea: 'one',
+        }}
+      >
         {colOneContent}
       </Box>
-      <Box className={classes.colTwo} gridArea='two'>
+      <Box
+        className={classes.colTwo}
+        sx={{
+          gridArea: 'two',
+        }}
+      >
         {colTwoContent}
       </Box>
     </Row>

package/Row/ColumnTwoSpread/ColumnTwoSpread.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import type { ColumnTwoProps } from '../ColumnTwo/ColumnTwo'
 import { ColumnTwo } from '../ColumnTwo/ColumnTwo'
 
@@ -12,11 +13,10 @@ export function ColumnTwoSpread(props: ColumnTwoSpreadProps) {
     <ColumnTwo
       {...colProps}
       className='ColumnTwoSpread'
-      sx={[
+      sx={sxx(
         (theme) => ({
           [theme.breakpoints.up('md')]: {
             gridTemplateColumns: '1fr 1fr 1fr',
-            gridTemplateAreas: nodeLength ? '"one one two"' : '"one two two"',
             '& h2, & h3': {
               '&:empty': {
                 display: 'block',
@@ -27,8 +27,19 @@ export function ColumnTwoSpread(props: ColumnTwoSpreadProps) {
           gridTemplateColumns: '1fr',
           gridTemplateAreas: '"one" "two"',
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        nodeLength
+          ? (theme) => ({
+              [theme.breakpoints.up('md')]: {
+                gridTemplateAreas: '"one one two"',
+              },
+            })
+          : (theme) => ({
+              [theme.breakpoints.up('md')]: {
+                gridTemplateAreas: '"one two two"',
+              },
+            }),
+        sx,
+      )}
     />
   )
 }

package/Row/ColumnTwoWithTop/ColumnTwoWithTop.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'
@@ -21,7 +22,7 @@ export function ColumnTwoWithTop(props: ColumnTwoWithTopProps) {
     <Row
       maxWidth='lg'
       className={classes.root}
-      sx={[
+      sx={sxx(
         (theme) => ({
           display: 'grid',
           gap: `${theme.spacings.lg} 0`,
@@ -32,17 +33,32 @@ export function ColumnTwoWithTop(props: ColumnTwoWithTopProps) {
             gap: `${theme.spacings.sm} ${theme.spacings.xxl}`,
           },
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
       {...containerProps}
     >
-      <Box className={classes.colOne} gridArea='top'>
+      <Box
+        className={classes.colOne}
+        sx={{
+          gridArea: 'top',
+        }}
+      >
         {top}
       </Box>
-      <Box className={classes.colOne} gridArea='left'>
+      <Box
+        className={classes.colOne}
+        sx={{
+          gridArea: 'left',
+        }}
+      >
         {left}
       </Box>
-      <Box className={classes.colTwo} gridArea='right'>
+      <Box
+        className={classes.colTwo}
+        sx={{
+          gridArea: 'right',
+        }}
+      >
         {right}
       </Box>
     </Row>

package/Row/ContentLinks/ContentLinks.tsx

@@ -1,4 +1,5 @@
 import { Scroller, ScrollerProvider } from '@graphcommerce/framer-scroller'
+import { sxx } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { Container, Typography } from '@mui/material'
 import React from 'react'
@@ -21,12 +22,12 @@ export function ContentLinks(props: ContentLinksProps) {
     <Container
       className={classes.root}
       maxWidth={false}
-      sx={[
+      sx={sxx(
         (theme) => ({
           marginBottom: `${theme.spacings.md}`,
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       <ScrollerProvider scrollSnapAlign='none'>
         <Scroller

package/Row/HeroBanner/HeroBanner.tsx

@@ -1,4 +1,5 @@
 import { clientSize } from '@graphcommerce/framer-utils'
+import { sxx } from '@graphcommerce/next-ui'
 import type { ContainerProps, SxProps, Theme } from '@mui/material'
 import { Box, styled } from '@mui/material'
 import { m, useTransform } from 'framer-motion'
@@ -28,12 +29,7 @@ export function HeroBanner(props: HeroBannerProps) {
   )
 
   return (
-    <Row
-      maxWidth={false}
-      {...containerProps}
-      className={classes.root}
-      sx={[{}, ...(Array.isArray(sx) ? sx : [sx])]}
-    >
+    <Row maxWidth={false} {...containerProps} className={classes.root} sx={sx}>
       <Box
         className={classes.wrapper}
         sx={(theme) => ({
@@ -53,7 +49,7 @@ export function HeroBanner(props: HeroBannerProps) {
             alignContent: 'center',
             textAlign: 'center',
             p: theme.spacings.md,
-            color: theme.palette.secondary.contrastText,
+            color: theme.vars.palette.secondary.contrastText,
           })}
         >
           {children}

package/Row/IconBlocks/IconBlock.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import type { ButtonProps, SxProps, Theme } from '@mui/material'
 import { Box, Button, Typography } from '@mui/material'
 import React from 'react'
@@ -27,7 +28,7 @@ export const IconBlock = React.forwardRef<HTMLAnchorElement & HTMLButtonElement,
         color='primary'
         className={classes.block}
         {...buttonProps}
-        sx={[
+        sx={sxx(
           (theme) => ({
             padding: `${theme.spacings.sm}`,
             textAlign: 'center',
@@ -38,8 +39,8 @@ export const IconBlock = React.forwardRef<HTMLAnchorElement & HTMLButtonElement,
               gap: `${theme.spacings.xxs}`,
             },
           }),
-          ...(Array.isArray(sx) ? sx : [sx]),
-        ]}
+          sx,
+        )}
       >
         <Box>
           {icon}

package/Row/IconBlocks/IconBlocks.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'
@@ -19,7 +20,7 @@ export function IconBlocks(props: IconBlocksProps) {
   const { title, children, sx = [] } = props
 
   return (
-    <Row maxWidth='820px' className={classes.container} sx={[...(Array.isArray(sx) ? sx : [sx])]}>
+    <Row maxWidth='md' className={classes.container} sx={sxx({ maxWidth: 820 }, sx)}>
       <Box className={classes.wrapper} sx={(theme) => ({ paddingTop: `${theme.spacings.lg}` })}>
         <Box
           className={classes.title}

package/Row/ImageText/ImageText.tsx

@@ -24,10 +24,7 @@ export function ImageText(props: ImageTextProps) {
         className={classes.wrapper}
         sx={(theme) => ({
           display: 'grid',
-          background:
-            theme.palette.mode === 'light'
-              ? theme.palette.background.image
-              : theme.palette.background.paper,
+          background: theme.vars.palette.background.paper,
           justifyItems: 'center',
           columnGap: theme.spacings.lg,
           marginTop: theme.spacings.lg,
@@ -44,6 +41,9 @@ export function ImageText(props: ImageTextProps) {
             theme.shape.borderRadius * 3,
             theme.breakpoints.values,
           ),
+          ...theme.applyStyles('light', {
+            background: theme.vars.palette.background.image,
+          }),
         })}
       >
         <Box
@@ -70,7 +70,7 @@ export function ImageText(props: ImageTextProps) {
           className={classes.copy}
           sx={(theme) => ({
             marginTop: theme.spacings.lg,
-            color: theme.palette.text.primary,
+            color: theme.vars.palette.text.primary,
             maxWidth: '80%',
             display: 'grid',
             alignContent: 'center',

package/Row/ImageTextBoxed/ImageTextBoxed.tsx

@@ -25,7 +25,7 @@ export function ImageTextBoxed(props: ImageTextBoxedProps) {
         className={classes.wrapper}
         sx={(theme) => ({
           display: 'grid',
-          border: `1px solid ${theme.palette.divider}`,
+          border: `1px solid ${theme.vars.palette.divider}`,
           justifyItems: 'center',
           columnGap: `${theme.spacings.lg}`,
           padding: 0,
@@ -47,7 +47,7 @@ export function ImageTextBoxed(props: ImageTextBoxedProps) {
           className={classes.copy}
           sx={(theme) => ({
             padding: `${theme.spacings.lg} 0`,
-            color: theme.palette.text.primary,
+            color: theme.vars.palette.text.primary,
             maxWidth: '80%',
             display: 'grid',
             alignContent: 'center',

package/Row/ParagraphWithSidebarSlide/ParagraphWithSidebarSlide.tsx

@@ -59,7 +59,7 @@ export function ParagraphWithSidebarSlide(props: ParagraphWithSidebarSlideProps)
           <Box
             className={classes.copy}
             sx={(theme) => ({
-              color: theme.palette.secondary.contrastText,
+              color: theme.vars.palette.secondary.contrastText,
               display: 'grid',
               zIndex: 1,
               justifyItems: 'start',

package/Row/RowLinks/variant/VariantImageLabelSwiper.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import type { RowLinksProps } from '../RowLinks'
 import { RowLinks } from '../RowLinks'
 
@@ -7,7 +8,7 @@ export function VariantImageLabelSwiper(props: RowLinksProps) {
   return (
     <RowLinks
       {...rowLinksProps}
-      sx={[
+      sx={sxx(
         {
           // '& .Scroller-root': {
           //   alignItems: 'start',
@@ -20,8 +21,8 @@ export function VariantImageLabelSwiper(props: RowLinksProps) {
             textTransform: 'uppercase',
           },
         },
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     />
   )
 }

package/Row/RowLinks/variant/VariantInline.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import type { RowLinksProps } from '../RowLinks'
 import { RowLinks } from '../RowLinks'
 
@@ -8,10 +9,7 @@ export function VariantInline(props: RowLinksProps) {
     <RowLinks
       inlineTitle={inlineTitle}
       {...rowLinksProps}
-      sx={[
-        (theme) => ({ '& .RowLinks-scrollerWrapper': { my: theme.spacings.md } }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+      sx={sxx((theme) => ({ '& .RowLinks-scrollerWrapper': { my: theme.spacings.md } }), sx)}
     />
   )
 }

package/Row/RowLinks/variant/VariantLogoSwiper.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import type { RowLinksProps } from '../RowLinks'
 import { RowLinks } from '../RowLinks'
 
@@ -7,7 +8,7 @@ export function VariantLogoSwiper(props: RowLinksProps) {
   return (
     <RowLinks
       {...rowLinksProps}
-      sx={[
+      sx={sxx(
         (theme) => ({
           '& .RowLinks-title': {
             display: 'none',
@@ -19,8 +20,8 @@ export function VariantLogoSwiper(props: RowLinksProps) {
             gap: theme.spacings.xxl,
           },
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     />
   )
 }

package/Row/RowLinks/variant/VariantUsps.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import type { RowLinksProps } from '../RowLinks'
 import { RowLinks } from '../RowLinks'
 
@@ -8,7 +9,7 @@ export function VariantUsps(props: RowLinksProps) {
     <RowLinks
       inlineTitle={inlineTitle}
       {...rowLinksProps}
-      sx={[
+      sx={sxx(
         (theme) => ({
           '& .RowLinks-title': {
             display: 'none',
@@ -20,8 +21,8 @@ export function VariantUsps(props: RowLinksProps) {
             gap: theme.spacings.lg,
           },
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     />
   )
 }

package/Row/SpecialBanner/SpecialBanner.tsx

@@ -27,7 +27,7 @@ export function SpecialBanner(props: SpecialBannerProps) {
         disableGutters
         sx={(theme) => ({
           display: 'grid',
-          background: theme.palette.background.paper,
+          background: theme.vars.palette.background.paper,
           justifyItems: 'center',
           columnGap: `${theme.spacings.lg}`,
           paddingTop: theme.spacings.lg,
@@ -87,7 +87,7 @@ export function SpecialBanner(props: SpecialBannerProps) {
         <Box
           className={classes.copy}
           sx={(theme) => ({
-            color: theme.palette.text.primary,
+            color: theme.vars.palette.text.primary,
             maxWidth: '70%',
             display: 'grid',
             alignContent: 'center',

package/SectionContainer/SectionContainer.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import { Box } from '@mui/material'
 import type { SectionHeaderProps } from '../SectionHeader/SectionHeader'
 import { SectionHeader } from '../SectionHeader/SectionHeader'
@@ -18,19 +19,19 @@ export function SectionContainer(props: SectionContainerProps) {
   return (
     <Box
       className={`${classes.root} ${className ?? ''}`}
-      sx={[
+      sx={sxx(
         (theme) => ({
           '&.borderBottom': {
-            borderBottom: `1px solid ${theme.palette.divider}`,
+            borderBottom: `1px solid ${theme.vars.palette.divider}`,
           },
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       <SectionHeader
         {...sectionHeaderProps}
         sx={(theme) => ({
-          borderBottom: `1px solid ${theme.palette.divider}`,
+          borderBottom: `1px solid ${theme.vars.palette.divider}`,
           paddingBottom: theme.spacings.xxs,
           marginBottom: theme.spacings.xxs,
         })}

package/SectionHeader/SectionHeader.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'
@@ -32,7 +33,7 @@ export function SectionHeader(props: SectionHeaderProps) {
   return (
     <Box
       className={classes.root}
-      sx={[
+      sx={sxx(
         (theme) => ({
           position: 'relative',
           '&:focus': {
@@ -49,8 +50,8 @@ export function SectionHeader(props: SectionHeaderProps) {
             paddingLeft: theme.spacings.xxs,
             paddingRight: theme.spacings.xxs,
           })),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       <Typography
         className={classes.left}

package/Separator/Separator.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import type { TypographyProps } from '@mui/material'
 import { Box, Typography } from '@mui/material'
 import React from 'react'
@@ -17,13 +18,13 @@ export function Separator(props: DividedLinksProps) {
   return (
     <Box
       className={classes.root}
-      sx={[
+      sx={sxx(
         (theme) => ({
           display: 'inline',
           padding: `0 ${theme.spacings.xxs} 0 ${theme.spacings.xxs}`,
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       {icon ?? (
         <Typography component='span' variant='body1' color={color}>

package/SkipLink/SkipLink.tsx

@@ -24,8 +24,8 @@ export function SkipLink() {
         zIndex: '-1',
         marginLeft: theme.page.horizontal,
         padding: theme.spacings.xxs,
-        backgroundColor: theme.palette.background.paper,
-        border: theme.palette.text.primary,
+        backgroundColor: theme.vars.palette.background.paper,
+        border: theme.vars.palette.text.primary,
         borderRadius: theme.shape.borderRadius,
         '&:focus': {
           zIndex: 9999,

package/Snackbar/MessageSnackbarImpl.tsx

@@ -1,6 +1,7 @@
+import { sxx } from '@graphcommerce/next-ui'
 import { t } from '@lingui/core/macro'
 import type { SnackbarProps, SxProps, Theme } from '@mui/material'
-import { Box, Fab, lighten, Portal, Snackbar, SnackbarContent } from '@mui/material'
+import { Box, Fab, Portal, Snackbar, SnackbarContent } from '@mui/material'
 import React, { useEffect, useState } from 'react'
 import { iconCheckmark, iconClose, iconSadFace } from '../icons'
 import iconInfo from '../icons/info.svg'
@@ -108,13 +109,13 @@ export default function MessageSnackbarImpl(props: MessageSnackbarProps) {
         open={showSnackbar}
         autoHideDuration={autoHide ? 5000 : null}
         className={classes.root}
-        sx={[
+        sx={sxx(
           {
             pointerEvents: 'none',
             '& > *': { pointerEvents: 'auto' },
           },
-          ...(Array.isArray(sx) ? sx : [sx]),
-        ]}
+          sx,
+        )}
         onClose={hideSnackbar}
       >
         <SnackbarContent
@@ -122,8 +123,8 @@ export default function MessageSnackbarImpl(props: MessageSnackbarProps) {
           className={classes.content}
           sx={(theme) => ({
             '&.variantPill': {
-              backgroundColor: theme.palette.background.paper,
-              color: theme.palette.text.primary,
+              backgroundColor: theme.vars.palette.background.paper,
+              color: theme.vars.palette.text.primary,
               [theme.breakpoints.up('md')]: {
                 ...breakpointVal(
                   'borderRadius',
@@ -154,7 +155,6 @@ export default function MessageSnackbarImpl(props: MessageSnackbarProps) {
                 gridArea: 'children',
               },
             },
-
             '&.disableIcon .MuiSnackbarContent-message': {
               gridTemplate: {
                 xs: `"children close"
@@ -180,10 +180,22 @@ export default function MessageSnackbarImpl(props: MessageSnackbarProps) {
           message={
             <>
               {!disableIcon && <IconSvg src={icon2} size='large' />}
-              <Box gridArea='children'>{children}</Box>
+              <Box
+                sx={{
+                  gridArea: 'children',
+                }}
+              >
+                {children}
+              </Box>
               {/* </Box> */}
               {action && (
-                <Box className={classes.actionButton} onClick={hideSnackbar} gridArea='action'>
+                <Box
+                  className={classes.actionButton}
+                  onClick={hideSnackbar}
+                  sx={{
+                    gridArea: 'action',
+                  }}
+                >
                   {action}
                 </Box>
               )}
@@ -196,7 +208,7 @@ export default function MessageSnackbarImpl(props: MessageSnackbarProps) {
                   onMouseDown={preventAnimationBubble}
                   onTouchStart={preventAnimationBubble}
                   sx={(theme) => ({
-                    backgroundColor: lighten(theme.palette.background.paper, 0.1),
+                    backgroundColor: theme.lighten(theme.vars.palette.background.paper, 0.1),
                   })}
                 >
                   <IconSvg src={iconClose} />

package/StarRatingField/StarRatingField.tsx

@@ -27,7 +27,7 @@ export function StarRatingField(props: StarRatingFieldProps) {
           src={iconStar}
           size='large'
           className={classes.starFull}
-          sx={(theme) => ({ fill: theme.palette.divider, stroke: 'none', margin: '0 3px' })}
+          sx={(theme) => ({ fill: theme.vars.palette.divider, stroke: 'none', margin: '0 3px' })}
         />
       }
       icon={

package/Stepper/Stepper.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { Box } from '@mui/material'
 import { extendableComponent } from '../Styles'
@@ -18,19 +19,19 @@ export function Stepper(props: StepperProps) {
   return (
     <Box
       className={classes.root}
-      sx={[
+      sx={sxx(
         (theme) => ({
           marginTop: '-2px',
           display: 'grid',
           gridAutoFlow: 'column',
           gap: theme.spacings.xxs,
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       {[...Array(steps).keys()].map((step: number) => (
         <Box
-          sx={[
+          sx={sxx(
             {
               height: 2,
               bgcolor: 'divider',
@@ -38,7 +39,7 @@ export function Stepper(props: StepperProps) {
             currentStep - 1 >= step && {
               bgcolor: 'secondary.main',
             },
-          ]}
+          )}
           className={`${classes.step} ${currentStep - 1 >= step ? classes.activeStep : ''}`}
           key={step}
         />

package/Styles/withTheme.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { ThemeProvider } from '@mui/material'
 import React from 'react'
@@ -49,14 +50,14 @@ export function withTheme<T>(
       <ThemeProvider theme={theme}>
         <Component
           {...data}
-          sx={[
+          sx={sxx(
             {
               typography: 'body1',
-              color: theme.palette.text.primary,
-              backgroundColor: theme.palette.background.default,
+              color: theme.vars.palette.text.primary,
+              backgroundColor: theme.vars.palette.background.default,
             },
-            ...(Array.isArray(sx) ? sx : [sx]),
-          ]}
+            sx,
+          )}
         />
       </ThemeProvider>
     )

package/Tabs/TabItem.tsx

@@ -1,5 +1,5 @@
 import { Box, ButtonBase, type SxProps, type Theme } from '@mui/material'
-import { alpha, useTheme } from '@mui/material/styles'
+import { useTheme } from '@mui/material/styles'
 import { forwardRef } from 'react'
 import { extendableComponent } from '../Styles/extendableComponent'
 import { responsiveVal } from '../Styles/responsiveVal'
@@ -46,7 +46,7 @@ export const TabItem = forwardRef<HTMLButtonElement, TabItemProps>((props, ref)
     sx,
     disableRipple = true,
     className,
-    color = (theme) => theme.palette.background.default,
+    color = (theme) => theme.vars.palette.background.default,
     variant = 'chrome',
     ...other
   } = props
@@ -74,12 +74,11 @@ export const TabItem = forwardRef<HTMLButtonElement, TabItemProps>((props, ref)
           pb: spacing,
           mx: `calc(${spacing} / 2)`,
           transition: 'background-color 0.2s ease-in-out',
-
           '&:hover:not(.selected) .TabItem-content': {
-            bgcolor: alpha(color(theme), 0.5),
+            bgcolor: theme.alpha(color(theme), 0.5),
           },
           '&:focus:not(.selected) .TabItem-content': {
-            bgcolor: alpha(color(theme), 0.5),
+            bgcolor: theme.alpha(color(theme), 0.5),
           },
           '&::before': {
             opacity: 0,