@graphcommerce/hygraph-ui 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/Asset/Asset.tsx

@@ -1,5 +1,6 @@
 import type { ImageProps } from '@graphcommerce/image'
 import { Image } from '@graphcommerce/image'
+import { sxx } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { styled } from '@mui/material'
 import { memo } from 'react'
@@ -35,27 +36,14 @@ export const Asset = memo<AssetProps>((props) => {
         {...imgProps}
         {...assetProps}
         unoptimized={typeof unoptimized === 'boolean' ? unoptimized : mimeType === 'image/svg+xml'}
-        sx={[...(Array.isArray(sx) ? sx : [sx])]}
+        sx={sx}
       />
     )
   }
-
   if (asset.mimeType === 'video/mp4') {
     const Video = styled('video')({})
-
-    return (
-      <Video
-        src={asset.url}
-        autoPlay
-        muted
-        loop
-        playsInline
-        disableRemotePlayback
-        sx={[...(Array.isArray(sx) ? sx : [sx])]}
-      />
-    )
+    return <Video src={asset.url} autoPlay muted loop playsInline disableRemotePlayback sx={sx} />
   }
-
   if (process.env.NODE_ENV !== 'production') return <div>{asset.mimeType} not supported</div>
   return null
 })

package/components/RichText/RichText.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
+import { sxx } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import React from 'react'
 import { defaultRenderers } from './defaultRenderers'
@@ -150,15 +151,7 @@ function mergeSxRenderer(base: SxRenderer, sxRenderer?: SxRenderer) {
     Object.entries<SxProps<Theme>>(base).map(([key, sx]) => {
       const sxOverride: SxProps<Theme> = sxRenderer?.[key]
 
-      return sxOverride
-        ? [
-            key,
-            [
-              ...(Array.isArray(sx) ? sx : [sx]),
-              ...(Array.isArray(sxOverride) ? sxOverride : [sxOverride]),
-            ],
-          ]
-        : [key, sx]
+      return sxOverride ? [key, [sx, sxOverride]] : [key, sx]
     }),
   ) as SxRenderer
 }

package/components/RichText/defaultRenderers.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import { Box, Link, Typography } from '@mui/material'
 import { Asset } from '../Asset/Asset'
 import type { Renderers } from './types'
@@ -24,10 +25,7 @@ export const defaultRenderers: Renderers = {
         component='iframe'
         src={url}
         loading='lazy'
-        sx={[
-          { aspectRatio: `${width} / ${height}`, width: '100%' },
-          ...(Array.isArray(sx) ? sx : [sx]),
-        ]}
+        sx={sxx({ aspectRatio: `${width} / ${height}`, width: '100%' }, sx)}
       />
     )
   },
@@ -51,8 +49,8 @@ export const defaultRenderers: Renderers = {
   table_row: (props) => <Box component='tr' {...props} />,
   table_cell: (props) => <Box component='td' {...props} />,
   code: (props) => <Box component='code' {...props} />,
-  bold: (props) => <Box component='strong' fontWeight='bold' {...props} />,
-  italic: (props) => <Box component='em' fontStyle='italic' {...props} />,
+  bold: (props) => <Box component='strong' {...props} sx={sxx({ fontWeight: 'bold' }, props.sx)} />,
+  italic: (props) => <Box component='em' {...props} sx={sxx({ fontStyle: 'italic' }, props.sx)} />,
   underlined: (props) => <Box component='span' {...props} />,
   class: (props) => <Box component='div' {...props} />,
   'code-block': (props) => (

package/components/RichText/defaultSxRenderer.ts

@@ -87,7 +87,7 @@ export const defaultSxRenderer: SxRenderer = {
       borderColor: 'inherit',
       '& tr': {
         '&:nth-of-type(odd)': {
-          background: theme.palette.background.paper,
+          background: theme.vars.palette.background.paper,
         },
       },
       '& td': {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/hygraph-ui",
   "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": {
@@ -12,14 +12,14 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^10.0.0-canary.67",
-    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.67",
-    "@graphcommerce/graphql": "^10.0.0-canary.67",
-    "@graphcommerce/image": "^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",
-    "@mui/material": "^5.10.16",
+    "@graphcommerce/ecommerce-ui": "^10.0.0-canary.68",
+    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.68",
+    "@graphcommerce/graphql": "^10.0.0-canary.68",
+    "@graphcommerce/image": "^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",
+    "@mui/material": "^7.0.0",
     "next": "*",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"