@elastic/eui 67.1.0 → 67.1.1

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

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

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

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

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

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "67.1.0",
+  "version": "67.1.1",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",

package/src/components/index.scss

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

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

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

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

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

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

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

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

@@ -28,14 +28,18 @@ var euiBadgeStyles = function euiBadgeStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
       colorMode = euiThemeContext.colorMode;
   return {
-    euiBadge: /*#__PURE__*/(0, _react.css)("display:inline-block;vertical-align:middle;padding:0 ", euiTheme.size.s, ";", (0, _global_styling.logicalCSS)('max-width', '100%'), " font-size:", (0, _global_styling.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;", (0, _global_styling.logicalTextAlignCSS)('left'), " &:focus-within{", (0, _global_styling.euiFocusRing)(euiThemeContext), ";}&+.euiBadge{", (0, _global_styling.logicalCSS)('margin-left', euiTheme.size.xs), ";};label:euiBadge;"),
+    euiBadge: /*#__PURE__*/(0, _react.css)("display:inline-block;vertical-align:middle;padding:0 ", euiTheme.size.s, ";", (0, _global_styling.logicalCSS)('max-width', '100%'), " font-size:", (0, _global_styling.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:", (0, _global_styling.mathWithUnits)(euiTheme.border.radius.medium, function (x) {
+      return x / 2;
+    }), ";", (0, _global_styling.logicalTextAlignCSS)('left'), " &:focus-within{", (0, _global_styling.euiFocusRing)(euiThemeContext), ";}&+.euiBadge{", (0, _global_styling.logicalCSS)('margin-left', euiTheme.size.xs), ";};label:euiBadge;"),
     clickable: /*#__PURE__*/(0, _react.css)("&:not(:disabled){&:hover,&:focus{text-decoration:underline;}}&:focus{", (0, _global_styling.euiFocusRing)(euiThemeContext), ";}&:disabled{cursor:not-allowed;};label:clickable;"),
     disabled: /*#__PURE__*/(0, _react.css)("color:", (0, _mixins.euiButtonColor)(euiThemeContext, 'disabled').color, "!important;background-color:", (0, _mixins.euiButtonColor)(euiThemeContext, 'disabled').backgroundColor, "!important;;label:disabled;"),
     // Hollow has a border and is mostly used for autocompleters.
     hollow: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.emptyShade, ";border-color:", colorMode === 'DARK' ? (0, _services.tint)(euiTheme.border.color, 0.15) : euiTheme.border.color, ";color:", euiTheme.colors.text, ";;label:hollow;"),
     // Content wrapper
     euiBadge__content: /*#__PURE__*/(0, _react.css)((0, _global_styling.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((0, _global_styling.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__*/(0, _react.css)((0, _global_styling.euiTextTruncate)(), " cursor:inherit;;label:euiBadge__text;"),
@@ -49,7 +53,9 @@ var euiBadgeStyles = function euiBadgeStyles(euiThemeContext) {
     },
     // Clickable icons (iconOnClick)
     iconButton: {
-      euiBadge__iconButton: /*#__PURE__*/(0, _react.css)("font-size:0;&:focus{background-color:", (0, _services.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__*/(0, _react.css)("font-size:0;&:focus{background-color:", (0, _services.transparentize)(euiTheme.colors.ghost, 0.8), ";color:", euiTheme.colors.ink, ";border-radius:", (0, _global_styling.mathWithUnits)(euiTheme.border.radius.small, function (x) {
+        return x / 2;
+      }), ";}&:disabled{cursor:not-allowed;}.euiBadge__icon{margin:0!important;};label:euiBadge__iconButton;"),
       right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-left', euiTheme.size.xs), ";;label:right;"),
       left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-right', euiTheme.size.xs), ";;label:left;")
     },

package/test-env/components/breadcrumbs/breadcrumb.styles.js

@@ -52,7 +52,9 @@ var euiBreadcrumbContentStyles = function euiBreadcrumbContentStyles(euiThemeCon
   var euiTheme = euiThemeContext.euiTheme;
   return {
     euiBreadcrumb__content: /*#__PURE__*/(0, _react.css)("font-weight:", euiTheme.font.weight.medium, ";text-align:center;vertical-align:baseline;;label:euiBreadcrumb__content;"),
-    isTruncated: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextTruncate)("".concat(parseFloat(euiTheme.size.base) * 10, "px")), ";;label:isTruncated;"),
+    isTruncated: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextTruncate)((0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
+      return x * 10;
+    })), ";;label:isTruncated;"),
     isTruncatedLast: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextTruncate)('none'), ";;label:isTruncatedLast;"),
     // Types
     page: /*#__PURE__*/(0, _react.css)("&:is(a):focus{", (0, _global_styling.euiFocusRing)(euiThemeContext, 'inset'), ";}&:is(button):focus{", (0, _global_styling.euiFocusRing)(euiThemeContext, 'center'), ";};label:page;"),

package/test-env/components/button/button_icon/button_icon.js

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

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

@@ -139,6 +139,7 @@ EuiCollapsibleNav.propTypes = {
   /**
      * 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: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.any.isRequired]),
 
@@ -148,21 +149,25 @@ EuiCollapsibleNav.propTypes = {
      * 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: _propTypes.default.oneOfType([_propTypes.default.bool.isRequired, _propTypes.default.number.isRequired, _propTypes.default.string.isRequired]),
 
   /**
      * Customize the padding around the content of the flyout header, body and footer
+     * @default l
      */
   paddingSize: _propTypes.default.any,
 
   /**
      * Adds an EuiOverlayMask and wraps in an EuiPortal
+     * @default true
      */
   ownFocus: _propTypes.default.bool,
 
   /**
      * Hides the default close button. You must provide another close button somewhere within the flyout.
+     * @default false
      */
   hideCloseButton: _propTypes.default.bool,
 
@@ -175,6 +180,7 @@ EuiCollapsibleNav.propTypes = {
      * 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: _propTypes.default.oneOf(["inside", "outside"]),
 
@@ -212,12 +218,14 @@ EuiCollapsibleNav.propTypes = {
   /**
      * Which side of the window to attach to.
      * The `left` option should only be used for navigation.
+     * @default right
      */
   side: _propTypes.default.any,
 
   /**
      * 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: _propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.string.isRequired]),
 

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

@@ -24,7 +24,9 @@ var _colorCSS = function _colorCSS(color) {
 var euiExpressionStyles = function euiExpressionStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiExpression: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextBreakWord)(), ";display:inline-block;font-family:", euiTheme.font.familyCode, ";", (0, _global_styling.logicalCSS)('border-bottom', "".concat(euiTheme.border.width.thick, " solid transparent")), " ", (0, _global_styling.euiFontSize)(euiThemeContext, 's'), ";", (0, _global_styling.logicalTextAlignCSS)('left'), " padding:", parseFloat(euiTheme.size.s) / 2, "px 0;color:", euiTheme.colors.text, ";&:focus{", (0, _global_styling.logicalCSS)('border-bottom-style', 'solid'), ";}&+.euiExpression{", (0, _global_styling.logicalCSS)('margin-left', euiTheme.size.s), ";};label:euiExpression;"),
+    euiExpression: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextBreakWord)(), ";display:inline-block;font-family:", euiTheme.font.familyCode, ";", (0, _global_styling.logicalCSS)('border-bottom', "".concat(euiTheme.border.width.thick, " solid transparent")), " ", (0, _global_styling.euiFontSize)(euiThemeContext, 's'), ";", (0, _global_styling.logicalTextAlignCSS)('left'), " padding:", (0, _global_styling.mathWithUnits)(euiTheme.size.s, function (x) {
+      return x / 2;
+    }), " 0;color:", euiTheme.colors.text, ";&:focus{", (0, _global_styling.logicalCSS)('border-bottom-style', 'solid'), ";}&+.euiExpression{", (0, _global_styling.logicalCSS)('margin-left', euiTheme.size.s), ";};label:euiExpression;"),
     // Variants
     columns: /*#__PURE__*/(0, _react.css)("border-color:transparent;", (0, _global_styling.logicalCSS)('border-bottom-style', 'solid'), " ", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.xs), " ", (0, _global_styling.logicalCSS)('width', '100%'), " display:flex;padding:", euiTheme.size.xs, ";border-radius:", euiTheme.size.xs, ";;label:columns;"),
     truncate: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-width', '100%'), ";;label:truncate;"),

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

@@ -0,0 +1,124 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiFlyoutStyles = exports.euiFlyoutCloseButtonStyles = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _global_styling = require("../../global_styling");
+
+var _mixins = require("../../themes/amsterdam/global_styling/mixins");
+
+var _color = require("../../services/color");
+
+var _form = require("../form/form.styles");
+
+var _templateObject, _templateObject2;
+
+var euiFlyoutSlideInRight = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  75% {\n    opacity: 1;\n    transform: translateX(0%);\n  }\n"])));
+var euiFlyoutSlideInLeft = (0, _react.keyframes)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    opacity: 0;\n    transform: translateX(-100%);\n  }\n  75% {\n    opacity: 1;\n    transform: translateX(0%);\n}\n"])));
+
+var euiFlyoutCloseButtonStyles = function euiFlyoutCloseButtonStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiFlyout__closeButton: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('right', euiTheme.size.s), " ", (0, _global_styling.logicalCSS)('top', euiTheme.size.s), " z-index:3;;label:euiFlyout__closeButton;"),
+    inside: /*#__PURE__*/(0, _react.css)("background-color:", (0, _color.transparentize)(euiTheme.colors.emptyShade, 0.9), ";;label:inside;"),
+    outside: /*#__PURE__*/(0, _react.css)((0, _mixins.euiShadowXLarge)(euiThemeContext), ";animation:none!important;;label:outside;"),
+    outsideSide: {
+      // `transforms` pull in close buttons a little
+      // `!important` is necessary here to override the hover/focus transitions of buttons
+      right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('left', 0), " ", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['m', 'xl']), "{transform:translateX(calc(-100% - ", euiTheme.size.l, "))!important;}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{transform:translateX(calc(-100% - ", euiTheme.size.xs, "))!important;};label:right;"),
+      left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('right', 0), " ", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['m', 'xl']), "{transform:translateX(calc(100% + ", euiTheme.size.l, "))!important;}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{transform:translateX(calc(100% + ", euiTheme.size.xs, "))!important;};label:left;")
+    }
+  };
+};
+
+exports.euiFlyoutCloseButtonStyles = euiFlyoutCloseButtonStyles;
+
+var euiFlyoutStyles = function euiFlyoutStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiFlyout: /*#__PURE__*/(0, _react.css)("position:fixed;", (0, _global_styling.logicalCSS)('top', 0), " ", (0, _global_styling.logicalCSS)('bottom', 0), " ", (0, _global_styling.logicalCSS)('height', '100%'), " z-index:", euiTheme.levels.flyout, ";background:", euiTheme.colors.emptyShade, ";display:flex;flex-direction:column;align-items:stretch;&:focus{outline:none;}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{", (0, _global_styling.logicalCSS)('max-width', '90vw !important'), ";};label:euiFlyout;"),
+    // Flyout sizes
+    s: /*#__PURE__*/(0, _react.css)(composeFlyoutSizing(euiThemeContext, 's'), ";;label:s;"),
+    m: /*#__PURE__*/(0, _react.css)(composeFlyoutSizing(euiThemeContext, 'm'), ";;label:m;"),
+    l: /*#__PURE__*/(0, _react.css)(composeFlyoutSizing(euiThemeContext, 'l'), ";;label:l;"),
+    noMaxWidth: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-width', 'none'), ";;label:noMaxWidth;"),
+    // Side
+    right: /*#__PURE__*/(0, _react.css)("clip-path:polygon(-50% 0, 100% 0, 100% 100%, -50% 100%);", (0, _global_styling.logicalCSS)('right', 0), " ", _global_styling.euiCanAnimate, "{animation:", euiFlyoutSlideInRight, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ";};label:right;"),
+    // Left-side flyouts should only be used for navigation
+    left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('left', 0), " clip-path:polygon(0 0, 150% 0, 150% 100%, 0 100%);", _global_styling.euiCanAnimate, "{animation:", euiFlyoutSlideInLeft, ";};label:left;"),
+    // Type
+    overlay: /*#__PURE__*/(0, _react.css)((0, _mixins.euiShadowXLarge)(euiThemeContext), ";;label:overlay;"),
+    push: /*#__PURE__*/(0, _react.css)("clip-path:none;animation-duration:0s!important;z-index:", Number(euiTheme.levels.flyout) - 1, ";;label:push;"),
+    pushSide: {
+      right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-left', euiTheme.border.thick), ";;label:right;"),
+      left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-right', euiTheme.border.thick), ";;label:left;")
+    },
+    // Padding
+    paddingSizes: {
+      none: /*#__PURE__*/(0, _react.css)(composeFlyoutPadding(euiThemeContext, 'none'), ";;label:none;"),
+      s: /*#__PURE__*/(0, _react.css)(composeFlyoutPadding(euiThemeContext, 's'), ";;label:s;"),
+      m: /*#__PURE__*/(0, _react.css)(composeFlyoutPadding(euiThemeContext, 'm'), ";;label:m;"),
+      l: /*#__PURE__*/(0, _react.css)(composeFlyoutPadding(euiThemeContext, 'l'), ";;label:l;")
+    }
+  };
+};
+
+exports.euiFlyoutStyles = euiFlyoutStyles;
+
+var composeFlyoutSizing = function composeFlyoutSizing(euiThemeContext, size) {
+  var euiTheme = euiThemeContext.euiTheme; // 1. Calculating the minimum width based on the screen takeover breakpoint
+
+  var flyoutSizes = {
+    s: {
+      min: "".concat(Math.round(euiTheme.breakpoint.m * 0.5), "px"),
+      // 1.
+      width: '25vw',
+      max: "".concat(Math.round(euiTheme.breakpoint.s * 0.7), "px")
+    },
+    m: {
+      // Calculated for forms plus padding
+      min: "".concat((0, _global_styling.mathWithUnits)((0, _form.euiFormMaxWidth)(euiThemeContext), function (x) {
+        return x + 24;
+      })),
+      width: '50vw',
+      max: "".concat(euiTheme.breakpoint.m, "px")
+    },
+    l: {
+      min: "".concat(Math.round(euiTheme.breakpoint.m * 0.9), "px"),
+      // 1.
+      width: '75vw',
+      max: "".concat(euiTheme.breakpoint.l, "px")
+    }
+  };
+  return "\n    ".concat((0, _global_styling.logicalCSS)('max-width', flyoutSizes[size].max), "\n\n    ").concat((0, _global_styling.euiBreakpoint)(euiThemeContext, ['m', 'xl']), " {\n      ").concat((0, _global_styling.logicalCSS)('min-width', flyoutSizes[size].min), "\n      ").concat((0, _global_styling.logicalCSS)('width', flyoutSizes[size].width), "\n    }\n    ").concat((0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), " {\n      ").concat((0, _global_styling.logicalCSS)('min-width', 0), "\n      ").concat((0, _global_styling.logicalCSS)('width', flyoutSizes[size].min), "\n    }\n  ");
+};
+
+var composeFlyoutPadding = function composeFlyoutPadding(euiThemeContext, paddingSize) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var paddingModifierMap = {
+    none: 0,
+    s: euiTheme.size.s,
+    m: euiTheme.size.base,
+    l: euiTheme.size.l
+  }; // Footer padding
+
+  var footerPaddingSizes = {
+    none: 0,
+    s: euiTheme.size.s,
+    m: "".concat((0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
+      return x * 0.75;
+    }), " ").concat(euiTheme.size.base, ";"),
+    l: "".concat((0, _global_styling.mathWithUnits)(euiTheme.size.l, function (x) {
+      return x / 1.5;
+    }), " ").concat(euiTheme.size.l, ";")
+  };
+  return "\n    .euiFlyoutHeader {\n      ".concat((0, _global_styling.logicalCSS)('padding-horizontal', paddingModifierMap[paddingSize]), "\n      ").concat((0, _global_styling.logicalCSS)('padding-top', paddingModifierMap[paddingSize]), "\n    }\n\n    [class*='euiFlyoutHeader-hasBorder'] {\n      ").concat((0, _global_styling.logicalCSS)('padding-bottom', paddingModifierMap[paddingSize]), "\n    }\n\n    .euiFlyoutBody__overflowContent {\n      padding: ").concat(paddingModifierMap[paddingSize], ";\n    }\n\n    .euiFlyoutBody__banner .euiCallOut {\n      ").concat((0, _global_styling.logicalCSS)('padding-horizontal', paddingModifierMap[paddingSize]), "\n    }\n\n    .euiFlyoutFooter {\n      padding: ").concat(footerPaddingSizes[paddingSize], ";\n    }\n  ");
+};

package/test-env/components/flyout/flyout_body.js

@@ -17,6 +17,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _services = require("../../services");
+
+var _flyout_body = require("./flyout_body.styles");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["children", "className", "banner"];
@@ -27,16 +31,22 @@ var EuiFlyoutBody = function EuiFlyoutBody(_ref) {
       banner = _ref.banner,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiFlyoutBody', className);
-  var overflowClasses = (0, _classnames.default)('euiFlyoutBody__overflow', {
-    'euiFlyoutBody__overflow--hasBanner': banner
-  });
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _flyout_body.euiFlyoutBodyStyles)(euiTheme);
+  var cssStyles = [styles.euiFlyoutBody];
+  var bannerCssStyles = [banner && styles.euiFlyoutBody__banner];
+  var overflowCssStyles = [banner ? styles.euiFlyoutBody__overflow.hasBanner : styles.euiFlyoutBody__overflow.noBanner];
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     className: classes
-  }, rest), (0, _react2.jsx)("div", {
+  }, rest, {
+    css: cssStyles
+  }), (0, _react2.jsx)("div", {
     tabIndex: 0,
-    className: overflowClasses
+    className: "euiFlyoutBody__overflow",
+    css: overflowCssStyles
   }, banner && (0, _react2.jsx)("div", {
-    className: "euiFlyoutBody__banner"
+    className: "euiFlyoutBody__banner",
+    css: bannerCssStyles
   }, banner), (0, _react2.jsx)("div", {
     className: "euiFlyoutBody__overflowContent"
   }, children)));

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

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiFlyoutBodyStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _global_styling = require("../../global_styling");
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+var euiFlyoutBodyStyles = function euiFlyoutBodyStyles(euiThemeContext) {
+  return {
+    euiFlyoutBody: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSSWithFallback)('overflow-y', 'hidden'), " ", (0, _global_styling.logicalCSS)('height', '100%'), ";;label:euiFlyoutBody;"),
+    euiFlyoutBody__overflow: {
+      noBanner: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiYScrollWithShadows)(euiThemeContext), ";;label:noBanner;"),
+      hasBanner: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiYScrollWithShadows)(euiThemeContext, {
+        side: 'end'
+      }), ";;label:hasBanner;")
+    },
+    euiFlyoutBody__banner: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSSWithFallback)('overflow-x', 'hidden'), ";;label:euiFlyoutBody__banner;")
+  };
+};
+
+exports.euiFlyoutBodyStyles = euiFlyoutBodyStyles;

package/test-env/components/flyout/flyout_footer.js

@@ -17,6 +17,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _services = require("../../services");
+
+var _flyout_footer = require("./flyout_footer.styles");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["children", "className"];
@@ -26,9 +30,14 @@ var EuiFlyoutFooter = function EuiFlyoutFooter(_ref) {
       className = _ref.className,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiFlyoutFooter', className);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _flyout_footer.euiFlyoutFooterStyles)(euiTheme);
+  var cssStyles = [styles.euiFlyoutFooter];
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     className: classes
-  }, rest), children);
+  }, rest, {
+    css: cssStyles
+  }), children);
 };
 
 exports.EuiFlyoutFooter = EuiFlyoutFooter;

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

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiFlyoutFooterStyles = void 0;
+
+var _react = require("@emotion/react");
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+var euiFlyoutFooterStyles = function euiFlyoutFooterStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiFlyoutFooter: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.lightestShade, ";flex-grow:0;;label:euiFlyoutFooter;")
+  };
+};
+
+exports.euiFlyoutFooterStyles = euiFlyoutFooterStyles;

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

@@ -17,6 +17,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _services = require("../../services");
+
+var _flyout_header = require("./flyout_header.styles");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["children", "className", "hasBorder"];
@@ -27,12 +31,15 @@ var EuiFlyoutHeader = function EuiFlyoutHeader(_ref) {
       _ref$hasBorder = _ref.hasBorder,
       hasBorder = _ref$hasBorder === void 0 ? false : _ref$hasBorder,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var classes = (0, _classnames.default)('euiFlyoutHeader', {
-    'euiFlyoutHeader--hasBorder': hasBorder
-  }, className);
+  var classes = (0, _classnames.default)('euiFlyoutHeader', className);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _flyout_header.euiFlyoutHeaderStyles)(euiTheme);
+  var cssStyles = [styles.euiFlyoutHeader, hasBorder && styles.hasBorder];
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     className: classes
-  }, rest), children);
+  }, rest, {
+    css: cssStyles
+  }), children);
 };
 
 exports.EuiFlyoutHeader = EuiFlyoutHeader;