import * as React from "react";
/**
 * PBS Circle Crop: a perfect circle that bleeds off THREE sides of the layout, holding text or imagery.
 * Never bleed off only 1-2 sides, never off-center, never non-circular.
 * @dsCard components/graphic/graphic.card.html
 * @startingPoint section="Graphic Elements" subtitle="Circle Crop hero panel" viewport="700x300"
 */
export interface CircleCropProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Which edge the circle bulges from. @default "left" */
  side?: "left" | "right" | "top" | "bottom";
  /** Circle fill: solid blues/white, Primary Gradient, or 80% gradient overlay (over imagery). @default "navy" */
  fill?: "pbs" | "navy" | "medium" | "white" | "gradient" | "gradient-overlay" | string;
  /** Image URL to fill the circle instead of a color. */
  src?: string;
  /** Circle diameter as a multiple of the cross-axis (must bleed 3 sides). @default 1.7 */
  size?: number;
  /** How far across the layout the circle reaches (0-1). @default 0.58 */
  extent?: number;
  /** Panel background: solid blues/white or gradient. @default "white" */
  background?: "pbs" | "navy" | "medium" | "white" | "gradient" | string;
  /** Panel background image URL. */
  backgroundSrc?: string;
  circleStyle?: React.CSSProperties;
  children?: React.ReactNode;
}
export function CircleCrop(props: CircleCropProps): JSX.Element;