import React from 'react';
import type {
  DotOverlap,
  DotSize,
  IconName,
  PinPlacement,
  SharedAccessibilityProps,
  SharedProps,
} from '@coinbase/cds-common/types';
import { type IconProps } from '../icons/Icon';
import { type BoxBaseProps } from '../layout/Box';
export type DotSymbolBaseProps = SharedProps &
  Pick<
    SharedAccessibilityProps,
    'accessibilityLabel' | 'accessibilityLabelledBy' | 'accessibilityHint'
  > & {
    /** Icon name to add to the dot. */
    iconName?: IconName;
    /** Size of the dot */
    size?: DotSize;
    /** Whether the icon is active */
    active?: boolean;
    /** The color of the icon */
    color?: IconProps['color'];
    background?: BoxBaseProps['background'];
    borderColor?: BoxBaseProps['borderColor'];
    /** Position of the dot */
    pin?: PinPlacement;
    /** The element that the dot will anchor to */
    children?: React.ReactNode;
    /** Indicates what shape dot is overlapping */
    overlap?: DotOverlap;
    /** Add an arbitrary ReactNode to the dot instead of an icon. */
    symbol?: React.ReactNode;
    /** Image source path */
    source?: string;
    style?: React.CSSProperties;
    className?: string;
    iconStyle?: React.CSSProperties;
    iconClassName?: string;
    imageStyle?: React.CSSProperties;
    imageClassName?: string;
  };
export type DotSymbolProps = DotSymbolBaseProps;
export declare const DotSymbol: React.MemoExoticComponent<
  (_props: DotSymbolProps) => import('react/jsx-runtime').JSX.Element
>;
//# sourceMappingURL=DotSymbol.d.ts.map