@elastic/eui 82.1.0 → 82.2.0

package/lib/components/list_group/list_group.js

@@ -191,7 +191,7 @@ EuiListGroup.propTypes = {
          * Overall size of button.
          * Matches the sizes of other EuiButtons
          */
-      size: _propTypes.default.oneOf(["xs", "s", "m"]),
+      size: _propTypes.default.any,
       /**
          * Size of the icon only.
          * This will not affect the overall size of the button
@@ -208,7 +208,7 @@ EuiListGroup.propTypes = {
          * `fill` is equivalent to a filled EuiButton
          * `empty` (default) is equivalent to an EuiButtonEmpty
          */
-      display: _propTypes.default.oneOf(["base", "empty", "fill"]),
+      display: _propTypes.default.any,
       /**
          * Disables the button and changes the icon to a loading spinner
          */

package/lib/components/list_group/list_group_item.js

@@ -264,7 +264,7 @@ EuiListGroupItem.propTypes = {
        * Overall size of button.
        * Matches the sizes of other EuiButtons
        */
-    size: _propTypes.default.oneOf(["xs", "s", "m"]),
+    size: _propTypes.default.any,
     /**
        * Size of the icon only.
        * This will not affect the overall size of the button
@@ -281,7 +281,7 @@ EuiListGroupItem.propTypes = {
        * `fill` is equivalent to a filled EuiButton
        * `empty` (default) is equivalent to an EuiButtonEmpty
        */
-    display: _propTypes.default.oneOf(["base", "empty", "fill"]),
+    display: _propTypes.default.any,
     /**
        * Disables the button and changes the icon to a loading spinner
        */

package/lib/components/list_group/list_group_item.styles.js

@@ -60,10 +60,10 @@ var euiListGroupItemInnerStyles = function euiListGroupItemInnerStyles(euiThemeC
     // Base
     euiListGroupItem__inner: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalShorthandCSS)('padding', "".concat(euiTheme.size.xs, " ").concat(euiTheme.size.s)), " display:flex;align-items:center;flex-grow:1;max-inline-size:100%;overflow:hidden;text-align:start;font-weight:inherit;;label:euiListGroupItem__inner;"),
     // Sizes
-    xs: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), ";font-weight:", euiTheme.font.weight.medium, ";letter-spacing:0;", (0, _global_styling.logicalCSS)('min-height', euiTheme.size.l), ";;label:xs;"),
-    s: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 's'), ";font-weight:", euiTheme.font.weight.medium, ";letter-spacing:0;", (0, _global_styling.logicalCSS)('min-height', euiTheme.size.xl), ";;label:s;"),
-    m: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 'm'), ";", (0, _global_styling.logicalCSS)('min-height', euiTheme.size.xl), ";;label:m;"),
-    l: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 'l'), ";", (0, _global_styling.logicalCSS)('min-height', euiTheme.size.xxl), ";;label:l;"),
+    xs: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), " font-weight:", euiTheme.font.weight.medium, ";letter-spacing:0;", (0, _global_styling.logicalCSS)('min-height', euiTheme.size.l), ";;label:xs;"),
+    s: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 's'), " font-weight:", euiTheme.font.weight.medium, ";letter-spacing:0;", (0, _global_styling.logicalCSS)('min-height', euiTheme.size.xl), ";;label:s;"),
+    m: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 'm'), " ", (0, _global_styling.logicalCSS)('min-height', euiTheme.size.xl), ";;label:m;"),
+    l: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 'l'), " ", (0, _global_styling.logicalCSS)('min-height', euiTheme.size.xxl), ";;label:l;"),
     // Colors
     primary: /*#__PURE__*/(0, _react.css)("color:", (0, _button.euiButtonColor)(euiThemeContext, 'primary').color, ";;label:primary;"),
     text: /*#__PURE__*/(0, _react.css)("color:", (0, _button.euiButtonColor)(euiThemeContext, 'text').color, ";;label:text;"),
@@ -89,7 +89,7 @@ var euiListGroupItemIconStyles = function euiListGroupItemIconStyles(_ref2) {
   var euiTheme = _ref2.euiTheme;
   return {
     // Base
-    euiListGroupItem__icon: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-right', euiTheme.size.m), ";flex-grow:0;flex-shrink:0;;label:euiListGroupItem__icon;")
+    euiListGroupItem__icon: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-right', euiTheme.size.m), " flex-grow:0;flex-shrink:0;;label:euiListGroupItem__icon;")
   };
 };
 exports.euiListGroupItemIconStyles = euiListGroupItemIconStyles;

package/lib/components/list_group/list_group_item_extra_action.js

@@ -61,7 +61,7 @@ EuiListGroupItemExtraAction.propTypes = {
      * Overall size of button.
      * Matches the sizes of other EuiButtons
      */
-  size: _propTypes.default.oneOf(["xs", "s", "m"]),
+  size: _propTypes.default.any,
   /**
      * Size of the icon only.
      * This will not affect the overall size of the button
@@ -78,7 +78,7 @@ EuiListGroupItemExtraAction.propTypes = {
      * `fill` is equivalent to a filled EuiButton
      * `empty` (default) is equivalent to an EuiButtonEmpty
      */
-  display: _propTypes.default.oneOf(["base", "empty", "fill"]),
+  display: _propTypes.default.any,
   /**
      * Disables the button and changes the icon to a loading spinner
      */

package/lib/components/list_group/pinnable_list_group/pinnable_list_group.js

@@ -186,7 +186,7 @@ EuiPinnableListGroup.propTypes = {
          * Overall size of button.
          * Matches the sizes of other EuiButtons
          */
-      size: _propTypes.default.oneOf(["xs", "s", "m"]),
+      size: _propTypes.default.any,
       /**
          * Size of the icon only.
          * This will not affect the overall size of the button
@@ -203,7 +203,7 @@ EuiPinnableListGroup.propTypes = {
          * `fill` is equivalent to a filled EuiButton
          * `empty` (default) is equivalent to an EuiButtonEmpty
          */
-      display: _propTypes.default.oneOf(["base", "empty", "fill"]),
+      display: _propTypes.default.any,
       /**
          * Disables the button and changes the icon to a loading spinner
          */
@@ -305,10 +305,10 @@ EuiPinnableListGroup.propTypes = {
       "aria-label": _propTypes.default.string,
       "aria-labelledby": _propTypes.default.string,
       isDisabled: _propTypes.default.bool,
-      size: _propTypes.default.oneOf(["xs", "s", "m"]),
+      size: _propTypes.default.any,
       iconSize: _propTypes.default.any,
       isSelected: _propTypes.default.bool,
-      display: _propTypes.default.oneOf(["base", "empty", "fill"]),
+      display: _propTypes.default.any,
       isLoading: _propTypes.default.bool,
       className: _propTypes.default.string,
       "data-test-subj": _propTypes.default.string,

package/lib/components/list_group/pinnable_list_group/pinnable_list_group.styles.js

@@ -27,7 +27,7 @@ var euiPinnableListGroupItemExtraActionStyles = function euiPinnableListGroupIte
     // Base
     euiPinnableListGroup__itemExtraAction: _ref,
     // Variants
-    pinned: /*#__PURE__*/(0, _react.css)("&:not(:hover):not(:focus){color:", (0, _services.makeHighContrastColor)(euiTheme.colors.lightShade)(euiTheme), ";};label:pinned;")
+    pinned: /*#__PURE__*/(0, _react.css)("&:not(:hover, :focus){color:", (0, _services.makeHighContrastColor)(euiTheme.colors.lightShade)(euiTheme), ";};label:pinned;")
   };
 };
 exports.euiPinnableListGroupItemExtraActionStyles = euiPinnableListGroupItemExtraActionStyles;

package/lib/components/loading/loading_logo.styles.js

@@ -26,14 +26,14 @@ var loadingPadding = {
 var euiLoadingLogoStyles = function euiLoadingLogoStyles(_ref) {
   var euiTheme = _ref.euiTheme;
   return {
-    euiLoadingLogo: /*#__PURE__*/(0, _react.css)("position:relative;display:inline-block;", _global_styling.euiCanAnimate, "{&:before,&:after{position:absolute;content:'';inline-size:90%;inset-inline-start:5%;border-radius:50%;opacity:0.2;z-index:1;}&:before{box-shadow:0 0 ", euiTheme.size.s, " ", euiTheme.colors.fullShade, ";animation:1s ", loadingPulsateAndFade, " ", euiTheme.animation.resistance, " infinite;}&:after{background-color:", euiTheme.colors.fullShade, ";animation:1s ", loadingPulsate, " ", euiTheme.animation.resistance, " infinite;}};label:euiLoadingLogo;"),
+    euiLoadingLogo: /*#__PURE__*/(0, _react.css)("position:relative;display:inline-block;", _global_styling.euiCanAnimate, "{&::before,&::after{position:absolute;content:'';inline-size:90%;inset-inline-start:5%;border-radius:50%;opacity:0.2;z-index:1;}&::before{box-shadow:0 0 ", euiTheme.size.s, " ", euiTheme.colors.fullShade, ";animation:1s ", loadingPulsateAndFade, " ", euiTheme.animation.resistance, " infinite;}&::after{background-color:", euiTheme.colors.fullShade, ";animation:1s ", loadingPulsate, " ", euiTheme.animation.resistance, " infinite;}};label:euiLoadingLogo;"),
     /**
      * 1. Requires pixel math for animation
      * 2. Add a half the amount of animation distance padding to the top to give it more room
      */
-    m: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{padding-block-start:", euiTheme.size[loadingPadding.m], ";}&:before,&:after{block-size:", euiTheme.base * 0.25, "px;inset-block-end:-", euiTheme.size.xs, ";};label:m;"),
-    l: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{padding-block-start:", euiTheme.size[loadingPadding.l], ";}&:before,&:after{block-size:", euiTheme.base * 0.375, "px;inset-block-end:-", euiTheme.size.s, ";};label:l;"),
-    xl: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{padding-block-start:", euiTheme.size[loadingPadding.xl], ";}&:before,&:after{block-size:", euiTheme.base * 0.5, "px;inset-block-end:-", euiTheme.size.m, ";};label:xl;")
+    m: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{padding-block-start:", euiTheme.size[loadingPadding.m], ";}&::before,&::after{block-size:", euiTheme.base * 0.25, "px;inset-block-end:-", euiTheme.size.xs, ";};label:m;"),
+    l: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{padding-block-start:", euiTheme.size[loadingPadding.l], ";}&::before,&::after{block-size:", euiTheme.base * 0.375, "px;inset-block-end:-", euiTheme.size.s, ";};label:l;"),
+    xl: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{padding-block-start:", euiTheme.size[loadingPadding.xl], ";}&::before,&::after{block-size:", euiTheme.base * 0.5, "px;inset-block-end:-", euiTheme.size.m, ";};label:xl;")
   };
 };
 exports.euiLoadingLogoStyles = euiLoadingLogoStyles;

package/lib/components/mark/mark.js

@@ -1,10 +1,11 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiMark = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _i18n = require("../i18n");
@@ -20,6 +21,8 @@ var _excluded = ["children", "className", "hasScreenReaderHelpText"];
  * Side Public License, v 1.
  */
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -29,17 +32,17 @@ var EuiMark = function EuiMark(_ref) {
     _ref$hasScreenReaderH = _ref.hasScreenReaderHelpText,
     hasScreenReaderHelpText = _ref$hasScreenReaderH === void 0 ? true : _ref$hasScreenReaderH,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var useTheme = (0, _services.useEuiTheme)();
+  var classes = (0, _classnames.default)('euiMark', className);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _mark.euiMarkStyles)(euiTheme);
   var highlightStart = (0, _i18n.useEuiI18n)('euiMark.highlightStart', 'highlight start');
   var highlightEnd = (0, _i18n.useEuiI18n)('euiMark.highlightEnd', 'highlight end');
-  var styles = (0, _mark.euiMarkStyles)(useTheme, {
-    hasScreenReaderHelpText: hasScreenReaderHelpText,
-    highlightStart: highlightStart,
-    highlightEnd: highlightEnd
-  });
-  var classes = (0, _classnames.default)('euiMark', className);
+  var screenReaderStyles = (0, _react.useMemo)(function () {
+    return (0, _mark.euiMarkScreenReaderStyles)(highlightStart, highlightEnd);
+  }, [highlightStart, highlightEnd]);
+  var cssStyles = [styles.euiMark, hasScreenReaderHelpText && screenReaderStyles.hasScreenReaderHelpText];
   return (0, _react2.jsx)("mark", _extends({
-    css: [styles, ";label:EuiMark;"],
+    css: cssStyles,
     className: classes
   }, rest), children);
 };

package/lib/components/mark/mark.styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiMarkStyles = void 0;
+exports.euiMarkStyles = exports.euiMarkScreenReaderStyles = void 0;
 var _react = require("@emotion/react");
 var _services = require("../../services");
 var _accessibility = require("../accessibility");
@@ -15,17 +15,22 @@ var _accessibility = require("../accessibility");
  * Side Public License, v 1.
  */
 
-var euiMarkStyles = function euiMarkStyles(_ref, _ref2) {
+var euiMarkStyles = function euiMarkStyles(_ref) {
   var euiTheme = _ref.euiTheme,
     colorMode = _ref.colorMode;
-  var hasScreenReaderHelpText = _ref2.hasScreenReaderHelpText,
-    highlightStart = _ref2.highlightStart,
-    highlightEnd = _ref2.highlightEnd;
   // TODO: Was $euiFocusBackgroundColor
   var transparency = {
     LIGHT: 0.1,
     DARK: 0.3
   };
-  return /*#__PURE__*/(0, _react.css)("background-color:", (0, _services.transparentize)(euiTheme.colors.primary, transparency[colorMode]), ";font-weight:", euiTheme.font.weight.bold, ";color:", euiTheme.colors.text, ";", hasScreenReaderHelpText === true && "\n      &:before,\n      &:after {\n        ".concat((0, _accessibility.euiScreenReaderOnly)(), "\n      }\n\n      &:before {\n        content: ' [").concat(highlightStart, "] ';\n      }\n\n      &:after {\n        content: ' [").concat(highlightEnd, "] ';\n      }\n    "), ";;label:euiMarkStyles;");
+  return {
+    euiMark: /*#__PURE__*/(0, _react.css)("background-color:", (0, _services.transparentize)(euiTheme.colors.primary, transparency[colorMode]), ";font-weight:", euiTheme.font.weight.bold, ";color:", euiTheme.colors.text, ";;label:euiMark;")
+  };
+};
+exports.euiMarkStyles = euiMarkStyles;
+var euiMarkScreenReaderStyles = function euiMarkScreenReaderStyles(highlightStart, highlightEnd) {
+  return {
+    hasScreenReaderHelpText: /*#__PURE__*/(0, _react.css)("&::before,&::after{", (0, _accessibility.euiScreenReaderOnly)(), ";}&::before{content:' [", highlightStart, "] ';}&::after{content:' [", highlightEnd, "] ';};label:hasScreenReaderHelpText;")
+  };
 };
-exports.euiMarkStyles = euiMarkStyles;
+exports.euiMarkScreenReaderStyles = euiMarkScreenReaderStyles;

package/lib/components/modal/modal_body.styles.js

@@ -18,7 +18,7 @@ var euiModalBodyStyles = function euiModalBodyStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     euiModalBody: /*#__PURE__*/(0, _react.css)("flex-grow:1;overflow:hidden;display:flex;flex-direction:column;&:last-of-type .euiModalBody__overflow{padding-block-end:", euiTheme.size.l, ";};label:euiModalBody;"),
-    euiModalBody__overflow: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiYScrollWithShadows)(euiThemeContext), ";padding-inline:", euiTheme.size.l, ";padding-block:", euiTheme.size.s, ";", (0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 'm'), "{padding-block-end:", euiTheme.size.l, ";};label:euiModalBody__overflow;")
+    euiModalBody__overflow: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiYScrollWithShadows)(euiThemeContext), " padding-inline:", euiTheme.size.l, ";padding-block:", euiTheme.size.s, ";", (0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 'm'), "{padding-block-end:", euiTheme.size.l, ";};label:euiModalBody__overflow;")
   };
 };
 exports.euiModalBodyStyles = euiModalBodyStyles;

package/lib/components/notification/notification_event.js

@@ -153,7 +153,7 @@ EuiNotificationEvent.propTypes = {
      * `fill` is equivalent to a filled EuiButton
      * `empty` (default) is equivalent to an EuiButtonEmpty
      */
-  display: _propTypes.default.oneOf(["base", "empty", "fill"]),
+  display: _propTypes.default.any,
   /**
      * Disables the button and changes the icon to a loading spinner
      */
@@ -196,14 +196,14 @@ EuiNotificationEvent.propTypes = {
        * **`'ghost'` is set for deprecation. Use EuiThemeProvide.colorMode = 'dark' instead.**
        */
     color: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf(["ghost"])]),
-    size: _propTypes.default.oneOf(["xs", "s", "m"]),
+    size: _propTypes.default.any,
     /**
        * Ensure the text of the button sits flush to the left, right, or both sides of its container
        */
     /**
        * Ensure the text of the button sits flush to the left, right, or both sides of its container
        */
-    flush: _propTypes.default.oneOf(["left", "right", "both"]),
+    flush: _propTypes.default.any,
     /**
        * `disabled` is also allowed
        */
@@ -250,10 +250,9 @@ EuiNotificationEvent.propTypes = {
     /**
        * Can only be one side `left` or `right`
        */
-    iconSide: _propTypes.default.oneOf(["left", "right"]),
+    iconSide: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf([undefined])]),
     /**
-       * Object of props passed to the <span/> wrapping the content's text (only if the children is a `string`)
-       * It doesn't apply to the icon.
+       * Object of props passed to the <span/> wrapping the content's text/children only (not icon)
        */
     textProps: _propTypes.default.shape({
       className: _propTypes.default.string,
@@ -263,7 +262,7 @@ EuiNotificationEvent.propTypes = {
       ref: _propTypes.default.any,
       "data-text": _propTypes.default.string
     }),
-    iconSize: _propTypes.default.oneOf(["s", "m"]),
+    iconSize: _propTypes.default.any,
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,

package/lib/components/notification/notification_event_read_button.js

@@ -70,7 +70,7 @@ EuiNotificationEventReadButton.propTypes = {
      * `fill` is equivalent to a filled EuiButton
      * `empty` (default) is equivalent to an EuiButtonEmpty
      */
-  display: _propTypes.default.oneOf(["base", "empty", "fill"]),
+  display: _propTypes.default.any,
   /**
      * Disables the button and changes the icon to a loading spinner
      */

package/lib/components/overlay_mask/overlay_mask.styles.js

@@ -18,7 +18,7 @@ var _services = require("../../services");
 var euiOverlayMaskStyles = function euiOverlayMaskStyles(_ref) {
   var euiTheme = _ref.euiTheme;
   return {
-    euiOverlayMask: /*#__PURE__*/(0, _css.css)("position:fixed;", (0, _global_styling.logicalCSS)('top', 0), " ", (0, _global_styling.logicalCSS)('left', 0), " ", (0, _global_styling.logicalCSS)('right', 0), " ", (0, _global_styling.logicalCSS)('bottom', 0), " display:flex;align-items:center;justify-content:center;", (0, _global_styling.logicalCSS)('padding-bottom', '10vh'), ";animation:", _global_styling.euiAnimFadeIn, " ", euiTheme.animation.fast, " ease-in;background:", (0, _services.transparentize)(euiTheme.colors.ink, 0.5), ";;label:euiOverlayMask;"),
+    euiOverlayMask: /*#__PURE__*/(0, _css.css)("position:fixed;", (0, _global_styling.logicalCSS)('top', 0), " ", (0, _global_styling.logicalCSS)('left', 0), " ", (0, _global_styling.logicalCSS)('right', 0), " ", (0, _global_styling.logicalCSS)('bottom', 0), " display:flex;align-items:center;justify-content:center;", (0, _global_styling.logicalCSS)('padding-bottom', '10vh'), " animation:", _global_styling.euiAnimFadeIn, " ", euiTheme.animation.fast, " ease-in;background:", (0, _services.transparentize)(euiTheme.colors.ink, 0.5), ";;label:euiOverlayMask;"),
     aboveHeader: /*#__PURE__*/(0, _css.css)("z-index:", euiTheme.levels.mask, ";;label:aboveHeader;"),
     belowHeader: /*#__PURE__*/(0, _css.css)("z-index:", euiTheme.levels.maskBelowHeader, ";", (0, _global_styling.logicalCSS)('top', "".concat(euiTheme.base * 3, "px")), ";;label:belowHeader;")
   };

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

@@ -17,7 +17,7 @@ var _global_styling = require("../../../global_styling");
 var euiPageHeaderStyles = function euiPageHeaderStyles(_ref) {
   var euiTheme = _ref.euiTheme;
   return {
-    euiPageHeader: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), ";", (0, _global_styling.logicalCSS)('min-width', '0'), ";display:flex;flex-direction:column;flex-shrink:0;;label:euiPageHeader;"),
+    euiPageHeader: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), (0, _global_styling.logicalCSS)('min-width', '0'), " display:flex;flex-direction:column;flex-shrink:0;;label:euiPageHeader;"),
     border: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-bottom', euiTheme.border.thin), ";;label:border;")
   };
 };

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

@@ -64,7 +64,7 @@ var _ref6 = process.env.NODE_ENV === "production" ? {
 var euiPageHeaderContentStyles = function euiPageHeaderContentStyles(_ref7) {
   var euiTheme = _ref7.euiTheme;
   return {
-    euiPageHeaderContent: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), ";", (0, _global_styling.logicalCSS)('margin-horizontal', 'auto'), ";;label:euiPageHeaderContent;"),
+    euiPageHeaderContent: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalCSS)('margin-horizontal', 'auto'), ";;label:euiPageHeaderContent;"),
     // alignItems
     top: _ref6,
     bottom: _ref5,
@@ -76,7 +76,7 @@ var euiPageHeaderContentStyles = function euiPageHeaderContentStyles(_ref7) {
     responsive: _ref2,
     responsiveReverse: _ref,
     // Content
-    euiPageHeaderContent__titleIcon: /*#__PURE__*/(0, _react.css)("position:relative;", (0, _global_styling.logicalCSS)('top', "-".concat(euiTheme.size.xs)), ";", (0, _global_styling.logicalCSS)('margin-right', euiTheme.size.base), ";;label:euiPageHeaderContent__titleIcon;")
+    euiPageHeaderContent__titleIcon: /*#__PURE__*/(0, _react.css)("position:relative;", (0, _global_styling.logicalCSS)('top', "-".concat(euiTheme.size.xs)), " ", (0, _global_styling.logicalCSS)('margin-right', euiTheme.size.base), ";;label:euiPageHeaderContent__titleIcon;")
   };
 };
 exports.euiPageHeaderContentStyles = euiPageHeaderContentStyles;

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

@@ -26,13 +26,13 @@ var _ref = process.env.NODE_ENV === "production" ? {
 var euiPageSectionStyles = function euiPageSectionStyles(_ref2) {
   var euiTheme = _ref2.euiTheme;
   return {
-    euiPageSection: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), ";", (0, _global_styling.logicalCSS)('min-width', '0'), ";display:flex;flex-direction:column;;label:euiPageSection;"),
+    euiPageSection: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), (0, _global_styling.logicalCSS)('min-width', '0'), " display:flex;flex-direction:column;;label:euiPageSection;"),
     grow: _ref,
     border: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-bottom', euiTheme.border.thin), ";;label:border;"),
     // Alignments
     top: /*#__PURE__*/(0, _react.css)(";label:top;"),
-    center: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', 'auto'), ";align-items:center;justify-content:center;;label:center;"),
-    horizontalCenter: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', 'auto'), ";align-items:center;;label:horizontalCenter;")
+    center: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', 'auto'), " align-items:center;justify-content:center;;label:center;"),
+    horizontalCenter: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', 'auto'), " align-items:center;;label:horizontalCenter;")
   };
 };
 exports.euiPageSectionStyles = euiPageSectionStyles;
@@ -40,7 +40,7 @@ var euiPageSectionContentStyles = function euiPageSectionContentStyles() {
   return {
     euiPageSection__content: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), ";;label:euiPageSection__content;"),
     // Alignments
-    center: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', 'auto'), ";", (0, _global_styling.logicalCSS)('margin-horizontal', 'auto'), ";;label:center;"),
+    center: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', 'auto'), " ", (0, _global_styling.logicalCSS)('margin-horizontal', 'auto'), ";;label:center;"),
     // Max widths
     restrictWidth: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-horizontal', 'auto'), ";;label:restrictWidth;")
   };

package/lib/components/page/page_sidebar/page_sidebar.styles.js

@@ -26,7 +26,7 @@ var euiPageSidebarStyles = function euiPageSidebarStyles(euiThemeContext) {
     euiPageSidebar: _ref,
     sticky: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiYScroll)(euiThemeContext, {
       height: 'auto'
-    }), ";flex-grow:1;position:sticky;;label:sticky;")
+    }), " flex-grow:1;position:sticky;;label:sticky;")
   };
 };
 exports.euiPageSidebarStyles = euiPageSidebarStyles;

package/lib/components/pagination/pagination.styles.js

@@ -25,9 +25,9 @@ var euiPaginationStyles = function euiPaginationStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    euiPagination: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiScrollBarStyles)(euiThemeContext), ";display:flex;align-items:center;", (0, _global_styling.logicalCSSWithFallback)('overflow-y', 'hidden'), ";", (0, _global_styling.logicalCSSWithFallback)('overflow-x', 'auto'), ";;label:euiPagination;"),
+    euiPagination: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiScrollBarStyles)(euiThemeContext), " display:flex;align-items:center;", (0, _global_styling.logicalCSSWithFallback)('overflow-y', 'hidden'), " ", (0, _global_styling.logicalCSSWithFallback)('overflow-x', 'auto'), ";;label:euiPagination;"),
     // Elements
-    euiPagination__compressedText: /*#__PURE__*/(0, _react.css)("display:inline-flex;align-items:center;line-height:1!important;>span{", (0, _global_styling.logicalCSS)('margin-horizontal', euiTheme.size.s), ";font-weight:", euiTheme.font.weight.semiBold, ";&:first-of-type{color:", euiTheme.colors.primaryText, ";}};label:euiPagination__compressedText;"),
+    euiPagination__compressedText: /*#__PURE__*/(0, _react.css)("display:inline-flex;align-items:center;line-height:1!important;>span{", (0, _global_styling.logicalCSS)('margin-horizontal', euiTheme.size.s), " font-weight:", euiTheme.font.weight.semiBold, ";&:first-of-type{color:", euiTheme.colors.primaryText, ";}};label:euiPagination__compressedText;"),
     euiPagination__list: _ref
   };
 };

package/lib/components/pagination/pagination_button.styles.js

@@ -27,10 +27,10 @@ var euiPaginationButtonStyles = function euiPaginationButtonStyles(euiThemeConte
 
   return {
     // Base
-    euiPaginationButton: /*#__PURE__*/(0, _react.css)("&&{", fontSizeS, ";padding:0;", (0, _global_styling.logicalTextAlignCSS)('center'), " border-radius:", euiTheme.border.radius.medium, ";outline-offset:-", euiTheme.focus.width, ";};label:euiPaginationButton;"),
+    euiPaginationButton: /*#__PURE__*/(0, _react.css)("&&{", fontSizeS, " padding:0;", (0, _global_styling.logicalTextAlignCSS)('center'), " border-radius:", euiTheme.border.radius.medium, ";outline-offset:-", euiTheme.focus.width, ";};label:euiPaginationButton;"),
     // States
     isActive: /*#__PURE__*/(0, _react.css)("&&{font-weight:", euiTheme.font.weight.bold, ";color:", euiTheme.colors.primary, ";.euiButtonEmpty__content{cursor:default;}&&,&&:hover{text-decoration:underline;}};label:isActive;"),
-    isPlaceholder: /*#__PURE__*/(0, _react.css)("&&{align-items:baseline;color:", disabled.color, ";", fontSizeS, ";", (0, _global_styling.logicalCSS)('padding-top', halfSizeM), ";", (0, _global_styling.logicalCSS)('padding-bottom', 0), ";", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.s), ";", (0, _global_styling.logicalCSS)('height', euiTheme.size.l), ";};label:isPlaceholder;")
+    isPlaceholder: /*#__PURE__*/(0, _react.css)("&&{align-items:baseline;color:", disabled.color, ";", fontSizeS, " ", (0, _global_styling.logicalCSS)('padding-top', halfSizeM), " ", (0, _global_styling.logicalCSS)('padding-bottom', 0), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.s), " ", (0, _global_styling.logicalCSS)('height', euiTheme.size.l), ";};label:isPlaceholder;")
   };
 };
 exports.euiPaginationButtonStyles = euiPaginationButtonStyles;

package/lib/components/panel/panel.styles.js

@@ -43,7 +43,7 @@ var euiPanelStyles = function euiPanelStyles(euiThemeContext) {
       m: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";;label:m;")
     },
     // Setup interactive behavior
-    isClickable: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{transition:box-shadow ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ",transform ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";}&:enabled{display:block;", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalTextAlignCSS)('left'), ";}&:hover,&:focus{", (0, _mixins.euiShadow)(euiThemeContext, 'l'), ";transform:translateY(-2px);cursor:pointer;};label:isClickable;")
+    isClickable: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{transition:box-shadow ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ",transform ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";}&:enabled{display:block;", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalTextAlignCSS)('left'), ";}&:hover,&:focus{", (0, _mixins.euiShadow)(euiThemeContext, 'l'), " transform:translateY(-2px);cursor:pointer;};label:isClickable;")
   };
 };
 exports.euiPanelStyles = euiPanelStyles;

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

@@ -24,12 +24,12 @@ var euiPopoverArrowStyles = function euiPopoverArrowStyles(euiThemeContext) {
   var arrowSize = euiTheme.size[popoverArrowSize];
   return {
     // Base
-    euiPopoverArrow: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalSizeCSS)(0, 0), "&:before{content:'';position:absolute;", (0, _global_styling.logicalSizeCSS)(0, 0), ";};label:euiPopoverArrow;"),
+    euiPopoverArrow: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalSizeCSS)(0, 0), "&::before{content:'';position:absolute;", (0, _global_styling.logicalSizeCSS)(0, 0), ";};label:euiPopoverArrow;"),
     // POSITIONS
-    top: /*#__PURE__*/(0, _react.css)("&:before{", _global_styling.logicals.bottom, ":-", arrowSize, ";", _global_styling.logicals['border-left'], ":", arrowSize, " solid transparent;", _global_styling.logicals['border-right'], ":", arrowSize, " solid transparent;", _global_styling.logicals['border-top'], ":", arrowSize, " solid ", borderColor, ";};label:top;"),
-    bottom: /*#__PURE__*/(0, _react.css)("&:before{", _global_styling.logicals.top, ":-", arrowSize, ";", _global_styling.logicals['border-left'], ":", arrowSize, " solid transparent;", _global_styling.logicals['border-right'], ":", arrowSize, " solid transparent;", _global_styling.logicals['border-bottom'], ":", arrowSize, " solid ", borderColor, ";};label:bottom;"),
-    left: /*#__PURE__*/(0, _react.css)("&:before{", _global_styling.logicals.top, ":50%;", _global_styling.logicals.right, ":-", arrowSize, ";", _global_styling.logicals['border-top'], ":", arrowSize, " solid transparent;", _global_styling.logicals['border-bottom'], ":", arrowSize, " solid transparent;", _global_styling.logicals['border-left'], ":", arrowSize, " solid ", borderColor, ";};label:left;"),
-    right: /*#__PURE__*/(0, _react.css)("&:before{", _global_styling.logicals.top, ":50%;", _global_styling.logicals.left, ":-", arrowSize, ";", _global_styling.logicals['border-top'], ":", arrowSize, " solid transparent;", _global_styling.logicals['border-bottom'], ":", arrowSize, " solid transparent;", _global_styling.logicals['border-right'], ":", arrowSize, " solid ", borderColor, ";};label:right;")
+    top: /*#__PURE__*/(0, _react.css)("&::before{", _global_styling.logicals.bottom, ":-", arrowSize, ";", _global_styling.logicals['border-left'], ":", arrowSize, " solid transparent;", _global_styling.logicals['border-right'], ":", arrowSize, " solid transparent;", _global_styling.logicals['border-top'], ":", arrowSize, " solid ", borderColor, ";};label:top;"),
+    bottom: /*#__PURE__*/(0, _react.css)("&::before{", _global_styling.logicals.top, ":-", arrowSize, ";", _global_styling.logicals['border-left'], ":", arrowSize, " solid transparent;", _global_styling.logicals['border-right'], ":", arrowSize, " solid transparent;", _global_styling.logicals['border-bottom'], ":", arrowSize, " solid ", borderColor, ";};label:bottom;"),
+    left: /*#__PURE__*/(0, _react.css)("&::before{", _global_styling.logicals.top, ":50%;", _global_styling.logicals.right, ":-", arrowSize, ";", _global_styling.logicals['border-top'], ":", arrowSize, " solid transparent;", _global_styling.logicals['border-bottom'], ":", arrowSize, " solid transparent;", _global_styling.logicals['border-left'], ":", arrowSize, " solid ", borderColor, ";};label:left;"),
+    right: /*#__PURE__*/(0, _react.css)("&::before{", _global_styling.logicals.top, ":50%;", _global_styling.logicals.left, ":-", arrowSize, ";", _global_styling.logicals['border-top'], ":", arrowSize, " solid transparent;", _global_styling.logicals['border-bottom'], ":", arrowSize, " solid transparent;", _global_styling.logicals['border-right'], ":", arrowSize, " solid ", borderColor, ";};label:right;")
   };
 };
 exports.euiPopoverArrowStyles = euiPopoverArrowStyles;

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

@@ -18,7 +18,7 @@ var euiPopoverFooterStyles = function euiPopoverFooterStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    euiPopoverFooter: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 's'), ";", (0, _global_styling.logicalCSS)('border-top', euiTheme.border.thin), ";;label:euiPopoverFooter;"),
+    euiPopoverFooter: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 's'), " ", (0, _global_styling.logicalCSS)('border-top', euiTheme.border.thin), ";;label:euiPopoverFooter;"),
     // If the popover's containing panel has padding applied,
     // ensure the title expands to cover that padding via negative margins
     panelPaddingSizes: {

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

@@ -31,7 +31,7 @@ var euiPopoverPanelStyles = function euiPopoverPanelStyles(euiThemeContext) {
     colorMode = euiThemeContext.colorMode;
   return {
     // Base
-    euiPopover__panel: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('min-width', "".concat(euiTheme.base * 7, "px")), ";", (0, _global_styling.logicalCSS)('max-width', "calc(100vw - ".concat(euiTheme.size.xl, ")")), ";backface-visibility:hidden;pointer-events:none;opacity:0;transform:translateY(0) translateX(0) translateZ(0);", (0, _mixins.euiShadowMedium)(euiThemeContext, {
+    euiPopover__panel: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('min-width', "".concat(euiTheme.base * 7, "px")), (0, _global_styling.logicalCSS)('max-width', "calc(100vw - ".concat(euiTheme.size.xl, ")")), "backface-visibility:hidden;pointer-events:none;opacity:0;transform:translateY(0) translateX(0) translateZ(0);", (0, _mixins.euiShadowMedium)(euiThemeContext, {
       property: 'filter'
     }), " &:focus{outline-offset:0;};label:euiPopover__panel;"),
     // Is visible / open

package/lib/components/popover/popover_title.styles.js

@@ -19,7 +19,7 @@ var euiPopoverTitleStyles = function euiPopoverTitleStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    euiPopoverTitle: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 'xxs'), ";", (0, _global_styling.logicalCSS)('border-bottom', euiTheme.border.thin), ";;label:euiPopoverTitle;"),
+    euiPopoverTitle: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 'xxs'), " ", (0, _global_styling.logicalCSS)('border-bottom', euiTheme.border.thin), ";;label:euiPopoverTitle;"),
     // If the popover's containing panel has padding applied,
     // ensure the title expands to cover that padding via negative margins
     panelPaddingSizes: {

package/lib/components/progress/progress.styles.js

@@ -24,7 +24,7 @@ var crossBrowserProgressValue = function crossBrowserProgressValue(cssProperties
   return "\n  &::-webkit-progress-value {\n    ".concat(cssProperties, "\n  }\n  &::-moz-progress-bar {\n    ").concat(cssProperties, "\n  }\n");
 };
 var indeterminateProgressValue = function indeterminateProgressValue(cssProperties) {
-  return "\n  &:before {\n    ".concat(cssProperties, "\n  }\n");
+  return "\n  &::before {\n    ".concat(cssProperties, "\n  }\n");
 };
 
 /**
@@ -66,11 +66,11 @@ var euiProgressStyles = function euiProgressStyles(_ref3, isNative) {
     // https://css-tricks.com/html5-progress-element/
     // Good resource if you need to work in here. There's some gotchas with
     // dealing with cross-browser progress bars.
-    native: /*#__PURE__*/(0, _react.css)("display:block;", (0, _global_styling.logicalCSS)('width', '100%'), " appearance:none;border:none;border-radius:", euiTheme.size.s, ";&::-webkit-progress-bar{background-color:", euiTheme.colors.lightShade, ";}", crossBrowserProgressValue("transition: width ".concat(euiTheme.animation.normal, " linear;")), ";;label:native;"),
+    native: /*#__PURE__*/(0, _react.css)("display:block;", (0, _global_styling.logicalCSS)('width', '100%'), " appearance:none;border:none;border-radius:", euiTheme.size.s, ";&::-webkit-progress-bar{background-color:", euiTheme.colors.lightShade, ";}", crossBrowserProgressValue('transition: width ${euiTheme.animation.normal} linear;'), ";;label:native;"),
     // An indeterminate bar has an unreliable end time. Because of a Firefox animation issue,
     // we apply this style to a <div> instead of a <progress> element.
     // See https://css-tricks.com/html5-progress-element/ for more info.
-    indeterminate: /*#__PURE__*/(0, _react.css)("&:before{position:absolute;content:'';", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalCSS)('top', 0), " ", (0, _global_styling.logicalCSS)('bottom', 0), " ", (0, _global_styling.logicalCSS)('left', 0), " transform:scaleX(0) translateX(0%);animation:", euiIndeterminateAnimation, " 1s ", euiTheme.animation.resistance, " infinite;", _global_styling.euiCantAnimate, "{animation-duration:2s;animation-timing-function:linear;}};label:indeterminate;"),
+    indeterminate: /*#__PURE__*/(0, _react.css)("&::before{position:absolute;content:'';", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalCSS)('top', 0), " ", (0, _global_styling.logicalCSS)('bottom', 0), " ", (0, _global_styling.logicalCSS)('left', 0), " transform:scaleX(0) translateX(0%);animation:", euiIndeterminateAnimation, " 1s ", euiTheme.animation.resistance, " infinite;", _global_styling.euiCantAnimate, "{animation-duration:2s;animation-timing-function:linear;}};label:indeterminate;"),
     // Sizes
     xs: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', euiTheme.size.xxs), ";;label:xs;"),
     s: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', euiTheme.size.xs), ";;label:s;"),

package/lib/components/skeleton/skeleton_title.styles.js

@@ -19,14 +19,14 @@ var _utils = require("./utils");
 var euiSkeletonTitleStyles = function euiSkeletonTitleStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiSkeletonTitle: /*#__PURE__*/(0, _react.css)("display:block;", (0, _global_styling.logicalCSS)('width', '45%'), ";border-radius:", euiTheme.border.radius.medium, ";", (0, _utils.euiSkeletonGradientAnimation)(euiThemeContext), ";;label:euiSkeletonTitle;"),
+    euiSkeletonTitle: /*#__PURE__*/(0, _react.css)("display:block;", (0, _global_styling.logicalCSS)('width', '45%'), " border-radius:", euiTheme.border.radius.medium, ";", (0, _utils.euiSkeletonGradientAnimation)(euiThemeContext), ";;label:euiSkeletonTitle;"),
     // Sizes
     l: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', (0, _title.euiTitle)(euiThemeContext, 'l').lineHeight), ";;label:l;"),
     m: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', (0, _title.euiTitle)(euiThemeContext, 'm').lineHeight), ";;label:m;"),
     s: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', (0, _title.euiTitle)(euiThemeContext, 's').lineHeight), ";;label:s;"),
     xs: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', (0, _title.euiTitle)(euiThemeContext, 'xs').lineHeight), ";;label:xs;"),
     xxs: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', (0, _title.euiTitle)(euiThemeContext, 'xxs').lineHeight), ";;label:xxs;"),
-    xxxs: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', (0, _title.euiTitle)(euiThemeContext, 'xxxs').lineHeight), ";border-radius:", euiTheme.border.radius.small, ";;label:xxxs;")
+    xxxs: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', (0, _title.euiTitle)(euiThemeContext, 'xxxs').lineHeight), " border-radius:", euiTheme.border.radius.small, ";;label:xxxs;")
   };
 };
 exports.euiSkeletonTitleStyles = euiSkeletonTitleStyles;

package/lib/components/steps/step_horizontal.styles.js

@@ -54,7 +54,7 @@ exports.euiStepHorizontalNumberStyles = euiStepHorizontalNumberStyles;
 var euiStepHorizontalTitleStyles = function euiStepHorizontalTitleStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiStepHorizontal__title: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 'xs'), ";margin-block-start:", euiTheme.size.s, ";font-weight:", euiTheme.font.weight.bold, ";text-align:center;", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{display:none;};label:euiStepHorizontal__title;"),
+    euiStepHorizontal__title: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 'xs'), " margin-block-start:", euiTheme.size.s, ";font-weight:", euiTheme.font.weight.bold, ";text-align:center;", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{display:none;};label:euiStepHorizontal__title;"),
     disabled: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.disabledText, ";;label:disabled;")
   };
 };

package/lib/components/steps/steps_horizontal.styles.js

@@ -12,7 +12,6 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
                                                                                                                                                                                                                                                                                            * in compliance with, at your election, the Elastic License 2.0 or the Server
                                                                                                                                                                                                                                                                                            * Side Public License, v 1.
                                                                                                                                                                                                                                                                                            */
-//  1. Make each step the same width
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "1pmkwst-euiStepsHorizontal__item",
   styles: "flex-grow:1;flex-basis:0%;&:first-of-type>.euiStepHorizontal::before,&:last-of-type>.euiStepHorizontal::after{display:none;};label:euiStepsHorizontal__item;"

package/lib/components/tabs/tab.styles.js

@@ -49,12 +49,12 @@ var euiTabContentStyles = function euiTabContentStyles(euiThemeContext) {
   return {
     euiTab__content: _ref,
     // sizes
-    s: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 'xxxs'), ";line-height:", euiTheme.size.xl, ";;label:s;"),
-    m: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 'xxs'), ";line-height:", euiTheme.size.xxl, ";;label:m;"),
-    l: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 'xs'), ";line-height:", (0, _global_styling.mathWithUnits)([euiTheme.size.xl, euiTheme.size.s], function (x, y) {
+    s: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 'xxxs'), " line-height:", euiTheme.size.xl, ";;label:s;"),
+    m: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 'xxs'), " line-height:", euiTheme.size.xxl, ";;label:m;"),
+    l: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 'xs'), " line-height:", (0, _global_styling.mathWithUnits)([euiTheme.size.xl, euiTheme.size.s], function (x, y) {
       return x + y;
     }), ";;label:l;"),
-    xl: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 's'), ";line-height:", (0, _global_styling.mathWithUnits)([euiTheme.size.xxxl, euiTheme.size.s], function (x, y) {
+    xl: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 's'), " line-height:", (0, _global_styling.mathWithUnits)([euiTheme.size.xxxl, euiTheme.size.s], function (x, y) {
       return x + y;
     }), ";;label:xl;"),
     // variations

package/lib/components/tabs/tabs.styles.js

@@ -17,7 +17,7 @@ var _global_styling = require("../../global_styling");
 var euiTabsStyles = function euiTabsStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiTabs: /*#__PURE__*/(0, _react.css)("display:flex;", (0, _global_styling.logicalCSS)('max-width', '100%'), ";", (0, _global_styling.logicalCSSWithFallback)('overflow-x', 'auto'), ";", (0, _global_styling.logicalCSSWithFallback)('overflow-y', 'hidden'), ";position:relative;flex-shrink:0;;label:euiTabs;"),
+    euiTabs: /*#__PURE__*/(0, _react.css)("display:flex;", (0, _global_styling.logicalCSS)('max-width', '100%'), " ", (0, _global_styling.logicalCSSWithFallback)('overflow-x', 'auto'), " ", (0, _global_styling.logicalCSSWithFallback)('overflow-y', 'hidden'), " position:relative;flex-shrink:0;;label:euiTabs;"),
     bottomBorder: /*#__PURE__*/(0, _react.css)("box-shadow:inset 0 -", euiTheme.border.width.thin, " 0 ", euiTheme.border.color, ";;label:bottomBorder;"),
     // sizes
     s: /*#__PURE__*/(0, _react.css)("gap:", euiTheme.size.m, ";;label:s;"),