import React from 'react';
import type { IconName, SharedProps } from '@coinbase/cds-common/types';
import type { IconSize, IconSourcePixelSize } from '@coinbase/cds-common/types/IconSize';
import { type BoxBaseProps, type BoxDefaultElement, type BoxProps } from '../layout/Box';
export type IconBaseProps = SharedProps &
  Pick<
    BoxBaseProps,
    | 'padding'
    | 'paddingX'
    | 'paddingY'
    | 'paddingTop'
    | 'paddingEnd'
    | 'paddingBottom'
    | 'paddingStart'
  > & {
    /**
     * Size for a given icon.
     * @default m
     */
    size?: IconSize;
    /** Name of the icon, as defined in Figma. */
    name: IconName;
    /**
     * Fallback element to render if unable to find an icon with matching name
     * @default null
     * */
    fallback?: null | React.ReactNode;
    /**
     * Toggles the active and inactive state of the navigation icon
     * @default false
     */
    active?: boolean;
    /** @danger This is a migration escape hatch. It is not intended to be used normally. */
    dangerouslySetColor?: string;
  };
export type IconProps = IconBaseProps &
  BoxProps<BoxDefaultElement> & {
    /** Custom inline styles for individual elements of the Icon component */
    styles?: {
      /** Outer Box wrapper element */
      root?: React.CSSProperties;
      /** Inner icon glyph element */
      icon?: React.CSSProperties;
    };
    /** Custom class names for individual elements of the Icon component */
    classNames?: {
      /** Outer Box wrapper element */
      root?: string;
      /** Inner icon glyph element */
      icon?: string;
    };
  };
declare const getIconSourceSize: (iconSize: number) => IconSourcePixelSize;
export declare const Icon: React.MemoExoticComponent<
  React.ForwardRefExoticComponent<Omit<IconProps, 'ref'> & React.RefAttributes<HTMLElement>>
>;
export { getIconSourceSize };
//# sourceMappingURL=Icon.d.ts.map