@elastic/eui 75.0.0 → 75.1.0

package/i18ntokens.json

@@ -303,6 +303,22 @@
     },
     "filepath": "src/components/card/card_select/card_select.tsx"
   },
+  {
+    "token": "euiCodeBlockAnnotations.ariaLabel",
+    "defString": "Click to view a code annotation for line {lineNumber}",
+    "highlighting": "string",
+    "loc": {
+      "start": {
+        "line": 26,
+        "column": 20
+      },
+      "end": {
+        "line": 30,
+        "column": 3
+      }
+    },
+    "filepath": "src/components/code/code_block_annotations.tsx"
+  },
   {
     "token": "euiCodeBlockCopy.copy",
     "defString": "Copy",
@@ -325,11 +341,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 47,
+        "line": 54,
         "column": 49
       },
       "end": {
-        "line": 53,
+        "line": 60,
         "column": 3
       }
     },
@@ -341,11 +357,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 47,
+        "line": 54,
         "column": 49
       },
       "end": {
-        "line": 53,
+        "line": 60,
         "column": 3
       }
     },
@@ -6101,11 +6117,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 52,
+        "line": 51,
         "column": 6
       },
       "end": {
-        "line": 52,
+        "line": 51,
         "column": 74
       }
     },
@@ -6117,11 +6133,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 65,
+        "line": 59,
         "column": 6
       },
       "end": {
-        "line": 65,
+        "line": 59,
         "column": 78
       }
     },
@@ -6133,11 +6149,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 79,
+        "line": 68,
         "column": 4
       },
       "end": {
-        "line": 83,
+        "line": 72,
         "column": 5
       }
     },

package/lib/components/code/code_block.js

@@ -242,12 +242,14 @@ EuiCodeBlock.propTypes = {
 
   /**
      * Displays line numbers.
-     * Optionally accepts a configuration object for setting the starting number and visual highlighting ranges:
-     * `{ start: 100, highlight: '1, 5-10, 20-30, 40' }`
+     * Optionally accepts a configuration object for setting the starting number,
+     * visually highlighting ranges, or annotating specific lines:
+     * `{ start: 100, highlight: '1, 5-10, 20-30, 40', annotations: { 6: 'A special note about this line' } }`
      */
   lineNumbers: _propTypes.default.oneOfType([_propTypes.default.bool.isRequired, _propTypes.default.shape({
     start: _propTypes.default.number,
-    highlight: _propTypes.default.string
+    highlight: _propTypes.default.string,
+    annotations: _propTypes.default.any
   }).isRequired]),
 
   /**

package/lib/components/code/code_block_annotations.js

@@ -0,0 +1,113 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiCodeBlockAnnotation = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _services = require("../../services");
+
+var _i18n = require("../i18n");
+
+var _popover = require("../popover");
+
+var _icon = require("../icon");
+
+var _button = require("../../themes/amsterdam/global_styling/mixins/button");
+
+var _code_block_annotations = require("./code_block_annotations.style");
+
+var _react2 = require("@emotion/react");
+
+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; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var EuiCodeBlockAnnotation = function EuiCodeBlockAnnotation(_ref) {
+  var lineNumber = _ref.lineNumber,
+      children = _ref.children;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var ariaLabel = (0, _i18n.useEuiI18n)('euiCodeBlockAnnotations.ariaLabel', 'Click to view a code annotation for line {lineNumber}', {
+    lineNumber: lineNumber
+  });
+
+  var _useEuiTheme = (0, _services.useEuiTheme)(),
+      euiTheme = _useEuiTheme.euiTheme,
+      colorMode = _useEuiTheme.colorMode;
+
+  var styles = (0, _code_block_annotations.euiCodeBlockAnnotationsStyles)(euiTheme);
+  var buttonIconFocusStyle = (0, _button.useEuiButtonFocusCSS)();
+  var cssButtonIconStyles = [styles.euiCodeBlockAnnotation__buttonIcon, buttonIconFocusStyle];
+  var isDarkMode = colorMode === 'DARK';
+  return (0, _react2.jsx)(_popover.EuiPopover, {
+    isOpen: isOpen,
+    closePopover: function closePopover() {
+      return setIsOpen(false);
+    },
+    button: (0, _react2.jsx)("button", {
+      onClick: function onClick() {
+        return setIsOpen(!isOpen);
+      },
+      "aria-label": ariaLabel,
+      css: cssButtonIconStyles,
+      "data-test-subj": "euiCodeBlockAnnotationIcon"
+    }, (0, _react2.jsx)(_icon.EuiIcon, {
+      type: AnnotationInfoIcon,
+      size: "s",
+      color: isDarkMode ? euiTheme.colors.ink : 'ghost'
+    })),
+    css: styles.euiCodeBlockAnnotation,
+    zIndex: Number(euiTheme.levels.mask) + 1 // Ensure fullscreen annotation popovers sit above the mask
+    ,
+    anchorPosition: "leftCenter",
+    panelProps: {
+      'data-test-subj': 'euiCodeBlockAnnotationPopover'
+    }
+  }, children);
+};
+
+exports.EuiCodeBlockAnnotation = EuiCodeBlockAnnotation;
+EuiCodeBlockAnnotation.propTypes = {
+  lineNumber: _propTypes.default.number.isRequired
+};
+
+var AnnotationInfoIcon = function AnnotationInfoIcon(props) {
+  return (0, _react2.jsx)("svg", _extends({
+    width: 11,
+    height: 11,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), (0, _react2.jsx)("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M7.139 14l-.052-6.007H5V6.28h4.111l.052 6.007h1.915V14h-3.94zM6.712 3.38c0-.396.118-.725.354-.987S7.639 2 8.077 2c.438 0 .777.131 1.016.393.24.262.359.591.359.987 0 .39-.12.714-.359.972s-.578.388-1.016.388c-.438 0-.775-.13-1.011-.388-.236-.258-.354-.582-.354-.972z"
+  }));
+};

package/lib/components/code/code_block_annotations.style.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiCodeBlockAnnotationsStyles = 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 euiCodeBlockAnnotationsStyles = function euiCodeBlockAnnotationsStyles(euiTheme) {
+  var buttonIconSize = (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
+    return x - 1.5;
+  });
+  return {
+    euiCodeBlockAnnotation: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('right', 0), " ", (0, _global_styling.logicalCSS)('top', '50%'), " transform:translate(50%, -50%);line-height:1;;label:euiCodeBlockAnnotation;"),
+    euiCodeBlockAnnotation__buttonIcon: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(buttonIconSize), " display:flex;align-items:center;justify-content:center;background-color:", euiTheme.colors.primary, ";border-radius:50%;;label:euiCodeBlockAnnotation__buttonIcon;")
+  };
+};
+
+exports.euiCodeBlockAnnotationsStyles = euiCodeBlockAnnotationsStyles;

package/lib/components/code/code_block_full_screen.js

@@ -58,9 +58,15 @@ var useFullScreen = function useFullScreen(_ref) {
   }, []);
   var onKeyDown = (0, _react.useCallback)(function (event) {
     if (event.key === _services.keys.ESCAPE) {
-      event.preventDefault();
-      event.stopPropagation();
-      setIsFullScreen(false);
+      // We need to make sure annotation Escape keypresses don't also cause fullscreen mode to close
+      var focus = document.activeElement;
+      var isAnnotationPopover = !!(focus !== null && focus !== void 0 && focus.dataset.popoverOpen) || !!(focus !== null && focus !== void 0 && focus.closest('[data-popover-open]'));
+
+      if (!isAnnotationPopover) {
+        event.preventDefault();
+        event.stopPropagation();
+        setIsFullScreen(false);
+      }
     }
   }, []);
 

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

@@ -33,11 +33,12 @@ var euiCodeBlockLineStyles = function euiCodeBlockLineStyles(euiThemeContext) {
       toString: _EMOTION_STRINGIFIED_CSS_ERROR__
     }),
     lineText: {
-      euiCodeBlock__lineText: /*#__PURE__*/(0, _css.css)("flex-grow:1;display:inline-block;padding-inline-start:", euiTheme.size.s, ";border-inline-start:", euiTheme.border.thin, ";user-select:text;;label:euiCodeBlock__lineText;"),
+      euiCodeBlock__lineText: /*#__PURE__*/(0, _css.css)("flex-grow:1;display:inline-block;padding-inline-start:", euiTheme.size.m, ";border-inline-start:", euiTheme.border.thin, ";user-select:text;;label:euiCodeBlock__lineText;"),
       isHighlighted: /*#__PURE__*/(0, _css.css)("background:", (0, _global_styling.euiBackgroundColor)(euiThemeContext, 'primary'), ";border-inline-start:", euiTheme.border.width.thick, " solid ", euiTheme.colors.primary, ";;label:isHighlighted;")
     },
     lineNumber: {
-      euiCodeBlock__lineNumber: /*#__PURE__*/(0, _css.css)("flex-grow:0;flex-shrink:0;user-select:none;padding-inline-end:", euiTheme.size.s, ";box-sizing:content-box;&:before{content:attr(data-line-number);color:", euiTheme.colors.subduedText, ";text-align:end;display:block;};label:euiCodeBlock__lineNumber;")
+      euiCodeBlock__lineNumberWrapper: /*#__PURE__*/(0, _css.css)("position:relative;flex-grow:0;flex-shrink:0;user-select:none;padding-inline-end:", euiTheme.size.m, ";box-sizing:content-box;;label:euiCodeBlock__lineNumberWrapper;"),
+      euiCodeBlock__lineNumber: /*#__PURE__*/(0, _css.css)("color:", euiTheme.colors.subduedText, ";text-align:end;display:block;;label:euiCodeBlock__lineNumber;")
     }
   };
 };

package/lib/components/code/utils.js

@@ -13,6 +13,8 @@ var _refractor = require("refractor");
 
 var _css = require("@emotion/css");
 
+var _code_block_annotations = require("./code_block_annotations");
+
 var _code_block_line = require("./code_block_line.styles");
 
 var _react2 = require("@emotion/react");
@@ -66,7 +68,15 @@ var nodeToHtml = function nodeToHtml(node, idx, nodes) {
       key: key,
       className: (0, _css.cx)(properties.className)
     }), children && children.map(function (el, i) {
-      return nodeToHtml(el, i, nodes, depth + 1);
+      return (// @ts-ignore - using a custom type here to handle JSX annotations
+        el.type === 'annotation' ? // @ts-ignore - custom keys are passed by annotationElement below
+        (0, _react2.jsx)(_code_block_annotations.EuiCodeBlockAnnotation, {
+          lineNumber: el.lineNumber,
+          children: el.annotation,
+          key: i
+        }) // prettier-ignore
+        : nodeToHtml(el, i, nodes, depth + 1)
+      );
     }));
   }
 
@@ -174,31 +184,61 @@ function wrapLines(nodes, options, euiTheme) {
     var lineStyles = (0, _css.cx)([styles.euiCodeBlock__line, options.showLineNumbers && styles.hasLineNumbers]);
 
     if (options.showLineNumbers) {
-      var _properties;
+      var _properties, _options$annotations;
 
       var lineNumber = i + 1;
       var digits = grouped.length.toString().length;
-      var width = digits * CHAR_SIZE;
+      var width = digits * CHAR_SIZE; // Line text element and highlights
+
       var highlights = options.highlight ? parseLineRanges(options.highlight) : [];
       var lineTextStyles = (0, _css.cx)([styles.lineText.euiCodeBlock__lineText, highlights.includes(lineNumber) && styles.lineText.isHighlighted]);
-      var lineNumberStyles = (0, _css.cx)(styles.lineNumber.euiCodeBlock__lineNumber);
-      children = [{
+      var lineTextElement = {
+        type: 'element',
+        tagName: 'span',
+        properties: {
+          className: ['euiCodeBlock__lineText', lineTextStyles]
+        },
+        children: node
+      }; // Line number column/wrapper
+
+      var lineNumberWrapperStyles = (0, _css.cx)(styles.lineNumber.euiCodeBlock__lineNumberWrapper);
+      var lineNumberWrapperElement = {
         type: 'element',
         tagName: 'span',
         properties: (_properties = {
           style: {
             inlineSize: width
           }
-        }, _defineProperty(_properties, 'data-line-number', lineNumber), _defineProperty(_properties, 'aria-hidden', true), _defineProperty(_properties, "className", ['euiCodeBlock__lineNumber', lineNumberStyles]), _properties),
+        }, _defineProperty(_properties, 'data-line-number', lineNumber), _defineProperty(_properties, "className", ['euiCodeBlock__lineNumber', lineNumberWrapperStyles]), _properties),
         children: []
-      }, {
+      }; // Line number element
+
+      var lineNumberStyles = (0, _css.cx)(styles.lineNumber.euiCodeBlock__lineNumber);
+      var lineNumberElement = {
         type: 'element',
         tagName: 'span',
-        properties: {
-          className: ['euiCodeBlock__lineText', lineTextStyles]
-        },
-        children: node
-      }];
+        properties: _defineProperty({
+          className: [lineNumberStyles]
+        }, 'aria-hidden', true),
+        children: [{
+          type: 'text',
+          value: String(lineNumber)
+        }]
+      };
+      lineNumberWrapperElement.children.push(lineNumberElement); // Annotation element
+
+      var hasAnnotation = (_options$annotations = options.annotations) === null || _options$annotations === void 0 ? void 0 : _options$annotations.hasOwnProperty(lineNumber);
+
+      if (hasAnnotation) {
+        var annotationElement = {
+          type: 'annotation',
+          annotation: options.annotations[lineNumber],
+          lineNumber: lineNumber
+        };
+        lineNumberWrapperElement.children.push(annotationElement);
+      }
+
+      children = [lineNumberWrapperElement, lineTextElement];
     }
 
     wrapped.push({
@@ -218,7 +258,8 @@ var highlightByLine = function highlightByLine(children, language, data, euiThem
     lineNumber: data.start
   }), {
     showLineNumbers: data.show,
-    highlight: data.highlight
+    highlight: data.highlight,
+    annotations: data.annotations
   }, euiTheme);
 };
 

package/lib/components/form/range/range_track.js

@@ -118,7 +118,7 @@ var EuiRangeTrack = function EuiRangeTrack(_ref) {
   }, [showTicks, ticks, min, max, tickInterval, step]);
   var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _range_track.euiRangeTrackStyles)(euiTheme);
-  var cssStyles = [styles.euiRangeTrack, disabled && styles.disabled, levels && !!levels.length && styles.hasLevels, (tickSequence || ticks) && styles.hasTicks];
+  var cssStyles = [styles.euiRangeTrack, disabled && styles.disabled, levels && !!levels.length && styles.hasLevels, showTicks && (tickSequence || ticks) && styles.hasTicks];
 
   var _useState = (0, _react.useState)(0),
       _useState2 = _slicedToArray(_useState, 2),

package/lib/components/icon/assets/app_agent.js

@@ -37,18 +37,10 @@ var EuiIconAppAgent = function EuiIconAppAgent(_ref) {
   }, props), title ? (0, _react2.jsx)("title", {
     id: titleId
   }, title) : null, (0, _react2.jsx)("path", {
-    className: "euiIcon__fillSecondary",
-    d: "M21 2.82L16 .038 11 2.82v2.289l5-2.782 5 2.782v-2.29z"
-  }), (0, _react2.jsx)("path", {
-    className: "euiIcon__fillSecondary",
-    d: "M21 7.282L16 4.5l-5 2.782V9.57l5-2.781 5 2.781V7.282z"
-  }), (0, _react2.jsx)("path", {
-    d: "M7 5.045L2 7.827v15.577l14 7.788 14-7.788V7.827l-5-2.782v2.289l3 1.669v13.225l-12 6.676-12-6.676V9.003l3-1.669V5.045z"
+    d: "M2.996 18.636L0 20.434v6.132l6 3.6 5-3 5 3 5-3 5 3 6-3.6v-6.132l-5-3v-5l-5-3v-5l-6-3.6-6 3.6v2.832l2 .033V5.566l4-2.4 4 2.4v3.868l-1.996 1.197 1 1.733L21 11.166l4 2.4v3.868l-4 2.4-2.257-1.354-.971 1.75L20 21.565v3.868l-4 2.4-4-2.4v-1.7l-2-.033v1.733l-4 2.4-4-2.4v-3.868l1.996-1.197-1-1.733zM22 25.434v-3.868l4-2.4 4 2.4v3.868l-4 2.4-4-2.4z"
   }), (0, _react2.jsx)("path", {
     className: "euiIcon__fillSecondary",
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M22 12.5L16 9l-6 3.5v7l6 3.5 6-3.5v-7zm-9.974 1.205L16 11.387l3.974 2.318v4.59L16 20.613l-3.974-2.318v-4.59z"
+    d: "M11 22.166l-6-3.6v-6.132l6-3.6 6 3.6v6.132l-6 3.6zm4-4.732v-3.868l-4-2.4-4 2.4v3.868l4 2.4 4-2.4z"
   }));
 };
 

package/lib/components/icon/assets/app_fleet.js

@@ -37,10 +37,18 @@ var EuiIconAppFleet = function EuiIconAppFleet(_ref) {
   }, props), title ? (0, _react2.jsx)("title", {
     id: titleId
   }, title) : null, (0, _react2.jsx)("path", {
-    d: "M2.996 18.636L0 20.434v6.132l6 3.6 5-3 5 3 5-3 5 3 6-3.6v-6.132l-5-3v-5l-5-3v-5l-6-3.6-6 3.6v2.832l2 .033V5.566l4-2.4 4 2.4v3.868l-1.996 1.197 1 1.733L21 11.166l4 2.4v3.868l-4 2.4-2.257-1.354-.971 1.75L20 21.565v3.868l-4 2.4-4-2.4v-1.7l-2-.033v1.733l-4 2.4-4-2.4v-3.868l1.996-1.197-1-1.733zM22 25.434v-3.868l4-2.4 4 2.4v3.868l-4 2.4-4-2.4z"
+    className: "euiIcon__fillSecondary",
+    d: "M21 2.82L16 .038 11 2.82v2.289l5-2.782 5 2.782v-2.29z"
+  }), (0, _react2.jsx)("path", {
+    className: "euiIcon__fillSecondary",
+    d: "M21 7.282L16 4.5l-5 2.782V9.57l5-2.781 5 2.781V7.282z"
+  }), (0, _react2.jsx)("path", {
+    d: "M7 5.045L2 7.827v15.577l14 7.788 14-7.788V7.827l-5-2.782v2.289l3 1.669v13.225l-12 6.676-12-6.676V9.003l3-1.669V5.045z"
   }), (0, _react2.jsx)("path", {
     className: "euiIcon__fillSecondary",
-    d: "M11 22.166l-6-3.6v-6.132l6-3.6 6 3.6v6.132l-6 3.6zm4-4.732v-3.868l-4-2.4-4 2.4v3.868l4 2.4 4-2.4z"
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M22 12.5L16 9l-6 3.5v7l6 3.5 6-3.5v-7zm-9.974 1.205L16 11.387l3.974 2.318v4.59L16 20.613l-3.974-2.318v-4.59z"
   }));
 };
 

package/lib/components/icon/svgs/app_agent.svg

@@ -1,6 +1,4 @@
 <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
-<path class="euiIcon__fillSecondary" d="M21 2.81994L16 0.0383301L11 2.81991V5.10857L16 2.32699L21 5.1086V2.81994Z" />
-<path class="euiIcon__fillSecondary" d="M21 7.28161L16 4.5L11 7.28158V9.57024L16 6.78866L21 9.57027V7.28161Z" />
-<path d="M7 5.04535L2 7.82695V23.4039L16 31.1923L30 23.4039V7.82695L25 5.04536V7.33402L28 9.00297V22.2278L16 28.9037L4 22.2279V9.00297L7 7.33401V5.04535Z" />
-<path class="euiIcon__fillSecondary" fill-rule="evenodd" clip-rule="evenodd" d="M22 12.5L16 9L10 12.5V19.5L16 23L22 19.5V12.5ZM12.026 13.7053L16 11.3871L19.974 13.7053V18.2947L16 20.6129L12.026 18.2947V13.7053Z" />
+<path d="M2.99581 18.6363L0 20.4337V26.5661L6 30.1661L11 27.1661L16 30.1661L21 27.1661L26 30.1661L32 26.5661V20.4337L27 17.4337V12.4337L22 9.43374V4.43374L16 0.83374L10 4.43374V7.26581L12 7.29946V5.56612L16 3.16612L20 5.56612V9.43374L18.0041 10.6313L19.0042 12.3636L21 11.1661L25 13.5661V17.4337L21 19.8337L18.7433 18.4797L17.772 20.2293L20 21.5661V25.4337L16 27.8337L12 25.4337V23.7342L10 23.7006V25.4337L6 27.8337L2 25.4337L2 21.5661L3.99595 20.3686L2.99581 18.6363ZM22 25.4337V21.5661L26 19.1661L30 21.5661V25.4337L26 27.8337L22 25.4337Z" />
+<path class="euiIcon__fillSecondary" d="M11 22.1662L5 18.5662L5 12.4338L11 8.83382L17 12.4338L17 18.5662L11 22.1662ZM15 17.4338L15 13.5662L11 11.1662L7 13.5662L7 17.4338L11 19.8338L15 17.4338Z" />
 </svg>

package/lib/components/icon/svgs/app_fleet.svg

@@ -1,4 +1,6 @@
 <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.99581 18.6363L0 20.4337V26.5661L6 30.1661L11 27.1661L16 30.1661L21 27.1661L26 30.1661L32 26.5661V20.4337L27 17.4337V12.4337L22 9.43374V4.43374L16 0.83374L10 4.43374V7.26581L12 7.29946V5.56612L16 3.16612L20 5.56612V9.43374L18.0041 10.6313L19.0042 12.3636L21 11.1661L25 13.5661V17.4337L21 19.8337L18.7433 18.4797L17.772 20.2293L20 21.5661V25.4337L16 27.8337L12 25.4337V23.7342L10 23.7006V25.4337L6 27.8337L2 25.4337L2 21.5661L3.99595 20.3686L2.99581 18.6363ZM22 25.4337V21.5661L26 19.1661L30 21.5661V25.4337L26 27.8337L22 25.4337Z" />
-<path class="euiIcon__fillSecondary" d="M11 22.1662L5 18.5662L5 12.4338L11 8.83382L17 12.4338L17 18.5662L11 22.1662ZM15 17.4338L15 13.5662L11 11.1662L7 13.5662L7 17.4338L11 19.8338L15 17.4338Z" />
+<path class="euiIcon__fillSecondary" d="M21 2.81994L16 0.0383301L11 2.81991V5.10857L16 2.32699L21 5.1086V2.81994Z" />
+<path class="euiIcon__fillSecondary" d="M21 7.28161L16 4.5L11 7.28158V9.57024L16 6.78866L21 9.57027V7.28161Z" />
+<path d="M7 5.04535L2 7.82695V23.4039L16 31.1923L30 23.4039V7.82695L25 5.04536V7.33402L28 9.00297V22.2278L16 28.9037L4 22.2279V9.00297L7 7.33401V5.04535Z" />
+<path class="euiIcon__fillSecondary" fill-rule="evenodd" clip-rule="evenodd" d="M22 12.5L16 9L10 12.5V19.5L16 23L22 19.5V12.5ZM12.026 13.7053L16 11.3871L19.974 13.7053V18.2947L16 20.6129L12.026 18.2947V13.7053Z" />
 </svg>

package/lib/components/steps/step.js

@@ -17,6 +17,10 @@ var _title = require("../title");
 
 var _step_number = require("./step_number");
 
+var _services = require("../../services");
+
+var _step = require("./step.styles");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["className", "children", "headingElement", "step", "title", "titleSize", "status"];
@@ -46,27 +50,32 @@ var EuiStep = function EuiStep(_ref) {
       status = _ref.status,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var classes = (0, _classnames.default)('euiStep', {
-    'euiStep--small': titleSize === 'xs',
-    'euiStep-isDisabled': status === 'disabled'
-  }, className);
-  var numberClasses = (0, _classnames.default)('euiStep__circle', {
-    'euiStepNumber--small': titleSize === 'xs'
-  });
+  var classes = (0, _classnames.default)('euiStep', className);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _step.euiStepStyles)(euiTheme);
+  var cssStyles = [styles.euiStep, styles[titleSize]];
+  var contentStyles = (0, _step.euiStepContentStyles)(euiTheme);
+  var cssContentStyles = [contentStyles.euiStep__content, contentStyles[titleSize]];
+  var titleStyles = (0, _step.euiStepTitleStyles)(euiTheme);
+  var cssStepTitleStyles = [titleStyles.euiStep__title, status === 'disabled' && titleStyles.isDisabled, titleStyles[titleSize]];
+  var cssTitleWrapperStyles = titleStyles.euiStep__titleWrapper;
   return (0, _react2.jsx)("div", _extends({
-    className: classes
+    className: classes,
+    css: cssStyles
   }, rest), (0, _react2.jsx)("div", {
-    className: "euiStep__titleWrapper"
+    className: "euiStep__titleWrapper",
+    css: cssTitleWrapperStyles
   }, (0, _react2.jsx)(_step_number.EuiStepNumber, {
-    className: numberClasses,
     number: step,
     status: status,
     titleSize: titleSize
   }), (0, _react2.jsx)(_title.EuiTitle, {
     size: titleSize,
-    className: "euiStep__title"
+    className: "euiStep__title",
+    css: cssStepTitleStyles
   }, /*#__PURE__*/(0, _react.createElement)(headingElement, null, title))), (0, _react2.jsx)("div", {
-    className: "euiStep__content"
+    className: "euiStep__content",
+    css: cssContentStyles
   }, children));
 };
 

package/lib/components/steps/step.styles.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiStepVariables = exports.euiStepTitleStyles = exports.euiStepStyles = exports.euiStepContentStyles = 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 euiStepVariables = function euiStepVariables(euiTheme) {
+  return {
+    numberSize: euiTheme.size.xl,
+    numberXSSize: euiTheme.size.l,
+    numberMargin: euiTheme.size.base
+  };
+};
+
+exports.euiStepVariables = euiStepVariables;
+
+var euiStepStyles = function euiStepStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var euiStep = euiStepVariables(euiTheme); // the vertical line is centered on the number, so we need to offset the line
+  // by half of the number size & half of the line size to center it
+
+  var lineStartPosition = (0, _global_styling.mathWithUnits)([euiStep.numberSize, euiTheme.border.width.thick], function (x, y) {
+    return x / 2 - y / 2;
+  });
+  var lineEndPosition = (0, _global_styling.mathWithUnits)([euiStep.numberSize, euiTheme.border.width.thick], function (x, y) {
+    return x / 2 + y / 2;
+  });
+  var lineGradient = "linear-gradient(to right,\n    transparent 0,\n    transparent ".concat(lineStartPosition, ",\n    ").concat(euiTheme.border.color, " ").concat(lineStartPosition, ",\n    ").concat(euiTheme.border.color, " ").concat(lineEndPosition, ",\n    transparent ").concat(lineEndPosition, ",\n    transparent 100%)");
+  return {
+    euiStep: /*#__PURE__*/(0, _react.css)("&:not(:last-of-type){background-image:", lineGradient, ";background-repeat:no-repeat;};label:euiStep;"),
+    // Sizes
+    m: /*#__PURE__*/(0, _react.css)("&:not(:last-of-type){background-position:left ", euiTheme.size.xl, ";};label:m;"),
+    s: /*#__PURE__*/(0, _react.css)("&:not(:last-of-type){background-position:left ", euiTheme.size.xl, ";};label:s;"),
+    xs: /*#__PURE__*/(0, _react.css)("&:not(:last-of-type){background-position:-", euiTheme.size.xs, " ", euiTheme.size.l, ";};label:xs;")
+  };
+};
+
+exports.euiStepStyles = euiStepStyles;
+
+var euiStepContentStyles = function euiStepContentStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var euiStep = euiStepVariables(euiTheme);
+  var styles = {
+    euiStep__content: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-top', euiTheme.size.s), " ", (0, _global_styling.logicalCSS)('padding-top', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('padding-bottom', (0, _global_styling.mathWithUnits)([euiTheme.size.xl, euiTheme.size.s], function (x, y) {
+      return x + y;
+    })), " ", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.base), ";;label:euiStep__content;"),
+    // Sizes
+    m: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-left', (0, _global_styling.mathWithUnits)([euiStep.numberSize, euiStep.numberMargin], function (x, y) {
+      return x / 2 + y;
+    })), (0, _global_styling.logicalCSS)('margin-left', (0, _global_styling.mathWithUnits)(euiStep.numberSize, function (x) {
+      return x / 2;
+    })), ";;label:m;"),
+    s: /*#__PURE__*/(0, _react.css)(";label:s;"),
+    // s is the same as m, so we'll programmatically duplicate it below
+    xs: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-left', (0, _global_styling.mathWithUnits)([euiStep.numberXSSize, euiStep.numberMargin], function (x, y) {
+      return x / 2 + y;
+    })), (0, _global_styling.logicalCSS)('margin-left', (0, _global_styling.mathWithUnits)(euiStep.numberXSSize, function (x) {
+      return x / 2;
+    })), ";;label:xs;")
+  };
+  styles.s = styles.m;
+  return styles;
+};
+
+exports.euiStepContentStyles = euiStepContentStyles;
+
+var euiStepTitleStyles = function euiStepTitleStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var euiStep = euiStepVariables(euiTheme);
+  return {
+    euiStep__titleWrapper: /*#__PURE__*/(0, _react.css)("display:flex;gap:", euiStep.numberMargin, ";;label:euiStep__titleWrapper;"),
+    euiStep__title: /*#__PURE__*/(0, _react.css)(";label:euiStep__title;"),
+    isDisabled: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.disabledText, ";;label:isDisabled;"),
+    // Sizes
+    m: /*#__PURE__*/(0, _react.css)(";label:m;"),
+    s: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-top', euiTheme.size.xs), ";;label:s;"),
+    xs: /*#__PURE__*/(0, _react.css)(";label:xs;")
+  };
+};
+
+exports.euiStepTitleStyles = euiStepTitleStyles;