import { TNode, Value } from '@tempots/dom';
import { IconSize } from '../theme';
import { ThemeColorName } from '@/tokens';
import { ForegroundTone } from '../theme/style-utils';
export declare const isIndexedDBAvailable: boolean;
export declare function storeIconLocally(id: string, svgString: string): Promise<unknown>;
export declare function getIconLocally(id: string): Promise<string | null>;
export interface IconOptions {
    icon: Value<string>;
    size?: Value<IconSize>;
    color?: Value<ThemeColorName>;
    title?: Value<string | undefined>;
    /**
     * Whether this icon is decorative (hidden from screen readers) or informative.
     * - 'decorative': Icon is purely visual, hidden from screen readers with aria-hidden="true"
     * - 'informative': Icon conveys meaning, gets aria-label and role="img"
     * - 'auto': Automatically determined based on presence of title prop
     * @default 'auto'
     */
    accessibility?: Value<'decorative' | 'informative' | 'auto'>;
    tone?: Value<ForegroundTone>;
}
export declare function Icon({ icon, size, color, title, accessibility, tone, }: IconOptions, ...children: TNode[]): import("@tempots/dom").Renderable;
