@elastic/eui 67.1.0 → 67.1.1

package/test-env/components/flyout/flyout_header.styles.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiFlyoutHeaderStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _global_styling = require("../../global_styling");
+
+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)."; }
+
+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__
+};
+
+var euiFlyoutHeaderStyles = function euiFlyoutHeaderStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiFlyoutHeader: _ref,
+    hasBorder: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-bottom', euiTheme.border.thin), ";;label:hasBorder;")
+  };
+};
+
+exports.euiFlyoutHeaderStyles = euiFlyoutHeaderStyles;

package/test-env/components/image/image_wrapper.js

@@ -64,10 +64,10 @@ var EuiImageWrapper = function EuiImageWrapper(_ref) {
       optionalCaptionText = _useInnerText2[1];
 
   return (0, _react2.jsx)("figure", (0, _extends2.default)({
-    "aria-label": optionalCaptionText
-  }, wrapperProps, {
-    className: classes,
+    "aria-label": optionalCaptionText,
     css: cssFigureStyles
+  }, wrapperProps, {
+    className: classes
   }), allowFullScreen ? (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_image_button.EuiImageButton, {
     hasAlt: !!alt,
     hasShadow: hasShadow,

package/test-env/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/test-env/components/page/page_header/page_header_content.js

@@ -77,7 +77,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/test-env/components/page/page_section/page_section.js

@@ -53,12 +53,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, (0, _extends2.default)({
     css: cssStyles
-  }, rest), (0, _react2.jsx)("div", (0, _extends2.default)({
-    css: cssContentStyles
-  }, contentProps, {
+  }, rest), (0, _react2.jsx)("div", (0, _extends2.default)({}, contentProps, {
+    css: cssContentStyles,
     style: widthStyles
   }), children));
 };

package/test-env/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/test-env/components/progress/progress.js

@@ -102,9 +102,9 @@ var EuiProgress = function EuiProgress(_ref) {
     }, label && (0, _react2.jsx)(_inner_text.EuiInnerText, null, function (ref, innerText) {
       return (0, _react2.jsx)("span", (0, _extends2.default)({
         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/test-env/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/test-env/components/tool_tip/tool_tip.styles.js

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

package/test-env/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/test-env/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/test-env/global_styling/functions/math.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mathWithUnits = void 0;
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _setPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/setPrototypeOf"));
+
+function _wrapRegExp() { _wrapRegExp = function _wrapRegExp(re, groups) { return new BabelRegExp(re, undefined, groups); }; var _super = RegExp.prototype; var _groups = new WeakMap(); function BabelRegExp(re, flags, groups) { var _this = new RegExp(re, flags); _groups.set(_this, groups || _groups.get(re)); return (0, _setPrototypeOf2.default)(_this, BabelRegExp.prototype); } (0, _inherits2.default)(BabelRegExp, RegExp); BabelRegExp.prototype.exec = function (str) { var result = _super.exec.call(this, str); if (result) result.groups = buildGroups(result, this); return result; }; BabelRegExp.prototype[Symbol.replace] = function (str, substitution) { if (typeof substitution === "string") { var groups = _groups.get(this); return _super[Symbol.replace].call(this, str, substitution.replace(/\$<([^>]+)>/g, function (_, name) { return "$" + groups[name]; })); } else if (typeof substitution === "function") { var _this = this; return _super[Symbol.replace].call(this, str, function () { var args = arguments; if (_typeof(args[args.length - 1]) !== "object") { args = [].slice.call(args); args.push(buildGroups(args, _this)); } return substitution.apply(this, args); }); } else { return _super[Symbol.replace].call(this, str, substitution); } }; function buildGroups(result, re) { var g = _groups.get(re); return Object.keys(g).reduce(function (groups, name) { groups[name] = result[g[name]]; return groups; }, Object.create(null)); } return _wrapRegExp.apply(this, arguments); }
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+/**
+ * Utility for performing math callbacks on a string with CSS units
+ * and returning a string with its unit preserved.
+ *
+ * Example usage:
+ * mathWithUnits('4px', (x) => x / 2) = '2px';
+ * mathWithUnits(euiTheme.size.xs, (x) => x + 2) = '6px';
+ */
+var mathWithUnits = function mathWithUnits(value, callback) {
+  var unit = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+
+  if (typeof value === 'string') {
+    var _matches$groups;
+
+    var regex = /*#__PURE__*/_wrapRegExp(/(\x2D?[\.0-9]+)(%|[A-Za-z]*)/, {
+      value: 1,
+      unit: 2
+    });
+
+    var matches = regex.exec(value);
+    if (!(matches !== null && matches !== void 0 && (_matches$groups = matches.groups) !== null && _matches$groups !== void 0 && _matches$groups.value)) return value;
+    var numericValue = Number(matches.groups.value);
+    var passedUnit = matches.groups.unit || unit;
+    return "".concat(callback(numericValue)).concat(passedUnit);
+  } else if (typeof value === 'number') {
+    return "".concat(callback(value)).concat(unit);
+  } else {
+    return value;
+  }
+};
+
+exports.mathWithUnits = mathWithUnits;

package/test-env/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/src/components/flyout/_flyout.scss

@@ -1,196 +0,0 @@
-.euiFlyout {
-  @include euiFlyout;
-  animation: euiFlyout $euiAnimSpeedNormal $euiAnimSlightResistance;
-
-  // Remove focus ring because of `tabindex=0`
-  &:focus {
-    outline: none;
-  }
-}
-
-.euiFlyout__closeButton {
-  position: absolute;
-  right: $euiSizeS;
-  top: $euiSizeS;
-  z-index: 3;
-
-  &:not(.euiFlyout__closeButton--outside) {
-    background-color: transparentize($euiColorEmptyShade, .1);
-  }
-
-  &--outside {
-    // match dropshadow
-    @include euiBottomShadowLarge;
-    right: auto;
-    left: 0;
-    // Override the hover and focus transitions of buttons
-    // sass-lint:disable-block no-important
-    transform: translateX(calc(-100% - #{$euiSizeL})) !important;
-    animation: none !important;
-
-    .euiFlyout--left & {
-      left: auto;
-      right: 0;
-      transform: translateX(calc(100% + #{$euiSizeL})) !important;
-    }
-  }
-}
-
-.euiFlyoutBody__banner {
-  overflow-x: hidden;
-}
-
-/**
- * 1. Calculating the minimum width based on the screen takeover breakpoint
- */
-$flyoutSizes: (
-  'small': (
-    min: round(map-get($euiBreakpoints, 'm') * .5), /* 1 */
-    width: 25vw,
-    max: round(map-get($euiBreakpoints, 's') * .7),
-  ),
-  'medium': (
-    // Calculated for forms plus padding
-    min: $euiFormMaxWidth + ($euiSizeM * 2),
-    width: 50vw,
-    max: map-get($euiBreakpoints, 'm'),
-  ),
-  'large': (
-    min:  round(map-get($euiBreakpoints, 'm') * .9), /* 1 */
-    width: 75vw,
-    max: map-get($euiBreakpoints, 'l'),
-  )
-);
-
-@each $name, $sizing in $flyoutSizes {
-  .euiFlyout--#{$name} {
-    min-width: map-get($sizing, min);
-    width: map-get($sizing, width);
-
-    &.euiFlyout--maxWidth-default {
-      max-width: map-get($sizing, max);
-    }
-  }
-}
-
-@each $modifier, $paddingAmount in $euiFlyoutPaddingModifiers {
-  .euiFlyout--#{$modifier} {
-
-    .euiFlyoutHeader {
-      padding: $paddingAmount $paddingAmount 0;
-    }
-
-    .euiFlyoutHeader--hasBorder {
-      padding-bottom: $paddingAmount;
-    }
-
-    .euiFlyoutBody__overflowContent {
-      padding: $paddingAmount;
-    }
-
-    .euiFlyoutBody__banner .euiCallOut {
-      padding-left: $paddingAmount;
-      padding-right: $paddingAmount;
-    }
-
-    .euiFlyoutFooter {
-      @if $paddingAmount == $euiSizeL {
-        padding: ($paddingAmount / 1.5) $paddingAmount;
-      } @else if $paddingAmount == $euiSize {
-        padding: ($paddingAmount * .75) $paddingAmount;
-      } @else {
-        padding: $paddingAmount;
-      }
-    }
-  }
-}
-
-@keyframes euiFlyout {
-  0% {
-    opacity: 0;
-    transform: translateX(100%);
-  }
-
-  75% {
-    opacity: 1;
-    transform: translateX(0%);
-  }
-}
-
-/**
- * 1. Leave only a small sliver exposed on small screens so users understand that this is not a new page
- * 2. If a custom maxWidth is set, we need to override it.
- */
-@include euiBreakpoint('xs', 's') {
-  // sass-lint:disable-block no-important
-  .euiFlyout {
-    max-width: 90vw !important; /* 1, 2 */
-  }
-
-  .euiFlyout--small {
-    min-width: 0;
-    width: map-get(map-get($flyoutSizes, 'small'), 'min');
-  }
-
-  .euiFlyout--medium {
-    min-width: 0;
-    width: map-get(map-get($flyoutSizes, 'medium'), 'min');
-  }
-
-  .euiFlyout--large {
-    min-width: 0;
-    width: map-get(map-get($flyoutSizes, 'large'), 'min');
-  }
-
-  // Pull in close buttons a little
-  .euiFlyout__closeButton--outside {
-    // Override the hover and focus transitions of buttons
-    // sass-lint:disable-block no-important
-    transform: translateX(calc(-100% - #{$euiSizeXS})) !important;
-
-    .euiFlyout--left & {
-      transform: translateX(calc(100% + #{$euiSizeXS})) !important;
-    }
-  }
-}
-
-/**
- * Left side flyout (should only be used for navigation)
- */
-.euiFlyout--left {
-  border-right: $euiFlyoutBorder;
-  border-left: none;
-  right: auto;
-  left: 0;
-  clip-path: polygon(0 0, 150% 0, 150% 100%, 0 100%);
-  animation-name: euiFlyoutLeft;
-}
-
-// Specific keyframes so in comes in from the left
-@keyframes euiFlyoutLeft {
-  0% {
-    opacity: 0;
-    transform: translateX(-100%);
-  }
-
-  75% {
-    opacity: 1;
-    transform: translateX(0%);
-  }
-}
-
-/**
- * Pushed style (inside body)
- */
-.euiFlyout.euiFlyout--push {
-  box-shadow: none;
-  clip-path: none;
-  animation-duration: 0s; // Don't animate on loading a docked nav
-  border-left: $euiBorderThick;
-  z-index: $euiZHeader - 1; // Make sure the header shadows are above
-
-  &.euiFlyout--left {
-    border-left: none;
-    border-right: $euiBorderThick;
-  }
-}

package/src/components/flyout/_flyout_body.scss

@@ -1,18 +0,0 @@
-.euiFlyoutBody {
-  flex-grow: 1;
-  overflow-y: hidden;
-  height: 100%;
-
-  .euiFlyoutBody__overflow {
-    @include euiYScrollWithShadows;
-
-    &.euiFlyoutBody__overflow--hasBanner {
-      @include euiOverflowShadow('y', 'end');
-    }
-  }
-
-  .euiFlyoutBody__banner .euiCallOut {
-    border: none; // Remove border from callout when it is a flyout banner
-    border-radius: 0; // Ensures no border-radius in all themes
-  }
-}

package/src/components/flyout/_flyout_footer.scss

@@ -1,4 +0,0 @@
-.euiFlyoutFooter {
-  background: $euiColorLightestShade;
-  flex-grow: 0;
-}

package/src/components/flyout/_flyout_header.scss

@@ -1,7 +0,0 @@
-.euiFlyoutHeader {
-  flex-grow: 0;
-}
-
-.euiFlyoutHeader--hasBorder {
-  border-bottom: $euiBorderThin;
-}

package/src/components/flyout/_index.scss

@@ -1,7 +0,0 @@
-@import 'variables';
-@import 'mixins';
-
-@import 'flyout';
-@import 'flyout_body';
-@import 'flyout_footer';
-@import 'flyout_header';

package/src/components/flyout/_mixins.scss

@@ -1,18 +0,0 @@
-
-@mixin euiFlyout {
-  border-left: $euiFlyoutBorder;
-  // The mixin augments the above
-  // sass-lint:disable mixins-before-declarations
-  @include euiBottomShadowLarge;
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  height: 100%;
-  z-index: $euiZFlyout;
-  background: $euiColorEmptyShade;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  clip-path: polygon(-50% 0, 100% 0, 100% 100%, -50% 100%);
-}

package/src/components/flyout/_variables.scss

@@ -1,8 +0,0 @@
-$euiFlyoutBorder: $euiBorderThin !default;
-
-$euiFlyoutPaddingModifiers: (
-  'paddingNone': 0,
-  'paddingSmall': $euiSizeS,
-  'paddingMedium': $euiSize,
-  'paddingLarge': $euiSizeL
-) !default;

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

@@ -1 +0,0 @@
-$euiFlyoutBorder: none;