import { jsx as _jsx } from "react/jsx-runtime";
import { cnb } from "cnbuilder";
import { forwardRef } from "react";
import { bem } from "../utils/bem.js";
const styles = bem("rmd-responsive-item-container");
/** @since 6.0.0 */ export function responsiveItemContainer(options = {}) {
    const { className, fullWidth = false, aspectRatio = "", responsive = "auto" } = options;
    return cnb(styles({
        auto: responsive !== "manual",
        "auto-scale": responsive === "container",
        "aspect-ratio": aspectRatio,
        [aspectRatio]: aspectRatio,
        "full-width": fullWidth
    }), className);
}
/**
 * **Server Component**
 *
 * @example Image Example
 * ```tsx
 * import { ResponsiveItemContainer } from "@react-md/core";
 * import type { ReactElement } from "react";
 *
 * function Example(): ReactElement {
 *   return (
 *     <ResponsiveItemContainer>
 *       <img alt="" src="/some-image.png" />
 *     </ResponsiveItemContainer>
 *   );
 * }
 * ```
 *
 * @example Iframe Example
 * ```tsx
 * import { ResponsiveItemContainer } from "@react-md/core";
 * import type { ReactElement } from "react";
 *
 * function Example(): ReactElement {
 *   return (
 *     <ResponsiveItemContainer>
 *       <iframe
 *         src="https://youtube.com/some-video-url"
 *         title="Some YouTube video"
 *         allowFullScreen
 *       />
 *     </ResponsiveItemContainer>
 *   );
 * }
 * ```
 *
 * @example Forced Aspect Ratio
 * ```tsx
 * import { ResponsiveItemContainer } from "@react-md/core";
 * import type { ReactElement } from "react";
 *
 * function Example(): ReactElement {
 *   return (
 *     <ResponsiveItemContainer aspectRatio="16-9">
 *       <img alt="" src="/some-image.png" />
 *     </ResponsiveItemContainer>
 *   );
 * }
 * ```
 *
 * @since 6.0.0 Renamed from `MediaContainer` to
 * `ResponsiveItemContainer` and renders a `<span>` instead of a `<div>`.
 */ export const ResponsiveItemContainer = /*#__PURE__*/ forwardRef(function ResponsiveItemContainer(props, ref) {
    const { className, fullWidth = false, aspectRatio, responsive = "auto", children, ...remaining } = props;
    return /*#__PURE__*/ _jsx("span", {
        ...remaining,
        ref: ref,
        className: responsiveItemContainer({
            className,
            fullWidth,
            aspectRatio,
            responsive
        }),
        children: children
    });
});

//# sourceMappingURL=ResponsiveItemContainer.js.map