@elastic/eui 84.0.0 → 85.0.0

package/optimize/lib/components/provider/nested/nested_context.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIsNestedEuiProvider = exports.EuiProviderNestedCheck = exports.EuiNestedProviderContext = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+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; }
+/*
+ * 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.
+ */
+
+/**
+ * This util creates a context for EuiProviders to use and determine if they're
+ * the only (top-most) EuiProvider in the app. If they aren't (i.e., they're
+ * nested within another EuiProvider) we should throw a warning and not
+ * render instantiate the nested EuiProvider.
+ */
+
+var EuiNestedProviderContext = /*#__PURE__*/(0, _react.createContext)(false);
+exports.EuiNestedProviderContext = EuiNestedProviderContext;
+var EuiProviderNestedCheck = function EuiProviderNestedCheck(_ref) {
+  var children = _ref.children;
+  return (0, _react2.jsx)(EuiNestedProviderContext.Provider, {
+    value: true
+  }, children);
+};
+exports.EuiProviderNestedCheck = EuiProviderNestedCheck;
+var useIsNestedEuiProvider = function useIsNestedEuiProvider() {
+  return !!(0, _react.useContext)(EuiNestedProviderContext);
+};
+exports.useIsNestedEuiProvider = useIsNestedEuiProvider;

package/optimize/lib/components/provider/provider.js

@@ -10,8 +10,10 @@ var _css = require("@emotion/css");
 var _global_styles = require("../../global_styling/reset/global_styles");
 var _utility = require("../../global_styling/utility/utility");
 var _services = require("../../services");
+var _warning = require("../../services/theme/warning");
 var _themes = require("../../themes");
 var _cache = require("./cache");
+var _nested = require("./nested");
 var _react2 = require("@emotion/react");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -37,6 +39,12 @@ var EuiProvider = function EuiProvider(_ref) {
     colorMode = _ref.colorMode,
     modify = _ref.modify,
     children = _ref.children;
+  var isNested = (0, _nested.useIsNestedEuiProvider)();
+  if (isNested) {
+    var providerMessage = "`EuiProvider` should not be nested or used more than once, other than at the top level of your app.\n    Use `EuiThemeProvider` instead for nested component-level theming: https://ela.st/euiprovider.";
+    (0, _warning.emitEuiProviderWarning)(providerMessage);
+    return children;
+  }
   var defaultCache;
   var globalCache;
   var utilityCache;
@@ -59,7 +67,7 @@ var EuiProvider = function EuiProvider(_ref) {
       utilityCache = cache.utility;
     }
   }
-  return (0, _react2.jsx)(_cache.EuiCacheProvider, {
+  return (0, _react2.jsx)(_nested.EuiProviderNestedCheck, null, (0, _react2.jsx)(_cache.EuiCacheProvider, {
     cache: (_defaultCache = defaultCache) !== null && _defaultCache !== void 0 ? _defaultCache : _css.cache
   }, (0, _react2.jsx)(_services.EuiThemeProvider, {
     theme: theme !== null && theme !== void 0 ? theme : undefined,
@@ -71,6 +79,6 @@ var EuiProvider = function EuiProvider(_ref) {
   }), (0, _react2.jsx)(_cache.EuiCacheProvider, {
     cache: utilityCache,
     children: Utilities && (0, _react2.jsx)(Utilities, null)
-  })), (0, _react2.jsx)(_services.CurrentEuiBreakpointProvider, null, children)));
+  })), (0, _react2.jsx)(_services.CurrentEuiBreakpointProvider, null, children))));
 };
 exports.EuiProvider = EuiProvider;

package/optimize/lib/components/search_bar/filters/field_value_selection_filter.js

@@ -16,9 +16,11 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
+var _services = require("../../../services");
 var _predicate = require("../../../services/predicate");
 var _popover = require("../../popover");
 var _filter_group = require("../../filter_group");
+var _filter_group2 = require("../../filter_group/filter_group.styles");
 var _selectable = require("../../selectable");
 var _query4 = require("../query");
 var _ast = require("../query/ast");
@@ -309,38 +311,42 @@ var FieldValueSelectionFilter = /*#__PURE__*/function (_Component) {
           }
         };
       }
-      return (0, _react2.jsx)(_popover.EuiPopover, {
-        button: button,
-        isOpen: this.state.popoverOpen,
-        closePopover: this.closePopover.bind(this),
-        panelPaddingSize: "none",
-        anchorPosition: "downCenter",
-        panelClassName: "euiFilterGroup__popoverPanel"
-      }, (0, _react2.jsx)(_selectable.EuiSelectable, (0, _extends2.default)({
-        singleSelection: !multiSelect,
-        "aria-label": config.name,
-        options: items,
-        renderOption: function renderOption(option) {
-          return option.view;
-        },
-        isLoading: (0, _predicate.isNil)(this.state.options),
-        loadingMessage: config.loadingMessage || defaults.config.loadingMessage,
-        emptyMessage: config.noOptionsMessage || defaults.config.noOptionsMessage,
-        errorMessage: this.state.error,
-        noMatchesMessage: config.noOptionsMessage || defaults.config.noOptionsMessage,
-        listProps: {
-          isVirtualized: isOverSearchThreshold || false
-        },
-        onChange: function onChange(options, event, changedOption) {
-          if (changedOption.data) {
-            _this5.onOptionClick(changedOption.data.optionField, changedOption.data.value, changedOption.checked);
+      return (0, _react2.jsx)(_services.RenderWithEuiTheme, null, function (euiThemeContext) {
+        return (0, _react2.jsx)(_popover.EuiPopover, {
+          button: button,
+          isOpen: _this5.state.popoverOpen,
+          closePopover: _this5.closePopover.bind(_this5),
+          panelPaddingSize: "none",
+          anchorPosition: "downCenter",
+          panelProps: {
+            css: (0, _filter_group2.euiFilterGroupStyles)(euiThemeContext).euiFilterGroup__popoverPanel
           }
-        }
-      }, searchProps), function (list, search) {
-        return (0, _react2.jsx)(_react.default.Fragment, null, isOverSearchThreshold && (0, _react2.jsx)(_popover.EuiPopoverTitle, {
-          paddingSize: "s"
-        }, search), list);
-      }));
+        }, (0, _react2.jsx)(_selectable.EuiSelectable, (0, _extends2.default)({
+          singleSelection: !multiSelect,
+          "aria-label": config.name,
+          options: items,
+          renderOption: function renderOption(option) {
+            return option.view;
+          },
+          isLoading: (0, _predicate.isNil)(_this5.state.options),
+          loadingMessage: config.loadingMessage || defaults.config.loadingMessage,
+          emptyMessage: config.noOptionsMessage || defaults.config.noOptionsMessage,
+          errorMessage: _this5.state.error,
+          noMatchesMessage: config.noOptionsMessage || defaults.config.noOptionsMessage,
+          listProps: {
+            isVirtualized: isOverSearchThreshold || false
+          },
+          onChange: function onChange(options, event, changedOption) {
+            if (changedOption.data) {
+              _this5.onOptionClick(changedOption.data.optionField, changedOption.data.value, changedOption.checked);
+            }
+          }
+        }, searchProps), function (list, search) {
+          return (0, _react2.jsx)(_react.default.Fragment, null, isOverSearchThreshold && (0, _react2.jsx)(_popover.EuiPopoverTitle, {
+            paddingSize: "s"
+          }, search), list);
+        }));
+      });
     }
   }, {
     key: "resolveChecked",

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

@@ -14,7 +14,7 @@ var _step_strings = require("./step_strings");
 var _services = require("../../services");
 var _step_horizontal = require("./step_horizontal.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "step", "title", "onClick", "disabled", "status"];
+var _excluded = ["className", "step", "title", "onClick", "disabled", "status", "size"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -31,12 +31,14 @@ var EuiStepHorizontal = function EuiStepHorizontal(_ref) {
     disabled = _ref.disabled,
     _ref$status = _ref.status,
     status = _ref$status === void 0 ? 'incomplete' : _ref$status,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'm' : _ref$size,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   if (disabled) status = 'disabled';
   var classes = (0, _classnames.default)('euiStepHorizontal', className);
   var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _step_horizontal.euiStepHorizontalStyles)(euiTheme);
-  var cssStyles = [styles.euiStepHorizontal, status === 'disabled' ? styles.disabled : styles.enabled];
+  var cssStyles = [styles.euiStepHorizontal, styles[size], status === 'disabled' ? styles.disabled : styles.enabled];
   var numberStyles = (0, _step_horizontal.euiStepHorizontalNumberStyles)(euiTheme);
   var cssNumberStyles = [numberStyles.euiStepHorizontal__number];
   var titleStyles = (0, _step_horizontal.euiStepHorizontalTitleStyles)(euiTheme);
@@ -90,6 +92,8 @@ var EuiStepHorizontal = function EuiStepHorizontal(_ref) {
     className: "euiStepHorizontal__number",
     status: status,
     number: step,
+    titleSize: size === 's' ? 'xs' : 'm' // The titleSize map is not 1 to 1; small == xs on the titleSize map
+    ,
     css: cssNumberStyles
   }), (0, _react2.jsx)("span", {
     className: "euiStepHorizontal__title",

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

@@ -33,10 +33,16 @@ var euiStepHorizontalStyles = function euiStepHorizontalStyles(euiThemeContext)
    *    e.g. due to some of their titles wrapping to multiple lines
    */
 
-  return {
-    euiStepHorizontal: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalShorthandCSS)('padding', "".concat(euiTheme.size.l, " ").concat(euiTheme.size.base, " ").concat(euiTheme.size.base)), " display:flex;flex-direction:column;align-items:center;justify-content:flex-start;cursor:pointer;position:relative;inline-size:100%;&::before,&::after{content:'';position:absolute;background-color:", euiTheme.border.color, ";block-size:", euiTheme.border.width.thick, ";inline-size:calc(50% - (", euiStep.numberSize, " / 2));inset-block-start:", (0, _global_styling.mathWithUnits)([euiTheme.size.l, euiStep.numberSize], function (x, y) {
+  var _generateStepSizeAndInset = function _generateStepSizeAndInset(stepNumberSize) {
+    return /*#__PURE__*/(0, _react.css)("&::before,&::after{inline-size:calc(50% - (", stepNumberSize, " / 2));inset-block-start:", (0, _global_styling.mathWithUnits)([euiTheme.size.l, stepNumberSize], function (x, y) {
       return x + y / 2;
-    }), ";z-index:", euiTheme.levels.content, ";}&::before{inset-inline-start:0;}&::after{inset-inline-end:0;};label:euiStepHorizontal;"),
+    }), ";}");
+  };
+  return {
+    euiStepHorizontal: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalShorthandCSS)('padding', "".concat(euiTheme.size.l, " ").concat(euiTheme.size.base, " ").concat(euiTheme.size.base)), " display:flex;flex-direction:column;align-items:center;justify-content:flex-start;cursor:pointer;position:relative;inline-size:100%;&::before,&::after{content:'';position:absolute;background-color:", euiTheme.border.color, ";block-size:", euiTheme.border.width.thick, ";z-index:", euiTheme.levels.content, ";}&::before{inset-inline-start:0;}&::after{inset-inline-end:0;};label:euiStepHorizontal;"),
+    // Adjust the size of the step number and connecting lines based on size
+    m: _generateStepSizeAndInset(euiStep.numberSize),
+    s: _generateStepSizeAndInset(euiStep.numberXSSize),
     // Note: these selectors must be nested because focus/hover state
     // is on the parent container, but affects specific children
     enabled: /*#__PURE__*/(0, _react.css)("&:focus,&:hover{.euiStepHorizontal__title{text-decoration:underline;}}&:focus{outline:none;.euiStepHorizontal__number{", (0, _global_styling.euiFocusRing)(euiThemeContext), ";}.euiStepHorizontal__number:not(:focus-visible){outline:", euiTheme.focus.width, " solid ", euiTheme.colors.darkestShade, ";}};label:enabled;"),

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EuiStepsHorizontal = void 0;
+exports.SIZES = exports.EuiStepsHorizontal = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -12,7 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _step_horizontal = require("./step_horizontal");
 var _steps_horizontal = require("./steps_horizontal.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "steps"];
+var _excluded = ["className", "steps", "size"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -20,9 +20,13 @@ var _excluded = ["className", "steps"];
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+var SIZES = ['s', 'm'];
+exports.SIZES = SIZES;
 var EuiStepsHorizontal = function EuiStepsHorizontal(_ref) {
   var className = _ref.className,
     steps = _ref.steps,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'm' : _ref$size,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiStepsHorizontal', className);
   var styles = (0, _steps_horizontal.euiStepsHorizontalStyles)();
@@ -38,7 +42,8 @@ var EuiStepsHorizontal = function EuiStepsHorizontal(_ref) {
       css: cssItemStyles,
       "aria-current": stepProps.status === 'current' ? 'step' : undefined
     }, (0, _react2.jsx)(_step_horizontal.EuiStepHorizontal, (0, _extends2.default)({
-      step: index + 1
+      step: index + 1,
+      size: size
     }, stepProps)));
   }));
 };

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

@@ -50,7 +50,7 @@ var EuiTab = function EuiTab(_ref) {
   var tabStyles = (0, _tab.euiTabStyles)(euiTheme);
   var cssTabStyles = [tabStyles.euiTab, expand && tabStyles.expanded, disabled && tabStyles.disabled.disabled, isSelected && (disabled ? tabStyles.disabled.selected : tabStyles.selected)];
   var tabContentStyles = (0, _tab.euiTabContentStyles)(euiTheme);
-  var cssTabContentStyles = [tabContentStyles.euiTab__content, size && tabContentStyles[size], isSelected && tabContentStyles.selected, disabled && tabContentStyles.disabled];
+  var cssTabContentStyles = [tabContentStyles.euiTab__content, size && tabContentStyles[size]];
   var prependNode = prepend && (0, _react2.jsx)("span", {
     className: "euiTab__prepend"
   }, prepend);

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiTabStyles = exports.euiTabContentStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
-var _title = require("../title/title.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)."; } /*
                                                                                                                                                                                                                                                                                            * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
                                                                                                                                                                                                                                                                                            * or more contributor license agreements. Licensed under the Elastic License
@@ -14,7 +13,7 @@ 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.
                                                                                                                                                                                                                                                                                            */
-var _ref2 = process.env.NODE_ENV === "production" ? {
+var _ref = process.env.NODE_ENV === "production" ? {
   name: "10tso78-expanded",
   styles: "flex-basis:0%;flex-grow:1;justify-content:center;label:expanded;"
 } : {
@@ -22,13 +21,13 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   styles: "flex-basis:0%;flex-grow:1;justify-content:center;label:expanded;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var euiTabStyles = function euiTabStyles(_ref3) {
-  var euiTheme = _ref3.euiTheme;
+var euiTabStyles = function euiTabStyles(_ref2) {
+  var euiTheme = _ref2.euiTheme;
   return {
-    euiTab: /*#__PURE__*/(0, _react.css)("display:flex;cursor:pointer;flex-direction:row;align-items:center;font-weight:", euiTheme.font.weight.semiBold, ";gap:", euiTheme.size.s, ";", (0, _global_styling.logicalCSS)('padding-vertical', 0), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), " &:focus{background-color:transparent;outline-offset:-", euiTheme.focus.width, ";};label:euiTab;"),
+    euiTab: /*#__PURE__*/(0, _react.css)("display:flex;cursor:pointer;flex-direction:row;align-items:center;gap:", euiTheme.size.s, ";", (0, _global_styling.logicalCSS)('padding-vertical', 0), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), "font-weight:", euiTheme.font.weight.semiBold, ";color:", euiTheme.colors.title, ";&:focus{outline-offset:-", euiTheme.focus.width, ";};label:euiTab;"),
     // variations
-    expanded: _ref2,
-    selected: /*#__PURE__*/(0, _react.css)("box-shadow:inset 0 -", euiTheme.border.width.thick, " 0 ", euiTheme.colors.primary, ";;label:selected;"),
+    expanded: _ref,
+    selected: /*#__PURE__*/(0, _react.css)("box-shadow:inset 0 -", euiTheme.border.width.thick, " 0 ", euiTheme.colors.primary, ";color:", euiTheme.colors.primaryText, ";;label:selected;"),
     disabled: {
       disabled: /*#__PURE__*/(0, _react.css)("cursor:not-allowed;color:", euiTheme.colors.disabledText, ";;label:disabled;"),
       selected: /*#__PURE__*/(0, _react.css)("box-shadow:inset 0 -", euiTheme.border.width.thick, " 0 ", euiTheme.colors.disabledText, ";;label:selected;")
@@ -36,30 +35,19 @@ var euiTabStyles = function euiTabStyles(_ref3) {
   };
 };
 exports.euiTabStyles = euiTabStyles;
-var _ref = process.env.NODE_ENV === "production" ? {
-  name: "1yhgei9-euiTab__content",
-  styles: "&:hover{text-decoration:none;};label:euiTab__content;"
-} : {
-  name: "1yhgei9-euiTab__content",
-  styles: "&:hover{text-decoration:none;};label:euiTab__content;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
 var euiTabContentStyles = function euiTabContentStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiTab__content: _ref,
+    euiTab__content: /*#__PURE__*/(0, _react.css)("font-weight:", euiTheme.font.weight[euiTheme.font.title.weight], ";;label:euiTab__content;"),
     // 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)("font-size:", (0, _global_styling.euiFontSize)(euiThemeContext, 'xs').fontSize, ";line-height:", euiTheme.size.xl, ";;label:s;"),
+    m: /*#__PURE__*/(0, _react.css)("font-size:", (0, _global_styling.euiFontSize)(euiThemeContext, 's').fontSize, ";line-height:", euiTheme.size.xxl, ";;label:m;"),
+    l: /*#__PURE__*/(0, _react.css)("font-size:", (0, _global_styling.euiFontSize)(euiThemeContext, 'm').fontSize, ";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)("font-size:", (0, _global_styling.euiFontSize)(euiThemeContext, 'l').fontSize, ";line-height:", (0, _global_styling.mathWithUnits)([euiTheme.size.xxxl, euiTheme.size.s], function (x, y) {
       return x + y;
-    }), ";;label:xl;"),
-    // variations
-    selected: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.primaryText, ";;label:selected;"),
-    disabled: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.disabledText, ";;label:disabled;")
+    }), ";;label:xl;")
   };
 };
 exports.euiTabContentStyles = euiTabContentStyles;

package/optimize/lib/components/text/text_align.js

@@ -9,7 +9,7 @@ exports.EuiTextAlign = exports.ALIGNMENTS = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _clone_element = require("../../services/theme/clone_element");
+var _services = require("../../services");
 var _text_align = require("./text_align.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "textAlign", "cloneElement"];
@@ -39,7 +39,7 @@ var EuiTextAlign = function EuiTextAlign(_ref) {
     css: cssStyles
   }, rest);
   if ( /*#__PURE__*/(0, _react.isValidElement)(children) && cloneElement) {
-    return (0, _clone_element.cloneElementWithCss)(children, props);
+    return (0, _services.cloneElementWithCss)(children, props);
   } else {
     return (0, _react2.jsx)("div", props, children);
   }

package/optimize/lib/components/text/text_color.js

@@ -9,7 +9,6 @@ exports.EuiTextColor = exports.COLORS = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _clone_element = require("../../services/theme/clone_element");
 var _services = require("../../services");
 var _text_color = require("./text_color.styles");
 var _react2 = require("@emotion/react");
@@ -54,7 +53,7 @@ var EuiTextColor = function EuiTextColor(_ref) {
   }, rest);
   if ( /*#__PURE__*/(0, _react.isValidElement)(children) && cloneElement) {
     var childrenStyle = _objectSpread(_objectSpread({}, children.props.style), euiTextStyle);
-    return (0, _clone_element.cloneElementWithCss)(children, _objectSpread(_objectSpread({}, props), {}, {
+    return (0, _services.cloneElementWithCss)(children, _objectSpread(_objectSpread({}, props), {}, {
       style: childrenStyle
     }));
   } else {

package/optimize/lib/components/title/title.js

@@ -9,7 +9,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../services");
-var _clone_element = require("../../services/theme/clone_element");
 var _title = require("./title.styles");
 var _excluded = ["size", "children", "className", "textTransform"];
 /*
@@ -40,6 +39,6 @@ var EuiTitle = function EuiTitle(_ref) {
     css: cssStyles,
     className: classes
   }, rest);
-  return (0, _clone_element.cloneElementWithCss)(children, props);
+  return (0, _services.cloneElementWithCss)(children, props);
 };
 exports.EuiTitle = EuiTitle;

package/optimize/lib/components/toast/global_toast_list_item.js

@@ -8,7 +8,6 @@ exports.EuiGlobalToastListItem = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../services");
-var _clone_element = require("../../services/theme/clone_element");
 var _global_toast_list = require("./global_toast_list.styles");
 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; } /*
@@ -29,7 +28,7 @@ var EuiGlobalToastListItem = function EuiGlobalToastListItem(_ref) {
   var styles = (0, _global_toast_list.euiGlobalToastListItemStyles)(euiTheme);
   var cssStyles = [styles.euiGlobalToastListItem, isDismissed && styles.dismissed];
   var classes = (0, _classnames.default)('euiGlobalToastListItem', children.props.className, className);
-  return (0, _clone_element.cloneElementWithCss)(children, _objectSpread(_objectSpread({}, children.props), {
+  return (0, _services.cloneElementWithCss)(children, _objectSpread(_objectSpread({}, children.props), {
     className: classes,
     css: cssStyles
   }));

package/{test-env/services/theme → optimize/lib/services/emotion}/clone_element.js

@@ -19,8 +19,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * React.cloneElement does not work if the cloned element does not already have the
  * `css` prop - as a result, we need to use `jsx()` to manually clone the element
  * See https://github.com/emotion-js/emotion/issues/1404
- *
- * NOTE: We're still using/testing this utility internally, so this is not yet a public API
  */
 var cloneElementWithCss = function cloneElementWithCss(element, props) {
   var clonedElement = element.props.__EMOTION_TYPE_PLEASE_DO_NOT_USE__ || element.type; // EMOTION_TYPE handles non-React elements (native JSX/HTML nodes)

package/optimize/lib/services/emotion/index.js

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

package/optimize/lib/services/index.js

@@ -609,6 +609,18 @@ Object.keys(_console).forEach(function (key) {
   });
 });
 var _copy_to_clipboard = require("./copy_to_clipboard");
+var _emotion = require("./emotion");
+Object.keys(_emotion).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _emotion[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _emotion[key];
+    }
+  });
+});
 var _findElement = require("./findElement");
 Object.keys(_findElement).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/optimize/lib/services/theme/emotion.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiEmotionThemeProvider = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _hooks = require("./hooks");
+/*
+ * 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.
+ */
+
+/**
+ * @see https://emotion.sh/docs/theming
+ * This Emotion theme provider is added for *consumer usage* & convenience only.
+ *
+ * EUI should stick to using our own context/`useEuiTheme` internally
+ * instead of Emotion's shorthand `css={theme => {}}` API. If consumers
+ * set their own theme via <ThemeProvider>; EUI's styles should continue
+ * working as-is.
+ */
+var EuiEmotionThemeProvider = function EuiEmotionThemeProvider(_ref) {
+  var children = _ref.children;
+  var euiThemeContext = (0, _hooks.useEuiTheme)();
+  return (0, _react2.jsx)(_react2.ThemeProvider, {
+    theme: euiThemeContext
+  }, children);
+};
+exports.EuiEmotionThemeProvider = EuiEmotionThemeProvider;

package/optimize/lib/services/theme/hooks.js

@@ -9,7 +9,7 @@ exports.withEuiTheme = exports.useEuiTheme = exports.RenderWithEuiTheme = void 0
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _context = require("./context");
-var _provider = require("./provider");
+var _warning = require("./warning");
 var _react2 = require("@emotion/react");
 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; }
@@ -32,20 +32,8 @@ var useEuiTheme = function useEuiTheme() {
   var colorMode = (0, _react.useContext)(_context.EuiColorModeContext);
   var modifications = (0, _react.useContext)(_context.EuiModificationsContext);
   var isFallback = theme === _context.defaultComputedTheme;
-  var warningLevel = (0, _provider.getEuiDevProviderWarning)();
-  if (isFallback && typeof warningLevel !== 'undefined') {
-    switch (warningLevel) {
-      case 'log':
-        console.log(providerMessage);
-        break;
-      case 'warn':
-        console.warn(providerMessage);
-        break;
-      case 'error':
-        throw new Error(providerMessage);
-      default:
-        break;
-    }
+  if (isFallback) {
+    (0, _warning.emitEuiProviderWarning)(providerMessage);
   }
   var assembledTheme = (0, _react.useMemo)(function () {
     return {

package/optimize/lib/services/theme/index.js

@@ -84,7 +84,7 @@ Object.defineProperty(exports, "getComputed", {
 Object.defineProperty(exports, "getEuiDevProviderWarning", {
   enumerable: true,
   get: function get() {
-    return _provider.getEuiDevProviderWarning;
+    return _warning.getEuiDevProviderWarning;
   }
 });
 Object.defineProperty(exports, "getOn", {
@@ -108,7 +108,7 @@ Object.defineProperty(exports, "mergeDeep", {
 Object.defineProperty(exports, "setEuiDevProviderWarning", {
   enumerable: true,
   get: function get() {
-    return _provider.setEuiDevProviderWarning;
+    return _warning.setEuiDevProviderWarning;
   }
 });
 Object.defineProperty(exports, "setOn", {
@@ -132,5 +132,6 @@ Object.defineProperty(exports, "withEuiTheme", {
 var _context = require("./context");
 var _hooks = require("./hooks");
 var _provider = require("./provider");
+var _warning = require("./warning");
 var _utils = require("./utils");
 var _types = require("./types");

package/optimize/lib/services/theme/provider.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.setEuiDevProviderWarning = exports.getEuiDevProviderWarning = exports.EuiThemeProvider = void 0;
+exports.EuiThemeProvider = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -15,6 +15,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _css = require("@emotion/css");
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 var _context = require("./context");
+var _emotion = require("./emotion");
 var _utils = require("./utils");
 var _react2 = require("@emotion/react");
 var _excluded = ["cloneElement", "className"];
@@ -28,15 +29,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           * in compliance with, at your election, the Elastic License 2.0 or the Server
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           * Side Public License, v 1.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           */
-var providerWarning = undefined;
-var setEuiDevProviderWarning = function setEuiDevProviderWarning(level) {
-  return providerWarning = level;
-};
-exports.setEuiDevProviderWarning = setEuiDevProviderWarning;
-var getEuiDevProviderWarning = function getEuiDevProviderWarning() {
-  return providerWarning;
-};
-exports.getEuiDevProviderWarning = getEuiDevProviderWarning;
 var EuiThemeProvider = function EuiThemeProvider(_ref) {
   var _system = _ref.theme,
     _colorMode = _ref.colorMode,
@@ -141,6 +133,6 @@ var EuiThemeProvider = function EuiThemeProvider(_ref) {
     value: theme
   }, (0, _react2.jsx)(_context.EuiNestedThemeContext.Provider, {
     value: nestedThemeContext
-  }, renderedChildren)))));
+  }, (0, _react2.jsx)(_emotion.EuiEmotionThemeProvider, null, renderedChildren))))));
 };
 exports.EuiThemeProvider = EuiThemeProvider;