@elastic/eui 67.0.0 → 67.1.1

package/optimize/lib/components/search_bar/filters/filters.js

@@ -19,6 +19,8 @@ var _field_value_toggle_filter = require("./field_value_toggle_filter");
 
 var _field_value_toggle_group_filter = require("./field_value_toggle_group_filter");
 
+var _custom_component_filter = require("./custom_component_filter");
+
 var _react2 = require("@emotion/react");
 
 /*
@@ -60,6 +62,11 @@ var createFilter = function createFilter(index, config, query, onChange) {
         config: config
       }));
 
+    case 'custom_component':
+      return (0, _react2.jsx)(_custom_component_filter.CustomComponentFilter, (0, _extends2.default)({}, props, {
+        config: config
+      }));
+
     default:
       // @ts-ignore TS knows that we've checked `config.type` exhaustively
       throw new Error("Unknown search filter type [".concat(config.type, "]"));

package/optimize/lib/components/search_bar/query/ast.js

@@ -533,6 +533,18 @@ var _AST = /*#__PURE__*/function () {
         return !Is.isInstance(clause) || clause.flag !== flag;
       }));
     }
+  }, {
+    key: "removeIsClauses",
+    value: function removeIsClauses() {
+      return new _AST(this._clauses.filter(function (clause) {
+        return !Is.isInstance(clause);
+      }));
+    }
+  }, {
+    key: "removeAllClauses",
+    value: function removeAllClauses() {
+      return new _AST();
+    }
   }, {
     key: "getGroupClauses",
     value: function getGroupClauses() {

package/optimize/lib/components/search_bar/query/ast_to_es_query_dsl.js

@@ -7,19 +7,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.astToEsQueryDsl = exports._termValuesToQuery = exports._isFlagToQuery = exports._fieldValuesToQuery = void 0;
 
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _date_format = require("./date_format");
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
-var _date_value = require("./date_value");
+var _predicate = require("../../../services/predicate");
+
+var _common = require("../../common");
 
 var _ast = require("./ast");
 
-var _predicate = require("../../../services/predicate");
+var _date_format = require("./date_format");
 
-var _common = require("../../common");
+var _date_value = require("./date_value");
 
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 
@@ -118,12 +118,17 @@ var _fieldValuesToQuery = function _fieldValuesToQuery(field, operations, andOr)
           }
         });
 
-        if (_terms.length > 0) {
+        if (_terms.length > 1) {
+          queries.push({
+            bool: (0, _defineProperty2.default)({}, andOr === 'and' ? 'must' : 'should', (0, _toConsumableArray2.default)(_terms.map(function (value) {
+              return {
+                match: (0, _defineProperty2.default)({}, field, value)
+              };
+            })))
+          });
+        } else if (_terms.length === 1) {
           queries.push({
-            match: (0, _defineProperty2.default)({}, field, {
-              query: _terms.join(' '),
-              operator: andOr
-            })
+            match: (0, _defineProperty2.default)({}, field, _terms[0])
           });
         }
 

package/optimize/lib/components/search_bar/query/query.js

@@ -52,6 +52,11 @@ var Query = /*#__PURE__*/function () {
   }
 
   (0, _createClass2.default)(Query, [{
+    key: "hasClauses",
+    value: function hasClauses() {
+      return this.ast.clauses.length > 0;
+    }
+  }, {
     key: "hasSimpleFieldClause",
     value: function hasSimpleFieldClause(field, value) {
       return this.ast.hasSimpleFieldClause(field, value);
@@ -111,6 +116,12 @@ var Query = /*#__PURE__*/function () {
       var ast = this.ast.removeOrFieldClauses(field);
       return new Query(ast, this.syntax);
     }
+  }, {
+    key: "removeAllClauses",
+    value: function removeAllClauses() {
+      var ast = this.ast.removeAllClauses();
+      return new Query(ast, this.syntax);
+    }
   }, {
     key: "hasIsClause",
     value: function hasIsClause(flag) {
@@ -139,6 +150,12 @@ var Query = /*#__PURE__*/function () {
       var ast = this.ast.removeIsClause(flag);
       return new Query(ast, this.syntax);
     }
+  }, {
+    key: "removeIsClauses",
+    value: function removeIsClauses() {
+      var ast = this.ast.removeIsClauses();
+      return new Query(ast, this.syntax);
+    }
     /**
      * Executes this query over the given iterable item and returns
      * an new array of all items that matched this query. Options:

package/optimize/lib/components/text/text.styles.js

@@ -61,8 +61,11 @@ var euiScaleText = function euiScaleText(euiThemeContext, options) {
   }; // Generate margins for headings based on customScale (not on heading level)
 
   var customScale = _customScale === 'xxxs' ? 'xxs' : _customScale || 'm';
-  var headingMarginTop = "".concat(parseFloat(euiTheme.size[customScale]) * 2, "px");
-  var headingMarginBottom = euiTheme.size[customScale];
+  var marginSize = euiTheme.size[customScale];
+  var headingMarginTop = (0, _global_styling.mathWithUnits)(marginSize, function (x) {
+    return x * 2;
+  });
+  var headingMarginBottom = marginSize;
   return "\n    font-size: ".concat(fontSize, ";\n    line-height: ").concat(lineHeight, ";\n\n    h1 {\n      font-size: ").concat(headings.h1.fontSize, ";\n      line-height: ").concat(headings.h1.lineHeight, ";\n    }\n    h1:not(:last-child) {\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', headingMarginBottom), "\n    }\n\n    h2 {\n      font-size: ").concat(headings.h2.fontSize, ";\n      line-height: ").concat(headings.h2.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h3 {\n      font-size: ").concat(headings.h3.fontSize, ";\n      line-height: ").concat(headings.h3.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h4 {\n      font-size: ").concat(headings.h4.fontSize, ";\n      line-height: ").concat(headings.h4.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h5 {\n      font-size: ").concat(headings.h5.fontSize, ";\n      line-height: ").concat(headings.h5.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h6 {\n      font-size: ").concat(headings.h6.fontSize, ";\n      line-height: ").concat(headings.h6.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    p,\n    ul,\n    ol,\n    dl,\n    blockquote,\n    img,\n    pre {\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', lineHeightSize), "\n    }\n\n    ul,\n    ol {\n      ").concat((0, _global_styling.logicalCSS)('margin-left', lineHeightSize), "\n    }\n  \n    blockquote {\n      font-size: ").concat(fontSize, ";\n      padding: ").concat(lineHeightSize, ";\n    }\n\n    dd + dt {\n      ").concat((0, _global_styling.logicalCSS)('margin-top', fontSize), "\n    }\n\n    dt,\n    .eui-definitionListReverse dd {\n      font-size: ").concat(fontSize, ";\n      line-height: ").concat(lineHeight, ";\n    }\n\n    .eui-definitionListReverse dt {\n      font-size: ").concat((0, _global_styling.euiFontSize)(euiThemeContext, 'xs', options).fontSize, ";\n      color: ").concat(euiTheme.colors.text, ";\n    }\n\n    small {\n      font-size: ").concat((0, _global_styling.euiFontSize)(euiThemeContext, 's', options).fontSize, ";\n    }\n\n    pre:not(.euiCodeBlock__pre) {\n      padding: ").concat(lineHeightSize, ";\n    }\n\n    code:not(.euiCode):not(.euiCodeBlock__code)  {\n      font-size: .9em; // 90% of parent font size\n    }\n    ").concat( // when textSize is 'm', the 'kbd' element gets a line between the text and the border-bottom
   _customScale === 'm' ? "\n    kbd {\n      ".concat((0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.xs), "\n      // ensures when only one character the shape looks like a square\n      ").concat((0, _global_styling.logicalCSS)('min-width', euiTheme.size.l), "\n      ").concat((0, _global_styling.logicalTextAlignCSS)('center'), "\n    }\n    \n    kbd::after {\n      content: '';\n      ").concat((0, _global_styling.logicalCSS)('border-bottom', "".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.text)), "\n      position: absolute;\n      ").concat((0, _global_styling.logicalCSS)('bottom', euiTheme.size.xxs), "\n      ").concat((0, _global_styling.logicalCSS)('left', 0), "\n      ").concat((0, _global_styling.logicalCSS)('width', '100%'), "\n    }") : '', "\n  ");
 };

package/optimize/lib/components/tool_tip/tool_tip.styles.js

@@ -50,12 +50,13 @@ var euiToolTipStyles = function euiToolTipStyles(euiThemeContext) {
    */
 
   var arrowSize = euiTheme.size.m;
-  var arrowSizeInt = parseInt(arrowSize, 10);
-  var arrowPlusSize = "".concat((arrowSizeInt / 2 + 1) * -1, "px");
-  /* 1 */
+  var arrowPlusSize = (0, _global_styling.mathWithUnits)(arrowSize, function (x) {
+    return (x / 2 + 1) * -1;
+  }); // 1.
 
-  var arrowMinusSize = "".concat((arrowSizeInt / 2 - 1) * -1, "px");
-  /* 1 */
+  var arrowMinusSize = (0, _global_styling.mathWithUnits)(arrowSize, function (x) {
+    return (x / 2 - 1) * -1;
+  }); // 1.
 
   return {
     // Base

package/optimize/lib/components/tour/tour.styles.js

@@ -40,15 +40,20 @@ exports.euiTourStyles = euiTourStyles;
 var euiTourBeaconStyles = function euiTourBeaconStyles(_ref2) {
   var euiTheme = _ref2.euiTheme;
   var arrowSize = euiTheme.size[_popover_arrow.popoverArrowSize];
-  var arrowSizeInt = parseInt(arrowSize, 10);
+  var arrowHalfSize = (0, _global_styling.mathWithUnits)(arrowSize, function (x) {
+    return x / 2;
+  });
+  var arrowOffset = (0, _global_styling.mathWithUnits)(arrowSize, function (x) {
+    return x * -2;
+  });
   return {
     // Base
     euiTourBeacon: /*#__PURE__*/(0, _react.css)("pointer-events:none;position:absolute;opacity:0;transition:opacity 0s ", euiTheme.animation[_popover_panel.openAnimationTiming], ";;label:euiTourBeacon;"),
     // Positions
-    right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('top', "".concat(arrowSizeInt / 2, "px")), ";", (0, _global_styling.logicalCSS)('left', "".concat(arrowSizeInt * -2, "px")), ";;label:right;"),
-    left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('top', "".concat(arrowSizeInt / 2, "px")), ";", (0, _global_styling.logicalCSS)('left', arrowSize), ";;label:left;"),
-    top: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('top', arrowSize), ";", (0, _global_styling.logicalCSS)('left', "".concat(arrowSizeInt / 2, "px")), ";;label:top;"),
-    bottom: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('top', "".concat(arrowSizeInt * -2, "px")), ";", (0, _global_styling.logicalCSS)('left', "".concat(arrowSizeInt / 2, "px")), ";;label:bottom;")
+    right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('top', arrowHalfSize), ";", (0, _global_styling.logicalCSS)('left', arrowOffset), ";;label:right;"),
+    left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('top', arrowHalfSize), ";", (0, _global_styling.logicalCSS)('left', arrowSize), ";;label:left;"),
+    top: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('top', arrowSize), ";", (0, _global_styling.logicalCSS)('left', arrowHalfSize), ";;label:top;"),
+    bottom: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('top', arrowOffset), ";", (0, _global_styling.logicalCSS)('left', arrowHalfSize), ";;label:bottom;")
   };
 };
 

package/optimize/lib/global_styling/functions/index.js

@@ -17,6 +17,19 @@ Object.keys(_logicals).forEach(function (key) {
   });
 });
 
+var _math = require("./math");
+
+Object.keys(_math).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _math[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _math[key];
+    }
+  });
+});
+
 var _size = require("./size");
 
 Object.keys(_size).forEach(function (key) {

package/optimize/lib/global_styling/functions/math.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mathWithUnits = void 0;
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _setPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/setPrototypeOf"));
+
+function _wrapRegExp() { _wrapRegExp = function _wrapRegExp(re, groups) { return new BabelRegExp(re, undefined, groups); }; var _super = RegExp.prototype; var _groups = new WeakMap(); function BabelRegExp(re, flags, groups) { var _this = new RegExp(re, flags); _groups.set(_this, groups || _groups.get(re)); return (0, _setPrototypeOf2.default)(_this, BabelRegExp.prototype); } (0, _inherits2.default)(BabelRegExp, RegExp); BabelRegExp.prototype.exec = function (str) { var result = _super.exec.call(this, str); if (result) result.groups = buildGroups(result, this); return result; }; BabelRegExp.prototype[Symbol.replace] = function (str, substitution) { if (typeof substitution === "string") { var groups = _groups.get(this); return _super[Symbol.replace].call(this, str, substitution.replace(/\$<([^>]+)>/g, function (_, name) { return "$" + groups[name]; })); } else if (typeof substitution === "function") { var _this = this; return _super[Symbol.replace].call(this, str, function () { var args = arguments; if (_typeof(args[args.length - 1]) !== "object") { args = [].slice.call(args); args.push(buildGroups(args, _this)); } return substitution.apply(this, args); }); } else { return _super[Symbol.replace].call(this, str, substitution); } }; function buildGroups(result, re) { var g = _groups.get(re); return Object.keys(g).reduce(function (groups, name) { groups[name] = result[g[name]]; return groups; }, Object.create(null)); } return _wrapRegExp.apply(this, arguments); }
+
+/*
+ * 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.
+ */
+
+/**
+ * Utility for performing math callbacks on a string with CSS units
+ * and returning a string with its unit preserved.
+ *
+ * Example usage:
+ * mathWithUnits('4px', (x) => x / 2) = '2px';
+ * mathWithUnits(euiTheme.size.xs, (x) => x + 2) = '6px';
+ */
+var mathWithUnits = function mathWithUnits(value, callback) {
+  var unit = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+
+  if (typeof value === 'string') {
+    var _matches$groups;
+
+    var regex = /*#__PURE__*/_wrapRegExp(/(\x2D?[\.0-9]+)(%|[A-Za-z]*)/, {
+      value: 1,
+      unit: 2
+    });
+
+    var matches = regex.exec(value);
+    if (!(matches !== null && matches !== void 0 && (_matches$groups = matches.groups) !== null && _matches$groups !== void 0 && _matches$groups.value)) return value;
+    var numericValue = Number(matches.groups.value);
+    var passedUnit = matches.groups.unit || unit;
+    return "".concat(callback(numericValue)).concat(passedUnit);
+  } else if (typeof value === 'number') {
+    return "".concat(callback(value)).concat(unit);
+  } else {
+    return value;
+  }
+};
+
+exports.mathWithUnits = mathWithUnits;

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

@@ -117,12 +117,15 @@ exports.useEuiYScroll = useEuiYScroll;
 
 var euiYScrollWithShadows = function euiYScrollWithShadows(euiTheme) {
   var _ref7 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      height = _ref7.height;
+      height = _ref7.height,
+      _ref7$side = _ref7.side,
+      side = _ref7$side === void 0 ? 'both' : _ref7$side;
 
   return "\n  ".concat(euiYScroll(euiTheme, {
     height: height
   }), "\n  ").concat(euiOverflowShadowStyles(euiTheme, {
-    direction: 'y'
+    direction: 'y',
+    side: side
   }), "\n");
 };
 

package/optimize/lib/services/color/contrast.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.makeHighContrastColor = exports.makeDisabledContrastColor = void 0;
+exports.wcagContrastMin = exports.makeHighContrastColor = exports.makeDisabledContrastColor = void 0;
 
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
@@ -22,6 +22,7 @@ var _utils = require("../theme/utils");
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+var wcagContrastMin = 4.5; // WCAG AA minimum contrast ratio for normal (non-large) text
 
 /**
  * Creates a new color that meets or exceeds WCAG level AA
@@ -30,6 +31,9 @@ var _utils = require("../theme/utils");
  * *
  * @param themeOrBackground - Color to use as the contrast basis or just pass EuiTheme
  */
+
+exports.wcagContrastMin = wcagContrastMin;
+
 var makeHighContrastColor = function makeHighContrastColor(_foreground) {
   var ratio = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 4.85;
   return function (themeOrBackground) {

package/optimize/lib/services/index.js

@@ -57,6 +57,7 @@ var _exportNames = {
   lightness: true,
   makeHighContrastColor: true,
   makeDisabledContrastColor: true,
+  wcagContrastMin: true,
   useColorPickerState: true,
   useColorStopsState: true,
   copyToClipboard: true,
@@ -569,6 +570,12 @@ Object.defineProperty(exports, "useIsWithinMinBreakpoint", {
     return _breakpoint.useIsWithinMinBreakpoint;
   }
 });
+Object.defineProperty(exports, "wcagContrastMin", {
+  enumerable: true,
+  get: function get() {
+    return _color.wcagContrastMin;
+  }
+});
 
 var keys = _interopRequireWildcard(require("./keys"));
 

package/optimize/lib/services/theme/context.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EuiThemeContext = exports.EuiSystemContext = exports.EuiModificationsContext = exports.EuiColorModeContext = void 0;
+exports.defaultComputedTheme = exports.EuiThemeContext = exports.EuiSystemContext = exports.EuiModificationsContext = exports.EuiColorModeContext = void 0;
 
 var _react = require("react");
 
@@ -24,5 +24,7 @@ var EuiModificationsContext = /*#__PURE__*/(0, _react.createContext)({});
 exports.EuiModificationsContext = EuiModificationsContext;
 var EuiColorModeContext = /*#__PURE__*/(0, _react.createContext)(_utils.DEFAULT_COLOR_MODE);
 exports.EuiColorModeContext = EuiColorModeContext;
-var EuiThemeContext = /*#__PURE__*/(0, _react.createContext)((0, _utils.getComputed)(_theme.EuiThemeAmsterdam, {}, _utils.DEFAULT_COLOR_MODE));
+var defaultComputedTheme = (0, _utils.getComputed)(_theme.EuiThemeAmsterdam, {}, _utils.DEFAULT_COLOR_MODE);
+exports.defaultComputedTheme = defaultComputedTheme;
+var EuiThemeContext = /*#__PURE__*/(0, _react.createContext)(defaultComputedTheme);
 exports.EuiThemeContext = EuiThemeContext;

package/optimize/lib/services/theme/hooks.js

@@ -15,6 +15,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _context = require("./context");
 
+var _provider = require("./provider");
+
 var _react2 = require("@emotion/react");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -28,10 +30,36 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+var providerMessage = "`EuiProvider` is missing which can result in negative effects.\nWrap your component in `EuiProvider`: https://ela.st/euiprovider.";
+
 var useEuiTheme = function useEuiTheme() {
   var theme = (0, _react.useContext)(_context.EuiThemeContext);
   var colorMode = (0, _react.useContext)(_context.EuiColorModeContext);
   var modifications = (0, _react.useContext)(_context.EuiModificationsContext);
+
+  if (process.env.NODE_ENV !== 'production') {
+    var isFallback = theme === _context.defaultComputedTheme;
+    var warningLevel = (0, _provider.getEuiDevProviderWarning)();
+
+    if (isFallback && typeof warningLevel !== 'undefined') {
+      switch (warningLevel) {
+        case 'log':
+          console.log(providerMessage);
+          break;
+
+        case 'warn':
+          console.warn(providerMessage);
+          break;
+
+        case 'error':
+          throw new Error(providerMessage);
+
+        default:
+          break;
+      }
+    }
+  }
+
   var assembledTheme = (0, _react.useMemo)(function () {
     return {
       euiTheme: theme,

package/optimize/lib/services/theme/index.js

@@ -69,6 +69,12 @@ Object.defineProperty(exports, "getComputed", {
     return _utils.getComputed;
   }
 });
+Object.defineProperty(exports, "getEuiDevProviderWarning", {
+  enumerable: true,
+  get: function get() {
+    return _provider.getEuiDevProviderWarning;
+  }
+});
 Object.defineProperty(exports, "getOn", {
   enumerable: true,
   get: function get() {
@@ -87,6 +93,12 @@ Object.defineProperty(exports, "mergeDeep", {
     return _utils.mergeDeep;
   }
 });
+Object.defineProperty(exports, "setEuiDevProviderWarning", {
+  enumerable: true,
+  get: function get() {
+    return _provider.setEuiDevProviderWarning;
+  }
+});
 Object.defineProperty(exports, "setOn", {
   enumerable: true,
   get: function get() {

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

@@ -7,7 +7,9 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EuiThemeProvider = void 0;
+exports.setEuiDevProviderWarning = exports.getEuiDevProviderWarning = exports.EuiThemeProvider = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
@@ -25,13 +27,24 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-/*
- * 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.
- */
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var providerWarning = undefined;
+
+var setEuiDevProviderWarning = function setEuiDevProviderWarning(level) {
+  return providerWarning = level;
+};
+
+exports.setEuiDevProviderWarning = setEuiDevProviderWarning;
+
+var getEuiDevProviderWarning = function getEuiDevProviderWarning() {
+  return providerWarning;
+};
+
+exports.getEuiDevProviderWarning = getEuiDevProviderWarning;
+
 var EuiThemeProvider = function EuiThemeProvider(_ref) {
   var _system = _ref.theme,
       _colorMode = _ref.colorMode,
@@ -64,7 +77,8 @@ var EuiThemeProvider = function EuiThemeProvider(_ref) {
   var prevColorMode = (0, _react.useRef)(colorMode);
   var isParentTheme = (0, _react.useRef)(prevSystemKey.current === parentSystem.key && colorMode === parentColorMode && (0, _isEqual.default)(parentModifications, modifications));
 
-  var _useState7 = (0, _react.useState)(isParentTheme.current && Object.keys(parentTheme).length ? parentTheme : (0, _utils.getComputed)(system, (0, _utils.buildTheme)(modifications, "_".concat(system.key)), colorMode)),
+  var _useState7 = (0, _react.useState)(isParentTheme.current && Object.keys(parentTheme).length ? _objectSpread({}, parentTheme) // Intentionally create a new object to break referential equality
+  : (0, _utils.getComputed)(system, (0, _utils.buildTheme)(modifications, "_".concat(system.key)), colorMode)),
       _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
       theme = _useState8[0],
       setTheme = _useState8[1];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "67.0.0",
+  "version": "67.1.1",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
@@ -112,10 +112,10 @@
     "@babel/preset-env": "^7.11.0",
     "@babel/preset-react": "^7.10.4",
     "@babel/preset-typescript": "^7.16.7",
-    "@cypress/code-coverage": "^3.9.12",
+    "@cypress/code-coverage": "^3.10.0",
     "@cypress/react": "^5.10.3",
     "@cypress/webpack-dev-server": "^1.7.0",
-    "@elastic/charts": "^48.0.0",
+    "@elastic/charts": "^48.0.1",
     "@elastic/datemath": "^5.0.3",
     "@elastic/eslint-config-kibana": "^0.15.0",
     "@emotion/babel-preset-css-prop": "^11.2.0",
@@ -168,7 +168,7 @@
     "cross-env": "^7.0.2",
     "css-loader": "^4.2.2",
     "cssnano": "^4.1.10",
-    "cypress": "^9.5.4",
+    "cypress": "^10.6.0",
     "cypress-axe": "^0.14.0",
     "cypress-plugin-tab": "^1.0.5",
     "cypress-real-events": "^1.7.0",
@@ -251,8 +251,8 @@
   },
   "peerDependencies": {
     "@elastic/datemath": "^5.0.2",
-    "@emotion/react": "11.x",
     "@emotion/cache": "11.x",
+    "@emotion/react": "11.x",
     "@types/react": "^16.9 || ^17.0",
     "@types/react-dom": "^16.9 || ^17.0",
     "moment": "^2.13.0",

package/src/components/badge/_index.scss

@@ -1,4 +1,3 @@
-@import 'badge';
 @import 'badge_group/index';
 @import 'beta_badge/index';
 @import 'notification_badge/index';

package/src/components/index.scss

@@ -16,7 +16,6 @@
 @import 'empty_prompt/index';
 @import 'filter_group/index';
 @import 'flex/index';
-@import 'flyout/index';
 @import 'form/index';
 @import 'header/index';
 @import 'key_pad_menu/index';

package/src/themes/amsterdam/global_styling/variables/_index.scss

@@ -4,7 +4,6 @@
 
 @import 'buttons';
 @import 'borders';
-@import 'flyout';
 @import 'form';
 @import 'header';
 @import 'page';

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

@@ -213,10 +213,10 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
 
       if (_arrowDisplay !== 'none') {
         iconButton = (0, _react2.jsx)(_button.EuiButtonIcon, (0, _extends2.default)({
-          color: "text"
+          color: "text",
+          css: cssIconButtonStyles
         }, arrowProps, {
           className: iconButtonClasses,
-          css: cssIconButtonStyles,
           iconType: "arrowRight",
           onClick: this.onToggle,
           "aria-controls": id,
@@ -252,10 +252,11 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
         childrenContent = children;
       }
 
-      var button = (0, _react2.jsx)(ButtonElement, (0, _extends2.default)({}, buttonProps, {
+      var button = (0, _react2.jsx)(ButtonElement, (0, _extends2.default)({
+        css: cssButtonStyles
+      }, buttonProps, {
         id: buttonId,
         className: buttonClasses,
-        css: cssButtonStyles,
         "aria-controls": id,
         "aria-expanded": isOpen,
         onClick: isDisabled ? undefined : this.onToggle,

package/test-env/components/accordion/accordion.styles.js

@@ -50,7 +50,7 @@ exports.euiAccordionChildrenStyles = euiAccordionChildrenStyles;
 var euiAccordionChildWrapperStyles = function euiAccordionChildWrapperStyles(_ref6) {
   var euiTheme = _ref6.euiTheme;
   return {
-    euiAccordion__childWrapper: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', 0), " opacity:0;overflow:hidden;transition:", _global_styling.logicals.height, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ",opacity ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ";visibility:hidden;will-change:opacity,visibility,", _global_styling.logicals.height, ";&:focus{outline:none;};label:euiAccordion__childWrapper;"),
+    euiAccordion__childWrapper: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', 0), " opacity:0;overflow:hidden;transition:", _global_styling.logicals.height, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ",opacity ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ";visibility:hidden;&:focus{outline:none;};label:euiAccordion__childWrapper;"),
     isOpen: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', 'auto'), " opacity:1;visibility:visible;;label:isOpen;")
   };
 };