@elastic/eui 93.5.2 → 93.6.0

package/es/components/loading/loading_logo.js

@@ -13,10 +13,10 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
+import { useEuiMemoizedStyles } from '../../services';
 import { EuiIcon } from '../icon';
-import { useEuiTheme } from '../../services';
 import { useLoadingAriaLabel } from './_loading_strings';
-import { euiLoadingLogoStyles, euiLoadingLogoIconStyles } from './loading_logo.styles';
+import { euiLoadingLogoStyles } from './loading_logo.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var SIZES = ['m', 'l', 'xl'];
 export var EuiLoadingLogo = function EuiLoadingLogo(_ref) {
@@ -27,20 +27,17 @@ export var EuiLoadingLogo = function EuiLoadingLogo(_ref) {
     ariaLabel = _ref['aria-label'],
     className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var euiTheme = useEuiTheme();
-  var defaultLabel = useLoadingAriaLabel();
-  var styles = euiLoadingLogoStyles(euiTheme);
-  var cssStyles = [styles.euiLoadingLogo, styles[size]];
-  var iconStyles = euiLoadingLogoIconStyles(euiTheme);
-  var iconCssStyles = [iconStyles.euiLoadingLogo__icon];
   var classes = classNames('euiLoadingLogo', className);
+  var styles = useEuiMemoizedStyles(euiLoadingLogoStyles);
+  var cssStyles = [styles.euiLoadingLogo, styles[size]];
+  var defaultLabel = useLoadingAriaLabel();
   return ___EmotionJSX("span", _extends({
     className: classes,
     css: cssStyles,
     role: "progressbar",
     "aria-label": ariaLabel || defaultLabel
   }, rest), ___EmotionJSX("span", {
-    css: iconCssStyles
+    css: styles.euiLoadingLogo__icon
   }, ___EmotionJSX(EuiIcon, {
     type: logo,
     size: size

package/es/components/loading/loading_logo.styles.js

@@ -22,6 +22,7 @@ export var euiLoadingLogoStyles = function euiLoadingLogoStyles(_ref) {
   var euiTheme = _ref.euiTheme;
   return {
     euiLoadingLogo: /*#__PURE__*/css("position:relative;display:inline-block;", euiCanAnimate, "{&::before,&::after{position:absolute;content:'';inline-size:90%;inset-inline-start:5%;border-radius:50%;opacity:0.2;z-index:1;}&::before{box-shadow:0 0 ", euiTheme.size.s, " ", euiTheme.colors.fullShade, ";animation:1s ", loadingPulsateAndFade, " ", euiTheme.animation.resistance, " infinite;}&::after{background-color:", euiTheme.colors.fullShade, ";animation:1s ", loadingPulsate, " ", euiTheme.animation.resistance, " infinite;}};label:euiLoadingLogo;"),
+    euiLoadingLogo__icon: /*#__PURE__*/css("display:inline-block;", euiCanAnimate, "{animation:1s ", loadingBounce, " ", euiTheme.animation.resistance, " infinite;};label:euiLoadingLogo__icon;"),
     /**
      * 1. Requires pixel math for animation
      * 2. Add a half the amount of animation distance padding to the top to give it more room
@@ -30,10 +31,4 @@ export var euiLoadingLogoStyles = function euiLoadingLogoStyles(_ref) {
     l: /*#__PURE__*/css(euiCanAnimate, "{padding-block-start:", euiTheme.size[loadingPadding.l], ";}&::before,&::after{block-size:", euiTheme.base * 0.375, "px;inset-block-end:-", euiTheme.size.s, ";};label:l;"),
     xl: /*#__PURE__*/css(euiCanAnimate, "{padding-block-start:", euiTheme.size[loadingPadding.xl], ";}&::before,&::after{block-size:", euiTheme.base * 0.5, "px;inset-block-end:-", euiTheme.size.m, ";};label:xl;")
   };
-};
-export var euiLoadingLogoIconStyles = function euiLoadingLogoIconStyles(_ref2) {
-  var euiTheme = _ref2.euiTheme;
-  return {
-    euiLoadingLogo__icon: /*#__PURE__*/css("display:inline-block;", euiCanAnimate, "{animation:1s ", loadingBounce, " ", euiTheme.animation.resistance, " infinite;};label:euiLoadingLogo__icon;")
-  };
 };

package/es/components/loading/loading_spinner.js

@@ -19,7 +19,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { useEuiTheme } from '../..//services';
+import { useEuiTheme, useEuiMemoizedStyles } from '../../services';
 import { useLoadingAriaLabel } from './_loading_strings';
 import { euiLoadingSpinnerStyles, euiSpinnerBorderColorsCSS } from './loading_spinner.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -32,14 +32,14 @@ export var EuiLoadingSpinner = function EuiLoadingSpinner(_ref) {
     color = _ref.color,
     style = _ref.style,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var euiTheme = useEuiTheme();
-  var styles = euiLoadingSpinnerStyles(euiTheme);
-  var cssStyles = [styles.euiLoadingSpinner, styles[size]];
   var classes = classNames('euiLoadingSpinner', className);
-  var defaultLabel = useLoadingAriaLabel();
+  var styles = useEuiMemoizedStyles(euiLoadingSpinnerStyles);
+  var cssStyles = [styles.euiLoadingSpinner, styles[size]];
+  var euiTheme = useEuiTheme();
   var customColorStyle = color ? _objectSpread(_objectSpread({}, style), {}, {
     borderColor: euiSpinnerBorderColorsCSS(euiTheme, color)
   }) : style;
+  var defaultLabel = useLoadingAriaLabel();
   return ___EmotionJSX("span", _extends({
     className: classes,
     css: cssStyles,

package/es/components/page/page_header/page_header_content.js

@@ -292,7 +292,7 @@ EuiPageHeaderContent.propTypes = {
          */
     truncate: PropTypes.bool,
     /**
-         * Accepts any EuiLink `color` when rendered as one (has `href`, `onClick`, or `popoverContent`)
+         * @deprecated - if a custom color is wanted, use the `css` prop to pass custom css
          */
     color: PropTypes.any,
     /**

package/es/components/resizable_container/resizable_collapse_button.js

@@ -37,11 +37,10 @@ export var EuiResizableCollapseButton = function EuiResizableCollapseButton(_ref
     rest = _objectWithoutProperties(_ref, _excluded);
   var isHorizontal = direction === 'horizontal';
   var showOnFocus = !isCollapsed && !isVisible;
-  var screenReaderOnlyStyles = euiScreenReaderOnlyStyles(showOnFocus).euiScreenReaderOnly;
   var styles = useEuiMemoizedStyles(euiResizableCollapseButtonStyles);
   var collapsedStyles = [styles.collapsed.collapsed, styles.collapsed[direction], styles.collapsed["".concat(direction, "Positions")][internalPosition]];
   var collapsibleStyles = [styles.collapsible.collapsible, styles.collapsible[direction][externalPosition], styles.collapsible[direction][internalPosition]];
-  var cssStyles = [styles.euiResizableCollapseButton, showOnFocus && screenReaderOnlyStyles].concat(_toConsumableArray(isCollapsed ? collapsedStyles : collapsibleStyles));
+  var cssStyles = [styles.euiResizableCollapseButton, showOnFocus && euiScreenReaderOnlyStyles['euiScreenReaderOnly-showOnFocus']].concat(_toConsumableArray(isCollapsed ? collapsedStyles : collapsibleStyles));
   var COLLAPSED_ICON = '';
   var NOT_COLLAPSED_ICON = '';
   switch (externalPosition) {

package/es/components/tabs/tab.js

@@ -13,7 +13,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React, { useContext } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { getSecureRelForTarget, useEuiTheme } from '../../services';
+import { getSecureRelForTarget, useEuiMemoizedStyles } from '../../services';
 import { validateHref } from '../../services/security/href_validator';
 import { euiTabStyles, euiTabContentStyles } from './tab.styles';
 import { EuiTabsContext } from './tabs_context';
@@ -32,7 +32,6 @@ export var EuiTab = function EuiTab(_ref) {
   var _useContext = useContext(EuiTabsContext),
     size = _useContext.size,
     expand = _useContext.expand;
-  var euiTheme = useEuiTheme();
   var isHrefValid = !href || validateHref(href);
   var disabled = _disabled || !isHrefValid;
 
@@ -40,9 +39,9 @@ export var EuiTab = function EuiTab(_ref) {
   var classes = classNames('euiTab', className, {
     'euiTab-isSelected': isSelected
   });
-  var tabStyles = euiTabStyles(euiTheme);
+  var tabStyles = useEuiMemoizedStyles(euiTabStyles);
   var cssTabStyles = [tabStyles.euiTab, expand && tabStyles.expanded, disabled && tabStyles.disabled.disabled, isSelected && (disabled ? tabStyles.disabled.selected : tabStyles.selected)];
-  var tabContentStyles = euiTabContentStyles(euiTheme);
+  var tabContentStyles = useEuiMemoizedStyles(euiTabContentStyles);
   var cssTabContentStyles = [tabContentStyles.euiTab__content, size && tabContentStyles[size]];
   var prependNode = prepend && ___EmotionJSX("span", {
     className: "euiTab__prepend"

package/es/components/tabs/tabs.js

@@ -13,7 +13,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React, { forwardRef } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
 import { euiTabsStyles } from './tabs.styles';
 import { EuiTabsContext } from './tabs_context';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -28,9 +28,8 @@ export var EuiTabs = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'm' : _ref$size,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var euiTheme = useEuiTheme();
   var classes = classNames('euiTabs', className);
-  var styles = euiTabsStyles(euiTheme);
+  var styles = useEuiMemoizedStyles(euiTabsStyles);
   var cssStyles = [styles.euiTabs, styles[size], bottomBorder && styles.bottomBorder];
   return ___EmotionJSX("div", _extends({
     ref: ref,

package/eui.d.ts

@@ -2857,7 +2857,7 @@ declare module '@elastic/eui/src/components/loading/_loading_strings' {
 
 }
 declare module '@elastic/eui/src/components/loading/loading_elastic.styles' {
-	export const euiLoadingElasticStyles: () => {
+	export const euiLoadingElasticStyles: {
 	    euiLoadingElastic: import("@emotion/utils").SerializedStyles;
 	};
 
@@ -2881,13 +2881,15 @@ declare module '@elastic/eui/src/components/loading/loading_chart.styles' {
 	    l: import("@emotion/utils").SerializedStyles;
 	    xl: import("@emotion/utils").SerializedStyles;
 	};
-	export const euiLoadingChartBarStyles: ({ euiTheme }: UseEuiTheme) => {
+	export const BARS_COUNT = 4;
+	export const euiLoadingChartBarStyles: ({ euiTheme, colorMode, }: UseEuiTheme) => {
 	    euiLoadingChart__bar: import("@emotion/utils").SerializedStyles;
+	    nonmono: import("@emotion/utils").SerializedStyles;
+	    mono: import("@emotion/utils").SerializedStyles;
 	    m: import("@emotion/utils").SerializedStyles;
 	    l: import("@emotion/utils").SerializedStyles;
 	    xl: import("@emotion/utils").SerializedStyles;
 	};
-	export const _barIndex: (index: number, mono: boolean, { euiTheme, colorMode }: UseEuiTheme) => import("@emotion/utils").SerializedStyles;
 
 }
 declare module '@elastic/eui/src/components/loading/loading_chart' {
@@ -2941,6 +2943,7 @@ declare module '@elastic/eui/src/components/loading/loading_logo.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
 	export const euiLoadingLogoStyles: ({ euiTheme }: UseEuiTheme) => {
 	    euiLoadingLogo: import("@emotion/utils").SerializedStyles;
+	    euiLoadingLogo__icon: import("@emotion/utils").SerializedStyles;
 	    /**
 	     * 1. Requires pixel math for animation
 	     * 2. Add a half the amount of animation distance padding to the top to give it more room
@@ -2949,9 +2952,6 @@ declare module '@elastic/eui/src/components/loading/loading_logo.styles' {
 	    l: import("@emotion/utils").SerializedStyles;
 	    xl: import("@emotion/utils").SerializedStyles;
 	};
-	export const euiLoadingLogoIconStyles: ({ euiTheme }: UseEuiTheme) => {
-	    euiLoadingLogo__icon: import("@emotion/utils").SerializedStyles;
-	};
 
 }
 declare module '@elastic/eui/src/components/loading/loading_logo' {
@@ -4123,7 +4123,7 @@ declare module '@elastic/eui/src/components/context_menu/context_menu_panel.styl
 declare module '@elastic/eui/src/components/context_menu/context_menu_panel' {
 	import React, { Component, HTMLAttributes, PropsWithChildren, ReactElement, ReactNode } from 'react';
 	import { FocusableElement } from 'tabbable';
-	import { WithEuiThemeProps } from '@elastic/eui/src/services';
+	import { WithEuiStylesMemoizerProps } from '@elastic/eui/src/services';
 	import { CommonProps, NoArgCallback } from '@elastic/eui/src/components/common';
 	export type EuiContextMenuPanelHeightChangeHandler = (height: number) => void;
 	export type EuiContextMenuPanelTransitionType = 'in' | 'out';
@@ -4158,13 +4158,13 @@ declare module '@elastic/eui/src/components/context_menu/context_menu_panel' {
 	    waitingForInitialPopover: boolean;
 	    tookInitialFocus: boolean;
 	}
-	export class EuiContextMenuPanelClass extends Component<WithEuiThemeProps & Props, State> {
+	export class EuiContextMenuPanelClass extends Component<WithEuiStylesMemoizerProps & Props, State> {
 	    static defaultProps: Partial<Props>;
 	    private _isMounted;
 	    private backButton?;
 	    private panel?;
 	    private initialPopoverParent?;
-	    constructor(props: WithEuiThemeProps & Props);
+	    constructor(props: WithEuiStylesMemoizerProps & Props);
 	    findMenuItems: () => void;
 	    focusMenuItem: (direction: 'up' | 'down') => void;
 	    onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
@@ -4180,13 +4180,13 @@ declare module '@elastic/eui/src/components/context_menu/context_menu_panel' {
 	    panelRef: (node: HTMLElement | null) => void;
 	    render(): React.JSX.Element;
 	}
-	export const EuiContextMenuPanel: React.ForwardRefExoticComponent<Omit<EuiContextMenuPanelProps, "theme"> & React.RefAttributes<Omit<EuiContextMenuPanelProps, "theme">>>;
+	export const EuiContextMenuPanel: React.ForwardRefExoticComponent<Omit<EuiContextMenuPanelProps, "stylesMemoizer"> & React.RefAttributes<Omit<EuiContextMenuPanelProps, "stylesMemoizer">>>;
 	export {};
 
 }
 declare module '@elastic/eui/src/components/context_menu/context_menu' {
 	import React, { Component, HTMLAttributes, CSSProperties, ReactElement, ReactNode } from 'react';
-	import { WithEuiThemeProps } from '@elastic/eui/src/services';
+	import { WithEuiStylesMemoizerProps } from '@elastic/eui/src/services';
 	import { CommonProps, ExclusiveUnion } from '@elastic/eui/src/components/common';
 	import { EuiHorizontalRuleProps } from '@elastic/eui/src/components/horizontal_rule';
 	import { EuiContextMenuPanelTransitionDirection, EuiContextMenuPanelTransitionType } from '@elastic/eui/src/components/context_menu/context_menu_panel';
@@ -4265,10 +4265,10 @@ declare module '@elastic/eui/src/components/context_menu/context_menu' {
 	    focusedItemIndex?: number;
 	    isUsingKeyboardToNavigate: boolean;
 	}
-	export class EuiContextMenuClass extends Component<WithEuiThemeProps & EuiContextMenuProps, State> {
+	export class EuiContextMenuClass extends Component<WithEuiStylesMemoizerProps & EuiContextMenuProps, State> {
 	    static defaultProps: Partial<EuiContextMenuProps>;
 	    static getDerivedStateFromProps(nextProps: EuiContextMenuProps, prevState: State): Partial<State> | null;
-	    constructor(props: WithEuiThemeProps & EuiContextMenuProps);
+	    constructor(props: WithEuiStylesMemoizerProps & EuiContextMenuProps);
 	    componentDidUpdate(prevProps: EuiContextMenuProps): void;
 	    hasPreviousPanel: (panelId: EuiContextMenuPanelId) => boolean;
 	    showPanel(panelId: EuiContextMenuPanelId, direction?: EuiContextMenuPanelTransitionDirection): void;
@@ -4284,7 +4284,7 @@ declare module '@elastic/eui/src/components/context_menu/context_menu' {
 	    renderPanel(panelId: EuiContextMenuPanelId, transitionType: EuiContextMenuPanelTransitionType): React.JSX.Element | undefined;
 	    render(): React.JSX.Element;
 	}
-	export const EuiContextMenu: React.ForwardRefExoticComponent<Omit<EuiContextMenuProps, "theme"> & React.RefAttributes<Omit<EuiContextMenuProps, "theme">>>;
+	export const EuiContextMenu: React.ForwardRefExoticComponent<Omit<EuiContextMenuProps, "stylesMemoizer"> & React.RefAttributes<Omit<EuiContextMenuProps, "stylesMemoizer">>>;
 	export {};
 
 }
@@ -5929,32 +5929,31 @@ declare module '@elastic/eui/src/components/tool_tip' {
 
 }
 declare module '@elastic/eui/src/components/button/button_group/button_group_button.styles' {
+	import { type SerializedStyles } from '@emotion/react';
 	import { UseEuiTheme } from '@elastic/eui/src/services';
-	import { _EuiButtonColor } from '@elastic/eui/src/themes/amsterdam/global_styling/mixins/button';
 	export const euiButtonGroupButtonStyles: (euiThemeContext: UseEuiTheme) => {
-	    euiButtonGroupButton: import("@emotion/utils").SerializedStyles;
-	    iconOnly: import("@emotion/utils").SerializedStyles;
+	    euiButtonGroupButton: SerializedStyles;
+	    iconOnly: SerializedStyles;
 	    uncompressed: {
-	        uncompressed: import("@emotion/utils").SerializedStyles;
+	        uncompressed: SerializedStyles;
 	        readonly borders: string;
-	        readonly s: import("@emotion/utils").SerializedStyles;
-	        readonly m: import("@emotion/utils").SerializedStyles;
-	        hasToolTip: import("@emotion/utils").SerializedStyles;
+	        readonly s: SerializedStyles;
+	        readonly m: SerializedStyles;
+	        hasToolTip: SerializedStyles;
 	    };
-	    compressed: import("@emotion/utils").SerializedStyles;
-	    disabledAndSelected: import("@emotion/utils").SerializedStyles;
-	    tooltipWrapper: import("@emotion/utils").SerializedStyles;
+	    compressed: SerializedStyles;
+	    disabledAndSelected: SerializedStyles;
+	    tooltipWrapper: SerializedStyles;
 	    content: {
-	        euiButtonGroupButton__content: import("@emotion/utils").SerializedStyles;
-	        compressed: import("@emotion/utils").SerializedStyles;
+	        euiButtonGroupButton__content: SerializedStyles;
+	        compressed: SerializedStyles;
 	    };
 	    text: {
-	        euiButtonGroupButton__text: import("@emotion/utils").SerializedStyles;
-	        euiButtonGroupButton__iconOnly: import("@emotion/utils").SerializedStyles;
+	        euiButtonGroupButton__text: SerializedStyles;
+	        euiButtonGroupButton__iconOnly: SerializedStyles;
 	    };
 	};
-	export const _compressedButtonFocusColor: (euiThemeContext: UseEuiTheme, color: _EuiButtonColor | 'disabled') => import("@emotion/utils").SerializedStyles;
-	export const _uncompressedButtonFocus: (euiThemeContext: UseEuiTheme) => import("@emotion/utils").SerializedStyles;
+	export const _compressedButtonFocusColors: (euiThemeContext: UseEuiTheme) => Record<"text" | "disabled" | "accent" | "primary" | "success" | "warning" | "danger", SerializedStyles>;
 
 }
 declare module '@elastic/eui/src/components/button/button_group/button_group_button' {
@@ -6583,14 +6582,14 @@ declare module '@elastic/eui/src/components/call_out/call_out.styles' {
 	        s: import("@emotion/utils").SerializedStyles;
 	        m: import("@emotion/utils").SerializedStyles;
 	    };
-	    euiCallOut__icon: import("@emotion/utils").SerializedStyles;
 	};
-	export const euiCallOutHeadingStyles: ({ euiTheme }: UseEuiTheme) => {
+	export const euiCallOutHeaderStyles: ({ euiTheme }: UseEuiTheme) => {
 	    euiCallOutHeader: import("@emotion/utils").SerializedStyles;
 	    primary: import("@emotion/utils").SerializedStyles;
 	    success: import("@emotion/utils").SerializedStyles;
 	    warning: import("@emotion/utils").SerializedStyles;
 	    danger: import("@emotion/utils").SerializedStyles;
+	    euiCallOut__icon: import("@emotion/utils").SerializedStyles;
 	};
 
 }
@@ -7544,7 +7543,7 @@ declare module '@elastic/eui/src/components/form/select' {
 
 }
 declare module '@elastic/eui/src/components/form/super_select/super_select_control' {
-	import { FunctionComponent, ButtonHTMLAttributes, ReactNode } from 'react';
+	import { Ref, FunctionComponent, ButtonHTMLAttributes, ReactNode } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { EuiFormControlLayoutProps } from '@elastic/eui/src/components/form/form_control_layout';
 	export interface EuiSuperSelectOption<T> {
@@ -7555,6 +7554,7 @@ declare module '@elastic/eui/src/components/form/super_select/super_select_contr
 	    'data-test-subj'?: string;
 	}
 	export interface EuiSuperSelectControlProps<T> extends CommonProps, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'placeholder'> {
+	    buttonRef?: Ref<HTMLButtonElement>;
 	    /**
 	     * @default false
 	     */
@@ -7658,6 +7658,7 @@ declare module '@elastic/eui/src/components/form/super_select/super_select' {
 	    };
 	    private itemNodes;
 	    private _isMounted;
+	    private controlButtonRef;
 	    describedById: string;
 	    state: {
 	        isPopoverOpen: boolean;
@@ -7670,7 +7671,7 @@ declare module '@elastic/eui/src/components/form/super_select/super_select' {
 	    itemClicked: (value: T) => void;
 	    onSelectKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
 	    onItemKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
-	    focusItemAt(index: number): void;
+	    focusItemAt(index: number, direction?: ShiftDirection): void;
 	    shiftFocus(direction: ShiftDirection): void;
 	    render(): React.JSX.Element;
 	}
@@ -8765,8 +8766,9 @@ declare module '@elastic/eui/src/services' {
 }
 declare module '@elastic/eui/src/components/accessibility/screen_reader_only/screen_reader_only.styles' {
 	export const euiScreenReaderOnly: () => string;
-	export const euiScreenReaderOnlyStyles: (showOnFocus?: boolean | undefined) => {
+	export const euiScreenReaderOnlyStyles: {
 	    euiScreenReaderOnly: import("@emotion/utils").SerializedStyles;
+	    'euiScreenReaderOnly-showOnFocus': import("@emotion/utils").SerializedStyles;
 	};
 
 }
@@ -9650,10 +9652,8 @@ declare module '@elastic/eui/src/components/bottom_bar/bottom_bar.styles' {
 declare module '@elastic/eui/src/components/bottom_bar/bottom_bar' {
 	import React, { CSSProperties, HTMLAttributes } from 'react';
 	import { CommonProps, ExclusiveUnion } from '@elastic/eui/src/components/common';
-	import { EuiPortalProps } from '@elastic/eui/src/components/portal'; type BottomBarPaddingSize = 'none' | 's' | 'm' | 'l';
-	export const paddingSizeToClassNameMap: {
-	    [value in BottomBarPaddingSize]: string | null;
-	};
+	import { EuiPortalProps } from '@elastic/eui/src/components/portal';
+	export const PADDING_SIZES: readonly ["none", "s", "m", "l"]; type BottomBarPaddingSize = (typeof PADDING_SIZES)[number];
 	export const POSITIONS: readonly ["static", "fixed", "sticky"];
 	export type _BottomBarPosition = (typeof POSITIONS)[number]; type _BottomBarExclusivePositions = ExclusiveUnion<{
 	    position?: 'fixed';
@@ -9822,8 +9822,9 @@ declare module '@elastic/eui/src/components/breadcrumbs/types' {
 	     */
 	    type?: 'page' | 'application';
 	    /**
-	     * Whether the last breadcrumb should visually (and accessibly, to screen readers)
-	     * be highlighted as the current page. Defaults to true.
+	     * Whether the last breadcrumb should be semantically highlighted as the
+	     * current page. (improves accessibility for screen readers users)
+	     * Defaults to true.
 	     */
 	    lastBreadcrumbIsCurrentPage?: boolean;
 	};
@@ -9840,7 +9841,7 @@ declare module '@elastic/eui/src/components/breadcrumbs/types' {
 	     */
 	    truncate?: boolean;
 	    /**
-	     * Accepts any EuiLink `color` when rendered as one (has `href`, `onClick`, or `popoverContent`)
+	     * @deprecated - if a custom color is wanted, use the `css` prop to pass custom css
 	     */
 	    color?: EuiLinkColor;
 	    /**
@@ -9884,6 +9885,7 @@ declare module '@elastic/eui/src/components/breadcrumbs/_breadcrumb_content.styl
 	    euiBreadcrumb__content: import("@emotion/utils").SerializedStyles;
 	    isTruncated: import("@emotion/utils").SerializedStyles;
 	    isTruncatedLast: import("@emotion/utils").SerializedStyles;
+	    isInteractive: import("@emotion/utils").SerializedStyles;
 	    page: import("@emotion/utils").SerializedStyles;
 	    application: import("@emotion/utils").SerializedStyles;
 	    applicationStyles: {
@@ -10189,7 +10191,7 @@ declare module '@elastic/eui/src/components/card' {
 }
 declare module '@elastic/eui/src/components/code/code_block_annotations.style' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiCodeBlockAnnotationsStyles: (euiTheme: UseEuiTheme['euiTheme']) => {
+	export const euiCodeBlockAnnotationsStyles: ({ euiTheme }: UseEuiTheme) => {
 	    euiCodeBlockAnnotation: import("@emotion/utils").SerializedStyles;
 	    euiCodeBlockAnnotation__buttonIcon: import("@emotion/utils").SerializedStyles;
 	};
@@ -10706,17 +10708,9 @@ declare module '@elastic/eui/src/components/collapsible_nav/collapsible_nav_grou
 }
 declare module '@elastic/eui/src/components/flyout/flyout.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const FLYOUT_BREAKPOINT: "m";
 	export const euiFlyoutSlideInRight: import("@emotion/serialize").Keyframes;
 	export const euiFlyoutSlideInLeft: import("@emotion/serialize").Keyframes;
-	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;
@@ -10740,6 +10734,26 @@ declare module '@elastic/eui/src/components/flyout/flyout.styles' {
 	    };
 	};
 
+}
+declare module '@elastic/eui/src/components/flyout/_flyout_close_button.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;
+	    };
+	};
+
+}
+declare module '@elastic/eui/src/components/flyout/_flyout_close_button' {
+	import { FunctionComponent } from 'react';
+	import type { EuiFlyoutProps } from '@elastic/eui/src/components/flyout/flyout'; type EuiFlyoutCloseButtonProps = EuiFlyoutProps['closeButtonProps'] & Required<Pick<EuiFlyoutProps, 'closeButtonPosition' | 'onClose' | 'side'>>;
+	export const EuiFlyoutCloseButton: FunctionComponent<EuiFlyoutCloseButtonProps>;
+	export {};
+
 }
 declare module '@elastic/eui/src/components/flyout/flyout' {
 	import React, { ComponentPropsWithRef, CSSProperties, ElementType } from 'react';
@@ -10747,7 +10761,7 @@ declare module '@elastic/eui/src/components/flyout/flyout' {
 	import { CommonProps, PropsOfElement } from '@elastic/eui/src/components/common';
 	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';
+	import type { EuiButtonIconPropsForButton } from '@elastic/eui/src/components/button';
 	export const TYPES: readonly ["push", "overlay"]; type _EuiFlyoutType = (typeof TYPES)[number];
 	export const SIDES: readonly ["left", "right"];
 	export type _EuiFlyoutSide = (typeof SIDES)[number];
@@ -10859,7 +10873,8 @@ 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: {
+	    overflow: {
+	        euiFlyoutBody__overflow: import("@emotion/utils").SerializedStyles;
 	        noBanner: import("@emotion/utils").SerializedStyles;
 	        hasBanner: import("@emotion/utils").SerializedStyles;
 	    };
@@ -12683,7 +12698,7 @@ declare module '@elastic/eui/src/components/combo_box/combo_box' {
 	    clearActiveOption: () => void;
 	    clearSearchValue: () => void;
 	    addCustomOption: (isContainerBlur: boolean, searchValue: string) => void;
-	    doesSearchMatchOnlyOption: () => boolean;
+	    doesSearchMatchOnlyOption: () => EuiComboBoxOptionOption<T> | undefined;
 	    areAllOptionsSelected: () => boolean;
 	    onComboBoxFocus: FocusEventHandler<HTMLInputElement>;
 	    setCustomOptions: (isContainerBlur: boolean) => void;
@@ -29172,7 +29187,7 @@ declare module '@elastic/eui' {
 "euiErrorBoundary.error": any;
 "euiFilterButton.filterBadgeActiveAriaLabel": any;
 "euiFilterButton.filterBadgeAvailableAriaLabel": any;
-"euiFlyout.closeAriaLabel": any;
+"euiFlyoutCloseButton.ariaLabel": any;
 "euiFlyout.screenReaderModalDialog": any;
 "euiFlyout.screenReaderNonModalDialog": any;
 "euiFlyout.screenReaderFixedHeaders": any;
@@ -29202,7 +29217,6 @@ declare module '@elastic/eui' {
 "euiPinnableListGroup.pinExtraActionLabel": any;
 "euiPinnableListGroup.pinnedExtraActionLabel": any;
 "euiLoadingStrings.ariaLabel": any;
-"euiLoadingChart.ariaLabel": any;
 "euiMark.highlightStart": any;
 "euiMark.highlightEnd": any;
 "euiMarkdownEditorFooter.uploadingFiles": any;