@alfalab/core-components-steps 3.0.4 → 3.0.5-alfasans

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 (36) hide show
  1. package/components/step/Component.js +4 -2
  2. package/components/step/Component.js.map +1 -1
  3. package/components/step/index.css +42 -35
  4. package/components/step/index.module.css.js +1 -1
  5. package/components/step/index.module.css.js.map +1 -1
  6. package/components/step-indicator/index.css +1 -1
  7. package/components/step-indicator/index.module.css.js +1 -1
  8. package/cssm/components/step/Component.js +4 -2
  9. package/cssm/components/step/Component.js.map +1 -1
  10. package/cssm/components/step/index.module.css +11 -4
  11. package/esm/components/step/Component.js +4 -2
  12. package/esm/components/step/Component.js.map +1 -1
  13. package/esm/components/step/index.css +42 -35
  14. package/esm/components/step/index.module.css.js +1 -1
  15. package/esm/components/step/index.module.css.js.map +1 -1
  16. package/esm/components/step-indicator/index.css +1 -1
  17. package/esm/components/step-indicator/index.module.css.js +1 -1
  18. package/esm/index.css +2 -2
  19. package/esm/index.module.css.js +1 -1
  20. package/index.css +2 -2
  21. package/index.module.css.js +1 -1
  22. package/modern/components/step/Component.js +4 -2
  23. package/modern/components/step/Component.js.map +1 -1
  24. package/modern/components/step/index.css +42 -35
  25. package/modern/components/step/index.module.css.js +1 -1
  26. package/modern/components/step/index.module.css.js.map +1 -1
  27. package/modern/components/step-indicator/index.css +1 -1
  28. package/modern/components/step-indicator/index.module.css.js +1 -1
  29. package/modern/index.css +2 -2
  30. package/modern/index.module.css.js +1 -1
  31. package/moderncssm/components/step/Component.js +4 -2
  32. package/moderncssm/components/step/Component.js.map +1 -1
  33. package/moderncssm/components/step/index.module.css +9 -2
  34. package/package.json +6 -6
  35. package/src/components/step/Component.tsx +5 -2
  36. package/src/components/step/index.module.css +5 -0
package/esm/components/step/index.css CHANGED
@@ -23,8 +23,9 @@
23
23
  --gap-16: var(--gap-m);
24
24
  }
25
25
  :root {
26
- --font-family-system:
27
- system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
26
+ --font-family-alfasans:
27
+ 'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
28
+ Helvetica, sans-serif;
28
29
  }
29
30
  :root {
30
31
  --focus-color: var(--color-light-status-info);
@@ -33,44 +34,45 @@
33
34
  --steps-option-svg-color: var(--color-light-status-positive);
34
35
  --steps-dash-border: 2px solid var(--color-light-status-positive);
35
36
  }
36
- .steps__step_1fw7g {
37
+ .steps__step_1pdbf {
37
38
  display: flex;
38
39
  outline: none;
39
40
  }
40
- .steps__step_1fw7g.steps__horizontal_1fw7g {
41
+ .steps__step_1pdbf.steps__horizontal_1pdbf {
41
42
  flex-grow: 1;
42
43
  }
43
- .steps__step_1fw7g:not(.steps__vertical_1fw7g) {
44
+ .steps__step_1pdbf:not(.steps__vertical_1pdbf) {
44
45
  align-items: center;
45
46
  }
46
- .steps__step_1fw7g:last-of-type .steps__textWrapper_1fw7g.steps__vertical_1fw7g {
47
+ .steps__step_1pdbf:last-of-type .steps__textWrapper_1pdbf.steps__vertical_1pdbf {
47
48
  margin-bottom: var(--gap-0);
48
49
  }
49
- .steps__step_1fw7g.steps__interactive_1fw7g:not(.steps__disabled_1fw7g):hover {
50
+ .steps__step_1pdbf.steps__interactive_1pdbf:not(.steps__disabled_1pdbf):hover {
50
51
  cursor: pointer;
51
52
  }
52
- .steps__step_1fw7g.steps__disabled_1fw7g:hover .steps__text_1fw7g {
53
+ .steps__step_1pdbf.steps__disabled_1pdbf:hover .steps__text_1pdbf {
53
54
  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
54
55
  background: initial;
55
56
  }
56
- .steps__step_1fw7g.steps__disabled_1fw7g .steps__indicator_1fw7g {
57
+ .steps__step_1pdbf.steps__disabled_1pdbf .steps__indicator_1pdbf {
57
58
  cursor: inherit;
58
59
  }
59
- .steps__indicator_1fw7g {
60
+ .steps__indicator_1pdbf {
60
61
  cursor: pointer;
61
62
  display: flex;
62
63
  align-items: center;
63
64
  margin-right: var(--gap-4);
64
65
  }
65
- .steps__indicator_1fw7g.steps__vertical_1fw7g {
66
+ .steps__indicator_1pdbf.steps__vertical_1pdbf {
66
67
  flex-direction: column;
67
68
  margin-right: var(--gap-8);
68
69
  }
69
- .steps__option_1fw7g {
70
+ .steps__option_1pdbf {
70
71
  font-size: 14px;
71
72
  line-height: 20px;
72
73
  font-weight: 700;
73
- font-family: var(--font-family-system);
74
+ letter-spacing: 0.47px;
75
+ font-family: var(--font-family-alfasans);
74
76
 
75
77
  display: flex;
76
78
  align-items: center;
@@ -81,19 +83,19 @@
81
83
  height: 24px;
82
84
  border-radius: var(--border-radius-circle);
83
85
  }
84
- .steps__option_1fw7g.steps__vertical_1fw7g {
86
+ .steps__option_1pdbf.steps__vertical_1pdbf {
85
87
  margin-top: var(--gap-8);
86
88
  }
87
- .steps__dash_1fw7g {
89
+ .steps__dash_1pdbf {
88
90
  flex: 1 1 auto;
89
91
  min-width: 24px;
90
92
  border-top: 2px solid var(--color-light-neutral-translucent-300);
91
93
  margin-right: var(--gap-8);
92
94
  }
93
- .steps__dash_1fw7g.steps__completed_1fw7g {
95
+ .steps__dash_1pdbf.steps__completed_1pdbf {
94
96
  border-top: var(--steps-dash-border);
95
97
  }
96
- .steps__dash_1fw7g.steps__vertical_1fw7g {
98
+ .steps__dash_1pdbf.steps__vertical_1pdbf {
97
99
  min-width: 0;
98
100
  min-width: initial;
99
101
  min-height: 8px;
@@ -102,23 +104,27 @@
102
104
  border-left: 2px solid var(--color-light-neutral-translucent-300);
103
105
  border-top: none;
104
106
  }
105
- .steps__dash_1fw7g.steps__completed_1fw7g.steps__vertical_1fw7g {
107
+ .steps__dash_1pdbf.steps__completed_1pdbf.steps__vertical_1pdbf {
106
108
  border-left: var(--steps-dash-border);
107
109
  }
108
- .steps__textWrapper_1fw7g.steps__vertical_1fw7g {
110
+ .steps__textWrapper_1pdbf.steps__vertical_1pdbf {
109
111
  min-height: 48px;
110
112
  }
111
- .steps__textWrapper_1fw7g.steps__vertical_1fw7g.steps__gap-24_1fw7g {
113
+ .steps__textWrapper_1pdbf.steps__vertical_1pdbf.steps__gap-24_1pdbf {
112
114
  margin-bottom: var(--gap-8);
113
115
  }
114
- .steps__textWrapper_1fw7g.steps__vertical_1fw7g.steps__gap-32_1fw7g {
116
+ .steps__textWrapper_1pdbf.steps__vertical_1pdbf.steps__gap-32_1pdbf {
115
117
  margin-bottom: var(--gap-16);
116
118
  }
117
- .steps__text_1fw7g {
119
+ .steps__textWrapper_1pdbf.steps__vertical_1pdbf.steps__fullWidth_1pdbf {
120
+ width: 100%;
121
+ }
122
+ .steps__text_1pdbf {
118
123
  font-size: 16px;
119
124
  line-height: 24px;
120
125
  font-weight: 400;
121
- font-family: var(--font-family-system);
126
+ letter-spacing: -0.24px;
127
+ font-family: var(--font-family-alfasans);
122
128
 
123
129
  transition: background 0.2s;
124
130
  padding: var(--gap-8);
@@ -126,25 +132,26 @@
126
132
  border-radius: var(--gap-8);
127
133
  height: -moz-min-content;
128
134
  height: min-content;
135
+ box-sizing: border-box;
129
136
  }
130
- .steps__text_1fw7g.steps__interactive_1fw7g:not(.steps__disabled_1fw7g):hover {
137
+ .steps__text_1pdbf.steps__interactive_1pdbf:not(.steps__disabled_1pdbf):hover {
131
138
  background: var(--color-light-transparent-default-hover);
132
139
  }
133
- .steps__text_1fw7g.steps__interactive_1fw7g:not(.steps__disabled_1fw7g):active {
140
+ .steps__text_1pdbf.steps__interactive_1pdbf:not(.steps__disabled_1pdbf):active {
134
141
  background: var(--color-light-transparent-default-press);
135
142
  }
136
- .steps__focused_1fw7g {
143
+ .steps__focused_1pdbf {
137
144
  outline: var(--gap-2) solid var(--focus-color);
138
145
  outline-offset: var(--gap-2);
139
146
  }
140
- .steps__selected_1fw7g .steps__text_1fw7g {
147
+ .steps__selected_1pdbf .steps__text_1pdbf {
141
148
  color: var(--color-light-text-primary);
142
149
  }
143
- .steps__selected_1fw7g .steps__option_1fw7g {
150
+ .steps__selected_1pdbf .steps__option_1pdbf {
144
151
  color: var(--color-light-text-primary-inverted);
145
152
  background: var(--color-light-neutral-translucent-1300);
146
153
  }
147
- .steps__checkbox_1fw7g {
154
+ .steps__checkbox_1pdbf {
148
155
  display: flex;
149
156
  justify-content: center;
150
157
  align-items: center;
@@ -153,25 +160,25 @@
153
160
  height: 20px;
154
161
  border: 2px solid var(--color-light-neutral-translucent-300);
155
162
  }
156
- .steps__dot_1fw7g {
163
+ .steps__dot_1pdbf {
157
164
  width: 10px;
158
165
  height: 10px;
159
166
  border-radius: var(--border-radius-circle);
160
167
  background: var(--color-light-neutral-translucent-300);
161
168
  }
162
- .steps__selected_1fw7g .steps__checkbox_1fw7g {
169
+ .steps__selected_1pdbf .steps__checkbox_1pdbf {
163
170
  border: 2px solid var(--color-light-neutral-translucent-1300);
164
171
  }
165
- .steps__selected_1fw7g .steps__checkbox_1fw7g .steps__dot_1fw7g {
172
+ .steps__selected_1pdbf .steps__checkbox_1pdbf .steps__dot_1pdbf {
166
173
  background: var(--color-light-neutral-translucent-1300);
167
174
  }
168
- .steps__option_1fw7g:not(.steps__error_1fw7g).steps__unordered_1fw7g {
175
+ .steps__option_1pdbf:not(.steps__error_1pdbf).steps__unordered_1pdbf {
169
176
  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
170
177
  background: initial;
171
178
  }
172
- .steps__completedIndicator_1fw7g[class*='positive-checkmark'] {
179
+ .steps__completedIndicator_1pdbf[class*='positive-checkmark'] {
173
180
  background-color: var(--steps-option-svg-color);
174
181
  }
175
- .steps__fullWidth_1fw7g {
182
+ .steps__fullWidth_1pdbf {
176
183
  width: 100%;
177
184
  }
package/esm/components/step/index.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- var styles = {"step":"steps__step_1fw7g","horizontal":"steps__horizontal_1fw7g","vertical":"steps__vertical_1fw7g","textWrapper":"steps__textWrapper_1fw7g","interactive":"steps__interactive_1fw7g","disabled":"steps__disabled_1fw7g","text":"steps__text_1fw7g","indicator":"steps__indicator_1fw7g","option":"steps__option_1fw7g","dash":"steps__dash_1fw7g","completed":"steps__completed_1fw7g","gap-24":"steps__gap-24_1fw7g","gap-32":"steps__gap-32_1fw7g","focused":"steps__focused_1fw7g","selected":"steps__selected_1fw7g","checkbox":"steps__checkbox_1fw7g","dot":"steps__dot_1fw7g","error":"steps__error_1fw7g","unordered":"steps__unordered_1fw7g","completedIndicator":"steps__completedIndicator_1fw7g","fullWidth":"steps__fullWidth_1fw7g"};
3
+ var styles = {"step":"steps__step_1pdbf","horizontal":"steps__horizontal_1pdbf","vertical":"steps__vertical_1pdbf","textWrapper":"steps__textWrapper_1pdbf","interactive":"steps__interactive_1pdbf","disabled":"steps__disabled_1pdbf","text":"steps__text_1pdbf","indicator":"steps__indicator_1pdbf","option":"steps__option_1pdbf","dash":"steps__dash_1pdbf","completed":"steps__completed_1pdbf","gap-24":"steps__gap-24_1pdbf","gap-32":"steps__gap-32_1pdbf","fullWidth":"steps__fullWidth_1pdbf","focused":"steps__focused_1pdbf","selected":"steps__selected_1pdbf","checkbox":"steps__checkbox_1pdbf","dot":"steps__dot_1pdbf","error":"steps__error_1pdbf","unordered":"steps__unordered_1pdbf","completedIndicator":"steps__completedIndicator_1pdbf"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
package/esm/components/step/index.module.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.module.css.js","sources":["../../src/components/step/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n:root {\n --steps-option-svg-color: var(--color-light-status-positive);\n --steps-dash-border: 2px solid var(--color-light-status-positive);\n}\n\n.step {\n display: flex;\n outline: none;\n\n &.horizontal {\n flex-grow: 1;\n }\n\n &:not(.vertical) {\n align-items: center;\n }\n\n &:last-of-type .textWrapper.vertical {\n margin-bottom: var(--gap-0);\n }\n}\n\n.step.interactive:not(.disabled):hover {\n cursor: pointer;\n}\n\n.step.disabled:hover {\n & .text {\n background: unset;\n }\n}\n\n.step.disabled {\n & .indicator {\n cursor: unset;\n }\n}\n\n.indicator {\n cursor: pointer;\n display: flex;\n align-items: center;\n margin-right: var(--gap-4);\n\n &.vertical {\n flex-direction: column;\n margin-right: var(--gap-8);\n }\n}\n\n.option {\n @mixin accent_primary_small;\n\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--color-light-text-primary);\n background: var(--color-light-neutral-translucent-300);\n min-width: 24px;\n height: 24px;\n border-radius: var(--border-radius-circle);\n\n &.vertical {\n margin-top: var(--gap-8);\n }\n}\n\n.dash {\n flex: 1 1 auto;\n min-width: 24px;\n border-top: 2px solid var(--color-light-neutral-translucent-300);\n margin-right: var(--gap-8);\n\n &.completed {\n border-top: var(--steps-dash-border);\n }\n\n &.vertical {\n min-width: unset;\n min-height: 8px;\n margin-right: var(--gap-0);\n margin-top: var(--gap-8);\n border-left: 2px solid var(--color-light-neutral-translucent-300);\n border-top: none;\n }\n\n &.completed.vertical {\n border-left: var(--steps-dash-border);\n }\n}\n\n.textWrapper {\n &.vertical {\n min-height: 48px;\n\n &.gap-24 {\n margin-bottom: var(--gap-8);\n }\n\n &.gap-32 {\n margin-bottom: var(--gap-16);\n }\n }\n}\n\n.text {\n @mixin paragraph_primary_medium;\n\n transition: background 0.2s;\n padding: var(--gap-8);\n color: var(--color-light-text-primary);\n border-radius: var(--gap-8);\n height: min-content;\n\n &.interactive:not(.disabled) {\n &:hover {\n background: var(--color-light-transparent-default-hover);\n }\n\n &:active {\n background: var(--color-light-transparent-default-press);\n }\n }\n}\n\n.focused {\n outline: var(--gap-2) solid var(--focus-color);\n outline-offset: var(--gap-2);\n}\n\n.selected {\n & .text {\n color: var(--color-light-text-primary);\n }\n\n & .option {\n color: var(--color-light-text-primary-inverted);\n background: var(--color-light-neutral-translucent-1300);\n }\n}\n\n.checkbox {\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: var(--border-radius-circle);\n width: 20px;\n height: 20px;\n border: 2px solid var(--color-light-neutral-translucent-300);\n}\n\n.dot {\n width: 10px;\n height: 10px;\n border-radius: var(--border-radius-circle);\n background: var(--color-light-neutral-translucent-300);\n}\n\n.selected .checkbox {\n border: 2px solid var(--color-light-neutral-translucent-1300);\n\n & .dot {\n background: var(--color-light-neutral-translucent-1300);\n }\n}\n\n.option:not(.error).unordered {\n background: unset;\n}\n\n.completedIndicator[class*='positive-checkmark'] {\n background-color: var(--steps-option-svg-color);\n}\n\n.fullWidth {\n width: 100%;\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,MAAM,CAAC,mBAAmB,CAAC,YAAY,CAAC,yBAAyB,CAAC,UAAU,CAAC,uBAAuB,CAAC,aAAa,CAAC,0BAA0B,CAAC,aAAa,CAAC,0BAA0B,CAAC,UAAU,CAAC,uBAAuB,CAAC,MAAM,CAAC,mBAAmB,CAAC,WAAW,CAAC,wBAAwB,CAAC,QAAQ,CAAC,qBAAqB,CAAC,MAAM,CAAC,mBAAmB,CAAC,WAAW,CAAC,wBAAwB,CAAC,QAAQ,CAAC,qBAAqB,CAAC,QAAQ,CAAC,qBAAqB,CAAC,SAAS,CAAC,sBAAsB,CAAC,UAAU,CAAC,uBAAuB,CAAC,UAAU,CAAC,uBAAuB,CAAC,KAAK,CAAC,kBAAkB,CAAC,OAAO,CAAC,oBAAoB,CAAC,WAAW,CAAC,wBAAwB,CAAC,oBAAoB,CAAC,iCAAiC,CAAC,WAAW,CAAC,wBAAwB,CAAC;;;;"}
1
+ {"version":3,"file":"index.module.css.js","sources":["../../src/components/step/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n:root {\n --steps-option-svg-color: var(--color-light-status-positive);\n --steps-dash-border: 2px solid var(--color-light-status-positive);\n}\n\n.step {\n display: flex;\n outline: none;\n\n &.horizontal {\n flex-grow: 1;\n }\n\n &:not(.vertical) {\n align-items: center;\n }\n\n &:last-of-type .textWrapper.vertical {\n margin-bottom: var(--gap-0);\n }\n}\n\n.step.interactive:not(.disabled):hover {\n cursor: pointer;\n}\n\n.step.disabled:hover {\n & .text {\n background: unset;\n }\n}\n\n.step.disabled {\n & .indicator {\n cursor: unset;\n }\n}\n\n.indicator {\n cursor: pointer;\n display: flex;\n align-items: center;\n margin-right: var(--gap-4);\n\n &.vertical {\n flex-direction: column;\n margin-right: var(--gap-8);\n }\n}\n\n.option {\n @mixin accent_primary_small;\n\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--color-light-text-primary);\n background: var(--color-light-neutral-translucent-300);\n min-width: 24px;\n height: 24px;\n border-radius: var(--border-radius-circle);\n\n &.vertical {\n margin-top: var(--gap-8);\n }\n}\n\n.dash {\n flex: 1 1 auto;\n min-width: 24px;\n border-top: 2px solid var(--color-light-neutral-translucent-300);\n margin-right: var(--gap-8);\n\n &.completed {\n border-top: var(--steps-dash-border);\n }\n\n &.vertical {\n min-width: unset;\n min-height: 8px;\n margin-right: var(--gap-0);\n margin-top: var(--gap-8);\n border-left: 2px solid var(--color-light-neutral-translucent-300);\n border-top: none;\n }\n\n &.completed.vertical {\n border-left: var(--steps-dash-border);\n }\n}\n\n.textWrapper {\n &.vertical {\n min-height: 48px;\n\n &.gap-24 {\n margin-bottom: var(--gap-8);\n }\n\n &.gap-32 {\n margin-bottom: var(--gap-16);\n }\n\n &.fullWidth {\n width: 100%;\n }\n }\n}\n\n.text {\n @mixin paragraph_primary_medium;\n\n transition: background 0.2s;\n padding: var(--gap-8);\n color: var(--color-light-text-primary);\n border-radius: var(--gap-8);\n height: min-content;\n box-sizing: border-box;\n\n &.interactive:not(.disabled) {\n &:hover {\n background: var(--color-light-transparent-default-hover);\n }\n\n &:active {\n background: var(--color-light-transparent-default-press);\n }\n }\n}\n\n.focused {\n outline: var(--gap-2) solid var(--focus-color);\n outline-offset: var(--gap-2);\n}\n\n.selected {\n & .text {\n color: var(--color-light-text-primary);\n }\n\n & .option {\n color: var(--color-light-text-primary-inverted);\n background: var(--color-light-neutral-translucent-1300);\n }\n}\n\n.checkbox {\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: var(--border-radius-circle);\n width: 20px;\n height: 20px;\n border: 2px solid var(--color-light-neutral-translucent-300);\n}\n\n.dot {\n width: 10px;\n height: 10px;\n border-radius: var(--border-radius-circle);\n background: var(--color-light-neutral-translucent-300);\n}\n\n.selected .checkbox {\n border: 2px solid var(--color-light-neutral-translucent-1300);\n\n & .dot {\n background: var(--color-light-neutral-translucent-1300);\n }\n}\n\n.option:not(.error).unordered {\n background: unset;\n}\n\n.completedIndicator[class*='positive-checkmark'] {\n background-color: var(--steps-option-svg-color);\n}\n\n.fullWidth {\n width: 100%;\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,MAAM,CAAC,mBAAmB,CAAC,YAAY,CAAC,yBAAyB,CAAC,UAAU,CAAC,uBAAuB,CAAC,aAAa,CAAC,0BAA0B,CAAC,aAAa,CAAC,0BAA0B,CAAC,UAAU,CAAC,uBAAuB,CAAC,MAAM,CAAC,mBAAmB,CAAC,WAAW,CAAC,wBAAwB,CAAC,QAAQ,CAAC,qBAAqB,CAAC,MAAM,CAAC,mBAAmB,CAAC,WAAW,CAAC,wBAAwB,CAAC,QAAQ,CAAC,qBAAqB,CAAC,QAAQ,CAAC,qBAAqB,CAAC,WAAW,CAAC,wBAAwB,CAAC,SAAS,CAAC,sBAAsB,CAAC,UAAU,CAAC,uBAAuB,CAAC,UAAU,CAAC,uBAAuB,CAAC,KAAK,CAAC,kBAAkB,CAAC,OAAO,CAAC,oBAAoB,CAAC,WAAW,CAAC,wBAAwB,CAAC,oBAAoB,CAAC,iCAAiC,CAAC;;;;"}
package/esm/components/step-indicator/index.css CHANGED
@@ -1,6 +1,6 @@
1
1
  :root {
2
2
  --gap-0: 0px;
3
3
  }
4
- .steps__component_1s7m6.steps__component_1s7m6 {
4
+ .steps__component_111zn.steps__component_111zn {
5
5
  padding: var(--gap-0);
6
6
  }
package/esm/components/step-indicator/index.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- var styles = {"component":"steps__component_1s7m6"};
3
+ var styles = {"component":"steps__component_111zn"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
package/esm/index.css CHANGED
@@ -1,9 +1,9 @@
1
- .steps__component_671rj {
1
+ .steps__component_1x6oy {
2
2
  display: flex;
3
3
  align-items: center;
4
4
  flex-direction: row;
5
5
  }
6
- .steps__component_671rj.steps__vertical_671rj {
6
+ .steps__component_1x6oy.steps__vertical_1x6oy {
7
7
  flex-direction: column;
8
8
  align-items: flex-start;
9
9
  }
package/esm/index.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- var styles = {"component":"steps__component_671rj","vertical":"steps__vertical_671rj"};
3
+ var styles = {"component":"steps__component_1x6oy","vertical":"steps__vertical_1x6oy"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
package/index.css CHANGED
@@ -1,9 +1,9 @@
1
- .steps__component_671rj {
1
+ .steps__component_1x6oy {
2
2
  display: flex;
3
3
  align-items: center;
4
4
  flex-direction: row;
5
5
  }
6
- .steps__component_671rj.steps__vertical_671rj {
6
+ .steps__component_1x6oy.steps__vertical_1x6oy {
7
7
  flex-direction: column;
8
8
  align-items: flex-start;
9
9
  }
package/index.module.css.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  require('./index.css');
4
4
 
5
- var styles = {"component":"steps__component_671rj","vertical":"steps__vertical_671rj"};
5
+ var styles = {"component":"steps__component_1x6oy","vertical":"steps__vertical_1x6oy"};
6
6
 
7
7
  module.exports = styles;
8
8
  //# sourceMappingURL=index.module.css.js.map
package/modern/components/step/Component.js CHANGED
@@ -9,6 +9,7 @@ import styles from './index.module.css.js';
9
9
  const Step = ({ children, stepNumber, isSelected, disabled, ordered, isPositive, isError, isCriticalError, isWarning, isWaiting, customStepIndicator, isStepCompleted, onClick, interactive, isVerticalAlign, isNotLastStep, fullWidth, minSpaceBetweenSteps = 24, completedDashColor, dataTestId, }) => {
10
10
  const stepRef = useRef(null);
11
11
  const [focused] = useFocus(stepRef, 'keyboard');
12
+ const isFullWidth = fullWidth && isVerticalAlign;
12
13
  const handleButtonClick = () => {
13
14
  if (!disabled && interactive && onClick) {
14
15
  onClick(stepNumber);
@@ -74,7 +75,7 @@ const Step = ({ children, stepNumber, isSelected, disabled, ordered, isPositive,
74
75
  [styles.focused]: focused,
75
76
  [styles.vertical]: isVerticalAlign,
76
77
  [styles.interactive]: interactive,
77
- [styles.fullWidth]: fullWidth && isVerticalAlign,
78
+ [styles.fullWidth]: isFullWidth,
78
79
  [styles.horizontal]: !isVerticalAlign,
79
80
  }), onClick: handleButtonClick, onKeyDown: handleKeyDown },
80
81
  React.createElement("div", { className: cn(styles.indicator, {
@@ -89,10 +90,11 @@ const Step = ({ children, stepNumber, isSelected, disabled, ordered, isPositive,
89
90
  isNotLastStep && isVerticalAlign && renderDash()),
90
91
  React.createElement("div", { className: cn(styles.textWrapper, styles[`gap-${minSpaceBetweenSteps}`], {
91
92
  [styles.vertical]: isVerticalAlign,
93
+ [styles.fullWidth]: isFullWidth,
92
94
  }) },
93
95
  React.createElement("div", { className: cn(styles.text, {
94
96
  [styles.interactive]: interactive,
95
- [styles.fullWidth]: fullWidth && isVerticalAlign,
97
+ [styles.fullWidth]: isFullWidth,
96
98
  }), onClick: handleTextClick }, children)),
97
99
  isNotLastStep && !isVerticalAlign && renderDash()));
98
100
  };
package/modern/components/step/Component.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Component.js","sources":["../../../src/components/step/Component.tsx"],"sourcesContent":["import React, { type FC, useRef } from 'react';\nimport cn from 'classnames';\n\nimport { Badge } from '@alfalab/core-components-badge';\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { useFocus } from '@alfalab/hooks';\n\nimport { type CommonProps } from '../../types/common-props';\nimport { StepIndicator, type StepIndicatorProps } from '../step-indicator';\n\nimport styles from './index.module.css';\n\ninterface StepProps extends CommonProps {\n /**\n * Номер шага\n */\n stepNumber: number;\n\n /**\n * Маркер того, что текущий шаг выбран\n */\n isSelected: boolean;\n\n /**\n * Маркер того, что текущий шаг доступен для клика\n */\n disabled: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Positive\"\n */\n isPositive: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Error\"\n */\n isError: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"isCriticalError\"\n */\n isCriticalError: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Warning\"\n */\n isWarning: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Waiting\"\n */\n isWaiting: boolean;\n\n /**\n * Маркер того, что текущий шаг нужно пометить как завершенный\n */\n isStepCompleted: boolean;\n\n /**\n * Свойства кастомного индикатора текущего шага\n */\n customStepIndicator?: StepIndicatorProps | null;\n\n /**\n * Указывает, является ли текущий шаг последним в списке\n */\n isNotLastStep?: boolean;\n\n /**\n * Обработчик нажатия на текущей шаг\n * @param stepNumber - номер шага\n */\n onClick: (stepNumber: number) => void;\n}\n\nexport const Step: FC<StepProps> = ({\n children,\n stepNumber,\n isSelected,\n disabled,\n ordered,\n isPositive,\n isError,\n isCriticalError,\n isWarning,\n isWaiting,\n customStepIndicator,\n isStepCompleted,\n onClick,\n interactive,\n isVerticalAlign,\n isNotLastStep,\n fullWidth,\n minSpaceBetweenSteps = 24,\n completedDashColor,\n dataTestId,\n}) => {\n const stepRef = useRef<HTMLDivElement>(null);\n\n const [focused] = useFocus(stepRef, 'keyboard');\n\n const handleButtonClick = () => {\n if (!disabled && interactive && onClick) {\n onClick(stepNumber);\n }\n };\n\n const handleTextClick = (e: React.MouseEvent<HTMLElement>) => {\n if (!interactive) {\n e.stopPropagation();\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (event.key === 'Enter') {\n handleButtonClick();\n }\n };\n\n const getStepIndicator = () => {\n if (customStepIndicator) {\n return <Badge view='icon' size='l' {...customStepIndicator} />;\n }\n if (isCriticalError) {\n return <StepIndicator view='negative-cross' />;\n }\n if (isError) {\n return <StepIndicator view='negative-alert' />;\n }\n if (isWarning) {\n return <StepIndicator view='attention-alert' />;\n }\n if (isWaiting) {\n return <StepIndicator view='neutral-operation' />;\n }\n if (isPositive) {\n return <StepIndicator view='positive-checkmark' />;\n }\n if (isStepCompleted) {\n return (\n <StepIndicator view='positive-checkmark' className={styles.completedIndicator} />\n );\n }\n if (!ordered) {\n return (\n <div className={styles.checkbox}>\n <span className={styles.dot} />\n </div>\n );\n }\n\n return stepNumber;\n };\n\n const getCustomDashColor = () => {\n if (isStepCompleted && completedDashColor) {\n return {\n borderColor: completedDashColor,\n };\n }\n\n return {};\n };\n\n const renderDash = () => (\n <div\n className={cn(styles.dash, {\n [styles.vertical]: isVerticalAlign,\n [styles.completed]: isStepCompleted,\n })}\n style={{\n ...getCustomDashColor(),\n }}\n />\n );\n\n return (\n <div\n data-test-id={getDataTestId(dataTestId, 'step')}\n role='button'\n tabIndex={0}\n ref={stepRef}\n className={cn(styles.step, {\n [styles.completed]: isStepCompleted,\n [styles.error]: isError,\n [styles.selected]: isSelected,\n [styles.disabled]: disabled,\n [styles.focused]: focused,\n [styles.vertical]: isVerticalAlign,\n [styles.interactive]: interactive,\n [styles.fullWidth]: fullWidth && isVerticalAlign,\n [styles.horizontal]: !isVerticalAlign,\n })}\n onClick={handleButtonClick}\n onKeyDown={handleKeyDown}\n >\n <div\n className={cn(styles.indicator, {\n [styles.vertical]: isVerticalAlign,\n [styles.interactive]: interactive,\n })}\n >\n <div\n className={cn(styles.option, {\n [styles.unordered]: !ordered,\n [styles.vertical]: isVerticalAlign,\n [styles.error]: isError,\n })}\n >\n {getStepIndicator()}\n </div>\n {isNotLastStep && isVerticalAlign && renderDash()}\n </div>\n <div\n className={cn(styles.textWrapper, styles[`gap-${minSpaceBetweenSteps}`], {\n [styles.vertical]: isVerticalAlign,\n })}\n >\n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n <div\n className={cn(styles.text, {\n [styles.interactive]: interactive,\n [styles.fullWidth]: fullWidth && isVerticalAlign,\n })}\n onClick={handleTextClick}\n >\n {children}\n </div>\n </div>\n {isNotLastStep && !isVerticalAlign && renderDash()}\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Component.js","sources":["../../../src/components/step/Component.tsx"],"sourcesContent":["import React, { type FC, useRef } from 'react';\nimport cn from 'classnames';\n\nimport { Badge } from '@alfalab/core-components-badge';\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { useFocus } from '@alfalab/hooks';\n\nimport { type CommonProps } from '../../types/common-props';\nimport { StepIndicator, type StepIndicatorProps } from '../step-indicator';\n\nimport styles from './index.module.css';\n\ninterface StepProps extends CommonProps {\n /**\n * Номер шага\n */\n stepNumber: number;\n\n /**\n * Маркер того, что текущий шаг выбран\n */\n isSelected: boolean;\n\n /**\n * Маркер того, что текущий шаг доступен для клика\n */\n disabled: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Positive\"\n */\n isPositive: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Error\"\n */\n isError: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"isCriticalError\"\n */\n isCriticalError: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Warning\"\n */\n isWarning: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Waiting\"\n */\n isWaiting: boolean;\n\n /**\n * Маркер того, что текущий шаг нужно пометить как завершенный\n */\n isStepCompleted: boolean;\n\n /**\n * Свойства кастомного индикатора текущего шага\n */\n customStepIndicator?: StepIndicatorProps | null;\n\n /**\n * Указывает, является ли текущий шаг последним в списке\n */\n isNotLastStep?: boolean;\n\n /**\n * Обработчик нажатия на текущей шаг\n * @param stepNumber - номер шага\n */\n onClick: (stepNumber: number) => void;\n}\n\nexport const Step: FC<StepProps> = ({\n children,\n stepNumber,\n isSelected,\n disabled,\n ordered,\n isPositive,\n isError,\n isCriticalError,\n isWarning,\n isWaiting,\n customStepIndicator,\n isStepCompleted,\n onClick,\n interactive,\n isVerticalAlign,\n isNotLastStep,\n fullWidth,\n minSpaceBetweenSteps = 24,\n completedDashColor,\n dataTestId,\n}) => {\n const stepRef = useRef<HTMLDivElement>(null);\n\n const [focused] = useFocus(stepRef, 'keyboard');\n\n const isFullWidth = fullWidth && isVerticalAlign;\n\n const handleButtonClick = () => {\n if (!disabled && interactive && onClick) {\n onClick(stepNumber);\n }\n };\n\n const handleTextClick = (e: React.MouseEvent<HTMLElement>) => {\n if (!interactive) {\n e.stopPropagation();\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (event.key === 'Enter') {\n handleButtonClick();\n }\n };\n\n const getStepIndicator = () => {\n if (customStepIndicator) {\n return <Badge view='icon' size='l' {...customStepIndicator} />;\n }\n if (isCriticalError) {\n return <StepIndicator view='negative-cross' />;\n }\n if (isError) {\n return <StepIndicator view='negative-alert' />;\n }\n if (isWarning) {\n return <StepIndicator view='attention-alert' />;\n }\n if (isWaiting) {\n return <StepIndicator view='neutral-operation' />;\n }\n if (isPositive) {\n return <StepIndicator view='positive-checkmark' />;\n }\n if (isStepCompleted) {\n return (\n <StepIndicator view='positive-checkmark' className={styles.completedIndicator} />\n );\n }\n if (!ordered) {\n return (\n <div className={styles.checkbox}>\n <span className={styles.dot} />\n </div>\n );\n }\n\n return stepNumber;\n };\n\n const getCustomDashColor = () => {\n if (isStepCompleted && completedDashColor) {\n return {\n borderColor: completedDashColor,\n };\n }\n\n return {};\n };\n\n const renderDash = () => (\n <div\n className={cn(styles.dash, {\n [styles.vertical]: isVerticalAlign,\n [styles.completed]: isStepCompleted,\n })}\n style={{\n ...getCustomDashColor(),\n }}\n />\n );\n\n return (\n <div\n data-test-id={getDataTestId(dataTestId, 'step')}\n role='button'\n tabIndex={0}\n ref={stepRef}\n className={cn(styles.step, {\n [styles.completed]: isStepCompleted,\n [styles.error]: isError,\n [styles.selected]: isSelected,\n [styles.disabled]: disabled,\n [styles.focused]: focused,\n [styles.vertical]: isVerticalAlign,\n [styles.interactive]: interactive,\n [styles.fullWidth]: isFullWidth,\n [styles.horizontal]: !isVerticalAlign,\n })}\n onClick={handleButtonClick}\n onKeyDown={handleKeyDown}\n >\n <div\n className={cn(styles.indicator, {\n [styles.vertical]: isVerticalAlign,\n [styles.interactive]: interactive,\n })}\n >\n <div\n className={cn(styles.option, {\n [styles.unordered]: !ordered,\n [styles.vertical]: isVerticalAlign,\n [styles.error]: isError,\n })}\n >\n {getStepIndicator()}\n </div>\n {isNotLastStep && isVerticalAlign && renderDash()}\n </div>\n <div\n className={cn(styles.textWrapper, styles[`gap-${minSpaceBetweenSteps}`], {\n [styles.vertical]: isVerticalAlign,\n [styles.fullWidth]: isFullWidth,\n })}\n >\n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n <div\n className={cn(styles.text, {\n [styles.interactive]: interactive,\n [styles.fullWidth]: isFullWidth,\n })}\n onClick={handleTextClick}\n >\n {children}\n </div>\n </div>\n {isNotLastStep && !isVerticalAlign && renderDash()}\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
package/modern/components/step/index.css CHANGED
@@ -23,8 +23,9 @@
23
23
  --gap-16: var(--gap-m);
24
24
  }
25
25
  :root {
26
- --font-family-system:
27
- system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
26
+ --font-family-alfasans:
27
+ 'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
28
+ Helvetica, sans-serif;
28
29
  }
29
30
  :root {
30
31
  --focus-color: var(--color-light-status-info);
@@ -33,44 +34,45 @@
33
34
  --steps-option-svg-color: var(--color-light-status-positive);
34
35
  --steps-dash-border: 2px solid var(--color-light-status-positive);
35
36
  }
36
- .steps__step_1fw7g {
37
+ .steps__step_1pdbf {
37
38
  display: flex;
38
39
  outline: none;
39
40
  }
40
- .steps__step_1fw7g.steps__horizontal_1fw7g {
41
+ .steps__step_1pdbf.steps__horizontal_1pdbf {
41
42
  flex-grow: 1;
42
43
  }
43
- .steps__step_1fw7g:not(.steps__vertical_1fw7g) {
44
+ .steps__step_1pdbf:not(.steps__vertical_1pdbf) {
44
45
  align-items: center;
45
46
  }
46
- .steps__step_1fw7g:last-of-type .steps__textWrapper_1fw7g.steps__vertical_1fw7g {
47
+ .steps__step_1pdbf:last-of-type .steps__textWrapper_1pdbf.steps__vertical_1pdbf {
47
48
  margin-bottom: var(--gap-0);
48
49
  }
49
- .steps__step_1fw7g.steps__interactive_1fw7g:not(.steps__disabled_1fw7g):hover {
50
+ .steps__step_1pdbf.steps__interactive_1pdbf:not(.steps__disabled_1pdbf):hover {
50
51
  cursor: pointer;
51
52
  }
52
- .steps__step_1fw7g.steps__disabled_1fw7g:hover .steps__text_1fw7g {
53
+ .steps__step_1pdbf.steps__disabled_1pdbf:hover .steps__text_1pdbf {
53
54
  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
54
55
  background: initial;
55
56
  }
56
- .steps__step_1fw7g.steps__disabled_1fw7g .steps__indicator_1fw7g {
57
+ .steps__step_1pdbf.steps__disabled_1pdbf .steps__indicator_1pdbf {
57
58
  cursor: inherit;
58
59
  }
59
- .steps__indicator_1fw7g {
60
+ .steps__indicator_1pdbf {
60
61
  cursor: pointer;
61
62
  display: flex;
62
63
  align-items: center;
63
64
  margin-right: var(--gap-4);
64
65
  }
65
- .steps__indicator_1fw7g.steps__vertical_1fw7g {
66
+ .steps__indicator_1pdbf.steps__vertical_1pdbf {
66
67
  flex-direction: column;
67
68
  margin-right: var(--gap-8);
68
69
  }
69
- .steps__option_1fw7g {
70
+ .steps__option_1pdbf {
70
71
  font-size: 14px;
71
72
  line-height: 20px;
72
73
  font-weight: 700;
73
- font-family: var(--font-family-system);
74
+ letter-spacing: 0.47px;
75
+ font-family: var(--font-family-alfasans);
74
76
 
75
77
  display: flex;
76
78
  align-items: center;
@@ -81,19 +83,19 @@
81
83
  height: 24px;
82
84
  border-radius: var(--border-radius-circle);
83
85
  }
84
- .steps__option_1fw7g.steps__vertical_1fw7g {
86
+ .steps__option_1pdbf.steps__vertical_1pdbf {
85
87
  margin-top: var(--gap-8);
86
88
  }
87
- .steps__dash_1fw7g {
89
+ .steps__dash_1pdbf {
88
90
  flex: 1 1 auto;
89
91
  min-width: 24px;
90
92
  border-top: 2px solid var(--color-light-neutral-translucent-300);
91
93
  margin-right: var(--gap-8);
92
94
  }
93
- .steps__dash_1fw7g.steps__completed_1fw7g {
95
+ .steps__dash_1pdbf.steps__completed_1pdbf {
94
96
  border-top: var(--steps-dash-border);
95
97
  }
96
- .steps__dash_1fw7g.steps__vertical_1fw7g {
98
+ .steps__dash_1pdbf.steps__vertical_1pdbf {
97
99
  min-width: 0;
98
100
  min-width: initial;
99
101
  min-height: 8px;
@@ -102,23 +104,27 @@
102
104
  border-left: 2px solid var(--color-light-neutral-translucent-300);
103
105
  border-top: none;
104
106
  }
105
- .steps__dash_1fw7g.steps__completed_1fw7g.steps__vertical_1fw7g {
107
+ .steps__dash_1pdbf.steps__completed_1pdbf.steps__vertical_1pdbf {
106
108
  border-left: var(--steps-dash-border);
107
109
  }
108
- .steps__textWrapper_1fw7g.steps__vertical_1fw7g {
110
+ .steps__textWrapper_1pdbf.steps__vertical_1pdbf {
109
111
  min-height: 48px;
110
112
  }
111
- .steps__textWrapper_1fw7g.steps__vertical_1fw7g.steps__gap-24_1fw7g {
113
+ .steps__textWrapper_1pdbf.steps__vertical_1pdbf.steps__gap-24_1pdbf {
112
114
  margin-bottom: var(--gap-8);
113
115
  }
114
- .steps__textWrapper_1fw7g.steps__vertical_1fw7g.steps__gap-32_1fw7g {
116
+ .steps__textWrapper_1pdbf.steps__vertical_1pdbf.steps__gap-32_1pdbf {
115
117
  margin-bottom: var(--gap-16);
116
118
  }
117
- .steps__text_1fw7g {
119
+ .steps__textWrapper_1pdbf.steps__vertical_1pdbf.steps__fullWidth_1pdbf {
120
+ width: 100%;
121
+ }
122
+ .steps__text_1pdbf {
118
123
  font-size: 16px;
119
124
  line-height: 24px;
120
125
  font-weight: 400;
121
- font-family: var(--font-family-system);
126
+ letter-spacing: -0.24px;
127
+ font-family: var(--font-family-alfasans);
122
128
 
123
129
  transition: background 0.2s;
124
130
  padding: var(--gap-8);
@@ -126,25 +132,26 @@
126
132
  border-radius: var(--gap-8);
127
133
  height: -moz-min-content;
128
134
  height: min-content;
135
+ box-sizing: border-box;
129
136
  }
130
- .steps__text_1fw7g.steps__interactive_1fw7g:not(.steps__disabled_1fw7g):hover {
137
+ .steps__text_1pdbf.steps__interactive_1pdbf:not(.steps__disabled_1pdbf):hover {
131
138
  background: var(--color-light-transparent-default-hover);
132
139
  }
133
- .steps__text_1fw7g.steps__interactive_1fw7g:not(.steps__disabled_1fw7g):active {
140
+ .steps__text_1pdbf.steps__interactive_1pdbf:not(.steps__disabled_1pdbf):active {
134
141
  background: var(--color-light-transparent-default-press);
135
142
  }
136
- .steps__focused_1fw7g {
143
+ .steps__focused_1pdbf {
137
144
  outline: var(--gap-2) solid var(--focus-color);
138
145
  outline-offset: var(--gap-2);
139
146
  }
140
- .steps__selected_1fw7g .steps__text_1fw7g {
147
+ .steps__selected_1pdbf .steps__text_1pdbf {
141
148
  color: var(--color-light-text-primary);
142
149
  }
143
- .steps__selected_1fw7g .steps__option_1fw7g {
150
+ .steps__selected_1pdbf .steps__option_1pdbf {
144
151
  color: var(--color-light-text-primary-inverted);
145
152
  background: var(--color-light-neutral-translucent-1300);
146
153
  }
147
- .steps__checkbox_1fw7g {
154
+ .steps__checkbox_1pdbf {
148
155
  display: flex;
149
156
  justify-content: center;
150
157
  align-items: center;
@@ -153,25 +160,25 @@
153
160
  height: 20px;
154
161
  border: 2px solid var(--color-light-neutral-translucent-300);
155
162
  }
156
- .steps__dot_1fw7g {
163
+ .steps__dot_1pdbf {
157
164
  width: 10px;
158
165
  height: 10px;
159
166
  border-radius: var(--border-radius-circle);
160
167
  background: var(--color-light-neutral-translucent-300);
161
168
  }
162
- .steps__selected_1fw7g .steps__checkbox_1fw7g {
169
+ .steps__selected_1pdbf .steps__checkbox_1pdbf {
163
170
  border: 2px solid var(--color-light-neutral-translucent-1300);
164
171
  }
165
- .steps__selected_1fw7g .steps__checkbox_1fw7g .steps__dot_1fw7g {
172
+ .steps__selected_1pdbf .steps__checkbox_1pdbf .steps__dot_1pdbf {
166
173
  background: var(--color-light-neutral-translucent-1300);
167
174
  }
168
- .steps__option_1fw7g:not(.steps__error_1fw7g).steps__unordered_1fw7g {
175
+ .steps__option_1pdbf:not(.steps__error_1pdbf).steps__unordered_1pdbf {
169
176
  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
170
177
  background: initial;
171
178
  }
172
- .steps__completedIndicator_1fw7g[class*='positive-checkmark'] {
179
+ .steps__completedIndicator_1pdbf[class*='positive-checkmark'] {
173
180
  background-color: var(--steps-option-svg-color);
174
181
  }
175
- .steps__fullWidth_1fw7g {
182
+ .steps__fullWidth_1pdbf {
176
183
  width: 100%;
177
184
  }
package/modern/components/step/index.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- const styles = {"step":"steps__step_1fw7g","horizontal":"steps__horizontal_1fw7g","vertical":"steps__vertical_1fw7g","textWrapper":"steps__textWrapper_1fw7g","interactive":"steps__interactive_1fw7g","disabled":"steps__disabled_1fw7g","text":"steps__text_1fw7g","indicator":"steps__indicator_1fw7g","option":"steps__option_1fw7g","dash":"steps__dash_1fw7g","completed":"steps__completed_1fw7g","gap-24":"steps__gap-24_1fw7g","gap-32":"steps__gap-32_1fw7g","focused":"steps__focused_1fw7g","selected":"steps__selected_1fw7g","checkbox":"steps__checkbox_1fw7g","dot":"steps__dot_1fw7g","error":"steps__error_1fw7g","unordered":"steps__unordered_1fw7g","completedIndicator":"steps__completedIndicator_1fw7g","fullWidth":"steps__fullWidth_1fw7g"};
3
+ const styles = {"step":"steps__step_1pdbf","horizontal":"steps__horizontal_1pdbf","vertical":"steps__vertical_1pdbf","textWrapper":"steps__textWrapper_1pdbf","interactive":"steps__interactive_1pdbf","disabled":"steps__disabled_1pdbf","text":"steps__text_1pdbf","indicator":"steps__indicator_1pdbf","option":"steps__option_1pdbf","dash":"steps__dash_1pdbf","completed":"steps__completed_1pdbf","gap-24":"steps__gap-24_1pdbf","gap-32":"steps__gap-32_1pdbf","fullWidth":"steps__fullWidth_1pdbf","focused":"steps__focused_1pdbf","selected":"steps__selected_1pdbf","checkbox":"steps__checkbox_1pdbf","dot":"steps__dot_1pdbf","error":"steps__error_1pdbf","unordered":"steps__unordered_1pdbf","completedIndicator":"steps__completedIndicator_1pdbf"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
package/modern/components/step/index.module.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.module.css.js","sources":["../../src/components/step/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n:root {\n --steps-option-svg-color: var(--color-light-status-positive);\n --steps-dash-border: 2px solid var(--color-light-status-positive);\n}\n\n.step {\n display: flex;\n outline: none;\n\n &.horizontal {\n flex-grow: 1;\n }\n\n &:not(.vertical) {\n align-items: center;\n }\n\n &:last-of-type .textWrapper.vertical {\n margin-bottom: var(--gap-0);\n }\n}\n\n.step.interactive:not(.disabled):hover {\n cursor: pointer;\n}\n\n.step.disabled:hover {\n & .text {\n background: unset;\n }\n}\n\n.step.disabled {\n & .indicator {\n cursor: unset;\n }\n}\n\n.indicator {\n cursor: pointer;\n display: flex;\n align-items: center;\n margin-right: var(--gap-4);\n\n &.vertical {\n flex-direction: column;\n margin-right: var(--gap-8);\n }\n}\n\n.option {\n @mixin accent_primary_small;\n\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--color-light-text-primary);\n background: var(--color-light-neutral-translucent-300);\n min-width: 24px;\n height: 24px;\n border-radius: var(--border-radius-circle);\n\n &.vertical {\n margin-top: var(--gap-8);\n }\n}\n\n.dash {\n flex: 1 1 auto;\n min-width: 24px;\n border-top: 2px solid var(--color-light-neutral-translucent-300);\n margin-right: var(--gap-8);\n\n &.completed {\n border-top: var(--steps-dash-border);\n }\n\n &.vertical {\n min-width: unset;\n min-height: 8px;\n margin-right: var(--gap-0);\n margin-top: var(--gap-8);\n border-left: 2px solid var(--color-light-neutral-translucent-300);\n border-top: none;\n }\n\n &.completed.vertical {\n border-left: var(--steps-dash-border);\n }\n}\n\n.textWrapper {\n &.vertical {\n min-height: 48px;\n\n &.gap-24 {\n margin-bottom: var(--gap-8);\n }\n\n &.gap-32 {\n margin-bottom: var(--gap-16);\n }\n }\n}\n\n.text {\n @mixin paragraph_primary_medium;\n\n transition: background 0.2s;\n padding: var(--gap-8);\n color: var(--color-light-text-primary);\n border-radius: var(--gap-8);\n height: min-content;\n\n &.interactive:not(.disabled) {\n &:hover {\n background: var(--color-light-transparent-default-hover);\n }\n\n &:active {\n background: var(--color-light-transparent-default-press);\n }\n }\n}\n\n.focused {\n outline: var(--gap-2) solid var(--focus-color);\n outline-offset: var(--gap-2);\n}\n\n.selected {\n & .text {\n color: var(--color-light-text-primary);\n }\n\n & .option {\n color: var(--color-light-text-primary-inverted);\n background: var(--color-light-neutral-translucent-1300);\n }\n}\n\n.checkbox {\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: var(--border-radius-circle);\n width: 20px;\n height: 20px;\n border: 2px solid var(--color-light-neutral-translucent-300);\n}\n\n.dot {\n width: 10px;\n height: 10px;\n border-radius: var(--border-radius-circle);\n background: var(--color-light-neutral-translucent-300);\n}\n\n.selected .checkbox {\n border: 2px solid var(--color-light-neutral-translucent-1300);\n\n & .dot {\n background: var(--color-light-neutral-translucent-1300);\n }\n}\n\n.option:not(.error).unordered {\n background: unset;\n}\n\n.completedIndicator[class*='positive-checkmark'] {\n background-color: var(--steps-option-svg-color);\n}\n\n.fullWidth {\n width: 100%;\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,MAAM,CAAC,mBAAmB,CAAC,YAAY,CAAC,yBAAyB,CAAC,UAAU,CAAC,uBAAuB,CAAC,aAAa,CAAC,0BAA0B,CAAC,aAAa,CAAC,0BAA0B,CAAC,UAAU,CAAC,uBAAuB,CAAC,MAAM,CAAC,mBAAmB,CAAC,WAAW,CAAC,wBAAwB,CAAC,QAAQ,CAAC,qBAAqB,CAAC,MAAM,CAAC,mBAAmB,CAAC,WAAW,CAAC,wBAAwB,CAAC,QAAQ,CAAC,qBAAqB,CAAC,QAAQ,CAAC,qBAAqB,CAAC,SAAS,CAAC,sBAAsB,CAAC,UAAU,CAAC,uBAAuB,CAAC,UAAU,CAAC,uBAAuB,CAAC,KAAK,CAAC,kBAAkB,CAAC,OAAO,CAAC,oBAAoB,CAAC,WAAW,CAAC,wBAAwB,CAAC,oBAAoB,CAAC,iCAAiC,CAAC,WAAW,CAAC,wBAAwB,CAAC;;;;"}
1
+ {"version":3,"file":"index.module.css.js","sources":["../../src/components/step/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n:root {\n --steps-option-svg-color: var(--color-light-status-positive);\n --steps-dash-border: 2px solid var(--color-light-status-positive);\n}\n\n.step {\n display: flex;\n outline: none;\n\n &.horizontal {\n flex-grow: 1;\n }\n\n &:not(.vertical) {\n align-items: center;\n }\n\n &:last-of-type .textWrapper.vertical {\n margin-bottom: var(--gap-0);\n }\n}\n\n.step.interactive:not(.disabled):hover {\n cursor: pointer;\n}\n\n.step.disabled:hover {\n & .text {\n background: unset;\n }\n}\n\n.step.disabled {\n & .indicator {\n cursor: unset;\n }\n}\n\n.indicator {\n cursor: pointer;\n display: flex;\n align-items: center;\n margin-right: var(--gap-4);\n\n &.vertical {\n flex-direction: column;\n margin-right: var(--gap-8);\n }\n}\n\n.option {\n @mixin accent_primary_small;\n\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--color-light-text-primary);\n background: var(--color-light-neutral-translucent-300);\n min-width: 24px;\n height: 24px;\n border-radius: var(--border-radius-circle);\n\n &.vertical {\n margin-top: var(--gap-8);\n }\n}\n\n.dash {\n flex: 1 1 auto;\n min-width: 24px;\n border-top: 2px solid var(--color-light-neutral-translucent-300);\n margin-right: var(--gap-8);\n\n &.completed {\n border-top: var(--steps-dash-border);\n }\n\n &.vertical {\n min-width: unset;\n min-height: 8px;\n margin-right: var(--gap-0);\n margin-top: var(--gap-8);\n border-left: 2px solid var(--color-light-neutral-translucent-300);\n border-top: none;\n }\n\n &.completed.vertical {\n border-left: var(--steps-dash-border);\n }\n}\n\n.textWrapper {\n &.vertical {\n min-height: 48px;\n\n &.gap-24 {\n margin-bottom: var(--gap-8);\n }\n\n &.gap-32 {\n margin-bottom: var(--gap-16);\n }\n\n &.fullWidth {\n width: 100%;\n }\n }\n}\n\n.text {\n @mixin paragraph_primary_medium;\n\n transition: background 0.2s;\n padding: var(--gap-8);\n color: var(--color-light-text-primary);\n border-radius: var(--gap-8);\n height: min-content;\n box-sizing: border-box;\n\n &.interactive:not(.disabled) {\n &:hover {\n background: var(--color-light-transparent-default-hover);\n }\n\n &:active {\n background: var(--color-light-transparent-default-press);\n }\n }\n}\n\n.focused {\n outline: var(--gap-2) solid var(--focus-color);\n outline-offset: var(--gap-2);\n}\n\n.selected {\n & .text {\n color: var(--color-light-text-primary);\n }\n\n & .option {\n color: var(--color-light-text-primary-inverted);\n background: var(--color-light-neutral-translucent-1300);\n }\n}\n\n.checkbox {\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: var(--border-radius-circle);\n width: 20px;\n height: 20px;\n border: 2px solid var(--color-light-neutral-translucent-300);\n}\n\n.dot {\n width: 10px;\n height: 10px;\n border-radius: var(--border-radius-circle);\n background: var(--color-light-neutral-translucent-300);\n}\n\n.selected .checkbox {\n border: 2px solid var(--color-light-neutral-translucent-1300);\n\n & .dot {\n background: var(--color-light-neutral-translucent-1300);\n }\n}\n\n.option:not(.error).unordered {\n background: unset;\n}\n\n.completedIndicator[class*='positive-checkmark'] {\n background-color: var(--steps-option-svg-color);\n}\n\n.fullWidth {\n width: 100%;\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,MAAM,CAAC,mBAAmB,CAAC,YAAY,CAAC,yBAAyB,CAAC,UAAU,CAAC,uBAAuB,CAAC,aAAa,CAAC,0BAA0B,CAAC,aAAa,CAAC,0BAA0B,CAAC,UAAU,CAAC,uBAAuB,CAAC,MAAM,CAAC,mBAAmB,CAAC,WAAW,CAAC,wBAAwB,CAAC,QAAQ,CAAC,qBAAqB,CAAC,MAAM,CAAC,mBAAmB,CAAC,WAAW,CAAC,wBAAwB,CAAC,QAAQ,CAAC,qBAAqB,CAAC,QAAQ,CAAC,qBAAqB,CAAC,WAAW,CAAC,wBAAwB,CAAC,SAAS,CAAC,sBAAsB,CAAC,UAAU,CAAC,uBAAuB,CAAC,UAAU,CAAC,uBAAuB,CAAC,KAAK,CAAC,kBAAkB,CAAC,OAAO,CAAC,oBAAoB,CAAC,WAAW,CAAC,wBAAwB,CAAC,oBAAoB,CAAC,iCAAiC,CAAC;;;;"}
package/modern/components/step-indicator/index.css CHANGED
@@ -1,6 +1,6 @@
1
1
  :root {
2
2
  --gap-0: 0px;
3
3
  }
4
- .steps__component_1s7m6.steps__component_1s7m6 {
4
+ .steps__component_111zn.steps__component_111zn {
5
5
  padding: var(--gap-0);
6
6
  }
package/modern/components/step-indicator/index.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- const styles = {"component":"steps__component_1s7m6"};
3
+ const styles = {"component":"steps__component_111zn"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
package/modern/index.css CHANGED
@@ -1,9 +1,9 @@
1
- .steps__component_671rj {
1
+ .steps__component_1x6oy {
2
2
  display: flex;
3
3
  align-items: center;
4
4
  flex-direction: row;
5
5
  }
6
- .steps__component_671rj.steps__vertical_671rj {
6
+ .steps__component_1x6oy.steps__vertical_1x6oy {
7
7
  flex-direction: column;
8
8
  align-items: flex-start;
9
9
  }