@7shifts/sous-chef 4.8.0 → 4.9.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 (14) hide show
  1. package/dist/foundation/constants.d.ts +1 -1
  2. package/dist/index.css +455 -339
  3. package/dist/index.css.map +1 -1
  4. package/dist/index.js +457 -351
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.modern.js +648 -539
  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/tests/visual.d.ts +27 -0
  12. package/dist/typography/Text/constants.d.ts +2 -0
  13. package/dist/typography/Text/types.d.ts +1 -1
  14. package/package.json +12 -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);
@@ -1560,10 +1637,10 @@ h5._i2LHD {
1560
1637
  color: var(--color-surface-on-color-disabled);
1561
1638
  }
1562
1639
  ._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);
1640
+ font-family: var(--font-family-primary);
1641
+ font-size: var(--font-body-ui-size);
1642
+ line-height: var(--font-body-ui-height);
1643
+ font-weight: var(--font-body-ui-weight);
1567
1644
  color: var(--color-surface-on-color);
1568
1645
  padding: 8px 12px;
1569
1646
  display: flex;
@@ -1572,10 +1649,10 @@ h5._i2LHD {
1572
1649
  align-items: center;
1573
1650
  }
1574
1651
  ._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);
1652
+ font-family: var(--font-family-primary);
1653
+ font-size: var(--font-caption-size);
1654
+ line-height: var(--font-caption-height);
1655
+ font-weight: var(--font-caption-weight);
1579
1656
  color: var(--color-surface-on-color);
1580
1657
  text-wrap: wrap;
1581
1658
  }
@@ -1720,10 +1797,10 @@ h5._i2LHD {
1720
1797
  text-transform: uppercase;
1721
1798
  }
1722
1799
  ._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);
1800
+ font-family: var(--font-family-primary);
1801
+ font-size: var(--font-body-ui-size);
1802
+ line-height: var(--font-body-ui-height);
1803
+ font-weight: var(--font-body-ui-weight);
1727
1804
  display: flex;
1728
1805
  gap: 8px;
1729
1806
  border-radius: var(--border-radius-400);
@@ -1802,10 +1879,10 @@ h5._i2LHD {
1802
1879
  margin-top: 12px;
1803
1880
  }
1804
1881
  ._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);
1882
+ font-family: var(--font-family-primary);
1883
+ font-size: var(--font-body-ui-size);
1884
+ line-height: var(--font-body-ui-height);
1885
+ font-weight: var(--font-body-ui-weight);
1809
1886
  text-decoration: none;
1810
1887
  color: var(--color-surface-on-color);
1811
1888
  padding: 12px 20px;
@@ -1825,11 +1902,11 @@ h5._i2LHD {
1825
1902
  border-left: 2px solid var(--color-outline);
1826
1903
  }
1827
1904
  ._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);
1905
+ font-family: var(--font-family-primary);
1906
+ font-size: var(--font-body-ui-size);
1907
+ line-height: var(--font-body-ui-height);
1908
+ font-weight: var(--font-body-ui-weight);
1909
+ font-weight: var(--font-body-ui-weight-bold);
1833
1910
  background: var(--color-surface-container-high);
1834
1911
  color: var(--color-surface-on-color-bold);
1835
1912
  border-left: 2px solid var(--color-outline);
@@ -1843,10 +1920,10 @@ h5._i2LHD {
1843
1920
  right: 12px;
1844
1921
  }
1845
1922
  ._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);
1923
+ font-family: var(--font-family-primary);
1924
+ font-size: var(--font-caption-size);
1925
+ line-height: var(--font-caption-height);
1926
+ font-weight: var(--font-caption-weight);
1850
1927
  display: inline-flex;
1851
1928
  background-color: var(--color-secondary-color);
1852
1929
  height: 20px;
@@ -1941,10 +2018,10 @@ h5._i2LHD {
1941
2018
  opacity: 0;
1942
2019
  }
1943
2020
  ._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);
2021
+ font-family: var(--font-family-primary);
2022
+ font-size: var(--font-section-title-size);
2023
+ line-height: var(--font-section-title-height);
2024
+ font-weight: var(--font-section-title-weight);
1948
2025
  color: var(--color-surface-on-color-bold);
1949
2026
  padding: 0;
1950
2027
  }
@@ -1957,10 +2034,10 @@ h5._i2LHD {
1957
2034
  }
1958
2035
 
1959
2036
  ._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);
2037
+ font-family: var(--font-family-primary);
2038
+ font-size: var(--font-sub-title-size);
2039
+ line-height: var(--font-sub-title-height);
2040
+ font-weight: var(--font-sub-title-weight);
1964
2041
  color: var(--color-surface-on-color);
1965
2042
  }
1966
2043
  /**
@@ -1969,10 +2046,10 @@ h5._i2LHD {
1969
2046
  * 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
2047
  */
1971
2048
  ._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);
2049
+ font-family: var(--font-family-primary);
2050
+ font-size: var(--font-body-ui-size);
2051
+ line-height: var(--font-body-ui-height);
2052
+ font-weight: var(--font-body-ui-weight);
1976
2053
  overflow: auto;
1977
2054
  position: relative;
1978
2055
  padding: 0 8px 0 8px;
@@ -2045,10 +2122,10 @@ h5._i2LHD {
2045
2122
  }
2046
2123
 
2047
2124
  ._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);
2125
+ font-family: var(--font-family-primary);
2126
+ font-size: var(--font-body-ui-size);
2127
+ line-height: var(--font-body-ui-height);
2128
+ font-weight: var(--font-body-ui-weight);
2052
2129
  vertical-align: middle;
2053
2130
  text-align: center;
2054
2131
  height: 100%;
@@ -2129,10 +2206,10 @@ h5._i2LHD {
2129
2206
  }
2130
2207
 
2131
2208
  ._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);
2209
+ font-family: var(--font-family-primary);
2210
+ font-size: var(--font-body-ui-size);
2211
+ line-height: var(--font-body-ui-height);
2212
+ font-weight: var(--font-body-ui-weight);
2136
2213
  vertical-align: middle;
2137
2214
  text-align: center;
2138
2215
  height: 100%;
@@ -2531,10 +2608,10 @@ input:disabled[data-indeterminate=true] ~ ._kmvBP::after {
2531
2608
  right: 10px;
2532
2609
  }
2533
2610
  ._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);
2611
+ font-family: var(--font-family-primary);
2612
+ font-size: var(--font-body-ui-size);
2613
+ line-height: var(--font-body-ui-height);
2614
+ font-weight: var(--font-body-ui-weight);
2538
2615
  background: var(--color-surface-inverse);
2539
2616
  color: var(--color-surface-on-inverse);
2540
2617
  border-radius: var(--border-radius-400);
@@ -2557,11 +2634,11 @@ input:disabled[data-indeterminate=true] ~ ._kmvBP::after {
2557
2634
  text-align: left;
2558
2635
  }
2559
2636
  ._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);
2637
+ font-family: var(--font-family-primary);
2638
+ font-size: var(--font-caption-size);
2639
+ line-height: var(--font-caption-height);
2640
+ font-weight: var(--font-caption-weight);
2641
+ font-weight: var(--font-caption-weight-bold);
2565
2642
  padding: 0 16px 8px 16px;
2566
2643
  background-color: unset;
2567
2644
  color: var(--color-surface-on-color-bold);
@@ -2635,10 +2712,10 @@ input:disabled[data-indeterminate=true] ~ ._kmvBP::after {
2635
2712
  table-layout: fixed;
2636
2713
  }
2637
2714
  ._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);
2715
+ font-family: var(--font-family-primary);
2716
+ font-size: var(--font-body-ui-size);
2717
+ line-height: var(--font-body-ui-height);
2718
+ font-weight: var(--font-body-ui-weight);
2642
2719
  border: 1px solid var(--color-outline-variant);
2643
2720
  border-radius: var(--border-radius-600);
2644
2721
  }
@@ -2661,11 +2738,11 @@ input:disabled[data-indeterminate=true] ~ ._kmvBP::after {
2661
2738
  border-bottom-right-radius: 0;
2662
2739
  }
2663
2740
  ._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);
2741
+ font-family: var(--font-family-primary);
2742
+ font-size: var(--font-body-ui-size);
2743
+ line-height: var(--font-body-ui-height);
2744
+ font-weight: var(--font-body-ui-weight);
2745
+ font-weight: var(--font-body-ui-weight-bold);
2669
2746
  }
2670
2747
  ._mp1Ok tr td {
2671
2748
  background: var(--color-surface-container-high);
@@ -2781,19 +2858,19 @@ input:disabled[data-indeterminate=true] ~ ._kmvBP::after {
2781
2858
  }
2782
2859
 
2783
2860
  ._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);
2861
+ font-family: var(--font-family-primary);
2862
+ font-size: var(--font-body-ui-size);
2863
+ line-height: var(--font-body-ui-height);
2864
+ font-weight: var(--font-body-ui-weight);
2865
+ font-weight: var(--font-body-ui-weight-bold);
2789
2866
  color: var(--color-surface-on-color-bold);
2790
2867
  }
2791
2868
 
2792
2869
  ._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);
2870
+ font-family: var(--font-family-primary);
2871
+ font-size: var(--font-body-ui-size);
2872
+ line-height: var(--font-body-ui-height);
2873
+ font-weight: var(--font-body-ui-weight);
2797
2874
  flex-grow: 1;
2798
2875
  color: var(--color-surface-on-color);
2799
2876
  }
@@ -2886,10 +2963,10 @@ input:disabled[data-indeterminate=true] ~ ._kmvBP::after {
2886
2963
  min-height: 38px;
2887
2964
  }
2888
2965
  ._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);
2966
+ font-family: var(--font-family-primary);
2967
+ font-size: var(--font-caption-size);
2968
+ line-height: var(--font-caption-height);
2969
+ font-weight: var(--font-caption-weight);
2893
2970
  color: var(--color-surface-on-color);
2894
2971
  }
2895
2972
  ._fRjhT {
@@ -2971,10 +3048,10 @@ input:disabled[data-indeterminate=true] ~ ._kmvBP::after {
2971
3048
  color: var(--color-upsell-color);
2972
3049
  }
2973
3050
  ._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);
3051
+ font-family: var(--font-family-primary);
3052
+ font-size: var(--font-body-ui-size);
3053
+ line-height: var(--font-body-ui-height);
3054
+ font-weight: var(--font-body-ui-weight);
2978
3055
  color: var(--color-surface-on-inverse);
2979
3056
  padding: 16px;
2980
3057
  text-align: center;
@@ -3000,10 +3077,10 @@ input:disabled[data-indeterminate=true] ~ ._kmvBP::after {
3000
3077
  height: 48px;
3001
3078
  }
3002
3079
  ._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);
3080
+ font-family: var(--font-family-primary);
3081
+ font-size: var(--font-caption-size);
3082
+ line-height: var(--font-caption-height);
3083
+ font-weight: var(--font-caption-weight);
3007
3084
  top: 50%;
3008
3085
  left: 50%;
3009
3086
  width: 100%;
@@ -3183,10 +3260,10 @@ input:disabled[data-indeterminate=true] ~ ._kmvBP::after {
3183
3260
  height: 100%;
3184
3261
  }
3185
3262
  ._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);
3263
+ font-family: var(--font-family-primary);
3264
+ font-size: var(--font-body-ui-size);
3265
+ line-height: var(--font-body-ui-height);
3266
+ font-weight: var(--font-body-ui-weight);
3190
3267
  border: 1px solid transparent;
3191
3268
  display: flex;
3192
3269
  justify-content: flex-end;
@@ -3508,10 +3585,10 @@ input:disabled[data-indeterminate=true] ~ ._kmvBP::after {
3508
3585
  max-width: 667px;
3509
3586
  }
3510
3587
  ._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);
3588
+ font-family: var(--font-family-primary);
3589
+ font-size: var(--font-paragraph-size);
3590
+ line-height: var(--font-paragraph-height);
3591
+ font-weight: var(--font-paragraph-weight);
3515
3592
  color: var(--color-surface-on-color);
3516
3593
  text-align: center;
3517
3594
  white-space: pre-line;
@@ -3694,10 +3771,10 @@ input:disabled[data-indeterminate=true] ~ ._kmvBP::after {
3694
3771
  width: 336px;
3695
3772
  }
3696
3773
  ._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);
3774
+ font-family: var(--font-family-primary);
3775
+ font-size: var(--font-body-ui-size);
3776
+ line-height: var(--font-body-ui-height);
3777
+ font-weight: var(--font-body-ui-weight);
3701
3778
  width: 200px;
3702
3779
  border-radius: 0px;
3703
3780
  color: var(--color-surface-on-color);
@@ -3792,11 +3869,11 @@ input:disabled[data-indeterminate=true] ~ ._kmvBP::after {
3792
3869
  padding: 2px;
3793
3870
  }
3794
3871
  ._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);
3872
+ font-family: var(--font-family-primary);
3873
+ font-size: var(--font-body-ui-size);
3874
+ line-height: var(--font-body-ui-height);
3875
+ font-weight: var(--font-body-ui-weight);
3876
+ font-weight: var(--font-body-ui-weight-bold);
3800
3877
  position: relative;
3801
3878
  background-color: transparent;
3802
3879
  color: var(--color-surface-on-color-bold);
@@ -3827,17 +3904,17 @@ input:disabled[data-indeterminate=true] ~ ._kmvBP::after {
3827
3904
  color: var(--color-surface-on-color);
3828
3905
  }
3829
3906
  ._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);
3907
+ font-family: var(--font-family-primary);
3908
+ font-size: var(--font-content-title-size);
3909
+ line-height: var(--font-content-title-height);
3910
+ font-weight: var(--font-content-title-weight);
3834
3911
  margin: 0;
3835
3912
  }
3836
3913
  ._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);
3914
+ font-family: var(--font-family-primary);
3915
+ font-size: var(--font-body-ui-size);
3916
+ line-height: var(--font-body-ui-height);
3917
+ font-weight: var(--font-body-ui-weight);
3841
3918
  margin: 0;
3842
3919
  }
3843
3920
  ._xT-U1 {
@@ -3861,10 +3938,10 @@ input:disabled[data-indeterminate=true] ~ ._kmvBP::after {
3861
3938
  background-color: var(--color-surface-container);
3862
3939
  }
3863
3940
  ._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);
3941
+ font-family: var(--font-family-primary);
3942
+ font-size: var(--font-body-ui-size);
3943
+ line-height: var(--font-body-ui-height);
3944
+ font-weight: var(--font-body-ui-weight);
3868
3945
  color: var(--color-surface-on-color);
3869
3946
  margin: 0;
3870
3947
  border: none;
@@ -3933,11 +4010,11 @@ input:disabled[data-indeterminate=true] ~ ._kmvBP::after {
3933
4010
  outline: none;
3934
4011
  }
3935
4012
  ._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);
4013
+ font-family: var(--font-family-primary);
4014
+ font-size: var(--font-body-ui-size);
4015
+ line-height: var(--font-body-ui-height);
4016
+ font-weight: var(--font-body-ui-weight);
4017
+ font-weight: var(--font-body-ui-weight-bold);
3941
4018
  color: var(--color-surface-on-color-bold);
3942
4019
  display: flex;
3943
4020
  align-items: center;
@@ -4083,11 +4160,11 @@ input:focus-visible + ._JXakU, input:focus-visible + ._ZxEwG {
4083
4160
  outline: none;
4084
4161
  }
4085
4162
  ._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);
4163
+ font-family: var(--font-family-primary);
4164
+ font-size: var(--font-body-ui-size);
4165
+ line-height: var(--font-body-ui-height);
4166
+ font-weight: var(--font-body-ui-weight);
4167
+ font-weight: var(--font-body-ui-weight-bold);
4091
4168
  padding: 0;
4092
4169
  width: auto;
4093
4170
  float: none;
@@ -4102,19 +4179,19 @@ input:focus-visible + ._JXakU, input:focus-visible + ._ZxEwG {
4102
4179
  }
4103
4180
 
4104
4181
  ._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);
4182
+ font-family: var(--font-family-primary);
4183
+ font-size: var(--font-caption-size);
4184
+ line-height: var(--font-caption-height);
4185
+ font-weight: var(--font-caption-weight);
4109
4186
  color: var(--color-surface-on-color);
4110
4187
  }
4111
4188
 
4112
4189
  ._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);
4190
+ font-family: var(--font-family-primary);
4191
+ font-size: var(--font-body-ui-size);
4192
+ line-height: var(--font-body-ui-height);
4193
+ font-weight: var(--font-body-ui-weight);
4194
+ font-weight: var(--font-body-ui-weight-bold);
4118
4195
  padding: 0;
4119
4196
  width: auto;
4120
4197
  float: none;
@@ -4122,18 +4199,18 @@ input:focus-visible + ._JXakU, input:focus-visible + ._ZxEwG {
4122
4199
  min-height: 16px;
4123
4200
  }
4124
4201
  ._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);
4202
+ font-family: var(--font-family-primary);
4203
+ font-size: var(--font-caption-size);
4204
+ line-height: var(--font-caption-height);
4205
+ font-weight: var(--font-caption-weight);
4129
4206
  color: var(--color-surface-on-color);
4130
4207
  }
4131
4208
  ._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);
4209
+ font-family: var(--font-family-primary);
4210
+ font-size: var(--font-body-ui-size);
4211
+ line-height: var(--font-body-ui-height);
4212
+ font-weight: var(--font-body-ui-weight);
4213
+ font-weight: var(--font-body-ui-weight-bold);
4137
4214
  padding: 0;
4138
4215
  width: auto;
4139
4216
  float: none;
@@ -4148,10 +4225,10 @@ input:focus-visible + ._JXakU, input:focus-visible + ._ZxEwG {
4148
4225
  }
4149
4226
 
4150
4227
  ._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);
4228
+ font-family: var(--font-family-primary);
4229
+ font-size: var(--font-caption-size);
4230
+ line-height: var(--font-caption-height);
4231
+ font-weight: var(--font-caption-weight);
4155
4232
  color: var(--color-surface-on-color);
4156
4233
  }
4157
4234
 
@@ -4203,11 +4280,11 @@ input:checked ~ ._P588B {
4203
4280
  pointer-events: none;
4204
4281
  }
4205
4282
  ._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);
4283
+ font-family: var(--font-family-primary);
4284
+ font-size: var(--font-body-ui-size);
4285
+ line-height: var(--font-body-ui-height);
4286
+ font-weight: var(--font-body-ui-weight);
4287
+ font-weight: var(--font-body-ui-weight-bold);
4211
4288
  padding: 0;
4212
4289
  width: auto;
4213
4290
  float: none;
@@ -4218,10 +4295,10 @@ input:checked ~ ._P588B {
4218
4295
  color: var(--color-surface-on-container-disabled);
4219
4296
  }
4220
4297
  ._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);
4298
+ font-family: var(--font-family-primary);
4299
+ font-size: var(--font-caption-size);
4300
+ line-height: var(--font-caption-height);
4301
+ font-weight: var(--font-caption-weight);
4225
4302
  color: var(--color-surface-on-color);
4226
4303
  }
4227
4304
  ._04Cjp {
@@ -4294,10 +4371,10 @@ input:disabled + ._Yfxkl::after {
4294
4371
  top: 4px;
4295
4372
  }
4296
4373
  ._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);
4374
+ font-family: var(--font-family-primary);
4375
+ font-size: var(--font-body-ui-size);
4376
+ line-height: var(--font-body-ui-height);
4377
+ font-weight: var(--font-body-ui-weight);
4301
4378
  line-height: 22px;
4302
4379
  padding: 7px;
4303
4380
  border-radius: var(--border-radius-400);
@@ -4362,10 +4439,10 @@ input:disabled + ._Yfxkl::after {
4362
4439
  color: var(--color-surface-on-container-disabled);
4363
4440
  }
4364
4441
  ._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);
4442
+ font-family: var(--font-family-primary);
4443
+ font-size: var(--font-caption-size);
4444
+ line-height: var(--font-caption-height);
4445
+ font-weight: var(--font-caption-weight);
4369
4446
  color: var(--color-surface-on-color-disabled);
4370
4447
  }
4371
4448
 
@@ -4373,10 +4450,10 @@ input:disabled + ._Yfxkl::after {
4373
4450
  color: var(--color-surface-on-color);
4374
4451
  }
4375
4452
  ._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);
4453
+ font-family: var(--font-family-primary);
4454
+ font-size: var(--font-body-ui-size);
4455
+ line-height: var(--font-body-ui-height);
4456
+ font-weight: var(--font-body-ui-weight);
4380
4457
  color: var(--color-surface-on-color);
4381
4458
  display: flex;
4382
4459
  flex-direction: column;
@@ -4384,10 +4461,10 @@ input:disabled + ._Yfxkl::after {
4384
4461
  padding: 8px 12px;
4385
4462
  }
4386
4463
  ._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);
4464
+ font-family: var(--font-family-primary);
4465
+ font-size: var(--font-body-ui-size);
4466
+ line-height: var(--font-body-ui-height);
4467
+ font-weight: var(--font-body-ui-weight);
4391
4468
  line-height: 22px;
4392
4469
  padding: 7px;
4393
4470
  border-radius: var(--border-radius-400);
@@ -4440,10 +4517,10 @@ input:disabled + ._Yfxkl::after {
4440
4517
  width: 100%;
4441
4518
  }
4442
4519
  ._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);
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);
4447
4524
  line-height: 22px;
4448
4525
  padding: 7px;
4449
4526
  border-radius: var(--border-radius-400);
@@ -4558,10 +4635,10 @@ input:disabled + ._Yfxkl::after {
4558
4635
  }
4559
4636
 
4560
4637
  ._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);
4638
+ font-family: var(--font-family-primary);
4639
+ font-size: var(--font-body-ui-size);
4640
+ line-height: var(--font-body-ui-height);
4641
+ font-weight: var(--font-body-ui-weight);
4565
4642
  vertical-align: middle;
4566
4643
  text-align: center;
4567
4644
  height: 100%;
@@ -4627,10 +4704,10 @@ input:disabled + ._Yfxkl::after {
4627
4704
  color: var(--color-surface-on-color-disabled);
4628
4705
  }
4629
4706
  ._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);
4707
+ font-family: var(--font-family-primary);
4708
+ font-size: var(--font-body-ui-size);
4709
+ line-height: var(--font-body-ui-height);
4710
+ font-weight: var(--font-body-ui-weight);
4634
4711
  line-height: 22px;
4635
4712
  padding: 7px;
4636
4713
  border-radius: var(--border-radius-400);
@@ -4722,10 +4799,10 @@ input:disabled + ._Yfxkl::after {
4722
4799
  color: transparent;
4723
4800
  }
4724
4801
  ._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);
4802
+ font-family: var(--font-family-primary);
4803
+ font-size: var(--font-body-ui-size);
4804
+ line-height: var(--font-body-ui-height);
4805
+ font-weight: var(--font-body-ui-weight);
4729
4806
  position: absolute;
4730
4807
  height: 36px;
4731
4808
  margin-top: 1px;
@@ -5884,10 +5961,10 @@ input._TEU6N {
5884
5961
  object-fit: cover;
5885
5962
  }
5886
5963
  ._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);
5964
+ font-family: var(--font-family-primary);
5965
+ font-size: var(--font-body-ui-size);
5966
+ line-height: var(--font-body-ui-height);
5967
+ font-weight: var(--font-body-ui-weight);
5891
5968
  width: 20px;
5892
5969
  height: 20px;
5893
5970
  }
@@ -5896,10 +5973,10 @@ input._TEU6N {
5896
5973
  margin-top: 10px;
5897
5974
  }
5898
5975
  ._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);
5976
+ font-family: var(--font-family-primary);
5977
+ font-size: var(--font-sub-title-size);
5978
+ line-height: var(--font-sub-title-height);
5979
+ font-weight: var(--font-sub-title-weight);
5903
5980
  width: 30px;
5904
5981
  height: 30px;
5905
5982
  }
@@ -5908,10 +5985,10 @@ input._TEU6N {
5908
5985
  margin-top: 15px;
5909
5986
  }
5910
5987
  ._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);
5988
+ font-family: var(--font-family-primary);
5989
+ font-size: var(--font-section-title-size);
5990
+ line-height: var(--font-section-title-height);
5991
+ font-weight: var(--font-section-title-weight);
5915
5992
  width: 40px;
5916
5993
  height: 40px;
5917
5994
  }
@@ -5920,10 +5997,10 @@ input._TEU6N {
5920
5997
  margin-top: 18px;
5921
5998
  }
5922
5999
  ._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);
6000
+ font-family: var(--font-family-primary);
6001
+ font-size: var(--font-page-title-size);
6002
+ line-height: var(--font-page-title-height);
6003
+ font-weight: var(--font-page-title-weight);
5927
6004
  width: 80px;
5928
6005
  height: 80px;
5929
6006
  }
@@ -5941,11 +6018,11 @@ input._TEU6N {
5941
6018
  padding-top: 25%;
5942
6019
  }
5943
6020
  ._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);
6021
+ font-family: var(--font-family-primary);
6022
+ font-size: var(--font-caption-size);
6023
+ line-height: var(--font-caption-height);
6024
+ font-weight: var(--font-caption-weight);
6025
+ font-weight: var(--font-caption-weight-bold);
5949
6026
  border-radius: var(--border-radius-300);
5950
6027
  padding: 2px 8px;
5951
6028
  display: inline-block;
@@ -5992,11 +6069,11 @@ input._TEU6N {
5992
6069
  text-transform: none;
5993
6070
  }
5994
6071
  ._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);
6072
+ font-family: var(--font-family-primary);
6073
+ font-size: var(--font-body-ui-size);
6074
+ line-height: var(--font-body-ui-height);
6075
+ font-weight: var(--font-body-ui-weight);
6076
+ font-weight: var(--font-body-ui-weight-bold);
6000
6077
  border-radius: 25px;
6001
6078
  padding: 5px 12px;
6002
6079
  max-width: -moz-fit-content;
@@ -6043,6 +6120,39 @@ input._TEU6N {
6043
6120
  ._4M-yZ {
6044
6121
  /* min-width: 40px; */
6045
6122
  }
6123
+ ._izwx7 {
6124
+ display: inline-flex;
6125
+ align-items: center;
6126
+ gap: 2px;
6127
+ flex-shrink: 0;
6128
+ }
6129
+
6130
+ ._6Egix {
6131
+ display: inline-flex;
6132
+ align-items: center;
6133
+ justify-content: center;
6134
+ width: 20px;
6135
+ height: 20px;
6136
+ box-sizing: border-box;
6137
+ overflow: hidden;
6138
+ background-color: var(--color-surface-color);
6139
+ border: 1px solid var(--color-outline);
6140
+ border-radius: var(--border-radius-300);
6141
+ color: var(--color-surface-on-color-subtle);
6142
+ font-family: var(--font-family-body);
6143
+ font-size: var(--font-size-200);
6144
+ font-weight: var(--p-font-weight-normal);
6145
+ line-height: var(--font-line-height-200);
6146
+ text-align: center;
6147
+ -webkit-user-select: none;
6148
+ -moz-user-select: none;
6149
+ user-select: none;
6150
+ }
6151
+ ._MlLBj {
6152
+ font-size: 0.5625rem;
6153
+ font-weight: var(--p-font-weight-semibold);
6154
+ line-height: 1rem;
6155
+ }
6046
6156
  ._6bVLs {
6047
6157
  display: flex;
6048
6158
  flex-direction: column;
@@ -6192,7 +6302,10 @@ input._TEU6N {
6192
6302
  overflow: hidden;
6193
6303
  text-overflow: ellipsis;
6194
6304
  color: var(--nav-object-normal-color);
6195
- font-family: var(--font-family-body);
6305
+ font-family: var(--font-family-primary);
6306
+ font-size: var(--font-primary-nav-item-size);
6307
+ font-weight: var(--font-primary-nav-item-weight-bold);
6308
+ letter-spacing: var(--font-primary-nav-item-letterspacing);
6196
6309
  }
6197
6310
  ._MFqwx {
6198
6311
  position: absolute;
@@ -6327,7 +6440,10 @@ input._TEU6N {
6327
6440
  overflow: hidden;
6328
6441
  text-overflow: ellipsis;
6329
6442
  color: var(--nav-object-normal-color);
6330
- font-family: var(--font-family-body);
6443
+ font-family: var(--font-family-primary);
6444
+ font-size: var(--font-primary-nav-item-size);
6445
+ font-weight: var(--font-primary-nav-item-weight);
6446
+ letter-spacing: var(--font-primary-nav-item-letterspacing);
6331
6447
  }
6332
6448
  ._uMbkq {
6333
6449
  width: 6px;
@@ -6388,10 +6504,10 @@ input._TEU6N {
6388
6504
  padding: 0;
6389
6505
  }
6390
6506
  ._-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);
6507
+ font-family: var(--font-family-primary);
6508
+ font-size: var(--font-body-ui-size);
6509
+ line-height: var(--font-body-ui-height);
6510
+ font-weight: var(--font-body-ui-weight);
6395
6511
  display: inline-flex;
6396
6512
  align-items: center;
6397
6513
  gap: 8px;
@@ -6420,11 +6536,11 @@ input._TEU6N {
6420
6536
  background: var(--color-neutral-container-variant);
6421
6537
  border-bottom-color: var(--color-surface-on-color-bold);
6422
6538
  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);
6539
+ font-family: var(--font-family-primary);
6540
+ font-size: var(--font-body-ui-size);
6541
+ line-height: var(--font-body-ui-height);
6542
+ font-weight: var(--font-body-ui-weight);
6543
+ font-weight: var(--font-body-ui-weight-bold);
6428
6544
  }
6429
6545
  ._AyUHY {
6430
6546
  color: var(--color-surface-on-container-disabled);
@@ -6485,10 +6601,10 @@ input._TEU6N {
6485
6601
  flex: 65;
6486
6602
  }
6487
6603
  ._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);
6604
+ font-family: var(--font-family-primary);
6605
+ font-size: var(--font-paragraph-size);
6606
+ line-height: var(--font-paragraph-height);
6607
+ font-weight: var(--font-paragraph-weight);
6492
6608
  color: var(--color-surface-on-color);
6493
6609
  }
6494
6610
  ._79QnQ {