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

package/TextInputNumber/TextInputNumber.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import { t } from '@lingui/core/macro'
 import type { IconButtonProps, SxProps, TextFieldProps, Theme } from '@mui/material'
 import {
@@ -95,7 +96,7 @@ export function TextInputNumber(props: TextInputNumberProps) {
       variant={variant}
       inputRef={forkRef}
       className={`${textFieldProps.className ?? ''} ${classes.quantity}`}
-      sx={[
+      sx={sxx(
         {
           width: responsiveVal(90, 120),
         },
@@ -117,61 +118,86 @@ export function TextInputNumber(props: TextInputNumberProps) {
             display: 'none',
           },
         },
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
       autoComplete='off'
-      InputProps={{
-        ...textFieldProps.InputProps,
-        startAdornment: (
-          <Box>
-            <Fab
-              aria-label={t`Decrease`}
-              size='smaller'
-              sx={{ boxShadow: variant === 'standard' ? 4 : 0, minHeight: '30px' }}
-              onPointerDown={() => setDirection('down')}
-              onPointerUp={stop}
-              tabIndex={-1}
-              {...DownProps}
-              className={`${classes.button} ${DownProps.className ?? ''}`}
-            >
-              {DownProps.children ?? <IconSvg src={iconMin} size='small' />}
-            </Fab>
-          </Box>
-        ),
-        endAdornment: (
-          <Box>
-            <Fab
-              aria-label={t`Increase`}
-              size='smaller'
-              sx={{ boxShadow: variant === 'standard' ? 4 : 0, minHeight: '30px' }}
-              onPointerDown={() => setDirection('up')}
-              onPointerUp={() => setDirection(null)}
-              tabIndex={-1}
-              {...UpProps}
-              className={`${classes.button} ${UpProps.className ?? ''}`}
-            >
-              {UpProps.children ?? <IconSvg src={iconPlus} size='small' />}
-            </Fab>
-          </Box>
-        ),
-      }}
       onChange={(e: ChangeEvent<HTMLInputElement>) => {
         if (textFieldProps.onChange) textFieldProps.onChange(e)
         updateDisabled(e.target)
       }}
-      inputProps={{
-        'aria-label': t`Number`,
-        ...inputProps,
-        sx: [
-          {
-            typography: 'body1',
-            textAlign: 'center',
-            '&::-webkit-inner-spin-button,&::-webkit-outer-spin-button': {
-              appearance: 'none',
+      slotProps={{
+        input: {
+          ...textFieldProps.InputProps,
+          startAdornment: (
+            <Box>
+              <Fab
+                aria-label={t`Decrease`}
+                size='smaller'
+                sx={sxx(
+                  {
+                    minHeight: '30px',
+                  },
+                  variant === 'standard'
+                    ? {
+                        boxShadow: 4,
+                      }
+                    : {
+                        boxShadow: 0,
+                      },
+                )}
+                onPointerDown={() => setDirection('down')}
+                onPointerUp={stop}
+                tabIndex={-1}
+                {...DownProps}
+                className={`${classes.button} ${DownProps.className ?? ''}`}
+              >
+                {DownProps.children ?? <IconSvg src={iconMin} size='small' />}
+              </Fab>
+            </Box>
+          ),
+          endAdornment: (
+            <Box>
+              <Fab
+                aria-label={t`Increase`}
+                size='smaller'
+                sx={sxx(
+                  {
+                    minHeight: '30px',
+                  },
+                  variant === 'standard'
+                    ? {
+                        boxShadow: 4,
+                      }
+                    : {
+                        boxShadow: 0,
+                      },
+                )}
+                onPointerDown={() => setDirection('up')}
+                onPointerUp={() => setDirection(null)}
+                tabIndex={-1}
+                {...UpProps}
+                className={`${classes.button} ${UpProps.className ?? ''}`}
+              >
+                {UpProps.children ?? <IconSvg src={iconPlus} size='small' />}
+              </Fab>
+            </Box>
+          ),
+        },
+
+        htmlInput: {
+          'aria-label': t`Number`,
+          ...inputProps,
+          sx: [
+            {
+              typography: 'body1',
+              textAlign: 'center',
+              '&::-webkit-inner-spin-button,&::-webkit-outer-spin-button': {
+                appearance: 'none',
+              },
             },
-          },
-        ],
-        className: `${inputProps?.className ?? ''} ${classes.quantityInput}`,
+          ],
+          className: `${inputProps?.className ?? ''} ${classes.quantityInput}`,
+        },
       }}
     />
   )

package/Theme/DarkLightModeThemeProvider.tsx

@@ -1,100 +1,41 @@
 import { Trans } from '@lingui/react/macro'
-import type { FabProps, ListItemButtonProps, Theme } from '@mui/material'
-import {
-  Fab,
-  ListItemButton,
-  ListItemIcon,
-  ListItemText,
-  ThemeProvider, // eslint-disable-next-line @typescript-eslint/no-restricted-imports
-  useMediaQuery,
-} from '@mui/material'
-import { useRouter } from 'next/router'
-import { createContext, useContext, useEffect, useMemo, useState } from 'react'
+import type { FabProps, ListItemButtonProps } from '@mui/material'
+import { Fab, ListItemButton, ListItemIcon, ListItemText } from '@mui/material'
+import { useColorScheme } from '@mui/material/styles'
 import { iconMoon, iconSun } from '../icons'
 import { IconSvg } from '../IconSvg'
-import { getCssFlag, setCssFlag } from '../utils/cssFlags'
 
 type Mode = 'dark' | 'light'
-type UserMode = 'auto' | Mode
-
-type ColorModeContext = {
-  userMode: UserMode
-  browserMode: Mode
-  currentMode: Mode
-  isSingleMode: boolean
-  toggle: () => void
-}
-
-/** @public */
-export const colorModeContext = createContext(undefined as unknown as ColorModeContext)
-colorModeContext.displayName = 'ColorModeContext'
-
-export type ThemeProviderProps = {
-  children: React.ReactNode
-  ssrMode?: Mode
-  listenToBrowser?: boolean
-} & (
-  | { light: Theme; dark?: undefined }
-  | { light?: undefined; dark: Theme }
-  | { light: Theme; dark: Theme }
-)
 
 /**
- * Wrapper around `import { ThemeProvider } from '@mui/material'`
+ * Hook to get and set the color mode. Uses MUI's useColorScheme() when CSS variables are enabled.
  *
- * The multi DarkLightModeThemeProvider allows switching between light and dark mode based on URL
- * and on user input.
+ * @public
  */
-export function DarkLightModeThemeProvider(props: ThemeProviderProps) {
-  const { children, light, dark, ssrMode = 'light', listenToBrowser = true } = props
-  const [configuredMode, setConfiguredMode] = useState<UserMode>(listenToBrowser ? 'auto' : ssrMode)
-  const setThemeMode = (mode: UserMode) => {
-    setConfiguredMode(mode)
-    setCssFlag('color-scheme', mode)
+export function useColorMode() {
+  const colorScheme = useColorScheme()
+
+  if (!colorScheme.mode) {
+    // CSS variables not enabled, return safe defaults
+    return {
+      userMode: 'light' as const,
+      browserMode: 'light' as Mode,
+      currentMode: 'light' as Mode,
+      isSingleMode: true,
+      toggle: () => {},
+    }
   }
 
-  const browserMode: Mode = useMediaQuery('(prefers-color-scheme: dark)') ? 'dark' : 'light'
+  const { mode, setMode, systemMode } = colorScheme
+  const currentMode: Mode = mode === 'system' ? (systemMode ?? 'light') : mode
 
-  // If the user has set a mode, use that. Otherwise, use the browser mode.
-  const currentMode = configuredMode === 'auto' ? browserMode : configuredMode
-
-  let theme: Theme = light || dark // Default
-  if (light && currentMode === 'light') theme = light
-  else if (dark) theme = dark
-
-  useEffect(() => {
-    const flag = getCssFlag('color-scheme') as Mode
-    if (flag) setConfiguredMode(flag)
-  }, [setConfiguredMode])
-
-  // If a URL parameter is present, switch from auto to light or dark mode
-  const { asPath } = useRouter()
-  useEffect(() => {
-    if (asPath.includes('darkmode')) setConfiguredMode('dark')
-  }, [asPath])
-
-  // Create the context
-  const colorContext: ColorModeContext = useMemo(
-    () => ({
-      browserMode,
-      userMode: configuredMode,
-      currentMode,
-      isSingleMode: !light || !dark,
-      toggle: () => setThemeMode(currentMode === 'light' ? 'dark' : 'light'),
-    }),
-    [browserMode, configuredMode, currentMode, light, dark],
-  )
-
-  return (
-    <colorModeContext.Provider value={colorContext}>
-      <ThemeProvider theme={theme}>{children}</ThemeProvider>
-    </colorModeContext.Provider>
-  )
-}
-
-/** @public */
-export function useColorMode() {
-  return useContext(colorModeContext)
+  return {
+    userMode: mode,
+    browserMode: (systemMode ?? 'light') as Mode,
+    currentMode,
+    isSingleMode: false,
+    toggle: () => setMode(currentMode === 'light' ? 'dark' : 'light'),
+  }
 }
 
 /** @public */
@@ -115,8 +56,6 @@ export function DarkLightModeToggleFab(props: Omit<FabProps, 'onClick'>) {
 /**
  * A button that switches between light and dark mode
  *
- * To disable this functionality
- *
  * @public
  */
 export function DarkLightModeMenuSecondaryItem(props: ListItemButtonProps) {
@@ -128,7 +67,7 @@ export function DarkLightModeMenuSecondaryItem(props: ListItemButtonProps) {
   }
 
   return (
-    <ListItemButton {...props} sx={[{}, ...(Array.isArray(sx) ? sx : [sx])]} dense onClick={toggle}>
+    <ListItemButton {...props} sx={sx} dense onClick={toggle}>
       <ListItemIcon sx={{ minWidth: 'unset', paddingRight: '8px' }}>
         <IconSvg src={currentMode === 'light' ? iconMoon : iconSun} size='medium' />
       </ListItemIcon>
@@ -138,3 +77,17 @@ export function DarkLightModeMenuSecondaryItem(props: ListItemButtonProps) {
     </ListItemButton>
   )
 }
+
+/**
+ * @deprecated Use ThemeProvider from @mui/material with cssVariables enabled instead. The
+ *   dark/light mode toggle now uses MUI's built-in useColorScheme() hook.
+ */
+export function DarkLightModeThemeProvider({ children }: { children: React.ReactNode }) {
+  console.warn(
+    'DarkLightModeThemeProvider is deprecated. Use ThemeProvider from @mui/material with cssVariables enabled instead.',
+  )
+  return children
+}
+
+/** @deprecated No longer needed, context is provided by MUI's ThemeProvider with cssVariables */
+export const colorModeContext = null

package/Theme/MuiButton.ts

@@ -1,8 +1,7 @@
 import type { ComponentsVariants, Theme } from '@mui/material'
-import { alpha, darken, lighten } from '@mui/material'
 import { responsiveVal } from '../Styles/responsiveVal'
 
-declare module '@mui/material/Button/Button' {
+declare module '@mui/material/Button' {
   interface ButtonPropsVariantOverrides {
     pill: true
     inline: true
@@ -25,7 +24,7 @@ export const MuiButtonResponsive: ButtonVariants = [
       ...theme.typography.body2,
       padding: `${responsiveVal(3, 5)} ${responsiveVal(8, 15)}`,
       '&.MuiLoadingButton-loading:hover': {
-        backgroundColor: theme.palette.action.disabledBackground,
+        backgroundColor: theme.vars.palette.action.disabledBackground,
       },
       '& .MuiLoadingButton-loadingIndicatorEnd': { right: responsiveVal(9, 15) },
       '& .MuiLoadingButton-loadingIndicatorStart': { left: responsiveVal(9, 15) },
@@ -37,7 +36,7 @@ export const MuiButtonResponsive: ButtonVariants = [
       ...theme.typography.body1,
       padding: `${responsiveVal(7, 9)} ${responsiveVal(15, 22)}`,
       '&.MuiLoadingButton-loading:hover': {
-        backgroundColor: theme.palette.action.disabledBackground,
+        backgroundColor: theme.vars.palette.action.disabledBackground,
       },
       '& .MuiLoadingButton-loadingIndicatorEnd': { right: responsiveVal(16, 24) },
       '& .MuiLoadingButton-loadingIndicatorStart': { left: responsiveVal(16, 24) },
@@ -50,7 +49,7 @@ export const MuiButtonResponsive: ButtonVariants = [
       fontWeight: theme.typography.fontWeightBold,
       padding: `${responsiveVal(10, 15)} ${responsiveVal(28, 58)}`,
       '&.MuiLoadingButton-loading:hover': {
-        backgroundColor: theme.palette.action.disabledBackground,
+        backgroundColor: theme.vars.palette.action.disabledBackground,
       },
       '& .MuiLoadingButton-loadingIndicatorEnd': { right: responsiveVal(30, 60) },
       '& .MuiLoadingButton-loadingIndicatorStart': { left: responsiveVal(30, 60) },
@@ -112,36 +111,36 @@ export const MuiButtonPill: ButtonVariants = [
   {
     props: { variant: 'pill', color: 'primary' },
     style: ({ theme }) => ({
-      backgroundColor: theme.palette.primary.main,
-      color: theme.palette.primary.contrastText,
-      '&:hover:not(.Mui-disabled)': { backgroundColor: theme.palette.primary.dark },
+      backgroundColor: theme.vars.palette.primary.main,
+      color: theme.vars.palette.primary.contrastText,
+      '&:hover:not(.Mui-disabled)': { backgroundColor: theme.vars.palette.primary.dark },
     }),
   },
   {
     props: { variant: 'pill', color: 'secondary' },
     style: ({ theme }) => ({
-      backgroundColor: theme.palette.secondary.main,
-      color: theme.palette.secondary.contrastText,
-      '&:hover:not(.Mui-disabled)': { backgroundColor: theme.palette.secondary.dark },
+      backgroundColor: theme.vars.palette.secondary.main,
+      color: theme.vars.palette.secondary.contrastText,
+      '&:hover:not(.Mui-disabled)': { backgroundColor: theme.vars.palette.secondary.dark },
     }),
   },
   {
     props: { variant: 'pill', color: 'inherit' },
     style: ({ theme }) => ({
-      backgroundColor: theme.palette.background.paper,
+      backgroundColor: theme.vars.palette.background.paper,
       '&:hover:not(.Mui-disabled)': {
-        backgroundColor:
-          theme.palette.mode === 'light'
-            ? darken(theme.palette.background.default, 0.05)
-            : lighten(theme.palette.background.default, 0.2),
+        backgroundColor: theme.darken(theme.vars.palette.background.default, 0.05),
+        ...theme.applyStyles('dark', {
+          backgroundColor: theme.lighten(theme.vars.palette.background.default, 0.2),
+        }),
       },
     }),
   },
   {
     props: { variant: 'pill', disabled: true },
     style: ({ theme }) => ({
-      backgroundColor: theme.palette.action.disabledBackground,
-      color: theme.palette.action.disabled,
+      backgroundColor: theme.vars.palette.action.disabledBackground,
+      color: theme.vars.palette.action.disabled,
     }),
   },
 ]
@@ -150,16 +149,18 @@ export const MuiButtonInline: ButtonVariants = [
   {
     props: { variant: 'inline', color: 'primary' },
     style: ({ theme }) => ({
-      color: theme.palette.primary.main,
-      '&:hover:not(.Mui-disabled)': { backgroundColor: alpha(theme.palette.primary.main, 0.19) },
+      color: theme.vars.palette.primary.main,
+      '&:hover:not(.Mui-disabled)': {
+        backgroundColor: theme.alpha(theme.vars.palette.primary.main, 0.19),
+      },
     }),
   },
   {
     props: { variant: 'inline', color: 'secondary' },
     style: ({ theme }) => ({
-      color: theme.palette.secondary.main,
+      color: theme.vars.palette.secondary.main,
       '&:hover:not(.Mui-disabled)': {
-        backgroundColor: theme.palette.secondary.light,
+        backgroundColor: theme.vars.palette.secondary.light,
       },
     }),
   },

package/Theme/MuiChip.ts

@@ -1,8 +1,7 @@
 import type { ComponentsVariants, Theme } from '@mui/material'
-import { darken } from '@mui/material'
 import { responsiveVal } from '../Styles'
 
-declare module '@mui/material/Chip/Chip' {
+declare module '@mui/material/Chip' {
   interface ChipPropsSizeOverrides {
     responsive: true
   }
@@ -54,36 +53,36 @@ export const MuiChip: ChipVariants = [
   {
     props: { variant: 'outlined' },
     style: ({ theme }) => ({
-      borderColor: theme.palette.divider,
-      backgroundColor: theme.palette.background.default,
+      borderColor: theme.vars.palette.divider,
+      backgroundColor: theme.vars.palette.background.default,
       '&:active': {
         boxShadow: 'none',
       },
       '& .MuiChip-deleteIcon': {
-        color: theme.palette.text.primary,
+        color: theme.vars.palette.text.primary,
       },
       '&.MuiChip-clickable:hover': {
-        backgroundColor: darken(theme.palette.background.default, 0.05),
+        backgroundColor: theme.darken(theme.vars.palette.background.default, 0.05),
       },
       '& .MuiChip-deleteIcon:hover': {
-        color: theme.palette.text.primary,
+        color: theme.vars.palette.text.primary,
       },
     }),
   },
   {
     props: { color: 'primary' },
     style: ({ theme }) => ({
-      borderColor: theme.palette.text.primary,
-      color: theme.palette.text.primary,
+      borderColor: theme.vars.palette.text.primary,
+      color: theme.vars.palette.text.primary,
       '&:hover': {
-        background: `${theme.palette.background.default} !important`,
-        borderColor: `${theme.palette.divider} !important`,
+        background: `${theme.vars.palette.background.default} !important`,
+        borderColor: `${theme.vars.palette.divider} !important`,
       },
       '&:focus': {
-        background: `${theme.palette.background.paper} !important`,
+        background: `${theme.vars.palette.background.paper} !important`,
       },
       '& .MuiChip-deleteIcon:hover': {
-        color: theme.palette.text.primary,
+        color: theme.vars.palette.text.primary,
       },
     }),
   },

package/Theme/MuiFab.ts

@@ -9,7 +9,7 @@ type FabSizes = {
 }
 
 /** Expose the component to be exendable in your theme.components */
-declare module '@mui/material/styles/components' {
+declare module '@mui/material/styles' {
   interface Components {
     /**
      * @todo We would rather use MuiFab to override these fields, but I can't get it to work,
@@ -44,7 +44,7 @@ export const useFabSize = (size: FabSize) => {
   return fabSize(size, theme)
 }
 
-declare module '@mui/material/Fab/Fab' {
+declare module '@mui/material/Fab' {
   interface FabPropsSizeOverrides {
     responsive: true
     responsiveSmall: true
@@ -96,10 +96,10 @@ export const MuiFabSizes: FabVariants = sizes.map((size) => ({
 //     style: ({ theme }) => ({
 //       boxShadow: 'none',
 //       '&:hover, &:focus': {
-//         background: theme.palette.text.primary,
+//         background: theme.vars.palette.text.primary,
 //       },
-//       background: theme.palette.text.primary,
-//       color: theme.palette.background.paper,
+//       background: theme.vars.palette.text.primary,
+//       color: theme.vars.palette.background.paper,
 //     }),
 //   },
 // ]

package/Theme/MuiSlider.ts

@@ -1,6 +1,6 @@
 import type { ComponentsVariants, Theme } from '@mui/material'
 
-declare module '@mui/material/Slider/Slider' {
+declare module '@mui/material/Slider' {
   interface SliderPropsSizeOverrides {
     large: true
   }
@@ -13,22 +13,22 @@ export const MuiSlider: SliderVariants = [
     props: {},
     style: ({ theme }) => ({
       '& .MuiSlider-rail': {
-        color: theme.palette.text.disabled,
+        color: theme.vars.palette.text.disabled,
       },
       '& .MuiSlider-thumb': {
-        background: theme.palette.background.default,
+        background: theme.vars.palette.background.default,
         boxShadow: theme.shadows[6],
       },
       '& .MuiSlider-valueLabel': {
         top: 0,
         backgroundColor: 'unset',
-        color: theme.palette.text.primary,
+        color: theme.vars.palette.text.primary,
         '&:before': {
           display: 'none',
         },
         '& *': {
           background: 'transparent',
-          color: theme.palette.text.primary,
+          color: theme.vars.palette.text.primary,
         },
       },
     }),

package/Theme/createTheme.ts

@@ -2,13 +2,11 @@ import type { Breakpoint } from '@mui/material'
 
 export {}
 
-declare module '@mui/material/styles/createPalette' {
+declare module '@mui/material/styles' {
   interface TypeBackground {
     image: string
   }
-}
 
-declare module '@mui/material/styles/createTheme' {
   interface ThemeOptions {
     spacings: {
       xxs: string

package/Theme/themeDefaults.ts

@@ -1,6 +1,6 @@
 import type { Components, Theme, ThemeOptions } from '@mui/material'
 import { createTheme as createMuiTheme } from '@mui/material'
-import type { Shadows } from '@mui/material/styles/shadows'
+import type { Shadows } from '@mui/material/styles'
 import { spreadVal } from '../Styles/spreadVal'
 import { breakpoints } from './breakpoints'
 

package/ToggleButton/ToggleButton.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { sxx } from '@graphcommerce/next-ui'
 import type { ButtonProps } from '@mui/material'
-import { alpha, Button } from '@mui/material'
+import { Button } from '@mui/material'
 import type { FormEvent } from 'react'
 import React from 'react'
 import { extendableComponent } from '../Styles'
@@ -60,23 +61,21 @@ export const ToggleButton = React.forwardRef<any, ToggleButtonProps>((props, ref
       size={size}
       {...other}
       classes={classes}
-      sx={[
+      sx={sxx(
         (theme) => ({
           border: 1,
           borderColor: 'divider',
           bgcolor: 'background.paper',
-
           '&.disabled': {
             borderWidth: 2,
           },
-
           '&.selected': {
-            border: `1px solid ${theme.palette[color]?.main ?? theme.palette.primary.main}`,
+            border: `1px solid ${theme.vars.palette[color]?.main ?? theme.vars.palette.primary.main}`,
             boxShadow: `inset 0 0 0 1px ${
-              theme.palette[color]?.main ?? theme.palette.primary.main
-            },0 0 0 4px ${alpha(
-              theme.palette.primary.main,
-              theme.palette.action.hoverOpacity,
+              theme.vars.palette[color]?.main ?? theme.vars.palette.primary.main
+            },0 0 0 4px ${theme.alpha(
+              theme.vars.palette.primary.main,
+              theme.vars.palette.action.hoverOpacity,
             )} !important`,
           },
           ':not(&.sizeSmall)': {
@@ -98,8 +97,8 @@ export const ToggleButton = React.forwardRef<any, ToggleButtonProps>((props, ref
             padding: '8px 12px',
           },
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       {children}
     </Button>

package/ToggleButtonGroup/ToggleButtonGroup.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
+import { sxx } from '@graphcommerce/next-ui'
 import type { ToggleButtonGroupProps as ToggleButtonGroupPropsBase } from '@mui/material'
 import { Box } from '@mui/material'
 import React from 'react'
@@ -68,7 +69,7 @@ export const ToggleButtonGroup = React.forwardRef<HTMLDivElement, ToggleButtonGr
       <Box
         role='group'
         className={`${classes.root} ${className ?? ''}`}
-        sx={[
+        sx={sxx(
           (theme) => ({
             rowGap: theme.spacings.xxs,
             columnGap: theme.spacings.xs,
@@ -90,8 +91,8 @@ export const ToggleButtonGroup = React.forwardRef<HTMLDivElement, ToggleButtonGr
               gridTemplateColumns: 'repeat(2, 1fr)',
             },
           }),
-          ...(Array.isArray(sx) ? sx : [sx]),
-        ]}
+          sx,
+        )}
         ref={ref}
         {...other}
       >

package/UspList/UspList.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'
@@ -20,7 +21,7 @@ export function UspList(props: UspListProps) {
     <Box
       component='ul'
       className={classes.root}
-      sx={[
+      sx={sxx(
         (theme) => ({
           listStyleType: 'none',
           padding: 0,
@@ -32,8 +33,8 @@ export function UspList(props: UspListProps) {
             rowGap: '3px',
           },
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       {children}
     </Box>