@graphcommerce/magento-category 10.0.0-canary.67 → 10.0.0-canary.68

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # Change Log
 
+## 10.0.0-canary.68
+
 ## 10.0.0-canary.67
 
 ## 10.0.0-canary.66

package/components/CategoryBreadcrumb/CategoryBreadcrumb.tsx

@@ -31,7 +31,13 @@ export function CategoryBreadcrumb(props: CategoryPageBreadcrumbsProps) {
             {breadcrumb.category_name}
           </Link>
         ))}
-      <Typography color='text.primary'>{name}</Typography>
+      <Typography
+        sx={{
+          color: 'text.primary',
+        }}
+      >
+        {name}
+      </Typography>
     </Breadcrumbs>
   )
 }

package/components/CategoryBreadcrumb/CategoryBreadcrumbs.tsx

@@ -1,5 +1,5 @@
 import type { BreadcrumbsProps } from '@graphcommerce/next-ui'
-import { Breadcrumbs, BreadcrumbsJsonLd, jsonLdBreadcrumb } from '@graphcommerce/next-ui'
+import { Breadcrumbs, BreadcrumbsJsonLd, jsonLdBreadcrumb, sxx } from '@graphcommerce/next-ui'
 import { useRouter } from 'next/router'
 import type { BreadcrumbList } from 'schema-dts'
 import type { CategoryBreadcrumbFragment } from './CategoryBreadcrumb.gql'
@@ -26,11 +26,7 @@ export function CategoryBreadcrumbs(props: CategoryBreadcrumbsProps) {
           ...jsonLdBreadcrumb(bc, router),
         })}
       />
-      <Breadcrumbs
-        breadcrumbs={breadcrumbs}
-        {...breadcrumbsProps}
-        sx={[...(Array.isArray(sx) ? sx : [sx])]}
-      />
+      <Breadcrumbs breadcrumbs={breadcrumbs} {...breadcrumbsProps} sx={sx} />
     </>
   )
 }

package/components/CategoryChildren/CategoryChildren.tsx

@@ -1,7 +1,7 @@
 import { Scroller, ScrollerProvider } from '@graphcommerce/framer-scroller'
 import type { ProductListParams } from '@graphcommerce/magento-product'
 import { productListLink } from '@graphcommerce/magento-product'
-import { extendableComponent, filterNonNullableKeys } from '@graphcommerce/next-ui'
+import { extendableComponent, filterNonNullableKeys, sxx } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, Link } from '@mui/material'
 import type { CategoryChildrenFragment } from './CategoryChildren.gql'
@@ -38,10 +38,7 @@ export function CategoryChildren(props: CategoryChildrenProps) {
     <ScrollerProvider scrollSnapAlign='none'>
       <Box
         className={classes.container}
-        sx={[
-          { display: 'flex', width: '100%', overflow: 'hidden' },
-          ...(Array.isArray(sx) ? sx : [sx]),
-        ]}
+        sx={sxx({ display: 'flex', width: '100%', overflow: 'hidden' }, sx)}
       >
         <Scroller
           className={classes.scroller}
@@ -69,7 +66,7 @@ export function CategoryChildren(props: CategoryChildrenProps) {
                   content: '""',
                   width: 40,
                   height: 2,
-                  background: theme.palette.primary.main,
+                  background: theme.vars.palette.primary.main,
                   position: 'absolute',
                   left: 0,
                   right: 0,

package/components/CategoryDescription/CategoryDescription.tsx

@@ -1,5 +1,5 @@
 import type { ProductListItemRenderer } from '@graphcommerce/magento-product'
-import { extendableComponent } from '@graphcommerce/next-ui'
+import { extendableComponent, sxx } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { Box } from '@mui/material'
 import type { CategoryDescriptionFragment } from './CategoryDescription.gql'
@@ -40,7 +40,7 @@ export function CategoryDescription(props: CategoryDescriptionProps) {
       {...divProps}
       className={classes.root}
       dangerouslySetInnerHTML={{ __html: description }}
-      sx={[
+      sx={sxx(
         (theme) => ({
           typography: 'subtitle1',
           [theme.breakpoints.down('sm')]: {
@@ -57,8 +57,8 @@ export function CategoryDescription(props: CategoryDescriptionProps) {
             },
           },
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     />
   ) : null
 }

package/components/CategoryHeroNav/CategoryHeroNav.tsx

@@ -1,5 +1,5 @@
 import { productListLink } from '@graphcommerce/magento-product'
-import { breakpointVal, extendableComponent, Row } from '@graphcommerce/next-ui'
+import { breakpointVal, extendableComponent, Row, sxx } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, Link, Typography } from '@mui/material'
 import React from 'react'
@@ -20,7 +20,7 @@ export const CategoryHeroNav = React.memo<CategoryHeroNavProps>(
     <Row
       className={classes.wrapper}
       maxWidth={false}
-      sx={[
+      sx={sxx(
         (theme) => ({
           display: 'grid',
           gridTemplateColumns: '1fr',
@@ -30,7 +30,7 @@ export const CategoryHeroNav = React.memo<CategoryHeroNavProps>(
             "placeholder"
           `,
           gridTemplateRows: 'auto auto 1fr',
-          borderBottom: `1px solid ${theme.palette.divider}`,
+          borderBottom: `1px solid ${theme.vars.palette.divider}`,
           marginBottom: theme.spacings.xxl,
           paddingBottom: theme.page.vertical,
           [theme.breakpoints.up('md')]: {
@@ -47,8 +47,8 @@ export const CategoryHeroNav = React.memo<CategoryHeroNavProps>(
             gridTemplateRows: '0.3fr 0.7fr',
           },
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       <Box
         className={classes.title}

package/components/CategoryHeroNav/CategoryHeroNavTitle.tsx

@@ -1,4 +1,4 @@
-import { LayoutTitle } from '@graphcommerce/next-ui'
+import { LayoutTitle, sxx } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { memo } from 'react'
 
@@ -13,15 +13,15 @@ export const CategoryHeroNavTitle = memo<CategoryHeroNavTitleProps>((props) => {
   return (
     <LayoutTitle
       variant='h1'
-      sx={[
+      sx={sxx(
         (theme) => ({
           [theme.breakpoints.up('md')]: {
             m: 0,
             justifyContent: 'start',
           },
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       {children}
     </LayoutTitle>

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-category",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "10.0.0-canary.67",
+  "version": "10.0.0-canary.68",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -17,19 +17,19 @@
     "./components/CategoryBreadcrumb/categoryToBreadcrumbs": "./components/CategoryBreadcrumb/categoryToBreadcrumbs.ts"
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.67",
-    "@graphcommerce/framer-scroller": "^10.0.0-canary.67",
-    "@graphcommerce/graphql": "^10.0.0-canary.67",
-    "@graphcommerce/image": "^10.0.0-canary.67",
-    "@graphcommerce/magento-product": "^10.0.0-canary.67",
-    "@graphcommerce/magento-store": "^10.0.0-canary.67",
-    "@graphcommerce/next-ui": "^10.0.0-canary.67",
-    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.67",
-    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.67",
+    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.68",
+    "@graphcommerce/framer-scroller": "^10.0.0-canary.68",
+    "@graphcommerce/graphql": "^10.0.0-canary.68",
+    "@graphcommerce/image": "^10.0.0-canary.68",
+    "@graphcommerce/magento-product": "^10.0.0-canary.68",
+    "@graphcommerce/magento-store": "^10.0.0-canary.68",
+    "@graphcommerce/next-ui": "^10.0.0-canary.68",
+    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.68",
+    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.68",
     "@lingui/core": "^5",
     "@lingui/macro": "^5",
     "@lingui/react": "^5",
-    "@mui/material": "^5.10.16",
+    "@mui/material": "^7.0.0",
     "next": "*",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"