import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import { Typography } from "../typography/Typography.js";
import { legend } from "./legendStyles.js";
/**
 * This should be used within a `Fieldset` to apply a label.
 *
 * @example Simple Example
 * ```tsx
 * <Fieldset>
 *   <Legend>I am legend</Legend>
 *   {children}
 * </Fieldset>
 * ```
 *
 * @example Visible to Screen readers only
 * ```tsx
 * <Fieldset>
 *   <Legend srOnly>I am legend</Legend>
 *   {children}
 * </Fieldset>
 * ```
 *
 * @example Acting as a floating label
 * ```tsx
 * <Fieldset floatingLegend>
 *   <Legend floating>I am legend</Legend>
 *   {children}
 * </Fieldset>
 * ```
 *
 * @see {@link https://react-md.dev/components/fieldset | Fieldset Demos}
 * @since 6.0.0
 */ export const Legend = /*#__PURE__*/ forwardRef(function Legend(props, ref) {
    const { srOnly, floating, theme, gap, dense, active, error, disabled, stacked, reversed, className, children, ...remaining } = props;
    return /*#__PURE__*/ _jsx(Typography, {
        ...remaining,
        as: "legend",
        ref: ref,
        className: legend({
            srOnly,
            floating,
            theme,
            gap,
            dense,
            active,
            error,
            disabled,
            stacked,
            reversed,
            className
        }),
        children: children
    });
});

//# sourceMappingURL=Legend.js.map