@elastic/eui 95.6.0 → 95.7.0

package/es/components/selectable/selectable_templates/selectable_template_sitewide_option.js

@@ -1,5 +1,11 @@
 var _excluded = ["text", "highlightSearchString", "className"];
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
@@ -18,25 +24,32 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 
 import React from 'react';
 import classNames from 'classnames';
-import { EuiIcon } from '../../../components/icon';
-import { EuiAvatar } from '../../../components/avatar/avatar';
-import { EuiHighlight } from '../../../components/highlight';
+import { RenderWithEuiStylesMemoizer } from '../../../services';
+import { EuiIcon } from '../../icon';
+import { EuiAvatar } from '../../avatar';
+import { EuiHighlight } from '../../highlight';
+import { euiSelectableTemplateSitewideStyles } from './selectable_template_sitewide.styles';
 
 /**
  * The generic extension allows consumers to keep their data objects
  * intact without needing to do key lookups when using `renderOption`
  */
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var euiSelectableTemplateSitewideFormatOptions = function euiSelectableTemplateSitewideFormatOptions(options) {
+export var euiSelectableTemplateSitewideFormatOptions = function euiSelectableTemplateSitewideFormatOptions(options, styles) {
   return options.map(function (item) {
     var title = item.label;
     if (item.meta && item.meta.length) {
-      title += " \u2022".concat(renderOptionMeta(item.meta, '', true));
+      title += " \u2022".concat(renderOptionMeta({
+        meta: item.meta,
+        stringsOnly: true,
+        styles: styles
+      }));
     }
     return _objectSpread(_objectSpread({
       key: item.label,
       title: title
     }, item), {}, {
+      css: [styles.euiSelectableTemplateSitewide__listItem, item.css],
       className: classNames('euiSelectableTemplateSitewide__listItem', item.className),
       prepend: item.icon ? ___EmotionJSX(EuiIcon, _extends({
         color: "subdued",
@@ -53,11 +66,22 @@ export var euiSelectableTemplateSitewideRenderOptions = function euiSelectableTe
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiHighlight, {
     className: "euiSelectableTemplateSitewide__listItemTitle",
     search: searchValue
-  }, option.label), renderOptionMeta(option.meta, searchValue));
+  }, option.label), ___EmotionJSX(RenderWithEuiStylesMemoizer, null, function (stylesMemoizer) {
+    var styles = stylesMemoizer(euiSelectableTemplateSitewideStyles);
+    return renderOptionMeta({
+      meta: option.meta,
+      styles: styles,
+      searchValue: searchValue
+    });
+  }));
 };
-function renderOptionMeta(meta) {
-  var searchValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  var stringsOnly = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+var renderOptionMeta = function renderOptionMeta(_ref) {
+  var meta = _ref.meta,
+    styles = _ref.styles,
+    _ref$searchValue = _ref.searchValue,
+    searchValue = _ref$searchValue === void 0 ? '' : _ref$searchValue,
+    _ref$stringsOnly = _ref.stringsOnly,
+    stringsOnly = _ref$stringsOnly === void 0 ? false : _ref$stringsOnly;
   if (!meta || meta.length < 1) return;
   var metas = meta.map(function (meta) {
     var text = meta.text,
@@ -75,13 +99,19 @@ function renderOptionMeta(meta) {
     if (meta.type) {
       metaClasses = classNames(["euiSelectableTemplateSitewide__optionMeta--".concat(meta.type)], metaClasses);
     }
+    var hasMetaTypeStyles = function hasMetaTypeStyles(metaType) {
+      return metaType in styles.metaTypes;
+    };
+    var cssStyles = [styles.euiSelectableTemplateSitewide__optionMeta].concat(_toConsumableArray(meta.type && hasMetaTypeStyles(meta.type) ? [styles.metaTypes.fontWeight, styles.metaTypes[meta.type]] : []));
     return ___EmotionJSX(EuiHighlight, _extends({
       search: highlightSearchString ? searchValue : '',
+      css: cssStyles,
       className: metaClasses,
       key: text
     }, rest), text);
   });
   return stringsOnly ? metas : ___EmotionJSX("span", {
+    css: styles.euiSelectableTemplateSitewide__optionMetasList,
     className: "euiSelectableTemplateSitewide__optionMetasList"
   }, metas);
-}
+};

package/es/services/theme/index.js

@@ -9,7 +9,7 @@
 export { EuiSystemContext, EuiThemeContext, EuiNestedThemeContext, EuiModificationsContext, EuiColorModeContext } from './context';
 export { useEuiTheme, withEuiTheme, RenderWithEuiTheme, useEuiThemeCSSVariables } from './hooks';
 export { EuiThemeProvider } from './provider';
-export { useEuiMemoizedStyles, withEuiStylesMemoizer } from './style_memoization';
+export { useEuiMemoizedStyles, withEuiStylesMemoizer, RenderWithEuiStylesMemoizer } from './style_memoization';
 export { getEuiDevProviderWarning, setEuiDevProviderWarning } from './warning';
 export { buildTheme, computed, isInverseColorMode, getColorMode, getComputed, getOn, mergeDeep, setOn, Computed } from './utils';
 export { COLOR_MODES_STANDARD } from './types';

package/es/services/theme/style_memoization.js

@@ -94,4 +94,18 @@ export var withEuiStylesMemoizer = function withEuiStylesMemoizer(Component) {
   var WithEuiStylesMemoizer = /*#__PURE__*/forwardRef(Render);
   WithEuiStylesMemoizer.displayName = componentName;
   return WithEuiStylesMemoizer;
+};
+
+/**
+ * Render prop alternative for complex class components
+ * Most useful for scenarios where a HOC may interfere with typing
+ */
+export var RenderWithEuiStylesMemoizer = function RenderWithEuiStylesMemoizer(_ref2) {
+  var children = _ref2.children;
+  var memoizedStyles = useContext(EuiThemeMemoizedStylesContext);
+  var euiThemeContext = useEuiTheme();
+  var stylesMemoizer = useCallback(function (stylesGenerator) {
+    return getMemoizedStyles(stylesGenerator, memoizedStyles, euiThemeContext);
+  }, [memoizedStyles, euiThemeContext]);
+  return children(stylesMemoizer);
 };

package/eui.d.ts

@@ -1127,6 +1127,13 @@ declare module '@elastic/eui/src/services/theme/style_memoization' {
 	    stylesMemoizer: typeof useEuiMemoizedStyles;
 	}
 	export const withEuiStylesMemoizer: <T extends {} = {}>(Component: React.ComponentType<T & WithEuiStylesMemoizerProps>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<Omit<T, "stylesMemoizer">> & React.RefAttributes<Omit<T, "stylesMemoizer">>>;
+	/**
+	 * Render prop alternative for complex class components
+	 * Most useful for scenarios where a HOC may interfere with typing
+	 */
+	export const RenderWithEuiStylesMemoizer: ({ children, }: {
+	    children: (stylesMemoizer: typeof useEuiMemoizedStyles) => React.ReactElement;
+	}) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 	export {};
 
 }
@@ -1162,7 +1169,7 @@ declare module '@elastic/eui/src/services/theme' {
 	export { useEuiTheme, withEuiTheme, RenderWithEuiTheme, useEuiThemeCSSVariables, } 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 { useEuiMemoizedStyles, withEuiStylesMemoizer, type WithEuiStylesMemoizerProps, } from '@elastic/eui/src/services/theme/style_memoization';
+	export { useEuiMemoizedStyles, withEuiStylesMemoizer, type WithEuiStylesMemoizerProps, RenderWithEuiStylesMemoizer, } from '@elastic/eui/src/services/theme/style_memoization';
 	export { getEuiDevProviderWarning, setEuiDevProviderWarning } from '@elastic/eui/src/services/theme/warning';
 	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';
@@ -4104,6 +4111,7 @@ declare module '@elastic/eui/src/components/tool_tip' {
 }
 declare module '@elastic/eui/src/components/form/form.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiFormMaxWidth: ({ euiTheme }: UseEuiTheme) => string;
 	export const euiFormVariables: (euiThemeContext: UseEuiTheme) => {
 	    animationTiming: string;
 	    controlLayoutGroupInputHeight: string;
@@ -13059,16 +13067,24 @@ declare module '@elastic/eui/src/components/combo_box/utils' {
 	/**
 	 * DRY util for rendering an option with its prepend and append properties
 	 */
-	export const EuiComboBoxOptionAppendPrepend: <T>({ children, option, classNamePrefix, }: {
+	export const EuiComboBoxOptionAppendPrepend: <T>({ children, option, classNamePrefix, marginSize, }: {
 	    children?: React.ReactNode;
 	} & {
 	    option?: EuiComboBoxOptionOption<T> | undefined;
 	    classNamePrefix?: string | undefined;
+	    marginSize?: "xs" | "s" | "xxs" | undefined;
 	}) => React.JSX.Element;
 
+}
+declare module '@elastic/eui/src/components/combo_box/combo_box_input/combo_box_pill.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiComboBoxPillStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiComboBoxPill: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/combo_box/combo_box_input/combo_box_pill' {
-	import React, { AriaAttributes, Component, MouseEventHandler } from 'react';
+	import React, { AriaAttributes, MouseEventHandler } from 'react';
 	import { EuiComboBoxOptionOption, OptionHandler } from '@elastic/eui/src/components/combo_box/types';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	export interface EuiComboBoxPillProps<T> extends CommonProps {
@@ -13080,13 +13096,33 @@ declare module '@elastic/eui/src/components/combo_box/combo_box_input/combo_box_
 	    onClose?: OptionHandler<T>;
 	    option: EuiComboBoxOptionOption<T>;
 	}
-	export class EuiComboBoxPill<T> extends Component<EuiComboBoxPillProps<T>> {
-	    static defaultProps: {
-	        color: string;
+	export const EuiComboBoxPill: <T>({ children, className, color, onClick, onClickAriaLabel, onClose, option, ...rest }: EuiComboBoxPillProps<T>) => React.JSX.Element;
+
+}
+declare module '@elastic/eui/src/components/combo_box/combo_box_input/combo_box_input.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiComboBoxInputStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiComboBoxInputWrapper: import("@emotion/utils").SerializedStyles;
+	    multiSelect: import("@emotion/utils").SerializedStyles;
+	    uncompressed: string;
+	    compressed: import("@emotion/utils").SerializedStyles;
+	    plainText: {
+	        plainText: import("@emotion/utils").SerializedStyles;
+	        compressed: string;
+	        uncompressed: string;
 	    };
-	    onCloseButtonClick: () => void;
-	    render(): React.JSX.Element;
-	}
+	    invalid: import("@emotion/utils").SerializedStyles;
+	    disabled: import("@emotion/utils").SerializedStyles;
+	    open: import("@emotion/utils").SerializedStyles;
+	    inGroup: import("@emotion/utils").SerializedStyles;
+	    euiComboBoxInput: import("@emotion/utils").SerializedStyles;
+	    formLayout: {
+	        euiComboBox__formControlLayout: import("@emotion/utils").SerializedStyles;
+	        multiSelect: import("@emotion/utils").SerializedStyles;
+	        prependOnly: import("@emotion/utils").SerializedStyles;
+	        appendOnly: import("@emotion/utils").SerializedStyles;
+	    };
+	};
 
 }
 declare module '@elastic/eui/src/components/combo_box/combo_box_input/combo_box_input' {
@@ -13243,11 +13279,6 @@ declare module '@elastic/eui/src/components/highlight' {
 	export type { EuiHighlightProps } from '@elastic/eui/src/components/highlight/highlight';
 	export { EuiHighlight } from '@elastic/eui/src/components/highlight/highlight';
 
-}
-declare module '@elastic/eui/src/components/combo_box/combo_box_options_list/combo_box_title' {
-	import { FunctionComponent, PropsWithChildren } from 'react';
-	export const EuiComboBoxTitle: FunctionComponent<PropsWithChildren>;
-
 }
 declare module '@elastic/eui/src/components/filter_group/filter_select_item.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
@@ -13296,6 +13327,21 @@ declare module '@elastic/eui/src/components/filter_group/filter_select_item' {
 	 */
 	export const EuiFilterSelectItem: React.ForwardRefExoticComponent<Omit<EuiFilterSelectItemProps, "theme"> & React.RefAttributes<Omit<EuiFilterSelectItemProps, "theme">>>;
 
+}
+declare module '@elastic/eui/src/components/combo_box/combo_box_options_list/combo_box_title' {
+	import { FunctionComponent, PropsWithChildren } from 'react';
+	export const EuiComboBoxTitle: FunctionComponent<PropsWithChildren>;
+
+}
+declare module '@elastic/eui/src/components/combo_box/combo_box_options_list/combo_box_options_list.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const LIST_MAX_HEIGHT = 200;
+	export const euiComboBoxOptionListStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiComboBoxOptionList: import("@emotion/utils").SerializedStyles;
+	    euiComboBoxOptionList__virtualization: import("@emotion/utils").SerializedStyles;
+	    euiComboBoxOptionsList__empty: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/combo_box/combo_box_options_list/combo_box_options_list' {
 	import React, { Component, ContextType, ReactNode, RefCallback } from 'react';
@@ -13362,35 +13408,19 @@ declare module '@elastic/eui/src/components/combo_box/combo_box_options_list/com
 	    render(): React.JSX.Element;
 	}
 
-}
-declare module '@elastic/eui/src/components/combo_box/combo_box_options_list/combo_box_option' {
-	import React, { Component, HTMLAttributes, KeyboardEventHandler, ReactNode, RefCallback } from 'react';
-	import { EuiComboBoxOptionOption, OptionHandler } from '@elastic/eui/src/components/combo_box/types';
-	import { CommonProps } from '@elastic/eui/src/components/common';
-	export interface EuiComboBoxOptionProps<T> extends CommonProps, Omit<HTMLAttributes<HTMLButtonElement>, 'onClick'> {
-	    children?: ReactNode;
-	    className?: string;
-	    disabled?: boolean;
-	    isFocused: boolean;
-	    onClick: OptionHandler<T>;
-	    onEnterKey: OptionHandler<T>;
-	    option: EuiComboBoxOptionOption<T>;
-	    optionRef?: RefCallback<HTMLButtonElement>;
-	}
-	export class EuiComboBoxOption<T> extends Component<EuiComboBoxOptionProps<T>> {
-	    onClick: () => void;
-	    onKeyDown: KeyboardEventHandler<HTMLButtonElement>;
-	    render(): React.JSX.Element;
-	}
-
 }
 declare module '@elastic/eui/src/components/combo_box/combo_box_options_list' {
 	export type { EuiComboBoxOptionsListProps } from '@elastic/eui/src/components/combo_box/combo_box_options_list/combo_box_options_list';
 	export { EuiComboBoxOptionsList } from '@elastic/eui/src/components/combo_box/combo_box_options_list/combo_box_options_list';
-	export type { EuiComboBoxOptionProps } from '@elastic/eui/src/components/combo_box/combo_box_options_list/combo_box_option';
-	export { EuiComboBoxOption } from '@elastic/eui/src/components/combo_box/combo_box_options_list/combo_box_option';
 	export { EuiComboBoxTitle } from '@elastic/eui/src/components/combo_box/combo_box_options_list/combo_box_title';
 
+}
+declare module '@elastic/eui/src/components/combo_box/combo_box.styles' {
+	export const euiComboBoxStyles: {
+	    euiComboBox: import("@emotion/utils").SerializedStyles;
+	    fullWidth: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/combo_box/combo_box' {
 	/**
@@ -21402,6 +21432,14 @@ declare module '@elastic/eui/src/components/selectable/selectable_search' {
 	export type { EuiSelectableSearchProps } from '@elastic/eui/src/components/selectable/selectable_search/selectable_search';
 	export { EuiSelectableSearch } from '@elastic/eui/src/components/selectable/selectable_search/selectable_search';
 
+}
+declare module '@elastic/eui/src/components/selectable/selectable_message/selectable_message.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiSelectableMessageStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiSelectableMessage: import("@emotion/utils").SerializedStyles;
+	    bordered: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/selectable/selectable_message/selectable_message' {
 	import { FunctionComponent, HTMLAttributes } from 'react';
@@ -21419,13 +21457,38 @@ declare module '@elastic/eui/src/components/selectable/selectable_message' {
 	export type { EuiSelectableMessageProps } from '@elastic/eui/src/components/selectable/selectable_message/selectable_message';
 	export { EuiSelectableMessage } from '@elastic/eui/src/components/selectable/selectable_message/selectable_message';
 
+}
+declare module '@elastic/eui/src/components/selectable/selectable_list/selectable_list_item.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiSelectableListItemVariables: ({ euiTheme }: UseEuiTheme) => {
+	    border: string;
+	    paddingHorizontal: string;
+	    paddingVertical: string;
+	};
+	export const euiSelectableListItemStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiSelectableListItem: import("@emotion/utils").SerializedStyles;
+	    padding: {
+	        none: import("@emotion/utils").SerializedStyles;
+	        s: import("@emotion/utils").SerializedStyles;
+	    };
+	    euiSelectableListItem__content: import("@emotion/utils").SerializedStyles;
+	    euiSelectableListItem__text: import("@emotion/utils").SerializedStyles;
+	    textWrap: {
+	        truncate: import("@emotion/utils").SerializedStyles;
+	        wrap: import("@emotion/utils").SerializedStyles;
+	    };
+	    euiSelectableListItem__prepend: import("@emotion/utils").SerializedStyles;
+	    euiSelectableListItem__append: import("@emotion/utils").SerializedStyles;
+	    readonly euiSelectableListItem__icon: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/selectable/selectable_list/selectable_list_item' {
 	import React, { FunctionComponent, LiHTMLAttributes } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { EuiBadgeProps } from '@elastic/eui/src/components/badge';
 	import type { EuiSelectableOption, EuiSelectableOptionCheckedType } from '@elastic/eui/src/components/selectable/selectable_option';
-	export const PADDING_SIZES: ("s" | "none")[];
+	export const PADDING_SIZES: readonly ["none", "s"];
 	export type EuiSelectablePaddingSize = (typeof PADDING_SIZES)[number];
 	export type EuiSelectableListItemProps = LiHTMLAttributes<HTMLLIElement> & CommonProps & {
 	    children?: React.ReactNode;
@@ -21483,6 +21546,17 @@ declare module '@elastic/eui/src/components/selectable/selectable_list/selectabl
 	};
 	export const EuiSelectableListItem: FunctionComponent<EuiSelectableListItemProps>;
 
+}
+declare module '@elastic/eui/src/components/selectable/selectable_list/selectable_list.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiSelectableListStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiSelectableList: import("@emotion/utils").SerializedStyles;
+	    fullHeight: import("@emotion/utils").SerializedStyles;
+	    bordered: import("@emotion/utils").SerializedStyles;
+	    euiSelectableList__list: string;
+	    euiSelectableList__groupLabel: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/selectable/selectable_list/selectable_list' {
 	import React, { Component, HTMLAttributes, ReactNode, CSSProperties } from 'react';
@@ -21624,7 +21698,7 @@ declare module '@elastic/eui/src/components/selectable/selectable_list/selectabl
 	        ariaSetSize: number;
 	    };
 	    ListRow: React.MemoExoticComponent<({ data, index, style }: ListChildComponentProps<T>) => React.JSX.Element>;
-	    renderVirtualizedList: () => React.JSX.Element | null;
+	    renderVirtualizedList: (listClasses: string) => React.JSX.Element | null;
 	    forceVirtualizedListRowRerender: () => void;
 	    focusBadgeOffset: number;
 	    calculateDefaultOptionWidth: ({ width: containerWidth, }: EuiAutoSizeHorizontal) => void;
@@ -21919,17 +21993,24 @@ declare module '@elastic/eui/src/components/selectable/selectable_list' {
 	export type { EuiSelectableListItemProps } from '@elastic/eui/src/components/selectable/selectable_list/selectable_list_item';
 	export { EuiSelectableListItem } from '@elastic/eui/src/components/selectable/selectable_list/selectable_list_item';
 
+}
+declare module '@elastic/eui/src/components/selectable/selectable.styles' {
+	export const euiSelectableStyles: {
+	    euiSelectable: import("@emotion/utils").SerializedStyles;
+	    fullHeight: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/selectable/selectable' {
 	import React, { Component, HTMLAttributes, ReactNode, ReactElement, KeyboardEvent, MouseEvent, FocusEvent } from 'react';
+	import { Align } from 'react-window';
 	import { CommonProps, ExclusiveUnion } from '@elastic/eui/src/components/common';
 	import { EuiSelectableSearch } from '@elastic/eui/src/components/selectable/selectable_search';
+	import { EuiSelectableSearchProps } from '@elastic/eui/src/components/selectable/selectable_search/selectable_search';
 	import { EuiSelectableMessage } from '@elastic/eui/src/components/selectable/selectable_message';
 	import { EuiSelectableList } from '@elastic/eui/src/components/selectable/selectable_list';
-	import { EuiSelectableOption } from '@elastic/eui/src/components/selectable/selectable_option';
 	import { EuiSelectableOptionsListProps } from '@elastic/eui/src/components/selectable/selectable_list/selectable_list';
-	import { EuiSelectableSearchProps } from '@elastic/eui/src/components/selectable/selectable_search/selectable_search';
-	import { Align } from 'react-window';
+	import { EuiSelectableOption } from '@elastic/eui/src/components/selectable/selectable_option';
 	export type EuiSelectableOnChangeEvent = KeyboardEvent | MouseEvent; type RequiredEuiSelectableOptionsListProps = Omit<EuiSelectableOptionsListProps, keyof (typeof EuiSelectableList)['defaultProps']>; type OptionalEuiSelectableOptionsListProps = Omit<EuiSelectableOptionsListProps, keyof RequiredEuiSelectableOptionsListProps>; type EuiSelectableOptionsListPropsWithDefaults = RequiredEuiSelectableOptionsListProps & Partial<OptionalEuiSelectableOptionsListProps>;
 	export interface EuiSelectableOptionMatcherArgs<TOption> {
 	    option: EuiSelectableOption<TOption>;
@@ -22093,13 +22174,32 @@ declare module '@elastic/eui/src/components/selectable/selectable' {
 	}
 	export {};
 
+}
+declare module '@elastic/eui/src/components/selectable/selectable_templates/selectable_template_sitewide.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiSelectableTemplateSitewideStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiSelectableTemplateSitewide: import("@emotion/utils").SerializedStyles;
+	    euiSelectableTemplateSitewide__listItem: import("@emotion/utils").SerializedStyles;
+	    euiSelectableTemplateSitewide__optionMetasList: import("@emotion/utils").SerializedStyles;
+	    euiSelectableTemplateSitewide__optionMeta: import("@emotion/utils").SerializedStyles;
+	    metaTypes: {
+	        fontWeight: string;
+	        application: import("@emotion/utils").SerializedStyles;
+	        deployment: import("@emotion/utils").SerializedStyles;
+	        article: import("@emotion/utils").SerializedStyles;
+	        case: import("@emotion/utils").SerializedStyles;
+	        platform: import("@emotion/utils").SerializedStyles;
+	    };
+	};
+
 }
 declare module '@elastic/eui/src/components/selectable/selectable_templates/selectable_template_sitewide_option' {
 	import React from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { EuiIconProps } from '@elastic/eui/src/components/icon';
-	import { EuiAvatarProps } from '@elastic/eui/src/components/avatar/avatar';
+	import { EuiAvatarProps } from '@elastic/eui/src/components/avatar';
 	import { EuiSelectableOption } from '@elastic/eui/src/components/selectable/selectable_option';
+	import { euiSelectableTemplateSitewideStyles } from '@elastic/eui/src/components/selectable/selectable_templates/selectable_template_sitewide.styles';
 	export interface EuiSelectableTemplateSitewideMetaData extends CommonProps {
 	    /**
 	     * Required to display the metadata
@@ -22139,16 +22239,16 @@ declare module '@elastic/eui/src/components/selectable/selectable_templates/sele
 	     */
 	    meta?: EuiSelectableTemplateSitewideMetaData[];
 	} & EuiSelectableOption<T>;
-	export const euiSelectableTemplateSitewideFormatOptions: (options: EuiSelectableTemplateSitewideOption[]) => EuiSelectableTemplateSitewideOption[];
+	export const euiSelectableTemplateSitewideFormatOptions: (options: EuiSelectableTemplateSitewideOption[], styles: ReturnType<typeof euiSelectableTemplateSitewideStyles>) => EuiSelectableTemplateSitewideOption[];
 	export const euiSelectableTemplateSitewideRenderOptions: (option: EuiSelectableTemplateSitewideOption, searchValue: string) => React.JSX.Element;
 
 }
 declare module '@elastic/eui/src/components/selectable/selectable_templates/selectable_template_sitewide' {
 	import { FunctionComponent, ReactNode, CSSProperties, ReactElement } from 'react';
-	import { EuiSelectableProps } from '@elastic/eui/src/components/selectable/selectable';
+	import { EuiBreakpointSize } from '@elastic/eui/src/services/breakpoint';
 	import { Props as PopoverProps } from '@elastic/eui/src/components/popover/popover';
+	import { EuiSelectableProps } from '@elastic/eui/src/components/selectable/selectable';
 	import { EuiSelectableTemplateSitewideOption } from '@elastic/eui/src/components/selectable/selectable_templates/selectable_template_sitewide_option';
-	import { EuiBreakpointSize } from '@elastic/eui/src/services/breakpoint';
 	export type EuiSelectableTemplateSitewideProps = Partial<Omit<EuiSelectableProps<{
 	    [key: string]: any;
 	}>, 'options'>> & {