@elastic/eui 64.0.0 → 64.0.1

package/es/components/basic_table/collapsed_item_actions.js

@@ -94,8 +94,7 @@ export var CollapsedItemActions = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "registerPopoverDiv", function (popoverDiv) {
       if (!_this.popoverDiv) {
         _this.popoverDiv = popoverDiv;
-
-        _this.popoverDiv.addEventListener('focusout', _this.onPopoverBlur);
+        _this.popoverDiv && _this.popoverDiv.addEventListener('focusout', _this.onPopoverBlur);
       }
     });
 

package/es/components/breadcrumbs/breadcrumb.styles.js

@@ -50,8 +50,8 @@ export var euiBreadcrumbContentStyles = function euiBreadcrumbContentStyles(euiT
     isTruncated: /*#__PURE__*/css(euiTextTruncate("".concat(parseFloat(euiTheme.size.base) * 10, "px")), ";;label:isTruncated;"),
     isTruncatedLast: /*#__PURE__*/css(euiTextTruncate('none'), ";;label:isTruncatedLast;"),
     // Types
-    page: /*#__PURE__*/css("&:is(a):focus{", euiFocusRing(euiTheme, 'inset'), ";}&:is(button):focus{", euiFocusRing(euiTheme, 'center'), ";};label:page;"),
-    application: /*#__PURE__*/css(euiFontSize(euiThemeContext, 'xs'), ";background-color:", transparentize(euiTheme.colors.darkestShade, 0.2), ";clip-path:polygon(\n        0 0,\n        calc(100% - ", euiTheme.size.s, ") 0,\n        100% 50%,\n        calc(100% - ", euiTheme.size.s, ") 100%,\n        0 100%,\n        ", euiTheme.size.s, " 50%\n      );color:", euiTheme.colors.darkestShade, ";line-height:", euiTheme.size.base, ";", logicalCSS('padding-vertical', euiTheme.size.xs), " ", logicalCSS('padding-horizontal', euiTheme.size.base), " &:is(a),&:is(button){background-color:", transparentize(euiTheme.colors.primary, 0.2), ";color:", euiTheme.colors.link, ";:focus{", euiFocusRing(euiTheme, 'inset'), ";:focus-visible{border-radius:", euiTheme.border.radius.medium, ";clip-path:none;}}};label:application;"),
+    page: /*#__PURE__*/css("&:is(a):focus{", euiFocusRing(euiThemeContext, 'inset'), ";}&:is(button):focus{", euiFocusRing(euiThemeContext, 'center'), ";};label:page;"),
+    application: /*#__PURE__*/css(euiFontSize(euiThemeContext, 'xs'), ";background-color:", transparentize(euiTheme.colors.darkestShade, 0.2), ";clip-path:polygon(\n        0 0,\n        calc(100% - ", euiTheme.size.s, ") 0,\n        100% 50%,\n        calc(100% - ", euiTheme.size.s, ") 100%,\n        0 100%,\n        ", euiTheme.size.s, " 50%\n      );color:", euiTheme.colors.darkestShade, ";line-height:", euiTheme.size.base, ";", logicalCSS('padding-vertical', euiTheme.size.xs), " ", logicalCSS('padding-horizontal', euiTheme.size.base), " &:is(a),&:is(button){background-color:", transparentize(euiTheme.colors.primary, 0.2), ";color:", euiTheme.colors.link, ";:focus{", euiFocusRing(euiThemeContext, 'inset'), ";:focus-visible{border-radius:", euiTheme.border.radius.medium, ";clip-path:none;}}};label:application;"),
     applicationStyles: {
       onlyChild: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, ";clip-path:none;", logicalCSS('padding-horizontal', euiTheme.size.m), ",;;label:onlyChild;"),
       firstChild: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, " 0 0 ", euiTheme.border.radius.medium, ";clip-path:polygon(\n          0 0,\n          calc(100% - ", euiTheme.size.s, ") 0,\n          100% 50%,\n          calc(100% - ", euiTheme.size.s, ") 100%,\n          0 100%\n        );", logicalCSS('padding-left', euiTheme.size.m), ",;;label:firstChild;"),

package/es/components/image/image_button.styles.js

@@ -14,7 +14,7 @@ export var euiImageButtonStyles = function euiImageButtonStyles(euiThemeContext)
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    euiImageButton: /*#__PURE__*/css("position:relative;cursor:pointer;text-align:match-parent;line-height:0;&::before{opacity:0;content:'';pointer-events:none;position:absolute;top:0;bottom:0;left:0;right:0;", euiCanAnimate, "{transition:opacity ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";}}&:hover,&:focus{&::before{opacity:1;}[class*='euiImageButton__icon']{opacity:1;}}&:focus{", euiFocusRing(euiTheme, 'outset'), ";};label:euiImageButton;"),
+    euiImageButton: /*#__PURE__*/css("position:relative;cursor:pointer;text-align:match-parent;line-height:0;&::before{opacity:0;content:'';pointer-events:none;position:absolute;top:0;bottom:0;left:0;right:0;", euiCanAnimate, "{transition:opacity ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";}}&:hover,&:focus{&::before{opacity:1;}[class*='euiImageButton__icon']{opacity:1;}}&:focus{", euiFocusRing(euiThemeContext, 'outset'), ";};label:euiImageButton;"),
     fullWidth: /*#__PURE__*/css(logicalCSS('width', '100%'), ";;label:fullWidth;"),
     shadowHover: /*#__PURE__*/css("&::before{", euiShadow(euiThemeContext, 's'), ";};label:shadowHover;"),
     hasShadowHover: /*#__PURE__*/css("&::before{", euiShadow(euiThemeContext, 'm'), ";};label:hasShadowHover;")

package/es/components/link/link.styles.js

@@ -20,8 +20,9 @@ export var euiLinkHoverCSS = function euiLinkHoverCSS() {
 export var euiLinkFocusCSS = function euiLinkFocusCSS(euiTheme) {
   return "\n    text-decoration: underline;\n    text-decoration-thickness: ".concat(euiTheme.border.width.thick, " !important;\n  ");
 };
-export var euiLinkCSS = function euiLinkCSS(euiTheme) {
-  return "\n    font-weight: ".concat(euiTheme.font.weight.medium, ";\n    text-align: left;\n\n    &:hover {\n      ").concat(euiLinkHoverCSS(), "\n    }\n\n    &:focus {\n      ").concat(euiFocusRing(euiTheme, 'outset'), "\n      ").concat(euiLinkFocusCSS(euiTheme), "\n    }\n  ");
+export var euiLinkCSS = function euiLinkCSS(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return "\n    font-weight: ".concat(euiTheme.font.weight.medium, ";\n    text-align: left;\n\n    &:hover {\n      ").concat(euiLinkHoverCSS(), "\n    }\n\n    &:focus {\n      ").concat(euiFocusRing(euiThemeContext, 'outset'), "\n      ").concat(euiLinkFocusCSS(euiTheme), "\n    }\n  ");
 };
 
 var _ref = process.env.NODE_ENV === "production" ? {
@@ -33,10 +34,10 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-export var euiLinkStyles = function euiLinkStyles(_ref2) {
-  var euiTheme = _ref2.euiTheme;
+export var euiLinkStyles = function euiLinkStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiLink: /*#__PURE__*/css(euiLinkCSS(euiTheme), " user-select:text;&[target='_blank']{position:relative;};label:euiLink;"),
+    euiLink: /*#__PURE__*/css(euiLinkCSS(euiThemeContext), " user-select:text;&[target='_blank']{position:relative;};label:euiLink;"),
     disabled: _ref,
     // Color styles
     primary: /*#__PURE__*/css(_colorCSS(euiTheme.colors.primaryText), ";label:primary;"),

package/es/components/text/text.styles.js

@@ -58,7 +58,7 @@ var euiScaleText = function euiScaleText(euiThemeContext, options) {
 export var euiTextStyles = function euiTextStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiText: /*#__PURE__*/css(euiText(euiTheme, true), ";clear:both;a:not([class]){", euiLinkCSS(euiTheme), ";}img{display:block;", logicalCSS('max-width', '100%'), ";}ul{list-style:disc;}ol{list-style:decimal;}blockquote:not(.euiMarkdownFormat__blockquote){position:relative;", logicalTextAlignCSS('center'), " ", logicalCSS('margin-horizontal', 'auto'), " font-family:", euiTheme.font.familySerif, ";font-style:italic;letter-spacing:normal;p:last-child{", logicalCSS('margin-bottom', '0'), ";}&:before,&:after{position:absolute;content:'';", logicalCSS('height', euiTheme.border.width.thick), " ", logicalCSS('width', '50%'), " ", logicalCSS('left', '25%'), " ", logicalCSS('right', '25%'), " background:", euiTheme.colors.darkShade, ";}&:before{", logicalCSS('top', '0'), ";}&:after{", logicalCSS('bottom', '0'), ";}}h1{", euiTitle(euiThemeContext, 'l'), ";}h2{", euiTitle(euiThemeContext, 'm'), ";}h3{", euiTitle(euiThemeContext, 's'), ";}h4,dt{", euiTitle(euiThemeContext, 'xs'), ";}h5{", euiTitle(euiThemeContext, 'xxs'), ";}h6{", euiTitle(euiThemeContext, 'xxxs'), " text-transform:uppercase;}h1,h2,h3,h4,h5,h6,dt{color:inherit;}pre:not(.euiCodeBlock__pre){white-space:pre-wrap;background:", euiBackgroundColor(euiThemeContext, 'subdued'), ";color:", euiTheme.colors.text, ";}pre:not(.euiCodeBlock__pre),pre:not(.euiCodeBlock__pre) code{display:block;}>:last-child{", logicalCSS('margin-bottom', '0 !important'), ";}kbd{position:relative;display:inline-block;", logicalCSS('padding-vertical', euiTheme.size.xxs), " ", logicalCSS('padding-horizontal', euiTheme.size.xs), " line-height:1;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.text, ";border-radius:calc(", euiTheme.border.radius.small, " / 2);};label:euiText;"),
+    euiText: /*#__PURE__*/css(euiText(euiTheme, true), ";clear:both;a:not([class]){", euiLinkCSS(euiThemeContext), ";}img{display:block;", logicalCSS('max-width', '100%'), ";}ul{list-style:disc;}ol{list-style:decimal;}blockquote:not(.euiMarkdownFormat__blockquote){position:relative;", logicalTextAlignCSS('center'), " ", logicalCSS('margin-horizontal', 'auto'), " font-family:", euiTheme.font.familySerif, ";font-style:italic;letter-spacing:normal;p:last-child{", logicalCSS('margin-bottom', '0'), ";}&:before,&:after{position:absolute;content:'';", logicalCSS('height', euiTheme.border.width.thick), " ", logicalCSS('width', '50%'), " ", logicalCSS('left', '25%'), " ", logicalCSS('right', '25%'), " background:", euiTheme.colors.darkShade, ";}&:before{", logicalCSS('top', '0'), ";}&:after{", logicalCSS('bottom', '0'), ";}}h1{", euiTitle(euiThemeContext, 'l'), ";}h2{", euiTitle(euiThemeContext, 'm'), ";}h3{", euiTitle(euiThemeContext, 's'), ";}h4,dt{", euiTitle(euiThemeContext, 'xs'), ";}h5{", euiTitle(euiThemeContext, 'xxs'), ";}h6{", euiTitle(euiThemeContext, 'xxxs'), " text-transform:uppercase;}h1,h2,h3,h4,h5,h6,dt{color:inherit;}pre:not(.euiCodeBlock__pre){white-space:pre-wrap;background:", euiBackgroundColor(euiThemeContext, 'subdued'), ";color:", euiTheme.colors.text, ";}pre:not(.euiCodeBlock__pre),pre:not(.euiCodeBlock__pre) code{display:block;}>:last-child{", logicalCSS('margin-bottom', '0 !important'), ";}kbd{position:relative;display:inline-block;", logicalCSS('padding-vertical', euiTheme.size.xxs), " ", logicalCSS('padding-horizontal', euiTheme.size.xs), " line-height:1;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.text, ";border-radius:calc(", euiTheme.border.radius.small, " / 2);};label:euiText;"),
     constrainedWidth: /*#__PURE__*/css(logicalCSS('max-width', euiTextConstrainedMaxWidth), ";;label:constrainedWidth;"),
     // Sizes
     m: /*#__PURE__*/css(euiScaleText(euiThemeContext, {

package/es/components/toast/global_toast_list.styles.js

@@ -10,7 +10,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
  * Side Public License, v 1.
  */
 import { css, keyframes } from '@emotion/react';
-import { euiBreakpoint, euiScrollBarStyles, logicalCSS, logicalSizeCSS } from '../../global_styling';
+import { euiBreakpoint, euiScrollBarStyles, logicalCSS, logicalCSSWithFallback, logicalSizeCSS } from '../../global_styling';
 export var euiGlobalToastListStyles = function euiGlobalToastListStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   var euiToastWidth = euiTheme.base * 20;
@@ -20,7 +20,7 @@ export var euiGlobalToastListStyles = function euiGlobalToastListStyles(euiTheme
      * 2. Allow some padding for shadow
      */
     // Base
-    euiGlobalToastList: /*#__PURE__*/css(euiScrollBarStyles(euiThemeContext), " display:flex;flex-direction:column;align-items:stretch;position:fixed;z-index:", euiTheme.levels.toast, ";", logicalCSS('bottom', 0), ";", logicalCSS('width', "".concat(euiToastWidth + euiTheme.base * 5, "px")), ";", logicalCSS('max-height', '100vh'), ";overflow-y:auto;", logicalCSS('overflow-y', 'auto'), ";scrollbar-width:none;&::-webkit-scrollbar{", logicalSizeCSS(0, 0), ";}&:not(:empty){", logicalCSS('padding-left', euiTheme.size.base), ";", logicalCSS('padding-right', euiTheme.size.base), ";", logicalCSS('padding-vertical', euiTheme.size.base), ";}", euiBreakpoint(euiThemeContext, ['xs', 's']), "{&:not(:empty){", logicalCSS('left', 0), ";", logicalCSS('width', '100%'), ";}};label:euiGlobalToastList;"),
+    euiGlobalToastList: /*#__PURE__*/css(euiScrollBarStyles(euiThemeContext), " display:flex;flex-direction:column;align-items:stretch;position:fixed;z-index:", euiTheme.levels.toast, ";", logicalCSS('bottom', 0), ";", logicalCSS('width', "".concat(euiToastWidth + euiTheme.base * 5, "px")), ";", logicalCSS('max-height', '100vh'), ";", logicalCSSWithFallback('overflow-y', 'auto'), ";scrollbar-width:none;&::-webkit-scrollbar{", logicalSizeCSS(0, 0), ";}&:not(:empty){", logicalCSS('padding-left', euiTheme.size.base), ";", logicalCSS('padding-right', euiTheme.size.base), ";", logicalCSS('padding-vertical', euiTheme.size.base), ";}", euiBreakpoint(euiThemeContext, ['xs', 's']), "{&:not(:empty){", logicalCSS('left', 0), ";", logicalCSS('width', '100%'), ";}};label:euiGlobalToastList;"),
     // Variants
     right: /*#__PURE__*/css("&:not(:empty){", logicalCSS('right', 0), ";", logicalCSS('padding-left', "".concat(euiTheme.base * 4, "px")), ";}", euiBreakpoint(euiThemeContext, ['xs', 's']), "{&:not(:empty){", logicalCSS('padding-left', euiTheme.size.base), ";}};label:right;"),
     left: /*#__PURE__*/css("&:not(:empty){", logicalCSS('left', 0), ";", logicalCSS('padding-right', "".concat(euiTheme.base * 4, "px")), ";}", euiBreakpoint(euiThemeContext, ['xs', 's']), "{&:not(:empty){", logicalCSS('padding-right', euiTheme.size.base), ";}};label:left;")

package/es/global_styling/functions/logicals.js

@@ -62,8 +62,8 @@ var logicalSize = {
   'min-width': 'min-inline-size'
 };
 var logicalOverflow = {
-  'overflow-x': 'overflow-block',
-  'overflow-y': 'overflow-inline'
+  'overflow-x': 'overflow-inline',
+  'overflow-y': 'overflow-block'
 };
 var logicalBorders = {
   'border-horizontal': 'border-inline',
@@ -107,6 +107,20 @@ export var LOGICAL_PROPERTIES = keysOf(logicals);
 export var logicalCSS = function logicalCSS(property, value) {
   return "".concat(logicals[property], ": ").concat(value, ";");
 };
+/**
+ * Some logical properties are not yet fully supported by all browsers.
+ * For those cases, we should use the old property as a fallback for
+ * browsers missing support, while allowing supporting browsers to use
+ * the logical properties.
+ *
+ * Examples:
+ * https://caniuse.com/?search=overflow-block
+ * https://caniuse.com/mdn-css_properties_float_flow_relative_values
+ */
+
+export var logicalCSSWithFallback = function logicalCSSWithFallback(property, value) {
+  return "\n  ".concat(property, ": ").concat(value, ";\n  ").concat(logicalCSS(property, value), "\n");
+};
 /**
  *
  * @param property A string that is a valid CSS logical property

package/es/global_styling/mixins/_helpers.js

@@ -7,6 +7,7 @@
  */
 import { useEuiTheme } from '../../services/theme';
 import { transparentize } from '../../services/color';
+import { logicalCSS, logicalCSSWithFallback } from '../functions';
 /**
  * Set scroll bar appearance on Chrome (and firefox).
  * All parameters are optional and default to specific global settings.
@@ -34,7 +35,7 @@ export var euiScrollBarStyles = function euiScrollBarStyles(_ref) {
   // so it's being added to this mixin for allowing support wherever custom scrollbars are
 
   var firefoxSupport = "scrollbar-color: ".concat(thumbColor, " ").concat(trackColor, ";");
-  return "scrollbar-width: ".concat(width, ";\n\n    &::-webkit-scrollbar {\n      width: ").concat(scrollBarSize, ";\n      height: ").concat(scrollBarSize, ";\n    }\n\n    &::-webkit-scrollbar-thumb {\n      background-color: ").concat(thumbColor, ";\n      background-clip: content-box;\n      border-radius: ").concat(scrollBarSize, ";\n      border: ").concat(scrollBarCorner, " solid ").concat(trackColor, ";\n    }\n\n    &::-webkit-scrollbar-corner,\n    &::-webkit-scrollbar-track {\n      background-color: ").concat(trackColor, ";\n    }\n\n    ").concat(firefoxSupport, "\n  ");
+  return "scrollbar-width: ".concat(width, ";\n\n    &::-webkit-scrollbar {\n      ").concat(logicalCSS('width', scrollBarSize), "\n      ").concat(logicalCSS('height', scrollBarSize), "\n    }\n\n    &::-webkit-scrollbar-thumb {\n      background-color: ").concat(thumbColor, ";\n      background-clip: content-box;\n      border-radius: ").concat(scrollBarSize, ";\n      border: ").concat(scrollBarCorner, " solid ").concat(trackColor, ";\n    }\n\n    &::-webkit-scrollbar-corner,\n    &::-webkit-scrollbar-track {\n      background-color: ").concat(trackColor, ";\n    }\n\n    ").concat(firefoxSupport, "\n  ");
 };
 export var useEuiScrollBar = function useEuiScrollBar(options) {
   var euiTheme = useEuiTheme();
@@ -82,12 +83,11 @@ var euiOverflowShadowStyles = function euiOverflowShadowStyles(_ref3) {
  */
 
 
-// TODO: How do we use Emotion to output the CSS class utilities instead?
 export var euiYScroll = function euiYScroll(euiTheme) {
   var _ref5 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
       height = _ref5.height;
 
-  return "\n  ".concat(euiScrollBarStyles(euiTheme), "\n  height: ").concat(height || '100%', ";\n  overflow-y: auto;\n  overflow-x: hidden;\n  &:focus {\n    outline: none; /* 1 */\n  }\n");
+  return "\n  ".concat(euiScrollBarStyles(euiTheme), "\n  ").concat(logicalCSS('height', height || '100%'), "\n  ").concat(logicalCSSWithFallback('overflow-y', 'auto'), "\n  ").concat(logicalCSSWithFallback('overflow-x', 'hidden'), "\n  &:focus {\n    outline: none; /* 1 */\n  }\n");
 };
 export var useEuiYScroll = function useEuiYScroll() {
   var _ref6 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
@@ -118,7 +118,7 @@ export var useEuiYScrollWithShadows = function useEuiYScrollWithShadows() {
   });
 };
 export var euiXScroll = function euiXScroll(euiTheme) {
-  return "\n  ".concat(euiScrollBarStyles(euiTheme), "\n  overflow-x: auto;\n  &:focus {\n    outline: none; /* 1 */\n  }\n");
+  return "\n  ".concat(euiScrollBarStyles(euiTheme), "\n  ").concat(logicalCSSWithFallback('overflow-x', 'auto'), "\n  &:focus {\n    outline: none; /* 1 */\n  }\n");
 };
 export var useEuiXScroll = function useEuiXScroll() {
   var euiTheme = useEuiTheme();
@@ -158,4 +158,11 @@ export var useEuiOverflowScroll = function useEuiOverflowScroll(direction) {
     direction: direction,
     mask: mask
   });
+};
+/**
+ * For quickly applying a full-height element whether using flex or not
+ */
+
+export var euiFullHeight = function euiFullHeight() {
+  return "\n  ".concat(logicalCSS('height', '100%'), "\n  flex: 1 1 auto;\n  overflow: hidden;\n");
 };

package/es/global_styling/mixins/_states.js

@@ -15,7 +15,8 @@ import { useEuiTheme } from '../../services';
  * @param offset Accepts a specific measurement or 'inset', 'outset' or 'center' to adjust outline position
  * @param color Accepts any CSS color, **Note: only works in -webkit-**
  */
-export var euiFocusRing = function euiFocusRing(euiTheme) {
+export var euiFocusRing = function euiFocusRing(_ref) {
+  var euiTheme = _ref.euiTheme;
   var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'center';
   var options = arguments.length > 2 ? arguments[2] : undefined;
   // Width is enforced as a constant at the global theme layer
@@ -40,9 +41,7 @@ export var euiFocusRing = function euiFocusRing(euiTheme) {
   return "\n    outline: ".concat(outlineWidth, " solid ").concat(outlineColor, ";\n    outline-offset: ").concat(outlineOffset, ";\n\n    // \uD83D\uDC40 Chrome respects :focus-visible and allows coloring the `auto` style\n    &:focus-visible {\n      outline-style: auto;\n    }\n\n    // \uD83D\uDE45\u200D\u2640\uFE0F But Chrome also needs to have the outline forcefully removed from regular `:focus` state\n    &:not(:focus-visible) {\n      outline: none;\n    }\n  ");
 };
 export var useEuiFocusRing = function useEuiFocusRing(offset, color) {
-  var _useEuiTheme = useEuiTheme(),
-      euiTheme = _useEuiTheme.euiTheme;
-
+  var euiTheme = useEuiTheme();
   return euiFocusRing(euiTheme, offset, {
     color: color
   });

package/es/global_styling/mixins/_typography.js

@@ -7,6 +7,7 @@
  */
 import { euiLineHeightFromBaseline, euiFontSizeFromScale } from '../functions/typography';
 import { useEuiTheme } from '../../services/theme/hooks';
+import { logicalCSS } from '../functions';
 
 /**
  * Returns font-size and line-height
@@ -36,7 +37,8 @@ export var euiTextBreakWord = function euiTextBreakWord() {
 
 export var euiTextTruncate = function euiTextTruncate() {
   var maxWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '100%';
-  return "\n  max-width: ".concat(maxWidth, "; // Ensure that the node has a maximum width after which truncation can occur\n  overflow: hidden !important;\n  text-overflow: ellipsis !important;\n  white-space: nowrap !important;\n");
+  return "\n  ".concat(logicalCSS('max-width', maxWidth) // Ensure that the node has a maximum width after which truncation can occur
+  , "\n  overflow: hidden !important;\n  text-overflow: ellipsis !important;\n  white-space: nowrap !important;\n");
 };
 /**
  * Fixed-width numbers for tabular data

package/es/global_styling/reset/global_styles.js

@@ -42,7 +42,7 @@ export var EuiGlobalStyles = function EuiGlobalStyles(_ref) {
    * Final styles
    */
 
-  var styles = /*#__PURE__*/css(reset, " html{", scrollbarStyles, " ", fontReset, " text-size-adjust:100%;font-kerning:normal;height:100%;background-color:", colors.body, ";color:", colors.text, ";}code,pre,kbd,samp{font-family:", font.familyCode, ";}input,textarea,select{", fontReset, ";}button{font-family:", font.family, ";}em{font-style:italic;}strong{font-weight:", font.weight.bold, ";}*:focus{", euiFocusRing(euiTheme), ";}::selection{background:", transparentize(colors.primary, colorMode === 'LIGHT' ? 0.1 : 0.2), ";}a{color:", colors.primaryText, ";&,&:hover,&:focus{text-decoration:none;}}.euiBody-hasPortalContent{position:relative;};label:styles;");
+  var styles = /*#__PURE__*/css(reset, " html{", scrollbarStyles, " ", fontReset, " text-size-adjust:100%;font-kerning:normal;height:100%;background-color:", colors.body, ";color:", colors.text, ";}code,pre,kbd,samp{font-family:", font.familyCode, ";}input,textarea,select{", fontReset, ";}button{font-family:", font.family, ";}em{font-style:italic;}strong{font-weight:", font.weight.bold, ";}*:focus{", euiFocusRing(euiThemeContext), ";}::selection{background:", transparentize(colors.primary, colorMode === 'LIGHT' ? 0.1 : 0.2), ";}a{color:", colors.primaryText, ";&,&:hover,&:focus{text-decoration:none;}}.euiBody-hasPortalContent{position:relative;};label:styles;");
   return ___EmotionJSX(Global, {
     styles: styles
   });

package/es/global_styling/utility/utility.js

@@ -7,11 +7,19 @@
  */
 import React from 'react';
 import { Global, css } from '@emotion/react';
+import { useEuiTheme } from '../../services/theme/hooks';
 import { euiScreenReaderOnly } from '../../components/accessibility/screen_reader_only/screen_reader_only.styles';
+import { euiFullHeight, euiTextBreakWord, euiTextTruncate, euiNumberFormat, euiScrollBarStyles, euiYScroll, euiXScroll, euiYScrollWithShadows, euiXScrollWithShadows, euiBreakpoint } from '../mixins';
+import { logicalCSS } from '../functions';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var globalStyles = /*#__PURE__*/css(".euiScreenReaderOnly{", euiScreenReaderOnly(), ";};label:globalStyles;");
+export var globalStyles = function globalStyles(euiThemeContext) {
+  return /*#__PURE__*/css(".euiScreenReaderOnly{", euiScreenReaderOnly(), ";}.eui-alignBaseline{vertical-align:baseline!important;}.eui-alignBottom{vertical-align:bottom!important;}.eui-alignMiddle{vertical-align:middle!important;}.eui-alignTop{vertical-align:top!important;}.eui-displayBlock{display:block!important;}.eui-displayInline{display:inline!important;}.eui-displayInlineBlock{display:inline-block!important;}.eui-fullWidth{display:block!important;", logicalCSS('width', '100% !important'), ";}.eui-fullHeight{", euiFullHeight(), ";}.eui-textCenter{text-align:center!important;}.eui-textLeft{text-align:start!important;}.eui-textRight{text-align:end!important;}.eui-textNoWrap{white-space:nowrap!important;}.eui-textInheritColor{color:inherit!important;}.eui-textBreakWord{", euiTextBreakWord(), ";}.eui-textBreakAll{overflow-wrap:break-word!important;word-break:break-all!important;}.eui-textBreakNormal{overflow-wrap:normal!important;word-wrap:normal!important;word-break:normal!important;}.eui-textTruncate{", euiTextTruncate(), ";}.eui-textNumber{", euiNumberFormat(euiThemeContext), ";}.eui-scrollBar{", euiScrollBarStyles(euiThemeContext), ";}.eui-yScroll{", euiYScroll(euiThemeContext), ";}.eui-xScroll{", euiXScroll(euiThemeContext), ";}.eui-yScrollWithShadows{", euiYScrollWithShadows(euiThemeContext), ";}.eui-xScrollWithShadows{", euiXScrollWithShadows(euiThemeContext), ";}[class*='eui-showFor']{display:none!important;}", Object.keys(euiThemeContext.euiTheme.breakpoint).map(function (size) {
+    return "\n      .eui-hideFor--".concat(size, " {\n        ").concat(euiBreakpoint(euiThemeContext, [size]), " {\n          display: none !important;\n        }\n      }\n      .eui-showFor--").concat(size, " {\n        ").concat(euiBreakpoint(euiThemeContext, [size]), " {\n          display: inline !important;\n        }\n      }\n      .eui-showFor--").concat(size, "--block {\n        ").concat(euiBreakpoint(euiThemeContext, [size]), " {\n          display: block !important;\n        }\n      }\n      .eui-showFor--").concat(size, "--inlineBlock {\n        ").concat(euiBreakpoint(euiThemeContext, [size]), " {\n          display: inline-block !important;\n        }\n      }\n      .eui-showFor--").concat(size, "--flex {\n        ").concat(euiBreakpoint(euiThemeContext, [size]), " {\n          display: flex !important;\n        }\n      }");
+  }), ";;label:globalStyles;");
+};
 export var EuiUtilityClasses = function EuiUtilityClasses() {
+  var euiTheme = useEuiTheme();
   return ___EmotionJSX(Global, {
-    styles: globalStyles
+    styles: globalStyles(euiTheme)
   });
 };

package/eui.d.ts

@@ -1500,57 +1500,6 @@ declare module '@elastic/eui/src/global_styling/mixins/_color' {
 	    danger: import("@emotion/utils").SerializedStyles;
 	};
 
-}
-declare module '@elastic/eui/src/global_styling/mixins/_helpers' {
-	import { CSSProperties } from 'react';
-	import { UseEuiTheme } from '@elastic/eui/src/services/theme';
-	/**
-	 * Set scroll bar appearance on Chrome (and firefox).
-	 * All parameters are optional and default to specific global settings.
-	 */
-	export interface EuiScrollBarStyles {
-	    thumbColor?: CSSProperties['backgroundColor'];
-	    trackColor?: CSSProperties['backgroundColor'];
-	    /**
-	     * Defaults to `thin`. Use `auto` only for large page scrollbars
-	     */
-	    width?: CSSProperties['scrollbarWidth'];
-	    /**
-	     * Overall width (height for horizontal scrollbars)
-	     */
-	    size?: CSSProperties['width'];
-	    /**
-	     * Corner sizes are usually determined by `width` and
-	     * are used as an inset border and therefore a smaller corner size means a larger thumb
-	     */
-	    corner?: CSSProperties['borderWidth'];
-	}
-	export const euiScrollBarStyles: ({ euiTheme: { colors, size } }: UseEuiTheme, { thumbColor: _thumbColor, trackColor, width, size: _size, corner: _corner, }?: EuiScrollBarStyles) => string;
-	export const useEuiScrollBar: (options?: EuiScrollBarStyles | undefined) => string;
-	/**
-	 * 1. Focus rings shouldn't be visible on scrollable regions, but a11y requires them to be focusable.
-	 *    Browser's supporting `:focus-visible` will still show outline on keyboard focus only.
-	 *    Others like Safari, won't show anything at all.
-	 */
-	interface _EuiYScroll {
-	    height?: CSSProperties['height'];
-	}
-	export const euiYScroll: (euiTheme: UseEuiTheme, { height }?: _EuiYScroll) => string;
-	export const useEuiYScroll: ({ height }?: _EuiYScroll) => string;
-	export const euiYScrollWithShadows: (euiTheme: UseEuiTheme, { height }?: _EuiYScroll) => string;
-	export const useEuiYScrollWithShadows: ({ height }?: _EuiYScroll) => string;
-	export const euiXScroll: (euiTheme: UseEuiTheme) => string;
-	export const useEuiXScroll: () => string;
-	export const euiXScrollWithShadows: (euiTheme: UseEuiTheme) => string;
-	export const useEuiXScrollWithShadows: () => string;
-	interface EuiScrollOverflowStyles {
-	    direction?: 'y' | 'x';
-	    mask?: boolean;
-	}
-	export const euiOverflowScroll: (euiTheme: UseEuiTheme, { direction, mask }?: EuiScrollOverflowStyles) => string;
-	export const useEuiOverflowScroll: (direction: EuiScrollOverflowStyles['direction'], mask?: EuiScrollOverflowStyles['mask']) => string;
-	export {};
-
 }
 declare module '@elastic/eui/src/global_styling/functions/logicals' {
 	/**
@@ -1635,6 +1584,17 @@ declare module '@elastic/eui/src/global_styling/functions/logicals' {
 	 * @returns `string` Returns the logical CSS property version for the given `property: value` pair
 	 */
 	export const logicalCSS: (property: LogicalProperties, value?: any) => string;
+	/**
+	 * Some logical properties are not yet fully supported by all browsers.
+	 * For those cases, we should use the old property as a fallback for
+	 * browsers missing support, while allowing supporting browsers to use
+	 * the logical properties.
+	 *
+	 * Examples:
+	 * https://caniuse.com/?search=overflow-block
+	 * https://caniuse.com/mdn-css_properties_float_flow_relative_values
+	 */
+	export const logicalCSSWithFallback: (property: LogicalProperties, value?: any) => string;
 	/**
 	 *
 	 * @param property A string that is a valid CSS logical property
@@ -1767,6 +1727,61 @@ declare module '@elastic/eui/src/global_styling/functions' {
 	export * from '@elastic/eui/src/global_styling/functions/size';
 	export * from '@elastic/eui/src/global_styling/functions/typography';
 
+}
+declare module '@elastic/eui/src/global_styling/mixins/_helpers' {
+	import { CSSProperties } from 'react';
+	import { UseEuiTheme } from '@elastic/eui/src/services/theme';
+	/**
+	 * Set scroll bar appearance on Chrome (and firefox).
+	 * All parameters are optional and default to specific global settings.
+	 */
+	export interface EuiScrollBarStyles {
+	    thumbColor?: CSSProperties['backgroundColor'];
+	    trackColor?: CSSProperties['backgroundColor'];
+	    /**
+	     * Defaults to `thin`. Use `auto` only for large page scrollbars
+	     */
+	    width?: CSSProperties['scrollbarWidth'];
+	    /**
+	     * Overall width (height for horizontal scrollbars)
+	     */
+	    size?: CSSProperties['width'];
+	    /**
+	     * Corner sizes are usually determined by `width` and
+	     * are used as an inset border and therefore a smaller corner size means a larger thumb
+	     */
+	    corner?: CSSProperties['borderWidth'];
+	}
+	export const euiScrollBarStyles: ({ euiTheme: { colors, size } }: UseEuiTheme, { thumbColor: _thumbColor, trackColor, width, size: _size, corner: _corner, }?: EuiScrollBarStyles) => string;
+	export const useEuiScrollBar: (options?: EuiScrollBarStyles | undefined) => string;
+	/**
+	 * 1. Focus rings shouldn't be visible on scrollable regions, but a11y requires them to be focusable.
+	 *    Browser's supporting `:focus-visible` will still show outline on keyboard focus only.
+	 *    Others like Safari, won't show anything at all.
+	 */
+	interface _EuiYScroll {
+	    height?: CSSProperties['height'];
+	}
+	export const euiYScroll: (euiTheme: UseEuiTheme, { height }?: _EuiYScroll) => string;
+	export const useEuiYScroll: ({ height }?: _EuiYScroll) => string;
+	export const euiYScrollWithShadows: (euiTheme: UseEuiTheme, { height }?: _EuiYScroll) => string;
+	export const useEuiYScrollWithShadows: ({ height }?: _EuiYScroll) => string;
+	export const euiXScroll: (euiTheme: UseEuiTheme) => string;
+	export const useEuiXScroll: () => string;
+	export const euiXScrollWithShadows: (euiTheme: UseEuiTheme) => string;
+	export const useEuiXScrollWithShadows: () => string;
+	interface EuiScrollOverflowStyles {
+	    direction?: 'y' | 'x';
+	    mask?: boolean;
+	}
+	export const euiOverflowScroll: (euiTheme: UseEuiTheme, { direction, mask }?: EuiScrollOverflowStyles) => string;
+	export const useEuiOverflowScroll: (direction: EuiScrollOverflowStyles['direction'], mask?: EuiScrollOverflowStyles['mask']) => string;
+	/**
+	 * For quickly applying a full-height element whether using flex or not
+	 */
+	export const euiFullHeight: () => string;
+	export {};
+
 }
 declare module '@elastic/eui/src/global_styling/mixins/_padding' {
 	import { UseEuiTheme } from '@elastic/eui/src/services/theme';
@@ -1796,7 +1811,7 @@ declare module '@elastic/eui/src/global_styling/mixins/_states' {
 	 * @param offset Accepts a specific measurement or 'inset', 'outset' or 'center' to adjust outline position
 	 * @param color Accepts any CSS color, **Note: only works in -webkit-**
 	 */
-	export const euiFocusRing: (euiTheme: UseEuiTheme['euiTheme'], offset?: _EuiFocusRingOffset, options?: {
+	export const euiFocusRing: ({ euiTheme }: UseEuiTheme, offset?: _EuiFocusRingOffset, options?: {
 	    color?: CSSProperties['outlineColor'];
 	} | undefined) => string;
 	export const useEuiFocusRing: (offset?: _EuiFocusRingOffset, color?: CSSProperties['outlineColor']) => string;
@@ -2918,8 +2933,8 @@ declare module '@elastic/eui/src/components/link/link.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
 	export const euiLinkHoverCSS: () => string;
 	export const euiLinkFocusCSS: (euiTheme: UseEuiTheme['euiTheme']) => string;
-	export const euiLinkCSS: (euiTheme: UseEuiTheme['euiTheme']) => string;
-	export const euiLinkStyles: ({ euiTheme }: UseEuiTheme) => {
+	export const euiLinkCSS: (euiThemeContext: UseEuiTheme) => string;
+	export const euiLinkStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiLink: import("@emotion/utils").SerializedStyles;
 	    disabled: import("@emotion/utils").SerializedStyles;
 	    primary: import("@emotion/utils").SerializedStyles;
@@ -15619,6 +15634,8 @@ declare module '@elastic/eui/src/components/page_template' {
 }
 declare module '@elastic/eui/src/global_styling/utility/utility' {
 	
+	import { UseEuiTheme } from '@elastic/eui/src/services/theme/hooks';
+	export const globalStyles: (euiThemeContext: UseEuiTheme) => import("@emotion/utils").SerializedStyles;
 	export const EuiUtilityClasses: () => JSX.Element;
 
 }
@@ -18506,7 +18523,7 @@ declare module '@elastic/eui/src/components/basic_table/collapsed_item_actions'
 	    togglePopover: () => void;
 	    closePopover: () => void;
 	    onPopoverBlur: () => void;
-	    registerPopoverDiv: (popoverDiv: HTMLDivElement) => void;
+	    registerPopoverDiv: (popoverDiv: HTMLDivElement | null) => void;
 	    componentWillUnmount(): void;
 	    onClickItem: (onClickAction: (() => void) | undefined) => void;
 	    render(): JSX.Element;

package/i18ntokens.json

@@ -149,11 +149,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 169,
+        "line": 170,
         "column": 6
       },
       "end": {
-        "line": 169,
+        "line": 170,
         "column": 80
       }
     },
@@ -165,11 +165,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 186,
+        "line": 187,
         "column": 6
       },
       "end": {
-        "line": 186,
+        "line": 187,
         "column": 80
       }
     },

package/lib/components/basic_table/collapsed_item_actions.js

@@ -108,8 +108,7 @@ var CollapsedItemActions = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "registerPopoverDiv", function (popoverDiv) {
       if (!_this.popoverDiv) {
         _this.popoverDiv = popoverDiv;
-
-        _this.popoverDiv.addEventListener('focusout', _this.onPopoverBlur);
+        _this.popoverDiv && _this.popoverDiv.addEventListener('focusout', _this.onPopoverBlur);
       }
     });
 

package/lib/components/breadcrumbs/breadcrumb.styles.js

@@ -55,8 +55,8 @@ var euiBreadcrumbContentStyles = function euiBreadcrumbContentStyles(euiThemeCon
     isTruncated: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextTruncate)("".concat(parseFloat(euiTheme.size.base) * 10, "px")), ";;label:isTruncated;"),
     isTruncatedLast: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextTruncate)('none'), ";;label:isTruncatedLast;"),
     // Types
-    page: /*#__PURE__*/(0, _react.css)("&:is(a):focus{", (0, _global_styling.euiFocusRing)(euiTheme, 'inset'), ";}&:is(button):focus{", (0, _global_styling.euiFocusRing)(euiTheme, 'center'), ";};label:page;"),
-    application: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), ";background-color:", (0, _color.transparentize)(euiTheme.colors.darkestShade, 0.2), ";clip-path:polygon(\n        0 0,\n        calc(100% - ", euiTheme.size.s, ") 0,\n        100% 50%,\n        calc(100% - ", euiTheme.size.s, ") 100%,\n        0 100%,\n        ", euiTheme.size.s, " 50%\n      );color:", euiTheme.colors.darkestShade, ";line-height:", euiTheme.size.base, ";", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.xs), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.base), " &:is(a),&:is(button){background-color:", (0, _color.transparentize)(euiTheme.colors.primary, 0.2), ";color:", euiTheme.colors.link, ";:focus{", (0, _global_styling.euiFocusRing)(euiTheme, 'inset'), ";:focus-visible{border-radius:", euiTheme.border.radius.medium, ";clip-path:none;}}};label:application;"),
+    page: /*#__PURE__*/(0, _react.css)("&:is(a):focus{", (0, _global_styling.euiFocusRing)(euiThemeContext, 'inset'), ";}&:is(button):focus{", (0, _global_styling.euiFocusRing)(euiThemeContext, 'center'), ";};label:page;"),
+    application: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), ";background-color:", (0, _color.transparentize)(euiTheme.colors.darkestShade, 0.2), ";clip-path:polygon(\n        0 0,\n        calc(100% - ", euiTheme.size.s, ") 0,\n        100% 50%,\n        calc(100% - ", euiTheme.size.s, ") 100%,\n        0 100%,\n        ", euiTheme.size.s, " 50%\n      );color:", euiTheme.colors.darkestShade, ";line-height:", euiTheme.size.base, ";", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.xs), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.base), " &:is(a),&:is(button){background-color:", (0, _color.transparentize)(euiTheme.colors.primary, 0.2), ";color:", euiTheme.colors.link, ";:focus{", (0, _global_styling.euiFocusRing)(euiThemeContext, 'inset'), ";:focus-visible{border-radius:", euiTheme.border.radius.medium, ";clip-path:none;}}};label:application;"),
     applicationStyles: {
       onlyChild: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";clip-path:none;", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.m), ",;;label:onlyChild;"),
       firstChild: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, " 0 0 ", euiTheme.border.radius.medium, ";clip-path:polygon(\n          0 0,\n          calc(100% - ", euiTheme.size.s, ") 0,\n          100% 50%,\n          calc(100% - ", euiTheme.size.s, ") 100%,\n          0 100%\n        );", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.m), ",;;label:firstChild;"),

package/lib/components/image/image_button.styles.js

@@ -17,7 +17,7 @@ var euiImageButtonStyles = function euiImageButtonStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    euiImageButton: /*#__PURE__*/(0, _react.css)("position:relative;cursor:pointer;text-align:match-parent;line-height:0;&::before{opacity:0;content:'';pointer-events:none;position:absolute;top:0;bottom:0;left:0;right:0;", _global_styling.euiCanAnimate, "{transition:opacity ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";}}&:hover,&:focus{&::before{opacity:1;}[class*='euiImageButton__icon']{opacity:1;}}&:focus{", (0, _global_styling.euiFocusRing)(euiTheme, 'outset'), ";};label:euiImageButton;"),
+    euiImageButton: /*#__PURE__*/(0, _react.css)("position:relative;cursor:pointer;text-align:match-parent;line-height:0;&::before{opacity:0;content:'';pointer-events:none;position:absolute;top:0;bottom:0;left:0;right:0;", _global_styling.euiCanAnimate, "{transition:opacity ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";}}&:hover,&:focus{&::before{opacity:1;}[class*='euiImageButton__icon']{opacity:1;}}&:focus{", (0, _global_styling.euiFocusRing)(euiThemeContext, 'outset'), ";};label:euiImageButton;"),
     fullWidth: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), ";;label:fullWidth;"),
     shadowHover: /*#__PURE__*/(0, _react.css)("&::before{", (0, _mixins.euiShadow)(euiThemeContext, 's'), ";};label:shadowHover;"),
     hasShadowHover: /*#__PURE__*/(0, _react.css)("&::before{", (0, _mixins.euiShadow)(euiThemeContext, 'm'), ";};label:hasShadowHover;")

package/lib/components/link/link.styles.js

@@ -27,8 +27,9 @@ var euiLinkFocusCSS = function euiLinkFocusCSS(euiTheme) {
 
 exports.euiLinkFocusCSS = euiLinkFocusCSS;
 
-var euiLinkCSS = function euiLinkCSS(euiTheme) {
-  return "\n    font-weight: ".concat(euiTheme.font.weight.medium, ";\n    text-align: left;\n\n    &:hover {\n      ").concat(euiLinkHoverCSS(), "\n    }\n\n    &:focus {\n      ").concat((0, _global_styling.euiFocusRing)(euiTheme, 'outset'), "\n      ").concat(euiLinkFocusCSS(euiTheme), "\n    }\n  ");
+var euiLinkCSS = function euiLinkCSS(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return "\n    font-weight: ".concat(euiTheme.font.weight.medium, ";\n    text-align: left;\n\n    &:hover {\n      ").concat(euiLinkHoverCSS(), "\n    }\n\n    &:focus {\n      ").concat((0, _global_styling.euiFocusRing)(euiThemeContext, 'outset'), "\n      ").concat(euiLinkFocusCSS(euiTheme), "\n    }\n  ");
 };
 
 exports.euiLinkCSS = euiLinkCSS;
@@ -42,10 +43,10 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-var euiLinkStyles = function euiLinkStyles(_ref2) {
-  var euiTheme = _ref2.euiTheme;
+var euiLinkStyles = function euiLinkStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiLink: /*#__PURE__*/(0, _react.css)(euiLinkCSS(euiTheme), " user-select:text;&[target='_blank']{position:relative;};label:euiLink;"),
+    euiLink: /*#__PURE__*/(0, _react.css)(euiLinkCSS(euiThemeContext), " user-select:text;&[target='_blank']{position:relative;};label:euiLink;"),
     disabled: _ref,
     // Color styles
     primary: /*#__PURE__*/(0, _react.css)(_colorCSS(euiTheme.colors.primaryText), ";label:primary;"),

package/lib/components/text/text.styles.js

@@ -74,7 +74,7 @@ var euiScaleText = function euiScaleText(euiThemeContext, options) {
 var euiTextStyles = function euiTextStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiText: /*#__PURE__*/(0, _react.css)(euiText(euiTheme, true), ";clear:both;a:not([class]){", (0, _link.euiLinkCSS)(euiTheme), ";}img{display:block;", (0, _global_styling.logicalCSS)('max-width', '100%'), ";}ul{list-style:disc;}ol{list-style:decimal;}blockquote:not(.euiMarkdownFormat__blockquote){position:relative;", (0, _global_styling.logicalTextAlignCSS)('center'), " ", (0, _global_styling.logicalCSS)('margin-horizontal', 'auto'), " font-family:", euiTheme.font.familySerif, ";font-style:italic;letter-spacing:normal;p:last-child{", (0, _global_styling.logicalCSS)('margin-bottom', '0'), ";}&:before,&:after{position:absolute;content:'';", (0, _global_styling.logicalCSS)('height', euiTheme.border.width.thick), " ", (0, _global_styling.logicalCSS)('width', '50%'), " ", (0, _global_styling.logicalCSS)('left', '25%'), " ", (0, _global_styling.logicalCSS)('right', '25%'), " background:", euiTheme.colors.darkShade, ";}&:before{", (0, _global_styling.logicalCSS)('top', '0'), ";}&:after{", (0, _global_styling.logicalCSS)('bottom', '0'), ";}}h1{", (0, _title.euiTitle)(euiThemeContext, 'l'), ";}h2{", (0, _title.euiTitle)(euiThemeContext, 'm'), ";}h3{", (0, _title.euiTitle)(euiThemeContext, 's'), ";}h4,dt{", (0, _title.euiTitle)(euiThemeContext, 'xs'), ";}h5{", (0, _title.euiTitle)(euiThemeContext, 'xxs'), ";}h6{", (0, _title.euiTitle)(euiThemeContext, 'xxxs'), " text-transform:uppercase;}h1,h2,h3,h4,h5,h6,dt{color:inherit;}pre:not(.euiCodeBlock__pre){white-space:pre-wrap;background:", (0, _global_styling.euiBackgroundColor)(euiThemeContext, 'subdued'), ";color:", euiTheme.colors.text, ";}pre:not(.euiCodeBlock__pre),pre:not(.euiCodeBlock__pre) code{display:block;}>:last-child{", (0, _global_styling.logicalCSS)('margin-bottom', '0 !important'), ";}kbd{position:relative;display:inline-block;", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.xxs), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), " line-height:1;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.text, ";border-radius:calc(", euiTheme.border.radius.small, " / 2);};label:euiText;"),
+    euiText: /*#__PURE__*/(0, _react.css)(euiText(euiTheme, true), ";clear:both;a:not([class]){", (0, _link.euiLinkCSS)(euiThemeContext), ";}img{display:block;", (0, _global_styling.logicalCSS)('max-width', '100%'), ";}ul{list-style:disc;}ol{list-style:decimal;}blockquote:not(.euiMarkdownFormat__blockquote){position:relative;", (0, _global_styling.logicalTextAlignCSS)('center'), " ", (0, _global_styling.logicalCSS)('margin-horizontal', 'auto'), " font-family:", euiTheme.font.familySerif, ";font-style:italic;letter-spacing:normal;p:last-child{", (0, _global_styling.logicalCSS)('margin-bottom', '0'), ";}&:before,&:after{position:absolute;content:'';", (0, _global_styling.logicalCSS)('height', euiTheme.border.width.thick), " ", (0, _global_styling.logicalCSS)('width', '50%'), " ", (0, _global_styling.logicalCSS)('left', '25%'), " ", (0, _global_styling.logicalCSS)('right', '25%'), " background:", euiTheme.colors.darkShade, ";}&:before{", (0, _global_styling.logicalCSS)('top', '0'), ";}&:after{", (0, _global_styling.logicalCSS)('bottom', '0'), ";}}h1{", (0, _title.euiTitle)(euiThemeContext, 'l'), ";}h2{", (0, _title.euiTitle)(euiThemeContext, 'm'), ";}h3{", (0, _title.euiTitle)(euiThemeContext, 's'), ";}h4,dt{", (0, _title.euiTitle)(euiThemeContext, 'xs'), ";}h5{", (0, _title.euiTitle)(euiThemeContext, 'xxs'), ";}h6{", (0, _title.euiTitle)(euiThemeContext, 'xxxs'), " text-transform:uppercase;}h1,h2,h3,h4,h5,h6,dt{color:inherit;}pre:not(.euiCodeBlock__pre){white-space:pre-wrap;background:", (0, _global_styling.euiBackgroundColor)(euiThemeContext, 'subdued'), ";color:", euiTheme.colors.text, ";}pre:not(.euiCodeBlock__pre),pre:not(.euiCodeBlock__pre) code{display:block;}>:last-child{", (0, _global_styling.logicalCSS)('margin-bottom', '0 !important'), ";}kbd{position:relative;display:inline-block;", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.xxs), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), " line-height:1;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.text, ";border-radius:calc(", euiTheme.border.radius.small, " / 2);};label:euiText;"),
     constrainedWidth: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-width', euiTextConstrainedMaxWidth), ";;label:constrainedWidth;"),
     // Sizes
     m: /*#__PURE__*/(0, _react.css)(euiScaleText(euiThemeContext, {

package/lib/components/toast/global_toast_list.styles.js

@@ -22,7 +22,7 @@ var euiGlobalToastListStyles = function euiGlobalToastListStyles(euiThemeContext
      * 2. Allow some padding for shadow
      */
     // Base
-    euiGlobalToastList: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiScrollBarStyles)(euiThemeContext), " display:flex;flex-direction:column;align-items:stretch;position:fixed;z-index:", euiTheme.levels.toast, ";", (0, _global_styling.logicalCSS)('bottom', 0), ";", (0, _global_styling.logicalCSS)('width', "".concat(euiToastWidth + euiTheme.base * 5, "px")), ";", (0, _global_styling.logicalCSS)('max-height', '100vh'), ";overflow-y:auto;", (0, _global_styling.logicalCSS)('overflow-y', 'auto'), ";scrollbar-width:none;&::-webkit-scrollbar{", (0, _global_styling.logicalSizeCSS)(0, 0), ";}&:not(:empty){", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.base), ";", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.base), ";", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.base), ";}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{&:not(:empty){", (0, _global_styling.logicalCSS)('left', 0), ";", (0, _global_styling.logicalCSS)('width', '100%'), ";}};label:euiGlobalToastList;"),
+    euiGlobalToastList: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiScrollBarStyles)(euiThemeContext), " display:flex;flex-direction:column;align-items:stretch;position:fixed;z-index:", euiTheme.levels.toast, ";", (0, _global_styling.logicalCSS)('bottom', 0), ";", (0, _global_styling.logicalCSS)('width', "".concat(euiToastWidth + euiTheme.base * 5, "px")), ";", (0, _global_styling.logicalCSS)('max-height', '100vh'), ";", (0, _global_styling.logicalCSSWithFallback)('overflow-y', 'auto'), ";scrollbar-width:none;&::-webkit-scrollbar{", (0, _global_styling.logicalSizeCSS)(0, 0), ";}&:not(:empty){", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.base), ";", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.base), ";", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.base), ";}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{&:not(:empty){", (0, _global_styling.logicalCSS)('left', 0), ";", (0, _global_styling.logicalCSS)('width', '100%'), ";}};label:euiGlobalToastList;"),
     // Variants
     right: /*#__PURE__*/(0, _react.css)("&:not(:empty){", (0, _global_styling.logicalCSS)('right', 0), ";", (0, _global_styling.logicalCSS)('padding-left', "".concat(euiTheme.base * 4, "px")), ";}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{&:not(:empty){", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.base), ";}};label:right;"),
     left: /*#__PURE__*/(0, _react.css)("&:not(:empty){", (0, _global_styling.logicalCSS)('left', 0), ";", (0, _global_styling.logicalCSS)('padding-right', "".concat(euiTheme.base * 4, "px")), ";}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{&:not(:empty){", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.base), ";}};label:left;")