@elastic/eui 59.0.0 → 59.1.0

package/test-env/components/facet/facet_button.js

@@ -23,6 +23,14 @@ var _loading = require("../loading");
 
 var _inner_text = require("../inner_text");
 
+var _clone_element = require("../../services/theme/clone_element");
+
+var _services = require("../../services");
+
+var _facet_button = require("./facet_button.styles");
+
+var _button_display = require("../button/button_display/_button_display");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["children", "className", "icon", "isDisabled", "isLoading", "isSelected", "quantity", "buttonRef"];
@@ -42,20 +50,30 @@ var EuiFacetButton = function EuiFacetButton(_ref) {
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   // If in the loading state, force disabled to true
   isDisabled = isLoading ? true : isDisabled;
-  var classes = (0, _classnames.default)('euiFacetButton', {
-    'euiFacetButton--isSelected': isSelected,
-    'euiFacetButton--unSelected': !isSelected
-  }, className); // Add quantity number if provided or loading indicator
+  var selection = isSelected ? 'isSelected' : 'unSelected';
+  var classes = (0, _classnames.default)('euiFacetButton', className);
+  var theme = (0, _services.useEuiTheme)();
+  var styles = (0, _facet_button.euiFacetButtonStyles)(theme);
+  var cssStyles = [styles.euiFacetButton];
+  var textStyles = (0, _facet_button.euiFacetButtonTextStyles)(theme);
+  var cssTextStyles = [textStyles.euiFacetButton__text, textStyles[selection]];
+  var quantityStyles = (0, _facet_button.euiFacetButtonQuantityStyles)();
+  var cssQuantityStyles = [quantityStyles.euiFacetButton__quantity, isDisabled && quantityStyles.isDisabled];
+  var iconStyles = (0, _facet_button.euiFacetButtonIconStyles)();
+  var cssIconStyles = [iconStyles.euiFacetButton__icon, isDisabled && quantityStyles.isDisabled];
+  var loadingSpinnerStyles = (0, _facet_button.euiFacetButtonLoadingSpinnerStyles)();
+  var cssLoadingSpinnerStyles = [loadingSpinnerStyles.euiFacetButton__loadingSpinner]; // Add quantity number if provided or loading indicator
 
   var buttonQuantity;
 
   if (isLoading) {
     buttonQuantity = (0, _react2.jsx)(_loading.EuiLoadingSpinner, {
-      className: "euiFacetButton__spinner",
+      css: cssLoadingSpinnerStyles,
       size: "m"
     });
   } else if (typeof quantity === 'number') {
     buttonQuantity = (0, _react2.jsx)(_badge.EuiNotificationBadge, {
+      css: cssQuantityStyles,
       className: "euiFacetButton__quantity",
       size: "m",
       color: !isSelected || isDisabled ? 'subdued' : 'accent'
@@ -66,25 +84,27 @@ var EuiFacetButton = function EuiFacetButton(_ref) {
   var buttonIcon;
 
   if ( /*#__PURE__*/_react.default.isValidElement(icon)) {
-    buttonIcon = /*#__PURE__*/_react.default.cloneElement(icon, {
-      className: (0, _classnames.default)(icon.props.className, 'euiFacetButton__icon')
+    buttonIcon = (0, _clone_element.cloneElementWithCss)(icon, {
+      css: cssIconStyles,
+      className: 'euiFacetButton__icon'
     });
   }
 
   return (0, _react2.jsx)(_inner_text.EuiInnerText, null, function (ref, innerText) {
-    return (0, _react2.jsx)("button", (0, _extends2.default)({
+    return (0, _react2.jsx)(_button_display.EuiButtonDisplay, (0, _extends2.default)({
       className: classes,
-      disabled: isDisabled,
-      type: "button",
+      css: cssStyles,
+      element: "button",
+      isDisabled: isDisabled,
       ref: buttonRef,
-      title: rest['aria-label'] || innerText
-    }, rest), (0, _react2.jsx)("span", {
-      className: "euiFacetButton__content"
-    }, buttonIcon, (0, _react2.jsx)("span", {
+      title: rest['aria-label'] || innerText,
+      size: "s"
+    }, rest), buttonIcon, (0, _react2.jsx)("span", {
+      css: cssTextStyles,
       className: "euiFacetButton__text",
       "data-text": innerText,
       ref: ref
-    }, children), buttonQuantity));
+    }, children), buttonQuantity);
   });
 };
 

package/test-env/components/facet/facet_button.styles.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiFacetButtonTextStyles = exports.euiFacetButtonStyles = exports.euiFacetButtonQuantityStyles = exports.euiFacetButtonLoadingSpinnerStyles = exports.euiFacetButtonIconStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _global_styling = require("../../global_styling");
+
+var _link = require("../link/link.styles");
+
+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)."; }
+
+var euiFacetButtonStyles = function euiFacetButtonStyles(_ref3) {
+  var euiTheme = _ref3.euiTheme;
+  return {
+    // Base
+    euiFacetButton: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('left'), ";&:hover,&:focus{&:not(:disabled) [class*='euiFacetButton__text']{text-decoration:underline;}}&:focus:not(:disabled) [class*='euiFacetButton__text']{", (0, _link.euiLinkFocusCSS)(euiTheme), ";}&:disabled{color:", euiTheme.colors.disabledText, ";pointer-events:none;&:hover,&:focus{text-decoration:none;}};label:euiFacetButton;")
+  };
+};
+
+exports.euiFacetButtonStyles = euiFacetButtonStyles;
+
+var euiFacetButtonTextStyles = function euiFacetButtonTextStyles(_ref4) {
+  var euiTheme = _ref4.euiTheme;
+  return {
+    euiFacetButton__text: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextShift)('bold', 'data-text', euiTheme), " ", (0, _global_styling.euiTextTruncate)(), " flex-grow:1;;label:euiFacetButton__text;"),
+    isSelected: /*#__PURE__*/(0, _react.css)("font-weight:", euiTheme.font.weight.bold, ";;label:isSelected;"),
+    unSelected: /*#__PURE__*/(0, _react.css)(";label:unSelected;")
+  };
+};
+
+exports.euiFacetButtonTextStyles = euiFacetButtonTextStyles;
+
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "mpq8zy-isDisabled",
+  styles: "opacity:0.5;label:isDisabled;"
+} : {
+  name: "mpq8zy-isDisabled",
+  styles: "opacity:0.5;label:isDisabled;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var euiFacetButtonIconStyles = function euiFacetButtonIconStyles() {
+  return {
+    euiFacetButton__icon: /*#__PURE__*/(0, _react.css)(";label:euiFacetButton__icon;"),
+    isDisabled: _ref2
+  };
+};
+
+exports.euiFacetButtonIconStyles = euiFacetButtonIconStyles;
+
+var euiFacetButtonLoadingSpinnerStyles = function euiFacetButtonLoadingSpinnerStyles() {
+  return {
+    euiFacetButton__loadingSpinner: /*#__PURE__*/(0, _react.css)(";label:euiFacetButton__loadingSpinner;")
+  };
+};
+
+exports.euiFacetButtonLoadingSpinnerStyles = euiFacetButtonLoadingSpinnerStyles;
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "mpq8zy-isDisabled",
+  styles: "opacity:0.5;label:isDisabled;"
+} : {
+  name: "mpq8zy-isDisabled",
+  styles: "opacity:0.5;label:isDisabled;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var euiFacetButtonQuantityStyles = function euiFacetButtonQuantityStyles() {
+  return {
+    euiFacetButton__quantity: /*#__PURE__*/(0, _react.css)(";label:euiFacetButton__quantity;"),
+    isDisabled: _ref
+  };
+};
+
+exports.euiFacetButtonQuantityStyles = euiFacetButtonQuantityStyles;

package/test-env/components/facet/facet_group.js

@@ -17,26 +17,16 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _common = require("../common");
+var _services = require("../../services");
 
-var _flex = require("../flex");
+var _facet_group = require("./facet_group.styles");
 
 var _react2 = require("@emotion/react");
 
 var _excluded = ["children", "className", "layout", "gutterSize"];
-var layoutToClassNameMap = {
-  vertical: 'euiFacetGroup--vertical',
-  horizontal: 'euiFacetGroup--horizontal'
-};
-var LAYOUTS = (0, _common.keysOf)(layoutToClassNameMap);
+var LAYOUTS = ['vertical', 'horizontal'];
 exports.LAYOUTS = LAYOUTS;
-var gutterSizeToClassNameMap = {
-  none: 'euiFacetGroup--gutterNone',
-  s: 'euiFacetGroup--gutterSmall',
-  m: 'euiFacetGroup--gutterMedium',
-  l: 'euiFacetGroup--gutterLarge'
-};
-var GUTTER_SIZES = (0, _common.keysOf)(gutterSizeToClassNameMap);
+var GUTTER_SIZES = ['none', 's', 'm', 'l'];
 exports.GUTTER_SIZES = GUTTER_SIZES;
 
 var EuiFacetGroup = function EuiFacetGroup(_ref) {
@@ -47,14 +37,13 @@ var EuiFacetGroup = function EuiFacetGroup(_ref) {
       _ref$gutterSize = _ref.gutterSize,
       gutterSize = _ref$gutterSize === void 0 ? 'm' : _ref$gutterSize,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var classes = (0, _classnames.default)('euiFacetGroup', layoutToClassNameMap[layout], gutterSizeToClassNameMap[gutterSize], className);
-  var direction = layout === 'vertical' ? 'column' : 'row';
-  var wrap = layout === 'vertical' ? false : true;
-  return (0, _react2.jsx)(_flex.EuiFlexGroup, (0, _extends2.default)({
+  var theme = (0, _services.useEuiTheme)();
+  var styles = (0, _facet_group.euiFacetGroupStyles)(theme, layout);
+  var cssStyles = [styles.euiFacetGroup, styles[gutterSize], styles[layout]];
+  var classes = (0, _classnames.default)('euiFacetGroup', className);
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
     className: classes,
-    direction: direction,
-    wrap: wrap,
-    gutterSize: "none"
+    css: cssStyles
   }, rest), children);
 };
 
@@ -67,11 +56,11 @@ EuiFacetGroup.propTypes = {
   /**
        * Vertically in a column, or horizontally in one wrapping line
        */
-  layout: _propTypes.default.oneOf(["vertical", "horizontal"]),
+  layout: _propTypes.default.any,
 
   /**
        * Distance between facet buttons.
        * Horizontal layout always adds more distance horizontally between buttons.
        */
-  gutterSize: _propTypes.default.oneOf(["none", "s", "m", "l"])
+  gutterSize: _propTypes.default.any
 };

package/test-env/components/facet/facet_group.styles.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiFacetGroupStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _services = require("../../services");
+
+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)."; }
+
+var _facetGroupGutterSize = function _facetGroupGutterSize(_ref4) {
+  var gutterSize = _ref4.gutterSize,
+      layout = _ref4.layout;
+
+  var _useEuiTheme = (0, _services.useEuiTheme)(),
+      euiTheme = _useEuiTheme.euiTheme;
+
+  var isHorizontalLayout = layout === 'horizontal';
+  var gutterHorizontal = "calc(".concat(euiTheme.size.m, " + ").concat(gutterSize, ")");
+  var gutterVertical = gutterSize;
+  return isHorizontalLayout ? "gap: ".concat(gutterVertical, " ").concat(gutterHorizontal, ";") : "gap: ".concat(gutterVertical, " 0;");
+};
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "omnk2l-vertical",
+  styles: "flex-direction:column;label:vertical;"
+} : {
+  name: "omnk2l-vertical",
+  styles: "flex-direction:column;label:vertical;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "envaaw-horizontal",
+  styles: "flex-direction:row;flex-wrap:wrap;label:horizontal;"
+} : {
+  name: "envaaw-horizontal",
+  styles: "flex-direction:row;flex-wrap:wrap;label:horizontal;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var _ref3 = process.env.NODE_ENV === "production" ? {
+  name: "1g68sie-euiFacetGroup",
+  styles: "display:flex;flex-grow:1;label:euiFacetGroup;"
+} : {
+  name: "1g68sie-euiFacetGroup",
+  styles: "display:flex;flex-grow:1;label:euiFacetGroup;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var euiFacetGroupStyles = function euiFacetGroupStyles(_ref5, layout) {
+  var euiTheme = _ref5.euiTheme;
+  return {
+    // Base
+    euiFacetGroup: _ref3,
+    // Gutter sizes
+    none: /*#__PURE__*/(0, _react.css)(_facetGroupGutterSize({
+      gutterSize: '0',
+      layout: layout
+    }), ";label:none;"),
+    s: /*#__PURE__*/(0, _react.css)(_facetGroupGutterSize({
+      gutterSize: euiTheme.size.xs,
+      layout: layout
+    }), ";label:s;"),
+    m: /*#__PURE__*/(0, _react.css)(_facetGroupGutterSize({
+      gutterSize: euiTheme.size.s,
+      layout: layout
+    }), ";label:m;"),
+    l: /*#__PURE__*/(0, _react.css)(_facetGroupGutterSize({
+      gutterSize: euiTheme.size.m,
+      layout: layout
+    }), ";label:l;"),
+    // layouts
+    horizontal: _ref2,
+    vertical: _ref
+  };
+};
+
+exports.euiFacetGroupStyles = euiFacetGroupStyles;

package/test-env/components/header/header_links/header_link.js

@@ -117,7 +117,8 @@ EuiHeaderLink.propTypes = {
   iconSide: _propTypes.default.oneOf(["left", "right"]),
 
   /**
-     * Object of props passed to the <span/> wrapping the content's text/children only (not icon)
+     * 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.
      */
   textProps: _propTypes.default.shape({
     className: _propTypes.default.string,

package/test-env/components/loading/loading_spinner.js

@@ -25,7 +25,7 @@ var _loading_spinner = require("./loading_spinner.styles");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["size", "className", "aria-label"];
+var _excluded = ["size", "className", "aria-label", "color"];
 var SIZES = ['s', 'm', 'l', 'xl', 'xxl'];
 exports.SIZES = SIZES;
 
@@ -34,9 +34,10 @@ var EuiLoadingSpinner = function EuiLoadingSpinner(_ref) {
       size = _ref$size === void 0 ? 'm' : _ref$size,
       className = _ref.className,
       ariaLabel = _ref['aria-label'],
+      color = _ref.color,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _loading_spinner.euiLoadingSpinnerStyles)(euiTheme);
+  var styles = (0, _loading_spinner.euiLoadingSpinnerStyles)(euiTheme, color);
   var cssStyles = [styles.euiLoadingSpinner, styles[size]];
   var classes = (0, _classnames.default)('euiLoadingSpinner', className);
   var defaultLabel = (0, _loading_strings.useLoadingAriaLabel)();
@@ -53,5 +54,15 @@ EuiLoadingSpinner.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
-  size: _propTypes.default.any
+  size: _propTypes.default.any,
+
+  /**
+       * Sets the color of the border and highlight.
+       * Each key accepts any valid CSS color value as a `string`
+       * See #EuiLoadingSpinnerColor
+       */
+  color: _propTypes.default.shape({
+    border: _propTypes.default.any,
+    highlight: _propTypes.default.any
+  })
 };

package/test-env/components/loading/loading_spinner.styles.js

@@ -25,14 +25,14 @@ var spinnerSizes = {
   xxl: 'xxl'
 };
 
-var spinnerColors = function spinnerColors(main, highlight) {
-  return "".concat(highlight, " ").concat(main, " ").concat(main, " ").concat(main);
+var spinnerColorsCSS = function spinnerColorsCSS(border, highlight) {
+  return "\n    border-color: ".concat(highlight, " ").concat(border, " ").concat(border, " ").concat(border, ";\n  ");
 };
 
-var euiLoadingSpinnerStyles = function euiLoadingSpinnerStyles(_ref) {
+var euiLoadingSpinnerStyles = function euiLoadingSpinnerStyles(_ref, color) {
   var euiTheme = _ref.euiTheme;
   return {
-    euiLoadingSpinner: /*#__PURE__*/(0, _react.css)("flex-shrink:0;display:inline-block;border-radius:50%;border:", euiTheme.border.thick, ";border-color:", spinnerColors(euiTheme.border.color, euiTheme.colors.primary), ";", _global_styling.euiCanAnimate, "{animation:", _loadingSpinner, " 0.6s infinite linear;};label:euiLoadingSpinner;"),
+    euiLoadingSpinner: /*#__PURE__*/(0, _react.css)("flex-shrink:0;display:inline-block;border-radius:50%;border:", euiTheme.border.thick, ";", spinnerColorsCSS((color === null || color === void 0 ? void 0 : color.border) || euiTheme.colors.lightShade, (color === null || color === void 0 ? void 0 : color.highlight) || euiTheme.colors.primary), ";", _global_styling.euiCanAnimate, "{animation:", _loadingSpinner, " 0.6s infinite linear;};label:euiLoadingSpinner;"),
     // Sizes
     s: /*#__PURE__*/(0, _react.css)("width:", euiTheme.size[spinnerSizes.s], ";height:", euiTheme.size[spinnerSizes.s], ";border-width:calc(", euiTheme.border.width.thin, " * 1.5);;label:s;"),
     m: /*#__PURE__*/(0, _react.css)("width:", euiTheme.size[spinnerSizes.m], ";height:", euiTheme.size[spinnerSizes.m], ";border-width:calc(", euiTheme.border.width.thin, " * 1.5);;label:m;"),

package/test-env/components/notification/notification_event.js

@@ -282,7 +282,8 @@ EuiNotificationEvent.propTypes = {
     iconSide: _propTypes.default.oneOf(["left", "right"]),
 
     /**
-       * Object of props passed to the <span/> wrapping the content's text/children only (not icon)
+       * 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.
        */
     textProps: _propTypes.default.shape({
       className: _propTypes.default.string,

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

@@ -27,7 +27,7 @@ var _text_align = require("./text_align");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["size", "color", "grow", "textAlign", "children", "className", "style"];
+var _excluded = ["size", "color", "grow", "textAlign", "children", "className"];
 var TEXT_SIZES = ['xs', 's', 'm', 'relative'];
 exports.TEXT_SIZES = TEXT_SIZES;
 
@@ -40,7 +40,6 @@ var EuiText = function EuiText(_ref) {
       textAlign = _ref.textAlign,
       children = _ref.children,
       className = _ref.className,
-      style = _ref.style,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _text.euiTextStyles)(euiTheme);
@@ -54,7 +53,6 @@ var EuiText = function EuiText(_ref) {
   if (color) {
     text = (0, _react2.jsx)(_text_color.EuiTextColor, {
       color: color,
-      style: style,
       cloneElement: true
     }, text);
   }

package/test-env/components/text/text_align.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,7 +13,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -23,6 +25,10 @@ var _react2 = require("@emotion/react");
 
 var _excluded = ["children", "textAlign", "cloneElement"];
 
+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); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -44,7 +50,7 @@ var EuiTextAlign = function EuiTextAlign(_ref) {
     css: cssStyles
   }, rest);
 
-  if (cloneElement) {
+  if ( /*#__PURE__*/(0, _react.isValidElement)(children) && cloneElement) {
     return (0, _clone_element.cloneElementWithCss)(children, props);
   } else {
     return (0, _react2.jsx)("div", props, children);

package/test-env/components/text/text_color.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,7 +13,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -25,6 +27,10 @@ var _react2 = require("@emotion/react");
 
 var _excluded = ["children", "color", "component", "cloneElement", "style"];
 
+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); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -58,8 +64,12 @@ var EuiTextColor = function EuiTextColor(_ref) {
     style: euiTextStyle
   }, rest);
 
-  if (cloneElement) {
-    return (0, _clone_element.cloneElementWithCss)(children, props);
+  if ( /*#__PURE__*/(0, _react.isValidElement)(children) && cloneElement) {
+    var childrenStyle = _objectSpread(_objectSpread({}, children.props.style), euiTextStyle);
+
+    return (0, _clone_element.cloneElementWithCss)(children, _objectSpread(_objectSpread({}, props), {}, {
+      style: childrenStyle
+    }));
   } else {
     var Component = component;
     return (0, _react2.jsx)(Component, props, children);

package/test-env/themes/amsterdam/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _shadow = require("./global_styling/mixins/shadow");
+
+Object.keys(_shadow).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _shadow[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _shadow[key];
+    }
+  });
+});

package/test-env/themes/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  EUI_THEMES: true,
+  isDefaultTheme: true,
+  AMSTERDAM_NAME_KEY: true,
+  EuiThemeAmsterdam: true
+};
 Object.defineProperty(exports, "AMSTERDAM_NAME_KEY", {
   enumerable: true,
   get: function get() {
@@ -30,4 +36,18 @@ Object.defineProperty(exports, "isDefaultTheme", {
 
 var _themes = require("./themes");
 
-var _theme = require("./amsterdam/theme");
+var _theme = require("./amsterdam/theme");
+
+var _amsterdam = require("./amsterdam");
+
+Object.keys(_amsterdam).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _amsterdam[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _amsterdam[key];
+    }
+  });
+});

package/src/components/facet/_facet_button.scss

@@ -1,69 +0,0 @@
-/**
- * 1. Make sure the quantity doesn't get an underline on hover
- */
-.euiFacetButton {
-  @include euiButtonBase;
-  @include euiFont;
-  @include euiFontSizeS;
-
-  height: $euiButtonHeightSmall;
-  text-align: left;
-  text-decoration: none;
-  transition: all $euiAnimSpeedFast ease-in;
-
-  &:hover,
-  &:focus {
-    &:not(:disabled) .euiFacetButton__text {
-      text-decoration: underline; /* 1 */
-    }
-  }
-
-  &:focus {
-    background-color: $euiFocusBackgroundColor;
-    // use box-shadow as a "faux outline" to apply left/right padding only
-    box-shadow: -$euiSizeXS 0 $euiFocusBackgroundColor, $euiSizeXS 0 $euiFocusBackgroundColor;
-  }
-
-  &:disabled {
-    color: $euiButtonColorDisabledText;
-    pointer-events: none;
-
-    .euiFacetButton__content {
-      pointer-events: auto;
-      cursor: not-allowed;
-    }
-
-    .euiFacetButton__icon,
-    .euiFacetButton__quantity {
-      opacity: .5;
-    }
-
-    &:focus {
-      background-color: transparent;
-    }
-
-    &:hover,
-    &:focus {
-      text-decoration: none;
-    }
-  }
-}
-
-.euiFacetButton__content {
-  @include euiButtonContent;
-}
-
-.euiFacetButton__text {
-  @include euiTextShift;
-  @include euiTextTruncate;
-  flex-grow: 1;
-  vertical-align: middle;
-
-  .euiFacetButton--isSelected & {
-    font-weight: $euiFontWeightBold;
-  }
-}
-
-.euiFacetButton__icon {
-  transition: all $euiAnimSpeedFast ease-in;
-}

package/src/components/facet/_facet_group.scss

@@ -1,24 +0,0 @@
-@each $gutterName, $gutterSize in $euiFacetGutterSizes {
-  .euiFacetGroup--#{$gutterName} {
-    .euiFacetButton {
-      // Split the margin between top and bottom
-      margin-top: $gutterSize / 2;
-      margin-bottom: $gutterSize / 2;
-    }
-
-    &.euiFacetGroup--horizontal {
-      // There needs to be an additional distance between horizontal buttons to ensure
-      // the number notification is closer in proximity to the text it belongs to rather than the button
-      $gutterAdjustment: $euiSizeM + $gutterSize;
-
-      // Collapse margin on the right side of the group to allow it to extend the full width
-      margin-left: -#{$gutterAdjustment};
-
-      .euiFacetButton {
-        margin-left: $gutterAdjustment;
-        // Adjust the max-width so it fits within the allotted margin
-        max-width: calc(100% - #{$gutterAdjustment});
-      }
-    }
-  }
-}

package/src/components/facet/_index.scss

@@ -1,4 +0,0 @@
-@import 'variables';
-
-@import 'facet_button';
-@import 'facet_group';