@alfalab/core-components-switch 6.1.1 → 6.1.2-alfasans

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/cssm/index.module.css +9 -5
  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 +32 -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 +32 -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 +32 -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 +6 -3
  21. package/package.json +8 -5
package/cssm/index.module.css CHANGED
@@ -23,8 +23,9 @@
23
23
  --gap-16: var(--gap-m);
24
24
  }
25
25
  :root {
26
- --font-family-system:
27
- system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
26
+ --font-family-alfasans:
27
+ 'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
28
+ Helvetica, sans-serif;
28
29
  }
29
30
  :root {
30
31
  --focus-color: var(--color-light-status-info);
@@ -102,7 +103,8 @@
102
103
  font-size: 16px;
103
104
  line-height: 24px;
104
105
  font-weight: 400;
105
- font-family: var(--font-family-system);
106
+ letter-spacing: -0.24px;
107
+ font-family: var(--font-family-alfasans);
106
108
  display: block;
107
109
  }
108
110
  .labelWrap:not(:only-child) {
@@ -119,14 +121,16 @@
119
121
  font-size: 14px;
120
122
  line-height: 18px;
121
123
  font-weight: 400;
122
- font-family: var(--font-family-system);
124
+ letter-spacing: -0.08px;
125
+ font-family: var(--font-family-alfasans);
123
126
  color: var(--switch-error-color);
124
127
  }
125
128
  .hint {
126
129
  font-size: 14px;
127
130
  line-height: 18px;
128
131
  font-weight: 400;
129
- font-family: var(--font-family-system);
132
+ letter-spacing: -0.08px;
133
+ font-family: var(--font-family-alfasans);
130
134
  display: block;
131
135
  }
132
136
  .hintWrap.loading {
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_17r6f {
23
+ .switch__switch_1a7jy {
24
24
  background-color: var(--switch-bg-color);
25
25
  }
26
- .switch__switch_17r6f:hover {
26
+ .switch__switch_1a7jy:hover {
27
27
  background-color: var(--switch-hover-bg-color);
28
28
  }
29
- .switch__label_17r6f {
29
+ .switch__label_1a7jy {
30
30
  color: var(--switch-label-color);
31
31
  }
32
- .switch__hint_17r6f {
32
+ .switch__hint_1a7jy {
33
33
  color: var(--switch-hint-color);
34
34
  }
35
- .switch__checked_17r6f .switch__switch_17r6f {
35
+ .switch__checked_1a7jy .switch__switch_1a7jy {
36
36
  background-color: var(--switch-checked-bg-color);
37
37
  }
38
- .switch__checked_17r6f .switch__switch_17r6f:hover {
38
+ .switch__checked_1a7jy .switch__switch_1a7jy:hover {
39
39
  background-color: var(--switch-checked-hover-bg-color);
40
40
  }
41
- .switch__disabled_17r6f .switch__label_17r6f {
41
+ .switch__disabled_1a7jy .switch__label_1a7jy {
42
42
  color: var(--switch-disabled-color);
43
43
  }
44
- .switch__disabled_17r6f .switch__hint_17r6f {
44
+ .switch__disabled_1a7jy .switch__hint_1a7jy {
45
45
  color: var(--switch-disabled-color);
46
46
  }
47
- .switch__disabled_17r6f .switch__switch_17r6f {
47
+ .switch__disabled_1a7jy .switch__switch_1a7jy {
48
48
  background-color: var(--switch-disabled-bg-color);
49
49
  }
50
- .switch__disabled_17r6f .switch__switch_17r6f:before {
50
+ .switch__disabled_1a7jy .switch__switch_1a7jy:before {
51
51
  background-color: var(--switch-icon-disabled-color);
52
52
  }
53
- .switch__disabled_17r6f.switch__checked_17r6f .switch__switch_17r6f {
53
+ .switch__disabled_1a7jy.switch__checked_1a7jy .switch__switch_1a7jy {
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_17r6f","label":"switch__label_17r6f","hint":"switch__hint_17r6f","checked":"switch__checked_17r6f","disabled":"switch__disabled_17r6f"};
5
+ var defaultStyles = {"switch":"switch__switch_1a7jy","label":"switch__label_1a7jy","hint":"switch__hint_1a7jy","checked":"switch__checked_1a7jy","disabled":"switch__disabled_1a7jy"};
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_17r6f {
23
+ .switch__switch_1a7jy {
24
24
  background-color: var(--switch-bg-color);
25
25
  }
26
- .switch__switch_17r6f:hover {
26
+ .switch__switch_1a7jy:hover {
27
27
  background-color: var(--switch-hover-bg-color);
28
28
  }
29
- .switch__label_17r6f {
29
+ .switch__label_1a7jy {
30
30
  color: var(--switch-label-color);
31
31
  }
32
- .switch__hint_17r6f {
32
+ .switch__hint_1a7jy {
33
33
  color: var(--switch-hint-color);
34
34
  }
35
- .switch__checked_17r6f .switch__switch_17r6f {
35
+ .switch__checked_1a7jy .switch__switch_1a7jy {
36
36
  background-color: var(--switch-checked-bg-color);
37
37
  }
38
- .switch__checked_17r6f .switch__switch_17r6f:hover {
38
+ .switch__checked_1a7jy .switch__switch_1a7jy:hover {
39
39
  background-color: var(--switch-checked-hover-bg-color);
40
40
  }
41
- .switch__disabled_17r6f .switch__label_17r6f {
41
+ .switch__disabled_1a7jy .switch__label_1a7jy {
42
42
  color: var(--switch-disabled-color);
43
43
  }
44
- .switch__disabled_17r6f .switch__hint_17r6f {
44
+ .switch__disabled_1a7jy .switch__hint_1a7jy {
45
45
  color: var(--switch-disabled-color);
46
46
  }
47
- .switch__disabled_17r6f .switch__switch_17r6f {
47
+ .switch__disabled_1a7jy .switch__switch_1a7jy {
48
48
  background-color: var(--switch-disabled-bg-color);
49
49
  }
50
- .switch__disabled_17r6f .switch__switch_17r6f:before {
50
+ .switch__disabled_1a7jy .switch__switch_1a7jy:before {
51
51
  background-color: var(--switch-icon-disabled-color);
52
52
  }
53
- .switch__disabled_17r6f.switch__checked_17r6f .switch__switch_17r6f {
53
+ .switch__disabled_1a7jy.switch__checked_1a7jy .switch__switch_1a7jy {
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_17r6f","label":"switch__label_17r6f","hint":"switch__hint_17r6f","checked":"switch__checked_17r6f","disabled":"switch__disabled_17r6f"};
3
+ var defaultStyles = {"switch":"switch__switch_1a7jy","label":"switch__label_1a7jy","hint":"switch__hint_1a7jy","checked":"switch__checked_1a7jy","disabled":"switch__disabled_1a7jy"};
4
4
 
5
5
  export { defaultStyles as default };
6
6
  //# sourceMappingURL=default.module.css.js.map
package/esm/index.css CHANGED
@@ -23,8 +23,9 @@
23
23
  --gap-16: var(--gap-m);
24
24
  }
25
25
  :root {
26
- --font-family-system:
27
- system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
26
+ --font-family-alfasans:
27
+ 'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
28
+ Helvetica, sans-serif;
28
29
  }
29
30
  :root {
30
31
  --focus-color: var(--color-light-status-info);
@@ -35,7 +36,7 @@
35
36
  --switch-error-color: var(--color-light-text-negative);
36
37
  --switch-icon-color: var(--color-static-neutral-0);
37
38
  }
38
- .switch__component_756jd {
39
+ .switch__component_13v1q {
39
40
  display: inline-flex;
40
41
  align-items: flex-start;
41
42
  margin: var(--gap-0);
@@ -44,25 +45,25 @@
44
45
  cursor: pointer;
45
46
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
46
47
  }
47
- .switch__component_756jd input {
48
+ .switch__component_13v1q input {
48
49
  opacity: 0;
49
50
  position: absolute;
50
51
  }
51
- .switch__start_756jd {
52
+ .switch__start_13v1q {
52
53
  align-items: flex-start;
53
54
  }
54
- .switch__center_756jd {
55
+ .switch__center_13v1q {
55
56
  align-items: center;
56
57
  }
57
- .switch__addons_756jd {
58
+ .switch__addons_13v1q {
58
59
  margin-left: auto;
59
60
  padding-left: var(--gap-16);
60
61
  line-height: 24px;
61
62
  }
62
- .switch__block_756jd {
63
+ .switch__block_13v1q {
63
64
  width: 100%;
64
65
  }
65
- .switch__switch_756jd {
66
+ .switch__switch_13v1q {
66
67
  position: relative;
67
68
  display: block;
68
69
  border-radius: var(--border-radius-16);
@@ -76,12 +77,12 @@
76
77
  border-color 0.2s ease;
77
78
  box-sizing: border-box;
78
79
  }
79
- .switch__switchSkeleton_756jd {
80
+ .switch__switchSkeleton_13v1q {
80
81
  width: 36px;
81
82
  height: 20px;
82
83
  margin: var(--gap-2);
83
84
  }
84
- .switch__switch_756jd:before {
85
+ .switch__switch_13v1q:before {
85
86
  content: '';
86
87
  position: absolute;
87
88
  top: var(--gap-0);
@@ -94,65 +95,68 @@
94
95
  box-sizing: border-box;
95
96
  transition: transform 0.2s ease;
96
97
  }
97
- .switch__content_756jd {
98
+ .switch__content_13v1q {
98
99
  margin-left: var(--gap-12);
99
100
  flex-grow: 1;
100
101
  }
101
- .switch__label_756jd {
102
+ .switch__label_13v1q {
102
103
  font-size: 16px;
103
104
  line-height: 24px;
104
105
  font-weight: 400;
105
- font-family: var(--font-family-system);
106
+ letter-spacing: -0.24px;
107
+ font-family: var(--font-family-alfasans);
106
108
  display: block;
107
109
  }
108
- .switch__labelWrap_756jd:not(:only-child) {
110
+ .switch__labelWrap_13v1q:not(:only-child) {
109
111
  margin-bottom: var(--gap-4);
110
112
  }
111
- .switch__labelWrap_756jd.switch__loading_756jd {
113
+ .switch__labelWrap_13v1q.switch__loading_13v1q {
112
114
  height: var(--gap-12);
113
115
  margin: var(--gap-6) 0;
114
116
  }
115
- .switch__labelWrap_756jd.switch__loading_756jd:not(:only-child) {
117
+ .switch__labelWrap_13v1q.switch__loading_13v1q:not(:only-child) {
116
118
  margin-bottom: var(--gap-2s);
117
119
  }
118
- .switch__errorMessage_756jd {
120
+ .switch__errorMessage_13v1q {
119
121
  font-size: 14px;
120
122
  line-height: 18px;
121
123
  font-weight: 400;
122
- font-family: var(--font-family-system);
124
+ letter-spacing: -0.08px;
125
+ font-family: var(--font-family-alfasans);
123
126
  color: var(--switch-error-color);
124
127
  }
125
- .switch__hint_756jd {
128
+ .switch__hint_13v1q {
126
129
  font-size: 14px;
127
130
  line-height: 18px;
128
131
  font-weight: 400;
129
- font-family: var(--font-family-system);
132
+ letter-spacing: -0.08px;
133
+ font-family: var(--font-family-alfasans);
130
134
  display: block;
131
135
  }
132
- .switch__hintWrap_756jd.switch__loading_756jd {
136
+ .switch__hintWrap_13v1q.switch__loading_13v1q {
133
137
  height: var(--gap-10);
134
138
  margin-bottom: var(--gap-4);
135
139
  }
136
- .switch__component_756jd.switch__reversed_756jd {
140
+ .switch__component_13v1q.switch__reversed_13v1q {
137
141
  flex-direction: row-reverse;
138
142
  }
139
- .switch__reversed_756jd .switch__content_756jd {
143
+ .switch__reversed_13v1q .switch__content_13v1q {
140
144
  margin-right: var(--gap-16);
141
145
  margin-left: var(--gap-0);
142
146
  }
143
- .switch__reversed_756jd .switch__addons_756jd {
147
+ .switch__reversed_13v1q .switch__addons_13v1q {
144
148
  margin-left: var(--gap-0);
145
149
  padding-left: var(--gap-0);
146
150
  margin-right: auto;
147
151
  padding-right: var(--gap-16);
148
152
  }
149
- .switch__checked_756jd .switch__switch_756jd:before {
153
+ .switch__checked_13v1q .switch__switch_13v1q:before {
150
154
  transform: translateX(16px);
151
155
  }
152
- .switch__disabled_756jd {
156
+ .switch__disabled_13v1q {
153
157
  cursor: var(--disabled-cursor);
154
158
  }
155
- .switch__focused_756jd .switch__switch_756jd {
159
+ .switch__focused_13v1q .switch__switch_13v1q {
156
160
  outline: 2px solid var(--focus-color);
157
161
  outline-offset: 2px;
158
162
  }
package/esm/index.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- var styles = {"component":"switch__component_756jd","start":"switch__start_756jd","center":"switch__center_756jd","addons":"switch__addons_756jd","block":"switch__block_756jd","switch":"switch__switch_756jd","switchSkeleton":"switch__switchSkeleton_756jd","content":"switch__content_756jd","label":"switch__label_756jd","labelWrap":"switch__labelWrap_756jd","loading":"switch__loading_756jd","errorMessage":"switch__errorMessage_756jd","hint":"switch__hint_756jd","hintWrap":"switch__hintWrap_756jd","reversed":"switch__reversed_756jd","checked":"switch__checked_756jd","disabled":"switch__disabled_756jd","focused":"switch__focused_756jd"};
3
+ var styles = {"component":"switch__component_13v1q","start":"switch__start_13v1q","center":"switch__center_13v1q","addons":"switch__addons_13v1q","block":"switch__block_13v1q","switch":"switch__switch_13v1q","switchSkeleton":"switch__switchSkeleton_13v1q","content":"switch__content_13v1q","label":"switch__label_13v1q","labelWrap":"switch__labelWrap_13v1q","loading":"switch__loading_13v1q","errorMessage":"switch__errorMessage_13v1q","hint":"switch__hint_13v1q","hintWrap":"switch__hintWrap_13v1q","reversed":"switch__reversed_13v1q","checked":"switch__checked_13v1q","disabled":"switch__disabled_13v1q","focused":"switch__focused_13v1q"};
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_wcc2q {
23
+ .switch__switch_170z4 {
24
24
  background-color: var(--switch-bg-inverted-color);
25
25
  }
26
- .switch__switch_wcc2q:hover {
26
+ .switch__switch_170z4:hover {
27
27
  background-color: var(--switch-hover-bg-inverted-color);
28
28
  }
29
- .switch__label_wcc2q {
29
+ .switch__label_170z4 {
30
30
  color: var(--switch-label-inverted-color);
31
31
  }
32
- .switch__hint_wcc2q {
32
+ .switch__hint_170z4 {
33
33
  color: var(--switch-hint-inverted-color);
34
34
  }
35
- .switch__checked_wcc2q .switch__switch_wcc2q {
35
+ .switch__checked_170z4 .switch__switch_170z4 {
36
36
  background-color: var(--switch-checked-bg-inverted-color);
37
37
  }
38
- .switch__checked_wcc2q .switch__switch_wcc2q:hover {
38
+ .switch__checked_170z4 .switch__switch_170z4:hover {
39
39
  background-color: var(--switch-checked-hover-bg-inverted-color);
40
40
  }
41
- .switch__disabled_wcc2q .switch__label_wcc2q {
41
+ .switch__disabled_170z4 .switch__label_170z4 {
42
42
  color: var(--switch-disabled-inverted-color);
43
43
  }
44
- .switch__disabled_wcc2q .switch__hint_wcc2q {
44
+ .switch__disabled_170z4 .switch__hint_170z4 {
45
45
  color: var(--switch-disabled-inverted-color);
46
46
  }
47
- .switch__disabled_wcc2q .switch__switch_wcc2q {
47
+ .switch__disabled_170z4 .switch__switch_170z4 {
48
48
  background-color: var(--switch-disabled-bg-inverted-color);
49
49
  }
50
- .switch__disabled_wcc2q .switch__switch_wcc2q:before {
50
+ .switch__disabled_170z4 .switch__switch_170z4:before {
51
51
  background-color: var(--switch-icon-disabled-inverted-color);
52
52
  }
53
- .switch__disabled_wcc2q.switch__checked_wcc2q .switch__switch_wcc2q {
53
+ .switch__disabled_170z4.switch__checked_170z4 .switch__switch_170z4 {
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_wcc2q","label":"switch__label_wcc2q","hint":"switch__hint_wcc2q","checked":"switch__checked_wcc2q","disabled":"switch__disabled_wcc2q"};
3
+ var invertedStyles = {"switch":"switch__switch_170z4","label":"switch__label_170z4","hint":"switch__hint_170z4","checked":"switch__checked_170z4","disabled":"switch__disabled_170z4"};
4
4
 
5
5
  export { invertedStyles as default };
6
6
  //# sourceMappingURL=inverted.module.css.js.map
package/index.css CHANGED
@@ -23,8 +23,9 @@
23
23
  --gap-16: var(--gap-m);
24
24
  }
25
25
  :root {
26
- --font-family-system:
27
- system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
26
+ --font-family-alfasans:
27
+ 'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
28
+ Helvetica, sans-serif;
28
29
  }
29
30
  :root {
30
31
  --focus-color: var(--color-light-status-info);
@@ -35,7 +36,7 @@
35
36
  --switch-error-color: var(--color-light-text-negative);
36
37
  --switch-icon-color: var(--color-static-neutral-0);
37
38
  }
38
- .switch__component_756jd {
39
+ .switch__component_13v1q {
39
40
  display: inline-flex;
40
41
  align-items: flex-start;
41
42
  margin: var(--gap-0);
@@ -44,25 +45,25 @@
44
45
  cursor: pointer;
45
46
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
46
47
  }
47
- .switch__component_756jd input {
48
+ .switch__component_13v1q input {
48
49
  opacity: 0;
49
50
  position: absolute;
50
51
  }
51
- .switch__start_756jd {
52
+ .switch__start_13v1q {
52
53
  align-items: flex-start;
53
54
  }
54
- .switch__center_756jd {
55
+ .switch__center_13v1q {
55
56
  align-items: center;
56
57
  }
57
- .switch__addons_756jd {
58
+ .switch__addons_13v1q {
58
59
  margin-left: auto;
59
60
  padding-left: var(--gap-16);
60
61
  line-height: 24px;
61
62
  }
62
- .switch__block_756jd {
63
+ .switch__block_13v1q {
63
64
  width: 100%;
64
65
  }
65
- .switch__switch_756jd {
66
+ .switch__switch_13v1q {
66
67
  position: relative;
67
68
  display: block;
68
69
  border-radius: var(--border-radius-16);
@@ -76,12 +77,12 @@
76
77
  border-color 0.2s ease;
77
78
  box-sizing: border-box;
78
79
  }
79
- .switch__switchSkeleton_756jd {
80
+ .switch__switchSkeleton_13v1q {
80
81
  width: 36px;
81
82
  height: 20px;
82
83
  margin: var(--gap-2);
83
84
  }
84
- .switch__switch_756jd:before {
85
+ .switch__switch_13v1q:before {
85
86
  content: '';
86
87
  position: absolute;
87
88
  top: var(--gap-0);
@@ -94,65 +95,68 @@
94
95
  box-sizing: border-box;
95
96
  transition: transform 0.2s ease;
96
97
  }
97
- .switch__content_756jd {
98
+ .switch__content_13v1q {
98
99
  margin-left: var(--gap-12);
99
100
  flex-grow: 1;
100
101
  }
101
- .switch__label_756jd {
102
+ .switch__label_13v1q {
102
103
  font-size: 16px;
103
104
  line-height: 24px;
104
105
  font-weight: 400;
105
- font-family: var(--font-family-system);
106
+ letter-spacing: -0.24px;
107
+ font-family: var(--font-family-alfasans);
106
108
  display: block;
107
109
  }
108
- .switch__labelWrap_756jd:not(:only-child) {
110
+ .switch__labelWrap_13v1q:not(:only-child) {
109
111
  margin-bottom: var(--gap-4);
110
112
  }
111
- .switch__labelWrap_756jd.switch__loading_756jd {
113
+ .switch__labelWrap_13v1q.switch__loading_13v1q {
112
114
  height: var(--gap-12);
113
115
  margin: var(--gap-6) 0;
114
116
  }
115
- .switch__labelWrap_756jd.switch__loading_756jd:not(:only-child) {
117
+ .switch__labelWrap_13v1q.switch__loading_13v1q:not(:only-child) {
116
118
  margin-bottom: var(--gap-2s);
117
119
  }
118
- .switch__errorMessage_756jd {
120
+ .switch__errorMessage_13v1q {
119
121
  font-size: 14px;
120
122
  line-height: 18px;
121
123
  font-weight: 400;
122
- font-family: var(--font-family-system);
124
+ letter-spacing: -0.08px;
125
+ font-family: var(--font-family-alfasans);
123
126
  color: var(--switch-error-color);
124
127
  }
125
- .switch__hint_756jd {
128
+ .switch__hint_13v1q {
126
129
  font-size: 14px;
127
130
  line-height: 18px;
128
131
  font-weight: 400;
129
- font-family: var(--font-family-system);
132
+ letter-spacing: -0.08px;
133
+ font-family: var(--font-family-alfasans);
130
134
  display: block;
131
135
  }
132
- .switch__hintWrap_756jd.switch__loading_756jd {
136
+ .switch__hintWrap_13v1q.switch__loading_13v1q {
133
137
  height: var(--gap-10);
134
138
  margin-bottom: var(--gap-4);
135
139
  }
136
- .switch__component_756jd.switch__reversed_756jd {
140
+ .switch__component_13v1q.switch__reversed_13v1q {
137
141
  flex-direction: row-reverse;
138
142
  }
139
- .switch__reversed_756jd .switch__content_756jd {
143
+ .switch__reversed_13v1q .switch__content_13v1q {
140
144
  margin-right: var(--gap-16);
141
145
  margin-left: var(--gap-0);
142
146
  }
143
- .switch__reversed_756jd .switch__addons_756jd {
147
+ .switch__reversed_13v1q .switch__addons_13v1q {
144
148
  margin-left: var(--gap-0);
145
149
  padding-left: var(--gap-0);
146
150
  margin-right: auto;
147
151
  padding-right: var(--gap-16);
148
152
  }
149
- .switch__checked_756jd .switch__switch_756jd:before {
153
+ .switch__checked_13v1q .switch__switch_13v1q:before {
150
154
  transform: translateX(16px);
151
155
  }
152
- .switch__disabled_756jd {
156
+ .switch__disabled_13v1q {
153
157
  cursor: var(--disabled-cursor);
154
158
  }
155
- .switch__focused_756jd .switch__switch_756jd {
159
+ .switch__focused_13v1q .switch__switch_13v1q {
156
160
  outline: 2px solid var(--focus-color);
157
161
  outline-offset: 2px;
158
162
  }
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_756jd","start":"switch__start_756jd","center":"switch__center_756jd","addons":"switch__addons_756jd","block":"switch__block_756jd","switch":"switch__switch_756jd","switchSkeleton":"switch__switchSkeleton_756jd","content":"switch__content_756jd","label":"switch__label_756jd","labelWrap":"switch__labelWrap_756jd","loading":"switch__loading_756jd","errorMessage":"switch__errorMessage_756jd","hint":"switch__hint_756jd","hintWrap":"switch__hintWrap_756jd","reversed":"switch__reversed_756jd","checked":"switch__checked_756jd","disabled":"switch__disabled_756jd","focused":"switch__focused_756jd"};
5
+ var styles = {"component":"switch__component_13v1q","start":"switch__start_13v1q","center":"switch__center_13v1q","addons":"switch__addons_13v1q","block":"switch__block_13v1q","switch":"switch__switch_13v1q","switchSkeleton":"switch__switchSkeleton_13v1q","content":"switch__content_13v1q","label":"switch__label_13v1q","labelWrap":"switch__labelWrap_13v1q","loading":"switch__loading_13v1q","errorMessage":"switch__errorMessage_13v1q","hint":"switch__hint_13v1q","hintWrap":"switch__hintWrap_13v1q","reversed":"switch__reversed_13v1q","checked":"switch__checked_13v1q","disabled":"switch__disabled_13v1q","focused":"switch__focused_13v1q"};
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_wcc2q {
23
+ .switch__switch_170z4 {
24
24
  background-color: var(--switch-bg-inverted-color);
25
25
  }
26
- .switch__switch_wcc2q:hover {
26
+ .switch__switch_170z4:hover {
27
27
  background-color: var(--switch-hover-bg-inverted-color);
28
28
  }
29
- .switch__label_wcc2q {
29
+ .switch__label_170z4 {
30
30
  color: var(--switch-label-inverted-color);
31
31
  }
32
- .switch__hint_wcc2q {
32
+ .switch__hint_170z4 {
33
33
  color: var(--switch-hint-inverted-color);
34
34
  }
35
- .switch__checked_wcc2q .switch__switch_wcc2q {
35
+ .switch__checked_170z4 .switch__switch_170z4 {
36
36
  background-color: var(--switch-checked-bg-inverted-color);
37
37
  }
38
- .switch__checked_wcc2q .switch__switch_wcc2q:hover {
38
+ .switch__checked_170z4 .switch__switch_170z4:hover {
39
39
  background-color: var(--switch-checked-hover-bg-inverted-color);
40
40
  }
41
- .switch__disabled_wcc2q .switch__label_wcc2q {
41
+ .switch__disabled_170z4 .switch__label_170z4 {
42
42
  color: var(--switch-disabled-inverted-color);
43
43
  }
44
- .switch__disabled_wcc2q .switch__hint_wcc2q {
44
+ .switch__disabled_170z4 .switch__hint_170z4 {
45
45
  color: var(--switch-disabled-inverted-color);
46
46
  }
47
- .switch__disabled_wcc2q .switch__switch_wcc2q {
47
+ .switch__disabled_170z4 .switch__switch_170z4 {
48
48
  background-color: var(--switch-disabled-bg-inverted-color);
49
49
  }
50
- .switch__disabled_wcc2q .switch__switch_wcc2q:before {
50
+ .switch__disabled_170z4 .switch__switch_170z4:before {
51
51
  background-color: var(--switch-icon-disabled-inverted-color);
52
52
  }
53
- .switch__disabled_wcc2q.switch__checked_wcc2q .switch__switch_wcc2q {
53
+ .switch__disabled_170z4.switch__checked_170z4 .switch__switch_170z4 {
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_wcc2q","label":"switch__label_wcc2q","hint":"switch__hint_wcc2q","checked":"switch__checked_wcc2q","disabled":"switch__disabled_wcc2q"};
5
+ var invertedStyles = {"switch":"switch__switch_170z4","label":"switch__label_170z4","hint":"switch__hint_170z4","checked":"switch__checked_170z4","disabled":"switch__disabled_170z4"};
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_17r6f {
23
+ .switch__switch_1a7jy {
24
24
  background-color: var(--switch-bg-color);
25
25
  }
26
- .switch__switch_17r6f:hover {
26
+ .switch__switch_1a7jy:hover {
27
27
  background-color: var(--switch-hover-bg-color);
28
28
  }
29
- .switch__label_17r6f {
29
+ .switch__label_1a7jy {
30
30
  color: var(--switch-label-color);
31
31
  }
32
- .switch__hint_17r6f {
32
+ .switch__hint_1a7jy {
33
33
  color: var(--switch-hint-color);
34
34
  }
35
- .switch__checked_17r6f .switch__switch_17r6f {
35
+ .switch__checked_1a7jy .switch__switch_1a7jy {
36
36
  background-color: var(--switch-checked-bg-color);
37
37
  }
38
- .switch__checked_17r6f .switch__switch_17r6f:hover {
38
+ .switch__checked_1a7jy .switch__switch_1a7jy:hover {
39
39
  background-color: var(--switch-checked-hover-bg-color);
40
40
  }
41
- .switch__disabled_17r6f .switch__label_17r6f {
41
+ .switch__disabled_1a7jy .switch__label_1a7jy {
42
42
  color: var(--switch-disabled-color);
43
43
  }
44
- .switch__disabled_17r6f .switch__hint_17r6f {
44
+ .switch__disabled_1a7jy .switch__hint_1a7jy {
45
45
  color: var(--switch-disabled-color);
46
46
  }
47
- .switch__disabled_17r6f .switch__switch_17r6f {
47
+ .switch__disabled_1a7jy .switch__switch_1a7jy {
48
48
  background-color: var(--switch-disabled-bg-color);
49
49
  }
50
- .switch__disabled_17r6f .switch__switch_17r6f:before {
50
+ .switch__disabled_1a7jy .switch__switch_1a7jy:before {
51
51
  background-color: var(--switch-icon-disabled-color);
52
52
  }
53
- .switch__disabled_17r6f.switch__checked_17r6f .switch__switch_17r6f {
53
+ .switch__disabled_1a7jy.switch__checked_1a7jy .switch__switch_1a7jy {
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_17r6f","label":"switch__label_17r6f","hint":"switch__hint_17r6f","checked":"switch__checked_17r6f","disabled":"switch__disabled_17r6f"};
3
+ const defaultStyles = {"switch":"switch__switch_1a7jy","label":"switch__label_1a7jy","hint":"switch__hint_1a7jy","checked":"switch__checked_1a7jy","disabled":"switch__disabled_1a7jy"};
4
4
 
5
5
  export { defaultStyles as default };
6
6
  //# sourceMappingURL=default.module.css.js.map
package/modern/index.css CHANGED
@@ -23,8 +23,9 @@
23
23
  --gap-16: var(--gap-m);
24
24
  }
25
25
  :root {
26
- --font-family-system:
27
- system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
26
+ --font-family-alfasans:
27
+ 'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
28
+ Helvetica, sans-serif;
28
29
  }
29
30
  :root {
30
31
  --focus-color: var(--color-light-status-info);
@@ -35,7 +36,7 @@
35
36
  --switch-error-color: var(--color-light-text-negative);
36
37
  --switch-icon-color: var(--color-static-neutral-0);
37
38
  }
38
- .switch__component_756jd {
39
+ .switch__component_13v1q {
39
40
  display: inline-flex;
40
41
  align-items: flex-start;
41
42
  margin: var(--gap-0);
@@ -44,25 +45,25 @@
44
45
  cursor: pointer;
45
46
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
46
47
  }
47
- .switch__component_756jd input {
48
+ .switch__component_13v1q input {
48
49
  opacity: 0;
49
50
  position: absolute;
50
51
  }
51
- .switch__start_756jd {
52
+ .switch__start_13v1q {
52
53
  align-items: flex-start;
53
54
  }
54
- .switch__center_756jd {
55
+ .switch__center_13v1q {
55
56
  align-items: center;
56
57
  }
57
- .switch__addons_756jd {
58
+ .switch__addons_13v1q {
58
59
  margin-left: auto;
59
60
  padding-left: var(--gap-16);
60
61
  line-height: 24px;
61
62
  }
62
- .switch__block_756jd {
63
+ .switch__block_13v1q {
63
64
  width: 100%;
64
65
  }
65
- .switch__switch_756jd {
66
+ .switch__switch_13v1q {
66
67
  position: relative;
67
68
  display: block;
68
69
  border-radius: var(--border-radius-16);
@@ -76,12 +77,12 @@
76
77
  border-color 0.2s ease;
77
78
  box-sizing: border-box;
78
79
  }
79
- .switch__switchSkeleton_756jd {
80
+ .switch__switchSkeleton_13v1q {
80
81
  width: 36px;
81
82
  height: 20px;
82
83
  margin: var(--gap-2);
83
84
  }
84
- .switch__switch_756jd:before {
85
+ .switch__switch_13v1q:before {
85
86
  content: '';
86
87
  position: absolute;
87
88
  top: var(--gap-0);
@@ -94,65 +95,68 @@
94
95
  box-sizing: border-box;
95
96
  transition: transform 0.2s ease;
96
97
  }
97
- .switch__content_756jd {
98
+ .switch__content_13v1q {
98
99
  margin-left: var(--gap-12);
99
100
  flex-grow: 1;
100
101
  }
101
- .switch__label_756jd {
102
+ .switch__label_13v1q {
102
103
  font-size: 16px;
103
104
  line-height: 24px;
104
105
  font-weight: 400;
105
- font-family: var(--font-family-system);
106
+ letter-spacing: -0.24px;
107
+ font-family: var(--font-family-alfasans);
106
108
  display: block;
107
109
  }
108
- .switch__labelWrap_756jd:not(:only-child) {
110
+ .switch__labelWrap_13v1q:not(:only-child) {
109
111
  margin-bottom: var(--gap-4);
110
112
  }
111
- .switch__labelWrap_756jd.switch__loading_756jd {
113
+ .switch__labelWrap_13v1q.switch__loading_13v1q {
112
114
  height: var(--gap-12);
113
115
  margin: var(--gap-6) 0;
114
116
  }
115
- .switch__labelWrap_756jd.switch__loading_756jd:not(:only-child) {
117
+ .switch__labelWrap_13v1q.switch__loading_13v1q:not(:only-child) {
116
118
  margin-bottom: var(--gap-2s);
117
119
  }
118
- .switch__errorMessage_756jd {
120
+ .switch__errorMessage_13v1q {
119
121
  font-size: 14px;
120
122
  line-height: 18px;
121
123
  font-weight: 400;
122
- font-family: var(--font-family-system);
124
+ letter-spacing: -0.08px;
125
+ font-family: var(--font-family-alfasans);
123
126
  color: var(--switch-error-color);
124
127
  }
125
- .switch__hint_756jd {
128
+ .switch__hint_13v1q {
126
129
  font-size: 14px;
127
130
  line-height: 18px;
128
131
  font-weight: 400;
129
- font-family: var(--font-family-system);
132
+ letter-spacing: -0.08px;
133
+ font-family: var(--font-family-alfasans);
130
134
  display: block;
131
135
  }
132
- .switch__hintWrap_756jd.switch__loading_756jd {
136
+ .switch__hintWrap_13v1q.switch__loading_13v1q {
133
137
  height: var(--gap-10);
134
138
  margin-bottom: var(--gap-4);
135
139
  }
136
- .switch__component_756jd.switch__reversed_756jd {
140
+ .switch__component_13v1q.switch__reversed_13v1q {
137
141
  flex-direction: row-reverse;
138
142
  }
139
- .switch__reversed_756jd .switch__content_756jd {
143
+ .switch__reversed_13v1q .switch__content_13v1q {
140
144
  margin-right: var(--gap-16);
141
145
  margin-left: var(--gap-0);
142
146
  }
143
- .switch__reversed_756jd .switch__addons_756jd {
147
+ .switch__reversed_13v1q .switch__addons_13v1q {
144
148
  margin-left: var(--gap-0);
145
149
  padding-left: var(--gap-0);
146
150
  margin-right: auto;
147
151
  padding-right: var(--gap-16);
148
152
  }
149
- .switch__checked_756jd .switch__switch_756jd:before {
153
+ .switch__checked_13v1q .switch__switch_13v1q:before {
150
154
  transform: translateX(16px);
151
155
  }
152
- .switch__disabled_756jd {
156
+ .switch__disabled_13v1q {
153
157
  cursor: var(--disabled-cursor);
154
158
  }
155
- .switch__focused_756jd .switch__switch_756jd {
159
+ .switch__focused_13v1q .switch__switch_13v1q {
156
160
  outline: 2px solid var(--focus-color);
157
161
  outline-offset: 2px;
158
162
  }
package/modern/index.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- const styles = {"component":"switch__component_756jd","start":"switch__start_756jd","center":"switch__center_756jd","addons":"switch__addons_756jd","block":"switch__block_756jd","switch":"switch__switch_756jd","switchSkeleton":"switch__switchSkeleton_756jd","content":"switch__content_756jd","label":"switch__label_756jd","labelWrap":"switch__labelWrap_756jd","loading":"switch__loading_756jd","errorMessage":"switch__errorMessage_756jd","hint":"switch__hint_756jd","hintWrap":"switch__hintWrap_756jd","reversed":"switch__reversed_756jd","checked":"switch__checked_756jd","disabled":"switch__disabled_756jd","focused":"switch__focused_756jd"};
3
+ const styles = {"component":"switch__component_13v1q","start":"switch__start_13v1q","center":"switch__center_13v1q","addons":"switch__addons_13v1q","block":"switch__block_13v1q","switch":"switch__switch_13v1q","switchSkeleton":"switch__switchSkeleton_13v1q","content":"switch__content_13v1q","label":"switch__label_13v1q","labelWrap":"switch__labelWrap_13v1q","loading":"switch__loading_13v1q","errorMessage":"switch__errorMessage_13v1q","hint":"switch__hint_13v1q","hintWrap":"switch__hintWrap_13v1q","reversed":"switch__reversed_13v1q","checked":"switch__checked_13v1q","disabled":"switch__disabled_13v1q","focused":"switch__focused_13v1q"};
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_wcc2q {
23
+ .switch__switch_170z4 {
24
24
  background-color: var(--switch-bg-inverted-color);
25
25
  }
26
- .switch__switch_wcc2q:hover {
26
+ .switch__switch_170z4:hover {
27
27
  background-color: var(--switch-hover-bg-inverted-color);
28
28
  }
29
- .switch__label_wcc2q {
29
+ .switch__label_170z4 {
30
30
  color: var(--switch-label-inverted-color);
31
31
  }
32
- .switch__hint_wcc2q {
32
+ .switch__hint_170z4 {
33
33
  color: var(--switch-hint-inverted-color);
34
34
  }
35
- .switch__checked_wcc2q .switch__switch_wcc2q {
35
+ .switch__checked_170z4 .switch__switch_170z4 {
36
36
  background-color: var(--switch-checked-bg-inverted-color);
37
37
  }
38
- .switch__checked_wcc2q .switch__switch_wcc2q:hover {
38
+ .switch__checked_170z4 .switch__switch_170z4:hover {
39
39
  background-color: var(--switch-checked-hover-bg-inverted-color);
40
40
  }
41
- .switch__disabled_wcc2q .switch__label_wcc2q {
41
+ .switch__disabled_170z4 .switch__label_170z4 {
42
42
  color: var(--switch-disabled-inverted-color);
43
43
  }
44
- .switch__disabled_wcc2q .switch__hint_wcc2q {
44
+ .switch__disabled_170z4 .switch__hint_170z4 {
45
45
  color: var(--switch-disabled-inverted-color);
46
46
  }
47
- .switch__disabled_wcc2q .switch__switch_wcc2q {
47
+ .switch__disabled_170z4 .switch__switch_170z4 {
48
48
  background-color: var(--switch-disabled-bg-inverted-color);
49
49
  }
50
- .switch__disabled_wcc2q .switch__switch_wcc2q:before {
50
+ .switch__disabled_170z4 .switch__switch_170z4:before {
51
51
  background-color: var(--switch-icon-disabled-inverted-color);
52
52
  }
53
- .switch__disabled_wcc2q.switch__checked_wcc2q .switch__switch_wcc2q {
53
+ .switch__disabled_170z4.switch__checked_170z4 .switch__switch_170z4 {
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_wcc2q","label":"switch__label_wcc2q","hint":"switch__hint_wcc2q","checked":"switch__checked_wcc2q","disabled":"switch__disabled_wcc2q"};
3
+ const invertedStyles = {"switch":"switch__switch_170z4","label":"switch__label_170z4","hint":"switch__hint_170z4","checked":"switch__checked_170z4","disabled":"switch__disabled_170z4"};
4
4
 
5
5
  export { invertedStyles as default };
6
6
  //# sourceMappingURL=inverted.module.css.js.map
package/moderncssm/index.module.css CHANGED
@@ -81,7 +81,8 @@
81
81
  font-size: 16px;
82
82
  line-height: 24px;
83
83
  font-weight: 400;
84
- font-family: var(--font-family-system);
84
+ letter-spacing: -0.24px;
85
+ font-family: var(--font-family-alfasans);
85
86
  display: block;
86
87
  }
87
88
 
@@ -102,7 +103,8 @@
102
103
  font-size: 14px;
103
104
  line-height: 18px;
104
105
  font-weight: 400;
105
- font-family: var(--font-family-system);
106
+ letter-spacing: -0.08px;
107
+ font-family: var(--font-family-alfasans);
106
108
  color: var(--switch-error-color);
107
109
  }
108
110
 
@@ -110,7 +112,8 @@
110
112
  font-size: 14px;
111
113
  line-height: 18px;
112
114
  font-weight: 400;
113
- font-family: var(--font-family-system);
115
+ letter-spacing: -0.08px;
116
+ font-family: var(--font-family-alfasans);
114
117
  display: block;
115
118
  }
116
119
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-switch",
3
- "version": "6.1.1",
3
+ "version": "6.1.2-alfasans",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -9,9 +9,12 @@
9
9
  ],
10
10
  "main": "index.js",
11
11
  "module": "./esm/index.js",
12
+ "scripts": {
13
+ "build": "rollup -c ../../tools/rollup/rollup.config.mjs --silent"
14
+ },
12
15
  "dependencies": {
13
- "@alfalab/core-components-shared": "^2.1.1",
14
- "@alfalab/core-components-skeleton": "^7.0.3",
16
+ "@alfalab/core-components-shared": "2.2.0-alfasans",
17
+ "@alfalab/core-components-skeleton": "7.0.3-alfasans",
15
18
  "@alfalab/hooks": "^1.13.1",
16
19
  "classnames": "^2.5.1",
17
20
  "react-merge-refs": "^1.1.0",
@@ -26,6 +29,6 @@
26
29
  "directory": "dist"
27
30
  },
28
31
  "gitHead": "f054fef20200664c65e2501ef1f916c555cdf05d",
29
- "themesVersion": "15.0.2",
30
- "varsVersion": "11.0.2"
32
+ "themesVersion": "15.1.0-alfasans",
33
+ "varsVersion": "11.0.2-alfasans"
31
34
  }