@elastic/eui 95.3.0 → 95.5.0

package/test-env/components/date_picker/super_date_picker/quick_select_popover/quick_select_panel.styles.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiQuickSelectPanelStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../../../global_styling");
+/*
+ * 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.
+ */
+
+var euiQuickSelectPanelStyles = exports.euiQuickSelectPanelStyles = function euiQuickSelectPanelStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiQuickSelectPanel: /*#__PURE__*/(0, _react.css)("&:not(:first-child){", (0, _global_styling.logicalCSS)('border-top', euiTheme.border.thin), " ", (0, _global_styling.logicalCSS)('padding-top', euiTheme.size.m), " ", (0, _global_styling.logicalCSS)('margin-top', euiTheme.size.m), ";};label:euiQuickSelectPanel;"),
+    euiQuickSelectPanel__title: /*#__PURE__*/(0, _react.css)("float:left;", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.m), ";;label:euiQuickSelectPanel__title;"),
+    euiQuickSelectPanel__section: /*#__PURE__*/(0, _react.css)("clear:both;", (0, _global_styling.logicalCSS)('margin-top', euiTheme.size.s), " ", (0, _global_styling.logicalCSS)('max-height', (0, _global_styling.mathWithUnits)(euiTheme.size.m, function (x) {
+      return x * 12;
+    })), " overflow:hidden;", (0, _global_styling.logicalCSSWithFallback)('overflow-y', 'auto'), " ", (0, _global_styling.euiScrollBarStyles)(euiThemeContext), " ", (0, _global_styling.euiFontSize)(euiThemeContext, 's'), ";;label:euiQuickSelectPanel__section;")
+  };
+};

package/test-env/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js

@@ -11,12 +11,13 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _services = require("../../../../services");
+var _i18n = require("../../../i18n");
 var _button = require("../../../button");
 var _icon = require("../../../icon");
 var _popover = require("../../../popover");
-var _title = require("../../../title");
-var _text = require("../../../text");
-var _i18n = require("../../../i18n");
+var _quick_select_popover = require("./quick_select_popover.styles");
+var _quick_select_panel = require("./quick_select_panel");
 var _quick_select = require("./quick_select");
 var _commonly_used_time_ranges = require("./commonly_used_time_ranges");
 var _recently_used = require("./recently_used");
@@ -69,10 +70,11 @@ var EuiQuickSelectPopover = exports.EuiQuickSelectPopover = function EuiQuickSel
     }
   }, [_applyTime, closePopover]);
   var buttonlabel = (0, _i18n.useEuiI18n)('euiQuickSelectPopover.buttonLabel', 'Date quick select');
+  var styles = (0, _services.useEuiMemoizedStyles)(_quick_select_popover.euiQuickSelectPopoverStyles);
   var quickSelectButton = (0, _react2.jsx)(_button.EuiButtonEmpty, {
-    className: "euiFormControlLayout__prepend",
+    css: styles.euiQuickSelectPopoverButton,
     contentProps: {
-      className: 'euiQuickSelectPopover__buttonContent'
+      css: styles.euiQuickSelectPopoverButton__content
     },
     onClick: togglePopover,
     "aria-label": buttonlabel,
@@ -118,6 +120,7 @@ EuiQuickSelectPopover.propTypes = {
     start: _propTypes.default.oneOfType([_propTypes.default.oneOf(["now"]), _propTypes.default.string.isRequired]).isRequired
   }).isRequired).isRequired,
   refreshInterval: _propTypes.default.number.isRequired,
+  refreshMinInterval: _propTypes.default.number,
   intervalUnits: _propTypes.default.any,
   start: _propTypes.default.string.isRequired,
   timeOptions: _propTypes.default.shape({
@@ -147,10 +150,12 @@ var EuiQuickSelectPanels = exports.EuiQuickSelectPanels = function EuiQuickSelec
     customQuickSelectRender = _ref3.customQuickSelectRender,
     isPaused = _ref3.isPaused,
     refreshInterval = _ref3.refreshInterval,
+    refreshMinInterval = _ref3.refreshMinInterval,
     intervalUnits = _ref3.intervalUnits,
     applyRefreshInterval = _ref3.applyRefreshInterval,
     applyTime = _ref3.applyTime,
     prevQuickSelect = _ref3.prevQuickSelect;
+  var styles = (0, _services.useEuiMemoizedStyles)(_quick_select_popover.euiQuickSelectPopoverStyles);
   var quickSelectElement = (0, _react2.jsx)(_quick_select.EuiQuickSelect, {
     applyTime: applyTime,
     start: start,
@@ -172,6 +177,7 @@ var EuiQuickSelectPanels = exports.EuiQuickSelectPanels = function EuiQuickSelec
     onRefreshChange: applyRefreshInterval,
     isPaused: isPaused,
     refreshInterval: refreshInterval,
+    minInterval: refreshMinInterval,
     intervalUnits: intervalUnits
   });
   var customQuickSelectPanelsElement = (0, _react.useMemo)(function () {
@@ -181,21 +187,17 @@ var EuiQuickSelectPanels = exports.EuiQuickSelectPanels = function EuiQuickSelec
     return customQuickSelectPanels.map(function (_ref4) {
       var title = _ref4.title,
         content = _ref4.content;
-      return (0, _react2.jsx)("div", {
+      return (0, _react2.jsx)(_quick_select_panel.EuiQuickSelectPanel, {
         key: title,
-        className: "euiQuickSelectPopover__panel"
-      }, (0, _react2.jsx)(_title.EuiTitle, {
-        size: "xxxs"
-      }, (0, _react2.jsx)("span", null, title)), (0, _react2.jsx)(_text.EuiText, {
-        size: "s",
-        className: "euiQuickSelectPopover__section"
+        title: title
       }, /*#__PURE__*/_react.default.cloneElement(content, {
         applyTime: applyTime
-      })));
+      }));
     });
   }, [customQuickSelectPanels, applyTime]);
   return (0, _react2.jsx)("div", {
-    className: "euiQuickSelectPopover__content",
+    css: styles.euiQuickSelectPopover,
+    className: "euiQuickSelectPopover",
     "data-test-subj": "superDatePickerQuickMenu"
   }, customQuickSelectRender ? customQuickSelectRender({
     quickSelect: quickSelectElement,

package/test-env/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.styles.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiQuickSelectPopoverStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../../../global_styling");
+var _form = require("../../../form/form.styles");
+/*
+ * 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.
+ */
+
+var euiQuickSelectPopoverStyles = exports.euiQuickSelectPopoverStyles = function euiQuickSelectPopoverStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var _euiFormVariables = (0, _form.euiFormVariables)(euiThemeContext),
+    maxWidth = _euiFormVariables.maxWidth;
+  return {
+    euiQuickSelectPopover: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', maxWidth), " ", (0, _global_styling.logicalCSS)('max-width', '100%'), ";;label:euiQuickSelectPopover;"),
+    euiQuickSelectPopoverButton: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top-right-radius', 0), " ", (0, _global_styling.logicalCSS)('border-bottom-right-radius', 0), ".euiIcon{", (0, _global_styling.logicalCSS)('width', euiTheme.size.base), ";};label:euiQuickSelectPopoverButton;"),
+    euiQuickSelectPopoverButton__content: /*#__PURE__*/(0, _react.css)("gap:", euiTheme.size.xs, ";;label:euiQuickSelectPopoverButton__content;")
+  };
+};

package/test-env/components/date_picker/super_date_picker/quick_select_popover/recently_used.js

@@ -7,11 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.EuiRecentlyUsed = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _pretty_duration = require("../pretty_duration");
-var _i18n = require("../../../i18n");
 var _services = require("../../../../services");
-var _title = require("../../../title");
+var _i18n = require("../../../i18n");
+var _flex = require("../../../flex");
 var _link = require("../../../link");
+var _pretty_duration = require("../pretty_duration");
+var _quick_select_panel = require("./quick_select_panel");
 var _react2 = require("@emotion/react");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -27,6 +28,7 @@ var EuiRecentlyUsed = exports.EuiRecentlyUsed = function EuiRecentlyUsed(_ref) {
     dateFormat = _ref.dateFormat,
     _ref$recentlyUsedRang = _ref.recentlyUsedRanges,
     recentlyUsedRanges = _ref$recentlyUsedRang === void 0 ? [] : _ref$recentlyUsedRang;
+  var title = (0, _i18n.useEuiI18n)('euiRecentlyUsed.legend', 'Recently used date ranges');
   var legendId = (0, _services.useGeneratedHtmlId)();
   if (recentlyUsedRanges.length === 0) {
     return null;
@@ -40,8 +42,8 @@ var EuiRecentlyUsed = exports.EuiRecentlyUsed = function EuiRecentlyUsed(_ref) {
         end: end
       });
     };
-    return (0, _react2.jsx)("li", {
-      className: "euiQuickSelectPopover__sectionItem euiQuickSelectPopover__sectionItem--recentlyUsed",
+    return (0, _react2.jsx)(_flex.EuiFlexItem, {
+      component: "li",
       key: "".concat(start, "-").concat(end)
     }, (0, _react2.jsx)(_link.EuiLink, {
       onClick: applyRecentlyUsed
@@ -52,19 +54,15 @@ var EuiRecentlyUsed = exports.EuiRecentlyUsed = function EuiRecentlyUsed(_ref) {
       dateFormat: dateFormat
     })));
   });
-  return (0, _react2.jsx)("fieldset", {
-    className: "euiQuickSelectPopover__panel"
-  }, (0, _react2.jsx)(_title.EuiTitle, {
-    size: "xxxs"
-  }, (0, _react2.jsx)("legend", {
-    id: legendId,
-    className: "euiQuickSelectPopover__panelTitle"
-  }, (0, _react2.jsx)(_i18n.EuiI18n, {
-    token: "euiRecentlyUsed.legend",
-    default: "Recently used date ranges"
-  }))), (0, _react2.jsx)("div", {
-    className: "euiQuickSelectPopover__section"
-  }, (0, _react2.jsx)("ul", null, links)));
+  return (0, _react2.jsx)(_quick_select_panel.EuiQuickSelectPanel, {
+    component: "fieldset",
+    titleId: legendId,
+    title: title
+  }, (0, _react2.jsx)(_flex.EuiFlexGroup, {
+    component: "ul",
+    gutterSize: "s",
+    direction: "column"
+  }, links));
 };
 EuiRecentlyUsed.propTypes = {
   applyTime: _propTypes.default.func.isRequired,

package/test-env/components/date_picker/super_date_picker/super_date_picker.a11y.js

@@ -77,7 +77,7 @@ describe('EuiSuperDatePicker', function () {
       cy.checkAxe();
     });
     it('has zero violations when quick select menu is open', function () {
-      cy.get('button.euiFormControlLayout__prepend').click();
+      cy.get('[data-test-subj="superDatePickerToggleQuickMenuButton"]').click();
       cy.get('div.euiPanel').contains('Quick select').should('exist');
       cy.checkAxe();
     });

package/test-env/components/date_picker/super_date_picker/super_date_picker.js

@@ -18,6 +18,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _moment = _interopRequireDefault(require("moment"));
 var _datemath = _interopRequireDefault(require("@elastic/datemath"));
+var _services = require("../../../services");
 var _predicate = require("../../../services/predicate");
 var _context = require("../../context");
 var _date_picker_range = require("../date_picker_range");
@@ -29,6 +30,7 @@ var _super_update_button = require("./super_update_button");
 var _quick_select_popover = require("./quick_select_popover/quick_select_popover");
 var _date_popover_button = require("./date_popover/date_popover_button");
 var _auto_refresh = require("../auto_refresh/auto_refresh");
+var _super_date_picker = require("./super_date_picker.styles");
 var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -218,6 +220,7 @@ var EuiSuperDatePickerInternal = exports.EuiSuperDatePickerInternal = /*#__PURE_
         onRefreshChange = _this$props2.onRefreshChange,
         recentlyUsedRanges = _this$props2.recentlyUsedRanges,
         refreshInterval = _this$props2.refreshInterval,
+        refreshMinInterval = _this$props2.refreshMinInterval,
         refreshIntervalUnits = _this$props2.refreshIntervalUnits,
         isPaused = _this$props2.isPaused,
         isDisabled = _this$props2.isDisabled;
@@ -233,6 +236,7 @@ var EuiSuperDatePickerInternal = exports.EuiSuperDatePickerInternal = /*#__PURE_
         isPaused: isPaused,
         recentlyUsedRanges: recentlyUsedRanges,
         refreshInterval: refreshInterval,
+        refreshMinInterval: refreshMinInterval,
         intervalUnits: refreshIntervalUnits,
         start: start,
         timeOptions: timeOptions
@@ -264,7 +268,8 @@ var EuiSuperDatePickerInternal = exports.EuiSuperDatePickerInternal = /*#__PURE_
         timeFormat = _this$props3.timeFormat,
         utcOffset = _this$props3.utcOffset,
         compressed = _this$props3.compressed,
-        onFocus = _this$props3.onFocus;
+        onFocus = _this$props3.onFocus,
+        styles = _this$props3.memoizedStyles;
       var autoRefreshAppend = !isPaused ? (0, _react2.jsx)(_auto_refresh.EuiAutoRefreshButton, {
         refreshInterval: refreshInterval,
         minInterval: refreshMinInterval,
@@ -280,7 +285,9 @@ var EuiSuperDatePickerInternal = exports.EuiSuperDatePickerInternal = /*#__PURE_
         isLoading: isLoading && !showUpdateButton,
         disabled: !!isDisabled,
         prepend: _this.renderQuickSelect(),
-        append: autoRefreshAppend
+        append: autoRefreshAppend,
+        fullWidth: true,
+        css: [styles.states.euiSuperDatePicker__formControlLayout, isDisabled ? styles.states.disabled : isInvalid ? styles.states.invalid : hasChanged ? styles.states.needsUpdating : styles.states.default]
       };
       if (isQuickSelectOnly) {
         return (0, _react2.jsx)(_form.EuiFormControlLayout, (0, _extends2.default)({
@@ -291,6 +298,7 @@ var EuiSuperDatePickerInternal = exports.EuiSuperDatePickerInternal = /*#__PURE_
       if (isDisabledDisplay || showPrettyDuration && !isStartDatePopoverOpen && !isEndDatePopoverOpen) {
         return (0, _react2.jsx)(_form.EuiFormControlLayout, formControlLayoutProps, (0, _react2.jsx)("button", {
           type: "button",
+          css: styles.euiSuperDatePicker__prettyFormat,
           className: (0, _classnames.default)('euiSuperDatePicker__prettyFormat', {
             'euiSuperDatePicker__prettyFormat--disabled': isDisabled
           }),
@@ -305,12 +313,15 @@ var EuiSuperDatePickerInternal = exports.EuiSuperDatePickerInternal = /*#__PURE_
           dateFormat: dateFormat
         })));
       }
+      var rangeCssStyles = [styles.euiSuperDatePicker__range, formControlLayoutProps.css];
       return (0, _react2.jsx)(_context.EuiI18nConsumer, null, function (_ref4) {
         var contextLocale = _ref4.locale;
         return (0, _react2.jsx)(_date_picker_range.EuiDatePickerRange, (0, _extends2.default)({}, formControlLayoutProps, {
+          css: rangeCssStyles,
           isCustom: true,
           iconType: false,
           startDateControl: (0, _react2.jsx)(_date_popover_button.EuiDatePopoverButton, {
+            css: styles.euiSuperDatePicker__rangeInput,
             className: "euiSuperDatePicker__startPopoverButton",
             compressed: compressed,
             position: "start",
@@ -333,6 +344,7 @@ var EuiSuperDatePickerInternal = exports.EuiSuperDatePickerInternal = /*#__PURE_
             }
           }),
           endDateControl: (0, _react2.jsx)(_date_popover_button.EuiDatePopoverButton, {
+            css: styles.euiSuperDatePicker__rangeInput,
             position: "end",
             compressed: compressed,
             needsUpdating: hasChanged,
@@ -410,22 +422,20 @@ var EuiSuperDatePickerInternal = exports.EuiSuperDatePickerInternal = /*#__PURE_
         _width = _this$props6.width,
         isQuickSelectOnly = _this$props6.isQuickSelectOnly,
         compressed = _this$props6.compressed,
-        className = _this$props6.className;
+        className = _this$props6.className,
+        styles = _this$props6.memoizedStyles;
       var _this$state2 = this.state,
         hasChanged = _this$state2.hasChanged,
         isInvalid = _this$state2.isInvalid;
-
-      // Force reduction in width if showing quick select only
-      var width = isQuickSelectOnly ? 'auto' : _width;
       var classes = (0, _classnames.default)('euiSuperDatePicker', className, {
-        'euiSuperDatePicker--needsUpdating': hasChanged && !isDisabled && !isInvalid,
-        'euiSuperDatePicker--noUpdateButton': !showUpdateButton,
-        'euiSuperDatePicker--isAutoRefreshOnly': isAutoRefreshOnly,
-        'euiSuperDatePicker--isQuickSelectOnly': isQuickSelectOnly,
-        'euiSuperDatePicker--fullWidth': width === 'full',
-        'euiSuperDatePicker--autoWidth': width === 'auto'
+        'euiSuperDatePicker--needsUpdating': hasChanged && !isDisabled && !isInvalid
       });
+
+      // Force reduction in width if showing quick select only
+      var width = isQuickSelectOnly ? 'auto' : _width !== null && _width !== void 0 ? _width : 'restricted';
+      var cssStyles = [styles.euiSuperDatePicker, styles.widths[width], !showUpdateButton && styles.noUpdateButton[width], isAutoRefreshOnly && styles.isAutoRefreshOnly[width], isQuickSelectOnly && styles.isQuickSelectOnly];
       return (0, _react2.jsx)("div", {
+        css: cssStyles,
         className: classes,
         "data-test-subj": dataTestSubj
       }, isAutoRefreshOnly && onRefreshChange ? (0, _react2.jsx)(_auto_refresh.EuiAutoRefresh, {
@@ -635,6 +645,7 @@ EuiSuperDatePickerInternal.propTypes = {
      * input by the user, set this flag to `false`.
      */
   canRoundRelativeUnits: _propTypes.default.bool,
+  memoizedStyles: _propTypes.default.any.isRequired,
   timeOptions: _propTypes.default.shape({
     timeTenseOptions: _propTypes.default.arrayOf(_propTypes.default.any.isRequired).isRequired,
     timeUnitsOptions: _propTypes.default.arrayOf(_propTypes.default.any.isRequired).isRequired,
@@ -652,10 +663,12 @@ EuiSuperDatePickerInternal.propTypes = {
   }).isRequired
 };
 var EuiSuperDatePicker = exports.EuiSuperDatePicker = function EuiSuperDatePicker(props) {
+  var styles = (0, _services.useEuiMemoizedStyles)(_super_date_picker.euiSuperDatePickerStyles);
   return (0, _react2.jsx)(_time_options.RenderI18nTimeOptions, null, function (timeOptions) {
     return (0, _react2.jsx)(EuiSuperDatePickerInternal, (0, _extends2.default)({}, props, {
       timeOptions: timeOptions,
-      commonlyUsedRanges: props.commonlyUsedRanges || timeOptions.commonDurationRanges
+      commonlyUsedRanges: props.commonlyUsedRanges || timeOptions.commonDurationRanges,
+      memoizedStyles: styles
     }));
   });
 };

package/test-env/components/date_picker/super_date_picker/super_date_picker.styles.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiSuperDatePickerStyles = exports._buttonStyles = void 0;
+var _react = require("@emotion/react");
+var _services = require("../../../services");
+var _global_styling = require("../../../global_styling");
+var _form = require("../../form/form.styles");
+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.
+ */
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1e4qgxg-euiSuperDatePicker__range",
+  styles: "flex-grow:1;overflow:hidden;label:euiSuperDatePicker__range;"
+} : {
+  name: "1e4qgxg-euiSuperDatePicker__range",
+  styles: "flex-grow:1;overflow:hidden;label:euiSuperDatePicker__range;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var euiSuperDatePickerStyles = exports.euiSuperDatePickerStyles = function euiSuperDatePickerStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme,
+    colorMode = euiThemeContext.colorMode;
+  var forms = (0, _form.euiFormVariables)(euiThemeContext);
+  var inputWidth = euiTheme.base * 30;
+  var buttonWidth = euiTheme.base * 7; // @see _button_display.styles.ts
+  var gap = euiTheme.size.s;
+
+  // Default restricted width
+  var restrictedWidth = (0, _global_styling.mathWithUnits)(gap, function (gap) {
+    return inputWidth + gap + buttonWidth;
+  });
+
+  // Set a sensible min-width for when width is auto
+  var minFormWidth = parseFloat(forms.maxWidth) / 2;
+  var autoMinWidth = (0, _global_styling.mathWithUnits)(gap, function (gap) {
+    return minFormWidth + gap + buttonWidth;
+  });
+
+  // Needs updating colors
+  var needsUpdatingBackgroundColor = colorMode === 'DARK' ? (0, _services.shade)(euiTheme.colors.success, 0.7) : (0, _services.tint)(euiTheme.colors.success, 0.9);
+  var needsUpdatingTextColor = (0, _services.makeHighContrastColor)(euiTheme.colors.success)(needsUpdatingBackgroundColor);
+  return {
+    euiSuperDatePicker: /*#__PURE__*/(0, _react.css)("display:flex;gap:", gap, ";", (0, _global_styling.logicalCSS)('max-width', '100%'), " ", (0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 'm'), "{", (0, _global_styling.logicalCSS)('width', '100%'), ";}.euiFormControlLayout__childrenWrapper:last-child{", (0, _global_styling.logicalCSS)('border-top-right-radius', 'inherit'), " ", (0, _global_styling.logicalCSS)('border-bottom-right-radius', 'inherit'), ";};label:euiSuperDatePicker;"),
+    widths: {
+      restricted: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', restrictedWidth), ";;label:restricted;"),
+      full: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), ";;label:full;"),
+      auto: /*#__PURE__*/(0, _react.css)("display:inline-flex;", (0, _global_styling.logicalCSS)('min-width', "min(".concat(autoMinWidth, ", 100%)")), " ", (0, _global_styling.logicalCSS)('width', 'auto'), ";;label:auto;")
+    },
+    // Special rendering cases that override all permutations of the above widths
+    noUpdateButton: {
+      // Skipping css`` and using the `label` key instead to reduce repeat Emotion generated classNames
+      restricted: "\n        label: noUpdateButton;\n        ".concat((0, _global_styling.logicalCSS)('width', "".concat(inputWidth, "px")), ";\n      "),
+      auto: "\n        label: noUpdateButton;\n        ".concat((0, _global_styling.logicalCSS)('min-width', "min(".concat(minFormWidth, "px, 100%)")), ";\n      "),
+      full: "\n        label: noUpdateButton;\n      "
+    },
+    isAutoRefreshOnly: {
+      // display: block over flex is required to have the nested .euiPopover wrap expand to the wrapper width
+      restricted: "\n        label: isAutoRefreshOnly;\n        display: block;\n        ".concat((0, _global_styling.logicalCSS)('width', forms.maxWidth), "\n      "),
+      auto: "\n        label: isAutoRefreshOnly;\n      ",
+      full: "\n        label: isAutoRefreshOnly;\n        display: block;\n      "
+    },
+    // isQuickSelectOnly forces `width` to be `auto`
+    isQuickSelectOnly: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', 0), ";;label:isQuickSelectOnly;"),
+    euiSuperDatePicker__range: _ref,
+    euiSuperDatePicker__rangeInput: /*#__PURE__*/(0, _react.css)("flex-grow:1;", (0, _global_styling.logicalCSS)('width', 'auto !important'), ";;label:euiSuperDatePicker__rangeInput;"),
+    euiSuperDatePicker__prettyFormat: /*#__PURE__*/(0, _react.css)(_buttonStyles(euiThemeContext), " text-align:start;;label:euiSuperDatePicker__prettyFormat;"),
+    // Form states
+    states: {
+      euiSuperDatePicker__formControlLayout: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{", (0, _form.euiFormControlDefaultShadow)(euiThemeContext), " box-shadow:none;};label:euiSuperDatePicker__formControlLayout;"),
+      default: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{color:", forms.textColor, ";background-color:", forms.backgroundColor, ";}.euiDatePopoverButton{", (0, _form.euiFormControlDefaultShadow)(euiThemeContext), " box-shadow:none;}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{--euiFormControlStateColor:", euiTheme.colors.primary, ";background-size:100% 100%;};label:default;"),
+      disabled: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{", (0, _form.euiFormControlDisabledStyles)(euiThemeContext), ";};label:disabled;"),
+      invalid: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{color:", euiTheme.colors.dangerText, ";background-color:", forms.backgroundColor, ";", (0, _form.euiFormControlInvalidStyles)(euiThemeContext), ";};label:invalid;"),
+      needsUpdating: /*#__PURE__*/(0, _react.css)(".euiFormControlLayoutDelimited .euiFormControlLayout__childrenWrapper{color:", needsUpdatingTextColor, ";background-color:", needsUpdatingBackgroundColor, ";}.euiFormControlLayoutDelimited__delimiter{color:inherit;}.euiDatePopoverButton{", (0, _form.euiFormControlDefaultShadow)(euiThemeContext), " background-color:inherit;box-shadow:none;}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{--euiFormControlStateColor:", euiTheme.colors.success, ";background-size:100% 100%;};label:needsUpdating;")
+    }
+  };
+};
+var _buttonStyles = exports._buttonStyles = function _buttonStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', '100%'), " ", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.s), " font-size:", (0, _global_styling.euiFontSize)(euiThemeContext, 's').fontSize, ";white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:inherit;background-color:inherit;&:disabled{cursor:not-allowed;}");
+};

package/test-env/components/empty_prompt/empty_prompt.js

@@ -147,7 +147,7 @@ EuiEmptyPrompt.propTypes = {
   /*
        * Accepts any [EuiIcon.type](#/display/icons)
        */
-  iconType: _propTypes.default.oneOfType([_propTypes.default.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", "clickLeft", "clickRight", "clock", "clockCounter", "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", "diff", "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", "errorFilled", "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", "move", "namespace", "nested", "newChat", "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", "warningFilled", "alert", "watchesApp", "wordWrap", "wordWrapDisabled", "workplaceSearchApp", "wrench", "tokenAlias", "tokenAnnotation", "tokenArray", "tokenBinary", "tokenBoolean", "tokenClass", "tokenCompletionSuggester", "tokenConstant", "tokenDate", "tokenDimension", "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.default.string.isRequired, _propTypes.default.elementType.isRequired]),
+  iconType: _propTypes.default.oneOfType([_propTypes.default.oneOf(["accessibility", "addDataApp", "advancedSettingsApp", "agentApp", "aggregate", "analyzeEvent", "annotation", "anomalyChart", "anomalySwimLane", "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", "changePointDetection", "check", "checkInCircleFilled", "cheer", "classificationJob", "clickLeft", "clickRight", "clock", "clockCounter", "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", "diff", "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", "errorFilled", "esqlVis", "exit", "expand", "expandMini", "exportAction", "eye", "eyeClosed", "faceHappy", "faceNeutral", "faceSad", "fieldStatistics", "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", "logPatternAnalysis", "logRateAnalysis", "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", "minusInSquare", "mobile", "monitoringApp", "moon", "move", "namespace", "nested", "newChat", "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", "plusInSquare", "popout", "push", "questionInCircle", "quote", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "returnKey", "save", "savedObjectsApp", "scale", "search", "searchProfilerApp", "securityAnalyticsApp", "securityApp", "securitySignal", "securitySignalDetected", "securitySignalResolved", "sessionViewer", "shard", "share", "singleMetricViewer", "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", "warningFilled", "alert", "watchesApp", "wordWrap", "wordWrapDisabled", "workplaceSearchApp", "wrench", "tokenAlias", "tokenAnnotation", "tokenArray", "tokenBinary", "tokenBoolean", "tokenClass", "tokenCompletionSuggester", "tokenConstant", "tokenDate", "tokenDimension", "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.default.string.isRequired, _propTypes.default.elementType.isRequired]),
   /**
        * Color for `iconType` when passed as an `IconType`
        */

package/test-env/components/facet/facet_button.js

@@ -151,7 +151,7 @@ EuiFacetButton.propTypes = {
   /**
      * Any `type` accepted by EuiIcon
      */
-  iconType: _propTypes.default.oneOfType([_propTypes.default.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", "clickLeft", "clickRight", "clock", "clockCounter", "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", "diff", "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", "errorFilled", "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", "move", "namespace", "nested", "newChat", "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", "warningFilled", "alert", "watchesApp", "wordWrap", "wordWrapDisabled", "workplaceSearchApp", "wrench", "tokenAlias", "tokenAnnotation", "tokenArray", "tokenBinary", "tokenBoolean", "tokenClass", "tokenCompletionSuggester", "tokenConstant", "tokenDate", "tokenDimension", "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.default.string.isRequired, _propTypes.default.elementType.isRequired]),
+  iconType: _propTypes.default.oneOfType([_propTypes.default.oneOf(["accessibility", "addDataApp", "advancedSettingsApp", "agentApp", "aggregate", "analyzeEvent", "annotation", "anomalyChart", "anomalySwimLane", "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", "changePointDetection", "check", "checkInCircleFilled", "cheer", "classificationJob", "clickLeft", "clickRight", "clock", "clockCounter", "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", "diff", "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", "errorFilled", "esqlVis", "exit", "expand", "expandMini", "exportAction", "eye", "eyeClosed", "faceHappy", "faceNeutral", "faceSad", "fieldStatistics", "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", "logPatternAnalysis", "logRateAnalysis", "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", "minusInSquare", "mobile", "monitoringApp", "moon", "move", "namespace", "nested", "newChat", "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", "plusInSquare", "popout", "push", "questionInCircle", "quote", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "returnKey", "save", "savedObjectsApp", "scale", "search", "searchProfilerApp", "securityAnalyticsApp", "securityApp", "securitySignal", "securitySignalDetected", "securitySignalResolved", "sessionViewer", "shard", "share", "singleMetricViewer", "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", "warningFilled", "alert", "watchesApp", "wordWrap", "wordWrapDisabled", "workplaceSearchApp", "wrench", "tokenAlias", "tokenAnnotation", "tokenArray", "tokenBinary", "tokenBoolean", "tokenClass", "tokenCompletionSuggester", "tokenConstant", "tokenDate", "tokenDimension", "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.default.string.isRequired, _propTypes.default.elementType.isRequired]),
   /**
      * Can only be one side `left` or `right`
      */