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-overlay");
/**
 * @remarks \@since 6.0.0
 */ export function responsiveItemOverlay(options = {}) {
    const { className, position = "bottom" } = options;
    return cnb(styles({
        [position]: true,
        horizontal: position !== "top" && position !== "bottom" && position !== "middle"
    }), className);
}
/**
 * **Server Component**
 *
 * @example
 * Simple Example
 * ```tsx
 * import { ResponsiveItemContainer, ResponsiveItemOverlay } from "@react-md/core";
 * import type { ReactElement } from "react";
 *
 * function Example(): ReactElement {
 *   return (
 *     <ResponsiveItemContainer>
 *       <img alt="" src="/some-image.png" />
 *       <ResponsiveItemOverlay>
 *         <Typography type="headline-5" margin="none">
 *           This appears at the bottom by default.
 *         </Typography>
 *       </ResponsiveItemOverlay>
 *     </ResponsiveItemContainer>
 *   );
 * }
 * ```
 *
 * @see {@link ResponsiveItemOverlayPosition}
 *
 * @remarks \@since 6.0.0 Renamed from `MediaOverlay` to `ResponsiveItemOverlay`
 * and renders as a `<span>` instead of a `<div>`.
 */ export const ResponsiveItemOverlay = /*#__PURE__*/ forwardRef(function ResponsiveItemOverlay(props, ref) {
    const { className, children, position = "bottom", ...remaining } = props;
    return /*#__PURE__*/ _jsx("span", {
        ...remaining,
        ref: ref,
        className: responsiveItemOverlay({
            className,
            position
        }),
        children: children
    });
});

//# sourceMappingURL=ResponsiveItemOverlay.js.map