@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: "uy:w-250 uy:h-250";
        24: "uy:w-300 uy:h-300";
    };
    color: {
        'content.primary': "uy:text-content-primary";
        'content.primary.enabled': "uy:text-content-primary-enabled";
        'content.primary.hover': "uy:text-content-primary-hover";
        'content.primary.pressed': "uy:text-content-primary-pressed";
        'content.primary.focus': "uy:text-content-primary-focus";
        'content.primary.active': "uy:text-content-primary-active";
        'content.primary.disabled': "uy:text-content-primary-disabled";
        'content.neutral': "uy:text-content-neutral";
        'content.neutral.enabled': "uy:text-content-neutral-enabled";
        'content.neutral.hover': "uy:text-content-neutral-hover";
        'content.neutral.pressed': "uy:text-content-neutral-pressed";
        'content.neutral.focus': "uy:text-content-neutral-focus";
        'content.neutral.active': "uy:text-content-neutral-active";
        'content.neutral.disabled': "uy:text-content-neutral-disabled";
        'content.neutral.low': "uy:text-content-neutral-low";
        'content.neutral.lowest': "uy:text-content-neutral-lowest";
        'content.neutral.lowest.enabled': "uy:text-content-neutral-lowest-enabled";
        'content.neutral.lowest.hover': "uy:text-content-neutral-lowest-hover";
        'content.neutral.lowest.pressed': "uy:text-content-neutral-lowest-pressed";
        'content.neutral.lowest.focus': "uy:text-content-neutral-lowest-focus";
        'content.neutral.lowest.active': "uy:text-content-neutral-lowest-active";
        'content.neutral.lowest.disabled': "uy:text-content-neutral-lowest-disabled";
        'content.danger': "uy:text-content-danger";
        'content.danger.enabled': "uy:text-content-danger-enabled";
        'content.danger.hover': "uy:text-content-danger-hover";
        'content.danger.pressed': "uy:text-content-danger-pressed";
        'content.danger.focus': "uy:text-content-danger-focus";
        'content.danger.active': "uy:text-content-danger-active";
        'content.danger.disabled': "uy:text-content-danger-disabled";
        'content.warning': "uy:text-content-warning";
        'content.warning.enabled': "uy:text-content-warning-enabled";
        'content.warning.hover': "uy:text-content-warning-hover";
        'content.warning.pressed': "uy:text-content-warning-pressed";
        'content.warning.focus': "uy:text-content-warning-focus";
        'content.warning.active': "uy:text-content-warning-active";
        'content.warning.disabled': "uy:text-content-warning-disabled";
        'content.success': "uy:text-content-success";
        'content.success.enabled': "uy:text-content-success-enabled";
        'content.success.hover': "uy:text-content-success-hover";
        'content.success.pressed': "uy:text-content-success-pressed";
        'content.success.focus': "uy:text-content-success-focus";
        'content.success.active': "uy:text-content-success-active";
        'content.success.disabled': "uy:text-content-success-disabled";
        'content.info': "uy:text-content-info";
        'content.info.enabled': "uy:text-content-info-enabled";
        'content.info.hover': "uy:text-content-info-hover";
        'content.info.pressed': "uy:text-content-info-pressed";
        'content.info.focus': "uy:text-content-info-focus";
        'content.info.active': "uy:text-content-info-active";
        'content.info.disabled': "uy:text-content-info-disabled";
        'content.promo': "uy:text-content-promo";
        'content.form.enabled': "uy:text-content-form";
        'content.form.hover': "uy:text-content-form-hover";
        'content.form.pressed': "uy:text-content-form-pressed";
        'content.form.focus': "uy:text-content-form-focus";
        'content.form.active': "uy:text-content-form-active";
        'content.form.disabled': "uy:text-content-form-disabled";
        'content.form.read-only': "uy:text-content-form-read-only";
        'content.form.invalid': "uy:text-content-form-invalid";
        'content.inverted': "uy:text-content-inverted";
        'content.inverted.enabled': "uy:text-content-inverted-enabled";
        'content.inverted.hover': "uy:text-content-inverted-hover";
        'content.inverted.pressed': "uy:text-content-inverted-pressed";
        'content.inverted.focus': "uy:text-content-inverted-focus";
        'content.inverted.active': "uy:text-content-inverted-active";
        'content.inverted.disabled': "uy:text-content-inverted-disabled";
        inherit: "uy:text-inherit";
    };
    display: {
        block: "uy:block";
        inline: "uy:inline-block";
    };
}, undefined, undefined, {
    size: {
        20: "uy:w-250 uy:h-250";
        24: "uy:w-300 uy:h-300";
    };
    color: {
        'content.primary': "uy:text-content-primary";
        'content.primary.enabled': "uy:text-content-primary-enabled";
        'content.primary.hover': "uy:text-content-primary-hover";
        'content.primary.pressed': "uy:text-content-primary-pressed";
        'content.primary.focus': "uy:text-content-primary-focus";
        'content.primary.active': "uy:text-content-primary-active";
        'content.primary.disabled': "uy:text-content-primary-disabled";
        'content.neutral': "uy:text-content-neutral";
        'content.neutral.enabled': "uy:text-content-neutral-enabled";
        'content.neutral.hover': "uy:text-content-neutral-hover";
        'content.neutral.pressed': "uy:text-content-neutral-pressed";
        'content.neutral.focus': "uy:text-content-neutral-focus";
        'content.neutral.active': "uy:text-content-neutral-active";
        'content.neutral.disabled': "uy:text-content-neutral-disabled";
        'content.neutral.low': "uy:text-content-neutral-low";
        'content.neutral.lowest': "uy:text-content-neutral-lowest";
        'content.neutral.lowest.enabled': "uy:text-content-neutral-lowest-enabled";
        'content.neutral.lowest.hover': "uy:text-content-neutral-lowest-hover";
        'content.neutral.lowest.pressed': "uy:text-content-neutral-lowest-pressed";
        'content.neutral.lowest.focus': "uy:text-content-neutral-lowest-focus";
        'content.neutral.lowest.active': "uy:text-content-neutral-lowest-active";
        'content.neutral.lowest.disabled': "uy:text-content-neutral-lowest-disabled";
        'content.danger': "uy:text-content-danger";
        'content.danger.enabled': "uy:text-content-danger-enabled";
        'content.danger.hover': "uy:text-content-danger-hover";
        'content.danger.pressed': "uy:text-content-danger-pressed";
        'content.danger.focus': "uy:text-content-danger-focus";
        'content.danger.active': "uy:text-content-danger-active";
        'content.danger.disabled': "uy:text-content-danger-disabled";
        'content.warning': "uy:text-content-warning";
        'content.warning.enabled': "uy:text-content-warning-enabled";
        'content.warning.hover': "uy:text-content-warning-hover";
        'content.warning.pressed': "uy:text-content-warning-pressed";
        'content.warning.focus': "uy:text-content-warning-focus";
        'content.warning.active': "uy:text-content-warning-active";
        'content.warning.disabled': "uy:text-content-warning-disabled";
        'content.success': "uy:text-content-success";
        'content.success.enabled': "uy:text-content-success-enabled";
        'content.success.hover': "uy:text-content-success-hover";
        'content.success.pressed': "uy:text-content-success-pressed";
        'content.success.focus': "uy:text-content-success-focus";
        'content.success.active': "uy:text-content-success-active";
        'content.success.disabled': "uy:text-content-success-disabled";
        'content.info': "uy:text-content-info";
        'content.info.enabled': "uy:text-content-info-enabled";
        'content.info.hover': "uy:text-content-info-hover";
        'content.info.pressed': "uy:text-content-info-pressed";
        'content.info.focus': "uy:text-content-info-focus";
        'content.info.active': "uy:text-content-info-active";
        'content.info.disabled': "uy:text-content-info-disabled";
        'content.promo': "uy:text-content-promo";
        'content.form.enabled': "uy:text-content-form";
        'content.form.hover': "uy:text-content-form-hover";
        'content.form.pressed': "uy:text-content-form-pressed";
        'content.form.focus': "uy:text-content-form-focus";
        'content.form.active': "uy:text-content-form-active";
        'content.form.disabled': "uy:text-content-form-disabled";
        'content.form.read-only': "uy:text-content-form-read-only";
        'content.form.invalid': "uy:text-content-form-invalid";
        'content.inverted': "uy:text-content-inverted";
        'content.inverted.enabled': "uy:text-content-inverted-enabled";
        'content.inverted.hover': "uy:text-content-inverted-hover";
        'content.inverted.pressed': "uy:text-content-inverted-pressed";
        'content.inverted.focus': "uy:text-content-inverted-focus";
        'content.inverted.active': "uy:text-content-inverted-active";
        'content.inverted.disabled': "uy:text-content-inverted-disabled";
        inherit: "uy:text-inherit";
    };
    display: {
        block: "uy:block";
        inline: "uy:inline-block";
    };
}, undefined, import('tailwind-variants').TVReturnTypeLike<{
    size: {
        20: "uy:w-250 uy:h-250";
        24: "uy:w-300 uy:h-300";
    };
    color: {
        'content.primary': "uy:text-content-primary";
        'content.primary.enabled': "uy:text-content-primary-enabled";
        'content.primary.hover': "uy:text-content-primary-hover";
        'content.primary.pressed': "uy:text-content-primary-pressed";
        'content.primary.focus': "uy:text-content-primary-focus";
        'content.primary.active': "uy:text-content-primary-active";
        'content.primary.disabled': "uy:text-content-primary-disabled";
        'content.neutral': "uy:text-content-neutral";
        'content.neutral.enabled': "uy:text-content-neutral-enabled";
        'content.neutral.hover': "uy:text-content-neutral-hover";
        'content.neutral.pressed': "uy:text-content-neutral-pressed";
        'content.neutral.focus': "uy:text-content-neutral-focus";
        'content.neutral.active': "uy:text-content-neutral-active";
        'content.neutral.disabled': "uy:text-content-neutral-disabled";
        'content.neutral.low': "uy:text-content-neutral-low";
        'content.neutral.lowest': "uy:text-content-neutral-lowest";
        'content.neutral.lowest.enabled': "uy:text-content-neutral-lowest-enabled";
        'content.neutral.lowest.hover': "uy:text-content-neutral-lowest-hover";
        'content.neutral.lowest.pressed': "uy:text-content-neutral-lowest-pressed";
        'content.neutral.lowest.focus': "uy:text-content-neutral-lowest-focus";
        'content.neutral.lowest.active': "uy:text-content-neutral-lowest-active";
        'content.neutral.lowest.disabled': "uy:text-content-neutral-lowest-disabled";
        'content.danger': "uy:text-content-danger";
        'content.danger.enabled': "uy:text-content-danger-enabled";
        'content.danger.hover': "uy:text-content-danger-hover";
        'content.danger.pressed': "uy:text-content-danger-pressed";
        'content.danger.focus': "uy:text-content-danger-focus";
        'content.danger.active': "uy:text-content-danger-active";
        'content.danger.disabled': "uy:text-content-danger-disabled";
        'content.warning': "uy:text-content-warning";
        'content.warning.enabled': "uy:text-content-warning-enabled";
        'content.warning.hover': "uy:text-content-warning-hover";
        'content.warning.pressed': "uy:text-content-warning-pressed";
        'content.warning.focus': "uy:text-content-warning-focus";
        'content.warning.active': "uy:text-content-warning-active";
        'content.warning.disabled': "uy:text-content-warning-disabled";
        'content.success': "uy:text-content-success";
        'content.success.enabled': "uy:text-content-success-enabled";
        'content.success.hover': "uy:text-content-success-hover";
        'content.success.pressed': "uy:text-content-success-pressed";
        'content.success.focus': "uy:text-content-success-focus";
        'content.success.active': "uy:text-content-success-active";
        'content.success.disabled': "uy:text-content-success-disabled";
        'content.info': "uy:text-content-info";
        'content.info.enabled': "uy:text-content-info-enabled";
        'content.info.hover': "uy:text-content-info-hover";
        'content.info.pressed': "uy:text-content-info-pressed";
        'content.info.focus': "uy:text-content-info-focus";
        'content.info.active': "uy:text-content-info-active";
        'content.info.disabled': "uy:text-content-info-disabled";
        'content.promo': "uy:text-content-promo";
        'content.form.enabled': "uy:text-content-form";
        'content.form.hover': "uy:text-content-form-hover";
        'content.form.pressed': "uy:text-content-form-pressed";
        'content.form.focus': "uy:text-content-form-focus";
        'content.form.active': "uy:text-content-form-active";
        'content.form.disabled': "uy:text-content-form-disabled";
        'content.form.read-only': "uy:text-content-form-read-only";
        'content.form.invalid': "uy:text-content-form-invalid";
        'content.inverted': "uy:text-content-inverted";
        'content.inverted.enabled': "uy:text-content-inverted-enabled";
        'content.inverted.hover': "uy:text-content-inverted-hover";
        'content.inverted.pressed': "uy:text-content-inverted-pressed";
        'content.inverted.focus': "uy:text-content-inverted-focus";
        'content.inverted.active': "uy:text-content-inverted-active";
        'content.inverted.disabled': "uy:text-content-inverted-disabled";
        inherit: "uy:text-inherit";
    };
    display: {
        block: "uy:block";
        inline: "uy:inline-block";
    };
}, 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.
 * @remarks
 * - Provide `alt` when the icon has no visible label; it is exposed as the icon's `aria-label`.
 * - When a visible label exists, use `aria-labelledby` to reference it instead. In that case, `alt` is not exposed as an additional `aria-label`.
 */
export declare function Icon({ alt, color, size, src, role, display, ...rest }: IconProps): import("react/jsx-runtime").JSX.Element;
export {};