@elastic/eui 93.1.1 → 93.2.0

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));
+};

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

@@ -8,8 +8,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["id", "name", "isSelected", "items", "icon", "onClick", "href", "forceOpen"],
-  _excluded2 = ["className", "items", "toggleOpenOnMobile", "isOpenOnMobile", "mobileTitle", "mobileBreakpoints", "renderItem", "truncate", "heading", "headingProps"],
-  _excluded3 = ["screenReaderOnly", "element"];
+  _excluded2 = ["className", "items", "toggleOpenOnMobile", "isOpenOnMobile", "mobileTitle", "mobileBreakpoints", "renderItem", "truncate", "heading", "headingProps", "theme"];
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 /*
@@ -22,19 +21,20 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React, { Component } from 'react';
 import classNames from 'classnames';
-import { EuiSideNavItem } from './side_nav_item';
 import { EuiButtonEmpty } from '../button';
-import { EuiTitle } from '../title';
-import { EuiScreenReaderOnly } from '../accessibility';
-import { htmlIdGenerator } from '../../services';
+import { EuiI18n } from '../i18n';
+import { htmlIdGenerator, withEuiTheme } from '../../services';
 import { EuiHideFor, EuiShowFor } from '../responsive';
+import { EuiSideNavHeading } from './_side_nav_heading';
+import { EuiSideNavItem } from './side_nav_item';
+import { euiSideNavMobileStyles } from './side_nav.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var EuiSideNav = /*#__PURE__*/function (_Component) {
-  _inherits(EuiSideNav, _Component);
-  var _super = _createSuper(EuiSideNav);
-  function EuiSideNav() {
+export var EuiSideNavClass = /*#__PURE__*/function (_Component) {
+  _inherits(EuiSideNavClass, _Component);
+  var _super = _createSuper(EuiSideNavClass);
+  function EuiSideNavClass() {
     var _this;
-    _classCallCheck(this, EuiSideNav);
+    _classCallCheck(this, EuiSideNavClass);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
@@ -100,7 +100,7 @@ export var EuiSideNav = /*#__PURE__*/function (_Component) {
     });
     return _this;
   }
-  _createClass(EuiSideNav, [{
+  _createClass(EuiSideNavClass, [{
     key: "render",
     value: function render() {
       var _this$props2 = this.props,
@@ -113,84 +113,73 @@ export var EuiSideNav = /*#__PURE__*/function (_Component) {
         renderItem = _this$props2.renderItem,
         truncate = _this$props2.truncate,
         heading = _this$props2.heading,
-        _this$props2$headingP = _this$props2.headingProps,
-        headingProps = _this$props2$headingP === void 0 ? {} : _this$props2$headingP,
+        headingProps = _this$props2.headingProps,
+        theme = _this$props2.theme,
         rest = _objectWithoutProperties(_this$props2, _excluded2);
       var classes = classNames('euiSideNav', className, {
         'euiSideNav-isOpenMobile': isOpenOnMobile
       });
-
-      // To support the extra CSS needed to show/hide/animate the content,
-      // We add a className for every breakpoint supported
-      var contentClasses = classNames('euiSideNav__content', mobileBreakpoints === null || mobileBreakpoints === void 0 ? void 0 : mobileBreakpoints.map(function (breakpointName) {
-        return "euiSideNav__contentMobile-".concat(breakpointName);
-      }));
+      var styles = euiSideNavMobileStyles(theme);
+      var contentClasses = classNames('euiSideNav__content');
       var sideNavContentId = this.generateId('content');
-      var navContent = ___EmotionJSX("div", {
-        id: sideNavContentId,
-        className: contentClasses
-      }, this.renderTree(items));
-      var _ref = headingProps,
-        _ref$screenReaderOnly = _ref.screenReaderOnly,
-        headingScreenReaderOnly = _ref$screenReaderOnly === void 0 ? false : _ref$screenReaderOnly,
-        _ref$element = _ref.element,
-        HeadingElement = _ref$element === void 0 ? 'h2' : _ref$element,
-        titleProps = _objectWithoutProperties(_ref, _excluded3);
+      var mobileContentStyles = [styles.content.euiSideNav__mobileContent, isOpenOnMobile ? styles.content.open : styles.content.hidden];
       var hasMobileVersion = mobileBreakpoints && mobileBreakpoints.length > 0;
-      var hasHeader = !!heading;
-      var headingNode;
-      var sharedHeadingProps = {
-        id: (headingProps === null || headingProps === void 0 ? void 0 : headingProps.id) || this.generateId('heading'),
-        className: headingProps === null || headingProps === void 0 ? void 0 : headingProps.className,
-        'data-test-subj': headingProps === null || headingProps === void 0 ? void 0 : headingProps['data-test-subj'],
-        'aria-label': headingProps === null || headingProps === void 0 ? void 0 : headingProps['aria-label']
+      var mobileToggleText = mobileTitle || heading;
+      var mobileHeadingUnset = {
+        marginBlockEnd: 0,
+        label: 'mobile'
       };
-      if (hasHeader) {
-        headingNode = ___EmotionJSX(HeadingElement, sharedHeadingProps, heading);
-        if (headingScreenReaderOnly) {
-          headingNode = ___EmotionJSX(EuiScreenReaderOnly, null, headingNode);
-        } else {
-          headingNode = ___EmotionJSX(EuiTitle, _extends({
-            size: "xs"
-          }, titleProps, {
-            className: classNames('euiSideNav__heading', headingProps === null || headingProps === void 0 ? void 0 : headingProps.className)
-          }), ___EmotionJSX(HeadingElement, sharedHeadingProps, heading));
-        }
-      }
-      var mobileNode;
-      var breakpoints = mobileBreakpoints;
-      if (hasMobileVersion) {
-        mobileNode = ___EmotionJSX(EuiShowFor, {
-          sizes: breakpoints || 'none'
-        }, ___EmotionJSX("nav", _extends({
-          "aria-labelledby": sharedHeadingProps.id,
-          className: classes
-        }, rest), ___EmotionJSX(HeadingElement, sharedHeadingProps, ___EmotionJSX(EuiButtonEmpty, {
+      var headingId = (headingProps === null || headingProps === void 0 ? void 0 : headingProps.id) || this.generateId('heading');
+      var headingScreenReaderOnly = !!(headingProps !== null && headingProps !== void 0 && headingProps.screenReaderOnly);
+      return ___EmotionJSX(React.Fragment, null, hasMobileVersion && ___EmotionJSX(EuiShowFor, {
+        sizes: mobileBreakpoints || 'none'
+      }, ___EmotionJSX("nav", _extends({
+        "aria-labelledby": headingId,
+        className: classes
+      }, rest), ___EmotionJSX(EuiSideNavHeading, _extends({
+        id: headingId
+      }, headingProps, {
+        screenReaderOnly: false,
+        css: mobileHeadingUnset
+      }), ___EmotionJSX(EuiI18n, {
+        token: "euiSideNav.mobileToggleAriaLabel",
+        default: "Toggle navigation"
+      }, function (mobileToggleAriaLabel) {
+        return ___EmotionJSX(EuiButtonEmpty, {
           className: "euiSideNav__mobileToggle",
-          textProps: {
-            className: 'euiSideNav__mobileToggleText'
-          },
+          css: styles.euiSideNav__mobileToggle,
           contentProps: {
-            className: 'euiSideNav__mobileToggleContent'
+            className: 'euiSideNav__mobileToggleContent',
+            css: styles.euiSideNav__mobileToggleContent
           },
           onClick: toggleOpenOnMobile,
           iconType: "apps",
           iconSide: "right",
           "aria-controls": sideNavContentId,
-          "aria-expanded": isOpenOnMobile
-        }, mobileTitle || heading)), navContent));
-      }
-      return ___EmotionJSX(React.Fragment, null, mobileNode, ___EmotionJSX(EuiHideFor, {
-        sizes: breakpoints || 'none'
+          "aria-expanded": isOpenOnMobile,
+          "aria-label": !mobileToggleText || headingScreenReaderOnly ? mobileToggleAriaLabel : undefined
+        }, !headingScreenReaderOnly && mobileToggleText);
+      })), ___EmotionJSX("div", {
+        id: sideNavContentId,
+        className: contentClasses,
+        css: mobileContentStyles
+      }, this.renderTree(items)))), ___EmotionJSX(EuiHideFor, {
+        sizes: mobileBreakpoints || 'none'
       }, ___EmotionJSX("nav", _extends({
-        "aria-labelledby": headingNode ? sharedHeadingProps.id : undefined,
+        "aria-labelledby": heading ? headingId : undefined,
         className: classes
-      }, rest), headingNode, navContent)));
+      }, rest), heading && ___EmotionJSX(EuiSideNavHeading, _extends({
+        id: headingId
+      }, headingProps), heading), ___EmotionJSX("div", {
+        id: sideNavContentId,
+        className: contentClasses
+      }, this.renderTree(items)))));
     }
   }]);
-  return EuiSideNav;
+  return EuiSideNavClass;
 }(Component);
-_defineProperty(EuiSideNav, "defaultProps", {
+_defineProperty(EuiSideNavClass, "defaultProps", {
   items: [],
   mobileBreakpoints: ['xs', 's']
-});
+});
+export var EuiSideNav = withEuiTheme(EuiSideNavClass);

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

@@ -0,0 +1,35 @@
+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
+ * 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 { css } from '@emotion/react';
+import { euiCanAnimate, logicalCSS } from '../../global_styling';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "f0todx-euiSideNav__mobileToggleContent",
+  styles: "justify-content:space-between;label:euiSideNav__mobileToggleContent;"
+} : {
+  name: "f0todx-euiSideNav__mobileToggleContent",
+  styles: "justify-content:space-between;label:euiSideNav__mobileToggleContent;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var euiSideNavMobileStyles = function euiSideNavMobileStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var fastTransition = "".concat(euiTheme.animation.extraFast, " ").concat(euiTheme.animation.resistance);
+  var slowTransition = "".concat(euiTheme.animation.extraSlow, " ").concat(euiTheme.animation.resistance);
+  return {
+    // Mobile button
+    euiSideNav__mobileToggle: /*#__PURE__*/css(logicalCSS('width', '100%'), " ", logicalCSS('height', 'auto'), "padding:1em;font-size:inherit;text-align:start;border-radius:0;", logicalCSS('border-bottom', euiTheme.border.thin), ";;label:euiSideNav__mobileToggle;"),
+    euiSideNav__mobileToggleContent: _ref,
+    // Mobile content
+    content: {
+      euiSideNav__mobileContent: /*#__PURE__*/css(euiCanAnimate, "{transition:max-block-size ", fastTransition, ",padding-block ", fastTransition, ",opacity ", slowTransition, ",visibility ", slowTransition, ";};label:euiSideNav__mobileContent;"),
+      hidden: /*#__PURE__*/css("overflow:hidden;visibility:hidden;opacity:0;max-block-size:0;padding-inline:", euiTheme.size.l, ";;label:hidden;"),
+      open: /*#__PURE__*/css("visibility:visible;opacity:1;max-block-size:5000px;padding:", euiTheme.size.l, ";;label:open;")
+    }
+  };
+};