refactor(shared/responsive-image): extract out source as a seperate component

components/shared/ResponsiveImage/ResponsiveImage.stories.tsx

-import ResponsiveImage from './ResponsiveImage';
+import { ResponsiveImage, Source } from './';
 import type { ResponsiveImageProps } from './ResponsiveImage';
 
 export default {
@@ -28,42 +28,42 @@ export const ArtDirection = {
   },
   render: (args: ResponsiveImageProps) => (
     <ResponsiveImage {...args}>
-      <ResponsiveImage.Source
+      <Source
         media="xxl"
         src="https://picsum.photos/1920/540?jpg"
         width={1920}
         height={540}
         sizes="100vw"
       />
-      <ResponsiveImage.Source
+      <Source
         media="xl"
         src="https://picsum.photos/1536/540?jpg"
         width={1536}
         height={540}
         sizes="100vw"
       />
-      <ResponsiveImage.Source
+      <Source
         media="lg"
         src="https://picsum.photos/1280/540?jpg"
         width={1280}
         height={540}
         sizes="100vw"
       />
-      <ResponsiveImage.Source
+      <Source
         media="md"
         src="https://picsum.photos/1024/540?jpg"
         width={1024}
         height={540}
         sizes="100vw"
       />
-      <ResponsiveImage.Source
+      <Source
         media="sm"
         src="https://picsum.photos/768/540?jpg"
         width={768}
         height={540}
         sizes="100vw"
       />
-      <ResponsiveImage.Source
+      <Source
         media="(min-width: 576px)"
         src="https://picsum.photos/640/540?jpg"
         width={640}

components/shared/ResponsiveImage/ResponsiveImage.tsx

-import React, { forwardRef, memo } from 'react';
+import React, { forwardRef } from 'react';
 import { getImageProps } from 'next/image';
-import breakpoints from './breakpoints';
 
 export type Image = {
   url: string;
@@ -21,31 +20,14 @@ export interface ResponsiveImageProps
   children?: React.ReactNode;
 }
 
-export interface SourceProps extends React.HTMLAttributes<HTMLSourceElement> {
-  src: string;
-  width: number;
-  height: number;
-  media: string;
-  sizes: string;
-  quality?: number;
-}
-
-type ResponsiveImageCompoundComponent = React.ForwardRefExoticComponent<
-  React.PropsWithoutRef<ResponsiveImageProps> & React.RefAttributes<HTMLImageElement>
-> & { Source: React.FC<SourceProps> };
-
-const ResponsiveImage = forwardRef<HTMLImageElement, ResponsiveImageProps>(
-  ({
-    src,
-    width,
-    height,
-    alt,
-    sizes,
-    quality,
-    priority,
-    children,
-    ...rest
-  }, ref) => {
+export const ResponsiveImage = forwardRef<
+  HTMLImageElement,
+  ResponsiveImageProps
+>(
+  (
+    { src, width, height, alt, sizes, quality, priority, children, ...rest },
+    ref
+  ) => {
     if (src) {
       const { props } = getImageProps({
         src,
@@ -66,39 +48,3 @@ const ResponsiveImage = forwardRef<HTMLImageElement, ResponsiveImageProps>(
     }
   }
 );
-
-const ResponsiveImageWithStatics = ResponsiveImage as ResponsiveImageCompoundComponent;
-
-ResponsiveImageWithStatics.displayName = 'ResponsiveImage';
-
-ResponsiveImageWithStatics.Source = memo(
-  ({ src, width, height, sizes, media, quality, ...rest }: SourceProps) => {
-    if (src) {
-      const query = breakpoints[media] || media;
-      const { props } = getImageProps({
-        width,
-        height,
-        src,
-        sizes,
-        quality,
-        alt: ''
-      });
-      return (
-        <source
-          media={query}
-          src={props.src}
-          srcSet={props.srcSet}
-          width={props.width}
-          height={props.height}
-          sizes={props.sizes}
-          {...rest}
-        />
-      );
-    }
-  }
-);
-
-ResponsiveImageWithStatics.Source.displayName = 'ResponsiveImageSource';
-
-export { ResponsiveImageWithStatics as ResponsiveImage };
-export default ResponsiveImageWithStatics;

components/shared/ResponsiveImage/Source.tsx

+import React, { memo } from 'react';
+import { getImageProps } from 'next/image';
+import breakpoints from './breakpoints';
+
+export type IResponsiveImageSourceProps =
+  React.HTMLAttributes<HTMLSourceElement> & {
+    src: string;
+    width: number;
+    height: number;
+    media: string;
+    sizes: string;
+    quality?: number;
+  };
+
+export const Source = memo(
+  ({
+    src,
+    width,
+    height,
+    sizes,
+    media,
+    quality,
+    ...rest
+  }: IResponsiveImageSourceProps) => {
+    if (src) {
+      const query = breakpoints[media] || media;
+      const { props } = getImageProps({
+        width,
+        height,
+        src,
+        sizes,
+        quality,
+        alt: ''
+      });
+      return (
+        <source
+          media={query}
+          src={props.src}
+          srcSet={props.srcSet}
+          width={props.width}
+          height={props.height}
+          sizes={props.sizes}
+          {...rest}
+        />
+      );
+    }
+    return null;
+  }
+);
+
+Source.displayName = 'ResponsiveImageSource';

components/shared/ResponsiveImage/index.ts

 export * from './ResponsiveImage';
+export * from './Source';