@elastic/eui 67.0.0 → 67.1.1

package/lib/components/card/card.styles.js

@@ -57,7 +57,7 @@ var _ref5 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-var euiCardStyles = function euiCardStyles(euiThemeContext, paddingSize, color) {
+var euiCardStyles = function euiCardStyles(euiThemeContext, paddingSize) {
   var euiTheme = euiThemeContext.euiTheme;
   var paddingAmount = (0, _global_styling.euiPaddingSize)(euiThemeContext, paddingSize);
   var spacing = (0, _global_styling.euiPaddingSize)(euiThemeContext, paddingKey);
@@ -94,7 +94,10 @@ var euiCardStyles = function euiCardStyles(euiThemeContext, paddingSize, color)
       },
       disabled: _ref2
     },
-    euiCard__image: /*#__PURE__*/(0, _react.css)("position:relative;overflow:hidden;", (0, _global_styling.logicalCSS)('width', "calc(100% + (".concat(paddingAmount, " * 2))")), ";", (0, _global_styling.logicalCSS)('left', "-".concat(paddingAmount)), ";", (0, _global_styling.logicalCSS)('top', "-".concat(paddingAmount)), ";", (0, _global_styling.logicalCSS)('margin-bottom', "-".concat(paddingAmount)), ";", (0, _global_styling.logicalCSS)('border-top-left-radius', "calc(".concat(euiTheme.border.radius.medium, " - ").concat(euiTheme.border.width.thin, ")")), " ", _global_styling.logicals['border-top-right-radius'], ":calc(", euiTheme.border.radius.medium, " - ", euiTheme.border.width.thin, ");", color === 'transparent' ? "border-radius: ".concat(euiTheme.border.radius.medium, ";") : undefined, " img{", (0, _global_styling.logicalCSS)('width', '100%'), ";};label:euiCard__image;"),
+    image: {
+      euiCard__image: /*#__PURE__*/(0, _react.css)("position:relative;overflow:hidden;", (0, _global_styling.logicalCSS)('width', "calc(100% + (".concat(paddingAmount, " * 2))")), ";", (0, _global_styling.logicalCSS)('left', "-".concat(paddingAmount)), ";", (0, _global_styling.logicalCSS)('top', "-".concat(paddingAmount)), ";", (0, _global_styling.logicalCSS)('margin-bottom', "-".concat(paddingAmount)), ";", (0, _global_styling.logicalCSS)('border-top-left-radius', "calc(".concat(euiTheme.border.radius.medium, " - ").concat(euiTheme.border.width.thin, ")")), " ", _global_styling.logicals['border-top-right-radius'], ":calc(", euiTheme.border.radius.medium, " - ", euiTheme.border.width.thin, ");img{", (0, _global_styling.logicalCSS)('width', '100%'), ";};label:euiCard__image;"),
+      transparent: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";;label:transparent;")
+    },
     icon: {
       euiCard__icon: /*#__PURE__*/(0, _react.css)(";label:euiCard__icon;"),
       withImage: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('top', '50%'), ";", (0, _global_styling.logicalCSS)('left', '50%'), ";transform:translate(-50%, calc(-50% + -", paddingAmount, "))!important;;label:withImage;"),

package/lib/components/collapsible_nav/collapsible_nav.js

@@ -151,6 +151,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]),
 
@@ -160,21 +161,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,
 
@@ -187,6 +192,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"]),
 
@@ -224,12 +230,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/lib/components/expression/expression.styles.js

@@ -22,7 +22,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/lib/components/flyout/flyout.js

@@ -13,7 +13,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _services = require("../../services");
 
-var _common = require("../common");
+var _global_styling = require("../../global_styling");
 
 var _focus_trap = require("../focus_trap");
 
@@ -27,6 +27,8 @@ var _resize_observer = require("../observer/resize_observer");
 
 var _portal = require("../portal");
 
+var _flyout = require("./flyout.styles");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["className", "children", "as", "hideCloseButton", "closeButtonProps", "closeButtonAriaLabel", "closeButtonPosition", "onClose", "ownFocus", "side", "size", "paddingSize", "maxWidth", "style", "maskProps", "type", "outsideClickCloses", "role", "pushMinBreakpoint", "focusTrapProps"];
@@ -61,24 +63,11 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-var typeToClassNameMap = {
-  push: 'euiFlyout--push',
-  overlay: null
-};
-var TYPES = (0, _common.keysOf)(typeToClassNameMap);
+var TYPES = ['push', 'overlay'];
 exports.TYPES = TYPES;
-var sideToClassNameMap = {
-  left: 'euiFlyout--left',
-  right: null
-};
-var SIDES = (0, _common.keysOf)(sideToClassNameMap);
+var SIDES = ['left', 'right'];
 exports.SIDES = SIDES;
-var sizeToClassNameMap = {
-  s: 'euiFlyout--small',
-  m: 'euiFlyout--medium',
-  l: 'euiFlyout--large'
-};
-var SIZES = (0, _common.keysOf)(sizeToClassNameMap);
+var SIZES = ['s', 'm', 'l'];
 exports.SIZES = SIZES;
 
 /**
@@ -89,13 +78,7 @@ function isEuiFlyoutSizeNamed(value) {
   return SIZES.includes(value);
 }
 
-var paddingSizeToClassNameMap = {
-  none: 'euiFlyout--paddingNone',
-  s: 'euiFlyout--paddingSmall',
-  m: 'euiFlyout--paddingMedium',
-  l: 'euiFlyout--paddingLarge'
-};
-var PADDING_SIZES = (0, _common.keysOf)(paddingSizeToClassNameMap);
+var PADDING_SIZES = ['none', 's', 'm', 'l'];
 exports.PADDING_SIZES = PADDING_SIZES;
 var defaultElement = 'div';
 var EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
@@ -187,41 +170,37 @@ var EuiFlyout = /*#__PURE__*/(0, _react.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), (0, _global_styling.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), (0, _global_styling.logicalStyle)('width', size));
   }
 
-  var classes = (0, _classnames.default)('euiFlyout', typeToClassNameMap[type], sideToClassNameMap[side], sizeClassName, paddingSizeToClassNameMap[paddingSize], widthClassName, className);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _flyout.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 = (0, _classnames.default)('euiFlyout', className);
   var closeButton;
 
   if (onClose && !hideCloseButton) {
-    var closeButtonClasses = (0, _classnames.default)('euiFlyout__closeButton', "euiFlyout__closeButton--".concat(closeButtonPosition), closeButtonProps === null || closeButtonProps === void 0 ? void 0 : closeButtonProps.className);
+    var closeButtonClasses = (0, _classnames.default)('euiFlyout__closeButton', closeButtonProps === null || closeButtonProps === void 0 ? void 0 : closeButtonProps.className);
+    var closeButtonStyles = (0, _flyout.euiFlyoutCloseButtonStyles)(euiTheme);
+    var closeButtonCssStyles = [closeButtonStyles.euiFlyout__closeButton, closeButtonStyles[closeButtonPosition], closeButtonPosition === 'outside' && closeButtonStyles.outsideSide[side]];
     closeButton = (0, _react2.jsx)(_i18n.EuiI18n, {
       token: "euiFlyout.closeAriaLabel",
       default: "Close this dialog"
     }, function (closeAriaLabel) {
       return (0, _react2.jsx)(_button.EuiButtonIcon, _extends({
+        css: closeButtonCssStyles,
         display: closeButtonPosition === 'outside' ? 'fill' : 'empty',
         iconType: "cross",
         color: "text",
@@ -278,8 +257,9 @@ var EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     role: role,
     className: classes,
     tabIndex: -1,
-    style: newStyle || style,
-    ref: setRef
+    style: newStyle,
+    ref: setRef,
+    css: cssStyles
   }), closeButton, children)); // If ownFocus is set, wrap with an overlay and allow the user to click it to close it.
 
   var mergedMaskProps = _objectSpread(_objectSpread({}, maskProps), {}, {

package/lib/components/flyout/flyout.styles.js

@@ -0,0 +1,122 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiFlyoutStyles = exports.euiFlyoutCloseButtonStyles = void 0;
+
+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;
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var euiFlyoutSlideInRight = (0, _react.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 = (0, _react.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"])));
+
+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/lib/components/flyout/flyout_body.js

@@ -11,6 +11,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"];
@@ -30,16 +34,22 @@ var EuiFlyoutBody = function EuiFlyoutBody(_ref) {
       rest = _objectWithoutProperties(_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", _extends({
     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/lib/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/lib/components/flyout/flyout_footer.js

@@ -11,6 +11,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"];
@@ -29,9 +33,14 @@ var EuiFlyoutFooter = function EuiFlyoutFooter(_ref) {
       rest = _objectWithoutProperties(_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", _extends({
     className: classes
-  }, rest), children);
+  }, rest, {
+    css: cssStyles
+  }), children);
 };
 
 exports.EuiFlyoutFooter = EuiFlyoutFooter;

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

@@ -11,6 +11,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"];
@@ -30,12 +34,15 @@ var EuiFlyoutHeader = function EuiFlyoutHeader(_ref) {
       hasBorder = _ref$hasBorder === void 0 ? false : _ref$hasBorder,
       rest = _objectWithoutProperties(_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", _extends({
     className: classes
-  }, rest), children);
+  }, rest, {
+    css: cssStyles
+  }), children);
 };
 
 exports.EuiFlyoutHeader = EuiFlyoutHeader;

package/lib/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/lib/components/image/image_wrapper.js

@@ -67,10 +67,10 @@ var EuiImageWrapper = function EuiImageWrapper(_ref) {
       optionalCaptionText = _useInnerText2[1];
 
   return (0, _react2.jsx)("figure", _extends({
-    "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/lib/components/markdown_editor/markdown_format.styles.js

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

package/lib/components/notification/notification_event.js

@@ -144,7 +144,7 @@ EuiNotificationEvent.propTypes = {
   /**
      * Accepts either our palette colors (primary, success ..etc) or a hex value `#FFFFFF`, `#000`.
      */
-  badgeColor: _propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.any.isRequired]),
+  badgeColor: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.string.isRequired]),
 
   /**
      * The icon used to visually represent this data type. Accepts any `EuiIcon IconType`.

package/lib/components/notification/notification_event_meta.js

@@ -165,7 +165,7 @@ EuiNotificationEventMeta.propTypes = {
   /**
      * Accepts either our palette colors (primary, success ..etc) or a hex value `#FFFFFF`, `#000`.
      */
-  badgeColor: _propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.any.isRequired]),
+  badgeColor: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.string.isRequired]),
 
   /**
      * The icon used to visually represent this data type. Accepts any `EuiIcon IconType`.

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

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

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

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