@payfit/unity-components/dist/esm/components/icon/Icon.d.ts

import { UnityIcon } from '@payfit/unity-icons';
import { VariantProps } from '@payfit/unity-themes';
import { HTMLAttributes } from 'react';
declare const icon: import('tailwind-variants').TVReturnType<{
    size: {
        20: string;
        24: string;
    };
    color: {
        'content.primary': string;
        'content.primary.enabled': string;
        'content.primary.hover': string;
        'content.primary.pressed': string;
        'content.primary.focus': string;
        'content.primary.active': string;
        'content.primary.disabled': string;
        'content.neutral': string;
        'content.neutral.enabled': string;
        'content.neutral.hover': string;
        'content.neutral.pressed': string;
        'content.neutral.focus': string;
        'content.neutral.active': string;
        'content.neutral.disabled': string;
        'content.neutral.low': string;
        'content.neutral.lowest': string;
        'content.neutral.lowest.enabled': string;
        'content.neutral.lowest.hover': string;
        'content.neutral.lowest.pressed': string;
        'content.neutral.lowest.focus': string;
        'content.neutral.lowest.active': string;
        'content.neutral.lowest.disabled': string;
        'content.danger': string;
        'content.danger.enabled': string;
        'content.danger.hover': string;
        'content.danger.pressed': string;
        'content.danger.focus': string;
        'content.danger.active': string;
        'content.danger.disabled': string;
        'content.warning': string;
        'content.warning.enabled': string;
        'content.warning.hover': string;
        'content.warning.pressed': string;
        'content.warning.focus': string;
        'content.warning.active': string;
        'content.warning.disabled': string;
        'content.success': string;
        'content.success.enabled': string;
        'content.success.hover': string;
        'content.success.pressed': string;
        'content.success.focus': string;
        'content.success.active': string;
        'content.success.disabled': string;
        'content.info': string;
        'content.info.enabled': string;
        'content.info.hover': string;
        'content.info.pressed': string;
        'content.info.focus': string;
        'content.info.active': string;
        'content.info.disabled': string;
        'content.promo': string;
        'content.form.enabled': string;
        'content.form.hover': string;
        'content.form.pressed': string;
        'content.form.focus': string;
        'content.form.active': string;
        'content.form.disabled': string;
        'content.form.read-only': string;
        'content.form.invalid': string;
        'content.inverted': string;
        'content.inverted.enabled': string;
        'content.inverted.hover': string;
        'content.inverted.pressed': string;
        'content.inverted.focus': string;
        'content.inverted.active': string;
        'content.inverted.disabled': string;
        inherit: string;
    };
    display: {
        block: string;
        inline: string;
    };
}, undefined, undefined, {
    size: {
        20: string;
        24: string;
    };
    color: {
        'content.primary': string;
        'content.primary.enabled': string;
        'content.primary.hover': string;
        'content.primary.pressed': string;
        'content.primary.focus': string;
        'content.primary.active': string;
        'content.primary.disabled': string;
        'content.neutral': string;
        'content.neutral.enabled': string;
        'content.neutral.hover': string;
        'content.neutral.pressed': string;
        'content.neutral.focus': string;
        'content.neutral.active': string;
        'content.neutral.disabled': string;
        'content.neutral.low': string;
        'content.neutral.lowest': string;
        'content.neutral.lowest.enabled': string;
        'content.neutral.lowest.hover': string;
        'content.neutral.lowest.pressed': string;
        'content.neutral.lowest.focus': string;
        'content.neutral.lowest.active': string;
        'content.neutral.lowest.disabled': string;
        'content.danger': string;
        'content.danger.enabled': string;
        'content.danger.hover': string;
        'content.danger.pressed': string;
        'content.danger.focus': string;
        'content.danger.active': string;
        'content.danger.disabled': string;
        'content.warning': string;
        'content.warning.enabled': string;
        'content.warning.hover': string;
        'content.warning.pressed': string;
        'content.warning.focus': string;
        'content.warning.active': string;
        'content.warning.disabled': string;
        'content.success': string;
        'content.success.enabled': string;
        'content.success.hover': string;
        'content.success.pressed': string;
        'content.success.focus': string;
        'content.success.active': string;
        'content.success.disabled': string;
        'content.info': string;
        'content.info.enabled': string;
        'content.info.hover': string;
        'content.info.pressed': string;
        'content.info.focus': string;
        'content.info.active': string;
        'content.info.disabled': string;
        'content.promo': string;
        'content.form.enabled': string;
        'content.form.hover': string;
        'content.form.pressed': string;
        'content.form.focus': string;
        'content.form.active': string;
        'content.form.disabled': string;
        'content.form.read-only': string;
        'content.form.invalid': string;
        'content.inverted': string;
        'content.inverted.enabled': string;
        'content.inverted.hover': string;
        'content.inverted.pressed': string;
        'content.inverted.focus': string;
        'content.inverted.active': string;
        'content.inverted.disabled': string;
        inherit: string;
    };
    display: {
        block: string;
        inline: string;
    };
}, undefined, import('tailwind-variants').TVReturnType<{
    size: {
        20: string;
        24: string;
    };
    color: {
        'content.primary': string;
        'content.primary.enabled': string;
        'content.primary.hover': string;
        'content.primary.pressed': string;
        'content.primary.focus': string;
        'content.primary.active': string;
        'content.primary.disabled': string;
        'content.neutral': string;
        'content.neutral.enabled': string;
        'content.neutral.hover': string;
        'content.neutral.pressed': string;
        'content.neutral.focus': string;
        'content.neutral.active': string;
        'content.neutral.disabled': string;
        'content.neutral.low': string;
        'content.neutral.lowest': string;
        'content.neutral.lowest.enabled': string;
        'content.neutral.lowest.hover': string;
        'content.neutral.lowest.pressed': string;
        'content.neutral.lowest.focus': string;
        'content.neutral.lowest.active': string;
        'content.neutral.lowest.disabled': string;
        'content.danger': string;
        'content.danger.enabled': string;
        'content.danger.hover': string;
        'content.danger.pressed': string;
        'content.danger.focus': string;
        'content.danger.active': string;
        'content.danger.disabled': string;
        'content.warning': string;
        'content.warning.enabled': string;
        'content.warning.hover': string;
        'content.warning.pressed': string;
        'content.warning.focus': string;
        'content.warning.active': string;
        'content.warning.disabled': string;
        'content.success': string;
        'content.success.enabled': string;
        'content.success.hover': string;
        'content.success.pressed': string;
        'content.success.focus': string;
        'content.success.active': string;
        'content.success.disabled': string;
        'content.info': string;
        'content.info.enabled': string;
        'content.info.hover': string;
        'content.info.pressed': string;
        'content.info.focus': string;
        'content.info.active': string;
        'content.info.disabled': string;
        'content.promo': string;
        'content.form.enabled': string;
        'content.form.hover': string;
        'content.form.pressed': string;
        'content.form.focus': string;
        'content.form.active': string;
        'content.form.disabled': string;
        'content.form.read-only': string;
        'content.form.invalid': string;
        'content.inverted': string;
        'content.inverted.enabled': string;
        'content.inverted.hover': string;
        'content.inverted.pressed': string;
        'content.inverted.focus': string;
        'content.inverted.active': string;
        'content.inverted.disabled': string;
        inherit: string;
    };
    display: {
        block: string;
        inline: string;
    };
}, undefined, undefined, unknown, unknown, undefined>>;
export type IconProps = VariantProps<typeof icon> & Pick<HTMLAttributes<HTMLSpanElement>, 'className' | 'role' | 'aria-labelledby' | 'aria-hidden'> & {
    /** The icon to render from the Unity icon set */
    src: UnityIcon;
    /**
     * Alternative text for the icon, used for accessibility
     * @default ''
     */
    alt?: string;
    /**
     * The icon's color. Use one of the allowed tokens or the `inherit` value for using the parent's foreground color
     * @default 'inherit'
     */
    color?: VariantProps<typeof icon>['color'];
    /**
     * The icon's size.
     * @default 20
     */
    size?: VariantProps<typeof icon>['size'];
};
/**
 * The `Icon` component displays an icon from the Unity icon set.
 */
export declare function Icon({ alt, color, size, src, role, display, ...rest }: IconProps): import("react/jsx-runtime").JSX.Element;
export {};