feat(shared): forwardRef support for ResponsiveImage and ResponsiveVideo components

- ResponsiveImage now forwards ref to underlying img and keeps Source subcomponent
- ResponsiveVideo now forwards ref to underlying video and merges refs safely

BREAKING CHANGE: Consumers can now pass refs; no API removals

components/shared/ResponsiveImage/ResponsiveImage.tsx

-import { memo } from 'react';
-import React from 'react';
+import React, { forwardRef, memo } from 'react';
 import { getImageProps } from 'next/image';
 import breakpoints from './breakpoints';
 
@@ -31,9 +30,12 @@ export interface SourceProps extends React.HTMLAttributes<HTMLSourceElement> {
   quality?: number;
 }
 
-export const ResponsiveImage: React.FC<ResponsiveImageProps> & {
-  Source: React.FC<SourceProps>;
-} = ({
+type ResponsiveImageCompoundComponent = React.ForwardRefExoticComponent<
+  React.PropsWithoutRef<ResponsiveImageProps> & React.RefAttributes<HTMLImageElement>
+> & { Source: React.FC<SourceProps> };
+
+const ResponsiveImage = forwardRef<HTMLImageElement, ResponsiveImageProps>(
+  ({
     src,
     width,
     height,
@@ -43,7 +45,7 @@ export const ResponsiveImage: React.FC<ResponsiveImageProps> & {
     priority,
     children,
     ...rest
-}) => {
+  }, ref) => {
     if (src) {
       const { props } = getImageProps({
         src,
@@ -58,13 +60,18 @@ export const ResponsiveImage: React.FC<ResponsiveImageProps> & {
       return (
         <picture>
           {children}
-        <img {...props} {...rest} />
+          <img ref={ref} {...props} {...rest} />
         </picture>
       );
     }
-};
+  }
+);
+
+const ResponsiveImageWithStatics = ResponsiveImage as ResponsiveImageCompoundComponent;
+
+ResponsiveImageWithStatics.displayName = 'ResponsiveImage';
 
-ResponsiveImage.Source = memo(
+ResponsiveImageWithStatics.Source = memo(
   ({ src, width, height, sizes, media, quality, ...rest }: SourceProps) => {
     if (src) {
       const query = breakpoints[media] || media;
@@ -91,7 +98,7 @@ ResponsiveImage.Source = memo(
   }
 );
 
-ResponsiveImage.displayName = 'ResponsiveImage';
-ResponsiveImage.Source.displayName = 'ResponsiveImageSource';
+ResponsiveImageWithStatics.Source.displayName = 'ResponsiveImageSource';
 
-export default ResponsiveImage;
+export { ResponsiveImageWithStatics as ResponsiveImage };
+export default ResponsiveImageWithStatics;

components/shared/ResponsiveVideo/ResponsiveVideo.tsx

 'use client';
 
-import React, { useState, useEffect, useRef } from 'react';
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import breakpoints from './breakpoints';
 
 export interface ResponsiveVideoProps
@@ -21,17 +21,26 @@ export interface ResponsiveVideoProps
   autoPlayFallback?: React.ReactNode;
 }
 
-const ResponsiveVideo = ({
+const ResponsiveVideo = forwardRef<HTMLVideoElement, ResponsiveVideoProps>(({ 
   src,
   srcSet,
   autoPlay,
   autoPlayFallback,
   ...rest
-}: ResponsiveVideoProps) => {
+}, ref) => {
   const [isAutoPlayFailed, setIsAutoPlayFailed] = useState(false);
   const [currentSrc, setCurrentSrc] = useState(src);
   const videoRef = useRef<HTMLVideoElement>(null);
 
+  const setRefs = (node: HTMLVideoElement | null) => {
+    videoRef.current = node;
+    if (typeof ref === 'function') {
+      ref(node);
+    } else if (ref) {
+      (ref as React.MutableRefObject<HTMLVideoElement | null>).current = node;
+    }
+  };
+
   useEffect(() => {
     const handleResize = () => {
       /** find the set that matches current media query */
@@ -82,8 +91,8 @@ const ResponsiveVideo = ({
   return isAutoPlayFailed && autoPlayFallback ? (
     autoPlayFallback
   ) : (
-    <video ref={videoRef} src={currentSrc} {...rest} />
+    <video ref={setRefs} src={currentSrc} {...rest} />
   );
-};
+});
 
 export default ResponsiveVideo;