/**
 * Props of {@link Icon}
 */
export interface IconProps {
    /** Unique identifier for the icon element. */
    id?: string;
    /** The name of the icon to display. */
    name: string;
    /** The icon size. */
    size?: string;
    /** The icon color. */
    color?: string;
    /** Additional CSS class for custom styling. */
    className?: string;
    /** Event handler called when the icon is clicked. */
    onClick?: () => void;
}
/**
 * {@link iconSizes}
 */
export declare const iconSizes: {
    readonly extraSmall: "size-3";
    readonly small: "size-4";
    readonly medium: "size-5";
    readonly large: "size-6";
    readonly extralarge: "size-7";
};
/**
 * {@link iconNames}
 */
export declare const iconNames: {
    readonly visibility: "visibility";
    readonly visibilityOff: "visibilityOff";
    readonly chevronRight: "chevronRight";
    readonly chevronLeft: "chevronLeft";
    readonly chevronDown: "chevronDown";
    readonly chevronUp: "chevronUp";
    readonly trash: "trash";
    readonly edit: "edit";
    readonly cross: "cross";
    readonly bell: "bell";
    readonly dotsHorizontal: "dotsHorizontal";
    readonly magnifyingGlass: "magnifyingGlass";
    readonly plus: "plus";
    readonly check: "check";
    readonly caretSort: "caretSort";
    readonly caretDown: "caretDown";
    readonly caretUp: "caretUp";
    readonly arrowLeft: "arrowLeft";
    readonly arrowRight: "arrowRight";
    readonly doubleArrowLeft: "doubleArrowLeft";
    readonly doubleArrowRight: "doubleArrowRight";
    readonly link: "link";
    readonly dragHandleDots2: "dragHandleDots2";
    readonly calendar: "calendar";
    readonly globe: "globe";
    readonly gear: "gear";
    readonly exit: "exit";
    readonly person: "person";
    readonly fileText: "fileText";
    readonly envelopeClosed: "envelopeClosed";
    readonly backpack: "backpack";
    readonly pencil2: "pencil2";
    readonly mixerHorizontal: "mixerHorizontal";
    readonly hamburgerMenu: "hamburgerMenu";
    readonly dotFilled: "dotFilled";
    readonly refresh: "refresh";
    readonly eraser: "eraser";
    readonly facebookLogo: "facebookLogo";
    readonly microsoftLogo: "microsoftLogo";
    readonly googleLogo: "googleLogo";
    readonly filter: "filter";
    readonly dotsVerticalIcon: "dotsVerticalIcon";
    readonly questionMarkCircledIcon: "questionMarkCircledIcon";
    readonly caretLeftIcon: "caretLeftIcon";
    readonly chatBubbleIcon: "chatBubbleIcon";
    readonly share1Icon: "share1Icon";
    readonly linkBreak1Icon: "linkBreak1Icon";
    readonly dashboard: "dashboard";
    readonly listBulletIcon: "listBulletIcon";
    readonly eyeNoneIcon: "eyeNoneIcon";
    readonly eyeOpenIcon: "eyeOpenIcon";
    readonly counterClockwiseClockIcon: "counterClockwiseClockIcon";
    readonly enter: "enter";
    readonly desktop: "desktop";
    readonly sun: "sun";
    readonly moon: "moon";
    readonly cube: "cubeIcon";
    readonly clock: "clock";
    readonly image: "image";
    readonly camera: "camera";
    readonly mix: "mix";
    readonly archive: "archive";
    readonly upload: "upload";
    readonly group: "group";
    readonly playIcon: "playIcon";
    readonly brickWall: "brickWall";
    readonly messageIcon: "messageIcon";
};
/** @monorepo-internal */
export declare const defaultSidebarIconName: "mixerHorizontal";
/**
 * Icon component that provides access to Radix UI icons with standardized sizing and styling options
 *
 * @param IconProps {@link IconProps}
 *
 * @example
 * ```tsx
    <Icon name="chevronDown" size="size-5" color="text-primary" onClick={...}/>
 * ```
 */
export declare function Icon({ name, size, color, className, id, onClick }: IconProps): import("react").JSX.Element;
