@elastic/eui 93.1.0 → 93.2.0

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiCodeStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
+var _code_syntax = require("./code_syntax.styles");
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
                                                                                                                                                                                                                                                                                            * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
                                                                                                                                                                                                                                                                                            * or more contributor license agreements. Licensed under the Elastic License
@@ -21,13 +22,14 @@ var _ref = process.env.NODE_ENV === "production" ? {
   styles: "background:transparent;label:transparentBackground;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var euiCodeStyles = function euiCodeStyles(euiThemeContext, euiCodeSyntaxVariables) {
+var euiCodeStyles = function euiCodeStyles(euiThemeContext) {
+  var codeSyntaxVariables = (0, _code_syntax.euiCodeSyntaxVariables)(euiThemeContext);
   var euiTheme = euiThemeContext.euiTheme;
   return {
     /*
      * 1. Size the code against the text its embedded within.
      */
-    euiCode: /*#__PURE__*/(0, _react.css)("font-family:", euiTheme.font.familyCode, ";font-size:0.9em;", (0, _global_styling.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__*/(0, _react.css)("font-family:", euiTheme.font.familyCode, ";font-size:0.9em;", (0, _global_styling.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/lib/components/code/code_block.js

@@ -21,7 +21,6 @@ var _code_block_full_screen = require("./code_block_full_screen");
 var _code_block_controls = require("./code_block_controls");
 var _code_block_virtualized = require("./code_block_virtualized");
 var _code_block = require("./code_block.styles");
-var _code_syntax = require("./code_syntax.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["language", "transparentBackground", "paddingSize", "fontSize", "isCopyable", "whiteSpace", "children", "className", "overflowHeight", "isVirtualized", "lineNumbers"];
 /*
@@ -68,7 +67,6 @@ var EuiCodeBlock = function EuiCodeBlock(_ref) {
     lineNumbers = _ref$lineNumbers === void 0 ? false : _ref$lineNumbers,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var euiTheme = (0, _services.useEuiTheme)();
-  var euiCodeSyntaxVariables = (0, _code_syntax.useEuiCodeSyntaxVariables)();
   var language = (0, _react.useMemo)(function () {
     return (0, _utils.checkSupportedLanguage)(_language);
   }, [_language]);
@@ -120,39 +118,39 @@ var EuiCodeBlock = function EuiCodeBlock(_ref) {
     onKeyDown = _useFullScreen.onKeyDown;
   var hasControls = !!(copyButton || fullScreenButton);
   var hasBothControls = !!(copyButton && fullScreenButton);
-  var styles = (0, _code_block.euiCodeBlockStyles)(euiTheme, euiCodeSyntaxVariables);
+  var styles = (0, _services.useEuiMemoizedStyles)(_code_block.euiCodeBlockStyles);
   var cssStyles = [styles.euiCodeBlock, styles[fontSize], transparentBackground && styles.transparentBackground, hasControls && (hasBothControls ? styles.hasBothControls[paddingSize] : styles.hasControls[paddingSize])];
+  var preStyles = (0, _services.useEuiMemoizedStyles)(_code_block.euiCodeBlockPreStyles);
   var _useMemo = (0, _react.useMemo)(function () {
       var isWhiteSpacePre = whiteSpace === 'pre' || isVirtualized;
-      var styles = (0, _code_block.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 = (0, _slicedToArray2.default)(_useMemo, 2),
     preProps = _useMemo2[0],
     preFullscreenProps = _useMemo2[1];
+  var codeStyles = (0, _services.useEuiMemoizedStyles)(_code_block.euiCodeBlockCodeStyles);
   var codeProps = (0, _react.useMemo)(function () {
-    var styles = (0, _code_block.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 (0, _react2.jsx)("div", {
     css: cssStyles,
     className: (0, _classnames.default)('euiCodeBlock', className),

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

@@ -8,6 +8,7 @@ exports.euiCodeBlockStyles = exports.euiCodeBlockPreStyles = exports.euiCodeBloc
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
+var _code_syntax = require("./code_syntax.styles");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
@@ -39,10 +40,11 @@ var _ref5 = process.env.NODE_ENV === "production" ? {
   styles: "background:transparent;label:transparentBackground;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var euiCodeBlockStyles = function euiCodeBlockStyles(euiThemeContext, euiCodeSyntaxVariables) {
+var euiCodeBlockStyles = function euiCodeBlockStyles(euiThemeContext) {
+  var codeSyntaxVariables = (0, _code_syntax.euiCodeSyntaxVariables)(euiThemeContext);
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiCodeBlock: /*#__PURE__*/(0, _react.css)("max-inline-size:100%;display:block;position:relative;background:", euiCodeSyntaxVariables.backgroundColor, ";", euiCodeSyntaxVariables.tokensCss, ";;label:euiCodeBlock;"),
+    euiCodeBlock: /*#__PURE__*/(0, _react.css)("max-inline-size:100%;display:block;position:relative;background:", codeSyntaxVariables.backgroundColor, ";", codeSyntaxVariables.tokensCss, ";;label:euiCodeBlock;"),
     // Font size
     s: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), ";;label:s;"),
     m: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 's'), ";;label:m;"),
@@ -116,10 +118,10 @@ var _ref = process.env.NODE_ENV === "production" ? {
   styles: "position:relative;label:isVirtualized;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var euiCodeBlockCodeStyles = function euiCodeBlockCodeStyles(euiThemeContext, euiCodeSyntaxVariables) {
+var euiCodeBlockCodeStyles = function euiCodeBlockCodeStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiCodeBlock__code: /*#__PURE__*/(0, _react.css)("font-family:", euiTheme.font.familyCode, ";font-size:inherit;color:", euiCodeSyntaxVariables.color, ";display:block;;label:euiCodeBlock__code;"),
+    euiCodeBlock__code: /*#__PURE__*/(0, _react.css)("font-family:", euiTheme.font.familyCode, ";font-size:inherit;color:", euiTheme.colors.text, ";display:block;;label:euiCodeBlock__code;"),
     isVirtualized: _ref
   };
 };

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

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.EuiCodeBlockControls = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _services = require("../../services");
-var _code_syntax = require("./code_syntax.styles");
 var _code_block_controls = require("./code_block_controls.styles");
 var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -23,7 +22,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var EuiCodeBlockControls = function EuiCodeBlockControls(_ref) {
   var paddingSize = _ref.paddingSize,
     controls = _ref.controls;
-  var styles = (0, _code_block_controls.euiCodeBlockControlsStyles)((0, _services.useEuiTheme)(), (0, _code_syntax.useEuiCodeSyntaxVariables)());
+  var styles = (0, _services.useEuiMemoizedStyles)(_code_block_controls.euiCodeBlockControlsStyles);
   var cssStyles = [styles.euiCodeBlock__controls, styles.offset[paddingSize]];
   var hasControls = controls.some(function (control) {
     return !!control;

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiCodeBlockControlsStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
+var _code_syntax = require("./code_syntax.styles");
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
                                                                                                                                                                                                                                                                                            * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
                                                                                                                                                                                                                                                                                            * or more contributor license agreements. Licensed under the Elastic License
@@ -27,10 +28,11 @@ var _ref = process.env.NODE_ENV === "production" ? {
   styles: "inset-block-start:0;inset-inline-end:0;label:none;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var euiCodeBlockControlsStyles = function euiCodeBlockControlsStyles(euiThemeContext, euiCodeSyntaxVariables) {
+var euiCodeBlockControlsStyles = function euiCodeBlockControlsStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var codeSyntaxVariables = (0, _code_syntax.euiCodeSyntaxVariables)(euiThemeContext);
   return {
-    euiCodeBlock__controls: /*#__PURE__*/(0, _react.css)("position:absolute;display:flex;flex-direction:column;gap:", euiTheme.size.xs, ";background:", euiCodeSyntaxVariables.backgroundColor, ";;label:euiCodeBlock__controls;"),
+    euiCodeBlock__controls: /*#__PURE__*/(0, _react.css)("position:absolute;display:flex;flex-direction:column;gap:", euiTheme.size.xs, ";background:", codeSyntaxVariables.backgroundColor, ";;label:euiCodeBlock__controls;"),
     offset: {
       none: _ref,
       s: /*#__PURE__*/(0, _react.css)("inset-block-start:", (0, _global_styling.euiPaddingSize)(euiThemeContext, 's'), ";inset-inline-end:", (0, _global_styling.euiPaddingSize)(euiThemeContext, 's'), ";;label:s;"),

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

@@ -13,7 +13,6 @@ var _i18n = require("../i18n");
 var _button = require("../button");
 var _focus_trap = require("../focus_trap");
 var _overlay_mask = require("../overlay_mask");
-var _code_syntax = require("./code_syntax.styles");
 var _code_block = require("./code_block.styles");
 var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -79,7 +78,7 @@ var useFullScreen = function useFullScreen(_ref) {
 exports.useFullScreen = useFullScreen;
 var EuiCodeBlockFullScreenWrapper = function EuiCodeBlockFullScreenWrapper(_ref2) {
   var children = _ref2.children;
-  var styles = (0, _code_block.euiCodeBlockStyles)((0, _services.useEuiTheme)(), (0, _code_syntax.useEuiCodeSyntaxVariables)());
+  var styles = (0, _services.useEuiMemoizedStyles)(_code_block.euiCodeBlockStyles);
   var cssStyles = [styles.euiCodeBlock, styles.l,
   // Force fullscreen to use large font
   styles.isFullScreen];

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

@@ -3,8 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useEuiCodeSyntaxVariables = void 0;
-var _react = require("react");
+exports.euiCodeSyntaxVariables = void 0;
 var _services = require("../../services");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -16,41 +15,37 @@ var _services = require("../../services");
 
 var visColors = (0, _services.euiPaletteColorBlind)();
 
-// These variables are computationally expensive, so it needs
-// to be a hook in order to memoize it per theme
-var useEuiCodeSyntaxVariables = function useEuiCodeSyntaxVariables() {
-  var _useEuiTheme = (0, _services.useEuiTheme)(),
-    euiTheme = _useEuiTheme.euiTheme;
-  return (0, _react.useMemo)(function () {
-    var backgroundColor = euiTheme.colors.lightestShade;
-    return {
-      backgroundColor: backgroundColor,
-      color: (0, _services.makeHighContrastColor)(euiTheme.colors.text)(backgroundColor),
-      inlineCodeColor: (0, _services.makeHighContrastColor)(visColors[3])(backgroundColor),
-      selectedBackgroundColor: 'inherit',
-      commentColor: (0, _services.makeHighContrastColor)(euiTheme.colors.subduedText)(backgroundColor),
-      selectorTagColor: 'inherit',
-      stringColor: (0, _services.makeHighContrastColor)(visColors[2])(backgroundColor),
-      tagColor: (0, _services.makeHighContrastColor)(visColors[1])(backgroundColor),
-      nameColor: (0, _services.makeHighContrastColor)(visColors[1])(backgroundColor),
-      numberColor: (0, _services.makeHighContrastColor)(visColors[0])(backgroundColor),
-      keywordColor: (0, _services.makeHighContrastColor)(visColors[3])(backgroundColor),
-      functionTitleColor: 'inherit',
-      typeColor: (0, _services.makeHighContrastColor)(visColors[1])(backgroundColor),
-      attributeColor: 'inherit',
-      symbolColor: (0, _services.makeHighContrastColor)(visColors[9])(backgroundColor),
-      paramsColor: 'inherit',
-      metaColor: (0, _services.makeHighContrastColor)(euiTheme.colors.subduedText)(backgroundColor),
-      titleColor: (0, _services.makeHighContrastColor)(visColors[7])(backgroundColor),
-      sectionColor: (0, _services.makeHighContrastColor)(visColors[9])(backgroundColor),
-      additionColor: (0, _services.makeHighContrastColor)(visColors[0])(backgroundColor),
-      deletionColor: (0, _services.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`
+var euiCodeSyntaxVariables = function euiCodeSyntaxVariables(_ref) {
+  var euiTheme = _ref.euiTheme;
+  var backgroundColor = euiTheme.colors.lightestShade;
+  return {
+    backgroundColor: backgroundColor,
+    color: (0, _services.makeHighContrastColor)(euiTheme.colors.text)(backgroundColor),
+    inlineCodeColor: (0, _services.makeHighContrastColor)(visColors[3])(backgroundColor),
+    selectedBackgroundColor: 'inherit',
+    commentColor: (0, _services.makeHighContrastColor)(euiTheme.colors.subduedText)(backgroundColor),
+    selectorTagColor: 'inherit',
+    stringColor: (0, _services.makeHighContrastColor)(visColors[2])(backgroundColor),
+    tagColor: (0, _services.makeHighContrastColor)(visColors[1])(backgroundColor),
+    nameColor: (0, _services.makeHighContrastColor)(visColors[1])(backgroundColor),
+    numberColor: (0, _services.makeHighContrastColor)(visColors[0])(backgroundColor),
+    keywordColor: (0, _services.makeHighContrastColor)(visColors[3])(backgroundColor),
+    functionTitleColor: 'inherit',
+    typeColor: (0, _services.makeHighContrastColor)(visColors[1])(backgroundColor),
+    attributeColor: 'inherit',
+    symbolColor: (0, _services.makeHighContrastColor)(visColors[9])(backgroundColor),
+    paramsColor: 'inherit',
+    metaColor: (0, _services.makeHighContrastColor)(euiTheme.colors.subduedText)(backgroundColor),
+    titleColor: (0, _services.makeHighContrastColor)(visColors[7])(backgroundColor),
+    sectionColor: (0, _services.makeHighContrastColor)(visColors[9])(backgroundColor),
+    additionColor: (0, _services.makeHighContrastColor)(visColors[0])(backgroundColor),
+    deletionColor: (0, _services.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  }");
+    }
+  };
 };
-exports.useEuiCodeSyntaxVariables = useEuiCodeSyntaxVariables;
+exports.euiCodeSyntaxVariables = euiCodeSyntaxVariables;

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

@@ -157,12 +157,15 @@ var useVirtualizeContainerWidth = function useVirtualizeContainerWidth(virtualiz
   }, [virtualizeContainer === null || virtualizeContainer === void 0 ? void 0 : virtualizeContainer.clientWidth]);
   (0, _react.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/lib/components/icon/assets/diff.js

@@ -0,0 +1,41 @@
+"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(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var EuiIconDiff = function EuiIconDiff(_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: "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"
+  }));
+};
+var icon = EuiIconDiff;
+exports.icon = icon;

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

@@ -0,0 +1,45 @@
+"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(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var EuiIconNewChat = function EuiIconNewChat(_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: "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"
+  }), (0, _react2.jsx)("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"
+  }));
+};
+var icon = EuiIconNewChat;
+exports.icon = icon;

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

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

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

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><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"/></svg>

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

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16"  xmlns="http://www.w3.org/2000/svg">
+<path d="M8 4C8.27614 4 8.5 4.22386 8.5 4.5V6H10C10.2761 6 10.5 6.22386 10.5 6.5C10.5 6.77614 10.2761 7 10 7H8.5V8.5C8.5 8.77614 8.27614 9 8 9C7.72386 9 7.5 8.77614 7.5 8.5V7H6C5.72386 7 5.5 6.77614 5.5 6.5C5.5 6.22386 5.72386 6 6 6H7.5V4.5C7.5 4.22386 7.72386 4 8 4Z" />
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 4C1 2.61929 2.11929 1.5 3.5 1.5H12.5C13.8807 1.5 15 2.61929 15 4V9C15 10.3807 13.8807 11.5 12.5 11.5H7.70711L4.5 14.7071V11.5H3.5C2.11929 11.5 1 10.3807 1 9V4ZM3.5 2.5C2.67157 2.5 2 3.17157 2 4V9C2 9.82843 2.67157 10.5 3.5 10.5H5.5V12.2929L7.29289 10.5H12.5C13.3284 10.5 14 9.82843 14 9V4C14 3.17157 13.3284 2.5 12.5 2.5H3.5Z" />
+</svg>

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

@@ -16,7 +16,7 @@ var _global_styling = require("../../../global_styling");
 var _services = require("../../../services");
 var _page_sidebar = require("./page_sidebar.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "className", "sticky", "paddingSize", "minWidth", "responsive", "style"];
+var _excluded = ["children", "className", "sticky", "paddingSize", "minWidth", "responsive", "hasEmbellish", "style"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -39,12 +39,14 @@ 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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var themeContext = (0, _services.useEuiTheme)();
   var styles = (0, _page_sidebar.euiPageSidebarStyles)(themeContext);
   var isResponding = (0, _services.useIsWithinBreakpoints)(responsive);
-  var cssStyles = [styles.euiPageSidebar, !isResponding && sticky && styles.sticky, (0, _global_styling.useEuiPaddingCSS)()[paddingSize]];
+  var cssStyles = [styles.euiPageSidebar, !isResponding && sticky && styles.sticky, hasEmbellish && styles.embellish, (0, _global_styling.useEuiPaddingCSS)()[paddingSize]];
 
   // Inline styles for setting up width and sticky offsets
   var _useState = (0, _react.useState)(_objectSpread(_objectSpread({}, style), (0, _global_styling.logicalStyle)('min-width', isResponding ? '100%' : minWidth))),

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiPageSidebarStyles = void 0;
 var _react = require("@emotion/react");
+var _services = require("../../../services");
 var _global_styling = require("../../../global_styling");
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
                                                                                                                                                                                                                                                                                            * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -22,11 +23,14 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 var euiPageSidebarStyles = function euiPageSidebarStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var embellishColor = (0, _services.transparentize)(euiTheme.colors.lightShade, 0.3);
   return {
     euiPageSidebar: _ref,
     sticky: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiYScroll)(euiThemeContext, {
       height: 'auto'
-    }), " flex-grow:1;position:sticky;;label:sticky;")
+    }), " flex-grow:1;position:sticky;;label:sticky;"),
+    embellish: /*#__PURE__*/(0, _react.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;")
   };
 };
 exports.euiPageSidebarStyles = euiPageSidebarStyles;

package/optimize/lib/components/page_template/page_template.js

@@ -105,7 +105,7 @@ 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/lib/components/side_nav/_side_nav_heading.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiSideNavHeading = void 0;
+var _react = require("@emotion/react");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react2 = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../services");
+var _title = require("../title");
+var _accessibility = require("../accessibility");
+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.
+ */
+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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var classes = (0, _classnames.default)('euiSideNav__heading', className);
+  var _useEuiTheme = (0, _services.useEuiTheme)(),
+    euiTheme = _useEuiTheme.euiTheme;
+  return screenReaderOnly ? (0, _react.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react.jsx)(HeadingElement, (0, _extends2.default)({
+    id: id,
+    className: classes
+  }, rest), children)) : (0, _react.jsx)(_title.EuiTitle, {
+    size: size,
+    textTransform: textTransform
+  }, (0, _react.jsx)(HeadingElement, (0, _extends2.default)({
+    id: id,
+    className: classes,
+    css: /*#__PURE__*/(0, _react.css)({
+      marginBlockEnd: euiTheme.size.l
+    }, ";label:EuiSideNavHeading;")
+  }, rest), children));
+};
+exports.EuiSideNavHeading = EuiSideNavHeading;