primer_view_components 0.0.108 → 0.0.110

Sign up to get free protection for your applications and to get access to all the features.
Files changed (101) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +38 -0
  3. data/app/assets/javascripts/primer_view_components.js +1 -1
  4. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  5. data/app/assets/styles/primer_view_components.css +1 -1
  6. data/app/assets/styles/primer_view_components.css.map +1 -1
  7. data/app/components/primer/alpha/action_list.css.json +1 -1
  8. data/app/components/primer/{beta → alpha}/banner.css +0 -0
  9. data/app/components/primer/alpha/banner.css.json +1 -0
  10. data/app/components/primer/{beta → alpha}/banner.css.map +1 -1
  11. data/app/components/primer/{beta → alpha}/banner.html.erb +2 -2
  12. data/app/components/primer/{beta → alpha}/banner.pcss +1 -0
  13. data/app/components/primer/{beta → alpha}/banner.rb +14 -15
  14. data/app/components/primer/alpha/dialog.rb +0 -1
  15. data/app/components/primer/alpha/segmented_control/item.rb +1 -1
  16. data/app/components/primer/alpha/segmented_control.css.json +1 -1
  17. data/app/components/primer/alpha/segmented_control.css.map +1 -1
  18. data/app/components/primer/alpha/segmented_control.pcss +1 -0
  19. data/app/components/primer/alpha/toggle_switch.css +1 -0
  20. data/app/components/primer/alpha/toggle_switch.css.json +1 -0
  21. data/app/components/primer/alpha/toggle_switch.css.map +1 -0
  22. data/app/components/primer/alpha/toggle_switch.pcss +244 -0
  23. data/app/components/primer/{beta → alpha}/x_banner.d.ts +1 -3
  24. data/app/components/primer/{beta → alpha}/x_banner.js +2 -4
  25. data/app/components/primer/{beta → alpha}/x_banner.ts +2 -3
  26. data/app/components/primer/beta/blankslate.css +1 -0
  27. data/app/components/primer/beta/blankslate.css.json +1 -0
  28. data/app/components/primer/beta/blankslate.css.map +1 -0
  29. data/app/components/primer/beta/blankslate.pcss +90 -0
  30. data/app/components/primer/beta/breadcrumbs.css +1 -0
  31. data/app/components/primer/beta/breadcrumbs.css.json +1 -0
  32. data/app/components/primer/beta/breadcrumbs.css.map +1 -0
  33. data/app/components/primer/beta/breadcrumbs.pcss +30 -0
  34. data/app/components/primer/beta/button.css.json +1 -1
  35. data/app/components/primer/beta/button.css.map +1 -1
  36. data/app/components/primer/beta/button.pcss +0 -4
  37. data/app/components/primer/beta/counter.css +1 -0
  38. data/app/components/primer/beta/counter.css.json +1 -0
  39. data/app/components/primer/beta/counter.css.map +1 -0
  40. data/app/components/primer/beta/counter.pcss +35 -0
  41. data/app/components/primer/beta/label.css +1 -0
  42. data/app/components/primer/beta/label.css.json +1 -0
  43. data/app/components/primer/beta/label.css.map +1 -0
  44. data/app/components/primer/beta/label.pcss +103 -0
  45. data/app/components/primer/beta/progress_bar.css +1 -0
  46. data/app/components/primer/beta/progress_bar.css.json +1 -0
  47. data/app/components/primer/beta/progress_bar.css.map +1 -0
  48. data/app/components/primer/{progress_bar_component.html.erb → beta/progress_bar.html.erb} +0 -0
  49. data/app/components/primer/beta/progress_bar.pcss +26 -0
  50. data/app/components/primer/beta/progress_bar.rb +72 -0
  51. data/app/components/primer/beta/truncate.css +1 -0
  52. data/app/components/primer/beta/truncate.css.json +1 -0
  53. data/app/components/primer/beta/truncate.css.map +1 -0
  54. data/app/components/primer/beta/truncate.pcss +31 -0
  55. data/app/components/primer/primer.d.ts +1 -1
  56. data/app/components/primer/primer.js +1 -1
  57. data/app/components/primer/primer.pcss +12 -2
  58. data/app/components/primer/primer.ts +1 -1
  59. data/app/components/primer/progress_bar_component.rb +2 -65
  60. data/app/components/primer/state_component.css +1 -0
  61. data/app/components/primer/state_component.css.json +1 -0
  62. data/app/components/primer/state_component.css.map +1 -0
  63. data/app/components/primer/state_component.pcss +50 -0
  64. data/app/components/primer/subhead_component.css +1 -0
  65. data/app/components/primer/subhead_component.css.json +1 -0
  66. data/app/components/primer/subhead_component.css.map +1 -0
  67. data/app/components/primer/subhead_component.pcss +49 -0
  68. data/app/components/primer/truncate.css +1 -0
  69. data/app/components/primer/truncate.css.json +1 -0
  70. data/app/components/primer/truncate.css.map +1 -0
  71. data/app/components/primer/truncate.pcss +30 -0
  72. data/app/forms/name_with_question_mark_form/enabled_caption.html.erb +1 -0
  73. data/app/forms/name_with_question_mark_form.rb +11 -0
  74. data/app/lib/primer/css/layout.css +1918 -0
  75. data/app/lib/primer/css/layout.css.json +1 -0
  76. data/app/lib/primer/css/utilities.css +7304 -0
  77. data/app/lib/primer/css/utilities.css.json +1 -0
  78. data/lib/primer/classify/utilities.rb +1 -1
  79. data/lib/primer/deprecations.rb +2 -1
  80. data/lib/primer/forms/base.rb +7 -3
  81. data/lib/primer/view_components/version.rb +1 -1
  82. data/lib/tasks/docs.rake +3 -3
  83. data/lib/tasks/test.rake +8 -0
  84. data/lib/tasks/utilities.rake +3 -18
  85. data/previews/primer/alpha/banner_preview/with_action_button.html.erb +4 -0
  86. data/previews/primer/{beta → alpha}/banner_preview/with_action_content.html.erb +1 -1
  87. data/previews/primer/alpha/banner_preview.rb +97 -0
  88. data/previews/primer/alpha/segmented_control_preview.rb +106 -20
  89. data/previews/primer/beta/counter_preview.rb +55 -8
  90. data/previews/primer/beta/progress_bar_preview.rb +60 -0
  91. data/previews/primer/forms/forms_preview/name_with_question_mark_form.html.erb +3 -0
  92. data/previews/primer/forms/forms_preview.rb +2 -0
  93. data/static/arguments.json +76 -76
  94. data/static/audited_at.json +2 -1
  95. data/static/constants.json +34 -26
  96. data/static/statuses.json +3 -2
  97. metadata +64 -16
  98. data/app/components/primer/beta/banner.css.json +0 -1
  99. data/previews/primer/beta/banner_preview/with_action_button.html.erb +0 -4
  100. data/previews/primer/beta/banner_preview.rb +0 -54
  101. data/previews/primer/progress_bar_component_preview.rb +0 -28
@@ -0,0 +1,1918 @@
1
+ .AppFrame .AppFrame-a11yNav {
2
+ position: absolute;
3
+ z-index: 1000;
4
+ display: flex;
5
+ width: 100%;
6
+ padding: var(--base-size-16, 16px);
7
+ background: var(--color-canvas-inset);
8
+ padding-block-end: calc(var(--base-size-16, 16px) - var(--primer-borderWidth-thin, 1px));
9
+ isolation: isolate;
10
+ align-items: center;
11
+ gap: var(--base-size-8, 8px)
12
+ }
13
+
14
+ .AppFrame .AppFrame-a11yNav:not(:focus-within) {
15
+ width: 1px;
16
+ height: 1px;
17
+ padding: 0;
18
+ margin: -1px;
19
+ overflow: hidden;
20
+ clip: rect(1px, 1px, 1px, 1px);
21
+ border: 0
22
+ }
23
+
24
+ .AppFrame .AppFrame-a11yNav:focus-within {
25
+ top: 0;
26
+ left: 0
27
+ }
28
+
29
+ @media(max-width: 767.98px) {
30
+ .AppFrame .AppFrame-a11yNav:focus-within {
31
+ justify-content: center
32
+ }
33
+ }
34
+
35
+ .AppFrame .AppFrame-a11yLink {
36
+ transition: none
37
+ }
38
+
39
+ .AppFrame .AppFrame-a11yLink:not(:focus) {
40
+ display: block;
41
+ width: var(--base-size-8, 8px);
42
+ height: var(--base-size-8, 8px);
43
+ overflow: hidden;
44
+ text-indent: var(--base-size-128, 128px);
45
+ pointer-events: none;
46
+ background: var(--color-border-default);
47
+ border-radius: var(--primer-borderRadius-full, 100vh)
48
+ }
49
+
50
+ .AppFrame .AppFrame-a11yLink:focus {
51
+ z-index: 20;
52
+ display: grid;
53
+ width: auto;
54
+ height: auto;
55
+ min-height: var(--primer-control-medium-size, 32px);
56
+ padding: 0 var(--primer-control-medium-paddingInline-spacious, 16px);
57
+ overflow: auto;
58
+ color: var(--color-fg-on-emphasis);
59
+ background: var(--color-accent-emphasis);
60
+ border-radius: var(--primer-borderRadius-full, 100vh);
61
+ align-items: center
62
+ }
63
+
64
+ @media(pointer: coarse) {
65
+ .AppFrame .AppFrame-a11yLink:focus::after {
66
+ position: absolute;
67
+ top: 50%;
68
+ left: 50%;
69
+ width: 100%;
70
+ height: 100%;
71
+ min-height: var(--primer-control-minTarget-coarse, 44px);
72
+ content: "";
73
+ transform: translateX(-50%) translateY(-50%)
74
+ }
75
+ }
76
+
77
+ @media(prefers-reduced-motion: no-preference) {
78
+ .AppFrame .AppFrame-a11yLink:focus {
79
+ animation: AppFrame-a11yLink-focus 200ms ease-out
80
+ }
81
+ }
82
+
83
+ @keyframes AppFrame-a11yLink-focus {
84
+ 0% {
85
+ color: var(--color-accent-emphasis);
86
+ transform: scale(0.3, 0.25)
87
+ }
88
+
89
+ 50% {
90
+ color: var(--color-accent-emphasis);
91
+ transform: scale(1, 1)
92
+ }
93
+
94
+ 55% {
95
+ color: var(--color-fg-on-emphasis)
96
+ }
97
+
98
+ 100% {
99
+ transform: scaleX(1)
100
+ }
101
+ }
102
+
103
+ .AppFrame .AppFrame-main {
104
+ display: flex;
105
+ min-height: 100vh;
106
+ flex-direction: column
107
+ }
108
+
109
+ @supports(height: 100dvh) {
110
+ .AppFrame .AppFrame-main {
111
+ min-height: 100dvh
112
+ }
113
+ }
114
+
115
+ .AppFrame .AppFrame-header-wrapper {
116
+ position: relative;
117
+ height: min-content;
118
+ overflow: visible
119
+ }
120
+
121
+ .AppFrame .AppFrame-header-wrapper .AppFrame-header {
122
+ position: sticky;
123
+ top: 0;
124
+ z-index: 1
125
+ }
126
+
127
+ .AppFrame .AppFrame-header {
128
+ flex: 0 0 auto
129
+ }
130
+
131
+ .AppFrame .AppFrame-subheader {
132
+ flex: 0 0 auto
133
+ }
134
+
135
+ .AppFrame .AppFrame-body {
136
+ flex: 1 0;
137
+ height: 100%
138
+ }
139
+
140
+ .AppFrame .AppFrame-footer {
141
+ flex: 0 0 auto
142
+ }
143
+
144
+ .container-sm {
145
+ max-width: 544px;
146
+ margin-right: auto;
147
+ margin-left: auto
148
+ }
149
+
150
+ .container-md {
151
+ max-width: 768px;
152
+ margin-right: auto;
153
+ margin-left: auto
154
+ }
155
+
156
+ .container-lg {
157
+ max-width: 1012px;
158
+ margin-right: auto;
159
+ margin-left: auto
160
+ }
161
+
162
+ .container-xl {
163
+ max-width: 1280px;
164
+ margin-right: auto;
165
+ margin-left: auto
166
+ }
167
+
168
+ .col-1 {
169
+ width: 8.33333333%
170
+ }
171
+
172
+ .col-2 {
173
+ width: 16.66666666%
174
+ }
175
+
176
+ .col-3 {
177
+ width: 24.99999999%
178
+ }
179
+
180
+ .col-4 {
181
+ width: 33.33333332%
182
+ }
183
+
184
+ .col-5 {
185
+ width: 41.66666665%
186
+ }
187
+
188
+ .col-6 {
189
+ width: 49.99999998%
190
+ }
191
+
192
+ .col-7 {
193
+ width: 58.33333331%
194
+ }
195
+
196
+ .col-8 {
197
+ width: 66.66666664%
198
+ }
199
+
200
+ .col-9 {
201
+ width: 74.99999997%
202
+ }
203
+
204
+ .col-10 {
205
+ width: 83.3333333%
206
+ }
207
+
208
+ .col-11 {
209
+ width: 91.66666663%
210
+ }
211
+
212
+ .col-12 {
213
+ width: 100%
214
+ }
215
+
216
+ @media(min-width: 544px) {
217
+ .col-sm-1 {
218
+ width: 8.33333333%
219
+ }
220
+
221
+ .col-sm-2 {
222
+ width: 16.66666666%
223
+ }
224
+
225
+ .col-sm-3 {
226
+ width: 24.99999999%
227
+ }
228
+
229
+ .col-sm-4 {
230
+ width: 33.33333332%
231
+ }
232
+
233
+ .col-sm-5 {
234
+ width: 41.66666665%
235
+ }
236
+
237
+ .col-sm-6 {
238
+ width: 49.99999998%
239
+ }
240
+
241
+ .col-sm-7 {
242
+ width: 58.33333331%
243
+ }
244
+
245
+ .col-sm-8 {
246
+ width: 66.66666664%
247
+ }
248
+
249
+ .col-sm-9 {
250
+ width: 74.99999997%
251
+ }
252
+
253
+ .col-sm-10 {
254
+ width: 83.3333333%
255
+ }
256
+
257
+ .col-sm-11 {
258
+ width: 91.66666663%
259
+ }
260
+
261
+ .col-sm-12 {
262
+ width: 100%
263
+ }
264
+ }
265
+
266
+ @media(min-width: 768px) {
267
+ .col-md-1 {
268
+ width: 8.33333333%
269
+ }
270
+
271
+ .col-md-2 {
272
+ width: 16.66666666%
273
+ }
274
+
275
+ .col-md-3 {
276
+ width: 24.99999999%
277
+ }
278
+
279
+ .col-md-4 {
280
+ width: 33.33333332%
281
+ }
282
+
283
+ .col-md-5 {
284
+ width: 41.66666665%
285
+ }
286
+
287
+ .col-md-6 {
288
+ width: 49.99999998%
289
+ }
290
+
291
+ .col-md-7 {
292
+ width: 58.33333331%
293
+ }
294
+
295
+ .col-md-8 {
296
+ width: 66.66666664%
297
+ }
298
+
299
+ .col-md-9 {
300
+ width: 74.99999997%
301
+ }
302
+
303
+ .col-md-10 {
304
+ width: 83.3333333%
305
+ }
306
+
307
+ .col-md-11 {
308
+ width: 91.66666663%
309
+ }
310
+
311
+ .col-md-12 {
312
+ width: 100%
313
+ }
314
+ }
315
+
316
+ @media(min-width: 1012px) {
317
+ .col-lg-1 {
318
+ width: 8.33333333%
319
+ }
320
+
321
+ .col-lg-2 {
322
+ width: 16.66666666%
323
+ }
324
+
325
+ .col-lg-3 {
326
+ width: 24.99999999%
327
+ }
328
+
329
+ .col-lg-4 {
330
+ width: 33.33333332%
331
+ }
332
+
333
+ .col-lg-5 {
334
+ width: 41.66666665%
335
+ }
336
+
337
+ .col-lg-6 {
338
+ width: 49.99999998%
339
+ }
340
+
341
+ .col-lg-7 {
342
+ width: 58.33333331%
343
+ }
344
+
345
+ .col-lg-8 {
346
+ width: 66.66666664%
347
+ }
348
+
349
+ .col-lg-9 {
350
+ width: 74.99999997%
351
+ }
352
+
353
+ .col-lg-10 {
354
+ width: 83.3333333%
355
+ }
356
+
357
+ .col-lg-11 {
358
+ width: 91.66666663%
359
+ }
360
+
361
+ .col-lg-12 {
362
+ width: 100%
363
+ }
364
+ }
365
+
366
+ @media(min-width: 1280px) {
367
+ .col-xl-1 {
368
+ width: 8.33333333%
369
+ }
370
+
371
+ .col-xl-2 {
372
+ width: 16.66666666%
373
+ }
374
+
375
+ .col-xl-3 {
376
+ width: 24.99999999%
377
+ }
378
+
379
+ .col-xl-4 {
380
+ width: 33.33333332%
381
+ }
382
+
383
+ .col-xl-5 {
384
+ width: 41.66666665%
385
+ }
386
+
387
+ .col-xl-6 {
388
+ width: 49.99999998%
389
+ }
390
+
391
+ .col-xl-7 {
392
+ width: 58.33333331%
393
+ }
394
+
395
+ .col-xl-8 {
396
+ width: 66.66666664%
397
+ }
398
+
399
+ .col-xl-9 {
400
+ width: 74.99999997%
401
+ }
402
+
403
+ .col-xl-10 {
404
+ width: 83.3333333%
405
+ }
406
+
407
+ .col-xl-11 {
408
+ width: 91.66666663%
409
+ }
410
+
411
+ .col-xl-12 {
412
+ width: 100%
413
+ }
414
+ }
415
+
416
+ .gutter {
417
+ margin-right: -16px;
418
+ margin-left: -16px
419
+ }
420
+
421
+ .gutter>[class*=col-] {
422
+ padding-right: 16px !important;
423
+ padding-left: 16px !important
424
+ }
425
+
426
+ .gutter-condensed {
427
+ margin-right: -8px;
428
+ margin-left: -8px
429
+ }
430
+
431
+ .gutter-condensed>[class*=col-] {
432
+ padding-right: 8px !important;
433
+ padding-left: 8px !important
434
+ }
435
+
436
+ .gutter-spacious {
437
+ margin-right: -24px;
438
+ margin-left: -24px
439
+ }
440
+
441
+ .gutter-spacious>[class*=col-] {
442
+ padding-right: 24px !important;
443
+ padding-left: 24px !important
444
+ }
445
+
446
+ @media(min-width: 544px) {
447
+ .gutter-sm {
448
+ margin-right: -16px;
449
+ margin-left: -16px
450
+ }
451
+
452
+ .gutter-sm>[class*=col-] {
453
+ padding-right: 16px !important;
454
+ padding-left: 16px !important
455
+ }
456
+
457
+ .gutter-sm-condensed {
458
+ margin-right: -8px;
459
+ margin-left: -8px
460
+ }
461
+
462
+ .gutter-sm-condensed>[class*=col-] {
463
+ padding-right: 8px !important;
464
+ padding-left: 8px !important
465
+ }
466
+
467
+ .gutter-sm-spacious {
468
+ margin-right: -24px;
469
+ margin-left: -24px
470
+ }
471
+
472
+ .gutter-sm-spacious>[class*=col-] {
473
+ padding-right: 24px !important;
474
+ padding-left: 24px !important
475
+ }
476
+ }
477
+
478
+ @media(min-width: 768px) {
479
+ .gutter-md {
480
+ margin-right: -16px;
481
+ margin-left: -16px
482
+ }
483
+
484
+ .gutter-md>[class*=col-] {
485
+ padding-right: 16px !important;
486
+ padding-left: 16px !important
487
+ }
488
+
489
+ .gutter-md-condensed {
490
+ margin-right: -8px;
491
+ margin-left: -8px
492
+ }
493
+
494
+ .gutter-md-condensed>[class*=col-] {
495
+ padding-right: 8px !important;
496
+ padding-left: 8px !important
497
+ }
498
+
499
+ .gutter-md-spacious {
500
+ margin-right: -24px;
501
+ margin-left: -24px
502
+ }
503
+
504
+ .gutter-md-spacious>[class*=col-] {
505
+ padding-right: 24px !important;
506
+ padding-left: 24px !important
507
+ }
508
+ }
509
+
510
+ @media(min-width: 1012px) {
511
+ .gutter-lg {
512
+ margin-right: -16px;
513
+ margin-left: -16px
514
+ }
515
+
516
+ .gutter-lg>[class*=col-] {
517
+ padding-right: 16px !important;
518
+ padding-left: 16px !important
519
+ }
520
+
521
+ .gutter-lg-condensed {
522
+ margin-right: -8px;
523
+ margin-left: -8px
524
+ }
525
+
526
+ .gutter-lg-condensed>[class*=col-] {
527
+ padding-right: 8px !important;
528
+ padding-left: 8px !important
529
+ }
530
+
531
+ .gutter-lg-spacious {
532
+ margin-right: -24px;
533
+ margin-left: -24px
534
+ }
535
+
536
+ .gutter-lg-spacious>[class*=col-] {
537
+ padding-right: 24px !important;
538
+ padding-left: 24px !important
539
+ }
540
+ }
541
+
542
+ @media(min-width: 1280px) {
543
+ .gutter-xl {
544
+ margin-right: -16px;
545
+ margin-left: -16px
546
+ }
547
+
548
+ .gutter-xl>[class*=col-] {
549
+ padding-right: 16px !important;
550
+ padding-left: 16px !important
551
+ }
552
+
553
+ .gutter-xl-condensed {
554
+ margin-right: -8px;
555
+ margin-left: -8px
556
+ }
557
+
558
+ .gutter-xl-condensed>[class*=col-] {
559
+ padding-right: 8px !important;
560
+ padding-left: 8px !important
561
+ }
562
+
563
+ .gutter-xl-spacious {
564
+ margin-right: -24px;
565
+ margin-left: -24px
566
+ }
567
+
568
+ .gutter-xl-spacious>[class*=col-] {
569
+ padding-right: 24px !important;
570
+ padding-left: 24px !important
571
+ }
572
+ }
573
+
574
+ .offset-1 {
575
+ margin-left: 8.33333333% !important
576
+ }
577
+
578
+ .offset-2 {
579
+ margin-left: 16.66666666% !important
580
+ }
581
+
582
+ .offset-3 {
583
+ margin-left: 24.99999999% !important
584
+ }
585
+
586
+ .offset-4 {
587
+ margin-left: 33.33333332% !important
588
+ }
589
+
590
+ .offset-5 {
591
+ margin-left: 41.66666665% !important
592
+ }
593
+
594
+ .offset-6 {
595
+ margin-left: 49.99999998% !important
596
+ }
597
+
598
+ .offset-7 {
599
+ margin-left: 58.33333331% !important
600
+ }
601
+
602
+ .offset-8 {
603
+ margin-left: 66.66666664% !important
604
+ }
605
+
606
+ .offset-9 {
607
+ margin-left: 74.99999997% !important
608
+ }
609
+
610
+ .offset-10 {
611
+ margin-left: 83.3333333% !important
612
+ }
613
+
614
+ .offset-11 {
615
+ margin-left: 91.66666663% !important
616
+ }
617
+
618
+ @media(min-width: 544px) {
619
+ .offset-sm-1 {
620
+ margin-left: 8.33333333% !important
621
+ }
622
+
623
+ .offset-sm-2 {
624
+ margin-left: 16.66666666% !important
625
+ }
626
+
627
+ .offset-sm-3 {
628
+ margin-left: 24.99999999% !important
629
+ }
630
+
631
+ .offset-sm-4 {
632
+ margin-left: 33.33333332% !important
633
+ }
634
+
635
+ .offset-sm-5 {
636
+ margin-left: 41.66666665% !important
637
+ }
638
+
639
+ .offset-sm-6 {
640
+ margin-left: 49.99999998% !important
641
+ }
642
+
643
+ .offset-sm-7 {
644
+ margin-left: 58.33333331% !important
645
+ }
646
+
647
+ .offset-sm-8 {
648
+ margin-left: 66.66666664% !important
649
+ }
650
+
651
+ .offset-sm-9 {
652
+ margin-left: 74.99999997% !important
653
+ }
654
+
655
+ .offset-sm-10 {
656
+ margin-left: 83.3333333% !important
657
+ }
658
+
659
+ .offset-sm-11 {
660
+ margin-left: 91.66666663% !important
661
+ }
662
+ }
663
+
664
+ @media(min-width: 768px) {
665
+ .offset-md-1 {
666
+ margin-left: 8.33333333% !important
667
+ }
668
+
669
+ .offset-md-2 {
670
+ margin-left: 16.66666666% !important
671
+ }
672
+
673
+ .offset-md-3 {
674
+ margin-left: 24.99999999% !important
675
+ }
676
+
677
+ .offset-md-4 {
678
+ margin-left: 33.33333332% !important
679
+ }
680
+
681
+ .offset-md-5 {
682
+ margin-left: 41.66666665% !important
683
+ }
684
+
685
+ .offset-md-6 {
686
+ margin-left: 49.99999998% !important
687
+ }
688
+
689
+ .offset-md-7 {
690
+ margin-left: 58.33333331% !important
691
+ }
692
+
693
+ .offset-md-8 {
694
+ margin-left: 66.66666664% !important
695
+ }
696
+
697
+ .offset-md-9 {
698
+ margin-left: 74.99999997% !important
699
+ }
700
+
701
+ .offset-md-10 {
702
+ margin-left: 83.3333333% !important
703
+ }
704
+
705
+ .offset-md-11 {
706
+ margin-left: 91.66666663% !important
707
+ }
708
+ }
709
+
710
+ @media(min-width: 1012px) {
711
+ .offset-lg-1 {
712
+ margin-left: 8.33333333% !important
713
+ }
714
+
715
+ .offset-lg-2 {
716
+ margin-left: 16.66666666% !important
717
+ }
718
+
719
+ .offset-lg-3 {
720
+ margin-left: 24.99999999% !important
721
+ }
722
+
723
+ .offset-lg-4 {
724
+ margin-left: 33.33333332% !important
725
+ }
726
+
727
+ .offset-lg-5 {
728
+ margin-left: 41.66666665% !important
729
+ }
730
+
731
+ .offset-lg-6 {
732
+ margin-left: 49.99999998% !important
733
+ }
734
+
735
+ .offset-lg-7 {
736
+ margin-left: 58.33333331% !important
737
+ }
738
+
739
+ .offset-lg-8 {
740
+ margin-left: 66.66666664% !important
741
+ }
742
+
743
+ .offset-lg-9 {
744
+ margin-left: 74.99999997% !important
745
+ }
746
+
747
+ .offset-lg-10 {
748
+ margin-left: 83.3333333% !important
749
+ }
750
+
751
+ .offset-lg-11 {
752
+ margin-left: 91.66666663% !important
753
+ }
754
+ }
755
+
756
+ @media(min-width: 1280px) {
757
+ .offset-xl-1 {
758
+ margin-left: 8.33333333% !important
759
+ }
760
+
761
+ .offset-xl-2 {
762
+ margin-left: 16.66666666% !important
763
+ }
764
+
765
+ .offset-xl-3 {
766
+ margin-left: 24.99999999% !important
767
+ }
768
+
769
+ .offset-xl-4 {
770
+ margin-left: 33.33333332% !important
771
+ }
772
+
773
+ .offset-xl-5 {
774
+ margin-left: 41.66666665% !important
775
+ }
776
+
777
+ .offset-xl-6 {
778
+ margin-left: 49.99999998% !important
779
+ }
780
+
781
+ .offset-xl-7 {
782
+ margin-left: 58.33333331% !important
783
+ }
784
+
785
+ .offset-xl-8 {
786
+ margin-left: 66.66666664% !important
787
+ }
788
+
789
+ .offset-xl-9 {
790
+ margin-left: 74.99999997% !important
791
+ }
792
+
793
+ .offset-xl-10 {
794
+ margin-left: 83.3333333% !important
795
+ }
796
+
797
+ .offset-xl-11 {
798
+ margin-left: 91.66666663% !important
799
+ }
800
+ }
801
+
802
+ .Layout {
803
+ display: grid;
804
+ --Layout-sidebar-width: 220px;
805
+ --Layout-gutter: 16px;
806
+ grid-auto-flow: column;
807
+ grid-template-columns: auto 0 minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter)));
808
+ grid-gap: var(--Layout-gutter)
809
+ }
810
+
811
+ @media(max-width: calc(544px - 0.02px)) {
812
+ .Layout {
813
+ grid-auto-flow: row;
814
+ grid-template-columns: 1fr !important
815
+ }
816
+
817
+ .Layout .Layout-sidebar,
818
+ .Layout .Layout-divider,
819
+ .Layout .Layout-main {
820
+ width: 100% !important;
821
+ grid-column: 1 !important
822
+ }
823
+
824
+ .Layout.Layout--sidebarPosition-flowRow-start .Layout-sidebar {
825
+ grid-row: 1
826
+ }
827
+
828
+ .Layout.Layout--sidebarPosition-flowRow-start .Layout-main {
829
+ grid-row: 2/span 2
830
+ }
831
+
832
+ .Layout.Layout--sidebarPosition-flowRow-end .Layout-sidebar {
833
+ grid-row: 2/span 2
834
+ }
835
+
836
+ .Layout.Layout--sidebarPosition-flowRow-end .Layout-main {
837
+ grid-row: 1
838
+ }
839
+
840
+ .Layout.Layout--sidebarPosition-flowRow-none .Layout-sidebar {
841
+ display: none
842
+ }
843
+
844
+ .Layout.Layout--divided {
845
+ --Layout-gutter: 0
846
+ }
847
+
848
+ .Layout.Layout--divided .Layout-divider {
849
+ height: 1px;
850
+ grid-row: 2
851
+ }
852
+
853
+ .Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden {
854
+ display: none
855
+ }
856
+
857
+ .Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow {
858
+ height: 8px;
859
+ margin-right: 0;
860
+ background: var(--color-canvas-inset);
861
+ border-color: var(--color-border-default);
862
+ border-style: solid;
863
+ border-width: 1px 0
864
+ }
865
+
866
+ .Layout.Layout--divided .Layout-main {
867
+ grid-row: 3/span 1
868
+ }
869
+
870
+ .Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar {
871
+ grid-row: 3/span 1
872
+ }
873
+
874
+ .Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main {
875
+ grid-row: 1
876
+ }
877
+ }
878
+
879
+ @media(max-width: calc(768px - 0.02px)) {
880
+ .Layout.Layout--flowRow-until-md {
881
+ grid-auto-flow: row;
882
+ grid-template-columns: 1fr !important
883
+ }
884
+
885
+ .Layout.Layout--flowRow-until-md .Layout-sidebar,
886
+ .Layout.Layout--flowRow-until-md .Layout-divider,
887
+ .Layout.Layout--flowRow-until-md .Layout-main {
888
+ width: 100% !important;
889
+ grid-column: 1 !important
890
+ }
891
+
892
+ .Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-sidebar {
893
+ grid-row: 1
894
+ }
895
+
896
+ .Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-main {
897
+ grid-row: 2/span 2
898
+ }
899
+
900
+ .Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-sidebar {
901
+ grid-row: 2/span 2
902
+ }
903
+
904
+ .Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-main {
905
+ grid-row: 1
906
+ }
907
+
908
+ .Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-none .Layout-sidebar {
909
+ display: none
910
+ }
911
+
912
+ .Layout.Layout--flowRow-until-md.Layout--divided {
913
+ --Layout-gutter: 0
914
+ }
915
+
916
+ .Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider {
917
+ height: 1px;
918
+ grid-row: 2
919
+ }
920
+
921
+ .Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden {
922
+ display: none
923
+ }
924
+
925
+ .Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow {
926
+ height: 8px;
927
+ margin-right: 0;
928
+ background: var(--color-canvas-inset);
929
+ border-color: var(--color-border-default);
930
+ border-style: solid;
931
+ border-width: 1px 0
932
+ }
933
+
934
+ .Layout.Layout--flowRow-until-md.Layout--divided .Layout-main {
935
+ grid-row: 3/span 1
936
+ }
937
+
938
+ .Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar {
939
+ grid-row: 3/span 1
940
+ }
941
+
942
+ .Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main {
943
+ grid-row: 1
944
+ }
945
+ }
946
+
947
+ @media(max-width: calc(1012px - 0.02px)) {
948
+ .Layout.Layout--flowRow-until-lg {
949
+ grid-auto-flow: row;
950
+ grid-template-columns: 1fr !important
951
+ }
952
+
953
+ .Layout.Layout--flowRow-until-lg .Layout-sidebar,
954
+ .Layout.Layout--flowRow-until-lg .Layout-divider,
955
+ .Layout.Layout--flowRow-until-lg .Layout-main {
956
+ width: 100% !important;
957
+ grid-column: 1 !important
958
+ }
959
+
960
+ .Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-sidebar {
961
+ grid-row: 1
962
+ }
963
+
964
+ .Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-main {
965
+ grid-row: 2/span 2
966
+ }
967
+
968
+ .Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-sidebar {
969
+ grid-row: 2/span 2
970
+ }
971
+
972
+ .Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-main {
973
+ grid-row: 1
974
+ }
975
+
976
+ .Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-none .Layout-sidebar {
977
+ display: none
978
+ }
979
+
980
+ .Layout.Layout--flowRow-until-lg.Layout--divided {
981
+ --Layout-gutter: 0
982
+ }
983
+
984
+ .Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider {
985
+ height: 1px;
986
+ grid-row: 2
987
+ }
988
+
989
+ .Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden {
990
+ display: none
991
+ }
992
+
993
+ .Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow {
994
+ height: 8px;
995
+ margin-right: 0;
996
+ background: var(--color-canvas-inset);
997
+ border-color: var(--color-border-default);
998
+ border-style: solid;
999
+ border-width: 1px 0
1000
+ }
1001
+
1002
+ .Layout.Layout--flowRow-until-lg.Layout--divided .Layout-main {
1003
+ grid-row: 3/span 1
1004
+ }
1005
+
1006
+ .Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar {
1007
+ grid-row: 3/span 1
1008
+ }
1009
+
1010
+ .Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main {
1011
+ grid-row: 1
1012
+ }
1013
+ }
1014
+
1015
+ .Layout .Layout-sidebar {
1016
+ grid-column: 1
1017
+ }
1018
+
1019
+ .Layout .Layout-divider {
1020
+ display: none
1021
+ }
1022
+
1023
+ .Layout .Layout-main {
1024
+ grid-column: 2/span 2
1025
+ }
1026
+
1027
+ @media(min-width: 1012px) {
1028
+ .Layout {
1029
+ --Layout-gutter: 24px
1030
+ }
1031
+ }
1032
+
1033
+ .Layout.Layout--gutter-none {
1034
+ --Layout-gutter: 0px
1035
+ }
1036
+
1037
+ .Layout.Layout--gutter-condensed {
1038
+ --Layout-gutter: 16px
1039
+ }
1040
+
1041
+ @media(min-width: 1012px) {
1042
+ .Layout.Layout--gutter-spacious {
1043
+ --Layout-gutter: 32px
1044
+ }
1045
+ }
1046
+
1047
+ @media(min-width: 1280px) {
1048
+ .Layout.Layout--gutter-spacious {
1049
+ --Layout-gutter: 40px
1050
+ }
1051
+ }
1052
+
1053
+ @media(min-width: 544px) {
1054
+ .Layout {
1055
+ --Layout-sidebar-width: 220px
1056
+ }
1057
+ }
1058
+
1059
+ @media(min-width: 768px) {
1060
+ .Layout {
1061
+ --Layout-sidebar-width: 256px
1062
+ }
1063
+ }
1064
+
1065
+ @media(min-width: 1012px) {
1066
+ .Layout {
1067
+ --Layout-sidebar-width: 296px
1068
+ }
1069
+ }
1070
+
1071
+ @media(min-width: 768px) {
1072
+ .Layout.Layout--sidebar-narrow {
1073
+ --Layout-sidebar-width: 240px
1074
+ }
1075
+ }
1076
+
1077
+ @media(min-width: 1012px) {
1078
+ .Layout.Layout--sidebar-narrow {
1079
+ --Layout-sidebar-width: 256px
1080
+ }
1081
+ }
1082
+
1083
+ @media(min-width: 1012px) {
1084
+ .Layout.Layout--sidebar-wide {
1085
+ --Layout-sidebar-width: 320px
1086
+ }
1087
+ }
1088
+
1089
+ @media(min-width: 1280px) {
1090
+ .Layout.Layout--sidebar-wide {
1091
+ --Layout-sidebar-width: 336px
1092
+ }
1093
+ }
1094
+
1095
+ .Layout.Layout--sidebarPosition-start .Layout-sidebar {
1096
+ grid-column: 1
1097
+ }
1098
+
1099
+ .Layout.Layout--sidebarPosition-start .Layout-main {
1100
+ grid-column: 2/span 2
1101
+ }
1102
+
1103
+ .Layout.Layout--sidebarPosition-end {
1104
+ grid-template-columns: minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto
1105
+ }
1106
+
1107
+ .Layout.Layout--sidebarPosition-end .Layout-main {
1108
+ grid-column: 1
1109
+ }
1110
+
1111
+ .Layout.Layout--sidebarPosition-end .Layout-sidebar {
1112
+ grid-column: 2/span 2
1113
+ }
1114
+
1115
+ .Layout.Layout--divided .Layout-divider {
1116
+ display: block;
1117
+ grid-column: 2;
1118
+ width: 1px;
1119
+ margin-right: -1px;
1120
+ background: var(--color-border-default)
1121
+ }
1122
+
1123
+ .Layout.Layout--divided .Layout-main {
1124
+ grid-column: 3/span 1
1125
+ }
1126
+
1127
+ .Layout.Layout--divided.Layout--sidebarPosition-end .Layout-sidebar {
1128
+ grid-column: 3/span 1
1129
+ }
1130
+
1131
+ .Layout.Layout--divided.Layout--sidebarPosition-end .Layout-main {
1132
+ grid-column: 1
1133
+ }
1134
+
1135
+ .Layout-divider {
1136
+ display: none;
1137
+ width: 1px
1138
+ }
1139
+
1140
+ .Layout-sidebar {
1141
+ width: var(--Layout-sidebar-width)
1142
+ }
1143
+
1144
+ .Layout-main {
1145
+ min-width: 0
1146
+ }
1147
+
1148
+ .Layout-main .Layout-main-centered-md,
1149
+ .Layout-main .Layout-main-centered-lg,
1150
+ .Layout-main .Layout-main-centered-xl {
1151
+ margin-right: auto;
1152
+ margin-left: auto
1153
+ }
1154
+
1155
+ .Layout-main .Layout-main-centered-md>.container-md,
1156
+ .Layout-main .Layout-main-centered-md>.container-lg,
1157
+ .Layout-main .Layout-main-centered-md>.container-xl,
1158
+ .Layout-main .Layout-main-centered-lg>.container-md,
1159
+ .Layout-main .Layout-main-centered-lg>.container-lg,
1160
+ .Layout-main .Layout-main-centered-lg>.container-xl,
1161
+ .Layout-main .Layout-main-centered-xl>.container-md,
1162
+ .Layout-main .Layout-main-centered-xl>.container-lg,
1163
+ .Layout-main .Layout-main-centered-xl>.container-xl {
1164
+ margin-left: 0
1165
+ }
1166
+
1167
+ .Layout-main .Layout-main-centered-md {
1168
+ max-width: calc(768px + var(--Layout-sidebar-width) + var(--Layout-gutter))
1169
+ }
1170
+
1171
+ .Layout-main .Layout-main-centered-lg {
1172
+ max-width: calc(1012px + var(--Layout-sidebar-width) + var(--Layout-gutter))
1173
+ }
1174
+
1175
+ .Layout-main .Layout-main-centered-xl {
1176
+ max-width: calc(1280px + var(--Layout-sidebar-width) + var(--Layout-gutter))
1177
+ }
1178
+
1179
+ :root {
1180
+ --Layout-pane-width: 220px;
1181
+ --Layout-content-width: 100%;
1182
+ --Layout-template-columns: 1fr var(--Layout-pane-width);
1183
+ --Layout-template-areas: "content pane";
1184
+ --Layout-column-gap: 16px;
1185
+ --Layout-row-gap: 16px;
1186
+ --Layout-outer-spacing-x: 0px;
1187
+ --Layout-outer-spacing-y: 0px;
1188
+ --Layout-inner-spacing-min: 0px;
1189
+ --Layout-inner-spacing-max: 0px
1190
+ }
1191
+
1192
+ .PageLayout {
1193
+ display: block;
1194
+ margin: var(--Layout-outer-spacing-y) var(--Layout-outer-spacing-x)
1195
+ }
1196
+
1197
+ @media(min-width: 768px) {
1198
+ .PageLayout.PageLayout--panePos-start {
1199
+ --Layout-template-columns: var(--Layout-pane-width) minmax(0, calc(100% - var(--Layout-pane-width) - var(--Layout-column-gap)));
1200
+ --Layout-template-areas: "pane content"
1201
+ }
1202
+
1203
+ .PageLayout.PageLayout--panePos-end {
1204
+ --Layout-template-columns: minmax(0, calc(100% - var(--Layout-pane-width) - var(--Layout-column-gap))) var(--Layout-pane-width);
1205
+ --Layout-template-areas: "content pane"
1206
+ }
1207
+
1208
+ .PageLayout .PageLayout-header--hasDivider {
1209
+ padding-bottom: max(var(--Layout-row-gap), var(--Layout-inner-spacing-min));
1210
+ border-bottom: 1px solid var(--color-border-default)
1211
+ }
1212
+
1213
+ .PageLayout .PageLayout-footer--hasDivider {
1214
+ padding-top: max(var(--Layout-row-gap), var(--Layout-inner-spacing-min));
1215
+ border-top: 1px solid var(--color-border-default)
1216
+ }
1217
+
1218
+ .PageLayout.PageLayout--hasPaneDivider.PageLayout--panePos-start .PageLayout-pane {
1219
+ border-right: 1px solid var(--color-border-default)
1220
+ }
1221
+
1222
+ .PageLayout.PageLayout--hasPaneDivider.PageLayout--panePos-start:not(.PageLayout--columnGap-none) .PageLayout-pane {
1223
+ padding-right: calc(var(--Layout-column-gap) - 1px);
1224
+ margin-right: calc(var(--Layout-column-gap)*-1)
1225
+ }
1226
+
1227
+ .PageLayout.PageLayout--hasPaneDivider.PageLayout--panePos-start:not(.PageLayout--columnGap-none) .PageLayout-content {
1228
+ margin-left: var(--Layout-column-gap)
1229
+ }
1230
+
1231
+ .PageLayout.PageLayout--hasPaneDivider.PageLayout--panePos-end .PageLayout-pane {
1232
+ border-left: 1px solid var(--color-border-default)
1233
+ }
1234
+
1235
+ .PageLayout.PageLayout--hasPaneDivider.PageLayout--panePos-end:not(.PageLayout--columnGap-none) .PageLayout-pane {
1236
+ padding-left: calc(var(--Layout-column-gap) - 1px);
1237
+ margin-left: calc(var(--Layout-column-gap)*-1)
1238
+ }
1239
+
1240
+ .PageLayout.PageLayout--hasPaneDivider.PageLayout--panePos-end:not(.PageLayout--columnGap-none) .PageLayout-content {
1241
+ margin-right: var(--Layout-column-gap)
1242
+ }
1243
+
1244
+ .PageLayout .PageLayout-pane--sticky {
1245
+ position: sticky;
1246
+ top: 0;
1247
+ max-height: 100vh;
1248
+ overflow: auto;
1249
+ scrollbar-width: thin
1250
+ }
1251
+
1252
+ @supports(max-height: 100dvh) {
1253
+ .PageLayout .PageLayout-pane--sticky {
1254
+ max-height: 100dvh
1255
+ }
1256
+ }
1257
+
1258
+ .PageLayout [class^=PageLayout-content-centered-] {
1259
+ max-width: calc(var(--Layout-content-width) + var(--Layout-pane-width) + var(--Layout-column-gap));
1260
+ margin-right: auto;
1261
+ margin-left: auto
1262
+ }
1263
+
1264
+ .PageLayout.PageLayout--hasPaneDivider [class^=PageLayout-content-centered-] {
1265
+ max-width: calc(var(--Layout-content-width) + var(--Layout-pane-width) + var(--Layout-column-gap)*2)
1266
+ }
1267
+
1268
+ .PageLayout.PageLayout--panePos-start [class^=PageLayout-content-centered-]>[class^=container-] {
1269
+ margin-left: 0
1270
+ }
1271
+
1272
+ .PageLayout.PageLayout--panePos-end [class^=PageLayout-content-centered-]>[class^=container-] {
1273
+ margin-right: 0
1274
+ }
1275
+
1276
+ .PageLayout .PageLayout-content-centered-sm {
1277
+ --Layout-content-width: 544px
1278
+ }
1279
+
1280
+ .PageLayout .PageLayout-content-centered-md {
1281
+ --Layout-content-width: 768px
1282
+ }
1283
+
1284
+ .PageLayout .PageLayout-content-centered-lg {
1285
+ --Layout-content-width: 1012px
1286
+ }
1287
+
1288
+ .PageLayout .PageLayout-content-centered-xl {
1289
+ --Layout-content-width: 1280px
1290
+ }
1291
+ }
1292
+
1293
+ @media(min-width: 768px)and (min-width: 544px) {
1294
+ .PageLayout {
1295
+ --Layout-pane-width: 220px
1296
+ }
1297
+ }
1298
+
1299
+ @media(min-width: 768px)and (min-width: 768px) {
1300
+ .PageLayout {
1301
+ --Layout-pane-width: 256px
1302
+ }
1303
+ }
1304
+
1305
+ @media(min-width: 768px)and (min-width: 1012px) {
1306
+ .PageLayout {
1307
+ --Layout-pane-width: 296px
1308
+ }
1309
+ }
1310
+
1311
+ @media(min-width: 768px)and (min-width: 768px) {
1312
+ .PageLayout.PageLayout--paneWidth-narrow {
1313
+ --Layout-pane-width: 240px
1314
+ }
1315
+ }
1316
+
1317
+ @media(min-width: 768px)and (min-width: 1012px) {
1318
+ .PageLayout.PageLayout--paneWidth-narrow {
1319
+ --Layout-pane-width: 256px
1320
+ }
1321
+ }
1322
+
1323
+ @media(min-width: 768px)and (min-width: 1012px) {
1324
+ .PageLayout.PageLayout--paneWidth-wide {
1325
+ --Layout-pane-width: 320px
1326
+ }
1327
+ }
1328
+
1329
+ @media(min-width: 768px)and (min-width: 1280px) {
1330
+ .PageLayout.PageLayout--paneWidth-wide {
1331
+ --Layout-pane-width: 336px
1332
+ }
1333
+ }
1334
+
1335
+ @media(max-width: 767.98px) {
1336
+ .PageLayout.PageLayout--responsive-stackRegions {
1337
+ --Layout-template-columns: 1fr;
1338
+ --Layout-template-areas: "content" "pane"
1339
+ }
1340
+
1341
+ .PageLayout.PageLayout--responsive-stackRegions.PageLayout--responsive-panePos-start {
1342
+ --Layout-template-areas: "pane" "content"
1343
+ }
1344
+
1345
+ .PageLayout.PageLayout--responsive-separateRegions {
1346
+ --Layout-template-columns: 1fr;
1347
+ --Layout-template-areas: "content"
1348
+ }
1349
+
1350
+ .PageLayout.PageLayout--responsive-separateRegions.PageLayout--responsive-primary-content {
1351
+ --Layout-template-areas: "content"
1352
+ }
1353
+
1354
+ .PageLayout.PageLayout--responsive-separateRegions.PageLayout--responsive-primary-content .PageLayout-pane {
1355
+ display: none
1356
+ }
1357
+
1358
+ .PageLayout.PageLayout--responsive-separateRegions.PageLayout--responsive-primary-pane {
1359
+ --Layout-template-areas: "pane"
1360
+ }
1361
+
1362
+ .PageLayout.PageLayout--responsive-separateRegions.PageLayout--responsive-primary-pane .PageLayout-content {
1363
+ display: none
1364
+ }
1365
+
1366
+ .PageLayout .PageLayout-region--dividerNarrow-line-before {
1367
+ position: relative;
1368
+ margin-top: var(--Layout-row-gap)
1369
+ }
1370
+
1371
+ .PageLayout .PageLayout-region--dividerNarrow-line-before::before {
1372
+ position: absolute;
1373
+ left: calc(var(--Layout-outer-spacing-x)*-1);
1374
+ display: block;
1375
+ width: calc(100% + var(--Layout-outer-spacing-x)*2);
1376
+ height: 1px;
1377
+ content: "";
1378
+ background-color: var(--color-border-default);
1379
+ top: calc(-1px - var(--Layout-row-gap))
1380
+ }
1381
+
1382
+ .PageLayout .PageLayout-region--dividerNarrow-line-after {
1383
+ position: relative;
1384
+ margin-bottom: var(--Layout-row-gap)
1385
+ }
1386
+
1387
+ .PageLayout .PageLayout-region--dividerNarrow-line-after::after {
1388
+ position: absolute;
1389
+ left: calc(var(--Layout-outer-spacing-x)*-1);
1390
+ display: block;
1391
+ width: calc(100% + var(--Layout-outer-spacing-x)*2);
1392
+ height: 1px;
1393
+ content: "";
1394
+ background-color: var(--color-border-default);
1395
+ bottom: calc(-1px - var(--Layout-row-gap))
1396
+ }
1397
+
1398
+ .PageLayout .PageLayout-region--dividerNarrow-filled-before {
1399
+ position: relative;
1400
+ margin-top: calc(8px + var(--Layout-row-gap))
1401
+ }
1402
+
1403
+ .PageLayout .PageLayout-region--dividerNarrow-filled-before::after {
1404
+ position: absolute;
1405
+ bottom: calc(8px * -1);
1406
+ left: calc(var(--Layout-outer-spacing-x)*-1);
1407
+ display: block;
1408
+ width: calc(100% + var(--Layout-outer-spacing-x)*2);
1409
+ height: 8px;
1410
+ content: "";
1411
+ background-color: var(--color-canvas-inset);
1412
+ box-shadow: inset 0 1px var(--color-border-default), inset 0 -1px var(--color-border-default);
1413
+ top: calc(-8px - var(--Layout-row-gap))
1414
+ }
1415
+
1416
+ .PageLayout .PageLayout-region--dividerNarrow-filled-after {
1417
+ position: relative;
1418
+ margin-bottom: calc(8px + var(--Layout-row-gap))
1419
+ }
1420
+
1421
+ .PageLayout .PageLayout-region--dividerNarrow-filled-after::before {
1422
+ position: absolute;
1423
+ bottom: calc(8px * -1);
1424
+ left: calc(var(--Layout-outer-spacing-x)*-1);
1425
+ display: block;
1426
+ width: calc(100% + var(--Layout-outer-spacing-x)*2);
1427
+ height: 8px;
1428
+ content: "";
1429
+ background-color: var(--color-canvas-inset);
1430
+ box-shadow: inset 0 1px var(--color-border-default), inset 0 -1px var(--color-border-default);
1431
+ bottom: calc(-8px - var(--Layout-row-gap))
1432
+ }
1433
+ }
1434
+
1435
+ .PageLayout-wrapper {
1436
+ display: grid;
1437
+ grid: auto-flow/1fr;
1438
+ row-gap: var(--Layout-row-gap)
1439
+ }
1440
+
1441
+ .PageLayout-columns {
1442
+ display: grid;
1443
+ column-gap: var(--Layout-column-gap);
1444
+ row-gap: var(--Layout-row-gap);
1445
+ grid-template-columns: var(--Layout-template-columns);
1446
+ grid-template-rows: 1fr;
1447
+ grid-template-areas: var(--Layout-template-areas)
1448
+ }
1449
+
1450
+ .PageLayout-columns .PageLayout-content {
1451
+ padding-right: var(--Layout-inner-spacing-max);
1452
+ padding-left: var(--Layout-inner-spacing-max);
1453
+ grid-area: content
1454
+ }
1455
+
1456
+ .PageLayout-columns .PageLayout-pane {
1457
+ grid-area: pane
1458
+ }
1459
+
1460
+ .PageLayout--outerSpacing-normal {
1461
+ --Layout-outer-spacing-x: 16px;
1462
+ --Layout-outer-spacing-y: 16px
1463
+ }
1464
+
1465
+ @media(min-width: 1012px) {
1466
+ .PageLayout--outerSpacing-normal {
1467
+ --Layout-outer-spacing-x: 24px;
1468
+ --Layout-outer-spacing-y: 24px
1469
+ }
1470
+ }
1471
+
1472
+ .PageLayout--outerSpacing-condensed {
1473
+ --Layout-outer-spacing-x: 16px;
1474
+ --Layout-outer-spacing-y: 16px
1475
+ }
1476
+
1477
+ .PageLayout--innerSpacing-normal {
1478
+ --Layout-inner-spacing-min: 16px;
1479
+ --Layout-inner-spacing-max: 16px
1480
+ }
1481
+
1482
+ @media(min-width: 1012px) {
1483
+ .PageLayout--innerSpacing-normal {
1484
+ --Layout-inner-spacing-max: 24px
1485
+ }
1486
+ }
1487
+
1488
+ .PageLayout--innerSpacing-condensed {
1489
+ --Layout-inner-spacing-min: 16px;
1490
+ --Layout-inner-spacing-max: 16px
1491
+ }
1492
+
1493
+ .PageLayout--columnGap-normal {
1494
+ --Layout-column-gap: 16px
1495
+ }
1496
+
1497
+ @media(min-width: 1012px) {
1498
+ .PageLayout--columnGap-normal {
1499
+ --Layout-column-gap: 24px
1500
+ }
1501
+ }
1502
+
1503
+ .PageLayout--columnGap-condensed {
1504
+ --Layout-column-gap: 16px
1505
+ }
1506
+
1507
+ .PageLayout--columnGap-none {
1508
+ --Layout-column-gap: 0px
1509
+ }
1510
+
1511
+ .PageLayout--rowGap-normal {
1512
+ --Layout-row-gap: 16px
1513
+ }
1514
+
1515
+ @media(min-width: 1012px) {
1516
+ .PageLayout--rowGap-normal {
1517
+ --Layout-row-gap: 24px
1518
+ }
1519
+ }
1520
+
1521
+ .PageLayout--rowGap-none {
1522
+ --Layout-row-gap: 0px
1523
+ }
1524
+
1525
+ .PageLayout--rowGap-condensed {
1526
+ --Layout-row-gap: 16px
1527
+ }
1528
+
1529
+ .PageLayout-header,
1530
+ .PageLayout-content,
1531
+ .PageLayout-pane,
1532
+ .PageLayout-footer {
1533
+ padding: var(--Layout-inner-spacing-min)
1534
+ }
1535
+
1536
+ .Stack {
1537
+ --Stack-gap-whenRegular: var(--primer-stack-gap-normal, 16px);
1538
+ --Stack-gap-whenNarrow: var(--primer-stack-gap-normal, 16px);
1539
+ --Stack-gap-whenWide: var(--Stack-gap-whenRegular);
1540
+ --Stack-divider-color: var(--color-border-default);
1541
+ display: flex;
1542
+ flex-flow: column;
1543
+ align-items: stretch;
1544
+ align-content: flex-start;
1545
+ gap: var(--Stack-gap-whenRegular)
1546
+ }
1547
+
1548
+ @media(max-width: 767.98px) {
1549
+ .Stack {
1550
+ gap: var(--Stack-gap-whenNarrow)
1551
+ }
1552
+ }
1553
+
1554
+ @media(min-width: 1400px) {
1555
+ .Stack {
1556
+ gap: var(--Stack-gap-whenWide)
1557
+ }
1558
+ }
1559
+
1560
+ .Stack-divider {
1561
+ display: none;
1562
+ padding: 0;
1563
+ margin: 0;
1564
+ border: 0;
1565
+ align-self: stretch
1566
+ }
1567
+
1568
+ .Stack-item {
1569
+ flex: 0 1 auto;
1570
+ min-inline-size: 0
1571
+ }
1572
+
1573
+ @media(max-width: 767.98px) {
1574
+ .Stack--dir-inline-whenNarrow {
1575
+ flex-flow: row
1576
+ }
1577
+
1578
+ .Stack--dir-block-whenNarrow {
1579
+ flex-flow: column
1580
+ }
1581
+
1582
+ .Stack--gap-none-whenNarrow {
1583
+ --Stack-gap-whenNarrow: 0
1584
+ }
1585
+
1586
+ .Stack--gap-condensed-whenNarrow {
1587
+ --Stack-gap-whenNarrow: var(--primer-stack-gap-condensed, 8px)
1588
+ }
1589
+
1590
+ .Stack--gap-normal-whenNarrow {
1591
+ --Stack-gap-whenNarrow: var(--primer-stack-gap-normal, 16px)
1592
+ }
1593
+
1594
+ .Stack--align-start-whenNarrow {
1595
+ align-items: flex-start
1596
+ }
1597
+
1598
+ .Stack--align-center-whenNarrow {
1599
+ align-items: center
1600
+ }
1601
+
1602
+ .Stack--align-end-whenNarrow {
1603
+ align-items: flex-end
1604
+ }
1605
+
1606
+ .Stack--align-baseline-whenNarrow {
1607
+ align-items: baseline
1608
+ }
1609
+
1610
+ .Stack--alignWrap-start-whenNarrow {
1611
+ align-content: flex-start
1612
+ }
1613
+
1614
+ .Stack--alignWrap-center-whenNarrow {
1615
+ align-content: center
1616
+ }
1617
+
1618
+ .Stack--alignWrap-end-whenNarrow {
1619
+ align-content: flex-end
1620
+ }
1621
+
1622
+ .Stack--alignWrap-distribute-whenNarrow {
1623
+ align-content: space-between
1624
+ }
1625
+
1626
+ .Stack--alignWrap-distributeEvenly-whenNarrow {
1627
+ align-content: space-evenly
1628
+ }
1629
+
1630
+ .Stack--spread-start-whenNarrow {
1631
+ justify-content: flex-start
1632
+ }
1633
+
1634
+ .Stack--spread-center-whenNarrow {
1635
+ justify-content: center
1636
+ }
1637
+
1638
+ .Stack--spread-end-whenNarrow {
1639
+ justify-content: flex-end
1640
+ }
1641
+
1642
+ .Stack--spread-distribute-whenNarrow {
1643
+ justify-content: space-between
1644
+ }
1645
+
1646
+ .Stack--spread-distributeEvenly-whenNarrow {
1647
+ justify-content: space-evenly
1648
+ }
1649
+
1650
+ .Stack--wrap-whenNarrow {
1651
+ flex-wrap: wrap
1652
+ }
1653
+
1654
+ .Stack--nowrap-whenNarrow {
1655
+ flex-wrap: nowrap
1656
+ }
1657
+
1658
+ .Stack--showDividers-whenNarrow>.Stack-divider,
1659
+ .Stack--showDividers-whenNarrow>.Stack-item>.Stack-divider {
1660
+ display: block
1661
+ }
1662
+
1663
+ :not(.Stack--dir-inline-whenNarrow)>.Stack-divider,
1664
+ :not(.Stack--dir-inline-whenNarrow)>.Stack-item>.Stack-divider {
1665
+ border-block-end: var(--primer-borderWidth-thin, 1px) solid var(--Stack-divider-color);
1666
+ inline-size: auto;
1667
+ block-size: 0
1668
+ }
1669
+
1670
+ .Stack--dir-inline-whenNarrow>.Stack-divider,
1671
+ .Stack--dir-inline-whenNarrow>.Stack-item>.Stack-divider {
1672
+ border-inline-end: var(--primer-borderWidth-thin, 1px) solid var(--Stack-divider-color);
1673
+ inline-size: 0;
1674
+ block-size: auto
1675
+ }
1676
+
1677
+ .Stack-item--expand-whenNarrow {
1678
+ flex-grow: 1
1679
+ }
1680
+
1681
+ .Stack-item--keepSize-whenNarrow {
1682
+ flex-shrink: 0
1683
+ }
1684
+ }
1685
+
1686
+ @media(min-width: 768px) {
1687
+ .Stack--dir-inline-whenRegular {
1688
+ flex-flow: row
1689
+ }
1690
+
1691
+ .Stack--dir-block-whenRegular {
1692
+ flex-flow: column
1693
+ }
1694
+
1695
+ .Stack--gap-none-whenRegular {
1696
+ --Stack-gap-whenRegular: 0
1697
+ }
1698
+
1699
+ .Stack--gap-condensed-whenRegular {
1700
+ --Stack-gap-whenRegular: var(--primer-stack-gap-condensed, 8px)
1701
+ }
1702
+
1703
+ .Stack--gap-normal-whenRegular {
1704
+ --Stack-gap-whenRegular: var(--primer-stack-gap-normal, 16px)
1705
+ }
1706
+
1707
+ .Stack--gap-spacious-whenRegular {
1708
+ --Stack-gap-whenRegular: var(--primer-stack-gap-spacious, 24px)
1709
+ }
1710
+
1711
+ .Stack--align-start-whenRegular {
1712
+ align-items: flex-start
1713
+ }
1714
+
1715
+ .Stack--align-center-whenRegular {
1716
+ align-items: center
1717
+ }
1718
+
1719
+ .Stack--align-end-whenRegular {
1720
+ align-items: flex-end
1721
+ }
1722
+
1723
+ .Stack--align-baseline-whenRegular {
1724
+ align-items: baseline
1725
+ }
1726
+
1727
+ .Stack--alignWrap-start-whenRegular {
1728
+ align-content: flex-start
1729
+ }
1730
+
1731
+ .Stack--alignWrap-center-whenRegular {
1732
+ align-content: center
1733
+ }
1734
+
1735
+ .Stack--alignWrap-end-whenRegular {
1736
+ align-content: flex-end
1737
+ }
1738
+
1739
+ .Stack--alignWrap-distribute-whenRegular {
1740
+ align-content: space-between
1741
+ }
1742
+
1743
+ .Stack--alignWrap-distributeEvenly-whenRegular {
1744
+ align-content: space-evenly
1745
+ }
1746
+
1747
+ .Stack--spread-start-whenRegular {
1748
+ justify-content: flex-start
1749
+ }
1750
+
1751
+ .Stack--spread-center-whenRegular {
1752
+ justify-content: center
1753
+ }
1754
+
1755
+ .Stack--spread-end-whenRegular {
1756
+ justify-content: flex-end
1757
+ }
1758
+
1759
+ .Stack--spread-distribute-whenRegular {
1760
+ justify-content: space-between
1761
+ }
1762
+
1763
+ .Stack--spread-distributeEvenly-whenRegular {
1764
+ justify-content: space-evenly
1765
+ }
1766
+
1767
+ .Stack--wrap-whenRegular {
1768
+ flex-wrap: wrap
1769
+ }
1770
+
1771
+ .Stack--nowrap-whenRegular {
1772
+ flex-wrap: nowrap
1773
+ }
1774
+
1775
+ .Stack--showDividers-whenRegular>.Stack-divider,
1776
+ .Stack--showDividers-whenRegular>.Stack-item>.Stack-divider {
1777
+ display: block
1778
+ }
1779
+
1780
+ :not(.Stack--dir-inline-whenRegular)>.Stack-divider,
1781
+ :not(.Stack--dir-inline-whenRegular)>.Stack-item>.Stack-divider {
1782
+ border-block-end: var(--primer-borderWidth-thin, 1px) solid var(--Stack-divider-color);
1783
+ inline-size: auto;
1784
+ block-size: 0
1785
+ }
1786
+
1787
+ .Stack--dir-inline-whenRegular>.Stack-divider,
1788
+ .Stack--dir-inline-whenRegular>.Stack-item>.Stack-divider {
1789
+ border-inline-end: var(--primer-borderWidth-thin, 1px) solid var(--Stack-divider-color);
1790
+ inline-size: 0;
1791
+ block-size: auto
1792
+ }
1793
+
1794
+ .Stack-item--expand-whenRegular {
1795
+ flex-grow: 1
1796
+ }
1797
+
1798
+ .Stack-item--keepSize-whenRegular {
1799
+ flex-shrink: 0
1800
+ }
1801
+ }
1802
+
1803
+ @media(min-width: 1400px) {
1804
+ .Stack--dir-inline-whenWide {
1805
+ flex-flow: row
1806
+ }
1807
+
1808
+ .Stack--dir-block-whenWide {
1809
+ flex-flow: column
1810
+ }
1811
+
1812
+ .Stack--gap-none-whenWide {
1813
+ --Stack-gap-whenWide: 0
1814
+ }
1815
+
1816
+ .Stack--gap-condensed-whenWide {
1817
+ --Stack-gap-whenWide: var(--primer-stack-gap-condensed, 8px)
1818
+ }
1819
+
1820
+ .Stack--gap-normal-whenWide {
1821
+ --Stack-gap-whenWide: var(--primer-stack-gap-normal, 16px)
1822
+ }
1823
+
1824
+ .Stack--gap-spacious-whenWide {
1825
+ --Stack-gap-whenWide: var(--primer-stack-gap-spacious, 24px)
1826
+ }
1827
+
1828
+ .Stack--align-start-whenWide {
1829
+ align-items: flex-start
1830
+ }
1831
+
1832
+ .Stack--align-center-whenWide {
1833
+ align-items: center
1834
+ }
1835
+
1836
+ .Stack--align-end-whenWide {
1837
+ align-items: flex-end
1838
+ }
1839
+
1840
+ .Stack--align-baseline-whenWide {
1841
+ align-items: baseline
1842
+ }
1843
+
1844
+ .Stack--alignWrap-start-whenWide {
1845
+ align-content: flex-start
1846
+ }
1847
+
1848
+ .Stack--alignWrap-center-whenWide {
1849
+ align-content: center
1850
+ }
1851
+
1852
+ .Stack--alignWrap-end-whenWide {
1853
+ align-content: flex-end
1854
+ }
1855
+
1856
+ .Stack--alignWrap-distribute-whenWide {
1857
+ align-content: space-between
1858
+ }
1859
+
1860
+ .Stack--alignWrap-distributeEvenly-whenWide {
1861
+ align-content: space-evenly
1862
+ }
1863
+
1864
+ .Stack--spread-start-whenWide {
1865
+ justify-content: flex-start
1866
+ }
1867
+
1868
+ .Stack--spread-center-whenWide {
1869
+ justify-content: center
1870
+ }
1871
+
1872
+ .Stack--spread-end-whenWide {
1873
+ justify-content: flex-end
1874
+ }
1875
+
1876
+ .Stack--spread-distribute-whenWide {
1877
+ justify-content: space-between
1878
+ }
1879
+
1880
+ .Stack--spread-distributeEvenly-whenWide {
1881
+ justify-content: space-evenly
1882
+ }
1883
+
1884
+ .Stack--wrap-whenWide {
1885
+ flex-wrap: wrap
1886
+ }
1887
+
1888
+ .Stack--nowrap-whenWide {
1889
+ flex-wrap: nowrap
1890
+ }
1891
+
1892
+ .Stack--showDividers-whenWide>.Stack-divider,
1893
+ .Stack--showDividers-whenWide>.Stack-item>.Stack-divider {
1894
+ display: block
1895
+ }
1896
+
1897
+ :not(.Stack--dir-inline-whenWide)>.Stack-divider,
1898
+ :not(.Stack--dir-inline-whenWide)>.Stack-item>.Stack-divider {
1899
+ border-block-end: var(--primer-borderWidth-thin, 1px) solid var(--Stack-divider-color);
1900
+ inline-size: auto;
1901
+ block-size: 0
1902
+ }
1903
+
1904
+ .Stack--dir-inline-whenWide>.Stack-divider,
1905
+ .Stack--dir-inline-whenWide>.Stack-item>.Stack-divider {
1906
+ border-inline-end: var(--primer-borderWidth-thin, 1px) solid var(--Stack-divider-color);
1907
+ inline-size: 0;
1908
+ block-size: auto
1909
+ }
1910
+
1911
+ .Stack-item--expand-whenWide {
1912
+ flex-grow: 1
1913
+ }
1914
+
1915
+ .Stack-item--keepSize-whenWide {
1916
+ flex-shrink: 0
1917
+ }
1918
+ }