import * as React from 'react';
import { M as MediaItem, O as OptixFlowConfig } from './blocks-DL92rOxr.js';
import 'class-variance-authority';
import '@page-speed/pressable';
import '@opensite/hooks/usePlatformFromUrl';

type MediaAspectRatioVariant = "square" | "horizontal" | "vertical" | number;
type MediaAspectRatioBreakpoint = "sm" | "md" | "lg" | "xl" | "2xl";
interface ResponsiveMediaAspectRatioProps {
    desktop?: MediaAspectRatioVariant;
    mobile?: MediaAspectRatioVariant;
}
interface MediaAspectRatioProps {
    /**
     * Shared wrapper for the mobile + desktop viewport containers.
     */
    containerClassName?: string;
    /**
     * Mobile-only viewport wrapper classes.
     */
    mobileClassName?: string;
    /**
     * Desktop-only viewport wrapper classes.
     */
    desktopClassName?: string;
    /**
     * Shared frame classes applied to the aspect-ratio container for both viewports.
     * Useful for radius, shadow, borders, and overflow behavior.
     */
    frameClassName?: string;
    /**
     * Mobile-only frame classes.
     */
    mobileFrameClassName?: string;
    /**
     * Desktop-only frame classes.
     */
    desktopFrameClassName?: string;
    /**
     * Shared image/video element classes.
     * Defaults are applied first so overrides can be passed here or through `mediaItem`.
     */
    mediaClassName?: string;
    /**
     * Additional image-only classes.
     */
    imageClassName?: string;
    /**
     * Additional video-only classes.
     */
    videoClassName?: string;
    /**
     * Standardized media payload used across blocks.
     */
    mediaItem?: MediaItem;
    /**
     * Optional OptixFlow image optimization config.
     */
    optixFlowConfig?: OptixFlowConfig;
    /**
     * Responsive aspect-ratio values.
     * @default { desktop: "square", mobile: "square" }
     */
    deviceAspectRatios?: ResponsiveMediaAspectRatioProps;
    /**
     * Breakpoint where the component switches from the mobile viewport wrapper
     * to the desktop viewport wrapper.
     * @default "lg"
     */
    breakpoint?: MediaAspectRatioBreakpoint;
}
declare const MEDIA_ASPECT_RATIOS: Record<Exclude<MediaAspectRatioVariant, number>, number>;
declare function MediaAspectRatio({ containerClassName, mobileClassName, desktopClassName, frameClassName, mobileFrameClassName, desktopFrameClassName, mediaClassName, imageClassName, videoClassName, mediaItem, optixFlowConfig, deviceAspectRatios, breakpoint, }: MediaAspectRatioProps): React.JSX.Element | null;

export { MEDIA_ASPECT_RATIOS, MediaAspectRatio, type MediaAspectRatioBreakpoint, type MediaAspectRatioProps, type MediaAspectRatioVariant, type ResponsiveMediaAspectRatioProps };
