import { FixedElementProps, LottieInstance } from "../animation/types.cjs";
import { ReactNode } from "react";
//#region src/overlays/LottieError.d.ts
/** What this component owns. Every other prop belongs to the element. */
interface LottieErrorOwnProps {
  /** The animation to watch. Omit it inside a component that publishes one. */
  lottie?: LottieInstance;
  /** What to show when it fails. A short sentence unless you say otherwise. */
  children?: ReactNode;
  /** Added to the library's class rather than replacing it. */
  className?: string;
}
/** What {@link LottieError} accepts. */
type LottieErrorProps = FixedElementProps<LottieErrorOwnProps, "div">;
/**
 * What to show when the animation could not be loaded.
 *
 * Render it among the children of a component that publishes an animation, or
 * anywhere at all with the result of `useLottie`. It covers the box it sits in
 * once a load has failed and renders nothing the rest of the time.
 *
 * ```jsx
 * <Lottie src="/hero.json">
 *   <LottieDisplay />
 *   <LottieError />
 * </Lottie>
 * ```
 *
 * The reason is on the animation as `error`, and `reload()` is what tries
 * again, so a button of your own passed as children can offer both.
 *
 * It takes every attribute of the `div` it renders, and `ref` names that same
 * element. Its own rules are all zero-specificity, so any of them can be
 * replaced one property at a time from your own stylesheet. If your CSS lives
 * in cascade layers, declare `@layer lottie-react;` before your own styles so
 * the library's layer ranks below them.
 */
declare const LottieError: import("react").ForwardRefExoticComponent<LottieErrorOwnProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof LottieErrorOwnProps> & import("react").RefAttributes<HTMLDivElement>>;
//#endregion
export { LottieError, LottieErrorProps };