@alfalab/core-components-switch 6.0.1-alfasans → 6.0.2

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 (21) hide show
  1. package/cssm/index.module.css +5 -9
  2. package/default.css +11 -11
  3. package/default.module.css.js +1 -1
  4. package/esm/default.css +11 -11
  5. package/esm/default.module.css.js +1 -1
  6. package/esm/index.css +24 -28
  7. package/esm/index.module.css.js +1 -1
  8. package/esm/inverted.css +11 -11
  9. package/esm/inverted.module.css.js +1 -1
  10. package/index.css +24 -28
  11. package/index.module.css.js +1 -1
  12. package/inverted.css +11 -11
  13. package/inverted.module.css.js +1 -1
  14. package/modern/default.css +11 -11
  15. package/modern/default.module.css.js +1 -1
  16. package/modern/index.css +24 -28
  17. package/modern/index.module.css.js +1 -1
  18. package/modern/inverted.css +11 -11
  19. package/modern/inverted.module.css.js +1 -1
  20. package/moderncssm/index.module.css +3 -6
  21. package/package.json +4 -4
package/cssm/index.module.css CHANGED
@@ -20,9 +20,8 @@
20
20
  --gap-16: var(--gap-m);
21
21
  }
22
22
  :root {
23
- --font-family-alfasans:
24
- 'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
25
- Helvetica, sans-serif;
23
+ --font-family-system:
24
+ system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
26
25
  }
27
26
  :root {
28
27
  --focus-color: var(--color-light-status-info);
@@ -94,8 +93,7 @@
94
93
  font-size: 16px;
95
94
  line-height: 24px;
96
95
  font-weight: 400;
97
- letter-spacing: -0.24px;
98
- font-family: var(--font-family-alfasans);
96
+ font-family: var(--font-family-system);
99
97
  display: block;
100
98
  }
101
99
  .label:not(:only-child) {
@@ -105,16 +103,14 @@
105
103
  font-size: 14px;
106
104
  line-height: 18px;
107
105
  font-weight: 400;
108
- letter-spacing: -0.08px;
109
- font-family: var(--font-family-alfasans);
106
+ font-family: var(--font-family-system);
110
107
  color: var(--switch-error-color);
111
108
  }
112
109
  .hint {
113
110
  font-size: 14px;
114
111
  line-height: 18px;
115
112
  font-weight: 400;
116
- letter-spacing: -0.08px;
117
- font-family: var(--font-family-alfasans);
113
+ font-family: var(--font-family-system);
118
114
  display: block;
119
115
  }
120
116
  .component.reversed {
package/default.css CHANGED
@@ -20,36 +20,36 @@
20
20
  --switch-disabled-checked-bg-color: var(--switch-disabled-bg-color);
21
21
  --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
22
22
  }
23
- .switch__switch_1gqdh {
23
+ .switch__switch_mm9x0 {
24
24
  background-color: var(--switch-bg-color);
25
25
  }
26
- .switch__switch_1gqdh:hover {
26
+ .switch__switch_mm9x0:hover {
27
27
  background-color: var(--switch-hover-bg-color);
28
28
  }
29
- .switch__label_1gqdh {
29
+ .switch__label_mm9x0 {
30
30
  color: var(--switch-label-color);
31
31
  }
32
- .switch__hint_1gqdh {
32
+ .switch__hint_mm9x0 {
33
33
  color: var(--switch-hint-color);
34
34
  }
35
- .switch__checked_1gqdh .switch__switch_1gqdh {
35
+ .switch__checked_mm9x0 .switch__switch_mm9x0 {
36
36
  background-color: var(--switch-checked-bg-color);
37
37
  }
38
- .switch__checked_1gqdh .switch__switch_1gqdh:hover {
38
+ .switch__checked_mm9x0 .switch__switch_mm9x0:hover {
39
39
  background-color: var(--switch-checked-hover-bg-color);
40
40
  }
41
- .switch__disabled_1gqdh .switch__label_1gqdh {
41
+ .switch__disabled_mm9x0 .switch__label_mm9x0 {
42
42
  color: var(--switch-disabled-color);
43
43
  }
44
- .switch__disabled_1gqdh .switch__hint_1gqdh {
44
+ .switch__disabled_mm9x0 .switch__hint_mm9x0 {
45
45
  color: var(--switch-disabled-color);
46
46
  }
47
- .switch__disabled_1gqdh .switch__switch_1gqdh {
47
+ .switch__disabled_mm9x0 .switch__switch_mm9x0 {
48
48
  background-color: var(--switch-disabled-bg-color);
49
49
  }
50
- .switch__disabled_1gqdh .switch__switch_1gqdh:before {
50
+ .switch__disabled_mm9x0 .switch__switch_mm9x0:before {
51
51
  background-color: var(--switch-icon-disabled-color);
52
52
  }
53
- .switch__disabled_1gqdh.switch__checked_1gqdh .switch__switch_1gqdh {
53
+ .switch__disabled_mm9x0.switch__checked_mm9x0 .switch__switch_mm9x0 {
54
54
  background-color: var(--switch-disabled-checked-bg-color);
55
55
  }
package/default.module.css.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  require('./default.css');
4
4
 
5
- var defaultStyles = {"switch":"switch__switch_1gqdh","label":"switch__label_1gqdh","hint":"switch__hint_1gqdh","checked":"switch__checked_1gqdh","disabled":"switch__disabled_1gqdh"};
5
+ var defaultStyles = {"switch":"switch__switch_mm9x0","label":"switch__label_mm9x0","hint":"switch__hint_mm9x0","checked":"switch__checked_mm9x0","disabled":"switch__disabled_mm9x0"};
6
6
 
7
7
  module.exports = defaultStyles;
8
8
  //# sourceMappingURL=default.module.css.js.map
package/esm/default.css CHANGED
@@ -20,36 +20,36 @@
20
20
  --switch-disabled-checked-bg-color: var(--switch-disabled-bg-color);
21
21
  --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
22
22
  }
23
- .switch__switch_1gqdh {
23
+ .switch__switch_mm9x0 {
24
24
  background-color: var(--switch-bg-color);
25
25
  }
26
- .switch__switch_1gqdh:hover {
26
+ .switch__switch_mm9x0:hover {
27
27
  background-color: var(--switch-hover-bg-color);
28
28
  }
29
- .switch__label_1gqdh {
29
+ .switch__label_mm9x0 {
30
30
  color: var(--switch-label-color);
31
31
  }
32
- .switch__hint_1gqdh {
32
+ .switch__hint_mm9x0 {
33
33
  color: var(--switch-hint-color);
34
34
  }
35
- .switch__checked_1gqdh .switch__switch_1gqdh {
35
+ .switch__checked_mm9x0 .switch__switch_mm9x0 {
36
36
  background-color: var(--switch-checked-bg-color);
37
37
  }
38
- .switch__checked_1gqdh .switch__switch_1gqdh:hover {
38
+ .switch__checked_mm9x0 .switch__switch_mm9x0:hover {
39
39
  background-color: var(--switch-checked-hover-bg-color);
40
40
  }
41
- .switch__disabled_1gqdh .switch__label_1gqdh {
41
+ .switch__disabled_mm9x0 .switch__label_mm9x0 {
42
42
  color: var(--switch-disabled-color);
43
43
  }
44
- .switch__disabled_1gqdh .switch__hint_1gqdh {
44
+ .switch__disabled_mm9x0 .switch__hint_mm9x0 {
45
45
  color: var(--switch-disabled-color);
46
46
  }
47
- .switch__disabled_1gqdh .switch__switch_1gqdh {
47
+ .switch__disabled_mm9x0 .switch__switch_mm9x0 {
48
48
  background-color: var(--switch-disabled-bg-color);
49
49
  }
50
- .switch__disabled_1gqdh .switch__switch_1gqdh:before {
50
+ .switch__disabled_mm9x0 .switch__switch_mm9x0:before {
51
51
  background-color: var(--switch-icon-disabled-color);
52
52
  }
53
- .switch__disabled_1gqdh.switch__checked_1gqdh .switch__switch_1gqdh {
53
+ .switch__disabled_mm9x0.switch__checked_mm9x0 .switch__switch_mm9x0 {
54
54
  background-color: var(--switch-disabled-checked-bg-color);
55
55
  }
package/esm/default.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './default.css';
2
2
 
3
- var defaultStyles = {"switch":"switch__switch_1gqdh","label":"switch__label_1gqdh","hint":"switch__hint_1gqdh","checked":"switch__checked_1gqdh","disabled":"switch__disabled_1gqdh"};
3
+ var defaultStyles = {"switch":"switch__switch_mm9x0","label":"switch__label_mm9x0","hint":"switch__hint_mm9x0","checked":"switch__checked_mm9x0","disabled":"switch__disabled_mm9x0"};
4
4
 
5
5
  export { defaultStyles as default };
6
6
  //# sourceMappingURL=default.module.css.js.map
package/esm/index.css CHANGED
@@ -20,9 +20,8 @@
20
20
  --gap-16: var(--gap-m);
21
21
  }
22
22
  :root {
23
- --font-family-alfasans:
24
- 'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
25
- Helvetica, sans-serif;
23
+ --font-family-system:
24
+ system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
26
25
  }
27
26
  :root {
28
27
  --focus-color: var(--color-light-status-info);
@@ -33,7 +32,7 @@
33
32
  --switch-error-color: var(--color-light-text-negative);
34
33
  --switch-icon-color: var(--color-static-neutral-0);
35
34
  }
36
- .switch__component_ud3kw {
35
+ .switch__component_1xk5j {
37
36
  display: inline-flex;
38
37
  align-items: flex-start;
39
38
  margin: var(--gap-0);
@@ -42,25 +41,25 @@
42
41
  cursor: pointer;
43
42
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
44
43
  }
45
- .switch__component_ud3kw input {
44
+ .switch__component_1xk5j input {
46
45
  opacity: 0;
47
46
  position: absolute;
48
47
  }
49
- .switch__start_ud3kw {
48
+ .switch__start_1xk5j {
50
49
  align-items: flex-start;
51
50
  }
52
- .switch__center_ud3kw {
51
+ .switch__center_1xk5j {
53
52
  align-items: center;
54
53
  }
55
- .switch__addons_ud3kw {
54
+ .switch__addons_1xk5j {
56
55
  margin-left: auto;
57
56
  padding-left: var(--gap-16);
58
57
  line-height: 24px;
59
58
  }
60
- .switch__block_ud3kw {
59
+ .switch__block_1xk5j {
61
60
  width: 100%;
62
61
  }
63
- .switch__switch_ud3kw {
62
+ .switch__switch_1xk5j {
64
63
  position: relative;
65
64
  border-radius: var(--border-radius-16);
66
65
  width: 36px;
@@ -73,7 +72,7 @@
73
72
  border-color 0.2s ease;
74
73
  box-sizing: border-box;
75
74
  }
76
- .switch__switch_ud3kw:before {
75
+ .switch__switch_1xk5j:before {
77
76
  content: '';
78
77
  position: absolute;
79
78
  top: var(--gap-0);
@@ -86,57 +85,54 @@
86
85
  box-sizing: border-box;
87
86
  transition: transform 0.2s ease;
88
87
  }
89
- .switch__content_ud3kw {
88
+ .switch__content_1xk5j {
90
89
  margin-left: var(--gap-12);
91
90
  flex-grow: 1;
92
91
  }
93
- .switch__label_ud3kw {
92
+ .switch__label_1xk5j {
94
93
  font-size: 16px;
95
94
  line-height: 24px;
96
95
  font-weight: 400;
97
- letter-spacing: -0.24px;
98
- font-family: var(--font-family-alfasans);
96
+ font-family: var(--font-family-system);
99
97
  display: block;
100
98
  }
101
- .switch__label_ud3kw:not(:only-child) {
99
+ .switch__label_1xk5j:not(:only-child) {
102
100
  margin-bottom: var(--gap-4);
103
101
  }
104
- .switch__errorMessage_ud3kw {
102
+ .switch__errorMessage_1xk5j {
105
103
  font-size: 14px;
106
104
  line-height: 18px;
107
105
  font-weight: 400;
108
- letter-spacing: -0.08px;
109
- font-family: var(--font-family-alfasans);
106
+ font-family: var(--font-family-system);
110
107
  color: var(--switch-error-color);
111
108
  }
112
- .switch__hint_ud3kw {
109
+ .switch__hint_1xk5j {
113
110
  font-size: 14px;
114
111
  line-height: 18px;
115
112
  font-weight: 400;
116
- letter-spacing: -0.08px;
117
- font-family: var(--font-family-alfasans);
113
+ font-family: var(--font-family-system);
118
114
  display: block;
119
115
  }
120
- .switch__component_ud3kw.switch__reversed_ud3kw {
116
+ .switch__component_1xk5j.switch__reversed_1xk5j {
121
117
  flex-direction: row-reverse;
122
118
  }
123
- .switch__reversed_ud3kw .switch__content_ud3kw {
119
+ .switch__reversed_1xk5j .switch__content_1xk5j {
124
120
  margin-right: var(--gap-16);
125
121
  margin-left: var(--gap-0);
126
122
  }
127
- .switch__reversed_ud3kw .switch__addons_ud3kw {
123
+ .switch__reversed_1xk5j .switch__addons_1xk5j {
128
124
  margin-left: var(--gap-0);
129
125
  padding-left: var(--gap-0);
130
126
  margin-right: auto;
131
127
  padding-right: var(--gap-16);
132
128
  }
133
- .switch__checked_ud3kw .switch__switch_ud3kw:before {
129
+ .switch__checked_1xk5j .switch__switch_1xk5j:before {
134
130
  transform: translateX(16px);
135
131
  }
136
- .switch__disabled_ud3kw {
132
+ .switch__disabled_1xk5j {
137
133
  cursor: var(--disabled-cursor);
138
134
  }
139
- .switch__focused_ud3kw .switch__switch_ud3kw {
135
+ .switch__focused_1xk5j .switch__switch_1xk5j {
140
136
  outline: 2px solid var(--focus-color);
141
137
  outline-offset: 2px;
142
138
  }
package/esm/index.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- var styles = {"component":"switch__component_ud3kw","start":"switch__start_ud3kw","center":"switch__center_ud3kw","addons":"switch__addons_ud3kw","block":"switch__block_ud3kw","switch":"switch__switch_ud3kw","content":"switch__content_ud3kw","label":"switch__label_ud3kw","errorMessage":"switch__errorMessage_ud3kw","hint":"switch__hint_ud3kw","reversed":"switch__reversed_ud3kw","checked":"switch__checked_ud3kw","disabled":"switch__disabled_ud3kw","focused":"switch__focused_ud3kw"};
3
+ var styles = {"component":"switch__component_1xk5j","start":"switch__start_1xk5j","center":"switch__center_1xk5j","addons":"switch__addons_1xk5j","block":"switch__block_1xk5j","switch":"switch__switch_1xk5j","content":"switch__content_1xk5j","label":"switch__label_1xk5j","errorMessage":"switch__errorMessage_1xk5j","hint":"switch__hint_1xk5j","reversed":"switch__reversed_1xk5j","checked":"switch__checked_1xk5j","disabled":"switch__disabled_1xk5j","focused":"switch__focused_1xk5j"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
package/esm/inverted.css CHANGED
@@ -20,36 +20,36 @@
20
20
  --switch-disabled-checked-bg-inverted-color: var(--switch-disabled-bg-inverted-color);
21
21
  --switch-icon-disabled-inverted-color: var(--color-light-neutral-translucent-500-inverted);
22
22
  }
23
- .switch__switch_1djsn {
23
+ .switch__switch_b7fk6 {
24
24
  background-color: var(--switch-bg-inverted-color);
25
25
  }
26
- .switch__switch_1djsn:hover {
26
+ .switch__switch_b7fk6:hover {
27
27
  background-color: var(--switch-hover-bg-inverted-color);
28
28
  }
29
- .switch__label_1djsn {
29
+ .switch__label_b7fk6 {
30
30
  color: var(--switch-label-inverted-color);
31
31
  }
32
- .switch__hint_1djsn {
32
+ .switch__hint_b7fk6 {
33
33
  color: var(--switch-hint-inverted-color);
34
34
  }
35
- .switch__checked_1djsn .switch__switch_1djsn {
35
+ .switch__checked_b7fk6 .switch__switch_b7fk6 {
36
36
  background-color: var(--switch-checked-bg-inverted-color);
37
37
  }
38
- .switch__checked_1djsn .switch__switch_1djsn:hover {
38
+ .switch__checked_b7fk6 .switch__switch_b7fk6:hover {
39
39
  background-color: var(--switch-checked-hover-bg-inverted-color);
40
40
  }
41
- .switch__disabled_1djsn .switch__label_1djsn {
41
+ .switch__disabled_b7fk6 .switch__label_b7fk6 {
42
42
  color: var(--switch-disabled-inverted-color);
43
43
  }
44
- .switch__disabled_1djsn .switch__hint_1djsn {
44
+ .switch__disabled_b7fk6 .switch__hint_b7fk6 {
45
45
  color: var(--switch-disabled-inverted-color);
46
46
  }
47
- .switch__disabled_1djsn .switch__switch_1djsn {
47
+ .switch__disabled_b7fk6 .switch__switch_b7fk6 {
48
48
  background-color: var(--switch-disabled-bg-inverted-color);
49
49
  }
50
- .switch__disabled_1djsn .switch__switch_1djsn:before {
50
+ .switch__disabled_b7fk6 .switch__switch_b7fk6:before {
51
51
  background-color: var(--switch-icon-disabled-inverted-color);
52
52
  }
53
- .switch__disabled_1djsn.switch__checked_1djsn .switch__switch_1djsn {
53
+ .switch__disabled_b7fk6.switch__checked_b7fk6 .switch__switch_b7fk6 {
54
54
  background-color: var(--switch-disabled-checked-bg-inverted-color);
55
55
  }
package/esm/inverted.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './inverted.css';
2
2
 
3
- var invertedStyles = {"switch":"switch__switch_1djsn","label":"switch__label_1djsn","hint":"switch__hint_1djsn","checked":"switch__checked_1djsn","disabled":"switch__disabled_1djsn"};
3
+ var invertedStyles = {"switch":"switch__switch_b7fk6","label":"switch__label_b7fk6","hint":"switch__hint_b7fk6","checked":"switch__checked_b7fk6","disabled":"switch__disabled_b7fk6"};
4
4
 
5
5
  export { invertedStyles as default };
6
6
  //# sourceMappingURL=inverted.module.css.js.map
package/index.css CHANGED
@@ -20,9 +20,8 @@
20
20
  --gap-16: var(--gap-m);
21
21
  }
22
22
  :root {
23
- --font-family-alfasans:
24
- 'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
25
- Helvetica, sans-serif;
23
+ --font-family-system:
24
+ system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
26
25
  }
27
26
  :root {
28
27
  --focus-color: var(--color-light-status-info);
@@ -33,7 +32,7 @@
33
32
  --switch-error-color: var(--color-light-text-negative);
34
33
  --switch-icon-color: var(--color-static-neutral-0);
35
34
  }
36
- .switch__component_ud3kw {
35
+ .switch__component_1xk5j {
37
36
  display: inline-flex;
38
37
  align-items: flex-start;
39
38
  margin: var(--gap-0);
@@ -42,25 +41,25 @@
42
41
  cursor: pointer;
43
42
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
44
43
  }
45
- .switch__component_ud3kw input {
44
+ .switch__component_1xk5j input {
46
45
  opacity: 0;
47
46
  position: absolute;
48
47
  }
49
- .switch__start_ud3kw {
48
+ .switch__start_1xk5j {
50
49
  align-items: flex-start;
51
50
  }
52
- .switch__center_ud3kw {
51
+ .switch__center_1xk5j {
53
52
  align-items: center;
54
53
  }
55
- .switch__addons_ud3kw {
54
+ .switch__addons_1xk5j {
56
55
  margin-left: auto;
57
56
  padding-left: var(--gap-16);
58
57
  line-height: 24px;
59
58
  }
60
- .switch__block_ud3kw {
59
+ .switch__block_1xk5j {
61
60
  width: 100%;
62
61
  }
63
- .switch__switch_ud3kw {
62
+ .switch__switch_1xk5j {
64
63
  position: relative;
65
64
  border-radius: var(--border-radius-16);
66
65
  width: 36px;
@@ -73,7 +72,7 @@
73
72
  border-color 0.2s ease;
74
73
  box-sizing: border-box;
75
74
  }
76
- .switch__switch_ud3kw:before {
75
+ .switch__switch_1xk5j:before {
77
76
  content: '';
78
77
  position: absolute;
79
78
  top: var(--gap-0);
@@ -86,57 +85,54 @@
86
85
  box-sizing: border-box;
87
86
  transition: transform 0.2s ease;
88
87
  }
89
- .switch__content_ud3kw {
88
+ .switch__content_1xk5j {
90
89
  margin-left: var(--gap-12);
91
90
  flex-grow: 1;
92
91
  }
93
- .switch__label_ud3kw {
92
+ .switch__label_1xk5j {
94
93
  font-size: 16px;
95
94
  line-height: 24px;
96
95
  font-weight: 400;
97
- letter-spacing: -0.24px;
98
- font-family: var(--font-family-alfasans);
96
+ font-family: var(--font-family-system);
99
97
  display: block;
100
98
  }
101
- .switch__label_ud3kw:not(:only-child) {
99
+ .switch__label_1xk5j:not(:only-child) {
102
100
  margin-bottom: var(--gap-4);
103
101
  }
104
- .switch__errorMessage_ud3kw {
102
+ .switch__errorMessage_1xk5j {
105
103
  font-size: 14px;
106
104
  line-height: 18px;
107
105
  font-weight: 400;
108
- letter-spacing: -0.08px;
109
- font-family: var(--font-family-alfasans);
106
+ font-family: var(--font-family-system);
110
107
  color: var(--switch-error-color);
111
108
  }
112
- .switch__hint_ud3kw {
109
+ .switch__hint_1xk5j {
113
110
  font-size: 14px;
114
111
  line-height: 18px;
115
112
  font-weight: 400;
116
- letter-spacing: -0.08px;
117
- font-family: var(--font-family-alfasans);
113
+ font-family: var(--font-family-system);
118
114
  display: block;
119
115
  }
120
- .switch__component_ud3kw.switch__reversed_ud3kw {
116
+ .switch__component_1xk5j.switch__reversed_1xk5j {
121
117
  flex-direction: row-reverse;
122
118
  }
123
- .switch__reversed_ud3kw .switch__content_ud3kw {
119
+ .switch__reversed_1xk5j .switch__content_1xk5j {
124
120
  margin-right: var(--gap-16);
125
121
  margin-left: var(--gap-0);
126
122
  }
127
- .switch__reversed_ud3kw .switch__addons_ud3kw {
123
+ .switch__reversed_1xk5j .switch__addons_1xk5j {
128
124
  margin-left: var(--gap-0);
129
125
  padding-left: var(--gap-0);
130
126
  margin-right: auto;
131
127
  padding-right: var(--gap-16);
132
128
  }
133
- .switch__checked_ud3kw .switch__switch_ud3kw:before {
129
+ .switch__checked_1xk5j .switch__switch_1xk5j:before {
134
130
  transform: translateX(16px);
135
131
  }
136
- .switch__disabled_ud3kw {
132
+ .switch__disabled_1xk5j {
137
133
  cursor: var(--disabled-cursor);
138
134
  }
139
- .switch__focused_ud3kw .switch__switch_ud3kw {
135
+ .switch__focused_1xk5j .switch__switch_1xk5j {
140
136
  outline: 2px solid var(--focus-color);
141
137
  outline-offset: 2px;
142
138
  }
package/index.module.css.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  require('./index.css');
4
4
 
5
- var styles = {"component":"switch__component_ud3kw","start":"switch__start_ud3kw","center":"switch__center_ud3kw","addons":"switch__addons_ud3kw","block":"switch__block_ud3kw","switch":"switch__switch_ud3kw","content":"switch__content_ud3kw","label":"switch__label_ud3kw","errorMessage":"switch__errorMessage_ud3kw","hint":"switch__hint_ud3kw","reversed":"switch__reversed_ud3kw","checked":"switch__checked_ud3kw","disabled":"switch__disabled_ud3kw","focused":"switch__focused_ud3kw"};
5
+ var styles = {"component":"switch__component_1xk5j","start":"switch__start_1xk5j","center":"switch__center_1xk5j","addons":"switch__addons_1xk5j","block":"switch__block_1xk5j","switch":"switch__switch_1xk5j","content":"switch__content_1xk5j","label":"switch__label_1xk5j","errorMessage":"switch__errorMessage_1xk5j","hint":"switch__hint_1xk5j","reversed":"switch__reversed_1xk5j","checked":"switch__checked_1xk5j","disabled":"switch__disabled_1xk5j","focused":"switch__focused_1xk5j"};
6
6
 
7
7
  module.exports = styles;
8
8
  //# sourceMappingURL=index.module.css.js.map
package/inverted.css CHANGED
@@ -20,36 +20,36 @@
20
20
  --switch-disabled-checked-bg-inverted-color: var(--switch-disabled-bg-inverted-color);
21
21
  --switch-icon-disabled-inverted-color: var(--color-light-neutral-translucent-500-inverted);
22
22
  }
23
- .switch__switch_1djsn {
23
+ .switch__switch_b7fk6 {
24
24
  background-color: var(--switch-bg-inverted-color);
25
25
  }
26
- .switch__switch_1djsn:hover {
26
+ .switch__switch_b7fk6:hover {
27
27
  background-color: var(--switch-hover-bg-inverted-color);
28
28
  }
29
- .switch__label_1djsn {
29
+ .switch__label_b7fk6 {
30
30
  color: var(--switch-label-inverted-color);
31
31
  }
32
- .switch__hint_1djsn {
32
+ .switch__hint_b7fk6 {
33
33
  color: var(--switch-hint-inverted-color);
34
34
  }
35
- .switch__checked_1djsn .switch__switch_1djsn {
35
+ .switch__checked_b7fk6 .switch__switch_b7fk6 {
36
36
  background-color: var(--switch-checked-bg-inverted-color);
37
37
  }
38
- .switch__checked_1djsn .switch__switch_1djsn:hover {
38
+ .switch__checked_b7fk6 .switch__switch_b7fk6:hover {
39
39
  background-color: var(--switch-checked-hover-bg-inverted-color);
40
40
  }
41
- .switch__disabled_1djsn .switch__label_1djsn {
41
+ .switch__disabled_b7fk6 .switch__label_b7fk6 {
42
42
  color: var(--switch-disabled-inverted-color);
43
43
  }
44
- .switch__disabled_1djsn .switch__hint_1djsn {
44
+ .switch__disabled_b7fk6 .switch__hint_b7fk6 {
45
45
  color: var(--switch-disabled-inverted-color);
46
46
  }
47
- .switch__disabled_1djsn .switch__switch_1djsn {
47
+ .switch__disabled_b7fk6 .switch__switch_b7fk6 {
48
48
  background-color: var(--switch-disabled-bg-inverted-color);
49
49
  }
50
- .switch__disabled_1djsn .switch__switch_1djsn:before {
50
+ .switch__disabled_b7fk6 .switch__switch_b7fk6:before {
51
51
  background-color: var(--switch-icon-disabled-inverted-color);
52
52
  }
53
- .switch__disabled_1djsn.switch__checked_1djsn .switch__switch_1djsn {
53
+ .switch__disabled_b7fk6.switch__checked_b7fk6 .switch__switch_b7fk6 {
54
54
  background-color: var(--switch-disabled-checked-bg-inverted-color);
55
55
  }
package/inverted.module.css.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  require('./inverted.css');
4
4
 
5
- var invertedStyles = {"switch":"switch__switch_1djsn","label":"switch__label_1djsn","hint":"switch__hint_1djsn","checked":"switch__checked_1djsn","disabled":"switch__disabled_1djsn"};
5
+ var invertedStyles = {"switch":"switch__switch_b7fk6","label":"switch__label_b7fk6","hint":"switch__hint_b7fk6","checked":"switch__checked_b7fk6","disabled":"switch__disabled_b7fk6"};
6
6
 
7
7
  module.exports = invertedStyles;
8
8
  //# sourceMappingURL=inverted.module.css.js.map
package/modern/default.css CHANGED
@@ -20,36 +20,36 @@
20
20
  --switch-disabled-checked-bg-color: var(--switch-disabled-bg-color);
21
21
  --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
22
22
  }
23
- .switch__switch_1gqdh {
23
+ .switch__switch_mm9x0 {
24
24
  background-color: var(--switch-bg-color);
25
25
  }
26
- .switch__switch_1gqdh:hover {
26
+ .switch__switch_mm9x0:hover {
27
27
  background-color: var(--switch-hover-bg-color);
28
28
  }
29
- .switch__label_1gqdh {
29
+ .switch__label_mm9x0 {
30
30
  color: var(--switch-label-color);
31
31
  }
32
- .switch__hint_1gqdh {
32
+ .switch__hint_mm9x0 {
33
33
  color: var(--switch-hint-color);
34
34
  }
35
- .switch__checked_1gqdh .switch__switch_1gqdh {
35
+ .switch__checked_mm9x0 .switch__switch_mm9x0 {
36
36
  background-color: var(--switch-checked-bg-color);
37
37
  }
38
- .switch__checked_1gqdh .switch__switch_1gqdh:hover {
38
+ .switch__checked_mm9x0 .switch__switch_mm9x0:hover {
39
39
  background-color: var(--switch-checked-hover-bg-color);
40
40
  }
41
- .switch__disabled_1gqdh .switch__label_1gqdh {
41
+ .switch__disabled_mm9x0 .switch__label_mm9x0 {
42
42
  color: var(--switch-disabled-color);
43
43
  }
44
- .switch__disabled_1gqdh .switch__hint_1gqdh {
44
+ .switch__disabled_mm9x0 .switch__hint_mm9x0 {
45
45
  color: var(--switch-disabled-color);
46
46
  }
47
- .switch__disabled_1gqdh .switch__switch_1gqdh {
47
+ .switch__disabled_mm9x0 .switch__switch_mm9x0 {
48
48
  background-color: var(--switch-disabled-bg-color);
49
49
  }
50
- .switch__disabled_1gqdh .switch__switch_1gqdh:before {
50
+ .switch__disabled_mm9x0 .switch__switch_mm9x0:before {
51
51
  background-color: var(--switch-icon-disabled-color);
52
52
  }
53
- .switch__disabled_1gqdh.switch__checked_1gqdh .switch__switch_1gqdh {
53
+ .switch__disabled_mm9x0.switch__checked_mm9x0 .switch__switch_mm9x0 {
54
54
  background-color: var(--switch-disabled-checked-bg-color);
55
55
  }
package/modern/default.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './default.css';
2
2
 
3
- const defaultStyles = {"switch":"switch__switch_1gqdh","label":"switch__label_1gqdh","hint":"switch__hint_1gqdh","checked":"switch__checked_1gqdh","disabled":"switch__disabled_1gqdh"};
3
+ const defaultStyles = {"switch":"switch__switch_mm9x0","label":"switch__label_mm9x0","hint":"switch__hint_mm9x0","checked":"switch__checked_mm9x0","disabled":"switch__disabled_mm9x0"};
4
4
 
5
5
  export { defaultStyles as default };
6
6
  //# sourceMappingURL=default.module.css.js.map
package/modern/index.css CHANGED
@@ -20,9 +20,8 @@
20
20
  --gap-16: var(--gap-m);
21
21
  }
22
22
  :root {
23
- --font-family-alfasans:
24
- 'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
25
- Helvetica, sans-serif;
23
+ --font-family-system:
24
+ system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
26
25
  }
27
26
  :root {
28
27
  --focus-color: var(--color-light-status-info);
@@ -33,7 +32,7 @@
33
32
  --switch-error-color: var(--color-light-text-negative);
34
33
  --switch-icon-color: var(--color-static-neutral-0);
35
34
  }
36
- .switch__component_ud3kw {
35
+ .switch__component_1xk5j {
37
36
  display: inline-flex;
38
37
  align-items: flex-start;
39
38
  margin: var(--gap-0);
@@ -42,25 +41,25 @@
42
41
  cursor: pointer;
43
42
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
44
43
  }
45
- .switch__component_ud3kw input {
44
+ .switch__component_1xk5j input {
46
45
  opacity: 0;
47
46
  position: absolute;
48
47
  }
49
- .switch__start_ud3kw {
48
+ .switch__start_1xk5j {
50
49
  align-items: flex-start;
51
50
  }
52
- .switch__center_ud3kw {
51
+ .switch__center_1xk5j {
53
52
  align-items: center;
54
53
  }
55
- .switch__addons_ud3kw {
54
+ .switch__addons_1xk5j {
56
55
  margin-left: auto;
57
56
  padding-left: var(--gap-16);
58
57
  line-height: 24px;
59
58
  }
60
- .switch__block_ud3kw {
59
+ .switch__block_1xk5j {
61
60
  width: 100%;
62
61
  }
63
- .switch__switch_ud3kw {
62
+ .switch__switch_1xk5j {
64
63
  position: relative;
65
64
  border-radius: var(--border-radius-16);
66
65
  width: 36px;
@@ -73,7 +72,7 @@
73
72
  border-color 0.2s ease;
74
73
  box-sizing: border-box;
75
74
  }
76
- .switch__switch_ud3kw:before {
75
+ .switch__switch_1xk5j:before {
77
76
  content: '';
78
77
  position: absolute;
79
78
  top: var(--gap-0);
@@ -86,57 +85,54 @@
86
85
  box-sizing: border-box;
87
86
  transition: transform 0.2s ease;
88
87
  }
89
- .switch__content_ud3kw {
88
+ .switch__content_1xk5j {
90
89
  margin-left: var(--gap-12);
91
90
  flex-grow: 1;
92
91
  }
93
- .switch__label_ud3kw {
92
+ .switch__label_1xk5j {
94
93
  font-size: 16px;
95
94
  line-height: 24px;
96
95
  font-weight: 400;
97
- letter-spacing: -0.24px;
98
- font-family: var(--font-family-alfasans);
96
+ font-family: var(--font-family-system);
99
97
  display: block;
100
98
  }
101
- .switch__label_ud3kw:not(:only-child) {
99
+ .switch__label_1xk5j:not(:only-child) {
102
100
  margin-bottom: var(--gap-4);
103
101
  }
104
- .switch__errorMessage_ud3kw {
102
+ .switch__errorMessage_1xk5j {
105
103
  font-size: 14px;
106
104
  line-height: 18px;
107
105
  font-weight: 400;
108
- letter-spacing: -0.08px;
109
- font-family: var(--font-family-alfasans);
106
+ font-family: var(--font-family-system);
110
107
  color: var(--switch-error-color);
111
108
  }
112
- .switch__hint_ud3kw {
109
+ .switch__hint_1xk5j {
113
110
  font-size: 14px;
114
111
  line-height: 18px;
115
112
  font-weight: 400;
116
- letter-spacing: -0.08px;
117
- font-family: var(--font-family-alfasans);
113
+ font-family: var(--font-family-system);
118
114
  display: block;
119
115
  }
120
- .switch__component_ud3kw.switch__reversed_ud3kw {
116
+ .switch__component_1xk5j.switch__reversed_1xk5j {
121
117
  flex-direction: row-reverse;
122
118
  }
123
- .switch__reversed_ud3kw .switch__content_ud3kw {
119
+ .switch__reversed_1xk5j .switch__content_1xk5j {
124
120
  margin-right: var(--gap-16);
125
121
  margin-left: var(--gap-0);
126
122
  }
127
- .switch__reversed_ud3kw .switch__addons_ud3kw {
123
+ .switch__reversed_1xk5j .switch__addons_1xk5j {
128
124
  margin-left: var(--gap-0);
129
125
  padding-left: var(--gap-0);
130
126
  margin-right: auto;
131
127
  padding-right: var(--gap-16);
132
128
  }
133
- .switch__checked_ud3kw .switch__switch_ud3kw:before {
129
+ .switch__checked_1xk5j .switch__switch_1xk5j:before {
134
130
  transform: translateX(16px);
135
131
  }
136
- .switch__disabled_ud3kw {
132
+ .switch__disabled_1xk5j {
137
133
  cursor: var(--disabled-cursor);
138
134
  }
139
- .switch__focused_ud3kw .switch__switch_ud3kw {
135
+ .switch__focused_1xk5j .switch__switch_1xk5j {
140
136
  outline: 2px solid var(--focus-color);
141
137
  outline-offset: 2px;
142
138
  }
package/modern/index.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- const styles = {"component":"switch__component_ud3kw","start":"switch__start_ud3kw","center":"switch__center_ud3kw","addons":"switch__addons_ud3kw","block":"switch__block_ud3kw","switch":"switch__switch_ud3kw","content":"switch__content_ud3kw","label":"switch__label_ud3kw","errorMessage":"switch__errorMessage_ud3kw","hint":"switch__hint_ud3kw","reversed":"switch__reversed_ud3kw","checked":"switch__checked_ud3kw","disabled":"switch__disabled_ud3kw","focused":"switch__focused_ud3kw"};
3
+ const styles = {"component":"switch__component_1xk5j","start":"switch__start_1xk5j","center":"switch__center_1xk5j","addons":"switch__addons_1xk5j","block":"switch__block_1xk5j","switch":"switch__switch_1xk5j","content":"switch__content_1xk5j","label":"switch__label_1xk5j","errorMessage":"switch__errorMessage_1xk5j","hint":"switch__hint_1xk5j","reversed":"switch__reversed_1xk5j","checked":"switch__checked_1xk5j","disabled":"switch__disabled_1xk5j","focused":"switch__focused_1xk5j"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
package/modern/inverted.css CHANGED
@@ -20,36 +20,36 @@
20
20
  --switch-disabled-checked-bg-inverted-color: var(--switch-disabled-bg-inverted-color);
21
21
  --switch-icon-disabled-inverted-color: var(--color-light-neutral-translucent-500-inverted);
22
22
  }
23
- .switch__switch_1djsn {
23
+ .switch__switch_b7fk6 {
24
24
  background-color: var(--switch-bg-inverted-color);
25
25
  }
26
- .switch__switch_1djsn:hover {
26
+ .switch__switch_b7fk6:hover {
27
27
  background-color: var(--switch-hover-bg-inverted-color);
28
28
  }
29
- .switch__label_1djsn {
29
+ .switch__label_b7fk6 {
30
30
  color: var(--switch-label-inverted-color);
31
31
  }
32
- .switch__hint_1djsn {
32
+ .switch__hint_b7fk6 {
33
33
  color: var(--switch-hint-inverted-color);
34
34
  }
35
- .switch__checked_1djsn .switch__switch_1djsn {
35
+ .switch__checked_b7fk6 .switch__switch_b7fk6 {
36
36
  background-color: var(--switch-checked-bg-inverted-color);
37
37
  }
38
- .switch__checked_1djsn .switch__switch_1djsn:hover {
38
+ .switch__checked_b7fk6 .switch__switch_b7fk6:hover {
39
39
  background-color: var(--switch-checked-hover-bg-inverted-color);
40
40
  }
41
- .switch__disabled_1djsn .switch__label_1djsn {
41
+ .switch__disabled_b7fk6 .switch__label_b7fk6 {
42
42
  color: var(--switch-disabled-inverted-color);
43
43
  }
44
- .switch__disabled_1djsn .switch__hint_1djsn {
44
+ .switch__disabled_b7fk6 .switch__hint_b7fk6 {
45
45
  color: var(--switch-disabled-inverted-color);
46
46
  }
47
- .switch__disabled_1djsn .switch__switch_1djsn {
47
+ .switch__disabled_b7fk6 .switch__switch_b7fk6 {
48
48
  background-color: var(--switch-disabled-bg-inverted-color);
49
49
  }
50
- .switch__disabled_1djsn .switch__switch_1djsn:before {
50
+ .switch__disabled_b7fk6 .switch__switch_b7fk6:before {
51
51
  background-color: var(--switch-icon-disabled-inverted-color);
52
52
  }
53
- .switch__disabled_1djsn.switch__checked_1djsn .switch__switch_1djsn {
53
+ .switch__disabled_b7fk6.switch__checked_b7fk6 .switch__switch_b7fk6 {
54
54
  background-color: var(--switch-disabled-checked-bg-inverted-color);
55
55
  }
package/modern/inverted.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './inverted.css';
2
2
 
3
- const invertedStyles = {"switch":"switch__switch_1djsn","label":"switch__label_1djsn","hint":"switch__hint_1djsn","checked":"switch__checked_1djsn","disabled":"switch__disabled_1djsn"};
3
+ const invertedStyles = {"switch":"switch__switch_b7fk6","label":"switch__label_b7fk6","hint":"switch__hint_b7fk6","checked":"switch__checked_b7fk6","disabled":"switch__disabled_b7fk6"};
4
4
 
5
5
  export { invertedStyles as default };
6
6
  //# sourceMappingURL=inverted.module.css.js.map
package/moderncssm/index.module.css CHANGED
@@ -74,8 +74,7 @@
74
74
  font-size: 16px;
75
75
  line-height: 24px;
76
76
  font-weight: 400;
77
- letter-spacing: -0.24px;
78
- font-family: var(--font-family-alfasans);
77
+ font-family: var(--font-family-system);
79
78
  display: block;
80
79
  }
81
80
 
@@ -87,8 +86,7 @@
87
86
  font-size: 14px;
88
87
  line-height: 18px;
89
88
  font-weight: 400;
90
- letter-spacing: -0.08px;
91
- font-family: var(--font-family-alfasans);
89
+ font-family: var(--font-family-system);
92
90
  color: var(--switch-error-color);
93
91
  }
94
92
 
@@ -96,8 +94,7 @@
96
94
  font-size: 14px;
97
95
  line-height: 18px;
98
96
  font-weight: 400;
99
- letter-spacing: -0.08px;
100
- font-family: var(--font-family-alfasans);
97
+ font-family: var(--font-family-system);
101
98
  display: block;
102
99
  }
103
100
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-switch",
3
- "version": "6.0.1-alfasans",
3
+ "version": "6.0.2",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -10,7 +10,7 @@
10
10
  "main": "index.js",
11
11
  "module": "./esm/index.js",
12
12
  "dependencies": {
13
- "@alfalab/core-components-shared": "2.0.1-alfasans",
13
+ "@alfalab/core-components-shared": "^2.1.0",
14
14
  "@alfalab/hooks": "^1.13.1",
15
15
  "classnames": "^2.5.1",
16
16
  "react-merge-refs": "^1.1.0",
@@ -25,6 +25,6 @@
25
25
  "directory": "dist"
26
26
  },
27
27
  "gitHead": "f054fef20200664c65e2501ef1f916c555cdf05d",
28
- "themesVersion": "15.0.1-alfasans",
29
- "varsVersion": "11.0.1-alfasans"
28
+ "themesVersion": "15.0.1",
29
+ "varsVersion": "11.0.1"
30
30
  }