@elastic/eui 100.0.0 → 101.0.0

package/es/components/modal/modal.styles.js

@@ -13,11 +13,14 @@ import { euiFormVariables } from '../form/form.styles';
 export var euiModalStyles = function euiModalStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiModal: /*#__PURE__*/css(euiShadowXLarge(euiThemeContext), " display:flex;flex-direction:column;max-block-size:75vh;position:relative;background-color:", euiTheme.colors.emptyShade, ";border-radius:", euiTheme.border.radius.medium, ";border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.borderBaseFloating, ";z-index:", euiTheme.levels.modal, ";min-inline-size:", euiFormVariables(euiThemeContext).maxWidth, ";max-inline-size:calc(100vw - ", euiTheme.size.base, ");overflow:hidden;", euiCanAnimate, "{animation:", euiAnimSlideInUp(euiTheme.size.xxl), " ", euiTheme.animation.slow, " ", euiTheme.animation.bounce, ";}", euiMaxBreakpoint(euiThemeContext, 'm'), "{position:fixed;inset:0;border-radius:0;inline-size:100vw!important;min-inline-size:0!important;max-inline-size:none!important;max-block-size:100vh!important;}&:focus{outline:none;};label:euiModal;"),
+    euiModal: /*#__PURE__*/css(euiShadowXLarge(euiThemeContext, {
+      borderAllInHighContrastMode: true
+    }), " display:flex;flex-direction:column;max-block-size:75vh;position:relative;background-color:", euiTheme.colors.emptyShade, ";border-radius:", euiTheme.border.radius.medium, ";border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.borderBaseFloating, ";z-index:", euiTheme.levels.modal, ";min-inline-size:", euiFormVariables(euiThemeContext).maxWidth, ";max-inline-size:calc(100vw - ", euiTheme.size.base, ");overflow:hidden;", euiCanAnimate, "{animation:", euiAnimSlideInUp(euiTheme.size.xxl), " ", euiTheme.animation.slow, " ", euiTheme.animation.bounce, ";}", euiMaxBreakpoint(euiThemeContext, 'm'), "{position:fixed;inset:0;border-radius:0;inline-size:100vw!important;min-inline-size:0!important;max-inline-size:none!important;max-block-size:100vh!important;}&:focus{outline:none;};label:euiModal;"),
     // Variants
     defaultMaxWidth: /*#__PURE__*/css("max-inline-size:min(\n        ", euiTheme.breakpoint.m, "px,\n        calc(100vw - ", euiTheme.size.base, ")\n      );;label:defaultMaxWidth;"),
     confirmation: /*#__PURE__*/css("min-inline-size:", euiFormVariables(euiThemeContext).maxWidth, ";", euiMaxBreakpoint(euiThemeContext, 'm'), "{", euiShadowXLarge(euiThemeContext, {
-      reverse: true
+      reverse: true,
+      borderAllInHighContrastMode: true
     }), " inset-block-start:auto;};label:confirmation;"),
     euiModal__closeIcon: /*#__PURE__*/css("position:absolute;inset-inline-end:", euiTheme.size.xs, ";inset-block-start:", euiTheme.size.xs, ";z-index:3;;label:euiModal__closeIcon;")
   };

package/es/components/overlay_mask/overlay_mask.styles.js

@@ -9,9 +9,10 @@
 import { css } from '@emotion/css';
 import { logicalCSS, euiAnimFadeIn } from '../../global_styling';
 export var euiOverlayMaskStyles = function euiOverlayMaskStyles(_ref) {
-  var euiTheme = _ref.euiTheme;
+  var euiTheme = _ref.euiTheme,
+    highContrastMode = _ref.highContrastMode;
   return {
-    euiOverlayMask: /*#__PURE__*/css("position:fixed;", logicalCSS('top', 0), " ", logicalCSS('left', 0), " ", logicalCSS('right', 0), " ", logicalCSS('bottom', 0), " display:flex;align-items:center;justify-content:center;", logicalCSS('padding-bottom', '10vh'), " animation:", euiAnimFadeIn, " ", euiTheme.animation.fast, " ease-in;background:", euiTheme.colors.backgroundBaseInteractiveOverlay, ";;label:euiOverlayMask;"),
+    euiOverlayMask: /*#__PURE__*/css("position:fixed;", logicalCSS('top', 0), " ", logicalCSS('left', 0), " ", logicalCSS('right', 0), " ", logicalCSS('bottom', 0), " display:flex;align-items:center;justify-content:center;", logicalCSS('padding-bottom', '10vh'), " animation:", euiAnimFadeIn, " ", euiTheme.animation.fast, " ease-in;background:", highContrastMode ? euiTheme.components.overlayMaskBackgroundHighContrast : euiTheme.components.overlayMaskBackground, ";;label:euiOverlayMask;"),
     aboveHeader: /*#__PURE__*/css("z-index:", euiTheme.levels.mask, ";;label:aboveHeader;"),
     belowHeader: /*#__PURE__*/css("z-index:", euiTheme.levels.maskBelowHeader, ";", logicalCSS('top', 'var(--euiFixedHeadersOffset, 0)'), ";;label:belowHeader;")
   };

package/es/components/panel/panel.js

@@ -4,6 +4,12 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
 /*
@@ -17,8 +23,8 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { useEuiMemoizedStyles } from '../../services';
-import { useEuiBackgroundColorCSS, useEuiPaddingCSS, BACKGROUND_COLORS, PADDING_SIZES } from '../../global_styling';
+import { useEuiMemoizedStyles, useEuiTheme } from '../../services';
+import { useEuiBackgroundColorCSS, useEuiBorderColorCSS, useEuiPaddingCSS, BACKGROUND_COLORS, PADDING_SIZES } from '../../global_styling';
 import { keysOf } from '../common';
 import { euiPanelStyles } from './panel.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -53,11 +59,22 @@ export var EuiPanel = function EuiPanel(_ref) {
     panelRef = _ref.panelRef,
     element = _ref.element,
     rest = _objectWithoutProperties(_ref, _excluded);
+  // Add borders to panels in high contrast mode
+  var _useEuiTheme = useEuiTheme(),
+    highContrastMode = _useEuiTheme.highContrastMode,
+    euiTheme = _useEuiTheme.euiTheme;
+  var borderColors = useEuiBorderColorCSS();
+
   // Shadows are only allowed when there's a white background (plain)
-  var canHaveShadow = !hasBorder && color === 'plain';
+  var canHaveShadow = !hasBorder && color === 'plain' && !highContrastMode;
   var canHaveBorder = color === 'plain' || color === 'transparent';
   var styles = useEuiMemoizedStyles(euiPanelStyles);
-  var cssStyles = [styles.euiPanel, grow && styles.grow, styles.radius[borderRadius], useEuiPaddingCSS()[paddingSize], useEuiBackgroundColorCSS()[color], canHaveShadow && hasShadow === true && styles.hasShadow, canHaveBorder && hasBorder === true && styles.hasBorder, rest.onClick && styles.isClickable];
+  var cssStyles = [styles.euiPanel, grow && styles.grow, styles.radius[borderRadius], useEuiPaddingCSS()[paddingSize], useEuiBackgroundColorCSS()[color], canHaveShadow && hasShadow === true && styles.hasShadow, canHaveBorder && hasBorder === true && styles.hasBorder].concat(_toConsumableArray(highContrastMode && _canRenderHighContrastBorder({
+    color: color,
+    hasBorder: hasBorder
+  }) ? [{
+    border: euiTheme.border.thin
+  }, borderColors[color]] : []), [rest.onClick && styles.isClickable]);
   var classes = classNames('euiPanel', "euiPanel--".concat(color), _defineProperty({}, "euiPanel--".concat(paddingSizeToClassNameMap[paddingSize]), paddingSizeToClassNameMap[paddingSize]), className);
   if (rest.onClick && element !== 'div') {
     return ___EmotionJSX("button", _extends({
@@ -72,6 +89,9 @@ export var EuiPanel = function EuiPanel(_ref) {
     css: cssStyles
   }, rest), children);
 };
+
+// Do not render a high contrast border if the panel is transparent
+// and does not have a default contrast border
 EuiPanel.propTypes = {
   element: PropTypes.oneOfType([PropTypes.oneOf(["button"]), PropTypes.oneOf(["div"])]),
   /**
@@ -127,4 +147,9 @@ EuiPanel.propTypes = {
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
   css: PropTypes.any
+};
+export var _canRenderHighContrastBorder = function _canRenderHighContrastBorder(_ref2) {
+  var color = _ref2.color,
+    hasBorder = _ref2.hasBorder;
+  return !(color === 'transparent' && !hasBorder);
 };

package/es/components/panel/panel.styles.js

@@ -10,6 +10,23 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 import { css } from '@emotion/react';
 import { euiShadow } from '@elastic/eui-theme-common';
 import { euiCanAnimate, logicalCSS, logicalTextAlignCSS } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
+export var euiPanelBorderStyles = function euiPanelBorderStyles(euiThemeContext, options) {
+  var euiTheme = euiThemeContext.euiTheme,
+    colorMode = euiThemeContext.colorMode;
+  var _ref3 = options !== null && options !== void 0 ? options : {},
+    borderColor = _ref3.borderColor,
+    _ref3$hasFloatingBord = _ref3.hasFloatingBorder,
+    hasFloatingBorder = _ref3$hasFloatingBord === void 0 ? true : _ref3$hasFloatingBord;
+
+  /* TODO: remove `hasFloatingBorder` and `hasVisibleBorder` and once Amsterdam is removed
+   euiTheme.colors.borderBaseFloating is enough then */
+  var hasVisibleBorder = hasFloatingBorder && colorMode === 'DARK';
+  return highContrastModeStyles(euiThemeContext, {
+    none: "\n      /* Using a pseudo element for the border instead of floating border only \n      because the transparent border might otherwise be visible with arbitrary \n      full-width/height content in light mode. */\n      &::before {\n        content: '';\n        position: absolute;\n        /* ensure to keep on top of flush content */\n        z-index: 1;\n        inset: 0;\n        border: ".concat(euiTheme.border.width.thin, " solid\n          ").concat((borderColor !== null && borderColor !== void 0 ? borderColor : hasVisibleBorder) ? euiTheme.border.color : euiTheme.colors.borderBaseFloating, ";\n        border-radius: inherit;\n        pointer-events: none;\n      }\n    "),
+    preferred: "\n      border: ".concat(euiTheme.border.thin, ";\n    ")
+  });
+};
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "122lw0e-grow",
   styles: "flex-grow:1;label:grow;"
@@ -19,27 +36,35 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 var _ref2 = process.env.NODE_ENV === "production" ? {
-  name: "1kk7odi-euiPanel",
-  styles: "flex-grow:0;label:euiPanel;"
+  name: "1xyrf3k-euiPanel",
+  styles: "position:relative;flex-grow:0;label:euiPanel;"
 } : {
-  name: "1kk7odi-euiPanel",
-  styles: "flex-grow:0;label:euiPanel;",
+  name: "1xyrf3k-euiPanel",
+  styles: "position:relative;flex-grow:0;label:euiPanel;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 export var euiPanelStyles = function euiPanelStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var borderStyle = "\n    position: relative;\n\n    /* Using a pseudo element for the border instead of floating border only \n      because the transparent border might otherwise be visible with arbitrary \n      full-width/height content in light mode. */\n    ::before {\n      content: '';\n      position: absolute;\n      inset: 0;\n      border: ".concat(euiTheme.border.width.thin, " solid\n        ").concat(euiTheme.colors.borderBaseFloating, ";\n      border-radius: inherit;\n      pointer-events: none;\n    }\n  ");
   return {
     // Base
     euiPanel: _ref2,
     grow: _ref,
-    hasShadow: /*#__PURE__*/css(euiShadow(euiThemeContext, 'm'), " ", borderStyle, ";;label:hasShadow;"),
-    hasBorder: /*#__PURE__*/css("border:", euiTheme.border.thin, ";;label:hasBorder;"),
+    hasShadow: /*#__PURE__*/css(euiShadow(euiThemeContext, 'm'), " ", euiPanelBorderStyles(euiThemeContext, {
+      hasFloatingBorder: false
+    }), ";;label:hasShadow;"),
+    hasBorder: /*#__PURE__*/css(euiPanelBorderStyles(euiThemeContext, {
+      borderColor: euiTheme.border.color,
+      hasFloatingBorder: false
+    }), ";;label:hasBorder;"),
     radius: {
       none: /*#__PURE__*/css(";label:none;"),
       m: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, ";;label:m;")
     },
     // Setup interactive behavior
-    isClickable: /*#__PURE__*/css(euiCanAnimate, "{transition:box-shadow ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ",transform ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";}&:enabled{display:block;", logicalCSS('width', '100%'), " ", logicalTextAlignCSS('left'), ";}&:hover,&:focus{", euiShadow(euiThemeContext, 'l'), " transform:translateY(-2px);cursor:pointer;};label:isClickable;")
+    isClickable: /*#__PURE__*/css(euiCanAnimate, "{transition:box-shadow ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ",transform ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";}&:enabled{display:block;", logicalCSS('width', '100%'), " ", logicalTextAlignCSS('left'), ";}&:hover,&:focus{", highContrastModeStyles(euiThemeContext, {
+      none: euiShadow(euiThemeContext, 'l'),
+      // Windows high contrast themes ignore box-shadows - use a filter workaround instead
+      preferred: "\n            &:not(.euiPanel--transparent) {\n              filter: drop-shadow(0 ".concat(euiTheme.border.width.thick, " 0 ").concat(euiTheme.border.color, ");\n            }\n          ")
+    }), " transform:translateY(-2px);cursor:pointer;};label:isClickable;")
   };
 };

package/es/components/panel/split_panel/split_panel.js

@@ -1,5 +1,11 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["children", "className"],
   _excluded2 = ["children", "className", "direction", "responsive"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
@@ -11,11 +17,12 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { createContext, useContext } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
 import { useIsWithinBreakpoints } from '../../../services/breakpoint';
-import { EuiPanel } from '../panel';
+import { useEuiMemoizedStyles } from '../../../services';
+import { EuiPanel, _canRenderHighContrastBorder } from '../panel';
 import { euiSplitPanelOuterStyles, euiSplitPanelInnerStyles } from './split_panel.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 /**
@@ -26,7 +33,10 @@ export var _EuiSplitPanelInner = function _EuiSplitPanelInner(_ref) {
   var children = _ref.children,
     className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var borderDirection = useContext(SplitPanelInnerBorderDirection);
   var classes = classNames('euiSplitPanel__inner', className);
+  var styles = useEuiMemoizedStyles(euiSplitPanelInnerStyles);
+  var cssStyles = [styles.euiSplitPanelInner, borderDirection && styles.highContrastBorders[borderDirection]];
   var panelProps = {
     hasShadow: false,
     color: 'transparent',
@@ -36,7 +46,7 @@ export var _EuiSplitPanelInner = function _EuiSplitPanelInner(_ref) {
   return ___EmotionJSX(EuiPanel, _extends({
     element: "div",
     className: classes,
-    css: euiSplitPanelInnerStyles.euiSplitPanelInner
+    css: cssStyles
   }, panelProps, rest), children);
 };
 _EuiSplitPanelInner.propTypes = {
@@ -72,15 +82,19 @@ export var _EuiSplitPanelOuter = function _EuiSplitPanelOuter(_ref2) {
     responsive = _ref2$responsive === void 0 ? ['xs', 's'] : _ref2$responsive,
     rest = _objectWithoutProperties(_ref2, _excluded2);
   var isResponsive = useIsWithinBreakpoints(responsive, !!responsive);
+  var responsiveDirection = direction === 'row' && !isResponsive ? 'row' : 'column';
+  var innerBorderDirection = _canRenderHighContrastBorder(_objectSpread({}, rest)) ? responsiveDirection : undefined;
   var styles = euiSplitPanelOuterStyles;
-  var cssStyles = [styles.euiSplitPanelOuter, direction === 'row' && !isResponsive ? styles.row : styles.column];
+  var cssStyles = [styles.euiSplitPanelOuter, styles[responsiveDirection]];
   var classes = classNames('euiSplitPanel', className);
   return ___EmotionJSX(EuiPanel, _extends({
     paddingSize: "none",
     grow: false,
     className: classes,
     css: cssStyles
-  }, rest), children);
+  }, rest), ___EmotionJSX(SplitPanelInnerBorderDirection.Provider, {
+    value: innerBorderDirection
+  }, children));
 };
 _EuiSplitPanelOuter.propTypes = {
   /**
@@ -97,6 +111,7 @@ _EuiSplitPanelOuter.propTypes = {
      */
   responsive: PropTypes.oneOfType([PropTypes.oneOf([false]), PropTypes.arrayOf(PropTypes.any.isRequired).isRequired])
 };
+var SplitPanelInnerBorderDirection = /*#__PURE__*/createContext(undefined);
 export var EuiSplitPanel = {
   Outer: _EuiSplitPanelOuter,
   Inner: _EuiSplitPanelInner

package/es/components/panel/split_panel/split_panel.styles.js

@@ -9,6 +9,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css } from '@emotion/react';
 import { logicalCSS } from '../../../global_styling';
+import { highContrastModeStyles } from '../../../global_styling/functions/high_contrast';
 export var euiSplitPanelOuterStyles = {
   euiSplitPanelOuter: /*#__PURE__*/css("display:flex;", logicalCSS('min-width', 0), " overflow:hidden;;label:euiSplitPanelOuter;"),
   column: process.env.NODE_ENV === "production" ? {
@@ -28,13 +29,32 @@ export var euiSplitPanelOuterStyles = {
     toString: _EMOTION_STRINGIFIED_CSS_ERROR__
   }
 };
-export var euiSplitPanelInnerStyles = {
-  euiSplitPanelInner: process.env.NODE_ENV === "production" ? {
-    name: "1k62yu6-euiSplitPanelInner",
-    styles: "flex-basis:0%;transform:none!important;box-shadow:none!important;label:euiSplitPanelInner;"
-  } : {
-    name: "1k62yu6-euiSplitPanelInner",
-    styles: "flex-basis:0%;transform:none!important;box-shadow:none!important;label:euiSplitPanelInner;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-  }
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1k62yu6-euiSplitPanelInner",
+  styles: "flex-basis:0%;transform:none!important;box-shadow:none!important;label:euiSplitPanelInner;"
+} : {
+  name: "1k62yu6-euiSplitPanelInner",
+  styles: "flex-basis:0%;transform:none!important;box-shadow:none!important;label:euiSplitPanelInner;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var euiSplitPanelInnerStyles = function euiSplitPanelInnerStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiSplitPanelInner: _ref,
+    highContrastBorders: {
+      // Don't double up on borders in high contrast mode, but render
+      // border dividers between nested inner panels
+      _renderBorder: function _renderBorder(direction) {
+        return highContrastModeStyles(euiThemeContext, {
+          preferred: "\n            border: none;\n\n            &:not(:last-child) {\n              ".concat(logicalCSS("border-".concat(direction), euiTheme.border.thin), "\n              border-color: inherit; /* Attempt to inherit from parent panel */\n            }\n          ")
+        });
+      },
+      get column() {
+        return this._renderBorder('bottom');
+      },
+      get row() {
+        return this._renderBorder('right');
+      }
+    }
+  };
 };

package/es/components/popover/popover_arrow/_popover_arrow.styles.js

@@ -17,14 +17,15 @@ import { logicalSizeCSS } from '../../../global_styling';
 import { _popoverArrowStyles } from '../../../services/popover';
 export var euiPopoverArrowStyles = function euiPopoverArrowStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode,
     colorMode = euiThemeContext.colorMode;
-  var hasBorder = colorMode === 'DARK';
+  var hasBorder = highContrastMode || colorMode === 'DARK';
   var arrowSize = euiTheme.size.base;
   var arrowStyles = _popoverArrowStyles(euiThemeContext, arrowSize);
   return _objectSpread({
     // Wrapper
-    euiPopoverArrowWrapper: /*#__PURE__*/css("position:absolute;", logicalSizeCSS(arrowSize), ";;label:euiPopoverArrowWrapper;"),
+    euiPopoverArrowWrapper: /*#__PURE__*/css("position:absolute;z-index:1;", logicalSizeCSS(arrowSize), ";;label:euiPopoverArrowWrapper;"),
     // Base
-    euiPopoverArrow: /*#__PURE__*/css(arrowStyles._arrowStyles, " background-color:var(--euiPopoverBackgroundColor);", hasBorder ? "border: ".concat(euiTheme.border.thin) : '', ";;label:euiPopoverArrow;")
+    euiPopoverArrow: /*#__PURE__*/css(arrowStyles._arrowStyles, " background-color:var(--euiPopoverBackgroundColor);", hasBorder ? "border: ".concat(euiTheme.border.thin, ";") : '', ";;label:euiPopoverArrow;")
   }, arrowStyles.positions);
 };

package/es/components/popover/popover_footer.styles.js

@@ -9,10 +9,11 @@
 import { css } from '@emotion/react';
 import { euiFontSize, euiPaddingSize, logicalCSS, logicalShorthandCSS } from '../../global_styling';
 export var euiPopoverFooterStyles = function euiPopoverFooterStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   return {
     // Base
-    euiPopoverFooter: /*#__PURE__*/css(euiFontSize(euiThemeContext, 's'), " ", logicalCSS('border-top', "".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.components.popoverFooterBorderColor)), ";;label:euiPopoverFooter;"),
+    euiPopoverFooter: /*#__PURE__*/css(euiFontSize(euiThemeContext, 's'), " ", logicalCSS('border-top', "".concat(euiTheme.border.width.thin, " solid ").concat(highContrastMode ? euiTheme.border.color : euiTheme.components.popoverFooterBorderColor)), ";;label:euiPopoverFooter;"),
     // If the popover's containing panel has padding applied,
     // ensure the title expands to cover that padding via negative margins
     panelPaddingSizes: {

package/es/components/popover/popover_panel/_popover_panel.styles.js

@@ -10,6 +10,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 import { css } from '@emotion/react';
 import { euiShadow, euiShadowFlat, euiShadowMedium } from '@elastic/eui-theme-common';
 import { euiCanAnimate, logicalCSS, mathWithUnits } from '../../../global_styling';
+import { euiPanelBorderStyles } from '../../panel/panel.styles';
 export var openAnimationTiming = 'slow';
 
 /**
@@ -28,17 +29,17 @@ var _ref = process.env.NODE_ENV === "production" ? {
 };
 export var euiPopoverPanelStyles = function euiPopoverPanelStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
-    colorMode = euiThemeContext.colorMode;
+    highContrastMode = euiThemeContext.highContrastMode;
   var translateDistance = euiTheme.size.s;
   var animationSpeed = euiTheme.animation[openAnimationTiming];
   var opacityTransition = "opacity ".concat(euiTheme.animation.bounce, " ").concat(animationSpeed);
   var transformTransition = "transform ".concat(euiTheme.animation.bounce, " ").concat(mathWithUnits(animationSpeed, function (x) {
     return x + 100;
   }));
-  var hasVisibleBorder = colorMode === 'DARK';
+  var hasShadow = !highContrastMode;
   return {
     // Base
-    euiPopover__panel: /*#__PURE__*/css("position:absolute;", logicalCSS('min-width', "".concat(euiTheme.base * 7, "px")), logicalCSS('max-width', "calc(100vw - ".concat(euiTheme.size.xl, ")")), "backface-visibility:hidden;pointer-events:none;opacity:0;background-color:var(--euiPopoverBackgroundColor);border:", euiTheme.border.width.thin, " solid ", hasVisibleBorder ? euiTheme.border.color : 'transparent', ";", euiCanAnimate, "{transition:", opacityTransition, ",", transformTransition, ";}&:focus{outline-offset:0;};label:euiPopover__panel;"),
+    euiPopover__panel: /*#__PURE__*/css("position:absolute;", logicalCSS('min-width', "".concat(euiTheme.base * 7, "px")), logicalCSS('max-width', "calc(100vw - ".concat(euiTheme.size.xl, ")")), "backface-visibility:hidden;pointer-events:none;opacity:0;background-color:var(--euiPopoverBackgroundColor);", euiCanAnimate, "{transition:", opacityTransition, ",", transformTransition, ";}", euiPanelBorderStyles(euiThemeContext), " &:focus{outline-offset:0;};label:euiPopover__panel;"),
     isOpen: _ref,
     /* 4 */
     light: /*#__PURE__*/css("--euiPopoverBackgroundColor:", euiTheme.components.popoverPanelBackground, ";;label:light;"),
@@ -46,9 +47,9 @@ export var euiPopoverPanelStyles = function euiPopoverPanelStyles(euiThemeContex
     // Regular popover with an arrow, a transform animation/transition, and a
     // drop shadow via `filter` (which automatically handles the arrow)
     hasTransform: {
-      hasTransform: /*#__PURE__*/css("transform:translateY(0) translateX(0) translateZ(0);", euiShadowMedium(euiThemeContext, {
+      hasTransform: /*#__PURE__*/css("transform:translateY(0) translateX(0) translateZ(0);", hasShadow ? euiShadowMedium(euiThemeContext, {
         property: 'filter'
-      }), " ", euiCanAnimate, "{transition:", opacityTransition, ",", transformTransition, ";};label:hasTransform;"),
+      }) : '', " ", euiCanAnimate, "{transition:", opacityTransition, ",", transformTransition, ";};label:hasTransform;"),
       // Positions
       top: /*#__PURE__*/css("transform:translateY(", translateDistance, ") translateZ(0);;label:top;"),
       bottom: /*#__PURE__*/css("transform:translateY(-", translateDistance, ") translateZ(0);;label:bottom;"),
@@ -58,8 +59,8 @@ export var euiPopoverPanelStyles = function euiPopoverPanelStyles(euiThemeContex
     // No arrow, transform, or filters
     isAttached: {
       isAttached: /*#__PURE__*/css(euiCanAnimate, "{transition:", opacityTransition, ";};label:isAttached;"),
-      top: /*#__PURE__*/css(euiShadowFlat(euiThemeContext), ";;label:top;"),
-      bottom: /*#__PURE__*/css(euiShadow(euiThemeContext, 'm'), ";;label:bottom;"),
+      top: /*#__PURE__*/css(hasShadow ? euiShadowFlat(euiThemeContext) : '', ";;label:top;"),
+      bottom: /*#__PURE__*/css(hasShadow ? euiShadow(euiThemeContext, 'm') : '', ";;label:bottom;"),
       get left() {
         return this.bottom;
       },

package/es/components/progress/progress.js

@@ -10,7 +10,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
  * Side Public License, v 1.
  */
 
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
 import { EuiI18n } from '../i18n';
@@ -74,7 +74,7 @@ export var EuiProgress = function EuiProgress(_ref) {
   // See https://css-tricks.com/html5-progress-element/
 
   if (determinate) {
-    return ___EmotionJSX(Fragment, null, label || valueText ? ___EmotionJSX("div", {
+    return ___EmotionJSX(React.Fragment, null, label || valueText ? ___EmotionJSX("div", {
       css: dataCssStyles,
       className: "euiProgress__data"
     }, label && ___EmotionJSX(EuiInnerText, null, function (ref, innerText) {

package/es/components/progress/progress.styles.js

@@ -11,6 +11,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css, keyframes } from '@emotion/react';
 import { logicalCSS, logicalTextAlignCSS, euiCanAnimate, euiCantAnimate, euiFontSize, euiTextTruncate } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 import { makeHighContrastColor } from '../../services';
 import { euiText } from '../text/text.styles';
 
@@ -28,9 +29,10 @@ var indeterminateProgressValue = function indeterminateProgressValue(cssProperti
  * Color utilities
  */
 
-var nativeVsIndeterminateColor = function nativeVsIndeterminateColor(color, isNative) {
+var nativeVsIndeterminateColor = function nativeVsIndeterminateColor(color, isNative, highContrastMode) {
   var selectors = isNative ? crossBrowserProgressValue : indeterminateProgressValue;
-  return selectors("background-color: ".concat(color, ";"));
+  return "\n    ".concat(selectors("background-color: ".concat(color, ";")), "\n    ").concat(isNative && highContrastMode === 'preferred' // see highContrastModeStyles.preferred comment below
+  ? "border-color: ".concat(color, ";") : '', "\n  ").trim();
 };
 
 /**
@@ -56,46 +58,78 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   styles: "position:relative;label:static;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-export var euiProgressStyles = function euiProgressStyles(_ref3, isNative) {
-  var euiTheme = _ref3.euiTheme;
+export var euiProgressStyles = function euiProgressStyles(euiThemeContext, isNative) {
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
+  var backgroundColor = highContrastMode ? euiTheme.colors.emptyShade : euiTheme.colors.lightShade;
   return {
-    euiProgress: /*#__PURE__*/css("overflow:hidden;background-color:", euiTheme.colors.lightShade, ";;label:euiProgress;"),
+    euiProgress: /*#__PURE__*/css("overflow:hidden;background-color:", backgroundColor, ";;label:euiProgress;"),
     // https://css-tricks.com/html5-progress-element/
     // Good resource if you need to work in here. There's some gotchas with
     // dealing with cross-browser progress bars.
-    native: /*#__PURE__*/css("display:block;", logicalCSS('width', '100%'), " appearance:none;border:none;border-radius:", euiTheme.size.s, ";&::-webkit-progress-bar{background-color:", euiTheme.colors.lightShade, ";}", euiCanAnimate, "{/* Note: FF/Mozilla doesn't actually support animating the native progress bar\n        @see https://bugzilla.mozilla.org/show_bug.cgi?id=662351 */", crossBrowserProgressValue("transition: width ".concat(euiTheme.animation.normal, " linear")), ";};label:native;"),
+    native: /*#__PURE__*/css("display:block;", logicalCSS('width', '100%'), " &::-webkit-progress-bar{background-color:", backgroundColor, ";}", highContrastModeStyles(euiThemeContext, {
+      none: "\n          appearance: none;\n          border: none;\n          border-radius: ".concat(euiTheme.size.s, ";\n        "),
+      // For some reason we absolutely cannot set any border CSS in Windows high contrast
+      // or the native element stops rendering. However, we do want the extra border for
+      // MacOS high contrast, so #ternarylife
+      preferred: highContrastMode !== 'forced' ? "\n              border: ".concat(euiTheme.border.thin, ";\n              border-radius: ").concat(euiTheme.size.s, ";\n              ").concat(logicalCSS('min-height', euiTheme.size.s), "\n            ") :
+      // Increase small sizes, otherwise the border is hard to distinguish,
+      // However, native element heights seem to render differently,
+      // so we need to tweak the min-height accordingly
+      logicalCSS('min-height', euiTheme.size.m),
+      // Also doesn't render without this ¯\_(ツ)_/¯
+      forced: 'background-color: revert;'
+    }), " ", euiCanAnimate, "{/* Note: FF/Mozilla doesn't actually support animating the native progress bar\n          @see https://bugzilla.mozilla.org/show_bug.cgi?id=662351 */", crossBrowserProgressValue("transition: width ".concat(euiTheme.animation.normal, " linear")), ";};label:native;"),
     // An indeterminate bar has an unreliable end time. Because of a Firefox animation issue,
     // we apply this style to a <div> instead of a <progress> element.
     // See https://css-tricks.com/html5-progress-element/ for more info.
-    indeterminate: /*#__PURE__*/css("&::before{position:absolute;content:'';", logicalCSS('width', '100%'), " ", logicalCSS('top', 0), " ", logicalCSS('bottom', 0), " ", logicalCSS('left', 0), " transform:scaleX(0) translateX(0%);animation:", euiIndeterminateAnimation, " 1s ", euiTheme.animation.resistance, " infinite;", euiCantAnimate, "{animation-duration:2s;animation-timing-function:linear;}};label:indeterminate;"),
+    indeterminate: /*#__PURE__*/css("&::before{position:absolute;content:'';", logicalCSS('width', '100%'), " ", logicalCSS('top', 0), " ", logicalCSS('bottom', 0), " ", logicalCSS('left', 0), " transform:scaleX(0) translateX(0%);animation:", euiIndeterminateAnimation, " 1s ", euiTheme.animation.resistance, " infinite;", highContrastModeStyles(euiThemeContext, {
+      // Windows high contrast themes ignore backgrounds, so use a border instead
+      forced: "\n            ".concat(logicalCSS('border-top-style', 'solid'), "\n            ").concat(logicalCSS('border-top-color', 'transparent'), "\n          ")
+    }), ";", euiCantAnimate, "{animation-duration:2s;animation-timing-function:linear;}};label:indeterminate;"),
     // Sizes
-    xs: /*#__PURE__*/css(logicalCSS('height', euiTheme.size.xxs), ";;label:xs;"),
-    s: /*#__PURE__*/css(logicalCSS('height', euiTheme.size.xs), ";;label:s;"),
-    m: /*#__PURE__*/css(logicalCSS('height', euiTheme.size.s), ";;label:m;"),
-    l: /*#__PURE__*/css(logicalCSS('height', euiTheme.size.m), ";;label:l;"),
+    _sharedSizeCSS: function _sharedSizeCSS(size) {
+      return "\n      ".concat(logicalCSS('height', size), "\n      ").concat(highContrastModeStyles(euiThemeContext, {
+        forced: "\n          &::before {\n            ".concat(logicalCSS('border-top-width', size), "\n          }")
+      }), "\n    ");
+    },
+    get xs() {
+      return /*#__PURE__*/css(
+      // Increased visibility/size for high contrast modes
+      this._sharedSizeCSS(highContrastMode ? euiTheme.size.xs : euiTheme.size.xxs), ";label:xs;");
+    },
+    get s() {
+      return /*#__PURE__*/css(this._sharedSizeCSS(euiTheme.size.xs), ";label:s;");
+    },
+    get m() {
+      return /*#__PURE__*/css(this._sharedSizeCSS(euiTheme.size.s), ";label:m;");
+    },
+    get l() {
+      return /*#__PURE__*/css(this._sharedSizeCSS(euiTheme.size.m), ";label:l;");
+    },
     // Positioning
     fixed: /*#__PURE__*/css("position:fixed;z-index:", Number(euiTheme.levels.header) + 1, ";", nonStaticPositioning(isNative), ";;label:fixed;"),
-    absolute: /*#__PURE__*/css("position:absolute;", nonStaticPositioning(isNative), ";;label:absolute;"),
+    absolute: /*#__PURE__*/css("position:absolute;", nonStaticPositioning(isNative), " ", logicalCSS('border-top-left-radius', 'inherit'), " ", logicalCSS('border-top-right-radius', 'inherit'), ";;label:absolute;"),
     static: _ref2,
     // Colors
-    primary: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.primary, isNative), ";;label:primary;"),
-    success: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.success, isNative), ";;label:success;"),
-    warning: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.warning, isNative), ";;label:warning;"),
-    danger: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.danger, isNative), ";;label:danger;"),
-    subdued: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.subduedText, isNative), ";;label:subdued;"),
-    accent: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.accent, isNative), ";;label:accent;"),
-    accentSecondary: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.accentSecondary, isNative), ";;label:accentSecondary;"),
-    vis0: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis0, isNative), ";;label:vis0;"),
-    vis1: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis1, isNative), ";;label:vis1;"),
-    vis2: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis2, isNative), ";;label:vis2;"),
-    vis3: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis3, isNative), ";;label:vis3;"),
-    vis4: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis4, isNative), ";;label:vis4;"),
-    vis5: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis5, isNative), ";;label:vis5;"),
-    vis6: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis6, isNative), ";;label:vis6;"),
-    vis7: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis7, isNative), ";;label:vis7;"),
-    vis8: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis8, isNative), ";;label:vis8;"),
-    vis9: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis9, isNative), ";;label:vis9;"),
-    customColor: /*#__PURE__*/css(nativeVsIndeterminateColor('currentColor', isNative), ";;label:customColor;")
+    primary: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.primary, isNative, highContrastMode), ";;label:primary;"),
+    success: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.success, isNative, highContrastMode), ";;label:success;"),
+    warning: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.warning, isNative, highContrastMode), ";;label:warning;"),
+    danger: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.danger, isNative, highContrastMode), ";;label:danger;"),
+    subdued: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.textSubdued, isNative, highContrastMode), ";;label:subdued;"),
+    accent: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.accent, isNative, highContrastMode), ";;label:accent;"),
+    accentSecondary: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.accentSecondary, isNative, highContrastMode), ";;label:accentSecondary;"),
+    vis0: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis0, isNative, highContrastMode), ";;label:vis0;"),
+    vis1: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis1, isNative, highContrastMode), ";;label:vis1;"),
+    vis2: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis2, isNative, highContrastMode), ";;label:vis2;"),
+    vis3: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis3, isNative, highContrastMode), ";;label:vis3;"),
+    vis4: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis4, isNative, highContrastMode), ";;label:vis4;"),
+    vis5: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis5, isNative, highContrastMode), ";;label:vis5;"),
+    vis6: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis6, isNative, highContrastMode), ";;label:vis6;"),
+    vis7: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis7, isNative, highContrastMode), ";;label:vis7;"),
+    vis8: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis8, isNative, highContrastMode), ";;label:vis8;"),
+    vis9: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis9, isNative, highContrastMode), ";;label:vis9;"),
+    customColor: /*#__PURE__*/css(nativeVsIndeterminateColor('currentColor', isNative, highContrastMode), ";;label:customColor;")
   };
 };
 
@@ -120,8 +154,8 @@ var _ref = process.env.NODE_ENV === "production" ? {
   styles: "color:currentColor;label:customColor;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-export var euiProgressValueTextStyles = function euiProgressValueTextStyles(_ref4) {
-  var euiTheme = _ref4.euiTheme;
+export var euiProgressValueTextStyles = function euiProgressValueTextStyles(_ref3) {
+  var euiTheme = _ref3.euiTheme;
   return {
     euiProgress__valueText: /*#__PURE__*/css("flex-grow:1;flex-shrink:0;font-feature-settings:'tnum' 1;", logicalTextAlignCSS('right'), " ", euiTextTruncate(), ";;label:euiProgress__valueText;"),
     // Colors

package/es/components/provider/component_defaults/component_defaults.js

@@ -76,4 +76,40 @@ export var usePropsWithComponentDefaults = function usePropsWithComponentDefault
   return useMemo(function () {
     return _objectSpread(_objectSpread({}, componentDefaults), props);
   }, [componentDefaults, props]);
+};
+
+/*
+ * Utilities
+ */
+
+/**
+ * Used only to generate prop type definitions (via `@elastic/eui-docgen`) to document `EuiComponentDefaults` in a props table.
+ *
+ * @see https://github.com/elastic/eui/issues/8388
+ */
+export var EuiProviderComponentDefaultsProps = function EuiProviderComponentDefaultsProps() {
+  return ___EmotionJSX(React.Fragment, null);
+};
+EuiProviderComponentDefaultsProps.propTypes = {
+  /**
+     * Provide a global configuration for EuiPortal's default insertion position.
+     */
+  EuiPortal: PropTypes.any,
+  /**
+     * Provide a global configuration for EuiFocusTrap's `gapMode` and `crossFrame` props
+     */
+  EuiFocusTrap: PropTypes.any,
+  /**
+     * Provide global settings for EuiTablePagination's props that affect page size
+     * / the rows per page selection.
+     *
+     * These defaults will be inherited all table and grid components that utilize EuiTablePagination.
+     */
+  EuiTablePagination: PropTypes.any,
+  /**
+     * Provide a global configuration for EuiTable's `responsiveBreakpoint` prop. Defaults to `'s'`.
+     *
+     * Defaults will be inherited by all `EuiBasicTable`s and `EuiInMemoryTable`s.
+     */
+  EuiTable: PropTypes.any
 };