@alfalab/core-components-steps 1.5.1 → 1.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. package/Component.d.ts +10 -0
  2. package/Component.js +4 -11
  3. package/components/step/Component.d.ts +10 -0
  4. package/components/step/Component.js +10 -4
  5. package/components/step/index.css +38 -28
  6. package/components/step/index.js +0 -9
  7. package/components/step-indicator/Component.js +1 -1
  8. package/components/step-indicator/index.css +2 -2
  9. package/components/step-indicator/index.js +0 -3
  10. package/cssm/Component.d.ts +10 -0
  11. package/cssm/Component.js +3 -12
  12. package/cssm/components/step/Component.d.ts +10 -0
  13. package/cssm/components/step/Component.js +9 -4
  14. package/cssm/components/step/index.js +0 -11
  15. package/cssm/components/step/index.module.css +14 -4
  16. package/cssm/components/step-indicator/index.js +0 -4
  17. package/cssm/index.js +0 -13
  18. package/cssm/index.module.css +1 -1
  19. package/esm/Component.d.ts +10 -0
  20. package/esm/Component.js +4 -11
  21. package/esm/components/step/Component.d.ts +10 -0
  22. package/esm/components/step/Component.js +10 -4
  23. package/esm/components/step/index.css +38 -28
  24. package/esm/components/step/index.js +0 -9
  25. package/esm/components/step-indicator/Component.js +1 -1
  26. package/esm/components/step-indicator/index.css +2 -2
  27. package/esm/components/step-indicator/index.js +0 -3
  28. package/esm/index.css +4 -4
  29. package/esm/index.js +0 -10
  30. package/index.css +4 -4
  31. package/index.js +0 -10
  32. package/modern/Component.d.ts +10 -0
  33. package/modern/Component.js +3 -9
  34. package/modern/components/step/Component.d.ts +10 -0
  35. package/modern/components/step/Component.js +10 -4
  36. package/modern/components/step/index.css +38 -28
  37. package/modern/components/step/index.js +0 -8
  38. package/modern/components/step-indicator/Component.js +1 -1
  39. package/modern/components/step-indicator/index.css +2 -2
  40. package/modern/components/step-indicator/index.js +0 -3
  41. package/modern/index.css +4 -4
  42. package/modern/index.js +0 -9
  43. package/package.json +1 -1
  44. package/src/Component.tsx +16 -0
  45. package/src/components/step/Component.tsx +30 -4
  46. package/src/components/step/index.module.css +20 -0
package/esm/components/step/Component.js CHANGED
@@ -6,14 +6,18 @@ import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon'
6
6
  import { ClockMIcon } from '@alfalab/icons-glyph/ClockMIcon';
7
7
  import { ExclamationCircleMIcon } from '@alfalab/icons-glyph/ExclamationCircleMIcon';
8
8
  import { StepIndicator } from '../step-indicator/Component.js';
9
- import '@alfalab/core-components-badge/esm';
10
9
 
11
- 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"};
10
+ var styles = {"step":"steps__step_xa3vu","vertical":"steps__vertical_xa3vu","interactive":"steps__interactive_xa3vu","disabled":"steps__disabled_xa3vu","text":"steps__text_xa3vu","indicator":"steps__indicator_xa3vu","option":"steps__option_xa3vu","dash":"steps__dash_xa3vu","size-16":"steps__size-16_xa3vu","size-8":"steps__size-8_xa3vu","completed":"steps__completed_xa3vu","focused":"steps__focused_xa3vu","selected":"steps__selected_xa3vu","checkbox":"steps__checkbox_xa3vu","dot":"steps__dot_xa3vu","error":"steps__error_xa3vu","unordered":"steps__unordered_xa3vu","completedIndicator":"steps__completedIndicator_xa3vu","fullWidth":"steps__fullWidth_xa3vu"};
12
11
  require('./index.css')
13
12
 
13
+ var SIZE_TO_CLASSNAME_MAP = {
14
+ 8: 'size-8',
15
+ 16: 'size-16',
16
+ 24: 'size-24',
17
+ };
14
18
  var Step = function (_a) {
15
19
  var _b, _c, _d, _e;
16
- 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;
20
+ 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;
17
21
  var stepRef = useRef(null);
18
22
  var focused = useFocus(stepRef, 'keyboard')[0];
19
23
  var handleButtonClick = function () {
@@ -61,7 +65,7 @@ var Step = function (_a) {
61
65
  return (React.createElement("div", { className: cn(styles.dash, (_a = {},
62
66
  _a[styles.vertical] = isVerticalAlign,
63
67
  _a[styles.completed] = isStepCompleted,
64
- _a)) }));
68
+ _a), styles[SIZE_TO_CLASSNAME_MAP[minSpaceBetweenSteps]]) }));
65
69
  };
66
70
  return (React.createElement("div", { role: 'button', tabIndex: 0, ref: stepRef, className: cn(styles.step, (_b = {},
67
71
  _b[styles.completed] = isStepCompleted,
@@ -71,6 +75,7 @@ var Step = function (_a) {
71
75
  _b[styles.focused] = focused,
72
76
  _b[styles.vertical] = isVerticalAlign,
73
77
  _b[styles.interactive] = interactive,
78
+ _b[styles.fullWidth] = fullWidth && isVerticalAlign,
74
79
  _b)), onClick: handleButtonClick, onKeyDown: handleKeyDown },
75
80
  React.createElement("div", { className: cn(styles.indicator, (_c = {},
76
81
  _c[styles.vertical] = isVerticalAlign,
@@ -84,6 +89,7 @@ var Step = function (_a) {
84
89
  isNotLastStep && isVerticalAlign && renderDash()),
85
90
  React.createElement("div", { className: cn(styles.text, (_e = {},
86
91
  _e[styles.interactive] = interactive,
92
+ _e[styles.fullWidth] = fullWidth && isVerticalAlign,
87
93
  _e)), onClick: handleTextClick }, children),
88
94
  isNotLastStep && !isVerticalAlign && renderDash()));
89
95
  };
package/esm/components/step/index.css CHANGED
@@ -1,5 +1,5 @@
1
- /* hash: k7srz */
2
- :root {
1
+ /* hash: 1900i */
2
+ :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 */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-link: #2288fa;
5
5
  --color-light-neutral-1500: #0e0e0e;
@@ -30,26 +30,26 @@
30
30
  } :root {
31
31
  --steps-option-svg-color: var(--color-light-status-positive);
32
32
  --steps-dash-border: 2px solid var(--color-light-status-positive);
33
- } .steps__step_2yi0h {
33
+ } .steps__step_xa3vu {
34
34
  display: flex;
35
35
  outline: none
36
- } .steps__step_2yi0h:not(.steps__vertical_2yi0h) {
36
+ } .steps__step_xa3vu:not(.steps__vertical_xa3vu) {
37
37
  align-items: center;
38
- } .steps__step_2yi0h.steps__interactive_2yi0h:not(.steps__disabled_2yi0h):hover {
38
+ } .steps__step_xa3vu.steps__interactive_xa3vu:not(.steps__disabled_xa3vu):hover {
39
39
  cursor: pointer;
40
- } .steps__step_2yi0h.steps__disabled_2yi0h:hover .steps__text_2yi0h {
40
+ } .steps__step_xa3vu.steps__disabled_xa3vu:hover .steps__text_xa3vu {
41
41
  background: unset;
42
- } .steps__step_2yi0h.steps__disabled_2yi0h .steps__indicator_2yi0h {
42
+ } .steps__step_xa3vu.steps__disabled_xa3vu .steps__indicator_xa3vu {
43
43
  cursor: unset;
44
- } .steps__indicator_2yi0h {
44
+ } .steps__indicator_xa3vu {
45
45
  cursor: pointer;
46
46
  display: flex;
47
47
  align-items: center;
48
48
  margin-right: var(--gap-2xs)
49
- } .steps__indicator_2yi0h.steps__vertical_2yi0h {
49
+ } .steps__indicator_xa3vu.steps__vertical_xa3vu {
50
50
  flex-direction: column;
51
51
  margin-right: var(--gap-xs);
52
- } .steps__option_2yi0h {
52
+ } .steps__option_xa3vu {
53
53
  font-size: 14px;
54
54
  line-height: 20px;
55
55
  font-weight: 700;
@@ -62,25 +62,33 @@
62
62
  min-width: 24px;
63
63
  height: 24px;
64
64
  border-radius: var(--border-radius-circle)
65
- } .steps__option_2yi0h.steps__vertical_2yi0h {
65
+ } .steps__option_xa3vu.steps__vertical_xa3vu {
66
66
  margin-top: var(--gap-xs);
67
- } .steps__dash_2yi0h {
67
+ } .steps__dash_xa3vu {
68
68
  flex: 1 1 auto;
69
69
  min-width: 24px;
70
70
  border-top: 2px solid var(--color-light-neutral-translucent-300);
71
71
  margin-right: var(--gap-xs)
72
- } .steps__dash_2yi0h.steps__completed_2yi0h {
72
+ } .steps__dash_xa3vu.steps__size-16_xa3vu {
73
+ min-width: 16px;
74
+ } .steps__dash_xa3vu.steps__size-8_xa3vu {
75
+ min-width: 8px;
76
+ } .steps__dash_xa3vu.steps__completed_xa3vu {
73
77
  border-top: var(--steps-dash-border);
74
- } .steps__dash_2yi0h.steps__vertical_2yi0h {
78
+ } .steps__dash_xa3vu.steps__vertical_xa3vu {
75
79
  min-width: unset;
76
80
  min-height: 24px;
77
81
  margin-right: 0;
78
82
  margin-top: var(--gap-xs);
79
83
  border-left: 2px solid var(--color-light-neutral-translucent-300);
80
- border-top: none;
81
- } .steps__dash_2yi0h.steps__completed_2yi0h.steps__vertical_2yi0h {
84
+ border-top: none
85
+ } .steps__dash_xa3vu.steps__vertical_xa3vu.steps__size-16_xa3vu {
86
+ min-height: 16px;
87
+ } .steps__dash_xa3vu.steps__vertical_xa3vu.steps__size-8_xa3vu {
88
+ min-height: 8px;
89
+ } .steps__dash_xa3vu.steps__completed_xa3vu.steps__vertical_xa3vu {
82
90
  border-left: var(--steps-dash-border);
83
- } .steps__text_2yi0h {
91
+ } .steps__text_xa3vu {
84
92
  font-size: 16px;
85
93
  line-height: 24px;
86
94
  font-weight: 400;
@@ -90,19 +98,19 @@
90
98
  color: var(--color-light-text-primary);
91
99
  border-radius: var(--gap-xs);
92
100
  height: min-content
93
- } .steps__text_2yi0h.steps__interactive_2yi0h:not(.steps__disabled_2yi0h):hover {
101
+ } .steps__text_xa3vu.steps__interactive_xa3vu:not(.steps__disabled_xa3vu):hover {
94
102
  background: var(--color-light-transparent-default-hover);
95
- } .steps__text_2yi0h.steps__interactive_2yi0h:not(.steps__disabled_2yi0h):active {
103
+ } .steps__text_xa3vu.steps__interactive_xa3vu:not(.steps__disabled_xa3vu):active {
96
104
  background: var(--color-light-transparent-default-press);
97
- } .steps__focused_2yi0h {
105
+ } .steps__focused_xa3vu {
98
106
  outline: var(--gap-3xs) solid var(--focus-color);
99
107
  outline-offset: var(--gap-3xs);
100
- } .steps__selected_2yi0h .steps__text_2yi0h {
108
+ } .steps__selected_xa3vu .steps__text_xa3vu {
101
109
  color: var(--color-light-text-primary);
102
- } .steps__selected_2yi0h .steps__option_2yi0h {
110
+ } .steps__selected_xa3vu .steps__option_xa3vu {
103
111
  color: var(--color-light-text-primary-inverted);
104
112
  background: var(--color-light-neutral-1500);
105
- } .steps__checkbox_2yi0h {
113
+ } .steps__checkbox_xa3vu {
106
114
  display: flex;
107
115
  justify-content: center;
108
116
  align-items: center;
@@ -110,18 +118,20 @@
110
118
  width: 20px;
111
119
  height: 20px;
112
120
  border: 2px solid var(--color-light-neutral-translucent-300);
113
- } .steps__dot_2yi0h {
121
+ } .steps__dot_xa3vu {
114
122
  width: 10px;
115
123
  height: 10px;
116
124
  border-radius: var(--border-radius-circle);
117
125
  background: var(--color-light-neutral-translucent-300);
118
- } .steps__selected_2yi0h .steps__checkbox_2yi0h {
126
+ } .steps__selected_xa3vu .steps__checkbox_xa3vu {
119
127
  border: 2px solid var(--color-light-neutral-1500)
120
- } .steps__selected_2yi0h .steps__checkbox_2yi0h .steps__dot_2yi0h {
128
+ } .steps__selected_xa3vu .steps__checkbox_xa3vu .steps__dot_xa3vu {
121
129
  background: var(--color-light-neutral-1500);
122
- } .steps__option_2yi0h:not(.steps__error_2yi0h).steps__unordered_2yi0h {
130
+ } .steps__option_xa3vu:not(.steps__error_xa3vu).steps__unordered_xa3vu {
123
131
  background: unset;
124
- } .steps__completedIndicator_2yi0h > [class*='positive'] {
132
+ } .steps__completedIndicator_xa3vu > [class*='positive'] {
125
133
  color: var(--steps-option-svg-color);
126
134
  background-color: var(--steps-option-svg-color);
135
+ } .steps__fullWidth_xa3vu {
136
+ width: 100%;
127
137
  }
package/esm/components/step/index.js CHANGED
@@ -1,10 +1 @@
1
1
  export { Step } from './Component.js';
2
- import 'tslib';
3
- import 'react';
4
- import 'classnames';
5
- import '@alfalab/hooks';
6
- import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
7
- import '@alfalab/icons-glyph/ClockMIcon';
8
- import '@alfalab/icons-glyph/ExclamationCircleMIcon';
9
- import '../step-indicator/Component.js';
10
- import '@alfalab/core-components-badge/esm';
package/esm/components/step-indicator/Component.js CHANGED
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import cn from 'classnames';
3
3
  import { Badge } from '@alfalab/core-components-badge/esm';
4
4
 
5
- var styles = {"component":"steps__component_qiryz"};
5
+ var styles = {"component":"steps__component_jcvzd"};
6
6
  require('./index.css')
7
7
 
8
8
  var StepIndicator = function (_a) {
package/esm/components/step-indicator/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: yw9u7 */
2
- .steps__component_qiryz {
1
+ /* hash: 1nohl */
2
+ .steps__component_jcvzd {
3
3
  padding: 0;
4
4
  }
package/esm/components/step-indicator/index.js CHANGED
@@ -1,4 +1 @@
1
1
  export { StepIndicator } from './Component.js';
2
- import 'react';
3
- import 'classnames';
4
- import '@alfalab/core-components-badge/esm';
package/esm/index.css CHANGED
@@ -1,5 +1,5 @@
1
- /* hash: 29j93 */
2
- :root {
1
+ /* hash: 1ocdx */
2
+ :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 */
3
3
  } /* 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 */
4
4
  } :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 */
5
5
  } :root {
@@ -14,11 +14,11 @@
14
14
  } :root {
15
15
  } :root {
16
16
  } :root {
17
- } .steps__component_1yc4g {
17
+ } .steps__component_1gfbz {
18
18
  display: flex;
19
19
  align-items: center;
20
20
  flex-direction: row
21
- } .steps__component_1yc4g.steps__vertical_1yc4g {
21
+ } .steps__component_1gfbz.steps__vertical_1gfbz {
22
22
  flex-direction: column;
23
23
  align-items: flex-start;
24
24
  }
package/esm/index.js CHANGED
@@ -1,11 +1 @@
1
1
  export { Steps } from './Component.js';
2
- import 'react';
3
- import 'classnames';
4
- import './components/step/Component.js';
5
- import 'tslib';
6
- import '@alfalab/hooks';
7
- import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
8
- import '@alfalab/icons-glyph/ClockMIcon';
9
- import '@alfalab/icons-glyph/ExclamationCircleMIcon';
10
- import './components/step-indicator/Component.js';
11
- import '@alfalab/core-components-badge/esm';
package/index.css CHANGED
@@ -1,5 +1,5 @@
1
- /* hash: 29j93 */
2
- :root {
1
+ /* hash: 1ocdx */
2
+ :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 */
3
3
  } /* 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 */
4
4
  } :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 */
5
5
  } :root {
@@ -14,11 +14,11 @@
14
14
  } :root {
15
15
  } :root {
16
16
  } :root {
17
- } .steps__component_1yc4g {
17
+ } .steps__component_1gfbz {
18
18
  display: flex;
19
19
  align-items: center;
20
20
  flex-direction: row
21
- } .steps__component_1yc4g.steps__vertical_1yc4g {
21
+ } .steps__component_1gfbz.steps__vertical_1gfbz {
22
22
  flex-direction: column;
23
23
  align-items: flex-start;
24
24
  }
package/index.js CHANGED
@@ -3,16 +3,6 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var Component = require('./Component.js');
6
- require('react');
7
- require('classnames');
8
- require('./components/step/Component.js');
9
- require('tslib');
10
- require('@alfalab/hooks');
11
- require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
12
- require('@alfalab/icons-glyph/ClockMIcon');
13
- require('@alfalab/icons-glyph/ExclamationCircleMIcon');
14
- require('./components/step-indicator/Component.js');
15
- require('@alfalab/core-components-badge');
16
6
 
17
7
 
18
8
 
package/modern/Component.d.ts CHANGED
@@ -38,6 +38,16 @@ type StepsProps = {
38
38
  * Включение / отключение интерактивности шагов
39
39
  */
40
40
  interactive?: boolean;
41
+ /**
42
+ * Растягивание шагов на всю ширину блока для вертикальной ориентации
43
+ * @default false
44
+ */
45
+ fullWidth?: boolean;
46
+ /**
47
+ * Минимальное расстояние между шагами
48
+ * @default 24
49
+ */
50
+ minSpaceBetweenSteps?: 8 | 16 | 24;
41
51
  /**
42
52
  * Кастомный метод для управления состоянием disabled шага и
43
53
  * возможностью перехода на этот шаг
package/modern/Component.js CHANGED
@@ -1,17 +1,11 @@
1
1
  import React, { useState, useEffect } from 'react';
2
2
  import cn from 'classnames';
3
3
  import { Step } from './components/step/Component.js';
4
- import '@alfalab/hooks';
5
- import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
6
- import '@alfalab/icons-glyph/ClockMIcon';
7
- import '@alfalab/icons-glyph/ExclamationCircleMIcon';
8
- import './components/step-indicator/Component.js';
9
- import '@alfalab/core-components-badge/modern';
10
4
 
11
- const styles = {"component":"steps__component_1yc4g","vertical":"steps__vertical_1yc4g"};
5
+ const styles = {"component":"steps__component_1gfbz","vertical":"steps__vertical_1gfbz"};
12
6
  require('./index.css')
13
7
 
14
- const Steps = ({ className, children, defaultActiveStep = 1, activeStep: activeStepProp, isMarkCompletedSteps = true, isVerticalAlign = false, ordered = true, interactive = true, checkIsStepDisabled, checkIsStepError, checkIsStepWarning, checkIsStepWaiting, checkIsStepPositive, checkIsStepCustom, onChange, dataTestId, }) => {
8
+ 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, }) => {
15
9
  const [activeStep, setActiveStep] = useState(activeStepProp || defaultActiveStep);
16
10
  const stepsLength = React.Children.count(children);
17
11
  useEffect(() => {
@@ -41,7 +35,7 @@ const Steps = ({ className, children, defaultActiveStep = 1, activeStep: activeS
41
35
  const customStepIndicator = checkIsStepCustom && checkIsStepCustom(stepNumber);
42
36
  const isNotLastStep = stepsLength !== stepNumber;
43
37
  const isInteractive = !disabled && interactive;
44
- 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));
38
+ 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));
45
39
  })));
46
40
  };
47
41
 
package/modern/components/step/Component.d.ts CHANGED
@@ -60,6 +60,16 @@ type StepProps = {
60
60
  * Указывает, является ли текущий шаг последним в списке
61
61
  */
62
62
  isNotLastStep?: boolean;
63
+ /**
64
+ * Маркер того, что шаг растягивается на всю ширину блока
65
+ * для вертикальной ориентации
66
+ */
67
+ fullWidth?: boolean;
68
+ /**
69
+ * Минимальное расстояние между шагами
70
+ * @default 24
71
+ */
72
+ minSpaceBetweenSteps?: 8 | 16 | 24;
63
73
  /**
64
74
  * Обработчик нажатия на текущей шаг
65
75
  * @param stepNumber - номер шага
package/modern/components/step/Component.js CHANGED
@@ -5,12 +5,16 @@ import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon'
5
5
  import { ClockMIcon } from '@alfalab/icons-glyph/ClockMIcon';
6
6
  import { ExclamationCircleMIcon } from '@alfalab/icons-glyph/ExclamationCircleMIcon';
7
7
  import { StepIndicator } from '../step-indicator/Component.js';
8
- import '@alfalab/core-components-badge/modern';
9
8
 
10
- 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"};
9
+ const styles = {"step":"steps__step_xa3vu","vertical":"steps__vertical_xa3vu","interactive":"steps__interactive_xa3vu","disabled":"steps__disabled_xa3vu","text":"steps__text_xa3vu","indicator":"steps__indicator_xa3vu","option":"steps__option_xa3vu","dash":"steps__dash_xa3vu","size-16":"steps__size-16_xa3vu","size-8":"steps__size-8_xa3vu","completed":"steps__completed_xa3vu","focused":"steps__focused_xa3vu","selected":"steps__selected_xa3vu","checkbox":"steps__checkbox_xa3vu","dot":"steps__dot_xa3vu","error":"steps__error_xa3vu","unordered":"steps__unordered_xa3vu","completedIndicator":"steps__completedIndicator_xa3vu","fullWidth":"steps__fullWidth_xa3vu"};
11
10
  require('./index.css')
12
11
 
13
- const Step = ({ children, stepNumber, isSelected, disabled, ordered, isPositive, isError, isWarning, isWaiting, customStepIndicator, isStepCompleted, onClick, interactive, isVerticalAlign, isNotLastStep, }) => {
12
+ const SIZE_TO_CLASSNAME_MAP = {
13
+ 8: 'size-8',
14
+ 16: 'size-16',
15
+ 24: 'size-24',
16
+ };
17
+ const Step = ({ children, stepNumber, isSelected, disabled, ordered, isPositive, isError, isWarning, isWaiting, customStepIndicator, isStepCompleted, onClick, interactive, isVerticalAlign, isNotLastStep, fullWidth, minSpaceBetweenSteps = 24, }) => {
14
18
  const stepRef = useRef(null);
15
19
  const [focused] = useFocus(stepRef, 'keyboard');
16
20
  const handleButtonClick = () => {
@@ -56,7 +60,7 @@ const Step = ({ children, stepNumber, isSelected, disabled, ordered, isPositive,
56
60
  const renderDash = () => (React.createElement("div", { className: cn(styles.dash, {
57
61
  [styles.vertical]: isVerticalAlign,
58
62
  [styles.completed]: isStepCompleted,
59
- }) }));
63
+ }, styles[SIZE_TO_CLASSNAME_MAP[minSpaceBetweenSteps]]) }));
60
64
  return (React.createElement("div", { role: 'button', tabIndex: 0, ref: stepRef, className: cn(styles.step, {
61
65
  [styles.completed]: isStepCompleted,
62
66
  [styles.error]: isError,
@@ -65,6 +69,7 @@ const Step = ({ children, stepNumber, isSelected, disabled, ordered, isPositive,
65
69
  [styles.focused]: focused,
66
70
  [styles.vertical]: isVerticalAlign,
67
71
  [styles.interactive]: interactive,
72
+ [styles.fullWidth]: fullWidth && isVerticalAlign,
68
73
  }), onClick: handleButtonClick, onKeyDown: handleKeyDown },
69
74
  React.createElement("div", { className: cn(styles.indicator, {
70
75
  [styles.vertical]: isVerticalAlign,
@@ -78,6 +83,7 @@ const Step = ({ children, stepNumber, isSelected, disabled, ordered, isPositive,
78
83
  isNotLastStep && isVerticalAlign && renderDash()),
79
84
  React.createElement("div", { className: cn(styles.text, {
80
85
  [styles.interactive]: interactive,
86
+ [styles.fullWidth]: fullWidth && isVerticalAlign,
81
87
  }), onClick: handleTextClick }, children),
82
88
  isNotLastStep && !isVerticalAlign && renderDash()));
83
89
  };
package/modern/components/step/index.css CHANGED
@@ -1,5 +1,5 @@
1
- /* hash: k7srz */
2
- :root {
1
+ /* hash: 1900i */
2
+ :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 */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-link: #2288fa;
5
5
  --color-light-neutral-1500: #0e0e0e;
@@ -30,26 +30,26 @@
30
30
  } :root {
31
31
  --steps-option-svg-color: var(--color-light-status-positive);
32
32
  --steps-dash-border: 2px solid var(--color-light-status-positive);
33
- } .steps__step_2yi0h {
33
+ } .steps__step_xa3vu {
34
34
  display: flex;
35
35
  outline: none
36
- } .steps__step_2yi0h:not(.steps__vertical_2yi0h) {
36
+ } .steps__step_xa3vu:not(.steps__vertical_xa3vu) {
37
37
  align-items: center;
38
- } .steps__step_2yi0h.steps__interactive_2yi0h:not(.steps__disabled_2yi0h):hover {
38
+ } .steps__step_xa3vu.steps__interactive_xa3vu:not(.steps__disabled_xa3vu):hover {
39
39
  cursor: pointer;
40
- } .steps__step_2yi0h.steps__disabled_2yi0h:hover .steps__text_2yi0h {
40
+ } .steps__step_xa3vu.steps__disabled_xa3vu:hover .steps__text_xa3vu {
41
41
  background: unset;
42
- } .steps__step_2yi0h.steps__disabled_2yi0h .steps__indicator_2yi0h {
42
+ } .steps__step_xa3vu.steps__disabled_xa3vu .steps__indicator_xa3vu {
43
43
  cursor: unset;
44
- } .steps__indicator_2yi0h {
44
+ } .steps__indicator_xa3vu {
45
45
  cursor: pointer;
46
46
  display: flex;
47
47
  align-items: center;
48
48
  margin-right: var(--gap-2xs)
49
- } .steps__indicator_2yi0h.steps__vertical_2yi0h {
49
+ } .steps__indicator_xa3vu.steps__vertical_xa3vu {
50
50
  flex-direction: column;
51
51
  margin-right: var(--gap-xs);
52
- } .steps__option_2yi0h {
52
+ } .steps__option_xa3vu {
53
53
  font-size: 14px;
54
54
  line-height: 20px;
55
55
  font-weight: 700;
@@ -62,25 +62,33 @@
62
62
  min-width: 24px;
63
63
  height: 24px;
64
64
  border-radius: var(--border-radius-circle)
65
- } .steps__option_2yi0h.steps__vertical_2yi0h {
65
+ } .steps__option_xa3vu.steps__vertical_xa3vu {
66
66
  margin-top: var(--gap-xs);
67
- } .steps__dash_2yi0h {
67
+ } .steps__dash_xa3vu {
68
68
  flex: 1 1 auto;
69
69
  min-width: 24px;
70
70
  border-top: 2px solid var(--color-light-neutral-translucent-300);
71
71
  margin-right: var(--gap-xs)
72
- } .steps__dash_2yi0h.steps__completed_2yi0h {
72
+ } .steps__dash_xa3vu.steps__size-16_xa3vu {
73
+ min-width: 16px;
74
+ } .steps__dash_xa3vu.steps__size-8_xa3vu {
75
+ min-width: 8px;
76
+ } .steps__dash_xa3vu.steps__completed_xa3vu {
73
77
  border-top: var(--steps-dash-border);
74
- } .steps__dash_2yi0h.steps__vertical_2yi0h {
78
+ } .steps__dash_xa3vu.steps__vertical_xa3vu {
75
79
  min-width: unset;
76
80
  min-height: 24px;
77
81
  margin-right: 0;
78
82
  margin-top: var(--gap-xs);
79
83
  border-left: 2px solid var(--color-light-neutral-translucent-300);
80
- border-top: none;
81
- } .steps__dash_2yi0h.steps__completed_2yi0h.steps__vertical_2yi0h {
84
+ border-top: none
85
+ } .steps__dash_xa3vu.steps__vertical_xa3vu.steps__size-16_xa3vu {
86
+ min-height: 16px;
87
+ } .steps__dash_xa3vu.steps__vertical_xa3vu.steps__size-8_xa3vu {
88
+ min-height: 8px;
89
+ } .steps__dash_xa3vu.steps__completed_xa3vu.steps__vertical_xa3vu {
82
90
  border-left: var(--steps-dash-border);
83
- } .steps__text_2yi0h {
91
+ } .steps__text_xa3vu {
84
92
  font-size: 16px;
85
93
  line-height: 24px;
86
94
  font-weight: 400;
@@ -90,19 +98,19 @@
90
98
  color: var(--color-light-text-primary);
91
99
  border-radius: var(--gap-xs);
92
100
  height: min-content
93
- } .steps__text_2yi0h.steps__interactive_2yi0h:not(.steps__disabled_2yi0h):hover {
101
+ } .steps__text_xa3vu.steps__interactive_xa3vu:not(.steps__disabled_xa3vu):hover {
94
102
  background: var(--color-light-transparent-default-hover);
95
- } .steps__text_2yi0h.steps__interactive_2yi0h:not(.steps__disabled_2yi0h):active {
103
+ } .steps__text_xa3vu.steps__interactive_xa3vu:not(.steps__disabled_xa3vu):active {
96
104
  background: var(--color-light-transparent-default-press);
97
- } .steps__focused_2yi0h {
105
+ } .steps__focused_xa3vu {
98
106
  outline: var(--gap-3xs) solid var(--focus-color);
99
107
  outline-offset: var(--gap-3xs);
100
- } .steps__selected_2yi0h .steps__text_2yi0h {
108
+ } .steps__selected_xa3vu .steps__text_xa3vu {
101
109
  color: var(--color-light-text-primary);
102
- } .steps__selected_2yi0h .steps__option_2yi0h {
110
+ } .steps__selected_xa3vu .steps__option_xa3vu {
103
111
  color: var(--color-light-text-primary-inverted);
104
112
  background: var(--color-light-neutral-1500);
105
- } .steps__checkbox_2yi0h {
113
+ } .steps__checkbox_xa3vu {
106
114
  display: flex;
107
115
  justify-content: center;
108
116
  align-items: center;
@@ -110,18 +118,20 @@
110
118
  width: 20px;
111
119
  height: 20px;
112
120
  border: 2px solid var(--color-light-neutral-translucent-300);
113
- } .steps__dot_2yi0h {
121
+ } .steps__dot_xa3vu {
114
122
  width: 10px;
115
123
  height: 10px;
116
124
  border-radius: var(--border-radius-circle);
117
125
  background: var(--color-light-neutral-translucent-300);
118
- } .steps__selected_2yi0h .steps__checkbox_2yi0h {
126
+ } .steps__selected_xa3vu .steps__checkbox_xa3vu {
119
127
  border: 2px solid var(--color-light-neutral-1500)
120
- } .steps__selected_2yi0h .steps__checkbox_2yi0h .steps__dot_2yi0h {
128
+ } .steps__selected_xa3vu .steps__checkbox_xa3vu .steps__dot_xa3vu {
121
129
  background: var(--color-light-neutral-1500);
122
- } .steps__option_2yi0h:not(.steps__error_2yi0h).steps__unordered_2yi0h {
130
+ } .steps__option_xa3vu:not(.steps__error_xa3vu).steps__unordered_xa3vu {
123
131
  background: unset;
124
- } .steps__completedIndicator_2yi0h > [class*='positive'] {
132
+ } .steps__completedIndicator_xa3vu > [class*='positive'] {
125
133
  color: var(--steps-option-svg-color);
126
134
  background-color: var(--steps-option-svg-color);
135
+ } .steps__fullWidth_xa3vu {
136
+ width: 100%;
127
137
  }
package/modern/components/step/index.js CHANGED
@@ -1,9 +1 @@
1
1
  export { Step } from './Component.js';
2
- import 'react';
3
- import 'classnames';
4
- import '@alfalab/hooks';
5
- import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
6
- import '@alfalab/icons-glyph/ClockMIcon';
7
- import '@alfalab/icons-glyph/ExclamationCircleMIcon';
8
- import '../step-indicator/Component.js';
9
- import '@alfalab/core-components-badge/modern';
package/modern/components/step-indicator/Component.js CHANGED
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import cn from 'classnames';
3
3
  import { Badge } from '@alfalab/core-components-badge/modern';
4
4
 
5
- const styles = {"component":"steps__component_qiryz"};
5
+ const styles = {"component":"steps__component_jcvzd"};
6
6
  require('./index.css')
7
7
 
8
8
  const StepIndicator = ({ content, iconColor, className }) => (React.createElement(Badge, { size: 'l', view: 'icon', iconColor: iconColor, className: cn(styles.component, className), content: content }));
package/modern/components/step-indicator/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: yw9u7 */
2
- .steps__component_qiryz {
1
+ /* hash: 1nohl */
2
+ .steps__component_jcvzd {
3
3
  padding: 0;
4
4
  }
package/modern/components/step-indicator/index.js CHANGED
@@ -1,4 +1 @@
1
1
  export { StepIndicator } from './Component.js';
2
- import 'react';
3
- import 'classnames';
4
- import '@alfalab/core-components-badge/modern';
package/modern/index.css CHANGED
@@ -1,5 +1,5 @@
1
- /* hash: 29j93 */
2
- :root {
1
+ /* hash: 1ocdx */
2
+ :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 */
3
3
  } /* 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 */
4
4
  } :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 */
5
5
  } :root {
@@ -14,11 +14,11 @@
14
14
  } :root {
15
15
  } :root {
16
16
  } :root {
17
- } .steps__component_1yc4g {
17
+ } .steps__component_1gfbz {
18
18
  display: flex;
19
19
  align-items: center;
20
20
  flex-direction: row
21
- } .steps__component_1yc4g.steps__vertical_1yc4g {
21
+ } .steps__component_1gfbz.steps__vertical_1gfbz {
22
22
  flex-direction: column;
23
23
  align-items: flex-start;
24
24
  }