"use client";
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
import { getStyles } from "../../../styles/styler.js";
import { Box } from "../../Box.js";
import { InputHelpTextInternal as InputHelpTextInternalMemo } from "./InputHelpTextInternal.js";
import { jsx } from "react/jsx-runtime";

//#region src/components/client/Input/InputHelpText.tsx
/**
* **📦 A component that displays helper text for input fields.**
*
* @componentType Client component
*
* @description
* A component that displays helper text for input fields.
*
* @see
* Check out the {@link https://uds.build/docs/components/input Input Docs} for more info
*
* @usage
* - Help text that isn't tied to a specific Input.
*
* @example
* ```tsx
* 'use client';
* import { InputHelpText } from "@yahoo/uds";
*
* <InputHelpText>
*   This is some helper text for the input field.
* </InputHelpText>
*```
*
* @related [Input](https://uds.build/docs/components/input).
**/
const InputHelpText = ({ size = "md", isFilled, ...props }) => {
	return /* @__PURE__ */ jsx(Box, {
		asChild: true,
		spacingTop: "2",
		className: { root: getStyles({
			inputSizeRoot: size,
			inputVariantRoot: "default",
			inputVariantValueRoot: !isFilled ? "empty" : "filled"
		}) }.root,
		children: /* @__PURE__ */ jsx(InputHelpTextInternalMemo, {
			size,
			isFilled,
			...props
		})
	});
};
InputHelpText.displayName = "InputHelpText";

//#endregion
export { InputHelpText };