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

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 +39 -38
  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 +8 -7
  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 +39 -38
  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 +39 -38
  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 +7 -4
  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,9 +23,8 @@
23
23
  --gap-16: var(--gap-m);
24
24
  }
25
25
  :root {
26
- --font-family-alfasans:
27
- 'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
28
- Helvetica, sans-serif;
26
+ --font-family-system:
27
+ system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
29
28
  }
30
29
  :root {
31
30
  --focus-color: var(--color-light-status-info);
@@ -34,45 +33,44 @@
34
33
  --steps-option-svg-color: var(--color-light-status-positive);
35
34
  --steps-dash-border: 2px solid var(--color-light-status-positive);
36
35
  }
37
- .steps__step_u8o8k {
36
+ .steps__step_gh2pk {
38
37
  display: flex;
39
38
  outline: none;
40
39
  }
41
- .steps__step_u8o8k.steps__horizontal_u8o8k {
40
+ .steps__step_gh2pk.steps__horizontal_gh2pk {
42
41
  flex-grow: 1;
43
42
  }
44
- .steps__step_u8o8k:not(.steps__vertical_u8o8k) {
43
+ .steps__step_gh2pk:not(.steps__vertical_gh2pk) {
45
44
  align-items: center;
46
45
  }
47
- .steps__step_u8o8k:last-of-type .steps__textWrapper_u8o8k.steps__vertical_u8o8k {
46
+ .steps__step_gh2pk:last-of-type .steps__textWrapper_gh2pk.steps__vertical_gh2pk {
48
47
  margin-bottom: var(--gap-0);
49
48
  }
50
- .steps__step_u8o8k.steps__interactive_u8o8k:not(.steps__disabled_u8o8k):hover {
49
+ .steps__step_gh2pk.steps__interactive_gh2pk:not(.steps__disabled_gh2pk):hover {
51
50
  cursor: pointer;
52
51
  }
53
- .steps__step_u8o8k.steps__disabled_u8o8k:hover .steps__text_u8o8k {
52
+ .steps__step_gh2pk.steps__disabled_gh2pk:hover .steps__text_gh2pk {
54
53
  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
55
54
  background: initial;
56
55
  }
57
- .steps__step_u8o8k.steps__disabled_u8o8k .steps__indicator_u8o8k {
56
+ .steps__step_gh2pk.steps__disabled_gh2pk .steps__indicator_gh2pk {
58
57
  cursor: inherit;
59
58
  }
60
- .steps__indicator_u8o8k {
59
+ .steps__indicator_gh2pk {
61
60
  cursor: pointer;
62
61
  display: flex;
63
62
  align-items: center;
64
63
  margin-right: var(--gap-4);
65
64
  }
66
- .steps__indicator_u8o8k.steps__vertical_u8o8k {
65
+ .steps__indicator_gh2pk.steps__vertical_gh2pk {
67
66
  flex-direction: column;
68
67
  margin-right: var(--gap-8);
69
68
  }
70
- .steps__option_u8o8k {
69
+ .steps__option_gh2pk {
71
70
  font-size: 14px;
72
71
  line-height: 20px;
73
72
  font-weight: 700;
74
- letter-spacing: 0.47px;
75
- font-family: var(--font-family-alfasans);
73
+ font-family: var(--font-family-system);
76
74
 
77
75
  display: flex;
78
76
  align-items: center;
@@ -83,19 +81,19 @@
83
81
  height: 24px;
84
82
  border-radius: var(--border-radius-circle);
85
83
  }
86
- .steps__option_u8o8k.steps__vertical_u8o8k {
84
+ .steps__option_gh2pk.steps__vertical_gh2pk {
87
85
  margin-top: var(--gap-8);
88
86
  }
89
- .steps__dash_u8o8k {
87
+ .steps__dash_gh2pk {
90
88
  flex: 1 1 auto;
91
89
  min-width: 24px;
92
90
  border-top: 2px solid var(--color-light-neutral-translucent-300);
93
91
  margin-right: var(--gap-8);
94
92
  }
95
- .steps__dash_u8o8k.steps__completed_u8o8k {
93
+ .steps__dash_gh2pk.steps__completed_gh2pk {
96
94
  border-top: var(--steps-dash-border);
97
95
  }
98
- .steps__dash_u8o8k.steps__vertical_u8o8k {
96
+ .steps__dash_gh2pk.steps__vertical_gh2pk {
99
97
  min-width: 0;
100
98
  min-width: initial;
101
99
  min-height: 8px;
@@ -104,24 +102,26 @@
104
102
  border-left: 2px solid var(--color-light-neutral-translucent-300);
105
103
  border-top: none;
106
104
  }
107
- .steps__dash_u8o8k.steps__completed_u8o8k.steps__vertical_u8o8k {
105
+ .steps__dash_gh2pk.steps__completed_gh2pk.steps__vertical_gh2pk {
108
106
  border-left: var(--steps-dash-border);
109
107
  }
110
- .steps__textWrapper_u8o8k.steps__vertical_u8o8k {
108
+ .steps__textWrapper_gh2pk.steps__vertical_gh2pk {
111
109
  min-height: 48px;
112
110
  }
113
- .steps__textWrapper_u8o8k.steps__vertical_u8o8k.steps__gap-24_u8o8k {
111
+ .steps__textWrapper_gh2pk.steps__vertical_gh2pk.steps__gap-24_gh2pk {
114
112
  margin-bottom: var(--gap-8);
115
113
  }
116
- .steps__textWrapper_u8o8k.steps__vertical_u8o8k.steps__gap-32_u8o8k {
114
+ .steps__textWrapper_gh2pk.steps__vertical_gh2pk.steps__gap-32_gh2pk {
117
115
  margin-bottom: var(--gap-16);
118
116
  }
119
- .steps__text_u8o8k {
117
+ .steps__textWrapper_gh2pk.steps__vertical_gh2pk.steps__fullWidth_gh2pk {
118
+ width: 100%;
119
+ }
120
+ .steps__text_gh2pk {
120
121
  font-size: 16px;
121
122
  line-height: 24px;
122
123
  font-weight: 400;
123
- letter-spacing: -0.24px;
124
- font-family: var(--font-family-alfasans);
124
+ font-family: var(--font-family-system);
125
125
 
126
126
  transition: background 0.2s;
127
127
  padding: var(--gap-8);
@@ -129,25 +129,26 @@
129
129
  border-radius: var(--gap-8);
130
130
  height: -moz-min-content;
131
131
  height: min-content;
132
+ box-sizing: border-box;
132
133
  }
133
- .steps__text_u8o8k.steps__interactive_u8o8k:not(.steps__disabled_u8o8k):hover {
134
+ .steps__text_gh2pk.steps__interactive_gh2pk:not(.steps__disabled_gh2pk):hover {
134
135
  background: var(--color-light-transparent-default-hover);
135
136
  }
136
- .steps__text_u8o8k.steps__interactive_u8o8k:not(.steps__disabled_u8o8k):active {
137
+ .steps__text_gh2pk.steps__interactive_gh2pk:not(.steps__disabled_gh2pk):active {
137
138
  background: var(--color-light-transparent-default-press);
138
139
  }
139
- .steps__focused_u8o8k {
140
+ .steps__focused_gh2pk {
140
141
  outline: var(--gap-2) solid var(--focus-color);
141
142
  outline-offset: var(--gap-2);
142
143
  }
143
- .steps__selected_u8o8k .steps__text_u8o8k {
144
+ .steps__selected_gh2pk .steps__text_gh2pk {
144
145
  color: var(--color-light-text-primary);
145
146
  }
146
- .steps__selected_u8o8k .steps__option_u8o8k {
147
+ .steps__selected_gh2pk .steps__option_gh2pk {
147
148
  color: var(--color-light-text-primary-inverted);
148
149
  background: var(--color-light-neutral-translucent-1300);
149
150
  }
150
- .steps__checkbox_u8o8k {
151
+ .steps__checkbox_gh2pk {
151
152
  display: flex;
152
153
  justify-content: center;
153
154
  align-items: center;
@@ -156,25 +157,25 @@
156
157
  height: 20px;
157
158
  border: 2px solid var(--color-light-neutral-translucent-300);
158
159
  }
159
- .steps__dot_u8o8k {
160
+ .steps__dot_gh2pk {
160
161
  width: 10px;
161
162
  height: 10px;
162
163
  border-radius: var(--border-radius-circle);
163
164
  background: var(--color-light-neutral-translucent-300);
164
165
  }
165
- .steps__selected_u8o8k .steps__checkbox_u8o8k {
166
+ .steps__selected_gh2pk .steps__checkbox_gh2pk {
166
167
  border: 2px solid var(--color-light-neutral-translucent-1300);
167
168
  }
168
- .steps__selected_u8o8k .steps__checkbox_u8o8k .steps__dot_u8o8k {
169
+ .steps__selected_gh2pk .steps__checkbox_gh2pk .steps__dot_gh2pk {
169
170
  background: var(--color-light-neutral-translucent-1300);
170
171
  }
171
- .steps__option_u8o8k:not(.steps__error_u8o8k).steps__unordered_u8o8k {
172
+ .steps__option_gh2pk:not(.steps__error_gh2pk).steps__unordered_gh2pk {
172
173
  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
173
174
  background: initial;
174
175
  }
175
- .steps__completedIndicator_u8o8k[class*='positive-checkmark'] {
176
+ .steps__completedIndicator_gh2pk[class*='positive-checkmark'] {
176
177
  background-color: var(--steps-option-svg-color);
177
178
  }
178
- .steps__fullWidth_u8o8k {
179
+ .steps__fullWidth_gh2pk {
179
180
  width: 100%;
180
181
  }
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_u8o8k","horizontal":"steps__horizontal_u8o8k","vertical":"steps__vertical_u8o8k","textWrapper":"steps__textWrapper_u8o8k","interactive":"steps__interactive_u8o8k","disabled":"steps__disabled_u8o8k","text":"steps__text_u8o8k","indicator":"steps__indicator_u8o8k","option":"steps__option_u8o8k","dash":"steps__dash_u8o8k","completed":"steps__completed_u8o8k","gap-24":"steps__gap-24_u8o8k","gap-32":"steps__gap-32_u8o8k","focused":"steps__focused_u8o8k","selected":"steps__selected_u8o8k","checkbox":"steps__checkbox_u8o8k","dot":"steps__dot_u8o8k","error":"steps__error_u8o8k","unordered":"steps__unordered_u8o8k","completedIndicator":"steps__completedIndicator_u8o8k","fullWidth":"steps__fullWidth_u8o8k"};
3
+ var styles = {"step":"steps__step_gh2pk","horizontal":"steps__horizontal_gh2pk","vertical":"steps__vertical_gh2pk","textWrapper":"steps__textWrapper_gh2pk","interactive":"steps__interactive_gh2pk","disabled":"steps__disabled_gh2pk","text":"steps__text_gh2pk","indicator":"steps__indicator_gh2pk","option":"steps__option_gh2pk","dash":"steps__dash_gh2pk","completed":"steps__completed_gh2pk","gap-24":"steps__gap-24_gh2pk","gap-32":"steps__gap-32_gh2pk","fullWidth":"steps__fullWidth_gh2pk","focused":"steps__focused_gh2pk","selected":"steps__selected_gh2pk","checkbox":"steps__checkbox_gh2pk","dot":"steps__dot_gh2pk","error":"steps__error_gh2pk","unordered":"steps__unordered_gh2pk","completedIndicator":"steps__completedIndicator_gh2pk"};
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_5xchg.steps__component_5xchg {
4
+ .steps__component_sshfg.steps__component_sshfg {
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_5xchg"};
3
+ var styles = {"component":"steps__component_sshfg"};
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_1w1wc {
1
+ .steps__component_16w28 {
2
2
  display: flex;
3
3
  align-items: center;
4
4
  flex-direction: row;
5
5
  }
6
- .steps__component_1w1wc.steps__vertical_1w1wc {
6
+ .steps__component_16w28.steps__vertical_16w28 {
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_1w1wc","vertical":"steps__vertical_1w1wc"};
3
+ var styles = {"component":"steps__component_16w28","vertical":"steps__vertical_16w28"};
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_1w1wc {
1
+ .steps__component_16w28 {
2
2
  display: flex;
3
3
  align-items: center;
4
4
  flex-direction: row;
5
5
  }
6
- .steps__component_1w1wc.steps__vertical_1w1wc {
6
+ .steps__component_16w28.steps__vertical_16w28 {
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_1w1wc","vertical":"steps__vertical_1w1wc"};
5
+ var styles = {"component":"steps__component_16w28","vertical":"steps__vertical_16w28"};
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,9 +23,8 @@
23
23
  --gap-16: var(--gap-m);
24
24
  }
25
25
  :root {
26
- --font-family-alfasans:
27
- 'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
28
- Helvetica, sans-serif;
26
+ --font-family-system:
27
+ system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
29
28
  }
30
29
  :root {
31
30
  --focus-color: var(--color-light-status-info);
@@ -34,45 +33,44 @@
34
33
  --steps-option-svg-color: var(--color-light-status-positive);
35
34
  --steps-dash-border: 2px solid var(--color-light-status-positive);
36
35
  }
37
- .steps__step_u8o8k {
36
+ .steps__step_gh2pk {
38
37
  display: flex;
39
38
  outline: none;
40
39
  }
41
- .steps__step_u8o8k.steps__horizontal_u8o8k {
40
+ .steps__step_gh2pk.steps__horizontal_gh2pk {
42
41
  flex-grow: 1;
43
42
  }
44
- .steps__step_u8o8k:not(.steps__vertical_u8o8k) {
43
+ .steps__step_gh2pk:not(.steps__vertical_gh2pk) {
45
44
  align-items: center;
46
45
  }
47
- .steps__step_u8o8k:last-of-type .steps__textWrapper_u8o8k.steps__vertical_u8o8k {
46
+ .steps__step_gh2pk:last-of-type .steps__textWrapper_gh2pk.steps__vertical_gh2pk {
48
47
  margin-bottom: var(--gap-0);
49
48
  }
50
- .steps__step_u8o8k.steps__interactive_u8o8k:not(.steps__disabled_u8o8k):hover {
49
+ .steps__step_gh2pk.steps__interactive_gh2pk:not(.steps__disabled_gh2pk):hover {
51
50
  cursor: pointer;
52
51
  }
53
- .steps__step_u8o8k.steps__disabled_u8o8k:hover .steps__text_u8o8k {
52
+ .steps__step_gh2pk.steps__disabled_gh2pk:hover .steps__text_gh2pk {
54
53
  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
55
54
  background: initial;
56
55
  }
57
- .steps__step_u8o8k.steps__disabled_u8o8k .steps__indicator_u8o8k {
56
+ .steps__step_gh2pk.steps__disabled_gh2pk .steps__indicator_gh2pk {
58
57
  cursor: inherit;
59
58
  }
60
- .steps__indicator_u8o8k {
59
+ .steps__indicator_gh2pk {
61
60
  cursor: pointer;
62
61
  display: flex;
63
62
  align-items: center;
64
63
  margin-right: var(--gap-4);
65
64
  }
66
- .steps__indicator_u8o8k.steps__vertical_u8o8k {
65
+ .steps__indicator_gh2pk.steps__vertical_gh2pk {
67
66
  flex-direction: column;
68
67
  margin-right: var(--gap-8);
69
68
  }
70
- .steps__option_u8o8k {
69
+ .steps__option_gh2pk {
71
70
  font-size: 14px;
72
71
  line-height: 20px;
73
72
  font-weight: 700;
74
- letter-spacing: 0.47px;
75
- font-family: var(--font-family-alfasans);
73
+ font-family: var(--font-family-system);
76
74
 
77
75
  display: flex;
78
76
  align-items: center;
@@ -83,19 +81,19 @@
83
81
  height: 24px;
84
82
  border-radius: var(--border-radius-circle);
85
83
  }
86
- .steps__option_u8o8k.steps__vertical_u8o8k {
84
+ .steps__option_gh2pk.steps__vertical_gh2pk {
87
85
  margin-top: var(--gap-8);
88
86
  }
89
- .steps__dash_u8o8k {
87
+ .steps__dash_gh2pk {
90
88
  flex: 1 1 auto;
91
89
  min-width: 24px;
92
90
  border-top: 2px solid var(--color-light-neutral-translucent-300);
93
91
  margin-right: var(--gap-8);
94
92
  }
95
- .steps__dash_u8o8k.steps__completed_u8o8k {
93
+ .steps__dash_gh2pk.steps__completed_gh2pk {
96
94
  border-top: var(--steps-dash-border);
97
95
  }
98
- .steps__dash_u8o8k.steps__vertical_u8o8k {
96
+ .steps__dash_gh2pk.steps__vertical_gh2pk {
99
97
  min-width: 0;
100
98
  min-width: initial;
101
99
  min-height: 8px;
@@ -104,24 +102,26 @@
104
102
  border-left: 2px solid var(--color-light-neutral-translucent-300);
105
103
  border-top: none;
106
104
  }
107
- .steps__dash_u8o8k.steps__completed_u8o8k.steps__vertical_u8o8k {
105
+ .steps__dash_gh2pk.steps__completed_gh2pk.steps__vertical_gh2pk {
108
106
  border-left: var(--steps-dash-border);
109
107
  }
110
- .steps__textWrapper_u8o8k.steps__vertical_u8o8k {
108
+ .steps__textWrapper_gh2pk.steps__vertical_gh2pk {
111
109
  min-height: 48px;
112
110
  }
113
- .steps__textWrapper_u8o8k.steps__vertical_u8o8k.steps__gap-24_u8o8k {
111
+ .steps__textWrapper_gh2pk.steps__vertical_gh2pk.steps__gap-24_gh2pk {
114
112
  margin-bottom: var(--gap-8);
115
113
  }
116
- .steps__textWrapper_u8o8k.steps__vertical_u8o8k.steps__gap-32_u8o8k {
114
+ .steps__textWrapper_gh2pk.steps__vertical_gh2pk.steps__gap-32_gh2pk {
117
115
  margin-bottom: var(--gap-16);
118
116
  }
119
- .steps__text_u8o8k {
117
+ .steps__textWrapper_gh2pk.steps__vertical_gh2pk.steps__fullWidth_gh2pk {
118
+ width: 100%;
119
+ }
120
+ .steps__text_gh2pk {
120
121
  font-size: 16px;
121
122
  line-height: 24px;
122
123
  font-weight: 400;
123
- letter-spacing: -0.24px;
124
- font-family: var(--font-family-alfasans);
124
+ font-family: var(--font-family-system);
125
125
 
126
126
  transition: background 0.2s;
127
127
  padding: var(--gap-8);
@@ -129,25 +129,26 @@
129
129
  border-radius: var(--gap-8);
130
130
  height: -moz-min-content;
131
131
  height: min-content;
132
+ box-sizing: border-box;
132
133
  }
133
- .steps__text_u8o8k.steps__interactive_u8o8k:not(.steps__disabled_u8o8k):hover {
134
+ .steps__text_gh2pk.steps__interactive_gh2pk:not(.steps__disabled_gh2pk):hover {
134
135
  background: var(--color-light-transparent-default-hover);
135
136
  }
136
- .steps__text_u8o8k.steps__interactive_u8o8k:not(.steps__disabled_u8o8k):active {
137
+ .steps__text_gh2pk.steps__interactive_gh2pk:not(.steps__disabled_gh2pk):active {
137
138
  background: var(--color-light-transparent-default-press);
138
139
  }
139
- .steps__focused_u8o8k {
140
+ .steps__focused_gh2pk {
140
141
  outline: var(--gap-2) solid var(--focus-color);
141
142
  outline-offset: var(--gap-2);
142
143
  }
143
- .steps__selected_u8o8k .steps__text_u8o8k {
144
+ .steps__selected_gh2pk .steps__text_gh2pk {
144
145
  color: var(--color-light-text-primary);
145
146
  }
146
- .steps__selected_u8o8k .steps__option_u8o8k {
147
+ .steps__selected_gh2pk .steps__option_gh2pk {
147
148
  color: var(--color-light-text-primary-inverted);
148
149
  background: var(--color-light-neutral-translucent-1300);
149
150
  }
150
- .steps__checkbox_u8o8k {
151
+ .steps__checkbox_gh2pk {
151
152
  display: flex;
152
153
  justify-content: center;
153
154
  align-items: center;
@@ -156,25 +157,25 @@
156
157
  height: 20px;
157
158
  border: 2px solid var(--color-light-neutral-translucent-300);
158
159
  }
159
- .steps__dot_u8o8k {
160
+ .steps__dot_gh2pk {
160
161
  width: 10px;
161
162
  height: 10px;
162
163
  border-radius: var(--border-radius-circle);
163
164
  background: var(--color-light-neutral-translucent-300);
164
165
  }
165
- .steps__selected_u8o8k .steps__checkbox_u8o8k {
166
+ .steps__selected_gh2pk .steps__checkbox_gh2pk {
166
167
  border: 2px solid var(--color-light-neutral-translucent-1300);
167
168
  }
168
- .steps__selected_u8o8k .steps__checkbox_u8o8k .steps__dot_u8o8k {
169
+ .steps__selected_gh2pk .steps__checkbox_gh2pk .steps__dot_gh2pk {
169
170
  background: var(--color-light-neutral-translucent-1300);
170
171
  }
171
- .steps__option_u8o8k:not(.steps__error_u8o8k).steps__unordered_u8o8k {
172
+ .steps__option_gh2pk:not(.steps__error_gh2pk).steps__unordered_gh2pk {
172
173
  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
173
174
  background: initial;
174
175
  }
175
- .steps__completedIndicator_u8o8k[class*='positive-checkmark'] {
176
+ .steps__completedIndicator_gh2pk[class*='positive-checkmark'] {
176
177
  background-color: var(--steps-option-svg-color);
177
178
  }
178
- .steps__fullWidth_u8o8k {
179
+ .steps__fullWidth_gh2pk {
179
180
  width: 100%;
180
181
  }
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_u8o8k","horizontal":"steps__horizontal_u8o8k","vertical":"steps__vertical_u8o8k","textWrapper":"steps__textWrapper_u8o8k","interactive":"steps__interactive_u8o8k","disabled":"steps__disabled_u8o8k","text":"steps__text_u8o8k","indicator":"steps__indicator_u8o8k","option":"steps__option_u8o8k","dash":"steps__dash_u8o8k","completed":"steps__completed_u8o8k","gap-24":"steps__gap-24_u8o8k","gap-32":"steps__gap-32_u8o8k","focused":"steps__focused_u8o8k","selected":"steps__selected_u8o8k","checkbox":"steps__checkbox_u8o8k","dot":"steps__dot_u8o8k","error":"steps__error_u8o8k","unordered":"steps__unordered_u8o8k","completedIndicator":"steps__completedIndicator_u8o8k","fullWidth":"steps__fullWidth_u8o8k"};
3
+ const styles = {"step":"steps__step_gh2pk","horizontal":"steps__horizontal_gh2pk","vertical":"steps__vertical_gh2pk","textWrapper":"steps__textWrapper_gh2pk","interactive":"steps__interactive_gh2pk","disabled":"steps__disabled_gh2pk","text":"steps__text_gh2pk","indicator":"steps__indicator_gh2pk","option":"steps__option_gh2pk","dash":"steps__dash_gh2pk","completed":"steps__completed_gh2pk","gap-24":"steps__gap-24_gh2pk","gap-32":"steps__gap-32_gh2pk","fullWidth":"steps__fullWidth_gh2pk","focused":"steps__focused_gh2pk","selected":"steps__selected_gh2pk","checkbox":"steps__checkbox_gh2pk","dot":"steps__dot_gh2pk","error":"steps__error_gh2pk","unordered":"steps__unordered_gh2pk","completedIndicator":"steps__completedIndicator_gh2pk"};
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_5xchg.steps__component_5xchg {
4
+ .steps__component_sshfg.steps__component_sshfg {
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_5xchg"};
3
+ const styles = {"component":"steps__component_sshfg"};
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_1w1wc {
1
+ .steps__component_16w28 {
2
2
  display: flex;
3
3
  align-items: center;
4
4
  flex-direction: row;
5
5
  }
6
- .steps__component_1w1wc.steps__vertical_1w1wc {
6
+ .steps__component_16w28.steps__vertical_16w28 {
7
7
  flex-direction: column;
8
8
  align-items: flex-start;
9
9
  }