@elastic/eui 92.2.1 → 93.1.0

package/lib/components/tree_view/tree_view.js

@@ -3,18 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EuiTreeView = void 0;
+exports.EuiTreeViewClass = exports.EuiTreeView = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../services");
 var _i18n = require("../i18n");
-var _icon = require("../icon");
 var _accessibility = require("../accessibility");
-var _text = require("../text");
-var _services = require("../../services");
-var _inner_text = require("../inner_text");
+var _tree_view_item = require("./_tree_view_item");
+var _tree_view = require("./tree_view.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "className", "items", "display", "expandByDefault", "showExpansionArrows"];
+var _excluded = ["children", "className", "items", "display", "expandByDefault", "showExpansionArrows", "theme"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -48,27 +47,20 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
                                                                                                                                                                                                                                                                                                                                                                                                * Side Public License, v 1.
                                                                                                                                                                                                                                                                                                                                                                                                */
 var EuiTreeViewContext = /*#__PURE__*/(0, _react.createContext)('');
-function hasAriaLabel(x) {
-  return x.hasOwnProperty('aria-label');
-}
 function getTreeId(propId) {
   var contextId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   var idGenerator = arguments.length > 2 ? arguments[2] : undefined;
   return propId !== null && propId !== void 0 ? propId : contextId === '' ? idGenerator() : contextId;
 }
-var displayToClassNameMap = {
-  default: null,
-  compressed: 'euiTreeView--compressed'
-};
-var EuiTreeView = /*#__PURE__*/function (_Component) {
-  _inherits(EuiTreeView, _Component);
-  var _super = _createSuper(EuiTreeView);
-  function EuiTreeView(props,
+var EuiTreeViewClass = /*#__PURE__*/function (_Component) {
+  _inherits(EuiTreeViewClass, _Component);
+  var _super = _createSuper(EuiTreeViewClass);
+  function EuiTreeViewClass(props,
   // Without the optional ? typing, TS will throw errors on JSX component errors
   // @see https://github.com/facebook/react/issues/13944#issuecomment-1183693239
   context) {
     var _this;
-    _classCallCheck(this, EuiTreeView);
+    _classCallCheck(this, EuiTreeViewClass);
     // TODO: context in constructor has been deprecated.
     // We should likely convert this to a function component
     _this = _super.call(this, props, context);
@@ -190,7 +182,7 @@ var EuiTreeView = /*#__PURE__*/function (_Component) {
     };
     return _this;
   }
-  _createClass(EuiTreeView, [{
+  _createClass(EuiTreeViewClass, [{
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
       if (this.props.id !== prevProps.id) {
@@ -211,18 +203,16 @@ var EuiTreeView = /*#__PURE__*/function (_Component) {
         display = _this$props$display === void 0 ? 'default' : _this$props$display,
         expandByDefault = _this$props.expandByDefault,
         showExpansionArrows = _this$props.showExpansionArrows,
+        theme = _this$props.theme,
         rest = _objectWithoutProperties(_this$props, _excluded);
+      var styles = (0, _tree_view.euiTreeViewStyles)(theme);
+      var cssStyles = [styles.euiTreeView, styles[display]];
 
       // Computed classNames
-      var classes = (0, _classnames.default)('euiTreeView', display ? displayToClassNameMap[display] : null, {
-        'euiTreeView--withArrows': showExpansionArrows
-      }, className);
+      var classes = (0, _classnames.default)('euiTreeView', className);
       var instructionsId = "".concat(this.state.treeID, "--instruction");
       return (0, _react2.jsx)(EuiTreeViewContext.Provider, {
         value: this.state.treeID
-      }, (0, _react2.jsx)(_text.EuiText, {
-        size: display === 'compressed' ? 's' : 'm',
-        className: "euiTreeView__wrapper"
       }, !this.isNested && (0, _react2.jsx)(_i18n.EuiI18n, {
         token: "euiTreeView.listNavigationInstructions",
         default: "You can quickly navigate this list using arrow keys."
@@ -231,87 +221,68 @@ var EuiTreeView = /*#__PURE__*/function (_Component) {
           id: instructionsId
         }, listNavigationInstructions));
       }), (0, _react2.jsx)("ul", _extends({
+        css: cssStyles,
         className: classes,
         id: !this.isNested ? this.state.treeID : undefined,
-        "aria-describedby": !this.isNested ? instructionsId : undefined
+        "aria-describedby": !this.isNested ? instructionsId : undefined,
+        role: "list" // VoiceOver doesn't parse lists with `list-style: none` as the correct role - @see https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html
       }, rest), items.map(function (node, index) {
         var buttonId = node.id;
         var wrappingId = _this2.treeIdGenerator(buttonId);
-        return (0, _react2.jsx)(_inner_text.EuiInnerText, {
-          key: node.id + index,
-          fallback: typeof node.label === 'string' ? node.label : ''
-        }, function (ref, innerText) {
-          return (0, _react2.jsx)(_i18n.EuiI18n, {
-            key: node.id + index,
-            token: "euiTreeView.ariaLabel",
-            default: "{nodeLabel} child of {ariaLabel}",
-            values: {
-              nodeLabel: innerText,
-              ariaLabel: hasAriaLabel(rest) ? rest['aria-label'] : ''
-            }
-          }, function (ariaLabel) {
-            var label = hasAriaLabel(rest) ? {
-              'aria-label': ariaLabel
-            } : {
-              'aria-labelledby': "".concat(buttonId, " ").concat(rest['aria-labelledby'])
-            };
-            var nodeClasses = (0, _classnames.default)('euiTreeView__node', display ? displayToClassNameMap[display] : null, {
-              'euiTreeView__node--expanded': _this2.isNodeOpen(node)
-            });
-            var nodeButtonClasses = (0, _classnames.default)('euiTreeView__nodeInner', showExpansionArrows && node.children ? 'euiTreeView__nodeInner--withArrows' : null, _this2.state.activeItem === node.id ? 'euiTreeView__node--active' : null, node.className ? node.className : null);
-            return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("li", {
-              className: nodeClasses
-            }, (0, _react2.jsx)("button", {
-              id: buttonId,
-              "aria-controls": wrappingId,
-              "aria-expanded": _this2.isNodeOpen(node),
-              ref: function ref(_ref3) {
-                return _this2.setButtonRef(_ref3, index);
-              },
-              "data-test-subj": "euiTreeViewButton-".concat(_this2.state.treeID),
-              onKeyDown: function onKeyDown(event) {
-                return _this2.onKeyDown(event, node);
-              },
-              onClick: function onClick() {
-                return _this2.handleNodeClick(node);
-              },
-              className: nodeButtonClasses
-            }, showExpansionArrows && node.children ? (0, _react2.jsx)(_icon.EuiIcon, {
-              className: "euiTreeView__expansionArrow",
-              size: display === 'compressed' ? 's' : 'm',
-              type: _this2.isNodeOpen(node) ? 'arrowDown' : 'arrowRight'
-            }) : null, node.icon && !node.useEmptyIcon ? (0, _react2.jsx)("span", {
-              className: "euiTreeView__iconWrapper"
-            }, _this2.isNodeOpen(node) && node.iconWhenExpanded ? node.iconWhenExpanded : node.icon) : null, node.useEmptyIcon && !node.icon ? (0, _react2.jsx)("span", {
-              className: "euiTreeView__iconPlaceholder"
-            }) : null, (0, _react2.jsx)("span", {
-              ref: ref,
-              className: "euiTreeView__nodeLabel"
-            }, node.label)), (0, _react2.jsx)("div", {
-              id: wrappingId,
-              onKeyDown: function onKeyDown(event) {
-                return _this2.onChildrenKeydown(event, index);
-              }
-            }, node.children && _this2.isNodeOpen(node) ? (0, _react2.jsx)(EuiTreeView, _extends({
-              items: node.children,
-              display: display,
-              showExpansionArrows: showExpansionArrows,
-              expandByDefault: _this2.state.expandChildNodes
-            }, label)) : null)));
-          });
-        });
-      }))));
+        var isNodeExpanded = node.children ? _this2.isNodeOpen(node) : undefined; // Determines the `aria-expanded` attribute
+
+        var icon = node.icon;
+        if (node.iconWhenExpanded && isNodeExpanded) {
+          icon = node.iconWhenExpanded;
+        } else if (!icon && node.useEmptyIcon) {
+          icon = (0, _react2.jsx)(_react.default.Fragment, null); // Renders a placeholder
+        }
+
+        return (0, _react2.jsx)(_tree_view_item.EuiTreeViewItem, {
+          key: buttonId + index,
+          id: buttonId,
+          className: node.className,
+          buttonRef: function buttonRef(ref) {
+            return _this2.setButtonRef(ref, index);
+          },
+          "aria-controls": node.children ? wrappingId : undefined,
+          label: node.label,
+          icon: icon,
+          hasArrow: showExpansionArrows,
+          isExpanded: isNodeExpanded,
+          isActive: _this2.state.activeItem === node.id,
+          display: display,
+          "data-test-subj": "euiTreeViewButton-".concat(_this2.state.treeID),
+          onKeyDown: function onKeyDown(event) {
+            return _this2.onKeyDown(event, node);
+          },
+          onClick: function onClick() {
+            return _this2.handleNodeClick(node);
+          }
+        }, node.children && (0, _react2.jsx)("div", {
+          id: wrappingId,
+          onKeyDown: function onKeyDown(event) {
+            return _this2.onChildrenKeydown(event, index);
+          }
+        }, isNodeExpanded && (0, _react2.jsx)(EuiTreeView, {
+          items: node.children,
+          display: display,
+          showExpansionArrows: showExpansionArrows,
+          expandByDefault: _this2.state.expandChildNodes
+        })));
+      })));
     }
   }]);
-  return EuiTreeView;
+  return EuiTreeViewClass;
 }(_react.Component);
-exports.EuiTreeView = EuiTreeView;
-_defineProperty(EuiTreeView, "contextType", EuiTreeViewContext);
-EuiTreeView.propTypes = {
+exports.EuiTreeViewClass = EuiTreeViewClass;
+_defineProperty(EuiTreeViewClass, "contextType", EuiTreeViewContext);
+EuiTreeViewClass.propTypes = {
   className: _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
   css: _propTypes.default.any,
-  /** An array of EuiTreeViewNodes
+  /**
+       * An array of EuiTreeViewNodes
        */
   items: _propTypes.default.arrayOf(_propTypes.default.shape({
     /** An array of EuiTreeViewNodes to render as children
@@ -345,16 +316,22 @@ EuiTreeView.propTypes = {
        */
     callback: _propTypes.default.func
   }).isRequired).isRequired,
-  /** Optionally use a variation with smaller text and icon sizes
+  /**
+       * Optionally use a variation with smaller text and icon sizes
+       * @default default
        */
   display: _propTypes.default.oneOf(["default", "compressed"]),
-  /** Set all items to open on initial load
+  /**
+       * Set all items to open on initial load
        */
   expandByDefault: _propTypes.default.bool,
-  /** Display expansion arrows next to all items
+  /**
+       * Display expansion arrows next to all items
        * that contain children
        */
   showExpansionArrows: _propTypes.default.bool,
   "aria-label": _propTypes.default.string,
   "aria-labelledby": _propTypes.default.string
-};
+};
+var EuiTreeView = (0, _services.withEuiTheme)(EuiTreeViewClass);
+exports.EuiTreeView = EuiTreeView;

package/lib/components/tree_view/tree_view.styles.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiTreeViewStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../global_styling");
+/*
+ * 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 euiTreeViewStyles = function euiTreeViewStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiTreeView: /*#__PURE__*/(0, _react.css)("margin:0;list-style-type:none;& &{", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.l), ";};label:euiTreeView;"),
+    default: /*#__PURE__*/(0, _react.css)("font-size:", (0, _global_styling.euiFontSize)(euiThemeContext, 'm').fontSize, ";;label:default;"),
+    compressed: /*#__PURE__*/(0, _react.css)("font-size:", (0, _global_styling.euiFontSize)(euiThemeContext, 's').fontSize, ";;label:compressed;")
+  };
+};
+exports.euiTreeViewStyles = euiTreeViewStyles;

package/lib/global_styling/mixins/_color.js

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useEuiBackgroundColorCSS = exports.useEuiBackgroundColor = exports.euiBackgroundColor = exports.BACKGROUND_COLORS = void 0;
-var _react = require("@emotion/react");
+exports.useEuiBorderColorCSS = exports.useEuiBackgroundColorCSS = exports.useEuiBackgroundColor = exports.euiBorderColor = exports.euiBackgroundColor = exports.BACKGROUND_COLORS = void 0;
+var _react = require("react");
+var _react2 = require("@emotion/react");
 var _services = require("../../services");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -31,7 +32,7 @@ var euiBackgroundColor = function euiBackgroundColor(_ref, color) {
       return (0, _services.transparentize)(euiTheme.colors[color], 0.1);
     }
   } else {
-    var tintOrShade = function tintOrShade(color) {
+    var _tintOrShade = function _tintOrShade(color) {
       return colorMode === 'DARK' ? (0, _services.shade)(color, 0.8) : (0, _services.tint)(color, 0.9);
     };
     switch (color) {
@@ -40,7 +41,7 @@ var euiBackgroundColor = function euiBackgroundColor(_ref, color) {
       case 'subdued':
         return euiTheme.colors.body;
       default:
-        return tintOrShade(euiTheme.colors[color]);
+        return _tintOrShade(euiTheme.colors[color]);
     }
   }
 };
@@ -55,15 +56,49 @@ var useEuiBackgroundColor = function useEuiBackgroundColor(color) {
 };
 exports.useEuiBackgroundColor = useEuiBackgroundColor;
 var useEuiBackgroundColorCSS = function useEuiBackgroundColorCSS() {
-  return {
-    transparent: /*#__PURE__*/(0, _react.css)("background-color:", useEuiBackgroundColor('transparent'), ";;label:transparent;"),
-    plain: /*#__PURE__*/(0, _react.css)("background-color:", useEuiBackgroundColor('plain'), ";;label:plain;"),
-    subdued: /*#__PURE__*/(0, _react.css)("background-color:", useEuiBackgroundColor('subdued'), ";;label:subdued;"),
-    accent: /*#__PURE__*/(0, _react.css)("background-color:", useEuiBackgroundColor('accent'), ";;label:accent;"),
-    primary: /*#__PURE__*/(0, _react.css)("background-color:", useEuiBackgroundColor('primary'), ";;label:primary;"),
-    success: /*#__PURE__*/(0, _react.css)("background-color:", useEuiBackgroundColor('success'), ";;label:success;"),
-    warning: /*#__PURE__*/(0, _react.css)("background-color:", useEuiBackgroundColor('warning'), ";;label:warning;"),
-    danger: /*#__PURE__*/(0, _react.css)("background-color:", useEuiBackgroundColor('danger'), ";;label:danger;")
-  };
+  var euiThemeContext = (0, _services.useEuiTheme)();
+  return (0, _react.useMemo)(function () {
+    return {
+      transparent: /*#__PURE__*/(0, _react2.css)("background-color:", euiBackgroundColor(euiThemeContext, 'transparent'), ";;label:transparent;"),
+      plain: /*#__PURE__*/(0, _react2.css)("background-color:", euiBackgroundColor(euiThemeContext, 'plain'), ";;label:plain;"),
+      subdued: /*#__PURE__*/(0, _react2.css)("background-color:", euiBackgroundColor(euiThemeContext, 'subdued'), ";;label:subdued;"),
+      accent: /*#__PURE__*/(0, _react2.css)("background-color:", euiBackgroundColor(euiThemeContext, 'accent'), ";;label:accent;"),
+      primary: /*#__PURE__*/(0, _react2.css)("background-color:", euiBackgroundColor(euiThemeContext, 'primary'), ";;label:primary;"),
+      success: /*#__PURE__*/(0, _react2.css)("background-color:", euiBackgroundColor(euiThemeContext, 'success'), ";;label:success;"),
+      warning: /*#__PURE__*/(0, _react2.css)("background-color:", euiBackgroundColor(euiThemeContext, 'warning'), ";;label:warning;"),
+      danger: /*#__PURE__*/(0, _react2.css)("background-color:", euiBackgroundColor(euiThemeContext, 'danger'), ";;label:danger;")
+    };
+  }, [euiThemeContext]);
+};
+exports.useEuiBackgroundColorCSS = useEuiBackgroundColorCSS;
+var euiBorderColor = function euiBorderColor(_ref4, color) {
+  var euiTheme = _ref4.euiTheme,
+    colorMode = _ref4.colorMode;
+  switch (color) {
+    case 'transparent':
+    case 'plain':
+    case 'subdued':
+      return euiTheme.border.color;
+    case 'warning':
+      return (0, _services.tintOrShade)(euiTheme.colors.warning, 0.4, colorMode);
+    default:
+      return (0, _services.tintOrShade)(euiTheme.colors[color], 0.6, colorMode);
+  }
+};
+exports.euiBorderColor = euiBorderColor;
+var useEuiBorderColorCSS = function useEuiBorderColorCSS() {
+  var euiThemeContext = (0, _services.useEuiTheme)();
+  return (0, _react.useMemo)(function () {
+    return {
+      transparent: /*#__PURE__*/(0, _react2.css)("border-color:", euiBorderColor(euiThemeContext, 'transparent'), ";;label:transparent;"),
+      plain: /*#__PURE__*/(0, _react2.css)("border-color:", euiBorderColor(euiThemeContext, 'plain'), ";;label:plain;"),
+      subdued: /*#__PURE__*/(0, _react2.css)("border-color:", euiBorderColor(euiThemeContext, 'subdued'), ";;label:subdued;"),
+      accent: /*#__PURE__*/(0, _react2.css)("border-color:", euiBorderColor(euiThemeContext, 'accent'), ";;label:accent;"),
+      primary: /*#__PURE__*/(0, _react2.css)("border-color:", euiBorderColor(euiThemeContext, 'primary'), ";;label:primary;"),
+      success: /*#__PURE__*/(0, _react2.css)("border-color:", euiBorderColor(euiThemeContext, 'success'), ";;label:success;"),
+      warning: /*#__PURE__*/(0, _react2.css)("border-color:", euiBorderColor(euiThemeContext, 'warning'), ";;label:warning;"),
+      danger: /*#__PURE__*/(0, _react2.css)("border-color:", euiBorderColor(euiThemeContext, 'danger'), ";;label:danger;")
+    };
+  }, [euiThemeContext]);
 };
-exports.useEuiBackgroundColorCSS = useEuiBackgroundColorCSS;
+exports.useEuiBorderColorCSS = useEuiBorderColorCSS;

package/optimize/es/components/basic_table/basic_table.js

@@ -235,15 +235,6 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
         });
       }
     }
-
-    /**
-     * @deprecated Use `selection.selected` instead to declaratively control table selection
-     */
-  }, {
-    key: "setSelection",
-    value: function setSelection(newSelection) {
-      this.changeSelection(newSelection);
-    }
   }, {
     key: "buildCriteria",
     value: function buildCriteria(props) {

package/optimize/es/components/basic_table/in_memory_table.js

@@ -118,7 +118,6 @@ export var EuiInMemoryTable = /*#__PURE__*/function (_Component) {
     var _this;
     _classCallCheck(this, EuiInMemoryTable);
     _this = _super.call(this, props);
-    _defineProperty(_assertThisInitialized(_this), "tableRef", void 0);
     _defineProperty(_assertThisInitialized(_this), "onTableChange", function (_ref4) {
       var page = _ref4.page,
         sort = _ref4.sort;
@@ -251,17 +250,9 @@ export var EuiInMemoryTable = /*#__PURE__*/function (_Component) {
       allowNeutralSort: allowNeutralSort !== false,
       showPerPageOptions: showPerPageOptions
     };
-    _this.tableRef = /*#__PURE__*/React.createRef();
     return _this;
   }
   _createClass(EuiInMemoryTable, [{
-    key: "setSelection",
-    value: function setSelection(newSelection) {
-      if (this.tableRef.current) {
-        this.tableRef.current.setSelection(newSelection);
-      }
-    }
-  }, {
     key: "renderSearchBar",
     value: function renderSearchBar() {
       var _this$props = this.props,
@@ -430,7 +421,6 @@ export var EuiInMemoryTable = /*#__PURE__*/function (_Component) {
       var table =
       // @ts-ignore complex relationship between pagination's existence and criteria, the code logic ensures this is correctly maintained
       ___EmotionJSX(EuiBasicTable, _extends({
-        ref: this.tableRef,
         items: items,
         itemId: itemId,
         rowProps: rowProps,

package/optimize/es/components/beacon/beacon.js

@@ -12,10 +12,11 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import classNames from 'classnames';
-import { euiBeaconStyles } from './beacon.styles';
+import { logicalStyles } from '../../global_styling';
 import { useEuiTheme } from '../../services';
+import { euiBeaconStyles } from './beacon.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var COLORS = ['subdued', 'primary', 'success', 'accent', 'danger', 'warning'];
 export var EuiBeacon = function EuiBeacon(_ref) {
@@ -30,10 +31,12 @@ export var EuiBeacon = function EuiBeacon(_ref) {
   var classes = classNames('euiBeacon', className);
   var styles = euiBeaconStyles(euiTheme);
   var cssStyles = [styles.euiBeacon, styles[color]];
-  var beaconStyle = _objectSpread(_objectSpread({}, style), {}, {
-    height: size,
-    width: size
-  });
+  var beaconStyle = useMemo(function () {
+    return logicalStyles(_objectSpread(_objectSpread({}, style), {}, {
+      height: size,
+      width: size
+    }));
+  }, [style, size]);
   return ___EmotionJSX("div", _extends({
     className: classes,
     css: cssStyles,

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

@@ -14,6 +14,7 @@ import { highlight } from 'refractor';
 import classNames from 'classnames';
 import { DEFAULT_LANGUAGE, checkSupportedLanguage, getHtmlContent } from './utils';
 import { useEuiTheme } from '../../services';
+import { useEuiCodeSyntaxVariables } from './code_syntax.styles';
 import { euiCodeStyles } from './code.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiCode = function EuiCode(_ref) {
@@ -37,8 +38,7 @@ export var EuiCode = function EuiCode(_ref) {
     return getHtmlContent(data, children);
   }, [data, children]);
   var classes = classNames('euiCode', className);
-  var euiTheme = useEuiTheme();
-  var styles = euiCodeStyles(euiTheme);
+  var styles = euiCodeStyles(useEuiTheme(), useEuiCodeSyntaxVariables());
   var cssStyles = [styles.euiCode, transparentBackground && styles.transparentBackground];
   return ___EmotionJSX("code", _extends({
     className: classes,

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

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

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

@@ -24,6 +24,7 @@ import { useFullScreen, EuiCodeBlockFullScreenWrapper } from './code_block_full_
 import { EuiCodeBlockControls } from './code_block_controls';
 import { EuiCodeBlockVirtualized } from './code_block_virtualized';
 import { euiCodeBlockStyles, euiCodeBlockPreStyles, euiCodeBlockCodeStyles } from './code_block.styles';
+import { useEuiCodeSyntaxVariables } from './code_syntax.styles';
 
 // Based on observed line height for non-virtualized code blocks
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -58,6 +59,7 @@ export var EuiCodeBlock = function EuiCodeBlock(_ref) {
     lineNumbers = _ref$lineNumbers === void 0 ? false : _ref$lineNumbers,
     rest = _objectWithoutProperties(_ref, _excluded);
   var euiTheme = useEuiTheme();
+  var euiCodeSyntaxVariables = useEuiCodeSyntaxVariables();
   var language = useMemo(function () {
     return checkSupportedLanguage(_language);
   }, [_language]);
@@ -109,7 +111,7 @@ export var EuiCodeBlock = function EuiCodeBlock(_ref) {
     onKeyDown = _useFullScreen.onKeyDown;
   var hasControls = !!(copyButton || fullScreenButton);
   var hasBothControls = !!(copyButton && fullScreenButton);
-  var styles = euiCodeBlockStyles(euiTheme);
+  var styles = euiCodeBlockStyles(euiTheme, euiCodeSyntaxVariables);
   var cssStyles = [styles.euiCodeBlock, styles[fontSize], transparentBackground && styles.transparentBackground, hasControls && (hasBothControls ? styles.hasBothControls[paddingSize] : styles.hasControls[paddingSize])];
   var _useMemo = useMemo(function () {
       var isWhiteSpacePre = whiteSpace === 'pre' || isVirtualized;
@@ -134,14 +136,14 @@ export var EuiCodeBlock = function EuiCodeBlock(_ref) {
     preProps = _useMemo2[0],
     preFullscreenProps = _useMemo2[1];
   var codeProps = useMemo(function () {
-    var styles = euiCodeBlockCodeStyles(euiTheme);
+    var styles = euiCodeBlockCodeStyles(euiTheme, euiCodeSyntaxVariables);
     var cssStyles = [styles.euiCodeBlock__code, isVirtualized && styles.isVirtualized];
     return _objectSpread({
       className: 'euiCodeBlock__code',
       css: cssStyles,
       'data-code-language': language
     }, rest);
-  }, [language, euiTheme, isVirtualized, rest]);
+  }, [language, euiTheme, euiCodeSyntaxVariables, isVirtualized, rest]);
   return ___EmotionJSX("div", {
     css: cssStyles,
     className: classNames('euiCodeBlock', className),

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

@@ -19,7 +19,6 @@ 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 { euiCodeSyntaxColors, euiCodeSyntaxTokens } from './code_syntax.styles';
 var _ref4 = process.env.NODE_ENV === "production" ? {
   name: "i92zwx-isFullScreen",
   styles: "position:fixed;inset:0;label:isFullScreen;"
@@ -36,11 +35,10 @@ var _ref5 = process.env.NODE_ENV === "production" ? {
   styles: "background:transparent;label:transparentBackground;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-export var euiCodeBlockStyles = function euiCodeBlockStyles(euiThemeContext) {
+export var euiCodeBlockStyles = function euiCodeBlockStyles(euiThemeContext, euiCodeSyntaxVariables) {
   var euiTheme = euiThemeContext.euiTheme;
-  var euiCodeSyntax = euiCodeSyntaxColors(euiThemeContext);
   return {
-    euiCodeBlock: /*#__PURE__*/css("max-inline-size:100%;display:block;position:relative;background:", euiCodeSyntax.backgroundColor, ";", euiCodeSyntaxTokens(euiThemeContext), ";;label:euiCodeBlock;"),
+    euiCodeBlock: /*#__PURE__*/css("max-inline-size:100%;display:block;position:relative;background:", euiCodeSyntaxVariables.backgroundColor, ";", euiCodeSyntaxVariables.tokensCss, ";;label:euiCodeBlock;"),
     // Font size
     s: /*#__PURE__*/css(euiFontSize(euiThemeContext, 'xs'), ";;label:s;"),
     m: /*#__PURE__*/css(euiFontSize(euiThemeContext, 's'), ";;label:m;"),
@@ -112,11 +110,10 @@ var _ref = process.env.NODE_ENV === "production" ? {
   styles: "position:relative;label:isVirtualized;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-export var euiCodeBlockCodeStyles = function euiCodeBlockCodeStyles(euiThemeContext) {
+export var euiCodeBlockCodeStyles = function euiCodeBlockCodeStyles(euiThemeContext, euiCodeSyntaxVariables) {
   var euiTheme = euiThemeContext.euiTheme;
-  var euiCodeSyntax = euiCodeSyntaxColors(euiThemeContext);
   return {
-    euiCodeBlock__code: /*#__PURE__*/css("font-family:", euiTheme.font.familyCode, ";font-size:inherit;color:", euiCodeSyntax.color, ";display:block;;label:euiCodeBlock__code;"),
+    euiCodeBlock__code: /*#__PURE__*/css("font-family:", euiTheme.font.familyCode, ";font-size:inherit;color:", euiCodeSyntaxVariables.color, ";display:block;;label:euiCodeBlock__code;"),
     isVirtualized: _ref
   };
 };

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

@@ -8,13 +8,13 @@
 
 import React, { Fragment } from 'react';
 import { useEuiTheme } from '../../services';
+import { useEuiCodeSyntaxVariables } from './code_syntax.styles';
 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 euiTheme = useEuiTheme();
-  var styles = euiCodeBlockControlsStyles(euiTheme);
+  var styles = euiCodeBlockControlsStyles(useEuiTheme(), useEuiCodeSyntaxVariables());
   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,7 +16,6 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css } from '@emotion/react';
 import { euiPaddingSize } from '../../global_styling';
-import { euiCodeSyntaxColors } 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;"
@@ -25,11 +24,10 @@ 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) {
+export var euiCodeBlockControlsStyles = function euiCodeBlockControlsStyles(euiThemeContext, euiCodeSyntaxVariables) {
   var euiTheme = euiThemeContext.euiTheme;
-  var euiCodeSyntax = euiCodeSyntaxColors(euiThemeContext);
   return {
-    euiCodeBlock__controls: /*#__PURE__*/css("position:absolute;display:flex;flex-direction:column;gap:", euiTheme.size.xs, ";background:", euiCodeSyntax.backgroundColor, ";;label:euiCodeBlock__controls;"),
+    euiCodeBlock__controls: /*#__PURE__*/css("position:absolute;display:flex;flex-direction:column;gap:", euiTheme.size.xs, ";background:", euiCodeSyntaxVariables.backgroundColor, ";;label:euiCodeBlock__controls;"),
     offset: {
       none: _ref,
       s: /*#__PURE__*/css("inset-block-start:", euiPaddingSize(euiThemeContext, 's'), ";inset-inline-end:", euiPaddingSize(euiThemeContext, 's'), ";;label:s;"),