@elastic/eui 107.0.1 → 109.0.0

package/optimize/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/optimize/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/optimize/es/components/icon/assets/paper_clip.js

@@ -26,7 +26,7 @@ var EuiIconPaperClip = function EuiIconPaperClip(_ref) {
   }, props), title ? ___EmotionJSX("title", {
     id: titleId
   }, title) : null, ___EmotionJSX("path", {
-    d: "M9.84 2.019 3.046 8.57c-.987.952-1.133 2.517-.199 3.516.951 1.021 2.58 1.106 3.64.19.034-.03.068-.061.1-.092l5.655-5.452a.484.484 0 0 0 0-.703.53.53 0 0 0-.729 0L5.92 11.421c-.572.551-1.505.657-2.131.163a1.455 1.455 0 0 1-.118-2.211l6.899-6.651a2.646 2.646 0 0 1 3.644 0 2.422 2.422 0 0 1 0 3.513L7.3 12.901c-1.333 1.285-3.497 1.493-4.95.336-1.54-1.22-1.764-3.411-.5-4.897a3.33 3.33 0 0 1 .238-.252l5.78-5.572a.484.484 0 0 0 0-.703.53.53 0 0 0-.73 0l-5.78 5.572a4.36 4.36 0 0 0 0 6.324c2.188 2.109 5.202 1.31 6.66-.095l6.925-6.676a3.39 3.39 0 0 0 0-4.92C13.534.66 11.25.66 9.841 2.019z"
+    d: "M7 11c0 .423.105.648.229.771.123.124.348.229.771.229.423 0 .648-.105.771-.229.124-.123.229-.348.229-.771V5h1v6c0 .577-.145 1.102-.521 1.479C9.102 12.854 8.577 13 8 13c-.577 0-1.102-.145-1.479-.521C6.145 12.101 6 11.577 6 11V4c0-.719.215-1.468.716-2.046C7.226 1.364 7.996 1 9 1c1.005 0 1.773.365 2.284.954.5.578.716 1.327.716 2.046v7c0 1.103-.345 2.11-1.043 2.845C10.255 14.583 9.242 15 8 15c-1.242 0-2.255-.417-2.957-1.155C4.345 13.11 4 12.103 4 11V4h1v7c0 .897.279 1.64.768 2.155C6.253 13.666 6.99 14 8 14c1.01 0 1.747-.334 2.232-.845.49-.515.768-1.258.768-2.155V4c0-.531-.16-1.032-.472-1.392C10.227 2.26 9.745 2 9 2s-1.227.26-1.528.608C7.16 2.968 7 3.47 7 4v7Z"
   }));
 };
 export var icon = EuiIconPaperClip;

package/optimize/es/components/icon/assets/streams_wired.js

@@ -21,17 +21,18 @@ var EuiIconStreamsWired = function EuiIconStreamsWired(_ref) {
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
+    fill: "none",
     viewBox: "0 0 16 16",
     "aria-labelledby": titleId
   }, props), title ? ___EmotionJSX("title", {
     id: titleId
   }, title) : null, ___EmotionJSX("path", {
     fillRule: "evenodd",
-    d: "M13.5 1a1.5 1.5 0 1 1-1.413 2H11.5A1.5 1.5 0 0 0 10 4.5v1c0 .564-.19 1.082-.504 1.5H9.5l-.048.06a2.58 2.58 0 0 1-.352.36c-.01.01-.021.017-.032.025a2.501 2.501 0 0 1-.142.108l-.043.03c-.055.036-.11.07-.168.103l-.047.024c-.057.03-.115.06-.175.085-.018.008-.036.014-.055.021A2.475 2.475 0 0 1 7.5 8h-.504c.315.418.504.936.504 1.5v1A1.5 1.5 0 0 0 9 12h3.087a1.5 1.5 0 1 1 0 1H9a2.5 2.5 0 0 1-2.5-2.5v-1A1.5 1.5 0 0 0 5 8H3.913a1.5 1.5 0 1 1 0-1H7.5A1.5 1.5 0 0 0 9 5.5v-1A2.5 2.5 0 0 1 11.5 2h.587A1.5 1.5 0 0 1 13.5 1Zm0 11a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm-11-5a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm11-5a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Z",
+    d: "M13.5 1a1.5 1.5 0 1 1-1.413 2H11.5A1.5 1.5 0 0 0 10 4.5V6a2.49 2.49 0 0 1-.504 1.5H9.5l-.048.06a2.58 2.58 0 0 1-.352.36c-.01.01-.021.017-.032.025a2.496 2.496 0 0 1-.142.108l-.043.03c-.055.036-.11.07-.168.103l-.047.024c-.057.03-.115.06-.175.085-.018.008-.036.014-.055.021A2.475 2.475 0 0 1 7.5 8.5h-.504c.315.418.504.936.504 1.5v1.5A1.5 1.5 0 0 0 9 13h3.087a1.5 1.5 0 1 1 0 1H9a2.5 2.5 0 0 1-2.5-2.5V10A1.5 1.5 0 0 0 5 8.5H3.913a1.5 1.5 0 1 1 0-1H7.5A1.5 1.5 0 0 0 9 6V4.5A2.5 2.5 0 0 1 11.5 2h.587A1.5 1.5 0 0 1 13.5 1Zm0 12a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm-11-5.5a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm11-5.5a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Z",
     clipRule: "evenodd"
   }), ___EmotionJSX("path", {
     fillRule: "evenodd",
-    d: "M13.5 6a1.5 1.5 0 1 1-1.413 2H9.948c.293-.287.536-.625.714-1h1.425A1.5 1.5 0 0 1 13.5 6Zm0 1a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Z",
+    d: "M13.5 6.5a1.5 1.5 0 1 1-1.413 2H9.948c.293-.287.536-.625.714-1h1.425a1.5 1.5 0 0 1 1.413-1Zm0 1a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Z",
     clipRule: "evenodd"
   }));
 };

package/optimize/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/optimize/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/optimize/es/components/modal/modal.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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 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; }
 /*
@@ -12,7 +12,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { useRef, useCallback } from 'react';
 import classnames from 'classnames';
 import { keys, useEuiTheme, useGeneratedHtmlId } from '../../services';
 import { isDOMNode } from '../../utils';
@@ -34,6 +34,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) {
@@ -45,6 +47,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), {}, {
@@ -64,10 +74,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,

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

@@ -12,19 +12,12 @@ import { euiBorderStyles, euiShadow, euiShadowHover } from '@elastic/eui-theme-c
 import { euiCanAnimate, logicalCSS, logicalTextAlignCSS } from '../../global_styling';
 import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 export var euiPanelBorderStyles = function euiPanelBorderStyles(euiThemeContext, options) {
-  var euiTheme = euiThemeContext.euiTheme,
-    colorMode = euiThemeContext.colorMode;
+  var euiTheme = euiThemeContext.euiTheme;
   var _ref3 = options !== null && options !== void 0 ? options : {},
-    borderColor = _ref3.borderColor,
-    _ref3$hasFloatingBord = _ref3.hasFloatingBorder,
-    hasFloatingBorder = _ref3$hasFloatingBord === void 0 ? true : _ref3$hasFloatingBord;
-
-  /* TODO: remove `hasFloatingBorder` and `hasVisibleBorder` and once Amsterdam is removed
-   euiTheme.colors.borderBaseFloating is enough then */
-  var hasVisibleBorder = hasFloatingBorder && colorMode === 'DARK';
+    borderColor = _ref3.borderColor;
   return highContrastModeStyles(euiThemeContext, {
     none: "\n      /* Using a pseudo element for the border instead of floating border only\n      because the transparent border might otherwise be visible with arbitrary\n      full-width/height content in light mode. */\n      ".concat(euiBorderStyles(euiThemeContext, {
-      borderColor: (borderColor !== null && borderColor !== void 0 ? borderColor : hasVisibleBorder) ? euiTheme.border.color : euiTheme.colors.borderBaseFloating
+      borderColor: borderColor !== null && borderColor !== void 0 ? borderColor : euiTheme.colors.borderBaseFloating
     }), "\n    "),
     preferred: "\n      border: ".concat(euiTheme.border.thin, ";\n    ")
   });
@@ -53,8 +46,7 @@ export var euiPanelStyles = function euiPanelStyles(euiThemeContext) {
     grow: _ref,
     hasShadow: /*#__PURE__*/css(euiShadow(euiThemeContext, 'm'), ";;label:hasShadow;"),
     hasBorder: /*#__PURE__*/css(euiPanelBorderStyles(euiThemeContext, {
-      borderColor: euiTheme.border.color,
-      hasFloatingBorder: false
+      borderColor: euiTheme.border.color
     }), ";;label:hasBorder;"),
     radius: {
       none: /*#__PURE__*/css(";label:none;"),

package/optimize/es/components/resizable_container/resizable_collapse_button.js

@@ -12,7 +12,7 @@ var _excluded = ["className", "externalPosition", "internalPosition", "direction
 
 import React from 'react';
 import classNames from 'classnames';
-import { useEuiMemoizedStyles, useEuiThemeRefreshVariant } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
 import { EuiButtonIcon } from '../button';
 import { euiScreenReaderOnlyStyles } from '../accessibility/screen_reader_only/screen_reader_only.styles';
 import { euiResizableCollapseButtonStyles } from './resizable_collapse_button.styles';
@@ -30,7 +30,6 @@ export var EuiResizableCollapseButton = function EuiResizableCollapseButton(_ref
     rest = _objectWithoutProperties(_ref, _excluded);
   var isHorizontal = direction === 'horizontal';
   var showOnFocus = !isCollapsed && !isVisible;
-  var isRefreshVariant = useEuiThemeRefreshVariant('buttonVariant');
   var styles = useEuiMemoizedStyles(euiResizableCollapseButtonStyles);
   var collapsedStyles = [styles.collapsed.collapsed, styles.collapsed[direction], styles.collapsed["".concat(direction, "Positions")][internalPosition]];
   var collapsibleStyles = [styles.collapsible.collapsible, styles.collapsible[direction][externalPosition], styles.collapsible[direction][internalPosition]];
@@ -49,7 +48,7 @@ export var EuiResizableCollapseButton = function EuiResizableCollapseButton(_ref
   }
   var classes = classNames('euiResizableCollapseButton', className);
   return ___EmotionJSX(EuiButtonIcon, _extends({
-    display: isRefreshVariant ? 'empty' : isCollapsed ? 'empty' : 'base',
+    display: "empty",
     color: "text",
     className: classes,
     css: cssStyles

package/optimize/es/components/selectable/selectable_templates/selectable_template_sitewide.js

@@ -16,7 +16,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 
 import React, { useState, useMemo, useCallback, useContext } from 'react';
 import classNames from 'classnames';
-import { COLOR_MODES_STANDARD, EuiNestedThemeContext, EuiThemeProvider, useCombinedRefs, useCurrentEuiBreakpoint, useEuiMemoizedStyles, useEuiTheme, useEuiThemeRefreshVariant } from '../../../services';
+import { COLOR_MODES_STANDARD, EuiNestedThemeContext, EuiThemeProvider, useCombinedRefs, useCurrentEuiBreakpoint, useEuiMemoizedStyles, useEuiTheme } from '../../../services';
 import { ENTER } from '../../../services/keys';
 import { useEuiI18n, EuiI18n } from '../../i18n';
 import { EuiLoadingSpinner } from '../../loading';
@@ -47,7 +47,6 @@ export var EuiSelectableTemplateSitewide = function EuiSelectableTemplateSitewid
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useEuiTheme = useEuiTheme(),
     colorMode = _useEuiTheme.colorMode;
-  var isRefreshVariant = useEuiThemeRefreshVariant('formVariant');
   var _useContext = useContext(EuiNestedThemeContext),
     hasDifferentColorFromGlobalTheme = _useContext.hasDifferentColorFromGlobalTheme;
   var _searchColorMode = colorModes === null || colorModes === void 0 || (_colorModes$search = colorModes.search) === null || _colorModes$search === void 0 ? void 0 : _colorModes$search.toLowerCase();
@@ -216,7 +215,7 @@ export var EuiSelectableTemplateSitewide = function EuiSelectableTemplateSitewid
   }, rest, {
     searchable: true
   }), function (list, search) {
-    var _search = isRefreshVariant && !popoverTrigger ? ___EmotionJSX(EuiThemeProvider, {
+    var _search = !popoverTrigger ? ___EmotionJSX(EuiThemeProvider, {
       colorMode: searchColorMode
     }, search) : search;
 
@@ -232,11 +231,11 @@ export var EuiSelectableTemplateSitewide = function EuiSelectableTemplateSitewid
       panelRef: setPanelRef,
       closePopover: closePopover
     }, popoverRest));
-    return isRefreshVariant ? ___EmotionJSX(EuiThemeProvider, {
+    return ___EmotionJSX(EuiThemeProvider, {
       wrapperProps: {
         cloneElement: true
       },
       colorMode: popoverColorMode
-    }, popover) : popover;
+    }, popover);
   });
 };

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

@@ -22,9 +22,7 @@ export var euiToastStyles = function euiToastStyles(euiThemeContext) {
     // Base
     euiToast: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, ";", euiShadowLarge(euiThemeContext, {
       borderAllInHighContrastMode: true
-    }), " position:relative;", logicalCSS('padding-horizontal', euiTheme.size.base), " ", logicalCSS('padding-vertical', euiTheme.size.base), " background-color:", euiTheme.colors.emptyShade, ";", logicalCSS('width', '100%'), " ", euiTextBreakWord(), euiPanelBorderStyles(euiThemeContext, {
-      hasFloatingBorder: false
-    }), " &:hover,&:focus{[class*='euiToast__closeButton']{opacity:1;}};label:euiToast;"),
+    }), " position:relative;", logicalCSS('padding-horizontal', euiTheme.size.base), " ", logicalCSS('padding-vertical', euiTheme.size.base), " background-color:", euiTheme.colors.emptyShade, ";", logicalCSS('width', '100%'), " ", euiTextBreakWord(), euiPanelBorderStyles(euiThemeContext), " &:hover,&:focus{[class*='euiToast__closeButton']{opacity:1;}};label:euiToast;"),
     // Elements
     euiToast__closeButton: /*#__PURE__*/css("position:absolute;", logicalCSS('top', euiTheme.size.base), " ", logicalCSS('right', euiTheme.size.base), ";;label:euiToast__closeButton;"),
     // Variants

package/optimize/es/components/token/token.js

@@ -17,7 +17,7 @@ import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import { useEuiTheme, isColorDark, hexToRgb } from '../../services';
 import { EuiIcon } from '../icon';
-import { TOKEN_MAP_AMSTERDAM, TOKEN_MAP_BOREALIS } from './token_map';
+import { TOKEN_MAP } from './token_map';
 import { COLORS } from './token_types';
 import { euiTokenStyles } from './token.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -49,8 +49,6 @@ export var EuiToken = function EuiToken(_ref) {
     finalSize = 'm';
   }
   var euiTheme = useEuiTheme();
-  var hasVisColorAdjustment = euiTheme.euiTheme.flags.hasVisColorAdjustment;
-  var TOKEN_MAP = hasVisColorAdjustment ? TOKEN_MAP_AMSTERDAM : TOKEN_MAP_BOREALIS;
 
   // If the iconType passed is one of the prefab token types,
   // grab its properties

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

@@ -12,13 +12,12 @@ import { css } from '@emotion/react';
 import chroma from 'chroma-js';
 import { logicalCSS, logicalSizeCSS, mathWithUnits } from '../../global_styling';
 import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
-import { euiPaletteColorBlind, euiPaletteColorBlindBehindText, makeHighContrastColor, isColorDark, tint, shade } from '../../services';
+import { euiPaletteColorBlind, euiPaletteColorBlindBehindText, isColorDark, tint, shade } from '../../services';
 import { TOKEN_COLOR_TO_ICON_COLOR_MAP } from './token_map';
 var getTokenColor = function getTokenColor(euiThemeContext, fill, color) {
   var euiTheme = euiThemeContext.euiTheme,
     colorMode = euiThemeContext.colorMode,
     highContrastMode = euiThemeContext.highContrastMode;
-  var hasVisColorAdjustment = euiTheme.flags.hasVisColorAdjustment;
   // use inside function as they are not returning constants,
   // but internally depend on EUI_VIS_COLOR_STORE to update per theme
   var visColors = euiPaletteColorBlind();
@@ -33,7 +32,7 @@ var getTokenColor = function getTokenColor(euiThemeContext, fill, color) {
     var iconColorToken = TOKEN_COLOR_TO_ICON_COLOR_MAP[iconColorKey];
     return euiTheme.colors.vis[iconColorToken];
   };
-  var lightColor = hasVisColorAdjustment ? makeHighContrastColor(iconColor)(backgroundLightColor) : isVizColor ? shade(getIconVisColor(euiTheme, color), 0.3) : iconColor;
+  var lightColor = isVizColor ? shade(getIconVisColor(euiTheme, color), 0.3) : iconColor;
   var boxShadowColor = highContrastMode ? iconColor : isDarkMode ? shade(iconColor, 0.6) : tint(iconColor, 0.2);
   var darkColor = isColorDark.apply(void 0, _toConsumableArray(chroma(backgroundDarkColor).rgb())) ? euiTheme.colors.ghost : euiTheme.colors.ink;
   switch (fill) {

package/optimize/es/components/token/token_map.js

@@ -12,237 +12,7 @@
  * circle shape for more uncommon token types so they grab attention.
  */
 
-export var TOKEN_MAP_AMSTERDAM = {
-  tokenAlias: {
-    shape: 'circle',
-    color: 'euiColorVis3'
-  },
-  tokenAnnotation: {
-    shape: 'square',
-    color: 'euiColorVis5'
-  },
-  tokenArray: {
-    shape: 'square',
-    color: 'euiColorVis7'
-  },
-  tokenBinary: {
-    shape: 'square',
-    color: 'euiColorVis4'
-  },
-  tokenBoolean: {
-    shape: 'square',
-    color: 'euiColorVis7'
-  },
-  tokenClass: {
-    shape: 'circle',
-    color: 'euiColorVis1'
-  },
-  tokenCompletionSuggester: {
-    shape: 'square',
-    color: 'euiColorVis1'
-  },
-  tokenConstant: {
-    shape: 'circle',
-    color: 'euiColorVis0'
-  },
-  tokenDate: {
-    shape: 'square',
-    color: 'euiColorVis6'
-  },
-  tokenDimension: {
-    shape: 'square',
-    color: 'euiColorVis1'
-  },
-  tokenElement: {
-    shape: 'square',
-    color: 'euiColorVis3'
-  },
-  tokenEnum: {
-    shape: 'circle',
-    color: 'euiColorVis3'
-  },
-  tokenEnumMember: {
-    shape: 'square',
-    color: 'euiColorVis7'
-  },
-  tokenEvent: {
-    shape: 'circle',
-    color: 'euiColorVis4'
-  },
-  tokenException: {
-    shape: 'circle',
-    color: 'euiColorVis0'
-  },
-  tokenField: {
-    shape: 'circle',
-    color: 'euiColorVis0'
-  },
-  tokenFile: {
-    shape: 'square',
-    color: 'euiColorVis2'
-  },
-  tokenFlattened: {
-    shape: 'square',
-    color: 'euiColorVis7'
-  },
-  tokenFunction: {
-    shape: 'circle',
-    color: 'euiColorVis2'
-  },
-  tokenGeo: {
-    shape: 'square',
-    color: 'euiColorVis5'
-  },
-  tokenHistogram: {
-    shape: 'square',
-    color: 'euiColorVis6'
-  },
-  tokenInterface: {
-    shape: 'circle',
-    color: 'euiColorVis9'
-  },
-  tokenIP: {
-    shape: 'square',
-    color: 'euiColorVis9'
-  },
-  tokenJoin: {
-    shape: 'square',
-    color: 'euiColorVis5'
-  },
-  tokenKey: {
-    shape: 'circle',
-    color: 'euiColorVis5'
-  },
-  tokenKeyword: {
-    shape: 'square',
-    color: 'euiColorVis1'
-  },
-  tokenMethod: {
-    shape: 'square',
-    color: 'euiColorVis2'
-  },
-  tokenMetricCounter: {
-    shape: 'square',
-    color: 'euiColorVis0'
-  },
-  tokenMetricGauge: {
-    shape: 'square',
-    color: 'euiColorVis0'
-  },
-  tokenModule: {
-    shape: 'square',
-    color: 'euiColorVis4'
-  },
-  tokenNamespace: {
-    shape: 'square',
-    color: 'euiColorVis1'
-  },
-  tokenNested: {
-    shape: 'circle',
-    color: 'euiColorVis2'
-  },
-  tokenNull: {
-    shape: 'square',
-    color: 'euiColorVis2'
-  },
-  tokenNumber: {
-    shape: 'square',
-    color: 'euiColorVis0'
-  },
-  tokenObject: {
-    shape: 'circle',
-    color: 'euiColorVis3'
-  },
-  tokenOperator: {
-    shape: 'circle',
-    color: 'euiColorVis4'
-  },
-  tokenPackage: {
-    shape: 'square',
-    color: 'euiColorVis0'
-  },
-  tokenParameter: {
-    shape: 'square',
-    color: 'euiColorVis4'
-  },
-  tokenPercolator: {
-    shape: 'square',
-    color: 'euiColorVis6'
-  },
-  tokenProperty: {
-    shape: 'circle',
-    color: 'euiColorVis2'
-  },
-  tokenRange: {
-    shape: 'circle',
-    color: 'euiColorVis4'
-  },
-  tokenRankFeature: {
-    shape: 'square',
-    color: 'euiColorVis8'
-  },
-  tokenRankFeatures: {
-    shape: 'square',
-    color: 'euiColorVis3'
-  },
-  tokenRepo: {
-    shape: 'square',
-    color: 'euiColorVis1'
-  },
-  tokenSearchType: {
-    shape: 'square',
-    color: 'euiColorVis5'
-  },
-  tokenSemanticText: {
-    shape: 'square',
-    color: 'euiColorVis0'
-  },
-  tokenShape: {
-    shape: 'circle',
-    color: 'euiColorVis8'
-  },
-  tokenString: {
-    shape: 'square',
-    color: 'euiColorVis1'
-  },
-  tokenStruct: {
-    shape: 'square',
-    color: 'euiColorVis0'
-  },
-  tokenSymbol: {
-    shape: 'square',
-    color: 'euiColorVis0'
-  },
-  tokenTag: {
-    shape: 'square',
-    color: 'euiColorVis9'
-  },
-  tokenText: {
-    shape: 'square',
-    color: 'euiColorVis3'
-  },
-  tokenTokenCount: {
-    shape: 'square',
-    color: 'euiColorVis4'
-  },
-  tokenVariable: {
-    shape: 'circle',
-    color: 'euiColorVis7'
-  },
-  tokenVectorDense: {
-    shape: 'square',
-    color: 'euiColorVis5'
-  },
-  tokenDenseVector: {
-    shape: 'square',
-    color: 'euiColorVis5'
-  },
-  tokenVectorSparse: {
-    shape: 'square',
-    color: 'euiColorVis1'
-  }
-};
-export var TOKEN_MAP_BOREALIS = {
+export var TOKEN_MAP = {
   tokenAlias: {
     shape: 'square',
     color: 'euiColorVis0'