@elastic/eui 95.2.0 → 95.4.0

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

@@ -0,0 +1,39 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["title", "titleId"];
+/*
+ * 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.
+ */
+
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var EuiIconFieldStatistics = function EuiIconFieldStatistics(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return ___EmotionJSX("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    fill: "currentColor",
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? ___EmotionJSX("title", {
+    id: titleId
+  }, title) : null, ___EmotionJSX("path", {
+    d: "M3 1h10a2 2 0 0 1 2 2v4.337a5.533 5.533 0 0 0-1-1.08V3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h3.257c.314.38.677.716 1.08 1H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2Z"
+  }), ___EmotionJSX("path", {
+    d: "M3.5 6h3.837a5.54 5.54 0 0 0-1.08 1H3.5a.5.5 0 0 1 0-1Zm0 6h1.707c.098.345.228.677.388.991A.505.505 0 0 1 5.5 13h-2a.5.5 0 0 1 0-1Zm0-8a.5.5 0 0 1 0-1h9a.5.5 0 0 1 0 1h-9ZM3 9.5a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 0-1h-1a.5.5 0 0 0-.5.5Z"
+  }), ___EmotionJSX("path", {
+    fillRule: "evenodd",
+    d: "M15 10.5a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Zm-2.146-2.354a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708l4-4a.5.5 0 0 1 .708 0ZM9 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm4 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z",
+    clipRule: "evenodd"
+  }));
+};
+export var icon = EuiIconFieldStatistics;

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

@@ -0,0 +1,64 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["title", "titleId"];
+/*
+ * 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.
+ */
+
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var EuiIconLogPatternAnalysis = function EuiIconLogPatternAnalysis(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return ___EmotionJSX("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? ___EmotionJSX("title", {
+    id: titleId
+  }, title) : null, ___EmotionJSX("path", {
+    d: "M3 1h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2Zm0 1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3Zm.5 1h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1 0-1Z"
+  }), ___EmotionJSX("path", {
+    d: "M9.5 3a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm3 0h-1a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1Z"
+  }), ___EmotionJSX("path", {
+    d: "M9.5 3a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm3 0h-1a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1Zm0 3h-4a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1Zm-8 0h-1a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1Zm2 0a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Z"
+  }), ___EmotionJSX("path", {
+    d: "M4.5 6h-1a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1Zm2 0a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm6 6h-4a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1Zm-8 0h-1a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1Zm2 0a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Z"
+  }), ___EmotionJSX("path", {
+    d: "M4.5 12h-1a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1Zm2 0a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm3-9a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm3 0h-1a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1Z"
+  }), ___EmotionJSX("path", {
+    d: "M9.5 3a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm3 0h-1a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1Z"
+  }), ___EmotionJSX("path", {
+    d: "M9.5 3a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm3 0h-1a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1Z"
+  }), ___EmotionJSX("path", {
+    d: "M9.5 3a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm3 0h-1a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1Z"
+  }), ___EmotionJSX("path", {
+    d: "M9.5 3a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm3 0h-1a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1Z"
+  }), ___EmotionJSX("path", {
+    d: "M9.5 3a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm3 0h-1a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1Zm-3 6a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm3 0h-1a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1Z"
+  }), ___EmotionJSX("path", {
+    d: "M9.5 9a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm3 0h-1a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1Z"
+  }), ___EmotionJSX("path", {
+    d: "M9.5 9a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm3 0h-1a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1Z"
+  }), ___EmotionJSX("path", {
+    d: "M9.5 9a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm3 0h-1a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1Z"
+  }), ___EmotionJSX("path", {
+    d: "M9.5 9a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm3 0h-1a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1Z"
+  }), ___EmotionJSX("path", {
+    d: "M9.5 9a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm3 0h-1a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1Z"
+  }), ___EmotionJSX("path", {
+    d: "M9.5 9a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm3 0h-1a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1Z"
+  }), ___EmotionJSX("path", {
+    d: "M9.5 9a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm3 0h-1a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1Zm-5 0h-4a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1Z"
+  }));
+};
+export var icon = EuiIconLogPatternAnalysis;

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

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["title", "titleId"];
+/*
+ * 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.
+ */
+
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var EuiIconLogRateAnalysis = function EuiIconLogRateAnalysis(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return ___EmotionJSX("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? ___EmotionJSX("title", {
+    id: titleId
+  }, title) : null, ___EmotionJSX("path", {
+    d: "M9.5 13a.5.5 0 0 1-.5-.5V11H7v1.5a.5.5 0 0 1-1 0V9H4v3.5a.5.5 0 0 1-1 0v-4a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5V10h2V1.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-.5.5h-3Zm-8 2a.5.5 0 0 1 0-1h13a.5.5 0 0 1 0 1h-13Z"
+  }));
+};
+export var icon = EuiIconLogRateAnalysis;

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

@@ -0,0 +1,42 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["title", "titleId"];
+/*
+ * 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.
+ */
+
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var EuiIconSingleMetricViewer = function EuiIconSingleMetricViewer(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return ___EmotionJSX("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? ___EmotionJSX("title", {
+    id: titleId
+  }, title) : null, ___EmotionJSX("path", {
+    fillRule: "evenodd",
+    d: "M1.5 1a.5.5 0 0 1 .5.5V14h12.5a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 .5-.5Z",
+    clipRule: "evenodd"
+  }), ___EmotionJSX("path", {
+    fillRule: "evenodd",
+    d: "M12.935 6.652a.6.6 0 0 0-.951-.062L9 10l-2.747-.916a.6.6 0 0 0-.485.047L3 10.69v1.81a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5V9.75l-2.065-3.098Z",
+    clipRule: "evenodd"
+  }), ___EmotionJSX("path", {
+    fillRule: "evenodd",
+    d: "M13.023 2.758a.6.6 0 0 0-.987-.077L8.388 7.203l-2.093-.83a.6.6 0 0 0-.552.058L3.221 8.098a.49.49 0 0 0-.138.683.5.5 0 0 0 .689.136l2.349-1.552 2.582 1.024 3.746-4.643 1.623 2.817c.136.237.44.319.678.184a.49.49 0 0 0 .184-.672l-1.91-3.317Z",
+    clipRule: "evenodd"
+  }));
+};
+export var icon = EuiIconSingleMetricViewer;

package/optimize/es/components/icon/icon_map.js

@@ -14,6 +14,8 @@ export var typeToPathMap = {
   aggregate: 'aggregate',
   analyzeEvent: 'analyzeEvent',
   annotation: 'annotation',
+  anomalyChart: 'anomaly_chart',
+  anomalySwimLane: 'anomaly_swim_lane',
   apmApp: 'app_apm',
   apmTrace: 'apm_trace',
   appSearchApp: 'app_app_search',
@@ -44,6 +46,7 @@ export var typeToPathMap = {
   calendar: 'calendar',
   canvasApp: 'app_canvas',
   casesApp: 'app_cases',
+  changePointDetection: 'change_point_detection',
   check: 'check',
   checkInCircleFilled: 'checkInCircleFilled',
   cheer: 'cheer',
@@ -143,6 +146,7 @@ export var typeToPathMap = {
   faceHappy: 'face_happy',
   faceNeutral: 'face_neutral',
   faceSad: 'face_sad',
+  fieldStatistics: 'field_statistics',
   filebeatApp: 'app_filebeat',
   filter: 'filter',
   filterExclude: 'filterExclude',
@@ -218,6 +222,8 @@ export var typeToPathMap = {
   listAdd: 'list_add',
   lock: 'lock',
   lockOpen: 'lockOpen',
+  logPatternAnalysis: 'log_pattern_analysis',
+  logRateAnalysis: 'log_rate_analysis',
   logoAWS: 'logo_aws',
   logoAWSMono: 'logo_aws_mono',
   logoAerospike: 'logo_aerospike',
@@ -360,6 +366,7 @@ export var typeToPathMap = {
   sessionViewer: 'sessionViewer',
   shard: 'shard',
   share: 'share',
+  singleMetricViewer: 'single_metric_viewer',
   snowflake: 'snowflake',
   sortAscending: 'sortAscending',
   sortDescending: 'sortDescending',

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

@@ -13,7 +13,7 @@ import { euiFormVariables } from '../form/form.styles';
 export var euiModalStyles = function euiModalStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiModal: /*#__PURE__*/css(euiShadowXLarge(euiThemeContext), " display:flex;flex-direction:column;max-block-size:75vh;position:relative;background-color:", euiTheme.colors.emptyShade, ";border-radius:", euiTheme.border.radius.medium, ";z-index:", euiTheme.levels.modal, ";min-inline-size:", euiFormVariables(euiThemeContext).maxWidth, ";max-inline-size:calc(100vw - ", euiTheme.size.base, ");", euiCanAnimate, "{animation:", euiAnimSlideInUp(euiTheme.size.xxl), " ", euiTheme.animation.slow, " ", euiTheme.animation.bounce, ";}", euiMaxBreakpoint(euiThemeContext, 'm'), "{position:fixed;inset:0;border-radius:0;inline-size:100vw!important;min-inline-size:0!important;max-inline-size:none!important;max-block-size:100vh!important;}&:focus{outline:none;};label:euiModal;"),
+    euiModal: /*#__PURE__*/css(euiShadowXLarge(euiThemeContext), " display:flex;flex-direction:column;max-block-size:75vh;position:relative;background-color:", euiTheme.colors.emptyShade, ";border-radius:", euiTheme.border.radius.medium, ";z-index:", euiTheme.levels.modal, ";min-inline-size:", euiFormVariables(euiThemeContext).maxWidth, ";max-inline-size:calc(100vw - ", euiTheme.size.base, ");overflow:hidden;", euiCanAnimate, "{animation:", euiAnimSlideInUp(euiTheme.size.xxl), " ", euiTheme.animation.slow, " ", euiTheme.animation.bounce, ";}", euiMaxBreakpoint(euiThemeContext, 'm'), "{position:fixed;inset:0;border-radius:0;inline-size:100vw!important;min-inline-size:0!important;max-inline-size:none!important;max-block-size:100vh!important;}&:focus{outline:none;};label:euiModal;"),
     // Variants
     defaultMaxWidth: /*#__PURE__*/css("max-inline-size:min(\n        ", euiTheme.breakpoint.m, "px,\n        calc(100vw - ", euiTheme.size.base, ")\n      );;label:defaultMaxWidth;"),
     confirmation: /*#__PURE__*/css("min-inline-size:", euiFormVariables(euiThemeContext).maxWidth, ";", euiMaxBreakpoint(euiThemeContext, 'm'), "{", euiShadowXLarge(euiThemeContext, {

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

@@ -109,9 +109,11 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
     });
     _defineProperty(_this, "handleStrandedFocus", function () {
       _this.strandedFocusTimeout = window.setTimeout(function () {
-        // If `returnFocus` failed and focus was stranded on the body,
-        // attempt to manually restore focus to the toggle button
-        if (document.activeElement === document.body) {
+        // If `returnFocus` failed and focus was stranded,
+        // attempt to manually restore focus to the toggle button.
+        // The stranded focus is either in most cases on body but
+        // it will be on the panel instead on mount when isOpen=true
+        if (document.activeElement === document.body || document.activeElement === _this.panel) {
           if (!_this.button) return;
           var focusableItems = focusable(_this.button);
           if (!focusableItems.length) return;

package/optimize/es/components/provider/provider.js

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { EuiThemeProvider, CurrentEuiBreakpointProvider } from '../../services';
+import { EuiThemeProvider } from '../../services';
 import { emitEuiProviderWarning } from '../../services/theme/warning';
 import { cache as fallbackCache } from '../../services/emotion/css';
 import { EuiGlobalStyles } from '../../global_styling/reset/global_styles';
@@ -76,5 +76,5 @@ export var EuiProvider = function EuiProvider(_ref) {
     children: Utilities && ___EmotionJSX(Utilities, null)
   })), ___EmotionJSX(EuiComponentDefaultsProvider, {
     componentDefaults: componentDefaults
-  }, ___EmotionJSX(CurrentEuiBreakpointProvider, null, children)))));
+  }, children))));
 };

package/optimize/es/components/stat/stat.js

@@ -1,9 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "className", "description", "isLoading", "reverse", "textAlign", "title", "titleColor", "titleSize", "titleElement", "descriptionElement"];
-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; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -12,13 +9,12 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * Side Public License, v 1.
  */
 
-import React, { Fragment, createElement } from 'react';
+import React, { createElement, useMemo } from 'react';
 import classNames from 'classnames';
 import { EuiText } from '../text';
 import { EuiTitle } from '../title/title';
-import { EuiScreenReaderOnly } from '../accessibility';
-import { EuiI18n } from '../i18n';
-import { useEuiTheme } from '../../services';
+import { useEuiI18n } from '../i18n';
+import { useEuiMemoizedStyles } from '../../services';
 import { euiStatStyles, euiStatTitleStyles } from './stat.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var COLORS = ['default', 'subdued', 'primary', 'success', 'danger', 'accent'];
@@ -43,38 +39,33 @@ export var EuiStat = function EuiStat(_ref) {
     _ref$descriptionEleme = _ref.descriptionElement,
     descriptionElement = _ref$descriptionEleme === void 0 ? 'p' : _ref$descriptionEleme,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var euiTheme = useEuiTheme();
-  var styles = euiStatStyles();
-  var cssStyles = [styles.euiStat, styles[textAlign]];
   var classes = classNames('euiStat', className);
-  var commonProps = {
-    'aria-hidden': true
-  };
-  var descriptionDisplay = ___EmotionJSX(EuiText, {
-    size: "s",
-    className: "euiStat__description"
-  }, /*#__PURE__*/createElement(descriptionElement, commonProps, description));
-  var isNamedTitleColor = COLORS.includes(titleColor);
-  var titleStyles = euiStatTitleStyles(euiTheme);
-  var titleCssStyles = [titleStyles.euiStat__title, isNamedTitleColor && titleStyles[titleColor], isLoading && titleStyles.isLoading];
-  var titleProps = isNamedTitleColor ? commonProps : _objectSpread(_objectSpread({}, commonProps), {}, {
-    style: {
-      color: titleColor
-    }
-  });
-  var titleChildren = isLoading ? '--' : title;
-  var titleDisplay = ___EmotionJSX(EuiTitle, {
-    size: titleSize,
-    className: "euiStat__title",
-    css: titleCssStyles
-  }, /*#__PURE__*/createElement(titleElement, titleProps, titleChildren));
-  var screenReader = ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", null, isLoading ? ___EmotionJSX(EuiI18n, {
-    token: "euiStat.loadingText",
-    default: "Statistic is loading"
-  }) : ___EmotionJSX(Fragment, null, reverse ? "".concat(title, " ").concat(description) : "".concat(description, " ").concat(title))));
-  var statDisplay = ___EmotionJSX(Fragment, null, !reverse && descriptionDisplay, titleDisplay, reverse && descriptionDisplay, typeof title === 'string' && typeof description === 'string' && screenReader);
+  var styles = useEuiMemoizedStyles(euiStatStyles);
+  var cssStyles = [styles.euiStat, styles[textAlign]];
+  var loadingStatsAriaLabel = useEuiI18n('euiStat.loadingText', 'Statistic is loading');
+  var titleStyles = useEuiMemoizedStyles(euiStatTitleStyles);
+  var titleDisplay = useMemo(function () {
+    var isNamedTitleColor = COLORS.includes(titleColor);
+    var titleCssStyles = [titleStyles.euiStat__title, isNamedTitleColor && titleStyles[titleColor], isLoading && titleStyles.isLoading];
+    return ___EmotionJSX(EuiTitle, {
+      size: titleSize,
+      className: "euiStat__title",
+      css: titleCssStyles,
+      "aria-label": isLoading ? loadingStatsAriaLabel : undefined
+    }, /*#__PURE__*/createElement(titleElement, isNamedTitleColor ? null : {
+      style: {
+        color: titleColor
+      }
+    }, isLoading ? '--' : title));
+  }, [title, titleElement, titleColor, titleSize, titleStyles, isLoading, loadingStatsAriaLabel]);
+  var descriptionDisplay = useMemo(function () {
+    return ___EmotionJSX(EuiText, {
+      size: "s",
+      className: "euiStat__description"
+    }, /*#__PURE__*/createElement(descriptionElement, null, description));
+  }, [description, descriptionElement]);
   return ___EmotionJSX("div", _extends({
     css: cssStyles,
     className: classes
-  }, rest), statDisplay, children);
+  }, rest), !reverse && descriptionDisplay, titleDisplay, reverse && descriptionDisplay, children);
 };

package/optimize/es/components/table/table_row.styles.js

@@ -30,7 +30,7 @@ export var euiTableRowStyles = function euiTableRowStyles(euiThemeContext) {
       selected: /*#__PURE__*/css("&,&+.euiTableRow-isExpandedRow{background-color:", rowColors.selected.color, ";}&:hover,&:hover+.euiTableRow-isExpandedRow{background-color:", rowColors.selected.hover, ";};label:selected;"),
       // Offset expanded & selectable rows by the checkbox width to line up content with the 2nd column
       // Set on the `<td>` because padding can't be applied to `<tr>` elements directly
-      checkboxOffset: /*#__PURE__*/css(".euiTableRowCell:first-child{", logicalCSS('padding-left', checkboxSize), ";};label:checkboxOffset;")
+      checkboxOffset: /*#__PURE__*/css("&>.euiTableRowCell:first-child{", logicalCSS('padding-left', checkboxSize), ";};label:checkboxOffset;")
     },
     mobile: {
       mobile: /*#__PURE__*/css("position:relative;display:flex;flex-wrap:wrap;padding:", cellContentPadding, ";", logicalCSS('margin-bottom', cellContentPadding), euiShadow(euiThemeContext, 's'), " background-color:", euiBackgroundColor(euiThemeContext, 'plain'), ";border-radius:", euiTheme.border.radius.medium, ";;label:mobile;"),
@@ -48,7 +48,7 @@ export var euiTableRowStyles = function euiTableRowStyles(euiThemeContext) {
       /**
        * Bottom of card - expanded rows
        */
-      expanded: /*#__PURE__*/css(logicalCSS('margin-top', "-".concat(mobileSizes.actions.offset)), logicalCSS('padding-left', cellContentPadding), " ", logicalCSS('border-top', euiTheme.border.thin), " ", logicalCSS('border-top-left-radius', 0), " ", logicalCSS('border-top-right-radius', 0), " .euiTableRowCell{", logicalCSS('width', '100%'), ";}", expandedAnimationCss, ";;label:expanded;")
+      expanded: /*#__PURE__*/css(logicalCSS('margin-top', "-".concat(mobileSizes.actions.offset)), logicalCSS('padding-left', cellContentPadding), " ", logicalCSS('border-top', euiTheme.border.thin), " ", logicalCSS('border-top-left-radius', 0), " ", logicalCSS('border-top-right-radius', 0), ">.euiTableRowCell{", logicalCSS('width', '100%'), ";}", expandedAnimationCss, ";;label:expanded;")
     }
   };
 };

package/optimize/es/global_styling/mixins/_helpers.js

@@ -67,10 +67,18 @@ var euiOverflowShadowStyles = function euiOverflowShadowStyles(_ref3) {
       gradient = "".concat(gradientEnd);
     }
   }
+
+  // Chrome+Edge has a very bizarre edge case bug where `mask-image` stops working
+  // This workaround forces a stacking context on the scrolling container, which
+  // hopefully addresses the bug. @see:
+  // - https://issues.chromium.org/issues/40778541
+  // - https://github.com/elastic/kibana/issues/180828
+  // - https://github.com/elastic/eui/pull/6343#issuecomment-1302732021
+  var chromiumMaskWorkaround = 'transform: translateZ(0);';
   if (direction === 'y') {
-    return "mask-image: linear-gradient(to bottom, ".concat(gradient, ");");
+    return "mask-image: linear-gradient(to bottom, ".concat(gradient, "); ").concat(chromiumMaskWorkaround);
   } else {
-    return "mask-image: linear-gradient(to right, ".concat(gradient, ");");
+    return "mask-image: linear-gradient(to right, ".concat(gradient, "); ").concat(chromiumMaskWorkaround);
   }
 };
 

package/optimize/es/services/breakpoint/current_breakpoint.js

@@ -9,15 +9,17 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 import React, { createContext, useState, useEffect, useMemo, useCallback } from 'react';
 import { keysOf } from '../../components/common';
-import { useEuiTheme } from '../theme';
+import { useEuiTheme } from '../theme/hooks';
 import { throttle } from '../throttle';
 import { sortMapByLargeToSmallValues } from './_sorting';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var CurrentEuiBreakpointContext = /*#__PURE__*/createContext(undefined);
 
 /**
- * Top level provider (nested within EuiProvider) which provides a single
- * resize listener that returns the current breakpoint based on window width
+ * Returns the current breakpoint based on window width.
+ * Typically only called by the top-level `EuiProvider` (to reduce the number
+ * of window resize listeners on the page). Also conditionally called if a
+ * nested `EuiThemeProvider` defines a `modify.breakpoint` override
  */
 export var CurrentEuiBreakpointProvider = function CurrentEuiBreakpointProvider(_ref) {
   var children = _ref.children;

package/optimize/es/services/theme/provider.js

@@ -16,11 +16,12 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * Side Public License, v 1.
  */
 
-import React, { useContext, useEffect, useRef, useMemo, useState, useCallback } from 'react';
+import React, { useContext, useEffect, useRef, useMemo, useState, useCallback, Fragment } from 'react';
 import { Global } from '@emotion/react';
 import isEqual from 'lodash/isEqual';
 import { cloneElementWithCss } from '../emotion';
 import { css, cx } from '../emotion/css';
+import { CurrentEuiBreakpointProvider } from '../breakpoint/current_breakpoint';
 import { EuiSystemContext, EuiThemeContext, EuiNestedThemeContext, EuiModificationsContext, EuiColorModeContext } from './context';
 import { EuiEmotionThemeProvider } from './emotion';
 import { EuiThemeMemoizedStylesProvider } from './style_memoization';
@@ -46,6 +47,13 @@ export var EuiThemeProvider = function EuiThemeProvider(_ref) {
     system = _useState2[0],
     setSystem = _useState2[1];
   var prevSystemKey = useRef(system.key);
+
+  // To reduce the number of window resize listeners, only render a
+  // CurrentEuiBreakpointProvider for the top level parent theme, or for
+  // nested themes only if modified breakpoint overrides are passed
+  var EuiConditionalBreakpointProvider = useMemo(function () {
+    return isGlobalTheme || _modifications !== null && _modifications !== void 0 && _modifications.breakpoint ? CurrentEuiBreakpointProvider : Fragment;
+  }, [isGlobalTheme, _modifications]);
   var _useState3 = useState(mergeDeep(parentModifications, _modifications)),
     _useState4 = _slicedToArray(_useState3, 2),
     modifications = _useState4[0],
@@ -155,5 +163,5 @@ export var EuiThemeProvider = function EuiThemeProvider(_ref) {
     value: theme
   }, ___EmotionJSX(EuiNestedThemeContext.Provider, {
     value: nestedThemeContext
-  }, ___EmotionJSX(EuiThemeMemoizedStylesProvider, null, ___EmotionJSX(EuiEmotionThemeProvider, null, renderedChildren))))))));
+  }, ___EmotionJSX(EuiThemeMemoizedStylesProvider, null, ___EmotionJSX(EuiEmotionThemeProvider, null, ___EmotionJSX(EuiConditionalBreakpointProvider, null, renderedChildren)))))))));
 };

package/optimize/lib/components/color_picker/color_palette_display/color_palette_display.js

@@ -9,9 +9,10 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _common = require("../../common");
+var _services = require("../../../services");
 var _color_palette_display_fixed = require("./color_palette_display_fixed");
 var _color_palette_display_gradient = require("./color_palette_display_gradient");
+var _color_palette_display = require("./color_palette_display.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["type", "palette", "className", "size"];
 /*
@@ -21,12 +22,7 @@ var _excluded = ["type", "palette", "className", "size"];
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var sizeToClassNameMap = {
-  xs: 'euiColorPaletteDisplay--sizeExtraSmall',
-  s: 'euiColorPaletteDisplay--sizeSmall',
-  m: 'euiColorPaletteDisplay--sizeMedium'
-};
-var SIZES = exports.SIZES = (0, _common.keysOf)(sizeToClassNameMap);
+var SIZES = exports.SIZES = ['xs', 's', 'm'];
 var EuiColorPaletteDisplay = exports.EuiColorPaletteDisplay = function EuiColorPaletteDisplay(_ref) {
   var _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'fixed' : _ref$type,
@@ -35,11 +31,15 @@ var EuiColorPaletteDisplay = exports.EuiColorPaletteDisplay = function EuiColorP
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 's' : _ref$size,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var classes = (0, _classnames.default)('euiColorPaletteDisplay', className, sizeToClassNameMap[size]);
+  var classes = (0, _classnames.default)('euiColorPaletteDisplay', className);
+  var styles = (0, _services.useEuiMemoizedStyles)(_color_palette_display.euiColorPaletteDisplayStyles);
+  var cssStyles = [styles.euiColorPaletteDisplay, styles[size]];
   return (0, _react2.jsx)(_react.default.Fragment, null, type === 'fixed' ? (0, _react2.jsx)(_color_palette_display_fixed.EuiColorPaletteDisplayFixed, (0, _extends2.default)({
+    css: cssStyles,
     className: classes,
     palette: palette
   }, rest)) : (0, _react2.jsx)(_color_palette_display_gradient.EuiColorPaletteDisplayGradient, (0, _extends2.default)({
+    css: cssStyles,
     className: classes,
     palette: palette
   }, rest)));

package/optimize/lib/components/color_picker/color_palette_display/color_palette_display.styles.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiColorPaletteDisplayStyles = void 0;
+var _react = require("@emotion/react");
+var _services = require("../../../services");
+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 euiColorPaletteDisplayStyles = exports.euiColorPaletteDisplayStyles = function euiColorPaletteDisplayStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+
+  // Border is a pseudo element with transparency
+  var border = "".concat(euiTheme.border.width.thin, " solid ").concat((0, _services.transparentize)(euiTheme.colors.darkestShade, 0.2));
+  return {
+    euiColorPaletteDisplay: /*#__PURE__*/(0, _react.css)("position:relative;display:flex;flex-direction:row;overflow:hidden;&::after{content:'';position:absolute;inset:0;pointer-events:none;border:", border, ";border-radius:inherit;};label:euiColorPaletteDisplay;"),
+    // Sizes
+    xs: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', euiTheme.size.xs), " border-radius:", euiTheme.size.xs, ";;label:xs;"),
+    s: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', euiTheme.size.s), " border-radius:", euiTheme.size.s, ";;label:s;"),
+    m: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', euiTheme.size.base), " border-radius:", euiTheme.size.base, ";;label:m;")
+  };
+};

package/optimize/lib/components/color_picker/color_palette_display/color_palette_display_fixed.js

@@ -9,6 +9,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _utils = require("../utils");
 var _accessibility = require("../../accessibility");
+var _color_palette_display_fixed = require("./color_palette_display_fixed.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["palette", "title"];
 /*
@@ -36,6 +37,7 @@ var EuiColorPaletteDisplayFixed = exports.EuiColorPaletteDisplayFixed = function
     // aria-hidden="true" is to ensure color blocks are ignored by screen readers,
     // and the only accessible text for options is the EuiScreenReaderOnly {title}
     "aria-hidden": "true",
+    css: _color_palette_display_fixed.euiColorPaletteDisplayFixed__bleedArea,
     className: "euiColorPaletteDisplayFixed__bleedArea"
   }, paletteStops));
 };

package/optimize/lib/components/color_picker/color_palette_display/color_palette_display_fixed.styles.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiColorPaletteDisplayFixed__bleedArea = 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.
+ */
+
+// In a few screen sizes the palette display doesn't get a fully 100% width -
+// it gets 1px less on width. For this reason we're adding a horizontal 1px bleed area
+var euiColorPaletteDisplayFixed__bleedArea = exports.euiColorPaletteDisplayFixed__bleedArea = /*#__PURE__*/(0, _react.css)("position:absolute;inset:0;", (0, _global_styling.logicalCSS)('right', '-1px'), " display:flex;;label:euiColorPaletteDisplayFixed__bleedArea;");