@elastic/eui 92.2.1 → 93.1.0

package/es/components/date_picker/super_date_picker/pretty_duration.js

@@ -139,9 +139,15 @@ var useRelativeDurationRoundedI18n = function useRelativeDurationRoundedI18n(pre
  */
 
 var ISO_FORMAT = 'YYYY-MM-DDTHH:mm:ss.SSSZ';
-export var useFormatTimeString = function useFormatTimeString(timeString, dateFormat) {
-  var roundUp = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-  var locale = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'en';
+export var useFormatTimeString = function useFormatTimeString(timeString, dateFormat, options) {
+  var _ref15 = options || {},
+    _ref15$locale = _ref15.locale,
+    locale = _ref15$locale === void 0 ? 'en' : _ref15$locale,
+    _ref15$roundUp = _ref15.roundUp,
+    roundUp = _ref15$roundUp === void 0 ? false : _ref15$roundUp,
+    _ref15$canRoundRelati = _ref15.canRoundRelativeUnits,
+    canRoundRelativeUnits = _ref15$canRoundRelati === void 0 ? true : _ref15$canRoundRelati;
+
   // i18n'd strings
   var nowDisplay = useEuiI18n('euiPrettyDuration.now', 'now');
   var invalidDateDisplay = useEuiI18n('euiPrettyDuration.invalid', 'Invalid date');
@@ -159,8 +165,27 @@ export var useFormatTimeString = function useFormatTimeString(timeString, dateFo
     return invalidDateDisplay;
   }
   if (moment.isMoment(tryParse)) {
-    return "~ ".concat(tryParse.locale(locale).fromNow());
+    if (canRoundRelativeUnits) {
+      return "~ ".concat(tryParse.locale(locale).fromNow());
+    } else {
+      // To force a specific unit to be used, we need to skip moment.fromNow()
+      // entirely and write our own custom moment formatted output.
+      var _parseRelativeParts = parseRelativeParts(timeString),
+        count = _parseRelativeParts.count,
+        _unit = _parseRelativeParts.unit;
+      var isFuture = _unit.endsWith('+');
+      var unit = isFuture ? _unit.slice(0, -1) : _unit; // We want just the unit letter without the trailing +
+
+      // @see https://momentjs.com/docs/#/customization/relative-time/
+      var relativeUnitKey = count === 1 ? unit : unit + unit;
+
+      // @see https://momentjs.com/docs/#/i18n/locale-data/
+      return moment.localeData().pastFuture(isFuture ? count : count * -1, moment.localeData().relativeTime(count, false, relativeUnitKey, false)
+      // Booleans don't seem to actually matter for output, .pastFuture() handles that
+      );
+    }
   }
+
   return timeString;
 };
 
@@ -168,11 +193,11 @@ export var useFormatTimeString = function useFormatTimeString(timeString, dateFo
  * Pretty duration hook+component
  */
 
-export var usePrettyDuration = function usePrettyDuration(_ref15) {
-  var timeFrom = _ref15.timeFrom,
-    timeTo = _ref15.timeTo,
-    quickRanges = _ref15.quickRanges,
-    dateFormat = _ref15.dateFormat;
+export var usePrettyDuration = function usePrettyDuration(_ref16) {
+  var timeFrom = _ref16.timeFrom,
+    timeTo = _ref16.timeTo,
+    quickRanges = _ref16.quickRanges,
+    dateFormat = _ref16.dateFormat;
   var prettyDuration = '';
 
   /**
@@ -211,7 +236,9 @@ export var usePrettyDuration = function usePrettyDuration(_ref15) {
    * If it's none of the above, display basic fallback copy
    */
   var displayFrom = useFormatTimeString(timeFrom, dateFormat);
-  var displayTo = useFormatTimeString(timeTo, dateFormat, true);
+  var displayTo = useFormatTimeString(timeTo, dateFormat, {
+    roundUp: true
+  });
   var fallbackDuration = useEuiI18n('euiPrettyDuration.fallbackDuration', '{displayFrom} to {displayTo}', {
     displayFrom: displayFrom,
     displayTo: displayTo
@@ -221,11 +248,11 @@ export var usePrettyDuration = function usePrettyDuration(_ref15) {
   }
   return prettyDuration;
 };
-export var PrettyDuration = function PrettyDuration(_ref16) {
-  var timeFrom = _ref16.timeFrom,
-    timeTo = _ref16.timeTo,
-    quickRanges = _ref16.quickRanges,
-    dateFormat = _ref16.dateFormat;
+export var PrettyDuration = function PrettyDuration(_ref17) {
+  var timeFrom = _ref17.timeFrom,
+    timeTo = _ref17.timeTo,
+    quickRanges = _ref17.quickRanges,
+    dateFormat = _ref17.dateFormat;
   var prettyDuration = usePrettyDuration({
     timeFrom: timeFrom,
     timeTo: timeTo,
@@ -240,9 +267,9 @@ export var PrettyDuration = function PrettyDuration(_ref16) {
  */
 
 var hasRangeMatch = function hasRangeMatch(timeFrom, timeTo, ranges) {
-  return ranges.find(function (_ref17) {
-    var start = _ref17.start,
-      end = _ref17.end;
+  return ranges.find(function (_ref18) {
+    var start = _ref18.start,
+      end = _ref18.end;
     return timeFrom === start && timeTo === end;
   });
 };

package/es/components/date_picker/super_date_picker/pretty_interval.js

@@ -7,10 +7,18 @@
  */
 
 import { useEuiI18n } from '../../i18n';
-var MS_IN_SECOND = 1000;
-var MS_IN_MINUTE = 60 * MS_IN_SECOND;
-var MS_IN_HOUR = 60 * MS_IN_MINUTE;
-var MS_IN_DAY = 24 * MS_IN_HOUR;
+var MS_INTERVALS = {
+  s: 1000,
+  get m() {
+    return 60 * this.s;
+  },
+  get h() {
+    return 60 * this.m;
+  },
+  get d() {
+    return 24 * this.h;
+  }
+};
 /**
  * Pretty interval i18n strings
  *
@@ -59,23 +67,31 @@ var usePrettyIntervalI18n = function usePrettyIntervalI18n(interval) {
     }
   };
 };
-export var usePrettyInterval = function usePrettyInterval(isPaused, intervalInMs) {
-  var shortHand = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+export var usePrettyInterval = function usePrettyInterval(isPaused, intervalInMs, options) {
+  var _ref5 = options || {},
+    _ref5$shortHand = _ref5.shortHand,
+    shortHand = _ref5$shortHand === void 0 ? false : _ref5$shortHand,
+    unit = _ref5.unit;
   var prettyInterval = '';
   var interval;
   var unitId;
-  if (intervalInMs < MS_IN_MINUTE) {
-    interval = Math.round(intervalInMs / MS_IN_SECOND);
-    unitId = 's';
-  } else if (intervalInMs < MS_IN_HOUR) {
-    interval = Math.round(intervalInMs / MS_IN_MINUTE);
-    unitId = 'm';
-  } else if (intervalInMs < MS_IN_DAY) {
-    interval = Math.round(intervalInMs / MS_IN_HOUR);
-    unitId = 'h';
+  if (unit) {
+    unitId = unit;
+    interval = Math.round(intervalInMs / MS_INTERVALS[unit]);
   } else {
-    interval = Math.round(intervalInMs / MS_IN_DAY);
-    unitId = 'd';
+    if (intervalInMs < MS_INTERVALS.m) {
+      interval = Math.round(intervalInMs / MS_INTERVALS.s);
+      unitId = 's';
+    } else if (intervalInMs < MS_INTERVALS.h) {
+      interval = Math.round(intervalInMs / MS_INTERVALS.m);
+      unitId = 'm';
+    } else if (intervalInMs < MS_INTERVALS.d) {
+      interval = Math.round(intervalInMs / MS_INTERVALS.h);
+      unitId = 'h';
+    } else {
+      interval = Math.round(intervalInMs / MS_INTERVALS.d);
+      unitId = 'd';
+    }
   }
   var prettyIntervalI18n = usePrettyIntervalI18n(interval);
   prettyInterval = shortHand ? prettyIntervalI18n.shorthand[unitId] : prettyIntervalI18n[unitId];

package/es/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js

@@ -115,6 +115,7 @@ EuiQuickSelectPopover.propTypes = {
     start: PropTypes.oneOfType([PropTypes.oneOf(["now"]), PropTypes.string.isRequired]).isRequired
   }).isRequired).isRequired,
   refreshInterval: PropTypes.number.isRequired,
+  intervalUnits: PropTypes.oneOf(["s", "m", "h"]),
   start: PropTypes.string.isRequired,
   timeOptions: PropTypes.shape({
     timeTenseOptions: PropTypes.arrayOf(PropTypes.any.isRequired).isRequired,
@@ -143,6 +144,7 @@ export var EuiQuickSelectPanels = function EuiQuickSelectPanels(_ref3) {
     customQuickSelectRender = _ref3.customQuickSelectRender,
     isPaused = _ref3.isPaused,
     refreshInterval = _ref3.refreshInterval,
+    intervalUnits = _ref3.intervalUnits,
     applyRefreshInterval = _ref3.applyRefreshInterval,
     applyTime = _ref3.applyTime,
     prevQuickSelect = _ref3.prevQuickSelect;
@@ -166,7 +168,8 @@ export var EuiQuickSelectPanels = function EuiQuickSelectPanels(_ref3) {
   var refreshIntervalElement = applyRefreshInterval && ___EmotionJSX(EuiRefreshInterval, {
     onRefreshChange: applyRefreshInterval,
     isPaused: isPaused,
-    refreshInterval: refreshInterval
+    refreshInterval: refreshInterval,
+    intervalUnits: intervalUnits
   });
   var customQuickSelectPanelsElement = useMemo(function () {
     if (!customQuickSelectPanels) {

package/es/components/date_picker/super_date_picker/super_date_picker.js

@@ -171,6 +171,7 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
     });
     _defineProperty(_assertThisInitialized(_this), "onRefreshChange", function (_ref3) {
       var refreshInterval = _ref3.refreshInterval,
+        intervalUnits = _ref3.intervalUnits,
         isPaused = _ref3.isPaused;
       _this.stopInterval();
       if (!isPaused) {
@@ -179,7 +180,8 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
       if (_this.props.onRefreshChange) {
         _this.props.onRefreshChange({
           refreshInterval: refreshInterval,
-          isPaused: isPaused
+          isPaused: isPaused,
+          intervalUnits: intervalUnits
         });
       }
     });
@@ -216,6 +218,7 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
         onRefreshChange = _this$props2.onRefreshChange,
         recentlyUsedRanges = _this$props2.recentlyUsedRanges,
         refreshInterval = _this$props2.refreshInterval,
+        refreshIntervalUnits = _this$props2.refreshIntervalUnits,
         isPaused = _this$props2.isPaused,
         isDisabled = _this$props2.isDisabled;
       return ___EmotionJSX(EuiQuickSelectPopover, {
@@ -230,6 +233,7 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
         isPaused: isPaused,
         recentlyUsedRanges: recentlyUsedRanges,
         refreshInterval: refreshInterval,
+        intervalUnits: refreshIntervalUnits,
         start: start,
         timeOptions: timeOptions
       });
@@ -247,9 +251,12 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
         isQuickSelectOnly = _this$props3.isQuickSelectOnly,
         showUpdateButton = _this$props3.showUpdateButton,
         commonlyUsedRanges = _this$props3.commonlyUsedRanges,
+        canRoundRelativeUnits = _this$props3.canRoundRelativeUnits,
         timeOptions = _this$props3.timeOptions,
         dateFormat = _this$props3.dateFormat,
         refreshInterval = _this$props3.refreshInterval,
+        refreshMinInterval = _this$props3.refreshMinInterval,
+        refreshIntervalUnits = _this$props3.refreshIntervalUnits,
         isPaused = _this$props3.isPaused,
         isDisabled = _this$props3.isDisabled,
         isLoading = _this$props3.isLoading,
@@ -260,6 +267,8 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
         onFocus = _this$props3.onFocus;
       var autoRefreshAppend = !isPaused ? ___EmotionJSX(EuiAutoRefreshButton, {
         refreshInterval: refreshInterval,
+        minInterval: refreshMinInterval,
+        intervalUnits: refreshIntervalUnits,
         isDisabled: !!isDisabled,
         isPaused: isPaused,
         onRefreshChange: _this.onRefreshChange,
@@ -281,6 +290,7 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
       var isDisabledDisplay = isObject(isDisabled) && (isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled.display);
       if (isDisabledDisplay || showPrettyDuration && !isStartDatePopoverOpen && !isEndDatePopoverOpen) {
         return ___EmotionJSX(EuiFormControlLayout, formControlLayoutProps, ___EmotionJSX("button", {
+          type: "button",
           className: classNames('euiSuperDatePicker__prettyFormat', {
             'euiSuperDatePicker__prettyFormat--disabled': isDisabled
           }),
@@ -313,6 +323,7 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
             utcOffset: utcOffset,
             timeFormat: timeFormat,
             locale: locale || contextLocale,
+            canRoundRelativeUnits: canRoundRelativeUnits,
             isOpen: _this.state.isStartDatePopoverOpen,
             onPopoverToggle: _this.onStartDatePopoverToggle,
             onPopoverClose: _this.onStartDatePopoverClose,
@@ -333,6 +344,7 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
             utcOffset: utcOffset,
             timeFormat: timeFormat,
             locale: locale || contextLocale,
+            canRoundRelativeUnits: canRoundRelativeUnits,
             roundUp: true,
             isOpen: _this.state.isEndDatePopoverOpen,
             onPopoverToggle: _this.onEndDatePopoverToggle,
@@ -390,6 +402,8 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
         isPaused = _this$props6.isPaused,
         onRefreshChange = _this$props6.onRefreshChange,
         refreshInterval = _this$props6.refreshInterval,
+        refreshMinInterval = _this$props6.refreshMinInterval,
+        refreshIntervalUnits = _this$props6.refreshIntervalUnits,
         showUpdateButton = _this$props6.showUpdateButton,
         dataTestSubj = _this$props6['data-test-subj'],
         _width = _this$props6.width,
@@ -416,7 +430,9 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
       }, isAutoRefreshOnly && onRefreshChange ? ___EmotionJSX(EuiAutoRefresh, {
         isPaused: isPaused,
         refreshInterval: refreshInterval,
-        onRefreshChange: onRefreshChange,
+        minInterval: refreshMinInterval,
+        intervalUnits: refreshIntervalUnits,
+        onRefreshChange: this.onRefreshChange,
         fullWidth: width === 'full',
         compressed: compressed,
         isDisabled: !!isDisabled,
@@ -458,6 +474,7 @@ _defineProperty(EuiSuperDatePickerInternal, "defaultProps", {
   recentlyUsedRanges: [],
   refreshInterval: 1000,
   showUpdateButton: true,
+  canRoundRelativeUnits: true,
   start: 'now-15m',
   timeFormat: 'HH:mm',
   width: 'restricted'
@@ -555,11 +572,16 @@ EuiSuperDatePickerInternal.propTypes = {
     label: PropTypes.string,
     start: PropTypes.oneOfType([PropTypes.oneOf(["now"]), PropTypes.string.isRequired]).isRequired
   }).isRequired).isRequired]),
+  refreshInterval: PropTypes.oneOfType([PropTypes.number, PropTypes.number.isRequired]),
+  refreshMinInterval: PropTypes.number,
   /**
-     * Refresh interval in milliseconds
-     * @default 1000
+     * By default, refresh interval units will be rounded up to next largest unit of time
+     * (for example, 90 seconds will become 2m).
+     *
+     * If you do not want this behavior, you will need to store the user-set `intervalUnits`
+     * (passed by `onRefreshChange`) and manually control it via this prop.
      */
-  refreshInterval: PropTypes.oneOfType([PropTypes.number, PropTypes.number.isRequired]),
+  refreshIntervalUnits: PropTypes.oneOf(["s", "m", "h"]),
   start: PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.oneOf(["now"]), PropTypes.string.isRequired]), PropTypes.oneOfType([PropTypes.oneOf(["now"]), PropTypes.string.isRequired]).isRequired]),
   end: PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.oneOf(["now"]), PropTypes.string.isRequired]), PropTypes.oneOfType([PropTypes.oneOf(["now"]), PropTypes.string.isRequired]).isRequired]),
   /**
@@ -660,6 +682,14 @@ EuiSuperDatePickerInternal.propTypes = {
        */
     responsive: PropTypes.oneOfType([PropTypes.oneOf([false]), PropTypes.arrayOf(PropTypes.any.isRequired).isRequired])
   }),
+  /**
+     * By default, relative units will be rounded up to next largest unit of time
+     * (for example, 90 minutes will become ~ 2 hours).
+     *
+     * If you do not want this behavior and instead wish to keep the exact units
+     * input by the user, set this flag to `false`.
+     */
+  canRoundRelativeUnits: PropTypes.bool,
   timeOptions: PropTypes.shape({
     timeTenseOptions: PropTypes.arrayOf(PropTypes.any.isRequired).isRequired,
     timeUnitsOptions: PropTypes.arrayOf(PropTypes.any.isRequired).isRequired,
@@ -769,10 +799,19 @@ EuiSuperDatePicker.propTypes = {
     start: PropTypes.oneOfType([PropTypes.oneOf(["now"]), PropTypes.string.isRequired]).isRequired
   }).isRequired),
   /**
-     * Refresh interval in milliseconds
-     * @default 1000
+     * Minimum refresh interval in milliseconds
+     * @default 0
      */
   refreshInterval: PropTypes.number,
+  refreshMinInterval: PropTypes.number,
+  /**
+     * By default, refresh interval units will be rounded up to next largest unit of time
+     * (for example, 90 seconds will become 2m).
+     *
+     * If you do not want this behavior, you will need to store the user-set `intervalUnits`
+     * (passed by `onRefreshChange`) and manually control it via this prop.
+     */
+  refreshIntervalUnits: PropTypes.oneOf(["s", "m", "h"]),
   /**
      * @default 'now'
      */
@@ -822,5 +861,13 @@ EuiSuperDatePicker.propTypes = {
     }),
     iconOnly: PropTypes.bool,
     responsive: PropTypes.oneOfType([PropTypes.oneOf([false]), PropTypes.arrayOf(PropTypes.any.isRequired).isRequired])
-  })
+  }),
+  /**
+     * By default, relative units will be rounded up to next largest unit of time
+     * (for example, 90 minutes will become ~ 2 hours).
+     *
+     * If you do not want this behavior and instead wish to keep the exact units
+     * input by the user, set this flag to `false`.
+     */
+  canRoundRelativeUnits: PropTypes.bool
 };

package/es/components/empty_prompt/empty_prompt.js

@@ -1,10 +1,5 @@
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 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; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 /*
@@ -15,10 +10,10 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from "prop-types";
 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';
@@ -26,14 +21,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,
@@ -53,41 +43,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,
@@ -95,32 +85,39 @@ 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);
 };
 EuiEmptyPrompt.propTypes = {
   className: PropTypes.string,
@@ -145,7 +142,7 @@ EuiEmptyPrompt.propTypes = {
   /*
        * Accepts any [EuiIcon.type](#/display/icons)
        */
-  iconType: PropTypes.oneOfType([PropTypes.oneOf(["accessibility", "addDataApp", "advancedSettingsApp", "agentApp", "aggregate", "analyzeEvent", "annotation", "apmApp", "apmTrace", "appSearchApp", "apps", "arrowDown", "arrowLeft", "arrowRight", "arrowUp", "arrowStart", "arrowEnd", "article", "asterisk", "at", "auditbeatApp", "beaker", "bell", "bellSlash", "beta", "bolt", "boxesHorizontal", "boxesVertical", "branch", "branchUser", "broom", "brush", "bug", "bullseye", "calendar", "canvasApp", "casesApp", "check", "checkInCircleFilled", "cheer", "classificationJob", "clock", "cloudDrizzle", "cloudStormy", "cloudSunny", "cluster", "codeApp", "color", "compute", "console", "consoleApp", "container", "continuityAbove", "continuityAboveBelow", "continuityBelow", "continuityWithin", "controlsHorizontal", "controlsVertical", "copy", "copyClipboard", "createAdvancedJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crosshairs", "currency", "cut", "dashboardApp", "dataVisualizer", "database", "desktop", "devToolsApp", "discoverApp", "discuss", "document", "documentEdit", "documentation", "documents", "dot", "dotInCircle", "doubleArrowLeft", "doubleArrowRight", "download", "editorAlignCenter", "editorAlignLeft", "editorAlignRight", "editorBold", "editorChecklist", "editorCodeBlock", "editorComment", "editorDistributeHorizontal", "editorDistributeVertical", "editorHeading", "editorItalic", "editorItemAlignBottom", "editorItemAlignCenter", "editorItemAlignLeft", "editorItemAlignMiddle", "editorItemAlignRight", "editorItemAlignTop", "editorLink", "editorOrderedList", "editorPositionBottomLeft", "editorPositionBottomRight", "editorPositionTopLeft", "editorPositionTopRight", "editorRedo", "editorStrike", "editorTable", "editorUnderline", "editorUndo", "editorUnorderedList", "email", "empty", "emsApp", "endpoint", "eql", "eraser", "error", "esqlVis", "exit", "expand", "expandMini", "exportAction", "eye", "eyeClosed", "faceHappy", "faceNeutral", "faceSad", "filebeatApp", "filter", "filterExclude", "filterIgnore", "filterInclude", "filterInCircle", "flag", "fleetApp", "fold", "folderCheck", "folderClosed", "folderExclamation", "folderOpen", "frameNext", "framePrevious", "fullScreen", "fullScreenExit", "function", "gear", "gisApp", "glasses", "globe", "grab", "grabHorizontal", "grabOmnidirectional", "gradient", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "heatmap", "help", "home", "iInCircle", "image", "importAction", "indexClose", "indexEdit", "indexFlush", "indexManagementApp", "indexMapping", "indexOpen", "indexPatternApp", "indexRollupApp", "indexRuntime", "indexSettings", "indexTemporary", "infinity", "inputOutput", "inspect", "invert", "ip", "key", "keyboard", "kqlField", "kqlFunction", "kqlOperand", "kqlSelector", "kqlValue", "kubernetesNode", "kubernetesPod", "launch", "layers", "lensApp", "lettering", "lineDashed", "lineDotted", "lineSolid", "link", "list", "listAdd", "lock", "lockOpen", "logoAWS", "logoAWSMono", "logoAerospike", "logoApache", "logoAppSearch", "logoAzure", "logoAzureMono", "logoBeats", "logoBusinessAnalytics", "logoCeph", "logoCloud", "logoCloudEnterprise", "logoCode", "logoCodesandbox", "logoCouchbase", "logoDocker", "logoDropwizard", "logoElastic", "logoElasticStack", "logoElasticsearch", "logoEnterpriseSearch", "logoEtcd", "logoGCP", "logoGCPMono", "logoGithub", "logoGmail", "logoGolang", "logoGoogleG", "logoHAproxy", "logoIBM", "logoIBMMono", "logoKafka", "logoKibana", "logoKubernetes", "logoLogging", "logoLogstash", "logoMaps", "logoMemcached", "logoMetrics", "logoMongodb", "logoMySQL", "logoNginx", "logoObservability", "logoOsquery", "logoPhp", "logoPostgres", "logoPrometheus", "logoRabbitmq", "logoRedis", "logoSecurity", "logoSiteSearch", "logoSketch", "logoSlack", "logoUptime", "logoVulnerabilityManagement", "logoWebhook", "logoWindows", "logoWorkplaceSearch", "logsApp", "logstashFilter", "logstashIf", "logstashInput", "logstashOutput", "logstashQueue", "machineLearningApp", "magnet", "magnifyWithExclamation", "magnifyWithMinus", "magnifyWithPlus", "managementApp", "mapMarker", "memory", "menu", "menuDown", "menuLeft", "menuRight", "menuUp", "merge", "metricbeatApp", "metricsApp", "minimize", "minus", "minusInCircle", "minusInCircleFilled", "mobile", "monitoringApp", "moon", "namespace", "nested", "node", "notebookApp", "number", "offline", "online", "outlierDetectionJob", "package", "packetbeatApp", "pageSelect", "pagesSelect", "palette", "paperClip", "partial", "pause", "payment", "pencil", "percent", "pin", "pinFilled", "pipeBreaks", "pipelineApp", "pipeNoBreaks", "pivot", "play", "playFilled", "plus", "plusInCircle", "plusInCircleFilled", "popout", "push", "questionInCircle", "quote", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "returnKey", "save", "savedObjectsApp", "scale", "search", "searchProfilerApp", "securityAnalyticsApp", "securityApp", "securitySignal", "securitySignalDetected", "securitySignalResolved", "sessionViewer", "shard", "share", "snowflake", "sortAscending", "sortDescending", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spaces", "spacesApp", "sparkles", "sqlApp", "starEmpty", "starEmptySpace", "starFilled", "starFilledSpace", "starMinusEmpty", "starMinusFilled", "starPlusEmpty", "starPlusFilled", "stats", "stop", "stopFilled", "stopSlash", "storage", "string", "submodule", "sun", "swatchInput", "symlink", "tableDensityCompact", "tableDensityExpanded", "tableDensityNormal", "tableOfContents", "tag", "tear", "temperature", "timeline", "timelineWithArrow", "timelionApp", "timeRefresh", "timeslider", "training", "transitionLeftIn", "transitionLeftOut", "transitionTopIn", "transitionTopOut", "trash", "unfold", "unlink", "upgradeAssistantApp", "uptimeApp", "user", "userAvatar", "users", "usersRolesApp", "vector", "videoPlayer", "visArea", "visAreaStacked", "visBarHorizontal", "visBarHorizontalStacked", "visBarVertical", "visBarVerticalStacked", "visGauge", "visGoal", "visLine", "visMapCoordinate", "visMapRegion", "visMetric", "visPie", "visTable", "visTagCloud", "visText", "visTimelion", "visVega", "visVisualBuilder", "visualizeApp", "vulnerabilityManagementApp", "warning", "alert", "watchesApp", "wordWrap", "wordWrapDisabled", "workplaceSearchApp", "wrench", "tokenAlias", "tokenAnnotation", "tokenArray", "tokenBinary", "tokenBoolean", "tokenClass", "tokenCompletionSuggester", "tokenConstant", "tokenDate", "tokenElement", "tokenEnum", "tokenEnumMember", "tokenEvent", "tokenException", "tokenField", "tokenFile", "tokenFlattened", "tokenFunction", "tokenGeo", "tokenHistogram", "tokenInterface", "tokenIP", "tokenJoin", "tokenKey", "tokenKeyword", "tokenMethod", "tokenMetricCounter", "tokenMetricGauge", "tokenModule", "tokenNamespace", "tokenNested", "tokenNull", "tokenNumber", "tokenObject", "tokenOperator", "tokenPackage", "tokenParameter", "tokenPercolator", "tokenProperty", "tokenRange", "tokenRankFeature", "tokenRankFeatures", "tokenRepo", "tokenSearchType", "tokenShape", "tokenString", "tokenStruct", "tokenSymbol", "tokenTag", "tokenText", "tokenTokenCount", "tokenVariable", "tokenVectorDense", "tokenDenseVector", "tokenVectorSparse"]).isRequired, PropTypes.string.isRequired, PropTypes.elementType.isRequired]),
+  iconType: PropTypes.oneOfType([PropTypes.oneOf(["accessibility", "addDataApp", "advancedSettingsApp", "agentApp", "aggregate", "analyzeEvent", "annotation", "apmApp", "apmTrace", "appSearchApp", "apps", "arrowDown", "arrowLeft", "arrowRight", "arrowUp", "arrowStart", "arrowEnd", "article", "asterisk", "at", "auditbeatApp", "beaker", "bell", "bellSlash", "beta", "bolt", "boxesHorizontal", "boxesVertical", "branch", "branchUser", "broom", "brush", "bug", "bullseye", "calendar", "canvasApp", "casesApp", "check", "checkInCircleFilled", "cheer", "classificationJob", "clock", "cloudDrizzle", "cloudStormy", "cloudSunny", "cluster", "codeApp", "color", "compute", "console", "consoleApp", "container", "continuityAbove", "continuityAboveBelow", "continuityBelow", "continuityWithin", "controlsHorizontal", "controlsVertical", "copy", "copyClipboard", "createAdvancedJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crosshairs", "currency", "cut", "dashboardApp", "dataVisualizer", "database", "desktop", "devToolsApp", "discoverApp", "discuss", "document", "documentEdit", "documentation", "documents", "dot", "dotInCircle", "doubleArrowLeft", "doubleArrowRight", "download", "editorAlignCenter", "editorAlignLeft", "editorAlignRight", "editorBold", "editorChecklist", "editorCodeBlock", "editorComment", "editorDistributeHorizontal", "editorDistributeVertical", "editorHeading", "editorItalic", "editorItemAlignBottom", "editorItemAlignCenter", "editorItemAlignLeft", "editorItemAlignMiddle", "editorItemAlignRight", "editorItemAlignTop", "editorLink", "editorOrderedList", "editorPositionBottomLeft", "editorPositionBottomRight", "editorPositionTopLeft", "editorPositionTopRight", "editorRedo", "editorStrike", "editorTable", "editorUnderline", "editorUndo", "editorUnorderedList", "email", "empty", "emsApp", "endpoint", "eql", "eraser", "error", "esqlVis", "exit", "expand", "expandMini", "exportAction", "eye", "eyeClosed", "faceHappy", "faceNeutral", "faceSad", "filebeatApp", "filter", "filterExclude", "filterIgnore", "filterInclude", "filterInCircle", "flag", "fleetApp", "fold", "folderCheck", "folderClosed", "folderExclamation", "folderOpen", "frameNext", "framePrevious", "fullScreen", "fullScreenExit", "function", "gear", "gisApp", "glasses", "globe", "grab", "grabHorizontal", "grabOmnidirectional", "gradient", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "heatmap", "help", "home", "iInCircle", "image", "importAction", "index", "indexClose", "indexEdit", "indexFlush", "indexManagementApp", "indexMapping", "indexOpen", "indexPatternApp", "indexRollupApp", "indexRuntime", "indexSettings", "indexTemporary", "infinity", "inputOutput", "inspect", "invert", "ip", "key", "keyboard", "kqlField", "kqlFunction", "kqlOperand", "kqlSelector", "kqlValue", "kubernetesNode", "kubernetesPod", "launch", "layers", "lensApp", "lettering", "lineDashed", "lineDotted", "lineSolid", "link", "list", "listAdd", "lock", "lockOpen", "logoAWS", "logoAWSMono", "logoAerospike", "logoApache", "logoAppSearch", "logoAzure", "logoAzureMono", "logoBeats", "logoBusinessAnalytics", "logoCeph", "logoCloud", "logoCloudEnterprise", "logoCode", "logoCodesandbox", "logoCouchbase", "logoDocker", "logoDropwizard", "logoElastic", "logoElasticStack", "logoElasticsearch", "logoEnterpriseSearch", "logoEtcd", "logoGCP", "logoGCPMono", "logoGithub", "logoGmail", "logoGolang", "logoGoogleG", "logoHAproxy", "logoIBM", "logoIBMMono", "logoKafka", "logoKibana", "logoKubernetes", "logoLogging", "logoLogstash", "logoMaps", "logoMemcached", "logoMetrics", "logoMongodb", "logoMySQL", "logoNginx", "logoObservability", "logoOsquery", "logoPhp", "logoPostgres", "logoPrometheus", "logoRabbitmq", "logoRedis", "logoSecurity", "logoSiteSearch", "logoSketch", "logoSlack", "logoUptime", "logoVulnerabilityManagement", "logoWebhook", "logoWindows", "logoWorkplaceSearch", "logsApp", "logstashFilter", "logstashIf", "logstashInput", "logstashOutput", "logstashQueue", "machineLearningApp", "magnet", "magnifyWithExclamation", "magnifyWithMinus", "magnifyWithPlus", "managementApp", "mapMarker", "memory", "menu", "menuDown", "menuLeft", "menuRight", "menuUp", "merge", "metricbeatApp", "metricsApp", "minimize", "minus", "minusInCircle", "minusInCircleFilled", "mobile", "monitoringApp", "moon", "namespace", "nested", "node", "notebookApp", "number", "offline", "online", "outlierDetectionJob", "package", "packetbeatApp", "pageSelect", "pagesSelect", "palette", "paperClip", "partial", "pause", "payment", "pencil", "percent", "pin", "pinFilled", "pipeBreaks", "pipelineApp", "pipeNoBreaks", "pivot", "play", "playFilled", "plus", "plusInCircle", "plusInCircleFilled", "popout", "push", "questionInCircle", "quote", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "returnKey", "save", "savedObjectsApp", "scale", "search", "searchProfilerApp", "securityAnalyticsApp", "securityApp", "securitySignal", "securitySignalDetected", "securitySignalResolved", "sessionViewer", "shard", "share", "snowflake", "sortAscending", "sortDescending", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spaces", "spacesApp", "sparkles", "sqlApp", "starEmpty", "starEmptySpace", "starFilled", "starFilledSpace", "starMinusEmpty", "starMinusFilled", "starPlusEmpty", "starPlusFilled", "stats", "stop", "stopFilled", "stopSlash", "storage", "string", "submodule", "sun", "swatchInput", "symlink", "tableDensityCompact", "tableDensityExpanded", "tableDensityNormal", "tableOfContents", "tag", "tear", "temperature", "timeline", "timelineWithArrow", "timelionApp", "timeRefresh", "timeslider", "training", "transitionLeftIn", "transitionLeftOut", "transitionTopIn", "transitionTopOut", "trash", "unfold", "unlink", "upgradeAssistantApp", "uptimeApp", "user", "userAvatar", "users", "usersRolesApp", "vector", "videoPlayer", "visArea", "visAreaStacked", "visBarHorizontal", "visBarHorizontalStacked", "visBarVertical", "visBarVerticalStacked", "visGauge", "visGoal", "visLine", "visMapCoordinate", "visMapRegion", "visMetric", "visPie", "visTable", "visTagCloud", "visText", "visTimelion", "visVega", "visVisualBuilder", "visualizeApp", "vulnerabilityManagementApp", "warning", "alert", "watchesApp", "wordWrap", "wordWrapDisabled", "workplaceSearchApp", "wrench", "tokenAlias", "tokenAnnotation", "tokenArray", "tokenBinary", "tokenBoolean", "tokenClass", "tokenCompletionSuggester", "tokenConstant", "tokenDate", "tokenElement", "tokenEnum", "tokenEnumMember", "tokenEvent", "tokenException", "tokenField", "tokenFile", "tokenFlattened", "tokenFunction", "tokenGeo", "tokenHistogram", "tokenInterface", "tokenIP", "tokenJoin", "tokenKey", "tokenKeyword", "tokenMethod", "tokenMetricCounter", "tokenMetricGauge", "tokenModule", "tokenNamespace", "tokenNested", "tokenNull", "tokenNumber", "tokenObject", "tokenOperator", "tokenPackage", "tokenParameter", "tokenPercolator", "tokenProperty", "tokenRange", "tokenRankFeature", "tokenRankFeatures", "tokenRepo", "tokenSearchType", "tokenShape", "tokenString", "tokenStruct", "tokenSymbol", "tokenTag", "tokenText", "tokenTokenCount", "tokenVariable", "tokenVectorDense", "tokenDenseVector", "tokenVectorSparse"]).isRequired, PropTypes.string.isRequired, PropTypes.elementType.isRequired]),
   /**
        * Color for `iconType` when passed as an `IconType`
        */