@react-spectrum/switch 3.5.2 → 3.5.4

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.
@@ -0,0 +1,447 @@
1
+ .XHynUq_i18nFontFamily {
2
+ font-synthesis: weight;
3
+ font-family: adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
4
+ }
5
+
6
+ .XHynUq_i18nFontFamily:lang(ar) {
7
+ font-family: myriad-arabic, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
8
+ }
9
+
10
+ .XHynUq_i18nFontFamily:lang(he) {
11
+ font-family: myriad-hebrew, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
12
+ }
13
+
14
+ .XHynUq_i18nFontFamily:lang(zh) {
15
+ font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
16
+ }
17
+
18
+ .XHynUq_i18nFontFamily:lang(zh-Hans) {
19
+ font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
20
+ }
21
+
22
+ .XHynUq_i18nFontFamily:lang(zh-Hant) {
23
+ font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
24
+ }
25
+
26
+ .XHynUq_i18nFontFamily:lang(zh-SG), .XHynUq_i18nFontFamily:lang(zh-CN) {
27
+ font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
28
+ }
29
+
30
+ .XHynUq_i18nFontFamily:lang(ko) {
31
+ font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
32
+ }
33
+
34
+ .XHynUq_i18nFontFamily:lang(ja) {
35
+ font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, MS Pゴシック, MS PGothic, sans-serif;
36
+ }
37
+
38
+ .XHynUq_spectrum-FocusRing-ring {
39
+ --spectrum-focus-ring-border-radius: var(--spectrum-textfield-border-radius, var(--spectrum-alias-border-radius-regular));
40
+ --spectrum-focus-ring-gap: var(--spectrum-alias-input-focusring-gap);
41
+ --spectrum-focus-ring-size: var(--spectrum-alias-input-focusring-size);
42
+ --spectrum-focus-ring-border-size: 0px;
43
+ --spectrum-focus-ring-color: var(--spectrum-high-contrast-focus-ring-color, var(--spectrum-alias-focus-ring-color, var(--spectrum-alias-focus-color)));
44
+ }
45
+
46
+ .XHynUq_spectrum-FocusRing-ring:after {
47
+ border-radius: calc(var(--spectrum-focus-ring-border-radius) + var(--spectrum-focus-ring-gap));
48
+ content: "";
49
+ margin: calc(-1 * var(--spectrum-focus-ring-border-size));
50
+ pointer-events: none;
51
+ transition: box-shadow var(--spectrum-global-animation-duration-100, .13s) ease-out, margin var(--spectrum-global-animation-duration-100, .13s) ease-out;
52
+ display: block;
53
+ position: absolute;
54
+ inset: 0;
55
+ }
56
+
57
+ .XHynUq_spectrum-FocusRing.XHynUq_focus-ring:after {
58
+ margin: calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size));
59
+ box-shadow: 0 0 0 var(--spectrum-focus-ring-size) var(--spectrum-focus-ring-color);
60
+ }
61
+
62
+ .XHynUq_spectrum-FocusRing--quiet:after {
63
+ border-radius: 0;
64
+ }
65
+
66
+ .XHynUq_spectrum-FocusRing--quiet.XHynUq_focus-ring:after {
67
+ margin: 0 0 calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size)) 0;
68
+ box-shadow: 0 var(--spectrum-focus-ring-size) 0 var(--spectrum-focus-ring-color);
69
+ }
70
+
71
+ @media (forced-colors: active) {
72
+ .XHynUq_spectrum-FocusRing, .XHynUq_spectrum-FocusRing-ring, .XHynUq_spectrum-FocusRing--quiet {
73
+ --spectrum-high-contrast-focus-ring-color: Highlight;
74
+ }
75
+
76
+ :is(.XHynUq_spectrum-FocusRing, .XHynUq_spectrum-FocusRing-ring, .XHynUq_spectrum-FocusRing--quiet):after {
77
+ forced-color-adjust: none;
78
+ }
79
+ }
80
+
81
+ .XHynUq_spectrum-ToggleSwitch {
82
+ min-block-size: var(--spectrum-switch-height, var(--spectrum-global-dimension-size-400));
83
+ vertical-align: top;
84
+ isolation: isolate;
85
+ align-items: flex-start;
86
+ max-inline-size: 100%;
87
+ margin-inline-end: calc(var(--spectrum-switch-cursor-hit-x, var(--spectrum-global-dimension-size-100)) * 2);
88
+ display: inline-flex;
89
+ position: relative;
90
+ }
91
+
92
+ .XHynUq_spectrum-ToggleSwitch-input {
93
+ box-sizing: border-box;
94
+ opacity: .0001;
95
+ z-index: 1;
96
+ cursor: default;
97
+ block-size: 100%;
98
+ inline-size: 100%;
99
+ margin: 0;
100
+ padding: 0;
101
+ position: absolute;
102
+ top: 0;
103
+ }
104
+
105
+ .XHynUq_spectrum-ToggleSwitch-input:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
106
+ left: 0;
107
+ }
108
+
109
+ .XHynUq_spectrum-ToggleSwitch-input:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
110
+ left: 0;
111
+ }
112
+
113
+ .XHynUq_spectrum-ToggleSwitch-input:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
114
+ right: 0;
115
+ }
116
+
117
+ .XHynUq_spectrum-ToggleSwitch-input:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
118
+ right: 0;
119
+ }
120
+
121
+ [dir="ltr"] :is(.XHynUq_spectrum-ToggleSwitch-input:checked + .XHynUq_spectrum-ToggleSwitch-switch):before {
122
+ transform: translateX(calc(var(--spectrum-switch-track-width) - 100%));
123
+ }
124
+
125
+ [dir="rtl"] :is(.XHynUq_spectrum-ToggleSwitch-input:checked + .XHynUq_spectrum-ToggleSwitch-switch):before {
126
+ transform: translateX(calc(100% - var(--spectrum-switch-track-width)));
127
+ }
128
+
129
+ .XHynUq_spectrum-ToggleSwitch-input:disabled, .XHynUq_spectrum-ToggleSwitch-input[disabled] {
130
+ cursor: default;
131
+ }
132
+
133
+ .XHynUq_spectrum-ToggleSwitch-input.XHynUq_focus-ring + .XHynUq_spectrum-ToggleSwitch-switch:after {
134
+ margin: calc(var(--spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25)) * -1);
135
+ }
136
+
137
+ .XHynUq_spectrum-ToggleSwitch-label {
138
+ text-align: start;
139
+ margin: 0 var(--spectrum-switch-text-gap, var(--spectrum-global-dimension-size-125));
140
+ font-size: var(--spectrum-switch-text-size, var(--spectrum-alias-font-size-default));
141
+ transition: color var(--spectrum-global-animation-duration-200, .16s) ease-in-out;
142
+ margin-block-start: var(--spectrum-global-dimension-size-65);
143
+ line-height: 1.49;
144
+ }
145
+
146
+ .XHynUq_spectrum-ToggleSwitch-switch {
147
+ box-sizing: border-box;
148
+ inline-size: var(--spectrum-switch-track-width);
149
+ margin: calc((var(--spectrum-switch-height, var(--spectrum-global-dimension-size-400)) - var(--spectrum-switch-track-height, var(--spectrum-global-dimension-size-175))) / 2) 0;
150
+ vertical-align: middle;
151
+ will-change: transform;
152
+ transition: background var(--spectrum-global-animation-duration-100, .13s) ease-in-out, border var(--spectrum-global-animation-duration-100, .13s) ease-in-out;
153
+ block-size: var(--spectrum-switch-track-height, var(--spectrum-global-dimension-size-175));
154
+ border-radius: calc(var(--spectrum-switch-track-height, var(--spectrum-global-dimension-size-175)) / 2);
155
+ flex-grow: 0;
156
+ flex-shrink: 0;
157
+ display: inline-block;
158
+ position: relative;
159
+ left: 0;
160
+ right: 0;
161
+ }
162
+
163
+ .XHynUq_spectrum-ToggleSwitch-switch:before {
164
+ content: "";
165
+ box-sizing: border-box;
166
+ transition: background var(--spectrum-global-animation-duration-100, .13s) ease-in-out, border var(--spectrum-global-animation-duration-100, .13s) ease-in-out, transform var(--spectrum-global-animation-duration-100, .13s) ease-in-out, box-shadow var(--spectrum-global-animation-duration-100, .13s) ease-in-out;
167
+ inline-size: var(--spectrum-switch-handle-size, var(--spectrum-global-dimension-size-175));
168
+ block-size: var(--spectrum-switch-handle-size, var(--spectrum-global-dimension-size-175));
169
+ border-width: var(--spectrum-switch-handle-border-size, var(--spectrum-alias-border-size-thick));
170
+ border-radius: calc(var(--spectrum-switch-handle-size, var(--spectrum-global-dimension-size-175)) / 2);
171
+ border-style: solid;
172
+ display: block;
173
+ position: absolute;
174
+ top: 0;
175
+ }
176
+
177
+ .XHynUq_spectrum-ToggleSwitch-switch:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
178
+ left: 0;
179
+ }
180
+
181
+ .XHynUq_spectrum-ToggleSwitch-switch:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
182
+ left: 0;
183
+ }
184
+
185
+ .XHynUq_spectrum-ToggleSwitch-switch:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
186
+ right: 0;
187
+ }
188
+
189
+ .XHynUq_spectrum-ToggleSwitch-switch:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
190
+ right: 0;
191
+ }
192
+
193
+ .XHynUq_spectrum-ToggleSwitch-switch:after {
194
+ border-radius: calc(calc(var(--spectrum-switch-track-height, var(--spectrum-global-dimension-size-175)) / 2) + var(--spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25)) * 2);
195
+ content: "";
196
+ transition: box-shadow var(--spectrum-global-animation-duration-100, .13s) ease-out, margin var(--spectrum-global-animation-duration-100, .13s) ease-out;
197
+ margin: 0;
198
+ display: block;
199
+ position: absolute;
200
+ inset: 0;
201
+ transform: translateX(0);
202
+ }
203
+
204
+ .XHynUq_spectrum-ToggleSwitch {
205
+ --spectrum-switch-emphasized-handle-border-color: var(--spectrum-alias-toggle-color-default);
206
+ --spectrum-switch-emphasized-handle-border-color-hover: var(--spectrum-alias-toggle-color-hover);
207
+ --spectrum-switch-emphasized-handle-border-color-key-focus: var(--spectrum-alias-toggle-color-key-focus);
208
+ --spectrum-switch-quiet-track-color-selected: var(--spectrum-alias-toggle-color-selected);
209
+ --spectrum-switch-quiet-track-color-selected-hover: var(--spectrum-alias-toggle-color-selected-hover);
210
+ --spectrum-switch-quiet-track-color-selected-key-focus: var(--spectrum-alias-toggle-color-selected-key-focus);
211
+ --spectrum-switch-quiet-handle-border-color-selected: var(--spectrum-alias-toggle-color-selected);
212
+ --spectrum-switch-quiet-handle-border-color-selected-hover: var(--spectrum-alias-toggle-color-selected-hover);
213
+ --spectrum-switch-quiet-handle-border-color-selected-key-focus: var(--spectrum-alias-toggle-color-selected-key-focus);
214
+ --spectrum-switch-emphasized-track-color-selected: var(--spectrum-accent-color-900);
215
+ --spectrum-switch-emphasized-handle-border-color-selected: var(--spectrum-accent-color-900);
216
+ --spectrum-switch-emphasized-track-color-selected-hover: var(--spectrum-accent-color-1000);
217
+ --spectrum-switch-emphasized-handle-border-color-selected-hover: var(--spectrum-accent-color-1000);
218
+ --spectrum-switch-emphasized-track-color-selected-key-focus: var(--spectrum-accent-color-1000);
219
+ --spectrum-switch-emphasized-handle-border-color-selected-key-focus: var(--spectrum-accent-color-1000);
220
+ --spectrum-switch-emphasized-track-color-selected-down: var(--spectrum-accent-color-1100);
221
+ --spectrum-switch-emphasized-handle-border-color-selected-down: var(--spectrum-accent-color-1100);
222
+ }
223
+
224
+ .XHynUq_spectrum-ToggleSwitch-switch {
225
+ background-color: var(--spectrum-switch-emphasized-track-color, var(--spectrum-global-color-gray-300));
226
+ }
227
+
228
+ .XHynUq_spectrum-ToggleSwitch-switch:before {
229
+ background-color: var(--spectrum-switch-emphasized-handle-background-color, var(--spectrum-global-color-gray-75));
230
+ border-color: var(--spectrum-switch-emphasized-handle-border-color, var(--spectrum-global-color-gray-600));
231
+ }
232
+
233
+ .XHynUq_spectrum-ToggleSwitch-input ~ .XHynUq_spectrum-ToggleSwitch-label {
234
+ color: var(--spectrum-switch-emphasized-text-color, var(--spectrum-alias-text-color));
235
+ }
236
+
237
+ .XHynUq_spectrum-ToggleSwitch-input:checked + .XHynUq_spectrum-ToggleSwitch-switch {
238
+ background-color: var(--spectrum-switch-emphasized-track-color-selected, var(--spectrum-global-color-blue-500));
239
+ }
240
+
241
+ .XHynUq_spectrum-ToggleSwitch-input:checked + .XHynUq_spectrum-ToggleSwitch-switch:before {
242
+ border-color: var(--spectrum-switch-emphasized-handle-border-color-selected, var(--spectrum-global-color-blue-500));
243
+ }
244
+
245
+ .XHynUq_spectrum-ToggleSwitch.XHynUq_is-hovered .XHynUq_spectrum-ToggleSwitch-input + .XHynUq_spectrum-ToggleSwitch-switch:before {
246
+ border-color: var(--spectrum-switch-emphasized-handle-border-color-hover, var(--spectrum-global-color-gray-700));
247
+ box-shadow: none;
248
+ }
249
+
250
+ .XHynUq_spectrum-ToggleSwitch.XHynUq_is-hovered .XHynUq_spectrum-ToggleSwitch-input ~ .XHynUq_spectrum-ToggleSwitch-label {
251
+ color: var(--spectrum-switch-emphasized-text-color-hover, var(--spectrum-alias-text-color-hover));
252
+ }
253
+
254
+ .XHynUq_spectrum-ToggleSwitch.XHynUq_is-hovered .XHynUq_spectrum-ToggleSwitch-input:checked:enabled + .XHynUq_spectrum-ToggleSwitch-switch {
255
+ background-color: var(--spectrum-switch-emphasized-track-color-selected-hover, var(--spectrum-global-color-blue-600));
256
+ }
257
+
258
+ .XHynUq_spectrum-ToggleSwitch.XHynUq_is-hovered .XHynUq_spectrum-ToggleSwitch-input:checked:enabled + .XHynUq_spectrum-ToggleSwitch-switch:before {
259
+ border-color: var(--spectrum-switch-emphasized-handle-border-color-selected-hover, var(--spectrum-global-color-blue-600));
260
+ }
261
+
262
+ .XHynUq_spectrum-ToggleSwitch:active .XHynUq_spectrum-ToggleSwitch-input + .XHynUq_spectrum-ToggleSwitch-switch:before {
263
+ border-color: var(--spectrum-switch-emphasized-handle-border-color-down, var(--spectrum-global-color-gray-800));
264
+ }
265
+
266
+ .XHynUq_spectrum-ToggleSwitch:active .XHynUq_spectrum-ToggleSwitch-input ~ .XHynUq_spectrum-ToggleSwitch-label {
267
+ color: var(--spectrum-switch-emphasized-text-color-down, var(--spectrum-alias-text-color-down));
268
+ }
269
+
270
+ .XHynUq_spectrum-ToggleSwitch:active .XHynUq_spectrum-ToggleSwitch-input:checked:enabled + .XHynUq_spectrum-ToggleSwitch-switch {
271
+ background-color: var(--spectrum-switch-emphasized-track-color-selected-down, var(--spectrum-global-color-blue-700));
272
+ }
273
+
274
+ .XHynUq_spectrum-ToggleSwitch:active .XHynUq_spectrum-ToggleSwitch-input:checked:enabled + .XHynUq_spectrum-ToggleSwitch-switch:before {
275
+ border-color: var(--spectrum-switch-emphasized-handle-border-color-selected-down, var(--spectrum-global-color-blue-700));
276
+ }
277
+
278
+ .XHynUq_spectrum-ToggleSwitch .XHynUq_spectrum-ToggleSwitch-input:disabled + .XHynUq_spectrum-ToggleSwitch-switch {
279
+ background-color: var(--spectrum-switch-emphasized-track-color-disabled, var(--spectrum-global-color-gray-300));
280
+ }
281
+
282
+ .XHynUq_spectrum-ToggleSwitch .XHynUq_spectrum-ToggleSwitch-input:disabled + .XHynUq_spectrum-ToggleSwitch-switch:before {
283
+ border-color: var(--spectrum-switch-emphasized-handle-border-color-disabled, var(--spectrum-global-color-gray-400));
284
+ }
285
+
286
+ .XHynUq_spectrum-ToggleSwitch .XHynUq_spectrum-ToggleSwitch-input:disabled ~ .XHynUq_spectrum-ToggleSwitch-label {
287
+ color: var(--spectrum-switch-emphasized-text-color-disabled, var(--spectrum-alias-text-color-disabled));
288
+ }
289
+
290
+ .XHynUq_spectrum-ToggleSwitch .XHynUq_spectrum-ToggleSwitch-input:disabled:checked + .XHynUq_spectrum-ToggleSwitch-switch {
291
+ background-color: var(--spectrum-switch-emphasized-track-color-selected-disabled, var(--spectrum-global-color-gray-400));
292
+ }
293
+
294
+ .XHynUq_spectrum-ToggleSwitch .XHynUq_spectrum-ToggleSwitch-input:disabled:checked + .XHynUq_spectrum-ToggleSwitch-switch:before {
295
+ border-color: var(--spectrum-switch-emphasized-handle-border-color-selected-disabled, var(--spectrum-global-color-gray-400));
296
+ }
297
+
298
+ .XHynUq_spectrum-ToggleSwitch .XHynUq_spectrum-ToggleSwitch-input:disabled:checked ~ .XHynUq_spectrum-ToggleSwitch-label {
299
+ color: var(--spectrum-switch-emphasized-text-color-selected-disabled, var(--spectrum-alias-text-color-disabled));
300
+ }
301
+
302
+ .XHynUq_spectrum-ToggleSwitch--quiet .XHynUq_spectrum-ToggleSwitch-input:checked + .XHynUq_spectrum-ToggleSwitch-switch {
303
+ background-color: var(--spectrum-switch-quiet-track-color-selected, var(--spectrum-global-color-gray-700));
304
+ }
305
+
306
+ .XHynUq_spectrum-ToggleSwitch--quiet .XHynUq_spectrum-ToggleSwitch-input:checked + .XHynUq_spectrum-ToggleSwitch-switch:before {
307
+ border-color: var(--spectrum-switch-quiet-handle-border-color-selected, var(--spectrum-global-color-gray-700));
308
+ }
309
+
310
+ .XHynUq_spectrum-ToggleSwitch--quiet.XHynUq_is-hovered .XHynUq_spectrum-ToggleSwitch-input:checked:enabled + .XHynUq_spectrum-ToggleSwitch-switch {
311
+ background-color: var(--spectrum-switch-quiet-track-color-selected-hover, var(--spectrum-global-color-gray-800));
312
+ }
313
+
314
+ .XHynUq_spectrum-ToggleSwitch--quiet.XHynUq_is-hovered .XHynUq_spectrum-ToggleSwitch-input:checked:enabled + .XHynUq_spectrum-ToggleSwitch-switch:before {
315
+ border-color: var(--spectrum-switch-quiet-handle-border-color-selected-hover, var(--spectrum-global-color-gray-800));
316
+ }
317
+
318
+ .XHynUq_spectrum-ToggleSwitch.XHynUq_spectrum-ToggleSwitch--quiet:active .XHynUq_spectrum-ToggleSwitch-input:checked:enabled + .XHynUq_spectrum-ToggleSwitch-switch {
319
+ background-color: var(--spectrum-switch-quiet-track-color-selected-down, var(--spectrum-global-color-gray-900));
320
+ }
321
+
322
+ .XHynUq_spectrum-ToggleSwitch.XHynUq_spectrum-ToggleSwitch--quiet:active .XHynUq_spectrum-ToggleSwitch-input:checked:enabled + .XHynUq_spectrum-ToggleSwitch-switch:before {
323
+ border-color: var(--spectrum-switch-quiet-handle-border-color-selected-down, var(--spectrum-global-color-gray-900));
324
+ }
325
+
326
+ :is(.XHynUq_spectrum-ToggleSwitch, .XHynUq_spectrum-ToggleSwitch.XHynUq_is-hovered) .XHynUq_spectrum-ToggleSwitch-input.XHynUq_focus-ring + .XHynUq_spectrum-ToggleSwitch-switch:after {
327
+ box-shadow: 0 0 0 var(--spectrum-switch-focus-ring-size-key-focus, var(--spectrum-alias-focus-ring-size)) var(--spectrum-switch-focus-ring-color-key-focus, var(--spectrum-alias-focus-ring-color));
328
+ }
329
+
330
+ :is(.XHynUq_spectrum-ToggleSwitch, .XHynUq_spectrum-ToggleSwitch.XHynUq_is-hovered) .XHynUq_spectrum-ToggleSwitch-input.XHynUq_focus-ring + .XHynUq_spectrum-ToggleSwitch-switch:before {
331
+ border-color: var(--spectrum-switch-emphasized-handle-border-color-key-focus, var(--spectrum-global-color-gray-700));
332
+ }
333
+
334
+ :is(.XHynUq_spectrum-ToggleSwitch, .XHynUq_spectrum-ToggleSwitch.XHynUq_is-hovered) .XHynUq_spectrum-ToggleSwitch-input.XHynUq_focus-ring:checked + .XHynUq_spectrum-ToggleSwitch-switch {
335
+ background-color: var(--spectrum-switch-emphasized-track-color-selected-key-focus, var(--spectrum-global-color-blue-600));
336
+ }
337
+
338
+ :is(.XHynUq_spectrum-ToggleSwitch, .XHynUq_spectrum-ToggleSwitch.XHynUq_is-hovered) .XHynUq_spectrum-ToggleSwitch-input.XHynUq_focus-ring:checked + .XHynUq_spectrum-ToggleSwitch-switch:before {
339
+ border-color: var(--spectrum-switch-emphasized-handle-border-color-selected-key-focus, var(--spectrum-global-color-blue-600));
340
+ }
341
+
342
+ :is(.XHynUq_spectrum-ToggleSwitch--quiet, .XHynUq_spectrum-ToggleSwitch--quiet.XHynUq_is-hovered) .XHynUq_spectrum-ToggleSwitch-input.XHynUq_focus-ring:checked + .XHynUq_spectrum-ToggleSwitch-switch {
343
+ background-color: var(--spectrum-switch-quiet-track-color-selected-key-focus, var(--spectrum-global-color-gray-800));
344
+ }
345
+
346
+ :is(.XHynUq_spectrum-ToggleSwitch--quiet, .XHynUq_spectrum-ToggleSwitch--quiet.XHynUq_is-hovered) .XHynUq_spectrum-ToggleSwitch-input.XHynUq_focus-ring:checked + .XHynUq_spectrum-ToggleSwitch-switch:before {
347
+ border-color: var(--spectrum-switch-quiet-handle-border-color-selected-key-focus, var(--spectrum-global-color-gray-800));
348
+ }
349
+
350
+ .XHynUq_spectrum-ToggleSwitch--ab .XHynUq_spectrum-ToggleSwitch-input:checked + .XHynUq_spectrum-ToggleSwitch-switch {
351
+ background-color: var(--spectrum-switch-track-color, var(--spectrum-global-color-gray-300));
352
+ }
353
+
354
+ .XHynUq_spectrum-ToggleSwitch--ab .XHynUq_spectrum-ToggleSwitch-input:checked + .XHynUq_spectrum-ToggleSwitch-switch:before {
355
+ border-color: var(--spectrum-switch-handle-border-color, var(--spectrum-global-color-gray-600));
356
+ }
357
+
358
+ .XHynUq_spectrum-ToggleSwitch--ab .XHynUq_spectrum-ToggleSwitch-input.XHynUq_focus-ring:checked + .XHynUq_spectrum-ToggleSwitch-switch {
359
+ background-color: var(--spectrum-switch-track-color, var(--spectrum-global-color-gray-300));
360
+ }
361
+
362
+ .XHynUq_spectrum-ToggleSwitch--ab .XHynUq_spectrum-ToggleSwitch-input.XHynUq_focus-ring:checked + .XHynUq_spectrum-ToggleSwitch-switch:before {
363
+ border-color: var(--spectrum-switch-handle-border-color-selected, var(--spectrum-global-color-gray-700));
364
+ }
365
+
366
+ .XHynUq_spectrum-ToggleSwitch--ab .XHynUq_spectrum-ToggleSwitch-input:disabled:checked + .XHynUq_spectrum-ToggleSwitch-switch, .XHynUq_spectrum-ToggleSwitch--ab .XHynUq_spectrum-ToggleSwitch-input:disabled + .XHynUq_spectrum-ToggleSwitch-switch {
367
+ background-color: var(--spectrum-switch-emphasized-track-color-disabled, var(--spectrum-global-color-gray-300));
368
+ }
369
+
370
+ .XHynUq_spectrum-ToggleSwitch--ab .XHynUq_spectrum-ToggleSwitch-input:disabled + .XHynUq_spectrum-ToggleSwitch-switch:before {
371
+ border-color: var(--spectrum-switch-emphasized-handle-border-color-disabled, var(--spectrum-global-color-gray-400));
372
+ }
373
+
374
+ .XHynUq_spectrum-ToggleSwitch--ab.XHynUq_is-hovered .XHynUq_spectrum-ToggleSwitch-input:checked:enabled + .XHynUq_spectrum-ToggleSwitch-switch {
375
+ background-color: var(--spectrum-switch-emphasized-track-color, var(--spectrum-global-color-gray-300));
376
+ }
377
+
378
+ .XHynUq_spectrum-ToggleSwitch--ab.XHynUq_is-hovered .XHynUq_spectrum-ToggleSwitch-input:checked:enabled + .XHynUq_spectrum-ToggleSwitch-switch:before {
379
+ border-color: var(--spectrum-switch-emphasized-handle-border-color-hover, var(--spectrum-global-color-gray-700));
380
+ }
381
+
382
+ .XHynUq_spectrum-ToggleSwitch--ab:active .XHynUq_spectrum-ToggleSwitch-input:checked:enabled + .XHynUq_spectrum-ToggleSwitch-switch {
383
+ background-color: var(--spectrum-switch-emphasized-track-color, var(--spectrum-global-color-gray-300));
384
+ }
385
+
386
+ .XHynUq_spectrum-ToggleSwitch--ab:active .XHynUq_spectrum-ToggleSwitch-input:checked:enabled + .XHynUq_spectrum-ToggleSwitch-switch:before {
387
+ border-color: var(--spectrum-switch-emphasized-handle-border-color-down, var(--spectrum-global-color-gray-800));
388
+ }
389
+
390
+ @media (forced-colors: active) {
391
+ .XHynUq_spectrum-ToggleSwitch {
392
+ forced-color-adjust: none;
393
+ --spectrum-switch-emphasized-handle-background-color: ButtonFace;
394
+ --spectrum-switch-emphasized-handle-border-color: ButtonText;
395
+ --spectrum-switch-emphasized-handle-border-color-disabled: GrayText;
396
+ --spectrum-switch-emphasized-handle-border-color-down: Highlight;
397
+ --spectrum-switch-emphasized-handle-border-color-hover: Highlight;
398
+ --spectrum-switch-emphasized-handle-border-color-key-focus: Highlight;
399
+ --spectrum-switch-emphasized-handle-border-color-selected: Highlight;
400
+ --spectrum-switch-emphasized-handle-border-color-selected-disabled: GrayText;
401
+ --spectrum-switch-emphasized-handle-border-color-selected-down: Highlight;
402
+ --spectrum-switch-emphasized-handle-border-color-selected-hover: Highlight;
403
+ --spectrum-switch-emphasized-handle-border-color-selected-key-focus: Highlight;
404
+ --spectrum-switch-emphasized-text-color: CanvasText;
405
+ --spectrum-switch-emphasized-text-color-disabled: GrayText;
406
+ --spectrum-switch-emphasized-text-color-down: CanvasText;
407
+ --spectrum-switch-emphasized-text-color-hover: CanvasText;
408
+ --spectrum-switch-emphasized-text-color-selected-disabled: GrayText;
409
+ --spectrum-switch-emphasized-track-color: ButtonFace;
410
+ --spectrum-switch-emphasized-track-color-disabled: ButtonFace;
411
+ --spectrum-switch-emphasized-track-color-selected: Highlight;
412
+ --spectrum-switch-emphasized-track-color-selected-disabled: GrayText;
413
+ --spectrum-switch-emphasized-track-color-selected-down: Highlight;
414
+ --spectrum-switch-emphasized-track-color-selected-hover: Highlight;
415
+ --spectrum-switch-emphasized-track-color-selected-key-focus: Highlight;
416
+ --spectrum-switch-focus-ring-color-key-focus: ButtonText;
417
+ --spectrum-switch-handle-border-color: ButtonText;
418
+ --spectrum-switch-handle-border-color-selected: Highlight;
419
+ --spectrum-switch-quiet-handle-border-color-selected: Highlight;
420
+ --spectrum-switch-quiet-handle-border-color-selected-down: Highlight;
421
+ --spectrum-switch-quiet-handle-border-color-selected-hover: Highlight;
422
+ --spectrum-switch-quiet-handle-border-color-selected-key-focus: Highlight;
423
+ --spectrum-switch-quiet-track-color-selected: Highlight;
424
+ --spectrum-switch-quiet-track-color-selected-down: Highlight;
425
+ --spectrum-switch-quiet-track-color-selected-hover: Highlight;
426
+ --spectrum-switch-quiet-track-color-selected-key-focus: Highlight;
427
+ --spectrum-switch-track-color: ButtonFace;
428
+ --spectrum-switch-track-color-disabled: ButtonFace;
429
+ }
430
+
431
+ .XHynUq_spectrum-ToggleSwitch .XHynUq_spectrum-ToggleSwitch-input:not(:checked) + .XHynUq_spectrum-ToggleSwitch-switch {
432
+ box-shadow: inset 0 0 0 1px var(--spectrum-switch-handle-border-color, var(--spectrum-global-color-gray-600));
433
+ }
434
+
435
+ .XHynUq_spectrum-ToggleSwitch.XHynUq_is-hovered .XHynUq_spectrum-ToggleSwitch-input:not(:checked) + .XHynUq_spectrum-ToggleSwitch-switch {
436
+ box-shadow: inset 0 0 0 1px var(--spectrum-switch-emphasized-handle-border-color-hover, var(--spectrum-global-color-gray-700));
437
+ }
438
+
439
+ .XHynUq_spectrum-ToggleSwitch .XHynUq_spectrum-ToggleSwitch-input:not(:checked):focus + .XHynUq_spectrum-ToggleSwitch-switch {
440
+ box-shadow: inset 0 0 0 1px var(--spectrum-switch-emphasized-handle-border-color-key-focus, var(--spectrum-global-color-gray-700));
441
+ }
442
+
443
+ .XHynUq_spectrum-ToggleSwitch .XHynUq_spectrum-ToggleSwitch-input:disabled + .XHynUq_spectrum-ToggleSwitch-switch {
444
+ box-shadow: inset 0 0 0 1px var(--spectrum-switch-emphasized-handle-border-color-disabled, var(--spectrum-global-color-gray-400));
445
+ }
446
+ }
447
+ /*# sourceMappingURL=vars.f7257b6a.css.map */
@@ -0,0 +1 @@
1
+ {"mappings":"AA4DA;;;;;AAIE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAQA;;;;AAIA;;;;AAKF;;;;;;;;AAOE;;;;;;;;;;;AAqBE;;;;;AAQF;;;;AAKE;;;;;AAOJ;EACE;;;;EAIE;;;;;AAMJ;;;;;;;;;;;AAgBA;;;;;;;;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAqBI;;;;AAGA;;;;AAKF;;;;AAOI;;;;AAON;;;;;;;;;AASA;;;;;;;;;;;;;;;;;AA6BE;;;;;;;;;;;;;;AAQA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAeA;;;;;;;;;;;AA6BF;;;;;;;;;;;;;;;;;;;;AAuBA;;;;AAIE;;;;;AAMF;;;;AAOE;;;;AAEE;;;;AAWE;;;;;AAKF;;;;AAIA;;;;AAEE;;;;AAYA;;;;AAIF;;;;AAIA;;;;AAEE;;;;AAUJ;;;;AAEE;;;;AAIF;;;;AAKE;;;;AAEE;;;;AAIF;;;;AAWF;;;;AAEE;;;;AASF;;;;AAEE;;;;AASF;;;;AAEE;;;;AAYE;;;;AAGA;;;;AAMA;;;;AAEE;;;;AAaF;;;;AAEE;;;;AAUJ;;;;AAKE;;;;AAOA;;;;AAGE;;;;AAOF;;;;AAOE;;;;AASF;;;;AAEE;;;;AASF;;;;AAEE;;;;AAQR;EACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwCE;;;;EAIE;;;;EAIF;;;;EAIA","sources":["packages/@adobe/spectrum-css-temp/components/toggle/vars.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"vars.f7257b6a.css.map"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-spectrum/switch",
3
- "version": "3.5.2",
3
+ "version": "3.5.4",
4
4
  "description": "Spectrum UI components in React",
5
5
  "license": "Apache-2.0",
6
6
  "main": "dist/main.js",
@@ -36,13 +36,13 @@
36
36
  "url": "https://github.com/adobe/react-spectrum"
37
37
  },
38
38
  "dependencies": {
39
- "@react-aria/focus": "^3.16.1",
40
- "@react-aria/interactions": "^3.21.0",
41
- "@react-aria/switch": "^3.6.1",
42
- "@react-spectrum/utils": "^3.11.4",
43
- "@react-stately/toggle": "^3.7.1",
44
- "@react-types/shared": "^3.22.0",
45
- "@react-types/switch": "^3.5.0",
39
+ "@react-aria/focus": "^3.17.0",
40
+ "@react-aria/interactions": "^3.21.2",
41
+ "@react-aria/switch": "^3.6.3",
42
+ "@react-spectrum/utils": "^3.11.6",
43
+ "@react-stately/toggle": "^3.7.3",
44
+ "@react-types/shared": "^3.23.0",
45
+ "@react-types/switch": "^3.5.2",
46
46
  "@swc/helpers": "^0.5.0"
47
47
  },
48
48
  "devDependencies": {
@@ -55,5 +55,5 @@
55
55
  "publishConfig": {
56
56
  "access": "public"
57
57
  },
58
- "gitHead": "f040ff62678e6a31375b96c05396df0bae660350"
58
+ "gitHead": "f645f29edc1322153fd60af4640cbcab1d992dbd"
59
59
  }
package/dist/main.css DELETED
@@ -1 +0,0 @@
1
- .XHynUq_i18nFontFamily{font-synthesis:weight;font-family:adobe-clean,Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Trebuchet MS,Lucida Grande,sans-serif}.XHynUq_i18nFontFamily:lang(ar){font-family:myriad-arabic,adobe-clean,Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Trebuchet MS,Lucida Grande,sans-serif}.XHynUq_i18nFontFamily:lang(he){font-family:myriad-hebrew,adobe-clean,Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Trebuchet MS,Lucida Grande,sans-serif}.XHynUq_i18nFontFamily:lang(zh){font-family:adobe-clean-han-traditional,source-han-traditional,MingLiu,Heiti TC Light,sans-serif}.XHynUq_i18nFontFamily:lang(zh-Hans){font-family:adobe-clean-han-simplified-c,source-han-simplified-c,SimSun,Heiti SC Light,sans-serif}.XHynUq_i18nFontFamily:lang(zh-Hant){font-family:adobe-clean-han-traditional,source-han-traditional,MingLiu,Microsoft JhengHei UI,Microsoft JhengHei,Heiti TC Light,sans-serif}.XHynUq_i18nFontFamily:lang(zh-SG),.XHynUq_i18nFontFamily:lang(zh-CN){font-family:adobe-clean-han-simplified-c,source-han-simplified-c,SimSun,Heiti SC Light,sans-serif}.XHynUq_i18nFontFamily:lang(ko){font-family:adobe-clean-han-korean,source-han-korean,Malgun Gothic,Apple Gothic,sans-serif}.XHynUq_i18nFontFamily:lang(ja){font-family:adobe-clean-han-japanese,Hiragino Kaku Gothic ProN,ヒラギノ角ゴ ProN W3,Osaka,YuGothic,Yu Gothic,メイリオ,Meiryo,MS Pゴシック,MS PGothic,sans-serif}.XHynUq_spectrum-FocusRing-ring{--spectrum-focus-ring-border-radius:var(--spectrum-textfield-border-radius,var(--spectrum-alias-border-radius-regular));--spectrum-focus-ring-gap:var(--spectrum-alias-input-focusring-gap);--spectrum-focus-ring-size:var(--spectrum-alias-input-focusring-size);--spectrum-focus-ring-border-size:0px;--spectrum-focus-ring-color:var(--spectrum-high-contrast-focus-ring-color,var(--spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color)))}.XHynUq_spectrum-FocusRing-ring:after{border-radius:calc(var(--spectrum-focus-ring-border-radius) + var(--spectrum-focus-ring-gap));content:"";margin:calc(-1*var(--spectrum-focus-ring-border-size));pointer-events:none;transition:box-shadow var(--spectrum-global-animation-duration-100,.13s)ease-out,margin var(--spectrum-global-animation-duration-100,.13s)ease-out;display:block;position:absolute;top:0;bottom:0;left:0;right:0}.XHynUq_spectrum-FocusRing.XHynUq_focus-ring:after{margin:calc(var(--spectrum-focus-ring-gap)*-1 - var(--spectrum-focus-ring-border-size));box-shadow:0 0 0 var(--spectrum-focus-ring-size)var(--spectrum-focus-ring-color)}.XHynUq_spectrum-FocusRing--quiet:after{border-radius:0}.XHynUq_spectrum-FocusRing--quiet.XHynUq_focus-ring:after{margin:0 0 calc(var(--spectrum-focus-ring-gap)*-1 - var(--spectrum-focus-ring-border-size))0;box-shadow:0 var(--spectrum-focus-ring-size)0 var(--spectrum-focus-ring-color)}.XHynUq_spectrum-ToggleSwitch{min-block-size:var(--spectrum-switch-height,var(--spectrum-global-dimension-size-400));vertical-align:top;isolation:isolate;align-items:flex-start;max-inline-size:100%;margin-inline-end:calc(var(--spectrum-switch-cursor-hit-x,var(--spectrum-global-dimension-size-100))*2);display:inline-flex;position:relative}.XHynUq_spectrum-ToggleSwitch-input{box-sizing:border-box;opacity:.0001;z-index:1;cursor:default;block-size:100%;inline-size:100%;margin:0;padding:0;position:absolute;top:0}.XHynUq_spectrum-ToggleSwitch-input:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:0}.XHynUq_spectrum-ToggleSwitch-input:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:0}.XHynUq_spectrum-ToggleSwitch-input:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:0}.XHynUq_spectrum-ToggleSwitch-input:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:0}.XHynUq_spectrum-ToggleSwitch-input:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:0}[dir=ltr] :is(.XHynUq_spectrum-ToggleSwitch-input:checked+.XHynUq_spectrum-ToggleSwitch-switch):before{transform:translateX(calc(var(--spectrum-switch-track-width) - 100%))}[dir=rtl] :is(.XHynUq_spectrum-ToggleSwitch-input:checked+.XHynUq_spectrum-ToggleSwitch-switch):before{transform:translateX(calc(100% - var(--spectrum-switch-track-width)))}.XHynUq_spectrum-ToggleSwitch-input:disabled,.XHynUq_spectrum-ToggleSwitch-input[disabled]{cursor:default}.XHynUq_spectrum-ToggleSwitch-input.XHynUq_focus-ring+.XHynUq_spectrum-ToggleSwitch-switch:after{margin:calc(var(--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25))*-1)}.XHynUq_spectrum-ToggleSwitch-label{text-align:start;margin:0 var(--spectrum-switch-text-gap,var(--spectrum-global-dimension-size-125));font-size:var(--spectrum-switch-text-size,var(--spectrum-alias-font-size-default));transition:color var(--spectrum-global-animation-duration-200,.16s)ease-in-out;margin-block-start:var(--spectrum-global-dimension-size-65);line-height:1.49}.XHynUq_spectrum-ToggleSwitch-switch{box-sizing:border-box;inline-size:var(--spectrum-switch-track-width);margin:calc((var(--spectrum-switch-height,var(--spectrum-global-dimension-size-400)) - var(--spectrum-switch-track-height,var(--spectrum-global-dimension-size-175)))/2)0;vertical-align:middle;will-change:transform;transition:background var(--spectrum-global-animation-duration-100,.13s)ease-in-out,border var(--spectrum-global-animation-duration-100,.13s)ease-in-out;block-size:var(--spectrum-switch-track-height,var(--spectrum-global-dimension-size-175));border-radius:calc(var(--spectrum-switch-track-height,var(--spectrum-global-dimension-size-175))/2);flex-grow:0;flex-shrink:0;display:inline-block;position:relative;left:0;right:0}.XHynUq_spectrum-ToggleSwitch-switch:before{content:"";box-sizing:border-box;transition:background var(--spectrum-global-animation-duration-100,.13s)ease-in-out,border var(--spectrum-global-animation-duration-100,.13s)ease-in-out,transform var(--spectrum-global-animation-duration-100,.13s)ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s)ease-in-out;inline-size:var(--spectrum-switch-handle-size,var(--spectrum-global-dimension-size-175));block-size:var(--spectrum-switch-handle-size,var(--spectrum-global-dimension-size-175));border-width:var(--spectrum-switch-handle-border-size,var(--spectrum-alias-border-size-thick));border-radius:calc(var(--spectrum-switch-handle-size,var(--spectrum-global-dimension-size-175))/2);border-style:solid;display:block;position:absolute;top:0}.XHynUq_spectrum-ToggleSwitch-switch:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))):before{left:0}.XHynUq_spectrum-ToggleSwitch-switch:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))):before{left:0}.XHynUq_spectrum-ToggleSwitch-switch:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))):before{left:0}.XHynUq_spectrum-ToggleSwitch-switch:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)):before{right:0}.XHynUq_spectrum-ToggleSwitch-switch:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)):before{right:0}.XHynUq_spectrum-ToggleSwitch-switch:after{border-radius:calc(calc(var(--spectrum-switch-track-height,var(--spectrum-global-dimension-size-175))/2) + var(--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25))*2);content:"";transition:box-shadow var(--spectrum-global-animation-duration-100,.13s)ease-out,margin var(--spectrum-global-animation-duration-100,.13s)ease-out;margin:0;display:block;position:absolute;top:0;bottom:0;left:0;right:0;transform:translate(0)}.XHynUq_spectrum-ToggleSwitch{--spectrum-switch-emphasized-handle-border-color:var(--spectrum-alias-toggle-color-default);--spectrum-switch-emphasized-handle-border-color-hover:var(--spectrum-alias-toggle-color-hover);--spectrum-switch-emphasized-handle-border-color-key-focus:var(--spectrum-alias-toggle-color-key-focus);--spectrum-switch-quiet-track-color-selected:var(--spectrum-alias-toggle-color-selected);--spectrum-switch-quiet-track-color-selected-hover:var(--spectrum-alias-toggle-color-selected-hover);--spectrum-switch-quiet-track-color-selected-key-focus:var(--spectrum-alias-toggle-color-selected-key-focus);--spectrum-switch-quiet-handle-border-color-selected:var(--spectrum-alias-toggle-color-selected);--spectrum-switch-quiet-handle-border-color-selected-hover:var(--spectrum-alias-toggle-color-selected-hover);--spectrum-switch-quiet-handle-border-color-selected-key-focus:var(--spectrum-alias-toggle-color-selected-key-focus);--spectrum-switch-emphasized-track-color-selected:var(--spectrum-accent-color-900);--spectrum-switch-emphasized-handle-border-color-selected:var(--spectrum-accent-color-900);--spectrum-switch-emphasized-track-color-selected-hover:var(--spectrum-accent-color-1000);--spectrum-switch-emphasized-handle-border-color-selected-hover:var(--spectrum-accent-color-1000);--spectrum-switch-emphasized-track-color-selected-key-focus:var(--spectrum-accent-color-1000);--spectrum-switch-emphasized-handle-border-color-selected-key-focus:var(--spectrum-accent-color-1000);--spectrum-switch-emphasized-track-color-selected-down:var(--spectrum-accent-color-1100);--spectrum-switch-emphasized-handle-border-color-selected-down:var(--spectrum-accent-color-1100)}.XHynUq_spectrum-ToggleSwitch-switch{background-color:var(--spectrum-switch-emphasized-track-color,var(--spectrum-global-color-gray-300))}.XHynUq_spectrum-ToggleSwitch-switch:before{background-color:var(--spectrum-switch-emphasized-handle-background-color,var(--spectrum-global-color-gray-75));border-color:var(--spectrum-switch-emphasized-handle-border-color,var(--spectrum-global-color-gray-600))}.XHynUq_spectrum-ToggleSwitch-input~.XHynUq_spectrum-ToggleSwitch-label{color:var(--spectrum-switch-emphasized-text-color,var(--spectrum-alias-text-color))}.XHynUq_spectrum-ToggleSwitch-input:checked+.XHynUq_spectrum-ToggleSwitch-switch{background-color:var(--spectrum-switch-emphasized-track-color-selected,var(--spectrum-global-color-blue-500))}.XHynUq_spectrum-ToggleSwitch-input:checked+.XHynUq_spectrum-ToggleSwitch-switch:before{border-color:var(--spectrum-switch-emphasized-handle-border-color-selected,var(--spectrum-global-color-blue-500))}.XHynUq_spectrum-ToggleSwitch.XHynUq_is-hovered .XHynUq_spectrum-ToggleSwitch-input+.XHynUq_spectrum-ToggleSwitch-switch:before{border-color:var(--spectrum-switch-emphasized-handle-border-color-hover,var(--spectrum-global-color-gray-700));box-shadow:none}.XHynUq_spectrum-ToggleSwitch.XHynUq_is-hovered .XHynUq_spectrum-ToggleSwitch-input~.XHynUq_spectrum-ToggleSwitch-label{color:var(--spectrum-switch-emphasized-text-color-hover,var(--spectrum-alias-text-color-hover))}.XHynUq_spectrum-ToggleSwitch.XHynUq_is-hovered .XHynUq_spectrum-ToggleSwitch-input:checked:enabled+.XHynUq_spectrum-ToggleSwitch-switch{background-color:var(--spectrum-switch-emphasized-track-color-selected-hover,var(--spectrum-global-color-blue-600))}.XHynUq_spectrum-ToggleSwitch.XHynUq_is-hovered .XHynUq_spectrum-ToggleSwitch-input:checked:enabled+.XHynUq_spectrum-ToggleSwitch-switch:before{border-color:var(--spectrum-switch-emphasized-handle-border-color-selected-hover,var(--spectrum-global-color-blue-600))}.XHynUq_spectrum-ToggleSwitch:active .XHynUq_spectrum-ToggleSwitch-input+.XHynUq_spectrum-ToggleSwitch-switch:before{border-color:var(--spectrum-switch-emphasized-handle-border-color-down,var(--spectrum-global-color-gray-800))}.XHynUq_spectrum-ToggleSwitch:active .XHynUq_spectrum-ToggleSwitch-input~.XHynUq_spectrum-ToggleSwitch-label{color:var(--spectrum-switch-emphasized-text-color-down,var(--spectrum-alias-text-color-down))}.XHynUq_spectrum-ToggleSwitch:active .XHynUq_spectrum-ToggleSwitch-input:checked:enabled+.XHynUq_spectrum-ToggleSwitch-switch{background-color:var(--spectrum-switch-emphasized-track-color-selected-down,var(--spectrum-global-color-blue-700))}.XHynUq_spectrum-ToggleSwitch:active .XHynUq_spectrum-ToggleSwitch-input:checked:enabled+.XHynUq_spectrum-ToggleSwitch-switch:before{border-color:var(--spectrum-switch-emphasized-handle-border-color-selected-down,var(--spectrum-global-color-blue-700))}.XHynUq_spectrum-ToggleSwitch .XHynUq_spectrum-ToggleSwitch-input:disabled+.XHynUq_spectrum-ToggleSwitch-switch{background-color:var(--spectrum-switch-emphasized-track-color-disabled,var(--spectrum-global-color-gray-300))}.XHynUq_spectrum-ToggleSwitch .XHynUq_spectrum-ToggleSwitch-input:disabled+.XHynUq_spectrum-ToggleSwitch-switch:before{border-color:var(--spectrum-switch-emphasized-handle-border-color-disabled,var(--spectrum-global-color-gray-400))}.XHynUq_spectrum-ToggleSwitch .XHynUq_spectrum-ToggleSwitch-input:disabled~.XHynUq_spectrum-ToggleSwitch-label{color:var(--spectrum-switch-emphasized-text-color-disabled,var(--spectrum-alias-text-color-disabled))}.XHynUq_spectrum-ToggleSwitch .XHynUq_spectrum-ToggleSwitch-input:disabled:checked+.XHynUq_spectrum-ToggleSwitch-switch{background-color:var(--spectrum-switch-emphasized-track-color-selected-disabled,var(--spectrum-global-color-gray-400))}.XHynUq_spectrum-ToggleSwitch .XHynUq_spectrum-ToggleSwitch-input:disabled:checked+.XHynUq_spectrum-ToggleSwitch-switch:before{border-color:var(--spectrum-switch-emphasized-handle-border-color-selected-disabled,var(--spectrum-global-color-gray-400))}.XHynUq_spectrum-ToggleSwitch .XHynUq_spectrum-ToggleSwitch-input:disabled:checked~.XHynUq_spectrum-ToggleSwitch-label{color:var(--spectrum-switch-emphasized-text-color-selected-disabled,var(--spectrum-alias-text-color-disabled))}.XHynUq_spectrum-ToggleSwitch--quiet .XHynUq_spectrum-ToggleSwitch-input:checked+.XHynUq_spectrum-ToggleSwitch-switch{background-color:var(--spectrum-switch-quiet-track-color-selected,var(--spectrum-global-color-gray-700))}.XHynUq_spectrum-ToggleSwitch--quiet .XHynUq_spectrum-ToggleSwitch-input:checked+.XHynUq_spectrum-ToggleSwitch-switch:before{border-color:var(--spectrum-switch-quiet-handle-border-color-selected,var(--spectrum-global-color-gray-700))}.XHynUq_spectrum-ToggleSwitch--quiet.XHynUq_is-hovered .XHynUq_spectrum-ToggleSwitch-input:checked:enabled+.XHynUq_spectrum-ToggleSwitch-switch{background-color:var(--spectrum-switch-quiet-track-color-selected-hover,var(--spectrum-global-color-gray-800))}.XHynUq_spectrum-ToggleSwitch--quiet.XHynUq_is-hovered .XHynUq_spectrum-ToggleSwitch-input:checked:enabled+.XHynUq_spectrum-ToggleSwitch-switch:before{border-color:var(--spectrum-switch-quiet-handle-border-color-selected-hover,var(--spectrum-global-color-gray-800))}.XHynUq_spectrum-ToggleSwitch.XHynUq_spectrum-ToggleSwitch--quiet:active .XHynUq_spectrum-ToggleSwitch-input:checked:enabled+.XHynUq_spectrum-ToggleSwitch-switch{background-color:var(--spectrum-switch-quiet-track-color-selected-down,var(--spectrum-global-color-gray-900))}.XHynUq_spectrum-ToggleSwitch.XHynUq_spectrum-ToggleSwitch--quiet:active .XHynUq_spectrum-ToggleSwitch-input:checked:enabled+.XHynUq_spectrum-ToggleSwitch-switch:before{border-color:var(--spectrum-switch-quiet-handle-border-color-selected-down,var(--spectrum-global-color-gray-900))}:-webkit-any(.XHynUq_spectrum-ToggleSwitch,.XHynUq_spectrum-ToggleSwitch.XHynUq_is-hovered) .XHynUq_spectrum-ToggleSwitch-input.XHynUq_focus-ring+.XHynUq_spectrum-ToggleSwitch-switch:after{box-shadow:0 0 0 var(--spectrum-switch-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size))var(--spectrum-switch-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}:is(.XHynUq_spectrum-ToggleSwitch,.XHynUq_spectrum-ToggleSwitch.XHynUq_is-hovered) .XHynUq_spectrum-ToggleSwitch-input.XHynUq_focus-ring+.XHynUq_spectrum-ToggleSwitch-switch:after{box-shadow:0 0 0 var(--spectrum-switch-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size))var(--spectrum-switch-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}:-webkit-any(.XHynUq_spectrum-ToggleSwitch,.XHynUq_spectrum-ToggleSwitch.XHynUq_is-hovered) .XHynUq_spectrum-ToggleSwitch-input.XHynUq_focus-ring+.XHynUq_spectrum-ToggleSwitch-switch:before{border-color:var(--spectrum-switch-emphasized-handle-border-color-key-focus,var(--spectrum-global-color-gray-700))}:is(.XHynUq_spectrum-ToggleSwitch,.XHynUq_spectrum-ToggleSwitch.XHynUq_is-hovered) .XHynUq_spectrum-ToggleSwitch-input.XHynUq_focus-ring+.XHynUq_spectrum-ToggleSwitch-switch:before{border-color:var(--spectrum-switch-emphasized-handle-border-color-key-focus,var(--spectrum-global-color-gray-700))}:-webkit-any(.XHynUq_spectrum-ToggleSwitch,.XHynUq_spectrum-ToggleSwitch.XHynUq_is-hovered) .XHynUq_spectrum-ToggleSwitch-input.XHynUq_focus-ring:checked+.XHynUq_spectrum-ToggleSwitch-switch{background-color:var(--spectrum-switch-emphasized-track-color-selected-key-focus,var(--spectrum-global-color-blue-600))}:is(.XHynUq_spectrum-ToggleSwitch,.XHynUq_spectrum-ToggleSwitch.XHynUq_is-hovered) .XHynUq_spectrum-ToggleSwitch-input.XHynUq_focus-ring:checked+.XHynUq_spectrum-ToggleSwitch-switch{background-color:var(--spectrum-switch-emphasized-track-color-selected-key-focus,var(--spectrum-global-color-blue-600))}:-webkit-any(.XHynUq_spectrum-ToggleSwitch,.XHynUq_spectrum-ToggleSwitch.XHynUq_is-hovered) .XHynUq_spectrum-ToggleSwitch-input.XHynUq_focus-ring:checked+.XHynUq_spectrum-ToggleSwitch-switch:before{border-color:var(--spectrum-switch-emphasized-handle-border-color-selected-key-focus,var(--spectrum-global-color-blue-600))}:is(.XHynUq_spectrum-ToggleSwitch,.XHynUq_spectrum-ToggleSwitch.XHynUq_is-hovered) .XHynUq_spectrum-ToggleSwitch-input.XHynUq_focus-ring:checked+.XHynUq_spectrum-ToggleSwitch-switch:before{border-color:var(--spectrum-switch-emphasized-handle-border-color-selected-key-focus,var(--spectrum-global-color-blue-600))}:-webkit-any(.XHynUq_spectrum-ToggleSwitch--quiet,.XHynUq_spectrum-ToggleSwitch--quiet.XHynUq_is-hovered) .XHynUq_spectrum-ToggleSwitch-input.XHynUq_focus-ring:checked+.XHynUq_spectrum-ToggleSwitch-switch{background-color:var(--spectrum-switch-quiet-track-color-selected-key-focus,var(--spectrum-global-color-gray-800))}:is(.XHynUq_spectrum-ToggleSwitch--quiet,.XHynUq_spectrum-ToggleSwitch--quiet.XHynUq_is-hovered) .XHynUq_spectrum-ToggleSwitch-input.XHynUq_focus-ring:checked+.XHynUq_spectrum-ToggleSwitch-switch{background-color:var(--spectrum-switch-quiet-track-color-selected-key-focus,var(--spectrum-global-color-gray-800))}:-webkit-any(.XHynUq_spectrum-ToggleSwitch--quiet,.XHynUq_spectrum-ToggleSwitch--quiet.XHynUq_is-hovered) .XHynUq_spectrum-ToggleSwitch-input.XHynUq_focus-ring:checked+.XHynUq_spectrum-ToggleSwitch-switch:before{border-color:var(--spectrum-switch-quiet-handle-border-color-selected-key-focus,var(--spectrum-global-color-gray-800))}:is(.XHynUq_spectrum-ToggleSwitch--quiet,.XHynUq_spectrum-ToggleSwitch--quiet.XHynUq_is-hovered) .XHynUq_spectrum-ToggleSwitch-input.XHynUq_focus-ring:checked+.XHynUq_spectrum-ToggleSwitch-switch:before{border-color:var(--spectrum-switch-quiet-handle-border-color-selected-key-focus,var(--spectrum-global-color-gray-800))}.XHynUq_spectrum-ToggleSwitch--ab .XHynUq_spectrum-ToggleSwitch-input:checked+.XHynUq_spectrum-ToggleSwitch-switch{background-color:var(--spectrum-switch-track-color,var(--spectrum-global-color-gray-300))}.XHynUq_spectrum-ToggleSwitch--ab .XHynUq_spectrum-ToggleSwitch-input:checked+.XHynUq_spectrum-ToggleSwitch-switch:before{border-color:var(--spectrum-switch-handle-border-color,var(--spectrum-global-color-gray-600))}.XHynUq_spectrum-ToggleSwitch--ab .XHynUq_spectrum-ToggleSwitch-input.XHynUq_focus-ring:checked+.XHynUq_spectrum-ToggleSwitch-switch{background-color:var(--spectrum-switch-track-color,var(--spectrum-global-color-gray-300))}.XHynUq_spectrum-ToggleSwitch--ab .XHynUq_spectrum-ToggleSwitch-input.XHynUq_focus-ring:checked+.XHynUq_spectrum-ToggleSwitch-switch:before{border-color:var(--spectrum-switch-handle-border-color-selected,var(--spectrum-global-color-gray-700))}.XHynUq_spectrum-ToggleSwitch--ab .XHynUq_spectrum-ToggleSwitch-input:disabled:checked+.XHynUq_spectrum-ToggleSwitch-switch,.XHynUq_spectrum-ToggleSwitch--ab .XHynUq_spectrum-ToggleSwitch-input:disabled+.XHynUq_spectrum-ToggleSwitch-switch{background-color:var(--spectrum-switch-emphasized-track-color-disabled,var(--spectrum-global-color-gray-300))}.XHynUq_spectrum-ToggleSwitch--ab .XHynUq_spectrum-ToggleSwitch-input:disabled+.XHynUq_spectrum-ToggleSwitch-switch:before{border-color:var(--spectrum-switch-emphasized-handle-border-color-disabled,var(--spectrum-global-color-gray-400))}.XHynUq_spectrum-ToggleSwitch--ab.XHynUq_is-hovered .XHynUq_spectrum-ToggleSwitch-input:checked:enabled+.XHynUq_spectrum-ToggleSwitch-switch{background-color:var(--spectrum-switch-emphasized-track-color,var(--spectrum-global-color-gray-300))}.XHynUq_spectrum-ToggleSwitch--ab.XHynUq_is-hovered .XHynUq_spectrum-ToggleSwitch-input:checked:enabled+.XHynUq_spectrum-ToggleSwitch-switch:before{border-color:var(--spectrum-switch-emphasized-handle-border-color-hover,var(--spectrum-global-color-gray-700))}.XHynUq_spectrum-ToggleSwitch--ab:active .XHynUq_spectrum-ToggleSwitch-input:checked:enabled+.XHynUq_spectrum-ToggleSwitch-switch{background-color:var(--spectrum-switch-emphasized-track-color,var(--spectrum-global-color-gray-300))}.XHynUq_spectrum-ToggleSwitch--ab:active .XHynUq_spectrum-ToggleSwitch-input:checked:enabled+.XHynUq_spectrum-ToggleSwitch-switch:before{border-color:var(--spectrum-switch-emphasized-handle-border-color-down,var(--spectrum-global-color-gray-800))}@media (forced-colors:active){.XHynUq_spectrum-ToggleSwitch{forced-color-adjust:none;--spectrum-switch-emphasized-handle-background-color:ButtonFace;--spectrum-switch-emphasized-handle-border-color:ButtonText;--spectrum-switch-emphasized-handle-border-color-disabled:GrayText;--spectrum-switch-emphasized-handle-border-color-down:Highlight;--spectrum-switch-emphasized-handle-border-color-hover:Highlight;--spectrum-switch-emphasized-handle-border-color-key-focus:Highlight;--spectrum-switch-emphasized-handle-border-color-selected:Highlight;--spectrum-switch-emphasized-handle-border-color-selected-disabled:GrayText;--spectrum-switch-emphasized-handle-border-color-selected-down:Highlight;--spectrum-switch-emphasized-handle-border-color-selected-hover:Highlight;--spectrum-switch-emphasized-handle-border-color-selected-key-focus:Highlight;--spectrum-switch-emphasized-text-color:CanvasText;--spectrum-switch-emphasized-text-color-disabled:GrayText;--spectrum-switch-emphasized-text-color-down:CanvasText;--spectrum-switch-emphasized-text-color-hover:CanvasText;--spectrum-switch-emphasized-text-color-selected-disabled:GrayText;--spectrum-switch-emphasized-track-color:ButtonFace;--spectrum-switch-emphasized-track-color-disabled:ButtonFace;--spectrum-switch-emphasized-track-color-selected:Highlight;--spectrum-switch-emphasized-track-color-selected-disabled:GrayText;--spectrum-switch-emphasized-track-color-selected-down:Highlight;--spectrum-switch-emphasized-track-color-selected-hover:Highlight;--spectrum-switch-emphasized-track-color-selected-key-focus:Highlight;--spectrum-switch-focus-ring-color-key-focus:ButtonText;--spectrum-switch-handle-border-color:ButtonText;--spectrum-switch-handle-border-color-selected:Highlight;--spectrum-switch-quiet-handle-border-color-selected:Highlight;--spectrum-switch-quiet-handle-border-color-selected-down:Highlight;--spectrum-switch-quiet-handle-border-color-selected-hover:Highlight;--spectrum-switch-quiet-handle-border-color-selected-key-focus:Highlight;--spectrum-switch-quiet-track-color-selected:Highlight;--spectrum-switch-quiet-track-color-selected-down:Highlight;--spectrum-switch-quiet-track-color-selected-hover:Highlight;--spectrum-switch-quiet-track-color-selected-key-focus:Highlight;--spectrum-switch-track-color:ButtonFace;--spectrum-switch-track-color-disabled:ButtonFace}.XHynUq_spectrum-ToggleSwitch .XHynUq_spectrum-ToggleSwitch-input:not(:checked)+.XHynUq_spectrum-ToggleSwitch-switch{box-shadow:inset 0 0 0 1px var(--spectrum-switch-handle-border-color,var(--spectrum-global-color-gray-600))}.XHynUq_spectrum-ToggleSwitch.XHynUq_is-hovered .XHynUq_spectrum-ToggleSwitch-input:not(:checked)+.XHynUq_spectrum-ToggleSwitch-switch{box-shadow:inset 0 0 0 1px var(--spectrum-switch-emphasized-handle-border-color-hover,var(--spectrum-global-color-gray-700))}.XHynUq_spectrum-ToggleSwitch .XHynUq_spectrum-ToggleSwitch-input:not(:checked):focus+.XHynUq_spectrum-ToggleSwitch-switch{box-shadow:inset 0 0 0 1px var(--spectrum-switch-emphasized-handle-border-color-key-focus,var(--spectrum-global-color-gray-700))}.XHynUq_spectrum-ToggleSwitch .XHynUq_spectrum-ToggleSwitch-input:disabled+.XHynUq_spectrum-ToggleSwitch-switch{box-shadow:inset 0 0 0 1px var(--spectrum-switch-emphasized-handle-border-color-disabled,var(--spectrum-global-color-gray-400))}}