/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
import { cx, getStyles } from "../../styles/styler.js";
import { Text } from "../Text.js";
import { forwardRef } from "react";
import { jsx } from "react/jsx-runtime";
//#region src/components/Banner/BannerDescription.tsx
/**
* **Styled description for use inside `BannerContent`.**
*
* @description
* Applies the Banner description typography tokens and truncates text to
* 3 lines. Use this subcomponent instead of the `description` prop when
* you need rich ReactNode content.
*
* @example
* ```tsx
* <Banner variant="alert" startIcon={Error}>
*   <BannerContent>
*     <BannerTitle>Something went wrong</BannerTitle>
*     <BannerDescription>
*       Please try again or <Link href="/support">contact support</Link>.
*     </BannerDescription>
*   </BannerContent>
* </Banner>
* ```
*
* @see {@link Banner} for the parent component
* @see {@link BannerContent} for the required wrapper
*/
const BannerDescription = forwardRef(function BannerDescription({ children, className, ...rest }, ref) {
	return /* @__PURE__ */ jsx(Text, {
		ref,
		className: cx(getStyles({
			bannerSizeDescription: "default",
			className: "w-full line-clamp-3"
		}), className),
		...rest,
		children
	});
});
BannerDescription.displayName = "BannerDescription";
//#endregion
export { BannerDescription };
