@elastic/eui 84.0.0 → 85.0.0

package/optimize/es/components/popover/popover.js

@@ -10,7 +10,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _excluded = ["anchorClassName", "anchorPosition", "button", "buttonRef", "insert", "isOpen", "ownFocus", "children", "className", "closePopover", "panelClassName", "panelPaddingSize", "panelProps", "panelRef", "panelStyle", "popoverScreenReaderText", "popoverRef", "hasArrow", "arrowChildren", "repositionOnScroll", "hasDragDrop", "zIndex", "attachToAnchor", "display", "offset", "onPositionChange", "onTrapDeactivation", "buffer", "aria-label", "aria-labelledby", "container", "focusTrapProps", "initialFocus", "tabIndex"];
+var _excluded = ["anchorClassName", "anchorPosition", "button", "buttonRef", "insert", "isOpen", "ownFocus", "children", "className", "closePopover", "panelClassName", "panelPaddingSize", "panelProps", "panelRef", "panelStyle", "popoverScreenReaderText", "popoverRef", "hasArrow", "arrowChildren", "repositionOnScroll", "hasDragDrop", "zIndex", "attachToAnchor", "display", "offset", "onPositionChange", "buffer", "aria-label", "aria-labelledby", "container", "focusTrapProps", "initialFocus", "tabIndex"];
 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) { _defineProperty(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; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
@@ -364,7 +364,6 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
         display = _this$props.display,
         offset = _this$props.offset,
         onPositionChange = _this$props.onPositionChange,
-        onTrapDeactivation = _this$props.onTrapDeactivation,
         buffer = _this$props.buffer,
         ariaLabel = _this$props['aria-label'],
         ariaLabelledBy = _this$props['aria-labelledby'],
@@ -417,15 +416,13 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
           insert: insert
         }, ___EmotionJSX(EuiFocusTrap, _extends({
           clickOutsideDisables: true,
-          onClickOutside: this.onClickOutside
-        }, focusTrapProps, {
+          onClickOutside: this.onClickOutside,
           returnFocus: returnFocus // Ignore temporary state of indecisive focus
           ,
           initialFocus: initialFocus,
-          onDeactivation: onTrapDeactivation,
           onEscapeKey: this.onEscapeKey,
           disabled: !ownFocus || !this.state.isOpenStable || this.state.isClosing
-        }), ___EmotionJSX(EuiPopoverPanel, _extends({}, panelProps, {
+        }, focusTrapProps), ___EmotionJSX(EuiPopoverPanel, _extends({}, panelProps, {
           panelRef: this.panelRef,
           isOpen: this.state.isOpening,
           position: this.state.arrowPosition,

package/optimize/es/components/provider/nested/index.js

@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+
+export * from './nested_context';

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

@@ -0,0 +1,27 @@
+/*
+ * 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.
+ */
+
+import React, { createContext, useContext } from 'react';
+
+/**
+ * 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.
+ */
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var EuiNestedProviderContext = /*#__PURE__*/createContext(false);
+export var EuiProviderNestedCheck = function EuiProviderNestedCheck(_ref) {
+  var children = _ref.children;
+  return ___EmotionJSX(EuiNestedProviderContext.Provider, {
+    value: true
+  }, children);
+};
+export var useIsNestedEuiProvider = function useIsNestedEuiProvider() {
+  return !!useContext(EuiNestedProviderContext);
+};

package/optimize/es/components/provider/provider.js

@@ -11,8 +11,10 @@ import { cache as fallbackCache } from '@emotion/css';
 import { EuiGlobalStyles } from '../../global_styling/reset/global_styles';
 import { EuiUtilityClasses } from '../../global_styling/utility/utility';
 import { EuiThemeProvider, CurrentEuiBreakpointProvider } from '../../services';
+import { emitEuiProviderWarning } from '../../services/theme/warning';
 import { EuiThemeAmsterdam } from '../../themes';
 import { EuiCacheProvider } from './cache';
+import { EuiProviderNestedCheck, useIsNestedEuiProvider } from './nested';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var isEmotionCacheObject = function isEmotionCacheObject(obj) {
   return obj.hasOwnProperty('key');
@@ -30,6 +32,12 @@ export var EuiProvider = function EuiProvider(_ref) {
     colorMode = _ref.colorMode,
     modify = _ref.modify,
     children = _ref.children;
+  var isNested = 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.";
+    emitEuiProviderWarning(providerMessage);
+    return children;
+  }
   var defaultCache;
   var globalCache;
   var utilityCache;
@@ -52,7 +60,7 @@ export var EuiProvider = function EuiProvider(_ref) {
       utilityCache = cache.utility;
     }
   }
-  return ___EmotionJSX(EuiCacheProvider, {
+  return ___EmotionJSX(EuiProviderNestedCheck, null, ___EmotionJSX(EuiCacheProvider, {
     cache: (_defaultCache = defaultCache) !== null && _defaultCache !== void 0 ? _defaultCache : fallbackCache
   }, ___EmotionJSX(EuiThemeProvider, {
     theme: theme !== null && theme !== void 0 ? theme : undefined,
@@ -64,5 +72,5 @@ export var EuiProvider = function EuiProvider(_ref) {
   }), ___EmotionJSX(EuiCacheProvider, {
     cache: utilityCache,
     children: Utilities && ___EmotionJSX(Utilities, null)
-  })), ___EmotionJSX(CurrentEuiBreakpointProvider, null, children)));
+  })), ___EmotionJSX(CurrentEuiBreakpointProvider, null, children))));
 };

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

@@ -20,9 +20,11 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
  */
 
 import React, { Component } from 'react';
+import { RenderWithEuiTheme } from '../../../services';
 import { isArray, isNil } from '../../../services/predicate';
 import { EuiPopover, EuiPopoverTitle } from '../../popover';
 import { EuiFilterButton } from '../../filter_group';
+import { euiFilterGroupStyles } from '../../filter_group/filter_group.styles';
 import { EuiSelectable } from '../../selectable';
 import { Query } from '../query';
 import { Operator } from '../query/ast';
@@ -301,38 +303,42 @@ export var FieldValueSelectionFilter = /*#__PURE__*/function (_Component) {
           }
         };
       }
-      return ___EmotionJSX(EuiPopover, {
-        button: button,
-        isOpen: this.state.popoverOpen,
-        closePopover: this.closePopover.bind(this),
-        panelPaddingSize: "none",
-        anchorPosition: "downCenter",
-        panelClassName: "euiFilterGroup__popoverPanel"
-      }, ___EmotionJSX(EuiSelectable, _extends({
-        singleSelection: !multiSelect,
-        "aria-label": config.name,
-        options: items,
-        renderOption: function renderOption(option) {
-          return option.view;
-        },
-        isLoading: 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 ___EmotionJSX(RenderWithEuiTheme, null, function (euiThemeContext) {
+        return ___EmotionJSX(EuiPopover, {
+          button: button,
+          isOpen: _this5.state.popoverOpen,
+          closePopover: _this5.closePopover.bind(_this5),
+          panelPaddingSize: "none",
+          anchorPosition: "downCenter",
+          panelProps: {
+            css: euiFilterGroupStyles(euiThemeContext).euiFilterGroup__popoverPanel
           }
-        }
-      }, searchProps), function (list, search) {
-        return ___EmotionJSX(React.Fragment, null, isOverSearchThreshold && ___EmotionJSX(EuiPopoverTitle, {
-          paddingSize: "s"
-        }, search), list);
-      }));
+        }, ___EmotionJSX(EuiSelectable, _extends({
+          singleSelection: !multiSelect,
+          "aria-label": config.name,
+          options: items,
+          renderOption: function renderOption(option) {
+            return option.view;
+          },
+          isLoading: 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 ___EmotionJSX(React.Fragment, null, isOverSearchThreshold && ___EmotionJSX(EuiPopoverTitle, {
+            paddingSize: "s"
+          }, search), list);
+        }));
+      });
     }
   }, {
     key: "resolveChecked",

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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
@@ -25,12 +25,14 @@ export 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 = _objectWithoutProperties(_ref, _excluded);
   if (disabled) status = 'disabled';
   var classes = classNames('euiStepHorizontal', className);
   var euiTheme = useEuiTheme();
   var styles = 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 = euiStepHorizontalNumberStyles(euiTheme);
   var cssNumberStyles = [numberStyles.euiStepHorizontal__number];
   var titleStyles = euiStepHorizontalTitleStyles(euiTheme);
@@ -84,6 +86,8 @@ export 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
   }), ___EmotionJSX("span", {
     className: "euiStepHorizontal__title",

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

@@ -29,10 +29,16 @@ export var euiStepHorizontalStyles = function euiStepHorizontalStyles(euiThemeCo
    *    e.g. due to some of their titles wrapping to multiple lines
    */
 
-  return {
-    euiStepHorizontal: /*#__PURE__*/css(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:", mathWithUnits([euiTheme.size.l, euiStep.numberSize], function (x, y) {
+  var _generateStepSizeAndInset = function _generateStepSizeAndInset(stepNumberSize) {
+    return /*#__PURE__*/css("&::before,&::after{inline-size:calc(50% - (", stepNumberSize, " / 2));inset-block-start:", 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__*/css(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__*/css("&:focus,&:hover{.euiStepHorizontal__title{text-decoration:underline;}}&:focus{outline:none;.euiStepHorizontal__number{", euiFocusRing(euiThemeContext), ";}.euiStepHorizontal__number:not(:focus-visible){outline:", euiTheme.focus.width, " solid ", euiTheme.colors.darkestShade, ";}};label:enabled;"),

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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
@@ -14,9 +14,12 @@ import React from 'react';
 import { EuiStepHorizontal } from './step_horizontal';
 import { euiStepsHorizontalStyles } from './steps_horizontal.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+export var SIZES = ['s', 'm'];
 export 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 = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('euiStepsHorizontal', className);
   var styles = euiStepsHorizontalStyles();
@@ -32,7 +35,8 @@ export var EuiStepsHorizontal = function EuiStepsHorizontal(_ref) {
       css: cssItemStyles,
       "aria-current": stepProps.status === 'current' ? 'step' : undefined
     }, ___EmotionJSX(EuiStepHorizontal, _extends({
-      step: index + 1
+      step: index + 1,
+      size: size
     }, stepProps)));
   }));
 };

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

@@ -41,7 +41,7 @@ export var EuiTab = function EuiTab(_ref) {
   var tabStyles = euiTabStyles(euiTheme);
   var cssTabStyles = [tabStyles.euiTab, expand && tabStyles.expanded, disabled && tabStyles.disabled.disabled, isSelected && (disabled ? tabStyles.disabled.selected : tabStyles.selected)];
   var tabContentStyles = 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 && ___EmotionJSX("span", {
     className: "euiTab__prepend"
   }, prepend);

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

@@ -8,9 +8,8 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { logicalCSS, mathWithUnits } from '../../global_styling';
-import { euiTitle } from '../title/title.styles';
-var _ref2 = process.env.NODE_ENV === "production" ? {
+import { logicalCSS, mathWithUnits, euiFontSize } from '../../global_styling';
+var _ref = process.env.NODE_ENV === "production" ? {
   name: "10tso78-expanded",
   styles: "flex-basis:0%;flex-grow:1;justify-content:center;label:expanded;"
 } : {
@@ -18,42 +17,31 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   styles: "flex-basis:0%;flex-grow:1;justify-content:center;label:expanded;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-export var euiTabStyles = function euiTabStyles(_ref3) {
-  var euiTheme = _ref3.euiTheme;
+export var euiTabStyles = function euiTabStyles(_ref2) {
+  var euiTheme = _ref2.euiTheme;
   return {
-    euiTab: /*#__PURE__*/css("display:flex;cursor:pointer;flex-direction:row;align-items:center;font-weight:", euiTheme.font.weight.semiBold, ";gap:", euiTheme.size.s, ";", logicalCSS('padding-vertical', 0), " ", logicalCSS('padding-horizontal', euiTheme.size.xs), " &:focus{background-color:transparent;outline-offset:-", euiTheme.focus.width, ";};label:euiTab;"),
+    euiTab: /*#__PURE__*/css("display:flex;cursor:pointer;flex-direction:row;align-items:center;gap:", euiTheme.size.s, ";", logicalCSS('padding-vertical', 0), " ", 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__*/css("box-shadow:inset 0 -", euiTheme.border.width.thick, " 0 ", euiTheme.colors.primary, ";;label:selected;"),
+    expanded: _ref,
+    selected: /*#__PURE__*/css("box-shadow:inset 0 -", euiTheme.border.width.thick, " 0 ", euiTheme.colors.primary, ";color:", euiTheme.colors.primaryText, ";;label:selected;"),
     disabled: {
       disabled: /*#__PURE__*/css("cursor:not-allowed;color:", euiTheme.colors.disabledText, ";;label:disabled;"),
       selected: /*#__PURE__*/css("box-shadow:inset 0 -", euiTheme.border.width.thick, " 0 ", euiTheme.colors.disabledText, ";;label:selected;")
     }
   };
 };
-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__
-};
 export var euiTabContentStyles = function euiTabContentStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiTab__content: _ref,
+    euiTab__content: /*#__PURE__*/css("font-weight:", euiTheme.font.weight[euiTheme.font.title.weight], ";;label:euiTab__content;"),
     // sizes
-    s: /*#__PURE__*/css(euiTitle(euiThemeContext, 'xxxs'), " line-height:", euiTheme.size.xl, ";;label:s;"),
-    m: /*#__PURE__*/css(euiTitle(euiThemeContext, 'xxs'), " line-height:", euiTheme.size.xxl, ";;label:m;"),
-    l: /*#__PURE__*/css(euiTitle(euiThemeContext, 'xs'), " line-height:", mathWithUnits([euiTheme.size.xl, euiTheme.size.s], function (x, y) {
+    s: /*#__PURE__*/css("font-size:", euiFontSize(euiThemeContext, 'xs').fontSize, ";line-height:", euiTheme.size.xl, ";;label:s;"),
+    m: /*#__PURE__*/css("font-size:", euiFontSize(euiThemeContext, 's').fontSize, ";line-height:", euiTheme.size.xxl, ";;label:m;"),
+    l: /*#__PURE__*/css("font-size:", euiFontSize(euiThemeContext, 'm').fontSize, ";line-height:", mathWithUnits([euiTheme.size.xl, euiTheme.size.s], function (x, y) {
       return x + y;
     }), ";;label:l;"),
-    xl: /*#__PURE__*/css(euiTitle(euiThemeContext, 's'), " line-height:", mathWithUnits([euiTheme.size.xxxl, euiTheme.size.s], function (x, y) {
+    xl: /*#__PURE__*/css("font-size:", euiFontSize(euiThemeContext, 'l').fontSize, ";line-height:", mathWithUnits([euiTheme.size.xxxl, euiTheme.size.s], function (x, y) {
       return x + y;
-    }), ";;label:xl;"),
-    // variations
-    selected: /*#__PURE__*/css("color:", euiTheme.colors.primaryText, ";;label:selected;"),
-    disabled: /*#__PURE__*/css("color:", euiTheme.colors.disabledText, ";;label:disabled;")
+    }), ";;label:xl;")
   };
 };

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

@@ -12,7 +12,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 
 import React, { isValidElement } from 'react';
-import { cloneElementWithCss } from '../../services/theme/clone_element';
+import { cloneElementWithCss } from '../../services';
 import { euiTextAlignStyles } from './text_align.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var ALIGNMENTS = ['left', 'right', 'center'];

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

@@ -12,8 +12,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 
 import React, { isValidElement } from 'react';
-import { cloneElementWithCss } from '../../services/theme/clone_element';
-import { useEuiTheme } from '../../services';
+import { useEuiTheme, cloneElementWithCss } from '../../services';
 import { euiTextColorStyles } from './text_color.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var COLORS = ['default', 'subdued', 'success', 'accent', 'danger', 'warning', 'ghost', 'inherit'];

package/optimize/es/components/title/title.js

@@ -12,8 +12,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 
 import classNames from 'classnames';
-import { useEuiTheme } from '../../services';
-import { cloneElementWithCss } from '../../services/theme/clone_element';
+import { useEuiTheme, cloneElementWithCss } from '../../services';
 import { euiTitleStyles } from './title.styles';
 export var TITLE_SIZES = ['xxxs', 'xxs', 'xs', 's', 'm', 'l'];
 export var TEXT_TRANSFORM = ['uppercase'];

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

@@ -10,8 +10,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 
 import classNames from 'classnames';
-import { useEuiTheme } from '../../services';
-import { cloneElementWithCss } from '../../services/theme/clone_element';
+import { useEuiTheme, cloneElementWithCss } from '../../services';
 import { euiGlobalToastListItemStyles } from './global_toast_list.styles';
 export var EuiGlobalToastListItem = function EuiGlobalToastListItem(_ref) {
   var children = _ref.children,

package/optimize/es/services/{theme → emotion}/clone_element.js

@@ -15,8 +15,6 @@ import { jsx } from '@emotion/react';
  * 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
  */
 export 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/es/services/emotion/index.js

@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+
+export * from './clone_element';

package/optimize/es/services/index.js

@@ -15,6 +15,7 @@ export { brighten, calculateContrast, calculateLuminance, colorPalette, darken,
 export { useColorPickerState, useColorStopsState } from './color_picker';
 export * from './console';
 export { copyToClipboard } from './copy_to_clipboard';
+export * from './emotion';
 export * from './findElement';
 export { dateFormatAliases, formatAuto, formatBoolean, formatDate, formatNumber, formatText } from './format';
 export * from './hooks';

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

@@ -0,0 +1,29 @@
+/*
+ * 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.
+ */
+
+import React from 'react';
+import { ThemeProvider } from '@emotion/react';
+import { useEuiTheme } from './hooks';
+
+/**
+ * @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.
+ */
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var EuiEmotionThemeProvider = function EuiEmotionThemeProvider(_ref) {
+  var children = _ref.children;
+  var euiThemeContext = useEuiTheme();
+  return ___EmotionJSX(ThemeProvider, {
+    theme: euiThemeContext
+  }, children);
+};

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

@@ -9,7 +9,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 import React, { forwardRef, useContext, useMemo } from 'react';
 import { EuiThemeContext, EuiModificationsContext, EuiColorModeContext, defaultComputedTheme } from './context';
-import { getEuiDevProviderWarning } from './provider';
+import { emitEuiProviderWarning } from './warning';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var providerMessage = "`EuiProvider` is missing which can result in negative effects.\nWrap your component in `EuiProvider`: https://ela.st/euiprovider.";
 
@@ -22,20 +22,8 @@ export var useEuiTheme = function useEuiTheme() {
   var colorMode = useContext(EuiColorModeContext);
   var modifications = useContext(EuiModificationsContext);
   var isFallback = theme === defaultComputedTheme;
-  var warningLevel = 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) {
+    emitEuiProviderWarning(providerMessage);
   }
   var assembledTheme = useMemo(function () {
     return {

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

@@ -8,6 +8,7 @@
 
 export { EuiSystemContext, EuiThemeContext, EuiNestedThemeContext, EuiModificationsContext, EuiColorModeContext } from './context';
 export { useEuiTheme, withEuiTheme, RenderWithEuiTheme } from './hooks';
-export { EuiThemeProvider, getEuiDevProviderWarning, setEuiDevProviderWarning } from './provider';
+export { EuiThemeProvider } from './provider';
+export { getEuiDevProviderWarning, setEuiDevProviderWarning } from './warning';
 export { buildTheme, computed, isInverseColorMode, getColorMode, getComputed, getOn, mergeDeep, setOn, Computed } from './utils';
 export { COLOR_MODES_STANDARD } from './types';

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

@@ -18,15 +18,9 @@ import classNames from 'classnames';
 import { css } from '@emotion/css';
 import isEqual from 'lodash/isEqual';
 import { EuiSystemContext, EuiThemeContext, EuiNestedThemeContext, EuiModificationsContext, EuiColorModeContext } from './context';
+import { EuiEmotionThemeProvider } from './emotion';
 import { buildTheme, getColorMode, getComputed, mergeDeep } from './utils';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var providerWarning = undefined;
-export var setEuiDevProviderWarning = function setEuiDevProviderWarning(level) {
-  return providerWarning = level;
-};
-export var getEuiDevProviderWarning = function getEuiDevProviderWarning() {
-  return providerWarning;
-};
 export var EuiThemeProvider = function EuiThemeProvider(_ref) {
   var _system = _ref.theme,
     _colorMode = _ref.colorMode,
@@ -131,5 +125,5 @@ export var EuiThemeProvider = function EuiThemeProvider(_ref) {
     value: theme
   }, ___EmotionJSX(EuiNestedThemeContext.Provider, {
     value: nestedThemeContext
-  }, renderedChildren)))));
+  }, ___EmotionJSX(EuiEmotionThemeProvider, null, renderedChildren))))));
 };

package/optimize/es/services/theme/warning.js

@@ -0,0 +1,32 @@
+/*
+ * 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 providerWarning = undefined;
+export var setEuiDevProviderWarning = function setEuiDevProviderWarning(level) {
+  return providerWarning = level;
+};
+export var getEuiDevProviderWarning = function getEuiDevProviderWarning() {
+  return providerWarning;
+};
+
+// Not a public top-level EUI export, currently for internal use
+export var emitEuiProviderWarning = function emitEuiProviderWarning(providerMessage) {
+  switch (providerWarning) {
+    case 'log':
+      console.log(providerMessage);
+      break;
+    case 'warn':
+      console.warn(providerMessage);
+      break;
+    case 'error':
+      throw new Error(providerMessage);
+    case undefined:
+    default:
+      break;
+  }
+};

package/optimize/lib/components/accessibility/screen_reader_only/screen_reader_only.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EuiScreenReaderOnly = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
-var _clone_element = require("../../../services/theme/clone_element");
+var _services = require("../../../services");
 var _screen_reader_only = require("./screen_reader_only.styles");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -27,6 +27,6 @@ var EuiScreenReaderOnly = function EuiScreenReaderOnly(_ref) {
     className: classes.length ? classes : undefined,
     css: cssStyles
   };
-  return (0, _clone_element.cloneElementWithCss)(children, props);
+  return (0, _services.cloneElementWithCss)(children, props);
 };
 exports.EuiScreenReaderOnly = EuiScreenReaderOnly;

package/optimize/lib/components/card/card.js

@@ -12,7 +12,6 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../services");
-var _clone_element = require("../../services/theme/clone_element");
 var _text = require("../text");
 var _title = require("../title");
 var _beta_badge = require("../badge/beta_badge");
@@ -126,7 +125,7 @@ var EuiCard = function EuiCard(_ref) {
   var iconNode;
   if (icon) {
     var iconStyles = [styles.icon.euiCard__icon, styles.icon.layout[layout], imageNode && styles.icon.withImage];
-    iconNode = (0, _clone_element.cloneElementWithCss)(icon, {
+    iconNode = (0, _services.cloneElementWithCss)(icon, {
       className: (0, _classnames.default)(icon.props.className, 'euiCard__icon'),
       css: iconStyles
     });