@elastic/eui 97.3.1-rc.0 → 98.0.0

package/eui.d.ts

@@ -975,7 +975,7 @@ declare module '@elastic/eui/src/global_styling/mixins/_color' {
 	/**
 	 * Border colors
 	 */
-	export const euiBorderColor: ({ euiTheme, colorMode, highContrastMode }: UseEuiTheme, color: _EuiBackgroundColor) => string;
+	export const euiBorderColor: ({ euiTheme, colorMode }: UseEuiTheme, color: _EuiBackgroundColor) => string;
 	export const useEuiBorderColorCSS: () => Record<"transparent" | "plain" | "subdued" | "accent" | "primary" | "success" | "warning" | "danger", SerializedStyles>;
 
 }
@@ -1144,7 +1144,6 @@ declare module '@elastic/eui/src/services/theme/provider' {
 	export interface EuiThemeProviderProps<T> extends PropsWithChildren {
 	    theme?: EuiThemeSystem<T>;
 	    colorMode?: EuiThemeColorMode;
-	    highContrastMode?: boolean;
 	    modify?: EuiThemeModifications<T>;
 	    children: any;
 	    /**
@@ -1161,11 +1160,11 @@ declare module '@elastic/eui/src/services/theme/provider' {
 	        cloneElement?: boolean;
 	    };
 	}
-	export const EuiThemeProvider: <T extends {} = {}>({ theme: _system, colorMode: _colorMode, highContrastMode: _highContrastMode, modify: _modifications, children, wrapperProps, }: EuiThemeProviderProps<T>) => React.JSX.Element;
+	export const EuiThemeProvider: <T extends {} = {}>({ theme: _system, colorMode: _colorMode, modify: _modifications, children, wrapperProps, }: EuiThemeProviderProps<T>) => React.JSX.Element;
 
 }
 declare module '@elastic/eui/src/services/theme' {
-	export { EuiSystemContext, EuiThemeContext, EuiNestedThemeContext, EuiModificationsContext, EuiColorModeContext, EuiHighContrastModeContext, } from '@elastic/eui/src/services/theme/context';
+	export { EuiSystemContext, EuiThemeContext, EuiNestedThemeContext, EuiModificationsContext, EuiColorModeContext, } from '@elastic/eui/src/services/theme/context';
 	export type { UseEuiTheme, WithEuiThemeProps } from '@elastic/eui/src/services/theme/hooks';
 	export { useEuiTheme, withEuiTheme, RenderWithEuiTheme, useEuiThemeCSSVariables, } from '@elastic/eui/src/services/theme/hooks';
 	export type { EuiThemeProviderProps } from '@elastic/eui/src/services/theme/provider';
@@ -1573,7 +1572,6 @@ declare module '@elastic/eui/src/global_styling/variables/shadow' {
 	export interface _EuiThemeShadowCustomColor {
 	    color?: string;
 	    property?: 'box-shadow' | 'filter';
-	    borderAllInHighContrastMode?: boolean;
 	}
 
 }
@@ -1834,40 +1832,6 @@ declare module '@elastic/eui/src/components/title/title.styles' {
 	};
 	export {};
 
-}
-declare module '@elastic/eui/src/components/code/code_syntax.styles' {
-	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiCodeTextColors: ({ euiTheme }: UseEuiTheme) => {
-	    backgroundColor: string;
-	    color: string;
-	};
-	export const euiCodeSyntaxVariables: (euiThemeContext: UseEuiTheme) => {
-	    backgroundColor: string;
-	    color: string;
-	    inlineCodeColor: string;
-	    selectedBackgroundColor: string;
-	    commentColor: string;
-	    selectorTagColor: string;
-	    stringColor: string;
-	    tagColor: string;
-	    nameColor: string;
-	    numberColor: string;
-	    keywordColor: string;
-	    functionTitleColor: string;
-	    typeColor: string;
-	    attributeColor: string;
-	    symbolColor: string;
-	    paramsColor: string;
-	    metaColor: string;
-	    titleColor: string;
-	    sectionColor: string;
-	    additionColor: string;
-	    deletionColor: string;
-	    selectorClassColor: string;
-	    selectorIdColor: string;
-	    readonly tokensCss: string;
-	};
-
 }
 declare module '@elastic/eui/src/components/text/text.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
@@ -2351,10 +2315,6 @@ declare module '@elastic/eui/src/components/text_truncate/text_truncate.styles'
 	     * cross-browser issues with this at some point. Hopefully CSS natively implements
 	     * custom text truncation some day (https://github.com/w3c/csswg-drafts/issues/3937)
 	     * and there'll be no need for the entire component at that point 🙏
-	     *
-	     * 2024 update: We have found an issue! Windows high contrast themes force overrides
-	     * `color` and therefore "breaks" the rgba hack. We can skip this UX (via the
-	     * forced-colors media query) for those modes for now.
 	     */
 	    euiTextTruncate__truncatedText: import("@emotion/utils").SerializedStyles;
 	    euiTextTruncate__fullText: import("@emotion/utils").SerializedStyles;
@@ -3373,11 +3333,6 @@ declare module '@elastic/eui/src/themes/amsterdam/global_styling/mixins/button'
 	 * @returns Style object `{ backgroundColor, color }`
 	 */
 	export const euiButtonColor: (euiThemeContext: UseEuiTheme, color: _EuiButtonColor | 'disabled') => {
-	    border: string;
-	    color: string;
-	    backgroundColor: string;
-	} | {
-	    border?: undefined;
 	    color: string;
 	    backgroundColor: string;
 	};
@@ -3388,11 +3343,6 @@ declare module '@elastic/eui/src/themes/amsterdam/global_styling/mixins/button'
 	 * @returns Style object `{ backgroundColor, color }`
 	 */
 	export const euiButtonFillColor: (euiThemeContext: UseEuiTheme, color: _EuiButtonColor | 'disabled') => {
-	    border: string;
-	    color: string;
-	    backgroundColor: string;
-	} | {
-	    border?: undefined;
 	    color: string;
 	    backgroundColor: string;
 	};
@@ -3458,30 +3408,30 @@ declare module '@elastic/eui/src/themes/amsterdam/global_styling/mixins/shadow'
 	/**
 	 * euiSlightShadow
 	 */
-	export const euiShadowXSmall: ({ euiTheme, colorMode, highContrastMode }: UseEuiTheme, options?: _EuiThemeShadowCustomColor | undefined) => string;
+	export const euiShadowXSmall: ({ euiTheme, colorMode }: UseEuiTheme, { color: _color }?: _EuiThemeShadowCustomColor) => string;
 	/**
 	 * bottomShadowSmall
 	 */
-	export const euiShadowSmall: ({ euiTheme, colorMode, highContrastMode }: UseEuiTheme, options?: _EuiThemeShadowCustomColor | undefined) => string;
+	export const euiShadowSmall: ({ euiTheme, colorMode }: UseEuiTheme, { color: _color }?: _EuiThemeShadowCustomColor) => string;
 	/**
 	 * bottomShadowMedium
 	 */
-	export const euiShadowMedium: ({ euiTheme, colorMode, highContrastMode }: UseEuiTheme, options?: _EuiThemeShadowCustomColor | undefined) => string;
+	export const euiShadowMedium: ({ euiTheme, colorMode }: UseEuiTheme, { color: _color, property }?: _EuiThemeShadowCustomColor) => string;
 	/**
 	 * bottomShadow
 	 */
-	export const euiShadowLarge: ({ euiTheme, colorMode, highContrastMode }: UseEuiTheme, options?: _EuiThemeShadowCustomColor | undefined) => string;
+	export const euiShadowLarge: ({ euiTheme, colorMode }: UseEuiTheme, { color: _color }?: _EuiThemeShadowCustomColor) => string;
 	/**
 	 * bottomShadowLarge
 	 */
 	export interface EuiShadowXLarge extends _EuiThemeShadowCustomColor {
 	    reverse?: boolean;
 	}
-	export const euiShadowXLarge: ({ euiTheme, colorMode, highContrastMode }: UseEuiTheme, options?: EuiShadowXLarge | undefined) => string;
+	export const euiShadowXLarge: ({ euiTheme, colorMode }: UseEuiTheme, { color: _color, reverse }?: EuiShadowXLarge) => string;
 	/**
 	 * slightShadowHover
 	 */
-	export const euiSlightShadowHover: ({ euiTheme, colorMode, highContrastMode }: UseEuiTheme, options?: _EuiThemeShadowCustomColor | undefined) => string;
+	export const euiSlightShadowHover: ({ euiTheme, colorMode }: UseEuiTheme, { color: _color }?: _EuiThemeShadowCustomColor) => string;
 	export const useEuiSlightShadowHover: (color?: _EuiThemeShadowCustomColor['color']) => string;
 	/**
 	 * bottomShadowFlat
@@ -3489,9 +3439,9 @@ declare module '@elastic/eui/src/themes/amsterdam/global_styling/mixins/shadow'
 	 * Similar to shadow medium but without the bottom depth.
 	 * Useful for popovers that drop UP rather than DOWN.
 	 */
-	export const euiShadowFlat: ({ euiTheme, colorMode, highContrastMode }: UseEuiTheme, options?: _EuiThemeShadowCustomColor | undefined) => string;
+	export const euiShadowFlat: ({ euiTheme, colorMode }: UseEuiTheme, { color: _color }?: _EuiThemeShadowCustomColor) => string;
 	export const useEuiShadowFlat: (color?: _EuiThemeShadowCustomColor['color']) => string;
-	export const euiShadow: (euiThemeContext: UseEuiTheme, size?: _EuiThemeShadowSize, options?: _EuiThemeShadowCustomColor | undefined) => string;
+	export const euiShadow: (euiThemeContext: UseEuiTheme, size?: _EuiThemeShadowSize, { color }?: _EuiThemeShadowCustomColor) => string;
 	export const useEuiShadow: (size?: _EuiThemeShadowSize, color?: _EuiThemeShadowCustomColor['color']) => string;
 
 }
@@ -3559,7 +3509,7 @@ declare module '@elastic/eui/src/components/loading/loading_chart' {
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	export const SIZES: readonly ["m", "l", "xl"];
 	export type EuiLoadingChartSize = (typeof SIZES)[number];
-	export type EuiLoadingChartProps = CommonProps & HTMLAttributes<HTMLSpanElement> & {
+	export type EuiLoadingChartProps = CommonProps & HTMLAttributes<HTMLDivElement> & {
 	    size?: EuiLoadingChartSize;
 	    mono?: boolean;
 	};
@@ -4214,7 +4164,6 @@ declare module '@elastic/eui/src/components/form/form.styles' {
 	    controlCompressedBorderRadius: import("csstype").Property.BorderRadius<string | number> | undefined;
 	    iconAffordance: string;
 	    iconCompressedAffordance: string;
-	    stateUnderlineHeight: string | number | undefined;
 	};
 	export const euiFormControlStyles: (euiThemeContext: UseEuiTheme) => {
 	    shared: string;
@@ -4236,8 +4185,8 @@ declare module '@elastic/eui/src/components/form/form.styles' {
 	    withBackgroundColor?: boolean | undefined;
 	    withBackgroundAnimation?: boolean | undefined;
 	}) => string;
-	export const euiFormControlFocusStyles: (euiThemeContext: UseEuiTheme) => string;
-	export const euiFormControlInvalidStyles: (euiThemeContext: UseEuiTheme) => string;
+	export const euiFormControlFocusStyles: ({ euiTheme, colorMode, }: UseEuiTheme) => string;
+	export const euiFormControlInvalidStyles: ({ euiTheme }: UseEuiTheme) => string;
 	export const euiFormControlDisabledStyles: (euiThemeContext: UseEuiTheme) => string;
 	export const euiFormControlReadOnlyStyles: (euiThemeContext: UseEuiTheme) => string;
 	export const euiFormControlAutoFillStyles: (euiThemeContext: UseEuiTheme) => string;
@@ -4274,9 +4223,8 @@ declare module '@elastic/eui/src/components/form/form.styles' {
 	            unselected: string;
 	        };
 	        disabled: {
-	            readonly shared: string;
-	            readonly selected: string;
-	            readonly unselected: string;
+	            selected: string;
+	            unselected: string;
 	        };
 	        icon: string;
 	        hiddenInput: string;
@@ -4494,7 +4442,7 @@ declare module '@elastic/eui/src/components/button' {
 }
 declare module '@elastic/eui/src/components/horizontal_rule/horizontal_rule.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiHorizontalRuleStyles: ({ euiTheme, highContrastMode, }: UseEuiTheme) => {
+	export const euiHorizontalRuleStyles: ({ euiTheme }: UseEuiTheme) => {
 	    euiHorizontalRule: import("@emotion/utils").SerializedStyles;
 	    full: import("@emotion/utils").SerializedStyles;
 	    half: import("@emotion/utils").SerializedStyles;
@@ -6304,16 +6252,10 @@ declare module '@elastic/eui/src/components/form/form_control_layout/form_contro
 	import { UseEuiTheme } from '@elastic/eui/src/services';
 	export const EuiFormControlLayoutClearButtonStyles: ({ euiTheme, colorMode, }: UseEuiTheme) => {
 	    euiFormControlLayoutClearButton: import("@emotion/utils").SerializedStyles;
+	    euiFormControlLayoutClearButton__icon: import("@emotion/utils").SerializedStyles;
 	    size: {
-	        s: string;
-	        m: string;
-	    };
-	    icon: {
-	        euiFormControlLayoutClearButton__icon: import("@emotion/utils").SerializedStyles;
-	        size: {
-	            s: import("@emotion/utils").SerializedStyles;
-	            m: import("@emotion/utils").SerializedStyles;
-	        };
+	        s: import("@emotion/utils").SerializedStyles;
+	        m: import("@emotion/utils").SerializedStyles;
 	    };
 	};
 
@@ -6732,7 +6674,7 @@ declare module '@elastic/eui/src/components/color_picker/utils' {
 	export const getEventPosition: (location: {
 	    x: number;
 	    y: number;
-	}, container: HTMLElement | SVGElement) => {
+	}, container: HTMLElement) => {
 	    left: number;
 	    top: number;
 	    width: number;
@@ -7101,7 +7043,6 @@ declare module '@elastic/eui/src/services/theme/context' {
 	export const EuiSystemContext: import("react").Context<EuiThemeSystem<{}>>;
 	export const EuiModificationsContext: import("react").Context<import ("@elastic/eui").RecursivePartial<import ("@elastic/eui/src/services/theme/types").EuiThemeShape>>;
 	export const EuiColorModeContext: import("react").Context<EuiThemeColorModeStandard>;
-	export const EuiHighContrastModeContext: import("react").Context<boolean>;
 	export const defaultComputedTheme: EuiThemeComputed<import ("@elastic/eui/src/services/theme/types").EuiThemeShape>;
 	export const EuiThemeContext: import("react").Context<EuiThemeComputed<{}>>;
 	export const EuiNestedThemeContext: import("react").Context<EuiThemeNested>;
@@ -7116,7 +7057,6 @@ declare module '@elastic/eui/src/services/theme/hooks' {
 	export interface UseEuiTheme<T extends {} = {}> {
 	    euiTheme: EuiThemeComputed<T>;
 	    colorMode: EuiThemeColorModeStandard;
-	    highContrastMode: boolean;
 	    modifications: EuiThemeModifications<T>;
 	}
 	export const useEuiTheme: <T extends {} = {}>() => UseEuiTheme<T>;
@@ -8039,7 +7979,7 @@ declare module '@elastic/eui/src/components/auto_sizer' {
 }
 declare module '@elastic/eui/src/components/avatar/avatar.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiAvatarStyles: ({ euiTheme, highContrastMode, }: UseEuiTheme) => {
+	export const euiAvatarStyles: ({ euiTheme }: UseEuiTheme) => {
 	    euiAvatar: import("@emotion/utils").SerializedStyles;
 	    plain: import("@emotion/utils").SerializedStyles;
 	    subdued: import("@emotion/utils").SerializedStyles;
@@ -8139,56 +8079,26 @@ declare module '@elastic/eui/src/components/badge/color_utils' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
 	export const euiBadgeColors: (euiThemeContext: UseEuiTheme) => {
 	    primary: {
-	        border: string;
-	        color: string;
-	        backgroundColor: string;
-	    } | {
-	        border?: undefined;
 	        color: string;
 	        backgroundColor: string;
 	    };
 	    success: {
-	        border: string;
-	        color: string;
-	        backgroundColor: string;
-	    } | {
-	        border?: undefined;
 	        color: string;
 	        backgroundColor: string;
 	    };
 	    warning: {
-	        border: string;
-	        color: string;
-	        backgroundColor: string;
-	    } | {
-	        border?: undefined;
 	        color: string;
 	        backgroundColor: string;
 	    };
 	    danger: {
-	        border: string;
-	        color: string;
-	        backgroundColor: string;
-	    } | {
-	        border?: undefined;
 	        color: string;
 	        backgroundColor: string;
 	    };
 	    accent: {
-	        border: string;
-	        color: string;
-	        backgroundColor: string;
-	    } | {
-	        border?: undefined;
 	        color: string;
 	        backgroundColor: string;
 	    };
 	    disabled: {
-	        border: string;
-	        color: string;
-	        backgroundColor: string;
-	    } | {
-	        border?: undefined;
 	        color: string;
 	        backgroundColor: string;
 	    };
@@ -8851,13 +8761,12 @@ declare module '@elastic/eui/src/components/breadcrumbs' {
 
 }
 declare module '@elastic/eui/src/components/panel/split_panel/split_panel.styles' {
-	import { UseEuiTheme } from '@elastic/eui/src/services';
 	export const euiSplitPanelOuterStyles: {
 	    euiSplitPanelOuter: import("@emotion/utils").SerializedStyles;
 	    column: import("@emotion/utils").SerializedStyles;
 	    row: import("@emotion/utils").SerializedStyles;
 	};
-	export const euiSplitPanelInnerStyles: ({ highContrastMode, }: UseEuiTheme) => {
+	export const euiSplitPanelInnerStyles: {
 	    euiSplitPanelInner: import("@emotion/utils").SerializedStyles;
 	};
 
@@ -9717,15 +9626,14 @@ declare module '@elastic/eui/src/components/progress/progress.styles' {
 	/**
 	 * Emotion styles
 	 */
-	export const euiProgressStyles: ({ euiTheme, highContrastMode }: UseEuiTheme, isNative: boolean) => {
+	export const euiProgressStyles: ({ euiTheme }: UseEuiTheme, isNative: boolean) => {
 	    euiProgress: import("@emotion/utils").SerializedStyles;
 	    native: import("@emotion/utils").SerializedStyles;
 	    indeterminate: import("@emotion/utils").SerializedStyles;
-	    _sharedSizeCSS: (size: string) => import("@emotion/utils").SerializedStyles;
-	    readonly xs: import("@emotion/utils").SerializedStyles;
-	    readonly s: import("@emotion/utils").SerializedStyles;
-	    readonly m: import("@emotion/utils").SerializedStyles;
-	    readonly l: import("@emotion/utils").SerializedStyles;
+	    xs: import("@emotion/utils").SerializedStyles;
+	    s: import("@emotion/utils").SerializedStyles;
+	    m: import("@emotion/utils").SerializedStyles;
+	    l: import("@emotion/utils").SerializedStyles;
 	    fixed: import("@emotion/utils").SerializedStyles;
 	    absolute: import("@emotion/utils").SerializedStyles;
 	    static: import("@emotion/utils").SerializedStyles;
@@ -9992,7 +9900,6 @@ declare module '@elastic/eui/src/components/form/form_row/form_row.styles' {
 	    row: string;
 	    readonly rowCompressed: string;
 	    columnCompressed: import("@emotion/utils").SerializedStyles;
-	    readonly columnCompressedSwitch: import("@emotion/utils").SerializedStyles;
 	    centerDisplayCss: (compressed: boolean) => string;
 	    readonly center: import("@emotion/utils").SerializedStyles;
 	    readonly centerCompressed: import("@emotion/utils").SerializedStyles;
@@ -10002,11 +9909,10 @@ declare module '@elastic/eui/src/components/form/form_row/form_row.styles' {
 declare module '@elastic/eui/src/components/form/form_row/form_row' {
 	import { FunctionComponent, HTMLAttributes, ReactElement, ReactNode } from 'react';
 	import { ExclusiveUnion, CommonProps } from '@elastic/eui/src/components/common';
-	export const DISPLAYS: readonly ["row", "columnCompressed", "center", "centerCompressed", "columnCompressedSwitch", "rowCompressed"];
+	export const DISPLAYS: readonly ["row", "columnCompressed", "center", "centerCompressed", "rowCompressed"];
 	export type EuiFormRowDisplayKeys = (typeof DISPLAYS)[number]; type EuiFormRowCommonProps = CommonProps & {
 	    /**
 	     * - `columnCompressed` creates a compressed and horizontal layout
-	     * - `columnCompressedSwitch` - **deprecated**, use `columnCompressed` instead
 	     * - `center`/`centerCompressed` helps align non-input content better with inline form layouts
 	     * - `rowCompressed` - **deprecated**, does not currently affect styling
 	     */
@@ -10396,7 +10302,6 @@ declare module '@elastic/eui/src/components/form/range/range.styles' {
 	    trackBorderRadius: import("csstype").Property.BorderRadius<string | number> | undefined;
 	    tickHeight: string;
 	    tickWidth: string;
-	    tickColor: string;
 	    disabledOpacity: number;
 	    highlightHeight: string;
 	    height: string;
@@ -10469,7 +10374,7 @@ declare module '@elastic/eui/src/components/form/range/range_levels.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
 	export const euiRangeLevelsStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiRangeLevels: import("@emotion/utils").SerializedStyles;
-	    euiRangeLevels__overlay: import("@emotion/utils").SerializedStyles;
+	    hasRange: import("@emotion/utils").SerializedStyles;
 	    hasTicks: import("@emotion/utils").SerializedStyles;
 	};
 	export const euiRangeLevelStyles: (euiThemeContext: UseEuiTheme) => {
@@ -11180,6 +11085,36 @@ declare module '@elastic/eui/src/components/code/utils' {
 	export const highlightByLine: (children: string, language: string, data: LineNumbersConfig, euiTheme: UseEuiTheme) => RefractorNode[];
 	export {};
 
+}
+declare module '@elastic/eui/src/components/code/code_syntax.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiCodeSyntaxVariables: ({ euiTheme }: UseEuiTheme) => {
+	    backgroundColor: string;
+	    color: string;
+	    inlineCodeColor: string;
+	    selectedBackgroundColor: string;
+	    commentColor: string;
+	    selectorTagColor: string;
+	    stringColor: string;
+	    tagColor: string;
+	    nameColor: string;
+	    numberColor: string;
+	    keywordColor: string;
+	    functionTitleColor: string;
+	    typeColor: string;
+	    attributeColor: string;
+	    symbolColor: string;
+	    paramsColor: string;
+	    metaColor: string;
+	    titleColor: string;
+	    sectionColor: string;
+	    additionColor: string;
+	    deletionColor: string;
+	    selectorClassColor: string;
+	    selectorIdColor: string;
+	    readonly tokensCss: string;
+	};
+
 }
 declare module '@elastic/eui/src/components/code/code.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
@@ -13263,7 +13198,6 @@ declare module '@elastic/eui/src/components/color_picker/hue.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
 	export const euiHueStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiHue: import("@emotion/utils").SerializedStyles;
-	    euiHue__track: import("@emotion/utils").SerializedStyles;
 	    euiHue__range: import("@emotion/utils").SerializedStyles;
 	};
 
@@ -13283,7 +13217,6 @@ declare module '@elastic/eui/src/components/color_picker/saturation.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
 	export const euiSaturationStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiSaturation: import("@emotion/utils").SerializedStyles;
-	    euiSaturation__svg: import("@emotion/utils").SerializedStyles;
 	    euiSaturation__lightness: import("@emotion/utils").SerializedStyles;
 	    euiSaturation__saturation: import("@emotion/utils").SerializedStyles;
 	    euiSaturation__indicator: import("@emotion/utils").SerializedStyles;
@@ -13635,7 +13568,7 @@ declare module '@elastic/eui/src/components/combo_box/combo_box_input/combo_box_
 }
 declare module '@elastic/eui/src/components/mark/mark.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiMarkStyles: ({ euiTheme, highContrastMode }: UseEuiTheme) => {
+	export const euiMarkStyles: ({ euiTheme, colorMode }: UseEuiTheme) => {
 	    euiMark: import("@emotion/utils").SerializedStyles;
 	};
 	export const euiMarkScreenReaderStyles: (highlightStart: string, highlightEnd: string) => {
@@ -14157,7 +14090,7 @@ declare module '@elastic/eui/src/components/timeline/timeline_item' {
 }
 declare module '@elastic/eui/src/components/timeline/timeline.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiTimelineStyles: (euiThemeContext: UseEuiTheme) => {
+	export const euiTimelineStyles: ({ euiTheme }: UseEuiTheme) => {
 	    euiTimeline: import("@emotion/utils").SerializedStyles;
 	    m: import("@emotion/utils").SerializedStyles;
 	    l: import("@emotion/utils").SerializedStyles;
@@ -17224,7 +17157,7 @@ declare module '@elastic/eui/src/components/date_picker/date_picker' {
 }
 declare module '@elastic/eui/src/components/tabs/tab.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiTabStyles: ({ euiTheme, highContrastMode }: UseEuiTheme) => {
+	export const euiTabStyles: ({ euiTheme }: UseEuiTheme) => {
 	    euiTab: import("@emotion/utils").SerializedStyles;
 	    expanded: import("@emotion/utils").SerializedStyles;
 	    selected: import("@emotion/utils").SerializedStyles;
@@ -19498,10 +19431,6 @@ declare module '@elastic/eui/src/components/skeleton/utils' {
 	    gradientSize?: string;
 	};
 	export const euiSkeletonGradientAnimation: ({ euiTheme, colorMode }: UseEuiTheme, { slideSize, gradientSize }?: AnimationOptions) => import("@emotion/utils").SerializedStyles;
-	export const _highContrastFallback: ({ euiTheme, colorMode, highContrastMode }: UseEuiTheme, { shape, borderRadius }?: {
-	    shape?: string | undefined;
-	    borderRadius?: import("csstype").Property.BorderRadius<string | number> | undefined;
-	}) => string;
 	export {};
 
 }
@@ -19849,7 +19778,6 @@ declare module '@elastic/eui/src/components/key_pad_menu/key_pad_menu_item.style
 	    euiKeyPadMenuItem: import("@emotion/utils").SerializedStyles;
 	    enabled: import("@emotion/utils").SerializedStyles;
 	    selected: import("@emotion/utils").SerializedStyles;
-	    selectedHighContrast: import("@emotion/utils").SerializedStyles;
 	    disabled: {
 	        disabled: import("@emotion/utils").SerializedStyles;
 	        selected: import("@emotion/utils").SerializedStyles;
@@ -21376,21 +21304,17 @@ declare module '@elastic/eui/src/components/provider/cache' {
 	export * from '@elastic/eui/src/components/provider/cache/cache_provider';
 
 }
-declare module '@elastic/eui/src/components/provider/system_defaults/match_media_hook' {
-	export const useWindowMediaMatcher: (mediaQuery: string) => boolean;
-
-}
-declare module '@elastic/eui/src/components/provider/system_defaults/system_defaults_provider' {
+declare module '@elastic/eui/src/components/provider/system_color_mode/system_color_mode_provider' {
 	import { FunctionComponent, ReactElement } from 'react';
 	import { EuiThemeColorModeStandard } from '@elastic/eui/src/services';
 	export const COLOR_MODE_MEDIA_QUERY = "(prefers-color-scheme: dark)";
-	export const EuiSystemDefaultsProvider: FunctionComponent<{
-	    children: (systemColorMode: EuiThemeColorModeStandard, systemHighContrastMode: boolean) => ReactElement;
+	export const EuiSystemColorModeProvider: FunctionComponent<{
+	    children: (systemColorMode: EuiThemeColorModeStandard) => ReactElement;
 	}>;
 
 }
-declare module '@elastic/eui/src/components/provider/system_defaults' {
-	export { EuiSystemDefaultsProvider } from '@elastic/eui/src/components/provider/system_defaults/system_defaults_provider';
+declare module '@elastic/eui/src/components/provider/system_color_mode' {
+	export { EuiSystemColorModeProvider } from '@elastic/eui/src/components/provider/system_color_mode/system_color_mode_provider';
 
 }
 declare module '@elastic/eui/src/components/provider/nested/nested_context' {
@@ -21427,14 +21351,6 @@ declare module '@elastic/eui/src/components/provider/provider' {
 	     * Defaults to the user's OS/system setting if undefined.
 	     */
 	    colorMode?: EuiThemeColorMode;
-	    /**
-	     * Allows enabling a high contrast mode for better accessibility.
-	     * Defaults to the user's OS/system setting if undefined.
-	     *
-	     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast
-	     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors
-	     */
-	    highContrastMode?: boolean;
 	    /**
 	     * Provide global styles via `@emotion/react` `Global` for your custom theme.
 	     * Pass `false` to remove the default EUI global styles.
@@ -21470,7 +21386,7 @@ declare module '@elastic/eui/src/components/provider/provider' {
 	     */
 	    componentDefaults?: EuiComponentDefaults;
 	}
-	export const EuiProvider: <T extends {} = {}>({ cache, theme, globalStyles: Globals, utilityClasses: Utilities, colorMode, highContrastMode, modify, componentDefaults, children, }: React.PropsWithChildren<EuiProviderProps<T>>) => any;
+	export const EuiProvider: <T extends {} = {}>({ cache, theme, globalStyles: Globals, utilityClasses: Utilities, colorMode, modify, componentDefaults, children, }: React.PropsWithChildren<EuiProviderProps<T>>) => any;
 
 }
 declare module '@elastic/eui/src/components/provider' {
@@ -23959,11 +23875,16 @@ declare module '@elastic/eui/src/components/steps/step_number.styles' {
 	    complete: import("@emotion/utils").SerializedStyles;
 	    current: import("@emotion/utils").SerializedStyles;
 	};
-	export const euiStepNumberIconStyles: ({ euiTheme }: UseEuiTheme) => {
+	export const euiStepNumberContentStyles: ({ euiTheme }: UseEuiTheme) => {
 	    euiStepNumber__icon: import("@emotion/utils").SerializedStyles;
 	    complete: import("@emotion/utils").SerializedStyles;
 	    danger: import("@emotion/utils").SerializedStyles;
 	    warning: import("@emotion/utils").SerializedStyles;
+	    euiStepNumber__number: import("@emotion/utils").SerializedStyles;
+	    incomplete: import("@emotion/utils").SerializedStyles;
+	    loading: import("@emotion/utils").SerializedStyles;
+	    disabled: import("@emotion/utils").SerializedStyles;
+	    current: import("@emotion/utils").SerializedStyles;
 	    none: import("@emotion/utils").SerializedStyles;
 	};
 
@@ -24054,7 +23975,7 @@ declare module '@elastic/eui/src/components/steps/steps' {
 }
 declare module '@elastic/eui/src/components/steps/sub_steps.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiSubStepsStyles: ({ euiTheme, highContrastMode, }: UseEuiTheme) => {
+	export const euiSubStepsStyles: ({ euiTheme }: UseEuiTheme) => {
 	    euiSubSteps: import("@emotion/utils").SerializedStyles;
 	};
 

package/i18ntokens.json

@@ -653,14 +653,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 38,
+        "line": 37,
         "column": 20,
-        "index": 1380
+        "index": 1352
       },
       "end": {
-        "line": 42,
+        "line": 41,
         "column": 3,
-        "index": 1482
+        "index": 1454
       }
     },
     "filepath": "src/components/color_picker/color_picker_swatch.tsx"
@@ -4973,14 +4973,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 35,
+        "line": 34,
         "column": 20,
-        "index": 1412
+        "index": 1321
       },
       "end": {
-        "line": 38,
+        "line": 37,
         "column": 3,
-        "index": 1490
+        "index": 1399
       }
     },
     "filepath": "src/components/form/form_control_layout/form_control_layout_clear_button.tsx"
@@ -5927,14 +5927,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 138,
+        "line": 139,
         "column": 6,
-        "index": 3856
+        "index": 3868
       },
       "end": {
-        "line": 144,
+        "line": 145,
         "column": 8,
-        "index": 3984
+        "index": 3996
       }
     },
     "filepath": "src/components/progress/progress.tsx"

package/lib/components/avatar/avatar.styles.js

@@ -16,7 +16,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 var _avatarSize = function _avatarSize(_ref7) {
   var size = _ref7.size,
     fontSize = _ref7.fontSize;
-  return "\n    ".concat((0, _global_styling.logicalCSS)('width', size), ";\n    ").concat((0, _global_styling.logicalCSS)('height', size), ";\n    font-size: ").concat(fontSize, ";\n  ");
+  return "\n    ".concat((0, _global_styling.logicalCSS)('width', size), ";\n    ").concat((0, _global_styling.logicalCSS)('height', size), ";\n    line-height: ").concat(size, ";\n    font-size: ").concat(fontSize, ";\n  ");
 };
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "4wfy2n-none",
@@ -67,11 +67,10 @@ var _ref6 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 var euiAvatarStyles = exports.euiAvatarStyles = function euiAvatarStyles(_ref8) {
-  var euiTheme = _ref8.euiTheme,
-    highContrastMode = _ref8.highContrastMode;
+  var euiTheme = _ref8.euiTheme;
   return {
     // Base
-    euiAvatar: /*#__PURE__*/(0, _react.css)("flex-shrink:0;display:inline-flex;justify-content:center;align-items:center;vertical-align:middle;background-size:cover;background-color:", euiTheme.colors.lightShade, ";", highContrastMode ? "border: ".concat(euiTheme.border.width.thin, " solid transparent;") : '', " ", (0, _global_styling.logicalTextAlignCSS)('center'), " ", (0, _global_styling.logicalCSS)('overflow-x', 'hidden'), "font-weight:", euiTheme.font.weight.medium, ";;label:euiAvatar;"),
+    euiAvatar: /*#__PURE__*/(0, _react.css)("flex-shrink:0;display:inline-flex;justify-content:center;align-items:center;vertical-align:middle;background-size:cover;background-color:", euiTheme.colors.lightShade, ";", (0, _global_styling.logicalTextAlignCSS)('center'), " ", (0, _global_styling.logicalCSS)('overflow-x', 'hidden'), "font-weight:", euiTheme.font.weight.medium, ";;label:euiAvatar;"),
     // Variants
     plain: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.emptyShade, ";;label:plain;"),
     subdued: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.lightestShade, ";;label:subdued;"),