@graphcommerce/next-ui 4.2.3 → 4.3.0

package/Blog/BlogAuthor/{index.tsx → BlogAuthor.tsx}

@@ -1,4 +1,4 @@
-import { Avatar, Box, Chip, SxProps } from '@mui/material'
+import { Avatar, Box, Chip, SxProps, Theme } from '@mui/material'
 import { useRouter } from 'next/router'
 import { useMemo } from 'react'
 import { responsiveVal } from '../../Styles/responsiveVal'
@@ -6,7 +6,7 @@ import { responsiveVal } from '../../Styles/responsiveVal'
 export type BlogAuthorProps = {
   author: string
   date: string
-  sx?: SxProps
+  sx?: SxProps<Theme>
 }
 
 export function BlogAuthor(props: BlogAuthorProps) {

package/Blog/BlogList/{index.tsx → BlogList.tsx}

@@ -1,5 +1,5 @@
 import { styled } from '@mui/material'
-import { Row } from '../../Row'
+import { Row } from '../../Row/Row'
 import { responsiveVal } from '../../Styles/responsiveVal'
 
 export const BlogItemGrid = styled(Row, { name: 'BlogList' })(({ theme }) => ({

package/Blog/BlogTags/BlogTag.tsx

@@ -1,10 +1,10 @@
-import { Chip, SxProps } from '@mui/material'
+import { Chip, SxProps, Theme } from '@mui/material'
 import PageLink from 'next/link'
 
 type BlogTagsProps = {
   url: string
   title: string
-  sx?: SxProps
+  sx?: SxProps<Theme>
 }
 
 export function BlogTag(props: BlogTagsProps) {

package/Button/LinkOrButton.tsx

@@ -42,34 +42,46 @@ export const LinkOrButton = React.forwardRef<
   const buttonRef = useForkRef(ref, useRef(null))
   const linkRef = useForkRef(ref, useRef(null))
 
+  const buttonSx = button?.sx ?? []
+  const linkSx = link?.sx ?? []
   return (
     <>
       <Button
-        sx={{ display: { xs: 'none', [breakpoint]: 'inline-flex' }, ...button?.sx }}
-        ref={buttonRef}
         startIcon={startIcon}
         endIcon={endIcon}
-        color={color}
-        loading={loading}
         {...sharedProps}
         {...button}
+        ref={buttonRef}
+        color={color}
+        loading={loading}
+        sx={[
+          {
+            display: {
+              xs: 'none',
+              [breakpoint]: 'inline-flex',
+            },
+          },
+          ...(Array.isArray(buttonSx) ? buttonSx : [buttonSx]),
+        ]}
       >
         {children}
       </Button>
 
       <Link
-        sx={{
-          display: { xs: 'inline-flex', [breakpoint]: 'none' },
-          alignItems: 'center',
-          ...link?.sx,
-        }}
         ref={linkRef}
-        color={loading ? 'text.disabled' : color}
         underline='none'
-        aria-disabled={loading}
         variant='body2'
         {...sharedProps}
         {...link}
+        color={loading ? 'text.disabled' : color}
+        aria-disabled={loading}
+        sx={[
+          {
+            display: { xs: 'inline-flex', [breakpoint]: 'none' },
+            alignItems: 'center',
+          },
+          ...(Array.isArray(linkSx) ? linkSx : [linkSx]),
+        ]}
       >
         {startIcon}
         <span>{children}</span>