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

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>

package/UspList/UspListItem.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'
@@ -22,7 +23,7 @@ export function UspListItem(props: UspListItemProps) {
     <Box
       component='li'
       className={classes.root}
-      sx={[
+      sx={sxx(
         (theme) => ({
           display: 'grid',
           gridAutoFlow: 'column',
@@ -37,8 +38,8 @@ export function UspListItem(props: UspListItemProps) {
             gap: theme.spacings.xxs,
           },
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       <Box
         className={classes.icon}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "10.0.0-canary.67",
+  "version": "10.0.0-canary.72",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -30,7 +30,7 @@
     "./RenderType/filterNonNullableKeys": "./RenderType/filterNonNullableKeys.ts"
   },
   "dependencies": {
-    "cookie": "^1.0.2",
+    "cookie": "^1.1.1",
     "react-is": "^19.2.0"
   },
   "devDependencies": {
@@ -38,22 +38,22 @@
     "typescript": "5.9.3"
   },
   "peerDependencies": {
-    "@emotion/cache": "^11",
-    "@emotion/react": "^11",
-    "@emotion/server": "^11",
-    "@emotion/styled": "^11",
-    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.67",
-    "@graphcommerce/framer-next-pages": "^10.0.0-canary.67",
-    "@graphcommerce/framer-scroller": "^10.0.0-canary.67",
-    "@graphcommerce/framer-utils": "^10.0.0-canary.67",
-    "@graphcommerce/image": "^10.0.0-canary.67",
-    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.67",
-    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.67",
+    "@emotion/cache": "^11.14.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/server": "^11.11.0",
+    "@emotion/styled": "^11.14.1",
+    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.72",
+    "@graphcommerce/framer-next-pages": "^10.0.0-canary.72",
+    "@graphcommerce/framer-scroller": "^10.0.0-canary.72",
+    "@graphcommerce/framer-utils": "^10.0.0-canary.72",
+    "@graphcommerce/image": "^10.0.0-canary.72",
+    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.72",
+    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.72",
     "@lingui/core": "^5",
     "@lingui/macro": "^5",
     "@lingui/react": "^5",
-    "@mui/lab": "^5.0.0-alpha.68",
-    "@mui/material": "^5.10.16",
+    "@mui/lab": "7.0.1-beta.20",
+    "@mui/material": "^7.0.0",
     "framer-motion": "^11.0.0",
     "next": "*",
     "next-sitemap": "4.2.3",

package/types.ts

@@ -5,3 +5,4 @@
 import './Theme/createTheme'
 // eslint-disable-next-line react/no-typos
 import 'react'
+import type {} from '@mui/material/themeCssVarsAugmentation'

package/utils/sxx.ts

@@ -10,7 +10,7 @@ import type { SxProps, Theme } from '@mui/material'
  * ```
  */
 export const sxx = (
-  ...sxPropsArray: (SxProps<Theme> | undefined | null | false)[]
+  ...sxPropsArray: (SxProps<Theme> | undefined | null | false | ``)[]
 ): SxProps<Theme> =>
   sxPropsArray
     .filter((v) => !!v)