@elastic/eui 67.1.0 → 67.1.2

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

@@ -29,11 +29,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((0, _global_styling.logicalCSS)('border-left-width', "".concat(blockQuoteBorderWidth).concat(measurement)), "\n      ").concat((0, _global_styling.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((0, _global_styling.logicalCSS)('padding-left', lineHeightSize), "\n      line-height: ").concat(lineHeight, ";\n    }\n\n    .euiCheckbox + *:not(.euiCheckbox) {\n      ").concat((0, _global_styling.logicalCSS)('margin-top', fontSize), "\n    }\n\n    .euiMarkdownFormat__codeblockWrapper {\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table {\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table th,\n    .euiMarkdownFormat__table td {\n      ").concat((0, _global_styling.logicalCSS)('padding-vertical', "".concat(tablePaddingVertical).concat(measurement)), "\n      ").concat((0, _global_styling.logicalCSS)('padding-horizontal', "".concat(tablePaddingHorizontal).concat(measurement)), "\n    }\n  ");
+  var blockQuoteBorderWidth = (0, _global_styling.mathWithUnits)(fontSize, function (x) {
+    return x / 4;
+  });
+  var tablePaddingVertical = (0, _global_styling.mathWithUnits)(fontSize, function (x) {
+    return x / 4;
+  });
+  var tablePaddingHorizontal = (0, _global_styling.mathWithUnits)(fontSize, function (x) {
+    return x / 2;
+  });
+  return "\n    .euiMarkdownFormat__blockquote {\n      padding: 0 ".concat(fontSize, ";\n      ").concat((0, _global_styling.logicalCSS)('border-left-width', blockQuoteBorderWidth), "\n      ").concat((0, _global_styling.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((0, _global_styling.logicalCSS)('padding-left', lineHeightSize), "\n      line-height: ").concat(lineHeight, ";\n    }\n\n    .euiCheckbox + *:not(.euiCheckbox) {\n      ").concat((0, _global_styling.logicalCSS)('margin-top', fontSize), "\n    }\n\n    .euiMarkdownFormat__codeblockWrapper {\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table {\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table th,\n    .euiMarkdownFormat__table td {\n      ").concat((0, _global_styling.logicalCSS)('padding-vertical', tablePaddingVertical), "\n      ").concat((0, _global_styling.logicalCSS)('padding-horizontal', tablePaddingHorizontal), "\n    }\n  ");
 };
 /**
  * Styles

package/lib/components/notification/notification_event.js

@@ -66,9 +66,8 @@ var EuiNotificationEvent = function EuiNotificationEvent(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var classes = (0, _classnames.default)('euiNotificationEvent', {
-    'euiNotificationEvent--withReadState': typeof isRead === 'boolean',
-    className: className
-  });
+    'euiNotificationEvent--withReadState': typeof isRead === 'boolean'
+  }, className);
   var classesTitle = (0, _classnames.default)('euiNotificationEvent__title', {
     'euiNotificationEvent__title--isRead': isRead
   });

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

@@ -80,7 +80,7 @@ var EuiPageHeaderContent = function EuiPageHeaderContent(_ref) {
 
   var isResponsiveBreakpoint = (0, _services.useIsWithinBreakpoints)(['xs', 's'], !!responsive);
   var useTheme = (0, _services.useEuiTheme)();
-  var classes = (0, _classnames.default)('euiPageHeaderContent');
+  var classes = (0, _classnames.default)('euiPageHeaderContent', className);
   var pageHeaderStyles = (0, _page_header.euiPageHeaderStyles)(useTheme);
   var contentStyles = (0, _page_header_content.euiPageHeaderContentStyles)(useTheme);
   var styles = (0, _restrict_width.setStyleForRestrictedPageWidth)(restrictWidth, style);

package/lib/components/page/page_section/page_section.js

@@ -56,12 +56,11 @@ var EuiPageSection = function EuiPageSection(_ref) {
   var colors = (0, _global_styling.useEuiBackgroundColorCSS)();
   var cssStyles = [styles.euiPageSection, grow && styles.grow, inlinePadding[paddingSize], bottomBorder === 'extended' && styles.border, alignment && styles[alignment], colors[color]];
   var contentStyles = (0, _page_section.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 (0, _react2.jsx)(Component, _extends({
     css: cssStyles
-  }, rest), (0, _react2.jsx)("div", _extends({
-    css: cssContentStyles
-  }, contentProps, {
+  }, rest), (0, _react2.jsx)("div", _extends({}, contentProps, {
+    css: cssContentStyles,
     style: widthStyles
   }), children));
 };

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

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

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

@@ -43,7 +43,7 @@ export var euiAccordionChildrenStyles = function euiAccordionChildrenStyles(_ref
 export var euiAccordionChildWrapperStyles = function euiAccordionChildWrapperStyles(_ref6) {
   var euiTheme = _ref6.euiTheme;
   return {
-    euiAccordion__childWrapper: /*#__PURE__*/css(logicalCSS('height', 0), " opacity:0;overflow:hidden;transition:", logicals.height, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ",opacity ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ";visibility:hidden;will-change:opacity,visibility,", logicals.height, ";&:focus{outline:none;};label:euiAccordion__childWrapper;"),
+    euiAccordion__childWrapper: /*#__PURE__*/css(logicalCSS('height', 0), " opacity:0;overflow:hidden;transition:", 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__*/css(logicalCSS('height', 'auto'), " opacity:1;visibility:visible;;label:isOpen;")
   };
 };

package/optimize/es/components/avatar/avatar.js

@@ -4,6 +4,10 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "color", "imageUrl", "initials", "initialsLength", "iconType", "iconSize", "iconColor", "name", "size", "type", "isDisabled", "style"];
 
+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; }
+
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -49,7 +53,9 @@ export var EuiAvatar = function EuiAvatar(_ref) {
   var classes = classNames('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;
 

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

@@ -8,7 +8,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * Side Public License, v 1.
  */
 import { css } from '@emotion/react';
-import { euiFontSize, euiFocusRing, euiTextTruncate, logicalCSS, logicalTextAlignCSS } from '../../global_styling';
+import { euiFontSize, euiFocusRing, euiTextTruncate, logicalCSS, logicalTextAlignCSS, mathWithUnits } from '../../global_styling';
 import { euiButtonColor } from '../../themes/amsterdam/global_styling/mixins';
 import { tint, transparentize } from '../../services';
 
@@ -25,14 +25,18 @@ export var euiBadgeStyles = function euiBadgeStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
       colorMode = euiThemeContext.colorMode;
   return {
-    euiBadge: /*#__PURE__*/css("display:inline-block;vertical-align:middle;padding:0 ", euiTheme.size.s, ";", logicalCSS('max-width', '100%'), " font-size:", euiFontSize(euiThemeContext, 'xs').fontSize, ";line-height:", euiTheme.base + 2, "px;font-weight:", euiTheme.font.weight.medium, ";white-space:nowrap;text-decoration:none;cursor:default;background-color:transparent;border:", euiTheme.border.width.thin, " solid transparent;border-radius:", parseFloat(String(euiTheme.border.radius.medium)) / 2, "px;", logicalTextAlignCSS('left'), " &:focus-within{", euiFocusRing(euiThemeContext), ";}&+.euiBadge{", logicalCSS('margin-left', euiTheme.size.xs), ";};label:euiBadge;"),
+    euiBadge: /*#__PURE__*/css("display:inline-block;vertical-align:middle;padding:0 ", euiTheme.size.s, ";", logicalCSS('max-width', '100%'), " font-size:", euiFontSize(euiThemeContext, 'xs').fontSize, ";line-height:", euiTheme.base + 2, "px;font-weight:", euiTheme.font.weight.medium, ";white-space:nowrap;text-decoration:none;cursor:default;background-color:transparent;border:", euiTheme.border.width.thin, " solid transparent;border-radius:", mathWithUnits(euiTheme.border.radius.medium, function (x) {
+      return x / 2;
+    }), ";", logicalTextAlignCSS('left'), " &:focus-within{", euiFocusRing(euiThemeContext), ";}&+.euiBadge{", logicalCSS('margin-left', euiTheme.size.xs), ";};label:euiBadge;"),
     clickable: /*#__PURE__*/css("&:not(:disabled){&:hover,&:focus{text-decoration:underline;}}&:focus{", euiFocusRing(euiThemeContext), ";}&:disabled{cursor:not-allowed;};label:clickable;"),
     disabled: /*#__PURE__*/css("color:", euiButtonColor(euiThemeContext, 'disabled').color, "!important;background-color:", euiButtonColor(euiThemeContext, 'disabled').backgroundColor, "!important;;label:disabled;"),
     // Hollow has a border and is mostly used for autocompleters.
     hollow: /*#__PURE__*/css("background-color:", euiTheme.colors.emptyShade, ";border-color:", colorMode === 'DARK' ? tint(euiTheme.border.color, 0.15) : euiTheme.border.color, ";color:", euiTheme.colors.text, ";;label:hollow;"),
     // Content wrapper
     euiBadge__content: /*#__PURE__*/css(logicalCSS( // Ensure proper height in case of just displaying an icon
-    'min-height', "".concat(euiTheme.base + parseFloat(String(euiTheme.border.width.thin)) * 2, "px")), " display:flex;align-items:center;overflow:hidden;;label:euiBadge__content;"),
+    'min-height', "".concat(mathWithUnits(euiTheme.border.width.thin, function (x) {
+      return euiTheme.base + x * 2;
+    }))), " display:flex;align-items:center;overflow:hidden;;label:euiBadge__content;"),
     // Text
     text: {
       euiBadge__text: /*#__PURE__*/css(euiTextTruncate(), " cursor:inherit;;label:euiBadge__text;"),
@@ -46,7 +50,9 @@ export var euiBadgeStyles = function euiBadgeStyles(euiThemeContext) {
     },
     // Clickable icons (iconOnClick)
     iconButton: {
-      euiBadge__iconButton: /*#__PURE__*/css("font-size:0;&:focus{background-color:", transparentize(euiTheme.colors.ghost, 0.8), ";color:", euiTheme.colors.ink, ";border-radius:", parseFloat(String(euiTheme.border.radius.small)) / 2, "px;}&:disabled{cursor:not-allowed;}.euiBadge__icon{margin:0!important;};label:euiBadge__iconButton;"),
+      euiBadge__iconButton: /*#__PURE__*/css("font-size:0;&:focus{background-color:", transparentize(euiTheme.colors.ghost, 0.8), ";color:", euiTheme.colors.ink, ";border-radius:", mathWithUnits(euiTheme.border.radius.small, function (x) {
+        return x / 2;
+      }), ";}&:disabled{cursor:not-allowed;}.euiBadge__icon{margin:0!important;};label:euiBadge__iconButton;"),
       right: /*#__PURE__*/css(logicalCSS('margin-left', euiTheme.size.xs), ";;label:right;"),
       left: /*#__PURE__*/css(logicalCSS('margin-right', euiTheme.size.xs), ";;label:left;")
     },

package/optimize/es/components/breadcrumbs/breadcrumb.styles.js

@@ -9,7 +9,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 import { css } from '@emotion/react';
 import { transparentize } from '../../services/color';
-import { euiFontSize, euiTextTruncate, euiFocusRing, logicalCSS } from '../../global_styling';
+import { euiFontSize, euiTextTruncate, euiFocusRing, logicalCSS, mathWithUnits } from '../../global_styling';
 
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "1k7t4ns-isCollapsed",
@@ -47,7 +47,9 @@ export var euiBreadcrumbContentStyles = function euiBreadcrumbContentStyles(euiT
   var euiTheme = euiThemeContext.euiTheme;
   return {
     euiBreadcrumb__content: /*#__PURE__*/css("font-weight:", euiTheme.font.weight.medium, ";text-align:center;vertical-align:baseline;;label:euiBreadcrumb__content;"),
-    isTruncated: /*#__PURE__*/css(euiTextTruncate("".concat(parseFloat(euiTheme.size.base) * 10, "px")), ";;label:isTruncated;"),
+    isTruncated: /*#__PURE__*/css(euiTextTruncate(mathWithUnits(euiTheme.size.base, function (x) {
+      return x * 10;
+    })), ";;label:isTruncated;"),
     isTruncatedLast: /*#__PURE__*/css(euiTextTruncate('none'), ";;label:isTruncatedLast;"),
     // Types
     page: /*#__PURE__*/css("&:is(a):focus{", euiFocusRing(euiThemeContext, 'inset'), ";}&:is(button):focus{", euiFocusRing(euiThemeContext, 'center'), ";};label:page;"),

package/optimize/es/components/button/button_display/_button_display_content.js

@@ -64,9 +64,9 @@ export var EuiButtonDisplayContent = function EuiButtonDisplayContent(_ref) {
   }
 
   var isText = typeof children === 'string';
-  return ___EmotionJSX("span", _extends({}, contentProps, {
+  return ___EmotionJSX("span", _extends({
     css: cssStyles
-  }), icon, isText ? ___EmotionJSX("span", _extends({}, textProps, {
+  }, contentProps), icon, isText ? ___EmotionJSX("span", _extends({}, textProps, {
     className: classNames('eui-textTruncate', textProps === null || textProps === void 0 ? void 0 : textProps.className)
   }), children) : children);
 };

package/optimize/es/components/button/button_icon/button_icon.js

@@ -69,11 +69,15 @@ export var EuiButtonIcon = function EuiButtonIcon(props) {
 
 
   var color = isDisabled ? 'disabled' : _color === 'ghost' ? 'text' : _color;
-  var buttonColorStyles = useEuiButtonColorCSS({
-    display: display
-  })[color]; // Temporary extra style for empty `:hover` state until we decide how to handle universally
-
-  var hoverStyles = display === 'empty' ? /*#__PURE__*/css("&:hover{background-color:", euiButtonEmptyColor(euiThemeContext, color).backgroundColor, ";};label:hoverStyles;") : /*#__PURE__*/css(";label:hoverStyles;");
+  var styles = {
+    euiButtonIcon: /*#__PURE__*/css(";label:euiButtonIcon;"),
+    colors: useEuiButtonColorCSS({
+      display: display
+    }),
+    // Temporary extra style for empty `:hover` state until we decide how to handle universally
+    hoverStyles: /*#__PURE__*/css("&:hover{background-color:", euiButtonEmptyColor(euiThemeContext, color).backgroundColor, ";};label:hoverStyles;")
+  };
+  var cssStyles = [styles.euiButtonIcon, styles.colors[color], display === 'empty' && styles.hoverStyles];
   var classes = classNames('euiButtonIcon', size && sizeToClassNameMap[size], className);
 
   if (_color === 'ghost') {
@@ -119,7 +123,7 @@ export var EuiButtonIcon = function EuiButtonIcon(props) {
       rel: rel
     });
     return ___EmotionJSX("a", _extends({
-      css: [buttonColorStyles, hoverStyles, ";label:EuiButtonIcon;"],
+      css: cssStyles,
       tabIndex: isAriaHidden ? -1 : undefined,
       className: classes,
       href: href,
@@ -131,7 +135,7 @@ export var EuiButtonIcon = function EuiButtonIcon(props) {
 
   var buttonType;
   return ___EmotionJSX("button", _extends({
-    css: [buttonColorStyles, hoverStyles, ";label:EuiButtonIcon;"],
+    css: cssStyles,
     tabIndex: isAriaHidden ? -1 : undefined,
     disabled: isDisabled,
     className: classes,

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

@@ -10,7 +10,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * Side Public License, v 1.
  */
 import { css } from '@emotion/react';
-import { euiFontSize, logicalCSS, logicalTextAlignCSS, euiTextBreakWord, euiTextTruncate } from '../../global_styling';
+import { euiFontSize, logicalCSS, logicalTextAlignCSS, euiTextBreakWord, euiTextTruncate, mathWithUnits } from '../../global_styling';
 import { transparentize } from '../../services/color';
 
 var _colorCSS = function _colorCSS(color) {
@@ -20,7 +20,9 @@ var _colorCSS = function _colorCSS(color) {
 export var euiExpressionStyles = function euiExpressionStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiExpression: /*#__PURE__*/css(euiTextBreakWord(), ";display:inline-block;font-family:", euiTheme.font.familyCode, ";", logicalCSS('border-bottom', "".concat(euiTheme.border.width.thick, " solid transparent")), " ", euiFontSize(euiThemeContext, 's'), ";", logicalTextAlignCSS('left'), " padding:", parseFloat(euiTheme.size.s) / 2, "px 0;color:", euiTheme.colors.text, ";&:focus{", logicalCSS('border-bottom-style', 'solid'), ";}&+.euiExpression{", logicalCSS('margin-left', euiTheme.size.s), ";};label:euiExpression;"),
+    euiExpression: /*#__PURE__*/css(euiTextBreakWord(), ";display:inline-block;font-family:", euiTheme.font.familyCode, ";", logicalCSS('border-bottom', "".concat(euiTheme.border.width.thick, " solid transparent")), " ", euiFontSize(euiThemeContext, 's'), ";", logicalTextAlignCSS('left'), " padding:", mathWithUnits(euiTheme.size.s, function (x) {
+      return x / 2;
+    }), " 0;color:", euiTheme.colors.text, ";&:focus{", logicalCSS('border-bottom-style', 'solid'), ";}&+.euiExpression{", logicalCSS('margin-left', euiTheme.size.s), ";};label:euiExpression;"),
     // Variants
     columns: /*#__PURE__*/css("border-color:transparent;", logicalCSS('border-bottom-style', 'solid'), " ", logicalCSS('margin-bottom', euiTheme.size.xs), " ", logicalCSS('width', '100%'), " display:flex;padding:", euiTheme.size.xs, ";border-radius:", euiTheme.size.xs, ";;label:columns;"),
     truncate: /*#__PURE__*/css(logicalCSS('max-width', '100%'), ";;label:truncate;"),

package/optimize/es/components/flyout/flyout.js

@@ -17,31 +17,19 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 import React, { useEffect, useRef, useState, forwardRef, Fragment } from 'react';
 import classnames from 'classnames';
-import { keys, EuiWindowEvent, useCombinedRefs, useIsWithinMinBreakpoint } from '../../services';
-import { keysOf } from '../common';
+import { keys, EuiWindowEvent, useCombinedRefs, useIsWithinMinBreakpoint, useEuiTheme } from '../../services';
+import { logicalStyle } from '../../global_styling';
 import { EuiFocusTrap } from '../focus_trap';
 import { EuiOverlayMask } from '../overlay_mask';
 import { EuiButtonIcon } from '../button';
 import { EuiI18n } from '../i18n';
 import { useResizeObserver } from '../observer/resize_observer';
 import { EuiPortal } from '../portal';
+import { euiFlyoutStyles, euiFlyoutCloseButtonStyles } from './flyout.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var typeToClassNameMap = {
-  push: 'euiFlyout--push',
-  overlay: null
-};
-export var TYPES = keysOf(typeToClassNameMap);
-var sideToClassNameMap = {
-  left: 'euiFlyout--left',
-  right: null
-};
-export var SIDES = keysOf(sideToClassNameMap);
-var sizeToClassNameMap = {
-  s: 'euiFlyout--small',
-  m: 'euiFlyout--medium',
-  l: 'euiFlyout--large'
-};
-export var SIZES = keysOf(sizeToClassNameMap);
+export var TYPES = ['push', 'overlay'];
+export var SIDES = ['left', 'right'];
+export var SIZES = ['s', 'm', 'l'];
 
 /**
  * Custom type checker for named flyout sizes since the prop
@@ -51,13 +39,7 @@ function isEuiFlyoutSizeNamed(value) {
   return SIZES.includes(value);
 }
 
-var paddingSizeToClassNameMap = {
-  none: 'euiFlyout--paddingNone',
-  s: 'euiFlyout--paddingSmall',
-  m: 'euiFlyout--paddingMedium',
-  l: 'euiFlyout--paddingLarge'
-};
-export var PADDING_SIZES = keysOf(paddingSizeToClassNameMap);
+export var PADDING_SIZES = ['none', 's', 'm', 'l'];
 var defaultElement = 'div';
 export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
@@ -148,41 +130,37 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
       onClose(event);
     }
   };
+  /**
+   * Set inline styles
+   */
 
-  var newStyle;
-  var widthClassName;
-  var sizeClassName; // Setting max-width
 
-  if (maxWidth === true) {
-    widthClassName = 'euiFlyout--maxWidth-default';
-  } else if (maxWidth !== false) {
-    var value = typeof maxWidth === 'number' ? "".concat(maxWidth, "px") : maxWidth;
-    newStyle = _objectSpread(_objectSpread({}, style), {}, {
-      maxWidth: value
-    });
-  } // Setting size
+  var newStyle = style;
 
+  if (typeof maxWidth !== 'boolean') {
+    newStyle = _objectSpread(_objectSpread({}, newStyle), logicalStyle('max-width', maxWidth));
+  }
 
-  if (isEuiFlyoutSizeNamed(size)) {
-    sizeClassName = sizeToClassNameMap[size];
-  } else if (newStyle) {
-    newStyle.width = size;
-  } else {
-    newStyle = _objectSpread(_objectSpread({}, style), {}, {
-      width: size
-    });
+  if (!isEuiFlyoutSizeNamed(size)) {
+    newStyle = _objectSpread(_objectSpread({}, newStyle), logicalStyle('width', size));
   }
 
-  var classes = classnames('euiFlyout', typeToClassNameMap[type], sideToClassNameMap[side], sizeClassName, paddingSizeToClassNameMap[paddingSize], widthClassName, className);
+  var euiTheme = useEuiTheme();
+  var styles = euiFlyoutStyles(euiTheme);
+  var cssStyles = [styles.euiFlyout, styles.paddingSizes[paddingSize], isEuiFlyoutSizeNamed(size) && styles[size], maxWidth === false && styles.noMaxWidth, styles[type], type === 'push' && styles.pushSide[side], styles[side]];
+  var classes = classnames('euiFlyout', className);
   var closeButton;
 
   if (onClose && !hideCloseButton) {
-    var closeButtonClasses = classnames('euiFlyout__closeButton', "euiFlyout__closeButton--".concat(closeButtonPosition), closeButtonProps === null || closeButtonProps === void 0 ? void 0 : closeButtonProps.className);
+    var closeButtonClasses = classnames('euiFlyout__closeButton', closeButtonProps === null || closeButtonProps === void 0 ? void 0 : closeButtonProps.className);
+    var closeButtonStyles = euiFlyoutCloseButtonStyles(euiTheme);
+    var closeButtonCssStyles = [closeButtonStyles.euiFlyout__closeButton, closeButtonStyles[closeButtonPosition], closeButtonPosition === 'outside' && closeButtonStyles.outsideSide[side]];
     closeButton = ___EmotionJSX(EuiI18n, {
       token: "euiFlyout.closeAriaLabel",
       default: "Close this dialog"
     }, function (closeAriaLabel) {
       return ___EmotionJSX(EuiButtonIcon, _extends({
+        css: closeButtonCssStyles,
         display: closeButtonPosition === 'outside' ? 'fill' : 'empty',
         iconType: "cross",
         color: "text",
@@ -235,11 +213,13 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
     disabled: isPushed,
     clickOutsideDisables: !ownFocus,
     onClickOutside: onClickOutside
-  }, focusTrapProps), ___EmotionJSX(Element, _extends({}, rest, {
+  }, focusTrapProps), ___EmotionJSX(Element, _extends({
+    css: cssStyles
+  }, rest, {
     role: role,
     className: classes,
     tabIndex: -1,
-    style: newStyle || style,
+    style: newStyle,
     ref: setRef
   }), closeButton, children)); // If ownFocus is set, wrap with an overlay and allow the user to click it to close it.