@elastic/eui 93.1.0 → 93.2.0

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

@@ -9,6 +9,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css } from '@emotion/react';
 import { logicalShorthandCSS } from '../../global_styling';
+import { euiCodeSyntaxVariables } from './code_syntax.styles';
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "gfiv3z-transparentBackground",
   styles: "background:transparent;label:transparentBackground;"
@@ -17,13 +18,14 @@ var _ref = process.env.NODE_ENV === "production" ? {
   styles: "background:transparent;label:transparentBackground;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-export var euiCodeStyles = function euiCodeStyles(euiThemeContext, euiCodeSyntaxVariables) {
+export var euiCodeStyles = function euiCodeStyles(euiThemeContext) {
+  var codeSyntaxVariables = euiCodeSyntaxVariables(euiThemeContext);
   var euiTheme = euiThemeContext.euiTheme;
   return {
     /*
      * 1. Size the code against the text its embedded within.
      */
-    euiCode: /*#__PURE__*/css("font-family:", euiTheme.font.familyCode, ";font-size:0.9em;", logicalShorthandCSS('padding', '0.2em 0.5em'), "background:", euiCodeSyntaxVariables.backgroundColor, ";border-radius:", euiTheme.border.radius.small, ";font-weight:", euiTheme.font.weight.bold, ";color:", euiCodeSyntaxVariables.inlineCodeColor, ";", euiCodeSyntaxVariables.tokensCss, ";;label:euiCode;"),
+    euiCode: /*#__PURE__*/css("font-family:", euiTheme.font.familyCode, ";font-size:0.9em;", logicalShorthandCSS('padding', '0.2em 0.5em'), "background:", codeSyntaxVariables.backgroundColor, ";border-radius:", euiTheme.border.radius.small, ";font-weight:", euiTheme.font.weight.bold, ";color:", codeSyntaxVariables.inlineCodeColor, ";", codeSyntaxVariables.tokensCss, ";;label:euiCode;"),
     transparentBackground: _ref
   };
 };

package/optimize/es/components/code/code_block.js

@@ -16,7 +16,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React, { useMemo } from 'react';
 import classNames from 'classnames';
-import { useCombinedRefs, useEuiTheme } from '../../services';
+import { useCombinedRefs, useEuiTheme, useEuiMemoizedStyles } from '../../services';
 import { DEFAULT_LANGUAGE, checkSupportedLanguage, getHtmlContent, highlightByLine } from './utils';
 import { useOverflow } from './code_block_overflow';
 import { useCopy } from './code_block_copy';
@@ -24,7 +24,6 @@ import { useFullScreen, EuiCodeBlockFullScreenWrapper } from './code_block_full_
 import { EuiCodeBlockControls } from './code_block_controls';
 import { EuiCodeBlockVirtualized } from './code_block_virtualized';
 import { euiCodeBlockStyles, euiCodeBlockPreStyles, euiCodeBlockCodeStyles } from './code_block.styles';
-import { useEuiCodeSyntaxVariables } from './code_syntax.styles';
 
 // Based on observed line height for non-virtualized code blocks
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -59,7 +58,6 @@ export var EuiCodeBlock = function EuiCodeBlock(_ref) {
     lineNumbers = _ref$lineNumbers === void 0 ? false : _ref$lineNumbers,
     rest = _objectWithoutProperties(_ref, _excluded);
   var euiTheme = useEuiTheme();
-  var euiCodeSyntaxVariables = useEuiCodeSyntaxVariables();
   var language = useMemo(function () {
     return checkSupportedLanguage(_language);
   }, [_language]);
@@ -111,39 +109,39 @@ export var EuiCodeBlock = function EuiCodeBlock(_ref) {
     onKeyDown = _useFullScreen.onKeyDown;
   var hasControls = !!(copyButton || fullScreenButton);
   var hasBothControls = !!(copyButton && fullScreenButton);
-  var styles = euiCodeBlockStyles(euiTheme, euiCodeSyntaxVariables);
+  var styles = useEuiMemoizedStyles(euiCodeBlockStyles);
   var cssStyles = [styles.euiCodeBlock, styles[fontSize], transparentBackground && styles.transparentBackground, hasControls && (hasBothControls ? styles.hasBothControls[paddingSize] : styles.hasControls[paddingSize])];
+  var preStyles = useEuiMemoizedStyles(euiCodeBlockPreStyles);
   var _useMemo = useMemo(function () {
       var isWhiteSpacePre = whiteSpace === 'pre' || isVirtualized;
-      var styles = euiCodeBlockPreStyles(euiTheme);
-      var cssStyles = [styles.euiCodeBlock__pre, isWhiteSpacePre ? styles.whiteSpace.pre.pre : styles.whiteSpace.preWrap.preWrap];
+      var cssStyles = [preStyles.euiCodeBlock__pre, isWhiteSpacePre ? preStyles.whiteSpace.pre.pre : preStyles.whiteSpace.preWrap.preWrap];
       var preProps = {
         className: 'euiCodeBlock__pre',
-        css: [].concat(cssStyles, [styles.padding[paddingSize], hasControls && (isWhiteSpacePre ? styles.whiteSpace.pre.controlsOffset[paddingSize] : styles.whiteSpace.preWrap.controlsOffset[paddingSize])]),
+        css: [].concat(cssStyles, [preStyles.padding[paddingSize], hasControls && (isWhiteSpacePre ? preStyles.whiteSpace.pre.controlsOffset[paddingSize] : preStyles.whiteSpace.preWrap.controlsOffset[paddingSize])]),
         tabIndex: isVirtualized ? 0 : tabIndex
       };
       var preFullscreenProps = {
         className: 'euiCodeBlock__pre',
         css: [].concat(cssStyles, [
         // Force fullscreen to use xl padding
-        styles.padding.xl, hasControls && (isWhiteSpacePre ? styles.whiteSpace.pre.controlsOffset.xl : styles.whiteSpace.preWrap.controlsOffset.xl)]),
+        preStyles.padding.xl, hasControls && (isWhiteSpacePre ? preStyles.whiteSpace.pre.controlsOffset.xl : preStyles.whiteSpace.preWrap.controlsOffset.xl)]),
         tabIndex: 0,
         onKeyDown: onKeyDown
       };
       return [preProps, preFullscreenProps];
-    }, [euiTheme, whiteSpace, isVirtualized, hasControls, paddingSize, onKeyDown, tabIndex]),
+    }, [preStyles, whiteSpace, isVirtualized, hasControls, paddingSize, onKeyDown, tabIndex]),
     _useMemo2 = _slicedToArray(_useMemo, 2),
     preProps = _useMemo2[0],
     preFullscreenProps = _useMemo2[1];
+  var codeStyles = useEuiMemoizedStyles(euiCodeBlockCodeStyles);
   var codeProps = useMemo(function () {
-    var styles = euiCodeBlockCodeStyles(euiTheme, euiCodeSyntaxVariables);
-    var cssStyles = [styles.euiCodeBlock__code, isVirtualized && styles.isVirtualized];
+    var cssStyles = [codeStyles.euiCodeBlock__code, isVirtualized && codeStyles.isVirtualized];
     return _objectSpread({
       className: 'euiCodeBlock__code',
       css: cssStyles,
       'data-code-language': language
     }, rest);
-  }, [language, euiTheme, euiCodeSyntaxVariables, isVirtualized, rest]);
+  }, [codeStyles, language, isVirtualized, rest]);
   return ___EmotionJSX("div", {
     css: cssStyles,
     className: classNames('euiCodeBlock', className),

package/optimize/es/components/code/code_block.styles.js

@@ -19,6 +19,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css } from '@emotion/react';
 import { euiPaddingSize, euiFontSize, euiScrollBarStyles, mathWithUnits } from '../../global_styling';
+import { euiCodeSyntaxVariables } from './code_syntax.styles';
 var _ref4 = process.env.NODE_ENV === "production" ? {
   name: "i92zwx-isFullScreen",
   styles: "position:fixed;inset:0;label:isFullScreen;"
@@ -35,10 +36,11 @@ var _ref5 = process.env.NODE_ENV === "production" ? {
   styles: "background:transparent;label:transparentBackground;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-export var euiCodeBlockStyles = function euiCodeBlockStyles(euiThemeContext, euiCodeSyntaxVariables) {
+export var euiCodeBlockStyles = function euiCodeBlockStyles(euiThemeContext) {
+  var codeSyntaxVariables = euiCodeSyntaxVariables(euiThemeContext);
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiCodeBlock: /*#__PURE__*/css("max-inline-size:100%;display:block;position:relative;background:", euiCodeSyntaxVariables.backgroundColor, ";", euiCodeSyntaxVariables.tokensCss, ";;label:euiCodeBlock;"),
+    euiCodeBlock: /*#__PURE__*/css("max-inline-size:100%;display:block;position:relative;background:", codeSyntaxVariables.backgroundColor, ";", codeSyntaxVariables.tokensCss, ";;label:euiCodeBlock;"),
     // Font size
     s: /*#__PURE__*/css(euiFontSize(euiThemeContext, 'xs'), ";;label:s;"),
     m: /*#__PURE__*/css(euiFontSize(euiThemeContext, 's'), ";;label:m;"),
@@ -110,10 +112,10 @@ var _ref = process.env.NODE_ENV === "production" ? {
   styles: "position:relative;label:isVirtualized;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-export var euiCodeBlockCodeStyles = function euiCodeBlockCodeStyles(euiThemeContext, euiCodeSyntaxVariables) {
+export var euiCodeBlockCodeStyles = function euiCodeBlockCodeStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiCodeBlock__code: /*#__PURE__*/css("font-family:", euiTheme.font.familyCode, ";font-size:inherit;color:", euiCodeSyntaxVariables.color, ";display:block;;label:euiCodeBlock__code;"),
+    euiCodeBlock__code: /*#__PURE__*/css("font-family:", euiTheme.font.familyCode, ";font-size:inherit;color:", euiTheme.colors.text, ";display:block;;label:euiCodeBlock__code;"),
     isVirtualized: _ref
   };
 };

package/optimize/es/components/code/code_block_controls.js

@@ -7,14 +7,13 @@
  */
 
 import React, { Fragment } from 'react';
-import { useEuiTheme } from '../../services';
-import { useEuiCodeSyntaxVariables } from './code_syntax.styles';
+import { useEuiMemoizedStyles } from '../../services';
 import { euiCodeBlockControlsStyles } from './code_block_controls.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiCodeBlockControls = function EuiCodeBlockControls(_ref) {
   var paddingSize = _ref.paddingSize,
     controls = _ref.controls;
-  var styles = euiCodeBlockControlsStyles(useEuiTheme(), useEuiCodeSyntaxVariables());
+  var styles = useEuiMemoizedStyles(euiCodeBlockControlsStyles);
   var cssStyles = [styles.euiCodeBlock__controls, styles.offset[paddingSize]];
   var hasControls = controls.some(function (control) {
     return !!control;

package/optimize/es/components/code/code_block_controls.styles.js

@@ -16,6 +16,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css } from '@emotion/react';
 import { euiPaddingSize } from '../../global_styling';
+import { euiCodeSyntaxVariables } from './code_syntax.styles';
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "to86kv-none",
   styles: "inset-block-start:0;inset-inline-end:0;label:none;"
@@ -24,10 +25,11 @@ var _ref = process.env.NODE_ENV === "production" ? {
   styles: "inset-block-start:0;inset-inline-end:0;label:none;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-export var euiCodeBlockControlsStyles = function euiCodeBlockControlsStyles(euiThemeContext, euiCodeSyntaxVariables) {
+export var euiCodeBlockControlsStyles = function euiCodeBlockControlsStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var codeSyntaxVariables = euiCodeSyntaxVariables(euiThemeContext);
   return {
-    euiCodeBlock__controls: /*#__PURE__*/css("position:absolute;display:flex;flex-direction:column;gap:", euiTheme.size.xs, ";background:", euiCodeSyntaxVariables.backgroundColor, ";;label:euiCodeBlock__controls;"),
+    euiCodeBlock__controls: /*#__PURE__*/css("position:absolute;display:flex;flex-direction:column;gap:", euiTheme.size.xs, ";background:", codeSyntaxVariables.backgroundColor, ";;label:euiCodeBlock__controls;"),
     offset: {
       none: _ref,
       s: /*#__PURE__*/css("inset-block-start:", euiPaddingSize(euiThemeContext, 's'), ";inset-inline-end:", euiPaddingSize(euiThemeContext, 's'), ";;label:s;"),

package/optimize/es/components/code/code_block_full_screen.js

@@ -8,12 +8,11 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  */
 
 import React, { useState, useCallback, useMemo } from 'react';
-import { keys, useEuiTheme } from '../../services';
+import { keys, useEuiMemoizedStyles } from '../../services';
 import { useEuiI18n } from '../i18n';
 import { EuiButtonIcon } from '../button';
 import { EuiFocusTrap } from '../focus_trap';
 import { EuiOverlayMask } from '../overlay_mask';
-import { useEuiCodeSyntaxVariables } from './code_syntax.styles';
 import { euiCodeBlockStyles } from './code_block.styles';
 
 /**
@@ -69,7 +68,7 @@ export var useFullScreen = function useFullScreen(_ref) {
  */
 export var EuiCodeBlockFullScreenWrapper = function EuiCodeBlockFullScreenWrapper(_ref2) {
   var children = _ref2.children;
-  var styles = euiCodeBlockStyles(useEuiTheme(), useEuiCodeSyntaxVariables());
+  var styles = useEuiMemoizedStyles(euiCodeBlockStyles);
   var cssStyles = [styles.euiCodeBlock, styles.l,
   // Force fullscreen to use large font
   styles.isFullScreen];

package/optimize/es/components/code/code_syntax.styles.js

@@ -6,44 +6,39 @@
  * Side Public License, v 1.
  */
 
-import { useMemo } from 'react';
-import { useEuiTheme, makeHighContrastColor, euiPaletteColorBlind } from '../../services';
+import { makeHighContrastColor, euiPaletteColorBlind } from '../../services';
 var visColors = euiPaletteColorBlind();
 
-// These variables are computationally expensive, so it needs
-// to be a hook in order to memoize it per theme
-export var useEuiCodeSyntaxVariables = function useEuiCodeSyntaxVariables() {
-  var _useEuiTheme = useEuiTheme(),
-    euiTheme = _useEuiTheme.euiTheme;
-  return useMemo(function () {
-    var backgroundColor = euiTheme.colors.lightestShade;
-    return {
-      backgroundColor: backgroundColor,
-      color: makeHighContrastColor(euiTheme.colors.text)(backgroundColor),
-      inlineCodeColor: makeHighContrastColor(visColors[3])(backgroundColor),
-      selectedBackgroundColor: 'inherit',
-      commentColor: makeHighContrastColor(euiTheme.colors.subduedText)(backgroundColor),
-      selectorTagColor: 'inherit',
-      stringColor: makeHighContrastColor(visColors[2])(backgroundColor),
-      tagColor: makeHighContrastColor(visColors[1])(backgroundColor),
-      nameColor: makeHighContrastColor(visColors[1])(backgroundColor),
-      numberColor: makeHighContrastColor(visColors[0])(backgroundColor),
-      keywordColor: makeHighContrastColor(visColors[3])(backgroundColor),
-      functionTitleColor: 'inherit',
-      typeColor: makeHighContrastColor(visColors[1])(backgroundColor),
-      attributeColor: 'inherit',
-      symbolColor: makeHighContrastColor(visColors[9])(backgroundColor),
-      paramsColor: 'inherit',
-      metaColor: makeHighContrastColor(euiTheme.colors.subduedText)(backgroundColor),
-      titleColor: makeHighContrastColor(visColors[7])(backgroundColor),
-      sectionColor: makeHighContrastColor(visColors[9])(backgroundColor),
-      additionColor: makeHighContrastColor(visColors[0])(backgroundColor),
-      deletionColor: makeHighContrastColor(euiTheme.colors.danger)(backgroundColor),
-      selectorClassColor: 'inherit',
-      selectorIdColor: 'inherit',
-      get tokensCss() {
-        return "\n  .token.punctuation:not(.interpolation-punctuation):not([class*='attr-']) {\n    opacity: .7;\n  }\n\n  .token.comment,\n  .token.prolog,\n  .token.doctype,\n  .token.cdata,\n  .token.coord,\n  .token.blockquote {\n    color: ".concat(this.commentColor, ";\n    font-style: italic;\n  }\n\n  .token.selector {\n    color: ").concat(this.selectorTagColor, ";\n  }\n\n  .token.string,\n  .token.interpolation,\n  .token.interpolation-punctuation,\n  .token.doc-comment .token.keyword,\n  .token.attr-value,\n  .token.url .token.content {\n    color: ").concat(this.stringColor, ";\n  }\n\n  .token.number,\n  .token.boolean,\n  .token.keyword.nil,\n  .token.regex,\n  .token.variable,\n  .token.unit,\n  .token.hexcode,\n  .token.attr-name,\n  .token.attr-equals {\n    color: ").concat(this.numberColor, ";\n  }\n\n  .token.atrule .token.rule,\n  .token.keyword {\n    color: ").concat(this.keywordColor, ";\n  }\n\n  .token.function {\n    color: ").concat(this.functionTitleColor, ";\n  }\n\n  .token.tag {\n    color: ").concat(this.tagColor, ";\n  }\n\n  .token.class-name {\n    color: ").concat(this.typeColor, ";\n  }\n\n  .token.property {\n    color: ").concat(this.attributeColor, ";\n  }\n\n  .token.console,\n  .token.list-punctuation,\n  .token.url-reference,\n  .token.url .token.url {\n    color: ").concat(this.symbolColor, ";\n  }\n\n  .token.paramater {\n    color: ").concat(this.paramsColor, ";\n  }\n\n  .token.meta,\n  .token.important {\n    color: ").concat(this.metaColor, ";\n  }\n\n  .token.title {\n    color: ").concat(this.titleColor, ";\n  }\n\n  .token.section {\n    color: ").concat(this.sectionColor, ";\n  }\n\n  .token.prefix.inserted,\n  .token.prefix.deleted {\n    padding-inline-start: -").concat(euiTheme.size.xs, ";\n    margin-inline-start:  -").concat(euiTheme.size.xs, ";\n  }\n\n  .token.prefix.inserted {\n    box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(this.additionColor, ";\n    color: ").concat(this.additionColor, ";\n  }\n\n  .token.prefix.deleted {\n    box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(this.deletionColor, ";\n    color: ").concat(this.deletionColor, ";\n  }\n\n  .token.selector .token.class {\n    color: ").concat(this.selectorClassColor, ";\n  }\n\n  .token.selector .token.id {\n    color: ").concat(this.selectorIdColor, ";\n  }\n\n  .token.italic {\n    font-style: italic;\n  }\n\n  .token.important,\n  .token.bold {\n    font-weight: ").concat(euiTheme.font.weight.bold, ";\n  }\n\n  .token.url-reference,\n  .token.url .token.url {\n    text-decoration: underline;\n  }\n\n  .token.entity {\n    cursor: help;\n  }");
-      }
-    };
-  }, [euiTheme]);
+// These variables are computationally expensive - do not call them outside `useEuiMemoizedStyles`
+export var euiCodeSyntaxVariables = function euiCodeSyntaxVariables(_ref) {
+  var euiTheme = _ref.euiTheme;
+  var backgroundColor = euiTheme.colors.lightestShade;
+  return {
+    backgroundColor: backgroundColor,
+    color: makeHighContrastColor(euiTheme.colors.text)(backgroundColor),
+    inlineCodeColor: makeHighContrastColor(visColors[3])(backgroundColor),
+    selectedBackgroundColor: 'inherit',
+    commentColor: makeHighContrastColor(euiTheme.colors.subduedText)(backgroundColor),
+    selectorTagColor: 'inherit',
+    stringColor: makeHighContrastColor(visColors[2])(backgroundColor),
+    tagColor: makeHighContrastColor(visColors[1])(backgroundColor),
+    nameColor: makeHighContrastColor(visColors[1])(backgroundColor),
+    numberColor: makeHighContrastColor(visColors[0])(backgroundColor),
+    keywordColor: makeHighContrastColor(visColors[3])(backgroundColor),
+    functionTitleColor: 'inherit',
+    typeColor: makeHighContrastColor(visColors[1])(backgroundColor),
+    attributeColor: 'inherit',
+    symbolColor: makeHighContrastColor(visColors[9])(backgroundColor),
+    paramsColor: 'inherit',
+    metaColor: makeHighContrastColor(euiTheme.colors.subduedText)(backgroundColor),
+    titleColor: makeHighContrastColor(visColors[7])(backgroundColor),
+    sectionColor: makeHighContrastColor(visColors[9])(backgroundColor),
+    additionColor: makeHighContrastColor(visColors[0])(backgroundColor),
+    deletionColor: makeHighContrastColor(euiTheme.colors.danger)(backgroundColor),
+    selectorClassColor: 'inherit',
+    selectorIdColor: 'inherit',
+    get tokensCss() {
+      return "\n  .token.punctuation:not(.interpolation-punctuation):not([class*='attr-']) {\n    opacity: .7;\n  }\n\n  .token.comment,\n  .token.prolog,\n  .token.doctype,\n  .token.cdata,\n  .token.coord,\n  .token.blockquote {\n    color: ".concat(this.commentColor, ";\n    font-style: italic;\n  }\n\n  .token.selector {\n    color: ").concat(this.selectorTagColor, ";\n  }\n\n  .token.string,\n  .token.interpolation,\n  .token.interpolation-punctuation,\n  .token.doc-comment .token.keyword,\n  .token.attr-value,\n  .token.url .token.content {\n    color: ").concat(this.stringColor, ";\n  }\n\n  .token.number,\n  .token.boolean,\n  .token.keyword.nil,\n  .token.regex,\n  .token.variable,\n  .token.unit,\n  .token.hexcode,\n  .token.attr-name,\n  .token.attr-equals {\n    color: ").concat(this.numberColor, ";\n  }\n\n  .token.atrule .token.rule,\n  .token.keyword {\n    color: ").concat(this.keywordColor, ";\n  }\n\n  .token.function {\n    color: ").concat(this.functionTitleColor, ";\n  }\n\n  .token.tag {\n    color: ").concat(this.tagColor, ";\n  }\n\n  .token.class-name {\n    color: ").concat(this.typeColor, ";\n  }\n\n  .token.property {\n    color: ").concat(this.attributeColor, ";\n  }\n\n  .token.console,\n  .token.list-punctuation,\n  .token.url-reference,\n  .token.url .token.url {\n    color: ").concat(this.symbolColor, ";\n  }\n\n  .token.paramater {\n    color: ").concat(this.paramsColor, ";\n  }\n\n  .token.meta,\n  .token.important {\n    color: ").concat(this.metaColor, ";\n  }\n\n  .token.title {\n    color: ").concat(this.titleColor, ";\n  }\n\n  .token.section {\n    color: ").concat(this.sectionColor, ";\n  }\n\n  .token.prefix.inserted,\n  .token.prefix.deleted {\n    padding-inline-start: -").concat(euiTheme.size.xs, ";\n    margin-inline-start:  -").concat(euiTheme.size.xs, ";\n  }\n\n  .token.prefix.inserted {\n    box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(this.additionColor, ";\n    color: ").concat(this.additionColor, ";\n  }\n\n  .token.prefix.deleted {\n    box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(this.deletionColor, ";\n    color: ").concat(this.deletionColor, ";\n  }\n\n  .token.selector .token.class {\n    color: ").concat(this.selectorClassColor, ";\n  }\n\n  .token.selector .token.id {\n    color: ").concat(this.selectorIdColor, ";\n  }\n\n  .token.italic {\n    font-style: italic;\n  }\n\n  .token.important,\n  .token.bold {\n    font-weight: ").concat(euiTheme.font.weight.bold, ";\n  }\n\n  .token.url-reference,\n  .token.url .token.url {\n    text-decoration: underline;\n  }\n\n  .token.entity {\n    cursor: help;\n  }");
+    }
+  };
 };

package/optimize/es/components/datagrid/utils/grid_height_width.js

@@ -148,12 +148,15 @@ export var useVirtualizeContainerWidth = function useVirtualizeContainerWidth(vi
   }, [virtualizeContainer === null || virtualizeContainer === void 0 ? void 0 : virtualizeContainer.clientWidth]);
   useEffect(function () {
     // wait for layout to settle, then measure virtualize container
-    setTimeout(function () {
+    var timerId = setTimeout(function () {
       if (virtualizeContainer !== null && virtualizeContainer !== void 0 && virtualizeContainer.clientWidth) {
         var containerWidth = virtualizeContainer.clientWidth;
         setVirtualizeContainerWidth(containerWidth);
       }
     }, 100);
+    return function () {
+      return clearTimeout(timerId);
+    };
   }, [pageSize, virtualizeContainer]);
 
   // Use clientWidth of the virtualization container to take scroll bar into account

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

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+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
+
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var EuiIconDiff = function EuiIconDiff(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return ___EmotionJSX("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? ___EmotionJSX("title", {
+    id: titleId
+  }, title) : null, ___EmotionJSX("path", {
+    d: "M5 1.5a.5.5 0 0 0-1 0V4H1.5a.5.5 0 0 0 0 1H4v2.5a.5.5 0 0 0 1 0V5h2.5a.5.5 0 0 0 0-1H5V1.5Zm3 10a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5Zm4.854-7.646a.5.5 0 0 0-.708-.708l-9 9a.5.5 0 0 0 .708.708l9-9Z"
+  }));
+};
+export var icon = EuiIconDiff;

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

@@ -0,0 +1,36 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+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
+
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var EuiIconNewChat = function EuiIconNewChat(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return ___EmotionJSX("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? ___EmotionJSX("title", {
+    id: titleId
+  }, title) : null, ___EmotionJSX("path", {
+    d: "M8 4a.5.5 0 0 1 .5.5V6H10a.5.5 0 0 1 0 1H8.5v1.5a.5.5 0 0 1-1 0V7H6a.5.5 0 0 1 0-1h1.5V4.5A.5.5 0 0 1 8 4Z"
+  }), ___EmotionJSX("path", {
+    fillRule: "evenodd",
+    d: "M1 4a2.5 2.5 0 0 1 2.5-2.5h9A2.5 2.5 0 0 1 15 4v5a2.5 2.5 0 0 1-2.5 2.5H7.707L4.5 14.707V11.5h-1A2.5 2.5 0 0 1 1 9V4Zm2.5-1.5A1.5 1.5 0 0 0 2 4v5a1.5 1.5 0 0 0 1.5 1.5h2v1.793L7.293 10.5H12.5A1.5 1.5 0 0 0 14 9V4a1.5 1.5 0 0 0-1.5-1.5h-9Z",
+    clipRule: "evenodd"
+  }));
+};
+export var icon = EuiIconNewChat;

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

@@ -81,6 +81,7 @@ export var typeToPathMap = {
   database: 'database',
   desktop: 'desktop',
   devToolsApp: 'app_devtools',
+  diff: 'diff',
   discoverApp: 'app_discover',
   discuss: 'discuss',
   document: 'document',
@@ -302,6 +303,7 @@ export var typeToPathMap = {
   moon: 'moon',
   namespace: 'namespace',
   nested: 'nested',
+  newChat: 'new_chat',
   node: 'node',
   notebookApp: 'app_notebook',
   number: 'number',

package/optimize/es/components/page/page_sidebar/page_sidebar.js

@@ -3,7 +3,7 @@ import _typeof from "@babel/runtime/helpers/typeof";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "sticky", "paddingSize", "minWidth", "responsive", "style"];
+var _excluded = ["children", "className", "sticky", "paddingSize", "minWidth", "responsive", "hasEmbellish", "style"];
 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; }
 /*
@@ -30,12 +30,14 @@ export var EuiPageSidebar = function EuiPageSidebar(_ref) {
     minWidth = _ref$minWidth === void 0 ? 248 : _ref$minWidth,
     _ref$responsive = _ref.responsive,
     responsive = _ref$responsive === void 0 ? ['xs', 's'] : _ref$responsive,
+    _ref$hasEmbellish = _ref.hasEmbellish,
+    hasEmbellish = _ref$hasEmbellish === void 0 ? false : _ref$hasEmbellish,
     style = _ref.style,
     rest = _objectWithoutProperties(_ref, _excluded);
   var themeContext = useEuiTheme();
   var styles = euiPageSidebarStyles(themeContext);
   var isResponding = useIsWithinBreakpoints(responsive);
-  var cssStyles = [styles.euiPageSidebar, !isResponding && sticky && styles.sticky, useEuiPaddingCSS()[paddingSize]];
+  var cssStyles = [styles.euiPageSidebar, !isResponding && sticky && styles.sticky, hasEmbellish && styles.embellish, useEuiPaddingCSS()[paddingSize]];
 
   // Inline styles for setting up width and sticky offsets
   var _useState = useState(_objectSpread(_objectSpread({}, style), logicalStyle('min-width', isResponding ? '100%' : minWidth))),

package/optimize/es/components/page/page_sidebar/page_sidebar.styles.js

@@ -8,6 +8,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
+import { transparentize } from '../../../services';
 import { euiYScroll } from '../../../global_styling';
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "wtyx0k-euiPageSidebar",
@@ -18,10 +19,13 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 export var euiPageSidebarStyles = function euiPageSidebarStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var embellishColor = transparentize(euiTheme.colors.lightShade, 0.3);
   return {
     euiPageSidebar: _ref,
     sticky: /*#__PURE__*/css(euiYScroll(euiThemeContext, {
       height: 'auto'
-    }), " flex-grow:1;position:sticky;;label:sticky;")
+    }), " flex-grow:1;position:sticky;;label:sticky;"),
+    embellish: /*#__PURE__*/css("background:linear-gradient(\n          160deg,\n          ", embellishColor, " 0,\n          ", embellishColor, " ", euiTheme.size.xl, ",\n          transparent 0\n        ),linear-gradient(\n          175deg,\n          ", embellishColor, " 0,\n          ", embellishColor, " ", euiTheme.size.base, ",\n          transparent 0\n        );;label:embellish;")
   };
 };

package/optimize/es/components/page_template/page_template.js

@@ -95,7 +95,7 @@ export var _EuiPageTemplate = function _EuiPageTemplate(_ref) {
       restrictWidth: restrictWidth,
       paddingSize: paddingSize,
       // pageInnerId may contain colons that are parsed as pseudo-elements if not escaped
-      parent: "#".concat(CSS.escape(pageInnerId))
+      parent: "#".concat(pageInnerId.replaceAll(':', '\\:'))
     };
   };
   var innerPanelled = function innerPanelled() {

package/optimize/es/components/side_nav/_side_nav_heading.js

@@ -0,0 +1,47 @@
+import { css as _css } from "@emotion/react";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "id", "className", "element", "screenReaderOnly", "size", "textTransform"];
+/*
+ * 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 classNames from 'classnames';
+import { useEuiTheme } from '../../services';
+import { EuiTitle } from '../title';
+import { EuiScreenReaderOnly } from '../accessibility';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var EuiSideNavHeading = function EuiSideNavHeading(_ref) {
+  var children = _ref.children,
+    id = _ref.id,
+    className = _ref.className,
+    _ref$element = _ref.element,
+    HeadingElement = _ref$element === void 0 ? 'h2' : _ref$element,
+    _ref$screenReaderOnly = _ref.screenReaderOnly,
+    screenReaderOnly = _ref$screenReaderOnly === void 0 ? false : _ref$screenReaderOnly,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'xs' : _ref$size,
+    textTransform = _ref.textTransform,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var classes = classNames('euiSideNav__heading', className);
+  var _useEuiTheme = useEuiTheme(),
+    euiTheme = _useEuiTheme.euiTheme;
+  return screenReaderOnly ? ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX(HeadingElement, _extends({
+    id: id,
+    className: classes
+  }, rest), children)) : ___EmotionJSX(EuiTitle, {
+    size: size,
+    textTransform: textTransform
+  }, ___EmotionJSX(HeadingElement, _extends({
+    id: id,
+    className: classes,
+    css: /*#__PURE__*/_css({
+      marginBlockEnd: euiTheme.size.l
+    }, ";label:EuiSideNavHeading;")
+  }, rest), children));
+};