import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import { responsiveItemOverlay } from "./responsiveItemOverlayStyles.js";
/**
 * @example Simple Example
 * ```tsx
 * import { CardContent } from "@react-md/core/card/CardContent";
 * import { ResponsiveItemOverlay } from "@react-md/core/responsive-item/ResponsiveItemOverlay";
 * import { Typography } from "@react-md/core/typography/Typography";
 * import type { ReactElement } from "react";
 *
 * function Example(): ReactElement {
 *   return (
 *     <CardContent>
 *       <img alt="" src="/some-image.png" />
 *       <ResponsiveItemOverlay>
 *         <Typography type="headline-5" margin="none">
 *           This appears at the bottom by default.
 *         </Typography>
 *       </ResponsiveItemOverlay>
 *     </CardContent>
 *   );
 * }
 * ```
 *
 * @see {@link https://react-md.dev/components/responsive-item | ResponsiveItem Demos}
 * @see {@link ResponsiveItemOverlayPosition}
 * @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