@elastic/eui 75.0.0 → 75.1.0

package/es/components/steps/step_number.js

@@ -17,94 +17,103 @@ import classNames from 'classnames';
 import PropTypes from "prop-types";
 import React from 'react';
 import { EuiScreenReaderOnly } from '../accessibility';
-import { keysOf } from '../common';
 import { EuiIcon } from '../icon';
 import { useI18nCompleteStep, useI18nDisabledStep, useI18nErrorsStep, useI18nIncompleteStep, useI18nStep, useI18nWarningStep, useI18nLoadingStep, useI18nCurrentStep } from './step_strings';
 import { EuiLoadingSpinner } from '../loading';
+import { useEuiTheme } from '../../services';
+import { euiStepNumberStyles, euiStepNumberContentStyles } from './step_number.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var statusToClassNameMap = {
-  incomplete: 'euiStepNumber--incomplete',
-  disabled: 'euiStepNumber--disabled',
-  loading: 'euiStepNumber--loading',
-  warning: 'euiStepNumber--warning',
-  danger: 'euiStepNumber--danger',
-  complete: 'euiStepNumber--complete',
-  current: null // Current displays the same as the default (undefined)
-
-};
-export var STATUS = keysOf(statusToClassNameMap);
+export var STATUS = ['incomplete', 'disabled', 'loading', 'warning', 'danger', 'complete', 'current'];
 export var EuiStepNumber = function EuiStepNumber(_ref) {
   var className = _ref.className,
       status = _ref.status,
       number = _ref.number,
-      titleSize = _ref.titleSize,
+      _ref$titleSize = _ref.titleSize,
+      titleSize = _ref$titleSize === void 0 ? 's' : _ref$titleSize,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var stepAriaLabel = useI18nStep({
-    number: number
-  });
-  var completeAriaLabel = useI18nCompleteStep({
-    number: number
-  });
-  var warningAriaLabel = useI18nWarningStep({
-    number: number
-  });
-  var errorsAriaLabel = useI18nErrorsStep({
-    number: number
-  });
-  var incompleteAriaLabel = useI18nIncompleteStep({
-    number: number
-  });
-  var disabledAriaLabel = useI18nDisabledStep({
-    number: number
-  });
-  var loadingAriaLabel = useI18nLoadingStep({
-    number: number
-  });
-  var currentAriaLabel = useI18nCurrentStep({
-    number: number
-  });
-  var classes = classNames('euiStepNumber', status ? statusToClassNameMap[status] : undefined, className);
-  var iconSize = titleSize === 'xs' ? 's' : 'm';
-  var screenReaderText = stepAriaLabel;
-  if (status === 'incomplete') screenReaderText = incompleteAriaLabel;else if (status === 'disabled') screenReaderText = disabledAriaLabel;else if (status === 'loading') screenReaderText = loadingAriaLabel;else if (status === 'current') screenReaderText = currentAriaLabel;
+  var ariaLabelsMap = {
+    step: useI18nStep({
+      number: number
+    }),
+    current: useI18nCurrentStep({
+      number: number
+    }),
+    incomplete: useI18nIncompleteStep({
+      number: number
+    }),
+    complete: useI18nCompleteStep({
+      number: number
+    }),
+    disabled: useI18nDisabledStep({
+      number: number
+    }),
+    warning: useI18nWarningStep({
+      number: number
+    }),
+    danger: useI18nErrorsStep({
+      number: number
+    }),
+    loading: useI18nLoadingStep({
+      number: number
+    })
+  };
+  var classes = classNames('euiStepNumber', className);
+  var euiTheme = useEuiTheme();
+  var styles = euiStepNumberStyles(euiTheme);
+  var cssStyles = [styles.euiStepNumber, styles[titleSize], status && styles[status]];
+  var contentStyles = euiStepNumberContentStyles(euiTheme);
+  var content;
+  var screenReaderText;
+
+  switch (status) {
+    // Loading spinner
+    case 'loading':
+      screenReaderText = ariaLabelsMap.loading;
+      content = ___EmotionJSX(EuiLoadingSpinner, {
+        className: "euiStepNumber__loader",
+        size: titleSize === 'xs' ? 'l' : 'xl'
+      });
+      break;
+    // Statuses with icons
 
-  var numberOrIcon = ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("span", null, screenReaderText)), ___EmotionJSX("span", {
-    className: "euiStepNumber__number",
-    "aria-hidden": "true"
-  }, number));
+    case 'danger':
+    case 'warning':
+    case 'complete':
+      var cssIconStyles = [contentStyles.euiStepNumber__icon, contentStyles[status]];
+      var iconTypeMap = {
+        danger: 'cross',
+        warning: 'alert',
+        complete: 'check'
+      };
+      content = ___EmotionJSX(EuiIcon, {
+        type: iconTypeMap[status],
+        "aria-label": ariaLabelsMap[status],
+        size: titleSize === 'xs' ? 's' : 'm',
+        className: "euiStepNumber__icon",
+        css: cssIconStyles
+      });
+      break;
+    // Statuses with numbers
 
-  if (status === 'complete') {
-    numberOrIcon = ___EmotionJSX(EuiIcon, {
-      type: "check",
-      className: "euiStepNumber__icon",
-      size: iconSize,
-      "aria-label": completeAriaLabel
-    });
-  } else if (status === 'warning') {
-    numberOrIcon = ___EmotionJSX(EuiIcon, {
-      type: "alert",
-      className: "euiStepNumber__icon",
-      size: iconSize,
-      "aria-label": warningAriaLabel
-    });
-  } else if (status === 'danger') {
-    numberOrIcon = ___EmotionJSX(EuiIcon, {
-      type: "cross",
-      className: "euiStepNumber__icon",
-      size: iconSize,
-      "aria-label": errorsAriaLabel
-    });
-  } else if (status === 'loading') {
-    numberOrIcon = ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("span", null, screenReaderText)), ___EmotionJSX(EuiLoadingSpinner, {
-      className: "euiStepNumber__loader",
-      size: iconSize === 's' ? 'l' : 'xl'
-    }));
+    case 'incomplete':
+    case 'current':
+    case 'disabled':
+    default:
+      var cssNumberStyles = [contentStyles.euiStepNumber__number, status && contentStyles[status]];
+      screenReaderText = ariaLabelsMap[status || 'step'];
+      content = ___EmotionJSX("span", {
+        "aria-hidden": "true",
+        className: "euiStepNumber__number",
+        css: cssNumberStyles
+      }, number);
+      break;
   }
 
   return ___EmotionJSX("span", _extends({
-    className: classes
-  }, rest), numberOrIcon);
+    className: classes,
+    css: cssStyles
+  }, rest), screenReaderText && ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("span", null, screenReaderText)), content);
 };
 EuiStepNumber.propTypes = {
   /**

package/es/components/steps/step_number.styles.js

@@ -0,0 +1,76 @@
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import { css } from '@emotion/react';
+import { mathWithUnits, logicalCSS, euiFontSizeFromScale, euiCanAnimate, euiAnimScale } from '../../global_styling';
+import { euiStepVariables } from './step.styles';
+import { euiButtonFillColor } from '../../themes/amsterdam/global_styling/mixins';
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "76s2de-loading",
+  styles: "background:transparent;label:loading;"
+} : {
+  name: "76s2de-loading",
+  styles: "background:transparent;label:loading;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "1ru1jeq-euiStepNumber",
+  styles: "flex-shrink:0;label:euiStepNumber;"
+} : {
+  name: "1ru1jeq-euiStepNumber",
+  styles: "flex-shrink:0;label:euiStepNumber;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export var euiStepNumberStyles = function euiStepNumberStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var euiStep = euiStepVariables(euiTheme);
+
+  var createStepsNumber = function createStepsNumber(size, fontSize) {
+    return "\n      display: inline-block;\n      line-height: ".concat(size, ";\n      border-radius: ").concat(size, ";\n      ").concat(logicalCSS('width', size), ";\n      ").concat(logicalCSS('height', size), ";\n      text-align: center;\n      color: ").concat(euiTheme.colors.emptyShade, ";\n      background-color: ").concat(euiTheme.colors.primary, ";\n      font-size: ").concat(fontSize, ";\n      font-weight: ").concat(euiTheme.font.weight.medium, ";\n    ");
+  };
+
+  return {
+    euiStepNumber: _ref2,
+    // sizes
+    m: /*#__PURE__*/css(createStepsNumber(euiStep.numberSize, euiFontSizeFromScale('s', euiTheme)), ";;label:m;"),
+    s: /*#__PURE__*/css(createStepsNumber(euiStep.numberSize, euiFontSizeFromScale('s', euiTheme)), ";;label:s;"),
+    xs: /*#__PURE__*/css(createStepsNumber(euiStep.numberXSSize, euiFontSizeFromScale('xs', euiTheme)), ";;label:xs;"),
+    // status
+    incomplete: /*#__PURE__*/css("background-color:transparent;color:", euiTheme.colors.text, ";border:", euiTheme.border.thick, ";;label:incomplete;"),
+    disabled: /*#__PURE__*/css("color:", euiButtonFillColor(euiThemeContext, 'disabled').color, ";background-color:", euiButtonFillColor(euiThemeContext, 'disabled').backgroundColor, ";;label:disabled;"),
+    loading: _ref,
+    warning: /*#__PURE__*/css("color:", euiButtonFillColor(euiThemeContext, 'warning').color, ";background-color:", euiButtonFillColor(euiThemeContext, 'warning').backgroundColor, ";", euiCanAnimate, "{animation:", euiAnimScale, " ", euiTheme.animation.fast, " ", euiTheme.animation.bounce, ";};label:warning;"),
+    danger: /*#__PURE__*/css("color:", euiButtonFillColor(euiThemeContext, 'danger').color, ";background-color:", euiButtonFillColor(euiThemeContext, 'danger').backgroundColor, ";", euiCanAnimate, "{animation:", euiAnimScale, " ", euiTheme.animation.fast, " ", euiTheme.animation.bounce, ";};label:danger;"),
+    complete: /*#__PURE__*/css("color:", euiButtonFillColor(euiThemeContext, 'success').color, ";background-color:", euiButtonFillColor(euiThemeContext, 'success').backgroundColor, ";", euiCanAnimate, "{animation:", euiAnimScale, " ", euiTheme.animation.fast, " ", euiTheme.animation.bounce, ";};label:complete;"),
+    current: /*#__PURE__*/css(";label:current;")
+  };
+};
+export var euiStepNumberContentStyles = function euiStepNumberContentStyles(_ref3) {
+  var euiTheme = _ref3.euiTheme;
+  return {
+    // Statuses with icon content
+    euiStepNumber__icon: /*#__PURE__*/css("vertical-align:middle;position:relative;inset-block-start:-", euiTheme.border.width.thin, ";;label:euiStepNumber__icon;"),
+    complete: /*#__PURE__*/css("stroke:currentColor;stroke-width:", mathWithUnits(euiTheme.border.width.thin, function (x) {
+      return x / 2;
+    }), ";;label:complete;"),
+    danger: /*#__PURE__*/css("stroke:currentColor;stroke-width:", mathWithUnits(euiTheme.border.width.thin, function (x) {
+      return x / 2;
+    }), ";;label:danger;"),
+    warning: /*#__PURE__*/css("inset-block-start:-", euiTheme.border.width.thick, ";;label:warning;"),
+    // Statuses with number content
+    euiStepNumber__number: /*#__PURE__*/css(";label:euiStepNumber__number;"),
+    incomplete: /*#__PURE__*/css("display:unset;position:relative;inset-block-start:-", euiTheme.border.width.thick, ";;label:incomplete;"),
+    loading: /*#__PURE__*/css(";label:loading;"),
+    disabled: /*#__PURE__*/css(";label:disabled;"),
+    current: /*#__PURE__*/css(";label:current;")
+  };
+};

package/es/components/steps/steps_horizontal.js

@@ -17,6 +17,7 @@ import classNames from 'classnames';
 import PropTypes from "prop-types";
 import React from 'react';
 import { EuiStepHorizontal } from './step_horizontal';
+import { euiStepsHorizontalStyles } from './steps_horizontal.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiStepsHorizontal = function EuiStepsHorizontal(_ref) {
   var className = _ref.className,
@@ -24,16 +25,19 @@ export var EuiStepsHorizontal = function EuiStepsHorizontal(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var classes = classNames('euiStepsHorizontal', className);
+  var styles = euiStepsHorizontalStyles();
+  var cssStyles = styles.euiStepsHorizontal;
+  var cssItemStyles = styles.euiStepsHorizontal__item;
   return ___EmotionJSX("ol", _extends({
-    className: classes
+    className: classes,
+    css: cssStyles
   }, rest), steps.map(function (stepProps, index) {
-    var isCurrent = stepProps.status === 'current' ? {
-      'aria-current': 'step'
-    } : {};
-    return ___EmotionJSX("li", _extends({
+    return ___EmotionJSX("li", {
       key: index,
-      className: "euiStepHorizontal__item"
-    }, isCurrent), ___EmotionJSX(EuiStepHorizontal, _extends({
+      className: "euiStepsHorizontal__item",
+      css: cssItemStyles,
+      "aria-current": stepProps.status === 'current' ? 'step' : undefined
+    }, ___EmotionJSX(EuiStepHorizontal, _extends({
       step: index + 1
     }, stepProps)));
   }));

package/es/components/steps/steps_horizontal.styles.js

@@ -0,0 +1,35 @@
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import { css } from '@emotion/react'; //  1. Make each step the same width
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1pmkwst-euiStepsHorizontal__item",
+  styles: "flex-grow:1;flex-basis:0%;&:first-of-type>.euiStepHorizontal::before,&:last-of-type>.euiStepHorizontal::after{display:none;};label:euiStepsHorizontal__item;"
+} : {
+  name: "1pmkwst-euiStepsHorizontal__item",
+  styles: "flex-grow:1;flex-basis:0%;&:first-of-type>.euiStepHorizontal::before,&:last-of-type>.euiStepHorizontal::after{display:none;};label:euiStepsHorizontal__item;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "44yl7r-euiStepsHorizontal",
+  styles: "display:flex;align-items:stretch;label:euiStepsHorizontal;"
+} : {
+  name: "44yl7r-euiStepsHorizontal",
+  styles: "display:flex;align-items:stretch;label:euiStepsHorizontal;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export var euiStepsHorizontalStyles = function euiStepsHorizontalStyles() {
+  return {
+    euiStepsHorizontal: _ref2,
+    euiStepsHorizontal__item: _ref
+  };
+};

package/es/components/steps/sub_steps.js

@@ -16,6 +16,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
+import { useEuiTheme } from '../../services';
+import { euiSubStepsStyles } from './sub_steps.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiSubSteps = function EuiSubSteps(_ref) {
   var children = _ref.children,
@@ -23,8 +25,12 @@ export var EuiSubSteps = function EuiSubSteps(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var classes = classNames('euiSubSteps', className);
+  var euiTheme = useEuiTheme();
+  var styles = euiSubStepsStyles(euiTheme);
+  var cssStyles = [styles.euiSubSteps];
   return ___EmotionJSX("div", _extends({
-    className: classes
+    className: classes,
+    css: cssStyles
   }, rest), children);
 };
 EuiSubSteps.propTypes = {

package/es/components/steps/sub_steps.styles.js

@@ -0,0 +1,14 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import { css } from '@emotion/react';
+export var euiSubStepsStyles = function euiSubStepsStyles(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return {
+    euiSubSteps: /*#__PURE__*/css("padding:", euiTheme.size.base, ";background-color:", euiTheme.colors.lightestShade, ";margin-block-end:", euiTheme.size.base, ";>*:last-child{margin-block-end:0;}& ol,.euiText & ol{list-style-type:lower-alpha;};label:euiSubSteps;")
+  };
+};

package/es/components/tour/tour_step_indicator.js

@@ -49,7 +49,6 @@ export var EuiTourStepIndicator = function EuiTourStepIndicator(_ref2) {
     }, function (isActive) {
       return ___EmotionJSX(EuiIcon, {
         type: "dot",
-        className: "euiStepNumber__icon",
         "aria-label": isActive,
         color: "success",
         "aria-current": "step"
@@ -62,7 +61,6 @@ export var EuiTourStepIndicator = function EuiTourStepIndicator(_ref2) {
     }, function (isComplete) {
       return ___EmotionJSX(EuiIcon, {
         type: "dot",
-        className: "euiStepNumber__icon",
         "aria-label": isComplete,
         color: "subdued"
       });
@@ -74,7 +72,6 @@ export var EuiTourStepIndicator = function EuiTourStepIndicator(_ref2) {
     }, function (isIncomplete) {
       return ___EmotionJSX(EuiIcon, {
         type: "dot",
-        className: "euiStepNumber__icon",
         "aria-label": isIncomplete,
         color: "subdued"
       });

package/es/global_styling/utility/animations.js

@@ -1,4 +1,4 @@
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
@@ -15,5 +15,6 @@ export var euiAnimSlideInUp = function euiAnimSlideInUp(size) {
   return keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n   0% {\n    opacity: 0;\n    transform: translateY(", ");\n  }\n\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])), size);
 };
 export var euiAnimSlideX = function euiAnimSlideX(size) {
-  return keyframes(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  0% {\n    transform: translateX(", ");\n  }\n\n  100% {\n    transform: translateX(0);\n  }\n"])), size);
-};
+  return keyframes(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  0% {\n    transform: translateX(", ");\n  }\n\n  100% {\n    transform: translateX(0);\n\n  }\n"])), size);
+};
+export var euiAnimScale = keyframes(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  0% {\n    opacity: 0;\n  }\n\n  1% {\n    opacity: 0;\n    transform: scale(0);\n  }\n\n  100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n"])));

package/eui.d.ts

@@ -1733,6 +1733,7 @@ declare module '@elastic/eui/src/global_styling/utility/animations' {
 	export const euiAnimFadeIn: import("@emotion/serialize").Keyframes;
 	export const euiAnimSlideInUp: (size: string) => import("@emotion/serialize").Keyframes;
 	export const euiAnimSlideX: (size: string) => import("@emotion/serialize").Keyframes;
+	export const euiAnimScale: import("@emotion/serialize").Keyframes;
 
 }
 declare module '@elastic/eui/src/components/skeleton/utils' {
@@ -9216,6 +9217,22 @@ declare module '@elastic/eui/src/components/card' {
 	export type { EuiCheckableCardProps } from '@elastic/eui/src/components/card/checkable_card';
 	export { EuiCheckableCard } from '@elastic/eui/src/components/card/checkable_card';
 
+}
+declare module '@elastic/eui/src/components/code/code_block_annotations.style' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiCodeBlockAnnotationsStyles: (euiTheme: UseEuiTheme['euiTheme']) => {
+	    euiCodeBlockAnnotation: import("@emotion/utils").SerializedStyles;
+	    euiCodeBlockAnnotation__buttonIcon: import("@emotion/utils").SerializedStyles;
+	};
+
+}
+declare module '@elastic/eui/src/components/code/code_block_annotations' {
+	import { FunctionComponent, ReactNode } from 'react';
+	export type LineAnnotationMap = Record<number, ReactNode>;
+	export const EuiCodeBlockAnnotation: FunctionComponent<{
+	    lineNumber: number;
+	}>;
+
 }
 declare module '@elastic/eui/src/components/code/code_block_line.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
@@ -9227,6 +9244,7 @@ declare module '@elastic/eui/src/components/code/code_block_line.styles' {
 	        isHighlighted: string;
 	    };
 	    lineNumber: {
+	        euiCodeBlock__lineNumberWrapper: string;
 	        euiCodeBlock__lineNumber: string;
 	    };
 	};
@@ -9237,6 +9255,7 @@ declare module '@elastic/eui/src/components/code/utils' {
 	import { AST, RefractorNode } from 'refractor';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { UseEuiTheme } from '@elastic/eui/src/services';
+	import { LineAnnotationMap } from '@elastic/eui/src/components/code/code_block_annotations';
 	/**
 	 * Utils shared between EuiCode and EuiCodeBlock
 	 */
@@ -9258,6 +9277,7 @@ declare module '@elastic/eui/src/components/code/utils' {
 	    start: number;
 	    show: boolean;
 	    highlight?: string;
+	    annotations?: LineAnnotationMap;
 	}
 	export const parseLineRanges: (ranges: string) => number[];
 	export const highlightByLine: (children: string, language: string, data: LineNumbersConfig, euiTheme: UseEuiTheme) => RefractorNode[];
@@ -9547,6 +9567,7 @@ declare module '@elastic/eui/src/components/code/code_block' {
 	import { FunctionComponent } from 'react';
 	import { ExclusiveUnion } from '@elastic/eui/src/components/common';
 	import { EuiCodeSharedProps } from '@elastic/eui/src/components/code/utils';
+	import { LineAnnotationMap } from '@elastic/eui/src/components/code/code_block_annotations';
 	export const FONT_SIZES: readonly ["s", "m", "l"];
 	export type EuiCodeBlockFontSize = typeof FONT_SIZES[number];
 	export const PADDING_SIZES: readonly ["none", "s", "m", "l"];
@@ -9562,6 +9583,7 @@ declare module '@elastic/eui/src/components/code/code_block' {
 	interface LineNumbersConfig {
 	    start?: number;
 	    highlight?: string;
+	    annotations?: LineAnnotationMap;
 	}
 	export type EuiCodeBlockProps = EuiCodeSharedProps & {
 	    paddingSize?: EuiCodeBlockPaddingSize;
@@ -9578,8 +9600,9 @@ declare module '@elastic/eui/src/components/code/code_block' {
 	    isCopyable?: boolean;
 	    /**
 	     * 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?: boolean | LineNumbersConfig;
 	    /**
@@ -19048,12 +19071,69 @@ declare module '@elastic/eui/src/components/steps/step_strings' {
 	export const useI18nCurrentStep: ({ number, title }: Props) => string;
 	export {};
 
+}
+declare module '@elastic/eui/src/components/steps/step.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiStepVariables: (euiTheme: UseEuiTheme['euiTheme']) => {
+	    numberSize: string;
+	    numberXSSize: string;
+	    numberMargin: string;
+	};
+	export const euiStepStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiStep: import("@emotion/utils").SerializedStyles;
+	    m: import("@emotion/utils").SerializedStyles;
+	    s: import("@emotion/utils").SerializedStyles;
+	    xs: import("@emotion/utils").SerializedStyles;
+	};
+	export const euiStepContentStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiStep__content: import("@emotion/utils").SerializedStyles;
+	    m: import("@emotion/utils").SerializedStyles;
+	    s: import("@emotion/utils").SerializedStyles;
+	    xs: import("@emotion/utils").SerializedStyles;
+	};
+	export const euiStepTitleStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiStep__titleWrapper: import("@emotion/utils").SerializedStyles;
+	    euiStep__title: import("@emotion/utils").SerializedStyles;
+	    isDisabled: import("@emotion/utils").SerializedStyles;
+	    m: import("@emotion/utils").SerializedStyles;
+	    s: import("@emotion/utils").SerializedStyles;
+	    xs: import("@emotion/utils").SerializedStyles;
+	};
+
+}
+declare module '@elastic/eui/src/components/steps/step_number.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiStepNumberStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiStepNumber: import("@emotion/utils").SerializedStyles;
+	    m: import("@emotion/utils").SerializedStyles;
+	    s: import("@emotion/utils").SerializedStyles;
+	    xs: import("@emotion/utils").SerializedStyles;
+	    incomplete: import("@emotion/utils").SerializedStyles;
+	    disabled: import("@emotion/utils").SerializedStyles;
+	    loading: import("@emotion/utils").SerializedStyles;
+	    warning: import("@emotion/utils").SerializedStyles;
+	    danger: import("@emotion/utils").SerializedStyles;
+	    complete: import("@emotion/utils").SerializedStyles;
+	    current: import("@emotion/utils").SerializedStyles;
+	};
+	export const euiStepNumberContentStyles: ({ euiTheme }: UseEuiTheme) => {
+	    euiStepNumber__icon: import("@emotion/utils").SerializedStyles;
+	    complete: import("@emotion/utils").SerializedStyles;
+	    danger: import("@emotion/utils").SerializedStyles;
+	    warning: import("@emotion/utils").SerializedStyles;
+	    euiStepNumber__number: import("@emotion/utils").SerializedStyles;
+	    incomplete: import("@emotion/utils").SerializedStyles;
+	    loading: import("@emotion/utils").SerializedStyles;
+	    disabled: import("@emotion/utils").SerializedStyles;
+	    current: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/steps/step_number' {
 	import { FunctionComponent, HTMLAttributes } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { EuiStepProps } from '@elastic/eui/src/components/steps/step';
-	export const STATUS: ("warning" | "danger" | "disabled" | "current" | "loading" | "incomplete" | "complete")[];
+	export const STATUS: readonly ["incomplete", "disabled", "loading", "warning", "danger", "complete", "current"];
 	export type EuiStepStatus = typeof STATUS[number];
 	export interface EuiStepNumberProps extends CommonProps, HTMLAttributes<HTMLDivElement> {
 	    /**
@@ -19126,6 +19206,13 @@ declare module '@elastic/eui/src/components/steps/steps' {
 	}
 	export const EuiSteps: FunctionComponent<EuiStepsProps>;
 
+}
+declare module '@elastic/eui/src/components/steps/sub_steps.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiSubStepsStyles: ({ euiTheme }: UseEuiTheme) => {
+	    euiSubSteps: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/steps/sub_steps' {
 	import { HTMLAttributes, FunctionComponent } from 'react';
@@ -19133,6 +19220,22 @@ declare module '@elastic/eui/src/components/steps/sub_steps' {
 	export type EuiSubStepsProps = FunctionComponent<HTMLAttributes<HTMLDivElement> & CommonProps>;
 	export const EuiSubSteps: EuiSubStepsProps;
 
+}
+declare module '@elastic/eui/src/components/steps/step_horizontal.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiStepHorizontalStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiStepHorizontal: import("@emotion/utils").SerializedStyles;
+	    enabled: import("@emotion/utils").SerializedStyles;
+	    disabled: import("@emotion/utils").SerializedStyles;
+	};
+	export const euiStepHorizontalNumberStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiStepHorizontal__number: import("@emotion/utils").SerializedStyles;
+	};
+	export const euiStepHorizontalTitleStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiStepHorizontal__title: import("@emotion/utils").SerializedStyles;
+	    disabled: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/steps/step_horizontal' {
 	import { ButtonHTMLAttributes, FunctionComponent, MouseEventHandler } from 'react';
@@ -19152,12 +19255,19 @@ declare module '@elastic/eui/src/components/steps/step_horizontal' {
 	    /**
 	     * Visual representation of the step number indicator.
 	     * May replace the number provided in props.step with alternate styling.
-	     * The `isSelected`, `isComplete`, and `disabled` props will override these.
+	     * The `disabled` prop will override this.
 	     */
 	    status?: EuiStepStatus;
 	}
 	export const EuiStepHorizontal: FunctionComponent<EuiStepHorizontalProps>;
 
+}
+declare module '@elastic/eui/src/components/steps/steps_horizontal.styles' {
+	export const euiStepsHorizontalStyles: () => {
+	    euiStepsHorizontal: import("@emotion/utils").SerializedStyles;
+	    euiStepsHorizontal__item: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/steps/steps_horizontal' {
 	import { FunctionComponent, OlHTMLAttributes } from 'react';
@@ -25913,6 +26023,7 @@ declare module '@elastic/eui' {
 "euiCardSelect.selected": any;
 "euiCardSelect.unavailable": any;
 "euiCardSelect.select": any;
+"euiCodeBlockAnnotations.ariaLabel": any;
 "euiCodeBlockCopy.copy": any;
 "euiCodeBlockFullScreen.fullscreenCollapse": any;
 "euiCodeBlockFullScreen.fullscreenExpand": any;