import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import { responsiveItem } from "./responsiveItemStyles.js";
/**
 * @example Image Example
 * ```tsx
 * import { ResponsiveItem } from "@react-md/core/responsive-item/ResponsiveItem";
 * import type { ReactElement } from "react";
 *
 * function Example(): ReactElement {
 *   return (
 *     <ResponsiveItem>
 *       <img alt="" src="/some-image.png" />
 *     </ResponsiveItem>
 *   );
 * }
 * ```
 *
 * @example Iframe Example
 * ```tsx
 * import { ResponsiveItem } from "@react-md/core/responsive-item/ResponsiveItem";
 * import type { ReactElement } from "react";
 *
 * function Example(): ReactElement {
 *   return (
 *     <ResponsiveItem>
 *       <iframe
 *         src="https://youtube.com/some-video-url"
 *         title="Some YouTube video"
 *         allowFullScreen
 *       />
 *     </ResponsiveItem>
 *   );
 * }
 * ```
 *
 * @example Forced Aspect Ratio
 * ```tsx
 * import { ResponsiveItem } from "@react-md/core/responsive-item/ResponsiveItem";
 * import type { ReactElement } from "react";
 *
 * function Example(): ReactElement {
 *   return (
 *     <ResponsiveItem aspectRatio="16-9">
 *       <img alt="" src="/some-image.png" />
 *     </ResponsiveItem>
 *   );
 * }
 * ```
 *
 * @see {@link https://react-md.dev/components/responsive-item | ResponsiveItem Demos}
 * @since 6.0.0 Renamed from `MediaContainer` to
 * `ResponsiveItem` and renders a `<span>` instead of a `<div>`.
 */ export const ResponsiveItem = /*#__PURE__*/ forwardRef(function ResponsiveItem(props, ref) {
    const { className, fullWidth = false, aspectRatio, responsive = "auto", children, ...remaining } = props;
    return /*#__PURE__*/ _jsx("span", {
        ...remaining,
        ref: ref,
        className: responsiveItem({
            className,
            fullWidth,
            aspectRatio,
            responsive
        }),
        children: children
    });
});

//# sourceMappingURL=ResponsiveItem.js.map