@elastic/eui 82.0.0 → 82.2.0

package/test-env/components/badge/badge.styles.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiBadgeStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
-var _mixins = require("../../themes/amsterdam/global_styling/mixins");
 var _services = require("../../services");
+var _color_utils = require("./color_utils");
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
                                                                                                                                                                                                                                                                                            * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
                                                                                                                                                                                                                                                                                            * or more contributor license agreements. Licensed under the Elastic License
@@ -24,16 +24,26 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 var euiBadgeStyles = function euiBadgeStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme,
-    colorMode = euiThemeContext.colorMode;
+  var euiTheme = euiThemeContext.euiTheme;
+  var badgeColors = (0, _color_utils.euiBadgeColors)(euiThemeContext);
   return {
-    euiBadge: /*#__PURE__*/(0, _react.css)("display:inline-block;vertical-align:middle;", (0, _global_styling.logicalShorthandCSS)('padding', "0 ".concat(euiTheme.size.s)), " ", (0, _global_styling.logicalCSS)('max-width', '100%'), " font-size:", (0, _global_styling.euiFontSize)(euiThemeContext, 'xs').fontSize, ";line-height:", euiTheme.base + 2, "px;font-weight:", euiTheme.font.weight.medium, ";white-space:nowrap;text-decoration:none;cursor:default;background-color:transparent;border:", euiTheme.border.width.thin, " solid transparent;border-radius:", (0, _global_styling.mathWithUnits)(euiTheme.border.radius.medium, function (x) {
+    euiBadge: /*#__PURE__*/(0, _react.css)("display:inline-block;vertical-align:middle;", (0, _global_styling.logicalShorthandCSS)('padding', "0 ".concat(euiTheme.size.s)), " ", (0, _global_styling.logicalCSS)('max-width', '100%'), " font-size:", (0, _global_styling.euiFontSize)(euiThemeContext, 'xs').fontSize, ";line-height:", (0, _global_styling.mathWithUnits)(
+    // Account for the border
+    [euiTheme.size.base, euiTheme.border.width.thin], function (x, y) {
+      return x + y * 2;
+    }), ";font-weight:", euiTheme.font.weight.medium, ";white-space:nowrap;text-decoration:none;cursor:default;background-color:transparent;border:", euiTheme.border.width.thin, " solid transparent;border-radius:", (0, _global_styling.mathWithUnits)(euiTheme.border.radius.medium, function (x) {
       return x / 2;
     }), ";", (0, _global_styling.logicalTextAlignCSS)('left'), " &:focus-within{", (0, _global_styling.euiFocusRing)(euiThemeContext), ";}&+.euiBadge{", (0, _global_styling.logicalCSS)('margin-left', euiTheme.size.xs), ";};label:euiBadge;"),
     clickable: /*#__PURE__*/(0, _react.css)("&:not(:disabled){&:hover,&:focus{text-decoration:underline;}}&:focus{", (0, _global_styling.euiFocusRing)(euiThemeContext), ";}&:disabled{cursor:not-allowed;};label:clickable;"),
-    disabled: /*#__PURE__*/(0, _react.css)("color:", (0, _mixins.euiButtonColor)(euiThemeContext, 'disabled').color, "!important;background-color:", (0, _mixins.euiButtonColor)(euiThemeContext, 'disabled').backgroundColor, "!important;;label:disabled;"),
-    // Hollow has a border and is mostly used for autocompleters.
-    hollow: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.emptyShade, ";border-color:", colorMode === 'DARK' ? (0, _services.tint)(euiTheme.border.color, 0.15) : euiTheme.border.color, ";color:", euiTheme.colors.text, ";;label:hollow;"),
+    // Colors
+    default: /*#__PURE__*/(0, _react.css)(badgeColors.default, ";label:default;"),
+    hollow: /*#__PURE__*/(0, _react.css)("color:", badgeColors.hollow.color, ";background-color:", badgeColors.hollow.backgroundColor, ";border-color:", badgeColors.hollow.borderColor, ";;label:hollow;"),
+    primary: /*#__PURE__*/(0, _react.css)(badgeColors.primary, ";label:primary;"),
+    accent: /*#__PURE__*/(0, _react.css)(badgeColors.accent, ";label:accent;"),
+    warning: /*#__PURE__*/(0, _react.css)(badgeColors.warning, ";label:warning;"),
+    danger: /*#__PURE__*/(0, _react.css)(badgeColors.danger, ";label:danger;"),
+    success: /*#__PURE__*/(0, _react.css)(badgeColors.success, ";label:success;"),
+    disabled: /*#__PURE__*/(0, _react.css)("color:", badgeColors.disabled.color, "!important;background-color:", badgeColors.disabled.backgroundColor, "!important;;label:disabled;"),
     // Content wrapper
     euiBadge__content: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)(
     // Ensure proper height in case of just displaying an icon

package/test-env/components/badge/beta_badge/beta_badge.styles.js

@@ -1,14 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getBadgeColors = exports.euiBetaBadgeStyles = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+exports.euiBetaBadgeStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../../global_styling");
-var _services = require("../../../services");
+var _color_utils = require("../color_utils");
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
                                                                                                                                                                                                                                                                                            * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
                                                                                                                                                                                                                                                                                            * or more contributor license agreements. Licensed under the Elastic License
@@ -43,14 +41,15 @@ var _ref3 = process.env.NODE_ENV === "production" ? {
 var euiBetaBadgeStyles = function euiBetaBadgeStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
     colorMode = euiThemeContext.colorMode;
+  var badgeColors = (0, _color_utils.euiBadgeColors)(euiThemeContext);
   return {
     euiBetaBadge: /*#__PURE__*/(0, _react.css)("display:inline-block;border-radius:", euiTheme.size.l, ";cursor:default;font-weight:", euiTheme.font.weight.bold, ";text-transform:uppercase;letter-spacing:0.05em;text-align:center;", (0, _global_styling.euiTextTruncate)(), " &:focus{", (0, _global_styling.euiFocusRing)(euiThemeContext, 'outset', {
       color: colorMode === 'DARK' ? euiTheme.colors.ghost : euiTheme.colors.ink
     }), ";};label:euiBetaBadge;"),
     // Colors
-    accent: /*#__PURE__*/(0, _react.css)(getBadgeColors(euiTheme.colors.accentText, euiThemeContext), ";;label:accent;"),
-    subdued: /*#__PURE__*/(0, _react.css)(getBadgeColors((0, _services.tint)(euiTheme.colors.lightShade, 0.3), euiThemeContext), ";;label:subdued;"),
-    hollow: /*#__PURE__*/(0, _react.css)(getBadgeColors(euiTheme.colors.emptyShade, euiThemeContext), " box-shadow:inset 0 0 0 ", euiTheme.border.width.thin, " ", euiTheme.border.color, ";;label:hollow;"),
+    accent: /*#__PURE__*/(0, _react.css)(badgeColors.accentText, ";label:accent;"),
+    subdued: /*#__PURE__*/(0, _react.css)(badgeColors.subdued, ";label:subdued;"),
+    hollow: /*#__PURE__*/(0, _react.css)("color:", badgeColors.hollow.color, ";background-color:", badgeColors.hollow.backgroundColor, ";box-shadow:inset 0 0 0 ", euiTheme.border.width.thin, " ", badgeColors.hollow.borderColor, ";;label:hollow;"),
     // Font sizes
     m: /*#__PURE__*/(0, _react.css)("font-size:", (0, _global_styling.euiFontSizeFromScale)('xs', euiTheme), ";line-height:", euiTheme.size.l, ";;label:m;"),
     s: /*#__PURE__*/(0, _react.css)("font-size:0.625rem;line-height:", (0, _global_styling.mathWithUnits)(euiTheme.size.xs, function (x) {
@@ -76,12 +75,4 @@ var euiBetaBadgeStyles = function euiBetaBadgeStyles(euiThemeContext) {
     middle: _ref
   };
 };
-
-// Util for detecting text color based on badge bg color
-exports.euiBetaBadgeStyles = euiBetaBadgeStyles;
-var getBadgeColors = function getBadgeColors(backgroundColor, _ref4) {
-  var euiTheme = _ref4.euiTheme;
-  var textColor = _services.isColorDark.apply(void 0, (0, _toConsumableArray2.default)((0, _services.hexToRgb)(backgroundColor))) ? euiTheme.colors.ghost : euiTheme.colors.ink;
-  return "\n    background-color: ".concat(backgroundColor, ";\n    color: ").concat(textColor, ";\n  ");
-};
-exports.getBadgeColors = getBadgeColors;
+exports.euiBetaBadgeStyles = euiBetaBadgeStyles;

package/test-env/components/badge/color_utils.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTextColor = exports.getIsValidColor = exports.getColorContrast = exports.getBadgeColors = exports.euiBadgeColors = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _chromaJs = _interopRequireDefault(require("chroma-js"));
+var _services = require("../../services");
+var _mixins = require("../../themes/amsterdam/global_styling/mixins");
+var _utils = require("../color_picker/utils");
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } /*
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          * or more contributor license agreements. Licensed under the Elastic License
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          * 2.0 and the Server Side Public License, v 1; you may not use this file except
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          * in compliance with, at your election, the Elastic License 2.0 or the Server
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          * Side Public License, v 1.
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          */
+var euiBadgeColors = function euiBadgeColors(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme,
+    colorMode = euiThemeContext.colorMode;
+  return {
+    // Colors shared between buttons and badges
+    primary: (0, _mixins.euiButtonFillColor)(euiThemeContext, 'primary'),
+    success: (0, _mixins.euiButtonFillColor)(euiThemeContext, 'success'),
+    warning: (0, _mixins.euiButtonFillColor)(euiThemeContext, 'warning'),
+    danger: (0, _mixins.euiButtonFillColor)(euiThemeContext, 'danger'),
+    accent: (0, _mixins.euiButtonFillColor)(euiThemeContext, 'accent'),
+    disabled: (0, _mixins.euiButtonColor)(euiThemeContext, 'disabled'),
+    // Colors unique to badges
+    default: getBadgeColors(euiThemeContext, euiTheme.colors.lightShade),
+    // Hollow has a border and is used for autocompleters and beta badges
+    hollow: _objectSpread(_objectSpread({}, getBadgeColors(euiThemeContext, euiTheme.colors.emptyShade)), {}, {
+      borderColor: colorMode === 'DARK' ? (0, _services.tint)(euiTheme.border.color, 0.15) : euiTheme.border.color
+    }),
+    // Colors used by beta and notification badges
+    subdued: getBadgeColors(euiThemeContext, (0, _services.tint)(euiTheme.colors.lightShade, 0.3)),
+    accentText: getBadgeColors(euiThemeContext, euiTheme.colors.accentText)
+  };
+};
+exports.euiBadgeColors = euiBadgeColors;
+var getBadgeColors = function getBadgeColors(euiThemeContext, backgroundColor) {
+  var color = getTextColor(euiThemeContext, backgroundColor);
+  return {
+    backgroundColor: backgroundColor,
+    color: color
+  };
+};
+exports.getBadgeColors = getBadgeColors;
+var getTextColor = function getTextColor(_ref, bgColor) {
+  var euiTheme = _ref.euiTheme;
+  var textColor = _services.isColorDark.apply(void 0, (0, _toConsumableArray2.default)((0, _chromaJs.default)(bgColor).rgb())) ? euiTheme.colors.ghost : euiTheme.colors.ink;
+  return textColor;
+};
+exports.getTextColor = getTextColor;
+var getColorContrast = function getColorContrast(textColor, color) {
+  return _chromaJs.default.contrast(textColor, color);
+};
+exports.getColorContrast = getColorContrast;
+var getIsValidColor = function getIsValidColor(color) {
+  return (0, _utils.chromaValid)((0, _utils.parseColor)(color || '') || '');
+};
+exports.getIsValidColor = getIsValidColor;

package/test-env/components/badge/notification_badge/badge_notification.js

@@ -21,7 +21,7 @@ var _excluded = ["children", "className", "size", "color"];
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var COLORS = ['accent', 'subdued'];
+var COLORS = ['accent', 'subdued', 'success'];
 exports.COLORS = COLORS;
 var SIZES = ['s', 'm'];
 exports.SIZES = SIZES;

package/test-env/components/badge/notification_badge/badge_notification.styles.js

@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiNotificationBadgeStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../../global_styling");
-var _services = require("../../../services");
-var _beta_badge = require("../beta_badge/beta_badge.styles");
+var _color_utils = require("../color_utils");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -18,6 +17,7 @@ var _beta_badge = require("../beta_badge/beta_badge.styles");
 
 var euiNotificationBadgeStyles = function euiNotificationBadgeStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var badgeColors = (0, _color_utils.euiBadgeColors)(euiThemeContext);
   return {
     euiNotificationBadge: /*#__PURE__*/(0, _react.css)("flex-shrink:0;display:inline-block;vertical-align:middle;", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), " border-radius:", euiTheme.border.radius.small, ";cursor:default;font-size:", (0, _global_styling.euiFontSizeFromScale)('xs', euiTheme), ";font-weight:", euiTheme.font.weight.medium, ";", (0, _global_styling.euiNumberFormat)(euiThemeContext), " text-align:center;", _global_styling.euiCanAnimate, "{transition:all ", euiTheme.animation.fast, " ease-in;};label:euiNotificationBadge;"),
     // Sizes
@@ -28,8 +28,9 @@ var euiNotificationBadgeStyles = function euiNotificationBadgeStyles(euiThemeCon
       return x + euiTheme.base;
     })), " ", (0, _global_styling.logicalCSS)('min-width', euiTheme.size.l), ";;label:m;"),
     // Colors
-    accent: /*#__PURE__*/(0, _react.css)((0, _beta_badge.getBadgeColors)(euiTheme.colors.accentText, euiThemeContext), ";;label:accent;"),
-    subdued: /*#__PURE__*/(0, _react.css)((0, _beta_badge.getBadgeColors)((0, _services.tint)(euiTheme.colors.lightShade, 0.3), euiThemeContext), ";;label:subdued;")
+    accent: /*#__PURE__*/(0, _react.css)(badgeColors.accentText, ";label:accent;"),
+    success: /*#__PURE__*/(0, _react.css)(badgeColors.success, ";label:success;"),
+    subdued: /*#__PURE__*/(0, _react.css)(badgeColors.subdued, ";label:subdued;")
   };
 };
 exports.euiNotificationBadgeStyles = euiNotificationBadgeStyles;

package/test-env/components/beacon/beacon.styles.js

@@ -25,7 +25,7 @@ var euiBeaconStyles = function euiBeaconStyles(_ref) {
   var euiTheme = _ref.euiTheme;
   return {
     // Base
-    euiBeacon: /*#__PURE__*/(0, _react.css)("position:relative;border-radius:50%;&:before,&:after{position:absolute;content:'';", (0, _global_styling.logicalSizeCSS)('100%', '100%'), " ", (0, _global_styling.logicalCSS)('left', 0), " ", (0, _global_styling.logicalCSS)('top', 0), " background-color:transparent;border-radius:50%;}&:before{transform:scale(1.6);opacity:0.4;}&:after{opacity:0;}", _global_styling.euiCanAnimate, "{&:before{animation:", euiBeaconPulseLarge, " 2.5s infinite ease-out;}&:after{animation:", euiBeaconPulseSmall, " 2.5s infinite ease-out 0.25s;}};label:euiBeacon;"),
+    euiBeacon: /*#__PURE__*/(0, _react.css)("position:relative;border-radius:50%;&::before,&::after{position:absolute;content:'';", (0, _global_styling.logicalSizeCSS)('100%', '100%'), " ", (0, _global_styling.logicalCSS)('left', 0), " ", (0, _global_styling.logicalCSS)('top', 0), " background-color:transparent;border-radius:50%;}&::before{transform:scale(1.6);opacity:0.4;}&::after{opacity:0;}", _global_styling.euiCanAnimate, "{&::before{animation:", euiBeaconPulseLarge, " 2.5s infinite ease-out;}&::after{animation:", euiBeaconPulseSmall, " 2.5s infinite ease-out 0.25s;}};label:euiBeacon;"),
     subdued: /*#__PURE__*/(0, _react.css)(_colorCSS(euiTheme.colors.subduedText), ";label:subdued;"),
     primary: /*#__PURE__*/(0, _react.css)(_colorCSS(euiTheme.colors.primary), ";label:primary;"),
     success: /*#__PURE__*/(0, _react.css)(_colorCSS(euiTheme.colors.success), ";label:success;"),

package/test-env/components/bottom_bar/bottom_bar.styles.js

@@ -24,7 +24,7 @@ var euiBottomBarStyles = function euiBottomBarStyles(euiThemeContext) {
   return {
     // Base
     // `color` is inherited from the wrapping `EuiThemeProvider colorMode="dark"`
-    euiBottomBar: /*#__PURE__*/(0, _react.css)((0, _mixins.euiShadowFlat)(euiThemeContext), ";background:", (0, _services.shade)(euiTheme.colors.lightestShade, 0.5), ";", _global_styling.euiCanAnimate, "{animation:", euiBottomBarAppear, " ", euiTheme.animation.slow, " ", euiTheme.animation.resistance, ";};label:euiBottomBar;"),
+    euiBottomBar: /*#__PURE__*/(0, _react.css)((0, _mixins.euiShadowFlat)(euiThemeContext), " background:", (0, _services.shade)(euiTheme.colors.lightestShade, 0.5), ";", _global_styling.euiCanAnimate, "{animation:", euiBottomBarAppear, " ", euiTheme.animation.slow, " ", euiTheme.animation.resistance, ";};label:euiBottomBar;"),
     static: /*#__PURE__*/(0, _react.css)(";label:static;"),
     fixed: /*#__PURE__*/(0, _react.css)("z-index:", Number(euiTheme.levels.header) - 2, ";;label:fixed;"),
     sticky: /*#__PURE__*/(0, _react.css)("z-index:", Number(euiTheme.levels.header) - 2, ";;label:sticky;"),

package/test-env/components/breadcrumbs/breadcrumb.styles.js

@@ -40,7 +40,7 @@ var euiBreadcrumbStyles = function euiBreadcrumbStyles(euiThemeContext) {
     isTruncated: _ref2,
     isCollapsed: _ref,
     // Types
-    page: /*#__PURE__*/(0, _react.css)("&:not(:last-of-type){&:after{background:", euiTheme.colors.lightShade, ";content:'';flex-shrink:0;", (0, _global_styling.logicalCSS)('margin-top', euiTheme.size.xs), " ", (0, _global_styling.logicalCSS)('margin-bottom', 0), " ", (0, _global_styling.logicalCSS)('margin-horizontal', euiTheme.size.s), " ", (0, _global_styling.logicalCSS)('height', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('width', '1px'), " transform:translateY(-1px) rotate(15deg);}};label:page;"),
+    page: /*#__PURE__*/(0, _react.css)("&:not(:last-of-type){&::after{background:", euiTheme.colors.lightShade, ";content:'';flex-shrink:0;", (0, _global_styling.logicalCSS)('margin-top', euiTheme.size.xs), " ", (0, _global_styling.logicalCSS)('margin-bottom', 0), " ", (0, _global_styling.logicalCSS)('margin-horizontal', euiTheme.size.s), " ", (0, _global_styling.logicalCSS)('height', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('width', '1px'), " transform:translateY(-1px) rotate(15deg);}};label:page;"),
     application: /*#__PURE__*/(0, _react.css)("&:not(:last-of-type){", (0, _global_styling.logicalCSS)('margin-right', "-".concat(euiTheme.size.xs)), ";};label:application;")
   };
 };
@@ -56,11 +56,11 @@ var euiBreadcrumbContentStyles = function euiBreadcrumbContentStyles(euiThemeCon
     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)(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;"),
+    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)((0, _global_styling.logicalBorderRadiusCSS)("".concat(euiTheme.border.radius.medium, " 0 0 ").concat(euiTheme.border.radius.medium), true), " 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;"),
-      lastChild: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalBorderRadiusCSS)("0 ".concat(euiTheme.border.radius.medium, " ").concat(euiTheme.border.radius.medium, " 0"), true), " clip-path:polygon(\n          0 0,\n          100% 0,\n          100% 100%,\n          0 100%,\n          ", euiTheme.size.s, " 50%\n        );", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.m), ",;;label:lastChild;")
+      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)((0, _global_styling.logicalBorderRadiusCSS)("".concat(euiTheme.border.radius.medium, " 0 0 ").concat(euiTheme.border.radius.medium), true), " 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;"),
+      lastChild: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalBorderRadiusCSS)("0 ".concat(euiTheme.border.radius.medium, " ").concat(euiTheme.border.radius.medium, " 0"), true), " clip-path:polygon(\n          0 0,\n          100% 0,\n          100% 100%,\n          0 100%,\n          ", euiTheme.size.s, " 50%\n        );", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.m), ";;label:lastChild;")
     }
   };
 };

package/test-env/components/breadcrumbs/breadcrumbs.styles.js

@@ -25,9 +25,11 @@ var euiBreadcrumbsListStyles = function euiBreadcrumbsListStyles(euiThemeContext
   // Styles cast to the <ol> element
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiBreadcrumbs__list: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 's'), ";align-items:center;display:flex;flex-wrap:wrap;line-height:", euiTheme.size.l, ";", (0, _global_styling.logicalCSS)(
+    euiBreadcrumbs__list: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 's'), " align-items:center;display:flex;flex-wrap:wrap;line-height:", euiTheme.size.l, ";", (0, _global_styling.logicalCSS)(
     // Add vertical space between breadcrumbs, but make sure the whole breadcrumb set doesn't add space below itself
-    'margin-bottom', "-".concat(euiTheme.size.xs)), " ", (0, _global_styling.logicalCSS)('min-width', 0), ";;label:euiBreadcrumbs__list;"),
+    'margin-bottom', "-".concat(euiTheme.size.xs)), " ", (0, _global_styling.logicalCSS)(
+    // Ensure it shrinks if the window is narrow
+    'min-width', 0), ";;label:euiBreadcrumbs__list;"),
     isTruncated: _ref
   };
 };

package/test-env/components/button/button.js

@@ -1,25 +1,20 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sizeToClassNameMap = exports.colorToClassNameMap = exports.SIZES = exports.EuiButtonDisplayDeprecated = exports.EuiButton = exports.COLORS = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+exports.SIZES = exports.EuiButton = exports.COLORS = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _button_content_deprecated = require("./_button_content_deprecated");
+var _react = _interopRequireDefault(require("react"));
 var _button = require("../../themes/amsterdam/global_styling/mixins/button");
 var _button_display = require("./button_display/_button_display");
 var _services = require("../../services");
 var _react2 = require("@emotion/react");
-var _excluded = ["buttonRef", "color", "fill"],
-  _excluded2 = ["element", "baseClassName", "children", "className", "iconType", "iconSide", "color", "size", "isDisabled", "isLoading", "isSelected", "contentProps", "textProps", "fullWidth", "minWidth", "style"];
+var _excluded = ["buttonRef", "color", "fill"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -27,10 +22,6 @@ var _excluded = ["buttonRef", "color", "fill"],
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var COLORS = [].concat((0, _toConsumableArray2.default)(_button.BUTTON_COLORS), ['ghost']);
 exports.COLORS = COLORS;
 var SIZES = ['s', 'm'];
@@ -120,123 +111,4 @@ EuiButton.displayName = 'EuiButton';
 EuiButton.defaultProps = {
   size: 'm',
   color: 'primary'
-};
-var sizeToClassNameMap = {
-  s: '--small',
-  m: null
-};
-exports.sizeToClassNameMap = sizeToClassNameMap;
-var colorToClassNameMap = {
-  primary: '--primary',
-  accent: '--accent',
-  success: '--success',
-  warning: '--warning',
-  danger: '--danger',
-  ghost: '--ghost',
-  text: '--text'
-};
-
-/**
- * *DEPRECATED*
- * EuiButtonDisplay is an internal-only component used for displaying
- * any element as a button.
- * NOTE: This component *must* be below EuiButton in the file and
- * EuiButton must also set a displayName for react-docgen-typescript
- * to correctly set EuiButton's docgenInfo and display a props table.
- * This component has been deprecated in favor of the new EuiButtonDisplay
- * that can be found in `src/components/button/button_display/_button_display.tsx`
- */
-exports.colorToClassNameMap = colorToClassNameMap;
-var EuiButtonDisplayDeprecated = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var _ref$element = _ref.element,
-    element = _ref$element === void 0 ? 'button' : _ref$element,
-    baseClassName = _ref.baseClassName,
-    children = _ref.children,
-    className = _ref.className,
-    iconType = _ref.iconType,
-    _ref$iconSide = _ref.iconSide,
-    iconSide = _ref$iconSide === void 0 ? 'left' : _ref$iconSide,
-    color = _ref.color,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'm' : _ref$size,
-    isDisabled = _ref.isDisabled,
-    isLoading = _ref.isLoading,
-    isSelected = _ref.isSelected,
-    contentProps = _ref.contentProps,
-    textProps = _ref.textProps,
-    fullWidth = _ref.fullWidth,
-    minWidth = _ref.minWidth,
-    style = _ref.style,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded2);
-  var buttonIsDisabled = (0, _button_display.isButtonDisabled)({
-    isLoading: isLoading,
-    isDisabled: isDisabled
-  });
-  var classes = (0, _classnames.default)(baseClassName, color && colorToClassNameMap[color] ? "".concat(baseClassName).concat(colorToClassNameMap[color]) : undefined, size && sizeToClassNameMap[size] ? "".concat(baseClassName).concat(sizeToClassNameMap[size]) : null, fullWidth && "".concat(baseClassName, "--fullWidth"), className);
-
-  /**
-   * Not changing the content or text class names to match baseClassName yet,
-   * as it is a major breaking change.
-   */
-  var contentClassNames = (0, _classnames.default)('euiButton__content', contentProps && contentProps.className);
-  var textClassNames = (0, _classnames.default)('euiButton__text', textProps && textProps.className);
-  var innerNode = (0, _react2.jsx)(_button_content_deprecated.EuiButtonContentDeprecated, (0, _extends2.default)({
-    isLoading: isLoading,
-    iconType: iconType,
-    iconSide: iconSide,
-    textProps: _objectSpread(_objectSpread({}, textProps), {}, {
-      className: textClassNames
-    })
-  }, contentProps, {
-    // className has to come last to override contentProps.className
-    className: contentClassNames
-  }), children);
-  var calculatedStyle = style;
-  if (minWidth !== undefined || minWidth !== null) {
-    calculatedStyle = _objectSpread(_objectSpread({}, calculatedStyle), {}, {
-      // @ts-ignore - deprecated component
-      minWidth: minWidth
-    });
-  }
-  return /*#__PURE__*/_react.default.createElement(element, _objectSpread({
-    className: classes,
-    style: calculatedStyle,
-    disabled: element === 'button' && buttonIsDisabled,
-    'aria-pressed': element === 'button' ? isSelected : undefined,
-    ref: ref
-  }, rest), innerNode);
-});
-exports.EuiButtonDisplayDeprecated = EuiButtonDisplayDeprecated;
-EuiButtonDisplayDeprecated.propTypes = {
-  children: _propTypes.default.node,
-  /**
-     * Make button a solid color for prominence
-     */
-  fill: _propTypes.default.bool,
-  /**
-     * Any of the named color palette options.
-     * **`'ghost'` is set for deprecation. Use EuiThemeProvide.colorMode = 'dark' instead.**
-     */
-  color: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf(["ghost"])]),
-  /**
-     * Use size `s` in confined spaces
-     */
-  size: _propTypes.default.any,
-  /**
-     * `disabled` is also allowed
-     */
-  isDisabled: _propTypes.default.bool,
-  className: _propTypes.default.string,
-  "aria-label": _propTypes.default.string,
-  "data-test-subj": _propTypes.default.string,
-  css: _propTypes.default.any,
-  /**
-       * Provide a valid element to render the element as
-       */
-  element: _propTypes.default.oneOf(["a", "button", "span", "label"]).isRequired,
-  /**
-       * Provide the component's base class name to build the class list on
-       */
-  baseClassName: _propTypes.default.string.isRequired
-};
-EuiButtonDisplayDeprecated.displayName = 'EuiButtonDisplay';
+};

package/test-env/components/button/button_display/_button_display.js

@@ -17,8 +17,7 @@ var _services = require("../../../services");
 var _button_display = require("./_button_display.styles");
 var _button_display_content = require("./_button_display_content");
 var _href_validator = require("../../../services/security/href_validator");
-var _mixins = require("../../../themes/amsterdam/global_styling/mixins");
-var _excluded = ["children", "iconType", "iconSide", "iconSize", "size", "isDisabled", "disabled", "isLoading", "isSelected", "fullWidth", "minWidth", "contentProps", "textProps", "href", "target", "rel", "type", "style"];
+var _excluded = ["element", "type", "children", "iconType", "iconSide", "iconSize", "size", "isDisabled", "disabled", "isLoading", "isSelected", "fullWidth", "minWidth", "contentProps", "textProps", "href", "target", "rel", "style"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -51,7 +50,11 @@ function isButtonDisabled(_ref) {
  * any element as a button.
  */
 var EuiButtonDisplay = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
-  var children = _ref2.children,
+  var _ref2$element = _ref2.element,
+    _element = _ref2$element === void 0 ? 'button' : _ref2$element,
+    _ref2$type = _ref2.type,
+    type = _ref2$type === void 0 ? 'button' : _ref2$type,
+    children = _ref2.children,
     iconType = _ref2.iconType,
     _ref2$iconSide = _ref2.iconSide,
     iconSide = _ref2$iconSide === void 0 ? 'left' : _ref2$iconSide,
@@ -69,8 +72,6 @@ var EuiButtonDisplay = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref)
     href = _ref2.href,
     target = _ref2.target,
     rel = _ref2.rel,
-    _ref2$type = _ref2.type,
-    type = _ref2$type === void 0 ? 'button' : _ref2$type,
     style = _ref2.style,
     rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
   var buttonIsDisabled = isButtonDisabled({
@@ -80,8 +81,7 @@ var EuiButtonDisplay = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref)
   });
   var theme = (0, _services.useEuiTheme)();
   var styles = (0, _button_display.euiButtonDisplayStyles)(theme);
-  var buttonRadiusStyle = (0, _mixins.useEuiButtonRadiusCSS)()[size];
-  var cssStyles = [styles.euiButtonDisplay, styles[size], fullWidth && styles.fullWidth, minWidth == null && styles.defaultMinWidth, buttonIsDisabled && styles.isDisabled, buttonRadiusStyle];
+  var cssStyles = [styles.euiButtonDisplay, styles[size], fullWidth && styles.fullWidth, minWidth == null && styles.defaultMinWidth, buttonIsDisabled && styles.isDisabled];
   var innerNode = (0, _react2.jsx)(_button_display_content.EuiButtonDisplayContent, (0, _extends2.default)({
     isLoading: isLoading,
     isDisabled: buttonIsDisabled,
@@ -90,7 +90,7 @@ var EuiButtonDisplay = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref)
     iconSize: iconSize,
     textProps: textProps
   }, contentProps), children);
-  var element = href && !buttonIsDisabled ? 'a' : 'button';
+  var element = buttonIsDisabled ? 'button' : href ? 'a' : _element;
   var elementProps = {};
   // Element-specific attributes
   if (element === 'button') {
@@ -123,6 +123,7 @@ exports.EuiButtonDisplay = EuiButtonDisplay;
 EuiButtonDisplay.propTypes = {
   href: _propTypes.default.string,
   onClick: _propTypes.default.func,
+  element: _propTypes.default.oneOf(["a", "button", "span", "label"]),
   children: _propTypes.default.node,
   size: _propTypes.default.any,
   /**

package/test-env/components/button/button_display/_button_display.styles.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiButtonDisplayStyles = exports.euiButtonBaseCSS = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../../global_styling");
+var _mixins = require("../../../themes/amsterdam/global_styling/mixins");
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
                                                                                                                                                                                                                                                                                            * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
                                                                                                                                                                                                                                                                                            * or more contributor license agreements. Licensed under the Elastic License
@@ -19,9 +20,6 @@ var euiButtonBaseCSS = function euiButtonBaseCSS() {
   return "\n    display: inline-block;\n    appearance: none;\n    cursor: pointer;\n    ".concat((0, _global_styling.logicalTextAlignStyle)('center'), ";\n    white-space: nowrap;\n    ").concat((0, _global_styling.logicalCSS)('max-width', '100%'), ";\n    vertical-align: middle;\n  ");
 };
 exports.euiButtonBaseCSS = euiButtonBaseCSS;
-var _buttonSize = function _buttonSize(size) {
-  return "\n    ".concat((0, _global_styling.logicalCSS)('height', size), ";\n    // prevents descenders from getting cut off\n    line-height: ").concat(size, ";\n  ");
-};
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "8595p9-isDisabled",
   styles: "cursor:not-allowed;label:isDisabled;"
@@ -32,17 +30,22 @@ var _ref = process.env.NODE_ENV === "production" ? {
 };
 var euiButtonDisplayStyles = function euiButtonDisplayStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var sizes = (0, _mixins.euiButtonSizeMap)(euiThemeContext);
+  var _buttonSize = function _buttonSize(sizeKey) {
+    var size = sizes[sizeKey];
+    return /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', size.height), " line-height:", size.height, ";", (0, _global_styling.euiFontSize)(euiThemeContext, size.fontScale), " border-radius:", size.radius, ";");
+  };
   return {
     // Base
-    euiButtonDisplay: /*#__PURE__*/(0, _react.css)(euiButtonBaseCSS(), ";font-weight:", euiTheme.font.weight.medium, ";", (0, _global_styling.logicalShorthandCSS)('padding', "0 ".concat(euiTheme.size.m)), " &:hover:not(:disabled),&:focus{text-decoration:underline;};label:euiButtonDisplay;"),
+    euiButtonDisplay: /*#__PURE__*/(0, _react.css)(euiButtonBaseCSS(), " font-weight:", euiTheme.font.weight.medium, ";", (0, _global_styling.logicalShorthandCSS)('padding', "0 ".concat(euiTheme.size.m)), " &:hover:not(:disabled),&:focus{text-decoration:underline;};label:euiButtonDisplay;"),
     // States
     isDisabled: _ref,
     fullWidth: /*#__PURE__*/(0, _react.css)("display:block;", (0, _global_styling.logicalCSS)('width', '100%'), ";;label:fullWidth;"),
     defaultMinWidth: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', "".concat(euiTheme.base * 7, "px")), ";;label:defaultMinWidth;"),
     // Sizes
-    xs: /*#__PURE__*/(0, _react.css)(_buttonSize(euiTheme.size.l), (0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), ";label:xs;"),
-    s: /*#__PURE__*/(0, _react.css)(_buttonSize(euiTheme.size.xl), (0, _global_styling.euiFontSize)(euiThemeContext, 's'), ";label:s;"),
-    m: /*#__PURE__*/(0, _react.css)(_buttonSize(euiTheme.size.xxl), (0, _global_styling.euiFontSize)(euiThemeContext, 's'), ";label:m;")
+    xs: /*#__PURE__*/(0, _react.css)(_buttonSize('xs'), ";label:xs;"),
+    s: /*#__PURE__*/(0, _react.css)(_buttonSize('s'), ";label:s;"),
+    m: /*#__PURE__*/(0, _react.css)(_buttonSize('m'), ";label:m;")
   };
 };
 exports.euiButtonDisplayStyles = euiButtonDisplayStyles;

package/test-env/components/button/button_display/_button_display_content.styles.js

@@ -18,7 +18,7 @@ var euiButtonDisplayContentStyles = function euiButtonDisplayContentStyles(_ref)
   var euiTheme = _ref.euiTheme;
   return {
     // Base
-    euiButtonDisplayContent: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', '100%'), ";", (0, _global_styling.logicalCSS)('width', '100%'), ";display:flex;justify-content:center;align-items:center;vertical-align:middle;gap:", euiTheme.size.s, ";;label:euiButtonDisplayContent;")
+    euiButtonDisplayContent: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', '100%'), " ", (0, _global_styling.logicalCSS)('width', '100%'), " display:flex;justify-content:center;align-items:center;vertical-align:middle;gap:", euiTheme.size.s, ";;label:euiButtonDisplayContent;")
   };
 };
 exports.euiButtonDisplayContentStyles = euiButtonDisplayContentStyles;