@elastic/eui 92.2.0 → 93.0.0

package/optimize/es/components/code/code_syntax.styles.js

@@ -6,39 +6,44 @@
  * Side Public License, v 1.
  */
 
-import { makeHighContrastColor, euiPaletteColorBlind } from '../../services';
+import { useMemo } from 'react';
+import { useEuiTheme, makeHighContrastColor, euiPaletteColorBlind } from '../../services';
 var visColors = euiPaletteColorBlind();
-export var euiCodeSyntaxColors = function euiCodeSyntaxColors(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
-  var backgroundColor = euiTheme.colors.lightestShade;
-  return {
-    backgroundColor: backgroundColor,
-    color: makeHighContrastColor(euiTheme.colors.text)(backgroundColor),
-    inlineCodeColor: makeHighContrastColor(visColors[3])(backgroundColor),
-    selectedBackgroundColor: 'inherit',
-    commentColor: makeHighContrastColor(euiTheme.colors.subduedText)(backgroundColor),
-    selectorTagColor: 'inherit',
-    stringColor: makeHighContrastColor(visColors[2])(backgroundColor),
-    tagColor: makeHighContrastColor(visColors[1])(backgroundColor),
-    nameColor: makeHighContrastColor(visColors[1])(backgroundColor),
-    numberColor: makeHighContrastColor(visColors[0])(backgroundColor),
-    keywordColor: makeHighContrastColor(visColors[3])(backgroundColor),
-    functionTitleColor: 'inherit',
-    typeColor: makeHighContrastColor(visColors[1])(backgroundColor),
-    attributeColor: 'inherit',
-    symbolColor: makeHighContrastColor(visColors[9])(backgroundColor),
-    paramsColor: 'inherit',
-    metaColor: makeHighContrastColor(euiTheme.colors.subduedText)(backgroundColor),
-    titleColor: makeHighContrastColor(visColors[7])(backgroundColor),
-    sectionColor: makeHighContrastColor(visColors[9])(backgroundColor),
-    additionColor: makeHighContrastColor(visColors[0])(backgroundColor),
-    deletionColor: makeHighContrastColor(euiTheme.colors.danger)(backgroundColor),
-    selectorClassColor: 'inherit',
-    selectorIdColor: 'inherit'
-  };
-};
-export var euiCodeSyntaxTokens = function euiCodeSyntaxTokens(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
-  var euiCodeBlock = euiCodeSyntaxColors(euiThemeContext);
-  return "\n    .token.punctuation:not(.interpolation-punctuation):not([class*='attr-']) {\n      opacity: .7;\n    }\n  \n    .token.comment,\n    .token.prolog,\n    .token.doctype,\n    .token.cdata,\n    .token.coord,\n    .token.blockquote {\n      color: ".concat(euiCodeBlock.commentColor, ";\n      font-style: italic;\n    }\n  \n    .token.selector {\n      color: ").concat(euiCodeBlock.selectorTagColor, ";\n    }\n  \n    .token.string,\n    .token.interpolation,\n    .token.interpolation-punctuation,\n    .token.doc-comment .token.keyword,\n    .token.attr-value,\n    .token.url .token.content {\n      color: ").concat(euiCodeBlock.stringColor, ";\n    }\n  \n    .token.number,\n    .token.boolean,\n    .token.keyword.nil,\n    .token.regex,\n    .token.variable,\n    .token.unit,\n    .token.hexcode,\n    .token.attr-name,\n    .token.attr-equals {\n      color: ").concat(euiCodeBlock.numberColor, ";\n    }\n  \n    .token.atrule .token.rule,\n    .token.keyword {\n      color: ").concat(euiCodeBlock.keywordColor, ";\n    }\n  \n    .token.function {\n      color: ").concat(euiCodeBlock.functionTitleColor, ";\n    }\n  \n    .token.tag {\n      color: ").concat(euiCodeBlock.tagColor, ";\n    }\n  \n    .token.class-name {\n      color: ").concat(euiCodeBlock.typeColor, ";\n    }\n  \n    .token.property {\n      color: ").concat(euiCodeBlock.attributeColor, ";\n    }\n  \n    .token.console,\n    .token.list-punctuation,\n    .token.url-reference,\n    .token.url .token.url {\n      color: ").concat(euiCodeBlock.symbolColor, ";\n    }\n  \n    .token.paramater {\n      color: ").concat(euiCodeBlock.paramsColor, ";\n    }\n  \n    .token.meta,\n    .token.important {\n      color: ").concat(euiCodeBlock.metaColor, ";\n    }\n  \n    .token.title {\n      color: ").concat(euiCodeBlock.titleColor, ";\n    }\n  \n    .token.section {\n      color: ").concat(euiCodeBlock.sectionColor, ";\n    }\n  \n    .token.prefix.inserted,\n    .token.prefix.deleted {\n      padding-inline-start: -").concat(euiTheme.size.xs, ";\n      margin-inline-start:  -").concat(euiTheme.size.xs, ";\n    }\n  \n    .token.prefix.inserted {\n      box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(euiCodeBlock.additionColor, ";\n      color: ").concat(euiCodeBlock.additionColor, ";\n    }\n  \n    .token.prefix.deleted {\n      box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(euiCodeBlock.deletionColor, ";\n      color: ").concat(euiCodeBlock.deletionColor, ";\n    }\n  \n    .token.selector .token.class {\n      color: ").concat(euiCodeBlock.selectorClassColor, ";\n    }\n  \n    .token.selector .token.id {\n      color: ").concat(euiCodeBlock.selectorIdColor, ";\n    }\n  \n    .token.italic {\n      font-style: italic;\n    }\n  \n    .token.important,\n    .token.bold {\n      font-weight: ").concat(euiTheme.font.weight.bold, ";\n    }\n  \n    .token.url-reference,\n    .token.url .token.url {\n      text-decoration: underline;\n    }\n  \n    .token.entity {\n      cursor: help;\n    }\n  ");
+
+// These variables are computationally expensive, so it needs
+// to be a hook in order to memoize it per theme
+export var useEuiCodeSyntaxVariables = function useEuiCodeSyntaxVariables() {
+  var _useEuiTheme = useEuiTheme(),
+    euiTheme = _useEuiTheme.euiTheme;
+  return useMemo(function () {
+    var backgroundColor = euiTheme.colors.lightestShade;
+    return {
+      backgroundColor: backgroundColor,
+      color: makeHighContrastColor(euiTheme.colors.text)(backgroundColor),
+      inlineCodeColor: makeHighContrastColor(visColors[3])(backgroundColor),
+      selectedBackgroundColor: 'inherit',
+      commentColor: makeHighContrastColor(euiTheme.colors.subduedText)(backgroundColor),
+      selectorTagColor: 'inherit',
+      stringColor: makeHighContrastColor(visColors[2])(backgroundColor),
+      tagColor: makeHighContrastColor(visColors[1])(backgroundColor),
+      nameColor: makeHighContrastColor(visColors[1])(backgroundColor),
+      numberColor: makeHighContrastColor(visColors[0])(backgroundColor),
+      keywordColor: makeHighContrastColor(visColors[3])(backgroundColor),
+      functionTitleColor: 'inherit',
+      typeColor: makeHighContrastColor(visColors[1])(backgroundColor),
+      attributeColor: 'inherit',
+      symbolColor: makeHighContrastColor(visColors[9])(backgroundColor),
+      paramsColor: 'inherit',
+      metaColor: makeHighContrastColor(euiTheme.colors.subduedText)(backgroundColor),
+      titleColor: makeHighContrastColor(visColors[7])(backgroundColor),
+      sectionColor: makeHighContrastColor(visColors[9])(backgroundColor),
+      additionColor: makeHighContrastColor(visColors[0])(backgroundColor),
+      deletionColor: makeHighContrastColor(euiTheme.colors.danger)(backgroundColor),
+      selectorClassColor: 'inherit',
+      selectorIdColor: 'inherit',
+      get tokensCss() {
+        return "\n  .token.punctuation:not(.interpolation-punctuation):not([class*='attr-']) {\n    opacity: .7;\n  }\n\n  .token.comment,\n  .token.prolog,\n  .token.doctype,\n  .token.cdata,\n  .token.coord,\n  .token.blockquote {\n    color: ".concat(this.commentColor, ";\n    font-style: italic;\n  }\n\n  .token.selector {\n    color: ").concat(this.selectorTagColor, ";\n  }\n\n  .token.string,\n  .token.interpolation,\n  .token.interpolation-punctuation,\n  .token.doc-comment .token.keyword,\n  .token.attr-value,\n  .token.url .token.content {\n    color: ").concat(this.stringColor, ";\n  }\n\n  .token.number,\n  .token.boolean,\n  .token.keyword.nil,\n  .token.regex,\n  .token.variable,\n  .token.unit,\n  .token.hexcode,\n  .token.attr-name,\n  .token.attr-equals {\n    color: ").concat(this.numberColor, ";\n  }\n\n  .token.atrule .token.rule,\n  .token.keyword {\n    color: ").concat(this.keywordColor, ";\n  }\n\n  .token.function {\n    color: ").concat(this.functionTitleColor, ";\n  }\n\n  .token.tag {\n    color: ").concat(this.tagColor, ";\n  }\n\n  .token.class-name {\n    color: ").concat(this.typeColor, ";\n  }\n\n  .token.property {\n    color: ").concat(this.attributeColor, ";\n  }\n\n  .token.console,\n  .token.list-punctuation,\n  .token.url-reference,\n  .token.url .token.url {\n    color: ").concat(this.symbolColor, ";\n  }\n\n  .token.paramater {\n    color: ").concat(this.paramsColor, ";\n  }\n\n  .token.meta,\n  .token.important {\n    color: ").concat(this.metaColor, ";\n  }\n\n  .token.title {\n    color: ").concat(this.titleColor, ";\n  }\n\n  .token.section {\n    color: ").concat(this.sectionColor, ";\n  }\n\n  .token.prefix.inserted,\n  .token.prefix.deleted {\n    padding-inline-start: -").concat(euiTheme.size.xs, ";\n    margin-inline-start:  -").concat(euiTheme.size.xs, ";\n  }\n\n  .token.prefix.inserted {\n    box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(this.additionColor, ";\n    color: ").concat(this.additionColor, ";\n  }\n\n  .token.prefix.deleted {\n    box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(this.deletionColor, ";\n    color: ").concat(this.deletionColor, ";\n  }\n\n  .token.selector .token.class {\n    color: ").concat(this.selectorClassColor, ";\n  }\n\n  .token.selector .token.id {\n    color: ").concat(this.selectorIdColor, ";\n  }\n\n  .token.italic {\n    font-style: italic;\n  }\n\n  .token.important,\n  .token.bold {\n    font-weight: ").concat(euiTheme.font.weight.bold, ";\n  }\n\n  .token.url-reference,\n  .token.url .token.url {\n    text-decoration: underline;\n  }\n\n  .token.entity {\n    cursor: help;\n  }");
+      }
+    };
+  }, [euiTheme]);
 };

package/optimize/es/components/comment_list/comment_event.js

@@ -9,9 +9,10 @@
 import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import { useEuiTheme } from '../../services';
+import { useEuiBorderColorCSS } from '../../global_styling';
 import { EuiPanel } from '../panel';
 import { EuiAvatar } from '../avatar';
-import { euiCommentEventBorderColors, euiCommentEventStyles, euiCommentEventHeaderStyles, euiCommentEventBodyStyles } from './comment_event.styles';
+import { euiCommentEventStyles, euiCommentEventHeaderStyles, euiCommentEventBodyStyles } from './comment_event.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiCommentEvent = function EuiCommentEvent(_ref) {
   var children = _ref.children,
@@ -63,7 +64,7 @@ export var EuiCommentEvent = function EuiCommentEvent(_ref) {
    * Styles
    */
   var euiTheme = useEuiTheme();
-  var borderStyles = euiCommentEventBorderColors(euiTheme);
+  var borderStyles = useEuiBorderColorCSS();
   var styles = euiCommentEventStyles(euiTheme);
   var cssStyles = [styles.euiCommentEvent, showEventBorders && styles.border, showEventBorders && borderStyles[eventColor]];
   var headerStyles = euiCommentEventHeaderStyles(euiTheme);

package/optimize/es/components/comment_list/comment_event.styles.js

@@ -8,23 +8,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { tintOrShade } from '../../services';
 import { logicalCSS } from '../../global_styling';
-export var euiCommentEventBorderColors = function euiCommentEventBorderColors(_ref3) {
-  var euiTheme = _ref3.euiTheme,
-    colorMode = _ref3.colorMode;
-  var ratio = 0.6;
-  return {
-    warning: /*#__PURE__*/css("border-color:", tintOrShade(euiTheme.colors.warning, 0.4, colorMode), ";;label:warning;"),
-    accent: /*#__PURE__*/css("border-color:", tintOrShade(euiTheme.colors.accent, ratio, colorMode), ";;label:accent;"),
-    primary: /*#__PURE__*/css("border-color:", tintOrShade(euiTheme.colors.primary, ratio, colorMode), ";;label:primary;"),
-    success: /*#__PURE__*/css("border-color:", tintOrShade(euiTheme.colors.success, ratio, colorMode), ";;label:success;"),
-    danger: /*#__PURE__*/css("border-color:", tintOrShade(euiTheme.colors.danger, ratio, colorMode), ";;label:danger;"),
-    subdued: /*#__PURE__*/css("border-color:", euiTheme.border.color, ";;label:subdued;"),
-    transparent: /*#__PURE__*/css("border-color:", euiTheme.border.color, ";;label:transparent;"),
-    plain: /*#__PURE__*/css("border-color:", euiTheme.border.color, ";;label:plain;")
-  };
-};
 var _ref2 = process.env.NODE_ENV === "production" ? {
   name: "yoyozp-euiCommentEvent",
   styles: "overflow:hidden;label:euiCommentEvent;"
@@ -62,8 +46,8 @@ export var euiCommentEventHeaderStyles = function euiCommentEventHeaderStyles(eu
     euiCommentEvent__headerActions: /*#__PURE__*/css("display:flex;flex-wrap:wrap;gap:", euiTheme.size.xs, ";;label:euiCommentEvent__headerActions;")
   };
 };
-export var euiCommentEventBodyStyles = function euiCommentEventBodyStyles(_ref4) {
-  var euiTheme = _ref4.euiTheme;
+export var euiCommentEventBodyStyles = function euiCommentEventBodyStyles(_ref3) {
+  var euiTheme = _ref3.euiTheme;
   return {
     euiCommentEvent__body: /*#__PURE__*/css(";label:euiCommentEvent__body;"),
     // types

package/optimize/es/components/context_menu/context_menu.js

@@ -8,7 +8,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["isSeparator", "key"],
-  _excluded2 = ["panel", "name", "key", "icon", "onClick", "toolTipTitle", "toolTipContent"],
+  _excluded2 = ["panel", "name", "key", "icon", "onClick"],
   _excluded3 = ["theme", "panels", "onPanelChange", "className", "initialPanelId", "size"];
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -211,8 +211,6 @@ export var EuiContextMenuClass = /*#__PURE__*/function (_Component) {
           key = item.key,
           icon = item.icon,
           onClick = item.onClick,
-          toolTipTitle = item.toolTipTitle,
-          toolTipContent = item.toolTipContent,
           rest = _objectWithoutProperties(item, _excluded2);
         var onClickHandler = panel ? function (event) {
           if (onClick && event) {
@@ -231,9 +229,7 @@ export var EuiContextMenuClass = /*#__PURE__*/function (_Component) {
           key: key || (typeof name === 'string' ? name : undefined) || index,
           icon: icon,
           onClick: onClickHandler,
-          hasPanel: Boolean(panel),
-          toolTipTitle: toolTipTitle,
-          toolTipContent: toolTipContent
+          hasPanel: Boolean(panel)
         }, rest), name);
       });
     }

package/optimize/es/components/context_menu/context_menu_item.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "hasPanel", "icon", "buttonRef", "disabled", "layoutAlign", "toolTipTitle", "toolTipContent", "toolTipPosition", "toolTipProps", "href", "target", "rel", "size"];
+var _excluded = ["children", "className", "hasPanel", "icon", "buttonRef", "disabled", "layoutAlign", "toolTipContent", "toolTipProps", "href", "target", "rel", "size"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -34,10 +34,7 @@ export var EuiContextMenuItem = function EuiContextMenuItem(_ref) {
     _disabled = _ref.disabled,
     _ref$layoutAlign = _ref.layoutAlign,
     layoutAlign = _ref$layoutAlign === void 0 ? 'center' : _ref$layoutAlign,
-    toolTipTitle = _ref.toolTipTitle,
     toolTipContent = _ref.toolTipContent,
-    _ref$toolTipPosition = _ref.toolTipPosition,
-    toolTipPosition = _ref$toolTipPosition === void 0 ? 'right' : _ref$toolTipPosition,
     toolTipProps = _ref.toolTipProps,
     href = _ref.href,
     target = _ref.target,
@@ -108,8 +105,7 @@ export var EuiContextMenuItem = function EuiContextMenuItem(_ref) {
   if (toolTipContent) {
     var anchorClasses = classNames('eui-displayBlock', toolTipProps === null || toolTipProps === void 0 ? void 0 : toolTipProps.anchorClassName);
     return ___EmotionJSX(EuiToolTip, _extends({
-      title: toolTipTitle ? toolTipTitle : null,
-      position: toolTipPosition
+      position: "right"
     }, toolTipProps, {
       anchorClassName: anchorClasses,
       content: toolTipContent

package/optimize/es/components/empty_prompt/empty_prompt.js

@@ -1,8 +1,6 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["icon", "iconType", "iconColor", "title", "titleSize", "paddingSize", "body", "actions", "className", "layout", "hasBorder", "color", "footer"];
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -11,9 +9,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import classNames from 'classnames';
-import { keysOf } from '../common';
+import { useEuiTheme } from '../../services';
 import { EuiTitle } from '../title';
 import { EuiFlexGroup, EuiFlexItem } from '../flex';
 import { EuiSpacer } from '../spacer';
@@ -21,14 +19,9 @@ import { EuiIcon } from '../icon';
 import { isNamedColor } from '../icon/named_colors';
 import { EuiText } from '../text';
 import { EuiPanel } from '../panel/panel';
+import { euiEmptyPromptStyles } from './empty_prompt.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var paddingSizeToClassNameMap = {
-  none: null,
-  s: 'euiEmptyPrompt--paddingSmall',
-  m: 'euiEmptyPrompt--paddingMedium',
-  l: 'euiEmptyPrompt--paddingLarge'
-};
-export var PADDING_SIZES = keysOf(paddingSizeToClassNameMap);
+export var PADDING_SIZES = ['none', 's', 'm', 'l'];
 export var EuiEmptyPrompt = function EuiEmptyPrompt(_ref) {
   var icon = _ref.icon,
     iconType = _ref.iconType,
@@ -48,41 +41,41 @@ export var EuiEmptyPrompt = function EuiEmptyPrompt(_ref) {
     color = _ref$color === void 0 ? 'transparent' : _ref$color,
     footer = _ref.footer,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var isVerticalLayout = layout === 'vertical';
+  var classes = classNames('euiEmptyPrompt', className);
+  var euiTheme = useEuiTheme();
+  var styles = useMemo(function () {
+    return euiEmptyPromptStyles(euiTheme);
+  }, [euiTheme]);
+  var cssStyles = [styles.euiEmptyPrompt, styles[layout]];
+  var mainStyles = [styles.main.euiEmptyPrompt__main, styles.main[layout], styles.main[paddingSize], layout === 'horizontal' && styles.main.horizontalPadding[paddingSize]];
+  var contentStyles = [styles.content.euiEmptyPrompt__content, styles.content[layout]];
+
   // Default the iconColor to `subdued`,
   // otherwise try to match the iconColor with the panel color unless iconColor is specified
   var iconColor = _iconColor !== null && _iconColor !== void 0 ? _iconColor : isNamedColor(color) ? color : 'subdued';
-  var iconNode = iconType ? ___EmotionJSX(EuiIcon, {
-    type: iconType,
-    size: "xxl",
-    color: iconColor
-  }) : icon;
-  var titleNode;
-  var bodyNode;
-  if (body || title) {
-    if (title) {
-      titleNode = ___EmotionJSX(EuiTitle, {
-        size: titleSize
-      }, title);
-    }
-    if (body) {
-      bodyNode = ___EmotionJSX(React.Fragment, null, title && ___EmotionJSX(EuiSpacer, {
-        size: "m"
-      }), ___EmotionJSX(EuiText, {
-        color: "subdued"
-      }, body));
-    }
-  }
-  var actionsNode;
-  if (actions) {
-    var actionsRow;
+  var iconNode = useMemo(function () {
+    if (!iconType && !icon) return null;
+    var iconStyles = [styles.icon.euiEmptyPrompt__icon, styles.icon[layout]];
+    return ___EmotionJSX("div", {
+      className: "euiEmptyPrompt__icon",
+      css: iconStyles
+    }, iconType ? ___EmotionJSX(EuiIcon, {
+      type: iconType,
+      size: "xxl",
+      color: iconColor
+    }) : icon);
+  }, [icon, iconType, iconColor, layout, styles.icon]);
+  var actionsNode = useMemo(function () {
+    if (!actions) return null;
     if (Array.isArray(actions)) {
-      actionsRow = ___EmotionJSX(EuiFlexGroup, {
+      var actionStyles = [styles.actions.euiEmptyPrompt__actions, styles.actions[layout]];
+      return ___EmotionJSX(EuiFlexGroup, {
         className: "euiEmptyPrompt__actions",
+        css: actionStyles,
         gutterSize: "m",
         alignItems: "center",
         justifyContent: "center",
-        direction: isVerticalLayout ? 'column' : 'row'
+        direction: layout === 'vertical' ? 'column' : 'row'
       }, actions.map(function (action, index) {
         return ___EmotionJSX(EuiFlexItem, {
           key: index,
@@ -90,30 +83,37 @@ export var EuiEmptyPrompt = function EuiEmptyPrompt(_ref) {
         }, action);
       }));
     } else {
-      actionsRow = actions;
+      return actions;
     }
-    actionsNode = ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiSpacer, {
-      size: "l"
-    }), actionsRow);
-  }
-  var contentNodes = ___EmotionJSX(React.Fragment, null, titleNode, bodyNode, actionsNode);
-  var classes = classNames('euiEmptyPrompt', ["euiEmptyPrompt--".concat(layout)], paddingSizeToClassNameMap[paddingSize], className);
-  var panelProps = _objectSpread({
+  }, [actions, layout, styles.actions]);
+  var footerNode = useMemo(function () {
+    if (!footer) return null;
+    var footerStyles = [styles.footer.euiEmptyPrompt__footer, styles.footer[paddingSize], styles.footer[color], color === 'transparent' && !hasBorder && styles.footer.roundedBorders];
+    return ___EmotionJSX("div", {
+      className: "euiEmptyPrompt__footer",
+      css: footerStyles
+    }, footer);
+  }, [footer, paddingSize, color, hasBorder, styles.footer]);
+  return ___EmotionJSX(EuiPanel, _extends({
+    css: cssStyles,
     className: classes,
     color: color,
-    paddingSize: 'none',
-    hasBorder: hasBorder,
-    grow: false
-  }, rest);
-  return ___EmotionJSX(EuiPanel, panelProps, ___EmotionJSX("div", {
-    className: "euiEmptyPrompt__main"
-  }, iconNode && ___EmotionJSX("div", {
-    className: "euiEmptyPrompt__icon"
-  }, iconNode), ___EmotionJSX("div", {
-    className: "euiEmptyPrompt__content"
-  }, ___EmotionJSX("div", {
-    className: "euiEmptyPrompt__contentInner"
-  }, contentNodes))), footer && ___EmotionJSX("div", {
-    className: "euiEmptyPrompt__footer"
-  }, footer));
+    paddingSize: "none",
+    grow: false,
+    hasBorder: hasBorder
+  }, rest), ___EmotionJSX("div", {
+    className: "euiEmptyPrompt__main",
+    css: mainStyles
+  }, iconNode, ___EmotionJSX("div", {
+    className: "euiEmptyPrompt__content",
+    css: contentStyles
+  }, title && ___EmotionJSX(EuiTitle, {
+    size: titleSize
+  }, title), title && body && ___EmotionJSX(EuiSpacer, {
+    size: "m"
+  }), body && ___EmotionJSX(EuiText, {
+    color: "subdued"
+  }, body), actionsNode && (body || title) && ___EmotionJSX(EuiSpacer, {
+    size: "l"
+  }), actionsNode)), footerNode);
 };

package/optimize/es/components/empty_prompt/empty_prompt.styles.js

@@ -0,0 +1,112 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { euiBreakpoint, euiPaddingSize, euiBorderColor, logicalCSS, mathWithUnits } from '../../global_styling';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "x4698b-roundedBorders",
+  styles: "border-radius:inherit;label:roundedBorders;"
+} : {
+  name: "x4698b-roundedBorders",
+  styles: "border-radius:inherit;label:roundedBorders;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "zv101j-euiEmptyPrompt__footer",
+  styles: "border-end-end-radius:inherit;border-end-start-radius:inherit;label:euiEmptyPrompt__footer;"
+} : {
+  name: "zv101j-euiEmptyPrompt__footer",
+  styles: "border-end-end-radius:inherit;border-end-start-radius:inherit;label:euiEmptyPrompt__footer;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref3 = process.env.NODE_ENV === "production" ? {
+  name: "1rdinfv-vertical",
+  styles: "margin:auto;label:vertical;"
+} : {
+  name: "1rdinfv-vertical",
+  styles: "margin:auto;label:vertical;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref4 = process.env.NODE_ENV === "production" ? {
+  name: "1w25ahh-vertical",
+  styles: "justify-content:center;label:vertical;"
+} : {
+  name: "1w25ahh-vertical",
+  styles: "justify-content:center;label:vertical;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref5 = process.env.NODE_ENV === "production" ? {
+  name: "1o9qvqj-euiEmptyPrompt__main",
+  styles: "display:flex;flex-direction:column;label:euiEmptyPrompt__main;"
+} : {
+  name: "1o9qvqj-euiEmptyPrompt__main",
+  styles: "display:flex;flex-direction:column;label:euiEmptyPrompt__main;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var euiEmptyPromptStyles = function euiEmptyPromptStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var iconMaxWidth = mathWithUnits(euiTheme.size.l, function (x) {
+    return x * 15;
+  });
+  var generatePaddingStyles = function generatePaddingStyles() {
+    var property = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'padding';
+    return {
+      none: null,
+      s: /*#__PURE__*/css(property, ":", euiPaddingSize(euiThemeContext, 's'), ";;label:s;"),
+      m: /*#__PURE__*/css(property, ":", euiPaddingSize(euiThemeContext, 'm'), ";;label:m;"),
+      l: /*#__PURE__*/css(property, ":", euiPaddingSize(euiThemeContext, 'l'), ";;label:l;")
+    };
+  };
+  var generateFooterBorder = function generateFooterBorder(color) {
+    return "".concat(euiTheme.border.width.thin, " solid ").concat(euiBorderColor(euiThemeContext, color));
+  };
+  return {
+    euiEmptyPrompt: /*#__PURE__*/css("text-align:center;margin:auto;", euiBreakpoint(euiThemeContext, ['l', 'xl']), "{", logicalCSS('max-width', 'max-content'), ";};label:euiEmptyPrompt;"),
+    vertical: /*#__PURE__*/css(";label:vertical;"),
+    horizontal: /*#__PURE__*/css(euiBreakpoint(euiThemeContext, ['l', 'xl']), "{justify-content:flex-start;text-align:start;};label:horizontal;"),
+    main: _objectSpread(_objectSpread({
+      euiEmptyPrompt__main: _ref5,
+      vertical: _ref4,
+      horizontal: /*#__PURE__*/css("align-items:center;", euiBreakpoint(euiThemeContext, ['l', 'xl']), "{flex-direction:row-reverse;};label:horizontal;")
+    }, generatePaddingStyles()), {}, {
+      horizontalPadding: generatePaddingStyles('gap')
+    }),
+    content: {
+      euiEmptyPrompt__content: /*#__PURE__*/css(logicalCSS('max-width', '36em'), ";;label:euiEmptyPrompt__content;"),
+      vertical: _ref3,
+      horizontal: /*#__PURE__*/css(euiBreakpoint(euiThemeContext, ['l', 'xl']), "{padding-block:", euiTheme.size.l, ";padding-inline:0;};label:horizontal;")
+    },
+    icon: {
+      euiEmptyPrompt__icon: /*#__PURE__*/css(logicalCSS('max-width', iconMaxWidth), " margin:auto;&>*{flex-shrink:1;", logicalCSS('max-width', '100%'), ";};label:euiEmptyPrompt__icon;"),
+      vertical: /*#__PURE__*/css(logicalCSS('margin-bottom', euiTheme.size.base), ";;label:vertical;"),
+      horizontal: /*#__PURE__*/css(euiBreakpoint(euiThemeContext, ['l', 'xl']), "{", logicalCSS('min-width', '40%'), " ", logicalCSS('max-width', '50%'), "&&>*{", logicalCSS('max-width', iconMaxWidth), ";}};label:horizontal;")
+    },
+    actions: {
+      euiEmptyPrompt__actions: /*#__PURE__*/css(";label:euiEmptyPrompt__actions;"),
+      vertical: /*#__PURE__*/css(";label:vertical;"),
+      horizontal: /*#__PURE__*/css(euiBreakpoint(euiThemeContext, ['l', 'xl']), "{justify-content:flex-start;};label:horizontal;")
+    },
+    footer: _objectSpread({
+      euiEmptyPrompt__footer: _ref2,
+      roundedBorders: _ref,
+      // Colors
+      transparent: /*#__PURE__*/css("background-color:", euiTheme.colors.body, ";;label:transparent;"),
+      plain: /*#__PURE__*/css("background-color:", euiTheme.colors.body, ";;label:plain;"),
+      subdued: /*#__PURE__*/css(logicalCSS('border-top', generateFooterBorder('subdued')), ";;label:subdued;"),
+      primary: /*#__PURE__*/css(logicalCSS('border-top', generateFooterBorder('primary')), ";;label:primary;"),
+      accent: /*#__PURE__*/css(logicalCSS('border-top', generateFooterBorder('accent')), ";;label:accent;"),
+      danger: /*#__PURE__*/css(logicalCSS('border-top', generateFooterBorder('danger')), ";;label:danger;"),
+      warning: /*#__PURE__*/css(logicalCSS('border-top', generateFooterBorder('warning')), ";;label:warning;"),
+      success: /*#__PURE__*/css(logicalCSS('border-top', generateFooterBorder('success')), ";;label:success;")
+    }, generatePaddingStyles())
+  };
+};

package/optimize/es/components/popover/popover.js

@@ -9,7 +9,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _excluded = ["anchorClassName", "anchorPosition", "button", "buttonRef", "insert", "isOpen", "ownFocus", "children", "className", "closePopover", "panelClassName", "panelPaddingSize", "panelProps", "panelRef", "panelStyle", "popoverScreenReaderText", "popoverRef", "hasArrow", "arrowChildren", "repositionOnScroll", "repositionToCrossAxis", "hasDragDrop", "zIndex", "attachToAnchor", "display", "offset", "onPositionChange", "buffer", "aria-label", "aria-labelledby", "container", "focusTrapProps", "initialFocus", "tabIndex"];
+var _excluded = ["anchorPosition", "button", "insert", "isOpen", "ownFocus", "children", "className", "closePopover", "panelClassName", "panelPaddingSize", "panelProps", "panelRef", "panelStyle", "popoverScreenReaderText", "popoverRef", "hasArrow", "arrowChildren", "repositionOnScroll", "repositionToCrossAxis", "hasDragDrop", "zIndex", "attachToAnchor", "display", "offset", "onPositionChange", "buffer", "aria-label", "aria-labelledby", "container", "focusTrapProps", "initialFocus", "tabIndex"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
@@ -262,7 +262,7 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
     });
     _defineProperty(_assertThisInitialized(_this), "popoverRef", function (node) {
       _this.button = node;
-      setMultipleRefs([_this.props.popoverRef, _this.props.buttonRef], node);
+      setMultipleRefs([_this.props.popoverRef], node);
     });
     _this.state = {
       prevProps: {
@@ -343,10 +343,8 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
       var _panelProps$tabIndex,
         _this4 = this;
       var _this$props = this.props,
-        anchorClassName = _this$props.anchorClassName,
         anchorPosition = _this$props.anchorPosition,
         button = _this$props.button,
-        buttonRef = _this$props.buttonRef,
         insert = _this$props.insert,
         isOpen = _this$props.isOpen,
         ownFocus = _this$props.ownFocus,
@@ -386,7 +384,7 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
       }];
       var classes = classNames('euiPopover', {
         'euiPopover-isOpen': this.state.isOpening
-      }, className, anchorClassName);
+      }, className);
       var showArrow = hasArrow && !attachToAnchor;
       var panel;
       if (!this.state.suppressingPopover && (isOpen || this.state.isClosing)) {

package/optimize/es/components/search_bar/search_bar.js

@@ -22,12 +22,13 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
  */
 
 import React, { Component } from 'react';
-import { htmlIdGenerator } from '../../services/accessibility';
+import { RenderWithEuiTheme, htmlIdGenerator } from '../../services';
 import { isString } from '../../services/predicate';
 import { EuiFlexGroup, EuiFlexItem } from '../flex';
 import { EuiSearchBox } from './search_box';
 import { EuiSearchBarFilters } from './search_filters';
 import { Query } from './query';
+import { euiSearchBar__searchHolder, euiSearchBar__filtersHolder } from './search_bar.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export { Query, AST as Ast } from './query';
 var parseQuery = function parseQuery(query, props) {
@@ -178,39 +179,42 @@ export var EuiSearchBar = /*#__PURE__*/function (_Component) {
         toolsRight = _this$props.toolsRight,
         hint = _this$props.hint;
       var toolsLeftEl = this.renderTools(toolsLeft);
-      var filtersBar = !filters ? undefined : ___EmotionJSX(EuiFlexItem, {
-        className: "euiSearchBar__filtersHolder",
-        grow: false
-      }, ___EmotionJSX(EuiSearchBarFilters, {
-        filters: filters,
-        query: query,
-        onChange: this.onFiltersChange
-      }));
       var toolsRightEl = this.renderTools(toolsRight);
       var isHintVisible = (_hint$popoverProps$is = hint === null || hint === void 0 ? void 0 : (_hint$popoverProps = hint.popoverProps) === null || _hint$popoverProps === void 0 ? void 0 : _hint$popoverProps.isOpen) !== null && _hint$popoverProps$is !== void 0 ? _hint$popoverProps$is : isHintVisibleState;
-      return ___EmotionJSX(EuiFlexGroup, {
-        gutterSize: "m",
-        alignItems: "center",
-        wrap: true
-      }, toolsLeftEl, ___EmotionJSX(EuiFlexItem, {
-        className: "euiSearchBar__searchHolder",
-        grow: true
-      }, ___EmotionJSX(EuiSearchBox, _extends({}, box, {
-        query: queryText,
-        onSearch: this.onSearch,
-        isInvalid: error != null,
-        title: error ? error.message : undefined,
-        "aria-describedby": isHintVisible ? "".concat(this.hintId) : undefined,
-        hint: hint ? _objectSpread({
-          isVisible: isHintVisible,
-          setIsVisible: function setIsVisible(isVisible) {
-            _this2.setState({
-              isHintVisible: isVisible
-            });
-          },
-          id: this.hintId
-        }, hint) : undefined
-      }))), filtersBar, toolsRightEl);
+      return ___EmotionJSX(RenderWithEuiTheme, null, function (euiTheme) {
+        return ___EmotionJSX(EuiFlexGroup, {
+          gutterSize: "m",
+          alignItems: "center",
+          wrap: true
+        }, toolsLeftEl, ___EmotionJSX(EuiFlexItem, {
+          className: "euiSearchBar__searchHolder",
+          css: euiSearchBar__searchHolder(euiTheme),
+          grow: true
+        }, ___EmotionJSX(EuiSearchBox, _extends({}, box, {
+          query: queryText,
+          onSearch: _this2.onSearch,
+          isInvalid: error != null,
+          title: error ? error.message : undefined,
+          "aria-describedby": isHintVisible ? "".concat(_this2.hintId) : undefined,
+          hint: hint ? _objectSpread({
+            isVisible: isHintVisible,
+            setIsVisible: function setIsVisible(isVisible) {
+              _this2.setState({
+                isHintVisible: isVisible
+              });
+            },
+            id: _this2.hintId
+          }, hint) : undefined
+        }))), filters && ___EmotionJSX(EuiFlexItem, {
+          className: "euiSearchBar__filtersHolder",
+          css: euiSearchBar__filtersHolder(euiTheme),
+          grow: false
+        }, ___EmotionJSX(EuiSearchBarFilters, {
+          filters: filters,
+          query: query,
+          onChange: _this2.onFiltersChange
+        })), toolsRightEl);
+      });
     }
   }], [{
     key: "getDerivedStateFromProps",