/// <reference types="react" />
export declare const createSvgElement: (svg: string, svgProps?: Record<string, unknown>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
export declare const computeIconsCoords: ({ svg, attachedIcons, }: {
    svg: string;
    attachedIcons: AttachedSvgIcon[];
}) => IconCoords[];
export declare const buildBondsHitboxes: ({ numAtoms, svg, isClickable, }: {
    numAtoms: number;
    svg: string;
    isClickable: boolean;
}) => SVGPathElement[];
export declare const buildAtomsHitboxes: ({ numAtoms, svg, clickableAtoms, isClickable, }: {
    numAtoms: number;
    svg: string;
    clickableAtoms: Set<number> | null;
    isClickable: boolean;
}) => SVGEllipseElement[];
export declare const applyUserStyles: ({ svg, numAtoms, atomsStyles, bondsStyles, }: {
    svg: string;
    numAtoms: number;
    atomsStyles: AtomsStyles | undefined;
    bondsStyles: BondsStyles | undefined;
}) => string;
export declare const appendEllipsesToSvg: (mainSvg: string, ellipsesSourceSvg: string | null) => string;
export interface AttachedSvgIcon {
    svg: string;
    atomIds: number[];
    bondIds: number[];
}
export interface IconCoords {
    svg: string;
    scale: number;
    placements: IconsPlacements[];
}
interface IconsPlacements {
    xTranslate: number;
    yTranslate: number;
}
export interface BondIdentifiers {
    bondId: string;
    startAtomId: string;
    endAtomId: string;
}
type CustomStyles = Record<string, string | number>;
export interface AtomsStyles {
    [atomId: number]: CustomStyles;
    default?: CustomStyles;
}
export interface BondsStyles {
    [bondId: number]: CustomStyles;
    [atomIds: `${number}-${number}`]: CustomStyles;
    [atomIds: `${number}-*`]: CustomStyles;
    [atomIds: `*-${number}`]: CustomStyles;
    default?: CustomStyles;
}
export {};