@elastic/eui 93.1.1 → 93.3.0

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/body/cell/data_grid_cell.js

@@ -29,7 +29,7 @@ var _data_grid_cell_actions = require("./data_grid_cell_actions");
 var _data_grid_cell_popover = require("./data_grid_cell_popover");
 var _focus_utils = require("./focus_utils");
 var _react2 = require("@emotion/react");
-var _excluded = ["renderCellValue", "column", "setCellContentsRef", "rowIndex", "colIndex", "ariaRowIndex", "rowHeight", "rowHeightUtils", "isControlColumn", "isFocused", "cellActions"],
+var _excluded = ["renderCellValue", "cellContext", "column", "setCellContentsRef", "rowIndex", "colIndex", "ariaRowIndex", "rowHeight", "rowHeightUtils", "isControlColumn", "isFocused", "cellActions"],
   _excluded2 = ["width", "popoverContext", "interactiveCellId", "columnType", "className", "column", "style", "rowHeightUtils", "rowHeightsOptions", "rowManager", "pagination"],
   _excluded3 = ["isExpandable", "style", "className", "data-test-subj"];
 /*
@@ -47,6 +47,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 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; } }
 var EuiDataGridCellContent = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var renderCellValue = _ref.renderCellValue,
+    cellContext = _ref.cellContext,
     column = _ref.column,
     setCellContentsRef = _ref.setCellContentsRef,
     rowIndex = _ref.rowIndex,
@@ -75,7 +76,7 @@ var EuiDataGridCellContent = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     rowIndex: rowIndex,
     colIndex: colIndex,
     schema: (column === null || column === void 0 ? void 0 : column.schema) || rest.columnType
-  }, rest)));
+  }, cellContext, rest)));
   if (cellHeightType === 'lineCount' && !isControlColumn) {
     var lines = rowHeightUtils.getLineCount(rowHeight);
     cellContent = (0, _react2.jsx)(_text_truncate.EuiTextBlockTruncate, {
@@ -258,6 +259,7 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
         var _this$props5 = _this.props,
           renderCellPopover = _this$props5.renderCellPopover,
           renderCellValue = _this$props5.renderCellValue,
+          cellContext = _this$props5.cellContext,
           rowIndex = _this$props5.rowIndex,
           colIndex = _this$props5.colIndex,
           column = _this$props5.column,
@@ -278,7 +280,7 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
           })),
           DefaultCellPopover: _data_grid_cell_popover.DefaultCellPopover,
           setCellPopoverProps: setCellPopoverProps
-        }), (0, _react2.jsx)(CellElement, (0, _extends2.default)({}, sharedProps, {
+        }), (0, _react2.jsx)(CellElement, (0, _extends2.default)({}, cellContext, sharedProps, {
           setCellProps: _this.setCellProps,
           isExpandable: true,
           isExpanded: true,

package/optimize/lib/components/datagrid/body/cell/data_grid_cell_wrapper.js

@@ -15,7 +15,7 @@ var _sorting = require("../../utils/sorting");
 var _data_grid_cell_popover = require("./data_grid_cell_popover");
 var _data_grid_cell = require("./data_grid_cell");
 var _react2 = require("@emotion/react");
-var _excluded = ["colIndex", "visibleRowIndex", "style", "schema", "schemaDetectors", "pagination", "columns", "leadingControlColumns", "trailingControlColumns", "visibleColCount", "columnWidths", "defaultColumnWidth", "renderCellValue", "renderCellPopover", "interactiveCellId", "setRowHeight", "rowHeightsOptions", "rowHeightUtils", "rowManager"];
+var _excluded = ["colIndex", "visibleRowIndex", "style", "schema", "schemaDetectors", "pagination", "columns", "leadingControlColumns", "trailingControlColumns", "visibleColCount", "columnWidths", "defaultColumnWidth", "renderCellValue", "cellContext", "renderCellPopover", "interactiveCellId", "setRowHeight", "rowHeightsOptions", "rowHeightUtils", "rowManager"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -44,6 +44,7 @@ var Cell = function Cell(_ref) {
     columnWidths = _ref.columnWidths,
     defaultColumnWidth = _ref.defaultColumnWidth,
     renderCellValue = _ref.renderCellValue,
+    cellContext = _ref.cellContext,
     renderCellPopover = _ref.renderCellPopover,
     interactiveCellId = _ref.interactiveCellId,
     setRowHeight = _ref.setRowHeight,
@@ -85,7 +86,8 @@ var Cell = function Cell(_ref) {
     setRowHeight: isFirstColumn ? setRowHeight : undefined,
     rowManager: rowManager,
     popoverContext: popoverContext,
-    pagination: pagination
+    pagination: pagination,
+    cellContext: cellContext
   };
   if (isLeadingControlColumn) {
     var leadingColumn = leadingControlColumns[colIndex];

package/optimize/lib/components/datagrid/body/data_grid_body_custom.js

@@ -41,6 +41,7 @@ var EuiDataGridBodyCustomRender = function EuiDataGridBodyCustomRender(_ref) {
     schemaDetectors = _ref.schemaDetectors,
     visibleRows = _ref.visibleRows,
     renderCellValue = _ref.renderCellValue,
+    cellContext = _ref.cellContext,
     renderCellPopover = _ref.renderCellPopover,
     renderFooterCellValue = _ref.renderFooterCellValue,
     interactiveCellId = _ref.interactiveCellId,
@@ -130,6 +131,7 @@ var EuiDataGridBodyCustomRender = function EuiDataGridBodyCustomRender(_ref) {
     columnWidths: columnWidths,
     defaultColumnWidth: defaultColumnWidth,
     renderCellValue: renderCellValue,
+    cellContext: cellContext,
     renderCellPopover: renderCellPopover,
     interactiveCellId: interactiveCellId,
     setRowHeight: setRowHeight,

package/optimize/lib/components/datagrid/body/data_grid_body_virtualized.js

@@ -88,6 +88,7 @@ var EuiDataGridBodyVirtualized = function EuiDataGridBodyVirtualized(_ref3) {
     endRow = _ref3$visibleRows.endRow,
     visibleRowCount = _ref3$visibleRows.visibleRowCount,
     renderCellValue = _ref3.renderCellValue,
+    cellContext = _ref3.cellContext,
     renderCellPopover = _ref3.renderCellPopover,
     renderFooterCellValue = _ref3.renderFooterCellValue,
     interactiveCellId = _ref3.interactiveCellId,
@@ -289,6 +290,7 @@ var EuiDataGridBodyVirtualized = function EuiDataGridBodyVirtualized(_ref3) {
       columnWidths: columnWidths,
       defaultColumnWidth: defaultColumnWidth,
       renderCellValue: renderCellValue,
+      cellContext: cellContext,
       renderCellPopover: renderCellPopover,
       interactiveCellId: interactiveCellId,
       rowHeightsOptions: rowHeightsOptions,

package/optimize/lib/components/datagrid/body/data_grid_row_manager.js

@@ -85,7 +85,7 @@ var useRowManager = function useRowManager(_ref) {
     if (rowClasses) {
       rowIdToElements.current.forEach(function (rowElement, rowIndex) {
         var euiClasses = Array.from(rowElement.classList).filter(function (className) {
-          return className.startsWith('euiDataGridRow');
+          return ['euiDataGridRow', 'euiDataGridRow--striped'].includes(className);
         }).join(' ');
         if (rowClasses[rowIndex]) {
           rowElement.classList.value = "".concat(euiClasses, " ").concat(rowClasses[rowIndex]);

package/optimize/lib/components/datagrid/data_grid.js

@@ -31,7 +31,7 @@ var _data_grid_schema = require("./utils/data_grid_schema");
 var _ref = require("./utils/ref");
 var _data_grid_types = require("./data_grid_types");
 var _react2 = require("@emotion/react");
-var _excluded = ["leadingControlColumns", "trailingControlColumns", "columns", "columnVisibility", "schemaDetectors", "rowCount", "renderCellValue", "renderCellPopover", "renderFooterCellValue", "className", "gridStyle", "toolbarVisibility", "pagination", "sorting", "inMemory", "onColumnResize", "minSizeForControls", "height", "width", "rowHeightsOptions", "virtualizationOptions", "renderCustomGridBody", "renderCustomToolbar"],
+var _excluded = ["leadingControlColumns", "trailingControlColumns", "columns", "columnVisibility", "schemaDetectors", "rowCount", "renderCellValue", "cellContext", "renderCellPopover", "renderFooterCellValue", "className", "gridStyle", "toolbarVisibility", "pagination", "sorting", "inMemory", "onColumnResize", "minSizeForControls", "height", "width", "rowHeightsOptions", "virtualizationOptions", "renderCustomGridBody", "renderCustomToolbar"],
   _excluded2 = ["focusProps"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -84,6 +84,7 @@ var EuiDataGrid = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
     schemaDetectors = props.schemaDetectors,
     rowCount = props.rowCount,
     renderCellValue = props.renderCellValue,
+    cellContext = props.cellContext,
     renderCellPopover = props.renderCellPopover,
     renderFooterCellValue = props.renderFooterCellValue,
     className = props.className,
@@ -353,6 +354,7 @@ var EuiDataGrid = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
     schemaDetectors: allSchemaDetectors,
     pagination: pagination,
     renderCellValue: renderCellValue,
+    cellContext: cellContext,
     renderCellPopover: renderCellPopover,
     renderFooterCellValue: renderFooterCellValue,
     rowCount: rowCount,

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/facet/facet_button.styles.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiFacetButtonTextStyles = exports.euiFacetButtonStyles = exports.euiFacetButtonQuantityStyles = exports.euiFacetButtonLoadingSpinnerStyles = exports.euiFacetButtonIconStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
-var _link = require("../link/link.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
@@ -18,7 +17,7 @@ var euiFacetButtonStyles = function euiFacetButtonStyles(_ref3) {
   var euiTheme = _ref3.euiTheme;
   return {
     // Base
-    euiFacetButton: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('left'), " &:hover,&:focus{&:not(:disabled) [class*='euiFacetButton__text']{text-decoration:underline;}}&:focus:not(:disabled) [class*='euiFacetButton__text']{", (0, _link.euiLinkFocusCSS)(euiTheme), ";}&:disabled{color:", euiTheme.colors.disabledText, ";pointer-events:none;&:hover,&:focus{text-decoration:none;}};label:euiFacetButton;")
+    euiFacetButton: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('left'), " &:not(:disabled){&:hover,&:focus{text-decoration:none;.euiFacetButton__text{text-decoration:underline;}}&:focus .euiFacetButton__text{text-decoration-thickness:", euiTheme.border.width.thick, ";}}&:disabled{color:", euiTheme.colors.disabledText, ";pointer-events:none;};label:euiFacetButton;")
   };
 };
 exports.euiFacetButtonStyles = euiFacetButtonStyles;

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.js

@@ -31,7 +31,7 @@ var _services = require("../../services");
 var _named_colors = require("./named_colors");
 var _icon = require("./icon.styles");
 var _react3 = require("@emotion/react");
-var _excluded = ["type", "size", "color", "className", "tabIndex", "title", "onIconLoad", "theme", "style"];
+var _excluded = ["type", "size", "color", "className", "tabIndex", "title", "onIconLoad", "style", "stylesMemoizer"];
 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 _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); }
@@ -200,8 +200,8 @@ var EuiIconClass = /*#__PURE__*/function (_PureComponent) {
         tabIndex = _this$props.tabIndex,
         title = _this$props.title,
         onIconLoad = _this$props.onIconLoad,
-        theme = _this$props.theme,
         style = _this$props.style,
+        stylesMemoizer = _this$props.stylesMemoizer,
         rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
       var _this$state = this.state,
         isLoading = _this$state.isLoading,
@@ -223,7 +223,7 @@ var EuiIconClass = /*#__PURE__*/function (_PureComponent) {
       var classes = (0, _classnames.default)('euiIcon', className);
 
       // Emotion styles
-      var styles = (0, _icon.euiIconStyles)(theme);
+      var styles = stylesMemoizer(_icon.euiIconStyles);
       var cssStyles = [styles.euiIcon, styles[size], color && (0, _named_colors.isNamedColor)(color) && styles[color], isCustomColor && styles.customColor, isElasticLogoOutline && styles.logoElasticOutline, isAppIcon && !appIconHasColor && styles.app, isLoading && styles.isLoading, !isLoading && neededLoading && styles.isLoaded];
       var icon = this.state.icon || _empty.icon;
       if (typeof icon === 'string') {
@@ -240,35 +240,32 @@ var EuiIconClass = /*#__PURE__*/function (_PureComponent) {
 
         // If it's an empty icon, or if there is no aria-label, aria-labelledby, or title it gets aria-hidden true
         var isAriaHidden = icon === _empty.icon || !(this.props['aria-label'] || this.props['aria-labelledby'] || this.props.title);
-        var hideIconEmpty = isAriaHidden && {
-          'aria-hidden': true
-        };
-        var titleId;
 
         // If no aria-label or aria-labelledby is provided but there's a title, a titleId is generated
         //  The svg aria-labelledby attribute gets this titleId
         //  The svg title element gets this titleId as an id
-        if (!this.props['aria-label'] && !this.props['aria-labelledby'] && title) {
-          titleId = {
-            titleId: generateId()
-          };
-        }
+        var titleId = !this.props['aria-label'] && !this.props['aria-labelledby'] && title ? {
+          titleId: generateId()
+        } : undefined;
         return (0, _react3.jsx)(Svg, (0, _extends2.default)({
           className: classes,
           style: optionalCustomStyles,
           css: cssStyles,
           tabIndex: tabIndex,
           role: "img",
-          title: title,
+          title: title
+        }, titleId, {
           "data-icon-type": iconTitle,
           "data-is-loaded": isLoaded || undefined,
           "data-is-loading": isLoading || undefined
-        }, titleId, rest, hideIconEmpty));
+        }, rest, {
+          "aria-hidden": isAriaHidden || undefined
+        }));
       }
     }
   }]);
   return EuiIconClass;
 }(_react.PureComponent);
 exports.EuiIconClass = EuiIconClass;
-var EuiIcon = (0, _services.withEuiTheme)(EuiIconClass);
+var EuiIcon = (0, _services.withEuiStylesMemoizer)(EuiIconClass);
 exports.EuiIcon = EuiIcon;

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

@@ -16,9 +16,6 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
                                                                                                                                                                                                                                                                                            * in compliance with, at your election, the Elastic License 2.0 or the Server
                                                                                                                                                                                                                                                                                            * Side Public License, v 1.
                                                                                                                                                                                                                                                                                            */
-var iconSize = function iconSize(size) {
-  return "\n    ".concat((0, _global_styling.logicalCSS)('width', size), ";\n    ").concat((0, _global_styling.logicalCSS)('height', size), ";\n  ");
-};
 var iconLoadingOpacity = 0.05;
 exports.iconLoadingOpacity = iconLoadingOpacity;
 var iconLoading = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    opacity: ", ";\n  }\n\n  100% {\n    opacity: 1;\n  }\n"])), iconLoadingOpacity);
@@ -58,11 +55,11 @@ var euiIconStyles = function euiIconStyles(_ref3) {
     logoElasticOutline: _ref,
     // Sizes
     original: /*#__PURE__*/(0, _react.css)(";label:original;"),
-    s: /*#__PURE__*/(0, _react.css)(iconSize(euiTheme.size.m), ";label:s;"),
-    m: /*#__PURE__*/(0, _react.css)(iconSize(euiTheme.size.base), ";label:m;"),
-    l: /*#__PURE__*/(0, _react.css)(iconSize(euiTheme.size.l), ";label:l;"),
-    xl: /*#__PURE__*/(0, _react.css)(iconSize(euiTheme.size.xl), ";label:xl;"),
-    xxl: /*#__PURE__*/(0, _react.css)(iconSize(euiTheme.size.xxl), ";label:xxl;"),
+    s: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size.m), ";label:s;"),
+    m: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size.base), ";label:m;"),
+    l: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size.l), ";label:l;"),
+    xl: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size.xl), ";label:xl;"),
+    xxl: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size.xxl), ";label:xxl;"),
     // Variants
     // App icons are two-toned. This provides the base color.
     app: /*#__PURE__*/(0, _react.css)("fill:", euiTheme.colors.text, ";.euiIcon__fillSecondary{fill:", euiTheme.colors.successText, ";};label:app;"),

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/link/external_link_icon.js

@@ -26,16 +26,19 @@ var _excluded = ["target", "external"];
  * DRY util for indicating external links both via icon and to
  * screen readers. Used internally by at EuiLink and EuiListGroupItem
  */
-var EuiExternalLinkIcon = function EuiExternalLinkIcon(_ref) {
-  var target = _ref.target,
-    external = _ref.external,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _useEuiTheme = (0, _services.useEuiTheme)(),
-    euiTheme = _useEuiTheme.euiTheme;
+var iconStyle = function iconStyle(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return (0, _global_styling.logicalStyle)('margin-left', euiTheme.size.xs);
+};
+var EuiExternalLinkIcon = function EuiExternalLinkIcon(_ref2) {
+  var target = _ref2.target,
+    external = _ref2.external,
+    rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+  var iconCssStyle = (0, _services.useEuiMemoizedStyles)(iconStyle);
   var showExternalLinkIcon = target === '_blank' && external !== false || external === true;
   var iconAriaLabel = (0, _i18n.useEuiI18n)('euiExternalLinkIcon.ariaLabel', 'External link');
   return (0, _react2.jsx)(_react.default.Fragment, null, showExternalLinkIcon && (0, _react2.jsx)(_icon.EuiIcon, (0, _extends2.default)({
-    css: (0, _global_styling.logicalStyle)('margin-left', euiTheme.size.xs),
+    css: iconCssStyle,
     "aria-label": iconAriaLabel,
     size: "s",
     type: "popout"

package/optimize/lib/components/link/link.js

@@ -44,8 +44,7 @@ var EuiLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     onClick = _ref.onClick,
     _disabled = _ref.disabled,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _link.euiLinkStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_link.euiLinkStyles);
   var cssStyles = [styles.euiLink];
   var isHrefValid = !href || (0, _href_validator.validateHref)(href);
   var disabled = _disabled || !isHrefValid;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiLinkStyles = exports.euiLinkHoverCSS = exports.euiLinkFocusCSS = exports.euiLinkCSS = void 0;
+exports.euiLinkStyles = exports.euiLinkCSS = void 0;
 var _react = require("@emotion/react");
 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)."; } /*
@@ -13,20 +13,9 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
                                                                                                                                                                                                                                                                                            * in compliance with, at your election, the Elastic License 2.0 or the Server
                                                                                                                                                                                                                                                                                            * Side Public License, v 1.
                                                                                                                                                                                                                                                                                            */
-var _colorCSS = function _colorCSS(color) {
-  return "\n    color: ".concat(color, ";\n\n    &:target {\n      color: darken(").concat(color, ", 10%);\n    }\n  ");
-};
-var euiLinkHoverCSS = function euiLinkHoverCSS() {
-  return "\n    text-decoration: underline;\n  ";
-};
-exports.euiLinkHoverCSS = euiLinkHoverCSS;
-var euiLinkFocusCSS = function euiLinkFocusCSS(euiTheme) {
-  return "\n    text-decoration: underline;\n    text-decoration-thickness: ".concat(euiTheme.border.width.thick, ";\n  ");
-};
-exports.euiLinkFocusCSS = euiLinkFocusCSS;
 var euiLinkCSS = function euiLinkCSS(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  return "\n    font-weight: ".concat(euiTheme.font.weight.medium, ";\n    ").concat((0, _global_styling.logicalTextAlignCSS)('left'), "\n\n    &:hover {\n      ").concat(euiLinkHoverCSS(), "\n    }\n\n    &:focus {\n      ").concat((0, _global_styling.euiFocusRing)(euiThemeContext, 'outset'), "\n      ").concat(euiLinkFocusCSS(euiTheme), "\n    }\n  ");
+  return "\n    font-weight: ".concat(euiTheme.font.weight.medium, ";\n    ").concat((0, _global_styling.logicalTextAlignCSS)('left'), "\n\n    &:hover {\n      text-decoration: underline;\n    }\n\n    &:focus {\n      ").concat((0, _global_styling.euiFocusRing)(euiThemeContext, 'outset'), "\n      text-decoration: underline;\n      text-decoration-thickness: ").concat(euiTheme.border.width.thick, ";\n    }\n  ");
 };
 exports.euiLinkCSS = euiLinkCSS;
 var _ref = process.env.NODE_ENV === "production" ? {
@@ -53,4 +42,7 @@ var euiLinkStyles = function euiLinkStyles(euiThemeContext) {
     text: /*#__PURE__*/(0, _react.css)(_colorCSS(euiTheme.colors.text), ";label:text;")
   };
 };
-exports.euiLinkStyles = euiLinkStyles;
+exports.euiLinkStyles = euiLinkStyles;
+var _colorCSS = function _colorCSS(color) {
+  return "\n    color: ".concat(color, ";\n\n    &:target {\n      color: darken(").concat(color, ", 10%);\n    }\n  ");
+};

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))),