@elastic/eui 67.0.0 → 67.1.1

package/lib/components/pagination/pagination_button.styles.js

@@ -21,7 +21,9 @@ var _mixins = require("../../themes/amsterdam/global_styling/mixins");
 var euiPaginationButtonStyles = function euiPaginationButtonStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   var fontSizeS = (0, _global_styling.euiFontSize)(euiThemeContext, 's');
-  var halfSizeM = parseInt(euiTheme.size.m.replace('px', '')) / 2;
+  var halfSizeM = (0, _global_styling.mathWithUnits)(euiTheme.size.m, function (x) {
+    return x / 2;
+  });
   var disabled = (0, _mixins.euiButtonEmptyColor)(euiThemeContext, 'disabled'); // && to increase specificity. Can likely be removed once EuiButtonEmpty has been converted.
 
   return {
@@ -29,7 +31,7 @@ var euiPaginationButtonStyles = function euiPaginationButtonStyles(euiThemeConte
     euiPaginationButton: /*#__PURE__*/(0, _react.css)("&&{", fontSizeS, ";padding:0;", (0, _global_styling.logicalTextAlignCSS)('center'), " border-radius:", euiTheme.border.radius.medium, ";outline-offset:-", euiTheme.focus.width, ";};label:euiPaginationButton;"),
     // States
     isActive: /*#__PURE__*/(0, _react.css)("&&{font-weight:", euiTheme.font.weight.bold, ";color:", euiTheme.colors.primary, ";.euiButtonEmpty__content{cursor:default;}&&,&&:hover{text-decoration:underline;}};label:isActive;"),
-    isPlaceholder: /*#__PURE__*/(0, _react.css)("&&{align-items:baseline;color:", disabled.color, ";", fontSizeS, ";", (0, _global_styling.logicalCSS)('padding-top', "".concat(halfSizeM, "px")), ";", (0, _global_styling.logicalCSS)('padding-bottom', 0), ";", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.s), ";", (0, _global_styling.logicalCSS)('height', euiTheme.size.l), ";};label:isPlaceholder;")
+    isPlaceholder: /*#__PURE__*/(0, _react.css)("&&{align-items:baseline;color:", disabled.color, ";", fontSizeS, ";", (0, _global_styling.logicalCSS)('padding-top', halfSizeM), ";", (0, _global_styling.logicalCSS)('padding-bottom', 0), ";", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.s), ";", (0, _global_styling.logicalCSS)('height', euiTheme.size.l), ";};label:isPlaceholder;")
   };
 };
 

package/lib/components/popover/popover_title.js

@@ -47,9 +47,9 @@ var EuiPopoverTitle = function EuiPopoverTitle(_ref) {
       panelPadding = _useContext.paddingSize;
 
   var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _popover_title.euiPopoverTitleStyles)(euiTheme, panelPadding);
+  var styles = (0, _popover_title.euiPopoverTitleStyles)(euiTheme);
   var paddingStyles = (0, _global_styling.useEuiPaddingCSS)();
-  var cssStyles = [styles.euiPopoverTitle, // If a paddingSize is not directly provided, inherit from the EuiPopoverPanel
+  var cssStyles = [styles.euiPopoverTitle, styles.panelPaddingSizes[panelPadding], // If a paddingSize is not directly provided, inherit from the EuiPopoverPanel
   paddingStyles[paddingSize || panelPadding]];
   var classes = (0, _classnames.default)('euiPopoverTitle', className);
   return (0, _react2.jsx)("div", _extends({

package/lib/components/popover/popover_title.styles.js

@@ -18,15 +18,27 @@ var _title = require("../title/title.styles");
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var euiPopoverTitleStyles = function euiPopoverTitleStyles(euiThemeContext, panelPadding) {
-  var euiTheme = euiThemeContext.euiTheme; // If the popover's containing panel has padding applied,
-  // ensure the title expands to cover that padding and
-
-  var panelPaddingSize = (0, _global_styling.euiPaddingSize)(euiThemeContext, panelPadding);
+var euiPopoverTitleStyles = function euiPopoverTitleStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    euiPopoverTitle: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 'xxs'), ";", (0, _global_styling.logicalCSS)('border-bottom', euiTheme.border.thin), ";margin:-", panelPaddingSize, " -", panelPaddingSize, " ", panelPaddingSize, ";;label:euiPopoverTitle;")
+    euiPopoverTitle: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 'xxs'), ";", (0, _global_styling.logicalCSS)('border-bottom', euiTheme.border.thin), ";;label:euiPopoverTitle;"),
+    // If the popover's containing panel has padding applied,
+    // ensure the title expands to cover that padding via negative margins
+    panelPaddingSizes: {
+      none: /*#__PURE__*/(0, _react.css)(";label:none;"),
+      xs: /*#__PURE__*/(0, _react.css)(getPaddingOffset(euiThemeContext, 'xs'), ";;label:xs;"),
+      s: /*#__PURE__*/(0, _react.css)(getPaddingOffset(euiThemeContext, 's'), ";;label:s;"),
+      m: /*#__PURE__*/(0, _react.css)(getPaddingOffset(euiThemeContext, 'm'), ";;label:m;"),
+      l: /*#__PURE__*/(0, _react.css)(getPaddingOffset(euiThemeContext, 'l'), ";;label:l;"),
+      xl: /*#__PURE__*/(0, _react.css)(getPaddingOffset(euiThemeContext, 'xl'), ";;label:xl;")
+    }
   };
 };
 
-exports.euiPopoverTitleStyles = euiPopoverTitleStyles;
+exports.euiPopoverTitleStyles = euiPopoverTitleStyles;
+
+var getPaddingOffset = function getPaddingOffset(euiThemeContext, size) {
+  var panelPaddingSize = (0, _global_styling.euiPaddingSize)(euiThemeContext, size);
+  return "margin: -".concat(panelPaddingSize, " -").concat(panelPaddingSize, " ").concat(panelPaddingSize, ";");
+};

package/lib/components/progress/progress.js

@@ -105,9 +105,9 @@ var EuiProgress = function EuiProgress(_ref) {
     }, label && (0, _react2.jsx)(_inner_text.EuiInnerText, null, function (ref, innerText) {
       return (0, _react2.jsx)("span", _extends({
         title: innerText,
-        ref: ref
+        ref: ref,
+        css: labelCssStyles
       }, labelProps, {
-        css: labelCssStyles,
         className: labelClasses
       }), label);
     }), valueRender && (0, _react2.jsx)(_inner_text.EuiInnerText, null, function (ref, innerText) {

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

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CustomComponentFilter = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@emotion/react");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/*
+ * 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 CustomComponentFilter = function CustomComponentFilter(props) {
+  var CustomComponent = props.config.component;
+  return (0, _react2.jsx)(CustomComponent, {
+    query: props.query,
+    onChange: props.onChange
+  });
+};
+
+exports.CustomComponentFilter = CustomComponentFilter;

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

@@ -15,6 +15,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");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -53,6 +55,11 @@ var createFilter = function createFilter(index, config, query, onChange) {
         config: config
       }));
 
+    case 'custom_component':
+      return (0, _react2.jsx)(_custom_component_filter.CustomComponentFilter, _extends({}, 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/lib/components/search_bar/query/ast.js

@@ -547,6 +547,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/lib/components/search_bar/query/ast_to_es_query_dsl.js

@@ -5,18 +5,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.astToEsQueryDsl = exports._termValuesToQuery = exports._isFlagToQuery = exports._fieldValuesToQuery = void 0;
 
-var _date_format = require("./date_format");
+var _predicate = require("../../../services/predicate");
 
-var _date_value = require("./date_value");
+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; } } }; }
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -29,8 +31,6 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 var processDateOperation = function processDateOperation(value, operator) {
   var granularity = value.granularity,
       resolve = value.resolve;
@@ -122,12 +122,17 @@ var _fieldValuesToQuery = function _fieldValuesToQuery(field, operations, andOr)
           }
         });
 
-        if (_terms.length > 0) {
+        if (_terms.length > 1) {
+          queries.push({
+            bool: _defineProperty({}, andOr === 'and' ? 'must' : 'should', _toConsumableArray(_terms.map(function (value) {
+              return {
+                match: _defineProperty({}, field, value)
+              };
+            })))
+          });
+        } else if (_terms.length === 1) {
           queries.push({
-            match: _defineProperty({}, field, {
-              query: _terms.join(' '),
-              operator: andOr
-            })
+            match: _defineProperty({}, field, _terms[0])
           });
         }
 

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

@@ -49,6 +49,11 @@ var Query = /*#__PURE__*/function () {
   }
 
   _createClass(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);
@@ -108,6 +113,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) {
@@ -136,6 +147,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/lib/components/search_bar/search_bar.js

@@ -437,6 +437,10 @@ EuiSearchBar.propTypes = {
       operator: _propTypes.default.oneOf(["eq", "exact", "gt", "gte", "lt", "lte"])
     }).isRequired).isRequired,
     available: _propTypes.default.func
+  }).isRequired, _propTypes.default.shape({
+    type: _propTypes.default.oneOf(["custom_component"]).isRequired,
+    component: _propTypes.default.elementType.isRequired,
+    available: _propTypes.default.func
   }).isRequired]).isRequired),
 
   /**

package/lib/components/search_bar/search_filters.js

@@ -169,5 +169,9 @@ EuiSearchFilters.propTypes = {
       operator: _propTypes.default.oneOf(["eq", "exact", "gt", "gte", "lt", "lte"])
     }).isRequired).isRequired,
     available: _propTypes.default.func
+  }).isRequired, _propTypes.default.shape({
+    type: _propTypes.default.oneOf(["custom_component"]).isRequired,
+    component: _propTypes.default.elementType.isRequired,
+    available: _propTypes.default.func
   }).isRequired]).isRequired).isRequired
 };

package/lib/components/selectable/selectable_list/selectable_list.js

@@ -454,12 +454,12 @@ EuiSelectableList.propTypes = {
     /**
        * The side of the badge the icon should sit
        */
-    iconSide: _propTypes.default.oneOf(["left", "right"]),
+    iconSide: _propTypes.default.any,
 
     /**
        * Accepts either our palette colors (primary, success ..etc) or a hex value `#FFFFFF`, `#000`.
        */
-    color: _propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.any.isRequired]),
+    color: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.string.isRequired]),
 
     /**
        * Will override any color passed through the `color` prop.

package/lib/components/selectable/selectable_list/selectable_list_item.js

@@ -289,12 +289,12 @@ EuiSelectableListItem.propTypes = {
     /**
        * The side of the badge the icon should sit
        */
-    iconSide: _propTypes.default.oneOf(["left", "right"]),
+    iconSide: _propTypes.default.any,
 
     /**
        * Accepts either our palette colors (primary, success ..etc) or a hex value `#FFFFFF`, `#000`.
        */
-    color: _propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.any.isRequired]),
+    color: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.string.isRequired]),
 
     /**
        * Will override any color passed through the `color` prop.

package/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/lib/components/tool_tip/tool_tip.styles.js

@@ -48,12 +48,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/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/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/lib/global_styling/functions/math.js

@@ -0,0 +1,55 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mathWithUnits = void 0;
+
+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 _setPrototypeOf(_this, BabelRegExp.prototype); } _inherits(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); }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+/*
+ * 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/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/lib/services/color/contrast.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.makeHighContrastColor = exports.makeDisabledContrastColor = void 0;
+exports.wcagContrastMin = exports.makeHighContrastColor = exports.makeDisabledContrastColor = void 0;
 
 var _chromaJs = _interopRequireDefault(require("chroma-js"));
 
@@ -15,6 +15,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
+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
  * @param foreground - Color to manipulate
@@ -22,6 +24,9 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
  * *
  * @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/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/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/lib/services/theme/hooks.js

@@ -11,6 +11,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); }
@@ -19,10 +21,36 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+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/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() {