@elastic/eui 123.2.0 → 123.3.0

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

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { css as _css } from "@emotion/react";
 var _excluded = ["cloneElement", "className"];
 var _templateObject;
@@ -28,7 +28,25 @@ import { EuiThemeMemoizedStylesProvider } from './style_memoization';
 import { useHighContrastModifications } from './high_contrast_overrides';
 import { buildTheme, getColorMode, getComputed, mergeDeep } from './utils';
 import { EUI_VIS_COLOR_STORE } from '../color';
+
+/**
+ * Caches `value` during render, only swapping in a new one once `isSame`
+ * reports that it actually differs from the cached one.
+ *
+ * This keeps derived objects referentially stable (so that the - comparatively
+ * expensive - theme computation isn't rerun on every render) without deferring
+ * them to a `useEffect`/`setState` pair. Effect-synchronised state costs an
+ * extra commit, in which consumers would see e.g. an updated `colorMode`
+ * alongside a theme that is still computed from the previous one.
+ */
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var useStableValue = function useStableValue(value, isSame) {
+  var ref = useRef(value);
+  if (ref.current !== value && !isSame(ref.current, value)) {
+    ref.current = value;
+  }
+  return ref.current;
+};
 export var EuiThemeProvider = function EuiThemeProvider(_ref) {
   var _system = _ref.theme,
     _colorMode = _ref.colorMode,
@@ -57,118 +75,85 @@ export var EuiThemeProvider = function EuiThemeProvider(_ref) {
   var EuiConditionalBreakpointProvider = useMemo(function () {
     return isGlobalTheme || _modifications !== null && _modifications !== void 0 && _modifications.breakpoint ? CurrentEuiBreakpointProvider : Fragment;
   }, [isGlobalTheme, _modifications]);
-  var _useState = useState(_system || parentSystem),
-    _useState2 = _slicedToArray(_useState, 2),
-    system = _useState2[0],
-    setSystem = _useState2[1];
-  var prevSystemKey = useRef(system.key);
-  var _useState3 = useState(mergeDeep(parentModifications, _modifications)),
-    _useState4 = _slicedToArray(_useState3, 2),
-    modifications = _useState4[0],
-    setModifications = _useState4[1];
-  var prevModifications = useRef(modifications);
-  var _useState5 = useState(getColorMode(_colorMode, parentColorMode, isForced)),
-    _useState6 = _slicedToArray(_useState5, 2),
-    colorMode = _useState6[0],
-    setColorMode = _useState6[1];
-  var prevColorMode = useRef(colorMode);
+
+  // Every value below is derived from props/parent context during render, so
+  // that all context values this provider exposes - most notably `colorMode`
+  // and the computed `theme` - always change within the same commit
+  var system = useStableValue(_system || parentSystem, function (previous, next) {
+    return previous.key === next.key;
+  });
+  var mergedModifications = useMemo(function () {
+    return mergeDeep(parentModifications, _modifications);
+  }, [parentModifications, _modifications]);
+  var modifications = useStableValue(mergedModifications, isEqual);
+  var colorMode = useMemo(function () {
+    return getColorMode(_colorMode, parentColorMode, isForced);
+  }, [_colorMode, parentColorMode, isForced]);
   var highContrastMode = useMemo(function () {
     if (isForced) return 'forced'; // System forced high contrast mode will always supercede application settings
     if (_highContrastMode === true) return 'preferred'; // Convert the boolean prop to our internal enum
     if (_highContrastMode === false) return false; // Allow `false` prop to override user/system preference
     return parentHighContrastMode; // Fall back to the parent/system setting
   }, [_highContrastMode, parentHighContrastMode, isForced]);
-  var prevHighContrastMode = useRef(highContrastMode);
   var modificationsWithHighContrast = useHighContrastModifications({
     highContrastMode: highContrastMode,
     colorMode: colorMode,
     system: system,
     modifications: modifications
   });
-  var isParentTheme = useRef(isGlobalTheme ? prevSystemKey.current === DEFAULTS.system.key && colorMode === DEFAULTS.colorMode && highContrastMode === DEFAULTS.highContrastMode && !_modifications : prevSystemKey.current === parentSystem.key && colorMode === parentColorMode && highContrastMode === parentHighContrastMode && isEqual(parentModifications, modifications));
-  var updateVisColorStore = useCallback(function (theme, isGlobalTheme) {
-    if (isGlobalTheme) {
-      EUI_VIS_COLOR_STORE.setVisColors(theme.colors.vis);
+
+  // If this provider resolves to the exact same theme as its parent, the
+  // already computed parent theme can be reused instead of recomputing it
+  var isParentTheme = useMemo(function () {
+    return isGlobalTheme ? system.key === DEFAULTS.system.key && colorMode === DEFAULTS.colorMode && highContrastMode === DEFAULTS.highContrastMode && !_modifications : system.key === parentSystem.key && colorMode === parentColorMode && highContrastMode === parentHighContrastMode && isEqual(parentModifications, modifications);
+  }, [isGlobalTheme, system, colorMode, highContrastMode, _modifications, parentSystem, parentColorMode, parentHighContrastMode, parentModifications, modifications]);
+
+  // Depending on `parentTheme` itself would recompute this provider's theme every
+  // time the parent's did, even where the parent's theme is not an input to it -
+  // `parentModifications` already reaches `getComputed` through `modifications`
+  var reusableParentTheme = isParentTheme && Object.keys(parentTheme).length ? parentTheme : null;
+  var theme = useMemo(function () {
+    if (reusableParentTheme) {
+      return _objectSpread({}, reusableParentTheme); // Intentionally create a new object to break referential equality
     }
-  }, []);
-  var getInitialTheme = function getInitialTheme() {
-    var theme = getComputed(system, buildTheme(modificationsWithHighContrast, "_".concat(system.key)), colorMode, highContrastMode);
-    setTimeout(function () {
-      updateVisColorStore(theme, isGlobalTheme);
+
+    /* Enables recomputation of component colors when flags are overridden on the provider
+    by adding the respective key to modifications to trigger a recomputation. */
+    // NOTE: Keeping this as placeholder for potential future usage during Borealis changes
+    // TODO: remove once visual refresh is completed and flags are obsolete
+    var flagsToRecompute = [];
+    var keys = {};
+    var forceRecomputeComponents = flagsToRecompute.some(function (item) {
+      var _modifications$flags, _modifications$compon;
+      if (!item) return false;
+      if (Object.keys((_modifications$flags = modifications.flags) !== null && _modifications$flags !== void 0 ? _modifications$flags : {}).includes(item.flag) && !Object.keys((_modifications$compon = modifications.components) !== null && _modifications$compon !== void 0 ? _modifications$compon : {}).includes(item.componentKey)) {
+        keys[item.componentKey] = {
+          LIGHT: {},
+          DARK: {}
+        };
+        return true;
+      }
+      return false;
     });
-    return theme;
-  };
-  var _useState7 = useState(isParentTheme.current && Object.keys(parentTheme).length ? _objectSpread({}, parentTheme) // Intentionally create a new object to break referential equality
-    : getInitialTheme()),
-    _useState8 = _slicedToArray(_useState7, 2),
-    theme = _useState8[0],
-    setTheme = _useState8[1];
-  useEffect(function () {
-    var newSystem = _system || parentSystem;
-    if (prevSystemKey.current !== newSystem.key) {
-      setSystem(newSystem);
-      prevSystemKey.current = newSystem.key;
-      isParentTheme.current = false;
-    }
-  }, [_system, parentSystem, theme, updateVisColorStore]);
-  useEffect(function () {
-    updateVisColorStore(theme, isGlobalTheme);
-  }, [theme, colorMode, isGlobalTheme, updateVisColorStore]);
-  useEffect(function () {
-    var newModifications = mergeDeep(parentModifications, _modifications);
-    if (!isEqual(prevModifications.current, newModifications)) {
-      setModifications(newModifications);
-      prevModifications.current = newModifications;
-      isParentTheme.current = false;
-    }
-  }, [_modifications, parentModifications]);
-  useEffect(function () {
-    var newColorMode = getColorMode(_colorMode, parentColorMode, isForced);
-    if (!isEqual(newColorMode, prevColorMode.current)) {
-      setColorMode(newColorMode);
-      prevColorMode.current = newColorMode;
-      isParentTheme.current = false;
-    }
-  }, [_colorMode, parentColorMode, isForced]);
-  useEffect(function () {
-    if (prevHighContrastMode.current !== highContrastMode) {
-      isParentTheme.current = false;
-    }
-  }, [highContrastMode]);
-  useEffect(function () {
-    if (!isParentTheme.current) {
-      /* Enables recomputation of component colors when flags are overridden on the provider
-      by adding the respective key to modifications to trigger a recomputation. */
-      // NOTE: Keeping this as placeholder for potential future usage during Borealis changes
-      // TODO: remove once visual refresh is completed and flags are obsolete
-      var flagsToRecompute = [];
-      var keys = {};
-      var forceRecomputeComponents = flagsToRecompute.some(function (item) {
-        var _modifications$flags, _modifications$compon;
-        if (!item) return false;
-        if (Object.keys((_modifications$flags = modifications.flags) !== null && _modifications$flags !== void 0 ? _modifications$flags : {}).includes(item.flag) && !Object.keys((_modifications$compon = modifications.components) !== null && _modifications$compon !== void 0 ? _modifications$compon : {}).includes(item.componentKey)) {
-          keys[item.componentKey] = {
-            LIGHT: {},
-            DARK: {}
-          };
-          return true;
-        }
-        return false;
-      });
-      var componentModifications = forceRecomputeComponents ? {
-        components: keys
-      } : {};
+    var componentModifications = forceRecomputeComponents ? {
+      components: keys
+    } : {};
+
+    // force recomputing of color & component tokens based on flag changes
+    var enhancedModifications = _objectSpread(_objectSpread({}, modificationsWithHighContrast), componentModifications);
+    return getComputed(system, buildTheme(enhancedModifications, "_".concat(system.key)), colorMode, highContrastMode);
+  }, [reusableParentTheme, system, colorMode, highContrastMode, modifications, modificationsWithHighContrast]);
 
-      // force recomputing of color & component tokens based on flag changes
-      var enhancedModifications = _objectSpread(_objectSpread({}, modificationsWithHighContrast), componentModifications);
-      var rebuiltTheme = getComputed(system, buildTheme(enhancedModifications, "_".concat(system.key)), colorMode, highContrastMode);
-      setTheme(rebuiltTheme);
+  // Genuine side effect - the vis color store is consumed outside of React
+  useEffect(function () {
+    if (isGlobalTheme) {
+      EUI_VIS_COLOR_STORE.setVisColors(theme.colors.vis);
     }
-  }, [colorMode, highContrastMode, system, modificationsWithHighContrast, modifications]);
-  var _useState9 = useState(),
-    _useState10 = _slicedToArray(_useState9, 2),
-    themeCSSVariables = _useState10[0],
-    _setThemeCSSVariables = _useState10[1];
+  }, [theme, isGlobalTheme]);
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    themeCSSVariables = _useState2[0],
+    _setThemeCSSVariables = _useState2[1];
   var setThemeCSSVariables = useCallback(function (variables) {
     return _setThemeCSSVariables(function (previous) {
       var merged = _objectSpread(_objectSpread({}, previous), variables);

package/optimize/lib/components/banner/banner.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EuiBanner = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -61,6 +62,29 @@ var EuiBanner = exports.EuiBanner = /*#__PURE__*/(0, _react.forwardRef)(function
   var primaryActionProps = actionProps === null || actionProps === void 0 ? void 0 : actionProps.primary;
   var secondaryActionProps = actionProps === null || actionProps === void 0 ? void 0 : actionProps.secondary;
   var hasActions = Boolean(primaryActionProps) || Boolean(secondaryActionProps);
+  var titleRef = (0, _react.useRef)(null);
+  var contentRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(''),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    announcement = _useState2[0],
+    setAnnouncement = _useState2[1];
+  (0, _react.useEffect)(function () {
+    var content = contentRef.current;
+    if (!announceOnMount || !content) {
+      setAnnouncement('');
+      return;
+    }
+
+    // `EuiText` does not forward refs. The text slot is the first direct
+    // `.euiText` child, since `children` render after it.
+    var textNode = text ? Array.from(content.children).find(function (node) {
+      return node.classList.contains('euiText');
+    }) : undefined;
+    var childrenText = Array.from(content.childNodes).filter(function (node) {
+      return node !== titleRef.current && node !== textNode;
+    }).map(readText).filter(Boolean).join(' ');
+    setAnnouncement([readText(titleRef.current), readText(textNode), childrenText].filter(Boolean).join(",\xA0"));
+  }, [announceOnMount, title, text, children]);
   var componentClass = 'euiBanner';
   var classes = (0, _classnames.default)(componentClass, className);
   var backgroundColorStyles = (0, _global_styling.useEuiBackgroundColorCSS)()[color];
@@ -84,11 +108,13 @@ var EuiBanner = exports.EuiBanner = /*#__PURE__*/(0, _react.forwardRef)(function
     className: "".concat(componentClass, "__body"),
     css: styles.body
   }, (0, _react2.jsx)("div", {
+    ref: contentRef,
     className: "".concat(componentClass, "__content"),
     css: styles.content
   }, (0, _react2.jsx)(_title.EuiTitle, {
     size: headingSize
   }, (0, _react2.jsx)(Heading, {
+    ref: titleRef,
     css: styles.title,
     "data-test-subj": "".concat(dataTestSubj, "-title")
   }, title)), onDismiss ? (0, _react2.jsx)(_button.EuiButtonIcon, (0, _extends2.default)({
@@ -118,6 +144,12 @@ var EuiBanner = exports.EuiBanner = /*#__PURE__*/(0, _react.forwardRef)(function
   }, secondaryActionProps, {
     color: "primary",
     size: "s"
-  })) : null) : null)), announceOnMount && (0, _react2.jsx)(_accessibility.EuiLiveAnnouncer, null, title && title, title && text && ",\xA0", text && text, (title || text) && children && ",\xA0", children && children));
+  })) : null) : null)), announcement ? (0, _react2.jsx)(_accessibility.EuiLiveAnnouncer, null, announcement) : null);
 });
-EuiBanner.displayName = 'EuiBanner';
+EuiBanner.displayName = 'EuiBanner';
+
+// jsdom has no `innerText`, so tests read `textContent`
+var readText = function readText(node) {
+  var _ref2, _innerText;
+  return (_ref2 = (_innerText = node === null || node === void 0 ? void 0 : node.innerText) !== null && _innerText !== void 0 ? _innerText : node === null || node === void 0 ? void 0 : node.textContent) === null || _ref2 === void 0 ? void 0 : _ref2.trim();
+};

package/optimize/lib/components/call_out/call_out.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiCallOut = exports.COLOR_TO_NOTIFICATION_ICON_MAP = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -174,9 +175,35 @@ var EuiCallOut = exports.EuiCallOut = /*#__PURE__*/(0, _react.forwardRef)(functi
       "data-test-subj": dataTestSubj && "".concat(dataTestSubj, "__actions")
     }, actionPrimary, actionSecondary);
   }, [actionProps, color, styles, dataTestSubj]);
-  var announcement = (0, _react.useMemo)(function () {
-    if (!announceOnMount || !(title || text || children)) return null;
-    return (0, _react2.jsx)(_live_announcer.EuiLiveAnnouncer, null, title, title && text && ",\xA0", text, (title || text) && children && ",\xA0", children);
+  var contentRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(''),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    announcement = _useState2[0],
+    setAnnouncement = _useState2[1];
+  (0, _react.useEffect)(function () {
+    var content = contentRef.current;
+    if (!announceOnMount || !content) {
+      setAnnouncement('');
+      return;
+    }
+
+    // Read the nodes already on screen. The live region gets that text,
+    // not a second copy of the React tree. Only direct slots are read, so a
+    // callout nested in `children` is not picked up as this one's slots.
+    // Not `:scope >`: jsdom resolves `:scope` by tag and class, which the
+    // nested callout's content shares.
+    var parts = Array.from(content.children).filter(function (_ref2) {
+      var classList = _ref2.classList;
+      return ['euiCallOutHeader__title', 'euiCallOut__text', 'euiCallOut__additionalContent'].some(function (className) {
+        return classList.contains(className);
+      });
+    })
+    // jsdom has no `innerText`, so tests read `textContent`
+    .map(function (node) {
+      var _ref3, _node$innerText;
+      return (_ref3 = (_node$innerText = node.innerText) !== null && _node$innerText !== void 0 ? _node$innerText : node.textContent) === null || _ref3 === void 0 ? void 0 : _ref3.trim();
+    }).filter(Boolean);
+    setAnnouncement(parts.join(",\xA0"));
   }, [announceOnMount, title, text, children]);
   return (0, _react2.jsx)(_panel.EuiPanel, (0, _extends2.default)({
     borderRadius: "none",
@@ -196,11 +223,12 @@ var EuiCallOut = exports.EuiCallOut = /*#__PURE__*/(0, _react.forwardRef)(functi
   }, (0, _react2.jsx)("div", {
     css: styles.body
   }, icon, (0, _react2.jsx)("div", {
+    ref: contentRef,
     css: styles.content
   },
   // Note: the DOM position of the dismiss button matters to screen reader users.
   // We generally want them to have some context of _what_ they're dismissing,
   // instead of navigating to the dismiss button first before the callout content
-  header && optionalChildren ? (0, _react2.jsx)(_react.default.Fragment, null, header, dismissButton, optionalChildren) : (0, _react2.jsx)(_react.default.Fragment, null, header || optionalChildren, dismissButton))), actionControls, announcement));
+  header && optionalChildren ? (0, _react2.jsx)(_react.default.Fragment, null, header, dismissButton, optionalChildren) : (0, _react2.jsx)(_react.default.Fragment, null, header || optionalChildren, dismissButton))), actionControls, announcement ? (0, _react2.jsx)(_live_announcer.EuiLiveAnnouncer, null, announcement) : null));
 });
 EuiCallOut.displayName = 'EuiCallOut';

package/optimize/lib/components/icon/assets/add_to_chat.js

@@ -34,17 +34,9 @@ var EuiIconAddToChat = function EuiIconAddToChat(_ref) {
   }, props), title ? (0, _react2.jsx)("title", {
     id: titleId
   }, title) : null, (0, _react2.jsx)("path", {
-    fillRule: "evenodd",
-    d: "M8 0a1.5 1.5 0 0 1 .5 2.912V4H11a3 3 0 0 1 3 3h1l.102.005A1 1 0 0 1 16 8v1h-1V8h-1v1h-1V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v7h6v1H3a1 1 0 0 1-1-1v-2H1a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h1a3 3 0 0 1 3-3h2.5V2.912A1.498 1.498 0 0 1 8 0ZM1 11h1V8H1v3ZM8 1a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Z",
-    clipRule: "evenodd"
+    d: "M14 13h2v1h-2v2h-1v-2h-2v-1h2v-2h1z"
   }), (0, _react2.jsx)("path", {
-    d: "M10.447 11.523C9.826 12.767 8.59 13 8 13c-.59 0-1.826-.233-2.447-1.477l.894-.447C6.826 11.833 7.59 12 8 12c.41 0 1.174-.167 1.553-.924l.894.447Z"
-  }), (0, _react2.jsx)("path", {
-    fillRule: "evenodd",
-    d: "M5.5 7a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm0 1a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm5-1a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm0 1a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Z",
-    clipRule: "evenodd"
-  }), (0, _react2.jsx)("path", {
-    d: "M14 13h2v1h-2v2h-1v-2h-2v-1h2v-2h1v2Z"
+    d: "M9.389 1c.4 0 .783.116 1.078.328.294.212.533.55.533.972V3h1a3 3 0 0 1 3 3v1h1v2h-2V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h5v1H4a3 3 0 0 1-3-3v-2H0V7h1V6a3 3 0 0 1 3-3h1v-.7c0-.423.239-.76.533-.972A1.85 1.85 0 0 1 6.611 1zM6 10H5V7h1zm5 0h-1V7h1zM6 3h4V2H6z"
   }));
 };
 var icon = exports.icon = EuiIconAddToChat;

package/optimize/lib/components/icon/assets/product_alert_zero.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.icon = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var React = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _excluded = ["title", "titleId"];
+/*
+ * 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 IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+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; }
+var EuiIconProductAlertZero = function EuiIconProductAlertZero(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return (0, _react2.jsx)("svg", (0, _extends2.default)({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? (0, _react2.jsx)("title", {
+    id: titleId
+  }, title) : null, (0, _react2.jsx)("path", {
+    d: "M11.283 14.24A7 7 0 0 1 8 15.053l-.362-.01a7 7 0 0 1-2.976-.833l.642-.793A6 6 0 0 0 8 14.053c.989 0 1.921-.24 2.745-.661zM8 .016a1.486 1.486 0 0 1 .365 2.925v2.084A2.997 2.997 0 0 1 10.995 8l-.003.153a3 3 0 0 1-.231 1.002l1.826 1.055a1.485 1.485 0 1 1-.382.648l-1.82-1.05a2.99 2.99 0 0 1-2.386 1.19l-.154-.005a3 3 0 0 1-2.22-1.166L3.8 10.88a1.485 1.485 0 0 1-2.722 1.125 1.487 1.487 0 0 1 2.35-1.78l1.815-1.048a3 3 0 0 1-.238-1.025L5 8a3 3 0 0 1 2.612-2.974v-2.09A1.485 1.485 0 0 1 8 .016M2.787 11.019a.487.487 0 1 0-.844.487.487.487 0 0 0 .844-.487m11.09-.18a.487.487 0 1 0-.484.844.487.487 0 0 0 .485-.843M8 6.002a1.998 1.998 0 1 0 0 3.997A1.998 1.998 0 0 0 8 6m0-4.985a.487.487 0 1 0 0 .974.487.487 0 0 0 0-.973M4.802 2.878A6.04 6.04 0 0 0 1.955 7.99l-1 .023v-.005A7.04 7.04 0 0 1 4.28 2.023zm6.993-.806a7.04 7.04 0 0 1 3.249 5.925l-1 .006a6.04 6.04 0 0 0-2.835-5.117z"
+  }));
+};
+var icon = exports.icon = EuiIconProductAlertZero;

package/optimize/lib/components/icon/icon_map.js

@@ -2697,6 +2697,13 @@ var typeToPathMap = exports.typeToPathMap = {
   }, {
     synonyms: ['agent', 'product', 'elastic agent', 'fleet', 'monitoring']
   }),
+  productAlertZero: withMetadata(function () {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require('./assets/product_alert_zero'));
+    });
+  }, {
+    synonyms: ['alertzero', 'alert', 'zero', 'attack', 'security']
+  }),
   productCanvas: withMetadata(function () {
     return Promise.resolve().then(function () {
       return _interopRequireWildcard(require('./assets/product_canvas'));

package/optimize/lib/components/icon/svgs/add_to_chat.svg

@@ -1,6 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M8 0a1.5 1.5 0 0 1 .5 2.912V4H11a3 3 0 0 1 3 3h1l.102.005A1 1 0 0 1 16 8v1h-1V8h-1v1h-1V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v7h6v1H3a1 1 0 0 1-1-1v-2H1a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h1a3 3 0 0 1 3-3h2.5V2.912A1.498 1.498 0 0 1 8 0ZM1 11h1V8H1v3ZM8 1a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Z" clip-rule="evenodd"/>
-  <path d="M10.447 11.523C9.826 12.767 8.59 13 8 13c-.59 0-1.826-.233-2.447-1.477l.894-.447C6.826 11.833 7.59 12 8 12c.41 0 1.174-.167 1.553-.924l.894.447Z"/>
-  <path fill-rule="evenodd" d="M5.5 7a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm0 1a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm5-1a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm0 1a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Z" clip-rule="evenodd"/>
-  <path d="M14 13h2v1h-2v2h-1v-2h-2v-1h2v-2h1v2Z"/>
-</svg>
+  <path d="M14 13h2v1h-2v2h-1v-2h-2v-1h2v-2h1z"/>
+  <path d="M9.389 1c.4 0 .783.116 1.078.328.294.212.533.55.533.972V3h1a3 3 0 0 1 3 3v1h1v2h-2V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h5v1H4a3 3 0 0 1-3-3v-2H0V7h1V6a3 3 0 0 1 3-3h1v-.7c0-.423.239-.76.533-.972A1.85 1.85 0 0 1 6.611 1zM6 10H5V7h1zm5 0h-1V7h1zM6 3h4V2H6z"/>
+</svg>

package/optimize/lib/components/icon/svgs/product_alert_zero.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path d="M11.283 14.24A7 7 0 0 1 8 15.053l-.362-.01a7 7 0 0 1-2.976-.833l.642-.793A6 6 0 0 0 8 14.053c.989 0 1.921-.24 2.745-.661z"/>
+  <path d="M8 .016a1.486 1.486 0 0 1 .365 2.925v2.084A2.997 2.997 0 0 1 10.995 8l-.003.153a3 3 0 0 1-.231 1.002l1.826 1.055a1.485 1.485 0 1 1-.382.648l-1.82-1.05a2.99 2.99 0 0 1-2.386 1.19l-.154-.005a3 3 0 0 1-2.22-1.166L3.8 10.88a1.485 1.485 0 0 1-2.722 1.125 1.487 1.487 0 0 1 2.35-1.78l1.815-1.048a3 3 0 0 1-.238-1.025L5 8a3 3 0 0 1 2.612-2.974v-2.09A1.485 1.485 0 0 1 8 .016M2.787 11.019a.487.487 0 1 0-.844.487.487.487 0 0 0 .844-.487m11.09-.18a.487.487 0 1 0-.484.844.487.487 0 0 0 .485-.843M8 6.002a1.998 1.998 0 1 0 0 3.997A1.998 1.998 0 0 0 8 6m0-4.985a.487.487 0 1 0 0 .974.487.487 0 0 0 0-.973"/>
+  <path d="M4.802 2.878A6.04 6.04 0 0 0 1.955 7.99l-1 .023v-.005A7.04 7.04 0 0 1 4.28 2.023zm6.993-.806a7.04 7.04 0 0 1 3.249 5.925l-1 .006a6.04 6.04 0 0 0-2.835-5.117z"/>
+</svg>

package/optimize/lib/components/selectable/selectable_templates/selectable_template_sitewide.styles.js

@@ -24,7 +24,11 @@ var _ref = process.env.NODE_ENV === "production" ? {
 };
 var euiSelectableTemplateSitewideStyles = exports.euiSelectableTemplateSitewideStyles = function euiSelectableTemplateSitewideStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var visColors = (0, _services.euiPaletteColorBlind)();
+
+  // Pass the theme's vis colors explicitly - see the note in token.styles.ts
+  var visColors = (0, _services.euiPaletteColorBlind)({
+    colors: euiTheme.colors.vis
+  });
   return {
     euiSelectableTemplateSitewide: _ref,
     euiSelectableTemplateSitewide__optionMetasList: /*#__PURE__*/(0, _react.css)("display:block;", (0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), " color:", euiTheme.colors.textSubdued, ";;label:euiSelectableTemplateSitewide__optionMetasList;"),

package/optimize/lib/components/token/token.styles.js

@@ -23,10 +23,16 @@ var getTokenColor = function getTokenColor(euiThemeContext, fill, color) {
   var euiTheme = euiThemeContext.euiTheme,
     colorMode = euiThemeContext.colorMode,
     highContrastMode = euiThemeContext.highContrastMode;
-  // use inside function as they are not returning constants,
-  // but internally depend on EUI_VIS_COLOR_STORE to update per theme
-  var visColors = (0, _services.euiPaletteColorBlind)();
-  var visColorsBehindText = (0, _services.euiPaletteColorBlindBehindText)();
+  // Pass the theme's vis colors explicitly rather than letting these fall back to
+  // EUI_VIS_COLOR_STORE - the store is only updated in an effect, so on the first
+  // render it can still hold the previous theme's palette. Memoized styles are not
+  // regenerated for a store update, so those colors would stay stale.
+  var visColors = (0, _services.euiPaletteColorBlind)({
+    colors: euiTheme.colors.vis
+  });
+  var visColorsBehindText = (0, _services.euiPaletteColorBlindBehindText)({
+    colors: euiTheme.colors.vis
+  });
   var isVizColor = typeof color === 'number';
   var iconColor = isVizColor ? visColors[color] : euiTheme.colors.darkShade;
   var isDarkMode = colorMode === 'DARK';