import { ImageField } from '../../state';
type ImageProps = {
    image: ImageField;
    dimensions?: {
        height: number;
        width: number;
        media?: string;
    }[];
    options?: {
        loading?: 'eager' | 'lazy';
        priority?: boolean;
    };
    className?: string;
};
/**
 * This ResponsiveImage component combines the optimization of the NextJS Image
 * component with our cmsImage function, which works with the resizing capabilities
 * of the MrRichards API.
 *
 * For most use cases, the NextJS Image will be more than sufficient. However,
 * as we cannot control the srcset of the NextJS Image there may be cases where
 * the aspect ratio of the rendered img mean we are requesting a large image, much
 * of which is being cropped out of view. In this case there may be more room
 * for improvement which the ResponsiveImage can provide.
 *
 * The default dimensions are suitable for fullscreen hero images where the height
 * on smaller screen devices is greater than the width (the widths are based off
 * the NextJS default srcset) but can be overwritten with the `dimensions` prop.
 *
 * @example
 * ```tsx
 * <ResponsiveImage
 *   image={{ src: property.mainPhoto, alt: property.displayAddress }}
 *   dimensions={[
 *      { height: 350, width: 240 },
 *      { height: 720, width: 540 },
 *      { height: 400, width: 900 },
 *   ]}
 *   options={{ loading: 'eager' }}
 * />
 * ```
 *
 * The default dimensions assume that the images are full width of the screen by
 * using the width of each `dimension` to set the media breakpoint. `dimensions`
 * which set only `width` and `height` will follow this format. However, an
 * optional `media` field can be added to each `dimension` object to set breakpoints
 * separate from the image width.
 *
 * @example
 * ```tsx
 * <ResponsiveImage
 *   image={{ src: property.mainPhoto, alt: property.displayAddress }}
 *   dimensions={[
 *      { height: 350, width: 240, media: '(max-width: 640px)' },
 *      { height: 720, width: 540, media: '(max-width: 720px)' },
 *      { height: 400, width: 900, media: '(max-width: 1200px)' },
 *   ]}
 * />
 *
 * ```
 */
export default function ResponsiveImage({ image, dimensions, options, className }: ImageProps): import("react/jsx-runtime").JSX.Element;
export {};
//# sourceMappingURL=responsive-image.d.ts.map