@elastic/eui 58.1.1 → 59.1.0-rc1

package/eui.d.ts

@@ -52,6 +52,117 @@ declare module '@elastic/eui/src/components/accessibility/screen_reader_live' {
 	export { EuiScreenReaderLive } from '@elastic/eui/src/components/accessibility/screen_reader_live/screen_reader_live';
 	export type { EuiScreenReaderLiveProps } from '@elastic/eui/src/components/accessibility/screen_reader_live/screen_reader_live';
 
+}
+declare module '@elastic/eui/src/components/common' {
+	import { AnchorHTMLAttributes, ButtonHTMLAttributes, ComponentProps, Component, FunctionComponent, JSXElementConstructor, MouseEventHandler, SFC } from 'react';
+	export interface CommonProps {
+	    className?: string;
+	    'aria-label'?: string;
+	    'data-test-subj'?: string;
+	}
+	export type NoArgCallback<T> = () => T;
+	export const assertNever: (x: never) => never;
+	/**
+	 * XOR for some properties applied to a type
+	 * (XOR is one of these but not both or neither)
+	 *
+	 * Usage: OneOf<typeToExtend, one | but | not | multiple | of | these | are | required>
+	 *
+	 * To require aria-label or aria-labelledby but not both
+	 * Example: OneOf<Type, 'aria-label' | 'aria-labelledby'>
+	 */
+	export type OneOf<T, K extends keyof T> = Omit<T, K> & {
+	    [k in K]: Pick<Required<T>, k> & {
+	        [k1 in Exclude<K, k>]?: never;
+	    };
+	}[K];
+	/**
+	 * Wraps Object.keys with proper typescript definition of the resulting array
+	 */
+	export function keysOf<T, K extends keyof T>(obj: T): K[];
+	/**
+	 * Like `keyof typeof`, but for getting values instead of keys
+	 * ValueOf<typeof {key1: 'value1', key2: 'value2'}>
+	 * Results in `'value1' | 'value2'`
+	 */
+	export type ValueOf<T> = T[keyof T];
+	export type PropsOf<C> = C extends SFC<infer SFCProps> ? SFCProps : C extends FunctionComponent<infer FunctionProps> ? FunctionProps : C extends Component<infer ComponentProps> ? ComponentProps : never;
+	export type PropsOfElement<C extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> = JSX.LibraryManagedAttributes<C, ComponentProps<C>>; type ExtractDefaultProps<T> = T extends {
+	    defaultProps: infer D;
+	} ? D : never; type ExtractProps<C extends new (...args: any) => any, IT = InstanceType<C>> = IT extends Component<infer P> ? P : never;
+	/**
+	 * Because of how TypeScript's LibraryManagedAttributes is designed to handle defaultProps (https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-0.html#support-for-defaultprops-in-jsx)
+	 * we can't directly export the props definition as the defaulted values are not made optional,
+	 * because it isn't processed by LibraryManagedAttributes. To get around this, we:
+	 * - remove the props which have default values applied
+	 * - export (Props - Defaults) & Partial<Defaults>
+	 */
+	export type ApplyClassComponentDefaults<C extends new (...args: any) => any, D = ExtractDefaultProps<C>, P = ExtractProps<C>> = Omit<P, keyof D> & {
+	    [K in keyof D]?: K extends keyof P ? P[K] : never;
+	}; type UnionKeys<T> = T extends any ? keyof T : never;
+	export type DistributivePick<T, K extends UnionKeys<T>> = T extends any ? Pick<T, Extract<keyof T, K>> : never;
+	export type DistributiveOmit<T, K extends UnionKeys<T>> = T extends any ? Omit<T, Extract<keyof T, K>> : never; type RecursiveDistributiveOmit<T, K extends PropertyKey> = T extends any ? T extends object ? RecursiveOmit<T, K> : T : never;
+	export type RecursiveOmit<T, K extends PropertyKey> = Omit<{
+	    [P in keyof T]: RecursiveDistributiveOmit<T[P], K>;
+	}, K>;
+	/**
+	 * Returns member keys in U not present in T set to never
+	 * T = { 'one', 'two', 'three' }
+	 * U = { 'three', 'four', 'five' }
+	 * returns { 'four': never, 'five': never }
+	 */
+	export type DisambiguateSet<T, U> = {
+	    [P in Exclude<keyof T, keyof U>]?: never;
+	};
+	/**
+	 * Allow either T or U, preventing any additional keys of the other type from being present
+	 */
+	export type ExclusiveUnion<T, U> = T | U extends object ? (DisambiguateSet<T, U> & U) | (DisambiguateSet<U, T> & T) : T | U;
+	/**
+	 * For components that conditionally render <button> or <a>
+	 * Convenience types for extending base props (T) and
+	 * element-specific props (P) with standard clickable properties
+	 *
+	 * These will likely be used together, along with `ExclusiveUnion`:
+	 *
+	 * type AnchorLike = PropsForAnchor<BaseProps>
+	 * type ButtonLike = PropsForButton<BaseProps>
+	 * type ComponentProps = ExclusiveUnion<AnchorLike, ButtonLike>
+	 * const Component: FunctionComponent<ComponentProps> ...
+	 */
+	export type PropsForAnchor<T, P = {}> = T & {
+	    href?: string;
+	    onClick?: MouseEventHandler<HTMLAnchorElement>;
+	} & AnchorHTMLAttributes<HTMLAnchorElement> & P;
+	export type PropsForButton<T, P = {}> = T & {
+	    onClick?: MouseEventHandler<HTMLButtonElement>;
+	} & ButtonHTMLAttributes<HTMLButtonElement> & P;
+	/**
+	 * Replaces all properties on any type as optional, includes nested types
+	 *
+	 * @example
+	 * ```ts
+	 * interface Person {
+	 *  name: string;
+	 *  age?: number;
+	 *  spouse: Person;
+	 *  children: Person[];
+	 * }
+	 * type PartialPerson = RecursivePartial<Person>;
+	 * // results in
+	 * interface PartialPerson {
+	 *  name?: string;
+	 *  age?: number;
+	 *  spouse?: RecursivePartial<Person>;
+	 *  children?: RecursivePartial<Person>[]
+	 * }
+	 * ```
+	 */
+	export type RecursivePartial<T> = {
+	    [P in keyof T]?: T[P] extends NonAny[] ? T[P] : T[P] extends readonly NonAny[] ? T[P] : T[P] extends Array<infer U> ? Array<RecursivePartial<U>> : T[P] extends ReadonlyArray<infer U> ? ReadonlyArray<RecursivePartial<U>> : T[P] extends Set<infer V> ? Set<RecursivePartial<V>> : T[P] extends Map<infer K, infer V> ? Map<K, RecursivePartial<V>> : T[P] extends NonAny ? T[P] : RecursivePartial<T[P]>;
+	}; type NonAny = number | boolean | string | symbol | null;
+	export {};
+
 }
 declare module '@elastic/eui/src/services/keys' {
 	export const ENTER = "Enter";
@@ -166,117 +277,6 @@ declare module '@elastic/eui/src/services/alignment' {
 	export const CENTER_ALIGNMENT = "center";
 	export type HorizontalAlignment = 'left' | 'right' | 'center';
 
-}
-declare module '@elastic/eui/src/components/common' {
-	import { AnchorHTMLAttributes, ButtonHTMLAttributes, ComponentProps, Component, FunctionComponent, JSXElementConstructor, MouseEventHandler, SFC } from 'react';
-	export interface CommonProps {
-	    className?: string;
-	    'aria-label'?: string;
-	    'data-test-subj'?: string;
-	}
-	export type NoArgCallback<T> = () => T;
-	export const assertNever: (x: never) => never;
-	/**
-	 * XOR for some properties applied to a type
-	 * (XOR is one of these but not both or neither)
-	 *
-	 * Usage: OneOf<typeToExtend, one | but | not | multiple | of | these | are | required>
-	 *
-	 * To require aria-label or aria-labelledby but not both
-	 * Example: OneOf<Type, 'aria-label' | 'aria-labelledby'>
-	 */
-	export type OneOf<T, K extends keyof T> = Omit<T, K> & {
-	    [k in K]: Pick<Required<T>, k> & {
-	        [k1 in Exclude<K, k>]?: never;
-	    };
-	}[K];
-	/**
-	 * Wraps Object.keys with proper typescript definition of the resulting array
-	 */
-	export function keysOf<T, K extends keyof T>(obj: T): K[];
-	/**
-	 * Like `keyof typeof`, but for getting values instead of keys
-	 * ValueOf<typeof {key1: 'value1', key2: 'value2'}>
-	 * Results in `'value1' | 'value2'`
-	 */
-	export type ValueOf<T> = T[keyof T];
-	export type PropsOf<C> = C extends SFC<infer SFCProps> ? SFCProps : C extends FunctionComponent<infer FunctionProps> ? FunctionProps : C extends Component<infer ComponentProps> ? ComponentProps : never;
-	export type PropsOfElement<C extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> = JSX.LibraryManagedAttributes<C, ComponentProps<C>>; type ExtractDefaultProps<T> = T extends {
-	    defaultProps: infer D;
-	} ? D : never; type ExtractProps<C extends new (...args: any) => any, IT = InstanceType<C>> = IT extends Component<infer P> ? P : never;
-	/**
-	 * Because of how TypeScript's LibraryManagedAttributes is designed to handle defaultProps (https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-0.html#support-for-defaultprops-in-jsx)
-	 * we can't directly export the props definition as the defaulted values are not made optional,
-	 * because it isn't processed by LibraryManagedAttributes. To get around this, we:
-	 * - remove the props which have default values applied
-	 * - export (Props - Defaults) & Partial<Defaults>
-	 */
-	export type ApplyClassComponentDefaults<C extends new (...args: any) => any, D = ExtractDefaultProps<C>, P = ExtractProps<C>> = Omit<P, keyof D> & {
-	    [K in keyof D]?: K extends keyof P ? P[K] : never;
-	}; type UnionKeys<T> = T extends any ? keyof T : never;
-	export type DistributivePick<T, K extends UnionKeys<T>> = T extends any ? Pick<T, Extract<keyof T, K>> : never;
-	export type DistributiveOmit<T, K extends UnionKeys<T>> = T extends any ? Omit<T, Extract<keyof T, K>> : never; type RecursiveDistributiveOmit<T, K extends PropertyKey> = T extends any ? T extends object ? RecursiveOmit<T, K> : T : never;
-	export type RecursiveOmit<T, K extends PropertyKey> = Omit<{
-	    [P in keyof T]: RecursiveDistributiveOmit<T[P], K>;
-	}, K>;
-	/**
-	 * Returns member keys in U not present in T set to never
-	 * T = { 'one', 'two', 'three' }
-	 * U = { 'three', 'four', 'five' }
-	 * returns { 'four': never, 'five': never }
-	 */
-	export type DisambiguateSet<T, U> = {
-	    [P in Exclude<keyof T, keyof U>]?: never;
-	};
-	/**
-	 * Allow either T or U, preventing any additional keys of the other type from being present
-	 */
-	export type ExclusiveUnion<T, U> = T | U extends object ? (DisambiguateSet<T, U> & U) | (DisambiguateSet<U, T> & T) : T | U;
-	/**
-	 * For components that conditionally render <button> or <a>
-	 * Convenience types for extending base props (T) and
-	 * element-specific props (P) with standard clickable properties
-	 *
-	 * These will likely be used together, along with `ExclusiveUnion`:
-	 *
-	 * type AnchorLike = PropsForAnchor<BaseProps>
-	 * type ButtonLike = PropsForButton<BaseProps>
-	 * type ComponentProps = ExclusiveUnion<AnchorLike, ButtonLike>
-	 * const Component: FunctionComponent<ComponentProps> ...
-	 */
-	export type PropsForAnchor<T, P = {}> = T & {
-	    href?: string;
-	    onClick?: MouseEventHandler<HTMLAnchorElement>;
-	} & AnchorHTMLAttributes<HTMLAnchorElement> & P;
-	export type PropsForButton<T, P = {}> = T & {
-	    onClick?: MouseEventHandler<HTMLButtonElement>;
-	} & ButtonHTMLAttributes<HTMLButtonElement> & P;
-	/**
-	 * Replaces all properties on any type as optional, includes nested types
-	 *
-	 * @example
-	 * ```ts
-	 * interface Person {
-	 *  name: string;
-	 *  age?: number;
-	 *  spouse: Person;
-	 *  children: Person[];
-	 * }
-	 * type PartialPerson = RecursivePartial<Person>;
-	 * // results in
-	 * interface PartialPerson {
-	 *  name?: string;
-	 *  age?: number;
-	 *  spouse?: RecursivePartial<Person>;
-	 *  children?: RecursivePartial<Person>[]
-	 * }
-	 * ```
-	 */
-	export type RecursivePartial<T> = {
-	    [P in keyof T]?: T[P] extends NonAny[] ? T[P] : T[P] extends readonly NonAny[] ? T[P] : T[P] extends Array<infer U> ? Array<RecursivePartial<U>> : T[P] extends ReadonlyArray<infer U> ? ReadonlyArray<RecursivePartial<U>> : T[P] extends Set<infer V> ? Set<RecursivePartial<V>> : T[P] extends Map<infer K, infer V> ? Map<K, RecursivePartial<V>> : T[P] extends NonAny ? T[P] : RecursivePartial<T[P]>;
-	}; type NonAny = number | boolean | string | symbol | null;
-	export {};
-
 }
 declare module '@elastic/eui/src/services/breakpoint' {
 	export type EuiBreakpointSize = 'xs' | 's' | 'm' | 'l' | 'xl';
@@ -1203,9 +1203,16 @@ declare module '@elastic/eui/src/components/loading/_loading_strings' {
 declare module '@elastic/eui/src/global_styling/mixins/_color' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
 	export const BACKGROUND_COLORS: readonly ["transparent", "plain", "subdued", "accent", "primary", "success", "warning", "danger"];
-	export type EuiBackgroundColor = typeof BACKGROUND_COLORS[number];
-	export const euiBackgroundColor: (color: EuiBackgroundColor, { euiTheme, colorMode }: UseEuiTheme) => string;
-	export const useEuiBackgroundColor: (color: EuiBackgroundColor) => string;
+	export type _EuiBackgroundColor = typeof BACKGROUND_COLORS[number];
+	export interface _EuiBackgroundColorOptions {
+	    /**
+	     * Use `opaque` for containers of unknown content.
+	     * Use `transparent` for interactive states like hover and focus.
+	     */
+	    method?: 'opaque' | 'transparent';
+	}
+	export const euiBackgroundColor: ({ euiTheme, colorMode }: UseEuiTheme, color: _EuiBackgroundColor, { method }?: _EuiBackgroundColorOptions) => string;
+	export const useEuiBackgroundColor: (color: _EuiBackgroundColor, { method }?: _EuiBackgroundColorOptions) => string;
 	export const useEuiBackgroundColorCSS: () => {
 	    transparent: import("@emotion/utils").SerializedStyles;
 	    plain: import("@emotion/utils").SerializedStyles;
@@ -1403,7 +1410,7 @@ declare module '@elastic/eui/src/global_styling/variables/colors' {
 	    /**
 	     * Computed against `colors.mediumShade`
 	     */
-	    subdued: ColorModeSwitch;
+	    subduedText: ColorModeSwitch;
 	    /**
 	     * Computed against `colors.primaryText`
 	     */
@@ -1474,6 +1481,10 @@ declare module '@elastic/eui/src/global_styling/variables/typography' {
 	     * The font family used for monospace UI elements like EuiCode
 	     */
 	    familyCode?: string;
+	    /**
+	     * The font family used for serif UI elements like blockquotes within EuiText
+	     */
+	    familySerif?: string;
 	    /**
 	     * Controls advanced features OpenType fonts.
 	     * https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings
@@ -1870,6 +1881,30 @@ declare module '@elastic/eui/src/global_styling/functions/logicals' {
 	export const LOGICAL_SIDES: ("left" | "right" | "top" | "horizontal" | "vertical" | "bottom")[];
 	export type LogicalSides = typeof LOGICAL_SIDES[number];
 	export const logicals: {
+	    'border-horizontal': string;
+	    'border-horizontal-color': string;
+	    'border-horizontal-width': string;
+	    'border-horizontal-style': string;
+	    'border-vertical': string;
+	    'border-vertical-color': string;
+	    'border-vertical-width': string;
+	    'border-vertical-style': string;
+	    'border-bottom': string;
+	    'border-bottom-color': string;
+	    'border-bottom-style': string;
+	    'border-bottom-width': string;
+	    'border-top': string;
+	    'border-top-color': string;
+	    'border-top-style': string;
+	    'border-top-width': string;
+	    'border-right': string;
+	    'border-right-color': string;
+	    'border-right-style': string;
+	    'border-right-width': string;
+	    'border-left': string;
+	    'border-left-color': string;
+	    'border-left-style': string;
+	    'border-left-width': string;
 	    'border-top-left-radius': string;
 	    'border-top-right-radius': string;
 	    'border-bottom-left-radius': string;
@@ -1902,7 +1937,7 @@ declare module '@elastic/eui/src/global_styling/functions/logicals' {
 	    'margin-horizontal': string;
 	    'margin-vertical': string;
 	};
-	export const LOGICAL_PROPERTIES: ("left" | "right" | "top" | "width" | "height" | "horizontal" | "vertical" | "inset" | "bottom" | "border-top-left-radius" | "border-top-right-radius" | "border-bottom-left-radius" | "border-bottom-right-radius" | "overflow-x" | "overflow-y" | "max-height" | "max-width" | "min-height" | "min-width" | "padding-left" | "padding-right" | "padding-top" | "padding-bottom" | "padding-horizontal" | "padding-vertical" | "margin-left" | "margin-right" | "margin-top" | "margin-bottom" | "margin-horizontal" | "margin-vertical")[];
+	export const LOGICAL_PROPERTIES: ("left" | "right" | "top" | "width" | "height" | "horizontal" | "vertical" | "inset" | "bottom" | "border-horizontal" | "border-horizontal-color" | "border-horizontal-width" | "border-horizontal-style" | "border-vertical" | "border-vertical-color" | "border-vertical-width" | "border-vertical-style" | "border-bottom" | "border-bottom-color" | "border-bottom-style" | "border-bottom-width" | "border-top" | "border-top-color" | "border-top-style" | "border-top-width" | "border-right" | "border-right-color" | "border-right-style" | "border-right-width" | "border-left" | "border-left-color" | "border-left-style" | "border-left-width" | "border-top-left-radius" | "border-top-right-radius" | "border-bottom-left-radius" | "border-bottom-right-radius" | "overflow-x" | "overflow-y" | "max-height" | "max-width" | "min-height" | "min-width" | "padding-left" | "padding-right" | "padding-top" | "padding-bottom" | "padding-horizontal" | "padding-vertical" | "margin-left" | "margin-right" | "margin-top" | "margin-bottom" | "margin-horizontal" | "margin-vertical")[];
 	export type LogicalProperties = typeof LOGICAL_PROPERTIES[number];
 	/**
 	 *
@@ -1980,15 +2015,26 @@ declare module '@elastic/eui/src/services/theme/hooks' {
 declare module '@elastic/eui/src/global_styling/functions/typography' {
 	import { _EuiThemeFontScale, _EuiThemeFontSizeMeasurement } from '@elastic/eui/src/global_styling/variables/typography';
 	import { UseEuiTheme } from '@elastic/eui/src/services/theme/hooks';
+	export interface _FontScaleOptions {
+	    /**
+	     * The returned string measurement
+	     */
+	    measurement?: _EuiThemeFontSizeMeasurement;
+	    /**
+	     * An additional custom scale multiplier to use against the current scale
+	     * This parameter can be used (e.g. by EuiText sizes) to get sizes of text smaller than the default
+	     */
+	    customScale?: _EuiThemeFontScale;
+	}
 	/**
 	 * Calculates the font-size value based on the provided scale key
 	 * @param scale - The font scale key
 	 * @param theme - Requires the `base` and `font` keys
-	 * @param measurement - The returned string measurement
-	 * *
+	 * @param options - Optional parameters - see _FontScaleOptions
+	 *
 	 * @returns string - Calculated font-size value
 	 */
-	export function euiFontSizeFromScale(scale: _EuiThemeFontScale, { base, font }: UseEuiTheme['euiTheme'], measurement?: _EuiThemeFontSizeMeasurement): string;
+	export function euiFontSizeFromScale(scale: _EuiThemeFontScale, { base, font }: UseEuiTheme['euiTheme'], { measurement, customScale }?: _FontScaleOptions): string;
 	/**
 	 * Calculates the line-height to the closest multiple of the baseline
 	 * EX: A proper line-height for text is 1.5 times the font-size.
@@ -1996,11 +2042,11 @@ declare module '@elastic/eui/src/global_styling/functions/typography' {
 	 *     text stays on the baseline, we pass a multiplier to calculate a line-height.
 	 * @param scale - The font scale key
 	 * @param theme - Requires the `base` and `font` keys
-	 * @param measurement - The returned string measurement
-	 * *
+	 * @param options - Optional parameters - see _FontScaleOptions
+	 *
 	 * @returns string - Calculated line-height value aligned to baseline
 	 */
-	export function euiLineHeightFromBaseline(scale: _EuiThemeFontScale, { base, font }: UseEuiTheme['euiTheme'], measurement?: _EuiThemeFontSizeMeasurement): string;
+	export function euiLineHeightFromBaseline(scale: _EuiThemeFontScale, { base, font }: UseEuiTheme['euiTheme'], { measurement, customScale }?: _FontScaleOptions): string;
 	/**
 	 * Text weight shifting
 	 *
@@ -2068,16 +2114,14 @@ declare module '@elastic/eui/src/services/theme/context' {
 }
 declare module '@elastic/eui/src/services/theme/provider' {
 	import React, { PropsWithChildren } from 'react';
-	import { EmotionCache } from '@emotion/react';
 	import { EuiThemeColorMode, EuiThemeSystem, EuiThemeModifications } from '@elastic/eui/src/services/theme/types';
 	export interface EuiThemeProviderProps<T> {
 	    theme?: EuiThemeSystem<T>;
 	    colorMode?: EuiThemeColorMode;
 	    modify?: EuiThemeModifications<T>;
-	    cache?: EmotionCache;
 	    children: any;
 	}
-	export const EuiThemeProvider: <T extends {} = {}>({ theme: _system, colorMode: _colorMode, modify: _modifications, cache, children, }: React.PropsWithChildren<EuiThemeProviderProps<T>>) => JSX.Element;
+	export const EuiThemeProvider: <T extends {} = {}>({ theme: _system, colorMode: _colorMode, modify: _modifications, children, }: React.PropsWithChildren<EuiThemeProviderProps<T>>) => JSX.Element;
 
 }
 declare module '@elastic/eui/src/services/theme' {
@@ -2090,20 +2134,6 @@ declare module '@elastic/eui/src/services/theme' {
 	export type { ComputedThemeShape, EuiThemeColorMode, EuiThemeColorModeStandard, EuiThemeComputed, EuiThemeModifications, EuiThemeShape, EuiThemeSystem, } from '@elastic/eui/src/services/theme/types';
 	export { COLOR_MODES_STANDARD } from '@elastic/eui/src/services/theme/types';
 
-}
-declare module '@elastic/eui/src/global_styling/utils' {
-	import { UseEuiTheme } from '@elastic/eui/src/services';
-	/**
-	 * Creates a React hook from a style mixin factory.
-	 * The resulting hook accepts a single option property
-	 * in the shape of the mixin's options
-	 *
-	 * `const useStyle = createStyleHook((euiTheme, {color: string}, colorMode) => {})`
-	 * Results in the following with `euiTheme` and `colorMode` values automatically applied
-	 * `const styles = useStyle({color: string}) => void`
-	 */
-	export function createStyleHookFromMixin<T>(mixinFactory: (theme: UseEuiTheme['euiTheme'], opts: T, colorMode: UseEuiTheme['colorMode']) => string): (options?: T) => string;
-
 }
 declare module '@elastic/eui/src/global_styling/mixins/_helpers' {
 	import { CSSProperties } from 'react';
@@ -2129,26 +2159,26 @@ declare module '@elastic/eui/src/global_styling/mixins/_helpers' {
 	     */
 	    corner?: CSSProperties['borderWidth'];
 	}
-	export const euiScrollBarStyles: ({ colors, size }: UseEuiTheme['euiTheme'], { thumbColor: _thumbColor, trackColor, width, size: _size, corner: _corner, }?: EuiScrollBarStyles) => string;
+	export const euiScrollBarStyles: ({ euiTheme: { colors, size } }: UseEuiTheme, { thumbColor: _thumbColor, trackColor, width, size: _size, corner: _corner, }?: EuiScrollBarStyles) => string;
 	export const useEuiScrollBar: (options?: EuiScrollBarStyles | undefined) => string;
 	/**
 	 * 1. Focus rings shouldn't be visible on scrollable regions, but a11y requires them to be focusable.
 	 *    Browser's supporting `:focus-visible` will still show outline on keyboard focus only.
 	 *    Others like Safari, won't show anything at all.
 	 */
-	export const euiYScroll: (euiTheme: UseEuiTheme['euiTheme']) => string;
-	export const useEuiYScroll: (options?: unknown) => string;
-	export const euiYScrollWithShadows: (euiTheme: UseEuiTheme['euiTheme']) => string;
-	export const useEuiYScrollWithShadows: (options?: unknown) => string;
-	export const euiXScroll: (euiTheme: UseEuiTheme['euiTheme']) => string;
-	export const useEuiXScroll: (options?: unknown) => string;
-	export const euiXScrollWithShadows: (euiTheme: UseEuiTheme['euiTheme']) => string;
-	export const useEuiXScrollWithShadows: (options?: unknown) => string;
+	export const euiYScroll: (euiTheme: UseEuiTheme) => string;
+	export const useEuiYScroll: () => string;
+	export const euiYScrollWithShadows: (euiTheme: UseEuiTheme) => string;
+	export const useEuiYScrollWithShadows: () => string;
+	export const euiXScroll: (euiTheme: UseEuiTheme) => string;
+	export const useEuiXScroll: () => string;
+	export const euiXScrollWithShadows: (euiTheme: UseEuiTheme) => string;
+	export const useEuiXScrollWithShadows: () => string;
 	interface EuiScrollOverflowStyles {
 	    direction?: 'y' | 'x';
 	    mask?: boolean;
 	}
-	export const euiOverflowScroll: (euiTheme: UseEuiTheme['euiTheme'], { direction, mask }?: EuiScrollOverflowStyles) => string;
+	export const euiOverflowScroll: (euiTheme: UseEuiTheme, { direction, mask }?: EuiScrollOverflowStyles) => string;
 	export const useEuiOverflowScroll: (direction: EuiScrollOverflowStyles['direction'], mask?: EuiScrollOverflowStyles['mask']) => string;
 	export {};
 
@@ -2157,7 +2187,7 @@ declare module '@elastic/eui/src/global_styling/mixins/_padding' {
 	import { UseEuiTheme } from '@elastic/eui/src/services/theme';
 	export const PADDING_SIZES: readonly ["none", "xs", "s", "m", "l", "xl"];
 	export type EuiPaddingSize = typeof PADDING_SIZES[number];
-	export const euiPaddingSize: (size: EuiPaddingSize, { euiTheme }: UseEuiTheme) => string | null;
+	export const euiPaddingSize: ({ euiTheme }: UseEuiTheme, size: EuiPaddingSize) => string | null;
 	export const useEuiPaddingSize: (size: EuiPaddingSize) => string | null;
 	export const useEuiPaddingCSS: (side?: "left" | "right" | "top" | "horizontal" | "vertical" | "bottom" | undefined) => {
 	    none: null;
@@ -2181,14 +2211,17 @@ declare module '@elastic/eui/src/global_styling/mixins/_states' {
 	 * @param offset Accepts a specific measurement or 'inset', 'outset' or 'center' to adjust outline position
 	 * @param color Accepts any CSS color, **Note: only works in -webkit-**
 	 */
-	export const euiFocusRing: (euiTheme: UseEuiTheme['euiTheme'], offset?: _EuiFocusRingOffset, color?: CSSProperties['outlineColor']) => string;
+	export const euiFocusRing: (euiTheme: UseEuiTheme['euiTheme'], offset?: _EuiFocusRingOffset, options?: {
+	    color?: CSSProperties['outlineColor'];
+	} | undefined) => string;
 	export const useEuiFocusRing: (offset?: _EuiFocusRingOffset, color?: CSSProperties['outlineColor']) => string;
 
 }
 declare module '@elastic/eui/src/global_styling/mixins/_typography' {
 	import { CSSProperties } from 'react';
+	import { _FontScaleOptions } from '@elastic/eui/src/global_styling/functions/typography';
 	import { UseEuiTheme } from '@elastic/eui/src/services/theme/hooks';
-	import { _EuiThemeFontScale, _EuiThemeFontSizeMeasurement } from '@elastic/eui/src/global_styling/variables/typography';
+	import { _EuiThemeFontScale } from '@elastic/eui/src/global_styling/variables/typography';
 	export type EuiThemeFontSize = {
 	    fontSize: CSSProperties['fontSize'];
 	    lineHeight: CSSProperties['lineHeight'];
@@ -2196,8 +2229,8 @@ declare module '@elastic/eui/src/global_styling/mixins/_typography' {
 	/**
 	 * Returns font-size and line-height
 	 */
-	export const euiFontSize: (scale: _EuiThemeFontScale, euiTheme: UseEuiTheme['euiTheme'], measurement?: _EuiThemeFontSizeMeasurement) => EuiThemeFontSize;
-	export const useEuiFontSize: (scale?: _EuiThemeFontScale, measurement?: _EuiThemeFontSizeMeasurement) => EuiThemeFontSize;
+	export const euiFontSize: ({ euiTheme }: UseEuiTheme, scale: _EuiThemeFontScale, options?: _FontScaleOptions | undefined) => EuiThemeFontSize;
+	export const useEuiFontSize: (scale: _EuiThemeFontScale, options?: _FontScaleOptions | undefined) => EuiThemeFontSize;
 	/**
 	 * Force text to wrap on natural word breaks (e.g. spaces & hyphens)
 	 * https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
@@ -2210,7 +2243,7 @@ declare module '@elastic/eui/src/global_styling/mixins/_typography' {
 	/**
 	 * Fixed-width numbers for tabular data
 	 */
-	export const euiNumberFormat: (euiTheme: UseEuiTheme['euiTheme']) => string;
+	export const euiNumberFormat: ({ euiTheme }: UseEuiTheme) => string;
 	export const useEuiNumberFormat: () => string;
 
 }
@@ -2256,6 +2289,40 @@ declare module '@elastic/eui/src/components/loading/loading_elastic' {
 	}
 	export const EuiLoadingElastic: FunctionComponent<CommonProps & HTMLAttributes<HTMLDivElement> & EuiLoadingElasticProps>;
 
+}
+declare module '@elastic/eui/src/components/provider/cache/cache_context' {
+	
+	import { EmotionCache } from '@emotion/cache';
+	export const EuiCacheContext: import("react").Context<EmotionCache | undefined>;
+	export const useEuiCacheContext: () => EmotionCache | undefined;
+
+}
+declare module '@elastic/eui/src/components/provider/cache/cache_provider' {
+	import { PropsWithChildren } from 'react';
+	import { EmotionCache } from '@emotion/cache';
+	export interface EuiCacheProviderProps {
+	    cache?: false | EmotionCache;
+	}
+	export const EuiCacheProvider: ({ cache, children, }: PropsWithChildren<EuiCacheProviderProps>) => JSX.Element;
+
+}
+declare module '@elastic/eui/src/components/provider/cache' {
+	export * from '@elastic/eui/src/components/provider/cache/cache_context';
+	export * from '@elastic/eui/src/components/provider/cache/cache_provider';
+
+}
+declare module '@elastic/eui/src/components/provider/system/system' {
+	import React, { ComponentType, ForwardRefExoticComponent } from 'react';
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export interface WithEuiSystemProps<P = {}> {
+	    euiTheme: UseEuiTheme<P>;
+	}
+	export const withEuiSystem: <T extends {} = {}, U extends {} = {}>(Component: React.ComponentType<T & WithEuiSystemProps<U>> | React.ForwardRefExoticComponent<T & WithEuiSystemProps<U>>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<Omit<T, "euiTheme">> & React.RefAttributes<Omit<T, "euiTheme">>>;
+
+}
+declare module '@elastic/eui/src/components/provider/system' {
+	export * from '@elastic/eui/src/components/provider/system/system';
+
 }
 declare module '@elastic/eui/src/components/loading/loading_chart.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
@@ -2275,15 +2342,23 @@ declare module '@elastic/eui/src/components/loading/loading_chart.styles' {
 
 }
 declare module '@elastic/eui/src/components/loading/loading_chart' {
-	import { FunctionComponent, HTMLAttributes } from 'react';
+	import React, { FunctionComponent, HTMLAttributes } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
+	import { WithEuiSystemProps } from '@elastic/eui/src/components/provider/system';
 	export const SIZES: readonly ["m", "l", "xl"];
 	export type EuiLoadingChartSize = typeof SIZES[number];
 	export type EuiLoadingChartProps = CommonProps & HTMLAttributes<HTMLDivElement> & {
 	    size?: EuiLoadingChartSize;
 	    mono?: boolean;
 	};
-	export const EuiLoadingChart: FunctionComponent<EuiLoadingChartProps>;
+	export const _EuiLoadingChart: FunctionComponent<EuiLoadingChartProps & WithEuiSystemProps>;
+	export const EuiLoadingChart: React.ForwardRefExoticComponent<Omit<CommonProps & React.HTMLAttributes<HTMLDivElement> & {
+	    size?: "m" | "l" | "xl" | undefined;
+	    mono?: boolean | undefined;
+	} & WithEuiSystemProps<{}>, "euiTheme"> & React.RefAttributes<Omit<CommonProps & React.HTMLAttributes<HTMLDivElement> & {
+	    size?: "m" | "l" | "xl" | undefined;
+	    mono?: boolean | undefined;
+	} & WithEuiSystemProps<{}>, "euiTheme">>>;
 
 }
 declare module '@elastic/eui/src/components/loading/loading_content.styles' {
@@ -2294,18 +2369,25 @@ declare module '@elastic/eui/src/components/loading/loading_content.styles' {
 
 }
 declare module '@elastic/eui/src/components/loading/loading_content' {
-	import { FunctionComponent, HTMLAttributes } from 'react';
+	import React, { FunctionComponent, HTMLAttributes } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
+	import { WithEuiSystemProps } from '@elastic/eui/src/components/provider/system';
 	export type LineRange = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
 	export type EuiLoadingContentProps = CommonProps & HTMLAttributes<HTMLDivElement> & {
 	    lines?: LineRange;
 	};
-	export const EuiLoadingContent: FunctionComponent<EuiLoadingContentProps>;
+	export const _EuiLoadingContent: FunctionComponent<EuiLoadingContentProps & WithEuiSystemProps>;
+	export const EuiLoadingContent: React.ForwardRefExoticComponent<Omit<CommonProps & React.HTMLAttributes<HTMLDivElement> & {
+	    lines?: LineRange | undefined;
+	} & WithEuiSystemProps<{}>, "euiTheme"> & React.RefAttributes<Omit<CommonProps & React.HTMLAttributes<HTMLDivElement> & {
+	    lines?: LineRange | undefined;
+	} & WithEuiSystemProps<{}>, "euiTheme">>>;
 
 }
 declare module '@elastic/eui/src/components/loading/loading_spinner.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiLoadingSpinnerStyles: ({ euiTheme }: UseEuiTheme) => {
+	import { EuiLoadingSpinnerProps } from '@elastic/eui/src/components/loading/loading_spinner';
+	export const euiLoadingSpinnerStyles: ({ euiTheme }: UseEuiTheme, color?: EuiLoadingSpinnerProps['color']) => {
 	    euiLoadingSpinner: import("@emotion/utils").SerializedStyles;
 	    s: import("@emotion/utils").SerializedStyles;
 	    m: import("@emotion/utils").SerializedStyles;
@@ -2316,14 +2398,42 @@ declare module '@elastic/eui/src/components/loading/loading_spinner.styles' {
 
 }
 declare module '@elastic/eui/src/components/loading/loading_spinner' {
-	import { HTMLAttributes, FunctionComponent } from 'react';
+	import React, { HTMLAttributes, FunctionComponent, CSSProperties } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
+	import { WithEuiSystemProps } from '@elastic/eui/src/components/provider/system';
 	export const SIZES: readonly ["s", "m", "l", "xl", "xxl"];
 	export type EuiLoadingSpinnerSize = typeof SIZES[number];
-	export type EuiLoadingSpinnerProps = CommonProps & HTMLAttributes<HTMLDivElement> & {
+	export type EuiLoadingSpinnerColor = {
+	    border?: CSSProperties['color'];
+	    highlight?: CSSProperties['color'];
+	};
+	export type EuiLoadingSpinnerProps = CommonProps & Omit<HTMLAttributes<HTMLDivElement>, 'color'> & {
 	    size?: EuiLoadingSpinnerSize;
+	    /**
+	     * Sets the color of the border and highlight.
+	     * Each key accepts any valid CSS color value as a `string`
+	     * See #EuiLoadingSpinnerColor
+	     */
+	    color?: EuiLoadingSpinnerColor;
 	};
-	export const EuiLoadingSpinner: FunctionComponent<EuiLoadingSpinnerProps>;
+	export const _EuiLoadingSpinner: FunctionComponent<EuiLoadingSpinnerProps & WithEuiSystemProps>;
+	export const EuiLoadingSpinner: React.ForwardRefExoticComponent<Omit<CommonProps & Omit<React.HTMLAttributes<HTMLDivElement>, "color"> & {
+	    size?: "s" | "m" | "l" | "xl" | "xxl" | undefined;
+	    /**
+	     * Sets the color of the border and highlight.
+	     * Each key accepts any valid CSS color value as a `string`
+	     * See #EuiLoadingSpinnerColor
+	     */
+	    color?: EuiLoadingSpinnerColor | undefined;
+	} & WithEuiSystemProps<{}>, "euiTheme"> & React.RefAttributes<Omit<CommonProps & Omit<React.HTMLAttributes<HTMLDivElement>, "color"> & {
+	    size?: "s" | "m" | "l" | "xl" | "xxl" | undefined;
+	    /**
+	     * Sets the color of the border and highlight.
+	     * Each key accepts any valid CSS color value as a `string`
+	     * See #EuiLoadingSpinnerColor
+	     */
+	    color?: EuiLoadingSpinnerColor | undefined;
+	} & WithEuiSystemProps<{}>, "euiTheme">>>;
 
 }
 declare module '@elastic/eui/src/components/loading/loading_logo.styles' {
@@ -2344,9 +2454,10 @@ declare module '@elastic/eui/src/components/loading/loading_logo.styles' {
 
 }
 declare module '@elastic/eui/src/components/loading/loading_logo' {
-	import { HTMLAttributes, FunctionComponent } from 'react';
+	import React, { HTMLAttributes, FunctionComponent } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { IconType } from '@elastic/eui/src/components/icon';
+	import { WithEuiSystemProps } from '@elastic/eui/src/components/provider/system';
 	export const SIZES: readonly ["m", "l", "xl"];
 	export type EuiLoadingLogoSize = typeof SIZES[number];
 	export type EuiLoadingLogoProps = CommonProps & HTMLAttributes<HTMLDivElement> & {
@@ -2356,7 +2467,20 @@ declare module '@elastic/eui/src/components/loading/loading_logo' {
 	     */
 	    logo?: IconType;
 	};
-	export const EuiLoadingLogo: FunctionComponent<EuiLoadingLogoProps>;
+	export const _EuiLoadingLogo: FunctionComponent<EuiLoadingLogoProps & WithEuiSystemProps>;
+	export const EuiLoadingLogo: React.ForwardRefExoticComponent<Omit<CommonProps & React.HTMLAttributes<HTMLDivElement> & {
+	    size?: "m" | "l" | "xl" | undefined;
+	    /**
+	     * While this component should be restricted to using logo icons, it works with any IconType
+	     */
+	    logo?: IconType | undefined;
+	} & WithEuiSystemProps<{}>, "euiTheme"> & React.RefAttributes<Omit<CommonProps & React.HTMLAttributes<HTMLDivElement> & {
+	    size?: "m" | "l" | "xl" | undefined;
+	    /**
+	     * While this component should be restricted to using logo icons, it works with any IconType
+	     */
+	    logo?: IconType | undefined;
+	} & WithEuiSystemProps<{}>, "euiTheme">>>;
 
 }
 declare module '@elastic/eui/src/components/loading' {
@@ -2372,7 +2496,7 @@ declare module '@elastic/eui/src/components/loading' {
 	export { EuiLoadingLogo } from '@elastic/eui/src/components/loading/loading_logo';
 
 }
-declare module '@elastic/eui/src/components/button/button_content' {
+declare module '@elastic/eui/src/components/button/_button_content_deprecated' {
 	import { HTMLAttributes, FunctionComponent, Ref } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { IconType } from '@elastic/eui/src/components/icon';
@@ -2380,8 +2504,10 @@ declare module '@elastic/eui/src/components/button/button_content' {
 	export const ICON_SIDES: ButtonContentIconSide[];
 	export type EuiButtonContentType = HTMLAttributes<HTMLSpanElement>;
 	/**
-	 * *INTERNAL ONLY*
+	 * *INTERNAL ONLY / DEPRECATED*
 	 * This component is simply a helper component for reuse within other button components
+	 * This component has been deprecated in favor of the new EuiButtonDisplayContent
+	 * that can be found in `src/components/button/button_display/_button_display_content.tsx`.
 	 */
 	export interface EuiButtonContentProps extends CommonProps {
 	    /**
@@ -2394,7 +2520,8 @@ declare module '@elastic/eui/src/components/button/button_content' {
 	    iconSide?: ButtonContentIconSide;
 	    isLoading?: boolean;
 	    /**
-	     * Object of props passed to the <span/> wrapping the content's text/children only (not icon)
+	     * Object of props passed to the <span/> wrapping the content's text (only if the children is a `string`)
+	     * It doesn't apply to the icon.
 	     */
 	    textProps?: HTMLAttributes<HTMLSpanElement> & CommonProps & {
 	        ref?: Ref<HTMLSpanElement>;
@@ -2402,117 +2529,17 @@ declare module '@elastic/eui/src/components/button/button_content' {
 	    };
 	    iconSize?: 's' | 'm';
 	}
-	export const EuiButtonContent: FunctionComponent<EuiButtonContentType & EuiButtonContentProps>;
+	export const EuiButtonContentDeprecated: FunctionComponent<EuiButtonContentType & EuiButtonContentProps>;
 
 }
 declare module '@elastic/eui/src/services/security/href_validator' {
 	export function validateHref(href: string): boolean;
 
-}
-declare module '@elastic/eui/src/components/button/button' {
-	import React, { FunctionComponent, Ref, CSSProperties, HTMLAttributes, ReactNode } from 'react';
-	import { CommonProps, ExclusiveUnion, PropsForAnchor, PropsForButton } from '@elastic/eui/src/components/common';
-	import { EuiButtonContentProps, EuiButtonContentType } from '@elastic/eui/src/components/button/button_content';
-	export type ButtonColor = 'primary' | 'accent' | 'success' | 'warning' | 'danger' | 'ghost' | 'text';
-	export type ButtonSize = 's' | 'm';
-	export const colorToClassNameMap: {
-	    [color in ButtonColor]: string;
-	};
-	export const COLORS: ButtonColor[];
-	export const sizeToClassNameMap: {
-	    [size in ButtonSize]: string | null;
-	};
-	export const SIZES: ButtonSize[];
-	/**
-	 * Extends EuiButtonContentProps which provides
-	 * `iconType`, `iconSide`, and `textProps`
-	 */
-	export interface EuiButtonProps extends EuiButtonContentProps, CommonProps {
-	    children?: ReactNode;
-	    /**
-	     * Make button a solid color for prominence
-	     */
-	    fill?: boolean;
-	    /**
-	     * Any of our named colors.
-	     */
-	    color?: ButtonColor;
-	    /**
-	     * Use size `s` in confined spaces
-	     */
-	    size?: ButtonSize;
-	    /**
-	     * `disabled` is also allowed
-	     */
-	    isDisabled?: boolean;
-	    /**
-	     * Applies the boolean state as the `aria-pressed` property to create a toggle button.
-	     * *Only use when the readable text does not change between states.*
-	     */
-	    isSelected?: boolean;
-	    /**
-	     * Extends the button to 100% width
-	     */
-	    fullWidth?: boolean;
-	    /**
-	     * Override the default minimum width
-	     */
-	    minWidth?: CSSProperties['minWidth'];
-	    /**
-	     * Force disables the button and changes the icon to a loading spinner
-	     */
-	    isLoading?: boolean;
-	    /**
-	     * Object of props passed to the <span/> wrapping the button's content
-	     */
-	    contentProps?: EuiButtonContentType;
-	    style?: CSSProperties;
-	}
-	export type EuiButtonPropsForAnchor = PropsForAnchor<EuiButtonProps, {
-	    buttonRef?: Ref<HTMLAnchorElement>;
-	}>;
-	export type EuiButtonPropsForButton = PropsForButton<EuiButtonProps, {
-	    buttonRef?: Ref<HTMLButtonElement>;
-	}>;
-	export type Props = ExclusiveUnion<EuiButtonPropsForAnchor, EuiButtonPropsForButton>;
-	/**
-	 * EuiButton is largely responsible for providing relevant props
-	 * and the logic for element-specific attributes
-	 */
-	export const EuiButton: FunctionComponent<Props>;
-	export type EuiButtonDisplayProps = EuiButtonProps & HTMLAttributes<HTMLElement> & {
-	    /**
-	     * Provide a valid element to render the element as
-	     */
-	    element: 'a' | 'button' | 'span' | 'label';
-	    /**
-	     * Provide the component's base class name to build the class list on
-	     */
-	    baseClassName: string;
-	};
-	/**
-	 * EuiButtonDisplay is an internal-only component used for displaying
-	 * any element as a button.
-	 * NOTE: This component *must* be below EuiButton in the file and
-	 * EuiButton must also set a displayName for react-docgen-typescript
-	 * to correctly set EuiButton's docgenInfo and display a props table.
-	 */
-	export const EuiButtonDisplay: React.ForwardRefExoticComponent<EuiButtonProps & React.HTMLAttributes<HTMLElement> & {
-	    /**
-	     * Provide a valid element to render the element as
-	     */
-	    element: 'a' | 'button' | 'span' | 'label';
-	    /**
-	     * Provide the component's base class name to build the class list on
-	     */
-	    baseClassName: string;
-	} & React.RefAttributes<HTMLElement>>;
-
 }
 declare module '@elastic/eui/src/components/button/button_empty/button_empty' {
 	import { FunctionComponent, Ref } from 'react';
 	import { CommonProps, ExclusiveUnion, PropsForAnchor, PropsForButton } from '@elastic/eui/src/components/common';
-	import { EuiButtonContentProps, EuiButtonContentType } from '@elastic/eui/src/components/button/button_content';
+	import { EuiButtonContentProps, EuiButtonContentType } from '@elastic/eui/src/components/button/_button_content_deprecated';
 	export type EuiButtonEmptyColor = 'primary' | 'danger' | 'text' | 'ghost' | 'success' | 'warning';
 	export const COLORS: EuiButtonEmptyColor[]; const sizeToClassNameMap: {
 	    xs: string;
@@ -2714,7 +2741,7 @@ declare module '@elastic/eui/src/components/button/button_group/button_group_but
 declare module '@elastic/eui/src/components/button/button_group/button_group' {
 	import { FunctionComponent, HTMLAttributes, ReactNode } from 'react';
 	import { ButtonColor } from '@elastic/eui/src/components/button/button';
-	import { EuiButtonContentProps } from '@elastic/eui/src/components/button/button_content';
+	import { EuiButtonContentProps } from '@elastic/eui/src/components/button/_button_content_deprecated';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	export interface EuiButtonGroupOptionProps extends EuiButtonContentProps, CommonProps {
 	    /**
@@ -2957,72 +2984,145 @@ declare module '@elastic/eui/src/services/theme/clone_element' {
 	export const cloneElementWithCss: (element: any, props: any) => React.ReactElement;
 
 }
-declare module '@elastic/eui/src/components/title/title.styles' {
-	import { CSSProperties } from 'react';
+declare module '@elastic/eui/src/components/title/title.styles' {
+	import { CSSProperties } from 'react';
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	import { _FontScaleOptions } from '@elastic/eui/src/global_styling';
+	import { EuiTitleSize } from '@elastic/eui/src/components/title/title'; type EuiThemeTitle = {
+	    fontSize: CSSProperties['fontSize'];
+	    lineHeight: CSSProperties['lineHeight'];
+	    fontWeight: CSSProperties['fontWeight'];
+	    color: CSSProperties['color'];
+	};
+	export const euiTitle: (euiThemeContext: UseEuiTheme, scale?: EuiTitleSize, options?: _FontScaleOptions | undefined) => EuiThemeTitle;
+	export const useEuiTitle: (scale: EuiTitleSize, options?: _FontScaleOptions | undefined) => EuiThemeTitle;
+	/**
+	 * Styles
+	 */
+	export const euiTitleStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiTitle: import("@emotion/utils").SerializedStyles;
+	    uppercase: import("@emotion/utils").SerializedStyles;
+	    xxxs: import("@emotion/utils").SerializedStyles;
+	    xxs: import("@emotion/utils").SerializedStyles;
+	    xs: import("@emotion/utils").SerializedStyles;
+	    s: import("@emotion/utils").SerializedStyles;
+	    m: import("@emotion/utils").SerializedStyles;
+	    l: import("@emotion/utils").SerializedStyles;
+	};
+	export {};
+
+}
+declare module '@elastic/eui/src/components/title/title' {
+	import { FunctionComponent, ReactElement } from 'react';
+	import { CommonProps } from '@elastic/eui/src/components/common';
+	import { WithEuiSystemProps } from '@elastic/eui/src/components/provider/system';
+	export const TITLE_SIZES: readonly ["xxxs", "xxs", "xs", "s", "m", "l"];
+	export type EuiTitleSize = typeof TITLE_SIZES[number];
+	export const TEXT_TRANSFORM: readonly ["uppercase"];
+	export type EuiTitleTextTransform = typeof TEXT_TRANSFORM[number];
+	export type EuiTitleProps = CommonProps & {
+	    /**
+	     * ReactElement to render as this component's content
+	     */
+	    children: ReactElement<any>;
+	    size?: EuiTitleSize;
+	    textTransform?: EuiTitleTextTransform;
+	    id?: string;
+	};
+	export const _EuiTitle: FunctionComponent<EuiTitleProps & WithEuiSystemProps>;
+	export const EuiTitle: import("react").ForwardRefExoticComponent<Omit<CommonProps & {
+	    /**
+	     * ReactElement to render as this component's content
+	     */
+	    children: ReactElement<any>;
+	    size?: "s" | "xs" | "m" | "l" | "xxs" | "xxxs" | undefined;
+	    textTransform?: "uppercase" | undefined;
+	    id?: string | undefined;
+	} & WithEuiSystemProps<{}>, "euiTheme"> & import("react").RefAttributes<Omit<CommonProps & {
+	    /**
+	     * ReactElement to render as this component's content
+	     */
+	    children: ReactElement<any>;
+	    size?: "s" | "xs" | "m" | "l" | "xxs" | "xxxs" | undefined;
+	    textTransform?: "uppercase" | undefined;
+	    id?: string | undefined;
+	} & WithEuiSystemProps<{}>, "euiTheme">>>;
+
+}
+declare module '@elastic/eui/src/components/title' {
+	export type { EuiTitleProps, EuiTitleSize } from '@elastic/eui/src/components/title/title';
+	export { EuiTitle } from '@elastic/eui/src/components/title/title';
+
+}
+declare module '@elastic/eui/src/components/link/link.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiLinkHoverCSS: () => string;
+	export const euiLinkFocusCSS: (euiTheme: UseEuiTheme['euiTheme']) => string;
+	export const euiLinkCSS: (euiTheme: UseEuiTheme['euiTheme']) => string;
+	export const euiLinkStyles: ({ euiTheme }: UseEuiTheme) => {
+	    euiLink: import("@emotion/utils").SerializedStyles;
+	    disabled: import("@emotion/utils").SerializedStyles;
+	    primary: import("@emotion/utils").SerializedStyles;
+	    subdued: import("@emotion/utils").SerializedStyles;
+	    success: import("@emotion/utils").SerializedStyles;
+	    accent: import("@emotion/utils").SerializedStyles;
+	    danger: import("@emotion/utils").SerializedStyles;
+	    warning: import("@emotion/utils").SerializedStyles;
+	    ghost: import("@emotion/utils").SerializedStyles;
+	    text: import("@emotion/utils").SerializedStyles;
+	    euiLink__screenReaderText: import("@emotion/utils").SerializedStyles;
+	    euiLink__externalIcon: import("@emotion/utils").SerializedStyles;
+	};
+
+}
+declare module '@elastic/eui/src/components/text/text.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
-	import { _EuiThemeFontSizeMeasurement } from '@elastic/eui/src/global_styling';
-	import { EuiTitleSize } from '@elastic/eui/src/components/title/title'; type EuiThemeTitle = {
-	    fontSize: CSSProperties['fontSize'];
-	    lineHeight: CSSProperties['lineHeight'];
-	    fontWeight: CSSProperties['fontWeight'];
-	    color: CSSProperties['color'];
+	/**
+	 * TODO: Make this a global value so it can be set by theme?
+	 */
+	export const euiTextConstrainedMaxWidth = "max(64ch, 75%)";
+	/**
+	 * Mixins
+	 */
+	export const euiText: (euiTheme: UseEuiTheme['euiTheme'], inheritColor?: boolean) => {
+	    color: string;
+	    fontWeight: import("csstype").Property.FontWeight | undefined;
 	};
-	export const euiTitle: (scale: "s" | "xs" | "m" | "l" | "xxs" | "xxxs" | undefined, euiTheme: UseEuiTheme['euiTheme'], measurement?: _EuiThemeFontSizeMeasurement) => EuiThemeTitle;
-	export const useEuiTitle: (scale?: EuiTitleSize, measurement?: _EuiThemeFontSizeMeasurement) => EuiThemeTitle;
 	/**
 	 * Styles
 	 */
-	export const euiTitleStyles: ({ euiTheme }: UseEuiTheme) => {
-	    euiTitle: import("@emotion/utils").SerializedStyles;
-	    uppercase: import("@emotion/utils").SerializedStyles;
-	    xxxs: import("@emotion/utils").SerializedStyles;
-	    xxs: import("@emotion/utils").SerializedStyles;
-	    xs: import("@emotion/utils").SerializedStyles;
-	    s: import("@emotion/utils").SerializedStyles;
+	export const euiTextStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiText: import("@emotion/utils").SerializedStyles;
+	    constrainedWidth: import("@emotion/utils").SerializedStyles;
 	    m: import("@emotion/utils").SerializedStyles;
-	    l: import("@emotion/utils").SerializedStyles;
+	    s: import("@emotion/utils").SerializedStyles;
+	    xs: import("@emotion/utils").SerializedStyles;
+	    relative: import("@emotion/utils").SerializedStyles;
 	};
-	export {};
 
 }
-declare module '@elastic/eui/src/components/title/title' {
-	import { FunctionComponent, ReactElement } from 'react';
-	import { CommonProps } from '@elastic/eui/src/components/common';
-	export const TITLE_SIZES: readonly ["xxxs", "xxs", "xs", "s", "m", "l"];
-	export type EuiTitleSize = typeof TITLE_SIZES[number];
-	export const TEXT_TRANSFORM: readonly ["uppercase"];
-	export type EuiTitleTextTransform = typeof TEXT_TRANSFORM[number];
-	export type EuiTitleProps = CommonProps & {
-	    /**
-	     * ReactElement to render as this component's content
-	     */
-	    children: ReactElement<any>;
-	    size?: EuiTitleSize;
-	    textTransform?: EuiTitleTextTransform;
-	    id?: string;
+declare module '@elastic/eui/src/components/text/text_color.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiTextColorStyles: ({ euiTheme }: UseEuiTheme) => {
+	    euiTextColor: import("@emotion/utils").SerializedStyles;
+	    default: import("@emotion/utils").SerializedStyles;
+	    subdued: import("@emotion/utils").SerializedStyles;
+	    success: import("@emotion/utils").SerializedStyles;
+	    accent: import("@emotion/utils").SerializedStyles;
+	    danger: import("@emotion/utils").SerializedStyles;
+	    warning: import("@emotion/utils").SerializedStyles;
+	    ghost: import("@emotion/utils").SerializedStyles;
+	    inherit: import("@emotion/utils").SerializedStyles;
+	    customColor: import("@emotion/utils").SerializedStyles;
 	};
-	export const EuiTitle: FunctionComponent<EuiTitleProps>;
-
-}
-declare module '@elastic/eui/src/components/title' {
-	export type { EuiTitleProps, EuiTitleSize } from '@elastic/eui/src/components/title/title';
-	export { EuiTitle } from '@elastic/eui/src/components/title/title';
 
 }
 declare module '@elastic/eui/src/components/text/text_color' {
-	import { FunctionComponent, HTMLAttributes, CSSProperties } from 'react';
-	import { CommonProps } from '@elastic/eui/src/components/common'; const colorsToClassNameMap: {
-	    default: string;
-	    subdued: string;
-	    success: string;
-	    accent: string;
-	    danger: string;
-	    warning: string;
-	    ghost: string;
-	    inherit: string;
-	};
-	export type TextColor = keyof typeof colorsToClassNameMap;
-	export const COLORS: ("default" | "inherit" | "success" | "accent" | "warning" | "danger" | "subdued" | "ghost")[];
+	import React, { FunctionComponent, HTMLAttributes, CSSProperties } from 'react';
+	import { CommonProps } from '@elastic/eui/src/components/common';
+	import { WithEuiSystemProps } from '@elastic/eui/src/components/provider/system';
+	export const COLORS: readonly ["default", "subdued", "success", "accent", "danger", "warning", "ghost", "inherit"];
+	export type TextColor = typeof COLORS[number];
 	export type EuiTextColorProps = CommonProps & Omit<HTMLAttributes<HTMLDivElement> & HTMLAttributes<HTMLSpanElement>, 'color'> & {
 	    /**
 	     * Any of our named colors or a `hex`, `rgb` or `rgba` value.
@@ -3032,39 +3132,77 @@ declare module '@elastic/eui/src/components/text/text_color' {
 	     * Determines the root element
 	     */
 	    component?: 'div' | 'span';
+	    /**
+	     * Applies text styling to the child element instead of rendering a parent wrapper `span`/`div`.
+	     * Can only be used when wrapping a *single* child element/tag, and not raw text.
+	     */
+	    cloneElement?: boolean;
+	};
+	export const _EuiTextColor: FunctionComponent<EuiTextColorProps & WithEuiSystemProps>;
+	export const EuiTextColor: React.ForwardRefExoticComponent<Omit<CommonProps & Omit<React.HTMLAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLSpanElement>, "color"> & {
+	    /**
+	     * Any of our named colors or a `hex`, `rgb` or `rgba` value.
+	     */
+	    color?: TextColor | CSSProperties['color'];
+	    /**
+	     * Determines the root element
+	     */
+	    component?: "div" | "span" | undefined;
+	    /**
+	     * Applies text styling to the child element instead of rendering a parent wrapper `span`/`div`.
+	     * Can only be used when wrapping a *single* child element/tag, and not raw text.
+	     */
+	    cloneElement?: boolean | undefined;
+	} & WithEuiSystemProps<{}>, "euiTheme"> & React.RefAttributes<Omit<CommonProps & Omit<React.HTMLAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLSpanElement>, "color"> & {
+	    /**
+	     * Any of our named colors or a `hex`, `rgb` or `rgba` value.
+	     */
+	    color?: TextColor | CSSProperties['color'];
+	    /**
+	     * Determines the root element
+	     */
+	    component?: "div" | "span" | undefined;
+	    /**
+	     * Applies text styling to the child element instead of rendering a parent wrapper `span`/`div`.
+	     * Can only be used when wrapping a *single* child element/tag, and not raw text.
+	     */
+	    cloneElement?: boolean | undefined;
+	} & WithEuiSystemProps<{}>, "euiTheme">>>;
+
+}
+declare module '@elastic/eui/src/components/text/text_align.styles' {
+	export const euiTextAlignStyles: () => {
+	    euiTextAlign: import("@emotion/utils").SerializedStyles;
+	    left: import("@emotion/utils").SerializedStyles;
+	    right: import("@emotion/utils").SerializedStyles;
+	    center: import("@emotion/utils").SerializedStyles;
 	};
-	export const EuiTextColor: FunctionComponent<EuiTextColorProps>;
-	export {};
 
 }
 declare module '@elastic/eui/src/components/text/text_align' {
 	import { FunctionComponent, HTMLAttributes } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
-	export const alignmentToClassNameMap: {
-	    left: string;
-	    right: string;
-	    center: string;
-	};
-	export type TextAlignment = keyof typeof alignmentToClassNameMap;
-	export const ALIGNMENTS: ("left" | "right" | "center")[];
+	export const ALIGNMENTS: readonly ["left", "right", "center"];
+	export type TextAlignment = typeof ALIGNMENTS[number];
 	export type EuiTextAlignProps = CommonProps & HTMLAttributes<HTMLDivElement> & {
 	    textAlign?: TextAlignment;
+	    /**
+	     * Applies text styling to the child element instead of rendering a parent wrapper `div`.
+	     * Can only be used when wrapping a *single* child element/tag, and not raw text.
+	     */
+	    cloneElement?: boolean;
 	};
 	export const EuiTextAlign: FunctionComponent<EuiTextAlignProps>;
 
 }
 declare module '@elastic/eui/src/components/text/text' {
-	import { FunctionComponent, HTMLAttributes, CSSProperties } from 'react';
+	import React, { FunctionComponent, HTMLAttributes, CSSProperties } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
+	import { WithEuiSystemProps } from '@elastic/eui/src/components/provider/system';
 	import { TextColor } from '@elastic/eui/src/components/text/text_color';
-	import { TextAlignment } from '@elastic/eui/src/components/text/text_align'; const textSizeToClassNameMap: {
-	    xs: string;
-	    s: string;
-	    m: string;
-	    relative: string;
-	};
-	export type TextSize = keyof typeof textSizeToClassNameMap;
-	export const TEXT_SIZES: ("s" | "xs" | "m" | "relative")[];
+	import { TextAlignment } from '@elastic/eui/src/components/text/text_align';
+	export const TEXT_SIZES: readonly ["xs", "s", "m", "relative"];
+	export type TextSize = typeof TEXT_SIZES[number];
 	export type EuiTextProps = CommonProps & Omit<HTMLAttributes<HTMLDivElement>, 'color'> & {
 	    textAlign?: TextAlignment;
 	    /**
@@ -3077,8 +3215,30 @@ declare module '@elastic/eui/src/components/text/text' {
 	    color?: TextColor | CSSProperties['color'];
 	    grow?: boolean;
 	};
-	export const EuiText: FunctionComponent<EuiTextProps>;
-	export {};
+	export const _EuiText: FunctionComponent<EuiTextProps & WithEuiSystemProps>;
+	export const EuiText: React.ForwardRefExoticComponent<Omit<CommonProps & Omit<React.HTMLAttributes<HTMLDivElement>, "color"> & {
+	    textAlign?: "left" | "right" | "center" | undefined;
+	    /**
+	     * Determines the text size. Choose `relative` to control the `font-size` based on the value of a parent container.
+	     */
+	    size?: "s" | "xs" | "m" | "relative" | undefined;
+	    /**
+	     * Any of our named colors or a `hex`, `rgb` or `rgba` value.
+	     */
+	    color?: TextColor | CSSProperties['color'];
+	    grow?: boolean | undefined;
+	} & WithEuiSystemProps<{}>, "euiTheme"> & React.RefAttributes<Omit<CommonProps & Omit<React.HTMLAttributes<HTMLDivElement>, "color"> & {
+	    textAlign?: "left" | "right" | "center" | undefined;
+	    /**
+	     * Determines the text size. Choose `relative` to control the `font-size` based on the value of a parent container.
+	     */
+	    size?: "s" | "xs" | "m" | "relative" | undefined;
+	    /**
+	     * Any of our named colors or a `hex`, `rgb` or `rgba` value.
+	     */
+	    color?: TextColor | CSSProperties['color'];
+	    grow?: boolean | undefined;
+	} & WithEuiSystemProps<{}>, "euiTheme">>>;
 
 }
 declare module '@elastic/eui/src/components/text' {
@@ -3803,6 +3963,22 @@ declare module '@elastic/eui/src/components/form/file_picker' {
 	export type { EuiFilePickerProps } from '@elastic/eui/src/components/form/file_picker/file_picker';
 	export { EuiFilePicker } from '@elastic/eui/src/components/form/file_picker/file_picker';
 
+}
+declare module '@elastic/eui/src/themes/amsterdam/global_styling/mixins/button' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const BUTTON_COLORS: readonly ["text", "accent", "primary", "success", "warning", "danger", "disabled"];
+	export type _EuiButtonColor = typeof BUTTON_COLORS[number];
+	export const euiButtonColor: (color: _EuiButtonColor, { euiTheme, colorMode }: UseEuiTheme) => string;
+	export const useEuiButtonColorCSS: () => {
+	    text: import("@emotion/utils").SerializedStyles;
+	    accent: import("@emotion/utils").SerializedStyles;
+	    primary: import("@emotion/utils").SerializedStyles;
+	    success: import("@emotion/utils").SerializedStyles;
+	    warning: import("@emotion/utils").SerializedStyles;
+	    danger: import("@emotion/utils").SerializedStyles;
+	    disabled: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/themes/amsterdam/global_styling/functions/shadows' {
 	import { EuiThemeColorModeStandard } from '@elastic/eui/src/services/theme/types';
@@ -3861,6 +4037,7 @@ declare module '@elastic/eui/src/themes/amsterdam/global_styling/mixins/shadow'
 
 }
 declare module '@elastic/eui/src/themes/amsterdam/global_styling/mixins' {
+	export * from '@elastic/eui/src/themes/amsterdam/global_styling/mixins/button';
 	export * from '@elastic/eui/src/themes/amsterdam/global_styling/mixins/shadow';
 
 }
@@ -3880,15 +4057,16 @@ declare module '@elastic/eui/src/components/panel/panel.style' {
 
 }
 declare module '@elastic/eui/src/components/panel/panel' {
-	import { ButtonHTMLAttributes, FunctionComponent, HTMLAttributes, Ref } from 'react';
-	import { EuiBackgroundColor, EuiPaddingSize } from '@elastic/eui/src/global_styling';
+	import React, { ButtonHTMLAttributes, FunctionComponent, HTMLAttributes, Ref } from 'react';
+	import { WithEuiSystemProps } from '@elastic/eui/src/components/provider/system';
+	import { _EuiBackgroundColor, EuiPaddingSize } from '@elastic/eui/src/global_styling';
 	import { CommonProps, ExclusiveUnion } from '@elastic/eui/src/components/common';
 	export const SIZES: readonly ["none", "xs", "s", "m", "l", "xl"]; const _SIZES: ("s" | "none" | "xs" | "m" | "l" | "xl")[];
 	export type PanelPaddingSize = typeof _SIZES[number];
 	export const BORDER_RADII: readonly ["none", "m"];
 	export type PanelBorderRadius = typeof BORDER_RADII[number];
 	export const COLORS: readonly ["transparent", "plain", "subdued", "accent", "primary", "success", "warning", "danger"];
-	export type PanelColor = EuiBackgroundColor;
+	export type PanelColor = _EuiBackgroundColor;
 	export interface _EuiPanelProps extends CommonProps {
 	    /**
 	     * Adds a medium shadow to the panel;
@@ -3926,7 +4104,8 @@ declare module '@elastic/eui/src/components/panel/panel' {
 	    element?: 'button';
 	}
 	export type EuiPanelProps = ExclusiveUnion<_EuiPanelButtonlike, _EuiPanelDivlike>;
-	export const EuiPanel: FunctionComponent<EuiPanelProps>;
+	export const _EuiPanel: FunctionComponent<EuiPanelProps & WithEuiSystemProps>;
+	export const EuiPanel: React.ForwardRefExoticComponent<Omit<((import ("@elastic/eui/src/components/common").DisambiguateSet<_EuiPanelButtonlike, _EuiPanelDivlike> & _EuiPanelDivlike) | (import ("@elastic/eui/src/components/common").DisambiguateSet<_EuiPanelDivlike, _EuiPanelButtonlike> & _EuiPanelButtonlike)) & WithEuiSystemProps<{}>, "euiTheme"> & React.RefAttributes<Omit<((import ("@elastic/eui/src/components/common").DisambiguateSet<_EuiPanelButtonlike, _EuiPanelDivlike> & _EuiPanelDivlike) | (import ("@elastic/eui/src/components/common").DisambiguateSet<_EuiPanelDivlike, _EuiPanelButtonlike> & _EuiPanelButtonlike)) & WithEuiSystemProps<{}>, "euiTheme">>>;
 	export {};
 
 }
@@ -4054,6 +4233,7 @@ declare module '@elastic/eui/src/components/call_out/call_out' {
 	import React, { HTMLAttributes, ReactNode } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { IconType } from '@elastic/eui/src/components/icon';
+	import { WithEuiSystemProps } from '@elastic/eui/src/components/provider/system';
 	export const COLORS: readonly ["primary", "success", "warning", "danger"];
 	export type Color = typeof COLORS[number];
 	export const HEADINGS: readonly ["h1", "h2", "h3", "h4", "h5", "h6", "p"]; type Heading = typeof HEADINGS[number]; type Size = 's' | 'm';
@@ -4064,13 +4244,14 @@ declare module '@elastic/eui/src/components/call_out/call_out' {
 	    size?: Size;
 	    heading?: Heading;
 	};
-	export const EuiCallOut: React.ForwardRefExoticComponent<CommonProps & Omit<React.HTMLAttributes<HTMLDivElement>, "title" | "color"> & {
+	export const _EuiCallOut: React.ForwardRefExoticComponent<CommonProps & Omit<React.HTMLAttributes<HTMLDivElement>, "title" | "color"> & {
 	    title?: ReactNode;
 	    iconType?: IconType | undefined;
 	    color?: "primary" | "success" | "warning" | "danger" | undefined;
 	    size?: Size | undefined;
 	    heading?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | undefined;
-	} & React.RefAttributes<HTMLDivElement>>;
+	} & WithEuiSystemProps<{}> & React.RefAttributes<HTMLDivElement>>;
+	export const EuiCallOut: React.ForwardRefExoticComponent<Omit<EuiCallOutProps, "euiTheme"> & React.RefAttributes<Omit<EuiCallOutProps, "euiTheme">>>;
 	export {};
 
 }
@@ -5794,8 +5975,9 @@ declare module '@elastic/eui/src/components/horizontal_rule/horizontal_rule.styl
 
 }
 declare module '@elastic/eui/src/components/horizontal_rule/horizontal_rule' {
-	import { FunctionComponent, HTMLAttributes } from 'react';
+	import React, { FunctionComponent, HTMLAttributes } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
+	import { WithEuiSystemProps } from '@elastic/eui/src/components/provider/system';
 	export const SIZES: readonly ["full", "half", "quarter"];
 	export const MARGINS: readonly ["none", "xs", "s", "m", "l", "xl", "xxl"];
 	export type EuiHorizontalRuleSize = typeof SIZES[number];
@@ -5807,7 +5989,8 @@ declare module '@elastic/eui/src/components/horizontal_rule/horizontal_rule' {
 	    size?: EuiHorizontalRuleSize;
 	    margin?: EuiHorizontalRuleMargin;
 	}
-	export const EuiHorizontalRule: FunctionComponent<EuiHorizontalRuleProps>;
+	export const _EuiHorizontalRule: FunctionComponent<EuiHorizontalRuleProps & WithEuiSystemProps>;
+	export const EuiHorizontalRule: React.ForwardRefExoticComponent<Omit<EuiHorizontalRuleProps & WithEuiSystemProps<{}>, "euiTheme"> & React.RefAttributes<Omit<EuiHorizontalRuleProps & WithEuiSystemProps<{}>, "euiTheme">>>;
 
 }
 declare module '@elastic/eui/src/components/horizontal_rule' {
@@ -6101,14 +6284,20 @@ declare module '@elastic/eui/src/components/spacer/spacer.styles' {
 
 }
 declare module '@elastic/eui/src/components/spacer/spacer' {
-	import { FunctionComponent, HTMLAttributes } from 'react';
+	import React, { FunctionComponent, HTMLAttributes } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
+	import { WithEuiSystemProps } from '@elastic/eui/src/components/provider/system';
 	export const SIZES: readonly ["xs", "s", "m", "l", "xl", "xxl"];
 	export type SpacerSize = typeof SIZES[number];
 	export type EuiSpacerProps = HTMLAttributes<HTMLDivElement> & CommonProps & {
 	    size?: SpacerSize;
 	};
-	export const EuiSpacer: FunctionComponent<EuiSpacerProps>;
+	export const _EuiSpacer: FunctionComponent<EuiSpacerProps & WithEuiSystemProps>;
+	export const EuiSpacer: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement> & CommonProps & {
+	    size?: "s" | "xs" | "m" | "l" | "xl" | "xxl" | undefined;
+	} & WithEuiSystemProps<{}>, "euiTheme"> & React.RefAttributes<Omit<React.HTMLAttributes<HTMLDivElement> & CommonProps & {
+	    size?: "s" | "xs" | "m" | "l" | "xl" | "xxl" | undefined;
+	} & WithEuiSystemProps<{}>, "euiTheme">>>;
 
 }
 declare module '@elastic/eui/src/components/spacer' {
@@ -6774,6 +6963,109 @@ declare module '@elastic/eui/src/services' {
 	export { throttle } from '@elastic/eui/src/services/throttle';
 	export * from '@elastic/eui/src/services/theme';
 
+}
+declare module '@elastic/eui/src/components/button/button' {
+	import React, { FunctionComponent, Ref, CSSProperties, HTMLAttributes, ReactNode } from 'react';
+	import { CommonProps, ExclusiveUnion, PropsForAnchor, PropsForButton } from '@elastic/eui/src/components/common';
+	import { EuiButtonContentProps, EuiButtonContentType } from '@elastic/eui/src/components/button/_button_content_deprecated';
+	export type ButtonColor = 'primary' | 'accent' | 'success' | 'warning' | 'danger' | 'ghost' | 'text';
+	export type ButtonSize = 's' | 'm';
+	export const colorToClassNameMap: {
+	    [color in ButtonColor]: string;
+	};
+	export const COLORS: ButtonColor[];
+	export const sizeToClassNameMap: {
+	    [size in ButtonSize]: string | null;
+	};
+	export const SIZES: ButtonSize[];
+	/**
+	 * Extends EuiButtonContentProps which provides
+	 * `iconType`, `iconSide`, and `textProps`
+	 */
+	export interface EuiButtonProps extends EuiButtonContentProps, CommonProps {
+	    children?: ReactNode;
+	    /**
+	     * Make button a solid color for prominence
+	     */
+	    fill?: boolean;
+	    /**
+	     * Any of our named colors.
+	     */
+	    color?: ButtonColor;
+	    /**
+	     * Use size `s` in confined spaces
+	     */
+	    size?: ButtonSize;
+	    /**
+	     * `disabled` is also allowed
+	     */
+	    isDisabled?: boolean;
+	    /**
+	     * Applies the boolean state as the `aria-pressed` property to create a toggle button.
+	     * *Only use when the readable text does not change between states.*
+	     */
+	    isSelected?: boolean;
+	    /**
+	     * Extends the button to 100% width
+	     */
+	    fullWidth?: boolean;
+	    /**
+	     * Override the default minimum width
+	     */
+	    minWidth?: CSSProperties['minWidth'];
+	    /**
+	     * Force disables the button and changes the icon to a loading spinner
+	     */
+	    isLoading?: boolean;
+	    /**
+	     * Object of props passed to the <span/> wrapping the button's content
+	     */
+	    contentProps?: EuiButtonContentType;
+	    style?: CSSProperties;
+	}
+	export type EuiButtonPropsForAnchor = PropsForAnchor<EuiButtonProps, {
+	    buttonRef?: Ref<HTMLAnchorElement>;
+	}>;
+	export type EuiButtonPropsForButton = PropsForButton<EuiButtonProps, {
+	    buttonRef?: Ref<HTMLButtonElement>;
+	}>;
+	export type Props = ExclusiveUnion<EuiButtonPropsForAnchor, EuiButtonPropsForButton>;
+	/**
+	 * EuiButton is largely responsible for providing relevant props
+	 * and the logic for element-specific attributes
+	 */
+	export const EuiButton: FunctionComponent<Props>;
+	export type EuiButtonDisplayProps = EuiButtonProps & HTMLAttributes<HTMLElement> & {
+	    /**
+	     * Provide a valid element to render the element as
+	     */
+	    element: 'a' | 'button' | 'span' | 'label';
+	    /**
+	     * Provide the component's base class name to build the class list on
+	     */
+	    baseClassName: string;
+	};
+	/**
+	 * *DEPRECATED*
+	 * EuiButtonDisplay is an internal-only component used for displaying
+	 * any element as a button.
+	 * NOTE: This component *must* be below EuiButton in the file and
+	 * EuiButton must also set a displayName for react-docgen-typescript
+	 * to correctly set EuiButton's docgenInfo and display a props table.
+	 * This component has been deprecated in favor of the new EuiButtonDisplay
+	 * that can be found in `src/components/button/button_display/_button_display.tsx`
+	 */
+	export const EuiButtonDisplayDeprecated: React.ForwardRefExoticComponent<EuiButtonProps & React.HTMLAttributes<HTMLElement> & {
+	    /**
+	     * Provide a valid element to render the element as
+	     */
+	    element: 'a' | 'button' | 'span' | 'label';
+	    /**
+	     * Provide the component's base class name to build the class list on
+	     */
+	    baseClassName: string;
+	} & React.RefAttributes<HTMLElement>>;
+
 }
 declare module '@elastic/eui/src/components/accessibility/skip_link/skip_link.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
@@ -6785,9 +7077,10 @@ declare module '@elastic/eui/src/components/accessibility/skip_link/skip_link.st
 
 }
 declare module '@elastic/eui/src/components/accessibility/skip_link/skip_link' {
-	import { FunctionComponent, Ref } from 'react';
+	import React, { FunctionComponent, Ref } from 'react';
 	import { EuiButtonProps } from '@elastic/eui/src/components/button/button';
 	import { PropsForAnchor, PropsForButton, ExclusiveUnion } from '@elastic/eui/src/components/common';
+	import { WithEuiSystemProps } from '@elastic/eui/src/components/provider/system';
 	export const POSITIONS: readonly ["static", "fixed", "absolute"]; type Positions = typeof POSITIONS[number];
 	interface EuiSkipLinkInterface extends EuiButtonProps {
 	    /**
@@ -6810,7 +7103,26 @@ declare module '@elastic/eui/src/components/accessibility/skip_link/skip_link' {
 	    buttonRef?: Ref<HTMLButtonElement>;
 	}>;
 	export type EuiSkipLinkProps = ExclusiveUnion<propsForAnchor, propsForButton>;
-	export const EuiSkipLink: FunctionComponent<EuiSkipLinkProps>;
+	export const _EuiSkipLink: FunctionComponent<EuiSkipLinkProps & WithEuiSystemProps>;
+	export const EuiSkipLink: React.ForwardRefExoticComponent<Omit<((import ("@elastic/eui/src/components/common").DisambiguateSet<propsForAnchor, propsForButton> & EuiSkipLinkInterface & {
+	    onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+	} & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+	    buttonRef?: React.Ref<HTMLButtonElement> | undefined;
+	}) | (import ("@elastic/eui/src/components/common").DisambiguateSet<propsForButton, propsForAnchor> & EuiSkipLinkInterface & {
+	    href?: string | undefined;
+	    onClick?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
+	} & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+	    buttonRef?: React.Ref<HTMLAnchorElement> | undefined;
+	})) & WithEuiSystemProps<{}>, "euiTheme"> & React.RefAttributes<Omit<((import ("@elastic/eui/src/components/common").DisambiguateSet<propsForAnchor, propsForButton> & EuiSkipLinkInterface & {
+	    onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+	} & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+	    buttonRef?: React.Ref<HTMLButtonElement> | undefined;
+	}) | (import ("@elastic/eui/src/components/common").DisambiguateSet<propsForButton, propsForAnchor> & EuiSkipLinkInterface & {
+	    href?: string | undefined;
+	    onClick?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
+	} & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+	    buttonRef?: React.Ref<HTMLAnchorElement> | undefined;
+	})) & WithEuiSystemProps<{}>, "euiTheme">>>;
 	export {};
 
 }
@@ -6830,7 +7142,7 @@ declare module '@elastic/eui/src/components/accessibility' {
 }
 declare module '@elastic/eui/src/components/accordion/accordion.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiAccordionButtonStyles: ({ euiTheme }: UseEuiTheme) => {
+	export const euiAccordionButtonStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiAccordion__button: import("@emotion/utils").SerializedStyles;
 	};
 	export const euiAccordionChildrenStyles: ({ euiTheme }: UseEuiTheme) => {
@@ -7159,8 +7471,9 @@ declare module '@elastic/eui/src/components/avatar/avatar.styles' {
 
 }
 declare module '@elastic/eui/src/components/avatar/avatar' {
-	import { HTMLAttributes, FunctionComponent } from 'react';
+	import React, { HTMLAttributes, FunctionComponent } from 'react';
 	import { CommonProps, ExclusiveUnion } from '@elastic/eui/src/components/common';
+	import { WithEuiSystemProps } from '@elastic/eui/src/components/provider/system';
 	import { IconType, IconSize, IconColor } from '@elastic/eui/src/components/icon';
 	export const SIZES: readonly ["s", "m", "l", "xl"];
 	export type EuiAvatarSize = typeof SIZES[number];
@@ -7217,7 +7530,8 @@ declare module '@elastic/eui/src/components/avatar/avatar' {
 	     */
 	    isDisabled?: boolean;
 	};
-	export const EuiAvatar: FunctionComponent<EuiAvatarProps>;
+	export const _EuiAvatar: FunctionComponent<EuiAvatarProps & WithEuiSystemProps>;
+	export const EuiAvatar: React.ForwardRefExoticComponent<Omit<EuiAvatarProps & WithEuiSystemProps<{}>, "euiTheme"> & React.RefAttributes<Omit<EuiAvatarProps & WithEuiSystemProps<{}>, "euiTheme">>>;
 	export const checkValidColor: (color: EuiAvatarProps['color']) => void;
 	export {};
 
@@ -7469,7 +7783,8 @@ declare module '@elastic/eui/src/components/bottom_bar/bottom_bar.styles' {
 }
 declare module '@elastic/eui/src/components/bottom_bar/bottom_bar' {
 	import React, { CSSProperties, HTMLAttributes } from 'react';
-	import { CommonProps, ExclusiveUnion } from '@elastic/eui/src/components/common'; type BottomBarPaddingSize = 'none' | 's' | 'm' | 'l';
+	import { CommonProps, ExclusiveUnion } from '@elastic/eui/src/components/common';
+	import { WithEuiSystemProps } from '@elastic/eui/src/components/provider/system'; type BottomBarPaddingSize = 'none' | 's' | 'm' | 'l';
 	export const paddingSizeToClassNameMap: {
 	    [value in BottomBarPaddingSize]: string | null;
 	};
@@ -7525,41 +7840,22 @@ declare module '@elastic/eui/src/components/bottom_bar/bottom_bar' {
 	    /**
 	     * Starting horizontal position when `fixed` position.
 	     * Has no affect on `static` or `sticky` positions.
-	     */
-	    left?: CSSProperties['left'];
-	};
-	export const EuiBottomBar: React.ForwardRefExoticComponent<EuiBottomBarProps & React.RefAttributes<HTMLElement>>;
-	export {};
-
-}
-declare module '@elastic/eui/src/components/bottom_bar' {
-	export type { EuiBottomBarProps } from '@elastic/eui/src/components/bottom_bar/bottom_bar';
-	export { EuiBottomBar } from '@elastic/eui/src/components/bottom_bar/bottom_bar';
-
-}
-declare module '@elastic/eui/src/components/link/link.styles' {
-	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiLinkHoverCSS: () => string;
-	export const euiLinkFocusCSS: ({ euiTheme }: UseEuiTheme) => string;
-	export const euiLinkCSS: (_theme: UseEuiTheme) => string;
-	export const euiLinkStyles: (_theme: UseEuiTheme) => {
-	    euiLink: import("@emotion/utils").SerializedStyles;
-	    disabled: import("@emotion/utils").SerializedStyles;
-	    primary: import("@emotion/utils").SerializedStyles;
-	    subdued: import("@emotion/utils").SerializedStyles;
-	    success: import("@emotion/utils").SerializedStyles;
-	    accent: import("@emotion/utils").SerializedStyles;
-	    danger: import("@emotion/utils").SerializedStyles;
-	    warning: import("@emotion/utils").SerializedStyles;
-	    ghost: import("@emotion/utils").SerializedStyles;
-	    text: import("@emotion/utils").SerializedStyles;
-	    euiLink__screenReaderText: import("@emotion/utils").SerializedStyles;
-	    euiLink__externalIcon: import("@emotion/utils").SerializedStyles;
+	     */
+	    left?: CSSProperties['left'];
 	};
+	export const _EuiBottomBar: React.ForwardRefExoticComponent<(EuiBottomBarProps & WithEuiSystemProps<{}>) & React.RefAttributes<HTMLElement>>;
+	export const EuiBottomBar: React.ForwardRefExoticComponent<EuiBottomBarProps & React.RefAttributes<HTMLElement>>;
+	export {};
+
+}
+declare module '@elastic/eui/src/components/bottom_bar' {
+	export type { EuiBottomBarProps } from '@elastic/eui/src/components/bottom_bar/bottom_bar';
+	export { EuiBottomBar } from '@elastic/eui/src/components/bottom_bar/bottom_bar';
 
 }
 declare module '@elastic/eui/src/components/link/link' {
 	import React, { AnchorHTMLAttributes, ButtonHTMLAttributes, MouseEventHandler } from 'react';
+	import { WithEuiSystemProps } from '@elastic/eui/src/components/provider/system';
 	import { CommonProps, ExclusiveUnion } from '@elastic/eui/src/components/common';
 	export type EuiLinkType = 'button' | 'reset' | 'submit';
 	export const COLORS: readonly ["primary", "subdued", "success", "accent", "danger", "warning", "text", "ghost"];
@@ -7589,8 +7885,9 @@ declare module '@elastic/eui/src/components/link/link' {
 	export interface EuiLinkAnchorProps extends CommonProps, Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'type' | 'color' | 'onClick'>, LinkAnchorProps {
 	    onClick?: MouseEventHandler<HTMLAnchorElement>;
 	}
-	export type EuiLinkProps = ExclusiveUnion<EuiLinkButtonProps, EuiLinkAnchorProps>; const EuiLink: React.ForwardRefExoticComponent<((import ("@elastic/eui/src/components/common").DisambiguateSet<EuiLinkButtonProps, EuiLinkAnchorProps> & EuiLinkAnchorProps) | (import ("@elastic/eui/src/components/common").DisambiguateSet<EuiLinkAnchorProps, EuiLinkButtonProps> & EuiLinkButtonProps)) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
-	export { EuiLink };
+	export type EuiLinkProps = ExclusiveUnion<EuiLinkButtonProps, EuiLinkAnchorProps>;
+	export const _EuiLink: React.ForwardRefExoticComponent<(((import ("@elastic/eui/src/components/common").DisambiguateSet<EuiLinkButtonProps, EuiLinkAnchorProps> & EuiLinkAnchorProps) | (import ("@elastic/eui/src/components/common").DisambiguateSet<EuiLinkAnchorProps, EuiLinkButtonProps> & EuiLinkButtonProps)) & WithEuiSystemProps<{}>) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+	export const EuiLink: React.ForwardRefExoticComponent<Omit<(import ("@elastic/eui/src/components/common").DisambiguateSet<EuiLinkButtonProps, EuiLinkAnchorProps> & EuiLinkAnchorProps) | (import ("@elastic/eui/src/components/common").DisambiguateSet<EuiLinkAnchorProps, EuiLinkButtonProps> & EuiLinkButtonProps), "euiTheme"> & React.RefAttributes<Omit<(import ("@elastic/eui/src/components/common").DisambiguateSet<EuiLinkButtonProps, EuiLinkAnchorProps> & EuiLinkAnchorProps) | (import ("@elastic/eui/src/components/common").DisambiguateSet<EuiLinkAnchorProps, EuiLinkButtonProps> & EuiLinkButtonProps), "euiTheme">>>;
 
 }
 declare module '@elastic/eui/src/components/link' {
@@ -8051,7 +8348,7 @@ declare module '@elastic/eui/src/components/collapsible_nav/collapsible_nav_grou
 	     * with the option to add an iconType
 	     */
 	    title?: ReactNode;
-	} & HTMLAttributes<HTMLDivElement>;
+	} & Omit<HTMLAttributes<HTMLDivElement>, 'title'>;
 	export type EuiCollapsibleNavGroupProps = ExclusiveUnion<GroupAsAccordion, GroupAsDiv>;
 	export const EuiCollapsibleNavGroup: FunctionComponent<EuiCollapsibleNavGroupProps>;
 	export {};
@@ -8413,8 +8710,9 @@ declare module '@elastic/eui/src/components/mark/mark.styles' {
 
 }
 declare module '@elastic/eui/src/components/mark/mark' {
-	import { HTMLAttributes, FunctionComponent, ReactNode } from 'react';
+	import React, { HTMLAttributes, FunctionComponent, ReactNode } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
+	import { WithEuiSystemProps } from '@elastic/eui/src/components/provider/system';
 	export type EuiMarkProps = HTMLAttributes<HTMLElement> & CommonProps & {
 	    /**
 	     * Set to `false` to remove the CSS :before and :after
@@ -8426,7 +8724,28 @@ declare module '@elastic/eui/src/components/mark/mark' {
 	     */
 	    children: ReactNode;
 	};
-	export const EuiMark: FunctionComponent<EuiMarkProps>;
+	export const _EuiMark: FunctionComponent<EuiMarkProps & WithEuiSystemProps>;
+	export const EuiMark: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLElement> & CommonProps & {
+	    /**
+	     * Set to `false` to remove the CSS :before and :after
+	     * screen reader helper text
+	     */
+	    hasScreenReaderHelpText?: boolean | undefined;
+	    /**
+	     * ReactNode to render as this component's content
+	     */
+	    children: ReactNode;
+	} & WithEuiSystemProps<{}>, "euiTheme"> & React.RefAttributes<Omit<React.HTMLAttributes<HTMLElement> & CommonProps & {
+	    /**
+	     * Set to `false` to remove the CSS :before and :after
+	     * screen reader helper text
+	     */
+	    hasScreenReaderHelpText?: boolean | undefined;
+	    /**
+	     * ReactNode to render as this component's content
+	     */
+	    children: ReactNode;
+	} & WithEuiSystemProps<{}>, "euiTheme">>>;
 
 }
 declare module '@elastic/eui/src/components/mark' {
@@ -11972,7 +12291,10 @@ declare module '@elastic/eui/src/components/date_picker/date_picker_range' {
 	     * The end date `EuiDatePicker` element
 	     */
 	    endDateControl: ReactElement;
-	    fullWidth?: boolean;
+	    /**
+	     * The start date `EuiDatePicker` element
+	     */
+	    startDateControl: ReactElement;
 	    /**
 	     * Pass either an icon type or set to `false` to remove icon entirely
 	     */
@@ -11981,11 +12303,19 @@ declare module '@elastic/eui/src/components/date_picker/date_picker_range' {
 	     * Won't apply any additional props to start and end date components
 	     */
 	    isCustom?: boolean;
-	    readOnly?: boolean;
 	    /**
-	     * The start date `EuiDatePicker` element
+	     * Will turn the range delimeter into an alert icon and pass through to each control
 	     */
-	    startDateControl: ReactElement;
+	    isInvalid?: boolean;
+	    /**
+	     * Passes through to each control
+	     */
+	    disabled?: boolean;
+	    /**
+	     * Passes through to each control
+	     */
+	    readOnly?: boolean;
+	    fullWidth?: boolean;
 	};
 	export const EuiDatePickerRange: FunctionComponent<EuiDatePickerRangeProps>;
 
@@ -12477,130 +12807,353 @@ declare module '@elastic/eui/src/components/empty_prompt/empty_prompt' {
 	     */
 	    titleSize?: EuiTitleSize;
 	    /**
-	     * Gets wrapped in a subdued EuiText block.
-	     * Recommendation is to pass typical text elements like `<p>`
+	     * Gets wrapped in a subdued EuiText block.
+	     * Recommendation is to pass typical text elements like `<p>`
+	     */
+	    body?: ReactNode;
+	    /**
+	     * Pass a single or an array of actions (buttons) that get stacked at the bottom.
+	     * Recommendation is to pass the primary action first and secondary actions as empty buttons
+	     */
+	    actions?: ReactNode;
+	    /**
+	     * Optionally provide a footer. Accepts any combination of elements.
+	     */
+	    footer?: ReactNode;
+	    /**
+	     * Sets the layout. When `horizontal` the icon goes to the right column.
+	     */
+	    layout?: 'vertical' | 'horizontal';
+	    /**
+	     * Padding applied around the content and footer.
+	     */
+	    paddingSize?: PaddingSize;
+	};
+	export const EuiEmptyPrompt: FunctionComponent<EuiEmptyPromptProps>;
+
+}
+declare module '@elastic/eui/src/components/empty_prompt' {
+	export type { EuiEmptyPromptProps } from '@elastic/eui/src/components/empty_prompt/empty_prompt';
+	export { EuiEmptyPrompt } from '@elastic/eui/src/components/empty_prompt/empty_prompt';
+
+}
+declare module '@elastic/eui/src/components/error_boundary/error_boundary' {
+	import React, { Component, HTMLAttributes, ReactNode } from 'react';
+	import { CommonProps } from '@elastic/eui/src/components/common';
+	interface EuiErrorBoundaryState {
+	    hasError: boolean;
+	    error?: string;
+	}
+	export type EuiErrorBoundaryProps = CommonProps & HTMLAttributes<HTMLDivElement> & {
+	    /**
+	     * ReactNode to render as this component's content
+	     */
+	    children: ReactNode;
+	};
+	export class EuiErrorBoundary extends Component<EuiErrorBoundaryProps, EuiErrorBoundaryState> {
+	    constructor(props: EuiErrorBoundaryProps);
+	    componentDidCatch({ message, stack }: Error): void;
+	    render(): React.ReactNode;
+	}
+	export {};
+
+}
+declare module '@elastic/eui/src/components/error_boundary' {
+	export type { EuiErrorBoundaryProps } from '@elastic/eui/src/components/error_boundary/error_boundary';
+	export { EuiErrorBoundary } from '@elastic/eui/src/components/error_boundary/error_boundary';
+
+}
+declare module '@elastic/eui/src/components/expression/expression.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiExpressionStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiExpression: import("@emotion/utils").SerializedStyles;
+	    columns: import("@emotion/utils").SerializedStyles;
+	    truncate: import("@emotion/utils").SerializedStyles;
+	    isClickable: import("@emotion/utils").SerializedStyles;
+	    isActive: {
+	        base: import("@emotion/utils").SerializedStyles;
+	        subdued: import("@emotion/utils").SerializedStyles;
+	        primary: import("@emotion/utils").SerializedStyles;
+	        success: import("@emotion/utils").SerializedStyles;
+	        warning: import("@emotion/utils").SerializedStyles;
+	        danger: import("@emotion/utils").SerializedStyles;
+	        accent: import("@emotion/utils").SerializedStyles;
+	    };
+	    subdued: import("@emotion/utils").SerializedStyles;
+	    primary: import("@emotion/utils").SerializedStyles;
+	    success: import("@emotion/utils").SerializedStyles;
+	    warning: import("@emotion/utils").SerializedStyles;
+	    danger: import("@emotion/utils").SerializedStyles;
+	    accent: import("@emotion/utils").SerializedStyles;
+	};
+	export const euiExpressionDescriptionStyles: ({ euiTheme }: UseEuiTheme) => {
+	    euiExpression__description: import("@emotion/utils").SerializedStyles;
+	    truncate: import("@emotion/utils").SerializedStyles;
+	    subdued: import("@emotion/utils").SerializedStyles;
+	    primary: import("@emotion/utils").SerializedStyles;
+	    success: import("@emotion/utils").SerializedStyles;
+	    warning: import("@emotion/utils").SerializedStyles;
+	    danger: import("@emotion/utils").SerializedStyles;
+	    accent: import("@emotion/utils").SerializedStyles;
+	    isUppercase: import("@emotion/utils").SerializedStyles;
+	    columns: import("@emotion/utils").SerializedStyles;
+	};
+	export const euiExpressionValueStyles: ({}: UseEuiTheme) => {
+	    euiExpression__value: import("@emotion/utils").SerializedStyles;
+	    truncate: import("@emotion/utils").SerializedStyles;
+	    columns: import("@emotion/utils").SerializedStyles;
+	};
+	export const euiExpressionIconStyles: ({ euiTheme }: UseEuiTheme) => {
+	    euiExpression__icon: import("@emotion/utils").SerializedStyles;
+	    columns: import("@emotion/utils").SerializedStyles;
+	};
+
+}
+declare module '@elastic/eui/src/components/expression/expression' {
+	import React, { ButtonHTMLAttributes, HTMLAttributes, MouseEventHandler, ReactNode, FunctionComponent } from 'react';
+	import { CommonProps, ExclusiveUnion } from '@elastic/eui/src/components/common';
+	import { WithEuiSystemProps } from '@elastic/eui/src/components/provider/system';
+	export const COLORS: readonly ["subdued", "primary", "success", "accent", "warning", "danger"];
+	export type ExpressionColor = typeof COLORS[number];
+	export type EuiExpressionProps = CommonProps & {
+	    /**
+	     * First part of the expression
+	     */
+	    description: ReactNode;
+	    descriptionProps?: HTMLAttributes<HTMLSpanElement>;
+	    /**
+	     * Second part of the expression
+	     */
+	    value?: ReactNode;
+	    valueProps?: HTMLAttributes<HTMLSpanElement>;
+	    /**
+	     * Color of the `description`
+	     */
+	    color?: ExpressionColor;
+	    /**
+	     * Should the `description` auto-uppercase?
+	     */
+	    uppercase?: boolean;
+	    /**
+	     * Adds an solid border at the bottom
+	     */
+	    isActive?: boolean;
+	    /**
+	     * Turns the component into a button and adds an editable style border at the bottom
+	     */
+	    onClick?: MouseEventHandler<HTMLButtonElement>;
+	    /**
+	     * Sets the display style for the expression. Defaults to `inline`
+	     */
+	    display?: 'inline' | 'columns';
+	    /**
+	     * Forces color to display as `danger` and shows an `alert` icon
+	     */
+	    isInvalid?: boolean;
+	    /**
+	     * Sets a custom width for the description when using the columns layout.
+	     * Set to a number for a custom width in `px`.
+	     * Set to a string for a custom width in custom measurement.
+	     * Defaults to `20%`
+	     */
+	    descriptionWidth?: number | string;
+	    /**
+	     * Sets how to handle the wrapping of long text.
+	     */
+	    textWrap?: 'break-word' | 'truncate';
+	}; type Buttonlike = EuiExpressionProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'> & {
+	    onClick: MouseEventHandler<HTMLButtonElement>;
+	}; type Spanlike = EuiExpressionProps & Omit<HTMLAttributes<HTMLSpanElement>, 'value'>;
+	export const _EuiExpression: FunctionComponent<ExclusiveUnion<Buttonlike, Spanlike> & WithEuiSystemProps>;
+	export const EuiExpression: React.ForwardRefExoticComponent<Omit<((import ("@elastic/eui/src/components/common").DisambiguateSet<Buttonlike, Spanlike> & CommonProps & {
+	    /**
+	     * First part of the expression
+	     */
+	    description: ReactNode;
+	    descriptionProps?: React.HTMLAttributes<HTMLSpanElement> | undefined;
+	    /**
+	     * Second part of the expression
+	     */
+	    value?: ReactNode;
+	    valueProps?: React.HTMLAttributes<HTMLSpanElement> | undefined;
+	    /**
+	     * Color of the `description`
+	     */
+	    color?: "primary" | "success" | "accent" | "warning" | "danger" | "subdued" | undefined;
+	    /**
+	     * Should the `description` auto-uppercase?
+	     */
+	    uppercase?: boolean | undefined;
+	    /**
+	     * Adds an solid border at the bottom
+	     */
+	    isActive?: boolean | undefined;
+	    /**
+	     * Turns the component into a button and adds an editable style border at the bottom
+	     */
+	    onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+	    /**
+	     * Sets the display style for the expression. Defaults to `inline`
+	     */
+	    display?: "inline" | "columns" | undefined;
+	    /**
+	     * Forces color to display as `danger` and shows an `alert` icon
+	     */
+	    isInvalid?: boolean | undefined;
+	    /**
+	     * Sets a custom width for the description when using the columns layout.
+	     * Set to a number for a custom width in `px`.
+	     * Set to a string for a custom width in custom measurement.
+	     * Defaults to `20%`
+	     */
+	    descriptionWidth?: string | number | undefined;
+	    /**
+	     * Sets how to handle the wrapping of long text.
+	     */
+	    textWrap?: "break-word" | "truncate" | undefined;
+	} & Omit<React.HTMLAttributes<HTMLSpanElement>, "value">) | (import ("@elastic/eui/src/components/common").DisambiguateSet<Spanlike, Buttonlike> & CommonProps & {
+	    /**
+	     * First part of the expression
+	     */
+	    description: ReactNode;
+	    descriptionProps?: React.HTMLAttributes<HTMLSpanElement> | undefined;
+	    /**
+	     * Second part of the expression
+	     */
+	    value?: ReactNode;
+	    valueProps?: React.HTMLAttributes<HTMLSpanElement> | undefined;
+	    /**
+	     * Color of the `description`
+	     */
+	    color?: "primary" | "success" | "accent" | "warning" | "danger" | "subdued" | undefined;
+	    /**
+	     * Should the `description` auto-uppercase?
+	     */
+	    uppercase?: boolean | undefined;
+	    /**
+	     * Adds an solid border at the bottom
+	     */
+	    isActive?: boolean | undefined;
+	    /**
+	     * Turns the component into a button and adds an editable style border at the bottom
+	     */
+	    onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+	    /**
+	     * Sets the display style for the expression. Defaults to `inline`
+	     */
+	    display?: "inline" | "columns" | undefined;
+	    /**
+	     * Forces color to display as `danger` and shows an `alert` icon
+	     */
+	    isInvalid?: boolean | undefined;
+	    /**
+	     * Sets a custom width for the description when using the columns layout.
+	     * Set to a number for a custom width in `px`.
+	     * Set to a string for a custom width in custom measurement.
+	     * Defaults to `20%`
+	     */
+	    descriptionWidth?: string | number | undefined;
+	    /**
+	     * Sets how to handle the wrapping of long text.
+	     */
+	    textWrap?: "break-word" | "truncate" | undefined;
+	} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "value"> & {
+	    onClick: MouseEventHandler<HTMLButtonElement>;
+	})) & WithEuiSystemProps<{}>, "euiTheme"> & React.RefAttributes<Omit<((import ("@elastic/eui/src/components/common").DisambiguateSet<Buttonlike, Spanlike> & CommonProps & {
+	    /**
+	     * First part of the expression
+	     */
+	    description: ReactNode;
+	    descriptionProps?: React.HTMLAttributes<HTMLSpanElement> | undefined;
+	    /**
+	     * Second part of the expression
+	     */
+	    value?: ReactNode;
+	    valueProps?: React.HTMLAttributes<HTMLSpanElement> | undefined;
+	    /**
+	     * Color of the `description`
+	     */
+	    color?: "primary" | "success" | "accent" | "warning" | "danger" | "subdued" | undefined;
+	    /**
+	     * Should the `description` auto-uppercase?
+	     */
+	    uppercase?: boolean | undefined;
+	    /**
+	     * Adds an solid border at the bottom
 	     */
-	    body?: ReactNode;
+	    isActive?: boolean | undefined;
 	    /**
-	     * Pass a single or an array of actions (buttons) that get stacked at the bottom.
-	     * Recommendation is to pass the primary action first and secondary actions as empty buttons
+	     * Turns the component into a button and adds an editable style border at the bottom
 	     */
-	    actions?: ReactNode;
+	    onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
 	    /**
-	     * Optionally provide a footer. Accepts any combination of elements.
+	     * Sets the display style for the expression. Defaults to `inline`
 	     */
-	    footer?: ReactNode;
+	    display?: "inline" | "columns" | undefined;
 	    /**
-	     * Sets the layout. When `horizontal` the icon goes to the right column.
+	     * Forces color to display as `danger` and shows an `alert` icon
 	     */
-	    layout?: 'vertical' | 'horizontal';
+	    isInvalid?: boolean | undefined;
 	    /**
-	     * Padding applied around the content and footer.
+	     * Sets a custom width for the description when using the columns layout.
+	     * Set to a number for a custom width in `px`.
+	     * Set to a string for a custom width in custom measurement.
+	     * Defaults to `20%`
 	     */
-	    paddingSize?: PaddingSize;
-	};
-	export const EuiEmptyPrompt: FunctionComponent<EuiEmptyPromptProps>;
-
-}
-declare module '@elastic/eui/src/components/empty_prompt' {
-	export type { EuiEmptyPromptProps } from '@elastic/eui/src/components/empty_prompt/empty_prompt';
-	export { EuiEmptyPrompt } from '@elastic/eui/src/components/empty_prompt/empty_prompt';
-
-}
-declare module '@elastic/eui/src/components/error_boundary/error_boundary' {
-	import React, { Component, HTMLAttributes, ReactNode } from 'react';
-	import { CommonProps } from '@elastic/eui/src/components/common';
-	interface EuiErrorBoundaryState {
-	    hasError: boolean;
-	    error?: string;
-	}
-	export type EuiErrorBoundaryProps = CommonProps & HTMLAttributes<HTMLDivElement> & {
+	    descriptionWidth?: string | number | undefined;
 	    /**
-	     * ReactNode to render as this component's content
+	     * Sets how to handle the wrapping of long text.
 	     */
-	    children: ReactNode;
-	};
-	export class EuiErrorBoundary extends Component<EuiErrorBoundaryProps, EuiErrorBoundaryState> {
-	    constructor(props: EuiErrorBoundaryProps);
-	    componentDidCatch({ message, stack }: Error): void;
-	    render(): React.ReactNode;
-	}
-	export {};
-
-}
-declare module '@elastic/eui/src/components/error_boundary' {
-	export type { EuiErrorBoundaryProps } from '@elastic/eui/src/components/error_boundary/error_boundary';
-	export { EuiErrorBoundary } from '@elastic/eui/src/components/error_boundary/error_boundary';
-
-}
-declare module '@elastic/eui/src/components/expression/expression' {
-	import { ButtonHTMLAttributes, HTMLAttributes, MouseEventHandler, ReactNode, FunctionComponent } from 'react';
-	import { CommonProps, ExclusiveUnion } from '@elastic/eui/src/components/common'; const colorToClassNameMap: {
-	    subdued: string;
-	    primary: string;
-	    success: string;
-	    accent: string;
-	    warning: string;
-	    danger: string;
-	}; const textWrapToClassNameMap: {
-	    'break-word': null;
-	    truncate: string;
-	};
-	export const COLORS: ("primary" | "success" | "accent" | "warning" | "danger" | "subdued")[];
-	export type ExpressionColor = keyof typeof colorToClassNameMap; const displayToClassNameMap: {
-	    inline: null;
-	    columns: string;
-	};
-	export type EuiExpressionProps = CommonProps & {
+	    textWrap?: "break-word" | "truncate" | undefined;
+	} & Omit<React.HTMLAttributes<HTMLSpanElement>, "value">) | (import ("@elastic/eui/src/components/common").DisambiguateSet<Spanlike, Buttonlike> & CommonProps & {
 	    /**
 	     * First part of the expression
 	     */
 	    description: ReactNode;
-	    descriptionProps?: HTMLAttributes<HTMLSpanElement>;
+	    descriptionProps?: React.HTMLAttributes<HTMLSpanElement> | undefined;
 	    /**
 	     * Second part of the expression
 	     */
 	    value?: ReactNode;
-	    valueProps?: HTMLAttributes<HTMLSpanElement>;
+	    valueProps?: React.HTMLAttributes<HTMLSpanElement> | undefined;
 	    /**
 	     * Color of the `description`
 	     */
-	    color?: ExpressionColor;
+	    color?: "primary" | "success" | "accent" | "warning" | "danger" | "subdued" | undefined;
 	    /**
 	     * Should the `description` auto-uppercase?
 	     */
-	    uppercase?: boolean;
+	    uppercase?: boolean | undefined;
 	    /**
 	     * Adds an solid border at the bottom
 	     */
-	    isActive?: boolean;
+	    isActive?: boolean | undefined;
 	    /**
 	     * Turns the component into a button and adds an editable style border at the bottom
 	     */
-	    onClick?: MouseEventHandler<HTMLButtonElement>;
+	    onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
 	    /**
 	     * Sets the display style for the expression. Defaults to `inline`
 	     */
-	    display?: keyof typeof displayToClassNameMap;
+	    display?: "inline" | "columns" | undefined;
 	    /**
 	     * Forces color to display as `danger` and shows an `alert` icon
 	     */
-	    isInvalid?: boolean;
+	    isInvalid?: boolean | undefined;
 	    /**
 	     * Sets a custom width for the description when using the columns layout.
 	     * Set to a number for a custom width in `px`.
 	     * Set to a string for a custom width in custom measurement.
 	     * Defaults to `20%`
 	     */
-	    descriptionWidth?: number | string;
+	    descriptionWidth?: string | number | undefined;
 	    /**
 	     * Sets how to handle the wrapping of long text.
 	     */
-	    textWrap?: keyof typeof textWrapToClassNameMap;
-	}; type Buttonlike = EuiExpressionProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'> & {
+	    textWrap?: "break-word" | "truncate" | undefined;
+	} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "value"> & {
 	    onClick: MouseEventHandler<HTMLButtonElement>;
-	}; type Spanlike = EuiExpressionProps & Omit<HTMLAttributes<HTMLSpanElement>, 'value'>;
-	export const EuiExpression: FunctionComponent<ExclusiveUnion<Buttonlike, Spanlike>>;
+	})) & WithEuiSystemProps<{}>, "euiTheme">>>;
 	export {};
 
 }
@@ -12608,10 +13161,151 @@ declare module '@elastic/eui/src/components/expression' {
 	export type { EuiExpressionProps } from '@elastic/eui/src/components/expression/expression';
 	export { EuiExpression } from '@elastic/eui/src/components/expression/expression';
 
+}
+declare module '@elastic/eui/src/components/facet/facet_button.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiFacetButtonStyles: ({ euiTheme }: UseEuiTheme) => {
+	    euiFacetButton: import("@emotion/utils").SerializedStyles;
+	};
+	export const euiFacetButtonTextStyles: ({ euiTheme }: UseEuiTheme) => {
+	    euiFacetButton__text: import("@emotion/utils").SerializedStyles;
+	    isSelected: import("@emotion/utils").SerializedStyles;
+	    unSelected: import("@emotion/utils").SerializedStyles;
+	};
+	export const euiFacetButtonIconStyles: () => {
+	    euiFacetButton__icon: import("@emotion/utils").SerializedStyles;
+	    isDisabled: import("@emotion/utils").SerializedStyles;
+	};
+	export const euiFacetButtonLoadingSpinnerStyles: () => {
+	    euiFacetButton__loadingSpinner: import("@emotion/utils").SerializedStyles;
+	};
+	export const euiFacetButtonQuantityStyles: () => {
+	    euiFacetButton__quantity: import("@emotion/utils").SerializedStyles;
+	    isDisabled: import("@emotion/utils").SerializedStyles;
+	};
+
+}
+declare module '@elastic/eui/src/components/button/button_display/_button_display.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiButtonBaseCSS: () => string;
+	export const euiButtonDisplayStyles: (euiThemeContext: UseEuiTheme, minWidth: string) => {
+	    euiButtonDisplay: import("@emotion/utils").SerializedStyles;
+	    isDisabled: import("@emotion/utils").SerializedStyles;
+	    fullWidth: import("@emotion/utils").SerializedStyles;
+	    xs: import("@emotion/utils").SerializedStyles;
+	    s: import("@emotion/utils").SerializedStyles;
+	    m: import("@emotion/utils").SerializedStyles;
+	};
+
+}
+declare module '@elastic/eui/src/components/button/button_display/_button_display_content.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiButtonDisplayContentStyles: ({ euiTheme }: UseEuiTheme) => {
+	    euiButtonDisplayContent: import("@emotion/utils").SerializedStyles;
+	    left: import("@emotion/utils").SerializedStyles;
+	    right: import("@emotion/utils").SerializedStyles;
+	    euiButtonDisplayContent__spinner: import("@emotion/utils").SerializedStyles;
+	    euiButtonDisplayContent__icon: import("@emotion/utils").SerializedStyles;
+	    isDisabled: import("@emotion/utils").SerializedStyles;
+	};
+
+}
+declare module '@elastic/eui/src/components/button/button_display/_button_display_content' {
+	import { HTMLAttributes, FunctionComponent, Ref } from 'react';
+	import { CommonProps } from '@elastic/eui/src/components/common';
+	import { IconType } from '@elastic/eui/src/components/icon';
+	export type ButtonContentIconSide = 'left' | 'right' | undefined;
+	export type EuiButtonDisplayContentType = HTMLAttributes<HTMLSpanElement>;
+	/**
+	 * *INTERNAL ONLY*
+	 * This component is simply a helper component for reuse within other button components.
+	 */
+	export interface EuiButtonDisplayContentProps extends CommonProps {
+	    /**
+	     * Any `type` accepted by EuiIcon
+	     */
+	    iconType?: IconType;
+	    /**
+	     * Can only be one side `left` or `right`
+	     */
+	    iconSide?: ButtonContentIconSide;
+	    isLoading?: boolean;
+	    /**
+	     * Object of props passed to the <span/> wrapping the content's text/children only (not icon)
+	     */
+	    textProps?: HTMLAttributes<HTMLSpanElement> & CommonProps & {
+	        ref?: Ref<HTMLSpanElement>;
+	        'data-text'?: string;
+	    };
+	    iconSize?: 's' | 'm';
+	    isDisabled: boolean;
+	}
+	export const EuiButtonDisplayContent: FunctionComponent<EuiButtonDisplayContentType & EuiButtonDisplayContentProps>;
+
+}
+declare module '@elastic/eui/src/components/button/button_display/_button_display' {
+	import React, { CSSProperties, HTMLAttributes, ReactNode, Ref } from 'react';
+	import { CommonProps, ExclusiveUnion, PropsForAnchor, PropsForButton } from '@elastic/eui/src/components/common';
+	import { EuiButtonDisplayContentProps, EuiButtonDisplayContentType } from '@elastic/eui/src/components/button/button_display/_button_display_content';
+	/**
+	 * Extends EuiButtonDisplayContentProps which provides
+	 * `iconType`, `iconSide`, and `textProps`
+	 */
+	export interface EuiButtonDisplayCommonProps extends EuiButtonDisplayContentProps, CommonProps {
+	    children?: ReactNode;
+	    size?: 'xs' | 's' | 'm';
+	    /**
+	     * Applies the boolean state as the `aria-pressed` property to create a toggle button.
+	     * *Only use when the readable text does not change between states.*
+	     */
+	    isSelected?: boolean;
+	    /**
+	     * Extends the button to 100% width
+	     */
+	    fullWidth?: boolean;
+	    /**
+	     * Override the default minimum width
+	     */
+	    minWidth?: CSSProperties['minWidth'];
+	    /**
+	     * Force disables the button and changes the icon to a loading spinner
+	     */
+	    isLoading?: boolean;
+	    /**
+	     * Object of props passed to the <span/> wrapping the button's content
+	     */
+	    contentProps?: EuiButtonDisplayContentType;
+	    style?: CSSProperties;
+	}
+	export type EuiButtonDisplayPropsForAnchor = PropsForAnchor<EuiButtonDisplayCommonProps, {
+	    buttonRef?: Ref<HTMLAnchorElement>;
+	}>;
+	export type EuiButtonDisplayPropsForButton = PropsForButton<EuiButtonDisplayCommonProps, {
+	    buttonRef?: Ref<HTMLButtonElement>;
+	}>;
+	export type Props = ExclusiveUnion<EuiButtonDisplayPropsForAnchor, EuiButtonDisplayPropsForButton>;
+	export type EuiButtonDisplayProps = EuiButtonDisplayCommonProps & HTMLAttributes<HTMLElement> & {
+	    /**
+	     * Provide a valid element to render the element as
+	     */
+	    element?: 'a' | 'button' | 'span' | 'label';
+	};
+	/**
+	 * EuiButtonDisplay is an internal-only component used for displaying
+	 * any element as a button.
+	 */
+	export const EuiButtonDisplay: React.ForwardRefExoticComponent<EuiButtonDisplayCommonProps & React.HTMLAttributes<HTMLElement> & {
+	    /**
+	     * Provide a valid element to render the element as
+	     */
+	    element?: "a" | "button" | "label" | "span" | undefined;
+	} & React.RefAttributes<HTMLElement>>;
+
 }
 declare module '@elastic/eui/src/components/facet/facet_button' {
-	import { FunctionComponent, HTMLAttributes, MouseEventHandler, ReactNode, RefCallback } from 'react';
+	import React, { FunctionComponent, HTMLAttributes, MouseEventHandler, ReactNode, RefCallback } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
+	import { WithEuiSystemProps } from '@elastic/eui/src/components/provider/system';
 	export interface EuiFacetButtonProps extends CommonProps, Omit<HTMLAttributes<HTMLButtonElement>, 'onClick'> {
 	    buttonRef?: RefCallback<HTMLButtonElement>;
 	    /**
@@ -12637,27 +13331,65 @@ declare module '@elastic/eui/src/components/facet/facet_button' {
 	     */
 	    quantity?: number;
 	}
-	export const EuiFacetButton: FunctionComponent<EuiFacetButtonProps>;
+	export const _EuiFacetButton: FunctionComponent<EuiFacetButtonProps & WithEuiSystemProps>;
+	export const EuiFacetButton: React.ForwardRefExoticComponent<Omit<EuiFacetButtonProps & WithEuiSystemProps<{}>, "euiTheme"> & React.RefAttributes<Omit<EuiFacetButtonProps & WithEuiSystemProps<{}>, "euiTheme">>>;
+
+}
+declare module '@elastic/eui/src/components/facet/facet_group.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	import { EuiFacetGroupLayout } from '@elastic/eui/src/components/facet/facet_group';
+	export const euiFacetGroupStyles: ({ euiTheme }: UseEuiTheme, layout: EuiFacetGroupLayout) => {
+	    euiFacetGroup: import("@emotion/utils").SerializedStyles;
+	    none: import("@emotion/utils").SerializedStyles;
+	    s: import("@emotion/utils").SerializedStyles;
+	    m: import("@emotion/utils").SerializedStyles;
+	    l: import("@emotion/utils").SerializedStyles;
+	    horizontal: import("@emotion/utils").SerializedStyles;
+	    vertical: import("@emotion/utils").SerializedStyles;
+	};
 
 }
 declare module '@elastic/eui/src/components/facet/facet_group' {
-	import { FunctionComponent, HTMLAttributes } from 'react';
-	import { CommonProps } from '@elastic/eui/src/components/common'; type FacetGroupLayout = 'vertical' | 'horizontal';
-	export const LAYOUTS: FacetGroupLayout[]; type FacetGroupGutterSize = 'none' | 's' | 'm' | 'l';
-	export const GUTTER_SIZES: FacetGroupGutterSize[];
+	import React, { FunctionComponent, HTMLAttributes } from 'react';
+	import { CommonProps } from '@elastic/eui/src/components/common';
+	import { WithEuiSystemProps } from '@elastic/eui/src/components/provider/system';
+	export const LAYOUTS: readonly ["vertical", "horizontal"];
+	export type EuiFacetGroupLayout = typeof LAYOUTS[number];
+	export const GUTTER_SIZES: readonly ["none", "s", "m", "l"];
+	export type EuiFacetGroupGutterSizes = typeof GUTTER_SIZES[number];
 	export type EuiFacetGroupProps = CommonProps & HTMLAttributes<HTMLDivElement> & {
 	    /**
 	     * Vertically in a column, or horizontally in one wrapping line
 	     */
-	    layout?: FacetGroupLayout;
+	    layout?: EuiFacetGroupLayout;
 	    /**
 	     * Distance between facet buttons.
 	     * Horizontal layout always adds more distance horizontally between buttons.
 	     */
-	    gutterSize?: FacetGroupGutterSize;
+	    gutterSize?: EuiFacetGroupGutterSizes;
 	};
-	export const EuiFacetGroup: FunctionComponent<EuiFacetGroupProps>;
-	export {};
+	export const _EuiFacetGroup: FunctionComponent<EuiFacetGroupProps & WithEuiSystemProps>;
+	export const EuiFacetGroup: React.ForwardRefExoticComponent<Omit<CommonProps & React.HTMLAttributes<HTMLDivElement> & {
+	    /**
+	     * Vertically in a column, or horizontally in one wrapping line
+	     */
+	    layout?: "horizontal" | "vertical" | undefined;
+	    /**
+	     * Distance between facet buttons.
+	     * Horizontal layout always adds more distance horizontally between buttons.
+	     */
+	    gutterSize?: "s" | "none" | "m" | "l" | undefined;
+	} & WithEuiSystemProps<{}>, "euiTheme"> & React.RefAttributes<Omit<CommonProps & React.HTMLAttributes<HTMLDivElement> & {
+	    /**
+	     * Vertically in a column, or horizontally in one wrapping line
+	     */
+	    layout?: "horizontal" | "vertical" | undefined;
+	    /**
+	     * Distance between facet buttons.
+	     * Horizontal layout always adds more distance horizontally between buttons.
+	     */
+	    gutterSize?: "s" | "none" | "m" | "l" | undefined;
+	} & WithEuiSystemProps<{}>, "euiTheme">>>;
 
 }
 declare module '@elastic/eui/src/components/facet' {
@@ -12894,7 +13626,7 @@ declare module '@elastic/eui/src/components/header' {
 }
 declare module '@elastic/eui/src/components/health/health.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiHealthStyles: ({ euiTheme }: UseEuiTheme) => {
+	export const euiHealthStyles: (euiTheme: UseEuiTheme) => {
 	    euiHealth: import("@emotion/utils").SerializedStyles;
 	    xs: import("@emotion/utils").SerializedStyles;
 	    s: import("@emotion/utils").SerializedStyles;
@@ -12904,7 +13636,8 @@ declare module '@elastic/eui/src/components/health/health.styles' {
 
 }
 declare module '@elastic/eui/src/components/health/health' {
-	import { FunctionComponent, HTMLAttributes } from 'react';
+	import React, { FunctionComponent, HTMLAttributes } from 'react';
+	import { WithEuiSystemProps } from '@elastic/eui/src/components/provider/system';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { IconColor } from '@elastic/eui/src/components/icon';
 	export const TEXT_SIZES: readonly ["xs", "s", "m", "inherit"];
@@ -12921,7 +13654,32 @@ declare module '@elastic/eui/src/components/health/health' {
 	     */
 	    textSize?: typeof TEXT_SIZES[number];
 	};
-	export const EuiHealth: FunctionComponent<EuiHealthProps>;
+	export const _EuiHealth: FunctionComponent<EuiHealthProps & WithEuiSystemProps>;
+	export const EuiHealth: React.ForwardRefExoticComponent<Omit<CommonProps & Omit<React.HTMLAttributes<HTMLDivElement>, "color"> & {
+	    /**
+	     * Sets the color of the dot icon.
+	     * It accepts any `IconColor`: `default`, `primary`, `success`, `accent`, `warning`, `danger`, `text`,
+	     * `subdued` or `ghost`; or any valid CSS color value as a `string`
+	     */
+	    color?: string | undefined;
+	    /**
+	     * Matches the text scales of EuiText.
+	     * The `inherit` style will get its font size from the parent element
+	     */
+	    textSize?: "s" | "xs" | "m" | "inherit" | undefined;
+	} & WithEuiSystemProps<{}>, "euiTheme"> & React.RefAttributes<Omit<CommonProps & Omit<React.HTMLAttributes<HTMLDivElement>, "color"> & {
+	    /**
+	     * Sets the color of the dot icon.
+	     * It accepts any `IconColor`: `default`, `primary`, `success`, `accent`, `warning`, `danger`, `text`,
+	     * `subdued` or `ghost`; or any valid CSS color value as a `string`
+	     */
+	    color?: string | undefined;
+	    /**
+	     * Matches the text scales of EuiText.
+	     * The `inherit` style will get its font size from the parent element
+	     */
+	    textSize?: "s" | "xs" | "m" | "inherit" | undefined;
+	} & WithEuiSystemProps<{}>, "euiTheme">>>;
 
 }
 declare module '@elastic/eui/src/components/health' {
@@ -13317,6 +14075,20 @@ declare module '@elastic/eui/src/components/markdown_editor/markdown_editor_text
 	    maxHeight: string;
 	} & React.RefAttributes<HTMLTextAreaElement>>;
 
+}
+declare module '@elastic/eui/src/components/markdown_editor/markdown_format.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	/**
+	 * Styles
+	 */
+	export const euiMarkdownFormatStyles: (euiTheme: UseEuiTheme) => {
+	    euiMarkdownFormat: import("@emotion/utils").SerializedStyles;
+	    m: import("@emotion/utils").SerializedStyles;
+	    s: import("@emotion/utils").SerializedStyles;
+	    xs: import("@emotion/utils").SerializedStyles;
+	    relative: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/markdown_editor/plugins/markdown_tooltip/types' {
 	export interface TooltipNodeDetails {
@@ -13485,10 +14257,11 @@ declare module '@elastic/eui/src/components/markdown_editor/plugins/markdown_def
 
 }
 declare module '@elastic/eui/src/components/markdown_editor/markdown_format' {
-	import { FunctionComponent } from 'react';
-	import { PluggableList } from 'unified';
+	import React, { FunctionComponent } from 'react';
+	import unified, { PluggableList } from 'unified';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { EuiTextProps } from '@elastic/eui/src/components/text/text';
+	import { WithEuiSystemProps } from '@elastic/eui/src/components/provider/system';
 	export type EuiMarkdownFormatProps = CommonProps & Omit<EuiTextProps, 'size'> & {
 	    children: string;
 	    /** array of unified plugins to parse content into an AST */
@@ -13500,7 +14273,28 @@ declare module '@elastic/eui/src/components/markdown_editor/markdown_format' {
 	     */
 	    textSize?: EuiTextProps['size'];
 	};
-	export const EuiMarkdownFormat: FunctionComponent<EuiMarkdownFormatProps>;
+	export const _EuiMarkdownFormat: FunctionComponent<EuiMarkdownFormatProps & WithEuiSystemProps>;
+	export const EuiMarkdownFormat: React.ForwardRefExoticComponent<Omit<CommonProps & Omit<EuiTextProps, "size"> & {
+	    children: string;
+	    /** array of unified plugins to parse content into an AST */
+	    parsingPluginList?: unified.PluggableList<unified.Settings> | undefined;
+	    /** array of unified plugins to convert the AST into a ReactNode */
+	    processingPluginList?: unified.PluggableList<unified.Settings> | undefined;
+	    /**
+	     * Determines the text size. Choose `relative` to control the `font-size` based on the value of a parent container.
+	     */
+	    textSize?: EuiTextProps['size'];
+	} & WithEuiSystemProps<{}>, "euiTheme"> & React.RefAttributes<Omit<CommonProps & Omit<EuiTextProps, "size"> & {
+	    children: string;
+	    /** array of unified plugins to parse content into an AST */
+	    parsingPluginList?: unified.PluggableList<unified.Settings> | undefined;
+	    /** array of unified plugins to convert the AST into a ReactNode */
+	    processingPluginList?: unified.PluggableList<unified.Settings> | undefined;
+	    /**
+	     * Determines the text size. Choose `relative` to control the `font-size` based on the value of a parent container.
+	     */
+	    textSize?: EuiTextProps['size'];
+	} & WithEuiSystemProps<{}>, "euiTheme">>>;
 
 }
 declare module '@elastic/eui/src/components/modal/modal' {
@@ -14289,6 +15083,11 @@ declare module '@elastic/eui/src/components/page' {
 	export type { EuiPageTemplateProps } from '@elastic/eui/src/components/page/page_template';
 	export { EuiPageTemplate } from '@elastic/eui/src/components/page/page_template';
 
+}
+declare module '@elastic/eui/src/global_styling/utility/utility' {
+	
+	export const EuiUtilityClasses: () => JSX.Element;
+
 }
 declare module '@elastic/eui/src/themes/themes' {
 	import { EuiThemeSystem } from '@elastic/eui/src/services';
@@ -14324,16 +15123,32 @@ declare module '@elastic/eui/src/components/provider/provider' {
 	     */
 	    globalStyles?: false | ((params: any) => JSX.Element | null);
 	    /**
-	     * Provide a cache configuration from `@emotion/cache`
+	     * Provide utility classes.
+	     * Pass `false` to remove the default EUI utility classes.
+	     */
+	    utilityClasses?: false | ((params: any) => JSX.Element | null);
+	    /**
+	     * Provide a cache configuration(s) from `@emotion/cache`.
+	     *
+	     * - `default` will encompass all Emotion styles, including consumer defined appliction styles, not handled by nested cache instances.
+	     * - `eui` will scope all EUI component styles.
+	     * - `global` will scope all EUI global and reset styles. Will use `eui` if not specified.
+	     * - `utility` will scope all EUI utility class styles.
+	     *
+	     * A cache instance provided as the sole value will function the same as the `default` cache.
 	     */
-	    cache?: EmotionCache;
+	    cache?: EmotionCache | {
+	        default?: EmotionCache;
+	        eui?: EmotionCache;
+	        global?: EmotionCache;
+	        utility?: EmotionCache;
+	    };
 	}
-	export const EuiProvider: <T extends {} = {}>({ cache, theme, globalStyles: GlobalStyles, colorMode, modify, children, }: React.PropsWithChildren<EuiProviderProps<T>>) => JSX.Element;
+	export const EuiProvider: <T extends {} = {}>({ cache, theme, globalStyles: Globals, utilityClasses: Utilities, colorMode, modify, children, }: React.PropsWithChildren<EuiProviderProps<T>>) => JSX.Element;
 
 }
 declare module '@elastic/eui/src/components/provider' {
-	export type { EuiProviderProps } from '@elastic/eui/src/components/provider/provider';
-	export { EuiProvider } from '@elastic/eui/src/components/provider/provider';
+	export * from '@elastic/eui/src/components/provider/provider';
 
 }
 declare module '@elastic/eui/src/components/tree_view/tree_view' {
@@ -15191,6 +16006,7 @@ declare module '@elastic/eui/src/components/selectable/selectable_list/selectabl
 	import { FixedSizeList, ListProps, ListChildComponentProps as ReactWindowListChildComponentProps } from 'react-window';
 	import { CommonProps, ExclusiveUnion } from '@elastic/eui/src/components/common';
 	import { EuiSelectableOption } from '@elastic/eui/src/components/selectable/selectable_option';
+	import { EuiSelectableOnChangeEvent } from '@elastic/eui/src/components/selectable/selectable';
 	import { EuiSelectableListItemProps } from '@elastic/eui/src/components/selectable/selectable_list/selectable_list_item';
 	interface ListChildComponentProps<T> extends Omit<ReactWindowListChildComponentProps, 'style'> {
 	    data: Array<EuiSelectableOption<T>>;
@@ -15263,7 +16079,7 @@ declare module '@elastic/eui/src/components/selectable/selectable_list/selectabl
 	    /**
 	     * Returns the array of options with altered checked state
 	     */
-	    onOptionClick: (options: Array<EuiSelectableOption<T>>) => void;
+	    onOptionClick: (options: Array<EuiSelectableOption<T>>, event: EuiSelectableOnChangeEvent) => void;
 	    /**
 	     * Custom render for the label portion of the option;
 	     * Takes (option, searchValue), returns ReactNode
@@ -15300,7 +16116,7 @@ declare module '@elastic/eui/src/components/selectable/selectable_list/selectabl
 	    constructor(props: EuiSelectableListProps<T>);
 	    ListRow: React.MemoExoticComponent<({ data, index, style }: ListChildComponentProps<T>) => JSX.Element>;
 	    render(): JSX.Element;
-	    onAddOrRemoveOption: (option: EuiSelectableOption<T>) => void;
+	    onAddOrRemoveOption: (option: EuiSelectableOption<T>, event: EuiSelectableOnChangeEvent) => void;
 	    private onAddOption;
 	    private onRemoveOption;
 	    private onExcludeOption;
@@ -15316,7 +16132,7 @@ declare module '@elastic/eui/src/components/selectable/selectable_list' {
 
 }
 declare module '@elastic/eui/src/components/selectable/selectable' {
-	import React, { Component, HTMLAttributes, ReactNode, ReactElement, KeyboardEvent } from 'react';
+	import React, { Component, HTMLAttributes, ReactNode, ReactElement, KeyboardEvent, MouseEvent } from 'react';
 	import { CommonProps, ExclusiveUnion } from '@elastic/eui/src/components/common';
 	import { EuiSelectableSearch } from '@elastic/eui/src/components/selectable/selectable_search';
 	import { EuiSelectableMessage } from '@elastic/eui/src/components/selectable/selectable_message';
@@ -15324,7 +16140,8 @@ declare module '@elastic/eui/src/components/selectable/selectable' {
 	import { EuiSelectableOption } from '@elastic/eui/src/components/selectable/selectable_option';
 	import { EuiSelectableOptionsListProps } from '@elastic/eui/src/components/selectable/selectable_list/selectable_list';
 	import { EuiSelectableSearchProps } from '@elastic/eui/src/components/selectable/selectable_search/selectable_search';
-	import { Align } from 'react-window'; type RequiredEuiSelectableOptionsListProps = Omit<EuiSelectableOptionsListProps, keyof typeof EuiSelectableList['defaultProps']>; type OptionalEuiSelectableOptionsListProps = Omit<EuiSelectableOptionsListProps, keyof RequiredEuiSelectableOptionsListProps>; type EuiSelectableOptionsListPropsWithDefaults = RequiredEuiSelectableOptionsListProps & Partial<OptionalEuiSelectableOptionsListProps>; type EuiSelectableSearchableProps<T> = ExclusiveUnion<{
+	import { Align } from 'react-window';
+	export type EuiSelectableOnChangeEvent = KeyboardEvent | MouseEvent; type RequiredEuiSelectableOptionsListProps = Omit<EuiSelectableOptionsListProps, keyof typeof EuiSelectableList['defaultProps']>; type OptionalEuiSelectableOptionsListProps = Omit<EuiSelectableOptionsListProps, keyof RequiredEuiSelectableOptionsListProps>; type EuiSelectableOptionsListPropsWithDefaults = RequiredEuiSelectableOptionsListProps & Partial<OptionalEuiSelectableOptionsListProps>; type EuiSelectableSearchableProps<T> = ExclusiveUnion<{
 	    searchable: false;
 	}, {
 	    /**
@@ -15349,9 +16166,10 @@ declare module '@elastic/eui/src/components/selectable/selectable' {
 	     */
 	    options: Array<EuiSelectableOption<T>>;
 	    /**
-	     * Passes back the altered `options` array with selected options as
+	     * Passes back the altered `options` array with selected options having `checked: 'on'`.
+	     * Also passes back the React click/keyboard event as a second argument.
 	     */
-	    onChange?: (options: Array<EuiSelectableOption<T>>) => void;
+	    onChange?: (options: Array<EuiSelectableOption<T>>, event: EuiSelectableOnChangeEvent) => void;
 	    /**
 	     * Sets the single selection policy of
 	     * `false`: allows multiple selection
@@ -15440,7 +16258,7 @@ declare module '@elastic/eui/src/components/selectable/selectable' {
 	    incrementActiveOptionIndex: (amount: number) => void;
 	    onSearchChange: (searchValue: string, visibleOptions: Array<EuiSelectableOption<T>>) => void;
 	    onContainerBlur: (e: React.FocusEvent) => void;
-	    onOptionClick: (options: Array<EuiSelectableOption<T>>) => void;
+	    onOptionClick: (options: Array<EuiSelectableOption<T>>, event: EuiSelectableOnChangeEvent) => void;
 	    scrollToItem: (index: number, align?: Align | undefined) => void;
 	    makeOptionId: (index?: number | undefined) => string;
 	    render(): JSX.Element;
@@ -17520,8 +18338,9 @@ declare module '@elastic/eui/src/components/timeline/timeline_item_icon.styles'
 
 }
 declare module '@elastic/eui/src/components/timeline/timeline_item_icon' {
-	import { FunctionComponent, ReactNode } from 'react';
+	import React, { FunctionComponent, ReactNode } from 'react';
 	import { IconType } from '@elastic/eui/src/components/icon';
+	import { WithEuiSystemProps } from '@elastic/eui/src/components/provider/system';
 	import { EuiTimelineItemVerticalAlign } from '@elastic/eui/src/components/timeline/timeline_item';
 	export interface EuiTimelineItemIconProps {
 	    /**
@@ -17535,7 +18354,12 @@ declare module '@elastic/eui/src/components/timeline/timeline_item_icon' {
 	     */
 	    iconAriaLabel?: string;
 	}
-	export const EuiTimelineItemIcon: FunctionComponent<EuiTimelineItemIconProps>;
+	export const _EuiTimelineItemIcon: FunctionComponent<EuiTimelineItemIconProps & WithEuiSystemProps>;
+	export const EuiTimelineItemIcon: React.ForwardRefExoticComponent<Omit<EuiTimelineItemIconProps & WithEuiSystemProps<{}> & {
+	    children?: React.ReactNode;
+	}, "euiTheme"> & React.RefAttributes<Omit<EuiTimelineItemIconProps & WithEuiSystemProps<{}> & {
+	    children?: React.ReactNode;
+	}, "euiTheme">>>;
 
 }
 declare module '@elastic/eui/src/components/timeline/timeline_item.styles' {
@@ -17546,8 +18370,9 @@ declare module '@elastic/eui/src/components/timeline/timeline_item.styles' {
 
 }
 declare module '@elastic/eui/src/components/timeline/timeline_item' {
-	import { FunctionComponent, HTMLAttributes, ElementType } from 'react';
+	import React, { FunctionComponent, HTMLAttributes, ElementType } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
+	import { WithEuiSystemProps } from '@elastic/eui/src/components/provider/system';
 	import { EuiTimelineItemEventProps } from '@elastic/eui/src/components/timeline/timeline_item_event';
 	import { EuiTimelineItemIconProps } from '@elastic/eui/src/components/timeline/timeline_item_icon';
 	export const VERTICAL_ALIGN: readonly ["top", "center"];
@@ -17564,7 +18389,8 @@ declare module '@elastic/eui/src/components/timeline/timeline_item' {
 	     */
 	    component?: ElementType;
 	}
-	export const EuiTimelineItem: FunctionComponent<EuiTimelineItemProps>;
+	export const _EuiTimelineItem: FunctionComponent<EuiTimelineItemProps & WithEuiSystemProps>;
+	export const EuiTimelineItem: React.ForwardRefExoticComponent<Omit<EuiTimelineItemProps & WithEuiSystemProps<{}>, "euiTheme"> & React.RefAttributes<Omit<EuiTimelineItemProps & WithEuiSystemProps<{}>, "euiTheme">>>;
 
 }
 declare module '@elastic/eui/src/components/timeline/timeline' {