@elastic/eui 64.0.0 → 64.0.1

package/lib/global_styling/functions/logicals.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.logicals = exports.logicalTextAlignStyle = exports.logicalTextAlignCSS = exports.logicalText = exports.logicalStyle = exports.logicalSizeStyle = exports.logicalSizeCSS = exports.logicalSide = exports.logicalCSS = exports.LOGICAL_TEXT_ALIGNMENT = exports.LOGICAL_SIDES = exports.LOGICAL_PROPERTIES = void 0;
+exports.logicals = exports.logicalTextAlignStyle = exports.logicalTextAlignCSS = exports.logicalText = exports.logicalStyle = exports.logicalSizeStyle = exports.logicalSizeCSS = exports.logicalSide = exports.logicalCSSWithFallback = exports.logicalCSS = exports.LOGICAL_TEXT_ALIGNMENT = exports.LOGICAL_SIDES = exports.LOGICAL_PROPERTIES = void 0;
 
 var _common = require("../../components/common");
 
@@ -64,8 +64,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',
@@ -113,6 +113,23 @@ exports.LOGICAL_PROPERTIES = LOGICAL_PROPERTIES;
 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
+ */
+
+
+exports.logicalCSS = logicalCSS;
+
+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
@@ -121,7 +138,7 @@ var logicalCSS = function logicalCSS(property, value) {
  */
 
 
-exports.logicalCSS = logicalCSS;
+exports.logicalCSSWithFallback = logicalCSSWithFallback;
 
 var logicalStyle = function logicalStyle(property, value) {
   // Strip hyphens and camelCase the CSS logical property so React doesn't throw errors

package/lib/global_styling/mixins/_helpers.js

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useEuiYScrollWithShadows = exports.useEuiYScroll = exports.useEuiXScrollWithShadows = exports.useEuiXScroll = exports.useEuiScrollBar = exports.useEuiOverflowScroll = exports.euiYScrollWithShadows = exports.euiYScroll = exports.euiXScrollWithShadows = exports.euiXScroll = exports.euiScrollBarStyles = exports.euiOverflowScroll = void 0;
+exports.useEuiYScrollWithShadows = exports.useEuiYScroll = exports.useEuiXScrollWithShadows = exports.useEuiXScroll = exports.useEuiScrollBar = exports.useEuiOverflowScroll = exports.euiYScrollWithShadows = exports.euiYScroll = exports.euiXScrollWithShadows = exports.euiXScroll = exports.euiScrollBarStyles = exports.euiOverflowScroll = exports.euiFullHeight = void 0;
 
 var _theme = require("../../services/theme");
 
 var _color = require("../../services/color");
 
+var _functions = require("../functions");
+
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -38,7 +40,7 @@ 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((0, _functions.logicalCSS)('width', scrollBarSize), "\n      ").concat((0, _functions.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  ");
 };
 
 exports.euiScrollBarStyles = euiScrollBarStyles;
@@ -92,12 +94,11 @@ var euiOverflowShadowStyles = function euiOverflowShadowStyles(_ref3) {
  */
 
 
-// TODO: How do we use Emotion to output the CSS class utilities instead?
 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((0, _functions.logicalCSS)('height', height || '100%'), "\n  ").concat((0, _functions.logicalCSSWithFallback)('overflow-y', 'auto'), "\n  ").concat((0, _functions.logicalCSSWithFallback)('overflow-x', 'hidden'), "\n  &:focus {\n    outline: none; /* 1 */\n  }\n");
 };
 
 exports.euiYScroll = euiYScroll;
@@ -140,7 +141,7 @@ var useEuiYScrollWithShadows = function useEuiYScrollWithShadows() {
 exports.useEuiYScrollWithShadows = useEuiYScrollWithShadows;
 
 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((0, _functions.logicalCSSWithFallback)('overflow-x', 'auto'), "\n  &:focus {\n    outline: none; /* 1 */\n  }\n");
 };
 
 exports.euiXScroll = euiXScroll;
@@ -196,5 +197,15 @@ var useEuiOverflowScroll = function useEuiOverflowScroll(direction) {
     mask: mask
   });
 };
+/**
+ * For quickly applying a full-height element whether using flex or not
+ */
+
+
+exports.useEuiOverflowScroll = useEuiOverflowScroll;
+
+var euiFullHeight = function euiFullHeight() {
+  return "\n  ".concat((0, _functions.logicalCSS)('height', '100%'), "\n  flex: 1 1 auto;\n  overflow: hidden;\n");
+};
 
-exports.useEuiOverflowScroll = useEuiOverflowScroll;
+exports.euiFullHeight = euiFullHeight;

package/lib/global_styling/mixins/_states.js

@@ -23,7 +23,8 @@ var _services = require("../../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-**
  */
-var euiFocusRing = function euiFocusRing(euiTheme) {
+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
@@ -51,9 +52,7 @@ var euiFocusRing = function euiFocusRing(euiTheme) {
 exports.euiFocusRing = euiFocusRing;
 
 var useEuiFocusRing = function useEuiFocusRing(offset, color) {
-  var _useEuiTheme = (0, _services.useEuiTheme)(),
-      euiTheme = _useEuiTheme.euiTheme;
-
+  var euiTheme = (0, _services.useEuiTheme)();
   return euiFocusRing(euiTheme, offset, {
     color: color
   });

package/lib/global_styling/mixins/_typography.js

@@ -9,6 +9,8 @@ var _typography = require("../functions/typography");
 
 var _hooks = require("../../services/theme/hooks");
 
+var _functions = require("../functions");
+
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -54,7 +56,8 @@ exports.euiTextBreakWord = euiTextBreakWord;
 
 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((0, _functions.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/lib/global_styling/reset/global_styles.js

@@ -49,7 +49,7 @@ var EuiGlobalStyles = function EuiGlobalStyles(_ref) {
    * Final styles
    */
 
-  var styles = /*#__PURE__*/(0, _react2.css)(_reset.resetStyles, " 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{", (0, _mixins.euiFocusRing)(euiTheme), ";}::selection{background:", (0, _color.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__*/(0, _react2.css)(_reset.resetStyles, " 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{", (0, _mixins.euiFocusRing)(euiThemeContext), ";}::selection{background:", (0, _color.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 (0, _react2.jsx)(_react2.Global, {
     styles: styles
   });

package/lib/global_styling/utility/utility.js

@@ -3,14 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EuiUtilityClasses = void 0;
+exports.globalStyles = exports.EuiUtilityClasses = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@emotion/react");
 
+var _hooks = require("../../services/theme/hooks");
+
 var _screen_reader_only = require("../../components/accessibility/screen_reader_only/screen_reader_only.styles");
 
+var _mixins = require("../mixins");
+
+var _functions = require("../functions");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /*
@@ -20,11 +26,18 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var globalStyles = /*#__PURE__*/(0, _react2.css)(".euiScreenReaderOnly{", (0, _screen_reader_only.euiScreenReaderOnly)(), ";};label:globalStyles;");
+var globalStyles = function globalStyles(euiThemeContext) {
+  return /*#__PURE__*/(0, _react2.css)(".euiScreenReaderOnly{", (0, _screen_reader_only.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;", (0, _functions.logicalCSS)('width', '100% !important'), ";}.eui-fullHeight{", (0, _mixins.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{", (0, _mixins.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{", (0, _mixins.euiTextTruncate)(), ";}.eui-textNumber{", (0, _mixins.euiNumberFormat)(euiThemeContext), ";}.eui-scrollBar{", (0, _mixins.euiScrollBarStyles)(euiThemeContext), ";}.eui-yScroll{", (0, _mixins.euiYScroll)(euiThemeContext), ";}.eui-xScroll{", (0, _mixins.euiXScroll)(euiThemeContext), ";}.eui-yScrollWithShadows{", (0, _mixins.euiYScrollWithShadows)(euiThemeContext), ";}.eui-xScrollWithShadows{", (0, _mixins.euiXScrollWithShadows)(euiThemeContext), ";}[class*='eui-showFor']{display:none!important;}", Object.keys(euiThemeContext.euiTheme.breakpoint).map(function (size) {
+    return "\n      .eui-hideFor--".concat(size, " {\n        ").concat((0, _mixins.euiBreakpoint)(euiThemeContext, [size]), " {\n          display: none !important;\n        }\n      }\n      .eui-showFor--").concat(size, " {\n        ").concat((0, _mixins.euiBreakpoint)(euiThemeContext, [size]), " {\n          display: inline !important;\n        }\n      }\n      .eui-showFor--").concat(size, "--block {\n        ").concat((0, _mixins.euiBreakpoint)(euiThemeContext, [size]), " {\n          display: block !important;\n        }\n      }\n      .eui-showFor--").concat(size, "--inlineBlock {\n        ").concat((0, _mixins.euiBreakpoint)(euiThemeContext, [size]), " {\n          display: inline-block !important;\n        }\n      }\n      .eui-showFor--").concat(size, "--flex {\n        ").concat((0, _mixins.euiBreakpoint)(euiThemeContext, [size]), " {\n          display: flex !important;\n        }\n      }");
+  }), ";;label:globalStyles;");
+};
+
+exports.globalStyles = globalStyles;
 
 var EuiUtilityClasses = function EuiUtilityClasses() {
+  var euiTheme = (0, _hooks.useEuiTheme)();
   return (0, _react2.jsx)(_react2.Global, {
-    styles: globalStyles
+    styles: globalStyles(euiTheme)
   });
 };
 

package/optimize/es/components/basic_table/collapsed_item_actions.js

@@ -81,8 +81,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/optimize/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/optimize/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/optimize/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/optimize/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/optimize/es/components/toast/global_toast_list.styles.js

@@ -10,7 +10,7 @@ var _templateObject;
  * 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/optimize/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/optimize/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/optimize/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/optimize/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/optimize/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/optimize/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/optimize/lib/components/basic_table/collapsed_item_actions.js

@@ -96,8 +96,7 @@ var CollapsedItemActions = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "registerPopoverDiv", function (popoverDiv) {
       if (!_this.popoverDiv) {
         _this.popoverDiv = popoverDiv;
-
-        _this.popoverDiv.addEventListener('focusout', _this.onPopoverBlur);
+        _this.popoverDiv && _this.popoverDiv.addEventListener('focusout', _this.onPopoverBlur);
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onClickItem", function (onClickAction) {

package/optimize/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/optimize/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/optimize/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/optimize/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/optimize/lib/components/toast/global_toast_list.styles.js

@@ -24,7 +24,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;")