@elastic/eui 67.1.0 → 67.1.2

package/es/components/flyout/flyout_header.styles.js

@@ -0,0 +1,28 @@
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+/*
+ * 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.
+ */
+import { css } from '@emotion/react';
+import { logicalCSS } from '../../global_styling';
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1hivny1-euiFlyoutHeader",
+  styles: "flex-grow:0;label:euiFlyoutHeader;"
+} : {
+  name: "1hivny1-euiFlyoutHeader",
+  styles: "flex-grow:0;label:euiFlyoutHeader;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export var euiFlyoutHeaderStyles = function euiFlyoutHeaderStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiFlyoutHeader: _ref,
+    hasBorder: /*#__PURE__*/css(logicalCSS('border-bottom', euiTheme.border.thin), ";;label:hasBorder;")
+  };
+};

package/es/components/image/image_wrapper.js

@@ -56,10 +56,10 @@ export var EuiImageWrapper = function EuiImageWrapper(_ref) {
       optionalCaptionText = _useInnerText2[1];
 
   return ___EmotionJSX("figure", _extends({
-    "aria-label": optionalCaptionText
-  }, wrapperProps, {
-    className: classes,
+    "aria-label": optionalCaptionText,
     css: cssFigureStyles
+  }, wrapperProps, {
+    className: classes
   }), allowFullScreen ? ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiImageButton, {
     hasAlt: !!alt,
     hasShadow: hasShadow,

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

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 import { css } from '@emotion/react';
-import { logicalCSS, euiFontSize } from '../../global_styling';
+import { logicalCSS, euiFontSize, mathWithUnits } from '../../global_styling';
 /**
  * Mixins
  */
@@ -20,11 +20,16 @@ var euiScaleMarkdownFormatText = function euiScaleMarkdownFormatText(euiTheme, o
   var measurement = options.measurement;
   var lineHeightSize = measurement === 'em' ? "".concat(lineHeight, "em") : lineHeight; // Custom scales
 
-  var fontSizeNumeric = parseFloat(String(fontSize));
-  var blockQuoteBorderWidth = fontSizeNumeric / 4;
-  var tablePaddingVertical = fontSizeNumeric / 4;
-  var tablePaddingHorizontal = fontSizeNumeric / 2;
-  return "\n    .euiMarkdownFormat__blockquote {\n      padding: 0 ".concat(fontSize, ";\n      ").concat(logicalCSS('border-left-width', "".concat(blockQuoteBorderWidth).concat(measurement)), "\n      ").concat(logicalCSS('margin-bottom', fontSize), "\n    }\n\n    .euiCheckbox .euiCheckbox__input ~ .euiCheckbox__label { // Extra specificity necessary to override default checkbox CSS\n      font-size: ").concat(fontSize, ";\n      ").concat(logicalCSS('padding-left', lineHeightSize), "\n      line-height: ").concat(lineHeight, ";\n    }\n\n    .euiCheckbox + *:not(.euiCheckbox) {\n      ").concat(logicalCSS('margin-top', fontSize), "\n    }\n\n    .euiMarkdownFormat__codeblockWrapper {\n      ").concat(logicalCSS('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table {\n      ").concat(logicalCSS('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table th,\n    .euiMarkdownFormat__table td {\n      ").concat(logicalCSS('padding-vertical', "".concat(tablePaddingVertical).concat(measurement)), "\n      ").concat(logicalCSS('padding-horizontal', "".concat(tablePaddingHorizontal).concat(measurement)), "\n    }\n  ");
+  var blockQuoteBorderWidth = mathWithUnits(fontSize, function (x) {
+    return x / 4;
+  });
+  var tablePaddingVertical = mathWithUnits(fontSize, function (x) {
+    return x / 4;
+  });
+  var tablePaddingHorizontal = mathWithUnits(fontSize, function (x) {
+    return x / 2;
+  });
+  return "\n    .euiMarkdownFormat__blockquote {\n      padding: 0 ".concat(fontSize, ";\n      ").concat(logicalCSS('border-left-width', blockQuoteBorderWidth), "\n      ").concat(logicalCSS('margin-bottom', fontSize), "\n    }\n\n    .euiCheckbox .euiCheckbox__input ~ .euiCheckbox__label { // Extra specificity necessary to override default checkbox CSS\n      font-size: ").concat(fontSize, ";\n      ").concat(logicalCSS('padding-left', lineHeightSize), "\n      line-height: ").concat(lineHeight, ";\n    }\n\n    .euiCheckbox + *:not(.euiCheckbox) {\n      ").concat(logicalCSS('margin-top', fontSize), "\n    }\n\n    .euiMarkdownFormat__codeblockWrapper {\n      ").concat(logicalCSS('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table {\n      ").concat(logicalCSS('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table th,\n    .euiMarkdownFormat__table td {\n      ").concat(logicalCSS('padding-vertical', tablePaddingVertical), "\n      ").concat(logicalCSS('padding-horizontal', tablePaddingHorizontal), "\n    }\n  ");
 };
 /**
  * Styles

package/es/components/notification/notification_event.js

@@ -47,9 +47,8 @@ export var EuiNotificationEvent = function EuiNotificationEvent(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var classes = classNames('euiNotificationEvent', {
-    'euiNotificationEvent--withReadState': typeof isRead === 'boolean',
-    className: className
-  });
+    'euiNotificationEvent--withReadState': typeof isRead === 'boolean'
+  }, className);
   var classesTitle = classNames('euiNotificationEvent__title', {
     'euiNotificationEvent__title--isRead': isRead
   });

package/es/components/page/page_header/page_header_content.js

@@ -59,7 +59,7 @@ export var EuiPageHeaderContent = function EuiPageHeaderContent(_ref) {
 
   var isResponsiveBreakpoint = useIsWithinBreakpoints(['xs', 's'], !!responsive);
   var useTheme = useEuiTheme();
-  var classes = classNames('euiPageHeaderContent');
+  var classes = classNames('euiPageHeaderContent', className);
   var pageHeaderStyles = euiPageHeaderStyles(useTheme);
   var contentStyles = euiPageHeaderContentStyles(useTheme);
   var styles = setStyleForRestrictedPageWidth(restrictWidth, style);

package/es/components/page/page_section/page_section.js

@@ -47,12 +47,11 @@ export var EuiPageSection = function EuiPageSection(_ref) {
   var colors = useEuiBackgroundColorCSS();
   var cssStyles = [styles.euiPageSection, grow && styles.grow, inlinePadding[paddingSize], bottomBorder === 'extended' && styles.border, alignment && styles[alignment], colors[color]];
   var contentStyles = euiPageSectionContentStyles();
-  var cssContentStyles = [contentStyles.euiPageSection__content, blockPadding[paddingSize], bottomBorder === true && styles.border, alignment.toLowerCase().includes('center') && contentStyles.center, restrictWidth && contentStyles.restrictWidth];
+  var cssContentStyles = [contentStyles.euiPageSection__content, blockPadding[paddingSize], bottomBorder === true && styles.border, alignment.toLowerCase().includes('center') && contentStyles.center, restrictWidth && contentStyles.restrictWidth, (contentProps === null || contentProps === void 0 ? void 0 : contentProps.css) && contentProps.css];
   return ___EmotionJSX(Component, _extends({
     css: cssStyles
-  }, rest), ___EmotionJSX("div", _extends({
-    css: cssContentStyles
-  }, contentProps, {
+  }, rest), ___EmotionJSX("div", _extends({}, contentProps, {
+    css: cssContentStyles,
     style: widthStyles
   }), children));
 };

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

@@ -6,12 +6,14 @@
  * Side Public License, v 1.
  */
 import { css } from '@emotion/react';
-import { logicalCSS, logicalTextAlignCSS, euiFontSize } from '../../global_styling';
+import { logicalCSS, logicalTextAlignCSS, mathWithUnits, euiFontSize } from '../../global_styling';
 import { euiButtonEmptyColor } from '../../themes/amsterdam/global_styling/mixins';
 export var euiPaginationButtonStyles = function euiPaginationButtonStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   var fontSizeS = euiFontSize(euiThemeContext, 's');
-  var halfSizeM = parseInt(euiTheme.size.m.replace('px', '')) / 2;
+  var halfSizeM = mathWithUnits(euiTheme.size.m, function (x) {
+    return x / 2;
+  });
   var disabled = euiButtonEmptyColor(euiThemeContext, 'disabled'); // && to increase specificity. Can likely be removed once EuiButtonEmpty has been converted.
 
   return {
@@ -19,7 +21,7 @@ export var euiPaginationButtonStyles = function euiPaginationButtonStyles(euiThe
     euiPaginationButton: /*#__PURE__*/css("&&{", fontSizeS, ";padding:0;", logicalTextAlignCSS('center'), " border-radius:", euiTheme.border.radius.medium, ";outline-offset:-", euiTheme.focus.width, ";};label:euiPaginationButton;"),
     // States
     isActive: /*#__PURE__*/css("&&{font-weight:", euiTheme.font.weight.bold, ";color:", euiTheme.colors.primary, ";.euiButtonEmpty__content{cursor:default;}&&,&&:hover{text-decoration:underline;}};label:isActive;"),
-    isPlaceholder: /*#__PURE__*/css("&&{align-items:baseline;color:", disabled.color, ";", fontSizeS, ";", logicalCSS('padding-top', "".concat(halfSizeM, "px")), ";", logicalCSS('padding-bottom', 0), ";", logicalCSS('padding-horizontal', euiTheme.size.s), ";", logicalCSS('height', euiTheme.size.l), ";};label:isPlaceholder;")
+    isPlaceholder: /*#__PURE__*/css("&&{align-items:baseline;color:", disabled.color, ";", fontSizeS, ";", logicalCSS('padding-top', halfSizeM), ";", logicalCSS('padding-bottom', 0), ";", logicalCSS('padding-horizontal', euiTheme.size.s), ";", logicalCSS('height', euiTheme.size.l), ";};label:isPlaceholder;")
   };
 };
 export var euiPaginationButtonArrowStyles = function euiPaginationButtonArrowStyles(_ref) {

package/es/components/progress/progress.js

@@ -84,9 +84,9 @@ export var EuiProgress = function EuiProgress(_ref) {
     }, label && ___EmotionJSX(EuiInnerText, null, function (ref, innerText) {
       return ___EmotionJSX("span", _extends({
         title: innerText,
-        ref: ref
+        ref: ref,
+        css: labelCssStyles
       }, labelProps, {
-        css: labelCssStyles,
         className: labelClasses
       }), label);
     }), valueRender && ___EmotionJSX(EuiInnerText, null, function (ref, innerText) {

package/es/components/text/text.styles.js

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 import { css } from '@emotion/react';
-import { logicalCSS, logicalTextAlignCSS, euiFontSize, euiBackgroundColor } from '../../global_styling';
+import { logicalCSS, logicalTextAlignCSS, euiFontSize, euiBackgroundColor, mathWithUnits } from '../../global_styling';
 import { euiLinkCSS } from '../link/link.styles';
 import { euiTitle } from '../title/title.styles';
 /**
@@ -45,8 +45,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 = 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(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(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(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(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(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(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(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(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(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(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    p,\n    ul,\n    ol,\n    dl,\n    blockquote,\n    img,\n    pre {\n      ").concat(logicalCSS('margin-bottom', lineHeightSize), "\n    }\n\n    ul,\n    ol {\n      ").concat(logicalCSS('margin-left', lineHeightSize), "\n    }\n  \n    blockquote {\n      font-size: ").concat(fontSize, ";\n      padding: ").concat(lineHeightSize, ";\n    }\n\n    dd + dt {\n      ").concat(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(euiFontSize(euiThemeContext, 'xs', options).fontSize, ";\n      color: ").concat(euiTheme.colors.text, ";\n    }\n\n    small {\n      font-size: ").concat(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(logicalCSS('padding-bottom', euiTheme.size.xs), "\n      // ensures when only one character the shape looks like a square\n      ").concat(logicalCSS('min-width', euiTheme.size.l), "\n      ").concat(logicalTextAlignCSS('center'), "\n    }\n    \n    kbd::after {\n      content: '';\n      ").concat(logicalCSS('border-bottom', "".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.text)), "\n      position: absolute;\n      ").concat(logicalCSS('bottom', euiTheme.size.xxs), "\n      ").concat(logicalCSS('left', 0), "\n      ").concat(logicalCSS('width', '100%'), "\n    }") : '', "\n  ");
 };

package/es/components/tool_tip/tool_tip.styles.js

@@ -12,7 +12,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * Side Public License, v 1.
  */
 import { css, keyframes } from '@emotion/react';
-import { logicalCSS, logicalSizeCSS, euiFontSize } from '../../global_styling';
+import { logicalCSS, logicalSizeCSS, euiFontSize, mathWithUnits } from '../../global_styling';
 import { COLOR_MODES_STANDARD, tint, shade } from '../../services';
 import { euiShadow } from '../../themes/amsterdam';
 export var euiToolTipBackgroundColor = function euiToolTipBackgroundColor(euiTheme, colorMode) {
@@ -39,12 +39,13 @@ export 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 = mathWithUnits(arrowSize, function (x) {
+    return (x / 2 + 1) * -1;
+  }); // 1.
 
-  var arrowMinusSize = "".concat((arrowSizeInt / 2 - 1) * -1, "px");
-  /* 1 */
+  var arrowMinusSize = mathWithUnits(arrowSize, function (x) {
+    return (x / 2 - 1) * -1;
+  }); // 1.
 
   return {
     // Base

package/es/components/tour/tour.styles.js

@@ -7,7 +7,7 @@
  */
 import { css } from '@emotion/react';
 import { shade, tint, COLOR_MODES_STANDARD } from '../../services';
-import { logicalCSS } from '../../global_styling';
+import { logicalCSS, mathWithUnits } from '../../global_styling';
 import { openAnimationTiming } from '../popover/popover_panel/_popover_panel.styles';
 import { popoverArrowSize } from '../popover/popover_arrow/_popover_arrow.styles';
 
@@ -26,15 +26,20 @@ export var euiTourStyles = function euiTourStyles(_ref) {
 export var euiTourBeaconStyles = function euiTourBeaconStyles(_ref2) {
   var euiTheme = _ref2.euiTheme;
   var arrowSize = euiTheme.size[popoverArrowSize];
-  var arrowSizeInt = parseInt(arrowSize, 10);
+  var arrowHalfSize = mathWithUnits(arrowSize, function (x) {
+    return x / 2;
+  });
+  var arrowOffset = mathWithUnits(arrowSize, function (x) {
+    return x * -2;
+  });
   return {
     // Base
     euiTourBeacon: /*#__PURE__*/css("pointer-events:none;position:absolute;opacity:0;transition:opacity 0s ", euiTheme.animation[openAnimationTiming], ";;label:euiTourBeacon;"),
     // Positions
-    right: /*#__PURE__*/css(logicalCSS('top', "".concat(arrowSizeInt / 2, "px")), ";", logicalCSS('left', "".concat(arrowSizeInt * -2, "px")), ";;label:right;"),
-    left: /*#__PURE__*/css(logicalCSS('top', "".concat(arrowSizeInt / 2, "px")), ";", logicalCSS('left', arrowSize), ";;label:left;"),
-    top: /*#__PURE__*/css(logicalCSS('top', arrowSize), ";", logicalCSS('left', "".concat(arrowSizeInt / 2, "px")), ";;label:top;"),
-    bottom: /*#__PURE__*/css(logicalCSS('top', "".concat(arrowSizeInt * -2, "px")), ";", logicalCSS('left', "".concat(arrowSizeInt / 2, "px")), ";;label:bottom;")
+    right: /*#__PURE__*/css(logicalCSS('top', arrowHalfSize), ";", logicalCSS('left', arrowOffset), ";;label:right;"),
+    left: /*#__PURE__*/css(logicalCSS('top', arrowHalfSize), ";", logicalCSS('left', arrowSize), ";;label:left;"),
+    top: /*#__PURE__*/css(logicalCSS('top', arrowSize), ";", logicalCSS('left', arrowHalfSize), ";;label:top;"),
+    bottom: /*#__PURE__*/css(logicalCSS('top', arrowOffset), ";", logicalCSS('left', arrowHalfSize), ";;label:bottom;")
   };
 };
 export var euiTourHeaderStyles = function euiTourHeaderStyles(_ref3) {

package/es/global_styling/functions/index.js

@@ -6,5 +6,6 @@
  * Side Public License, v 1.
  */
 export * from './logicals';
+export * from './math';
 export * from './size';
 export * from './typography';

package/es/global_styling/functions/math.js

@@ -0,0 +1,46 @@
+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); }
+
+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';
+ */
+export 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;
+  }
+};

package/es/global_styling/mixins/_helpers.js

@@ -100,12 +100,15 @@ export var useEuiYScroll = function useEuiYScroll() {
 };
 export 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");
 };
 export var useEuiYScrollWithShadows = function useEuiYScrollWithShadows() {

package/eui.d.ts

@@ -6420,6 +6420,18 @@ declare module '@elastic/eui/src/global_styling/functions/logicals' {
 	    textAlign: string;
 	};
 
+}
+declare module '@elastic/eui/src/global_styling/functions/math' {
+	/**
+	 * 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';
+	 */
+	export const mathWithUnits: (value: string | number | undefined, callback: (x: number) => number, unit?: string) => string | undefined;
+
 }
 declare module '@elastic/eui/src/global_styling/functions/size' {
 	/**
@@ -6513,6 +6525,7 @@ declare module '@elastic/eui/src/global_styling/functions/typography' {
 }
 declare module '@elastic/eui/src/global_styling/functions' {
 	export * from '@elastic/eui/src/global_styling/functions/logicals';
+	export * from '@elastic/eui/src/global_styling/functions/math';
 	export * from '@elastic/eui/src/global_styling/functions/size';
 	export * from '@elastic/eui/src/global_styling/functions/typography';
 
@@ -7173,7 +7186,10 @@ declare module '@elastic/eui/src/global_styling/mixins/_helpers' {
 	}
 	export const euiYScroll: (euiTheme: UseEuiTheme, { height }?: _EuiYScroll) => string;
 	export const useEuiYScroll: ({ height }?: _EuiYScroll) => string;
-	export const euiYScrollWithShadows: (euiTheme: UseEuiTheme, { height }?: _EuiYScroll) => string;
+	interface _EuiYScrollWithShadows extends _EuiYScroll {
+	    side?: 'both' | 'start' | 'end';
+	}
+	export const euiYScrollWithShadows: (euiTheme: UseEuiTheme, { height, side }?: _EuiYScrollWithShadows) => string;
 	export const useEuiYScrollWithShadows: ({ height }?: _EuiYScroll) => string;
 	export const euiXScroll: (euiTheme: UseEuiTheme) => string;
 	export const useEuiXScroll: () => string;
@@ -8714,6 +8730,40 @@ declare module '@elastic/eui/src/components/collapsible_nav/collapsible_nav_grou
 	export type { EuiCollapsibleNavGroupProps } from '@elastic/eui/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group';
 	export { EuiCollapsibleNavGroup } from '@elastic/eui/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group';
 
+}
+declare module '@elastic/eui/src/components/flyout/flyout.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiFlyoutCloseButtonStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiFlyout__closeButton: import("@emotion/utils").SerializedStyles;
+	    inside: import("@emotion/utils").SerializedStyles;
+	    outside: import("@emotion/utils").SerializedStyles;
+	    outsideSide: {
+	        right: import("@emotion/utils").SerializedStyles;
+	        left: import("@emotion/utils").SerializedStyles;
+	    };
+	};
+	export const euiFlyoutStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiFlyout: import("@emotion/utils").SerializedStyles;
+	    s: import("@emotion/utils").SerializedStyles;
+	    m: import("@emotion/utils").SerializedStyles;
+	    l: import("@emotion/utils").SerializedStyles;
+	    noMaxWidth: import("@emotion/utils").SerializedStyles;
+	    right: import("@emotion/utils").SerializedStyles;
+	    left: import("@emotion/utils").SerializedStyles;
+	    overlay: import("@emotion/utils").SerializedStyles;
+	    push: import("@emotion/utils").SerializedStyles;
+	    pushSide: {
+	        right: import("@emotion/utils").SerializedStyles;
+	        left: import("@emotion/utils").SerializedStyles;
+	    };
+	    paddingSizes: {
+	        none: import("@emotion/utils").SerializedStyles;
+	        s: import("@emotion/utils").SerializedStyles;
+	        m: import("@emotion/utils").SerializedStyles;
+	        l: import("@emotion/utils").SerializedStyles;
+	    };
+	};
+
 }
 declare module '@elastic/eui/src/components/flyout/flyout' {
 	import React, { ComponentPropsWithRef, CSSProperties, ElementType } from 'react';
@@ -8722,16 +8772,18 @@ declare module '@elastic/eui/src/components/flyout/flyout' {
 	import { EuiFocusTrapProps } from '@elastic/eui/src/components/focus_trap';
 	import { EuiOverlayMaskProps } from '@elastic/eui/src/components/overlay_mask';
 	import { EuiButtonIconPropsForButton } from '@elastic/eui/src/components/button';
-	export const TYPES: ("push" | "overlay")[]; type _EuiFlyoutType = typeof TYPES[number];
-	export const SIDES: ("left" | "right")[]; type _EuiFlyoutSide = typeof SIDES[number];
-	export const SIZES: ("s" | "m" | "l")[];
+	export const TYPES: readonly ["push", "overlay"]; type _EuiFlyoutType = typeof TYPES[number];
+	export const SIDES: readonly ["left", "right"]; type _EuiFlyoutSide = typeof SIDES[number];
+	export const SIZES: readonly ["s", "m", "l"];
 	export type EuiFlyoutSize = typeof SIZES[number];
-	export const PADDING_SIZES: ("s" | "m" | "l" | "none")[]; type _EuiFlyoutPaddingSize = typeof PADDING_SIZES[number];
+	export const PADDING_SIZES: readonly ["none", "s", "m", "l"];
+	export type _EuiFlyoutPaddingSize = typeof PADDING_SIZES[number];
 	interface _EuiFlyoutProps {
 	    onClose: (event: MouseEvent | TouchEvent | KeyboardEvent) => void;
 	    /**
 	     * Defines the width of the panel.
 	     * Pass a predefined size of `s | m | l`, or pass any number/string compatible with the CSS `width` attribute
+	     * @default m
 	     */
 	    size?: EuiFlyoutSize | CSSProperties['width'];
 	    /**
@@ -8740,23 +8792,27 @@ declare module '@elastic/eui/src/components/flyout/flyout' {
 	     * set to `false` to not restrict the width,
 	     * set to a number for a custom width in px,
 	     * set to a string for a custom width in custom measurement.
+	     * @default false
 	     */
 	    maxWidth?: boolean | number | string;
 	    /**
 	     * Customize the padding around the content of the flyout header, body and footer
+	     * @default l
 	     */
 	    paddingSize?: _EuiFlyoutPaddingSize;
 	    /**
 	     * Adds an EuiOverlayMask and wraps in an EuiPortal
+	     * @default true
 	     */
 	    ownFocus?: boolean;
 	    /**
 	     * Hides the default close button. You must provide another close button somewhere within the flyout.
+	     * @default false
 	     */
 	    hideCloseButton?: boolean;
 	    /**
-	     * Specify an aria-label for the close button of the flyout.
-	     * Default is `'Close this dialog'`.
+	     * Specify a custom aria-label for the close button of the flyout.
+	     * @default "Close this dialog"
 	     */
 	    closeButtonAriaLabel?: string;
 	    /**
@@ -8767,6 +8823,7 @@ declare module '@elastic/eui/src/components/flyout/flyout' {
 	     * Position of close button.
 	     * `inside`: Floating to just inside the flyout, always top right;
 	     * `outside`: Floating just outside the flyout near the top (side dependent on `side`). Helpful when the close button may cover other interactable content.
+	     * @default inside
 	     */
 	    closeButtonPosition?: 'inside' | 'outside';
 	    /**
@@ -8776,6 +8833,7 @@ declare module '@elastic/eui/src/components/flyout/flyout' {
 	    /**
 	     * How to display the the flyout in relation to the body content;
 	     * `push` keeps it visible, pushing the `<body>` content via padding
+	     * @default overlay
 	     */
 	    type?: _EuiFlyoutType;
 	    /**
@@ -8786,15 +8844,18 @@ declare module '@elastic/eui/src/components/flyout/flyout' {
 	    /**
 	     * Which side of the window to attach to.
 	     * The `left` option should only be used for navigation.
+	     * @default right
 	     */
 	    side?: _EuiFlyoutSide;
 	    /**
 	     * Defaults to `dialog` which is best for most cases of the flyout.
 	     * Otherwise pass in your own, aria-role, or `null` to remove it and use the semantic `as` element instead
+	     * @default dialog
 	     */
 	    role?: null | string;
 	    /**
 	     * Named breakpoint (`xs` through `xl`) for customizing the minimum window width to enable the `push` type
+	     * @default l
 	     */
 	    pushMinBreakpoint?: EuiBreakpointSize;
 	    style?: CSSProperties;
@@ -8814,6 +8875,18 @@ declare module '@elastic/eui/src/components/flyout/flyout' {
 	export const EuiFlyout: <T extends React.ElementType<any> = "div">(props: EuiFlyoutProps<T>) => JSX.Element;
 	export {};
 
+}
+declare module '@elastic/eui/src/components/flyout/flyout_body.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiFlyoutBodyStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiFlyoutBody: import("@emotion/utils").SerializedStyles;
+	    euiFlyoutBody__overflow: {
+	        noBanner: import("@emotion/utils").SerializedStyles;
+	        hasBanner: import("@emotion/utils").SerializedStyles;
+	    };
+	    euiFlyoutBody__banner: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/flyout/flyout_body' {
 	import { FunctionComponent, HTMLAttributes, ReactNode } from 'react';
@@ -8826,6 +8899,13 @@ declare module '@elastic/eui/src/components/flyout/flyout_body' {
 	}>;
 	export const EuiFlyoutBody: EuiFlyoutBodyProps;
 
+}
+declare module '@elastic/eui/src/components/flyout/flyout_footer.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiFlyoutFooterStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiFlyoutFooter: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/flyout/flyout_footer' {
 	import { FunctionComponent, HTMLAttributes } from 'react';
@@ -8833,6 +8913,14 @@ declare module '@elastic/eui/src/components/flyout/flyout_footer' {
 	export type EuiFlyoutFooterProps = FunctionComponent<HTMLAttributes<HTMLDivElement> & CommonProps>;
 	export const EuiFlyoutFooter: EuiFlyoutFooterProps;
 
+}
+declare module '@elastic/eui/src/components/flyout/flyout_header.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiFlyoutHeaderStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiFlyoutHeader: import("@emotion/utils").SerializedStyles;
+	    hasBorder: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/flyout/flyout_header' {
 	import { FunctionComponent, HTMLAttributes } from 'react';

package/i18ntokens.json

@@ -3621,11 +3621,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 305,
+        "line": 299,
         "column": 8
       },
       "end": {
-        "line": 305,
+        "line": 299,
         "column": 78
       }
     },

package/lib/components/accordion/accordion.js

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

package/lib/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;")
   };
 };

package/lib/components/avatar/avatar.js

@@ -39,6 +39,10 @@ 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 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) { _defineProperty(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; }
+
 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -79,7 +83,9 @@ var EuiAvatar = function EuiAvatar(_ref) {
   var classes = (0, _classnames.default)('euiAvatar', (_classNames = {}, _defineProperty(_classNames, "euiAvatar--".concat(size), size), _defineProperty(_classNames, "euiAvatar--".concat(type), type), _defineProperty(_classNames, 'euiAvatar-isDisabled', isDisabled), _classNames), className);
   var cssStyles = [styles.euiAvatar, styles[size], styles[type], isPlain && styles.plain, isSubdued && styles.subdued, isDisabled && styles.isDisabled];
   checkValidInitials(initials);
-  var avatarStyle = style || {};
+
+  var avatarStyle = _objectSpread({}, style);
+
   var iconCustomColor = iconColor;
   var isNamedColor = color === 'plain' || color === 'subdued' || color === null;