import * as React from "react";
/**
 * PBS Line and Highlight: a translucent white line (20-30% opacity, 8-20px thick) running across
 * the layout, with ONE solid highlight segment (Teal, Yellow, Coral, or White) sized to the key
 * text it marks. DIGITAL/ON-AIR ONLY; never in print. Only on PBS Blue, Navy, or Medium Blue
 * backgrounds (solid or overlay); never on white. Never slanted, curved, or multi-highlight.
 * @dsCard components/graphic/graphic.card.html
 */
export interface LineHighlightProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Line direction. @default "vertical" */
  orientation?: "vertical" | "horizontal";
  /** Highlight color. @default "yellow" */
  color?: "teal" | "yellow" | "coral" | "white";
  /** Line thickness in px (brand range 8-20). @default 12 */
  thickness?: number;
  /** Padding between line and text, as a multiple of thickness (brand range 2-4). @default 2 */
  gap?: number;
  /** White line opacity (brand range .2-.3). @default 0.25 */
  lineOpacity?: number;
  /** The key text being highlighted (bold). */
  highlight?: React.ReactNode;
  /** Supporting text after/below the highlight. */
  children?: React.ReactNode;
}
export function LineHighlight(props: LineHighlightProps): JSX.Element;