@alfalab/core-components-steps 1.5.1 → 1.6.1

package/esm/Component.js

@@ -1,21 +1,14 @@
 import React, { useState, useEffect } from 'react';
 import cn from 'classnames';
 import { Step } from './components/step/Component.js';
-import 'tslib';
-import '@alfalab/hooks';
-import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import '@alfalab/icons-glyph/ClockMIcon';
-import '@alfalab/icons-glyph/ExclamationCircleMIcon';
-import './components/step-indicator/Component.js';
-import '@alfalab/core-components-badge/esm';
 
-var styles = {"component":"steps__component_1yc4g","vertical":"steps__vertical_1yc4g"};
+var styles = {"component":"steps__component_1n1l2","vertical":"steps__vertical_1n1l2"};
 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, 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 _h = useState(activeStepProp || defaultActiveStep), activeStep = _h[0], setActiveStep = _h[1];
+    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 _k = useState(activeStepProp || defaultActiveStep), activeStep = _k[0], setActiveStep = _k[1];
     var stepsLength = React.Children.count(children);
     useEffect(function () {
         if (activeStepProp) {
@@ -44,7 +37,7 @@ var Steps = function (_a) {
         var customStepIndicator = checkIsStepCustom && checkIsStepCustom(stepNumber);
         var isNotLastStep = stepsLength !== stepNumber;
         var isInteractive = !disabled && interactive;
-        return (React.createElement(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 }, step));
+        return (React.createElement(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));
     })));
 };
 

package/esm/components/step/Component.d.ts

@@ -60,6 +60,16 @@ type StepProps = {
      * Указывает, является ли текущий шаг последним в списке
      */
     isNotLastStep?: boolean;
+    /**
+     * Маркер того, что шаг растягивается на всю ширину блока
+     * для вертикальной ориентации
+     */
+    fullWidth?: boolean;
+    /**
+     * Минимальное расстояние между шагами
+     * @default 24
+     */
+    minSpaceBetweenSteps?: 8 | 16 | 24;
     /**
      * Обработчик нажатия на текущей шаг
      * @param stepNumber - номер шага

package/esm/components/step/Component.js

@@ -6,14 +6,18 @@ import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon'
 import { ClockMIcon } from '@alfalab/icons-glyph/ClockMIcon';
 import { ExclamationCircleMIcon } from '@alfalab/icons-glyph/ExclamationCircleMIcon';
 import { StepIndicator } from '../step-indicator/Component.js';
-import '@alfalab/core-components-badge/esm';
 
-var styles = {"step":"steps__step_2yi0h","vertical":"steps__vertical_2yi0h","interactive":"steps__interactive_2yi0h","disabled":"steps__disabled_2yi0h","text":"steps__text_2yi0h","indicator":"steps__indicator_2yi0h","option":"steps__option_2yi0h","dash":"steps__dash_2yi0h","completed":"steps__completed_2yi0h","focused":"steps__focused_2yi0h","selected":"steps__selected_2yi0h","checkbox":"steps__checkbox_2yi0h","dot":"steps__dot_2yi0h","error":"steps__error_2yi0h","unordered":"steps__unordered_2yi0h","completedIndicator":"steps__completedIndicator_2yi0h"};
+var styles = {"step":"steps__step_1ohj2","vertical":"steps__vertical_1ohj2","interactive":"steps__interactive_1ohj2","disabled":"steps__disabled_1ohj2","text":"steps__text_1ohj2","indicator":"steps__indicator_1ohj2","option":"steps__option_1ohj2","dash":"steps__dash_1ohj2","size-16":"steps__size-16_1ohj2","size-8":"steps__size-8_1ohj2","completed":"steps__completed_1ohj2","focused":"steps__focused_1ohj2","selected":"steps__selected_1ohj2","checkbox":"steps__checkbox_1ohj2","dot":"steps__dot_1ohj2","error":"steps__error_1ohj2","unordered":"steps__unordered_1ohj2","completedIndicator":"steps__completedIndicator_1ohj2","fullWidth":"steps__fullWidth_1ohj2"};
 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;
+    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 stepRef = useRef(null);
     var focused = useFocus(stepRef, 'keyboard')[0];
     var handleButtonClick = function () {
@@ -61,7 +65,7 @@ var Step = function (_a) {
         return (React.createElement("div", { className: cn(styles.dash, (_a = {},
                 _a[styles.vertical] = isVerticalAlign,
                 _a[styles.completed] = isStepCompleted,
-                _a)) }));
+                _a), styles[SIZE_TO_CLASSNAME_MAP[minSpaceBetweenSteps]]) }));
     };
     return (React.createElement("div", { role: 'button', tabIndex: 0, ref: stepRef, className: cn(styles.step, (_b = {},
             _b[styles.completed] = isStepCompleted,
@@ -71,6 +75,7 @@ var Step = function (_a) {
             _b[styles.focused] = focused,
             _b[styles.vertical] = isVerticalAlign,
             _b[styles.interactive] = interactive,
+            _b[styles.fullWidth] = fullWidth && isVerticalAlign,
             _b)), onClick: handleButtonClick, onKeyDown: handleKeyDown },
         React.createElement("div", { className: cn(styles.indicator, (_c = {},
                 _c[styles.vertical] = isVerticalAlign,
@@ -84,6 +89,7 @@ var Step = function (_a) {
             isNotLastStep && isVerticalAlign && renderDash()),
         React.createElement("div", { className: cn(styles.text, (_e = {},
                 _e[styles.interactive] = interactive,
+                _e[styles.fullWidth] = fullWidth && isVerticalAlign,
                 _e)), onClick: handleTextClick }, children),
         isNotLastStep && !isVerticalAlign && renderDash()));
 };

package/esm/components/step/index.css

@@ -1,12 +1,12 @@
-/* hash: k7srz */
-:root {
+/* hash: 1hf3o */
+: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-border-link: #2288fa;
-    --color-light-neutral-1500: #0e0e0e;
+    --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
     --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1);
     --color-light-status-positive: #0cc44d;
-    --color-light-text-primary: #0e0e0e;
-    --color-light-text-primary-inverted: #fff;
+    --color-light-text-primary: rgba(3, 3, 6, 0.88);
+    --color-light-text-primary-inverted: rgba(255, 255, 255, 0.94);
     --color-light-transparent-default-hover: rgba(38, 55, 88, 0.06);
     --color-light-transparent-default-press: rgba(30, 43, 68, 0.08); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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 */
@@ -30,26 +30,26 @@
 } :root {
     --steps-option-svg-color: var(--color-light-status-positive);
     --steps-dash-border: 2px solid var(--color-light-status-positive);
-} .steps__step_2yi0h {
+} .steps__step_1ohj2 {
     display: flex;
     outline: none
-} .steps__step_2yi0h:not(.steps__vertical_2yi0h) {
+} .steps__step_1ohj2:not(.steps__vertical_1ohj2) {
         align-items: center;
-    } .steps__step_2yi0h.steps__interactive_2yi0h:not(.steps__disabled_2yi0h):hover {
+    } .steps__step_1ohj2.steps__interactive_1ohj2:not(.steps__disabled_1ohj2):hover {
     cursor: pointer;
-} .steps__step_2yi0h.steps__disabled_2yi0h:hover .steps__text_2yi0h {
+} .steps__step_1ohj2.steps__disabled_1ohj2:hover .steps__text_1ohj2 {
         background: unset;
-    } .steps__step_2yi0h.steps__disabled_2yi0h .steps__indicator_2yi0h {
+    } .steps__step_1ohj2.steps__disabled_1ohj2 .steps__indicator_1ohj2 {
         cursor: unset;
-    } .steps__indicator_2yi0h {
+    } .steps__indicator_1ohj2 {
     cursor: pointer;
     display: flex;
     align-items: center;
     margin-right: var(--gap-2xs)
-} .steps__indicator_2yi0h.steps__vertical_2yi0h {
+} .steps__indicator_1ohj2.steps__vertical_1ohj2 {
         flex-direction: column;
         margin-right: var(--gap-xs);
-    } .steps__option_2yi0h {
+    } .steps__option_1ohj2 {
     font-size: 14px;
     line-height: 20px;
     font-weight: 700;
@@ -62,25 +62,33 @@
     min-width: 24px;
     height: 24px;
     border-radius: var(--border-radius-circle)
-} .steps__option_2yi0h.steps__vertical_2yi0h {
+} .steps__option_1ohj2.steps__vertical_1ohj2 {
         margin-top: var(--gap-xs);
-    } .steps__dash_2yi0h {
+    } .steps__dash_1ohj2 {
     flex: 1 1 auto;
     min-width: 24px;
     border-top: 2px solid var(--color-light-neutral-translucent-300);
     margin-right: var(--gap-xs)
-} .steps__dash_2yi0h.steps__completed_2yi0h {
+} .steps__dash_1ohj2.steps__size-16_1ohj2 {
+        min-width: 16px;
+    } .steps__dash_1ohj2.steps__size-8_1ohj2 {
+        min-width: 8px;
+    } .steps__dash_1ohj2.steps__completed_1ohj2 {
         border-top: var(--steps-dash-border);
-    } .steps__dash_2yi0h.steps__vertical_2yi0h {
+    } .steps__dash_1ohj2.steps__vertical_1ohj2 {
         min-width: unset;
         min-height: 24px;
         margin-right: 0;
         margin-top: var(--gap-xs);
         border-left: 2px solid var(--color-light-neutral-translucent-300);
-        border-top: none;
-    } .steps__dash_2yi0h.steps__completed_2yi0h.steps__vertical_2yi0h {
+        border-top: none
+    } .steps__dash_1ohj2.steps__vertical_1ohj2.steps__size-16_1ohj2 {
+            min-height: 16px;
+        } .steps__dash_1ohj2.steps__vertical_1ohj2.steps__size-8_1ohj2 {
+            min-height: 8px;
+        } .steps__dash_1ohj2.steps__completed_1ohj2.steps__vertical_1ohj2 {
         border-left: var(--steps-dash-border);
-    } .steps__text_2yi0h {
+    } .steps__text_1ohj2 {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
@@ -90,19 +98,19 @@
     color: var(--color-light-text-primary);
     border-radius: var(--gap-xs);
     height: min-content
-} .steps__text_2yi0h.steps__interactive_2yi0h:not(.steps__disabled_2yi0h):hover {
+} .steps__text_1ohj2.steps__interactive_1ohj2:not(.steps__disabled_1ohj2):hover {
             background: var(--color-light-transparent-default-hover);
-        } .steps__text_2yi0h.steps__interactive_2yi0h:not(.steps__disabled_2yi0h):active {
+        } .steps__text_1ohj2.steps__interactive_1ohj2:not(.steps__disabled_1ohj2):active {
             background: var(--color-light-transparent-default-press);
-        } .steps__focused_2yi0h {
+        } .steps__focused_1ohj2 {
     outline: var(--gap-3xs) solid var(--focus-color);
     outline-offset: var(--gap-3xs);
-} .steps__selected_2yi0h .steps__text_2yi0h {
+} .steps__selected_1ohj2 .steps__text_1ohj2 {
         color: var(--color-light-text-primary);
-    } .steps__selected_2yi0h .steps__option_2yi0h {
+    } .steps__selected_1ohj2 .steps__option_1ohj2 {
         color: var(--color-light-text-primary-inverted);
-        background: var(--color-light-neutral-1500);
-    } .steps__checkbox_2yi0h {
+        background: var(--color-light-neutral-translucent-1300);
+    } .steps__checkbox_1ohj2 {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -110,18 +118,20 @@
     width: 20px;
     height: 20px;
     border: 2px solid var(--color-light-neutral-translucent-300);
-} .steps__dot_2yi0h {
+} .steps__dot_1ohj2 {
     width: 10px;
     height: 10px;
     border-radius: var(--border-radius-circle);
     background: var(--color-light-neutral-translucent-300);
-} .steps__selected_2yi0h .steps__checkbox_2yi0h {
-    border: 2px solid var(--color-light-neutral-1500)
-} .steps__selected_2yi0h .steps__checkbox_2yi0h .steps__dot_2yi0h {
-        background: var(--color-light-neutral-1500);
-    } .steps__option_2yi0h:not(.steps__error_2yi0h).steps__unordered_2yi0h {
+} .steps__selected_1ohj2 .steps__checkbox_1ohj2 {
+    border: 2px solid var(--color-light-neutral-translucent-1300)
+} .steps__selected_1ohj2 .steps__checkbox_1ohj2 .steps__dot_1ohj2 {
+        background: var(--color-light-neutral-translucent-1300);
+    } .steps__option_1ohj2:not(.steps__error_1ohj2).steps__unordered_1ohj2 {
     background: unset;
-} .steps__completedIndicator_2yi0h > [class*='positive'] {
+} .steps__completedIndicator_1ohj2 > [class*='positive'] {
     color: var(--steps-option-svg-color);
     background-color: var(--steps-option-svg-color);
+} .steps__fullWidth_1ohj2 {
+    width: 100%;
 }

package/esm/components/step/index.js

@@ -1,10 +1 @@
 export { Step } from './Component.js';
-import 'tslib';
-import 'react';
-import 'classnames';
-import '@alfalab/hooks';
-import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import '@alfalab/icons-glyph/ClockMIcon';
-import '@alfalab/icons-glyph/ExclamationCircleMIcon';
-import '../step-indicator/Component.js';
-import '@alfalab/core-components-badge/esm';

package/esm/components/step-indicator/Component.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import { Badge } from '@alfalab/core-components-badge/esm';
 
-var styles = {"component":"steps__component_qiryz"};
+var styles = {"component":"steps__component_1akb5"};
 require('./index.css')
 
 var StepIndicator = function (_a) {

package/esm/components/step-indicator/index.css

@@ -1,4 +1,4 @@
-/* hash: yw9u7 */
-.steps__component_qiryz {
+/* hash: 1w3kq */
+.steps__component_1akb5 {
     padding: 0;
 }

package/esm/components/step-indicator/index.js

@@ -1,4 +1 @@
 export { StepIndicator } from './Component.js';
-import 'react';
-import 'classnames';
-import '@alfalab/core-components-badge/esm';

package/esm/index.css

@@ -1,5 +1,5 @@
-/* hash: 29j93 */
-:root {
+/* hash: 4o5j9 */
+: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 */
 } :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 */
 } :root {
@@ -14,11 +14,11 @@
 } :root {
 } :root {
 } :root {
-} .steps__component_1yc4g {
+} .steps__component_1n1l2 {
     display: flex;
     align-items: center;
     flex-direction: row
-} .steps__component_1yc4g.steps__vertical_1yc4g {
+} .steps__component_1n1l2.steps__vertical_1n1l2 {
         flex-direction: column;
         align-items: flex-start;
     }

package/esm/index.js

@@ -1,11 +1 @@
 export { Steps } from './Component.js';
-import 'react';
-import 'classnames';
-import './components/step/Component.js';
-import 'tslib';
-import '@alfalab/hooks';
-import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import '@alfalab/icons-glyph/ClockMIcon';
-import '@alfalab/icons-glyph/ExclamationCircleMIcon';
-import './components/step-indicator/Component.js';
-import '@alfalab/core-components-badge/esm';

package/index.css

@@ -1,5 +1,5 @@
-/* hash: 29j93 */
-:root {
+/* hash: 4o5j9 */
+: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 */
 } :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 */
 } :root {
@@ -14,11 +14,11 @@
 } :root {
 } :root {
 } :root {
-} .steps__component_1yc4g {
+} .steps__component_1n1l2 {
     display: flex;
     align-items: center;
     flex-direction: row
-} .steps__component_1yc4g.steps__vertical_1yc4g {
+} .steps__component_1n1l2.steps__vertical_1n1l2 {
         flex-direction: column;
         align-items: flex-start;
     }

package/index.js

@@ -3,16 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var Component = require('./Component.js');
-require('react');
-require('classnames');
-require('./components/step/Component.js');
-require('tslib');
-require('@alfalab/hooks');
-require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
-require('@alfalab/icons-glyph/ClockMIcon');
-require('@alfalab/icons-glyph/ExclamationCircleMIcon');
-require('./components/step-indicator/Component.js');
-require('@alfalab/core-components-badge');
 
 
 

package/modern/Component.d.ts

@@ -38,6 +38,16 @@ type StepsProps = {
      * Включение / отключение интерактивности шагов
      */
     interactive?: boolean;
+    /**
+     * Растягивание шагов на всю ширину блока для вертикальной ориентации
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Минимальное расстояние между шагами
+     * @default 24
+     */
+    minSpaceBetweenSteps?: 8 | 16 | 24;
     /**
      * Кастомный метод для управления состоянием disabled шага и
      * возможностью перехода на этот шаг

package/modern/Component.js

@@ -1,17 +1,11 @@
 import React, { useState, useEffect } from 'react';
 import cn from 'classnames';
 import { Step } from './components/step/Component.js';
-import '@alfalab/hooks';
-import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import '@alfalab/icons-glyph/ClockMIcon';
-import '@alfalab/icons-glyph/ExclamationCircleMIcon';
-import './components/step-indicator/Component.js';
-import '@alfalab/core-components-badge/modern';
 
-const styles = {"component":"steps__component_1yc4g","vertical":"steps__vertical_1yc4g"};
+const styles = {"component":"steps__component_1n1l2","vertical":"steps__vertical_1n1l2"};
 require('./index.css')
 
-const Steps = ({ className, children, defaultActiveStep = 1, activeStep: activeStepProp, isMarkCompletedSteps = true, isVerticalAlign = false, ordered = true, interactive = true, checkIsStepDisabled, checkIsStepError, checkIsStepWarning, checkIsStepWaiting, checkIsStepPositive, checkIsStepCustom, onChange, dataTestId, }) => {
+const Steps = ({ className, children, defaultActiveStep = 1, activeStep: activeStepProp, isMarkCompletedSteps = true, isVerticalAlign = false, ordered = true, interactive = true, fullWidth = false, minSpaceBetweenSteps = 24, checkIsStepDisabled, checkIsStepError, checkIsStepWarning, checkIsStepWaiting, checkIsStepPositive, checkIsStepCustom, onChange, dataTestId, }) => {
     const [activeStep, setActiveStep] = useState(activeStepProp || defaultActiveStep);
     const stepsLength = React.Children.count(children);
     useEffect(() => {
@@ -41,7 +35,7 @@ const Steps = ({ className, children, defaultActiveStep = 1, activeStep: activeS
         const customStepIndicator = checkIsStepCustom && checkIsStepCustom(stepNumber);
         const isNotLastStep = stepsLength !== stepNumber;
         const isInteractive = !disabled && interactive;
-        return (React.createElement(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 }, step));
+        return (React.createElement(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));
     })));
 };
 

package/modern/components/step/Component.d.ts

@@ -60,6 +60,16 @@ type StepProps = {
      * Указывает, является ли текущий шаг последним в списке
      */
     isNotLastStep?: boolean;
+    /**
+     * Маркер того, что шаг растягивается на всю ширину блока
+     * для вертикальной ориентации
+     */
+    fullWidth?: boolean;
+    /**
+     * Минимальное расстояние между шагами
+     * @default 24
+     */
+    minSpaceBetweenSteps?: 8 | 16 | 24;
     /**
      * Обработчик нажатия на текущей шаг
      * @param stepNumber - номер шага

package/modern/components/step/Component.js

@@ -5,12 +5,16 @@ import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon'
 import { ClockMIcon } from '@alfalab/icons-glyph/ClockMIcon';
 import { ExclamationCircleMIcon } from '@alfalab/icons-glyph/ExclamationCircleMIcon';
 import { StepIndicator } from '../step-indicator/Component.js';
-import '@alfalab/core-components-badge/modern';
 
-const styles = {"step":"steps__step_2yi0h","vertical":"steps__vertical_2yi0h","interactive":"steps__interactive_2yi0h","disabled":"steps__disabled_2yi0h","text":"steps__text_2yi0h","indicator":"steps__indicator_2yi0h","option":"steps__option_2yi0h","dash":"steps__dash_2yi0h","completed":"steps__completed_2yi0h","focused":"steps__focused_2yi0h","selected":"steps__selected_2yi0h","checkbox":"steps__checkbox_2yi0h","dot":"steps__dot_2yi0h","error":"steps__error_2yi0h","unordered":"steps__unordered_2yi0h","completedIndicator":"steps__completedIndicator_2yi0h"};
+const styles = {"step":"steps__step_1ohj2","vertical":"steps__vertical_1ohj2","interactive":"steps__interactive_1ohj2","disabled":"steps__disabled_1ohj2","text":"steps__text_1ohj2","indicator":"steps__indicator_1ohj2","option":"steps__option_1ohj2","dash":"steps__dash_1ohj2","size-16":"steps__size-16_1ohj2","size-8":"steps__size-8_1ohj2","completed":"steps__completed_1ohj2","focused":"steps__focused_1ohj2","selected":"steps__selected_1ohj2","checkbox":"steps__checkbox_1ohj2","dot":"steps__dot_1ohj2","error":"steps__error_1ohj2","unordered":"steps__unordered_1ohj2","completedIndicator":"steps__completedIndicator_1ohj2","fullWidth":"steps__fullWidth_1ohj2"};
 require('./index.css')
 
-const Step = ({ children, stepNumber, isSelected, disabled, ordered, isPositive, isError, isWarning, isWaiting, customStepIndicator, isStepCompleted, onClick, interactive, isVerticalAlign, isNotLastStep, }) => {
+const SIZE_TO_CLASSNAME_MAP = {
+    8: 'size-8',
+    16: 'size-16',
+    24: 'size-24',
+};
+const Step = ({ children, stepNumber, isSelected, disabled, ordered, isPositive, isError, isWarning, isWaiting, customStepIndicator, isStepCompleted, onClick, interactive, isVerticalAlign, isNotLastStep, fullWidth, minSpaceBetweenSteps = 24, }) => {
     const stepRef = useRef(null);
     const [focused] = useFocus(stepRef, 'keyboard');
     const handleButtonClick = () => {
@@ -56,7 +60,7 @@ const Step = ({ children, stepNumber, isSelected, disabled, ordered, isPositive,
     const renderDash = () => (React.createElement("div", { className: cn(styles.dash, {
             [styles.vertical]: isVerticalAlign,
             [styles.completed]: isStepCompleted,
-        }) }));
+        }, styles[SIZE_TO_CLASSNAME_MAP[minSpaceBetweenSteps]]) }));
     return (React.createElement("div", { role: 'button', tabIndex: 0, ref: stepRef, className: cn(styles.step, {
             [styles.completed]: isStepCompleted,
             [styles.error]: isError,
@@ -65,6 +69,7 @@ const Step = ({ children, stepNumber, isSelected, disabled, ordered, isPositive,
             [styles.focused]: focused,
             [styles.vertical]: isVerticalAlign,
             [styles.interactive]: interactive,
+            [styles.fullWidth]: fullWidth && isVerticalAlign,
         }), onClick: handleButtonClick, onKeyDown: handleKeyDown },
         React.createElement("div", { className: cn(styles.indicator, {
                 [styles.vertical]: isVerticalAlign,
@@ -78,6 +83,7 @@ const Step = ({ children, stepNumber, isSelected, disabled, ordered, isPositive,
             isNotLastStep && isVerticalAlign && renderDash()),
         React.createElement("div", { className: cn(styles.text, {
                 [styles.interactive]: interactive,
+                [styles.fullWidth]: fullWidth && isVerticalAlign,
             }), onClick: handleTextClick }, children),
         isNotLastStep && !isVerticalAlign && renderDash()));
 };