@elastic/eui 63.0.6 → 64.0.2

package/eui.d.ts

@@ -189,13 +189,21 @@ declare module '@elastic/eui/src/services/alignment' {
 	export const CENTER_ALIGNMENT = "center";
 	export type HorizontalAlignment = 'left' | 'right' | 'center';
 
+}
+declare module '@elastic/eui/src/global_styling/variables/breakpoint' {
+	export const EuiThemeBreakpoints: readonly ["xs", "s", "m", "l", "xl"];
+	export type _EuiThemeBreakpoint = string;
+	export type _EuiThemeBreakpoints = Record<_EuiThemeBreakpoint, number>;
+
 }
 declare module '@elastic/eui/src/components/common' {
 	import { AnchorHTMLAttributes, ButtonHTMLAttributes, ComponentProps, Component, FunctionComponent, JSXElementConstructor, MouseEventHandler, SFC } from 'react';
+	import { Interpolation, Theme } from '@emotion/react';
 	export interface CommonProps {
 	    className?: string;
 	    'aria-label'?: string;
 	    'data-test-subj'?: string;
+	    css?: Interpolation<Theme>;
 	}
 	export type NoArgCallback<T> = () => T;
 	export const assertNever: (x: never) => never;
@@ -300,14 +308,6 @@ declare module '@elastic/eui/src/components/common' {
 	}; type NonAny = number | boolean | string | symbol | null;
 	export {};
 
-}
-declare module '@elastic/eui/src/global_styling/variables/breakpoint' {
-	export const EuiThemeBreakpoints: readonly ["xs", "s", "m", "l", "xl"];
-	export type _EuiThemeBreakpoint = typeof EuiThemeBreakpoints[number];
-	export type _EuiThemeBreakpoints = {
-	    [key in _EuiThemeBreakpoint]: number;
-	};
-
 }
 declare module '@elastic/eui/src/global_styling/variables/animations' {
 	import { CSSProperties } from 'react';
@@ -335,6 +335,62 @@ declare module '@elastic/eui/src/global_styling/variables/animations' {
 	export type _EuiThemeAnimationEasings = Record<_EuiThemeAnimationEasing, CSSProperties['animationTimingFunction']>;
 	export type _EuiThemeAnimation = _EuiThemeAnimationEasings & _EuiThemeAnimationSpeeds;
 
+}
+declare module '@elastic/eui/src/global_styling/variables/borders' {
+	import { CSSProperties } from 'react';
+	import { ColorModeSwitch } from '@elastic/eui/src/services/theme/types';
+	export interface _EuiThemeBorderWidthValues {
+	    /**
+	     * Thinnest width for border
+	     */
+	    thin: CSSProperties['borderWidth'];
+	    /**
+	     * Thickest width for border
+	     */
+	    thick: CSSProperties['borderWidth'];
+	}
+	export interface _EuiThemeBorderRadiusValues {
+	    /**
+	     * Primary corner radius size
+	     */
+	    medium: CSSProperties['borderRadius'];
+	    /**
+	     * Small corner radius size
+	     */
+	    small: CSSProperties['borderRadius'];
+	}
+	export interface _EuiThemeBorderColorValues {
+	    /**
+	     * Color for all borders; Default is `colors.lightShade`
+	     */
+	    color: ColorModeSwitch;
+	}
+	export interface _EuiThemeBorderValues extends _EuiThemeBorderColorValues {
+	    /**
+	     * Varied thicknesses for borders
+	     */
+	    width: _EuiThemeBorderWidthValues;
+	    /**
+	     * Varied border radii
+	     */
+	    radius: _EuiThemeBorderRadiusValues;
+	}
+	export interface _EuiThemeBorderTypes {
+	    /**
+	     * Full `border` property string computed using `border.width.thin` and `border.color`
+	     */
+	    thin: CSSProperties['border'];
+	    /**
+	     * Full `border` property string computed using `border.width.thick` and `border.color`
+	     */
+	    thick: CSSProperties['border'];
+	    /**
+	     * Full editable style `border` property string computed using `border.width.thick` and `border.color`
+	     */
+	    editable: CSSProperties['border'];
+	}
+	export type _EuiThemeBorder = _EuiThemeBorderValues & _EuiThemeBorderTypes;
+
 }
 declare module '@elastic/eui/src/global_styling/variables/colors' {
 	import { ColorModeSwitch, StrictColorModeSwitch } from '@elastic/eui/src/services/theme/types';
@@ -649,143 +705,6 @@ declare module '@elastic/eui/src/services/theme/types' {
 	    themeName: string;
 	};
 
-}
-declare module '@elastic/eui/src/global_styling/variables/borders' {
-	import { CSSProperties } from 'react';
-	import { ColorModeSwitch } from '@elastic/eui/src/services/theme/types';
-	export interface _EuiThemeBorderWidthValues {
-	    /**
-	     * Thinnest width for border
-	     */
-	    thin: CSSProperties['borderWidth'];
-	    /**
-	     * Thickest width for border
-	     */
-	    thick: CSSProperties['borderWidth'];
-	}
-	export interface _EuiThemeBorderRadiusValues {
-	    /**
-	     * Primary corner radius size
-	     */
-	    medium: CSSProperties['borderRadius'];
-	    /**
-	     * Small corner radius size
-	     */
-	    small: CSSProperties['borderRadius'];
-	}
-	export interface _EuiThemeBorderColorValues {
-	    /**
-	     * Color for all borders; Default is `colors.lightShade`
-	     */
-	    color: ColorModeSwitch;
-	}
-	export interface _EuiThemeBorderValues extends _EuiThemeBorderColorValues {
-	    /**
-	     * Varied thicknesses for borders
-	     */
-	    width: _EuiThemeBorderWidthValues;
-	    /**
-	     * Varied border radii
-	     */
-	    radius: _EuiThemeBorderRadiusValues;
-	}
-	export interface _EuiThemeBorderTypes {
-	    /**
-	     * Full `border` property string computed using `border.width.thin` and `border.color`
-	     */
-	    thin: CSSProperties['border'];
-	    /**
-	     * Full `border` property string computed using `border.width.thick` and `border.color`
-	     */
-	    thick: CSSProperties['border'];
-	    /**
-	     * Full editable style `border` property string computed using `border.width.thick` and `border.color`
-	     */
-	    editable: CSSProperties['border'];
-	}
-	export type _EuiThemeBorder = _EuiThemeBorderValues & _EuiThemeBorderTypes;
-
-}
-declare module '@elastic/eui/src/global_styling/variables/shadow' {
-	export const EuiThemeShadowSizes: readonly ["xs", "s", "m", "l", "xl"];
-	export type _EuiThemeShadowSize = typeof EuiThemeShadowSizes[number];
-	/**
-	 * Shadow t-shirt sizes descriptions
-	 */
-	export const _EuiShadowSizesDescriptions: Record<_EuiThemeShadowSize, string>;
-	export interface _EuiThemeShadowCustomColor {
-	    color?: string;
-	    property?: 'box-shadow' | 'filter';
-	}
-
-}
-declare module '@elastic/eui/src/global_styling/variables' {
-	export * from '@elastic/eui/src/global_styling/variables/animations';
-	export * from '@elastic/eui/src/global_styling/variables/borders';
-	export * from '@elastic/eui/src/global_styling/variables/breakpoint';
-	export * from '@elastic/eui/src/global_styling/variables/colors';
-	export * from '@elastic/eui/src/global_styling/variables/levels';
-	export * from '@elastic/eui/src/global_styling/variables/size';
-	export * from '@elastic/eui/src/global_styling/variables/shadow';
-	export * from '@elastic/eui/src/global_styling/variables/states';
-	export * from '@elastic/eui/src/global_styling/variables/typography';
-
-}
-declare module '@elastic/eui/src/themes/amsterdam/global_styling/variables/_breakpoint' {
-	import { _EuiThemeBreakpoints } from '@elastic/eui/src/global_styling/variables';
-	export const breakpoint: _EuiThemeBreakpoints;
-
-}
-declare module '@elastic/eui/src/services/breakpoint/breakpoint' {
-	import { _EuiThemeBreakpoint, _EuiThemeBreakpoints } from '@elastic/eui/src/global_styling/variables/breakpoint';
-	export type EuiBreakpointSize = _EuiThemeBreakpoint;
-	export type EuiBreakpoints = _EuiThemeBreakpoints;
-	export const BREAKPOINTS: _EuiThemeBreakpoints;
-	export const BREAKPOINT_KEYS: ("s" | "xs" | "m" | "l" | "xl")[];
-	/**
-	 * Given the current `width` and an object of `EuiBreakpoints`,
-	 * this function returns the string that is the name of the breakpoint key
-	 * that is less than or equal to the width
-	 *
-	 * @param {number} width Can either be the full window width or any width
-	 * @param {EuiBreakpoints} breakpoints An object with keys for sizing and values for minimum width
-	 * @returns {string | undefined} Name of the breakpoint key or `undefined` if a key doesn't exist
-	 */
-	export function getBreakpoint(width: number, breakpoints?: EuiBreakpoints): EuiBreakpointSize | undefined;
-	/**
-	 * Given the current `width` and a max breakpoint key,
-	 * this function returns true or false if the `width` falls within the max
-	 * breakpoint or any breakpoints below
-	 *
-	 * @param {number} width Can either be the full window width or any width
-	 * @param {EuiBreakpointSize | number} max The named breakpoint or custom number to check against
-	 * @param {EuiBreakpoints} breakpoints An object with keys for sizing and values for minimum width
-	 * @returns {boolean} Will return `false` if it can't find a value for the `max` breakpoint
-	 */
-	export function isWithinMaxBreakpoint(width: number, max: EuiBreakpointSize | number, breakpoints?: EuiBreakpoints): boolean;
-	/**
-	 * Given the current `width` and a min breakpoint key,
-	 * this function returns true or false if the `width` falls within the min
-	 * breakpoint or any breakpoints above
-	 *
-	 * @param {number} width Can either be the full window width or any width
-	 * @param {EuiBreakpointSize | number} min The named breakpoint or custom number to check against
-	 * @param {EuiBreakpoints} breakpoints An object with keys for sizing and values for minimum width
-	 * @returns {boolean} Will return `false` if it can't find a value for the `min` breakpoint
-	 */
-	export function isWithinMinBreakpoint(width: number, min: EuiBreakpointSize | number, breakpoints?: EuiBreakpoints): boolean;
-	/**
-	 * Given the current `width` and an array of breakpoint keys,
-	 * this function returns true or false if the `width` falls within
-	 * any of the named breakpoints
-	 *
-	 * @param {number} width Can either be the full window width or any width
-	 * @param {EuiBreakpointSize[]} sizes An array of named breakpoints
-	 * @param {EuiBreakpoints} breakpoints An object with keys for sizing and values for minimum width
-	 * @returns {boolean} Returns `true` if current breakpoint name is included in `sizes`
-	 */
-	export function isWithinBreakpoints(width: number, sizes: EuiBreakpointSize[], breakpoints?: EuiBreakpoints): boolean;
-
 }
 declare module '@elastic/eui/src/services/theme/utils' {
 	import { EuiThemeColorMode, EuiThemeColorModeStandard, EuiThemeSystem, EuiThemeShape, EuiThemeComputed } from '@elastic/eui/src/services/theme/types';
@@ -1581,57 +1500,6 @@ declare module '@elastic/eui/src/global_styling/mixins/_color' {
 	    danger: import("@emotion/utils").SerializedStyles;
 	};
 
-}
-declare module '@elastic/eui/src/global_styling/mixins/_helpers' {
-	import { CSSProperties } from 'react';
-	import { UseEuiTheme } from '@elastic/eui/src/services/theme';
-	/**
-	 * Set scroll bar appearance on Chrome (and firefox).
-	 * All parameters are optional and default to specific global settings.
-	 */
-	export interface EuiScrollBarStyles {
-	    thumbColor?: CSSProperties['backgroundColor'];
-	    trackColor?: CSSProperties['backgroundColor'];
-	    /**
-	     * Defaults to `thin`. Use `auto` only for large page scrollbars
-	     */
-	    width?: CSSProperties['scrollbarWidth'];
-	    /**
-	     * Overall width (height for horizontal scrollbars)
-	     */
-	    size?: CSSProperties['width'];
-	    /**
-	     * Corner sizes are usually determined by `width` and
-	     * are used as an inset border and therefore a smaller corner size means a larger thumb
-	     */
-	    corner?: CSSProperties['borderWidth'];
-	}
-	export const euiScrollBarStyles: ({ euiTheme: { colors, size } }: UseEuiTheme, { thumbColor: _thumbColor, trackColor, width, size: _size, corner: _corner, }?: EuiScrollBarStyles) => string;
-	export const useEuiScrollBar: (options?: EuiScrollBarStyles | undefined) => string;
-	/**
-	 * 1. Focus rings shouldn't be visible on scrollable regions, but a11y requires them to be focusable.
-	 *    Browser's supporting `:focus-visible` will still show outline on keyboard focus only.
-	 *    Others like Safari, won't show anything at all.
-	 */
-	interface _EuiYScroll {
-	    height?: CSSProperties['height'];
-	}
-	export const euiYScroll: (euiTheme: UseEuiTheme, { height }?: _EuiYScroll) => string;
-	export const useEuiYScroll: ({ height }?: _EuiYScroll) => string;
-	export const euiYScrollWithShadows: (euiTheme: UseEuiTheme, { height }?: _EuiYScroll) => string;
-	export const useEuiYScrollWithShadows: ({ height }?: _EuiYScroll) => string;
-	export const euiXScroll: (euiTheme: UseEuiTheme) => string;
-	export const useEuiXScroll: () => string;
-	export const euiXScrollWithShadows: (euiTheme: UseEuiTheme) => string;
-	export const useEuiXScrollWithShadows: () => string;
-	interface EuiScrollOverflowStyles {
-	    direction?: 'y' | 'x';
-	    mask?: boolean;
-	}
-	export const euiOverflowScroll: (euiTheme: UseEuiTheme, { direction, mask }?: EuiScrollOverflowStyles) => string;
-	export const useEuiOverflowScroll: (direction: EuiScrollOverflowStyles['direction'], mask?: EuiScrollOverflowStyles['mask']) => string;
-	export {};
-
 }
 declare module '@elastic/eui/src/global_styling/functions/logicals' {
 	/**
@@ -1716,6 +1584,17 @@ declare module '@elastic/eui/src/global_styling/functions/logicals' {
 	 * @returns `string` Returns the logical CSS property version for the given `property: value` pair
 	 */
 	export const logicalCSS: (property: LogicalProperties, value?: any) => string;
+	/**
+	 * Some logical properties are not yet fully supported by all browsers.
+	 * For those cases, we should use the old property as a fallback for
+	 * browsers missing support, while allowing supporting browsers to use
+	 * the logical properties.
+	 *
+	 * Examples:
+	 * https://caniuse.com/?search=overflow-block
+	 * https://caniuse.com/mdn-css_properties_float_flow_relative_values
+	 */
+	export const logicalCSSWithFallback: (property: LogicalProperties, value?: any) => string;
 	/**
 	 *
 	 * @param property A string that is a valid CSS logical property
@@ -1840,7 +1719,7 @@ declare module '@elastic/eui/src/global_styling/functions/typography' {
 	 * this mixin will ensure that the sizing is dependent on the boldest
 	 * weight so it doesn't shift sibling content.
 	 */
-	export const euiTextShift: (fontWeight: "bold" | "light" | "regular" | "medium" | "semiBold" | undefined, attribute: string | undefined, euiTheme: UseEuiTheme['euiTheme']) => string;
+	export const euiTextShift: (fontWeight: "bold" | "medium" | "light" | "regular" | "semiBold" | undefined, attribute: string | undefined, euiTheme: UseEuiTheme['euiTheme']) => string;
 
 }
 declare module '@elastic/eui/src/global_styling/functions' {
@@ -1848,6 +1727,61 @@ declare module '@elastic/eui/src/global_styling/functions' {
 	export * from '@elastic/eui/src/global_styling/functions/size';
 	export * from '@elastic/eui/src/global_styling/functions/typography';
 
+}
+declare module '@elastic/eui/src/global_styling/mixins/_helpers' {
+	import { CSSProperties } from 'react';
+	import { UseEuiTheme } from '@elastic/eui/src/services/theme';
+	/**
+	 * Set scroll bar appearance on Chrome (and firefox).
+	 * All parameters are optional and default to specific global settings.
+	 */
+	export interface EuiScrollBarStyles {
+	    thumbColor?: CSSProperties['backgroundColor'];
+	    trackColor?: CSSProperties['backgroundColor'];
+	    /**
+	     * Defaults to `thin`. Use `auto` only for large page scrollbars
+	     */
+	    width?: CSSProperties['scrollbarWidth'];
+	    /**
+	     * Overall width (height for horizontal scrollbars)
+	     */
+	    size?: CSSProperties['width'];
+	    /**
+	     * Corner sizes are usually determined by `width` and
+	     * are used as an inset border and therefore a smaller corner size means a larger thumb
+	     */
+	    corner?: CSSProperties['borderWidth'];
+	}
+	export const euiScrollBarStyles: ({ euiTheme: { colors, size } }: UseEuiTheme, { thumbColor: _thumbColor, trackColor, width, size: _size, corner: _corner, }?: EuiScrollBarStyles) => string;
+	export const useEuiScrollBar: (options?: EuiScrollBarStyles | undefined) => string;
+	/**
+	 * 1. Focus rings shouldn't be visible on scrollable regions, but a11y requires them to be focusable.
+	 *    Browser's supporting `:focus-visible` will still show outline on keyboard focus only.
+	 *    Others like Safari, won't show anything at all.
+	 */
+	interface _EuiYScroll {
+	    height?: CSSProperties['height'];
+	}
+	export const euiYScroll: (euiTheme: UseEuiTheme, { height }?: _EuiYScroll) => string;
+	export const useEuiYScroll: ({ height }?: _EuiYScroll) => string;
+	export const euiYScrollWithShadows: (euiTheme: UseEuiTheme, { height }?: _EuiYScroll) => string;
+	export const useEuiYScrollWithShadows: ({ height }?: _EuiYScroll) => string;
+	export const euiXScroll: (euiTheme: UseEuiTheme) => string;
+	export const useEuiXScroll: () => string;
+	export const euiXScrollWithShadows: (euiTheme: UseEuiTheme) => string;
+	export const useEuiXScrollWithShadows: () => string;
+	interface EuiScrollOverflowStyles {
+	    direction?: 'y' | 'x';
+	    mask?: boolean;
+	}
+	export const euiOverflowScroll: (euiTheme: UseEuiTheme, { direction, mask }?: EuiScrollOverflowStyles) => string;
+	export const useEuiOverflowScroll: (direction: EuiScrollOverflowStyles['direction'], mask?: EuiScrollOverflowStyles['mask']) => string;
+	/**
+	 * For quickly applying a full-height element whether using flex or not
+	 */
+	export const euiFullHeight: () => string;
+	export {};
+
 }
 declare module '@elastic/eui/src/global_styling/mixins/_padding' {
 	import { UseEuiTheme } from '@elastic/eui/src/services/theme';
@@ -1877,7 +1811,7 @@ declare module '@elastic/eui/src/global_styling/mixins/_states' {
 	 * @param offset Accepts a specific measurement or 'inset', 'outset' or 'center' to adjust outline position
 	 * @param color Accepts any CSS color, **Note: only works in -webkit-**
 	 */
-	export const euiFocusRing: (euiTheme: UseEuiTheme['euiTheme'], offset?: _EuiFocusRingOffset, options?: {
+	export const euiFocusRing: ({ euiTheme }: UseEuiTheme, offset?: _EuiFocusRingOffset, options?: {
 	    color?: CSSProperties['outlineColor'];
 	} | undefined) => string;
 	export const useEuiFocusRing: (offset?: _EuiFocusRingOffset, color?: CSSProperties['outlineColor']) => string;
@@ -1912,18 +1846,55 @@ declare module '@elastic/eui/src/global_styling/mixins/_typography' {
 	export const euiNumberFormat: ({ euiTheme }: UseEuiTheme) => string;
 	export const useEuiNumberFormat: () => string;
 
+}
+declare module '@elastic/eui/src/services/breakpoint/_sorting' {
+	import { _EuiThemeBreakpoints } from '@elastic/eui/src/global_styling/variables/breakpoint';
+	export const sortMapByLargeToSmallValues: (breakpointsMap: _EuiThemeBreakpoints) => {
+	    [k: string]: number;
+	};
+	export const sortMapBySmallToLargeValues: (breakpointsMap: _EuiThemeBreakpoints) => {
+	    [k: string]: number;
+	};
+
+}
+declare module '@elastic/eui/src/global_styling/variables/shadow' {
+	export const EuiThemeShadowSizes: readonly ["xs", "s", "m", "l", "xl"];
+	export type _EuiThemeShadowSize = typeof EuiThemeShadowSizes[number];
+	/**
+	 * Shadow t-shirt sizes descriptions
+	 */
+	export const _EuiShadowSizesDescriptions: Record<_EuiThemeShadowSize, string>;
+	export interface _EuiThemeShadowCustomColor {
+	    color?: string;
+	    property?: 'box-shadow' | 'filter';
+	}
+
+}
+declare module '@elastic/eui/src/global_styling/variables' {
+	export * from '@elastic/eui/src/global_styling/variables/animations';
+	export * from '@elastic/eui/src/global_styling/variables/borders';
+	export * from '@elastic/eui/src/global_styling/variables/breakpoint';
+	export * from '@elastic/eui/src/global_styling/variables/colors';
+	export * from '@elastic/eui/src/global_styling/variables/levels';
+	export * from '@elastic/eui/src/global_styling/variables/size';
+	export * from '@elastic/eui/src/global_styling/variables/shadow';
+	export * from '@elastic/eui/src/global_styling/variables/states';
+	export * from '@elastic/eui/src/global_styling/variables/typography';
+
 }
 declare module '@elastic/eui/src/global_styling/mixins/_responsive' {
 	import { UseEuiTheme } from '@elastic/eui/src/services/theme/hooks';
 	import { _EuiThemeBreakpoint } from '@elastic/eui/src/global_styling/variables';
 	/**
 	 * Generates a CSS media query rule string based on the input breakpoint ranges.
-	 * Examples:
+	 * Examples with default theme breakpoints:
+	 *
 	 * euiBreakpoint(['s']) becomes `@media only screen and (min-width: 575px) and (max-width: 767px)`
 	 * euiBreakpoint(['s', 'l']) becomes `@media only screen and (min-width: 575px) and (max-width: 1199px)`
 	 *
-	 * Use the `xs` and `xl` sizes to generate media queries with only min/max-width.
-	 * Examples:
+	 * Use the smallest and largest sizes to generate media queries with only min/max-width.
+	 * Examples with default theme breakpoints:
+	 *
 	 * euiBreakpoint(['xs', 'm']) becomes `@media only screen and (max-width: 991px)`
 	 * euiBreakpoint(['l', 'xl']) becomes `@media only screen and (min-width: 992px)`
 	 */
@@ -2522,7 +2493,7 @@ declare module '@elastic/eui/src/components/button/button_empty/button_empty' {
 	    /**
 	     * Object of props passed to the <span/> wrapping the button's content
 	     */
-	    contentProps?: EuiButtonContentType;
+	    contentProps?: CommonProps & EuiButtonContentType;
 	} type EuiButtonEmptyPropsForAnchor = PropsForAnchor<CommonEuiButtonEmptyProps>; type EuiButtonEmptyPropsForButton = PropsForButton<CommonEuiButtonEmptyProps>;
 	export type EuiButtonEmptyProps = ExclusiveUnion<EuiButtonEmptyPropsForAnchor, EuiButtonEmptyPropsForButton>;
 	export const EuiButtonEmpty: FunctionComponent<EuiButtonEmptyProps>;
@@ -2962,8 +2933,8 @@ declare module '@elastic/eui/src/components/link/link.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
 	export const euiLinkHoverCSS: () => string;
 	export const euiLinkFocusCSS: (euiTheme: UseEuiTheme['euiTheme']) => string;
-	export const euiLinkCSS: (euiTheme: UseEuiTheme['euiTheme']) => string;
-	export const euiLinkStyles: ({ euiTheme }: UseEuiTheme) => {
+	export const euiLinkCSS: (euiThemeContext: UseEuiTheme) => string;
+	export const euiLinkStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiLink: import("@emotion/utils").SerializedStyles;
 	    disabled: import("@emotion/utils").SerializedStyles;
 	    primary: import("@emotion/utils").SerializedStyles;
@@ -3781,7 +3752,7 @@ declare module '@elastic/eui/src/components/progress/progress' {
 	    /**
 	     * Object of props passed to the <span/> wrapping the determinate progress's label
 	     */
-	    labelProps?: HTMLAttributes<HTMLSpanElement>;
+	    labelProps?: CommonProps & HTMLAttributes<HTMLSpanElement>;
 	};
 	export const EuiProgress: FunctionComponent<ExclusiveUnion<Determinate, Indeterminate>>;
 	export {};
@@ -4528,7 +4499,7 @@ declare module '@elastic/eui/src/services/popover/popover_positioning' {
 	interface FindPopoverPositionResult {
 	    top: number;
 	    left: number;
-	    position: 'top' | 'right' | 'bottom' | 'left';
+	    position: EuiPopoverPosition;
 	    fit: number;
 	    arrow?: {
 	        left: number;
@@ -4727,6 +4698,7 @@ declare module '@elastic/eui/src/components/popover/popover.styles' {
 }
 declare module '@elastic/eui/src/components/popover/popover_panel/_popover_panel.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const openAnimationTiming = "slow";
 	/**
 	 * 1. Can expand further, but it looks weird if it's smaller than the originating button.
 	 * 2. Animation happens on the panel. But don't animate position when using the attached mode like for inputs
@@ -4915,6 +4887,10 @@ declare module '@elastic/eui/src/components/popover/popover' {
 	     * Usually takes the `id` of the popover title
 	     */
 	    'aria-labelledby'?: string;
+	    /**
+	     * Function callback for when the popover positon changes
+	     */
+	    onPositionChange?: (position: EuiPopoverPosition) => void;
 	}
 	export function getPopoverPositionFromAnchorPosition(anchorPosition: PopoverAnchorPosition): EuiPopoverPosition;
 	export function getPopoverAlignFromAnchorPosition(anchorPosition: PopoverAnchorPosition): EuiPopoverPosition;
@@ -6578,6 +6554,11 @@ declare module '@elastic/eui/src/themes/amsterdam/global_styling/variables/_anim
 	export const animation_ease: _EuiThemeAnimationEasings;
 	export const animation: _EuiThemeAnimation;
 
+}
+declare module '@elastic/eui/src/themes/amsterdam/global_styling/variables/_breakpoint' {
+	import { _EuiThemeBreakpoints } from '@elastic/eui/src/global_styling/variables';
+	export const breakpoint: _EuiThemeBreakpoints;
+
 }
 declare module '@elastic/eui/src/themes/amsterdam/global_styling/variables/_size' {
 	import { _EuiThemeBase, _EuiThemeSizes } from '@elastic/eui/src/global_styling/variables';
@@ -6674,29 +6655,47 @@ declare module '@elastic/eui/src/services/breakpoint/current_breakpoint_hook' {
 	 * This hook is in its own separate file to make mocking it
 	 * as a testenv easy for Jest unit tests
 	 */
-	export const useCurrentEuiBreakpoint: () => "s" | "xs" | "m" | "l" | "xl" | undefined;
+	export const useCurrentEuiBreakpoint: () => string | undefined;
 
 }
-declare module '@elastic/eui/src/services/breakpoint/useIsWithinBreakpoints' {
+declare module '@elastic/eui/src/services/breakpoint/is_within_hooks' {
 	import { _EuiThemeBreakpoint } from '@elastic/eui/src/global_styling/variables/breakpoint';
 	/**
-	 * Given the current window.innerWidth and an array of breakpoint keys,
-	 * this hook stores state and returns true or false if the window.innerWidth
-	 * falls within any of the named breakpoints.
+	 * Given an array of breakpoint keys, this hook returns true or false
+	 * if the breakpoint size of the current window width falls within
+	 * any of the named breakpoints.
 	 *
-	 * @param {_EuiThemeBreakpoint[]} sizes An array of named EUI breakpoints
+	 * @param {EuiThemeBreakpoint[]} sizes An array of named EUI breakpoints
 	 * @param {boolean} isResponsive Some components have the option to turn off responsive behavior.
 	 *   Since hooks can't be called conditionally, it's easier to pass the condition into the hook
 	 * @returns {boolean} Returns `true` if current breakpoint name is included in `sizes`
 	 */
 	export const useIsWithinBreakpoints: (sizes: _EuiThemeBreakpoint[], isResponsive?: boolean) => boolean;
+	/**
+	 * Given a max breakpoint key, this hook returns true if the breakpoint size
+	 * of the current window width falls within the max breakpoint or any below,
+	 * and false otherwise
+	 *
+	 * @param {EuiThemeBreakpoint} max The named max breakpoint to check against
+	 * @returns {boolean} Will return `false` if it can't find a value for the `max` breakpoint
+	 */
+	export function useIsWithinMaxBreakpoint(max: _EuiThemeBreakpoint): boolean;
+	/**
+	 * Given a min breakpoint key, this hook returns true if the breakpoint size
+	 * of the current window width falls within the min breakpoint or any above,
+	 * and false otherwise
+	 *
+	 * @param {EuiThemeBreakpoint} min The named min breakpoint to check against
+	 * @returns {boolean} Will return `false` if it can't find a value for the `min` breakpoint
+	 */
+	export function useIsWithinMinBreakpoint(min: _EuiThemeBreakpoint): boolean;
 
 }
 declare module '@elastic/eui/src/services/breakpoint' {
-	export * from '@elastic/eui/src/services/breakpoint/breakpoint';
+	export type { _EuiThemeBreakpoint as EuiBreakpointSize } from '@elastic/eui/src/global_styling/variables/breakpoint';
 	export * from '@elastic/eui/src/services/breakpoint/current_breakpoint';
 	export * from '@elastic/eui/src/services/breakpoint/current_breakpoint_hook';
-	export * from '@elastic/eui/src/services/breakpoint/useIsWithinBreakpoints';
+	export * from '@elastic/eui/src/services/breakpoint/is_within_hooks';
 
 }
 declare module '@elastic/eui/src/services/color_picker/color_picker' {
@@ -7133,7 +7132,7 @@ declare module '@elastic/eui/src/services' {
 	export type { HorizontalAlignment } from '@elastic/eui/src/services/alignment';
 	export { LEFT_ALIGNMENT, RIGHT_ALIGNMENT, CENTER_ALIGNMENT } from '@elastic/eui/src/services/alignment';
 	export type { EuiBreakpointSize } from '@elastic/eui/src/services/breakpoint';
-	export { BREAKPOINTS, BREAKPOINT_KEYS, getBreakpoint, isWithinBreakpoints, useIsWithinBreakpoints, isWithinMaxBreakpoint, isWithinMinBreakpoint, CurrentEuiBreakpointContext, CurrentEuiBreakpointProvider, useCurrentEuiBreakpoint, } from '@elastic/eui/src/services/breakpoint';
+	export { useIsWithinBreakpoints, useIsWithinMaxBreakpoint, useIsWithinMinBreakpoint, CurrentEuiBreakpointContext, CurrentEuiBreakpointProvider, useCurrentEuiBreakpoint, } from '@elastic/eui/src/services/breakpoint';
 	export type { HSV } from '@elastic/eui/src/services/color';
 	export { isColorDark, isValidHex, calculateContrast, calculateLuminance, hexToHsv, hexToRgb, hsvToHex, hsvToRgb, rgbToHex, rgbToHsv, VISUALIZATION_COLORS, DEFAULT_VISUALIZATION_COLOR, colorPalette, euiPaletteForLightBackground, euiPaletteForDarkBackground, euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteComplimentary, euiPaletteNegative, euiPalettePositive, euiPaletteCool, euiPaletteWarm, euiPaletteGray, getSteppedGradient, transparentize, tint, shade, tintOrShade, shadeOrTint, saturate, desaturate, lightness, makeHighContrastColor, makeDisabledContrastColor, } from '@elastic/eui/src/services/color';
 	export type { EuiSetColorMethod } from '@elastic/eui/src/services/color_picker';
@@ -7220,6 +7219,7 @@ declare module '@elastic/eui/src/components/accordion/accordion.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
 	export const euiAccordionButtonStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiAccordion__button: import("@emotion/utils").SerializedStyles;
+	    disabled: import("@emotion/utils").SerializedStyles;
 	};
 	export const euiAccordionChildrenStyles: ({ euiTheme }: UseEuiTheme) => {
 	    euiAccordion__children: import("@emotion/utils").SerializedStyles;
@@ -7328,6 +7328,10 @@ declare module '@elastic/eui/src/components/accordion/accordion' {
 	     * Choose whether the loading message replaces the content. Customize the message by passing a node
 	     */
 	    isLoadingMessage?: boolean | ReactNode;
+	    /**
+	     * Disable the open/close interaction and visually subdues the trigger
+	     */
+	    isDisabled?: boolean;
 	};
 	export class EuiAccordionClass extends Component<WithEuiThemeProps & EuiAccordionProps, {
 	    isOpen: boolean;
@@ -7337,6 +7341,7 @@ declare module '@elastic/eui/src/components/accordion/accordion' {
 	        paddingSize: "none";
 	        arrowDisplay: "left";
 	        isLoading: boolean;
+	        isDisabled: boolean;
 	        isLoadingMessage: boolean;
 	        element: "div";
 	        buttonElement: "button";
@@ -8447,9 +8452,9 @@ declare module '@elastic/eui/src/components/flyout/flyout' {
 	     */
 	    role?: null | string;
 	    /**
-	     * Named breakpoint or pixel value for customizing the minimum window width to enable the `push` type
+	     * Named breakpoint (`xs` through `xl`) for customizing the minimum window width to enable the `push` type
 	     */
-	    pushMinBreakpoint?: EuiBreakpointSize | number;
+	    pushMinBreakpoint?: EuiBreakpointSize;
 	    style?: CSSProperties;
 	    /**
 	     * Object of props passed to EuiFocusTrap.
@@ -8524,7 +8529,7 @@ declare module '@elastic/eui/src/components/collapsible_nav/collapsible_nav' {
 	     */
 	    isDocked?: boolean;
 	    /**
-	     * Named breakpoint or pixel value for customizing the minimum window width to enable docking
+	     * Named breakpoint (`xs` through `xl`) for customizing the minimum window width to enable docking
 	     */
 	    dockedBreakpoint?: EuiFlyoutProps['pushMinBreakpoint'];
 	    /**
@@ -12299,12 +12304,13 @@ declare module '@elastic/eui/src/components/date_picker/super_date_picker/pretty
 declare module '@elastic/eui/src/components/date_picker/super_date_picker/date_popover/date_popover_button' {
 	import { FunctionComponent, ButtonHTMLAttributes, MouseEventHandler } from 'react';
 	import { LocaleSpecifier } from 'moment';
+	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { EuiPopoverProps } from '@elastic/eui/src/components/popover';
 	import { TimeOptions } from '@elastic/eui/src/components/date_picker/super_date_picker/time_options';
 	import { EuiDatePopoverContentProps } from '@elastic/eui/src/components/date_picker/super_date_picker/date_popover/date_popover_content';
 	export interface EuiDatePopoverButtonProps {
 	    className?: string;
-	    buttonProps?: ButtonHTMLAttributes<HTMLButtonElement>;
+	    buttonProps?: CommonProps & ButtonHTMLAttributes<HTMLButtonElement>;
 	    dateFormat: string;
 	    isDisabled?: boolean;
 	    isInvalid?: boolean;
@@ -12507,7 +12513,7 @@ declare module '@elastic/eui/src/components/date_picker/super_date_picker/async_
 
 }
 declare module '@elastic/eui/src/components/date_picker/date_picker_range' {
-	import { FunctionComponent, ReactNode, ReactElement } from 'react';
+	import { FocusEventHandler, FunctionComponent, ReactNode, ReactElement } from 'react';
 	import { IconType } from '@elastic/eui/src/components/icon';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	export type EuiDatePickerRangeProps = CommonProps & {
@@ -12543,7 +12549,18 @@ declare module '@elastic/eui/src/components/date_picker/date_picker_range' {
 	     * Passes through to each control
 	     */
 	    readOnly?: boolean;
+	    /**
+	     * Passes through to each control
+	     */
 	    fullWidth?: boolean;
+	    /**
+	     * Triggered whenever the start or end controls are blurred
+	     */
+	    onBlur?: FocusEventHandler<HTMLInputElement>;
+	    /**
+	     * Triggered whenever the start or end controls are focused
+	     */
+	    onFocus?: FocusEventHandler<HTMLInputElement>;
 	};
 	export const EuiDatePickerRange: FunctionComponent<EuiDatePickerRangeProps>;
 
@@ -13219,12 +13236,12 @@ declare module '@elastic/eui/src/components/expression/expression' {
 	     * First part of the expression
 	     */
 	    description: ReactNode;
-	    descriptionProps?: HTMLAttributes<HTMLSpanElement>;
+	    descriptionProps?: CommonProps & HTMLAttributes<HTMLSpanElement>;
 	    /**
 	     * Second part of the expression
 	     */
 	    value?: ReactNode;
-	    valueProps?: HTMLAttributes<HTMLSpanElement>;
+	    valueProps?: CommonProps & HTMLAttributes<HTMLSpanElement>;
 	    /**
 	     * Color of the `description`
 	     */
@@ -13384,7 +13401,7 @@ declare module '@elastic/eui/src/components/button/button_display/_button_displa
 	    /**
 	     * Object of props passed to the <span/> wrapping the button's content
 	     */
-	    contentProps?: EuiButtonDisplayContentType;
+	    contentProps?: CommonProps & EuiButtonDisplayContentType;
 	    style?: CSSProperties;
 	}
 	export type EuiButtonDisplayPropsForAnchor = PropsForAnchor<EuiButtonDisplayCommonProps, {
@@ -13813,7 +13830,7 @@ declare module '@elastic/eui/src/components/image/image_types' {
 	    /**
 	     * Props to add to the wrapping figure element
 	     */
-	    wrapperProps?: HTMLAttributes<HTMLDivElement>;
+	    wrapperProps?: CommonProps & HTMLAttributes<HTMLDivElement>;
 	};
 	export type EuiImageWrapperProps = Pick<EuiImageProps, 'alt' | 'caption' | 'float' | 'margin' | 'hasShadow' | 'wrapperProps' | 'fullScreenIconColor' | 'allowFullScreen'> & {
 	    isFullWidth: boolean;
@@ -15268,7 +15285,7 @@ declare module '@elastic/eui/src/components/page/page_section/page_section' {
 	    /**
 	     * Passed down to the div wrapper of the section contents
 	     */
-	    contentProps?: HTMLAttributes<HTMLDivElement>;
+	    contentProps?: CommonProps & HTMLAttributes<HTMLDivElement>;
 	    /**
 	     * Sets which HTML element to render.
 	     */
@@ -15619,6 +15636,8 @@ declare module '@elastic/eui/src/components/page_template' {
 }
 declare module '@elastic/eui/src/global_styling/utility/utility' {
 	
+	import { UseEuiTheme } from '@elastic/eui/src/services/theme/hooks';
+	export const globalStyles: (euiThemeContext: UseEuiTheme) => import("@emotion/utils").SerializedStyles;
 	export const EuiUtilityClasses: () => JSX.Element;
 
 }
@@ -17304,7 +17323,7 @@ declare module '@elastic/eui/src/components/side_nav/side_nav' {
 	    /**
 	     * Adds a couple extra #EuiSideNavHeading props and extends the props of EuiTitle that wraps the `heading`
 	     */
-	    headingProps?: EuiSideNavHeadingProps;
+	    headingProps?: CommonProps & EuiSideNavHeadingProps;
 	    /**
 	     * When called, toggles visibility of the navigation menu at mobile responsive widths. The callback should set the `isOpenOnMobile` prop to actually toggle navigation visibility.
 	     */
@@ -18038,19 +18057,35 @@ declare module '@elastic/eui/src/components/table' {
 }
 declare module '@elastic/eui/src/components/tour/tour_step_indicator' {
 	import { FunctionComponent, HTMLAttributes } from 'react';
-	import { CommonProps } from '@elastic/eui/src/components/common'; const statusToClassNameMap: {
-	    complete: string;
-	    incomplete: string;
-	    active: string;
-	};
-	export const STATUS: ("active" | "incomplete" | "complete")[];
-	export type EuiTourStepStatus = keyof typeof statusToClassNameMap;
+	import { CommonProps } from '@elastic/eui/src/components/common';
+	export type EuiTourStepStatus = 'complete' | 'incomplete' | 'active';
 	export interface EuiTourStepIndicatorProps extends CommonProps, HTMLAttributes<HTMLLIElement> {
 	    number: number;
 	    status: EuiTourStepStatus;
 	}
 	export const EuiTourStepIndicator: FunctionComponent<EuiTourStepIndicatorProps>;
-	export {};
+
+}
+declare module '@elastic/eui/src/components/tour/tour.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiTourStyles: ({ euiTheme, colorMode }: UseEuiTheme) => {
+	    euiTour: import("@emotion/utils").SerializedStyles;
+	};
+	export const euiTourBeaconStyles: ({ euiTheme }: UseEuiTheme) => {
+	    euiTourBeacon: import("@emotion/utils").SerializedStyles;
+	    right: import("@emotion/utils").SerializedStyles;
+	    left: import("@emotion/utils").SerializedStyles;
+	    top: import("@emotion/utils").SerializedStyles;
+	    bottom: import("@emotion/utils").SerializedStyles;
+	};
+	export const euiTourHeaderStyles: ({ euiTheme }: UseEuiTheme) => {
+	    euiTourHeader: import("@emotion/utils").SerializedStyles;
+	    euiTourHeader__title: import("@emotion/utils").SerializedStyles;
+	    euiTourHeader__subtitle: import("@emotion/utils").SerializedStyles;
+	};
+	export const euiTourFooterStyles: ({ euiTheme, colorMode }: UseEuiTheme) => {
+	    euiTourFooter: import("@emotion/utils").SerializedStyles;
+	};
 
 }
 declare module '@elastic/eui/src/components/tour/tour_step' {
@@ -18169,17 +18204,18 @@ declare module '@elastic/eui/src/components/tour/useEuiTour' {
 	import { EuiTourStepProps } from '@elastic/eui/src/components/tour/tour_step';
 	import { EuiTourActions, EuiTourState } from '@elastic/eui/src/components/tour/types';
 	export type EuiStatelessTourStep = EuiTourStepProps & Partial<EuiTourState>;
-	export const useEuiTour: (stepsArray: EuiStatelessTourStep[], initialState: EuiTourState) => [EuiTourStepProps[], EuiTourActions, EuiTourState];
+	export type EuiStatelessTourSteps = Array<Exclude<EuiStatelessTourStep, 'onFinish'>>;
+	export const useEuiTour: (stepsArray: EuiStatelessTourSteps, initialState: EuiTourState) => [EuiTourStepProps[], EuiTourActions, EuiTourState];
 
 }
 declare module '@elastic/eui/src/components/tour/tour' {
 	import { FunctionComponent, ReactElement } from 'react';
-	import { EuiStatelessTourStep } from '@elastic/eui/src/components/tour/useEuiTour';
+	import { EuiStatelessTourSteps } from '@elastic/eui/src/components/tour/useEuiTour';
 	import { EuiTourStepProps } from '@elastic/eui/src/components/tour/tour_step';
 	import { EuiTourActions, EuiTourState } from '@elastic/eui/src/components/tour/types';
 	export interface EuiTourProps {
 	    children: (steps: EuiTourStepProps[], actions: EuiTourActions, state: EuiTourState) => ReactElement;
-	    steps: EuiStatelessTourStep[];
+	    steps: EuiStatelessTourSteps;
 	    initialState: EuiTourState;
 	}
 	export const EuiTour: FunctionComponent<EuiTourProps>;
@@ -18192,7 +18228,7 @@ declare module '@elastic/eui/src/components/tour' {
 	export { EuiTourStep } from '@elastic/eui/src/components/tour/tour_step';
 	export type { EuiTourStepIndicatorProps } from '@elastic/eui/src/components/tour/tour_step_indicator';
 	export { EuiTourStepIndicator } from '@elastic/eui/src/components/tour/tour_step_indicator';
-	export type { EuiStatelessTourStep } from '@elastic/eui/src/components/tour/useEuiTour';
+	export type { EuiStatelessTourStep, EuiStatelessTourSteps } from '@elastic/eui/src/components/tour/useEuiTour';
 	export { useEuiTour } from '@elastic/eui/src/components/tour/useEuiTour';
 	export * from '@elastic/eui/src/components/tour/types';
 
@@ -19276,7 +19312,7 @@ declare module '@elastic/eui/src/components/resizable_container/resizable_panel'
 	    /**
 	     * Props to add to the wrapping `.euiResizablePanel` div
 	     */
-	    wrapperProps?: HTMLAttributes<HTMLDivElement>;
+	    wrapperProps?: CommonProps & HTMLAttributes<HTMLDivElement>;
 	    /**
 	     * Padding to add directly to the wrapping `.euiResizablePanel` div
 	     * Gives space around the actual panel.