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

package/RenderType/RenderType.tsx

@@ -1,4 +1,5 @@
-import React from 'react'
+import { createElement } from 'react'
+import type React from 'react'
 
 /** To make renderers customizable we need to be able to provide renders for all types */
 type TypeObject = { __typename: string; [index: string]: unknown }
@@ -24,6 +25,10 @@ export type TypeRenderer<
   TAdd extends Record<string, unknown> = Record<string, unknown>,
 > = TypeRenderMap<T, T['__typename'], TAdd>
 
+function FallbackRenderer({ __typename }: { __typename: string }) {
+  return <>{process.env.NODE_ENV !== 'production' ? __typename : ''}</>
+}
+
 /**
  * A simple array with renderers but with strict typing that validates of the provided Renderer is
  * actually able to render the Type
@@ -35,11 +40,9 @@ export function RenderType<
   A extends Record<string, unknown> = Record<string, unknown>,
 >(props: { renderer: TypeRenderer<T, A> } & FilterTypeByTypename<T, T['__typename']> & A) {
   const { renderer, __typename, ...typeItemProps } = props
-  const TypeItem: TypeRenderMethod<typeof typeItemProps> = renderer[__typename]
-    ? renderer[__typename]
-    : () => <>{process.env.NODE_ENV !== 'production' ? __typename : ''}</>
+  const TypeItem: TypeRenderMethod<typeof typeItemProps> = renderer[__typename] ?? FallbackRenderer
 
-  return <TypeItem {...typeItemProps} __typename={__typename} />
+  return createElement(TypeItem, { ...typeItemProps, __typename })
 }
 
 /** @public */

package/Row/ButtonLinkList/ButtonLinkList.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 React from 'react'
@@ -29,21 +30,19 @@ export function ButtonLinkList(props: ButtonLinkListProps) {
   return (
     <Row maxWidth='820px' className={classes.root} sx={sx}>
       <Box
-        sx={[
-          (theme) => ({
-            position: 'relative',
-            '&:focus': {
-              outline: 'none',
-            },
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            marginTop: theme.spacings.sm,
-            marginBottom: theme.spacings.xxs,
-            paddingBottom: theme.spacings.xxs,
-            borderBottom: `1px solid ${theme.palette.divider}`,
-          }),
-        ]}
+        sx={sxx((theme) => ({
+          position: 'relative',
+          '&:focus': {
+            outline: 'none',
+          },
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginTop: theme.spacings.sm,
+          marginBottom: theme.spacings.xxs,
+          paddingBottom: theme.spacings.xxs,
+          borderBottom: `1px solid ${theme.vars.palette.divider}`,
+        }))}
       >
         <Typography variant='overline' color='textSecondary' component={component}>
           {title}

package/Row/ButtonLinkList/ButtonLinkListItem.tsx

@@ -24,7 +24,7 @@ export function ButtonLinkListItem(props: ButtonLinkListItemProps) {
       href={url}
       sx={(theme) => ({
         padding: `${theme.spacings.xxs} 0`,
-        borderBottom: `1px solid ${theme.palette.divider}`,
+        borderBottom: `1px solid ${theme.vars.palette.divider}`,
         justifyContent: 'space-between',
       })}
       {...listItemButtonProps}

package/Row/ColumnThree/ColumnThree.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 ColumnThree(props: ColumnThreeProps) {
     <Row
       className={classes.root}
       {...containerProps}
-      sx={[
+      sx={sxx(
         (theme) => ({
           display: 'grid',
           gridColumnGap: theme.spacings.md,
@@ -55,8 +56,8 @@ export function ColumnThree(props: ColumnThreeProps) {
             gridTemplateAreas: '"one two three"',
           },
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       <Box className={classes.colOne} sx={{ gridArea: 'one' }}>
         {colOneContent}

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,