@elastic/eui 75.0.0 → 75.1.0

package/test-env/components/steps/step_number.js

@@ -19,100 +19,111 @@ var _react = _interopRequireDefault(require("react"));
 
 var _accessibility = require("../accessibility");
 
-var _common = require("../common");
-
 var _icon = require("../icon");
 
 var _step_strings = require("./step_strings");
 
 var _loading = require("../loading");
 
+var _services = require("../../services");
+
+var _step_number = require("./step_number.styles");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["className", "status", "number", "titleSize"];
-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)
-
-};
-var STATUS = (0, _common.keysOf)(statusToClassNameMap);
+var STATUS = ['incomplete', 'disabled', 'loading', 'warning', 'danger', 'complete', 'current'];
 exports.STATUS = STATUS;
 
 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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var stepAriaLabel = (0, _step_strings.useI18nStep)({
-    number: number
-  });
-  var completeAriaLabel = (0, _step_strings.useI18nCompleteStep)({
-    number: number
-  });
-  var warningAriaLabel = (0, _step_strings.useI18nWarningStep)({
-    number: number
-  });
-  var errorsAriaLabel = (0, _step_strings.useI18nErrorsStep)({
-    number: number
-  });
-  var incompleteAriaLabel = (0, _step_strings.useI18nIncompleteStep)({
-    number: number
-  });
-  var disabledAriaLabel = (0, _step_strings.useI18nDisabledStep)({
-    number: number
-  });
-  var loadingAriaLabel = (0, _step_strings.useI18nLoadingStep)({
-    number: number
-  });
-  var currentAriaLabel = (0, _step_strings.useI18nCurrentStep)({
-    number: number
-  });
-  var classes = (0, _classnames.default)('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 numberOrIcon = (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("span", null, screenReaderText)), (0, _react2.jsx)("span", {
-    className: "euiStepNumber__number",
-    "aria-hidden": "true"
-  }, number));
-
-  if (status === 'complete') {
-    numberOrIcon = (0, _react2.jsx)(_icon.EuiIcon, {
-      type: "check",
-      className: "euiStepNumber__icon",
-      size: iconSize,
-      "aria-label": completeAriaLabel
-    });
-  } else if (status === 'warning') {
-    numberOrIcon = (0, _react2.jsx)(_icon.EuiIcon, {
-      type: "alert",
-      className: "euiStepNumber__icon",
-      size: iconSize,
-      "aria-label": warningAriaLabel
-    });
-  } else if (status === 'danger') {
-    numberOrIcon = (0, _react2.jsx)(_icon.EuiIcon, {
-      type: "cross",
-      className: "euiStepNumber__icon",
-      size: iconSize,
-      "aria-label": errorsAriaLabel
-    });
-  } else if (status === 'loading') {
-    numberOrIcon = (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("span", null, screenReaderText)), (0, _react2.jsx)(_loading.EuiLoadingSpinner, {
-      className: "euiStepNumber__loader",
-      size: iconSize === 's' ? 'l' : 'xl'
-    }));
+  var ariaLabelsMap = {
+    step: (0, _step_strings.useI18nStep)({
+      number: number
+    }),
+    current: (0, _step_strings.useI18nCurrentStep)({
+      number: number
+    }),
+    incomplete: (0, _step_strings.useI18nIncompleteStep)({
+      number: number
+    }),
+    complete: (0, _step_strings.useI18nCompleteStep)({
+      number: number
+    }),
+    disabled: (0, _step_strings.useI18nDisabledStep)({
+      number: number
+    }),
+    warning: (0, _step_strings.useI18nWarningStep)({
+      number: number
+    }),
+    danger: (0, _step_strings.useI18nErrorsStep)({
+      number: number
+    }),
+    loading: (0, _step_strings.useI18nLoadingStep)({
+      number: number
+    })
+  };
+  var classes = (0, _classnames.default)('euiStepNumber', className);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _step_number.euiStepNumberStyles)(euiTheme);
+  var cssStyles = [styles.euiStepNumber, styles[titleSize], status && styles[status]];
+  var contentStyles = (0, _step_number.euiStepNumberContentStyles)(euiTheme);
+  var content;
+  var screenReaderText;
+
+  switch (status) {
+    // Loading spinner
+    case 'loading':
+      screenReaderText = ariaLabelsMap.loading;
+      content = (0, _react2.jsx)(_loading.EuiLoadingSpinner, {
+        className: "euiStepNumber__loader",
+        size: titleSize === 'xs' ? 'l' : 'xl'
+      });
+      break;
+    // Statuses with icons
+
+    case 'danger':
+    case 'warning':
+    case 'complete':
+      var cssIconStyles = [contentStyles.euiStepNumber__icon, contentStyles[status]];
+      var iconTypeMap = {
+        danger: 'cross',
+        warning: 'alert',
+        complete: 'check'
+      };
+      content = (0, _react2.jsx)(_icon.EuiIcon, {
+        type: iconTypeMap[status],
+        "aria-label": ariaLabelsMap[status],
+        size: titleSize === 'xs' ? 's' : 'm',
+        className: "euiStepNumber__icon",
+        css: cssIconStyles
+      });
+      break;
+    // Statuses with numbers
+
+    case 'incomplete':
+    case 'current':
+    case 'disabled':
+    default:
+      var cssNumberStyles = [contentStyles.euiStepNumber__number, status && contentStyles[status]];
+      screenReaderText = ariaLabelsMap[status || 'step'];
+      content = (0, _react2.jsx)("span", {
+        "aria-hidden": "true",
+        className: "euiStepNumber__number",
+        css: cssNumberStyles
+      }, number);
+      break;
   }
 
   return (0, _react2.jsx)("span", (0, _extends2.default)({
-    className: classes
-  }, rest), numberOrIcon);
+    className: classes,
+    css: cssStyles
+  }, rest), screenReaderText && (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("span", null, screenReaderText)), content);
 };
 
 exports.EuiStepNumber = EuiStepNumber;

package/test-env/components/steps/step_number.styles.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiStepNumberStyles = exports.euiStepNumberContentStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _global_styling = require("../../global_styling");
+
+var _step = require("./step.styles");
+
+var _mixins = require("../../themes/amsterdam/global_styling/mixins");
+
+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)."; }
+
+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__
+};
+
+var euiStepNumberStyles = function euiStepNumberStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var euiStep = (0, _step.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((0, _global_styling.logicalCSS)('width', size), ";\n      ").concat((0, _global_styling.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__*/(0, _react.css)(createStepsNumber(euiStep.numberSize, (0, _global_styling.euiFontSizeFromScale)('s', euiTheme)), ";;label:m;"),
+    s: /*#__PURE__*/(0, _react.css)(createStepsNumber(euiStep.numberSize, (0, _global_styling.euiFontSizeFromScale)('s', euiTheme)), ";;label:s;"),
+    xs: /*#__PURE__*/(0, _react.css)(createStepsNumber(euiStep.numberXSSize, (0, _global_styling.euiFontSizeFromScale)('xs', euiTheme)), ";;label:xs;"),
+    // status
+    incomplete: /*#__PURE__*/(0, _react.css)("background-color:transparent;color:", euiTheme.colors.text, ";border:", euiTheme.border.thick, ";;label:incomplete;"),
+    disabled: /*#__PURE__*/(0, _react.css)("color:", (0, _mixins.euiButtonFillColor)(euiThemeContext, 'disabled').color, ";background-color:", (0, _mixins.euiButtonFillColor)(euiThemeContext, 'disabled').backgroundColor, ";;label:disabled;"),
+    loading: _ref,
+    warning: /*#__PURE__*/(0, _react.css)("color:", (0, _mixins.euiButtonFillColor)(euiThemeContext, 'warning').color, ";background-color:", (0, _mixins.euiButtonFillColor)(euiThemeContext, 'warning').backgroundColor, ";", _global_styling.euiCanAnimate, "{animation:", _global_styling.euiAnimScale, " ", euiTheme.animation.fast, " ", euiTheme.animation.bounce, ";};label:warning;"),
+    danger: /*#__PURE__*/(0, _react.css)("color:", (0, _mixins.euiButtonFillColor)(euiThemeContext, 'danger').color, ";background-color:", (0, _mixins.euiButtonFillColor)(euiThemeContext, 'danger').backgroundColor, ";", _global_styling.euiCanAnimate, "{animation:", _global_styling.euiAnimScale, " ", euiTheme.animation.fast, " ", euiTheme.animation.bounce, ";};label:danger;"),
+    complete: /*#__PURE__*/(0, _react.css)("color:", (0, _mixins.euiButtonFillColor)(euiThemeContext, 'success').color, ";background-color:", (0, _mixins.euiButtonFillColor)(euiThemeContext, 'success').backgroundColor, ";", _global_styling.euiCanAnimate, "{animation:", _global_styling.euiAnimScale, " ", euiTheme.animation.fast, " ", euiTheme.animation.bounce, ";};label:complete;"),
+    current: /*#__PURE__*/(0, _react.css)(";label:current;")
+  };
+};
+
+exports.euiStepNumberStyles = euiStepNumberStyles;
+
+var euiStepNumberContentStyles = function euiStepNumberContentStyles(_ref3) {
+  var euiTheme = _ref3.euiTheme;
+  return {
+    // Statuses with icon content
+    euiStepNumber__icon: /*#__PURE__*/(0, _react.css)("vertical-align:middle;position:relative;inset-block-start:-", euiTheme.border.width.thin, ";;label:euiStepNumber__icon;"),
+    complete: /*#__PURE__*/(0, _react.css)("stroke:currentColor;stroke-width:", (0, _global_styling.mathWithUnits)(euiTheme.border.width.thin, function (x) {
+      return x / 2;
+    }), ";;label:complete;"),
+    danger: /*#__PURE__*/(0, _react.css)("stroke:currentColor;stroke-width:", (0, _global_styling.mathWithUnits)(euiTheme.border.width.thin, function (x) {
+      return x / 2;
+    }), ";;label:danger;"),
+    warning: /*#__PURE__*/(0, _react.css)("inset-block-start:-", euiTheme.border.width.thick, ";;label:warning;"),
+    // Statuses with number content
+    euiStepNumber__number: /*#__PURE__*/(0, _react.css)(";label:euiStepNumber__number;"),
+    incomplete: /*#__PURE__*/(0, _react.css)("display:unset;position:relative;inset-block-start:-", euiTheme.border.width.thick, ";;label:incomplete;"),
+    loading: /*#__PURE__*/(0, _react.css)(";label:loading;"),
+    disabled: /*#__PURE__*/(0, _react.css)(";label:disabled;"),
+    current: /*#__PURE__*/(0, _react.css)(";label:current;")
+  };
+};
+
+exports.euiStepNumberContentStyles = euiStepNumberContentStyles;

package/test-env/components/steps/steps_horizontal.js

@@ -19,6 +19,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _step_horizontal = require("./step_horizontal");
 
+var _steps_horizontal = require("./steps_horizontal.styles");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["className", "steps"];
@@ -28,16 +30,19 @@ var EuiStepsHorizontal = function EuiStepsHorizontal(_ref) {
       steps = _ref.steps,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiStepsHorizontal', className);
+  var styles = (0, _steps_horizontal.euiStepsHorizontalStyles)();
+  var cssStyles = styles.euiStepsHorizontal;
+  var cssItemStyles = styles.euiStepsHorizontal__item;
   return (0, _react2.jsx)("ol", (0, _extends2.default)({
-    className: classes
+    className: classes,
+    css: cssStyles
   }, rest), steps.map(function (stepProps, index) {
-    var isCurrent = stepProps.status === 'current' ? {
-      'aria-current': 'step'
-    } : {};
-    return (0, _react2.jsx)("li", (0, _extends2.default)({
+    return (0, _react2.jsx)("li", {
       key: index,
-      className: "euiStepHorizontal__item"
-    }, isCurrent), (0, _react2.jsx)(_step_horizontal.EuiStepHorizontal, (0, _extends2.default)({
+      className: "euiStepsHorizontal__item",
+      css: cssItemStyles,
+      "aria-current": stepProps.status === 'current' ? 'step' : undefined
+    }, (0, _react2.jsx)(_step_horizontal.EuiStepHorizontal, (0, _extends2.default)({
       step: index + 1
     }, stepProps)));
   }));

package/test-env/components/steps/steps_horizontal.styles.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiStepsHorizontalStyles = void 0;
+
+var _react = require("@emotion/react");
+
+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)."; }
+
+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__
+};
+
+//  1. Make each step the same width
+var euiStepsHorizontalStyles = function euiStepsHorizontalStyles() {
+  return {
+    euiStepsHorizontal: _ref2,
+    euiStepsHorizontal__item: _ref
+  };
+};
+
+exports.euiStepsHorizontalStyles = euiStepsHorizontalStyles;

package/test-env/components/steps/sub_steps.js

@@ -17,6 +17,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _services = require("../../services");
+
+var _sub_steps = require("./sub_steps.styles");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["children", "className"];
@@ -26,8 +30,12 @@ var EuiSubSteps = function EuiSubSteps(_ref) {
       className = _ref.className,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiSubSteps', className);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _sub_steps.euiSubStepsStyles)(euiTheme);
+  var cssStyles = [styles.euiSubSteps];
   return (0, _react2.jsx)("div", (0, _extends2.default)({
-    className: classes
+    className: classes,
+    css: cssStyles
   }, rest), children);
 };
 

package/test-env/components/steps/sub_steps.styles.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiSubStepsStyles = void 0;
+
+var _react = require("@emotion/react");
+
+/*
+ * 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 euiSubStepsStyles = function euiSubStepsStyles(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return {
+    euiSubSteps: /*#__PURE__*/(0, _react.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;")
+  };
+};
+
+exports.euiSubStepsStyles = euiSubStepsStyles;

package/test-env/components/tour/tour_step_indicator.js

@@ -51,7 +51,6 @@ var EuiTourStepIndicator = function EuiTourStepIndicator(_ref2) {
     }, function (isActive) {
       return (0, _react2.jsx)(_icon.EuiIcon, {
         type: "dot",
-        className: "euiStepNumber__icon",
         "aria-label": isActive,
         color: "success",
         "aria-current": "step"
@@ -64,7 +63,6 @@ var EuiTourStepIndicator = function EuiTourStepIndicator(_ref2) {
     }, function (isComplete) {
       return (0, _react2.jsx)(_icon.EuiIcon, {
         type: "dot",
-        className: "euiStepNumber__icon",
         "aria-label": isComplete,
         color: "subdued"
       });
@@ -76,7 +74,6 @@ var EuiTourStepIndicator = function EuiTourStepIndicator(_ref2) {
     }, function (isIncomplete) {
       return (0, _react2.jsx)(_icon.EuiIcon, {
         type: "dot",
-        className: "euiStepNumber__icon",
         "aria-label": isIncomplete,
         color: "subdued"
       });

package/test-env/global_styling/utility/animations.js

@@ -5,13 +5,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiAnimSlideX = exports.euiAnimSlideInUp = exports.euiAnimFadeIn = void 0;
+exports.euiAnimSlideX = exports.euiAnimSlideInUp = exports.euiAnimScale = exports.euiAnimFadeIn = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _react = require("@emotion/react");
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 var euiAnimFadeIn = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 1;\n  }\n"])));
 exports.euiAnimFadeIn = euiAnimFadeIn;
@@ -23,7 +23,9 @@ var euiAnimSlideInUp = function euiAnimSlideInUp(size) {
 exports.euiAnimSlideInUp = euiAnimSlideInUp;
 
 var euiAnimSlideX = function euiAnimSlideX(size) {
-  return (0, _react.keyframes)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    transform: translateX(", ");\n  }\n\n  100% {\n    transform: translateX(0);\n  }\n"])), size);
+  return (0, _react.keyframes)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    transform: translateX(", ");\n  }\n\n  100% {\n    transform: translateX(0);\n\n  }\n"])), size);
 };
 
-exports.euiAnimSlideX = euiAnimSlideX;
+exports.euiAnimSlideX = euiAnimSlideX;
+var euiAnimScale = (0, _react.keyframes)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\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"])));
+exports.euiAnimScale = euiAnimScale;

package/src/components/steps/_index.scss

@@ -1,7 +0,0 @@
-@import 'variables';
-@import 'mixins';
-
-@import 'step_number';
-@import 'steps';
-@import 'sub_steps';
-@import 'steps_horizontal';

package/src/components/steps/_mixins.scss

@@ -1,12 +0,0 @@
-@mixin createStepsNumber($size: $euiStepNumberSize, $fontSize: $euiFontSize) {
-  @include size($size);
-
-  display: inline-block;
-  line-height: $size;
-  border-radius: $size;
-  text-align: center;
-  color: $euiColorEmptyShade;
-  background-color: $euiColorPrimary;
-  font-size: $fontSize;
-  font-weight: $euiFontWeightMedium;
-}

package/src/components/steps/_step_number.scss

@@ -1,52 +0,0 @@
-.euiStepNumber {
-  @include createStepsNumber;
-
-  .euiStepNumber__icon {
-    vertical-align: middle;
-    position: relative;
-    top: -2px;
-  }
-
-  &--small {
-    @include createStepsNumber($euiStepNumberSmallSize, $euiFontSizeXS);
-
-    .euiStepNumber__icon {
-      top: -1px;
-    }
-  }
-
-  &--complete {
-    // Thicken the checkmark by adding a slight stroke.
-    .euiStepNumber__icon {
-      stroke: currentColor;
-      stroke-width: .5px;
-    }
-  }
-
-  @include euiCanAnimate {
-    &--complete,
-    &--warning,
-    &--danger {
-      animation: euiGrow $euiAnimSpeedFast $euiAnimSlightBounce;
-    }
-  }
-
-  &--loading {
-    background: transparent;
-  }
-
-  // Create modifiers based upon the map
-  @each $name, $color in $euiStepStatusColorsToFade {
-    &--#{$name} {
-      $backgroundColor: $color;
-      @if (saturation($color) > 0%) {
-        $backgroundColor: tintOrShade($color, 90%, 70%);
-      }
-
-      $textColor: makeHighContrastColor($color, $backgroundColor);
-
-      color: $textColor;
-      background-color: $backgroundColor;
-    }
-  }
-}

package/src/components/steps/_steps.scss

@@ -1,57 +0,0 @@
-/**
- * 1. Ensure that the step number vertically aligns with the title text
- */
-
-.euiStep {
-  // Create border on all but the last step
-  &:not(:last-of-type) {
-    // stylelint-disable indentation
-    background-image: linear-gradient(
-                        to right,
-                        transparent 0,
-                        transparent ($euiSize - 1),
-                        $euiBorderColor ($euiSize - 1),
-                        $euiBorderColor ($euiSize + 1),
-                        transparent ($euiSize + 1),
-                        transparent 100%
-                      );
-    // stylelint-enable indentation
-    background-repeat: no-repeat;
-    background-position: left $euiSizeXXL;
-  }
-
-  &--small {
-    &:not(:last-of-type) {
-      background-position: left -#{$euiSizeXS} top $euiSizeXL;
-    }
-
-    .euiStep__content {
-      // Align the content's contents with the title
-      padding-left: ($euiStepNumberSmallSize / 2) + $euiStepNumberMargin;
-
-      // Align content border to horizontal center of step number
-      margin-left: ($euiStepNumberSmallSize / 2);
-    }
-  }
-}
-
-.euiStep__titleWrapper {
-  display: flex;
-}
-
-.euiStep__circle {
-  flex-shrink: 0;
-  margin-right: $euiStepNumberMargin;
-  vertical-align: top; /* 1 */
-}
-
-.euiStep__content {
-  padding: $euiSize $euiSize $euiSizeXL;
-  margin: $euiSizeS 0;
-
-  // Align the content's contents with the title
-  padding-left: ($euiStepNumberSize / 2) + $euiStepNumberMargin;
-
-  // Align content border to horizontal center of step number
-  margin-left: ($euiStepNumberSize / 2);
-}