@elastic/eui 67.0.0 → 67.1.1

package/eui.d.ts

@@ -1886,7 +1886,7 @@ declare module '@elastic/eui/src/themes/amsterdam/global_styling/mixins/button'
 declare module '@elastic/eui/src/components/button/button_display/_button_display.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
 	export const euiButtonBaseCSS: () => string;
-	export const euiButtonDisplayStyles: (euiThemeContext: UseEuiTheme, minWidth: string) => {
+	export const euiButtonDisplayStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiButtonDisplay: import("@emotion/utils").SerializedStyles;
 	    isDisabled: import("@emotion/utils").SerializedStyles;
 	    fullWidth: import("@emotion/utils").SerializedStyles;
@@ -1904,6 +1904,8 @@ declare module '@elastic/eui/src/components/button/button_display/_button_displa
 	    right: import("@emotion/utils").SerializedStyles;
 	    euiButtonDisplayContent__spinner: import("@emotion/utils").SerializedStyles;
 	    euiButtonDisplayContent__icon: import("@emotion/utils").SerializedStyles;
+	    s: import("@emotion/utils").SerializedStyles;
+	    m: import("@emotion/utils").SerializedStyles;
 	};
 
 }
@@ -1911,7 +1913,10 @@ declare module '@elastic/eui/src/components/button/button_display/_button_displa
 	import { HTMLAttributes, FunctionComponent, Ref } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { IconType } from '@elastic/eui/src/components/icon';
-	export type ButtonContentIconSide = 'left' | 'right' | undefined;
+	export const ICON_SIZES: readonly ["s", "m"];
+	export type ButtonContentIconSize = typeof ICON_SIZES[number];
+	export const ICON_SIDES: readonly ["left", "right"];
+	export type ButtonContentIconSide = typeof ICON_SIDES[number] | undefined;
 	export type EuiButtonDisplayContentType = HTMLAttributes<HTMLSpanElement>;
 	/**
 	 * *INTERNAL ONLY*
@@ -1934,7 +1939,7 @@ declare module '@elastic/eui/src/components/button/button_display/_button_displa
 	        ref?: Ref<HTMLSpanElement>;
 	        'data-text'?: string;
 	    };
-	    iconSize?: 's' | 'm';
+	    iconSize?: ButtonContentIconSize;
 	    isDisabled?: boolean;
 	}
 	export const EuiButtonDisplayContent: FunctionComponent<EuiButtonDisplayContentType & EuiButtonDisplayContentProps>;
@@ -4645,10 +4650,17 @@ declare module '@elastic/eui/src/components/popover/input_popover' {
 
 }
 declare module '@elastic/eui/src/components/popover/popover_title.styles' {
-	import { EuiPaddingSize } from '@elastic/eui/src/global_styling';
 	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiPopoverTitleStyles: (euiThemeContext: UseEuiTheme, panelPadding: EuiPaddingSize) => {
+	export const euiPopoverTitleStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiPopoverTitle: import("@emotion/utils").SerializedStyles;
+	    panelPaddingSizes: {
+	        none: import("@emotion/utils").SerializedStyles;
+	        xs: import("@emotion/utils").SerializedStyles;
+	        s: import("@emotion/utils").SerializedStyles;
+	        m: import("@emotion/utils").SerializedStyles;
+	        l: import("@emotion/utils").SerializedStyles;
+	        xl: import("@emotion/utils").SerializedStyles;
+	    };
 	};
 
 }
@@ -6178,6 +6190,7 @@ declare module '@elastic/eui/src/services/color/manipulation' {
 
 }
 declare module '@elastic/eui/src/services/color/contrast' {
+	export const wcagContrastMin = 4.5;
 	/**
 	 * Creates a new color that meets or exceeds WCAG level AA
 	 * @param foreground - Color to manipulate
@@ -6407,6 +6420,18 @@ declare module '@elastic/eui/src/global_styling/functions/logicals' {
 	    textAlign: string;
 	};
 
+}
+declare module '@elastic/eui/src/global_styling/functions/math' {
+	/**
+	 * Utility for performing math callbacks on a string with CSS units
+	 * and returning a string with its unit preserved.
+	 *
+	 * Example usage:
+	 * mathWithUnits('4px', (x) => x / 2) = '2px';
+	 * mathWithUnits(euiTheme.size.xs, (x) => x + 2) = '6px';
+	 */
+	export const mathWithUnits: (value: string | number | undefined, callback: (x: number) => number, unit?: string) => string | undefined;
+
 }
 declare module '@elastic/eui/src/global_styling/functions/size' {
 	/**
@@ -6422,6 +6447,21 @@ declare module '@elastic/eui/src/global_styling/functions/size' {
 	    base: number;
 	}) => string;
 
+}
+declare module '@elastic/eui/src/services/theme/provider' {
+	import React, { PropsWithChildren } from 'react';
+	import { EuiThemeColorMode, EuiThemeSystem, EuiThemeModifications } from '@elastic/eui/src/services/theme/types'; type LEVELS = 'log' | 'warn' | 'error';
+	export const setEuiDevProviderWarning: (level: LEVELS) => LEVELS;
+	export const getEuiDevProviderWarning: () => LEVELS | undefined;
+	export interface EuiThemeProviderProps<T> {
+	    theme?: EuiThemeSystem<T>;
+	    colorMode?: EuiThemeColorMode;
+	    modify?: EuiThemeModifications<T>;
+	    children: any;
+	}
+	export const EuiThemeProvider: <T extends {} = {}>({ theme: _system, colorMode: _colorMode, modify: _modifications, children, }: React.PropsWithChildren<EuiThemeProviderProps<T>>) => JSX.Element;
+	export {};
+
 }
 declare module '@elastic/eui/src/services/theme/hooks' {
 	import React from 'react';
@@ -6432,7 +6472,7 @@ declare module '@elastic/eui/src/services/theme/hooks' {
 	    modifications: EuiThemeModifications<T>;
 	}
 	export const useEuiTheme: <T extends {} = {}>() => UseEuiTheme<T>;
-	export interface WithEuiThemeProps<P = {}> {
+	export interface WithEuiThemeProps<P extends {} = {}> {
 	    theme: UseEuiTheme<P>;
 	}
 	export const withEuiTheme: <T extends {} = {}, U extends {} = {}>(Component: React.ComponentType<T & WithEuiThemeProps<U>>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<Omit<T, "theme">> & React.RefAttributes<Omit<T, "theme">>>;
@@ -6485,6 +6525,7 @@ declare module '@elastic/eui/src/global_styling/functions/typography' {
 }
 declare module '@elastic/eui/src/global_styling/functions' {
 	export * from '@elastic/eui/src/global_styling/functions/logicals';
+	export * from '@elastic/eui/src/global_styling/functions/math';
 	export * from '@elastic/eui/src/global_styling/functions/size';
 	export * from '@elastic/eui/src/global_styling/functions/typography';
 
@@ -6535,27 +6576,16 @@ 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 defaultComputedTheme: EuiThemeComputed<import ("@elastic/eui/src/services/theme/types").EuiThemeShape>;
 	export const EuiThemeContext: import("react").Context<EuiThemeComputed<{}>>;
 
-}
-declare module '@elastic/eui/src/services/theme/provider' {
-	import React, { PropsWithChildren } from 'react';
-	import { EuiThemeColorMode, EuiThemeSystem, EuiThemeModifications } from '@elastic/eui/src/services/theme/types';
-	export interface EuiThemeProviderProps<T> {
-	    theme?: EuiThemeSystem<T>;
-	    colorMode?: EuiThemeColorMode;
-	    modify?: EuiThemeModifications<T>;
-	    children: any;
-	}
-	export const EuiThemeProvider: <T extends {} = {}>({ theme: _system, colorMode: _colorMode, modify: _modifications, children, }: React.PropsWithChildren<EuiThemeProviderProps<T>>) => JSX.Element;
-
 }
 declare module '@elastic/eui/src/services/theme' {
 	export { EuiSystemContext, EuiThemeContext, EuiModificationsContext, EuiColorModeContext, } from '@elastic/eui/src/services/theme/context';
 	export type { UseEuiTheme, WithEuiThemeProps } from '@elastic/eui/src/services/theme/hooks';
 	export { useEuiTheme, withEuiTheme } from '@elastic/eui/src/services/theme/hooks';
 	export type { EuiThemeProviderProps } from '@elastic/eui/src/services/theme/provider';
-	export { EuiThemeProvider } from '@elastic/eui/src/services/theme/provider';
+	export { EuiThemeProvider, getEuiDevProviderWarning, setEuiDevProviderWarning, } from '@elastic/eui/src/services/theme/provider';
 	export { buildTheme, computed, isInverseColorMode, getColorMode, getComputed, getOn, mergeDeep, setOn, Computed, } from '@elastic/eui/src/services/theme/utils';
 	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';
@@ -7073,7 +7103,7 @@ declare module '@elastic/eui/src/services' {
 	export type { EuiBreakpointSize } 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 { 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, wcagContrastMin, } from '@elastic/eui/src/services/color';
 	export type { EuiSetColorMethod } from '@elastic/eui/src/services/color_picker';
 	export { useColorPickerState, useColorStopsState } from '@elastic/eui/src/services/color_picker';
 	export * from '@elastic/eui/src/services/console';
@@ -7156,7 +7186,10 @@ declare module '@elastic/eui/src/global_styling/mixins/_helpers' {
 	}
 	export const euiYScroll: (euiTheme: UseEuiTheme, { height }?: _EuiYScroll) => string;
 	export const useEuiYScroll: ({ height }?: _EuiYScroll) => string;
-	export const euiYScrollWithShadows: (euiTheme: UseEuiTheme, { height }?: _EuiYScroll) => string;
+	interface _EuiYScrollWithShadows extends _EuiYScroll {
+	    side?: 'both' | 'start' | 'end';
+	}
+	export const euiYScrollWithShadows: (euiTheme: UseEuiTheme, { height, side }?: _EuiYScrollWithShadows) => string;
 	export const useEuiYScrollWithShadows: ({ height }?: _EuiYScroll) => string;
 	export const euiXScroll: (euiTheme: UseEuiTheme) => string;
 	export const useEuiXScroll: () => string;
@@ -7699,11 +7732,39 @@ declare module '@elastic/eui/src/components/avatar' {
 	export type { EuiAvatarProps } from '@elastic/eui/src/components/avatar/avatar';
 	export { EuiAvatar, checkValidColor } from '@elastic/eui/src/components/avatar/avatar';
 
+}
+declare module '@elastic/eui/src/components/badge/badge.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiBadgeStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiBadge: import("@emotion/utils").SerializedStyles;
+	    clickable: import("@emotion/utils").SerializedStyles;
+	    disabled: import("@emotion/utils").SerializedStyles;
+	    hollow: import("@emotion/utils").SerializedStyles;
+	    euiBadge__content: import("@emotion/utils").SerializedStyles;
+	    text: {
+	        euiBadge__text: import("@emotion/utils").SerializedStyles;
+	        clickable: import("@emotion/utils").SerializedStyles;
+	    };
+	    icon: {
+	        euiBadge__icon: import("@emotion/utils").SerializedStyles;
+	        right: import("@emotion/utils").SerializedStyles;
+	        left: import("@emotion/utils").SerializedStyles;
+	    };
+	    iconButton: {
+	        euiBadge__iconButton: import("@emotion/utils").SerializedStyles;
+	        right: import("@emotion/utils").SerializedStyles;
+	        left: import("@emotion/utils").SerializedStyles;
+	    };
+	    euiBadge__childButton: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/badge/badge' {
 	import { AriaAttributes, FunctionComponent, HTMLAttributes, MouseEventHandler } from 'react';
 	import { CommonProps, ExclusiveUnion, PropsOf } from '@elastic/eui/src/components/common';
-	import { EuiIcon, IconColor, IconType } from '@elastic/eui/src/components/icon'; type IconSide = 'left' | 'right'; type WithButtonProps = {
+	import { EuiIcon, IconType } from '@elastic/eui/src/components/icon';
+	export const ICON_SIDES: readonly ["left", "right"]; type IconSide = typeof ICON_SIDES[number];
+	export const COLORS: readonly ["default", "hollow", "primary", "success", "accent", "warning", "danger"]; type BadgeColor = typeof COLORS[number]; type WithButtonProps = {
 	    /**
 	     * Will apply an onclick to the badge itself
 	     */
@@ -7739,7 +7800,7 @@ declare module '@elastic/eui/src/components/badge/badge' {
 	    /**
 	     * Accepts either our palette colors (primary, success ..etc) or a hex value `#FFFFFF`, `#000`.
 	     */
-	    color?: IconColor;
+	    color?: BadgeColor | string;
 	    /**
 	     * Will override any color passed through the `color` prop.
 	     */
@@ -7749,8 +7810,6 @@ declare module '@elastic/eui/src/components/badge/badge' {
 	     */
 	    closeButtonProps?: Partial<PropsOf<typeof EuiIcon>>;
 	} & CommonProps & ExclusiveUnion<WithIconOnClick, {}> & ExclusiveUnion<ExclusiveUnion<WithButtonProps, WithAnchorProps>, WithSpanProps>;
-	export const COLORS: string[];
-	export const ICON_SIDES: IconSide[];
 	export const EuiBadge: FunctionComponent<EuiBadgeProps>;
 	export {};
 
@@ -8209,7 +8268,7 @@ declare module '@elastic/eui/src/components/card/card.styles' {
 	 * 3. Horizontal layouts should always top left align no matter the textAlign prop
 	 * 4. Ensures the contents always stretch no matter the flex layout
 	 */
-	export const euiCardStyles: (euiThemeContext: UseEuiTheme, paddingSize: EuiCardProps['paddingSize'], color: EuiCardProps['display']) => {
+	export const euiCardStyles: (euiThemeContext: UseEuiTheme, paddingSize: EuiCardProps['paddingSize']) => {
 	    card: {
 	        euiCard: import("@emotion/utils").SerializedStyles;
 	        aligned: {
@@ -8241,7 +8300,10 @@ declare module '@elastic/eui/src/components/card/card.styles' {
 	        };
 	        disabled: import("@emotion/utils").SerializedStyles;
 	    };
-	    euiCard__image: import("@emotion/utils").SerializedStyles;
+	    image: {
+	        euiCard__image: import("@emotion/utils").SerializedStyles;
+	        transparent: import("@emotion/utils").SerializedStyles;
+	    };
 	    icon: {
 	        euiCard__icon: import("@emotion/utils").SerializedStyles;
 	        withImage: import("@emotion/utils").SerializedStyles;
@@ -8668,6 +8730,40 @@ declare module '@elastic/eui/src/components/collapsible_nav/collapsible_nav_grou
 	export type { EuiCollapsibleNavGroupProps } from '@elastic/eui/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group';
 	export { EuiCollapsibleNavGroup } from '@elastic/eui/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group';
 
+}
+declare module '@elastic/eui/src/components/flyout/flyout.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiFlyoutCloseButtonStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiFlyout__closeButton: import("@emotion/utils").SerializedStyles;
+	    inside: import("@emotion/utils").SerializedStyles;
+	    outside: import("@emotion/utils").SerializedStyles;
+	    outsideSide: {
+	        right: import("@emotion/utils").SerializedStyles;
+	        left: import("@emotion/utils").SerializedStyles;
+	    };
+	};
+	export const euiFlyoutStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiFlyout: import("@emotion/utils").SerializedStyles;
+	    s: import("@emotion/utils").SerializedStyles;
+	    m: import("@emotion/utils").SerializedStyles;
+	    l: import("@emotion/utils").SerializedStyles;
+	    noMaxWidth: import("@emotion/utils").SerializedStyles;
+	    right: import("@emotion/utils").SerializedStyles;
+	    left: import("@emotion/utils").SerializedStyles;
+	    overlay: import("@emotion/utils").SerializedStyles;
+	    push: import("@emotion/utils").SerializedStyles;
+	    pushSide: {
+	        right: import("@emotion/utils").SerializedStyles;
+	        left: import("@emotion/utils").SerializedStyles;
+	    };
+	    paddingSizes: {
+	        none: import("@emotion/utils").SerializedStyles;
+	        s: import("@emotion/utils").SerializedStyles;
+	        m: import("@emotion/utils").SerializedStyles;
+	        l: import("@emotion/utils").SerializedStyles;
+	    };
+	};
+
 }
 declare module '@elastic/eui/src/components/flyout/flyout' {
 	import React, { ComponentPropsWithRef, CSSProperties, ElementType } from 'react';
@@ -8676,16 +8772,18 @@ declare module '@elastic/eui/src/components/flyout/flyout' {
 	import { EuiFocusTrapProps } from '@elastic/eui/src/components/focus_trap';
 	import { EuiOverlayMaskProps } from '@elastic/eui/src/components/overlay_mask';
 	import { EuiButtonIconPropsForButton } from '@elastic/eui/src/components/button';
-	export const TYPES: ("push" | "overlay")[]; type _EuiFlyoutType = typeof TYPES[number];
-	export const SIDES: ("left" | "right")[]; type _EuiFlyoutSide = typeof SIDES[number];
-	export const SIZES: ("s" | "m" | "l")[];
+	export const TYPES: readonly ["push", "overlay"]; type _EuiFlyoutType = typeof TYPES[number];
+	export const SIDES: readonly ["left", "right"]; type _EuiFlyoutSide = typeof SIDES[number];
+	export const SIZES: readonly ["s", "m", "l"];
 	export type EuiFlyoutSize = typeof SIZES[number];
-	export const PADDING_SIZES: ("s" | "m" | "l" | "none")[]; type _EuiFlyoutPaddingSize = typeof PADDING_SIZES[number];
+	export const PADDING_SIZES: readonly ["none", "s", "m", "l"];
+	export type _EuiFlyoutPaddingSize = typeof PADDING_SIZES[number];
 	interface _EuiFlyoutProps {
 	    onClose: (event: MouseEvent | TouchEvent | KeyboardEvent) => void;
 	    /**
 	     * Defines the width of the panel.
 	     * Pass a predefined size of `s | m | l`, or pass any number/string compatible with the CSS `width` attribute
+	     * @default m
 	     */
 	    size?: EuiFlyoutSize | CSSProperties['width'];
 	    /**
@@ -8694,23 +8792,27 @@ declare module '@elastic/eui/src/components/flyout/flyout' {
 	     * set to `false` to not restrict the width,
 	     * set to a number for a custom width in px,
 	     * set to a string for a custom width in custom measurement.
+	     * @default false
 	     */
 	    maxWidth?: boolean | number | string;
 	    /**
 	     * Customize the padding around the content of the flyout header, body and footer
+	     * @default l
 	     */
 	    paddingSize?: _EuiFlyoutPaddingSize;
 	    /**
 	     * Adds an EuiOverlayMask and wraps in an EuiPortal
+	     * @default true
 	     */
 	    ownFocus?: boolean;
 	    /**
 	     * Hides the default close button. You must provide another close button somewhere within the flyout.
+	     * @default false
 	     */
 	    hideCloseButton?: boolean;
 	    /**
-	     * Specify an aria-label for the close button of the flyout.
-	     * Default is `'Close this dialog'`.
+	     * Specify a custom aria-label for the close button of the flyout.
+	     * @default "Close this dialog"
 	     */
 	    closeButtonAriaLabel?: string;
 	    /**
@@ -8721,6 +8823,7 @@ declare module '@elastic/eui/src/components/flyout/flyout' {
 	     * Position of close button.
 	     * `inside`: Floating to just inside the flyout, always top right;
 	     * `outside`: Floating just outside the flyout near the top (side dependent on `side`). Helpful when the close button may cover other interactable content.
+	     * @default inside
 	     */
 	    closeButtonPosition?: 'inside' | 'outside';
 	    /**
@@ -8730,6 +8833,7 @@ declare module '@elastic/eui/src/components/flyout/flyout' {
 	    /**
 	     * How to display the the flyout in relation to the body content;
 	     * `push` keeps it visible, pushing the `<body>` content via padding
+	     * @default overlay
 	     */
 	    type?: _EuiFlyoutType;
 	    /**
@@ -8740,15 +8844,18 @@ declare module '@elastic/eui/src/components/flyout/flyout' {
 	    /**
 	     * Which side of the window to attach to.
 	     * The `left` option should only be used for navigation.
+	     * @default right
 	     */
 	    side?: _EuiFlyoutSide;
 	    /**
 	     * Defaults to `dialog` which is best for most cases of the flyout.
 	     * Otherwise pass in your own, aria-role, or `null` to remove it and use the semantic `as` element instead
+	     * @default dialog
 	     */
 	    role?: null | string;
 	    /**
 	     * Named breakpoint (`xs` through `xl`) for customizing the minimum window width to enable the `push` type
+	     * @default l
 	     */
 	    pushMinBreakpoint?: EuiBreakpointSize;
 	    style?: CSSProperties;
@@ -8768,6 +8875,18 @@ declare module '@elastic/eui/src/components/flyout/flyout' {
 	export const EuiFlyout: <T extends React.ElementType<any> = "div">(props: EuiFlyoutProps<T>) => JSX.Element;
 	export {};
 
+}
+declare module '@elastic/eui/src/components/flyout/flyout_body.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiFlyoutBodyStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiFlyoutBody: import("@emotion/utils").SerializedStyles;
+	    euiFlyoutBody__overflow: {
+	        noBanner: import("@emotion/utils").SerializedStyles;
+	        hasBanner: import("@emotion/utils").SerializedStyles;
+	    };
+	    euiFlyoutBody__banner: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/flyout/flyout_body' {
 	import { FunctionComponent, HTMLAttributes, ReactNode } from 'react';
@@ -8780,6 +8899,13 @@ declare module '@elastic/eui/src/components/flyout/flyout_body' {
 	}>;
 	export const EuiFlyoutBody: EuiFlyoutBodyProps;
 
+}
+declare module '@elastic/eui/src/components/flyout/flyout_footer.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiFlyoutFooterStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiFlyoutFooter: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/flyout/flyout_footer' {
 	import { FunctionComponent, HTMLAttributes } from 'react';
@@ -8787,6 +8913,14 @@ declare module '@elastic/eui/src/components/flyout/flyout_footer' {
 	export type EuiFlyoutFooterProps = FunctionComponent<HTMLAttributes<HTMLDivElement> & CommonProps>;
 	export const EuiFlyoutFooter: EuiFlyoutFooterProps;
 
+}
+declare module '@elastic/eui/src/components/flyout/flyout_header.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiFlyoutHeaderStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiFlyoutHeader: import("@emotion/utils").SerializedStyles;
+	    hasBorder: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/flyout/flyout_header' {
 	import { FunctionComponent, HTMLAttributes } from 'react';
@@ -16186,6 +16320,8 @@ declare module '@elastic/eui/src/components/search_bar/query/ast' {
 	    getIsClauses(): IsClause[];
 	    getIsClause(flag: string): IsClause;
 	    removeIsClause(flag: string): _AST;
+	    removeIsClauses(): _AST;
+	    removeAllClauses(): _AST;
 	    getGroupClauses(): GroupClause[];
 	    /**
 	     * Creates and returns a new AST with the given clause added to the current clauses. If
@@ -16429,7 +16565,7 @@ declare module '@elastic/eui/src/components/search_bar/query/execute_ast' {
 
 }
 declare module '@elastic/eui/src/components/search_bar/query/ast_to_es_query_dsl' {
-	import { _AST, OperatorType, Value } from '@elastic/eui/src/components/search_bar/query/ast';
+	import { OperatorType, Value, _AST } from '@elastic/eui/src/components/search_bar/query/ast';
 	export interface QueryContainer {
 	    bool?: BoolQuery;
 	    match_all?: {};
@@ -16498,6 +16634,7 @@ declare module '@elastic/eui/src/components/search_bar/query/query' {
 	    text: string;
 	    private syntax;
 	    constructor(ast: _AST, syntax?: Syntax, text?: string);
+	    hasClauses(): boolean;
 	    hasSimpleFieldClause(field: string, value?: string): boolean;
 	    getSimpleFieldClause(field: string, value?: Value): import ("@elastic/eui/src/components/search_bar/query/ast").FieldClause | undefined;
 	    removeSimpleFieldClauses(field: string): Query;
@@ -16508,11 +16645,13 @@ declare module '@elastic/eui/src/components/search_bar/query/query' {
 	    addOrFieldValue(field: string, value: Value, must?: boolean, operator?: OperatorType): Query;
 	    removeOrFieldValue(field: string, value: Value): Query;
 	    removeOrFieldClauses(field: string): Query;
+	    removeAllClauses(): Query;
 	    hasIsClause(flag: string): boolean;
 	    getIsClause(flag: string): import ("@elastic/eui/src/components/search_bar/query/ast").IsClause;
 	    addMustIsClause(flag: string): Query;
 	    addMustNotIsClause(flag: string): Query;
 	    removeIsClause(flag: string): Query;
+	    removeIsClauses(): Query;
 	    /**
 	     * Executes this query over the given iterable item and returns
 	     * an new array of all items that matched this query. Options:
@@ -17289,6 +17428,30 @@ declare module '@elastic/eui/src/components/search_bar/filters/field_value_toggl
 	    render(): JSX.Element[];
 	}
 
+}
+declare module '@elastic/eui/src/components/search_bar/filters/custom_component_filter' {
+	import React, { FC } from 'react';
+	import { Query } from '@elastic/eui/src/components/search_bar/query';
+	/**
+	 * The props that are passed down to the custom component
+	 */
+	export interface CustomComponentProps {
+	    query: Query;
+	    onChange?: (query: Query) => void;
+	}
+	export interface CustomComponentFilterConfigType<T extends CustomComponentProps = CustomComponentProps> {
+	    type: 'custom_component';
+	    component: React.ComponentType<T>;
+	    available?: () => boolean;
+	}
+	export interface CustomComponentFilterProps<T extends CustomComponentProps = CustomComponentProps> {
+	    index: number;
+	    config: CustomComponentFilterConfigType<T>;
+	    query: Query;
+	    onChange?: (query: Query) => void;
+	}
+	export const CustomComponentFilter: FC<CustomComponentFilterProps>;
+
 }
 declare module '@elastic/eui/src/components/search_bar/filters/filters' {
 	
@@ -17296,9 +17459,10 @@ declare module '@elastic/eui/src/components/search_bar/filters/filters' {
 	import { FieldValueSelectionFilterConfigType } from '@elastic/eui/src/components/search_bar/filters/field_value_selection_filter';
 	import { FieldValueToggleFilterConfigType } from '@elastic/eui/src/components/search_bar/filters/field_value_toggle_filter';
 	import { FieldValueToggleGroupFilterConfigType } from '@elastic/eui/src/components/search_bar/filters/field_value_toggle_group_filter';
+	import { CustomComponentFilterConfigType } from '@elastic/eui/src/components/search_bar/filters/custom_component_filter';
 	import { Query } from '@elastic/eui/src/components/search_bar/query';
 	export const createFilter: (index: number, config: SearchFilterConfig, query: Query, onChange: (query: Query) => void) => JSX.Element;
-	export type SearchFilterConfig = IsFilterConfigType | FieldValueSelectionFilterConfigType | FieldValueToggleFilterConfigType | FieldValueToggleGroupFilterConfigType;
+	export type SearchFilterConfig = IsFilterConfigType | FieldValueSelectionFilterConfigType | FieldValueToggleFilterConfigType | FieldValueToggleGroupFilterConfigType | CustomComponentFilterConfigType;
 
 }
 declare module '@elastic/eui/src/components/search_bar/filters' {

package/i18ntokens.json

@@ -3621,11 +3621,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 305,
+        "line": 299,
         "column": 8
       },
       "end": {
-        "line": 305,
+        "line": 299,
         "column": 78
       }
     },

package/lib/components/accordion/accordion.js

@@ -229,10 +229,10 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
 
       if (_arrowDisplay !== 'none') {
         iconButton = (0, _react2.jsx)(_button.EuiButtonIcon, _extends({
-          color: "text"
+          color: "text",
+          css: cssIconButtonStyles
         }, arrowProps, {
           className: iconButtonClasses,
-          css: cssIconButtonStyles,
           iconType: "arrowRight",
           onClick: this.onToggle,
           "aria-controls": id,
@@ -268,10 +268,11 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
         childrenContent = children;
       }
 
-      var button = (0, _react2.jsx)(ButtonElement, _extends({}, buttonProps, {
+      var button = (0, _react2.jsx)(ButtonElement, _extends({
+        css: cssButtonStyles
+      }, buttonProps, {
         id: buttonId,
         className: buttonClasses,
-        css: cssButtonStyles,
         "aria-controls": id,
         "aria-expanded": isOpen,
         onClick: isDisabled ? undefined : this.onToggle,

package/lib/components/accordion/accordion.styles.js

@@ -50,7 +50,7 @@ exports.euiAccordionChildrenStyles = euiAccordionChildrenStyles;
 var euiAccordionChildWrapperStyles = function euiAccordionChildWrapperStyles(_ref6) {
   var euiTheme = _ref6.euiTheme;
   return {
-    euiAccordion__childWrapper: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', 0), " opacity:0;overflow:hidden;transition:", _global_styling.logicals.height, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ",opacity ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ";visibility:hidden;will-change:opacity,visibility,", _global_styling.logicals.height, ";&:focus{outline:none;};label:euiAccordion__childWrapper;"),
+    euiAccordion__childWrapper: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', 0), " opacity:0;overflow:hidden;transition:", _global_styling.logicals.height, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ",opacity ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ";visibility:hidden;&:focus{outline:none;};label:euiAccordion__childWrapper;"),
     isOpen: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', 'auto'), " opacity:1;visibility:visible;;label:isOpen;")
   };
 };