@alfalab/core-components-steps 2.0.0-snapshot-6a9d3fc → 2.0.0-snapshot-5bcd094

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 (25) hide show
  1. package/components/step/index.css +32 -30
  2. package/components/step/index.module.css.js +1 -1
  3. package/components/step/index.module.css.js.map +1 -1
  4. package/components/step-indicator/index.css +1 -1
  5. package/components/step-indicator/index.module.css.js +1 -1
  6. package/cssm/components/step/index.module.css +2 -0
  7. package/esm/components/step/index.css +32 -30
  8. package/esm/components/step/index.module.css.js +1 -1
  9. package/esm/components/step/index.module.css.js.map +1 -1
  10. package/esm/components/step-indicator/index.css +1 -1
  11. package/esm/components/step-indicator/index.module.css.js +1 -1
  12. package/esm/index.css +2 -2
  13. package/esm/index.module.css.js +1 -1
  14. package/index.css +2 -2
  15. package/index.module.css.js +1 -1
  16. package/modern/components/step/index.css +32 -30
  17. package/modern/components/step/index.module.css.js +1 -1
  18. package/modern/components/step/index.module.css.js.map +1 -1
  19. package/modern/components/step-indicator/index.css +1 -1
  20. package/modern/components/step-indicator/index.module.css.js +1 -1
  21. package/modern/index.css +2 -2
  22. package/modern/index.module.css.js +1 -1
  23. package/moderncssm/components/step/index.module.css +4 -0
  24. package/package.json +5 -5
  25. package/src/components/step/index.module.css +4 -0
package/components/step/index.css CHANGED
@@ -24,28 +24,30 @@
24
24
  } :root {
25
25
  --steps-option-svg-color: var(--color-light-status-positive);
26
26
  --steps-dash-border: 2px solid var(--color-light-status-positive);
27
- } .steps__step_41a33 {
27
+ } .steps__step_c6sxr {
28
28
  display: flex;
29
29
  outline: none
30
- } .steps__step_41a33.steps__horizontal_41a33 {
30
+ } .steps__step_c6sxr.steps__horizontal_c6sxr {
31
31
  flex-grow: 1;
32
- } .steps__step_41a33:not(.steps__vertical_41a33) {
32
+ } .steps__step_c6sxr:not(.steps__vertical_c6sxr) {
33
33
  align-items: center;
34
- } .steps__step_41a33.steps__interactive_41a33:not(.steps__disabled_41a33):hover {
34
+ } .steps__step_c6sxr:last-of-type .steps__textWrapper_c6sxr.steps__vertical_c6sxr {
35
+ margin-bottom: var(--gap-0);
36
+ } .steps__step_c6sxr.steps__interactive_c6sxr:not(.steps__disabled_c6sxr):hover {
35
37
  cursor: pointer;
36
- } .steps__step_41a33.steps__disabled_41a33:hover .steps__text_41a33 {
38
+ } .steps__step_c6sxr.steps__disabled_c6sxr:hover .steps__text_c6sxr {
37
39
  background: unset;
38
- } .steps__step_41a33.steps__disabled_41a33 .steps__indicator_41a33 {
40
+ } .steps__step_c6sxr.steps__disabled_c6sxr .steps__indicator_c6sxr {
39
41
  cursor: unset;
40
- } .steps__indicator_41a33 {
42
+ } .steps__indicator_c6sxr {
41
43
  cursor: pointer;
42
44
  display: flex;
43
45
  align-items: center;
44
46
  margin-right: var(--gap-4)
45
- } .steps__indicator_41a33.steps__vertical_41a33 {
47
+ } .steps__indicator_c6sxr.steps__vertical_c6sxr {
46
48
  flex-direction: column;
47
49
  margin-right: var(--gap-8);
48
- } .steps__option_41a33 {
50
+ } .steps__option_c6sxr {
49
51
  font-size: 14px;
50
52
  line-height: 20px;
51
53
  font-weight: 700;
@@ -58,31 +60,31 @@
58
60
  min-width: 24px;
59
61
  height: 24px;
60
62
  border-radius: var(--border-radius-circle)
61
- } .steps__option_41a33.steps__vertical_41a33 {
63
+ } .steps__option_c6sxr.steps__vertical_c6sxr {
62
64
  margin-top: var(--gap-8);
63
- } .steps__dash_41a33 {
65
+ } .steps__dash_c6sxr {
64
66
  flex: 1 1 auto;
65
67
  min-width: 24px;
66
68
  border-top: 2px solid var(--color-light-neutral-translucent-300);
67
69
  margin-right: var(--gap-8)
68
- } .steps__dash_41a33.steps__completed_41a33 {
70
+ } .steps__dash_c6sxr.steps__completed_c6sxr {
69
71
  border-top: var(--steps-dash-border);
70
- } .steps__dash_41a33.steps__vertical_41a33 {
72
+ } .steps__dash_c6sxr.steps__vertical_c6sxr {
71
73
  min-width: unset;
72
74
  min-height: 8px;
73
75
  margin-right: var(--gap-0);
74
76
  margin-top: var(--gap-8);
75
77
  border-left: 2px solid var(--color-light-neutral-translucent-300);
76
78
  border-top: none;
77
- } .steps__dash_41a33.steps__completed_41a33.steps__vertical_41a33 {
79
+ } .steps__dash_c6sxr.steps__completed_c6sxr.steps__vertical_c6sxr {
78
80
  border-left: var(--steps-dash-border);
79
- } .steps__textWrapper_41a33.steps__vertical_41a33 {
81
+ } .steps__textWrapper_c6sxr.steps__vertical_c6sxr {
80
82
  min-height: 48px
81
- } .steps__textWrapper_41a33.steps__vertical_41a33.steps__gap-24_41a33 {
83
+ } .steps__textWrapper_c6sxr.steps__vertical_c6sxr.steps__gap-24_c6sxr {
82
84
  margin-bottom: var(--gap-8);
83
- } .steps__textWrapper_41a33.steps__vertical_41a33.steps__gap-32_41a33 {
85
+ } .steps__textWrapper_c6sxr.steps__vertical_c6sxr.steps__gap-32_c6sxr {
84
86
  margin-bottom: var(--gap-16);
85
- } .steps__text_41a33 {
87
+ } .steps__text_c6sxr {
86
88
  font-size: 16px;
87
89
  line-height: 24px;
88
90
  font-weight: 400;
@@ -93,19 +95,19 @@
93
95
  border-radius: var(--gap-8);
94
96
  height: -moz-min-content;
95
97
  height: min-content
96
- } .steps__text_41a33.steps__interactive_41a33:not(.steps__disabled_41a33):hover {
98
+ } .steps__text_c6sxr.steps__interactive_c6sxr:not(.steps__disabled_c6sxr):hover {
97
99
  background: var(--color-light-transparent-default-hover);
98
- } .steps__text_41a33.steps__interactive_41a33:not(.steps__disabled_41a33):active {
100
+ } .steps__text_c6sxr.steps__interactive_c6sxr:not(.steps__disabled_c6sxr):active {
99
101
  background: var(--color-light-transparent-default-press);
100
- } .steps__focused_41a33 {
102
+ } .steps__focused_c6sxr {
101
103
  outline: var(--gap-2) solid var(--focus-color);
102
104
  outline-offset: var(--gap-2);
103
- } .steps__selected_41a33 .steps__text_41a33 {
105
+ } .steps__selected_c6sxr .steps__text_c6sxr {
104
106
  color: var(--color-light-text-primary);
105
- } .steps__selected_41a33 .steps__option_41a33 {
107
+ } .steps__selected_c6sxr .steps__option_c6sxr {
106
108
  color: var(--color-light-text-primary-inverted);
107
109
  background: var(--color-light-neutral-translucent-1300);
108
- } .steps__checkbox_41a33 {
110
+ } .steps__checkbox_c6sxr {
109
111
  display: flex;
110
112
  justify-content: center;
111
113
  align-items: center;
@@ -113,20 +115,20 @@
113
115
  width: 20px;
114
116
  height: 20px;
115
117
  border: 2px solid var(--color-light-neutral-translucent-300);
116
- } .steps__dot_41a33 {
118
+ } .steps__dot_c6sxr {
117
119
  width: 10px;
118
120
  height: 10px;
119
121
  border-radius: var(--border-radius-circle);
120
122
  background: var(--color-light-neutral-translucent-300);
121
- } .steps__selected_41a33 .steps__checkbox_41a33 {
123
+ } .steps__selected_c6sxr .steps__checkbox_c6sxr {
122
124
  border: 2px solid var(--color-light-neutral-translucent-1300)
123
- } .steps__selected_41a33 .steps__checkbox_41a33 .steps__dot_41a33 {
125
+ } .steps__selected_c6sxr .steps__checkbox_c6sxr .steps__dot_c6sxr {
124
126
  background: var(--color-light-neutral-translucent-1300);
125
- } .steps__option_41a33:not(.steps__error_41a33).steps__unordered_41a33 {
127
+ } .steps__option_c6sxr:not(.steps__error_c6sxr).steps__unordered_c6sxr {
126
128
  background: unset;
127
- } .steps__completedIndicator_41a33 > [class*='positive'] {
129
+ } .steps__completedIndicator_c6sxr > [class*='positive'] {
128
130
  color: var(--steps-option-svg-color);
129
131
  background-color: var(--steps-option-svg-color);
130
- } .steps__fullWidth_41a33 {
132
+ } .steps__fullWidth_c6sxr {
131
133
  width: 100%;
132
134
  }
package/components/step/index.module.css.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  require('./index.css');
4
4
 
5
- var styles = {"step":"steps__step_41a33","horizontal":"steps__horizontal_41a33","vertical":"steps__vertical_41a33","interactive":"steps__interactive_41a33","disabled":"steps__disabled_41a33","text":"steps__text_41a33","indicator":"steps__indicator_41a33","option":"steps__option_41a33","dash":"steps__dash_41a33","completed":"steps__completed_41a33","textWrapper":"steps__textWrapper_41a33","gap-24":"steps__gap-24_41a33","gap-32":"steps__gap-32_41a33","focused":"steps__focused_41a33","selected":"steps__selected_41a33","checkbox":"steps__checkbox_41a33","dot":"steps__dot_41a33","error":"steps__error_41a33","unordered":"steps__unordered_41a33","completedIndicator":"steps__completedIndicator_41a33","fullWidth":"steps__fullWidth_41a33"};
5
+ var styles = {"step":"steps__step_c6sxr","horizontal":"steps__horizontal_c6sxr","vertical":"steps__vertical_c6sxr","textWrapper":"steps__textWrapper_c6sxr","interactive":"steps__interactive_c6sxr","disabled":"steps__disabled_c6sxr","text":"steps__text_c6sxr","indicator":"steps__indicator_c6sxr","option":"steps__option_c6sxr","dash":"steps__dash_c6sxr","completed":"steps__completed_c6sxr","gap-24":"steps__gap-24_c6sxr","gap-32":"steps__gap-32_c6sxr","focused":"steps__focused_c6sxr","selected":"steps__selected_c6sxr","checkbox":"steps__checkbox_c6sxr","dot":"steps__dot_c6sxr","error":"steps__error_c6sxr","unordered":"steps__unordered_c6sxr","completedIndicator":"steps__completedIndicator_c6sxr","fullWidth":"steps__fullWidth_c6sxr"};
6
6
 
7
7
  module.exports = styles;
8
8
  //# sourceMappingURL=index.module.css.js.map
package/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\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'] {\n color: var(--steps-option-svg-color);\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,UAAU,CAAC,uBAAuB,CAAC,MAAM,CAAC,mBAAmB,CAAC,WAAW,CAAC,wBAAwB,CAAC,QAAQ,CAAC,qBAAqB,CAAC,MAAM,CAAC,mBAAmB,CAAC,WAAW,CAAC,wBAAwB,CAAC,aAAa,CAAC,0BAA0B,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}\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'] {\n color: var(--steps-option-svg-color);\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;;;;"}
package/components/step-indicator/index.css CHANGED
@@ -1,5 +1,5 @@
1
1
  :root {
2
2
  --gap-0: 0px;
3
- } .steps__component_1t0af.steps__component_1t0af {
3
+ } .steps__component_zqm8k.steps__component_zqm8k {
4
4
  padding: var(--gap-0);
5
5
  }
package/components/step-indicator/index.module.css.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  require('./index.css');
4
4
 
5
- var styles = {"component":"steps__component_1t0af"};
5
+ var styles = {"component":"steps__component_zqm8k"};
6
6
 
7
7
  module.exports = styles;
8
8
  //# sourceMappingURL=index.module.css.js.map
package/cssm/components/step/index.module.css CHANGED
@@ -31,6 +31,8 @@
31
31
  flex-grow: 1;
32
32
  } .step:not(.vertical) {
33
33
  align-items: center;
34
+ } .step:last-of-type .textWrapper.vertical {
35
+ margin-bottom: var(--gap-0);
34
36
  } .step.interactive:not(.disabled):hover {
35
37
  cursor: pointer;
36
38
  } .step.disabled:hover .text {
package/esm/components/step/index.css CHANGED
@@ -24,28 +24,30 @@
24
24
  } :root {
25
25
  --steps-option-svg-color: var(--color-light-status-positive);
26
26
  --steps-dash-border: 2px solid var(--color-light-status-positive);
27
- } .steps__step_41a33 {
27
+ } .steps__step_c6sxr {
28
28
  display: flex;
29
29
  outline: none
30
- } .steps__step_41a33.steps__horizontal_41a33 {
30
+ } .steps__step_c6sxr.steps__horizontal_c6sxr {
31
31
  flex-grow: 1;
32
- } .steps__step_41a33:not(.steps__vertical_41a33) {
32
+ } .steps__step_c6sxr:not(.steps__vertical_c6sxr) {
33
33
  align-items: center;
34
- } .steps__step_41a33.steps__interactive_41a33:not(.steps__disabled_41a33):hover {
34
+ } .steps__step_c6sxr:last-of-type .steps__textWrapper_c6sxr.steps__vertical_c6sxr {
35
+ margin-bottom: var(--gap-0);
36
+ } .steps__step_c6sxr.steps__interactive_c6sxr:not(.steps__disabled_c6sxr):hover {
35
37
  cursor: pointer;
36
- } .steps__step_41a33.steps__disabled_41a33:hover .steps__text_41a33 {
38
+ } .steps__step_c6sxr.steps__disabled_c6sxr:hover .steps__text_c6sxr {
37
39
  background: unset;
38
- } .steps__step_41a33.steps__disabled_41a33 .steps__indicator_41a33 {
40
+ } .steps__step_c6sxr.steps__disabled_c6sxr .steps__indicator_c6sxr {
39
41
  cursor: unset;
40
- } .steps__indicator_41a33 {
42
+ } .steps__indicator_c6sxr {
41
43
  cursor: pointer;
42
44
  display: flex;
43
45
  align-items: center;
44
46
  margin-right: var(--gap-4)
45
- } .steps__indicator_41a33.steps__vertical_41a33 {
47
+ } .steps__indicator_c6sxr.steps__vertical_c6sxr {
46
48
  flex-direction: column;
47
49
  margin-right: var(--gap-8);
48
- } .steps__option_41a33 {
50
+ } .steps__option_c6sxr {
49
51
  font-size: 14px;
50
52
  line-height: 20px;
51
53
  font-weight: 700;
@@ -58,31 +60,31 @@
58
60
  min-width: 24px;
59
61
  height: 24px;
60
62
  border-radius: var(--border-radius-circle)
61
- } .steps__option_41a33.steps__vertical_41a33 {
63
+ } .steps__option_c6sxr.steps__vertical_c6sxr {
62
64
  margin-top: var(--gap-8);
63
- } .steps__dash_41a33 {
65
+ } .steps__dash_c6sxr {
64
66
  flex: 1 1 auto;
65
67
  min-width: 24px;
66
68
  border-top: 2px solid var(--color-light-neutral-translucent-300);
67
69
  margin-right: var(--gap-8)
68
- } .steps__dash_41a33.steps__completed_41a33 {
70
+ } .steps__dash_c6sxr.steps__completed_c6sxr {
69
71
  border-top: var(--steps-dash-border);
70
- } .steps__dash_41a33.steps__vertical_41a33 {
72
+ } .steps__dash_c6sxr.steps__vertical_c6sxr {
71
73
  min-width: unset;
72
74
  min-height: 8px;
73
75
  margin-right: var(--gap-0);
74
76
  margin-top: var(--gap-8);
75
77
  border-left: 2px solid var(--color-light-neutral-translucent-300);
76
78
  border-top: none;
77
- } .steps__dash_41a33.steps__completed_41a33.steps__vertical_41a33 {
79
+ } .steps__dash_c6sxr.steps__completed_c6sxr.steps__vertical_c6sxr {
78
80
  border-left: var(--steps-dash-border);
79
- } .steps__textWrapper_41a33.steps__vertical_41a33 {
81
+ } .steps__textWrapper_c6sxr.steps__vertical_c6sxr {
80
82
  min-height: 48px
81
- } .steps__textWrapper_41a33.steps__vertical_41a33.steps__gap-24_41a33 {
83
+ } .steps__textWrapper_c6sxr.steps__vertical_c6sxr.steps__gap-24_c6sxr {
82
84
  margin-bottom: var(--gap-8);
83
- } .steps__textWrapper_41a33.steps__vertical_41a33.steps__gap-32_41a33 {
85
+ } .steps__textWrapper_c6sxr.steps__vertical_c6sxr.steps__gap-32_c6sxr {
84
86
  margin-bottom: var(--gap-16);
85
- } .steps__text_41a33 {
87
+ } .steps__text_c6sxr {
86
88
  font-size: 16px;
87
89
  line-height: 24px;
88
90
  font-weight: 400;
@@ -93,19 +95,19 @@
93
95
  border-radius: var(--gap-8);
94
96
  height: -moz-min-content;
95
97
  height: min-content
96
- } .steps__text_41a33.steps__interactive_41a33:not(.steps__disabled_41a33):hover {
98
+ } .steps__text_c6sxr.steps__interactive_c6sxr:not(.steps__disabled_c6sxr):hover {
97
99
  background: var(--color-light-transparent-default-hover);
98
- } .steps__text_41a33.steps__interactive_41a33:not(.steps__disabled_41a33):active {
100
+ } .steps__text_c6sxr.steps__interactive_c6sxr:not(.steps__disabled_c6sxr):active {
99
101
  background: var(--color-light-transparent-default-press);
100
- } .steps__focused_41a33 {
102
+ } .steps__focused_c6sxr {
101
103
  outline: var(--gap-2) solid var(--focus-color);
102
104
  outline-offset: var(--gap-2);
103
- } .steps__selected_41a33 .steps__text_41a33 {
105
+ } .steps__selected_c6sxr .steps__text_c6sxr {
104
106
  color: var(--color-light-text-primary);
105
- } .steps__selected_41a33 .steps__option_41a33 {
107
+ } .steps__selected_c6sxr .steps__option_c6sxr {
106
108
  color: var(--color-light-text-primary-inverted);
107
109
  background: var(--color-light-neutral-translucent-1300);
108
- } .steps__checkbox_41a33 {
110
+ } .steps__checkbox_c6sxr {
109
111
  display: flex;
110
112
  justify-content: center;
111
113
  align-items: center;
@@ -113,20 +115,20 @@
113
115
  width: 20px;
114
116
  height: 20px;
115
117
  border: 2px solid var(--color-light-neutral-translucent-300);
116
- } .steps__dot_41a33 {
118
+ } .steps__dot_c6sxr {
117
119
  width: 10px;
118
120
  height: 10px;
119
121
  border-radius: var(--border-radius-circle);
120
122
  background: var(--color-light-neutral-translucent-300);
121
- } .steps__selected_41a33 .steps__checkbox_41a33 {
123
+ } .steps__selected_c6sxr .steps__checkbox_c6sxr {
122
124
  border: 2px solid var(--color-light-neutral-translucent-1300)
123
- } .steps__selected_41a33 .steps__checkbox_41a33 .steps__dot_41a33 {
125
+ } .steps__selected_c6sxr .steps__checkbox_c6sxr .steps__dot_c6sxr {
124
126
  background: var(--color-light-neutral-translucent-1300);
125
- } .steps__option_41a33:not(.steps__error_41a33).steps__unordered_41a33 {
127
+ } .steps__option_c6sxr:not(.steps__error_c6sxr).steps__unordered_c6sxr {
126
128
  background: unset;
127
- } .steps__completedIndicator_41a33 > [class*='positive'] {
129
+ } .steps__completedIndicator_c6sxr > [class*='positive'] {
128
130
  color: var(--steps-option-svg-color);
129
131
  background-color: var(--steps-option-svg-color);
130
- } .steps__fullWidth_41a33 {
132
+ } .steps__fullWidth_c6sxr {
131
133
  width: 100%;
132
134
  }
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_41a33","horizontal":"steps__horizontal_41a33","vertical":"steps__vertical_41a33","interactive":"steps__interactive_41a33","disabled":"steps__disabled_41a33","text":"steps__text_41a33","indicator":"steps__indicator_41a33","option":"steps__option_41a33","dash":"steps__dash_41a33","completed":"steps__completed_41a33","textWrapper":"steps__textWrapper_41a33","gap-24":"steps__gap-24_41a33","gap-32":"steps__gap-32_41a33","focused":"steps__focused_41a33","selected":"steps__selected_41a33","checkbox":"steps__checkbox_41a33","dot":"steps__dot_41a33","error":"steps__error_41a33","unordered":"steps__unordered_41a33","completedIndicator":"steps__completedIndicator_41a33","fullWidth":"steps__fullWidth_41a33"};
3
+ var styles = {"step":"steps__step_c6sxr","horizontal":"steps__horizontal_c6sxr","vertical":"steps__vertical_c6sxr","textWrapper":"steps__textWrapper_c6sxr","interactive":"steps__interactive_c6sxr","disabled":"steps__disabled_c6sxr","text":"steps__text_c6sxr","indicator":"steps__indicator_c6sxr","option":"steps__option_c6sxr","dash":"steps__dash_c6sxr","completed":"steps__completed_c6sxr","gap-24":"steps__gap-24_c6sxr","gap-32":"steps__gap-32_c6sxr","focused":"steps__focused_c6sxr","selected":"steps__selected_c6sxr","checkbox":"steps__checkbox_c6sxr","dot":"steps__dot_c6sxr","error":"steps__error_c6sxr","unordered":"steps__unordered_c6sxr","completedIndicator":"steps__completedIndicator_c6sxr","fullWidth":"steps__fullWidth_c6sxr"};
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\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'] {\n color: var(--steps-option-svg-color);\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,UAAU,CAAC,uBAAuB,CAAC,MAAM,CAAC,mBAAmB,CAAC,WAAW,CAAC,wBAAwB,CAAC,QAAQ,CAAC,qBAAqB,CAAC,MAAM,CAAC,mBAAmB,CAAC,WAAW,CAAC,wBAAwB,CAAC,aAAa,CAAC,0BAA0B,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}\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'] {\n color: var(--steps-option-svg-color);\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;;;;"}
package/esm/components/step-indicator/index.css CHANGED
@@ -1,5 +1,5 @@
1
1
  :root {
2
2
  --gap-0: 0px;
3
- } .steps__component_1t0af.steps__component_1t0af {
3
+ } .steps__component_zqm8k.steps__component_zqm8k {
4
4
  padding: var(--gap-0);
5
5
  }
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_1t0af"};
3
+ var styles = {"component":"steps__component_zqm8k"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
package/esm/index.css CHANGED
@@ -1,8 +1,8 @@
1
- .steps__component_1run9 {
1
+ .steps__component_1aw9f {
2
2
  display: flex;
3
3
  align-items: center;
4
4
  flex-direction: row
5
- } .steps__component_1run9.steps__vertical_1run9 {
5
+ } .steps__component_1aw9f.steps__vertical_1aw9f {
6
6
  flex-direction: column;
7
7
  align-items: flex-start;
8
8
  }
package/esm/index.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- var styles = {"component":"steps__component_1run9","vertical":"steps__vertical_1run9"};
3
+ var styles = {"component":"steps__component_1aw9f","vertical":"steps__vertical_1aw9f"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
package/index.css CHANGED
@@ -1,8 +1,8 @@
1
- .steps__component_1run9 {
1
+ .steps__component_1aw9f {
2
2
  display: flex;
3
3
  align-items: center;
4
4
  flex-direction: row
5
- } .steps__component_1run9.steps__vertical_1run9 {
5
+ } .steps__component_1aw9f.steps__vertical_1aw9f {
6
6
  flex-direction: column;
7
7
  align-items: flex-start;
8
8
  }
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_1run9","vertical":"steps__vertical_1run9"};
5
+ var styles = {"component":"steps__component_1aw9f","vertical":"steps__vertical_1aw9f"};
6
6
 
7
7
  module.exports = styles;
8
8
  //# sourceMappingURL=index.module.css.js.map
package/modern/components/step/index.css CHANGED
@@ -24,28 +24,30 @@
24
24
  } :root {
25
25
  --steps-option-svg-color: var(--color-light-status-positive);
26
26
  --steps-dash-border: 2px solid var(--color-light-status-positive);
27
- } .steps__step_41a33 {
27
+ } .steps__step_c6sxr {
28
28
  display: flex;
29
29
  outline: none
30
- } .steps__step_41a33.steps__horizontal_41a33 {
30
+ } .steps__step_c6sxr.steps__horizontal_c6sxr {
31
31
  flex-grow: 1;
32
- } .steps__step_41a33:not(.steps__vertical_41a33) {
32
+ } .steps__step_c6sxr:not(.steps__vertical_c6sxr) {
33
33
  align-items: center;
34
- } .steps__step_41a33.steps__interactive_41a33:not(.steps__disabled_41a33):hover {
34
+ } .steps__step_c6sxr:last-of-type .steps__textWrapper_c6sxr.steps__vertical_c6sxr {
35
+ margin-bottom: var(--gap-0);
36
+ } .steps__step_c6sxr.steps__interactive_c6sxr:not(.steps__disabled_c6sxr):hover {
35
37
  cursor: pointer;
36
- } .steps__step_41a33.steps__disabled_41a33:hover .steps__text_41a33 {
38
+ } .steps__step_c6sxr.steps__disabled_c6sxr:hover .steps__text_c6sxr {
37
39
  background: unset;
38
- } .steps__step_41a33.steps__disabled_41a33 .steps__indicator_41a33 {
40
+ } .steps__step_c6sxr.steps__disabled_c6sxr .steps__indicator_c6sxr {
39
41
  cursor: unset;
40
- } .steps__indicator_41a33 {
42
+ } .steps__indicator_c6sxr {
41
43
  cursor: pointer;
42
44
  display: flex;
43
45
  align-items: center;
44
46
  margin-right: var(--gap-4)
45
- } .steps__indicator_41a33.steps__vertical_41a33 {
47
+ } .steps__indicator_c6sxr.steps__vertical_c6sxr {
46
48
  flex-direction: column;
47
49
  margin-right: var(--gap-8);
48
- } .steps__option_41a33 {
50
+ } .steps__option_c6sxr {
49
51
  font-size: 14px;
50
52
  line-height: 20px;
51
53
  font-weight: 700;
@@ -58,31 +60,31 @@
58
60
  min-width: 24px;
59
61
  height: 24px;
60
62
  border-radius: var(--border-radius-circle)
61
- } .steps__option_41a33.steps__vertical_41a33 {
63
+ } .steps__option_c6sxr.steps__vertical_c6sxr {
62
64
  margin-top: var(--gap-8);
63
- } .steps__dash_41a33 {
65
+ } .steps__dash_c6sxr {
64
66
  flex: 1 1 auto;
65
67
  min-width: 24px;
66
68
  border-top: 2px solid var(--color-light-neutral-translucent-300);
67
69
  margin-right: var(--gap-8)
68
- } .steps__dash_41a33.steps__completed_41a33 {
70
+ } .steps__dash_c6sxr.steps__completed_c6sxr {
69
71
  border-top: var(--steps-dash-border);
70
- } .steps__dash_41a33.steps__vertical_41a33 {
72
+ } .steps__dash_c6sxr.steps__vertical_c6sxr {
71
73
  min-width: unset;
72
74
  min-height: 8px;
73
75
  margin-right: var(--gap-0);
74
76
  margin-top: var(--gap-8);
75
77
  border-left: 2px solid var(--color-light-neutral-translucent-300);
76
78
  border-top: none;
77
- } .steps__dash_41a33.steps__completed_41a33.steps__vertical_41a33 {
79
+ } .steps__dash_c6sxr.steps__completed_c6sxr.steps__vertical_c6sxr {
78
80
  border-left: var(--steps-dash-border);
79
- } .steps__textWrapper_41a33.steps__vertical_41a33 {
81
+ } .steps__textWrapper_c6sxr.steps__vertical_c6sxr {
80
82
  min-height: 48px
81
- } .steps__textWrapper_41a33.steps__vertical_41a33.steps__gap-24_41a33 {
83
+ } .steps__textWrapper_c6sxr.steps__vertical_c6sxr.steps__gap-24_c6sxr {
82
84
  margin-bottom: var(--gap-8);
83
- } .steps__textWrapper_41a33.steps__vertical_41a33.steps__gap-32_41a33 {
85
+ } .steps__textWrapper_c6sxr.steps__vertical_c6sxr.steps__gap-32_c6sxr {
84
86
  margin-bottom: var(--gap-16);
85
- } .steps__text_41a33 {
87
+ } .steps__text_c6sxr {
86
88
  font-size: 16px;
87
89
  line-height: 24px;
88
90
  font-weight: 400;
@@ -93,19 +95,19 @@
93
95
  border-radius: var(--gap-8);
94
96
  height: -moz-min-content;
95
97
  height: min-content
96
- } .steps__text_41a33.steps__interactive_41a33:not(.steps__disabled_41a33):hover {
98
+ } .steps__text_c6sxr.steps__interactive_c6sxr:not(.steps__disabled_c6sxr):hover {
97
99
  background: var(--color-light-transparent-default-hover);
98
- } .steps__text_41a33.steps__interactive_41a33:not(.steps__disabled_41a33):active {
100
+ } .steps__text_c6sxr.steps__interactive_c6sxr:not(.steps__disabled_c6sxr):active {
99
101
  background: var(--color-light-transparent-default-press);
100
- } .steps__focused_41a33 {
102
+ } .steps__focused_c6sxr {
101
103
  outline: var(--gap-2) solid var(--focus-color);
102
104
  outline-offset: var(--gap-2);
103
- } .steps__selected_41a33 .steps__text_41a33 {
105
+ } .steps__selected_c6sxr .steps__text_c6sxr {
104
106
  color: var(--color-light-text-primary);
105
- } .steps__selected_41a33 .steps__option_41a33 {
107
+ } .steps__selected_c6sxr .steps__option_c6sxr {
106
108
  color: var(--color-light-text-primary-inverted);
107
109
  background: var(--color-light-neutral-translucent-1300);
108
- } .steps__checkbox_41a33 {
110
+ } .steps__checkbox_c6sxr {
109
111
  display: flex;
110
112
  justify-content: center;
111
113
  align-items: center;
@@ -113,20 +115,20 @@
113
115
  width: 20px;
114
116
  height: 20px;
115
117
  border: 2px solid var(--color-light-neutral-translucent-300);
116
- } .steps__dot_41a33 {
118
+ } .steps__dot_c6sxr {
117
119
  width: 10px;
118
120
  height: 10px;
119
121
  border-radius: var(--border-radius-circle);
120
122
  background: var(--color-light-neutral-translucent-300);
121
- } .steps__selected_41a33 .steps__checkbox_41a33 {
123
+ } .steps__selected_c6sxr .steps__checkbox_c6sxr {
122
124
  border: 2px solid var(--color-light-neutral-translucent-1300)
123
- } .steps__selected_41a33 .steps__checkbox_41a33 .steps__dot_41a33 {
125
+ } .steps__selected_c6sxr .steps__checkbox_c6sxr .steps__dot_c6sxr {
124
126
  background: var(--color-light-neutral-translucent-1300);
125
- } .steps__option_41a33:not(.steps__error_41a33).steps__unordered_41a33 {
127
+ } .steps__option_c6sxr:not(.steps__error_c6sxr).steps__unordered_c6sxr {
126
128
  background: unset;
127
- } .steps__completedIndicator_41a33 > [class*='positive'] {
129
+ } .steps__completedIndicator_c6sxr > [class*='positive'] {
128
130
  color: var(--steps-option-svg-color);
129
131
  background-color: var(--steps-option-svg-color);
130
- } .steps__fullWidth_41a33 {
132
+ } .steps__fullWidth_c6sxr {
131
133
  width: 100%;
132
134
  }
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_41a33","horizontal":"steps__horizontal_41a33","vertical":"steps__vertical_41a33","interactive":"steps__interactive_41a33","disabled":"steps__disabled_41a33","text":"steps__text_41a33","indicator":"steps__indicator_41a33","option":"steps__option_41a33","dash":"steps__dash_41a33","completed":"steps__completed_41a33","textWrapper":"steps__textWrapper_41a33","gap-24":"steps__gap-24_41a33","gap-32":"steps__gap-32_41a33","focused":"steps__focused_41a33","selected":"steps__selected_41a33","checkbox":"steps__checkbox_41a33","dot":"steps__dot_41a33","error":"steps__error_41a33","unordered":"steps__unordered_41a33","completedIndicator":"steps__completedIndicator_41a33","fullWidth":"steps__fullWidth_41a33"};
3
+ const styles = {"step":"steps__step_c6sxr","horizontal":"steps__horizontal_c6sxr","vertical":"steps__vertical_c6sxr","textWrapper":"steps__textWrapper_c6sxr","interactive":"steps__interactive_c6sxr","disabled":"steps__disabled_c6sxr","text":"steps__text_c6sxr","indicator":"steps__indicator_c6sxr","option":"steps__option_c6sxr","dash":"steps__dash_c6sxr","completed":"steps__completed_c6sxr","gap-24":"steps__gap-24_c6sxr","gap-32":"steps__gap-32_c6sxr","focused":"steps__focused_c6sxr","selected":"steps__selected_c6sxr","checkbox":"steps__checkbox_c6sxr","dot":"steps__dot_c6sxr","error":"steps__error_c6sxr","unordered":"steps__unordered_c6sxr","completedIndicator":"steps__completedIndicator_c6sxr","fullWidth":"steps__fullWidth_c6sxr"};
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\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'] {\n color: var(--steps-option-svg-color);\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,UAAU,CAAC,uBAAuB,CAAC,MAAM,CAAC,mBAAmB,CAAC,WAAW,CAAC,wBAAwB,CAAC,QAAQ,CAAC,qBAAqB,CAAC,MAAM,CAAC,mBAAmB,CAAC,WAAW,CAAC,wBAAwB,CAAC,aAAa,CAAC,0BAA0B,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}\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'] {\n color: var(--steps-option-svg-color);\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;;;;"}
package/modern/components/step-indicator/index.css CHANGED
@@ -1,5 +1,5 @@
1
1
  :root {
2
2
  --gap-0: 0px;
3
- } .steps__component_1t0af.steps__component_1t0af {
3
+ } .steps__component_zqm8k.steps__component_zqm8k {
4
4
  padding: var(--gap-0);
5
5
  }
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_1t0af"};
3
+ const styles = {"component":"steps__component_zqm8k"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
package/modern/index.css CHANGED
@@ -1,8 +1,8 @@
1
- .steps__component_1run9 {
1
+ .steps__component_1aw9f {
2
2
  display: flex;
3
3
  align-items: center;
4
4
  flex-direction: row
5
- } .steps__component_1run9.steps__vertical_1run9 {
5
+ } .steps__component_1aw9f.steps__vertical_1aw9f {
6
6
  flex-direction: column;
7
7
  align-items: flex-start;
8
8
  }
package/modern/index.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- const styles = {"component":"steps__component_1run9","vertical":"steps__vertical_1run9"};
3
+ const styles = {"component":"steps__component_1aw9f","vertical":"steps__vertical_1aw9f"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
package/moderncssm/components/step/index.module.css CHANGED
@@ -16,6 +16,10 @@
16
16
  align-items: center;
17
17
  }
18
18
 
19
+ .step:last-of-type .textWrapper.vertical {
20
+ margin-bottom: var(--gap-0);
21
+ }
22
+
19
23
  .step.interactive:not(.disabled):hover {
20
24
  cursor: pointer;
21
25
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-steps",
3
- "version": "2.0.0-snapshot-6a9d3fc",
3
+ "version": "2.0.0-snapshot-5bcd094",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -16,13 +16,13 @@
16
16
  "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
17
17
  },
18
18
  "dependencies": {
19
- "@alfalab/core-components-badge": "6.0.0-snapshot-6a9d3fc",
20
- "@alfalab/core-components-shared": "1.0.0-snapshot-6a9d3fc",
19
+ "@alfalab/core-components-badge": "6.0.0-snapshot-5bcd094",
20
+ "@alfalab/core-components-shared": "1.0.0-snapshot-5bcd094",
21
21
  "@alfalab/hooks": "^1.13.1",
22
22
  "@alfalab/icons-glyph": "^2.210.0",
23
23
  "classnames": "^2.5.1",
24
24
  "tslib": "^2.4.0"
25
25
  },
26
- "themesVersion": "14.0.0-snapshot-6a9d3fc",
27
- "varsVersion": "10.0.0-snapshot-6a9d3fc"
26
+ "themesVersion": "14.0.0-snapshot-5bcd094",
27
+ "varsVersion": "10.0.0-snapshot-5bcd094"
28
28
  }
package/src/components/step/index.module.css CHANGED
@@ -16,6 +16,10 @@
16
16
  &:not(.vertical) {
17
17
  align-items: center;
18
18
  }
19
+
20
+ &:last-of-type .textWrapper.vertical {
21
+ margin-bottom: var(--gap-0);
22
+ }
19
23
  }
20
24
 
21
25
  .step.interactive:not(.disabled):hover {