@7shifts/sous-chef 4.8.0 → 4.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/dist/foundation/constants.d.ts +1 -1
  2. package/dist/index.css +513 -341
  3. package/dist/index.css.map +1 -1
  4. package/dist/index.js +668 -369
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.modern.js +844 -559
  7. package/dist/index.modern.js.map +1 -1
  8. package/dist/media/ShortcutKey/ShortcutKey.d.ts +22 -0
  9. package/dist/media/ShortcutKey/index.d.ts +1 -0
  10. package/dist/media/index.d.ts +2 -1
  11. package/dist/overlay/DropdownListDivider/DropdownListDivider.d.ts +3 -1
  12. package/dist/overlay/DropdownListDividerLine/DropdownListDividerLine.d.ts +6 -0
  13. package/dist/overlay/DropdownListDividerLine/index.d.ts +1 -0
  14. package/dist/overlay/HintModal/HintModal.d.ts +2 -1
  15. package/dist/overlay/Modal/Modal.d.ts +8 -1
  16. package/dist/overlay/Modal/ModalContext.d.ts +1 -0
  17. package/dist/overlay/Modal/useDraggableModal.d.ts +38 -0
  18. package/dist/overlay/Modal/useModalPosition.d.ts +10 -0
  19. package/dist/overlay/index.d.ts +2 -0
  20. package/dist/tests/visual.d.ts +27 -0
  21. package/dist/typography/Text/constants.d.ts +2 -0
  22. package/dist/typography/Text/types.d.ts +1 -1
  23. package/llms-instructions/guidelines/HintModal.guidelines.md +1 -0
  24. package/package.json +13 -7
package/dist/index.css CHANGED
@@ -1,3 +1,17 @@
1
+ @font-face {
2
+ font-family: "Inter";
3
+ src: url("https://cdn.7shifts.com/fonts/Inter/inter.woff2") format("woff2");
4
+ font-weight: 100 900;
5
+ font-style: normal;
6
+ font-display: swap;
7
+ }
8
+ @font-face {
9
+ font-family: "Inter";
10
+ src: url("https://cdn.7shifts.com/fonts/Inter/inter-italic.woff2") format("woff2");
11
+ font-weight: 100 900;
12
+ font-style: italic;
13
+ font-display: swap;
14
+ }
1
15
  @font-face {
2
16
  font-family: "SF Pro";
3
17
  src: url("https://cdn.7shifts.com/fonts/SFPro/SFPRODISPLAYREGULAR.OTF") format("opentype");
@@ -23,8 +37,9 @@
23
37
  unicode-range: U+0000-00FF; /* Basic Latin */
24
38
  }
25
39
  :root {
26
- --font-family-heading: "SF Pro", sans-serif;
27
- --font-family-body: "SF Pro", sans-serif;
40
+ --font-family-heading: "Inter", sans-serif;
41
+ --font-family-body: "Inter", sans-serif;
42
+ --font-family-primary: "Inter", sans-serif;
28
43
  --font-size-100: 0.75rem;
29
44
  --font-size-200: 0.875rem;
30
45
  --font-size-300: 1rem;
@@ -43,6 +58,45 @@
43
58
  --p-font-weight-normal: 400;
44
59
  --p-font-weight-semibold: 500;
45
60
  --p-font-weight-bold: 600;
61
+ --font-page-title-size: 24px;
62
+ --font-page-title-height: 28px;
63
+ --font-page-title-weight: 560;
64
+ --font-section-title-size: 20px;
65
+ --font-section-title-height: 24px;
66
+ --font-section-title-weight: 500;
67
+ --font-content-title-size: 18px;
68
+ --font-content-title-height: 22px;
69
+ --font-content-title-weight: 500;
70
+ --font-sub-title-size: 16px;
71
+ --font-sub-title-height: 20px;
72
+ --font-sub-title-weight: 360;
73
+ --font-h5-title-size: 16px;
74
+ --font-h5-title-height: 20px;
75
+ --font-h5-title-weight: 400;
76
+ --font-body-ui-size: 13px;
77
+ --font-body-ui-height: 19px;
78
+ --font-body-ui-weight: 360;
79
+ --font-body-ui-weight-bold: 490;
80
+ --font-caption-size: 11px;
81
+ --font-caption-height: 14px;
82
+ --font-caption-weight: 400;
83
+ --font-caption-weight-bold: 600;
84
+ --font-insight-size: 28px;
85
+ --font-insight-height: 32px;
86
+ --font-insight-weight: 560;
87
+ --font-tagline-size: 24px;
88
+ --font-tagline-height: 30px;
89
+ --font-tagline-weight: 350;
90
+ --font-tagline-weight-bold: 600;
91
+ --font-paragraph-size: 14px;
92
+ --font-paragraph-height: 24px;
93
+ --font-paragraph-weight: 360;
94
+ --font-paragraph-weight-bold: 490;
95
+ --font-primary-nav-item-size: 12.88px;
96
+ --font-primary-nav-item-height: 16px;
97
+ --font-primary-nav-item-weight: 350;
98
+ --font-primary-nav-item-weight-bold: 480;
99
+ --font-primary-nav-item-letterspacing: -1%;
46
100
  }
47
101
  :root {
48
102
  --color-white: #fff;
@@ -470,10 +524,10 @@
470
524
  --z-index-portal: 9999;
471
525
  }
472
526
  body {
473
- font-family: var(--font-family-body);
474
- font-size: var(--font-size-200);
475
- line-height: var(--font-line-height-200);
476
- font-weight: var(--p-font-weight-normal);
527
+ font-family: var(--font-family-primary);
528
+ font-size: var(--font-body-ui-size);
529
+ line-height: var(--font-body-ui-height);
530
+ font-weight: var(--font-body-ui-weight);
477
531
  color: var(--color-surface-on-color);
478
532
  background-color: var(--color-canvas-background-color) !important;
479
533
  }
@@ -530,19 +584,19 @@ body * {
530
584
  display: inline-flex;
531
585
  }
532
586
  ._tMhXr {
533
- font-family: var(--font-family-body);
534
- font-size: var(--font-size-100);
535
- line-height: var(--font-line-height-100);
536
- font-weight: var(--p-font-weight-normal);
587
+ font-family: var(--font-family-primary);
588
+ font-size: var(--font-caption-size);
589
+ line-height: var(--font-caption-height);
590
+ font-weight: var(--font-caption-weight);
537
591
  color: var(--color-surface-on-color);
538
592
  }
539
593
 
540
594
  ._NfOw5 {
541
- font-family: var(--font-family-body);
542
- font-size: var(--font-size-200);
543
- line-height: var(--font-line-height-200);
544
- font-weight: var(--p-font-weight-normal);
545
- font-weight: var(--p-font-weight-bold);
595
+ font-family: var(--font-family-primary);
596
+ font-size: var(--font-body-ui-size);
597
+ line-height: var(--font-body-ui-height);
598
+ font-weight: var(--font-body-ui-weight);
599
+ font-weight: var(--font-body-ui-weight-bold);
546
600
  padding: 0;
547
601
  width: auto;
548
602
  float: none;
@@ -576,11 +630,11 @@ Just for future references:
576
630
  }
577
631
 
578
632
  ._52dky {
579
- font-family: var(--font-family-body);
580
- font-size: var(--font-size-200);
581
- line-height: var(--font-line-height-200);
582
- font-weight: var(--p-font-weight-normal);
583
- font-weight: var(--p-font-weight-bold);
633
+ font-family: var(--font-family-primary);
634
+ font-size: var(--font-body-ui-size);
635
+ line-height: var(--font-body-ui-height);
636
+ font-weight: var(--font-body-ui-weight);
637
+ font-weight: var(--font-body-ui-weight-bold);
584
638
  padding: 0;
585
639
  width: auto;
586
640
  float: none;
@@ -590,10 +644,10 @@ Just for future references:
590
644
  }
591
645
 
592
646
  ._A-tgL {
593
- font-family: var(--font-family-body);
594
- font-size: var(--font-size-100);
595
- line-height: var(--font-line-height-100);
596
- font-weight: var(--p-font-weight-normal);
647
+ font-family: var(--font-family-primary);
648
+ font-size: var(--font-caption-size);
649
+ line-height: var(--font-caption-height);
650
+ font-weight: var(--font-caption-weight);
597
651
  color: var(--color-surface-on-color);
598
652
  margin-left: 48px;
599
653
  display: block;
@@ -723,10 +777,10 @@ Just for future references:
723
777
  text-align: left;
724
778
  }
725
779
  ._7fQon {
726
- font-family: var(--font-family-body);
727
- font-size: var(--font-size-200);
728
- line-height: var(--font-line-height-200);
729
- font-weight: var(--p-font-weight-normal);
780
+ font-family: var(--font-family-primary);
781
+ font-size: var(--font-body-ui-size);
782
+ line-height: var(--font-body-ui-height);
783
+ font-weight: var(--font-body-ui-weight);
730
784
  position: fixed;
731
785
  padding: 12px;
732
786
  box-shadow: 0 0 12px -3px var(--color-shadow-overlay);
@@ -753,11 +807,11 @@ Just for future references:
753
807
  color: var(--color-surface-on-color);
754
808
  }
755
809
  ._uP8x7 {
756
- font-family: var(--font-family-body);
757
- font-size: var(--font-size-200);
758
- line-height: var(--font-line-height-200);
759
- font-weight: var(--p-font-weight-normal);
760
- font-weight: var(--p-font-weight-bold);
810
+ font-family: var(--font-family-primary);
811
+ font-size: var(--font-body-ui-size);
812
+ line-height: var(--font-body-ui-height);
813
+ font-weight: var(--font-body-ui-weight);
814
+ font-weight: var(--font-body-ui-weight-bold);
761
815
  }
762
816
 
763
817
  ._MjV6R {
@@ -789,11 +843,11 @@ Just for future references:
789
843
  color: var(--color-surface-on-color);
790
844
  }
791
845
  ._pgOR3 {
792
- font-family: var(--font-family-body);
793
- font-size: var(--font-size-200);
794
- line-height: var(--font-line-height-200);
795
- font-weight: var(--p-font-weight-normal);
796
- font-weight: var(--p-font-weight-bold);
846
+ font-family: var(--font-family-primary);
847
+ font-size: var(--font-body-ui-size);
848
+ line-height: var(--font-body-ui-height);
849
+ font-weight: var(--font-body-ui-weight);
850
+ font-weight: var(--font-body-ui-weight-bold);
797
851
  line-height: normal;
798
852
  text-align: center;
799
853
  padding: 9px 12px;
@@ -1193,10 +1247,10 @@ Just for future references:
1193
1247
  border: 1px solid var(--color-outline);
1194
1248
  }
1195
1249
  ._GAIig {
1196
- font-family: var(--font-family-body);
1197
- font-size: var(--font-size-100);
1198
- line-height: var(--font-line-height-100);
1199
- font-weight: var(--p-font-weight-normal);
1250
+ font-family: var(--font-family-primary);
1251
+ font-size: var(--font-caption-size);
1252
+ line-height: var(--font-caption-height);
1253
+ font-weight: var(--font-caption-weight);
1200
1254
  display: flex;
1201
1255
  flex-direction: column;
1202
1256
  flex-grow: 1;
@@ -1239,11 +1293,11 @@ Just for future references:
1239
1293
  box-shadow: 0 0 8px 0 var(--color-shadow-active);
1240
1294
  }
1241
1295
  ._zv4ua {
1242
- font-family: var(--font-family-body);
1243
- font-size: var(--font-size-200);
1244
- line-height: var(--font-line-height-200);
1245
- font-weight: var(--p-font-weight-normal);
1246
- font-weight: var(--p-font-weight-bold);
1296
+ font-family: var(--font-family-primary);
1297
+ font-size: var(--font-body-ui-size);
1298
+ line-height: var(--font-body-ui-height);
1299
+ font-weight: var(--font-body-ui-weight);
1300
+ font-weight: var(--font-body-ui-weight-bold);
1247
1301
  padding: 0;
1248
1302
  width: auto;
1249
1303
  float: none;
@@ -1257,99 +1311,107 @@ Just for future references:
1257
1311
  text-overflow: ellipsis;
1258
1312
  }
1259
1313
  ._Qrxg5 {
1260
- font-family: var(--font-family-body);
1261
- font-size: var(--font-size-100);
1262
- line-height: var(--font-line-height-100);
1263
- font-weight: var(--p-font-weight-normal);
1314
+ font-family: var(--font-family-primary);
1315
+ font-size: var(--font-caption-size);
1316
+ line-height: var(--font-caption-height);
1317
+ font-weight: var(--font-caption-weight);
1264
1318
  color: var(--color-surface-on-color);
1265
1319
  }
1266
1320
  ._eS4YO {
1267
- font-family: var(--font-family-body);
1268
- font-size: var(--font-size-100);
1269
- line-height: var(--font-line-height-100);
1270
- font-weight: var(--p-font-weight-normal);
1321
+ font-family: var(--font-family-primary);
1322
+ font-size: var(--font-caption-size);
1323
+ line-height: var(--font-caption-height);
1324
+ font-weight: var(--font-caption-weight);
1271
1325
  color: var(--color-danger-color);
1272
1326
  }
1273
1327
  h1._6SgoN {
1274
- font-family: var(--font-family-heading);
1275
- font-size: var(--font-size-600);
1276
- line-height: var(--font-line-height-600);
1277
- font-weight: var(--p-font-weight-semibold);
1328
+ font-family: var(--font-family-primary);
1329
+ font-size: var(--font-page-title-size);
1330
+ line-height: var(--font-page-title-height);
1331
+ font-weight: var(--font-page-title-weight);
1278
1332
  }
1279
1333
  h1._i2LHD {
1280
- font-weight: var(--p-font-weight-bold);
1334
+ font-weight: var(--font-page-title-weight);
1281
1335
  }
1282
1336
 
1283
1337
  h2._6SgoN {
1284
- font-family: var(--font-family-heading);
1285
- font-size: var(--font-size-500);
1286
- line-height: var(--font-line-height-500);
1287
- font-weight: var(--p-font-weight-semibold);
1338
+ font-family: var(--font-family-primary);
1339
+ font-size: var(--font-section-title-size);
1340
+ line-height: var(--font-section-title-height);
1341
+ font-weight: var(--font-section-title-weight);
1288
1342
  }
1289
1343
  h2._i2LHD {
1290
- font-weight: var(--p-font-weight-bold);
1344
+ font-weight: var(--font-section-title-weight);
1291
1345
  }
1292
1346
 
1293
1347
  h3._6SgoN {
1294
- font-family: var(--font-family-heading);
1295
- font-size: var(--font-size-400);
1296
- line-height: var(--font-line-height-400);
1297
- font-weight: var(--p-font-weight-semibold);
1348
+ font-family: var(--font-family-primary);
1349
+ font-size: var(--font-content-title-size);
1350
+ line-height: var(--font-content-title-height);
1351
+ font-weight: var(--font-content-title-weight);
1298
1352
  }
1299
1353
  h3._i2LHD {
1300
- font-weight: var(--p-font-weight-bold);
1354
+ font-weight: var(--font-content-title-weight);
1301
1355
  }
1302
1356
 
1303
1357
  h4._6SgoN {
1304
- font-family: var(--font-family-body);
1305
- font-size: var(--font-size-400);
1306
- line-height: var(--font-line-height-400);
1307
- font-weight: var(--p-font-weight-normal);
1358
+ font-family: var(--font-family-primary);
1359
+ font-size: var(--font-sub-title-size);
1360
+ line-height: var(--font-sub-title-height);
1361
+ font-weight: var(--font-sub-title-weight);
1308
1362
  }
1309
1363
  h4._i2LHD {
1310
- font-weight: var(--p-font-weight-bold);
1364
+ font-weight: var(--font-sub-title-weight);
1311
1365
  }
1312
1366
 
1313
1367
  h5._6SgoN {
1314
- font-family: var(--font-family-body);
1315
- font-size: var(--font-size-300);
1316
- line-height: var(--font-line-height-300);
1317
- font-weight: var(--p-font-weight-normal);
1368
+ font-family: var(--font-family-primary);
1369
+ font-size: var(--font-h5-title-size);
1370
+ line-height: var(--font-h5-title-height);
1371
+ font-weight: var(--font-h5-title-weight);
1318
1372
  }
1319
1373
  h5._i2LHD {
1320
- font-weight: var(--p-font-weight-bold);
1374
+ font-weight: var(--font-h5-title-weight);
1321
1375
  }
1322
1376
 
1323
1377
  ._6SgoN {
1324
1378
  margin: 0;
1325
1379
  }
1326
1380
  ._SF95f {
1327
- font-family: var(--font-family-body);
1328
- font-size: var(--font-size-200);
1329
- line-height: var(--font-line-height-200);
1330
- font-weight: var(--p-font-weight-normal);
1381
+ font-family: var(--font-family-primary);
1382
+ font-size: var(--font-body-ui-size);
1383
+ line-height: var(--font-body-ui-height);
1384
+ font-weight: var(--font-body-ui-weight);
1331
1385
  }
1332
1386
  ._HHohB {
1333
- font-family: var(--font-family-body);
1334
- font-size: var(--font-size-100);
1335
- line-height: var(--font-line-height-100);
1336
- font-weight: var(--p-font-weight-normal);
1387
+ font-family: var(--font-family-primary);
1388
+ font-size: var(--font-caption-size);
1389
+ line-height: var(--font-caption-height);
1390
+ font-weight: var(--font-caption-weight);
1337
1391
  }
1338
1392
  ._xdhK0 {
1339
- font-family: var(--font-family-heading);
1340
- font-size: var(--font-size-700);
1341
- line-height: var(--font-line-height-700);
1342
- font-weight: var(--p-font-weight-semibold);
1393
+ font-family: var(--font-family-primary);
1394
+ font-size: var(--font-insight-size);
1395
+ line-height: var(--font-insight-height);
1396
+ font-weight: var(--font-insight-weight);
1343
1397
  }
1344
1398
  ._yZbuO {
1345
- font-family: var(--font-family-body);
1346
- font-size: var(--font-size-200);
1347
- line-height: var(--font-line-height-200);
1348
- font-weight: var(--p-font-weight-normal);
1349
- }
1350
- ._i2LHD {
1351
- font-weight: var(--p-font-weight-bold);
1352
- font-weight: var(--p-font-weight-bold);
1399
+ font-family: var(--font-family-primary);
1400
+ font-size: var(--font-body-ui-size);
1401
+ line-height: var(--font-body-ui-height);
1402
+ font-weight: var(--font-body-ui-weight);
1403
+ }
1404
+ ._T91Eo {
1405
+ font-family: var(--font-family-primary);
1406
+ font-size: var(--font-paragraph-size);
1407
+ line-height: var(--font-paragraph-height);
1408
+ font-weight: var(--font-paragraph-weight);
1409
+ }
1410
+ ._uetB- {
1411
+ font-family: var(--font-family-primary);
1412
+ font-size: var(--font-tagline-size);
1413
+ line-height: var(--font-tagline-height);
1414
+ font-weight: var(--font-tagline-weight);
1353
1415
  }
1354
1416
  ._NgSTT {
1355
1417
  font-style: italic;
@@ -1367,6 +1429,21 @@ h5._i2LHD {
1367
1429
  ._psV6T {
1368
1430
  text-decoration: line-through;
1369
1431
  }
1432
+ ._SF95f._i2LHD, ._yZbuO._i2LHD {
1433
+ font-weight: var(--font-body-ui-weight-bold);
1434
+ }
1435
+ ._HHohB._i2LHD {
1436
+ font-weight: var(--font-caption-weight-bold);
1437
+ }
1438
+ ._T91Eo._i2LHD {
1439
+ font-weight: var(--font-paragraph-weight-bold);
1440
+ }
1441
+ ._uetB-._i2LHD {
1442
+ font-weight: var(--font-tagline-weight-bold);
1443
+ }
1444
+ ._xdhK0._i2LHD {
1445
+ font-weight: var(--font-insight-weight);
1446
+ }
1370
1447
  ._tfSIf {
1371
1448
  text-align: left;
1372
1449
  }
@@ -1380,10 +1457,10 @@ h5._i2LHD {
1380
1457
  text-align: justify;
1381
1458
  }
1382
1459
  ._G6LsE {
1383
- font-family: var(--font-family-body);
1384
- font-size: var(--font-size-200);
1385
- line-height: var(--font-line-height-200);
1386
- font-weight: var(--p-font-weight-normal);
1460
+ font-family: var(--font-family-primary);
1461
+ font-size: var(--font-body-ui-size);
1462
+ line-height: var(--font-body-ui-height);
1463
+ font-weight: var(--font-body-ui-weight);
1387
1464
  line-height: 22px;
1388
1465
  padding: 7px;
1389
1466
  border-radius: var(--border-radius-400);
@@ -1448,10 +1525,10 @@ h5._i2LHD {
1448
1525
  }
1449
1526
 
1450
1527
  ._yPPIy {
1451
- font-family: var(--font-family-body);
1452
- font-size: var(--font-size-200);
1453
- line-height: var(--font-line-height-200);
1454
- font-weight: var(--p-font-weight-normal);
1528
+ font-family: var(--font-family-primary);
1529
+ font-size: var(--font-body-ui-size);
1530
+ line-height: var(--font-body-ui-height);
1531
+ font-weight: var(--font-body-ui-weight);
1455
1532
  position: absolute;
1456
1533
  padding: 8px;
1457
1534
  color: var(--color-surface-on-color);
@@ -1473,10 +1550,10 @@ h5._i2LHD {
1473
1550
  }
1474
1551
 
1475
1552
  ._Y3yFd {
1476
- font-family: var(--font-family-body);
1477
- font-size: var(--font-size-200);
1478
- line-height: var(--font-line-height-200);
1479
- font-weight: var(--p-font-weight-normal);
1553
+ font-family: var(--font-family-primary);
1554
+ font-size: var(--font-body-ui-size);
1555
+ line-height: var(--font-body-ui-height);
1556
+ font-weight: var(--font-body-ui-weight);
1480
1557
  position: absolute;
1481
1558
  padding: 8px;
1482
1559
  color: var(--color-surface-on-color);
@@ -1508,12 +1585,26 @@ h5._i2LHD {
1508
1585
  background: linear-gradient(0deg, var(--color-hover-darken) 0%, var(--color-hover-darken) 100%), var(--color-surface-container);
1509
1586
  }
1510
1587
  ._ISJ4M {
1588
+ width: 100%;
1589
+ box-sizing: border-box;
1590
+ padding: 8px 12px;
1591
+ display: flex;
1592
+ align-items: center;
1593
+ text-transform: uppercase;
1594
+ color: var(--color-surface-on-color-subtle);
1595
+ font-family: var(--font-family-primary);
1596
+ font-size: var(--font-caption-size);
1597
+ line-height: var(--font-caption-height);
1598
+ font-weight: var(--font-caption-weight);
1599
+ font-weight: var(--font-caption-weight-bold);
1600
+ }
1601
+ ._GlMQ1 {
1511
1602
  width: 100%;
1512
1603
  height: 16px;
1513
1604
  display: flex;
1514
1605
  align-items: center;
1515
1606
  }
1516
- ._ISJ4M::after {
1607
+ ._GlMQ1::after {
1517
1608
  content: "";
1518
1609
  display: block;
1519
1610
  width: 100%;
@@ -1560,10 +1651,10 @@ h5._i2LHD {
1560
1651
  color: var(--color-surface-on-color-disabled);
1561
1652
  }
1562
1653
  ._IBrNj {
1563
- font-family: var(--font-family-body);
1564
- font-size: var(--font-size-200);
1565
- line-height: var(--font-line-height-200);
1566
- font-weight: var(--p-font-weight-normal);
1654
+ font-family: var(--font-family-primary);
1655
+ font-size: var(--font-body-ui-size);
1656
+ line-height: var(--font-body-ui-height);
1657
+ font-weight: var(--font-body-ui-weight);
1567
1658
  color: var(--color-surface-on-color);
1568
1659
  padding: 8px 12px;
1569
1660
  display: flex;
@@ -1572,10 +1663,10 @@ h5._i2LHD {
1572
1663
  align-items: center;
1573
1664
  }
1574
1665
  ._7EI7m {
1575
- font-family: var(--font-family-body);
1576
- font-size: var(--font-size-100);
1577
- line-height: var(--font-line-height-100);
1578
- font-weight: var(--p-font-weight-normal);
1666
+ font-family: var(--font-family-primary);
1667
+ font-size: var(--font-caption-size);
1668
+ line-height: var(--font-caption-height);
1669
+ font-weight: var(--font-caption-weight);
1579
1670
  color: var(--color-surface-on-color);
1580
1671
  text-wrap: wrap;
1581
1672
  }
@@ -1720,10 +1811,10 @@ h5._i2LHD {
1720
1811
  text-transform: uppercase;
1721
1812
  }
1722
1813
  ._fo7-A {
1723
- font-family: var(--font-family-body);
1724
- font-size: var(--font-size-200);
1725
- line-height: var(--font-line-height-200);
1726
- font-weight: var(--p-font-weight-normal);
1814
+ font-family: var(--font-family-primary);
1815
+ font-size: var(--font-body-ui-size);
1816
+ line-height: var(--font-body-ui-height);
1817
+ font-weight: var(--font-body-ui-weight);
1727
1818
  display: flex;
1728
1819
  gap: 8px;
1729
1820
  border-radius: var(--border-radius-400);
@@ -1802,10 +1893,10 @@ h5._i2LHD {
1802
1893
  margin-top: 12px;
1803
1894
  }
1804
1895
  ._SebbU a {
1805
- font-family: var(--font-family-body);
1806
- font-size: var(--font-size-200);
1807
- line-height: var(--font-line-height-200);
1808
- font-weight: var(--p-font-weight-normal);
1896
+ font-family: var(--font-family-primary);
1897
+ font-size: var(--font-body-ui-size);
1898
+ line-height: var(--font-body-ui-height);
1899
+ font-weight: var(--font-body-ui-weight);
1809
1900
  text-decoration: none;
1810
1901
  color: var(--color-surface-on-color);
1811
1902
  padding: 12px 20px;
@@ -1825,11 +1916,11 @@ h5._i2LHD {
1825
1916
  border-left: 2px solid var(--color-outline);
1826
1917
  }
1827
1918
  ._SebbU a._CDEVl {
1828
- font-family: var(--font-family-body);
1829
- font-size: var(--font-size-200);
1830
- line-height: var(--font-line-height-200);
1831
- font-weight: var(--p-font-weight-normal);
1832
- font-weight: var(--p-font-weight-bold);
1919
+ font-family: var(--font-family-primary);
1920
+ font-size: var(--font-body-ui-size);
1921
+ line-height: var(--font-body-ui-height);
1922
+ font-weight: var(--font-body-ui-weight);
1923
+ font-weight: var(--font-body-ui-weight-bold);
1833
1924
  background: var(--color-surface-container-high);
1834
1925
  color: var(--color-surface-on-color-bold);
1835
1926
  border-left: 2px solid var(--color-outline);
@@ -1843,10 +1934,10 @@ h5._i2LHD {
1843
1934
  right: 12px;
1844
1935
  }
1845
1936
  ._RXV4h {
1846
- font-family: var(--font-family-body);
1847
- font-size: var(--font-size-100);
1848
- line-height: var(--font-line-height-100);
1849
- font-weight: var(--p-font-weight-normal);
1937
+ font-family: var(--font-family-primary);
1938
+ font-size: var(--font-caption-size);
1939
+ line-height: var(--font-caption-height);
1940
+ font-weight: var(--font-caption-weight);
1850
1941
  display: inline-flex;
1851
1942
  background-color: var(--color-secondary-color);
1852
1943
  height: 20px;
@@ -1940,11 +2031,53 @@ h5._i2LHD {
1940
2031
  ._ZTY3B {
1941
2032
  opacity: 0;
1942
2033
  }
2034
+
2035
+ ._6SSP8 {
2036
+ background-color: transparent;
2037
+ pointer-events: none;
2038
+ }
2039
+
2040
+ ._5rHXj {
2041
+ background: transparent;
2042
+ border: none;
2043
+ box-shadow: none;
2044
+ padding: 0;
2045
+ min-height: unset;
2046
+ overflow: visible;
2047
+ pointer-events: none;
2048
+ position: fixed;
2049
+ }
2050
+
2051
+ ._cq2CU {
2052
+ background: var(--color-surface-color);
2053
+ overflow: auto;
2054
+ outline: none;
2055
+ padding: 32px 24px;
2056
+ box-shadow: 0 0 12px -3px var(--color-shadow-overlay);
2057
+ display: flex;
2058
+ flex-direction: column;
2059
+ box-sizing: border-box;
2060
+ min-height: 266px;
2061
+ pointer-events: all;
2062
+ }
2063
+ ._cq2CU > form {
2064
+ display: contents;
2065
+ }
2066
+
2067
+ .modal-drag-handle {
2068
+ cursor: grab;
2069
+ -webkit-user-select: none;
2070
+ -moz-user-select: none;
2071
+ user-select: none;
2072
+ }
2073
+ .modal-drag-handle:active {
2074
+ cursor: grabbing;
2075
+ }
1943
2076
  ._tgpG9 {
1944
- font-family: var(--font-family-heading);
1945
- font-size: var(--font-size-500);
1946
- line-height: var(--font-line-height-500);
1947
- font-weight: var(--p-font-weight-semibold);
2077
+ font-family: var(--font-family-primary);
2078
+ font-size: var(--font-section-title-size);
2079
+ line-height: var(--font-section-title-height);
2080
+ font-weight: var(--font-section-title-weight);
1948
2081
  color: var(--color-surface-on-color-bold);
1949
2082
  padding: 0;
1950
2083
  }
@@ -1957,10 +2090,10 @@ h5._i2LHD {
1957
2090
  }
1958
2091
 
1959
2092
  ._c2nm4 {
1960
- font-family: var(--font-family-body);
1961
- font-size: var(--font-size-400);
1962
- line-height: var(--font-line-height-400);
1963
- font-weight: var(--p-font-weight-normal);
2093
+ font-family: var(--font-family-primary);
2094
+ font-size: var(--font-sub-title-size);
2095
+ line-height: var(--font-sub-title-height);
2096
+ font-weight: var(--font-sub-title-weight);
1964
2097
  color: var(--color-surface-on-color);
1965
2098
  }
1966
2099
  /**
@@ -1969,10 +2102,10 @@ h5._i2LHD {
1969
2102
  * There is a cleaner solution using background-attachment (https://lea.verou.me/2012/04/background-attachment-local/) but I had some issues in Chrome using that approach
1970
2103
  */
1971
2104
  ._4YK4k {
1972
- font-family: var(--font-family-body);
1973
- font-size: var(--font-size-200);
1974
- line-height: var(--font-line-height-200);
1975
- font-weight: var(--p-font-weight-normal);
2105
+ font-family: var(--font-family-primary);
2106
+ font-size: var(--font-body-ui-size);
2107
+ line-height: var(--font-body-ui-height);
2108
+ font-weight: var(--font-body-ui-weight);
1976
2109
  overflow: auto;
1977
2110
  position: relative;
1978
2111
  padding: 0 8px 0 8px;
@@ -2045,10 +2178,10 @@ h5._i2LHD {
2045
2178
  }
2046
2179
 
2047
2180
  ._e0MoB {
2048
- font-family: var(--font-family-body);
2049
- font-size: var(--font-size-200);
2050
- line-height: var(--font-line-height-200);
2051
- font-weight: var(--p-font-weight-normal);
2181
+ font-family: var(--font-family-primary);
2182
+ font-size: var(--font-body-ui-size);
2183
+ line-height: var(--font-body-ui-height);
2184
+ font-weight: var(--font-body-ui-weight);
2052
2185
  vertical-align: middle;
2053
2186
  text-align: center;
2054
2187
  height: 100%;
@@ -2129,10 +2262,10 @@ h5._i2LHD {
2129
2262
  }
2130
2263
 
2131
2264
  ._2AoB4 {
2132
- font-family: var(--font-family-body);
2133
- font-size: var(--font-size-200);
2134
- line-height: var(--font-line-height-200);
2135
- font-weight: var(--p-font-weight-normal);
2265
+ font-family: var(--font-family-primary);
2266
+ font-size: var(--font-body-ui-size);
2267
+ line-height: var(--font-body-ui-height);
2268
+ font-weight: var(--font-body-ui-weight);
2136
2269
  vertical-align: middle;
2137
2270
  text-align: center;
2138
2271
  height: 100%;
@@ -2531,10 +2664,10 @@ input:disabled[data-indeterminate=true] ~ ._kmvBP::after {
2531
2664
  right: 10px;
2532
2665
  }
2533
2666
  ._iSC5P._iSC5P {
2534
- font-family: var(--font-family-body);
2535
- font-size: var(--font-size-200);
2536
- line-height: var(--font-line-height-200);
2537
- font-weight: var(--p-font-weight-normal);
2667
+ font-family: var(--font-family-primary);
2668
+ font-size: var(--font-body-ui-size);
2669
+ line-height: var(--font-body-ui-height);
2670
+ font-weight: var(--font-body-ui-weight);
2538
2671
  background: var(--color-surface-inverse);
2539
2672
  color: var(--color-surface-on-inverse);
2540
2673
  border-radius: var(--border-radius-400);
@@ -2557,11 +2690,11 @@ input:disabled[data-indeterminate=true] ~ ._kmvBP::after {
2557
2690
  text-align: left;
2558
2691
  }
2559
2692
  ._KKljd {
2560
- font-family: var(--font-family-body);
2561
- font-size: var(--font-size-100);
2562
- line-height: var(--font-line-height-100);
2563
- font-weight: var(--p-font-weight-normal);
2564
- font-weight: var(--p-font-weight-bold);
2693
+ font-family: var(--font-family-primary);
2694
+ font-size: var(--font-caption-size);
2695
+ line-height: var(--font-caption-height);
2696
+ font-weight: var(--font-caption-weight);
2697
+ font-weight: var(--font-caption-weight-bold);
2565
2698
  padding: 0 16px 8px 16px;
2566
2699
  background-color: unset;
2567
2700
  color: var(--color-surface-on-color-bold);
@@ -2635,10 +2768,10 @@ input:disabled[data-indeterminate=true] ~ ._kmvBP::after {
2635
2768
  table-layout: fixed;
2636
2769
  }
2637
2770
  ._1SNLz {
2638
- font-family: var(--font-family-body);
2639
- font-size: var(--font-size-200);
2640
- line-height: var(--font-line-height-200);
2641
- font-weight: var(--p-font-weight-normal);
2771
+ font-family: var(--font-family-primary);
2772
+ font-size: var(--font-body-ui-size);
2773
+ line-height: var(--font-body-ui-height);
2774
+ font-weight: var(--font-body-ui-weight);
2642
2775
  border: 1px solid var(--color-outline-variant);
2643
2776
  border-radius: var(--border-radius-600);
2644
2777
  }
@@ -2661,11 +2794,11 @@ input:disabled[data-indeterminate=true] ~ ._kmvBP::after {
2661
2794
  border-bottom-right-radius: 0;
2662
2795
  }
2663
2796
  ._mp1Ok {
2664
- font-family: var(--font-family-body);
2665
- font-size: var(--font-size-200);
2666
- line-height: var(--font-line-height-200);
2667
- font-weight: var(--p-font-weight-normal);
2668
- font-weight: var(--p-font-weight-bold);
2797
+ font-family: var(--font-family-primary);
2798
+ font-size: var(--font-body-ui-size);
2799
+ line-height: var(--font-body-ui-height);
2800
+ font-weight: var(--font-body-ui-weight);
2801
+ font-weight: var(--font-body-ui-weight-bold);
2669
2802
  }
2670
2803
  ._mp1Ok tr td {
2671
2804
  background: var(--color-surface-container-high);
@@ -2781,19 +2914,19 @@ input:disabled[data-indeterminate=true] ~ ._kmvBP::after {
2781
2914
  }
2782
2915
 
2783
2916
  ._8xIYW {
2784
- font-family: var(--font-family-body);
2785
- font-size: var(--font-size-200);
2786
- line-height: var(--font-line-height-200);
2787
- font-weight: var(--p-font-weight-normal);
2788
- font-weight: var(--p-font-weight-bold);
2917
+ font-family: var(--font-family-primary);
2918
+ font-size: var(--font-body-ui-size);
2919
+ line-height: var(--font-body-ui-height);
2920
+ font-weight: var(--font-body-ui-weight);
2921
+ font-weight: var(--font-body-ui-weight-bold);
2789
2922
  color: var(--color-surface-on-color-bold);
2790
2923
  }
2791
2924
 
2792
2925
  ._oA2J6 {
2793
- font-family: var(--font-family-body);
2794
- font-size: var(--font-size-200);
2795
- line-height: var(--font-line-height-200);
2796
- font-weight: var(--p-font-weight-normal);
2926
+ font-family: var(--font-family-primary);
2927
+ font-size: var(--font-body-ui-size);
2928
+ line-height: var(--font-body-ui-height);
2929
+ font-weight: var(--font-body-ui-weight);
2797
2930
  flex-grow: 1;
2798
2931
  color: var(--color-surface-on-color);
2799
2932
  }
@@ -2886,10 +3019,10 @@ input:disabled[data-indeterminate=true] ~ ._kmvBP::after {
2886
3019
  min-height: 38px;
2887
3020
  }
2888
3021
  ._S--Ce {
2889
- font-family: var(--font-family-body);
2890
- font-size: var(--font-size-100);
2891
- line-height: var(--font-line-height-100);
2892
- font-weight: var(--p-font-weight-normal);
3022
+ font-family: var(--font-family-primary);
3023
+ font-size: var(--font-caption-size);
3024
+ line-height: var(--font-caption-height);
3025
+ font-weight: var(--font-caption-weight);
2893
3026
  color: var(--color-surface-on-color);
2894
3027
  }
2895
3028
  ._fRjhT {
@@ -2971,10 +3104,10 @@ input:disabled[data-indeterminate=true] ~ ._kmvBP::after {
2971
3104
  color: var(--color-upsell-color);
2972
3105
  }
2973
3106
  ._FsCJQ {
2974
- font-family: var(--font-family-body);
2975
- font-size: var(--font-size-200);
2976
- line-height: var(--font-line-height-200);
2977
- font-weight: var(--p-font-weight-normal);
3107
+ font-family: var(--font-family-primary);
3108
+ font-size: var(--font-body-ui-size);
3109
+ line-height: var(--font-body-ui-height);
3110
+ font-weight: var(--font-body-ui-weight);
2978
3111
  color: var(--color-surface-on-inverse);
2979
3112
  padding: 16px;
2980
3113
  text-align: center;
@@ -3000,10 +3133,10 @@ input:disabled[data-indeterminate=true] ~ ._kmvBP::after {
3000
3133
  height: 48px;
3001
3134
  }
3002
3135
  ._6PNwZ {
3003
- font-family: var(--font-family-body);
3004
- font-size: var(--font-size-100);
3005
- line-height: var(--font-line-height-100);
3006
- font-weight: var(--p-font-weight-normal);
3136
+ font-family: var(--font-family-primary);
3137
+ font-size: var(--font-caption-size);
3138
+ line-height: var(--font-caption-height);
3139
+ font-weight: var(--font-caption-weight);
3007
3140
  top: 50%;
3008
3141
  left: 50%;
3009
3142
  width: 100%;
@@ -3183,10 +3316,10 @@ input:disabled[data-indeterminate=true] ~ ._kmvBP::after {
3183
3316
  height: 100%;
3184
3317
  }
3185
3318
  ._jp9-G input {
3186
- font-family: var(--font-family-body);
3187
- font-size: var(--font-size-200);
3188
- line-height: var(--font-line-height-200);
3189
- font-weight: var(--p-font-weight-normal);
3319
+ font-family: var(--font-family-primary);
3320
+ font-size: var(--font-body-ui-size);
3321
+ line-height: var(--font-body-ui-height);
3322
+ font-weight: var(--font-body-ui-weight);
3190
3323
  border: 1px solid transparent;
3191
3324
  display: flex;
3192
3325
  justify-content: flex-end;
@@ -3508,10 +3641,10 @@ input:disabled[data-indeterminate=true] ~ ._kmvBP::after {
3508
3641
  max-width: 667px;
3509
3642
  }
3510
3643
  ._mi-dC {
3511
- font-family: var(--font-family-body);
3512
- font-size: var(--font-size-200);
3513
- line-height: var(--font-line-height-200);
3514
- font-weight: var(--p-font-weight-normal);
3644
+ font-family: var(--font-family-primary);
3645
+ font-size: var(--font-paragraph-size);
3646
+ line-height: var(--font-paragraph-height);
3647
+ font-weight: var(--font-paragraph-weight);
3515
3648
  color: var(--color-surface-on-color);
3516
3649
  text-align: center;
3517
3650
  white-space: pre-line;
@@ -3694,10 +3827,10 @@ input:disabled[data-indeterminate=true] ~ ._kmvBP::after {
3694
3827
  width: 336px;
3695
3828
  }
3696
3829
  ._N37zE {
3697
- font-family: var(--font-family-body);
3698
- font-size: var(--font-size-200);
3699
- line-height: var(--font-line-height-200);
3700
- font-weight: var(--p-font-weight-normal);
3830
+ font-family: var(--font-family-primary);
3831
+ font-size: var(--font-body-ui-size);
3832
+ line-height: var(--font-body-ui-height);
3833
+ font-weight: var(--font-body-ui-weight);
3701
3834
  width: 200px;
3702
3835
  border-radius: 0px;
3703
3836
  color: var(--color-surface-on-color);
@@ -3792,11 +3925,11 @@ input:disabled[data-indeterminate=true] ~ ._kmvBP::after {
3792
3925
  padding: 2px;
3793
3926
  }
3794
3927
  ._lehFG {
3795
- font-family: var(--font-family-body);
3796
- font-size: var(--font-size-200);
3797
- line-height: var(--font-line-height-200);
3798
- font-weight: var(--p-font-weight-normal);
3799
- font-weight: var(--p-font-weight-bold);
3928
+ font-family: var(--font-family-primary);
3929
+ font-size: var(--font-body-ui-size);
3930
+ line-height: var(--font-body-ui-height);
3931
+ font-weight: var(--font-body-ui-weight);
3932
+ font-weight: var(--font-body-ui-weight-bold);
3800
3933
  position: relative;
3801
3934
  background-color: transparent;
3802
3935
  color: var(--color-surface-on-color-bold);
@@ -3827,17 +3960,17 @@ input:disabled[data-indeterminate=true] ~ ._kmvBP::after {
3827
3960
  color: var(--color-surface-on-color);
3828
3961
  }
3829
3962
  ._2WdOf {
3830
- font-family: var(--font-family-heading);
3831
- font-size: var(--font-size-400);
3832
- line-height: var(--font-line-height-400);
3833
- font-weight: var(--p-font-weight-semibold);
3963
+ font-family: var(--font-family-primary);
3964
+ font-size: var(--font-content-title-size);
3965
+ line-height: var(--font-content-title-height);
3966
+ font-weight: var(--font-content-title-weight);
3834
3967
  margin: 0;
3835
3968
  }
3836
3969
  ._zybxx {
3837
- font-family: var(--font-family-body);
3838
- font-size: var(--font-size-200);
3839
- line-height: var(--font-line-height-200);
3840
- font-weight: var(--p-font-weight-normal);
3970
+ font-family: var(--font-family-primary);
3971
+ font-size: var(--font-body-ui-size);
3972
+ line-height: var(--font-body-ui-height);
3973
+ font-weight: var(--font-body-ui-weight);
3841
3974
  margin: 0;
3842
3975
  }
3843
3976
  ._xT-U1 {
@@ -3861,10 +3994,10 @@ input:disabled[data-indeterminate=true] ~ ._kmvBP::after {
3861
3994
  background-color: var(--color-surface-container);
3862
3995
  }
3863
3996
  ._JaB08 textarea {
3864
- font-family: var(--font-family-body);
3865
- font-size: var(--font-size-200);
3866
- line-height: var(--font-line-height-200);
3867
- font-weight: var(--p-font-weight-normal);
3997
+ font-family: var(--font-family-primary);
3998
+ font-size: var(--font-body-ui-size);
3999
+ line-height: var(--font-body-ui-height);
4000
+ font-weight: var(--font-body-ui-weight);
3868
4001
  color: var(--color-surface-on-color);
3869
4002
  margin: 0;
3870
4003
  border: none;
@@ -3933,11 +4066,11 @@ input:disabled[data-indeterminate=true] ~ ._kmvBP::after {
3933
4066
  outline: none;
3934
4067
  }
3935
4068
  ._JXakU, ._MsKVV, ._ZxEwG {
3936
- font-family: var(--font-family-body);
3937
- font-size: var(--font-size-200);
3938
- line-height: var(--font-line-height-200);
3939
- font-weight: var(--p-font-weight-normal);
3940
- font-weight: var(--p-font-weight-bold);
4069
+ font-family: var(--font-family-primary);
4070
+ font-size: var(--font-body-ui-size);
4071
+ line-height: var(--font-body-ui-height);
4072
+ font-weight: var(--font-body-ui-weight);
4073
+ font-weight: var(--font-body-ui-weight-bold);
3941
4074
  color: var(--color-surface-on-color-bold);
3942
4075
  display: flex;
3943
4076
  align-items: center;
@@ -4083,11 +4216,11 @@ input:focus-visible + ._JXakU, input:focus-visible + ._ZxEwG {
4083
4216
  outline: none;
4084
4217
  }
4085
4218
  ._xzukU {
4086
- font-family: var(--font-family-body);
4087
- font-size: var(--font-size-200);
4088
- line-height: var(--font-line-height-200);
4089
- font-weight: var(--p-font-weight-normal);
4090
- font-weight: var(--p-font-weight-bold);
4219
+ font-family: var(--font-family-primary);
4220
+ font-size: var(--font-body-ui-size);
4221
+ line-height: var(--font-body-ui-height);
4222
+ font-weight: var(--font-body-ui-weight);
4223
+ font-weight: var(--font-body-ui-weight-bold);
4091
4224
  padding: 0;
4092
4225
  width: auto;
4093
4226
  float: none;
@@ -4102,19 +4235,19 @@ input:focus-visible + ._JXakU, input:focus-visible + ._ZxEwG {
4102
4235
  }
4103
4236
 
4104
4237
  ._JNfQO {
4105
- font-family: var(--font-family-body);
4106
- font-size: var(--font-size-100);
4107
- line-height: var(--font-line-height-100);
4108
- font-weight: var(--p-font-weight-normal);
4238
+ font-family: var(--font-family-primary);
4239
+ font-size: var(--font-caption-size);
4240
+ line-height: var(--font-caption-height);
4241
+ font-weight: var(--font-caption-weight);
4109
4242
  color: var(--color-surface-on-color);
4110
4243
  }
4111
4244
 
4112
4245
  ._2KvuU {
4113
- font-family: var(--font-family-body);
4114
- font-size: var(--font-size-200);
4115
- line-height: var(--font-line-height-200);
4116
- font-weight: var(--p-font-weight-normal);
4117
- font-weight: var(--p-font-weight-bold);
4246
+ font-family: var(--font-family-primary);
4247
+ font-size: var(--font-body-ui-size);
4248
+ line-height: var(--font-body-ui-height);
4249
+ font-weight: var(--font-body-ui-weight);
4250
+ font-weight: var(--font-body-ui-weight-bold);
4118
4251
  padding: 0;
4119
4252
  width: auto;
4120
4253
  float: none;
@@ -4122,18 +4255,18 @@ input:focus-visible + ._JXakU, input:focus-visible + ._ZxEwG {
4122
4255
  min-height: 16px;
4123
4256
  }
4124
4257
  ._ZeIOd {
4125
- font-family: var(--font-family-body);
4126
- font-size: var(--font-size-100);
4127
- line-height: var(--font-line-height-100);
4128
- font-weight: var(--p-font-weight-normal);
4258
+ font-family: var(--font-family-primary);
4259
+ font-size: var(--font-caption-size);
4260
+ line-height: var(--font-caption-height);
4261
+ font-weight: var(--font-caption-weight);
4129
4262
  color: var(--color-surface-on-color);
4130
4263
  }
4131
4264
  ._s7mjc {
4132
- font-family: var(--font-family-body);
4133
- font-size: var(--font-size-200);
4134
- line-height: var(--font-line-height-200);
4135
- font-weight: var(--p-font-weight-normal);
4136
- font-weight: var(--p-font-weight-bold);
4265
+ font-family: var(--font-family-primary);
4266
+ font-size: var(--font-body-ui-size);
4267
+ line-height: var(--font-body-ui-height);
4268
+ font-weight: var(--font-body-ui-weight);
4269
+ font-weight: var(--font-body-ui-weight-bold);
4137
4270
  padding: 0;
4138
4271
  width: auto;
4139
4272
  float: none;
@@ -4148,10 +4281,10 @@ input:focus-visible + ._JXakU, input:focus-visible + ._ZxEwG {
4148
4281
  }
4149
4282
 
4150
4283
  ._JIw-5 {
4151
- font-family: var(--font-family-body);
4152
- font-size: var(--font-size-100);
4153
- line-height: var(--font-line-height-100);
4154
- font-weight: var(--p-font-weight-normal);
4284
+ font-family: var(--font-family-primary);
4285
+ font-size: var(--font-caption-size);
4286
+ line-height: var(--font-caption-height);
4287
+ font-weight: var(--font-caption-weight);
4155
4288
  color: var(--color-surface-on-color);
4156
4289
  }
4157
4290
 
@@ -4203,11 +4336,11 @@ input:checked ~ ._P588B {
4203
4336
  pointer-events: none;
4204
4337
  }
4205
4338
  ._U--9r {
4206
- font-family: var(--font-family-body);
4207
- font-size: var(--font-size-200);
4208
- line-height: var(--font-line-height-200);
4209
- font-weight: var(--p-font-weight-normal);
4210
- font-weight: var(--p-font-weight-bold);
4339
+ font-family: var(--font-family-primary);
4340
+ font-size: var(--font-body-ui-size);
4341
+ line-height: var(--font-body-ui-height);
4342
+ font-weight: var(--font-body-ui-weight);
4343
+ font-weight: var(--font-body-ui-weight-bold);
4211
4344
  padding: 0;
4212
4345
  width: auto;
4213
4346
  float: none;
@@ -4218,10 +4351,10 @@ input:checked ~ ._P588B {
4218
4351
  color: var(--color-surface-on-container-disabled);
4219
4352
  }
4220
4353
  ._NC-bO {
4221
- font-family: var(--font-family-body);
4222
- font-size: var(--font-size-100);
4223
- line-height: var(--font-line-height-100);
4224
- font-weight: var(--p-font-weight-normal);
4354
+ font-family: var(--font-family-primary);
4355
+ font-size: var(--font-caption-size);
4356
+ line-height: var(--font-caption-height);
4357
+ font-weight: var(--font-caption-weight);
4225
4358
  color: var(--color-surface-on-color);
4226
4359
  }
4227
4360
  ._04Cjp {
@@ -4294,10 +4427,10 @@ input:disabled + ._Yfxkl::after {
4294
4427
  top: 4px;
4295
4428
  }
4296
4429
  ._6Of1F {
4297
- font-family: var(--font-family-body);
4298
- font-size: var(--font-size-200);
4299
- line-height: var(--font-line-height-200);
4300
- font-weight: var(--p-font-weight-normal);
4430
+ font-family: var(--font-family-primary);
4431
+ font-size: var(--font-body-ui-size);
4432
+ line-height: var(--font-body-ui-height);
4433
+ font-weight: var(--font-body-ui-weight);
4301
4434
  line-height: 22px;
4302
4435
  padding: 7px;
4303
4436
  border-radius: var(--border-radius-400);
@@ -4362,10 +4495,10 @@ input:disabled + ._Yfxkl::after {
4362
4495
  color: var(--color-surface-on-container-disabled);
4363
4496
  }
4364
4497
  ._1ruWK {
4365
- font-family: var(--font-family-body);
4366
- font-size: var(--font-size-100);
4367
- line-height: var(--font-line-height-100);
4368
- font-weight: var(--p-font-weight-normal);
4498
+ font-family: var(--font-family-primary);
4499
+ font-size: var(--font-caption-size);
4500
+ line-height: var(--font-caption-height);
4501
+ font-weight: var(--font-caption-weight);
4369
4502
  color: var(--color-surface-on-color-disabled);
4370
4503
  }
4371
4504
 
@@ -4373,10 +4506,10 @@ input:disabled + ._Yfxkl::after {
4373
4506
  color: var(--color-surface-on-color);
4374
4507
  }
4375
4508
  ._cSkvD {
4376
- font-family: var(--font-family-body);
4377
- font-size: var(--font-size-200);
4378
- line-height: var(--font-line-height-200);
4379
- font-weight: var(--p-font-weight-normal);
4509
+ font-family: var(--font-family-primary);
4510
+ font-size: var(--font-body-ui-size);
4511
+ line-height: var(--font-body-ui-height);
4512
+ font-weight: var(--font-body-ui-weight);
4380
4513
  color: var(--color-surface-on-color);
4381
4514
  display: flex;
4382
4515
  flex-direction: column;
@@ -4384,10 +4517,10 @@ input:disabled + ._Yfxkl::after {
4384
4517
  padding: 8px 12px;
4385
4518
  }
4386
4519
  ._t-FNM, ._7xqY4 {
4387
- font-family: var(--font-family-body);
4388
- font-size: var(--font-size-200);
4389
- line-height: var(--font-line-height-200);
4390
- font-weight: var(--p-font-weight-normal);
4520
+ font-family: var(--font-family-primary);
4521
+ font-size: var(--font-body-ui-size);
4522
+ line-height: var(--font-body-ui-height);
4523
+ font-weight: var(--font-body-ui-weight);
4391
4524
  line-height: 22px;
4392
4525
  padding: 7px;
4393
4526
  border-radius: var(--border-radius-400);
@@ -4440,10 +4573,10 @@ input:disabled + ._Yfxkl::after {
4440
4573
  width: 100%;
4441
4574
  }
4442
4575
  ._6cH4X, ._DMb6M input, ._DMb6M {
4443
- font-family: var(--font-family-body);
4444
- font-size: var(--font-size-200);
4445
- line-height: var(--font-line-height-200);
4446
- font-weight: var(--p-font-weight-normal);
4576
+ font-family: var(--font-family-primary);
4577
+ font-size: var(--font-body-ui-size);
4578
+ line-height: var(--font-body-ui-height);
4579
+ font-weight: var(--font-body-ui-weight);
4447
4580
  line-height: 22px;
4448
4581
  padding: 7px;
4449
4582
  border-radius: var(--border-radius-400);
@@ -4558,10 +4691,10 @@ input:disabled + ._Yfxkl::after {
4558
4691
  }
4559
4692
 
4560
4693
  ._Ya6Zr {
4561
- font-family: var(--font-family-body);
4562
- font-size: var(--font-size-200);
4563
- line-height: var(--font-line-height-200);
4564
- font-weight: var(--p-font-weight-normal);
4694
+ font-family: var(--font-family-primary);
4695
+ font-size: var(--font-body-ui-size);
4696
+ line-height: var(--font-body-ui-height);
4697
+ font-weight: var(--font-body-ui-weight);
4565
4698
  vertical-align: middle;
4566
4699
  text-align: center;
4567
4700
  height: 100%;
@@ -4627,10 +4760,10 @@ input:disabled + ._Yfxkl::after {
4627
4760
  color: var(--color-surface-on-color-disabled);
4628
4761
  }
4629
4762
  ._yV-BZ, ._9i8Lj input, ._9i8Lj {
4630
- font-family: var(--font-family-body);
4631
- font-size: var(--font-size-200);
4632
- line-height: var(--font-line-height-200);
4633
- font-weight: var(--p-font-weight-normal);
4763
+ font-family: var(--font-family-primary);
4764
+ font-size: var(--font-body-ui-size);
4765
+ line-height: var(--font-body-ui-height);
4766
+ font-weight: var(--font-body-ui-weight);
4634
4767
  line-height: 22px;
4635
4768
  padding: 7px;
4636
4769
  border-radius: var(--border-radius-400);
@@ -4722,10 +4855,10 @@ input:disabled + ._Yfxkl::after {
4722
4855
  color: transparent;
4723
4856
  }
4724
4857
  ._ddacu {
4725
- font-family: var(--font-family-body);
4726
- font-size: var(--font-size-200);
4727
- line-height: var(--font-line-height-200);
4728
- font-weight: var(--p-font-weight-normal);
4858
+ font-family: var(--font-family-primary);
4859
+ font-size: var(--font-body-ui-size);
4860
+ line-height: var(--font-body-ui-height);
4861
+ font-weight: var(--font-body-ui-weight);
4729
4862
  position: absolute;
4730
4863
  height: 36px;
4731
4864
  margin-top: 1px;
@@ -5884,10 +6017,10 @@ input._TEU6N {
5884
6017
  object-fit: cover;
5885
6018
  }
5886
6019
  ._9g-tn {
5887
- font-family: var(--font-family-body);
5888
- font-size: var(--font-size-200);
5889
- line-height: var(--font-line-height-200);
5890
- font-weight: var(--p-font-weight-normal);
6020
+ font-family: var(--font-family-primary);
6021
+ font-size: var(--font-body-ui-size);
6022
+ line-height: var(--font-body-ui-height);
6023
+ font-weight: var(--font-body-ui-weight);
5891
6024
  width: 20px;
5892
6025
  height: 20px;
5893
6026
  }
@@ -5896,10 +6029,10 @@ input._TEU6N {
5896
6029
  margin-top: 10px;
5897
6030
  }
5898
6031
  ._vNXJW {
5899
- font-family: var(--font-family-body);
5900
- font-size: var(--font-size-400);
5901
- line-height: var(--font-line-height-400);
5902
- font-weight: var(--p-font-weight-normal);
6032
+ font-family: var(--font-family-primary);
6033
+ font-size: var(--font-sub-title-size);
6034
+ line-height: var(--font-sub-title-height);
6035
+ font-weight: var(--font-sub-title-weight);
5903
6036
  width: 30px;
5904
6037
  height: 30px;
5905
6038
  }
@@ -5908,10 +6041,10 @@ input._TEU6N {
5908
6041
  margin-top: 15px;
5909
6042
  }
5910
6043
  ._9ZKAB {
5911
- font-family: var(--font-family-heading);
5912
- font-size: var(--font-size-500);
5913
- line-height: var(--font-line-height-500);
5914
- font-weight: var(--p-font-weight-semibold);
6044
+ font-family: var(--font-family-primary);
6045
+ font-size: var(--font-section-title-size);
6046
+ line-height: var(--font-section-title-height);
6047
+ font-weight: var(--font-section-title-weight);
5915
6048
  width: 40px;
5916
6049
  height: 40px;
5917
6050
  }
@@ -5920,10 +6053,10 @@ input._TEU6N {
5920
6053
  margin-top: 18px;
5921
6054
  }
5922
6055
  ._uv14Y {
5923
- font-family: var(--font-family-heading);
5924
- font-size: var(--font-size-600);
5925
- line-height: var(--font-line-height-600);
5926
- font-weight: var(--p-font-weight-semibold);
6056
+ font-family: var(--font-family-primary);
6057
+ font-size: var(--font-page-title-size);
6058
+ line-height: var(--font-page-title-height);
6059
+ font-weight: var(--font-page-title-weight);
5927
6060
  width: 80px;
5928
6061
  height: 80px;
5929
6062
  }
@@ -5941,11 +6074,11 @@ input._TEU6N {
5941
6074
  padding-top: 25%;
5942
6075
  }
5943
6076
  ._Cg5Nf {
5944
- font-family: var(--font-family-body);
5945
- font-size: var(--font-size-100);
5946
- line-height: var(--font-line-height-100);
5947
- font-weight: var(--p-font-weight-normal);
5948
- font-weight: var(--p-font-weight-bold);
6077
+ font-family: var(--font-family-primary);
6078
+ font-size: var(--font-caption-size);
6079
+ line-height: var(--font-caption-height);
6080
+ font-weight: var(--font-caption-weight);
6081
+ font-weight: var(--font-caption-weight-bold);
5949
6082
  border-radius: var(--border-radius-300);
5950
6083
  padding: 2px 8px;
5951
6084
  display: inline-block;
@@ -5992,11 +6125,11 @@ input._TEU6N {
5992
6125
  text-transform: none;
5993
6126
  }
5994
6127
  ._vOTWZ {
5995
- font-family: var(--font-family-body);
5996
- font-size: var(--font-size-200);
5997
- line-height: var(--font-line-height-200);
5998
- font-weight: var(--p-font-weight-normal);
5999
- font-weight: var(--p-font-weight-bold);
6128
+ font-family: var(--font-family-primary);
6129
+ font-size: var(--font-body-ui-size);
6130
+ line-height: var(--font-body-ui-height);
6131
+ font-weight: var(--font-body-ui-weight);
6132
+ font-weight: var(--font-body-ui-weight-bold);
6000
6133
  border-radius: 25px;
6001
6134
  padding: 5px 12px;
6002
6135
  max-width: -moz-fit-content;
@@ -6043,6 +6176,39 @@ input._TEU6N {
6043
6176
  ._4M-yZ {
6044
6177
  /* min-width: 40px; */
6045
6178
  }
6179
+ ._izwx7 {
6180
+ display: inline-flex;
6181
+ align-items: center;
6182
+ gap: 2px;
6183
+ flex-shrink: 0;
6184
+ }
6185
+
6186
+ ._6Egix {
6187
+ display: inline-flex;
6188
+ align-items: center;
6189
+ justify-content: center;
6190
+ width: 20px;
6191
+ height: 20px;
6192
+ box-sizing: border-box;
6193
+ overflow: hidden;
6194
+ background-color: var(--color-surface-color);
6195
+ border: 1px solid var(--color-outline);
6196
+ border-radius: var(--border-radius-300);
6197
+ color: var(--color-surface-on-color-subtle);
6198
+ font-family: var(--font-family-body);
6199
+ font-size: var(--font-size-200);
6200
+ font-weight: var(--p-font-weight-normal);
6201
+ line-height: var(--font-line-height-200);
6202
+ text-align: center;
6203
+ -webkit-user-select: none;
6204
+ -moz-user-select: none;
6205
+ user-select: none;
6206
+ }
6207
+ ._MlLBj {
6208
+ font-size: 0.5625rem;
6209
+ font-weight: var(--p-font-weight-semibold);
6210
+ line-height: 1rem;
6211
+ }
6046
6212
  ._6bVLs {
6047
6213
  display: flex;
6048
6214
  flex-direction: column;
@@ -6192,7 +6358,10 @@ input._TEU6N {
6192
6358
  overflow: hidden;
6193
6359
  text-overflow: ellipsis;
6194
6360
  color: var(--nav-object-normal-color);
6195
- font-family: var(--font-family-body);
6361
+ font-family: var(--font-family-primary);
6362
+ font-size: var(--font-primary-nav-item-size);
6363
+ font-weight: var(--font-primary-nav-item-weight-bold);
6364
+ letter-spacing: var(--font-primary-nav-item-letterspacing);
6196
6365
  }
6197
6366
  ._MFqwx {
6198
6367
  position: absolute;
@@ -6327,7 +6496,10 @@ input._TEU6N {
6327
6496
  overflow: hidden;
6328
6497
  text-overflow: ellipsis;
6329
6498
  color: var(--nav-object-normal-color);
6330
- font-family: var(--font-family-body);
6499
+ font-family: var(--font-family-primary);
6500
+ font-size: var(--font-primary-nav-item-size);
6501
+ font-weight: var(--font-primary-nav-item-weight);
6502
+ letter-spacing: var(--font-primary-nav-item-letterspacing);
6331
6503
  }
6332
6504
  ._uMbkq {
6333
6505
  width: 6px;
@@ -6388,10 +6560,10 @@ input._TEU6N {
6388
6560
  padding: 0;
6389
6561
  }
6390
6562
  ._-BgMZ {
6391
- font-family: var(--font-family-body);
6392
- font-size: var(--font-size-200);
6393
- line-height: var(--font-line-height-200);
6394
- font-weight: var(--p-font-weight-normal);
6563
+ font-family: var(--font-family-primary);
6564
+ font-size: var(--font-body-ui-size);
6565
+ line-height: var(--font-body-ui-height);
6566
+ font-weight: var(--font-body-ui-weight);
6395
6567
  display: inline-flex;
6396
6568
  align-items: center;
6397
6569
  gap: 8px;
@@ -6420,11 +6592,11 @@ input._TEU6N {
6420
6592
  background: var(--color-neutral-container-variant);
6421
6593
  border-bottom-color: var(--color-surface-on-color-bold);
6422
6594
  color: var(--color-surface-on-color-bold);
6423
- font-family: var(--font-family-body);
6424
- font-size: var(--font-size-200);
6425
- line-height: var(--font-line-height-200);
6426
- font-weight: var(--p-font-weight-normal);
6427
- font-weight: var(--p-font-weight-bold);
6595
+ font-family: var(--font-family-primary);
6596
+ font-size: var(--font-body-ui-size);
6597
+ line-height: var(--font-body-ui-height);
6598
+ font-weight: var(--font-body-ui-weight);
6599
+ font-weight: var(--font-body-ui-weight-bold);
6428
6600
  }
6429
6601
  ._AyUHY {
6430
6602
  color: var(--color-surface-on-container-disabled);
@@ -6456,7 +6628,7 @@ input._TEU6N {
6456
6628
  padding-top: 20px;
6457
6629
  padding-bottom: 20px;
6458
6630
  padding-left: 0px;
6459
- padding-right: 20px;
6631
+ padding-right: 0px;
6460
6632
  }
6461
6633
  ._DVRRE {
6462
6634
  display: none;
@@ -6485,10 +6657,10 @@ input._TEU6N {
6485
6657
  flex: 65;
6486
6658
  }
6487
6659
  ._xMUQ6 {
6488
- font-family: var(--font-family-body);
6489
- font-size: var(--font-size-200);
6490
- line-height: var(--font-line-height-200);
6491
- font-weight: var(--p-font-weight-normal);
6660
+ font-family: var(--font-family-primary);
6661
+ font-size: var(--font-paragraph-size);
6662
+ line-height: var(--font-paragraph-height);
6663
+ font-weight: var(--font-paragraph-weight);
6492
6664
  color: var(--color-surface-on-color);
6493
6665
  }
6494
6666
  ._79QnQ {