import { jsx as _jsx } from "react/jsx-runtime";
import { formMessageCounter } from "./formMessageStyles.js";
/**
 * **Server Component**
 *
 * This component can be used to create a "counter" within the
 * {@link FormMessage} component.
 *
 * Note: This is really only useful when using the {@link FormMessage} component
 * without a {@link TextField}.
 *
 * @example
 * Example Usage
 * ```ts
 * interface ExampleProps {
 *   min: number;
 *   max: number;
 * }
 *
 * function Example({ min, max }: ExampleProps) {
 *   return (
 *     <FormMessage disableWrap>
 *       <FormMessageCounter>
 *         {`${min} / ${max}`}
 *       </FormMessageCounter>
 *     </FormMessage>
 *   );
 * }
 * ```
 *
 * @remarks \@since 2.9.0
 */ export function FormMessageCounter(props) {
    const { children, className, ...remaining } = props;
    return /*#__PURE__*/ _jsx("span", {
        ...remaining,
        className: formMessageCounter({
            className
        }),
        children: children
    });
}

//# sourceMappingURL=FormMessageCounter.js.map