@elastic/eui 95.1.0 → 95.3.0

package/optimize/es/components/icon/assets/logo_elastic_stack.js

@@ -25,21 +25,15 @@ var EuiIconLogoElasticStack = function EuiIconLogoElasticStack(_ref) {
     "aria-labelledby": titleId
   }, props), title ? ___EmotionJSX("title", {
     id: titleId
-  }, title) : null, ___EmotionJSX("g", {
-    fill: "none",
-    fillRule: "evenodd"
-  }, ___EmotionJSX("path", {
+  }, title) : null, ___EmotionJSX("path", {
     fill: "#F04E98",
-    d: "M32 9V2.5A2.5 2.5 0 0 0 29.5 0h-27A2.5 2.5 0 0 0 0 2.5V9h32Z"
+    d: "M0 2.37A2.37 2.37 0 0 1 2.37 0h27.26A2.37 2.37 0 0 1 32 2.37v6.52H0V2.37Z"
   }), ___EmotionJSX("path", {
     fill: "#00BFB3",
-    d: "M0 20h32v-8H0z"
+    d: "M0 20.148h32v-8.296H0v8.296Z"
   }), ___EmotionJSX("path", {
-    fill: "#0080D5",
-    d: "M14.5 23H0v6.5A2.5 2.5 0 0 0 2.5 32h12v-9Z"
-  }), ___EmotionJSX("path", {
-    fill: "#FEC514",
-    d: "M17.5 23v9h12a2.5 2.5 0 0 0 2.5-2.5V23H17.5Z"
-  })));
+    fill: "#07C",
+    d: "M0 23.111h32v6.519A2.37 2.37 0 0 1 29.63 32H2.37A2.37 2.37 0 0 1 0 29.63v-6.52Z"
+  }));
 };
 export var icon = EuiIconLogoElasticStack;

package/optimize/es/components/modal/modal.styles.js

@@ -13,7 +13,7 @@ import { euiFormVariables } from '../form/form.styles';
 export var euiModalStyles = function euiModalStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiModal: /*#__PURE__*/css(euiShadowXLarge(euiThemeContext), " display:flex;flex-direction:column;max-block-size:75vh;position:relative;background-color:", euiTheme.colors.emptyShade, ";border-radius:", euiTheme.border.radius.medium, ";z-index:", euiTheme.levels.modal, ";min-inline-size:", euiFormVariables(euiThemeContext).maxWidth, ";max-inline-size:calc(100vw - ", euiTheme.size.base, ");", euiCanAnimate, "{animation:", euiAnimSlideInUp(euiTheme.size.xxl), " ", euiTheme.animation.slow, " ", euiTheme.animation.bounce, ";}", euiMaxBreakpoint(euiThemeContext, 'm'), "{position:fixed;inset:0;border-radius:0;inline-size:100vw!important;min-inline-size:0!important;max-inline-size:none!important;max-block-size:100vh!important;}&:focus{outline:none;};label:euiModal;"),
+    euiModal: /*#__PURE__*/css(euiShadowXLarge(euiThemeContext), " display:flex;flex-direction:column;max-block-size:75vh;position:relative;background-color:", euiTheme.colors.emptyShade, ";border-radius:", euiTheme.border.radius.medium, ";z-index:", euiTheme.levels.modal, ";min-inline-size:", euiFormVariables(euiThemeContext).maxWidth, ";max-inline-size:calc(100vw - ", euiTheme.size.base, ");overflow:hidden;", euiCanAnimate, "{animation:", euiAnimSlideInUp(euiTheme.size.xxl), " ", euiTheme.animation.slow, " ", euiTheme.animation.bounce, ";}", euiMaxBreakpoint(euiThemeContext, 'm'), "{position:fixed;inset:0;border-radius:0;inline-size:100vw!important;min-inline-size:0!important;max-inline-size:none!important;max-block-size:100vh!important;}&:focus{outline:none;};label:euiModal;"),
     // Variants
     defaultMaxWidth: /*#__PURE__*/css("max-inline-size:min(\n        ", euiTheme.breakpoint.m, "px,\n        calc(100vw - ", euiTheme.size.base, ")\n      );;label:defaultMaxWidth;"),
     confirmation: /*#__PURE__*/css("min-inline-size:", euiFormVariables(euiThemeContext).maxWidth, ";", euiMaxBreakpoint(euiThemeContext, 'm'), "{", euiShadowXLarge(euiThemeContext, {

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

@@ -109,9 +109,11 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
     });
     _defineProperty(_this, "handleStrandedFocus", function () {
       _this.strandedFocusTimeout = window.setTimeout(function () {
-        // If `returnFocus` failed and focus was stranded on the body,
-        // attempt to manually restore focus to the toggle button
-        if (document.activeElement === document.body) {
+        // If `returnFocus` failed and focus was stranded,
+        // attempt to manually restore focus to the toggle button.
+        // The stranded focus is either in most cases on body but
+        // it will be on the panel instead on mount when isOpen=true
+        if (document.activeElement === document.body || document.activeElement === _this.panel) {
           if (!_this.button) return;
           var focusableItems = focusable(_this.button);
           if (!focusableItems.length) return;

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

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { EuiThemeProvider, CurrentEuiBreakpointProvider } from '../../services';
+import { EuiThemeProvider } from '../../services';
 import { emitEuiProviderWarning } from '../../services/theme/warning';
 import { cache as fallbackCache } from '../../services/emotion/css';
 import { EuiGlobalStyles } from '../../global_styling/reset/global_styles';
@@ -76,5 +76,5 @@ export var EuiProvider = function EuiProvider(_ref) {
     children: Utilities && ___EmotionJSX(Utilities, null)
   })), ___EmotionJSX(EuiComponentDefaultsProvider, {
     componentDefaults: componentDefaults
-  }, ___EmotionJSX(CurrentEuiBreakpointProvider, null, children)))));
+  }, children))));
 };

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

@@ -46,9 +46,9 @@ export var EuiStep = function EuiStep(_ref) {
   }, ___EmotionJSX(EuiStepNumber, {
     number: step,
     status: status,
-    titleSize: titleSize
+    titleSize: titleSize === 'xxs' ? 'none' : titleSize
   }), ___EmotionJSX(EuiTitle, {
-    size: titleSize,
+    size: titleSize === 'xxs' ? 'xs' : titleSize,
     className: "euiStep__title",
     css: cssStepTitleStyles
   }, /*#__PURE__*/createElement(headingElement, null, title))), ___EmotionJSX("div", {

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

@@ -13,6 +13,7 @@ export var euiStepVariables = function euiStepVariables(euiTheme) {
   return {
     numberSize: euiTheme.size.xl,
     numberXSSize: euiTheme.size.l,
+    numberXXSSize: euiTheme.size.base,
     numberMargin: euiTheme.size.base
   };
 };
@@ -32,9 +33,10 @@ export var euiStepStyles = function euiStepStyles(euiThemeContext) {
   return {
     euiStep: /*#__PURE__*/css("&:not(:last-of-type){background-image:", lineGradient, ";background-repeat:no-repeat;};label:euiStep;"),
     // Sizes
-    m: /*#__PURE__*/css("&:not(:last-of-type){background-position:left ", euiTheme.size.xl, ";};label:m;"),
-    s: /*#__PURE__*/css("&:not(:last-of-type){background-position:left ", euiTheme.size.xl, ";};label:s;"),
-    xs: /*#__PURE__*/css("&:not(:last-of-type){background-position:-", euiTheme.size.xs, " ", euiTheme.size.l, ";};label:xs;")
+    m: /*#__PURE__*/css("&:not(:last-of-type){background-position:left ", euiStep.numberSize, ";};label:m;"),
+    s: /*#__PURE__*/css("&:not(:last-of-type){background-position:left ", euiStep.numberSize, ";};label:s;"),
+    xs: /*#__PURE__*/css("&:not(:last-of-type){background-position:-", euiTheme.size.xs, " ", euiStep.numberXSSize, ";};label:xs;"),
+    xxs: /*#__PURE__*/css("&:not(:last-of-type){background-position:-", euiTheme.size.s, " ", euiStep.numberXXSSize, ";};label:xxs;")
   };
 };
 export var euiStepContentStyles = function euiStepContentStyles(euiThemeContext) {
@@ -58,7 +60,12 @@ export var euiStepContentStyles = function euiStepContentStyles(euiThemeContext)
       return x / 2 + y;
     })), logicalCSS('margin-left', mathWithUnits(euiStep.numberXSSize, function (x) {
       return x / 2;
-    })), ";;label:xs;")
+    })), ";;label:xs;"),
+    xxs: /*#__PURE__*/css(logicalCSS('padding-left', mathWithUnits([euiStep.numberXXSSize, euiStep.numberMargin], function (x, y) {
+      return x / 2 + y;
+    })), logicalCSS('margin-left', mathWithUnits(euiStep.numberXXSSize, function (x) {
+      return x / 2;
+    })), ";;label:xxs;")
   };
 };
 export var euiStepTitleStyles = function euiStepTitleStyles(euiThemeContext) {
@@ -71,6 +78,7 @@ export var euiStepTitleStyles = function euiStepTitleStyles(euiThemeContext) {
     // Sizes
     m: /*#__PURE__*/css(";label:m;"),
     s: /*#__PURE__*/css(logicalCSS('padding-top', euiTheme.size.xs), ";;label:s;"),
-    xs: /*#__PURE__*/css(";label:xs;")
+    xs: /*#__PURE__*/css(";label:xs;"),
+    xxs: /*#__PURE__*/css("line-height:", euiStep.numberXXSSize, ";;label:xxs;")
   };
 };

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

@@ -11,11 +11,17 @@ var _excluded = ["className", "step", "title", "onClick", "disabled", "status",
 
 import classNames from 'classnames';
 import React from 'react';
+import { useEuiTheme } from '../../services';
 import { EuiStepNumber } from './step_number';
 import { useI18nCompleteStep, useI18nCurrentStep, useI18nDisabledStep, useI18nIncompleteStep, useI18nStep, useI18nWarningStep, useI18nErrorsStep, useI18nLoadingStep } from './step_strings';
-import { useEuiTheme } from '../../services';
 import { euiStepHorizontalStyles, euiStepHorizontalNumberStyles, euiStepHorizontalTitleStyles } from './step_horizontal.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+// The titleSize map is not 1 to 1; small == xs on the titleSize map
+var stepNumberSizeMap = {
+  xs: 'none',
+  s: 'xs',
+  m: 'm'
+};
 export var EuiStepHorizontal = function EuiStepHorizontal(_ref) {
   var className = _ref.className,
     _ref$step = _ref.step,
@@ -87,8 +93,7 @@ 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
-    ,
+    titleSize: stepNumberSizeMap[size],
     css: cssNumberStyles
   }), ___EmotionJSX("span", {
     className: "euiStepHorizontal__title",

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

@@ -40,6 +40,7 @@ export var euiStepHorizontalStyles = function euiStepHorizontalStyles(euiThemeCo
     // Adjust the size of the step number and connecting lines based on size
     m: _generateStepSizeAndInset(euiStep.numberSize),
     s: _generateStepSizeAndInset(euiStep.numberXSSize),
+    xs: _generateStepSizeAndInset(euiStep.numberXXSSize),
     // 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/step_number.js

@@ -13,9 +13,9 @@ import classNames from 'classnames';
 import React from 'react';
 import { EuiScreenReaderOnly } from '../accessibility';
 import { EuiIcon } from '../icon';
-import { useI18nCompleteStep, useI18nDisabledStep, useI18nErrorsStep, useI18nIncompleteStep, useI18nStep, useI18nWarningStep, useI18nLoadingStep, useI18nCurrentStep } from './step_strings';
 import { EuiLoadingSpinner } from '../loading';
 import { useEuiTheme } from '../../services';
+import { useI18nCompleteStep, useI18nDisabledStep, useI18nErrorsStep, useI18nIncompleteStep, useI18nStep, useI18nWarningStep, useI18nLoadingStep, useI18nCurrentStep } from './step_strings';
 import { euiStepNumberStyles, euiStepNumberContentStyles } from './step_number.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var STATUS = ['incomplete', 'disabled', 'loading', 'warning', 'danger', 'complete', 'current'];
@@ -62,37 +62,59 @@ export var EuiStepNumber = function EuiStepNumber(_ref) {
   switch (status) {
     // Loading spinner
     case 'loading':
-      screenReaderText = ariaLabelsMap.loading;
-      content = ___EmotionJSX(EuiLoadingSpinner, {
-        className: "euiStepNumber__loader",
-        size: titleSize === 'xs' ? 'l' : 'xl'
-      });
-      break;
+      {
+        var iconSizeMap = {
+          none: 'm',
+          xs: 'l',
+          s: 'xl',
+          m: 'xl'
+        };
+        screenReaderText = ariaLabelsMap.loading;
+        content = ___EmotionJSX(EuiLoadingSpinner, {
+          className: "euiStepNumber__loader",
+          size: iconSizeMap[titleSize]
+        });
+        break;
+      }
     // Statuses with icons
     case 'danger':
     case 'warning':
     case 'complete':
-      var cssIconStyles = [contentStyles.euiStepNumber__icon, contentStyles[status]];
-      var iconTypeMap = {
-        danger: 'cross',
-        warning: 'warning',
-        complete: 'check'
-      };
-      content = ___EmotionJSX(EuiIcon, {
-        type: iconTypeMap[status],
-        "aria-label": ariaLabelsMap[status],
-        size: titleSize === 'xs' ? 's' : 'm',
-        className: "euiStepNumber__icon",
-        css: cssIconStyles
-      });
-      break;
+      {
+        var cssIconStyles = [contentStyles.euiStepNumber__icon, contentStyles[status],
+        // EuiIcon does not support a xxs size so far,
+        // we use custom sizing here instead
+        titleSize === 'none' && contentStyles[titleSize]];
+        var iconTypeMap = {
+          danger: 'cross',
+          warning: 'warning',
+          complete: 'check'
+        };
+        var _iconSizeMap = {
+          xxs: 's',
+          xs: 's',
+          s: 'm',
+          m: 'm'
+        };
+        content = ___EmotionJSX(EuiIcon, {
+          type: iconTypeMap[status],
+          "aria-label": ariaLabelsMap[status],
+          size: _iconSizeMap[titleSize],
+          className: "euiStepNumber__icon",
+          css: cssIconStyles
+        });
+        break;
+      }
     // Statuses with numbers
     case 'incomplete':
     case 'current':
     case 'disabled':
     default:
-      var cssNumberStyles = [contentStyles.euiStepNumber__number, status && contentStyles[status]];
       screenReaderText = ariaLabelsMap[status || 'step'];
+      if (titleSize === 'none') {
+        break;
+      }
+      var cssNumberStyles = [contentStyles.euiStepNumber__number, status && contentStyles[status]];
       content = ___EmotionJSX("span", {
         "aria-hidden": "true",
         className: "euiStepNumber__number",

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

@@ -8,7 +8,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { mathWithUnits, logicalCSS, euiFontSizeFromScale, euiCanAnimate, euiAnimScale } from '../../global_styling';
+import { mathWithUnits, logicalCSS, euiFontSizeFromScale, euiCanAnimate, euiAnimScale, logicalSizeCSS } from '../../global_styling';
 import { euiStepVariables } from './step.styles';
 import { euiButtonFillColor } from '../../themes/amsterdam/global_styling/mixins';
 var _ref = process.env.NODE_ENV === "production" ? {
@@ -39,6 +39,7 @@ export var euiStepNumberStyles = function euiStepNumberStyles(euiThemeContext) {
     m: /*#__PURE__*/css(createStepsNumber(euiStep.numberSize, euiFontSizeFromScale('s', euiTheme)), ";;label:m;"),
     s: /*#__PURE__*/css(createStepsNumber(euiStep.numberSize, euiFontSizeFromScale('s', euiTheme)), ";;label:s;"),
     xs: /*#__PURE__*/css(createStepsNumber(euiStep.numberXSSize, euiFontSizeFromScale('xs', euiTheme)), ";;label:xs;"),
+    none: /*#__PURE__*/css(createStepsNumber(euiStep.numberXXSSize, euiFontSizeFromScale('xs', euiTheme)), ";;label:none;"),
     // status
     incomplete: /*#__PURE__*/css("background-color:transparent;color:", euiTheme.colors.text, ";border:", euiTheme.border.thick, ";;label:incomplete;"),
     disabled: /*#__PURE__*/css(euiButtonFillColor(euiThemeContext, 'disabled'), ";;label:disabled;"),
@@ -66,6 +67,7 @@ export var euiStepNumberContentStyles = function euiStepNumberContentStyles(_ref
     incomplete: /*#__PURE__*/css("display:unset;position:relative;inset-block-start:-", euiTheme.border.width.thick, ";;label:incomplete;"),
     loading: /*#__PURE__*/css(";label:loading;"),
     disabled: /*#__PURE__*/css(";label:disabled;"),
-    current: /*#__PURE__*/css("display:inline-block;transform:translateY(-", euiTheme.border.width.thick, ");;label:current;")
+    current: /*#__PURE__*/css("display:inline-block;transform:translateY(-", euiTheme.border.width.thick, ");;label:current;"),
+    none: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size.s), ";label:none;")
   };
 };

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

@@ -14,7 +14,7 @@ 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 SIZES = ['xs', 's', 'm'];
 export var EuiStepsHorizontal = function EuiStepsHorizontal(_ref) {
   var className = _ref.className,
     steps = _ref.steps,

package/optimize/es/global_styling/mixins/_helpers.js

@@ -67,10 +67,18 @@ var euiOverflowShadowStyles = function euiOverflowShadowStyles(_ref3) {
       gradient = "".concat(gradientEnd);
     }
   }
+
+  // Chrome+Edge has a very bizarre edge case bug where `mask-image` stops working
+  // This workaround forces a stacking context on the scrolling container, which
+  // hopefully addresses the bug. @see:
+  // - https://issues.chromium.org/issues/40778541
+  // - https://github.com/elastic/kibana/issues/180828
+  // - https://github.com/elastic/eui/pull/6343#issuecomment-1302732021
+  var chromiumMaskWorkaround = 'transform: translateZ(0);';
   if (direction === 'y') {
-    return "mask-image: linear-gradient(to bottom, ".concat(gradient, ");");
+    return "mask-image: linear-gradient(to bottom, ".concat(gradient, "); ").concat(chromiumMaskWorkaround);
   } else {
-    return "mask-image: linear-gradient(to right, ".concat(gradient, ");");
+    return "mask-image: linear-gradient(to right, ".concat(gradient, "); ").concat(chromiumMaskWorkaround);
   }
 };
 

package/optimize/es/services/breakpoint/current_breakpoint.js

@@ -9,15 +9,17 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 import React, { createContext, useState, useEffect, useMemo, useCallback } from 'react';
 import { keysOf } from '../../components/common';
-import { useEuiTheme } from '../theme';
+import { useEuiTheme } from '../theme/hooks';
 import { throttle } from '../throttle';
 import { sortMapByLargeToSmallValues } from './_sorting';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var CurrentEuiBreakpointContext = /*#__PURE__*/createContext(undefined);
 
 /**
- * Top level provider (nested within EuiProvider) which provides a single
- * resize listener that returns the current breakpoint based on window width
+ * Returns the current breakpoint based on window width.
+ * Typically only called by the top-level `EuiProvider` (to reduce the number
+ * of window resize listeners on the page). Also conditionally called if a
+ * nested `EuiThemeProvider` defines a `modify.breakpoint` override
  */
 export var CurrentEuiBreakpointProvider = function CurrentEuiBreakpointProvider(_ref) {
   var children = _ref.children;

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

@@ -16,11 +16,12 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * Side Public License, v 1.
  */
 
-import React, { useContext, useEffect, useRef, useMemo, useState, useCallback } from 'react';
+import React, { useContext, useEffect, useRef, useMemo, useState, useCallback, Fragment } from 'react';
 import { Global } from '@emotion/react';
 import isEqual from 'lodash/isEqual';
 import { cloneElementWithCss } from '../emotion';
 import { css, cx } from '../emotion/css';
+import { CurrentEuiBreakpointProvider } from '../breakpoint/current_breakpoint';
 import { EuiSystemContext, EuiThemeContext, EuiNestedThemeContext, EuiModificationsContext, EuiColorModeContext } from './context';
 import { EuiEmotionThemeProvider } from './emotion';
 import { EuiThemeMemoizedStylesProvider } from './style_memoization';
@@ -46,6 +47,13 @@ export var EuiThemeProvider = function EuiThemeProvider(_ref) {
     system = _useState2[0],
     setSystem = _useState2[1];
   var prevSystemKey = useRef(system.key);
+
+  // To reduce the number of window resize listeners, only render a
+  // CurrentEuiBreakpointProvider for the top level parent theme, or for
+  // nested themes only if modified breakpoint overrides are passed
+  var EuiConditionalBreakpointProvider = useMemo(function () {
+    return isGlobalTheme || _modifications !== null && _modifications !== void 0 && _modifications.breakpoint ? CurrentEuiBreakpointProvider : Fragment;
+  }, [isGlobalTheme, _modifications]);
   var _useState3 = useState(mergeDeep(parentModifications, _modifications)),
     _useState4 = _slicedToArray(_useState3, 2),
     modifications = _useState4[0],
@@ -155,5 +163,5 @@ export var EuiThemeProvider = function EuiThemeProvider(_ref) {
     value: theme
   }, ___EmotionJSX(EuiNestedThemeContext.Provider, {
     value: nestedThemeContext
-  }, ___EmotionJSX(EuiThemeMemoizedStylesProvider, null, ___EmotionJSX(EuiEmotionThemeProvider, null, renderedChildren))))))));
+  }, ___EmotionJSX(EuiThemeMemoizedStylesProvider, null, ___EmotionJSX(EuiEmotionThemeProvider, null, ___EmotionJSX(EuiConditionalBreakpointProvider, null, renderedChildren)))))))));
 };

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

@@ -7,8 +7,8 @@
  */
 
 var providerWarning = undefined;
-export var setEuiDevProviderWarning = function setEuiDevProviderWarning(level) {
-  return providerWarning = level;
+export var setEuiDevProviderWarning = function setEuiDevProviderWarning(warningType) {
+  return providerWarning = warningType;
 };
 export var getEuiDevProviderWarning = function getEuiDevProviderWarning() {
   return providerWarning;
@@ -16,6 +16,11 @@ export var getEuiDevProviderWarning = function getEuiDevProviderWarning() {
 
 // Not a public top-level EUI export, currently for internal use
 export var emitEuiProviderWarning = function emitEuiProviderWarning(providerMessage) {
+  // Handle callback types
+  if (typeof providerWarning === 'function') {
+    return providerWarning(providerMessage);
+  }
+  // Handle level types
   switch (providerWarning) {
     case 'log':
       console.log(providerMessage);

package/optimize/lib/components/color_picker/color_palette_display/color_palette_display.js

@@ -9,9 +9,10 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _common = require("../../common");
+var _services = require("../../../services");
 var _color_palette_display_fixed = require("./color_palette_display_fixed");
 var _color_palette_display_gradient = require("./color_palette_display_gradient");
+var _color_palette_display = require("./color_palette_display.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["type", "palette", "className", "size"];
 /*
@@ -21,12 +22,7 @@ var _excluded = ["type", "palette", "className", "size"];
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var sizeToClassNameMap = {
-  xs: 'euiColorPaletteDisplay--sizeExtraSmall',
-  s: 'euiColorPaletteDisplay--sizeSmall',
-  m: 'euiColorPaletteDisplay--sizeMedium'
-};
-var SIZES = exports.SIZES = (0, _common.keysOf)(sizeToClassNameMap);
+var SIZES = exports.SIZES = ['xs', 's', 'm'];
 var EuiColorPaletteDisplay = exports.EuiColorPaletteDisplay = function EuiColorPaletteDisplay(_ref) {
   var _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'fixed' : _ref$type,
@@ -35,11 +31,15 @@ var EuiColorPaletteDisplay = exports.EuiColorPaletteDisplay = function EuiColorP
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 's' : _ref$size,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var classes = (0, _classnames.default)('euiColorPaletteDisplay', className, sizeToClassNameMap[size]);
+  var classes = (0, _classnames.default)('euiColorPaletteDisplay', className);
+  var styles = (0, _services.useEuiMemoizedStyles)(_color_palette_display.euiColorPaletteDisplayStyles);
+  var cssStyles = [styles.euiColorPaletteDisplay, styles[size]];
   return (0, _react2.jsx)(_react.default.Fragment, null, type === 'fixed' ? (0, _react2.jsx)(_color_palette_display_fixed.EuiColorPaletteDisplayFixed, (0, _extends2.default)({
+    css: cssStyles,
     className: classes,
     palette: palette
   }, rest)) : (0, _react2.jsx)(_color_palette_display_gradient.EuiColorPaletteDisplayGradient, (0, _extends2.default)({
+    css: cssStyles,
     className: classes,
     palette: palette
   }, rest)));

package/optimize/lib/components/color_picker/color_palette_display/color_palette_display.styles.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiColorPaletteDisplayStyles = void 0;
+var _react = require("@emotion/react");
+var _services = require("../../../services");
+var _global_styling = require("../../../global_styling");
+/*
+ * 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 euiColorPaletteDisplayStyles = exports.euiColorPaletteDisplayStyles = function euiColorPaletteDisplayStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+
+  // Border is a pseudo element with transparency
+  var border = "".concat(euiTheme.border.width.thin, " solid ").concat((0, _services.transparentize)(euiTheme.colors.darkestShade, 0.2));
+  return {
+    euiColorPaletteDisplay: /*#__PURE__*/(0, _react.css)("position:relative;display:flex;flex-direction:row;overflow:hidden;&::after{content:'';position:absolute;inset:0;pointer-events:none;border:", border, ";border-radius:inherit;};label:euiColorPaletteDisplay;"),
+    // Sizes
+    xs: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', euiTheme.size.xs), " border-radius:", euiTheme.size.xs, ";;label:xs;"),
+    s: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', euiTheme.size.s), " border-radius:", euiTheme.size.s, ";;label:s;"),
+    m: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', euiTheme.size.base), " border-radius:", euiTheme.size.base, ";;label:m;")
+  };
+};

package/optimize/lib/components/color_picker/color_palette_display/color_palette_display_fixed.js

@@ -9,6 +9,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _utils = require("../utils");
 var _accessibility = require("../../accessibility");
+var _color_palette_display_fixed = require("./color_palette_display_fixed.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["palette", "title"];
 /*
@@ -36,6 +37,7 @@ var EuiColorPaletteDisplayFixed = exports.EuiColorPaletteDisplayFixed = function
     // aria-hidden="true" is to ensure color blocks are ignored by screen readers,
     // and the only accessible text for options is the EuiScreenReaderOnly {title}
     "aria-hidden": "true",
+    css: _color_palette_display_fixed.euiColorPaletteDisplayFixed__bleedArea,
     className: "euiColorPaletteDisplayFixed__bleedArea"
   }, paletteStops));
 };

package/optimize/lib/components/color_picker/color_palette_display/color_palette_display_fixed.styles.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiColorPaletteDisplayFixed__bleedArea = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../../global_styling");
+/*
+ * 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.
+ */
+
+// In a few screen sizes the palette display doesn't get a fully 100% width -
+// it gets 1px less on width. For this reason we're adding a horizontal 1px bleed area
+var euiColorPaletteDisplayFixed__bleedArea = exports.euiColorPaletteDisplayFixed__bleedArea = /*#__PURE__*/(0, _react.css)("position:absolute;inset:0;", (0, _global_styling.logicalCSS)('right', '-1px'), " display:flex;;label:euiColorPaletteDisplayFixed__bleedArea;");

package/optimize/lib/components/color_picker/color_palette_picker/color_palette_picker.js

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -8,8 +9,10 @@ exports.EuiColorPalettePicker = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
-var _form = require("../../form");
+var _react = _interopRequireWildcard(require("react"));
+var _spacer = require("../../spacer");
+var _text = require("../../text");
+var _super_select = require("../../form/super_select");
 var _color_palette_display = require("../color_palette_display");
 var _react2 = require("@emotion/react");
 var _excluded = ["className", "compressed", "disabled", "fullWidth", "isInvalid", "onChange", "readOnly", "valueOfSelected", "palettes", "append", "prepend", "selectionDisplay"],
@@ -21,6 +24,9 @@ var _excluded = ["className", "compressed", "disabled", "fullWidth", "isInvalid"
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+// Note: needs to be pointed at this specific subdir for Storybook to inherit types correctly??
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var EuiColorPalettePicker = exports.EuiColorPalettePicker = function EuiColorPalettePicker(_ref) {
@@ -42,7 +48,7 @@ var EuiColorPalettePicker = exports.EuiColorPalettePicker = function EuiColorPal
     _ref$selectionDisplay = _ref.selectionDisplay,
     selectionDisplay = _ref$selectionDisplay === void 0 ? 'palette' : _ref$selectionDisplay,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var getPalette = function getPalette(_ref2) {
+  var getPalette = (0, _react.useCallback)(function (_ref2) {
     var type = _ref2.type,
       palette = _ref2.palette,
       title = _ref2.title;
@@ -51,30 +57,35 @@ var EuiColorPalettePicker = exports.EuiColorPalettePicker = function EuiColorPal
       palette: palette,
       title: title
     });
-  };
-  var paletteOptions = palettes.map(function (item) {
-    var type = item.type,
-      value = item.value,
-      title = item.title,
-      palette = item.palette,
-      rest = (0, _objectWithoutProperties2.default)(item, _excluded2);
-    var paletteForDisplay = item.type !== 'text' ? getPalette(item) : null;
-    return _objectSpread({
-      value: String(value),
-      inputDisplay: selectionDisplay === 'title' || type === 'text' ? title : paletteForDisplay,
-      dropdownDisplay: (0, _react2.jsx)("div", {
-        className: "euiColorPalettePicker__item"
-      }, title && type !== 'text' &&
-      // Accessible labels are managed by color_palette_display_fixed and
-      // color_palette_display_gradient. Adding the aria-hidden attribute
-      // here to ensure screen readers don't speak the listbox options twice.
-      (0, _react2.jsx)("div", {
-        "aria-hidden": "true",
-        className: "euiColorPalettePicker__itemTitle"
-      }, title), type === 'text' ? title : paletteForDisplay)
-    }, rest);
-  });
-  return (0, _react2.jsx)(_form.EuiSuperSelect, (0, _extends2.default)({
+  }, []);
+  var paletteOptions = (0, _react.useMemo)(function () {
+    return palettes.map(function (item) {
+      var type = item.type,
+        value = item.value,
+        title = item.title,
+        palette = item.palette,
+        rest = (0, _objectWithoutProperties2.default)(item, _excluded2);
+      var paletteForDisplay = item.type !== 'text' ? getPalette(item) : null;
+      return _objectSpread({
+        value: String(value),
+        inputDisplay: selectionDisplay === 'title' || type === 'text' ? title : paletteForDisplay,
+        dropdownDisplay: (0, _react2.jsx)("div", {
+          className: "euiColorPalettePicker__item"
+        }, title && type !== 'text' &&
+        // Accessible labels are managed by color_palette_display_fixed and
+        // color_palette_display_gradient. Adding the aria-hidden attribute
+        // here to ensure screen readers don't speak the listbox options twice.
+        (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_text.EuiText, {
+          "aria-hidden": "true",
+          className: "euiColorPalettePicker__itemTitle",
+          size: "xs"
+        }, title), (0, _react2.jsx)(_spacer.EuiSpacer, {
+          size: "xs"
+        })), type === 'text' ? title : paletteForDisplay)
+      }, rest);
+    });
+  }, [getPalette, palettes, selectionDisplay]);
+  return (0, _react2.jsx)(_super_select.EuiSuperSelect, (0, _extends2.default)({
     className: className,
     options: paletteOptions,
     valueOfSelected: valueOfSelected,