@elastic/eui 87.0.0 → 87.2.0

package/eui.d.ts

@@ -1699,7 +1699,6 @@ declare module '@elastic/eui/src/themes/amsterdam/global_styling/mixins/shadow'
 	export const euiShadowXLarge: ({ euiTheme, colorMode }: UseEuiTheme, { color: _color, reverse }?: EuiShadowXLarge) => string;
 	/**
 	 * slightShadowHover
-	 * TODO: I think this is only used by panels/cards in the Amsterdam theme, move there
 	 */
 	export const euiSlightShadowHover: ({ euiTheme, colorMode }: UseEuiTheme, { color: _color }?: _EuiThemeShadowCustomColor) => string;
 	export const useEuiSlightShadowHover: (color?: _EuiThemeShadowCustomColor['color']) => string;
@@ -5010,15 +5009,18 @@ declare module '@elastic/eui/src/components/tool_tip/tool_tip_popover' {
 
 }
 declare module '@elastic/eui/src/components/tool_tip/tool_tip_anchor' {
-	import React, { HTMLAttributes, ReactElement } from 'react';
-	export interface EuiToolTipAnchorProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'onBlur' | 'onFocus' | 'children'> {
+	import React, { HTMLAttributes } from 'react';
+	import type { EuiToolTipProps } from '@elastic/eui/src/components/tool_tip/tool_tip';
+	export type EuiToolTipAnchorProps = Omit<HTMLAttributes<HTMLSpanElement>, 'onBlur' | 'onFocus' | 'children'> & Required<Pick<EuiToolTipProps, 'display' | 'children'>> & {
 	    onBlur: () => void;
 	    onFocus: () => void;
-	    children: ReactElement;
 	    isVisible: boolean;
-	    display: 'block' | 'inlineBlock';
-	}
-	export const EuiToolTipAnchor: React.ForwardRefExoticComponent<EuiToolTipAnchorProps & React.RefAttributes<HTMLSpanElement>>;
+	};
+	export const EuiToolTipAnchor: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLSpanElement>, "children" | "onFocus" | "onBlur"> & Required<Pick<EuiToolTipProps, "display" | "children">> & {
+	    onBlur: () => void;
+	    onFocus: () => void;
+	    isVisible: boolean;
+	} & React.RefAttributes<HTMLSpanElement>>;
 
 }
 declare module '@elastic/eui/src/components/tool_tip/tool_tip_arrow' {
@@ -5043,7 +5045,7 @@ declare module '@elastic/eui/src/components/tool_tip/tool_tip' {
 	import React, { Component, ReactElement, ReactNode, MouseEvent as ReactMouseEvent, HTMLAttributes } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { ToolTipPositions } from '@elastic/eui/src/components/tool_tip/tool_tip_popover';
-	export const POSITIONS: ToolTipPositions[];
+	export const POSITIONS: readonly ["top", "right", "bottom", "left"]; const DISPLAYS: readonly ["inlineBlock", "block"];
 	export type ToolTipDelay = 'regular' | 'long';
 	interface ToolTipStyles {
 	    top: number;
@@ -5051,10 +5053,7 @@ declare module '@elastic/eui/src/components/tool_tip/tool_tip' {
 	    right?: number | 'auto';
 	    opacity?: number;
 	    visibility?: 'hidden';
-	} const displayToClassNameMap: {
-	    inlineBlock: undefined;
-	    block: string;
-	};
+	}
 	export interface EuiToolTipProps extends CommonProps {
 	    /**
 	     * Passes onto the span wrapping the trigger.
@@ -5079,7 +5078,7 @@ declare module '@elastic/eui/src/components/tool_tip/tool_tip' {
 	    /**
 	     * Common display alternatives for the anchor wrapper
 	     */
-	    display?: keyof typeof displayToClassNameMap;
+	    display?: (typeof DISPLAYS)[number];
 	    /**
 	     * Delay before showing tooltip. Good for repeatable items.
 	     */
@@ -6271,9 +6270,8 @@ declare module '@elastic/eui/src/components/popover/popover' {
 	     */
 	    anchorPosition?: PopoverAnchorPosition;
 	    /**
-	     * Style and position alteration for arrow-less, left-aligned
-	     * attachment. Intended for use with inputs as anchors, e.g.
-	     * EuiInputPopover
+	     * Style and position alteration for arrow-less attachment.
+	     * Intended for use with inputs as anchors, e.g. EuiInputPopover
 	     */
 	    attachToAnchor?: boolean;
 	    /**
@@ -6453,12 +6451,22 @@ declare module '@elastic/eui/src/components/popover/input_popover' {
 	import { FunctionComponent, HTMLAttributes } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { EuiPopoverProps } from '@elastic/eui/src/components/popover/popover';
-	export interface _EuiInputPopoverProps extends Omit<EuiPopoverProps, 'button' | 'buttonRef'> {
+	export interface _EuiInputPopoverProps extends Omit<EuiPopoverProps, 'button' | 'buttonRef' | 'anchorPosition'> {
+	    /**
+	     * Alignment of the popover relative to the input
+	     */
+	    anchorPosition?: 'downLeft' | 'downRight' | 'downCenter';
 	    disableFocusTrap?: boolean;
 	    fullWidth?: boolean;
 	    input: EuiPopoverProps['button'];
 	    inputRef?: EuiPopoverProps['buttonRef'];
 	    onPanelResize?: (width?: number) => void;
+	    /**
+	     * By default, **EuiInputPopovers** inherit the same width as the passed input element.
+	     * However, if the input width is too small, you can pass a minimum panel width
+	     * (that should be based on the popover content).
+	     */
+	    panelMinWidth?: number;
 	}
 	export type EuiInputPopoverProps = CommonProps & HTMLAttributes<HTMLDivElement> & _EuiInputPopoverProps;
 	export const EuiInputPopover: FunctionComponent<EuiInputPopoverProps>;
@@ -6587,9 +6595,10 @@ declare module '@elastic/eui/src/components/form/range/range_input' {
 declare module '@elastic/eui/src/components/form/range/types' {
 	import type { ReactNode, CSSProperties, InputHTMLAttributes } from 'react';
 	import type { CommonProps } from '@elastic/eui/src/components/common';
+	import type { EuiInputPopoverProps } from '@elastic/eui/src/components/popover/input_popover';
 	import type { EuiFormControlLayoutProps } from '@elastic/eui/src/components/form/form_control_layout';
 	import type { EuiRangeLevelColor } from '@elastic/eui/src/components/form/range/range_levels_colors';
-	import { EuiRangeInputProps } from '@elastic/eui/src/components/form/range/range_input';
+	import type { EuiRangeInputProps } from '@elastic/eui/src/components/form/range/range_input';
 	/**
 	 * Internal type atoms split up both for easier categorization
 	 * and for easier reusing/picking
@@ -6672,14 +6681,21 @@ declare module '@elastic/eui/src/components/form/range/types' {
 	     * @default false
 	     */
 	    fullWidth?: boolean;
+	    /**
+	     * Only impacts inputs rendered by the `showInput` prop
+	     */
+	    isInvalid?: boolean;
 	    /**
 	     * Only impacts inputs rendered when the `showInput` prop is set to `"inputWithPopover"`
 	     */
 	    isLoading?: boolean;
 	    /**
-	     * Only impacts inputs rendered by the `showInput` prop
+	     * Only impacts input popovers rendered when the `showInput` prop is set to `"inputWithPopover"`
+	     *
+	     * Allows customizing the underlying [EuiInputPopover](/#/layout/popover#popover-attached-to-input-element),
+	     * except for props controlled by the range component
 	     */
-	    isInvalid?: boolean;
+	    inputPopoverProps?: Omit<EuiInputPopoverProps, 'input' | 'isOpen' | 'closePopover' | 'disableFocusTrap' | 'popoverScreenReaderText' | 'fullWidth'>;
 	}
 	export type _SharedRangeInputSide = {
 	    /**
@@ -7264,7 +7280,7 @@ declare module '@elastic/eui/src/components/form/super_select/super_select' {
 	import React, { Component, FocusEvent, ReactNode } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { EuiSuperSelectControlProps, EuiSuperSelectOption } from '@elastic/eui/src/components/form/super_select/super_select_control';
-	import { EuiPopoverProps } from '@elastic/eui/src/components/popover';
+	import { EuiInputPopoverProps } from '@elastic/eui/src/components/popover';
 	import { EuiContextMenuItemLayoutAlignment } from '@elastic/eui/src/components/context_menu'; enum ShiftDirection {
 	    BACK = "back",
 	    FORWARD = "forward"
@@ -7306,7 +7322,7 @@ declare module '@elastic/eui/src/components/form/super_select/super_select' {
 	     */
 	    isOpen?: boolean;
 	    /**
-	     * Optional props to pass to the underlying [EuiPopover](/#/layout/popover).
+	     * Optional props to pass to the underlying [EuiInputPopover](/#/layout/popover#popover-attached-to-input-element).
 	     * Allows fine-grained control of the popover dropdown menu, including
 	     * `repositionOnScroll` for EuiSuperSelects used within scrollable containers,
 	     * and customizing popover panel styling.
@@ -7314,7 +7330,7 @@ declare module '@elastic/eui/src/components/form/super_select/super_select' {
 	     * Does not accept a nested `popoverProps.isOpen` property - use the top level
 	     * `isOpen` API instead.
 	     */
-	    popoverProps?: Partial<CommonProps & Omit<EuiPopoverProps, 'isOpen'>>;
+	    popoverProps?: Partial<CommonProps & Omit<EuiInputPopoverProps, 'isOpen'>>;
 	};
 	export class EuiSuperSelect<T extends string> extends Component<EuiSuperSelectProps<T>> {
 	    static defaultProps: {
@@ -8698,6 +8714,7 @@ declare module '@elastic/eui/src/components/accordion/accordion.styles' {
 }
 declare module '@elastic/eui/src/components/accordion/accordion' {
 	import React, { Component, HTMLAttributes, ReactNode } from 'react';
+	import { FocusableElement } from 'tabbable';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { WithEuiThemeProps } from '@elastic/eui/src/services';
 	import { EuiButtonIconProps } from '@elastic/eui/src/components/button';
@@ -8771,10 +8788,10 @@ declare module '@elastic/eui/src/components/accordion/accordion' {
 	     * Disable the open/close interaction and visually subdues the trigger
 	     */
 	    isDisabled?: boolean;
-	};
-	export class EuiAccordionClass extends Component<WithEuiThemeProps & EuiAccordionProps, {
+	}; type EuiAccordionState = {
 	    isOpen: boolean;
-	}> {
+	};
+	export class EuiAccordionClass extends Component<WithEuiThemeProps & EuiAccordionProps, EuiAccordionState> {
 	    static defaultProps: {
 	        initialIsOpen: boolean;
 	        paddingSize: "none";
@@ -8787,13 +8804,17 @@ declare module '@elastic/eui/src/components/accordion/accordion' {
 	    };
 	    childContent: HTMLDivElement | null;
 	    childWrapper: HTMLDivElement | null;
+	    tabbableChildren: FocusableElement[] | null;
 	    state: {
 	        isOpen: boolean;
 	    };
+	    get isOpen(): boolean;
 	    setChildContentHeight: () => void;
 	    componentDidMount(): void;
-	    componentDidUpdate(): void;
+	    componentDidUpdate(prevProps: EuiAccordionProps, prevState: EuiAccordionState): void;
 	    onToggle: () => void;
+	    preventTabbing: () => void;
+	    enableTabbing: () => void;
 	    setChildContentRef: (node: HTMLDivElement | null) => void;
 	    generatedId: string;
 	    resizeRef: (e: HTMLElement | null) => void;
@@ -8801,6 +8822,7 @@ declare module '@elastic/eui/src/components/accordion/accordion' {
 	    render(): React.JSX.Element;
 	}
 	export const EuiAccordion: React.ForwardRefExoticComponent<Omit<EuiAccordionProps, "theme"> & React.RefAttributes<Omit<EuiAccordionProps, "theme">>>;
+	export {};
 
 }
 declare module '@elastic/eui/src/components/accordion' {
@@ -8835,16 +8857,19 @@ declare module '@elastic/eui/src/components/aspect_ratio' {
 
 }
 declare module '@elastic/eui/src/components/auto_sizer/auto_sizer' {
-	import AutoSizer, { AutoSizerProps } from 'react-virtualized-auto-sizer';
-	export interface EuiAutoSizerProps extends AutoSizerProps {
-	}
+	import type { ComponentProps } from 'react';
+	import type { Size, HorizontalSize, VerticalSize } from 'react-virtualized-auto-sizer';
+	export type EuiAutoSizerProps = ComponentProps<typeof AutoSizer>;
+	export type EuiAutoSize = Size;
+	export type EuiAutoSizeHorizontal = HorizontalSize;
+	export type EuiAutoSizeVertical = VerticalSize;
+	import AutoSizer from 'react-virtualized-auto-sizer';
 	export class EuiAutoSizer extends AutoSizer {
 	}
 
 }
 declare module '@elastic/eui/src/components/auto_sizer' {
-	export type { EuiAutoSizerProps } from '@elastic/eui/src/components/auto_sizer/auto_sizer';
-	export { EuiAutoSizer } from '@elastic/eui/src/components/auto_sizer/auto_sizer';
+	export * from '@elastic/eui/src/components/auto_sizer/auto_sizer';
 
 }
 declare module '@elastic/eui/src/components/avatar/avatar.styles' {
@@ -10487,6 +10512,16 @@ declare module '@elastic/eui/src/components/flyout/flyout_body' {
 	     * Use to display a banner at the top of the body. It is suggested to use `EuiCallOut` for it.
 	     */
 	    banner?: ReactNode;
+	    /**
+	     * [Scrollable regions (or their children) should be focusable](https://dequeuniversity.com/rules/axe/4.0/scrollable-region-focusable)
+	     * to allow keyboard users to scroll the region via arrow keys.
+	     *
+	     * By default, EuiFlyoutBody's scroll overflow wrapper sets a `tabIndex` of `0`.
+	     * If you know your flyout body content already contains focusable children
+	     * that satisfy keyboard accessibility requirements, you can use this prop
+	     * to override this default.
+	     */
+	    scrollableTabIndex?: number;
 	}>;
 	export const EuiFlyoutBody: EuiFlyoutBodyProps;
 
@@ -10692,6 +10727,16 @@ declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav
 	     * take up the full width of the page.
 	     */
 	    width?: number;
+	    /**
+	     * Overlay flyouts are considered dialogs, and dialogs must have a label.
+	     * By default, a label of `Site menu` will be applied.
+	     *
+	     * If your usage of this component is not actually for site-wide navigation,
+	     * please set your own `aria-label` or `aria-labelledby`.
+	     *
+	     * @default 'Site menu'
+	     */
+	    'aria-label'?: string;
 	};
 	export const EuiCollapsibleNavBeta: FunctionComponent<EuiCollapsibleNavBetaProps>;
 
@@ -10854,7 +10899,7 @@ declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav
 
 }
 declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item' {
-	import { FunctionComponent, ReactNode, HTMLAttributes } from 'react';
+	import { FunctionComponent, HTMLAttributes } from 'react';
 	import { CommonProps, ExclusiveUnion } from '@elastic/eui/src/components/common';
 	import { IconType, EuiIconProps } from '@elastic/eui/src/components/icon';
 	import { EuiLinkProps } from '@elastic/eui/src/components/link';
@@ -10891,11 +10936,11 @@ declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav
 	};
 	export type EuiCollapsibleNavItemProps = {
 	    /**
-	     * ReactNode to render as this component's title
+	     * Required text to render as the nav item title
 	     */
-	    title: ReactNode;
+	    title: string;
 	    /**
-	     * Allows customizing title's element.
+	     * Allows customizing the title element.
 	     * Consider using a heading element for better accessibility.
 	     * Defaults to an unsemantic `span` or `div`, depending on context.
 	     */
@@ -15261,7 +15306,7 @@ declare module '@elastic/eui/src/components/date_picker/date_picker_range' {
 	import { IconType } from '@elastic/eui/src/components/icon';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { EuiDatePickerProps } from '@elastic/eui/src/components/date_picker/date_picker';
-	export type EuiDatePickerRangeProps = CommonProps & Pick<EuiFormControlLayoutDelimitedProps, 'isLoading' | 'isInvalid' | 'readOnly' | 'fullWidth' | 'prepend' | 'append'> & {
+	export type EuiDatePickerRangeProps = CommonProps & Pick<EuiFormControlLayoutDelimitedProps, 'isLoading' | 'isInvalid' | 'readOnly' | 'fullWidth' | 'compressed' | 'prepend' | 'append'> & {
 	    /**
 	     * Including any children will replace all innards with the provided children
 	     */
@@ -15721,7 +15766,7 @@ declare module '@elastic/eui/src/components/empty_prompt/empty_prompt' {
 	import { _EuiPanelDivlike } from '@elastic/eui/src/components/panel/panel';
 	export const PADDING_SIZES: ("s" | "m" | "l" | "none")[];
 	export type PaddingSize = (typeof PADDING_SIZES)[number];
-	export type EuiEmptyPromptProps = CommonProps & Omit<_EuiPanelDivlike, 'borderRadius' | 'grow' | 'panelRef' | 'paddingSize' | 'title'> & {
+	export type EuiEmptyPromptProps = CommonProps & Omit<_EuiPanelDivlike, 'borderRadius' | 'grow' | 'panelRef' | 'paddingSize' | 'title' | 'element'> & {
 	    iconType?: IconType;
 	    /**
 	     * Color for `iconType` when passed as an `IconType`
@@ -19806,6 +19851,7 @@ declare module '@elastic/eui/src/components/selectable/selectable_list/selectabl
 	    ariaPosInSetMap: Record<number, number>;
 	    calculateAriaSetAttrs: (optionArray: Array<EuiSelectableOption<T>>) => void;
 	    ListRow: React.MemoExoticComponent<({ data, index, style }: ListChildComponentProps<T>) => React.JSX.Element>;
+	    renderVirtualizedList: (heightIsFull: boolean, optionArray: EuiSelectableOption[]) => React.JSX.Element | null;
 	    render(): React.JSX.Element;
 	    onAddOrRemoveOption: (option: EuiSelectableOption<T>, event: EuiSelectableOnChangeEvent) => void;
 	    private onAddOption;
@@ -20641,7 +20687,7 @@ declare module '@elastic/eui/src/components/steps/step.styles' {
 	export const euiStepContentStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiStep__content: import("@emotion/utils").SerializedStyles;
 	    m: import("@emotion/utils").SerializedStyles;
-	    s: import("@emotion/utils").SerializedStyles;
+	    readonly s: import("@emotion/utils").SerializedStyles;
 	    xs: import("@emotion/utils").SerializedStyles;
 	};
 	export const euiStepTitleStyles: (euiThemeContext: UseEuiTheme) => {
@@ -22167,29 +22213,125 @@ declare module '@elastic/eui/src/components/resizable_container/context' {
 	export const useEuiResizableContainerContext: () => ContainerContextProps;
 	export {};
 
+}
+declare module '@elastic/eui/src/components/resizable_container/resizable_button.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiResizableButtonStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiResizableButton: import("@emotion/utils").SerializedStyles;
+	    horizontal: import("@emotion/utils").SerializedStyles;
+	    vertical: import("@emotion/utils").SerializedStyles;
+	    alignIndicator: {
+	        center: import("@emotion/utils").SerializedStyles;
+	        start: import("@emotion/utils").SerializedStyles;
+	        end: import("@emotion/utils").SerializedStyles;
+	    };
+	};
+
 }
 declare module '@elastic/eui/src/components/resizable_container/resizable_button' {
 	import React, { FunctionComponent, ButtonHTMLAttributes } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { EuiResizableButtonController, EuiResizableButtonMouseEvent, EuiResizableButtonKeyEvent } from '@elastic/eui/src/components/resizable_container/types';
-	interface EuiResizableButtonControls {
-	    onKeyDown: (eve: EuiResizableButtonKeyEvent) => void;
-	    onKeyUp: (eve: EuiResizableButtonKeyEvent) => void;
-	    onMouseDown: (eve: EuiResizableButtonMouseEvent) => void;
-	    onTouchStart: (eve: EuiResizableButtonMouseEvent) => void;
-	    onFocus: (id: string) => void;
-	    onBlur: () => void;
+	export type EuiResizableButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & CommonProps & {
+	    /**
+	     * Defaults to displaying a resizer for vertical (y-axis) resizing.
+	     * Set to `true` to display a resizer for horizontal (x-axis) resizing.
+	     */
+	    isHorizontal?: boolean;
+	    /**
+	     * Specify the alignment of the initial resize indicator. Defaults to `center`,
+	     * but consider using `start` for extremely tall content that scrolls off-screen
+	     */
+	    alignIndicator?: 'center' | 'start' | 'end';
+	    /**
+	     * When disabled, the resizer button will be completely hidden
+	     */
+	    disabled?: boolean;
+	};
+	/**
+	 * A generic button for indicating/facilitating resizable content,
+	 * usable outside of the EuiResizableContainer context
+	 */
+	export const EuiResizableButton: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & CommonProps & {
+	    /**
+	     * Defaults to displaying a resizer for vertical (y-axis) resizing.
+	     * Set to `true` to display a resizer for horizontal (x-axis) resizing.
+	     */
+	    isHorizontal?: boolean | undefined;
+	    /**
+	     * Specify the alignment of the initial resize indicator. Defaults to `center`,
+	     * but consider using `start` for extremely tall content that scrolls off-screen
+	     */
+	    alignIndicator?: "center" | "start" | "end" | undefined;
+	    /**
+	     * When disabled, the resizer button will be completely hidden
+	     */
+	    disabled?: boolean | undefined;
+	} & React.RefAttributes<HTMLButtonElement>>;
+	/**
+	 * Resizer button specific to controlled EuiResizableContainer usage
+	 */
+	export type EuiResizableButtonControls = Omit<EuiResizableButtonProps, 'onFocus'> & {
 	    registration: {
 	        register: (resizer: EuiResizableButtonController) => void;
 	        deregister: (resizerId: EuiResizableButtonController['id']) => void;
 	    };
-	    isHorizontal: boolean;
-	}
-	export interface EuiResizableButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof EuiResizableButtonControls>, CommonProps, Partial<EuiResizableButtonControls> {
-	}
-	export const EuiResizableButton: FunctionComponent<EuiResizableButtonProps>;
-	export function euiResizableButtonWithControls(controls: EuiResizableButtonControls): (props: CommonProps) => React.JSX.Element;
-	export {};
+	    onKeyDown: (e: EuiResizableButtonKeyEvent) => void;
+	    onKeyUp: (e: EuiResizableButtonKeyEvent) => void;
+	    onMouseDown: (e: EuiResizableButtonMouseEvent) => void;
+	    onTouchStart: (e: EuiResizableButtonMouseEvent) => void;
+	    onBlur: () => void;
+	    onFocus: (id: string) => void;
+	};
+	export const EuiResizableButtonControlled: FunctionComponent<Partial<EuiResizableButtonControls>>;
+	export const euiResizableButtonWithControls: (controls: EuiResizableButtonControls) => (props: CommonProps) => React.JSX.Element;
+
+}
+declare module '@elastic/eui/src/components/resizable_container/resizable_collapse_button.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiResizableCollapseButtonStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiResizableCollapseButton: import("@emotion/utils").SerializedStyles;
+	    collapsible: {
+	        collapsible: import("@emotion/utils").SerializedStyles;
+	        horizontal: {
+	            after: import("@emotion/utils").SerializedStyles;
+	            before: import("@emotion/utils").SerializedStyles;
+	            middle: import("@emotion/utils").SerializedStyles;
+	            top: import("@emotion/utils").SerializedStyles;
+	            bottom: import("@emotion/utils").SerializedStyles;
+	            readonly left: import("@emotion/utils").SerializedStyles;
+	            readonly right: import("@emotion/utils").SerializedStyles;
+	        };
+	        vertical: {
+	            after: import("@emotion/utils").SerializedStyles;
+	            before: import("@emotion/utils").SerializedStyles;
+	            middle: import("@emotion/utils").SerializedStyles;
+	            left: import("@emotion/utils").SerializedStyles;
+	            right: import("@emotion/utils").SerializedStyles;
+	            readonly top: import("@emotion/utils").SerializedStyles;
+	            readonly bottom: import("@emotion/utils").SerializedStyles;
+	        };
+	    };
+	    collapsed: {
+	        collapsed: import("@emotion/utils").SerializedStyles;
+	        horizontal: import("@emotion/utils").SerializedStyles;
+	        vertical: import("@emotion/utils").SerializedStyles;
+	        horizontalPositions: {
+	            top: import("@emotion/utils").SerializedStyles;
+	            bottom: import("@emotion/utils").SerializedStyles;
+	            middle: import("@emotion/utils").SerializedStyles;
+	            left: import("@emotion/utils").SerializedStyles;
+	            right: import("@emotion/utils").SerializedStyles;
+	        };
+	        verticalPositions: {
+	            left: import("@emotion/utils").SerializedStyles;
+	            right: import("@emotion/utils").SerializedStyles;
+	            middle: import("@emotion/utils").SerializedStyles;
+	            top: import("@emotion/utils").SerializedStyles;
+	            bottom: import("@emotion/utils").SerializedStyles;
+	        };
+	    };
+	};
 
 }
 declare module '@elastic/eui/src/components/resizable_container/resizable_collapse_button' {
@@ -22212,9 +22354,6 @@ declare module '@elastic/eui/src/components/resizable_container/resizable_collap
 	     * Same direction derived from EuiResizableContainer
 	     */
 	    direction?: EuiResizableContainerProps['direction'];
-	    /**
-	     *
-	     */
 	    isVisible?: boolean;
 	    isCollapsed?: boolean;
 	};
@@ -22405,6 +22544,8 @@ declare module '@elastic/eui/src/components/resizable_container/resizable_contai
 declare module '@elastic/eui/src/components/resizable_container' {
 	export type { EuiResizableContainerProps } from '@elastic/eui/src/components/resizable_container/resizable_container';
 	export { EuiResizableContainer } from '@elastic/eui/src/components/resizable_container/resizable_container';
+	export type { EuiResizableButtonProps } from '@elastic/eui/src/components/resizable_container/resizable_button';
+	export { EuiResizableButton } from '@elastic/eui/src/components/resizable_container/resizable_button';
 
 }
 declare module '@elastic/eui/src/components' {
@@ -27823,6 +27964,7 @@ declare module '@elastic/eui' {
 "euiCodeBlockCopy.copy": any;
 "euiCodeBlockFullScreen.fullscreenCollapse": any;
 "euiCodeBlockFullScreen.fullscreenExpand": any;
+"euiCollapsibleNavBeta.ariaLabel": any;
 "euiCollapsibleNavButton.ariaLabelOpen": any;
 "euiCollapsibleNavButton.ariaLabelClose": any;
 "euiColorPickerSwatch.ariaLabel": any;