@alfalab/core-components-switch 4.3.1 → 4.3.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 (8) hide show
  1. package/Component.js +1 -1
  2. package/cssm/index.module.css +1 -1
  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 +4 -4
package/Component.js CHANGED
@@ -15,7 +15,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
15
15
  var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
16
16
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
17
17
 
18
- var styles = {"component":"switch__component_1xrrg","start":"switch__start_1xrrg","center":"switch__center_1xrrg","addons":"switch__addons_1xrrg","block":"switch__block_1xrrg","switch":"switch__switch_1xrrg","content":"switch__content_1xrrg","label":"switch__label_1xrrg","errorMessage":"switch__errorMessage_1xrrg","hint":"switch__hint_1xrrg","reversed":"switch__reversed_1xrrg","checked":"switch__checked_1xrrg","disabled":"switch__disabled_1xrrg","focused":"switch__focused_1xrrg"};
18
+ var styles = {"component":"switch__component_1drxk","start":"switch__start_1drxk","center":"switch__center_1drxk","addons":"switch__addons_1drxk","block":"switch__block_1drxk","switch":"switch__switch_1drxk","content":"switch__content_1drxk","label":"switch__label_1drxk","errorMessage":"switch__errorMessage_1drxk","hint":"switch__hint_1drxk","reversed":"switch__reversed_1drxk","checked":"switch__checked_1drxk","disabled":"switch__disabled_1drxk","focused":"switch__focused_1drxk"};
19
19
  require('./index.css')
20
20
 
21
21
  var Switch = React.forwardRef(function (_a, ref) {
package/cssm/index.module.css CHANGED
@@ -42,7 +42,7 @@
42
42
  } :root {
43
43
  --focus-color: var(--color-light-status-info);
44
44
  --disabled-cursor: not-allowed;
45
- } :root {
45
+ } /* сбрасывает синюю подсветку при нажатии */ :root {
46
46
  --switch-label-color: var(--color-light-text-primary);
47
47
  --switch-hint-color: var(--color-light-text-secondary);
48
48
  --switch-bg-color: var(--color-light-neutral-translucent-700);
package/esm/Component.js CHANGED
@@ -5,7 +5,7 @@ import cn from 'classnames';
5
5
  import { dom } from '@alfalab/core-components-shared/esm';
6
6
  import { useFocus } from '@alfalab/hooks';
7
7
 
8
- var styles = {"component":"switch__component_1xrrg","start":"switch__start_1xrrg","center":"switch__center_1xrrg","addons":"switch__addons_1xrrg","block":"switch__block_1xrrg","switch":"switch__switch_1xrrg","content":"switch__content_1xrrg","label":"switch__label_1xrrg","errorMessage":"switch__errorMessage_1xrrg","hint":"switch__hint_1xrrg","reversed":"switch__reversed_1xrrg","checked":"switch__checked_1xrrg","disabled":"switch__disabled_1xrrg","focused":"switch__focused_1xrrg"};
8
+ var styles = {"component":"switch__component_1drxk","start":"switch__start_1drxk","center":"switch__center_1drxk","addons":"switch__addons_1drxk","block":"switch__block_1drxk","switch":"switch__switch_1drxk","content":"switch__content_1drxk","label":"switch__label_1drxk","errorMessage":"switch__errorMessage_1drxk","hint":"switch__hint_1drxk","reversed":"switch__reversed_1drxk","checked":"switch__checked_1drxk","disabled":"switch__disabled_1drxk","focused":"switch__focused_1drxk"};
9
9
  require('./index.css')
10
10
 
11
11
  var Switch = forwardRef(function (_a, ref) {
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1r6wc */
1
+ /* hash: 1nwad */
2
2
  :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 */ /* 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 */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
@@ -43,7 +43,7 @@
43
43
  } :root {
44
44
  --focus-color: var(--color-light-status-info);
45
45
  --disabled-cursor: not-allowed;
46
- } :root {
46
+ } /* сбрасывает синюю подсветку при нажатии */ :root {
47
47
  --switch-label-color: var(--color-light-text-primary);
48
48
  --switch-hint-color: var(--color-light-text-secondary);
49
49
  --switch-bg-color: var(--color-light-neutral-translucent-700);
@@ -67,7 +67,7 @@
67
67
  /* icon */
68
68
  --switch-icon-color: var(--color-static-neutral-0);
69
69
  --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
70
- } .switch__component_1xrrg {
70
+ } .switch__component_1drxk {
71
71
  display: inline-flex;
72
72
  align-items: flex-start;
73
73
  margin: var(--gap-0);
@@ -75,20 +75,20 @@
75
75
  border: 0;
76
76
  cursor: pointer;
77
77
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
78
- } .switch__component_1xrrg input {
78
+ } .switch__component_1drxk input {
79
79
  opacity: 0;
80
80
  position: absolute;
81
- } .switch__start_1xrrg {
81
+ } .switch__start_1drxk {
82
82
  align-items: flex-start;
83
- } .switch__center_1xrrg {
83
+ } .switch__center_1drxk {
84
84
  align-items: center;
85
- } .switch__addons_1xrrg {
85
+ } .switch__addons_1drxk {
86
86
  margin-left: auto;
87
87
  padding-left: var(--gap-16);
88
88
  line-height: 24px;
89
- } .switch__block_1xrrg {
89
+ } .switch__block_1drxk {
90
90
  width: 100%;
91
- } .switch__switch_1xrrg {
91
+ } .switch__switch_1drxk {
92
92
  position: relative;
93
93
  border-radius: var(--border-radius-16);
94
94
  width: 36px;
@@ -99,9 +99,9 @@
99
99
  border: 2px solid var(--switch-border-color);
100
100
  transition: background-color 0.2s ease, border-color 0.2s ease;
101
101
  box-sizing: border-box
102
- } .switch__switch_1xrrg:hover {
102
+ } .switch__switch_1drxk:hover {
103
103
  background-color: var(--switch-hover-bg-color);
104
- } .switch__switch_1xrrg:before {
104
+ } .switch__switch_1drxk:before {
105
105
  content: '';
106
106
  position: absolute;
107
107
  top: var(--gap-0);
@@ -113,58 +113,58 @@
113
113
  background-color: var(--switch-icon-color);
114
114
  box-sizing: border-box;
115
115
  transition: transform 0.2s ease;
116
- } .switch__content_1xrrg {
116
+ } .switch__content_1drxk {
117
117
  margin-left: var(--gap-12);
118
118
  flex-grow: 1;
119
- } .switch__label_1xrrg {
119
+ } .switch__label_1drxk {
120
120
  font-size: 16px;
121
121
  line-height: 24px;
122
122
  font-weight: 400;
123
123
  display: block;
124
124
  color: var(--switch-label-color);
125
- } .switch__label_1xrrg:not(:only-child) {
125
+ } .switch__label_1drxk:not(:only-child) {
126
126
  margin-bottom: var(--gap-4);
127
- } .switch__errorMessage_1xrrg {
127
+ } .switch__errorMessage_1drxk {
128
128
  font-size: 14px;
129
129
  line-height: 18px;
130
130
  font-weight: 400;
131
131
  color: var(--switch-error-color);
132
- } .switch__hint_1xrrg {
132
+ } .switch__hint_1drxk {
133
133
  font-size: 14px;
134
134
  line-height: 18px;
135
135
  font-weight: 400;
136
136
  display: block;
137
137
  color: var(--switch-hint-color);
138
- } /* Reversed state */ .switch__component_1xrrg.switch__reversed_1xrrg {
138
+ } /* Reversed state */ .switch__component_1drxk.switch__reversed_1drxk {
139
139
  flex-direction: row-reverse;
140
- } .switch__reversed_1xrrg .switch__content_1xrrg {
140
+ } .switch__reversed_1drxk .switch__content_1drxk {
141
141
  margin-right: var(--gap-16);
142
142
  margin-left: var(--gap-0);
143
- } .switch__reversed_1xrrg .switch__addons_1xrrg {
143
+ } .switch__reversed_1drxk .switch__addons_1drxk {
144
144
  margin-left: var(--gap-0);
145
145
  padding-left: var(--gap-0);
146
146
  margin-right: auto;
147
147
  padding-right: var(--gap-16);
148
- } /* Checked state */ .switch__checked_1xrrg .switch__switch_1xrrg {
148
+ } /* Checked state */ .switch__checked_1drxk .switch__switch_1drxk {
149
149
  background-color: var(--switch-checked-bg-color)
150
- } .switch__checked_1xrrg .switch__switch_1xrrg:hover {
150
+ } .switch__checked_1drxk .switch__switch_1drxk:hover {
151
151
  background-color: var(--switch-checked-hover-bg-color);
152
- } .switch__checked_1xrrg .switch__switch_1xrrg:before {
152
+ } .switch__checked_1drxk .switch__switch_1drxk:before {
153
153
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
154
154
  transform: translateX(16px);
155
- } /* Disabled state */ .switch__disabled_1xrrg {
155
+ } /* Disabled state */ .switch__disabled_1drxk {
156
156
  cursor: var(--disabled-cursor);
157
- } .switch__disabled_1xrrg .switch__switch_1xrrg {
157
+ } .switch__disabled_1drxk .switch__switch_1drxk {
158
158
  background-color: var(--switch-disabled-bg-color)
159
- } .switch__disabled_1xrrg .switch__switch_1xrrg:before {
159
+ } .switch__disabled_1drxk .switch__switch_1drxk:before {
160
160
  background-color: var(--switch-icon-disabled-color);
161
- } .switch__disabled_1xrrg.switch__checked_1xrrg .switch__switch_1xrrg {
161
+ } .switch__disabled_1drxk.switch__checked_1drxk .switch__switch_1drxk {
162
162
  background-color: var(--switch-disabled-checked-bg-color);
163
- } .switch__disabled_1xrrg .switch__label_1xrrg {
163
+ } .switch__disabled_1drxk .switch__label_1drxk {
164
164
  color: var(--switch-disabled-color);
165
- } .switch__disabled_1xrrg .switch__hint_1xrrg {
165
+ } .switch__disabled_1drxk .switch__hint_1drxk {
166
166
  color: var(--switch-disabled-color);
167
- } /* Focused state */ .switch__focused_1xrrg .switch__switch_1xrrg {
167
+ } /* Focused state */ .switch__focused_1drxk .switch__switch_1drxk {
168
168
  outline: 2px solid var(--focus-color);
169
169
  outline-offset: 2px;
170
170
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1r6wc */
1
+ /* hash: 1nwad */
2
2
  :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 */ /* 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 */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
@@ -43,7 +43,7 @@
43
43
  } :root {
44
44
  --focus-color: var(--color-light-status-info);
45
45
  --disabled-cursor: not-allowed;
46
- } :root {
46
+ } /* сбрасывает синюю подсветку при нажатии */ :root {
47
47
  --switch-label-color: var(--color-light-text-primary);
48
48
  --switch-hint-color: var(--color-light-text-secondary);
49
49
  --switch-bg-color: var(--color-light-neutral-translucent-700);
@@ -67,7 +67,7 @@
67
67
  /* icon */
68
68
  --switch-icon-color: var(--color-static-neutral-0);
69
69
  --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
70
- } .switch__component_1xrrg {
70
+ } .switch__component_1drxk {
71
71
  display: inline-flex;
72
72
  align-items: flex-start;
73
73
  margin: var(--gap-0);
@@ -75,20 +75,20 @@
75
75
  border: 0;
76
76
  cursor: pointer;
77
77
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
78
- } .switch__component_1xrrg input {
78
+ } .switch__component_1drxk input {
79
79
  opacity: 0;
80
80
  position: absolute;
81
- } .switch__start_1xrrg {
81
+ } .switch__start_1drxk {
82
82
  align-items: flex-start;
83
- } .switch__center_1xrrg {
83
+ } .switch__center_1drxk {
84
84
  align-items: center;
85
- } .switch__addons_1xrrg {
85
+ } .switch__addons_1drxk {
86
86
  margin-left: auto;
87
87
  padding-left: var(--gap-16);
88
88
  line-height: 24px;
89
- } .switch__block_1xrrg {
89
+ } .switch__block_1drxk {
90
90
  width: 100%;
91
- } .switch__switch_1xrrg {
91
+ } .switch__switch_1drxk {
92
92
  position: relative;
93
93
  border-radius: var(--border-radius-16);
94
94
  width: 36px;
@@ -99,9 +99,9 @@
99
99
  border: 2px solid var(--switch-border-color);
100
100
  transition: background-color 0.2s ease, border-color 0.2s ease;
101
101
  box-sizing: border-box
102
- } .switch__switch_1xrrg:hover {
102
+ } .switch__switch_1drxk:hover {
103
103
  background-color: var(--switch-hover-bg-color);
104
- } .switch__switch_1xrrg:before {
104
+ } .switch__switch_1drxk:before {
105
105
  content: '';
106
106
  position: absolute;
107
107
  top: var(--gap-0);
@@ -113,58 +113,58 @@
113
113
  background-color: var(--switch-icon-color);
114
114
  box-sizing: border-box;
115
115
  transition: transform 0.2s ease;
116
- } .switch__content_1xrrg {
116
+ } .switch__content_1drxk {
117
117
  margin-left: var(--gap-12);
118
118
  flex-grow: 1;
119
- } .switch__label_1xrrg {
119
+ } .switch__label_1drxk {
120
120
  font-size: 16px;
121
121
  line-height: 24px;
122
122
  font-weight: 400;
123
123
  display: block;
124
124
  color: var(--switch-label-color);
125
- } .switch__label_1xrrg:not(:only-child) {
125
+ } .switch__label_1drxk:not(:only-child) {
126
126
  margin-bottom: var(--gap-4);
127
- } .switch__errorMessage_1xrrg {
127
+ } .switch__errorMessage_1drxk {
128
128
  font-size: 14px;
129
129
  line-height: 18px;
130
130
  font-weight: 400;
131
131
  color: var(--switch-error-color);
132
- } .switch__hint_1xrrg {
132
+ } .switch__hint_1drxk {
133
133
  font-size: 14px;
134
134
  line-height: 18px;
135
135
  font-weight: 400;
136
136
  display: block;
137
137
  color: var(--switch-hint-color);
138
- } /* Reversed state */ .switch__component_1xrrg.switch__reversed_1xrrg {
138
+ } /* Reversed state */ .switch__component_1drxk.switch__reversed_1drxk {
139
139
  flex-direction: row-reverse;
140
- } .switch__reversed_1xrrg .switch__content_1xrrg {
140
+ } .switch__reversed_1drxk .switch__content_1drxk {
141
141
  margin-right: var(--gap-16);
142
142
  margin-left: var(--gap-0);
143
- } .switch__reversed_1xrrg .switch__addons_1xrrg {
143
+ } .switch__reversed_1drxk .switch__addons_1drxk {
144
144
  margin-left: var(--gap-0);
145
145
  padding-left: var(--gap-0);
146
146
  margin-right: auto;
147
147
  padding-right: var(--gap-16);
148
- } /* Checked state */ .switch__checked_1xrrg .switch__switch_1xrrg {
148
+ } /* Checked state */ .switch__checked_1drxk .switch__switch_1drxk {
149
149
  background-color: var(--switch-checked-bg-color)
150
- } .switch__checked_1xrrg .switch__switch_1xrrg:hover {
150
+ } .switch__checked_1drxk .switch__switch_1drxk:hover {
151
151
  background-color: var(--switch-checked-hover-bg-color);
152
- } .switch__checked_1xrrg .switch__switch_1xrrg:before {
152
+ } .switch__checked_1drxk .switch__switch_1drxk:before {
153
153
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
154
154
  transform: translateX(16px);
155
- } /* Disabled state */ .switch__disabled_1xrrg {
155
+ } /* Disabled state */ .switch__disabled_1drxk {
156
156
  cursor: var(--disabled-cursor);
157
- } .switch__disabled_1xrrg .switch__switch_1xrrg {
157
+ } .switch__disabled_1drxk .switch__switch_1drxk {
158
158
  background-color: var(--switch-disabled-bg-color)
159
- } .switch__disabled_1xrrg .switch__switch_1xrrg:before {
159
+ } .switch__disabled_1drxk .switch__switch_1drxk:before {
160
160
  background-color: var(--switch-icon-disabled-color);
161
- } .switch__disabled_1xrrg.switch__checked_1xrrg .switch__switch_1xrrg {
161
+ } .switch__disabled_1drxk.switch__checked_1drxk .switch__switch_1drxk {
162
162
  background-color: var(--switch-disabled-checked-bg-color);
163
- } .switch__disabled_1xrrg .switch__label_1xrrg {
163
+ } .switch__disabled_1drxk .switch__label_1drxk {
164
164
  color: var(--switch-disabled-color);
165
- } .switch__disabled_1xrrg .switch__hint_1xrrg {
165
+ } .switch__disabled_1drxk .switch__hint_1drxk {
166
166
  color: var(--switch-disabled-color);
167
- } /* Focused state */ .switch__focused_1xrrg .switch__switch_1xrrg {
167
+ } /* Focused state */ .switch__focused_1drxk .switch__switch_1drxk {
168
168
  outline: 2px solid var(--focus-color);
169
169
  outline-offset: 2px;
170
170
  }
package/modern/Component.js CHANGED
@@ -4,7 +4,7 @@ import cn from 'classnames';
4
4
  import { dom } from '@alfalab/core-components-shared/modern';
5
5
  import { useFocus } from '@alfalab/hooks';
6
6
 
7
- const styles = {"component":"switch__component_1xrrg","start":"switch__start_1xrrg","center":"switch__center_1xrrg","addons":"switch__addons_1xrrg","block":"switch__block_1xrrg","switch":"switch__switch_1xrrg","content":"switch__content_1xrrg","label":"switch__label_1xrrg","errorMessage":"switch__errorMessage_1xrrg","hint":"switch__hint_1xrrg","reversed":"switch__reversed_1xrrg","checked":"switch__checked_1xrrg","disabled":"switch__disabled_1xrrg","focused":"switch__focused_1xrrg"};
7
+ const styles = {"component":"switch__component_1drxk","start":"switch__start_1drxk","center":"switch__center_1drxk","addons":"switch__addons_1drxk","block":"switch__block_1drxk","switch":"switch__switch_1drxk","content":"switch__content_1drxk","label":"switch__label_1drxk","errorMessage":"switch__errorMessage_1drxk","hint":"switch__hint_1drxk","reversed":"switch__reversed_1drxk","checked":"switch__checked_1drxk","disabled":"switch__disabled_1drxk","focused":"switch__focused_1drxk"};
8
8
  require('./index.css')
9
9
 
10
10
  const Switch = forwardRef(({ reversed = false, checked = false, align = 'start', addons, block, disabled, inactive, error, label, hint, name, value, className, onChange, dataTestId, ...restProps }, ref) => {
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1r6wc */
1
+ /* hash: 1nwad */
2
2
  :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 */ /* 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 */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
@@ -43,7 +43,7 @@
43
43
  } :root {
44
44
  --focus-color: var(--color-light-status-info);
45
45
  --disabled-cursor: not-allowed;
46
- } :root {
46
+ } /* сбрасывает синюю подсветку при нажатии */ :root {
47
47
  --switch-label-color: var(--color-light-text-primary);
48
48
  --switch-hint-color: var(--color-light-text-secondary);
49
49
  --switch-bg-color: var(--color-light-neutral-translucent-700);
@@ -67,7 +67,7 @@
67
67
  /* icon */
68
68
  --switch-icon-color: var(--color-static-neutral-0);
69
69
  --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
70
- } .switch__component_1xrrg {
70
+ } .switch__component_1drxk {
71
71
  display: inline-flex;
72
72
  align-items: flex-start;
73
73
  margin: var(--gap-0);
@@ -75,20 +75,20 @@
75
75
  border: 0;
76
76
  cursor: pointer;
77
77
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
78
- } .switch__component_1xrrg input {
78
+ } .switch__component_1drxk input {
79
79
  opacity: 0;
80
80
  position: absolute;
81
- } .switch__start_1xrrg {
81
+ } .switch__start_1drxk {
82
82
  align-items: flex-start;
83
- } .switch__center_1xrrg {
83
+ } .switch__center_1drxk {
84
84
  align-items: center;
85
- } .switch__addons_1xrrg {
85
+ } .switch__addons_1drxk {
86
86
  margin-left: auto;
87
87
  padding-left: var(--gap-16);
88
88
  line-height: 24px;
89
- } .switch__block_1xrrg {
89
+ } .switch__block_1drxk {
90
90
  width: 100%;
91
- } .switch__switch_1xrrg {
91
+ } .switch__switch_1drxk {
92
92
  position: relative;
93
93
  border-radius: var(--border-radius-16);
94
94
  width: 36px;
@@ -99,9 +99,9 @@
99
99
  border: 2px solid var(--switch-border-color);
100
100
  transition: background-color 0.2s ease, border-color 0.2s ease;
101
101
  box-sizing: border-box
102
- } .switch__switch_1xrrg:hover {
102
+ } .switch__switch_1drxk:hover {
103
103
  background-color: var(--switch-hover-bg-color);
104
- } .switch__switch_1xrrg:before {
104
+ } .switch__switch_1drxk:before {
105
105
  content: '';
106
106
  position: absolute;
107
107
  top: var(--gap-0);
@@ -113,58 +113,58 @@
113
113
  background-color: var(--switch-icon-color);
114
114
  box-sizing: border-box;
115
115
  transition: transform 0.2s ease;
116
- } .switch__content_1xrrg {
116
+ } .switch__content_1drxk {
117
117
  margin-left: var(--gap-12);
118
118
  flex-grow: 1;
119
- } .switch__label_1xrrg {
119
+ } .switch__label_1drxk {
120
120
  font-size: 16px;
121
121
  line-height: 24px;
122
122
  font-weight: 400;
123
123
  display: block;
124
124
  color: var(--switch-label-color);
125
- } .switch__label_1xrrg:not(:only-child) {
125
+ } .switch__label_1drxk:not(:only-child) {
126
126
  margin-bottom: var(--gap-4);
127
- } .switch__errorMessage_1xrrg {
127
+ } .switch__errorMessage_1drxk {
128
128
  font-size: 14px;
129
129
  line-height: 18px;
130
130
  font-weight: 400;
131
131
  color: var(--switch-error-color);
132
- } .switch__hint_1xrrg {
132
+ } .switch__hint_1drxk {
133
133
  font-size: 14px;
134
134
  line-height: 18px;
135
135
  font-weight: 400;
136
136
  display: block;
137
137
  color: var(--switch-hint-color);
138
- } /* Reversed state */ .switch__component_1xrrg.switch__reversed_1xrrg {
138
+ } /* Reversed state */ .switch__component_1drxk.switch__reversed_1drxk {
139
139
  flex-direction: row-reverse;
140
- } .switch__reversed_1xrrg .switch__content_1xrrg {
140
+ } .switch__reversed_1drxk .switch__content_1drxk {
141
141
  margin-right: var(--gap-16);
142
142
  margin-left: var(--gap-0);
143
- } .switch__reversed_1xrrg .switch__addons_1xrrg {
143
+ } .switch__reversed_1drxk .switch__addons_1drxk {
144
144
  margin-left: var(--gap-0);
145
145
  padding-left: var(--gap-0);
146
146
  margin-right: auto;
147
147
  padding-right: var(--gap-16);
148
- } /* Checked state */ .switch__checked_1xrrg .switch__switch_1xrrg {
148
+ } /* Checked state */ .switch__checked_1drxk .switch__switch_1drxk {
149
149
  background-color: var(--switch-checked-bg-color)
150
- } .switch__checked_1xrrg .switch__switch_1xrrg:hover {
150
+ } .switch__checked_1drxk .switch__switch_1drxk:hover {
151
151
  background-color: var(--switch-checked-hover-bg-color);
152
- } .switch__checked_1xrrg .switch__switch_1xrrg:before {
152
+ } .switch__checked_1drxk .switch__switch_1drxk:before {
153
153
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
154
154
  transform: translateX(16px);
155
- } /* Disabled state */ .switch__disabled_1xrrg {
155
+ } /* Disabled state */ .switch__disabled_1drxk {
156
156
  cursor: var(--disabled-cursor);
157
- } .switch__disabled_1xrrg .switch__switch_1xrrg {
157
+ } .switch__disabled_1drxk .switch__switch_1drxk {
158
158
  background-color: var(--switch-disabled-bg-color)
159
- } .switch__disabled_1xrrg .switch__switch_1xrrg:before {
159
+ } .switch__disabled_1drxk .switch__switch_1drxk:before {
160
160
  background-color: var(--switch-icon-disabled-color);
161
- } .switch__disabled_1xrrg.switch__checked_1xrrg .switch__switch_1xrrg {
161
+ } .switch__disabled_1drxk.switch__checked_1drxk .switch__switch_1drxk {
162
162
  background-color: var(--switch-disabled-checked-bg-color);
163
- } .switch__disabled_1xrrg .switch__label_1xrrg {
163
+ } .switch__disabled_1drxk .switch__label_1drxk {
164
164
  color: var(--switch-disabled-color);
165
- } .switch__disabled_1xrrg .switch__hint_1xrrg {
165
+ } .switch__disabled_1drxk .switch__hint_1drxk {
166
166
  color: var(--switch-disabled-color);
167
- } /* Focused state */ .switch__focused_1xrrg .switch__switch_1xrrg {
167
+ } /* Focused state */ .switch__focused_1drxk .switch__switch_1drxk {
168
168
  outline: 2px solid var(--focus-color);
169
169
  outline-offset: 2px;
170
170
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-switch",
3
- "version": "4.3.1",
3
+ "version": "4.3.2",
4
4
  "description": "",
5
5
  "gitHead": "f054fef20200664c65e2501ef1f916c555cdf05d",
6
6
  "keywords": [],
@@ -16,11 +16,11 @@
16
16
  },
17
17
  "dependencies": {
18
18
  "@alfalab/hooks": "^1.13.0",
19
- "@alfalab/core-components-shared": "^0.12.1",
19
+ "@alfalab/core-components-shared": "^0.13.0",
20
20
  "classnames": "^2.3.1",
21
21
  "react-merge-refs": "^1.1.0",
22
22
  "tslib": "^2.4.0"
23
23
  },
24
- "themesVersion": "13.2.0",
25
- "varsVersion": "9.13.0"
24
+ "themesVersion": "13.4.0",
25
+ "varsVersion": "9.13.1"
26
26
  }