@alfalab/core-components-steps 1.7.5 → 1.8.0

package/Component.d.ts

@@ -1,16 +1,12 @@
 /// <reference types="react" />
 import React from 'react';
-import { ReactNode } from "react";
 import { StepIndicatorProps } from "./components/step-indicator/index";
+import { CommonProps } from "./types/common-props";
 type StepsProps = {
     /**
      * Дополнительный класс
      */
     className?: string;
-    /**
-     * Дочерние элементы
-     */
-    children: ReactNode;
     /**
      * Активный шаг, указанный по умолчанию
      * @default 1
@@ -25,29 +21,6 @@ type StepsProps = {
      * @default true
      */
     isMarkCompletedSteps?: boolean;
-    /**
-     * Управление ориентацией компонента
-     * @default false
-     */
-    isVerticalAlign?: boolean;
-    /**
-     * Управление отображением номера шага
-     */
-    ordered?: boolean;
-    /**
-     * Включение / отключение интерактивности шагов
-     */
-    interactive?: boolean;
-    /**
-     * Растягивание шагов на всю ширину блока для вертикальной ориентации
-     * @default false
-     */
-    fullWidth?: boolean;
-    /**
-     * Минимальное расстояние между шагами
-     * @default 24
-     */
-    minSpaceBetweenSteps?: 8 | 16 | 24;
     /**
      * Кастомный метод для управления состоянием disabled шага и
      * возможностью перехода на этот шаг
@@ -61,6 +34,12 @@ type StepsProps = {
      * @return Флаг состояния error
      */
     checkIsStepError?: (stepNumber: number) => boolean;
+    /**
+     * Кастомный метод для управления состоянием шага criticalError
+     * @param stepNumber - номер шага
+     * @return Флаг состояния error
+     */
+    checkIsStepCriticalError?: (stepNumber: number) => boolean;
     /**
      * Кастомный метод для управления состоянием шага warning
      * @param stepNumber - номер шага
@@ -90,10 +69,6 @@ type StepsProps = {
      * @param stepNumber - номер активного шага
      */
     onChange?: (stepNumber: number) => void;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-};
+} & CommonProps;
 declare const Steps: React.FC<StepsProps>;
 export { StepsProps, Steps };

package/Component.js

@@ -11,12 +11,12 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"steps__component_eyi6g","vertical":"steps__vertical_eyi6g"};
+var styles = {"component":"steps__component_4vqw7","vertical":"steps__vertical_4vqw7"};
 require('./index.css')
 
 var Steps = function (_a) {
     var _b;
-    var className = _a.className, children = _a.children, _c = _a.defaultActiveStep, defaultActiveStep = _c === void 0 ? 1 : _c, activeStepProp = _a.activeStep, _d = _a.isMarkCompletedSteps, isMarkCompletedSteps = _d === void 0 ? true : _d, _e = _a.isVerticalAlign, isVerticalAlign = _e === void 0 ? false : _e, _f = _a.ordered, ordered = _f === void 0 ? true : _f, _g = _a.interactive, interactive = _g === void 0 ? true : _g, _h = _a.fullWidth, fullWidth = _h === void 0 ? false : _h, _j = _a.minSpaceBetweenSteps, minSpaceBetweenSteps = _j === void 0 ? 24 : _j, checkIsStepDisabled = _a.checkIsStepDisabled, checkIsStepError = _a.checkIsStepError, checkIsStepWarning = _a.checkIsStepWarning, checkIsStepWaiting = _a.checkIsStepWaiting, checkIsStepPositive = _a.checkIsStepPositive, checkIsStepCustom = _a.checkIsStepCustom, onChange = _a.onChange, dataTestId = _a.dataTestId;
+    var className = _a.className, children = _a.children, _c = _a.defaultActiveStep, defaultActiveStep = _c === void 0 ? 1 : _c, activeStepProp = _a.activeStep, _d = _a.isMarkCompletedSteps, isMarkCompletedSteps = _d === void 0 ? true : _d, _e = _a.isVerticalAlign, isVerticalAlign = _e === void 0 ? false : _e, _f = _a.ordered, ordered = _f === void 0 ? true : _f, _g = _a.interactive, interactive = _g === void 0 ? true : _g, _h = _a.fullWidth, fullWidth = _h === void 0 ? false : _h, _j = _a.minSpaceBetweenSteps, minSpaceBetweenSteps = _j === void 0 ? 24 : _j, checkIsStepDisabled = _a.checkIsStepDisabled, checkIsStepError = _a.checkIsStepError, checkIsStepCriticalError = _a.checkIsStepCriticalError, checkIsStepWarning = _a.checkIsStepWarning, checkIsStepWaiting = _a.checkIsStepWaiting, checkIsStepPositive = _a.checkIsStepPositive, checkIsStepCustom = _a.checkIsStepCustom, onChange = _a.onChange, dataTestId = _a.dataTestId, completedDashColor = _a.completedDashColor;
     var uncontrolled = activeStepProp === undefined;
     var _k = React.useState(defaultActiveStep), activeStep = _k[0], setActiveStep = _k[1];
     var stepsLength = React__default.default.Children.count(children);
@@ -40,12 +40,15 @@ var Steps = function (_a) {
         var disabled = checkIsStepDisabled ? checkIsStepDisabled(stepNumber) : false;
         var isPositive = checkIsStepPositive ? checkIsStepPositive(stepNumber) : false;
         var isError = checkIsStepError ? checkIsStepError(stepNumber) : false;
+        var isCriticalError = checkIsStepCriticalError
+            ? checkIsStepCriticalError(stepNumber)
+            : false;
         var isWarning = checkIsStepWarning ? checkIsStepWarning(stepNumber) : false;
         var isWaiting = checkIsStepWaiting ? checkIsStepWaiting(stepNumber) : false;
         var customStepIndicator = checkIsStepCustom && checkIsStepCustom(stepNumber);
         var isNotLastStep = stepsLength !== stepNumber;
         var isInteractive = !disabled && interactive;
-        return (React__default.default.createElement(components_step_Component.Step, { stepNumber: stepNumber, isSelected: isSelected, isStepCompleted: isStepCompleted, disabled: disabled, isPositive: isPositive, isError: isError, isWarning: isWarning, isWaiting: isWaiting, customStepIndicator: customStepIndicator, onClick: handleStepClick, ordered: ordered, interactive: isInteractive, isVerticalAlign: isVerticalAlign, isNotLastStep: isNotLastStep, key: stepNumber, fullWidth: fullWidth, minSpaceBetweenSteps: minSpaceBetweenSteps }, step));
+        return (React__default.default.createElement(components_step_Component.Step, { stepNumber: stepNumber, isSelected: isSelected, isStepCompleted: isStepCompleted, disabled: disabled, isPositive: isPositive, isError: isError, isCriticalError: isCriticalError, isWarning: isWarning, isWaiting: isWaiting, customStepIndicator: customStepIndicator, onClick: handleStepClick, ordered: ordered, interactive: isInteractive, isVerticalAlign: isVerticalAlign, isNotLastStep: isNotLastStep, key: stepNumber, fullWidth: fullWidth, minSpaceBetweenSteps: minSpaceBetweenSteps, completedDashColor: completedDashColor, dataTestId: dataTestId }, step));
     })));
 };
 

package/components/step/Component.d.ts

@@ -1,12 +1,7 @@
-/// <reference types="react" />
-import React from 'react';
-import { ReactNode } from "react";
+import { FC } from 'react';
+import { CommonProps } from "../../types/common-props";
 import { StepIndicatorProps } from "../step-indicator/index";
 type StepProps = {
-    /**
-     * Название шага
-     */
-    children: ReactNode;
     /**
      * Номер шага
      */
@@ -19,14 +14,6 @@ type StepProps = {
      * Маркер того, что текущий шаг доступен для клика
      */
     disabled: boolean;
-    /**
-     * Управление отображением номера шага
-     */
-    ordered?: boolean;
-    /**
-     * Включение / отключение интерактивности шагов
-     */
-    interactive?: boolean;
     /**
      * Маркер того, что текущий шаг находится в состоянии "Positive"
      */
@@ -35,6 +22,10 @@ type StepProps = {
      * Маркер того, что текущий шаг находится в состоянии "Error"
      */
     isError: boolean;
+    /**
+     * Маркер того, что текущий шаг находится в состоянии "isCriticalError"
+     */
+    isCriticalError: boolean;
     /**
      * Маркер того, что текущий шаг находится в состоянии "Warning"
      */
@@ -51,30 +42,15 @@ type StepProps = {
      * Свойства кастомного индикатора текущего шага
      */
     customStepIndicator?: StepIndicatorProps | null;
-    /**
-     * Управление ориентацией компонента
-     * @default false
-     */
-    isVerticalAlign?: boolean;
     /**
      * Указывает, является ли текущий шаг последним в списке
      */
     isNotLastStep?: boolean;
-    /**
-     * Маркер того, что шаг растягивается на всю ширину блока
-     * для вертикальной ориентации
-     */
-    fullWidth?: boolean;
-    /**
-     * Минимальное расстояние между шагами
-     * @default 24
-     */
-    minSpaceBetweenSteps?: 8 | 16 | 24;
     /**
      * Обработчик нажатия на текущей шаг
      * @param stepNumber - номер шага
      */
     onClick: (stepNumber: number) => void;
-};
-declare const Step: React.FC<StepProps>;
-export { StepProps, Step };
+} & CommonProps;
+declare const Step: FC<StepProps>;
+export { Step };

package/components/step/Component.js

@@ -5,9 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
+var coreComponentsShared = require('@alfalab/core-components-shared');
 var hooks = require('@alfalab/hooks');
 var CheckmarkCircleMIcon = require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
 var ClockMIcon = require('@alfalab/icons-glyph/ClockMIcon');
+var CrossCompactMIcon = require('@alfalab/icons-glyph/CrossCompactMIcon');
 var ExclamationCircleMIcon = require('@alfalab/icons-glyph/ExclamationCircleMIcon');
 var components_stepIndicator_Component = require('../step-indicator/Component.js');
 
@@ -16,17 +18,12 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"step":"steps__step_13yrt","vertical":"steps__vertical_13yrt","interactive":"steps__interactive_13yrt","disabled":"steps__disabled_13yrt","text":"steps__text_13yrt","indicator":"steps__indicator_13yrt","option":"steps__option_13yrt","dash":"steps__dash_13yrt","size-16":"steps__size-16_13yrt","size-8":"steps__size-8_13yrt","completed":"steps__completed_13yrt","focused":"steps__focused_13yrt","selected":"steps__selected_13yrt","checkbox":"steps__checkbox_13yrt","dot":"steps__dot_13yrt","error":"steps__error_13yrt","unordered":"steps__unordered_13yrt","completedIndicator":"steps__completedIndicator_13yrt","fullWidth":"steps__fullWidth_13yrt"};
+var styles = {"step":"steps__step_1aema","horizontal":"steps__horizontal_1aema","vertical":"steps__vertical_1aema","interactive":"steps__interactive_1aema","disabled":"steps__disabled_1aema","text":"steps__text_1aema","indicator":"steps__indicator_1aema","option":"steps__option_1aema","dash":"steps__dash_1aema","completed":"steps__completed_1aema","textWrapper":"steps__textWrapper_1aema","gap-24":"steps__gap-24_1aema","gap-32":"steps__gap-32_1aema","focused":"steps__focused_1aema","selected":"steps__selected_1aema","checkbox":"steps__checkbox_1aema","dot":"steps__dot_1aema","error":"steps__error_1aema","unordered":"steps__unordered_1aema","completedIndicator":"steps__completedIndicator_1aema","fullWidth":"steps__fullWidth_1aema"};
 require('./index.css')
 
-var SIZE_TO_CLASSNAME_MAP = {
-    8: 'size-8',
-    16: 'size-16',
-    24: 'size-24',
-};
 var Step = function (_a) {
-    var _b, _c, _d, _e;
-    var children = _a.children, stepNumber = _a.stepNumber, isSelected = _a.isSelected, disabled = _a.disabled, ordered = _a.ordered, isPositive = _a.isPositive, isError = _a.isError, isWarning = _a.isWarning, isWaiting = _a.isWaiting, customStepIndicator = _a.customStepIndicator, isStepCompleted = _a.isStepCompleted, onClick = _a.onClick, interactive = _a.interactive, isVerticalAlign = _a.isVerticalAlign, isNotLastStep = _a.isNotLastStep, fullWidth = _a.fullWidth, _f = _a.minSpaceBetweenSteps, minSpaceBetweenSteps = _f === void 0 ? 24 : _f;
+    var _b, _c, _d, _e, _f;
+    var children = _a.children, stepNumber = _a.stepNumber, isSelected = _a.isSelected, disabled = _a.disabled, ordered = _a.ordered, isPositive = _a.isPositive, isError = _a.isError, isCriticalError = _a.isCriticalError, isWarning = _a.isWarning, isWaiting = _a.isWaiting, customStepIndicator = _a.customStepIndicator, isStepCompleted = _a.isStepCompleted, onClick = _a.onClick, interactive = _a.interactive, isVerticalAlign = _a.isVerticalAlign, isNotLastStep = _a.isNotLastStep, fullWidth = _a.fullWidth, _g = _a.minSpaceBetweenSteps, minSpaceBetweenSteps = _g === void 0 ? 24 : _g, completedDashColor = _a.completedDashColor, dataTestId = _a.dataTestId;
     var stepRef = React.useRef(null);
     var focused = hooks.useFocus(stepRef, 'keyboard')[0];
     var handleButtonClick = function () {
@@ -48,6 +45,9 @@ var Step = function (_a) {
         if (customStepIndicator) {
             return React__default.default.createElement(components_stepIndicator_Component.StepIndicator, tslib.__assign({}, customStepIndicator));
         }
+        if (isCriticalError) {
+            return React__default.default.createElement(components_stepIndicator_Component.StepIndicator, { iconColor: 'negative', content: React__default.default.createElement(CrossCompactMIcon.CrossCompactMIcon, null) });
+        }
         if (isError) {
             return React__default.default.createElement(components_stepIndicator_Component.StepIndicator, { iconColor: 'negative', content: React__default.default.createElement(ExclamationCircleMIcon.ExclamationCircleMIcon, null) });
         }
@@ -69,14 +69,22 @@ var Step = function (_a) {
         }
         return stepNumber;
     };
+    var getCustomDashColor = function () {
+        if (isStepCompleted && completedDashColor) {
+            return {
+                borderColor: completedDashColor,
+            };
+        }
+        return {};
+    };
     var renderDash = function () {
         var _a;
         return (React__default.default.createElement("div", { className: cn__default.default(styles.dash, (_a = {},
                 _a[styles.vertical] = isVerticalAlign,
                 _a[styles.completed] = isStepCompleted,
-                _a), styles[SIZE_TO_CLASSNAME_MAP[minSpaceBetweenSteps]]) }));
+                _a)), style: tslib.__assign({}, getCustomDashColor()) }));
     };
-    return (React__default.default.createElement("div", { role: 'button', tabIndex: 0, ref: stepRef, className: cn__default.default(styles.step, (_b = {},
+    return (React__default.default.createElement("div", { "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'step'), role: 'button', tabIndex: 0, ref: stepRef, className: cn__default.default(styles.step, (_b = {},
             _b[styles.completed] = isStepCompleted,
             _b[styles.error] = isError,
             _b[styles.selected] = isSelected,
@@ -85,6 +93,7 @@ var Step = function (_a) {
             _b[styles.vertical] = isVerticalAlign,
             _b[styles.interactive] = interactive,
             _b[styles.fullWidth] = fullWidth && isVerticalAlign,
+            _b[styles.horizontal] = !isVerticalAlign,
             _b)), onClick: handleButtonClick, onKeyDown: handleKeyDown },
         React__default.default.createElement("div", { className: cn__default.default(styles.indicator, (_c = {},
                 _c[styles.vertical] = isVerticalAlign,
@@ -96,10 +105,13 @@ var Step = function (_a) {
                     _d[styles.error] = isError,
                     _d)) }, getStepIndicator()),
             isNotLastStep && isVerticalAlign && renderDash()),
-        React__default.default.createElement("div", { className: cn__default.default(styles.text, (_e = {},
-                _e[styles.interactive] = interactive,
-                _e[styles.fullWidth] = fullWidth && isVerticalAlign,
-                _e)), onClick: handleTextClick }, children),
+        React__default.default.createElement("div", { className: cn__default.default(styles.textWrapper, styles["gap-".concat(minSpaceBetweenSteps)], (_e = {},
+                _e[styles.vertical] = isVerticalAlign,
+                _e)) },
+            React__default.default.createElement("div", { className: cn__default.default(styles.text, (_f = {},
+                    _f[styles.interactive] = interactive,
+                    _f[styles.fullWidth] = fullWidth && isVerticalAlign,
+                    _f)), onClick: handleTextClick }, children)),
         isNotLastStep && !isVerticalAlign && renderDash()));
 };
 

package/components/step/index.css

@@ -1,4 +1,4 @@
-/* hash: 19qpt */
+/* hash: uhdkm */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
@@ -25,39 +25,46 @@
 } :root {
     --gap-3xs: 2px; /* deprecated */
     --gap-2xs: 4px; /* deprecated */
-    --gap-xs: 8px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+    --gap-xs: 8px; /* deprecated */ /* deprecated */ /* deprecated */
+    --gap-m: 16px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 
     /* новые значения, используйте их */
-    --gap-0: 0;
+
+    /* no-unit может приводить к проблемам в calc (#1559) */
+    /* stylelint-disable-next-line length-zero-no-unit */
+    --gap-0: 0px;
     --gap-2: var(--gap-3xs);
     --gap-4: var(--gap-2xs);
     --gap-8: var(--gap-xs);
+    --gap-16: var(--gap-m);
 } :root {
 } :root {
     --focus-color: var(--color-light-status-info);
 } /* сбрасывает синюю подсветку при нажатии */ :root {
     --steps-option-svg-color: var(--color-light-status-positive);
     --steps-dash-border: 2px solid var(--color-light-status-positive);
-} .steps__step_13yrt {
+} .steps__step_1aema {
     display: flex;
     outline: none
-} .steps__step_13yrt:not(.steps__vertical_13yrt) {
+} .steps__step_1aema.steps__horizontal_1aema {
+        flex-grow: 1;
+    } .steps__step_1aema:not(.steps__vertical_1aema) {
         align-items: center;
-    } .steps__step_13yrt.steps__interactive_13yrt:not(.steps__disabled_13yrt):hover {
+    } .steps__step_1aema.steps__interactive_1aema:not(.steps__disabled_1aema):hover {
     cursor: pointer;
-} .steps__step_13yrt.steps__disabled_13yrt:hover .steps__text_13yrt {
+} .steps__step_1aema.steps__disabled_1aema:hover .steps__text_1aema {
         background: unset;
-    } .steps__step_13yrt.steps__disabled_13yrt .steps__indicator_13yrt {
+    } .steps__step_1aema.steps__disabled_1aema .steps__indicator_1aema {
         cursor: unset;
-    } .steps__indicator_13yrt {
+    } .steps__indicator_1aema {
     cursor: pointer;
     display: flex;
     align-items: center;
     margin-right: var(--gap-4)
-} .steps__indicator_13yrt.steps__vertical_13yrt {
+} .steps__indicator_1aema.steps__vertical_1aema {
         flex-direction: column;
         margin-right: var(--gap-8);
-    } .steps__option_13yrt {
+    } .steps__option_1aema {
     font-size: 14px;
     line-height: 20px;
     font-weight: 700;
@@ -70,33 +77,31 @@
     min-width: 24px;
     height: 24px;
     border-radius: var(--border-radius-circle)
-} .steps__option_13yrt.steps__vertical_13yrt {
+} .steps__option_1aema.steps__vertical_1aema {
         margin-top: var(--gap-8);
-    } .steps__dash_13yrt {
+    } .steps__dash_1aema {
     flex: 1 1 auto;
     min-width: 24px;
     border-top: 2px solid var(--color-light-neutral-translucent-300);
     margin-right: var(--gap-8)
-} .steps__dash_13yrt.steps__size-16_13yrt {
-        min-width: 16px;
-    } .steps__dash_13yrt.steps__size-8_13yrt {
-        min-width: 8px;
-    } .steps__dash_13yrt.steps__completed_13yrt {
+} .steps__dash_1aema.steps__completed_1aema {
         border-top: var(--steps-dash-border);
-    } .steps__dash_13yrt.steps__vertical_13yrt {
+    } .steps__dash_1aema.steps__vertical_1aema {
         min-width: unset;
-        min-height: 24px;
+        min-height: 8px;
         margin-right: var(--gap-0);
         margin-top: var(--gap-8);
         border-left: 2px solid var(--color-light-neutral-translucent-300);
-        border-top: none
-    } .steps__dash_13yrt.steps__vertical_13yrt.steps__size-16_13yrt {
-            min-height: 16px;
-        } .steps__dash_13yrt.steps__vertical_13yrt.steps__size-8_13yrt {
-            min-height: 8px;
-        } .steps__dash_13yrt.steps__completed_13yrt.steps__vertical_13yrt {
+        border-top: none;
+    } .steps__dash_1aema.steps__completed_1aema.steps__vertical_1aema {
         border-left: var(--steps-dash-border);
-    } .steps__text_13yrt {
+    } .steps__textWrapper_1aema.steps__vertical_1aema {
+        min-height: 48px
+    } .steps__textWrapper_1aema.steps__vertical_1aema.steps__gap-24_1aema {
+            margin-bottom: var(--gap-8);
+        } .steps__textWrapper_1aema.steps__vertical_1aema.steps__gap-32_1aema {
+            margin-bottom: var(--gap-16);
+        } .steps__text_1aema {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
@@ -106,19 +111,19 @@
     color: var(--color-light-text-primary);
     border-radius: var(--gap-8);
     height: min-content
-} .steps__text_13yrt.steps__interactive_13yrt:not(.steps__disabled_13yrt):hover {
+} .steps__text_1aema.steps__interactive_1aema:not(.steps__disabled_1aema):hover {
             background: var(--color-light-transparent-default-hover);
-        } .steps__text_13yrt.steps__interactive_13yrt:not(.steps__disabled_13yrt):active {
+        } .steps__text_1aema.steps__interactive_1aema:not(.steps__disabled_1aema):active {
             background: var(--color-light-transparent-default-press);
-        } .steps__focused_13yrt {
+        } .steps__focused_1aema {
     outline: var(--gap-2) solid var(--focus-color);
     outline-offset: var(--gap-2);
-} .steps__selected_13yrt .steps__text_13yrt {
+} .steps__selected_1aema .steps__text_1aema {
         color: var(--color-light-text-primary);
-    } .steps__selected_13yrt .steps__option_13yrt {
+    } .steps__selected_1aema .steps__option_1aema {
         color: var(--color-light-text-primary-inverted);
         background: var(--color-light-neutral-translucent-1300);
-    } .steps__checkbox_13yrt {
+    } .steps__checkbox_1aema {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -126,20 +131,20 @@
     width: 20px;
     height: 20px;
     border: 2px solid var(--color-light-neutral-translucent-300);
-} .steps__dot_13yrt {
+} .steps__dot_1aema {
     width: 10px;
     height: 10px;
     border-radius: var(--border-radius-circle);
     background: var(--color-light-neutral-translucent-300);
-} .steps__selected_13yrt .steps__checkbox_13yrt {
+} .steps__selected_1aema .steps__checkbox_1aema {
     border: 2px solid var(--color-light-neutral-translucent-1300)
-} .steps__selected_13yrt .steps__checkbox_13yrt .steps__dot_13yrt {
+} .steps__selected_1aema .steps__checkbox_1aema .steps__dot_1aema {
         background: var(--color-light-neutral-translucent-1300);
-    } .steps__option_13yrt:not(.steps__error_13yrt).steps__unordered_13yrt {
+    } .steps__option_1aema:not(.steps__error_1aema).steps__unordered_1aema {
     background: unset;
-} .steps__completedIndicator_13yrt > [class*='positive'] {
+} .steps__completedIndicator_1aema > [class*='positive'] {
     color: var(--steps-option-svg-color);
     background-color: var(--steps-option-svg-color);
-} .steps__fullWidth_13yrt {
+} .steps__fullWidth_1aema {
     width: 100%;
 }

package/components/step-indicator/Component.js

@@ -11,7 +11,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"steps__component_1ct8i"};
+var styles = {"component":"steps__component_1rt27"};
 require('./index.css')
 
 var StepIndicator = function (_a) {

package/components/step-indicator/index.css

@@ -1,4 +1,4 @@
-/* hash: 1jm63 */
+/* hash: 14ctu */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -16,9 +16,12 @@
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 
     /* новые значения, используйте их */
-    --gap-0: 0;
+
+    /* no-unit может приводить к проблемам в calc (#1559) */
+    /* stylelint-disable-next-line length-zero-no-unit */
+    --gap-0: 0px;
 } :root {
 } :root {
-} /* сбрасывает синюю подсветку при нажатии */ .steps__component_1ct8i.steps__component_1ct8i {
+} /* сбрасывает синюю подсветку при нажатии */ .steps__component_1rt27.steps__component_1rt27 {
     padding: var(--gap-0);
 }

package/cssm/Component.d.ts

@@ -1,16 +1,12 @@
 /// <reference types="react" />
 import React from 'react';
-import { ReactNode } from "react";
 import { StepIndicatorProps } from "./components/step-indicator/index";
+import { CommonProps } from "./types/common-props";
 type StepsProps = {
     /**
      * Дополнительный класс
      */
     className?: string;
-    /**
-     * Дочерние элементы
-     */
-    children: ReactNode;
     /**
      * Активный шаг, указанный по умолчанию
      * @default 1
@@ -25,29 +21,6 @@ type StepsProps = {
      * @default true
      */
     isMarkCompletedSteps?: boolean;
-    /**
-     * Управление ориентацией компонента
-     * @default false
-     */
-    isVerticalAlign?: boolean;
-    /**
-     * Управление отображением номера шага
-     */
-    ordered?: boolean;
-    /**
-     * Включение / отключение интерактивности шагов
-     */
-    interactive?: boolean;
-    /**
-     * Растягивание шагов на всю ширину блока для вертикальной ориентации
-     * @default false
-     */
-    fullWidth?: boolean;
-    /**
-     * Минимальное расстояние между шагами
-     * @default 24
-     */
-    minSpaceBetweenSteps?: 8 | 16 | 24;
     /**
      * Кастомный метод для управления состоянием disabled шага и
      * возможностью перехода на этот шаг
@@ -61,6 +34,12 @@ type StepsProps = {
      * @return Флаг состояния error
      */
     checkIsStepError?: (stepNumber: number) => boolean;
+    /**
+     * Кастомный метод для управления состоянием шага criticalError
+     * @param stepNumber - номер шага
+     * @return Флаг состояния error
+     */
+    checkIsStepCriticalError?: (stepNumber: number) => boolean;
     /**
      * Кастомный метод для управления состоянием шага warning
      * @param stepNumber - номер шага
@@ -90,10 +69,6 @@ type StepsProps = {
      * @param stepNumber - номер активного шага
      */
     onChange?: (stepNumber: number) => void;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-};
+} & CommonProps;
 declare const Steps: React.FC<StepsProps>;
 export { StepsProps, Steps };

package/cssm/Component.js

@@ -15,7 +15,7 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 var Steps = function (_a) {
     var _b;
-    var className = _a.className, children = _a.children, _c = _a.defaultActiveStep, defaultActiveStep = _c === void 0 ? 1 : _c, activeStepProp = _a.activeStep, _d = _a.isMarkCompletedSteps, isMarkCompletedSteps = _d === void 0 ? true : _d, _e = _a.isVerticalAlign, isVerticalAlign = _e === void 0 ? false : _e, _f = _a.ordered, ordered = _f === void 0 ? true : _f, _g = _a.interactive, interactive = _g === void 0 ? true : _g, _h = _a.fullWidth, fullWidth = _h === void 0 ? false : _h, _j = _a.minSpaceBetweenSteps, minSpaceBetweenSteps = _j === void 0 ? 24 : _j, checkIsStepDisabled = _a.checkIsStepDisabled, checkIsStepError = _a.checkIsStepError, checkIsStepWarning = _a.checkIsStepWarning, checkIsStepWaiting = _a.checkIsStepWaiting, checkIsStepPositive = _a.checkIsStepPositive, checkIsStepCustom = _a.checkIsStepCustom, onChange = _a.onChange, dataTestId = _a.dataTestId;
+    var className = _a.className, children = _a.children, _c = _a.defaultActiveStep, defaultActiveStep = _c === void 0 ? 1 : _c, activeStepProp = _a.activeStep, _d = _a.isMarkCompletedSteps, isMarkCompletedSteps = _d === void 0 ? true : _d, _e = _a.isVerticalAlign, isVerticalAlign = _e === void 0 ? false : _e, _f = _a.ordered, ordered = _f === void 0 ? true : _f, _g = _a.interactive, interactive = _g === void 0 ? true : _g, _h = _a.fullWidth, fullWidth = _h === void 0 ? false : _h, _j = _a.minSpaceBetweenSteps, minSpaceBetweenSteps = _j === void 0 ? 24 : _j, checkIsStepDisabled = _a.checkIsStepDisabled, checkIsStepError = _a.checkIsStepError, checkIsStepCriticalError = _a.checkIsStepCriticalError, checkIsStepWarning = _a.checkIsStepWarning, checkIsStepWaiting = _a.checkIsStepWaiting, checkIsStepPositive = _a.checkIsStepPositive, checkIsStepCustom = _a.checkIsStepCustom, onChange = _a.onChange, dataTestId = _a.dataTestId, completedDashColor = _a.completedDashColor;
     var uncontrolled = activeStepProp === undefined;
     var _k = React.useState(defaultActiveStep), activeStep = _k[0], setActiveStep = _k[1];
     var stepsLength = React__default.default.Children.count(children);
@@ -39,12 +39,15 @@ var Steps = function (_a) {
         var disabled = checkIsStepDisabled ? checkIsStepDisabled(stepNumber) : false;
         var isPositive = checkIsStepPositive ? checkIsStepPositive(stepNumber) : false;
         var isError = checkIsStepError ? checkIsStepError(stepNumber) : false;
+        var isCriticalError = checkIsStepCriticalError
+            ? checkIsStepCriticalError(stepNumber)
+            : false;
         var isWarning = checkIsStepWarning ? checkIsStepWarning(stepNumber) : false;
         var isWaiting = checkIsStepWaiting ? checkIsStepWaiting(stepNumber) : false;
         var customStepIndicator = checkIsStepCustom && checkIsStepCustom(stepNumber);
         var isNotLastStep = stepsLength !== stepNumber;
         var isInteractive = !disabled && interactive;
-        return (React__default.default.createElement(components_step_Component.Step, { stepNumber: stepNumber, isSelected: isSelected, isStepCompleted: isStepCompleted, disabled: disabled, isPositive: isPositive, isError: isError, isWarning: isWarning, isWaiting: isWaiting, customStepIndicator: customStepIndicator, onClick: handleStepClick, ordered: ordered, interactive: isInteractive, isVerticalAlign: isVerticalAlign, isNotLastStep: isNotLastStep, key: stepNumber, fullWidth: fullWidth, minSpaceBetweenSteps: minSpaceBetweenSteps }, step));
+        return (React__default.default.createElement(components_step_Component.Step, { stepNumber: stepNumber, isSelected: isSelected, isStepCompleted: isStepCompleted, disabled: disabled, isPositive: isPositive, isError: isError, isCriticalError: isCriticalError, isWarning: isWarning, isWaiting: isWaiting, customStepIndicator: customStepIndicator, onClick: handleStepClick, ordered: ordered, interactive: isInteractive, isVerticalAlign: isVerticalAlign, isNotLastStep: isNotLastStep, key: stepNumber, fullWidth: fullWidth, minSpaceBetweenSteps: minSpaceBetweenSteps, completedDashColor: completedDashColor, dataTestId: dataTestId }, step));
     })));
 };