@elastic/eui 58.1.1 → 59.0.0

package/eui.d.ts

@@ -1203,9 +1203,16 @@ declare module '@elastic/eui/src/components/loading/_loading_strings' {
 declare module '@elastic/eui/src/global_styling/mixins/_color' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
 	export const BACKGROUND_COLORS: readonly ["transparent", "plain", "subdued", "accent", "primary", "success", "warning", "danger"];
-	export type EuiBackgroundColor = typeof BACKGROUND_COLORS[number];
-	export const euiBackgroundColor: (color: EuiBackgroundColor, { euiTheme, colorMode }: UseEuiTheme) => string;
-	export const useEuiBackgroundColor: (color: EuiBackgroundColor) => string;
+	export type _EuiBackgroundColor = typeof BACKGROUND_COLORS[number];
+	export interface _EuiBackgroundColorOptions {
+	    /**
+	     * Use `opaque` for containers of unknown content.
+	     * Use `transparent` for interactive states like hover and focus.
+	     */
+	    method?: 'opaque' | 'transparent';
+	}
+	export const euiBackgroundColor: ({ euiTheme, colorMode }: UseEuiTheme, color: _EuiBackgroundColor, { method }?: _EuiBackgroundColorOptions) => string;
+	export const useEuiBackgroundColor: (color: _EuiBackgroundColor, { method }?: _EuiBackgroundColorOptions) => string;
 	export const useEuiBackgroundColorCSS: () => {
 	    transparent: import("@emotion/utils").SerializedStyles;
 	    plain: import("@emotion/utils").SerializedStyles;
@@ -1403,7 +1410,7 @@ declare module '@elastic/eui/src/global_styling/variables/colors' {
 	    /**
 	     * Computed against `colors.mediumShade`
 	     */
-	    subdued: ColorModeSwitch;
+	    subduedText: ColorModeSwitch;
 	    /**
 	     * Computed against `colors.primaryText`
 	     */
@@ -1474,6 +1481,10 @@ declare module '@elastic/eui/src/global_styling/variables/typography' {
 	     * The font family used for monospace UI elements like EuiCode
 	     */
 	    familyCode?: string;
+	    /**
+	     * The font family used for serif UI elements like blockquotes within EuiText
+	     */
+	    familySerif?: string;
 	    /**
 	     * Controls advanced features OpenType fonts.
 	     * https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings
@@ -1870,6 +1881,30 @@ declare module '@elastic/eui/src/global_styling/functions/logicals' {
 	export const LOGICAL_SIDES: ("left" | "right" | "top" | "horizontal" | "vertical" | "bottom")[];
 	export type LogicalSides = typeof LOGICAL_SIDES[number];
 	export const logicals: {
+	    'border-horizontal': string;
+	    'border-horizontal-color': string;
+	    'border-horizontal-width': string;
+	    'border-horizontal-style': string;
+	    'border-vertical': string;
+	    'border-vertical-color': string;
+	    'border-vertical-width': string;
+	    'border-vertical-style': string;
+	    'border-bottom': string;
+	    'border-bottom-color': string;
+	    'border-bottom-style': string;
+	    'border-bottom-width': string;
+	    'border-top': string;
+	    'border-top-color': string;
+	    'border-top-style': string;
+	    'border-top-width': string;
+	    'border-right': string;
+	    'border-right-color': string;
+	    'border-right-style': string;
+	    'border-right-width': string;
+	    'border-left': string;
+	    'border-left-color': string;
+	    'border-left-style': string;
+	    'border-left-width': string;
 	    'border-top-left-radius': string;
 	    'border-top-right-radius': string;
 	    'border-bottom-left-radius': string;
@@ -1902,7 +1937,7 @@ declare module '@elastic/eui/src/global_styling/functions/logicals' {
 	    'margin-horizontal': string;
 	    'margin-vertical': string;
 	};
-	export const LOGICAL_PROPERTIES: ("left" | "right" | "top" | "width" | "height" | "horizontal" | "vertical" | "inset" | "bottom" | "border-top-left-radius" | "border-top-right-radius" | "border-bottom-left-radius" | "border-bottom-right-radius" | "overflow-x" | "overflow-y" | "max-height" | "max-width" | "min-height" | "min-width" | "padding-left" | "padding-right" | "padding-top" | "padding-bottom" | "padding-horizontal" | "padding-vertical" | "margin-left" | "margin-right" | "margin-top" | "margin-bottom" | "margin-horizontal" | "margin-vertical")[];
+	export const LOGICAL_PROPERTIES: ("left" | "right" | "top" | "width" | "height" | "horizontal" | "vertical" | "inset" | "bottom" | "border-horizontal" | "border-horizontal-color" | "border-horizontal-width" | "border-horizontal-style" | "border-vertical" | "border-vertical-color" | "border-vertical-width" | "border-vertical-style" | "border-bottom" | "border-bottom-color" | "border-bottom-style" | "border-bottom-width" | "border-top" | "border-top-color" | "border-top-style" | "border-top-width" | "border-right" | "border-right-color" | "border-right-style" | "border-right-width" | "border-left" | "border-left-color" | "border-left-style" | "border-left-width" | "border-top-left-radius" | "border-top-right-radius" | "border-bottom-left-radius" | "border-bottom-right-radius" | "overflow-x" | "overflow-y" | "max-height" | "max-width" | "min-height" | "min-width" | "padding-left" | "padding-right" | "padding-top" | "padding-bottom" | "padding-horizontal" | "padding-vertical" | "margin-left" | "margin-right" | "margin-top" | "margin-bottom" | "margin-horizontal" | "margin-vertical")[];
 	export type LogicalProperties = typeof LOGICAL_PROPERTIES[number];
 	/**
 	 *
@@ -1980,15 +2015,26 @@ declare module '@elastic/eui/src/services/theme/hooks' {
 declare module '@elastic/eui/src/global_styling/functions/typography' {
 	import { _EuiThemeFontScale, _EuiThemeFontSizeMeasurement } from '@elastic/eui/src/global_styling/variables/typography';
 	import { UseEuiTheme } from '@elastic/eui/src/services/theme/hooks';
+	export interface _FontScaleOptions {
+	    /**
+	     * The returned string measurement
+	     */
+	    measurement?: _EuiThemeFontSizeMeasurement;
+	    /**
+	     * An additional custom scale multiplier to use against the current scale
+	     * This parameter can be used (e.g. by EuiText sizes) to get sizes of text smaller than the default
+	     */
+	    customScale?: _EuiThemeFontScale;
+	}
 	/**
 	 * Calculates the font-size value based on the provided scale key
 	 * @param scale - The font scale key
 	 * @param theme - Requires the `base` and `font` keys
-	 * @param measurement - The returned string measurement
-	 * *
+	 * @param options - Optional parameters - see _FontScaleOptions
+	 *
 	 * @returns string - Calculated font-size value
 	 */
-	export function euiFontSizeFromScale(scale: _EuiThemeFontScale, { base, font }: UseEuiTheme['euiTheme'], measurement?: _EuiThemeFontSizeMeasurement): string;
+	export function euiFontSizeFromScale(scale: _EuiThemeFontScale, { base, font }: UseEuiTheme['euiTheme'], { measurement, customScale }?: _FontScaleOptions): string;
 	/**
 	 * Calculates the line-height to the closest multiple of the baseline
 	 * EX: A proper line-height for text is 1.5 times the font-size.
@@ -1996,11 +2042,11 @@ declare module '@elastic/eui/src/global_styling/functions/typography' {
 	 *     text stays on the baseline, we pass a multiplier to calculate a line-height.
 	 * @param scale - The font scale key
 	 * @param theme - Requires the `base` and `font` keys
-	 * @param measurement - The returned string measurement
-	 * *
+	 * @param options - Optional parameters - see _FontScaleOptions
+	 *
 	 * @returns string - Calculated line-height value aligned to baseline
 	 */
-	export function euiLineHeightFromBaseline(scale: _EuiThemeFontScale, { base, font }: UseEuiTheme['euiTheme'], measurement?: _EuiThemeFontSizeMeasurement): string;
+	export function euiLineHeightFromBaseline(scale: _EuiThemeFontScale, { base, font }: UseEuiTheme['euiTheme'], { measurement, customScale }?: _FontScaleOptions): string;
 	/**
 	 * Text weight shifting
 	 *
@@ -2090,20 +2136,6 @@ declare module '@elastic/eui/src/services/theme' {
 	export type { ComputedThemeShape, EuiThemeColorMode, EuiThemeColorModeStandard, EuiThemeComputed, EuiThemeModifications, EuiThemeShape, EuiThemeSystem, } from '@elastic/eui/src/services/theme/types';
 	export { COLOR_MODES_STANDARD } from '@elastic/eui/src/services/theme/types';
 
-}
-declare module '@elastic/eui/src/global_styling/utils' {
-	import { UseEuiTheme } from '@elastic/eui/src/services';
-	/**
-	 * Creates a React hook from a style mixin factory.
-	 * The resulting hook accepts a single option property
-	 * in the shape of the mixin's options
-	 *
-	 * `const useStyle = createStyleHook((euiTheme, {color: string}, colorMode) => {})`
-	 * Results in the following with `euiTheme` and `colorMode` values automatically applied
-	 * `const styles = useStyle({color: string}) => void`
-	 */
-	export function createStyleHookFromMixin<T>(mixinFactory: (theme: UseEuiTheme['euiTheme'], opts: T, colorMode: UseEuiTheme['colorMode']) => string): (options?: T) => string;
-
 }
 declare module '@elastic/eui/src/global_styling/mixins/_helpers' {
 	import { CSSProperties } from 'react';
@@ -2129,26 +2161,26 @@ declare module '@elastic/eui/src/global_styling/mixins/_helpers' {
 	     */
 	    corner?: CSSProperties['borderWidth'];
 	}
-	export const euiScrollBarStyles: ({ colors, size }: UseEuiTheme['euiTheme'], { thumbColor: _thumbColor, trackColor, width, size: _size, corner: _corner, }?: EuiScrollBarStyles) => string;
+	export const euiScrollBarStyles: ({ euiTheme: { colors, size } }: UseEuiTheme, { thumbColor: _thumbColor, trackColor, width, size: _size, corner: _corner, }?: EuiScrollBarStyles) => string;
 	export const useEuiScrollBar: (options?: EuiScrollBarStyles | undefined) => string;
 	/**
 	 * 1. Focus rings shouldn't be visible on scrollable regions, but a11y requires them to be focusable.
 	 *    Browser's supporting `:focus-visible` will still show outline on keyboard focus only.
 	 *    Others like Safari, won't show anything at all.
 	 */
-	export const euiYScroll: (euiTheme: UseEuiTheme['euiTheme']) => string;
-	export const useEuiYScroll: (options?: unknown) => string;
-	export const euiYScrollWithShadows: (euiTheme: UseEuiTheme['euiTheme']) => string;
-	export const useEuiYScrollWithShadows: (options?: unknown) => string;
-	export const euiXScroll: (euiTheme: UseEuiTheme['euiTheme']) => string;
-	export const useEuiXScroll: (options?: unknown) => string;
-	export const euiXScrollWithShadows: (euiTheme: UseEuiTheme['euiTheme']) => string;
-	export const useEuiXScrollWithShadows: (options?: unknown) => string;
+	export const euiYScroll: (euiTheme: UseEuiTheme) => string;
+	export const useEuiYScroll: () => string;
+	export const euiYScrollWithShadows: (euiTheme: UseEuiTheme) => string;
+	export const useEuiYScrollWithShadows: () => string;
+	export const euiXScroll: (euiTheme: UseEuiTheme) => string;
+	export const useEuiXScroll: () => string;
+	export const euiXScrollWithShadows: (euiTheme: UseEuiTheme) => string;
+	export const useEuiXScrollWithShadows: () => string;
 	interface EuiScrollOverflowStyles {
 	    direction?: 'y' | 'x';
 	    mask?: boolean;
 	}
-	export const euiOverflowScroll: (euiTheme: UseEuiTheme['euiTheme'], { direction, mask }?: EuiScrollOverflowStyles) => string;
+	export const euiOverflowScroll: (euiTheme: UseEuiTheme, { direction, mask }?: EuiScrollOverflowStyles) => string;
 	export const useEuiOverflowScroll: (direction: EuiScrollOverflowStyles['direction'], mask?: EuiScrollOverflowStyles['mask']) => string;
 	export {};
 
@@ -2157,7 +2189,7 @@ declare module '@elastic/eui/src/global_styling/mixins/_padding' {
 	import { UseEuiTheme } from '@elastic/eui/src/services/theme';
 	export const PADDING_SIZES: readonly ["none", "xs", "s", "m", "l", "xl"];
 	export type EuiPaddingSize = typeof PADDING_SIZES[number];
-	export const euiPaddingSize: (size: EuiPaddingSize, { euiTheme }: UseEuiTheme) => string | null;
+	export const euiPaddingSize: ({ euiTheme }: UseEuiTheme, size: EuiPaddingSize) => string | null;
 	export const useEuiPaddingSize: (size: EuiPaddingSize) => string | null;
 	export const useEuiPaddingCSS: (side?: "left" | "right" | "top" | "horizontal" | "vertical" | "bottom" | undefined) => {
 	    none: null;
@@ -2181,14 +2213,17 @@ declare module '@elastic/eui/src/global_styling/mixins/_states' {
 	 * @param offset Accepts a specific measurement or 'inset', 'outset' or 'center' to adjust outline position
 	 * @param color Accepts any CSS color, **Note: only works in -webkit-**
 	 */
-	export const euiFocusRing: (euiTheme: UseEuiTheme['euiTheme'], offset?: _EuiFocusRingOffset, color?: CSSProperties['outlineColor']) => string;
+	export const euiFocusRing: (euiTheme: UseEuiTheme['euiTheme'], offset?: _EuiFocusRingOffset, options?: {
+	    color?: CSSProperties['outlineColor'];
+	} | undefined) => string;
 	export const useEuiFocusRing: (offset?: _EuiFocusRingOffset, color?: CSSProperties['outlineColor']) => string;
 
 }
 declare module '@elastic/eui/src/global_styling/mixins/_typography' {
 	import { CSSProperties } from 'react';
+	import { _FontScaleOptions } from '@elastic/eui/src/global_styling/functions/typography';
 	import { UseEuiTheme } from '@elastic/eui/src/services/theme/hooks';
-	import { _EuiThemeFontScale, _EuiThemeFontSizeMeasurement } from '@elastic/eui/src/global_styling/variables/typography';
+	import { _EuiThemeFontScale } from '@elastic/eui/src/global_styling/variables/typography';
 	export type EuiThemeFontSize = {
 	    fontSize: CSSProperties['fontSize'];
 	    lineHeight: CSSProperties['lineHeight'];
@@ -2196,8 +2231,8 @@ declare module '@elastic/eui/src/global_styling/mixins/_typography' {
 	/**
 	 * Returns font-size and line-height
 	 */
-	export const euiFontSize: (scale: _EuiThemeFontScale, euiTheme: UseEuiTheme['euiTheme'], measurement?: _EuiThemeFontSizeMeasurement) => EuiThemeFontSize;
-	export const useEuiFontSize: (scale?: _EuiThemeFontScale, measurement?: _EuiThemeFontSizeMeasurement) => EuiThemeFontSize;
+	export const euiFontSize: ({ euiTheme }: UseEuiTheme, scale: _EuiThemeFontScale, options?: _FontScaleOptions | undefined) => EuiThemeFontSize;
+	export const useEuiFontSize: (scale: _EuiThemeFontScale, options?: _FontScaleOptions | undefined) => EuiThemeFontSize;
 	/**
 	 * Force text to wrap on natural word breaks (e.g. spaces & hyphens)
 	 * https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
@@ -2210,7 +2245,7 @@ declare module '@elastic/eui/src/global_styling/mixins/_typography' {
 	/**
 	 * Fixed-width numbers for tabular data
 	 */
-	export const euiNumberFormat: (euiTheme: UseEuiTheme['euiTheme']) => string;
+	export const euiNumberFormat: ({ euiTheme }: UseEuiTheme) => string;
 	export const useEuiNumberFormat: () => string;
 
 }
@@ -2960,19 +2995,19 @@ declare module '@elastic/eui/src/services/theme/clone_element' {
 declare module '@elastic/eui/src/components/title/title.styles' {
 	import { CSSProperties } from 'react';
 	import { UseEuiTheme } from '@elastic/eui/src/services';
-	import { _EuiThemeFontSizeMeasurement } from '@elastic/eui/src/global_styling';
+	import { _FontScaleOptions } from '@elastic/eui/src/global_styling';
 	import { EuiTitleSize } from '@elastic/eui/src/components/title/title'; type EuiThemeTitle = {
 	    fontSize: CSSProperties['fontSize'];
 	    lineHeight: CSSProperties['lineHeight'];
 	    fontWeight: CSSProperties['fontWeight'];
 	    color: CSSProperties['color'];
 	};
-	export const euiTitle: (scale: "s" | "xs" | "m" | "l" | "xxs" | "xxxs" | undefined, euiTheme: UseEuiTheme['euiTheme'], measurement?: _EuiThemeFontSizeMeasurement) => EuiThemeTitle;
-	export const useEuiTitle: (scale?: EuiTitleSize, measurement?: _EuiThemeFontSizeMeasurement) => EuiThemeTitle;
+	export const euiTitle: (euiThemeContext: UseEuiTheme, scale?: EuiTitleSize, options?: _FontScaleOptions | undefined) => EuiThemeTitle;
+	export const useEuiTitle: (scale: EuiTitleSize, options?: _FontScaleOptions | undefined) => EuiThemeTitle;
 	/**
 	 * Styles
 	 */
-	export const euiTitleStyles: ({ euiTheme }: UseEuiTheme) => {
+	export const euiTitleStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiTitle: import("@emotion/utils").SerializedStyles;
 	    uppercase: import("@emotion/utils").SerializedStyles;
 	    xxxs: import("@emotion/utils").SerializedStyles;
@@ -3008,21 +3043,75 @@ declare module '@elastic/eui/src/components/title' {
 	export type { EuiTitleProps, EuiTitleSize } from '@elastic/eui/src/components/title/title';
 	export { EuiTitle } from '@elastic/eui/src/components/title/title';
 
+}
+declare module '@elastic/eui/src/components/link/link.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiLinkHoverCSS: () => string;
+	export const euiLinkFocusCSS: (euiTheme: UseEuiTheme['euiTheme']) => string;
+	export const euiLinkCSS: (euiTheme: UseEuiTheme['euiTheme']) => string;
+	export const euiLinkStyles: ({ euiTheme }: UseEuiTheme) => {
+	    euiLink: import("@emotion/utils").SerializedStyles;
+	    disabled: import("@emotion/utils").SerializedStyles;
+	    primary: import("@emotion/utils").SerializedStyles;
+	    subdued: import("@emotion/utils").SerializedStyles;
+	    success: import("@emotion/utils").SerializedStyles;
+	    accent: import("@emotion/utils").SerializedStyles;
+	    danger: import("@emotion/utils").SerializedStyles;
+	    warning: import("@emotion/utils").SerializedStyles;
+	    ghost: import("@emotion/utils").SerializedStyles;
+	    text: import("@emotion/utils").SerializedStyles;
+	    euiLink__screenReaderText: import("@emotion/utils").SerializedStyles;
+	    euiLink__externalIcon: import("@emotion/utils").SerializedStyles;
+	};
+
+}
+declare module '@elastic/eui/src/components/text/text.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	/**
+	 * TODO: Make this a global value so it can be set by theme?
+	 */
+	export const euiTextConstrainedMaxWidth = "max(64ch, 75%)";
+	/**
+	 * Mixins
+	 */
+	export const euiText: (euiTheme: UseEuiTheme['euiTheme'], inheritColor?: boolean) => {
+	    color: string;
+	    fontWeight: import("csstype").Property.FontWeight | undefined;
+	};
+	/**
+	 * Styles
+	 */
+	export const euiTextStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiText: import("@emotion/utils").SerializedStyles;
+	    constrainedWidth: import("@emotion/utils").SerializedStyles;
+	    m: import("@emotion/utils").SerializedStyles;
+	    s: import("@emotion/utils").SerializedStyles;
+	    xs: import("@emotion/utils").SerializedStyles;
+	    relative: import("@emotion/utils").SerializedStyles;
+	};
+
+}
+declare module '@elastic/eui/src/components/text/text_color.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiTextColorStyles: ({ euiTheme }: UseEuiTheme) => {
+	    euiTextColor: import("@emotion/utils").SerializedStyles;
+	    default: import("@emotion/utils").SerializedStyles;
+	    subdued: import("@emotion/utils").SerializedStyles;
+	    success: import("@emotion/utils").SerializedStyles;
+	    accent: import("@emotion/utils").SerializedStyles;
+	    danger: import("@emotion/utils").SerializedStyles;
+	    warning: import("@emotion/utils").SerializedStyles;
+	    ghost: import("@emotion/utils").SerializedStyles;
+	    inherit: import("@emotion/utils").SerializedStyles;
+	    customColor: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/text/text_color' {
 	import { FunctionComponent, HTMLAttributes, CSSProperties } from 'react';
-	import { CommonProps } from '@elastic/eui/src/components/common'; const colorsToClassNameMap: {
-	    default: string;
-	    subdued: string;
-	    success: string;
-	    accent: string;
-	    danger: string;
-	    warning: string;
-	    ghost: string;
-	    inherit: string;
-	};
-	export type TextColor = keyof typeof colorsToClassNameMap;
-	export const COLORS: ("default" | "inherit" | "success" | "accent" | "warning" | "danger" | "subdued" | "ghost")[];
+	import { CommonProps } from '@elastic/eui/src/components/common';
+	export const COLORS: readonly ["default", "subdued", "success", "accent", "danger", "warning", "ghost", "inherit"];
+	export type TextColor = typeof COLORS[number];
 	export type EuiTextColorProps = CommonProps & Omit<HTMLAttributes<HTMLDivElement> & HTMLAttributes<HTMLSpanElement>, 'color'> & {
 	    /**
 	     * Any of our named colors or a `hex`, `rgb` or `rgba` value.
@@ -3032,23 +3121,36 @@ declare module '@elastic/eui/src/components/text/text_color' {
 	     * Determines the root element
 	     */
 	    component?: 'div' | 'span';
+	    /**
+	     * Applies text styling to the child element instead of rendering a parent wrapper `span`/`div`.
+	     * Can only be used when wrapping a *single* child element/tag, and not raw text.
+	     */
+	    cloneElement?: boolean;
 	};
 	export const EuiTextColor: FunctionComponent<EuiTextColorProps>;
-	export {};
+
+}
+declare module '@elastic/eui/src/components/text/text_align.styles' {
+	export const euiTextAlignStyles: () => {
+	    euiTextAlign: import("@emotion/utils").SerializedStyles;
+	    left: import("@emotion/utils").SerializedStyles;
+	    right: import("@emotion/utils").SerializedStyles;
+	    center: import("@emotion/utils").SerializedStyles;
+	};
 
 }
 declare module '@elastic/eui/src/components/text/text_align' {
 	import { FunctionComponent, HTMLAttributes } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
-	export const alignmentToClassNameMap: {
-	    left: string;
-	    right: string;
-	    center: string;
-	};
-	export type TextAlignment = keyof typeof alignmentToClassNameMap;
-	export const ALIGNMENTS: ("left" | "right" | "center")[];
+	export const ALIGNMENTS: readonly ["left", "right", "center"];
+	export type TextAlignment = typeof ALIGNMENTS[number];
 	export type EuiTextAlignProps = CommonProps & HTMLAttributes<HTMLDivElement> & {
 	    textAlign?: TextAlignment;
+	    /**
+	     * Applies text styling to the child element instead of rendering a parent wrapper `div`.
+	     * Can only be used when wrapping a *single* child element/tag, and not raw text.
+	     */
+	    cloneElement?: boolean;
 	};
 	export const EuiTextAlign: FunctionComponent<EuiTextAlignProps>;
 
@@ -3057,14 +3159,9 @@ declare module '@elastic/eui/src/components/text/text' {
 	import { FunctionComponent, HTMLAttributes, CSSProperties } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { TextColor } from '@elastic/eui/src/components/text/text_color';
-	import { TextAlignment } from '@elastic/eui/src/components/text/text_align'; const textSizeToClassNameMap: {
-	    xs: string;
-	    s: string;
-	    m: string;
-	    relative: string;
-	};
-	export type TextSize = keyof typeof textSizeToClassNameMap;
-	export const TEXT_SIZES: ("s" | "xs" | "m" | "relative")[];
+	import { TextAlignment } from '@elastic/eui/src/components/text/text_align';
+	export const TEXT_SIZES: readonly ["xs", "s", "m", "relative"];
+	export type TextSize = typeof TEXT_SIZES[number];
 	export type EuiTextProps = CommonProps & Omit<HTMLAttributes<HTMLDivElement>, 'color'> & {
 	    textAlign?: TextAlignment;
 	    /**
@@ -3078,7 +3175,6 @@ declare module '@elastic/eui/src/components/text/text' {
 	    grow?: boolean;
 	};
 	export const EuiText: FunctionComponent<EuiTextProps>;
-	export {};
 
 }
 declare module '@elastic/eui/src/components/text' {
@@ -3803,6 +3899,22 @@ declare module '@elastic/eui/src/components/form/file_picker' {
 	export type { EuiFilePickerProps } from '@elastic/eui/src/components/form/file_picker/file_picker';
 	export { EuiFilePicker } from '@elastic/eui/src/components/form/file_picker/file_picker';
 
+}
+declare module '@elastic/eui/src/themes/amsterdam/global_styling/mixins/button' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const BUTTON_COLORS: readonly ["text", "accent", "primary", "success", "warning", "danger", "disabled"];
+	export type _EuiButtonColor = typeof BUTTON_COLORS[number];
+	export const euiButtonColor: (color: _EuiButtonColor, { euiTheme, colorMode }: UseEuiTheme) => string;
+	export const useEuiButtonColorCSS: () => {
+	    text: import("@emotion/utils").SerializedStyles;
+	    accent: import("@emotion/utils").SerializedStyles;
+	    primary: import("@emotion/utils").SerializedStyles;
+	    success: import("@emotion/utils").SerializedStyles;
+	    warning: import("@emotion/utils").SerializedStyles;
+	    danger: import("@emotion/utils").SerializedStyles;
+	    disabled: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/themes/amsterdam/global_styling/functions/shadows' {
 	import { EuiThemeColorModeStandard } from '@elastic/eui/src/services/theme/types';
@@ -3861,6 +3973,7 @@ declare module '@elastic/eui/src/themes/amsterdam/global_styling/mixins/shadow'
 
 }
 declare module '@elastic/eui/src/themes/amsterdam/global_styling/mixins' {
+	export * from '@elastic/eui/src/themes/amsterdam/global_styling/mixins/button';
 	export * from '@elastic/eui/src/themes/amsterdam/global_styling/mixins/shadow';
 
 }
@@ -3881,14 +3994,14 @@ declare module '@elastic/eui/src/components/panel/panel.style' {
 }
 declare module '@elastic/eui/src/components/panel/panel' {
 	import { ButtonHTMLAttributes, FunctionComponent, HTMLAttributes, Ref } from 'react';
-	import { EuiBackgroundColor, EuiPaddingSize } from '@elastic/eui/src/global_styling';
+	import { _EuiBackgroundColor, EuiPaddingSize } from '@elastic/eui/src/global_styling';
 	import { CommonProps, ExclusiveUnion } from '@elastic/eui/src/components/common';
 	export const SIZES: readonly ["none", "xs", "s", "m", "l", "xl"]; const _SIZES: ("s" | "none" | "xs" | "m" | "l" | "xl")[];
 	export type PanelPaddingSize = typeof _SIZES[number];
 	export const BORDER_RADII: readonly ["none", "m"];
 	export type PanelBorderRadius = typeof BORDER_RADII[number];
 	export const COLORS: readonly ["transparent", "plain", "subdued", "accent", "primary", "success", "warning", "danger"];
-	export type PanelColor = EuiBackgroundColor;
+	export type PanelColor = _EuiBackgroundColor;
 	export interface _EuiPanelProps extends CommonProps {
 	    /**
 	     * Adds a medium shadow to the panel;
@@ -6830,7 +6943,7 @@ declare module '@elastic/eui/src/components/accessibility' {
 }
 declare module '@elastic/eui/src/components/accordion/accordion.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiAccordionButtonStyles: ({ euiTheme }: UseEuiTheme) => {
+	export const euiAccordionButtonStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiAccordion__button: import("@emotion/utils").SerializedStyles;
 	};
 	export const euiAccordionChildrenStyles: ({ euiTheme }: UseEuiTheme) => {
@@ -7536,27 +7649,6 @@ declare module '@elastic/eui/src/components/bottom_bar' {
 	export type { EuiBottomBarProps } from '@elastic/eui/src/components/bottom_bar/bottom_bar';
 	export { EuiBottomBar } from '@elastic/eui/src/components/bottom_bar/bottom_bar';
 
-}
-declare module '@elastic/eui/src/components/link/link.styles' {
-	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiLinkHoverCSS: () => string;
-	export const euiLinkFocusCSS: ({ euiTheme }: UseEuiTheme) => string;
-	export const euiLinkCSS: (_theme: UseEuiTheme) => string;
-	export const euiLinkStyles: (_theme: UseEuiTheme) => {
-	    euiLink: import("@emotion/utils").SerializedStyles;
-	    disabled: import("@emotion/utils").SerializedStyles;
-	    primary: import("@emotion/utils").SerializedStyles;
-	    subdued: import("@emotion/utils").SerializedStyles;
-	    success: import("@emotion/utils").SerializedStyles;
-	    accent: import("@emotion/utils").SerializedStyles;
-	    danger: import("@emotion/utils").SerializedStyles;
-	    warning: import("@emotion/utils").SerializedStyles;
-	    ghost: import("@emotion/utils").SerializedStyles;
-	    text: import("@emotion/utils").SerializedStyles;
-	    euiLink__screenReaderText: import("@emotion/utils").SerializedStyles;
-	    euiLink__externalIcon: import("@emotion/utils").SerializedStyles;
-	};
-
 }
 declare module '@elastic/eui/src/components/link/link' {
 	import React, { AnchorHTMLAttributes, ButtonHTMLAttributes, MouseEventHandler } from 'react';
@@ -8051,7 +8143,7 @@ declare module '@elastic/eui/src/components/collapsible_nav/collapsible_nav_grou
 	     * with the option to add an iconType
 	     */
 	    title?: ReactNode;
-	} & HTMLAttributes<HTMLDivElement>;
+	} & Omit<HTMLAttributes<HTMLDivElement>, 'title'>;
 	export type EuiCollapsibleNavGroupProps = ExclusiveUnion<GroupAsAccordion, GroupAsDiv>;
 	export const EuiCollapsibleNavGroup: FunctionComponent<EuiCollapsibleNavGroupProps>;
 	export {};
@@ -11972,7 +12064,10 @@ declare module '@elastic/eui/src/components/date_picker/date_picker_range' {
 	     * The end date `EuiDatePicker` element
 	     */
 	    endDateControl: ReactElement;
-	    fullWidth?: boolean;
+	    /**
+	     * The start date `EuiDatePicker` element
+	     */
+	    startDateControl: ReactElement;
 	    /**
 	     * Pass either an icon type or set to `false` to remove icon entirely
 	     */
@@ -11981,11 +12076,19 @@ declare module '@elastic/eui/src/components/date_picker/date_picker_range' {
 	     * Won't apply any additional props to start and end date components
 	     */
 	    isCustom?: boolean;
-	    readOnly?: boolean;
 	    /**
-	     * The start date `EuiDatePicker` element
+	     * Will turn the range delimeter into an alert icon and pass through to each control
 	     */
-	    startDateControl: ReactElement;
+	    isInvalid?: boolean;
+	    /**
+	     * Passes through to each control
+	     */
+	    disabled?: boolean;
+	    /**
+	     * Passes through to each control
+	     */
+	    readOnly?: boolean;
+	    fullWidth?: boolean;
 	};
 	export const EuiDatePickerRange: FunctionComponent<EuiDatePickerRangeProps>;
 
@@ -12533,24 +12636,57 @@ declare module '@elastic/eui/src/components/error_boundary' {
 	export { EuiErrorBoundary } from '@elastic/eui/src/components/error_boundary/error_boundary';
 
 }
-declare module '@elastic/eui/src/components/expression/expression' {
-	import { ButtonHTMLAttributes, HTMLAttributes, MouseEventHandler, ReactNode, FunctionComponent } from 'react';
-	import { CommonProps, ExclusiveUnion } from '@elastic/eui/src/components/common'; const colorToClassNameMap: {
-	    subdued: string;
-	    primary: string;
-	    success: string;
-	    accent: string;
-	    warning: string;
-	    danger: string;
-	}; const textWrapToClassNameMap: {
-	    'break-word': null;
-	    truncate: string;
+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 COLORS: ("primary" | "success" | "accent" | "warning" | "danger" | "subdued")[];
-	export type ExpressionColor = keyof typeof colorToClassNameMap; const displayToClassNameMap: {
-	    inline: null;
-	    columns: string;
+	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 & {
 	    /**
 	     * First part of the expression
@@ -12581,7 +12717,7 @@ declare module '@elastic/eui/src/components/expression/expression' {
 	    /**
 	     * Sets the display style for the expression. Defaults to `inline`
 	     */
-	    display?: keyof typeof displayToClassNameMap;
+	    display?: 'inline' | 'columns';
 	    /**
 	     * Forces color to display as `danger` and shows an `alert` icon
 	     */
@@ -12596,7 +12732,7 @@ declare module '@elastic/eui/src/components/expression/expression' {
 	    /**
 	     * Sets how to handle the wrapping of long text.
 	     */
-	    textWrap?: keyof typeof textWrapToClassNameMap;
+	    textWrap?: 'break-word' | 'truncate';
 	}; type Buttonlike = EuiExpressionProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'> & {
 	    onClick: MouseEventHandler<HTMLButtonElement>;
 	}; type Spanlike = EuiExpressionProps & Omit<HTMLAttributes<HTMLSpanElement>, 'value'>;
@@ -12894,7 +13030,7 @@ declare module '@elastic/eui/src/components/header' {
 }
 declare module '@elastic/eui/src/components/health/health.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiHealthStyles: ({ euiTheme }: UseEuiTheme) => {
+	export const euiHealthStyles: (euiTheme: UseEuiTheme) => {
 	    euiHealth: import("@emotion/utils").SerializedStyles;
 	    xs: import("@emotion/utils").SerializedStyles;
 	    s: import("@emotion/utils").SerializedStyles;
@@ -13317,6 +13453,20 @@ declare module '@elastic/eui/src/components/markdown_editor/markdown_editor_text
 	    maxHeight: string;
 	} & React.RefAttributes<HTMLTextAreaElement>>;
 
+}
+declare module '@elastic/eui/src/components/markdown_editor/markdown_format.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	/**
+	 * Styles
+	 */
+	export const euiMarkdownFormatStyles: (euiTheme: UseEuiTheme) => {
+	    euiMarkdownFormat: import("@emotion/utils").SerializedStyles;
+	    m: import("@emotion/utils").SerializedStyles;
+	    s: import("@emotion/utils").SerializedStyles;
+	    xs: import("@emotion/utils").SerializedStyles;
+	    relative: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/markdown_editor/plugins/markdown_tooltip/types' {
 	export interface TooltipNodeDetails {
@@ -15191,6 +15341,7 @@ declare module '@elastic/eui/src/components/selectable/selectable_list/selectabl
 	import { FixedSizeList, ListProps, ListChildComponentProps as ReactWindowListChildComponentProps } from 'react-window';
 	import { CommonProps, ExclusiveUnion } from '@elastic/eui/src/components/common';
 	import { EuiSelectableOption } from '@elastic/eui/src/components/selectable/selectable_option';
+	import { EuiSelectableOnChangeEvent } from '@elastic/eui/src/components/selectable/selectable';
 	import { EuiSelectableListItemProps } from '@elastic/eui/src/components/selectable/selectable_list/selectable_list_item';
 	interface ListChildComponentProps<T> extends Omit<ReactWindowListChildComponentProps, 'style'> {
 	    data: Array<EuiSelectableOption<T>>;
@@ -15263,7 +15414,7 @@ declare module '@elastic/eui/src/components/selectable/selectable_list/selectabl
 	    /**
 	     * Returns the array of options with altered checked state
 	     */
-	    onOptionClick: (options: Array<EuiSelectableOption<T>>) => void;
+	    onOptionClick: (options: Array<EuiSelectableOption<T>>, event: EuiSelectableOnChangeEvent) => void;
 	    /**
 	     * Custom render for the label portion of the option;
 	     * Takes (option, searchValue), returns ReactNode
@@ -15300,7 +15451,7 @@ declare module '@elastic/eui/src/components/selectable/selectable_list/selectabl
 	    constructor(props: EuiSelectableListProps<T>);
 	    ListRow: React.MemoExoticComponent<({ data, index, style }: ListChildComponentProps<T>) => JSX.Element>;
 	    render(): JSX.Element;
-	    onAddOrRemoveOption: (option: EuiSelectableOption<T>) => void;
+	    onAddOrRemoveOption: (option: EuiSelectableOption<T>, event: EuiSelectableOnChangeEvent) => void;
 	    private onAddOption;
 	    private onRemoveOption;
 	    private onExcludeOption;
@@ -15316,7 +15467,7 @@ declare module '@elastic/eui/src/components/selectable/selectable_list' {
 
 }
 declare module '@elastic/eui/src/components/selectable/selectable' {
-	import React, { Component, HTMLAttributes, ReactNode, ReactElement, KeyboardEvent } from 'react';
+	import React, { Component, HTMLAttributes, ReactNode, ReactElement, KeyboardEvent, MouseEvent } from 'react';
 	import { CommonProps, ExclusiveUnion } from '@elastic/eui/src/components/common';
 	import { EuiSelectableSearch } from '@elastic/eui/src/components/selectable/selectable_search';
 	import { EuiSelectableMessage } from '@elastic/eui/src/components/selectable/selectable_message';
@@ -15324,7 +15475,8 @@ declare module '@elastic/eui/src/components/selectable/selectable' {
 	import { EuiSelectableOption } from '@elastic/eui/src/components/selectable/selectable_option';
 	import { EuiSelectableOptionsListProps } from '@elastic/eui/src/components/selectable/selectable_list/selectable_list';
 	import { EuiSelectableSearchProps } from '@elastic/eui/src/components/selectable/selectable_search/selectable_search';
-	import { Align } from 'react-window'; type RequiredEuiSelectableOptionsListProps = Omit<EuiSelectableOptionsListProps, keyof typeof EuiSelectableList['defaultProps']>; type OptionalEuiSelectableOptionsListProps = Omit<EuiSelectableOptionsListProps, keyof RequiredEuiSelectableOptionsListProps>; type EuiSelectableOptionsListPropsWithDefaults = RequiredEuiSelectableOptionsListProps & Partial<OptionalEuiSelectableOptionsListProps>; type EuiSelectableSearchableProps<T> = ExclusiveUnion<{
+	import { Align } from 'react-window';
+	export type EuiSelectableOnChangeEvent = KeyboardEvent | MouseEvent; type RequiredEuiSelectableOptionsListProps = Omit<EuiSelectableOptionsListProps, keyof typeof EuiSelectableList['defaultProps']>; type OptionalEuiSelectableOptionsListProps = Omit<EuiSelectableOptionsListProps, keyof RequiredEuiSelectableOptionsListProps>; type EuiSelectableOptionsListPropsWithDefaults = RequiredEuiSelectableOptionsListProps & Partial<OptionalEuiSelectableOptionsListProps>; type EuiSelectableSearchableProps<T> = ExclusiveUnion<{
 	    searchable: false;
 	}, {
 	    /**
@@ -15349,9 +15501,10 @@ declare module '@elastic/eui/src/components/selectable/selectable' {
 	     */
 	    options: Array<EuiSelectableOption<T>>;
 	    /**
-	     * Passes back the altered `options` array with selected options as
+	     * Passes back the altered `options` array with selected options having `checked: 'on'`.
+	     * Also passes back the React click/keyboard event as a second argument.
 	     */
-	    onChange?: (options: Array<EuiSelectableOption<T>>) => void;
+	    onChange?: (options: Array<EuiSelectableOption<T>>, event: EuiSelectableOnChangeEvent) => void;
 	    /**
 	     * Sets the single selection policy of
 	     * `false`: allows multiple selection
@@ -15440,7 +15593,7 @@ declare module '@elastic/eui/src/components/selectable/selectable' {
 	    incrementActiveOptionIndex: (amount: number) => void;
 	    onSearchChange: (searchValue: string, visibleOptions: Array<EuiSelectableOption<T>>) => void;
 	    onContainerBlur: (e: React.FocusEvent) => void;
-	    onOptionClick: (options: Array<EuiSelectableOption<T>>) => void;
+	    onOptionClick: (options: Array<EuiSelectableOption<T>>, event: EuiSelectableOnChangeEvent) => void;
 	    scrollToItem: (index: number, align?: Align | undefined) => void;
 	    makeOptionId: (index?: number | undefined) => string;
 	    render(): JSX.Element;