declare type FragmentType = 'index' | 'property';
export declare const QueryMatchContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
export declare const KeyPathFragment: import("styled-components").StyledComponent<"span", any, {
    fragmentType: FragmentType;
}, never>;
export declare const Breadcrumbs: import("styled-components").StyledComponent<"div", any, {}, never>;
export declare const MatchPreview: import("styled-components").StyledComponent<"div", any, {}, never>;
export declare const HighlightedText: import("styled-components").StyledComponent<"mark", any, {}, never>;
export declare const Key: import("styled-components").StyledComponent<"div", any, {
    type: FragmentType;
}, never>;
export declare const ColonSeparator: import("styled-components").StyledComponent<"span", any, {}, never>;
/**
 * This component has been designed to display long text values gracefully. By splitting long
 * strings into 3 sections *(as spans)*, namely, "head", "body", and "tail", where "body" would
 * contain the text we wish to highlight, we can have the long string render like this when
 * the parent container width is limited:
 *
 * `"Be not angry... since they ...wish to be"`
 *
 * In the example above, "since they" forms the body, assuming we wanted to hightlight the
 * words "since they".
 */
export declare const TextLikeValue: import("styled-components").StyledComponent<"div", any, {
    formatAs: string;
}, never>;
export declare const NonTextValue: import("styled-components").StyledComponent<"span", any, {
    rawValue: unknown;
}, never>;
export {};
//# sourceMappingURL=style.d.ts.map