@alfalab/core-components-switch 3.0.4 → 3.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/Component.js +1 -1
  2. package/cssm/index.module.css +3 -3
  3. package/esm/Component.js +1 -1
  4. package/esm/index.css +29 -29
  5. package/index.css +29 -29
  6. package/modern/Component.js +1 -1
  7. package/modern/index.css +29 -29
  8. package/package.json +1 -1
package/Component.js CHANGED
@@ -14,7 +14,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
14
14
  var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
15
15
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
16
16
 
17
- var styles = {"component":"switch__component_8biv0","start":"switch__start_8biv0","center":"switch__center_8biv0","addons":"switch__addons_8biv0","block":"switch__block_8biv0","switch":"switch__switch_8biv0","content":"switch__content_8biv0","label":"switch__label_8biv0","hint":"switch__hint_8biv0","reversed":"switch__reversed_8biv0","checked":"switch__checked_8biv0","disabled":"switch__disabled_8biv0","inactive":"switch__inactive_8biv0","focused":"switch__focused_8biv0"};
17
+ var styles = {"component":"switch__component_qryao","start":"switch__start_qryao","center":"switch__center_qryao","addons":"switch__addons_qryao","block":"switch__block_qryao","switch":"switch__switch_qryao","content":"switch__content_qryao","label":"switch__label_qryao","hint":"switch__hint_qryao","reversed":"switch__reversed_qryao","checked":"switch__checked_qryao","disabled":"switch__disabled_qryao","inactive":"switch__inactive_qryao","focused":"switch__focused_qryao"};
18
18
  require('./index.css')
19
19
 
20
20
  var Switch = React.forwardRef(function (_a, ref) {
package/cssm/index.module.css CHANGED
@@ -3,11 +3,11 @@
3
3
  --color-light-border-link: #0072ef;
4
4
  --color-light-border-underline: #c5c5c7;
5
5
  --color-light-graphic-accent: #ef3124;
6
- --color-light-graphic-primary-inverted: #fff;
7
6
  --color-light-graphic-quaternary: #dcdcdd;
8
7
  --color-light-graphic-secondary: #86868a;
9
8
  --color-light-text-primary: #0e0e0e;
10
- --color-light-text-secondary: rgba(60, 60, 67, 0.66); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
9
+ --color-light-text-secondary: rgba(60, 60, 67, 0.66);
10
+ --color-static-graphic-light: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
11
11
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
12
12
  } :root {
13
13
  } :root {
@@ -87,7 +87,7 @@
87
87
  width: 16px;
88
88
  height: 16px;
89
89
  border-radius: var(--border-radius-circle);
90
- background-color: var(--color-light-graphic-primary-inverted);
90
+ background-color: var(--color-static-graphic-light);
91
91
  box-sizing: border-box;
92
92
  transition: transform 0.2s ease;
93
93
  } .content {
package/esm/Component.js CHANGED
@@ -4,7 +4,7 @@ import mergeRefs from 'react-merge-refs';
4
4
  import cn from 'classnames';
5
5
  import { useFocus } from '@alfalab/hooks';
6
6
 
7
- var styles = {"component":"switch__component_8biv0","start":"switch__start_8biv0","center":"switch__center_8biv0","addons":"switch__addons_8biv0","block":"switch__block_8biv0","switch":"switch__switch_8biv0","content":"switch__content_8biv0","label":"switch__label_8biv0","hint":"switch__hint_8biv0","reversed":"switch__reversed_8biv0","checked":"switch__checked_8biv0","disabled":"switch__disabled_8biv0","inactive":"switch__inactive_8biv0","focused":"switch__focused_8biv0"};
7
+ var styles = {"component":"switch__component_qryao","start":"switch__start_qryao","center":"switch__center_qryao","addons":"switch__addons_qryao","block":"switch__block_qryao","switch":"switch__switch_qryao","content":"switch__content_qryao","label":"switch__label_qryao","hint":"switch__hint_qryao","reversed":"switch__reversed_qryao","checked":"switch__checked_qryao","disabled":"switch__disabled_qryao","inactive":"switch__inactive_qryao","focused":"switch__focused_qryao"};
8
8
  require('./index.css')
9
9
 
10
10
  var Switch = forwardRef(function (_a, ref) {
package/esm/index.css CHANGED
@@ -1,14 +1,14 @@
1
- /* hash: 1f5n3 */
1
+ /* hash: f2bkn */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-link: #0072ef;
5
5
  --color-light-border-underline: #c5c5c7;
6
6
  --color-light-graphic-accent: #ef3124;
7
- --color-light-graphic-primary-inverted: #fff;
8
7
  --color-light-graphic-quaternary: #dcdcdd;
9
8
  --color-light-graphic-secondary: #86868a;
10
9
  --color-light-text-primary: #0e0e0e;
11
- --color-light-text-secondary: rgba(60, 60, 67, 0.66); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
10
+ --color-light-text-secondary: rgba(60, 60, 67, 0.66);
11
+ --color-static-graphic-light: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
12
12
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
13
13
  } :root {
14
14
  } :root {
@@ -47,7 +47,7 @@
47
47
 
48
48
  /* inactive */
49
49
  --switch-inactive-color: var(--color-light-border-underline);
50
- } .switch__component_8biv0 {
50
+ } .switch__component_qryao {
51
51
  display: inline-flex;
52
52
  align-items: flex-start;
53
53
  margin: 0;
@@ -55,20 +55,20 @@
55
55
  border: 0;
56
56
  cursor: pointer;
57
57
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
58
- } .switch__component_8biv0 input {
58
+ } .switch__component_qryao input {
59
59
  opacity: 0;
60
60
  position: absolute;
61
- } .switch__start_8biv0 {
61
+ } .switch__start_qryao {
62
62
  align-items: flex-start;
63
- } .switch__center_8biv0 {
63
+ } .switch__center_qryao {
64
64
  align-items: center;
65
- } .switch__addons_8biv0 {
65
+ } .switch__addons_qryao {
66
66
  margin-left: auto;
67
67
  padding-left: var(--gap-m);
68
68
  line-height: 24px;
69
- } .switch__block_8biv0 {
69
+ } .switch__block_qryao {
70
70
  width: 100%;
71
- } .switch__switch_8biv0 {
71
+ } .switch__switch_qryao {
72
72
  position: relative;
73
73
  border-radius: var(--border-radius-xl);
74
74
  width: 36px;
@@ -79,7 +79,7 @@
79
79
  border: 2px solid var(--switch-border-color);
80
80
  transition: background-color 0.2s ease, border-color 0.2s ease;
81
81
  box-sizing: border-box;
82
- } .switch__switch_8biv0:before {
82
+ } .switch__switch_qryao:before {
83
83
  content: '';
84
84
  position: absolute;
85
85
  top: 0;
@@ -88,59 +88,59 @@
88
88
  width: 16px;
89
89
  height: 16px;
90
90
  border-radius: var(--border-radius-circle);
91
- background-color: var(--color-light-graphic-primary-inverted);
91
+ background-color: var(--color-static-graphic-light);
92
92
  box-sizing: border-box;
93
93
  transition: transform 0.2s ease;
94
- } .switch__content_8biv0 {
94
+ } .switch__content_qryao {
95
95
  margin-left: var(--gap-s);
96
96
  flex-grow: 1;
97
- } .switch__label_8biv0 {
97
+ } .switch__label_qryao {
98
98
  font-size: 16px;
99
99
  line-height: 24px;
100
100
  font-weight: 400;
101
101
  display: block;
102
102
  color: var(--switch-label-color);
103
- } .switch__label_8biv0:not(:only-child) {
103
+ } .switch__label_qryao:not(:only-child) {
104
104
  margin-bottom: var(--gap-2xs);
105
- } .switch__hint_8biv0 {
105
+ } .switch__hint_qryao {
106
106
  font-size: 14px;
107
107
  line-height: 18px;
108
108
  font-weight: 400;
109
109
  display: block;
110
110
  color: var(--switch-hint-color);
111
- } /* Reversed state */ .switch__component_8biv0.switch__reversed_8biv0 {
111
+ } /* Reversed state */ .switch__component_qryao.switch__reversed_qryao {
112
112
  flex-direction: row-reverse;
113
- } .switch__reversed_8biv0 .switch__content_8biv0 {
113
+ } .switch__reversed_qryao .switch__content_qryao {
114
114
  margin-right: var(--gap-m);
115
115
  margin-left: 0;
116
- } .switch__reversed_8biv0 .switch__addons_8biv0 {
116
+ } .switch__reversed_qryao .switch__addons_qryao {
117
117
  margin-left: 0;
118
118
  padding-left: 0;
119
119
  margin-right: auto;
120
120
  padding-right: var(--gap-m);
121
- } /* Checked state */ .switch__checked_8biv0 .switch__switch_8biv0 {
121
+ } /* Checked state */ .switch__checked_qryao .switch__switch_qryao {
122
122
  background-color: var(--switch-checked-bg-color);
123
123
  border-color: var(--switch-checked-border-color);
124
- } .switch__checked_8biv0 .switch__switch_8biv0:before {
124
+ } .switch__checked_qryao .switch__switch_qryao:before {
125
125
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
126
126
  transform: translateX(16px);
127
- } /* Disabled state */ .switch__disabled_8biv0 {
127
+ } /* Disabled state */ .switch__disabled_qryao {
128
128
  cursor: var(--disabled-cursor);
129
- } .switch__disabled_8biv0 .switch__switch_8biv0 {
129
+ } .switch__disabled_qryao .switch__switch_qryao {
130
130
  background-color: var(--switch-disabled-bg-color);
131
131
  border-color: var(--switch-disabled-border-color);
132
- } .switch__disabled_8biv0 .switch__label_8biv0 {
132
+ } .switch__disabled_qryao .switch__label_qryao {
133
133
  color: var(--switch-disabled-color);
134
- } .switch__disabled_8biv0 .switch__hint_8biv0 {
134
+ } .switch__disabled_qryao .switch__hint_qryao {
135
135
  color: var(--switch-disabled-color);
136
- } /* Inactive */ .switch__inactive_8biv0 {
136
+ } /* Inactive */ .switch__inactive_qryao {
137
137
  cursor: var(--disabled-cursor);
138
- } .switch__inactive_8biv0 .switch__switch_8biv0 {
138
+ } .switch__inactive_qryao .switch__switch_qryao {
139
139
  background-color: var(--switch-disabled-bg-color);
140
140
  border-color: var(--switch-disabled-border-color)
141
- } .switch__inactive_8biv0 .switch__switch_8biv0:before {
141
+ } .switch__inactive_qryao .switch__switch_qryao:before {
142
142
  background-color: var(--switch-inactive-color);
143
- } /* Focused state */ .switch__focused_8biv0 .switch__switch_8biv0 {
143
+ } /* Focused state */ .switch__focused_qryao .switch__switch_qryao {
144
144
  outline: 2px solid var(--focus-color);
145
145
  outline-offset: 2px;
146
146
  }
package/index.css CHANGED
@@ -1,14 +1,14 @@
1
- /* hash: 1f5n3 */
1
+ /* hash: f2bkn */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-link: #0072ef;
5
5
  --color-light-border-underline: #c5c5c7;
6
6
  --color-light-graphic-accent: #ef3124;
7
- --color-light-graphic-primary-inverted: #fff;
8
7
  --color-light-graphic-quaternary: #dcdcdd;
9
8
  --color-light-graphic-secondary: #86868a;
10
9
  --color-light-text-primary: #0e0e0e;
11
- --color-light-text-secondary: rgba(60, 60, 67, 0.66); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
10
+ --color-light-text-secondary: rgba(60, 60, 67, 0.66);
11
+ --color-static-graphic-light: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
12
12
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
13
13
  } :root {
14
14
  } :root {
@@ -47,7 +47,7 @@
47
47
 
48
48
  /* inactive */
49
49
  --switch-inactive-color: var(--color-light-border-underline);
50
- } .switch__component_8biv0 {
50
+ } .switch__component_qryao {
51
51
  display: inline-flex;
52
52
  align-items: flex-start;
53
53
  margin: 0;
@@ -55,20 +55,20 @@
55
55
  border: 0;
56
56
  cursor: pointer;
57
57
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
58
- } .switch__component_8biv0 input {
58
+ } .switch__component_qryao input {
59
59
  opacity: 0;
60
60
  position: absolute;
61
- } .switch__start_8biv0 {
61
+ } .switch__start_qryao {
62
62
  align-items: flex-start;
63
- } .switch__center_8biv0 {
63
+ } .switch__center_qryao {
64
64
  align-items: center;
65
- } .switch__addons_8biv0 {
65
+ } .switch__addons_qryao {
66
66
  margin-left: auto;
67
67
  padding-left: var(--gap-m);
68
68
  line-height: 24px;
69
- } .switch__block_8biv0 {
69
+ } .switch__block_qryao {
70
70
  width: 100%;
71
- } .switch__switch_8biv0 {
71
+ } .switch__switch_qryao {
72
72
  position: relative;
73
73
  border-radius: var(--border-radius-xl);
74
74
  width: 36px;
@@ -79,7 +79,7 @@
79
79
  border: 2px solid var(--switch-border-color);
80
80
  transition: background-color 0.2s ease, border-color 0.2s ease;
81
81
  box-sizing: border-box;
82
- } .switch__switch_8biv0:before {
82
+ } .switch__switch_qryao:before {
83
83
  content: '';
84
84
  position: absolute;
85
85
  top: 0;
@@ -88,59 +88,59 @@
88
88
  width: 16px;
89
89
  height: 16px;
90
90
  border-radius: var(--border-radius-circle);
91
- background-color: var(--color-light-graphic-primary-inverted);
91
+ background-color: var(--color-static-graphic-light);
92
92
  box-sizing: border-box;
93
93
  transition: transform 0.2s ease;
94
- } .switch__content_8biv0 {
94
+ } .switch__content_qryao {
95
95
  margin-left: var(--gap-s);
96
96
  flex-grow: 1;
97
- } .switch__label_8biv0 {
97
+ } .switch__label_qryao {
98
98
  font-size: 16px;
99
99
  line-height: 24px;
100
100
  font-weight: 400;
101
101
  display: block;
102
102
  color: var(--switch-label-color);
103
- } .switch__label_8biv0:not(:only-child) {
103
+ } .switch__label_qryao:not(:only-child) {
104
104
  margin-bottom: var(--gap-2xs);
105
- } .switch__hint_8biv0 {
105
+ } .switch__hint_qryao {
106
106
  font-size: 14px;
107
107
  line-height: 18px;
108
108
  font-weight: 400;
109
109
  display: block;
110
110
  color: var(--switch-hint-color);
111
- } /* Reversed state */ .switch__component_8biv0.switch__reversed_8biv0 {
111
+ } /* Reversed state */ .switch__component_qryao.switch__reversed_qryao {
112
112
  flex-direction: row-reverse;
113
- } .switch__reversed_8biv0 .switch__content_8biv0 {
113
+ } .switch__reversed_qryao .switch__content_qryao {
114
114
  margin-right: var(--gap-m);
115
115
  margin-left: 0;
116
- } .switch__reversed_8biv0 .switch__addons_8biv0 {
116
+ } .switch__reversed_qryao .switch__addons_qryao {
117
117
  margin-left: 0;
118
118
  padding-left: 0;
119
119
  margin-right: auto;
120
120
  padding-right: var(--gap-m);
121
- } /* Checked state */ .switch__checked_8biv0 .switch__switch_8biv0 {
121
+ } /* Checked state */ .switch__checked_qryao .switch__switch_qryao {
122
122
  background-color: var(--switch-checked-bg-color);
123
123
  border-color: var(--switch-checked-border-color);
124
- } .switch__checked_8biv0 .switch__switch_8biv0:before {
124
+ } .switch__checked_qryao .switch__switch_qryao:before {
125
125
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
126
126
  transform: translateX(16px);
127
- } /* Disabled state */ .switch__disabled_8biv0 {
127
+ } /* Disabled state */ .switch__disabled_qryao {
128
128
  cursor: var(--disabled-cursor);
129
- } .switch__disabled_8biv0 .switch__switch_8biv0 {
129
+ } .switch__disabled_qryao .switch__switch_qryao {
130
130
  background-color: var(--switch-disabled-bg-color);
131
131
  border-color: var(--switch-disabled-border-color);
132
- } .switch__disabled_8biv0 .switch__label_8biv0 {
132
+ } .switch__disabled_qryao .switch__label_qryao {
133
133
  color: var(--switch-disabled-color);
134
- } .switch__disabled_8biv0 .switch__hint_8biv0 {
134
+ } .switch__disabled_qryao .switch__hint_qryao {
135
135
  color: var(--switch-disabled-color);
136
- } /* Inactive */ .switch__inactive_8biv0 {
136
+ } /* Inactive */ .switch__inactive_qryao {
137
137
  cursor: var(--disabled-cursor);
138
- } .switch__inactive_8biv0 .switch__switch_8biv0 {
138
+ } .switch__inactive_qryao .switch__switch_qryao {
139
139
  background-color: var(--switch-disabled-bg-color);
140
140
  border-color: var(--switch-disabled-border-color)
141
- } .switch__inactive_8biv0 .switch__switch_8biv0:before {
141
+ } .switch__inactive_qryao .switch__switch_qryao:before {
142
142
  background-color: var(--switch-inactive-color);
143
- } /* Focused state */ .switch__focused_8biv0 .switch__switch_8biv0 {
143
+ } /* Focused state */ .switch__focused_qryao .switch__switch_qryao {
144
144
  outline: 2px solid var(--focus-color);
145
145
  outline-offset: 2px;
146
146
  }
package/modern/Component.js CHANGED
@@ -3,7 +3,7 @@ import mergeRefs from 'react-merge-refs';
3
3
  import cn from 'classnames';
4
4
  import { useFocus } from '@alfalab/hooks';
5
5
 
6
- const styles = {"component":"switch__component_8biv0","start":"switch__start_8biv0","center":"switch__center_8biv0","addons":"switch__addons_8biv0","block":"switch__block_8biv0","switch":"switch__switch_8biv0","content":"switch__content_8biv0","label":"switch__label_8biv0","hint":"switch__hint_8biv0","reversed":"switch__reversed_8biv0","checked":"switch__checked_8biv0","disabled":"switch__disabled_8biv0","inactive":"switch__inactive_8biv0","focused":"switch__focused_8biv0"};
6
+ const styles = {"component":"switch__component_qryao","start":"switch__start_qryao","center":"switch__center_qryao","addons":"switch__addons_qryao","block":"switch__block_qryao","switch":"switch__switch_qryao","content":"switch__content_qryao","label":"switch__label_qryao","hint":"switch__hint_qryao","reversed":"switch__reversed_qryao","checked":"switch__checked_qryao","disabled":"switch__disabled_qryao","inactive":"switch__inactive_qryao","focused":"switch__focused_qryao"};
7
7
  require('./index.css')
8
8
 
9
9
  const Switch = forwardRef(({ reversed = false, checked = false, align = 'start', addons, block, disabled, inactive, label, hint, name, value, className, onChange, dataTestId, ...restProps }, ref) => {
package/modern/index.css CHANGED
@@ -1,14 +1,14 @@
1
- /* hash: 1f5n3 */
1
+ /* hash: f2bkn */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-link: #0072ef;
5
5
  --color-light-border-underline: #c5c5c7;
6
6
  --color-light-graphic-accent: #ef3124;
7
- --color-light-graphic-primary-inverted: #fff;
8
7
  --color-light-graphic-quaternary: #dcdcdd;
9
8
  --color-light-graphic-secondary: #86868a;
10
9
  --color-light-text-primary: #0e0e0e;
11
- --color-light-text-secondary: rgba(60, 60, 67, 0.66); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
10
+ --color-light-text-secondary: rgba(60, 60, 67, 0.66);
11
+ --color-static-graphic-light: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
12
12
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
13
13
  } :root {
14
14
  } :root {
@@ -47,7 +47,7 @@
47
47
 
48
48
  /* inactive */
49
49
  --switch-inactive-color: var(--color-light-border-underline);
50
- } .switch__component_8biv0 {
50
+ } .switch__component_qryao {
51
51
  display: inline-flex;
52
52
  align-items: flex-start;
53
53
  margin: 0;
@@ -55,20 +55,20 @@
55
55
  border: 0;
56
56
  cursor: pointer;
57
57
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
58
- } .switch__component_8biv0 input {
58
+ } .switch__component_qryao input {
59
59
  opacity: 0;
60
60
  position: absolute;
61
- } .switch__start_8biv0 {
61
+ } .switch__start_qryao {
62
62
  align-items: flex-start;
63
- } .switch__center_8biv0 {
63
+ } .switch__center_qryao {
64
64
  align-items: center;
65
- } .switch__addons_8biv0 {
65
+ } .switch__addons_qryao {
66
66
  margin-left: auto;
67
67
  padding-left: var(--gap-m);
68
68
  line-height: 24px;
69
- } .switch__block_8biv0 {
69
+ } .switch__block_qryao {
70
70
  width: 100%;
71
- } .switch__switch_8biv0 {
71
+ } .switch__switch_qryao {
72
72
  position: relative;
73
73
  border-radius: var(--border-radius-xl);
74
74
  width: 36px;
@@ -79,7 +79,7 @@
79
79
  border: 2px solid var(--switch-border-color);
80
80
  transition: background-color 0.2s ease, border-color 0.2s ease;
81
81
  box-sizing: border-box;
82
- } .switch__switch_8biv0:before {
82
+ } .switch__switch_qryao:before {
83
83
  content: '';
84
84
  position: absolute;
85
85
  top: 0;
@@ -88,59 +88,59 @@
88
88
  width: 16px;
89
89
  height: 16px;
90
90
  border-radius: var(--border-radius-circle);
91
- background-color: var(--color-light-graphic-primary-inverted);
91
+ background-color: var(--color-static-graphic-light);
92
92
  box-sizing: border-box;
93
93
  transition: transform 0.2s ease;
94
- } .switch__content_8biv0 {
94
+ } .switch__content_qryao {
95
95
  margin-left: var(--gap-s);
96
96
  flex-grow: 1;
97
- } .switch__label_8biv0 {
97
+ } .switch__label_qryao {
98
98
  font-size: 16px;
99
99
  line-height: 24px;
100
100
  font-weight: 400;
101
101
  display: block;
102
102
  color: var(--switch-label-color);
103
- } .switch__label_8biv0:not(:only-child) {
103
+ } .switch__label_qryao:not(:only-child) {
104
104
  margin-bottom: var(--gap-2xs);
105
- } .switch__hint_8biv0 {
105
+ } .switch__hint_qryao {
106
106
  font-size: 14px;
107
107
  line-height: 18px;
108
108
  font-weight: 400;
109
109
  display: block;
110
110
  color: var(--switch-hint-color);
111
- } /* Reversed state */ .switch__component_8biv0.switch__reversed_8biv0 {
111
+ } /* Reversed state */ .switch__component_qryao.switch__reversed_qryao {
112
112
  flex-direction: row-reverse;
113
- } .switch__reversed_8biv0 .switch__content_8biv0 {
113
+ } .switch__reversed_qryao .switch__content_qryao {
114
114
  margin-right: var(--gap-m);
115
115
  margin-left: 0;
116
- } .switch__reversed_8biv0 .switch__addons_8biv0 {
116
+ } .switch__reversed_qryao .switch__addons_qryao {
117
117
  margin-left: 0;
118
118
  padding-left: 0;
119
119
  margin-right: auto;
120
120
  padding-right: var(--gap-m);
121
- } /* Checked state */ .switch__checked_8biv0 .switch__switch_8biv0 {
121
+ } /* Checked state */ .switch__checked_qryao .switch__switch_qryao {
122
122
  background-color: var(--switch-checked-bg-color);
123
123
  border-color: var(--switch-checked-border-color);
124
- } .switch__checked_8biv0 .switch__switch_8biv0:before {
124
+ } .switch__checked_qryao .switch__switch_qryao:before {
125
125
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
126
126
  transform: translateX(16px);
127
- } /* Disabled state */ .switch__disabled_8biv0 {
127
+ } /* Disabled state */ .switch__disabled_qryao {
128
128
  cursor: var(--disabled-cursor);
129
- } .switch__disabled_8biv0 .switch__switch_8biv0 {
129
+ } .switch__disabled_qryao .switch__switch_qryao {
130
130
  background-color: var(--switch-disabled-bg-color);
131
131
  border-color: var(--switch-disabled-border-color);
132
- } .switch__disabled_8biv0 .switch__label_8biv0 {
132
+ } .switch__disabled_qryao .switch__label_qryao {
133
133
  color: var(--switch-disabled-color);
134
- } .switch__disabled_8biv0 .switch__hint_8biv0 {
134
+ } .switch__disabled_qryao .switch__hint_qryao {
135
135
  color: var(--switch-disabled-color);
136
- } /* Inactive */ .switch__inactive_8biv0 {
136
+ } /* Inactive */ .switch__inactive_qryao {
137
137
  cursor: var(--disabled-cursor);
138
- } .switch__inactive_8biv0 .switch__switch_8biv0 {
138
+ } .switch__inactive_qryao .switch__switch_qryao {
139
139
  background-color: var(--switch-disabled-bg-color);
140
140
  border-color: var(--switch-disabled-border-color)
141
- } .switch__inactive_8biv0 .switch__switch_8biv0:before {
141
+ } .switch__inactive_qryao .switch__switch_qryao:before {
142
142
  background-color: var(--switch-inactive-color);
143
- } /* Focused state */ .switch__focused_8biv0 .switch__switch_8biv0 {
143
+ } /* Focused state */ .switch__focused_qryao .switch__switch_qryao {
144
144
  outline: 2px solid var(--focus-color);
145
145
  outline-offset: 2px;
146
146
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-switch",
3
- "version": "3.0.4",
3
+ "version": "3.0.5",
4
4
  "description": "",
5
5
  "gitHead": "f054fef20200664c65e2501ef1f916c555cdf05d",
6
6
  "keywords": [],