import React from 'react'; import type { BaseProps } from '../component-helpers'; /** * Design tokens */ import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/token/colors-with-modes.css'; export declare const TokenVariants: readonly ["default", "accent", "outline", "invisible"]; export declare const defaultTokenVariant: "default"; type TokenLeadingVisual = React.ReactElement | React.ComponentType<{ className?: string; }>; type TokenSharedProps = { /** * The leading visual appears before the Token content. * Pass an element to supply custom props, or a component type that accepts an optional className. */ leadingVisual?: TokenLeadingVisual; /** * The variant variations available in Token. */ variant?: (typeof TokenVariants)[number]; /** * The HTML element rendered by Token. */ as?: 'span' | 'a'; ['data-testid']?: string; }; type TokenSpanProps = BaseProps & TokenSharedProps & { as?: 'span'; } & React.ComponentPropsWithoutRef<'span'>; type TokenAnchorProps = BaseProps & TokenSharedProps & { as: 'a'; href: string; } & Omit, 'href'>; export type TokenProps = TokenSpanProps | TokenAnchorProps; /** * Use Token to display compact metadata that describes or supports adjacent content. * @see https://primer.style/brand/components/Token */ export declare const Token: React.ForwardRefExoticComponent<(Omit | Omit) & React.RefAttributes> & { testIds: { root: string; readonly leadingVisual: string; }; }; export {};