@alfalab/core-components-switch 4.2.2 → 4.2.3

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 (9) hide show
  1. package/Component.js +2 -1
  2. package/cssm/Component.js +1 -0
  3. package/esm/Component.js +2 -1
  4. package/esm/index.css +28 -28
  5. package/index.css +28 -28
  6. package/modern/Component.js +2 -1
  7. package/modern/index.css +28 -28
  8. package/package.json +1 -1
  9. package/src/Component.tsx +2 -0
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_6y8qd","start":"switch__start_6y8qd","center":"switch__center_6y8qd","addons":"switch__addons_6y8qd","block":"switch__block_6y8qd","switch":"switch__switch_6y8qd","content":"switch__content_6y8qd","label":"switch__label_6y8qd","errorMessage":"switch__errorMessage_6y8qd","hint":"switch__hint_6y8qd","reversed":"switch__reversed_6y8qd","checked":"switch__checked_6y8qd","disabled":"switch__disabled_6y8qd","focused":"switch__focused_6y8qd"};
18
+ var styles = {"component":"switch__component_1og9s","start":"switch__start_1og9s","center":"switch__center_1og9s","addons":"switch__addons_1og9s","block":"switch__block_1og9s","switch":"switch__switch_1og9s","content":"switch__content_1og9s","label":"switch__label_1og9s","errorMessage":"switch__errorMessage_1og9s","hint":"switch__hint_1og9s","reversed":"switch__reversed_1og9s","checked":"switch__checked_1og9s","disabled":"switch__disabled_1og9s","focused":"switch__focused_1og9s"};
19
19
  require('./index.css')
20
20
 
21
21
  var Switch = React.forwardRef(function (_a, ref) {
@@ -46,5 +46,6 @@ var Switch = React.forwardRef(function (_a, ref) {
46
46
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
47
47
  React__default.default.createElement("span", { className: styles.addons, onClick: coreComponentsShared.dom.preventDefault }, addons))));
48
48
  });
49
+ Switch.displayName = 'Switch';
49
50
 
50
51
  exports.Switch = Switch;
package/cssm/Component.js CHANGED
@@ -45,5 +45,6 @@ var Switch = React.forwardRef(function (_a, ref) {
45
45
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
46
46
  React__default.default.createElement("span", { className: styles__default.default.addons, onClick: coreComponentsShared.dom.preventDefault }, addons))));
47
47
  });
48
+ Switch.displayName = 'Switch';
48
49
 
49
50
  exports.Switch = Switch;
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_6y8qd","start":"switch__start_6y8qd","center":"switch__center_6y8qd","addons":"switch__addons_6y8qd","block":"switch__block_6y8qd","switch":"switch__switch_6y8qd","content":"switch__content_6y8qd","label":"switch__label_6y8qd","errorMessage":"switch__errorMessage_6y8qd","hint":"switch__hint_6y8qd","reversed":"switch__reversed_6y8qd","checked":"switch__checked_6y8qd","disabled":"switch__disabled_6y8qd","focused":"switch__focused_6y8qd"};
8
+ var styles = {"component":"switch__component_1og9s","start":"switch__start_1og9s","center":"switch__center_1og9s","addons":"switch__addons_1og9s","block":"switch__block_1og9s","switch":"switch__switch_1og9s","content":"switch__content_1og9s","label":"switch__label_1og9s","errorMessage":"switch__errorMessage_1og9s","hint":"switch__hint_1og9s","reversed":"switch__reversed_1og9s","checked":"switch__checked_1og9s","disabled":"switch__disabled_1og9s","focused":"switch__focused_1og9s"};
9
9
  require('./index.css')
10
10
 
11
11
  var Switch = forwardRef(function (_a, ref) {
@@ -36,5 +36,6 @@ var Switch = forwardRef(function (_a, ref) {
36
36
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
37
37
  React.createElement("span", { className: styles.addons, onClick: dom.preventDefault }, addons))));
38
38
  });
39
+ Switch.displayName = 'Switch';
39
40
 
40
41
  export { Switch };
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1j6ih */
1
+ /* hash: gt1on */
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-border-link: #2288fa;
@@ -57,7 +57,7 @@
57
57
  /* icon */
58
58
  --switch-icon-color: var(--color-static-neutral-0);
59
59
  --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
60
- } .switch__component_6y8qd {
60
+ } .switch__component_1og9s {
61
61
  display: inline-flex;
62
62
  align-items: flex-start;
63
63
  margin: 0;
@@ -65,20 +65,20 @@
65
65
  border: 0;
66
66
  cursor: pointer;
67
67
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
68
- } .switch__component_6y8qd input {
68
+ } .switch__component_1og9s input {
69
69
  opacity: 0;
70
70
  position: absolute;
71
- } .switch__start_6y8qd {
71
+ } .switch__start_1og9s {
72
72
  align-items: flex-start;
73
- } .switch__center_6y8qd {
73
+ } .switch__center_1og9s {
74
74
  align-items: center;
75
- } .switch__addons_6y8qd {
75
+ } .switch__addons_1og9s {
76
76
  margin-left: auto;
77
77
  padding-left: var(--gap-m);
78
78
  line-height: 24px;
79
- } .switch__block_6y8qd {
79
+ } .switch__block_1og9s {
80
80
  width: 100%;
81
- } .switch__switch_6y8qd {
81
+ } .switch__switch_1og9s {
82
82
  position: relative;
83
83
  border-radius: var(--border-radius-xl);
84
84
  width: 36px;
@@ -89,9 +89,9 @@
89
89
  border: 2px solid var(--switch-border-color);
90
90
  transition: background-color 0.2s ease, border-color 0.2s ease;
91
91
  box-sizing: border-box
92
- } .switch__switch_6y8qd:hover {
92
+ } .switch__switch_1og9s:hover {
93
93
  background-color: var(--switch-hover-bg-color);
94
- } .switch__switch_6y8qd:before {
94
+ } .switch__switch_1og9s:before {
95
95
  content: '';
96
96
  position: absolute;
97
97
  top: 0;
@@ -103,58 +103,58 @@
103
103
  background-color: var(--switch-icon-color);
104
104
  box-sizing: border-box;
105
105
  transition: transform 0.2s ease;
106
- } .switch__content_6y8qd {
106
+ } .switch__content_1og9s {
107
107
  margin-left: var(--gap-s);
108
108
  flex-grow: 1;
109
- } .switch__label_6y8qd {
109
+ } .switch__label_1og9s {
110
110
  font-size: 16px;
111
111
  line-height: 24px;
112
112
  font-weight: 400;
113
113
  display: block;
114
114
  color: var(--switch-label-color);
115
- } .switch__label_6y8qd:not(:only-child) {
115
+ } .switch__label_1og9s:not(:only-child) {
116
116
  margin-bottom: var(--gap-2xs);
117
- } .switch__errorMessage_6y8qd {
117
+ } .switch__errorMessage_1og9s {
118
118
  font-size: 14px;
119
119
  line-height: 18px;
120
120
  font-weight: 400;
121
121
  color: var(--switch-error-color);
122
- } .switch__hint_6y8qd {
122
+ } .switch__hint_1og9s {
123
123
  font-size: 14px;
124
124
  line-height: 18px;
125
125
  font-weight: 400;
126
126
  display: block;
127
127
  color: var(--switch-hint-color);
128
- } /* Reversed state */ .switch__component_6y8qd.switch__reversed_6y8qd {
128
+ } /* Reversed state */ .switch__component_1og9s.switch__reversed_1og9s {
129
129
  flex-direction: row-reverse;
130
- } .switch__reversed_6y8qd .switch__content_6y8qd {
130
+ } .switch__reversed_1og9s .switch__content_1og9s {
131
131
  margin-right: var(--gap-m);
132
132
  margin-left: 0;
133
- } .switch__reversed_6y8qd .switch__addons_6y8qd {
133
+ } .switch__reversed_1og9s .switch__addons_1og9s {
134
134
  margin-left: 0;
135
135
  padding-left: 0;
136
136
  margin-right: auto;
137
137
  padding-right: var(--gap-m);
138
- } /* Checked state */ .switch__checked_6y8qd .switch__switch_6y8qd {
138
+ } /* Checked state */ .switch__checked_1og9s .switch__switch_1og9s {
139
139
  background-color: var(--switch-checked-bg-color)
140
- } .switch__checked_6y8qd .switch__switch_6y8qd:hover {
140
+ } .switch__checked_1og9s .switch__switch_1og9s:hover {
141
141
  background-color: var(--switch-checked-hover-bg-color);
142
- } .switch__checked_6y8qd .switch__switch_6y8qd:before {
142
+ } .switch__checked_1og9s .switch__switch_1og9s:before {
143
143
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
144
144
  transform: translateX(16px);
145
- } /* Disabled state */ .switch__disabled_6y8qd {
145
+ } /* Disabled state */ .switch__disabled_1og9s {
146
146
  cursor: var(--disabled-cursor);
147
- } .switch__disabled_6y8qd .switch__switch_6y8qd {
147
+ } .switch__disabled_1og9s .switch__switch_1og9s {
148
148
  background-color: var(--switch-disabled-bg-color)
149
- } .switch__disabled_6y8qd .switch__switch_6y8qd:before {
149
+ } .switch__disabled_1og9s .switch__switch_1og9s:before {
150
150
  background-color: var(--switch-icon-disabled-color);
151
- } .switch__disabled_6y8qd.switch__checked_6y8qd .switch__switch_6y8qd {
151
+ } .switch__disabled_1og9s.switch__checked_1og9s .switch__switch_1og9s {
152
152
  background-color: var(--switch-disabled-checked-bg-color);
153
- } .switch__disabled_6y8qd .switch__label_6y8qd {
153
+ } .switch__disabled_1og9s .switch__label_1og9s {
154
154
  color: var(--switch-disabled-color);
155
- } .switch__disabled_6y8qd .switch__hint_6y8qd {
155
+ } .switch__disabled_1og9s .switch__hint_1og9s {
156
156
  color: var(--switch-disabled-color);
157
- } /* Focused state */ .switch__focused_6y8qd .switch__switch_6y8qd {
157
+ } /* Focused state */ .switch__focused_1og9s .switch__switch_1og9s {
158
158
  outline: 2px solid var(--focus-color);
159
159
  outline-offset: 2px;
160
160
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1j6ih */
1
+ /* hash: gt1on */
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-border-link: #2288fa;
@@ -57,7 +57,7 @@
57
57
  /* icon */
58
58
  --switch-icon-color: var(--color-static-neutral-0);
59
59
  --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
60
- } .switch__component_6y8qd {
60
+ } .switch__component_1og9s {
61
61
  display: inline-flex;
62
62
  align-items: flex-start;
63
63
  margin: 0;
@@ -65,20 +65,20 @@
65
65
  border: 0;
66
66
  cursor: pointer;
67
67
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
68
- } .switch__component_6y8qd input {
68
+ } .switch__component_1og9s input {
69
69
  opacity: 0;
70
70
  position: absolute;
71
- } .switch__start_6y8qd {
71
+ } .switch__start_1og9s {
72
72
  align-items: flex-start;
73
- } .switch__center_6y8qd {
73
+ } .switch__center_1og9s {
74
74
  align-items: center;
75
- } .switch__addons_6y8qd {
75
+ } .switch__addons_1og9s {
76
76
  margin-left: auto;
77
77
  padding-left: var(--gap-m);
78
78
  line-height: 24px;
79
- } .switch__block_6y8qd {
79
+ } .switch__block_1og9s {
80
80
  width: 100%;
81
- } .switch__switch_6y8qd {
81
+ } .switch__switch_1og9s {
82
82
  position: relative;
83
83
  border-radius: var(--border-radius-xl);
84
84
  width: 36px;
@@ -89,9 +89,9 @@
89
89
  border: 2px solid var(--switch-border-color);
90
90
  transition: background-color 0.2s ease, border-color 0.2s ease;
91
91
  box-sizing: border-box
92
- } .switch__switch_6y8qd:hover {
92
+ } .switch__switch_1og9s:hover {
93
93
  background-color: var(--switch-hover-bg-color);
94
- } .switch__switch_6y8qd:before {
94
+ } .switch__switch_1og9s:before {
95
95
  content: '';
96
96
  position: absolute;
97
97
  top: 0;
@@ -103,58 +103,58 @@
103
103
  background-color: var(--switch-icon-color);
104
104
  box-sizing: border-box;
105
105
  transition: transform 0.2s ease;
106
- } .switch__content_6y8qd {
106
+ } .switch__content_1og9s {
107
107
  margin-left: var(--gap-s);
108
108
  flex-grow: 1;
109
- } .switch__label_6y8qd {
109
+ } .switch__label_1og9s {
110
110
  font-size: 16px;
111
111
  line-height: 24px;
112
112
  font-weight: 400;
113
113
  display: block;
114
114
  color: var(--switch-label-color);
115
- } .switch__label_6y8qd:not(:only-child) {
115
+ } .switch__label_1og9s:not(:only-child) {
116
116
  margin-bottom: var(--gap-2xs);
117
- } .switch__errorMessage_6y8qd {
117
+ } .switch__errorMessage_1og9s {
118
118
  font-size: 14px;
119
119
  line-height: 18px;
120
120
  font-weight: 400;
121
121
  color: var(--switch-error-color);
122
- } .switch__hint_6y8qd {
122
+ } .switch__hint_1og9s {
123
123
  font-size: 14px;
124
124
  line-height: 18px;
125
125
  font-weight: 400;
126
126
  display: block;
127
127
  color: var(--switch-hint-color);
128
- } /* Reversed state */ .switch__component_6y8qd.switch__reversed_6y8qd {
128
+ } /* Reversed state */ .switch__component_1og9s.switch__reversed_1og9s {
129
129
  flex-direction: row-reverse;
130
- } .switch__reversed_6y8qd .switch__content_6y8qd {
130
+ } .switch__reversed_1og9s .switch__content_1og9s {
131
131
  margin-right: var(--gap-m);
132
132
  margin-left: 0;
133
- } .switch__reversed_6y8qd .switch__addons_6y8qd {
133
+ } .switch__reversed_1og9s .switch__addons_1og9s {
134
134
  margin-left: 0;
135
135
  padding-left: 0;
136
136
  margin-right: auto;
137
137
  padding-right: var(--gap-m);
138
- } /* Checked state */ .switch__checked_6y8qd .switch__switch_6y8qd {
138
+ } /* Checked state */ .switch__checked_1og9s .switch__switch_1og9s {
139
139
  background-color: var(--switch-checked-bg-color)
140
- } .switch__checked_6y8qd .switch__switch_6y8qd:hover {
140
+ } .switch__checked_1og9s .switch__switch_1og9s:hover {
141
141
  background-color: var(--switch-checked-hover-bg-color);
142
- } .switch__checked_6y8qd .switch__switch_6y8qd:before {
142
+ } .switch__checked_1og9s .switch__switch_1og9s:before {
143
143
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
144
144
  transform: translateX(16px);
145
- } /* Disabled state */ .switch__disabled_6y8qd {
145
+ } /* Disabled state */ .switch__disabled_1og9s {
146
146
  cursor: var(--disabled-cursor);
147
- } .switch__disabled_6y8qd .switch__switch_6y8qd {
147
+ } .switch__disabled_1og9s .switch__switch_1og9s {
148
148
  background-color: var(--switch-disabled-bg-color)
149
- } .switch__disabled_6y8qd .switch__switch_6y8qd:before {
149
+ } .switch__disabled_1og9s .switch__switch_1og9s:before {
150
150
  background-color: var(--switch-icon-disabled-color);
151
- } .switch__disabled_6y8qd.switch__checked_6y8qd .switch__switch_6y8qd {
151
+ } .switch__disabled_1og9s.switch__checked_1og9s .switch__switch_1og9s {
152
152
  background-color: var(--switch-disabled-checked-bg-color);
153
- } .switch__disabled_6y8qd .switch__label_6y8qd {
153
+ } .switch__disabled_1og9s .switch__label_1og9s {
154
154
  color: var(--switch-disabled-color);
155
- } .switch__disabled_6y8qd .switch__hint_6y8qd {
155
+ } .switch__disabled_1og9s .switch__hint_1og9s {
156
156
  color: var(--switch-disabled-color);
157
- } /* Focused state */ .switch__focused_6y8qd .switch__switch_6y8qd {
157
+ } /* Focused state */ .switch__focused_1og9s .switch__switch_1og9s {
158
158
  outline: 2px solid var(--focus-color);
159
159
  outline-offset: 2px;
160
160
  }
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_6y8qd","start":"switch__start_6y8qd","center":"switch__center_6y8qd","addons":"switch__addons_6y8qd","block":"switch__block_6y8qd","switch":"switch__switch_6y8qd","content":"switch__content_6y8qd","label":"switch__label_6y8qd","errorMessage":"switch__errorMessage_6y8qd","hint":"switch__hint_6y8qd","reversed":"switch__reversed_6y8qd","checked":"switch__checked_6y8qd","disabled":"switch__disabled_6y8qd","focused":"switch__focused_6y8qd"};
7
+ const styles = {"component":"switch__component_1og9s","start":"switch__start_1og9s","center":"switch__center_1og9s","addons":"switch__addons_1og9s","block":"switch__block_1og9s","switch":"switch__switch_1og9s","content":"switch__content_1og9s","label":"switch__label_1og9s","errorMessage":"switch__errorMessage_1og9s","hint":"switch__hint_1og9s","reversed":"switch__reversed_1og9s","checked":"switch__checked_1og9s","disabled":"switch__disabled_1og9s","focused":"switch__focused_1og9s"};
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) => {
@@ -33,5 +33,6 @@ const Switch = forwardRef(({ reversed = false, checked = false, align = 'start',
33
33
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
34
34
  React.createElement("span", { className: styles.addons, onClick: dom.preventDefault }, addons))));
35
35
  });
36
+ Switch.displayName = 'Switch';
36
37
 
37
38
  export { Switch };
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1j6ih */
1
+ /* hash: gt1on */
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-border-link: #2288fa;
@@ -57,7 +57,7 @@
57
57
  /* icon */
58
58
  --switch-icon-color: var(--color-static-neutral-0);
59
59
  --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
60
- } .switch__component_6y8qd {
60
+ } .switch__component_1og9s {
61
61
  display: inline-flex;
62
62
  align-items: flex-start;
63
63
  margin: 0;
@@ -65,20 +65,20 @@
65
65
  border: 0;
66
66
  cursor: pointer;
67
67
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
68
- } .switch__component_6y8qd input {
68
+ } .switch__component_1og9s input {
69
69
  opacity: 0;
70
70
  position: absolute;
71
- } .switch__start_6y8qd {
71
+ } .switch__start_1og9s {
72
72
  align-items: flex-start;
73
- } .switch__center_6y8qd {
73
+ } .switch__center_1og9s {
74
74
  align-items: center;
75
- } .switch__addons_6y8qd {
75
+ } .switch__addons_1og9s {
76
76
  margin-left: auto;
77
77
  padding-left: var(--gap-m);
78
78
  line-height: 24px;
79
- } .switch__block_6y8qd {
79
+ } .switch__block_1og9s {
80
80
  width: 100%;
81
- } .switch__switch_6y8qd {
81
+ } .switch__switch_1og9s {
82
82
  position: relative;
83
83
  border-radius: var(--border-radius-xl);
84
84
  width: 36px;
@@ -89,9 +89,9 @@
89
89
  border: 2px solid var(--switch-border-color);
90
90
  transition: background-color 0.2s ease, border-color 0.2s ease;
91
91
  box-sizing: border-box
92
- } .switch__switch_6y8qd:hover {
92
+ } .switch__switch_1og9s:hover {
93
93
  background-color: var(--switch-hover-bg-color);
94
- } .switch__switch_6y8qd:before {
94
+ } .switch__switch_1og9s:before {
95
95
  content: '';
96
96
  position: absolute;
97
97
  top: 0;
@@ -103,58 +103,58 @@
103
103
  background-color: var(--switch-icon-color);
104
104
  box-sizing: border-box;
105
105
  transition: transform 0.2s ease;
106
- } .switch__content_6y8qd {
106
+ } .switch__content_1og9s {
107
107
  margin-left: var(--gap-s);
108
108
  flex-grow: 1;
109
- } .switch__label_6y8qd {
109
+ } .switch__label_1og9s {
110
110
  font-size: 16px;
111
111
  line-height: 24px;
112
112
  font-weight: 400;
113
113
  display: block;
114
114
  color: var(--switch-label-color);
115
- } .switch__label_6y8qd:not(:only-child) {
115
+ } .switch__label_1og9s:not(:only-child) {
116
116
  margin-bottom: var(--gap-2xs);
117
- } .switch__errorMessage_6y8qd {
117
+ } .switch__errorMessage_1og9s {
118
118
  font-size: 14px;
119
119
  line-height: 18px;
120
120
  font-weight: 400;
121
121
  color: var(--switch-error-color);
122
- } .switch__hint_6y8qd {
122
+ } .switch__hint_1og9s {
123
123
  font-size: 14px;
124
124
  line-height: 18px;
125
125
  font-weight: 400;
126
126
  display: block;
127
127
  color: var(--switch-hint-color);
128
- } /* Reversed state */ .switch__component_6y8qd.switch__reversed_6y8qd {
128
+ } /* Reversed state */ .switch__component_1og9s.switch__reversed_1og9s {
129
129
  flex-direction: row-reverse;
130
- } .switch__reversed_6y8qd .switch__content_6y8qd {
130
+ } .switch__reversed_1og9s .switch__content_1og9s {
131
131
  margin-right: var(--gap-m);
132
132
  margin-left: 0;
133
- } .switch__reversed_6y8qd .switch__addons_6y8qd {
133
+ } .switch__reversed_1og9s .switch__addons_1og9s {
134
134
  margin-left: 0;
135
135
  padding-left: 0;
136
136
  margin-right: auto;
137
137
  padding-right: var(--gap-m);
138
- } /* Checked state */ .switch__checked_6y8qd .switch__switch_6y8qd {
138
+ } /* Checked state */ .switch__checked_1og9s .switch__switch_1og9s {
139
139
  background-color: var(--switch-checked-bg-color)
140
- } .switch__checked_6y8qd .switch__switch_6y8qd:hover {
140
+ } .switch__checked_1og9s .switch__switch_1og9s:hover {
141
141
  background-color: var(--switch-checked-hover-bg-color);
142
- } .switch__checked_6y8qd .switch__switch_6y8qd:before {
142
+ } .switch__checked_1og9s .switch__switch_1og9s:before {
143
143
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
144
144
  transform: translateX(16px);
145
- } /* Disabled state */ .switch__disabled_6y8qd {
145
+ } /* Disabled state */ .switch__disabled_1og9s {
146
146
  cursor: var(--disabled-cursor);
147
- } .switch__disabled_6y8qd .switch__switch_6y8qd {
147
+ } .switch__disabled_1og9s .switch__switch_1og9s {
148
148
  background-color: var(--switch-disabled-bg-color)
149
- } .switch__disabled_6y8qd .switch__switch_6y8qd:before {
149
+ } .switch__disabled_1og9s .switch__switch_1og9s:before {
150
150
  background-color: var(--switch-icon-disabled-color);
151
- } .switch__disabled_6y8qd.switch__checked_6y8qd .switch__switch_6y8qd {
151
+ } .switch__disabled_1og9s.switch__checked_1og9s .switch__switch_1og9s {
152
152
  background-color: var(--switch-disabled-checked-bg-color);
153
- } .switch__disabled_6y8qd .switch__label_6y8qd {
153
+ } .switch__disabled_1og9s .switch__label_1og9s {
154
154
  color: var(--switch-disabled-color);
155
- } .switch__disabled_6y8qd .switch__hint_6y8qd {
155
+ } .switch__disabled_1og9s .switch__hint_1og9s {
156
156
  color: var(--switch-disabled-color);
157
- } /* Focused state */ .switch__focused_6y8qd .switch__switch_6y8qd {
157
+ } /* Focused state */ .switch__focused_1og9s .switch__switch_1og9s {
158
158
  outline: 2px solid var(--focus-color);
159
159
  outline-offset: 2px;
160
160
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-switch",
3
- "version": "4.2.2",
3
+ "version": "4.2.3",
4
4
  "description": "",
5
5
  "gitHead": "f054fef20200664c65e2501ef1f916c555cdf05d",
6
6
  "keywords": [],
package/src/Component.tsx CHANGED
@@ -163,3 +163,5 @@ export const Switch = forwardRef<HTMLLabelElement, SwitchProps>(
163
163
  );
164
164
  },
165
165
  );
166
+
167
+ Switch.displayName = 'Switch';