@elastic/eui 107.0.0 → 108.0.0

package/es/components/form/form_control_layout/form_control_layout_delimited.js

@@ -19,7 +19,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { useEuiMemoizedStyles, cloneElementWithCss, useEuiTheme, useEuiThemeRefreshVariant } from '../../../services';
+import { useEuiMemoizedStyles, cloneElementWithCss, useEuiTheme } from '../../../services';
 import { useEuiI18n } from '../../i18n';
 import { EuiIcon } from '../../icon';
 import { EuiText } from '../../text';
@@ -35,8 +35,6 @@ export var EuiFormControlLayoutDelimited = function EuiFormControlLayoutDelimite
     className = _ref.className,
     _fullWidth = _ref.fullWidth,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var euiThemeContext = useEuiTheme();
-  var isRefreshVariant = useEuiThemeRefreshVariant('formVariant');
   var _useFormContext = useFormContext(),
     defaultFullWidth = _useFormContext.defaultFullWidth;
   var fullWidth = _fullWidth !== null && _fullWidth !== void 0 ? _fullWidth : defaultFullWidth;
@@ -49,7 +47,7 @@ export var EuiFormControlLayoutDelimited = function EuiFormControlLayoutDelimite
   });
   var styles = useEuiMemoizedStyles(euiFormControlLayoutDelimitedStyles);
   var cssStyles = [styles.delimited, rest.isDisabled && styles.disabled, rest.readOnly && styles.readOnly];
-  var wrapperStyles = [styles.childrenWrapper.delimited, showInvalidState && styles.childrenWrapper.invalid, (_rest$wrapperProps = rest.wrapperProps) === null || _rest$wrapperProps === void 0 ? void 0 : _rest$wrapperProps.css, isRefreshVariant && rest.readOnly && styles.childrenWrapper.readOnly];
+  var wrapperStyles = [styles.childrenWrapper.delimited, showInvalidState && styles.childrenWrapper.invalid, (_rest$wrapperProps = rest.wrapperProps) === null || _rest$wrapperProps === void 0 ? void 0 : _rest$wrapperProps.css, rest.readOnly && styles.childrenWrapper.readOnly];
   return ___EmotionJSX(EuiFormControlLayout, _extends({
     isDelimited: true,
     css: cssStyles,
@@ -64,10 +62,10 @@ export var EuiFormControlLayoutDelimited = function EuiFormControlLayoutDelimite
     value: {
       defaultFullWidth: fullWidth
     }
-  }, startControl && addClassesToControl(euiThemeContext, startControl), ___EmotionJSX(EuiFormControlDelimiter, {
+  }, startControl && addClassesToControl(startControl), ___EmotionJSX(EuiFormControlDelimiter, {
     delimiter: delimiter,
     isInvalid: showInvalidState
-  }), endControl && addClassesToControl(euiThemeContext, endControl)));
+  }), endControl && addClassesToControl(endControl)));
 };
 EuiFormControlLayoutDelimited.propTypes = {
   /**
@@ -85,9 +83,9 @@ EuiFormControlLayoutDelimited.propTypes = {
   delimiter: PropTypes.node,
   className: PropTypes.string
 };
-var addClassesToControl = function addClassesToControl(euiThemeContext, control) {
+var addClassesToControl = function addClassesToControl(control) {
   return cloneElementWithCss(control, {
-    css: euiFormControlLayoutDelimited__input(euiThemeContext),
+    css: euiFormControlLayoutDelimited__input,
     className: classNames(control.props.className, 'euiFormControlLayoutDelimited__input')
   }, 'before');
 };

package/es/components/form/form_control_layout/form_control_layout_delimited.styles.js

@@ -7,51 +7,38 @@
  */
 
 import { css } from '@emotion/react';
-import { isEuiThemeRefreshVariant } from '../../../services';
 import { logicalCSS, mathWithUnits } from '../../../global_styling';
 import { euiFormControlDisabledStyles, euiFormControlReadOnlyStyles, euiFormControlDefaultShadow, euiFormControlInvalidStyles, euiFormControlHoverStyles, euiFormVariables } from '../form.styles';
 export var euiFormControlLayoutDelimitedStyles = function euiFormControlLayoutDelimitedStyles(euiThemeContext) {
   var highContrastMode = euiThemeContext.highContrastMode;
-  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
   var form = euiFormVariables(euiThemeContext);
-  var invalidStyles = isRefreshVariant ? "\n    :not(.euiFormControlLayoutDelimited__input, .euiFormControlLayoutDelimited__delimiter) {\n      ".concat(euiFormControlInvalidStyles(euiThemeContext), "\n    }\n\n    &:focus-within {\n      --euiFormControlStateColor: ").concat(form.borderColor, ";\n      --euiFormControlStateHoverColor: ").concat(form.borderHovered, ";\n    }\n\n    .euiFormControlLayoutDelimited__input {\n      background-color: transparent;\n    }\n  ") : "\n    ".concat(euiFormControlInvalidStyles(euiThemeContext), ";\n  ");
-  var readOnlyStyles = "\n      & .euiFormControlLayoutDelimited__input {\n        outline: none;  \n        box-shadow: none;\n        --euiFormControlStateColor: transparent;\n      }\n    ";
   var delimitedStyles = "\n      /* Transition smoothly between disabled/readOnly background color changes */\n      ".concat(euiFormControlDefaultShadow(euiThemeContext, {
-    withBorder: isRefreshVariant && !highContrastMode ? true : false,
-    withBackground: false,
-    withBackgroundAnimation: isRefreshVariant ? false : true
+    withBorder: !highContrastMode ? true : false,
+    withBackground: false
   }), "\n    ").trim();
-  var delimitedWrapperStyles = "\n    ".concat(euiFormControlDefaultShadow(euiThemeContext, {
-    withBorder: !highContrastMode,
-    withBackground: false,
-    withBackgroundAnimation: true
-  }), "\n  \n    &:hover {\n      ").concat(euiFormControlHoverStyles(euiThemeContext), "\n      box-shadow: none;\n\n      /* using hover styling on wrapper instead of the children inputs */\n      .euiFormControlLayoutDelimited__input:not(:focus) {\n        outline: none;\n        background-color: transparent;\n      }\n    }\n\n    /* adjust for delimited behavior differing from default form layout */\n    > :first-child {\n      ").concat(logicalCSS('border-top-left-radius', 'inherit'), "\n      ").concat(logicalCSS('border-bottom-left-radius', 'inherit'), "\n    }\n\n    > :last-child {\n      ").concat(logicalCSS('border-top-right-radius', 'inherit'), "\n      ").concat(logicalCSS('border-bottom-right-radius', 'inherit'), "\n    }\n  ");
   return {
     // Appended onto existing `euiFormControlLayout` styles
     delimited: /*#__PURE__*/css(delimitedStyles, ";label:delimited;"),
     disabled: /*#__PURE__*/css(euiFormControlDisabledStyles(euiThemeContext), ";label:disabled;"),
-    readOnly: /*#__PURE__*/css(euiFormControlReadOnlyStyles(euiThemeContext), " ", isRefreshVariant && readOnlyStyles, ";;label:readOnly;"),
+    readOnly: /*#__PURE__*/css(euiFormControlReadOnlyStyles(euiThemeContext), " & .euiFormControlLayoutDelimited__input{--euiFormControlStateColor:transparent;outline:none;box-shadow:none;};label:readOnly;"),
     // Appended onto existing `euiFormControlLayout__childrenWrapper` styles
     childrenWrapper: {
-      delimited: /*#__PURE__*/css("display:flex;", isRefreshVariant && delimitedWrapperStyles, ";;label:delimited;"),
+      delimited: /*#__PURE__*/css("display:flex;", euiFormControlDefaultShadow(euiThemeContext, {
+        withBorder: !highContrastMode,
+        withBackground: false
+      }), " &:hover{", euiFormControlHoverStyles(euiThemeContext), " box-shadow:none;.euiFormControlLayoutDelimited__input:not(:focus){outline:none;background-color:transparent;}}>:first-child{", logicalCSS('border-top-left-radius', 'inherit'), " ", logicalCSS('border-bottom-left-radius', 'inherit'), ";}>:last-child{", logicalCSS('border-top-right-radius', 'inherit'), " ", logicalCSS('border-bottom-right-radius', 'inherit'), ";};label:delimited;"),
       invalid: /*#__PURE__*/css(euiFormControlDefaultShadow(euiThemeContext, {
         withBorder: false,
-        withBackgroundColor: false,
-        withBackgroundAnimation: false
-      }), "\n          ".concat(invalidStyles, "\n        "), ";label:invalid;"),
+        withBackgroundColor: false
+      }), "\n          :not(.euiFormControlLayoutDelimited__input, .euiFormControlLayoutDelimited__delimiter) {\n            ".concat(euiFormControlInvalidStyles(euiThemeContext), "\n          }\n\n          &:focus-within {\n            --euiFormControlStateColor: ").concat(form.borderColor, ";\n            --euiFormControlStateHoverColor: ").concat(form.borderHovered, ";\n          }\n\n          .euiFormControlLayoutDelimited__input {\n            background-color: transparent;\n          }\n        "), ";label:invalid;"),
       readOnly: /*#__PURE__*/css(";label:readOnly;")
     }
   };
 };
 export var euiFormControlLayoutDelimited__delimiter = function euiFormControlLayoutDelimited__delimiter(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
-  var experimentalStyles = isRefreshVariant && "\n      ".concat(logicalCSS('padding-horizontal', mathWithUnits([euiTheme.size.xs, euiTheme.size.xxs], function (x, y) {
+  return /*#__PURE__*/css("display:flex;align-self:stretch;flex-grow:0;align-items:center;line-height:1;", logicalCSS('padding-horizontal', mathWithUnits([euiTheme.size.xs, euiTheme.size.xxs], function (x, y) {
     return x + y;
-  })), "\n  ");
-  return /*#__PURE__*/css("display:flex;align-self:stretch;flex-grow:0;align-items:center;line-height:1;", experimentalStyles, ";;label:euiFormControlLayoutDelimited__delimiter;");
+  })), ";;label:euiFormControlLayoutDelimited__delimiter;");
 };
-export var euiFormControlLayoutDelimited__input = function euiFormControlLayoutDelimited__input(euiThemeContext) {
-  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
-  return /*#__PURE__*/css("box-shadow:none;border:none;border-radius:", isRefreshVariant ? '' : '0', ";text-align:center;", logicalCSS('height', '100%'), ";;label:euiFormControlLayoutDelimited__input;");
-};
+export var euiFormControlLayoutDelimited__input = /*#__PURE__*/css("box-shadow:none;border:none;text-align:center;", logicalCSS('height', '100%'), ";;label:euiFormControlLayoutDelimited__input;");

package/es/components/form/form_control_layout/form_control_layout_icons.js

@@ -31,7 +31,7 @@ function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf
 
 import React, { Component } from 'react';
 import PropTypes from "prop-types";
-import { isEuiThemeRefreshVariant, RenderWithEuiStylesMemoizer, RenderWithEuiTheme } from '../../../services';
+import { RenderWithEuiStylesMemoizer } from '../../../services';
 import { EuiIcon } from '../../icon';
 import { EuiLoadingSpinner } from '../../loading';
 import { EuiFormControlLayoutClearButton } from './form_control_layout_clear_button';
@@ -77,7 +77,6 @@ export var EuiFormControlLayoutIcons = /*#__PURE__*/function (_Component) {
     value: function renderCustomIcon() {
       var _this$props2 = this.props,
         icon = _this$props2.icon,
-        compressed = _this$props2.compressed,
         isDisabled = _this$props2.isDisabled;
       if (!icon) {
         return null;
@@ -90,84 +89,63 @@ export var EuiFormControlLayoutIcons = /*#__PURE__*/function (_Component) {
       var iconRef = iconProps.ref,
         side = iconProps.side,
         iconRest = _objectWithoutProperties(iconProps, _excluded);
-      return ___EmotionJSX(RenderWithEuiTheme, null, function (euiThemeContext) {
-        var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
-        return ___EmotionJSX(EuiFormControlLayoutCustomIcon, _extends({
-          size: compressed && !isRefreshVariant ? 's' : 'm',
-          disabled: isDisabled,
-          iconRef: iconRef
-        }, iconRest));
-      });
+      return ___EmotionJSX(EuiFormControlLayoutCustomIcon, _extends({
+        size: "m",
+        disabled: isDisabled,
+        iconRef: iconRef
+      }, iconRest));
     }
   }, {
     key: "renderDropdownIcon",
     value: function renderDropdownIcon() {
       var _this$props3 = this.props,
         isDropdown = _this$props3.isDropdown,
-        compressed = _this$props3.compressed,
         isDisabled = _this$props3.isDisabled;
       if (!isDropdown) {
         return null;
       }
-      return ___EmotionJSX(RenderWithEuiTheme, null, function (euiThemeContext) {
-        var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
-        return ___EmotionJSX(EuiFormControlLayoutCustomIcon, {
-          size: compressed && !isRefreshVariant ? 's' : 'm',
-          disabled: isDisabled,
-          type: "arrowDown"
-        });
+      return ___EmotionJSX(EuiFormControlLayoutCustomIcon, {
+        size: "m",
+        disabled: isDisabled,
+        type: "arrowDown"
       });
     }
   }, {
     key: "renderLoadingSpinner",
     value: function renderLoadingSpinner() {
-      var _this$props4 = this.props,
-        isLoading = _this$props4.isLoading,
-        compressed = _this$props4.compressed;
+      var isLoading = this.props.isLoading;
       if (!isLoading) {
         return null;
       }
-      return ___EmotionJSX(RenderWithEuiTheme, null, function (euiThemeContext) {
-        var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
-        return ___EmotionJSX(EuiLoadingSpinner, {
-          size: compressed && !isRefreshVariant ? 's' : 'm'
-        });
+      return ___EmotionJSX(EuiLoadingSpinner, {
+        size: "m"
       });
     }
   }, {
     key: "renderClearButton",
     value: function renderClearButton() {
-      var _this$props5 = this.props,
-        clear = _this$props5.clear,
-        compressed = _this$props5.compressed,
-        isDisabled = _this$props5.isDisabled;
+      var _this$props4 = this.props,
+        clear = _this$props4.clear,
+        isDisabled = _this$props4.isDisabled;
       if (!clear) {
         return null;
       }
-      return ___EmotionJSX(RenderWithEuiTheme, null, function (euiThemeContext) {
-        var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
-        return ___EmotionJSX(EuiFormControlLayoutClearButton, _extends({
-          size: compressed && !isRefreshVariant ? 's' : 'm',
-          disabled: isDisabled
-        }, clear));
-      });
+      return ___EmotionJSX(EuiFormControlLayoutClearButton, _extends({
+        size: "m",
+        disabled: isDisabled
+      }, clear));
     }
   }, {
     key: "renderInvalidIcon",
     value: function renderInvalidIcon() {
-      var _this$props6 = this.props,
-        isInvalid = _this$props6.isInvalid,
-        compressed = _this$props6.compressed;
+      var isInvalid = this.props.isInvalid;
       if (!isInvalid) {
         return null;
       }
-      return ___EmotionJSX(RenderWithEuiTheme, null, function (euiThemeContext) {
-        var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
-        return ___EmotionJSX(EuiIcon, {
-          size: compressed && !isRefreshVariant ? 's' : 'm',
-          color: "danger",
-          type: "warning"
-        });
+      return ___EmotionJSX(EuiIcon, {
+        size: "m",
+        color: "danger",
+        type: "warning"
       });
     }
   }]);

package/es/components/form/form_error_text/form_error_text.styles.js

@@ -7,12 +7,10 @@
  */
 
 import { css } from '@emotion/react';
-import { isEuiThemeRefreshVariant } from '../../../services';
 import { euiFontSize, logicalCSS } from '../../../global_styling';
 export var euiFormErrorTextStyles = function euiFormErrorTextStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
   return {
-    euiFormErrorText: /*#__PURE__*/css(logicalCSS('padding-top', euiTheme.size.xs), " ", euiFontSize(euiThemeContext, 'xs'), " color:", isRefreshVariant ? euiTheme.colors.textDanger : euiTheme.colors.danger, ";;label:euiFormErrorText;")
+    euiFormErrorText: /*#__PURE__*/css(logicalCSS('padding-top', euiTheme.size.xs), " ", euiFontSize(euiThemeContext, 'xs'), " color:", euiTheme.colors.textDanger, ";;label:euiFormErrorText;")
   };
 };

package/es/components/form/form_label/form_label.js

@@ -26,7 +26,7 @@ export var EuiFormLabel = function EuiFormLabel(_ref) {
     className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
   var styles = useEuiMemoizedStyles(euiFormLabelStyles);
-  var cssStyles = [styles.euiFormLabel, !isDisabled && styles.notDisabled, isInvalid && styles.invalid, isFocused && styles.focused];
+  var cssStyles = [styles.euiFormLabel, !isDisabled && styles.notDisabled, isInvalid && styles.invalid];
   var classes = classNames('euiFormLabel', className, {
     'euiFormLabel-isFocused': isFocused,
     'euiFormLabel-isInvalid': isInvalid,

package/es/components/form/form_label/form_label.styles.js

@@ -11,7 +11,6 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 
 import { css } from '@emotion/react';
 import { serializeStyles } from '@emotion/serialize';
-import { isEuiThemeRefreshVariant } from '../../../services';
 import { euiCanAnimate, euiTextBreakWord } from '../../../global_styling';
 import { euiTitle } from '../../title/title.styles';
 export var euiFormLabel = function euiFormLabel(euiThemeContext) {
@@ -27,14 +26,11 @@ export var euiFormLabel = function euiFormLabel(euiThemeContext) {
 };
 export var euiFormLabelStyles = function euiFormLabelStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
   return {
     euiFormLabel: /*#__PURE__*/css(euiFormLabel(euiThemeContext), " display:inline-block;", euiCanAnimate, "{transition:color ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";};label:euiFormLabel;"),
     // Skip css`` to avoid generating an extra Emotion className
     // Use :where to reduce specificity & make the CSS easier to override by prepend/append nodes
     notDisabled: "\n      &:where([for]) {\n        cursor: pointer;\n      }\n    ",
-    invalid: /*#__PURE__*/css("color:", isRefreshVariant ? euiTheme.colors.textDanger : euiTheme.colors.danger, ";;label:invalid;"),
-    // Focused state should override invalid state
-    focused: /*#__PURE__*/css("color:", isRefreshVariant ? '' : euiTheme.colors.primary, ";;label:focused;")
+    invalid: /*#__PURE__*/css("color:", euiTheme.colors.textDanger, ";;label:invalid;")
   };
 };

package/es/components/form/range/range_input.styles.js

@@ -7,11 +7,9 @@
  */
 
 import { css } from '@emotion/react';
-import { isEuiThemeRefreshVariant } from '../../../services';
 export var euiRangeInputStyles = function euiRangeInputStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
   return {
-    euiRangeInput: /*#__PURE__*/css("inline-size:auto;min-inline-size:", euiTheme.base * (isRefreshVariant ? 3.5 : 4), "px;.euiRange__popover &,.euiDualRange__popover &{inline-size:100%;};label:euiRangeInput;")
+    euiRangeInput: /*#__PURE__*/css("inline-size:auto;min-inline-size:", euiTheme.base * 3.5, "px;.euiRange__popover &,.euiDualRange__popover &{inline-size:100%;};label:euiRangeInput;")
   };
 };

package/es/components/header/header.styles.js

@@ -9,7 +9,7 @@
 import { css } from '@emotion/react';
 import { euiShadowXSmall } from '@elastic/eui-theme-common';
 import { logicalCSS } from '../../global_styling';
-import { isEuiThemeRefreshVariant, makeHighContrastColor } from '../../services';
+import { makeHighContrastColor } from '../../services';
 export var euiHeaderVariables = function euiHeaderVariables(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
@@ -45,24 +45,9 @@ export var euiHeaderStyles = function euiHeaderStyles(euiThemeContext) {
  * It's also possible that the dark header will go away or become unused
  * by Kibana in the near future, at which point we can remove this
  */
-import { euiFormVariables } from '../form/form.styles';
+
 var euiHeaderDarkStyles = function euiHeaderDarkStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme,
-    highContrastMode = euiThemeContext.highContrastMode;
-  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
-  var _euiFormVariables = euiFormVariables(euiThemeContext),
-    controlPlaceholderText = _euiFormVariables.controlPlaceholderText;
+  var euiTheme = euiThemeContext.euiTheme;
   var backgroundColor = euiTheme.components.headerDarkBackground;
-
-  // Specific color overrides for EuiSelectableTemplateSitewide
-  var selectableSitewide = {
-    color: euiTheme.colors.ghost,
-    borderColor: euiTheme.components.headerDarkSearchBorderColor,
-    placeholderColor: makeHighContrastColor(controlPlaceholderText, 8)(backgroundColor)
-  };
-  var formLayoutStyles = "\n    .euiSelectableTemplateSitewide .euiFormControlLayout {\n      background-color: transparent;\n\n      input {\n        box-shadow: inset 0 0 0 ".concat(euiTheme.border.width.thin, " ").concat(selectableSitewide.borderColor, ";\n      }\n\n      &--group {\n        border-color: ").concat(
-  // the header is in a faux dark mode, we can't rely on color
-  // switch tokens as they'd be in the wrong color mode
-  highContrastMode ? euiTheme.colors.plainLight : euiTheme.components.headerDarkSearchBorderColor, ";\n\n        input {\n          box-shadow: none;\n        }\n      }\n\n      &__append {\n        border-color: ").concat(highContrastMode ? euiTheme.colors.plainLight : '', "\n      }\n\n      &:not(:focus-within) {\n        /* Increase contrast of filled text to be more than placeholder text */\n        color: ").concat(selectableSitewide.color, ";\n\n        input {\n          /* Increase contrast of placeholder text */\n          &::placeholder {\n            color: ").concat(selectableSitewide.placeholderColor, ";\n          }\n\n          /* Inherit color from form control layout */\n          color: inherit;\n          background-color: transparent;\n        }\n\n        .euiFormControlLayout__append,\n        .euiFormControlLayout__prepend {\n          background-color: transparent;\n        }\n\n        .euiFormLabel {\n          color: inherit;\n        }\n      }\n  }\n  ");
-  return "\n    background-color: ".concat(backgroundColor, ";\n\n    .euiHeaderLogo__text,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      color: ").concat(euiTheme.colors.ghost, ";\n    }\n\n    .euiHeaderLink-isActive {\n      color: ").concat(makeHighContrastColor(euiTheme.colors.primary)(backgroundColor), ";\n    }\n\n    .euiHeaderLogo,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      &:focus {\n        background-color: ").concat(euiTheme.components.headerDarkSectionItemBackgroundFocus, ";\n      }\n    }\n\n    .euiHeaderSectionItemButton__notification--badge {\n      box-shadow: 0 0 0 ").concat(euiTheme.border.width.thin, " ").concat(backgroundColor, ";\n    }\n\n    .euiHeaderSectionItemButton__notification--dot {\n      stroke: ").concat(backgroundColor, ";\n    }\n\n    ").concat(!isRefreshVariant && formLayoutStyles, " \n  ");
+  return "\n    background-color: ".concat(backgroundColor, ";\n\n    .euiHeaderLogo__text,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      color: ").concat(euiTheme.colors.ghost, ";\n    }\n\n    .euiHeaderLink-isActive {\n      color: ").concat(makeHighContrastColor(euiTheme.colors.primary)(backgroundColor), ";\n    }\n\n    .euiHeaderLogo,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      &:focus {\n        background-color: ").concat(euiTheme.components.headerDarkSectionItemBackgroundFocus, ";\n      }\n    }\n\n    .euiHeaderSectionItemButton__notification--badge {\n      box-shadow: 0 0 0 ").concat(euiTheme.border.width.thin, " ").concat(backgroundColor, ";\n    }\n\n    .euiHeaderSectionItemButton__notification--dot {\n      stroke: ").concat(backgroundColor, ";\n    }\n  ");
 };

package/es/components/header/header_section/header_section_item_button.styles.js

@@ -8,7 +8,6 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { isEuiThemeRefreshVariant } from '../../../services';
 import { logicalCSS, logicalSizeCSS, mathWithUnits, euiMaxBreakpoint } from '../../../global_styling';
 import { euiHeaderVariables } from '../header.styles';
 var _ref = process.env.NODE_ENV === "production" ? {
@@ -31,14 +30,13 @@ export var euiHeaderSectionItemButtonStyles = function euiHeaderSectionItemButto
   var _euiHeaderVariables = euiHeaderVariables(euiThemeContext),
     childHeight = _euiHeaderVariables.childHeight;
   var euiTheme = euiThemeContext.euiTheme;
-  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'buttonVariant');
   var dotSize = euiTheme.size.base;
-  var dotOffset = isRefreshVariant ? mathWithUnits(dotSize, function (x) {
+  var dotOffset = mathWithUnits(dotSize, function (x) {
     return x * -0.5;
-  }) : 0;
-  var badgeOffset = isRefreshVariant ? mathWithUnits(euiTheme.size.s, function (x) {
+  });
+  var badgeOffset = mathWithUnits(euiTheme.size.s, function (x) {
     return x * -0.5;
-  }) : '9%';
+  });
   return {
     euiHeaderSectionItemButton: /*#__PURE__*/css("position:relative;", logicalCSS('height', childHeight), " ", logicalCSS('min-width', childHeight), " ", logicalCSS('padding-horizontal', euiTheme.size.s), " text-align:center;font-size:0;", euiMaxBreakpoint(euiThemeContext, 's'), "{", logicalCSS('min-width', mathWithUnits(childHeight, function (x) {
       return x * 0.75;

package/es/components/icon/icon.js

@@ -1,4 +1,4 @@
-var _excluded = ["type", "size", "color", "className", "tabIndex", "title", "onIconLoad", "style", "stylesMemoizer"];
+var _excluded = ["type", "size", "color", "className", "tabIndex", "title", "role", "onIconLoad", "style", "stylesMemoizer", "aria-hidden", "titleId"];
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -183,9 +183,12 @@ export var EuiIconClass = /*#__PURE__*/function (_PureComponent) {
         className = _this$props.className,
         tabIndex = _this$props.tabIndex,
         title = _this$props.title,
+        role = _this$props.role,
         onIconLoad = _this$props.onIconLoad,
         style = _this$props.style,
         stylesMemoizer = _this$props.stylesMemoizer,
+        ariaHidden = _this$props['aria-hidden'],
+        titleId = _this$props.titleId,
         rest = _objectWithoutProperties(_this$props, _excluded);
       var _this$state = this.state,
         isLoading = _this$state.isLoading,
@@ -210,41 +213,55 @@ export var EuiIconClass = /*#__PURE__*/function (_PureComponent) {
       var styles = stylesMemoizer(euiIconStyles);
       var cssStyles = [styles.euiIcon, styles[size], color && isNamedColor(color) && styles[color], isCustomColor && styles.customColor, isElasticLogoOutline && styles.logoElasticOutline, isAppIcon && !appIconHasColor && styles.app, isLoading && styles.isLoading, !isLoading && neededLoading && styles.isLoaded];
       var icon = this.state.icon || empty;
+      var isAriaHidden = [true, 'true'].includes(ariaHidden !== null && ariaHidden !== void 0 ? ariaHidden : false);
+      var isPresentationOnly = !(title || this.props['aria-label'] || this.props['aria-labelledby']) || ['none', 'presentation'].includes(role !== null && role !== void 0 ? role : '') || isAriaHidden;
+      var accessibleTitle = isPresentationOnly ? undefined : title;
+
+      // implicitly set the ARIA role for the icon only if:
+      // - The user did NOT provide a `role` prop
+      // - `aria-hidden` is NOT true
+      // This ensures user-supplied `role` and `aria-hidden` always take precedence.
+      // If set, role is:
+      // - 'presentation' for decorative icons
+      // - 'img' for meaningful icons
+      var accessibleRole = function () {
+        if (isAriaHidden) return undefined;
+        if (isPresentationOnly) return 'presentation';
+        return 'img';
+      }();
       if (typeof icon === 'string') {
         return ___EmotionJSX("img", _extends({
-          alt: title ? title : '',
+          alt: accessibleTitle,
           src: icon,
           className: classes,
           css: cssStyles,
           style: style,
-          tabIndex: tabIndex
+          tabIndex: tabIndex,
+          role: role !== null && role !== void 0 ? role : accessibleRole,
+          "aria-hidden": ariaHidden
         }, rest));
       } else {
         var Svg = icon;
 
-        // If there is no aria-label, aria-labelledby, or title it gets aria-hidden true
-        var isAriaHidden = !(this.props['aria-label'] || this.props['aria-labelledby'] || this.props.title);
-
         // If no aria-label or aria-labelledby is provided but there's a title, a titleId is generated
         //  The svg aria-labelledby attribute gets this titleId
         //  The svg title element gets this titleId as an id
-        var titleId = !this.props['aria-label'] && !this.props['aria-labelledby'] && title ? {
-          titleId: generateId()
+        var accessibleTitleId = !this.props['aria-label'] && !this.props['aria-labelledby'] && title ? {
+          titleId: titleId || generateId()
         } : undefined;
         return ___EmotionJSX(Svg, _extends({
           className: classes,
           style: optionalCustomStyles,
           css: cssStyles,
           tabIndex: tabIndex,
-          role: "img",
-          title: title
-        }, titleId, {
+          title: accessibleTitle,
+          role: role !== null && role !== void 0 ? role : accessibleRole,
+          "aria-hidden": ariaHidden
+        }, accessibleTitleId, {
           "data-icon-type": iconTitle,
           "data-is-loaded": isLoaded || undefined,
           "data-is-loading": isLoading || undefined
-        }, rest, {
-          "aria-hidden": isAriaHidden || rest['aria-hidden']
-        }));
+        }, rest));
       }
     }
   }]);

package/es/components/icon/icon_map.js

@@ -501,7 +501,7 @@ export var typeToPathMap = {
   vulnerabilityManagementApp: 'app_vulnerability_management',
   warning: 'warning',
   warningFilled: 'warning',
-  // NOTE: To be deprecated in favor of `export`
+  // NOTE: To be deprecated in favor of `warning`
   watchesApp: 'app_watches',
   web: 'web',
   wordWrap: 'wordWrap',

package/es/components/key_pad_menu/key_pad_menu_item.styles.js

@@ -7,35 +7,31 @@
  */
 
 import { css } from '@emotion/react';
-import { euiShadow } from '@elastic/eui-theme-common';
 import { logicalCSS, logicalSizeCSS, euiCanAnimate, euiFontSize } from '../../global_styling';
 import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 import { euiScreenReaderOnly } from '../accessibility';
 import { euiKeyPadMenuVariables } from './key_pad_menu.styles';
 export var euiKeyPadMenuItemStyles = function euiKeyPadMenuItemStyles(euiThemeContext) {
-  var _euiTheme$flags;
   var euiTheme = euiThemeContext.euiTheme;
   var _euiKeyPadMenuVariabl = euiKeyPadMenuVariables(euiThemeContext),
     euiKeyPadMenuSize = _euiKeyPadMenuVariabl.euiKeyPadMenuSize;
-  var hasVisColorAdjustment = (_euiTheme$flags = euiTheme.flags) === null || _euiTheme$flags === void 0 ? void 0 : _euiTheme$flags.hasVisColorAdjustment;
-  var focusTransformStyles = "\n    ".concat(euiShadow(euiThemeContext, 's'), ";\n\n    ").concat(euiCanAnimate, " {\n      .euiKeyPadMenuItem__icon {\n        transform: translateY(0);\n      }\n    }\n  ");
   return {
     euiKeyPadMenuItem: /*#__PURE__*/css("display:block;padding:", euiTheme.size.xs, ";", logicalSizeCSS(euiKeyPadMenuSize), " border-radius:", euiTheme.border.radius.medium, ";color:", euiTheme.colors.textParagraph, ";", euiCanAnimate, "{transition:background-color ", euiTheme.animation.fast, " ease-in,box-shadow ", euiTheme.animation.fast, " ease-in;};label:euiKeyPadMenuItem;"),
-    enabled: /*#__PURE__*/css("&:is(:hover, :focus, :focus-within){cursor:pointer;text-decoration:underline;", highContrastModeStyles(euiThemeContext, {
+    enabled: /*#__PURE__*/css("&:is(:hover, :focus, :focus-within){cursor:pointer;text-decoration:underline;background-color:", euiTheme.colors.backgroundBaseInteractiveHover, ";", highContrastModeStyles(euiThemeContext, {
       // Use `outline` instead of border to avoid affecting absolutely positioned children
       preferred: "\n            outline: ".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.primary, ";\n          ")
-    }), " ", hasVisColorAdjustment ? focusTransformStyles : "background-color: ".concat(euiTheme.colors.backgroundBaseInteractiveHover), ";}&:focus{box-shadow:none;background-color:", hasVisColorAdjustment ? euiTheme.focus.backgroundColor : euiTheme.colors.backgroundBaseInteractiveHover, ";};label:enabled;"),
-    selected: /*#__PURE__*/css("color:", euiTheme.colors.textHeading, ";background-color:", hasVisColorAdjustment ? euiTheme.focus.backgroundColor : '', ";&:is(*, :hover, :focus, :focus-within){color:", euiTheme.colors.textPrimary, ";background-color:", !hasVisColorAdjustment ? euiTheme.colors.backgroundBaseInteractiveSelect : '', ";", highContrastModeStyles(euiThemeContext, {
+    }), ";}&:focus{box-shadow:none;background-color:", euiTheme.colors.backgroundBaseInteractiveHover, ";};label:enabled;"),
+    selected: /*#__PURE__*/css("color:", euiTheme.colors.textHeading, ";&:is(*, :hover, :focus, :focus-within){color:", euiTheme.colors.textPrimary, ";background-color:", euiTheme.colors.backgroundBaseInteractiveSelect, ";", highContrastModeStyles(euiThemeContext, {
       // Skip checkable items (which render a <label> instead of <button>/<a>),
       // as they already have sufficient indication of state (checkbox or radio)
       preferred: "\n            &:not(label) {\n              outline: ".concat(euiTheme.border.width.thick, " solid ").concat(euiTheme.colors.primary, ";\n              outline-offset: 0;\n            }\n          ")
     }), ";};label:selected;"),
     disabled: {
       disabled: /*#__PURE__*/css("cursor:not-allowed;color:", euiTheme.colors.textDisabled, ";", highContrastModeStyles(euiThemeContext, {
-        none: "\n            .euiKeyPadMenuItem__icon {\n              filter: ".concat(hasVisColorAdjustment ? 'grayscale(100%)' : '', ";\n\n              svg * {\n                fill: ").concat(euiTheme.colors.textDisabled, ";\n              }\n            }\n          "),
+        none: "\n            .euiKeyPadMenuItem__icon {\n              svg * {\n                fill: ".concat(euiTheme.colors.textDisabled, ";\n              }\n            }\n          "),
         forced: 'opacity: 0.5;'
       }), ";;label:disabled;"),
-      selected: /*#__PURE__*/css("background-color:", hasVisColorAdjustment ? euiTheme.components.keyPadMenuItemBackgroundDisabledSelect : euiTheme.colors.backgroundBaseDisabled, ";", highContrastModeStyles(euiThemeContext, {
+      selected: /*#__PURE__*/css("background-color:", euiTheme.colors.backgroundBaseDisabled, ";", highContrastModeStyles(euiThemeContext, {
         preferred: "\n            &:not(label) {\n              outline: ".concat(euiTheme.border.width.thick, " solid ").concat(euiTheme.colors.textDisabled, ";\n            }\n          ")
       }), ";;label:selected;")
     }

package/es/components/markdown_editor/markdown_editor_drop_zone.styles.js

@@ -8,7 +8,6 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { isEuiThemeRefreshVariant } from '../../services';
 import { logicalCSS } from '../../global_styling';
 import { euiMarkdownEditorVariables } from './markdown_editor.styles';
 import { euiFormControlInvalidStyles } from '../form/form.styles';
@@ -22,14 +21,13 @@ var _ref = process.env.NODE_ENV === "production" ? {
 };
 export var euiMarkdownEditorDropZoneStyles = function euiMarkdownEditorDropZoneStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
   var _euiMarkdownEditorVar = euiMarkdownEditorVariables(euiThemeContext),
     minHeight = _euiMarkdownEditorVar.minHeight;
   return {
     euiMarkdownEditorDropZone: /*#__PURE__*/css("position:relative;display:flex;flex-direction:column;", logicalCSS('min-height', minHeight), ";;label:euiMarkdownEditorDropZone;"),
-    isDragging: /*#__PURE__*/css(".euiMarkdownEditorFooter,.euiMarkdownEditorTextArea{background-color:", isRefreshVariant ? euiTheme.colors.backgroundBasePrimary : euiTheme.colors.backgroundTransparentPrimary, "!important;};label:isDragging;"),
-    isDraggingError: /*#__PURE__*/css(".euiMarkdownEditorFooter,.euiMarkdownEditorTextArea{background-color:", isRefreshVariant ? euiTheme.colors.backgroundBaseDanger : euiTheme.colors.backgroundTransparentDanger, "!important;};label:isDraggingError;"),
-    hasError: /*#__PURE__*/css(".euiMarkdownEditorTextArea{--euiFormControlStateColor:", euiTheme.colors.danger, ";background-size:100% 100%;", isRefreshVariant && euiFormControlInvalidStyles(euiThemeContext), ";};label:hasError;"),
+    isDragging: /*#__PURE__*/css(".euiMarkdownEditorFooter,.euiMarkdownEditorTextArea{background-color:", euiTheme.colors.backgroundBasePrimary, "!important;};label:isDragging;"),
+    isDraggingError: /*#__PURE__*/css(".euiMarkdownEditorFooter,.euiMarkdownEditorTextArea{background-color:", euiTheme.colors.backgroundBaseDanger, "!important;};label:isDraggingError;"),
+    hasError: /*#__PURE__*/css(".euiMarkdownEditorTextArea{--euiFormControlStateColor:", euiTheme.colors.danger, ";background-size:100% 100%;", euiFormControlInvalidStyles(euiThemeContext), ";};label:hasError;"),
     euiMarkdownEditorDropZone__input: _ref
   };
 };

package/es/components/modal/modal.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["className", "children", "initialFocus", "onClose", "maxWidth", "role", "style", "focusTrapProps", "aria-describedby"];
+var _excluded = ["className", "children", "initialFocus", "onClose", "maxWidth", "role", "style", "focusTrapProps", "outsideClickCloses", "aria-describedby"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -16,7 +16,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { useRef, useCallback } from 'react';
 import PropTypes from "prop-types";
 import classnames from 'classnames';
 import { keys, useEuiTheme, useGeneratedHtmlId } from '../../services';
@@ -39,6 +39,8 @@ export var EuiModal = function EuiModal(_ref) {
     role = _ref$role === void 0 ? 'dialog' : _ref$role,
     style = _ref.style,
     focusTrapProps = _ref.focusTrapProps,
+    _ref$outsideClickClos = _ref.outsideClickCloses,
+    outsideClickCloses = _ref$outsideClickClos === void 0 ? false : _ref$outsideClickClos,
     _ariaDescribedBy = _ref['aria-describedby'],
     rest = _objectWithoutProperties(_ref, _excluded);
   var onKeyDown = function onKeyDown(event) {
@@ -50,6 +52,14 @@ export var EuiModal = function EuiModal(_ref) {
       }
     }
   };
+  var maskRef = useRef(null);
+  var onClickOutside = useCallback(function (event) {
+    // The overlay mask is always present
+    if (outsideClickCloses === true && event.target === maskRef.current) {
+      onClose(event);
+    }
+    return undefined;
+  }, [onClose, outsideClickCloses]);
   var newStyle = style;
   if (typeof maxWidth !== 'boolean') {
     newStyle = _objectSpread(_objectSpread({}, newStyle), {}, {
@@ -69,10 +79,13 @@ export var EuiModal = function EuiModal(_ref) {
     token: "euiModal.screenReaderModalDialog",
     default: "You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close."
   })));
-  return ___EmotionJSX(EuiOverlayMask, null, ___EmotionJSX(EuiFocusTrap, _extends({}, focusTrapProps, {
+  return ___EmotionJSX(EuiOverlayMask, {
+    maskRef: maskRef
+  }, ___EmotionJSX(EuiFocusTrap, _extends({}, focusTrapProps, {
     initialFocus: initialFocus,
     scrollLock: true,
-    preventScrollOnFocus: true
+    preventScrollOnFocus: true,
+    onClickOutside: onClickOutside
   }), ___EmotionJSX("div", _extends({
     css: cssStyles,
     className: classes,
@@ -125,5 +138,10 @@ EuiModal.propTypes = {
      * Object of props passed to EuiFocusTrap.
      * `returnFocus` defines the return focus behavior and provides the possibility to check the available target element or opt out of the behavior in favor of manually returning focus
      */
-  focusTrapProps: PropTypes.any
+  focusTrapProps: PropTypes.any,
+  /**
+     * Whether clicking outside the modal should close it.
+     * @default false
+     */
+  outsideClickCloses: PropTypes.bool
 };