/*! © 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/BannerTitle.tsx
/**
* **Styled title for use inside `BannerContent`.**
*
* @description
* Applies the Banner title typography tokens. Renders a single line of text.
* Use this subcomponent instead of the `title` prop when you need rich
* ReactNode content (e.g. bold segments, inline icons).
*
* @example
* ```tsx
* <Banner variant="info" startIcon={Info}>
*   <BannerContent>
*     <BannerTitle>Update <strong>available</strong></BannerTitle>
*     <BannerDescription>A new version is ready to install.</BannerDescription>
*   </BannerContent>
* </Banner>
* ```
*
* @see {@link Banner} for the parent component
* @see {@link BannerContent} for the required wrapper
*/
const BannerTitle = forwardRef(function BannerTitle({ children, className, ...rest }, ref) {
	return /* @__PURE__ */ jsx(Text, {
		ref,
		className: cx(getStyles({ bannerSizeTitle: "default" }), "w-full truncate", className),
		...rest,
		children
	});
});
BannerTitle.displayName = "BannerTitle";
//#endregion
export { BannerTitle };
