Switch to ReactNode return types

packages/contentful/src/ContentfulVisual.tsx

@@ -12,11 +12,12 @@ import {
   hasResponsiveAssets,
   hasResponsiveAspects
 } from './lib/aspectRatio'
+import type { ReactNode } from 'react'
 
 // Render a Visual using Contentful data
 export default function ContentfulVisual(
   props: ContentfulVisualProps
-): JSX.Element | null {
+): ReactNode {
 
   // Destructure some props
   const {

packages/next/src/NextVisual.tsx

@@ -11,12 +11,10 @@ import {
 } from '@react-visual/react'
 
 import { NextVisualProps } from './types/nextVisualTypes'
+import type { ReactNode } from 'react'
 
 // Render a Sanity image via Next/Image
-export default function NextVisual(
-  props: NextVisualProps
-): JSX.Element | null {
-
+export default function NextVisual(props: NextVisualProps): ReactNode {
   // Destructure props
   const {
     image,
@@ -88,7 +86,7 @@ function NextImage({
   priority,
   loader,
   placeholderData,
-}: any): JSX.Element {
+}: any): ReactNode {
   return (
     <Image
       { ...{ src, sizes, priority, loader, alt } }

packages/react/src/LazyVideo/AccessibilityControls.tsx

@@ -1,5 +1,5 @@
 import { LazyVideoProps } from '../types/lazyVideoTypes'
-import type { CSSProperties } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 import { PositionOption } from '../types/reactVisualTypes'
 
 // How big to make the button.  Can't be too small and still be ADA friendly
@@ -30,7 +30,7 @@ export default function AccessibilityControls({
   pauseIcon,
   hideAccessibilityControls,
   accessibilityControlsPosition,
-}: AccessibilityControlsProps): JSX.Element | null {
+}: AccessibilityControlsProps): ReactNode {
   // If hidden, return nothing
   if (hideAccessibilityControls) return null;
 

packages/react/src/LazyVideo/LazyVideoClient.tsx

@@ -3,7 +3,7 @@
 
 import { useInView } from 'react-intersection-observer'
 import { useMediaQueries } from '@react-hook/media-query'
-import { useEffect, useRef, useCallback, type MutableRefObject, useState } from 'react'
+import { useEffect, useRef, useCallback, type MutableRefObject, useState, type ReactNode } from 'react'
 import type { LazyVideoProps } from '../types/lazyVideoTypes';
 import { fillStyles, transparentGif } from '../lib/styles'
 import AccessibilityControls from './AccessibilityControls'
@@ -38,7 +38,7 @@ export default function LazyVideoClient({
   pauseIcon,
   hideAccessibilityControls,
   accessibilityControlsPosition,
-}: LazyVideoClientProps): JSX.Element {
+}: LazyVideoClientProps): ReactNode {
   // Track the actual video playback state. Start in a paused state because
   // even with an autoplay video, it won't actually have started playing yet.
   const [isVideoPaused, setVideoPaused] = useState(true)
@@ -174,7 +174,7 @@ export default function LazyVideoClient({
 function ResponsiveSource({
   mediaSrcs,
   videoRef,
-}: ResponsiveVideoSourceProps): JSX.Element {
+}: ResponsiveVideoSourceProps): ReactNode {
   // Find the src url that is currently active
   const { matches } = useMediaQueries(mediaSrcs)
   const srcUrl = getFirstMatch(matches)

packages/react/src/LazyVideo/LazyVideoServer.tsx

@@ -1,10 +1,11 @@
+import type { ReactNode } from 'react'
 import type { LazyVideoProps } from '../types/lazyVideoTypes'
 import LazyVideoClient from './LazyVideoClient'
 
 // This wrapper function exists to take Function props and make them
 // serializable for the LazyVideoClient component, which is a Next.js style
 // client component.
-export default function LazyVideo(props: LazyVideoProps): JSX.Element | null {
+export default function LazyVideo(props: LazyVideoProps): ReactNode {
   // Destructure some props
   const {
     src,

packages/react/src/PictureImage.tsx

@@ -2,6 +2,7 @@ import type { PictureImageProps } from './types/pictureImageTypes'
 import type { ImageLoader, SourceMedia, SourceType } from './types/reactVisualTypes'
 import { deviceSizes, imageSizes } from './lib/sizes'
 import { makeSourceVariants } from './lib/sources'
+import type { ReactNode } from 'react'
 
 type ImageSrc = PictureImageProps['src']
 type ImageSourceProps = {
@@ -13,7 +14,7 @@ type ImageSourceProps = {
   media?: SourceMedia
 }
 
-export default function PictureImage(props: PictureImageProps): JSX.Element {
+export default function PictureImage(props: PictureImageProps): ReactNode {
   // Destructure props
   const {
     src,
@@ -96,7 +97,7 @@ function Source({
   src,
   type,
   media,
-}: ImageSourceProps): JSX.Element {
+}: ImageSourceProps): ReactNode {
   const srcSet = makeSrcSet(widths, imageLoader, { src, type, media });
   return <source {...{ type, media, srcSet, sizes }} />;
 }

packages/react/src/ReactVisual.tsx

@@ -5,11 +5,9 @@ import PictureImage from './PictureImage'
 import { collectDataAttributes } from './lib/attributes'
 import { ReactVisualProps } from './types/reactVisualTypes'
 import { fillStyles } from './lib/styles'
+import type { ReactNode } from 'react'
 
-export default function ReactVisual(
-  props: ReactVisualProps
-): JSX.Element | null {
-
+export default function ReactVisual(props: ReactVisualProps): ReactNode {
   // Destructure props
   const {
     image,

packages/react/src/VisualWrapper.tsx

@@ -1,4 +1,4 @@
-import type { CSSProperties } from 'react'
+import type { CSSProperties, ReactNode } from 'react'
 import { fillStyles, cx } from './lib/styles'
 import { isNumeric } from './lib/values'
 import type { VisualWrapperProps } from './types/visualWrapperTypes'
@@ -24,7 +24,7 @@ export default function VisualWrapper({
   className,
   style,
   dataAttributes,
-}: VisualWrapperProps): JSX.Element {
+}: VisualWrapperProps): ReactNode {
   // If aspect is a function, invoke it to determine the aspect ratio
   let aspectRatio, aspectStyleTag, aspectClasses
   if (typeof aspect == 'function' && sourceMedia && sourceMedia.length) {
@@ -64,7 +64,7 @@ function makeResponsiveAspects({
   video,
 }: MakeResponsiveAspectsProps): {
   aspectClasses: string;
-  aspectStyleTag: JSX.Element;
+  aspectStyleTag: ReactNode;
 } {
 
   // Make CSS classes and related rules that are specific to the query and

packages/sanity-next/src/SanityNextVisual.tsx

@@ -7,11 +7,9 @@ import {
   placeholderFromSource,
 } from './lib/sourceMapping'
 import { SanityNextVisualProps } from './types/sanityNextVisualTypes'
+import type { ReactNode } from 'react'
 
-export default function SanityNextVisual(
-  props: SanityNextVisualProps
-): JSX.Element | null {
-
+export default function SanityNextVisual(props: SanityNextVisualProps): ReactNode {
   // Destructure some props
   let {