@elastic/eui 67.1.0 → 67.1.2

package/es/components/accordion/accordion.js

@@ -208,10 +208,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,
@@ -247,10 +247,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/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/es/components/avatar/avatar.js

@@ -14,6 +14,10 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -66,7 +70,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/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/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/es/components/button/button_display/_button_display_content.js

@@ -69,9 +69,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/es/components/button/button_icon/button_icon.js

@@ -74,11 +74,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') {
@@ -124,7 +128,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,
@@ -136,7 +140,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/es/components/collapsible_nav/collapsible_nav.js

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

package/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/es/components/flyout/flyout.js

@@ -33,31 +33,19 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  */
 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
@@ -67,13 +55,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,
@@ -164,41 +146,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",
@@ -251,11 +229,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.
 

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

@@ -0,0 +1,111 @@
+var _templateObject, _templateObject2;
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import { css, keyframes } from '@emotion/react';
+import { euiCanAnimate, euiBreakpoint, logicalCSS, mathWithUnits } from '../../global_styling';
+import { euiShadowXLarge } from '../../themes/amsterdam/global_styling/mixins';
+import { transparentize } from '../../services/color';
+import { euiFormMaxWidth } from '../form/form.styles';
+var euiFlyoutSlideInRight = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  75% {\n    opacity: 1;\n    transform: translateX(0%);\n  }\n"])));
+var euiFlyoutSlideInLeft = keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  0% {\n    opacity: 0;\n    transform: translateX(-100%);\n  }\n  75% {\n    opacity: 1;\n    transform: translateX(0%);\n}\n"])));
+export var euiFlyoutCloseButtonStyles = function euiFlyoutCloseButtonStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiFlyout__closeButton: /*#__PURE__*/css("position:absolute;", logicalCSS('right', euiTheme.size.s), " ", logicalCSS('top', euiTheme.size.s), " z-index:3;;label:euiFlyout__closeButton;"),
+    inside: /*#__PURE__*/css("background-color:", transparentize(euiTheme.colors.emptyShade, 0.9), ";;label:inside;"),
+    outside: /*#__PURE__*/css(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__*/css(logicalCSS('left', 0), " ", euiBreakpoint(euiThemeContext, ['m', 'xl']), "{transform:translateX(calc(-100% - ", euiTheme.size.l, "))!important;}", euiBreakpoint(euiThemeContext, ['xs', 's']), "{transform:translateX(calc(-100% - ", euiTheme.size.xs, "))!important;};label:right;"),
+      left: /*#__PURE__*/css(logicalCSS('right', 0), " ", euiBreakpoint(euiThemeContext, ['m', 'xl']), "{transform:translateX(calc(100% + ", euiTheme.size.l, "))!important;}", euiBreakpoint(euiThemeContext, ['xs', 's']), "{transform:translateX(calc(100% + ", euiTheme.size.xs, "))!important;};label:left;")
+    }
+  };
+};
+export var euiFlyoutStyles = function euiFlyoutStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiFlyout: /*#__PURE__*/css("position:fixed;", logicalCSS('top', 0), " ", logicalCSS('bottom', 0), " ", logicalCSS('height', '100%'), " z-index:", euiTheme.levels.flyout, ";background:", euiTheme.colors.emptyShade, ";display:flex;flex-direction:column;align-items:stretch;&:focus{outline:none;}", euiBreakpoint(euiThemeContext, ['xs', 's']), "{", logicalCSS('max-width', '90vw !important'), ";};label:euiFlyout;"),
+    // Flyout sizes
+    s: /*#__PURE__*/css(composeFlyoutSizing(euiThemeContext, 's'), ";;label:s;"),
+    m: /*#__PURE__*/css(composeFlyoutSizing(euiThemeContext, 'm'), ";;label:m;"),
+    l: /*#__PURE__*/css(composeFlyoutSizing(euiThemeContext, 'l'), ";;label:l;"),
+    noMaxWidth: /*#__PURE__*/css(logicalCSS('max-width', 'none'), ";;label:noMaxWidth;"),
+    // Side
+    right: /*#__PURE__*/css("clip-path:polygon(-50% 0, 100% 0, 100% 100%, -50% 100%);", logicalCSS('right', 0), " ", euiCanAnimate, "{animation:", euiFlyoutSlideInRight, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ";};label:right;"),
+    // Left-side flyouts should only be used for navigation
+    left: /*#__PURE__*/css(logicalCSS('left', 0), " clip-path:polygon(0 0, 150% 0, 150% 100%, 0 100%);", euiCanAnimate, "{animation:", euiFlyoutSlideInLeft, ";};label:left;"),
+    // Type
+    overlay: /*#__PURE__*/css(euiShadowXLarge(euiThemeContext), ";;label:overlay;"),
+    push: /*#__PURE__*/css("clip-path:none;animation-duration:0s!important;z-index:", Number(euiTheme.levels.flyout) - 1, ";;label:push;"),
+    pushSide: {
+      right: /*#__PURE__*/css(logicalCSS('border-left', euiTheme.border.thick), ";;label:right;"),
+      left: /*#__PURE__*/css(logicalCSS('border-right', euiTheme.border.thick), ";;label:left;")
+    },
+    // Padding
+    paddingSizes: {
+      none: /*#__PURE__*/css(composeFlyoutPadding(euiThemeContext, 'none'), ";;label:none;"),
+      s: /*#__PURE__*/css(composeFlyoutPadding(euiThemeContext, 's'), ";;label:s;"),
+      m: /*#__PURE__*/css(composeFlyoutPadding(euiThemeContext, 'm'), ";;label:m;"),
+      l: /*#__PURE__*/css(composeFlyoutPadding(euiThemeContext, 'l'), ";;label:l;")
+    }
+  };
+};
+
+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(mathWithUnits(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(logicalCSS('max-width', flyoutSizes[size].max), "\n\n    ").concat(euiBreakpoint(euiThemeContext, ['m', 'xl']), " {\n      ").concat(logicalCSS('min-width', flyoutSizes[size].min), "\n      ").concat(logicalCSS('width', flyoutSizes[size].width), "\n    }\n    ").concat(euiBreakpoint(euiThemeContext, ['xs', 's']), " {\n      ").concat(logicalCSS('min-width', 0), "\n      ").concat(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(mathWithUnits(euiTheme.size.base, function (x) {
+      return x * 0.75;
+    }), " ").concat(euiTheme.size.base, ";"),
+    l: "".concat(mathWithUnits(euiTheme.size.l, function (x) {
+      return x / 1.5;
+    }), " ").concat(euiTheme.size.l, ";")
+  };
+  return "\n    .euiFlyoutHeader {\n      ".concat(logicalCSS('padding-horizontal', paddingModifierMap[paddingSize]), "\n      ").concat(logicalCSS('padding-top', paddingModifierMap[paddingSize]), "\n    }\n\n    [class*='euiFlyoutHeader-hasBorder'] {\n      ").concat(logicalCSS('padding-bottom', paddingModifierMap[paddingSize]), "\n    }\n\n    .euiFlyoutBody__overflowContent {\n      padding: ").concat(paddingModifierMap[paddingSize], ";\n    }\n\n    .euiFlyoutBody__banner .euiCallOut {\n      ").concat(logicalCSS('padding-horizontal', paddingModifierMap[paddingSize]), "\n    }\n\n    .euiFlyoutFooter {\n      padding: ").concat(footerPaddingSizes[paddingSize], ";\n    }\n  ");
+};

package/es/components/flyout/flyout_body.js

@@ -16,6 +16,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
+import { useEuiTheme } from '../../services';
+import { euiFlyoutBodyStyles } from './flyout_body.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiFlyoutBody = function EuiFlyoutBody(_ref) {
   var children = _ref.children,
@@ -24,16 +26,22 @@ export var EuiFlyoutBody = function EuiFlyoutBody(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var classes = classNames('euiFlyoutBody', className);
-  var overflowClasses = classNames('euiFlyoutBody__overflow', {
-    'euiFlyoutBody__overflow--hasBanner': banner
-  });
+  var euiTheme = useEuiTheme();
+  var styles = euiFlyoutBodyStyles(euiTheme);
+  var cssStyles = [styles.euiFlyoutBody];
+  var bannerCssStyles = [banner && styles.euiFlyoutBody__banner];
+  var overflowCssStyles = [banner ? styles.euiFlyoutBody__overflow.hasBanner : styles.euiFlyoutBody__overflow.noBanner];
   return ___EmotionJSX("div", _extends({
     className: classes
-  }, rest), ___EmotionJSX("div", {
+  }, rest, {
+    css: cssStyles
+  }), ___EmotionJSX("div", {
     tabIndex: 0,
-    className: overflowClasses
+    className: "euiFlyoutBody__overflow",
+    css: overflowCssStyles
   }, banner && ___EmotionJSX("div", {
-    className: "euiFlyoutBody__banner"
+    className: "euiFlyoutBody__banner",
+    css: bannerCssStyles
   }, banner), ___EmotionJSX("div", {
     className: "euiFlyoutBody__overflowContent"
   }, children)));

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

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

package/es/components/flyout/flyout_footer.js

@@ -16,6 +16,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
+import { useEuiTheme } from '../../services';
+import { euiFlyoutFooterStyles } from './flyout_footer.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiFlyoutFooter = function EuiFlyoutFooter(_ref) {
   var children = _ref.children,
@@ -23,9 +25,14 @@ export var EuiFlyoutFooter = function EuiFlyoutFooter(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var classes = classNames('euiFlyoutFooter', className);
+  var euiTheme = useEuiTheme();
+  var styles = euiFlyoutFooterStyles(euiTheme);
+  var cssStyles = [styles.euiFlyoutFooter];
   return ___EmotionJSX("div", _extends({
     className: classes
-  }, rest), children);
+  }, rest, {
+    css: cssStyles
+  }), children);
 };
 EuiFlyoutFooter.propTypes = {
   className: PropTypes.string,

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

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

package/es/components/flyout/flyout_header.js

@@ -16,6 +16,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
+import { useEuiTheme } from '../../services';
+import { euiFlyoutHeaderStyles } from './flyout_header.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiFlyoutHeader = function EuiFlyoutHeader(_ref) {
   var children = _ref.children,
@@ -24,12 +26,15 @@ export var EuiFlyoutHeader = function EuiFlyoutHeader(_ref) {
       hasBorder = _ref$hasBorder === void 0 ? false : _ref$hasBorder,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var classes = classNames('euiFlyoutHeader', {
-    'euiFlyoutHeader--hasBorder': hasBorder
-  }, className);
+  var classes = classNames('euiFlyoutHeader', className);
+  var euiTheme = useEuiTheme();
+  var styles = euiFlyoutHeaderStyles(euiTheme);
+  var cssStyles = [styles.euiFlyoutHeader, hasBorder && styles.hasBorder];
   return ___EmotionJSX("div", _extends({
     className: classes
-  }, rest), children);
+  }, rest, {
+    css: cssStyles
+  }), children);
 };
 EuiFlyoutHeader.propTypes = {
   className: PropTypes.string,