import * as React from "react";
/**
 * The signature "brand in motion" print device: a photo cropped by one large circular arc, with a thin
 * accent-color rim following the curve. Used on report covers and section dividers. Anchor the circle at a
 * corner with `corner`, or place its center exactly with `at` (the approved report cover uses
 * at="14.7% 111%" with a radius of 85% of the page width; the pillar divider uses at="20.6% 112%").
 * @dsCard components/editorial/editorial.card.html
 * @startingPoint section="Editorial" subtitle="Curved photo mask (print motif)" viewport="700x260"
 */
export interface CurvedPhotoMaskProps {
  src: string;
  alt?: string;
  /** Corner the curve emanates from. @default "bottom-left" */
  corner?: "bottom-left" | "bottom-right" | "top-left" | "top-right";
  /** Circle center as a CSS position ("20% 110%"); overrides `corner`. */
  at?: string;
  /** Circle radius as CSS length/percent; smaller cuts off more of the photo. @default "78%" */
  radius?: string;
  /** Rim/background color revealed outside the curve. @default "var(--accent-teal)" */
  accent?: string;
  /** Rim thickness in px; 0 hides the rim. @default 4 */
  rim?: number;
  /** object-position for the photo. @default "50% 50%" */
  position?: string;
  height?: number | string;
  style?: React.CSSProperties;
}
export function CurvedPhotoMask(props: CurvedPhotoMaskProps): JSX.Element;