@elastic/eui 59.0.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';
@@ -2114,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' {
@@ -2291,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';
@@ -2310,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' {
@@ -2329,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;
@@ -2351,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' {
@@ -2379,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> & {
@@ -2391,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' {
@@ -2407,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';
@@ -2415,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 {
 	    /**
@@ -2429,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>;
@@ -2437,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;
@@ -2749,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 {
 	    /**
@@ -3023,6 +3015,7 @@ declare module '@elastic/eui/src/components/title/title.styles' {
 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"];
@@ -3036,7 +3029,24 @@ declare module '@elastic/eui/src/components/title/title' {
 	    textTransform?: EuiTitleTextTransform;
 	    id?: string;
 	};
-	export const EuiTitle: FunctionComponent<EuiTitleProps>;
+	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' {
@@ -3108,8 +3118,9 @@ declare module '@elastic/eui/src/components/text/text_color.styles' {
 
 }
 declare module '@elastic/eui/src/components/text/text_color' {
-	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';
 	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'> & {
@@ -3127,7 +3138,36 @@ declare module '@elastic/eui/src/components/text/text_color' {
 	     */
 	    cloneElement?: boolean;
 	};
-	export const EuiTextColor: FunctionComponent<EuiTextColorProps>;
+	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' {
@@ -3156,8 +3196,9 @@ declare module '@elastic/eui/src/components/text/text_align' {
 
 }
 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';
 	export const TEXT_SIZES: readonly ["xs", "s", "m", "relative"];
@@ -3174,7 +3215,30 @@ declare module '@elastic/eui/src/components/text/text' {
 	    color?: TextColor | CSSProperties['color'];
 	    grow?: boolean;
 	};
-	export const EuiText: FunctionComponent<EuiTextProps>;
+	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' {
@@ -3993,7 +4057,8 @@ 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 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")[];
@@ -4039,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 {};
 
 }
@@ -4167,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';
@@ -4177,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 {};
 
 }
@@ -5907,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];
@@ -5920,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' {
@@ -6214,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' {
@@ -6887,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';
@@ -6898,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 {
 	    /**
@@ -6923,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 {};
 
 }
@@ -7272,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];
@@ -7330,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 {};
 
@@ -7582,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;
 	};
@@ -7641,6 +7843,7 @@ declare module '@elastic/eui/src/components/bottom_bar/bottom_bar' {
 	     */
 	    left?: CSSProperties['left'];
 	};
+	export const _EuiBottomBar: React.ForwardRefExoticComponent<(EuiBottomBarProps & WithEuiSystemProps<{}>) & React.RefAttributes<HTMLElement>>;
 	export const EuiBottomBar: React.ForwardRefExoticComponent<EuiBottomBarProps & React.RefAttributes<HTMLElement>>;
 	export {};
 
@@ -7652,6 +7855,7 @@ declare module '@elastic/eui/src/components/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"];
@@ -7681,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' {
@@ -8505,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
@@ -8518,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' {
@@ -12619,124 +12846,314 @@ declare module '@elastic/eui/src/components/error_boundary/error_boundary' {
 	}
 	export type EuiErrorBoundaryProps = CommonProps & HTMLAttributes<HTMLDivElement> & {
 	    /**
-	     * ReactNode to render as this component's content
+	     * 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
+	     */
+	    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.
 	     */
-	    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 { ButtonHTMLAttributes, HTMLAttributes, MouseEventHandler, ReactNode, FunctionComponent } from 'react';
-	import { CommonProps, ExclusiveUnion } from '@elastic/eui/src/components/common';
-	export const COLORS: readonly ["subdued", "primary", "success", "accent", "warning", "danger"];
-	export type ExpressionColor = typeof COLORS[number];
-	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?: 'inline' | 'columns';
+	    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?: 'break-word' | 'truncate';
-	}; 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 {};
 
 }
@@ -12744,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>;
 	    /**
@@ -12773,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' {
@@ -13040,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"];
@@ -13057,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' {
@@ -13635,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 */
@@ -13650,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' {
@@ -14439,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';
@@ -14474,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' {
@@ -17673,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 {
 	    /**
@@ -17688,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' {
@@ -17699,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"];
@@ -17717,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' {