@alfalab/core-components-switch 4.1.0 → 4.1.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.
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_pizcd","start":"switch__start_pizcd","center":"switch__center_pizcd","addons":"switch__addons_pizcd","block":"switch__block_pizcd","switch":"switch__switch_pizcd","content":"switch__content_pizcd","label":"switch__label_pizcd","hint":"switch__hint_pizcd","reversed":"switch__reversed_pizcd","checked":"switch__checked_pizcd","disabled":"switch__disabled_pizcd","focused":"switch__focused_pizcd"};
18
+ var styles = {"component":"switch__component_1n62k","start":"switch__start_1n62k","center":"switch__center_1n62k","addons":"switch__addons_1n62k","block":"switch__block_1n62k","switch":"switch__switch_1n62k","content":"switch__content_1n62k","label":"switch__label_1n62k","hint":"switch__hint_1n62k","reversed":"switch__reversed_1n62k","checked":"switch__checked_1n62k","disabled":"switch__disabled_1n62k","focused":"switch__focused_1n62k"};
19
19
  require('./index.css')
20
20
 
21
21
  var Switch = React.forwardRef(function (_a, ref) {
@@ -93,9 +93,9 @@
93
93
  position: absolute;
94
94
  top: 0;
95
95
  left: 0;
96
+ bottom: 0;
97
+ right: 16px;
96
98
  display: block;
97
- width: 16px;
98
- height: 16px;
99
99
  border-radius: var(--border-radius-circle);
100
100
  background-color: var(--switch-icon-color);
101
101
  box-sizing: border-box;
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_pizcd","start":"switch__start_pizcd","center":"switch__center_pizcd","addons":"switch__addons_pizcd","block":"switch__block_pizcd","switch":"switch__switch_pizcd","content":"switch__content_pizcd","label":"switch__label_pizcd","hint":"switch__hint_pizcd","reversed":"switch__reversed_pizcd","checked":"switch__checked_pizcd","disabled":"switch__disabled_pizcd","focused":"switch__focused_pizcd"};
8
+ var styles = {"component":"switch__component_1n62k","start":"switch__start_1n62k","center":"switch__center_1n62k","addons":"switch__addons_1n62k","block":"switch__block_1n62k","switch":"switch__switch_1n62k","content":"switch__content_1n62k","label":"switch__label_1n62k","hint":"switch__hint_1n62k","reversed":"switch__reversed_1n62k","checked":"switch__checked_1n62k","disabled":"switch__disabled_1n62k","focused":"switch__focused_1n62k"};
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: s9zic */
1
+ /* hash: 1rt06 */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-link: #2288fa;
@@ -55,7 +55,7 @@
55
55
  /* icon */
56
56
  --switch-icon-color: var(--color-static-neutral-1500-inverted);
57
57
  --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
58
- } .switch__component_pizcd {
58
+ } .switch__component_1n62k {
59
59
  display: inline-flex;
60
60
  align-items: flex-start;
61
61
  margin: 0;
@@ -63,20 +63,20 @@
63
63
  border: 0;
64
64
  cursor: pointer;
65
65
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
66
- } .switch__component_pizcd input {
66
+ } .switch__component_1n62k input {
67
67
  opacity: 0;
68
68
  position: absolute;
69
- } .switch__start_pizcd {
69
+ } .switch__start_1n62k {
70
70
  align-items: flex-start;
71
- } .switch__center_pizcd {
71
+ } .switch__center_1n62k {
72
72
  align-items: center;
73
- } .switch__addons_pizcd {
73
+ } .switch__addons_1n62k {
74
74
  margin-left: auto;
75
75
  padding-left: var(--gap-m);
76
76
  line-height: 24px;
77
- } .switch__block_pizcd {
77
+ } .switch__block_1n62k {
78
78
  width: 100%;
79
- } .switch__switch_pizcd {
79
+ } .switch__switch_1n62k {
80
80
  position: relative;
81
81
  border-radius: var(--border-radius-xl);
82
82
  width: 36px;
@@ -87,67 +87,67 @@
87
87
  border: 2px solid var(--switch-border-color);
88
88
  transition: background-color 0.2s ease, border-color 0.2s ease;
89
89
  box-sizing: border-box
90
- } .switch__switch_pizcd:hover {
90
+ } .switch__switch_1n62k:hover {
91
91
  background-color: var(--switch-hover-bg-color);
92
- } .switch__switch_pizcd:before {
92
+ } .switch__switch_1n62k:before {
93
93
  content: '';
94
94
  position: absolute;
95
95
  top: 0;
96
96
  left: 0;
97
+ bottom: 0;
98
+ right: 16px;
97
99
  display: block;
98
- width: 16px;
99
- height: 16px;
100
100
  border-radius: var(--border-radius-circle);
101
101
  background-color: var(--switch-icon-color);
102
102
  box-sizing: border-box;
103
103
  transition: transform 0.2s ease;
104
- } .switch__content_pizcd {
104
+ } .switch__content_1n62k {
105
105
  margin-left: var(--gap-s);
106
106
  flex-grow: 1;
107
- } .switch__label_pizcd {
107
+ } .switch__label_1n62k {
108
108
  font-size: 16px;
109
109
  line-height: 24px;
110
110
  font-weight: 400;
111
111
  display: block;
112
112
  color: var(--switch-label-color);
113
- } .switch__label_pizcd:not(:only-child) {
113
+ } .switch__label_1n62k:not(:only-child) {
114
114
  margin-bottom: var(--gap-2xs);
115
- } .switch__hint_pizcd {
115
+ } .switch__hint_1n62k {
116
116
  font-size: 14px;
117
117
  line-height: 18px;
118
118
  font-weight: 400;
119
119
  display: block;
120
120
  color: var(--switch-hint-color);
121
- } /* Reversed state */ .switch__component_pizcd.switch__reversed_pizcd {
121
+ } /* Reversed state */ .switch__component_1n62k.switch__reversed_1n62k {
122
122
  flex-direction: row-reverse;
123
- } .switch__reversed_pizcd .switch__content_pizcd {
123
+ } .switch__reversed_1n62k .switch__content_1n62k {
124
124
  margin-right: var(--gap-m);
125
125
  margin-left: 0;
126
- } .switch__reversed_pizcd .switch__addons_pizcd {
126
+ } .switch__reversed_1n62k .switch__addons_1n62k {
127
127
  margin-left: 0;
128
128
  padding-left: 0;
129
129
  margin-right: auto;
130
130
  padding-right: var(--gap-m);
131
- } /* Checked state */ .switch__checked_pizcd .switch__switch_pizcd {
131
+ } /* Checked state */ .switch__checked_1n62k .switch__switch_1n62k {
132
132
  background-color: var(--switch-checked-bg-color)
133
- } .switch__checked_pizcd .switch__switch_pizcd:hover {
133
+ } .switch__checked_1n62k .switch__switch_1n62k:hover {
134
134
  background-color: var(--switch-checked-hover-bg-color);
135
- } .switch__checked_pizcd .switch__switch_pizcd:before {
135
+ } .switch__checked_1n62k .switch__switch_1n62k:before {
136
136
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
137
137
  transform: translateX(16px);
138
- } /* Disabled state */ .switch__disabled_pizcd {
138
+ } /* Disabled state */ .switch__disabled_1n62k {
139
139
  cursor: var(--disabled-cursor);
140
- } .switch__disabled_pizcd .switch__switch_pizcd {
140
+ } .switch__disabled_1n62k .switch__switch_1n62k {
141
141
  background-color: var(--switch-disabled-bg-color)
142
- } .switch__disabled_pizcd .switch__switch_pizcd:before {
142
+ } .switch__disabled_1n62k .switch__switch_1n62k:before {
143
143
  background-color: var(--switch-icon-disabled-color);
144
- } .switch__disabled_pizcd.switch__checked_pizcd .switch__switch_pizcd {
144
+ } .switch__disabled_1n62k.switch__checked_1n62k .switch__switch_1n62k {
145
145
  background-color: var(--switch-disabled-checked-bg-color);
146
- } .switch__disabled_pizcd .switch__label_pizcd {
146
+ } .switch__disabled_1n62k .switch__label_1n62k {
147
147
  color: var(--switch-disabled-color);
148
- } .switch__disabled_pizcd .switch__hint_pizcd {
148
+ } .switch__disabled_1n62k .switch__hint_1n62k {
149
149
  color: var(--switch-disabled-color);
150
- } /* Focused state */ .switch__focused_pizcd .switch__switch_pizcd {
150
+ } /* Focused state */ .switch__focused_1n62k .switch__switch_1n62k {
151
151
  outline: 2px solid var(--focus-color);
152
152
  outline-offset: 2px;
153
153
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: s9zic */
1
+ /* hash: 1rt06 */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-link: #2288fa;
@@ -55,7 +55,7 @@
55
55
  /* icon */
56
56
  --switch-icon-color: var(--color-static-neutral-1500-inverted);
57
57
  --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
58
- } .switch__component_pizcd {
58
+ } .switch__component_1n62k {
59
59
  display: inline-flex;
60
60
  align-items: flex-start;
61
61
  margin: 0;
@@ -63,20 +63,20 @@
63
63
  border: 0;
64
64
  cursor: pointer;
65
65
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
66
- } .switch__component_pizcd input {
66
+ } .switch__component_1n62k input {
67
67
  opacity: 0;
68
68
  position: absolute;
69
- } .switch__start_pizcd {
69
+ } .switch__start_1n62k {
70
70
  align-items: flex-start;
71
- } .switch__center_pizcd {
71
+ } .switch__center_1n62k {
72
72
  align-items: center;
73
- } .switch__addons_pizcd {
73
+ } .switch__addons_1n62k {
74
74
  margin-left: auto;
75
75
  padding-left: var(--gap-m);
76
76
  line-height: 24px;
77
- } .switch__block_pizcd {
77
+ } .switch__block_1n62k {
78
78
  width: 100%;
79
- } .switch__switch_pizcd {
79
+ } .switch__switch_1n62k {
80
80
  position: relative;
81
81
  border-radius: var(--border-radius-xl);
82
82
  width: 36px;
@@ -87,67 +87,67 @@
87
87
  border: 2px solid var(--switch-border-color);
88
88
  transition: background-color 0.2s ease, border-color 0.2s ease;
89
89
  box-sizing: border-box
90
- } .switch__switch_pizcd:hover {
90
+ } .switch__switch_1n62k:hover {
91
91
  background-color: var(--switch-hover-bg-color);
92
- } .switch__switch_pizcd:before {
92
+ } .switch__switch_1n62k:before {
93
93
  content: '';
94
94
  position: absolute;
95
95
  top: 0;
96
96
  left: 0;
97
+ bottom: 0;
98
+ right: 16px;
97
99
  display: block;
98
- width: 16px;
99
- height: 16px;
100
100
  border-radius: var(--border-radius-circle);
101
101
  background-color: var(--switch-icon-color);
102
102
  box-sizing: border-box;
103
103
  transition: transform 0.2s ease;
104
- } .switch__content_pizcd {
104
+ } .switch__content_1n62k {
105
105
  margin-left: var(--gap-s);
106
106
  flex-grow: 1;
107
- } .switch__label_pizcd {
107
+ } .switch__label_1n62k {
108
108
  font-size: 16px;
109
109
  line-height: 24px;
110
110
  font-weight: 400;
111
111
  display: block;
112
112
  color: var(--switch-label-color);
113
- } .switch__label_pizcd:not(:only-child) {
113
+ } .switch__label_1n62k:not(:only-child) {
114
114
  margin-bottom: var(--gap-2xs);
115
- } .switch__hint_pizcd {
115
+ } .switch__hint_1n62k {
116
116
  font-size: 14px;
117
117
  line-height: 18px;
118
118
  font-weight: 400;
119
119
  display: block;
120
120
  color: var(--switch-hint-color);
121
- } /* Reversed state */ .switch__component_pizcd.switch__reversed_pizcd {
121
+ } /* Reversed state */ .switch__component_1n62k.switch__reversed_1n62k {
122
122
  flex-direction: row-reverse;
123
- } .switch__reversed_pizcd .switch__content_pizcd {
123
+ } .switch__reversed_1n62k .switch__content_1n62k {
124
124
  margin-right: var(--gap-m);
125
125
  margin-left: 0;
126
- } .switch__reversed_pizcd .switch__addons_pizcd {
126
+ } .switch__reversed_1n62k .switch__addons_1n62k {
127
127
  margin-left: 0;
128
128
  padding-left: 0;
129
129
  margin-right: auto;
130
130
  padding-right: var(--gap-m);
131
- } /* Checked state */ .switch__checked_pizcd .switch__switch_pizcd {
131
+ } /* Checked state */ .switch__checked_1n62k .switch__switch_1n62k {
132
132
  background-color: var(--switch-checked-bg-color)
133
- } .switch__checked_pizcd .switch__switch_pizcd:hover {
133
+ } .switch__checked_1n62k .switch__switch_1n62k:hover {
134
134
  background-color: var(--switch-checked-hover-bg-color);
135
- } .switch__checked_pizcd .switch__switch_pizcd:before {
135
+ } .switch__checked_1n62k .switch__switch_1n62k:before {
136
136
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
137
137
  transform: translateX(16px);
138
- } /* Disabled state */ .switch__disabled_pizcd {
138
+ } /* Disabled state */ .switch__disabled_1n62k {
139
139
  cursor: var(--disabled-cursor);
140
- } .switch__disabled_pizcd .switch__switch_pizcd {
140
+ } .switch__disabled_1n62k .switch__switch_1n62k {
141
141
  background-color: var(--switch-disabled-bg-color)
142
- } .switch__disabled_pizcd .switch__switch_pizcd:before {
142
+ } .switch__disabled_1n62k .switch__switch_1n62k:before {
143
143
  background-color: var(--switch-icon-disabled-color);
144
- } .switch__disabled_pizcd.switch__checked_pizcd .switch__switch_pizcd {
144
+ } .switch__disabled_1n62k.switch__checked_1n62k .switch__switch_1n62k {
145
145
  background-color: var(--switch-disabled-checked-bg-color);
146
- } .switch__disabled_pizcd .switch__label_pizcd {
146
+ } .switch__disabled_1n62k .switch__label_1n62k {
147
147
  color: var(--switch-disabled-color);
148
- } .switch__disabled_pizcd .switch__hint_pizcd {
148
+ } .switch__disabled_1n62k .switch__hint_1n62k {
149
149
  color: var(--switch-disabled-color);
150
- } /* Focused state */ .switch__focused_pizcd .switch__switch_pizcd {
150
+ } /* Focused state */ .switch__focused_1n62k .switch__switch_1n62k {
151
151
  outline: 2px solid var(--focus-color);
152
152
  outline-offset: 2px;
153
153
  }
@@ -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_pizcd","start":"switch__start_pizcd","center":"switch__center_pizcd","addons":"switch__addons_pizcd","block":"switch__block_pizcd","switch":"switch__switch_pizcd","content":"switch__content_pizcd","label":"switch__label_pizcd","hint":"switch__hint_pizcd","reversed":"switch__reversed_pizcd","checked":"switch__checked_pizcd","disabled":"switch__disabled_pizcd","focused":"switch__focused_pizcd"};
7
+ const styles = {"component":"switch__component_1n62k","start":"switch__start_1n62k","center":"switch__center_1n62k","addons":"switch__addons_1n62k","block":"switch__block_1n62k","switch":"switch__switch_1n62k","content":"switch__content_1n62k","label":"switch__label_1n62k","hint":"switch__hint_1n62k","reversed":"switch__reversed_1n62k","checked":"switch__checked_1n62k","disabled":"switch__disabled_1n62k","focused":"switch__focused_1n62k"};
8
8
  require('./index.css')
9
9
 
10
10
  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,4 +1,4 @@
1
- /* hash: s9zic */
1
+ /* hash: 1rt06 */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-link: #2288fa;
@@ -55,7 +55,7 @@
55
55
  /* icon */
56
56
  --switch-icon-color: var(--color-static-neutral-1500-inverted);
57
57
  --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
58
- } .switch__component_pizcd {
58
+ } .switch__component_1n62k {
59
59
  display: inline-flex;
60
60
  align-items: flex-start;
61
61
  margin: 0;
@@ -63,20 +63,20 @@
63
63
  border: 0;
64
64
  cursor: pointer;
65
65
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
66
- } .switch__component_pizcd input {
66
+ } .switch__component_1n62k input {
67
67
  opacity: 0;
68
68
  position: absolute;
69
- } .switch__start_pizcd {
69
+ } .switch__start_1n62k {
70
70
  align-items: flex-start;
71
- } .switch__center_pizcd {
71
+ } .switch__center_1n62k {
72
72
  align-items: center;
73
- } .switch__addons_pizcd {
73
+ } .switch__addons_1n62k {
74
74
  margin-left: auto;
75
75
  padding-left: var(--gap-m);
76
76
  line-height: 24px;
77
- } .switch__block_pizcd {
77
+ } .switch__block_1n62k {
78
78
  width: 100%;
79
- } .switch__switch_pizcd {
79
+ } .switch__switch_1n62k {
80
80
  position: relative;
81
81
  border-radius: var(--border-radius-xl);
82
82
  width: 36px;
@@ -87,67 +87,67 @@
87
87
  border: 2px solid var(--switch-border-color);
88
88
  transition: background-color 0.2s ease, border-color 0.2s ease;
89
89
  box-sizing: border-box
90
- } .switch__switch_pizcd:hover {
90
+ } .switch__switch_1n62k:hover {
91
91
  background-color: var(--switch-hover-bg-color);
92
- } .switch__switch_pizcd:before {
92
+ } .switch__switch_1n62k:before {
93
93
  content: '';
94
94
  position: absolute;
95
95
  top: 0;
96
96
  left: 0;
97
+ bottom: 0;
98
+ right: 16px;
97
99
  display: block;
98
- width: 16px;
99
- height: 16px;
100
100
  border-radius: var(--border-radius-circle);
101
101
  background-color: var(--switch-icon-color);
102
102
  box-sizing: border-box;
103
103
  transition: transform 0.2s ease;
104
- } .switch__content_pizcd {
104
+ } .switch__content_1n62k {
105
105
  margin-left: var(--gap-s);
106
106
  flex-grow: 1;
107
- } .switch__label_pizcd {
107
+ } .switch__label_1n62k {
108
108
  font-size: 16px;
109
109
  line-height: 24px;
110
110
  font-weight: 400;
111
111
  display: block;
112
112
  color: var(--switch-label-color);
113
- } .switch__label_pizcd:not(:only-child) {
113
+ } .switch__label_1n62k:not(:only-child) {
114
114
  margin-bottom: var(--gap-2xs);
115
- } .switch__hint_pizcd {
115
+ } .switch__hint_1n62k {
116
116
  font-size: 14px;
117
117
  line-height: 18px;
118
118
  font-weight: 400;
119
119
  display: block;
120
120
  color: var(--switch-hint-color);
121
- } /* Reversed state */ .switch__component_pizcd.switch__reversed_pizcd {
121
+ } /* Reversed state */ .switch__component_1n62k.switch__reversed_1n62k {
122
122
  flex-direction: row-reverse;
123
- } .switch__reversed_pizcd .switch__content_pizcd {
123
+ } .switch__reversed_1n62k .switch__content_1n62k {
124
124
  margin-right: var(--gap-m);
125
125
  margin-left: 0;
126
- } .switch__reversed_pizcd .switch__addons_pizcd {
126
+ } .switch__reversed_1n62k .switch__addons_1n62k {
127
127
  margin-left: 0;
128
128
  padding-left: 0;
129
129
  margin-right: auto;
130
130
  padding-right: var(--gap-m);
131
- } /* Checked state */ .switch__checked_pizcd .switch__switch_pizcd {
131
+ } /* Checked state */ .switch__checked_1n62k .switch__switch_1n62k {
132
132
  background-color: var(--switch-checked-bg-color)
133
- } .switch__checked_pizcd .switch__switch_pizcd:hover {
133
+ } .switch__checked_1n62k .switch__switch_1n62k:hover {
134
134
  background-color: var(--switch-checked-hover-bg-color);
135
- } .switch__checked_pizcd .switch__switch_pizcd:before {
135
+ } .switch__checked_1n62k .switch__switch_1n62k:before {
136
136
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
137
137
  transform: translateX(16px);
138
- } /* Disabled state */ .switch__disabled_pizcd {
138
+ } /* Disabled state */ .switch__disabled_1n62k {
139
139
  cursor: var(--disabled-cursor);
140
- } .switch__disabled_pizcd .switch__switch_pizcd {
140
+ } .switch__disabled_1n62k .switch__switch_1n62k {
141
141
  background-color: var(--switch-disabled-bg-color)
142
- } .switch__disabled_pizcd .switch__switch_pizcd:before {
142
+ } .switch__disabled_1n62k .switch__switch_1n62k:before {
143
143
  background-color: var(--switch-icon-disabled-color);
144
- } .switch__disabled_pizcd.switch__checked_pizcd .switch__switch_pizcd {
144
+ } .switch__disabled_1n62k.switch__checked_1n62k .switch__switch_1n62k {
145
145
  background-color: var(--switch-disabled-checked-bg-color);
146
- } .switch__disabled_pizcd .switch__label_pizcd {
146
+ } .switch__disabled_1n62k .switch__label_1n62k {
147
147
  color: var(--switch-disabled-color);
148
- } .switch__disabled_pizcd .switch__hint_pizcd {
148
+ } .switch__disabled_1n62k .switch__hint_1n62k {
149
149
  color: var(--switch-disabled-color);
150
- } /* Focused state */ .switch__focused_pizcd .switch__switch_pizcd {
150
+ } /* Focused state */ .switch__focused_1n62k .switch__switch_1n62k {
151
151
  outline: 2px solid var(--focus-color);
152
152
  outline-offset: 2px;
153
153
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-switch",
3
- "version": "4.1.0",
3
+ "version": "4.1.2",
4
4
  "description": "",
5
5
  "gitHead": "f054fef20200664c65e2501ef1f916c555cdf05d",
6
6
  "keywords": [],
@@ -16,7 +16,7 @@
16
16
  },
17
17
  "dependencies": {
18
18
  "@alfalab/hooks": "^1.13.0",
19
- "@alfalab/core-components-shared": "^0.9.0",
19
+ "@alfalab/core-components-shared": "^0.9.1",
20
20
  "classnames": "^2.3.1",
21
21
  "react-merge-refs": "^1.1.0",
22
22
  "tslib": "^2.4.0"
@@ -80,9 +80,9 @@
80
80
  position: absolute;
81
81
  top: 0;
82
82
  left: 0;
83
+ bottom: 0;
84
+ right: 16px;
83
85
  display: block;
84
- width: 16px;
85
- height: 16px;
86
86
  border-radius: var(--border-radius-circle);
87
87
  background-color: var(--switch-icon-color);
88
88
  box-sizing: border-box;