@7shifts/sous-chef 3.48.1 → 3.50.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 (7) hide show
  1. package/dist/foundation/constants.d.ts +1 -1
  2. package/dist/index.css +104 -92
  3. package/dist/index.js +77 -45
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.modern.js +77 -45
  6. package/dist/index.modern.js.map +1 -1
  7. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -1,24 +1,30 @@
1
1
  @font-face {
2
- font-family: "Proxima Nova";
3
- src: url("https://cdn.7shifts.com/fonts/proximaNova-semibold.eot");
4
- src: url("https://cdn.7shifts.com/fonts/proximaNova-semibold.eot?#iefix") format("embedded-opentype"), url("https://cdn.7shifts.com/fonts/proximaNova-semibold.woff") format("woff"), url("https://cdn.7shifts.com/fonts/proximaNova-semibold.ttf") format("truetype"), url("https://cdn.7shifts.com/fonts/proximaNova-semibold.svg#ProximaNova-Semibold") format("svg");
2
+ font-family: "SF Pro";
3
+ src: url("https://cdn.7shifts.com/fonts/SFPro/SFPRODISPLAYREGULAR.OTF") format("opentype");
4
+ font-weight: normal;
5
+ font-style: normal;
6
+ /* Preload the font */
7
+ unicode-range: U+0000-00FF; /* Basic Latin */
8
+ }
9
+ @font-face {
10
+ font-family: "SF Pro";
11
+ src: url("https://cdn.7shifts.com/fonts/SFPro/SFPRODISPLAYMEDIUM.OTF") format("opentype");
5
12
  font-weight: 600;
6
13
  font-style: normal;
7
14
  /* Preload the font */
8
15
  unicode-range: U+0000-00FF; /* Basic Latin */
9
16
  }
10
17
  @font-face {
11
- font-family: "Proxima Nova";
12
- src: url("https://cdn.7shifts.com/fonts/ProximaNova-Regular.eot");
13
- src: url("https://cdn.7shifts.com/fonts/ProximaNova-Regular.eot?#iefix") format("embedded-opentype"), url("https://cdn.7shifts.com/fonts/ProximaNova-Regular.woff") format("woff"), url("https://cdn.7shifts.com/fonts/ProximaNova-Regular.ttf") format("truetype"), url("https://cdn.7shifts.com/fonts/ProximaNova-Regular.svg#proxima_nova_rgregular") format("svg");
14
- font-weight: normal;
18
+ font-family: "Universal Sans Display";
19
+ src: url("https://cdn.7shifts.com/fonts/UniversalSans/Universal-Sans-Display-500.ttf");
20
+ font-weight: 500;
15
21
  font-style: normal;
16
22
  /* Preload the font */
17
23
  unicode-range: U+0000-00FF; /* Basic Latin */
18
24
  }
19
25
  :root {
20
- --font-family-brand: "Proxima Nova", sans-serif;
21
- --font-family-body: "Proxima Nova", sans-serif;
26
+ --font-family-heading: "Universal Sans Display", sans-serif;
27
+ --font-family-body: "SF Pro", sans-serif;
22
28
  --font-size-100: 0.75rem;
23
29
  --font-size-200: 0.875rem;
24
30
  --font-size-300: 1rem;
@@ -35,6 +41,7 @@
35
41
  --font-line-height-700: 2.75rem;
36
42
  --p-font-weight-light: 300;
37
43
  --p-font-weight-normal: 400;
44
+ --p-font-weight-semibold: 500;
38
45
  --p-font-weight-bold: 600;
39
46
  }
40
47
  :root {
@@ -178,10 +185,11 @@
178
185
  --z-index-portal: 9999;
179
186
  }
180
187
  body {
181
- font-family: var(--font-family-brand);
188
+ font-family: var(--font-family-body);
182
189
  font-size: var(--font-size-200);
183
190
  line-height: var(--font-line-height-200);
184
191
  font-weight: var(--p-font-weight-normal);
192
+ color: var(--color-grey-500);
185
193
  }
186
194
  ._OINV1 {
187
195
  display: flex;
@@ -231,7 +239,7 @@ body {
231
239
  display: inline-flex;
232
240
  }
233
241
  ._3s_-x {
234
- font-family: var(--font-family-brand);
242
+ font-family: var(--font-family-body);
235
243
  font-size: var(--font-size-100);
236
244
  line-height: var(--font-line-height-100);
237
245
  font-weight: var(--p-font-weight-normal);
@@ -239,7 +247,7 @@ body {
239
247
  }
240
248
 
241
249
  ._29W-o {
242
- font-family: var(--font-family-brand);
250
+ font-family: var(--font-family-body);
243
251
  font-size: var(--font-size-200);
244
252
  line-height: var(--font-line-height-200);
245
253
  font-weight: var(--p-font-weight-normal);
@@ -276,7 +284,7 @@ Just for future references:
276
284
  }
277
285
 
278
286
  ._LbMlH {
279
- font-family: var(--font-family-brand);
287
+ font-family: var(--font-family-body);
280
288
  font-size: var(--font-size-200);
281
289
  line-height: var(--font-line-height-200);
282
290
  font-weight: var(--p-font-weight-normal);
@@ -290,7 +298,7 @@ Just for future references:
290
298
  }
291
299
 
292
300
  ._15FwS {
293
- font-family: var(--font-family-brand);
301
+ font-family: var(--font-family-body);
294
302
  font-size: var(--font-size-100);
295
303
  line-height: var(--font-line-height-100);
296
304
  font-weight: var(--p-font-weight-normal);
@@ -423,7 +431,7 @@ Just for future references:
423
431
  text-align: left;
424
432
  }
425
433
  ._1lo14 {
426
- font-family: var(--font-family-brand);
434
+ font-family: var(--font-family-body);
427
435
  font-size: var(--font-size-200);
428
436
  line-height: var(--font-line-height-200);
429
437
  font-weight: var(--p-font-weight-normal);
@@ -450,7 +458,7 @@ Just for future references:
450
458
  color: var(--color-grey-500);
451
459
  }
452
460
  ._2rZ80 {
453
- font-family: var(--font-family-brand);
461
+ font-family: var(--font-family-body);
454
462
  font-size: var(--font-size-200);
455
463
  line-height: var(--font-line-height-200);
456
464
  font-weight: var(--p-font-weight-normal);
@@ -486,7 +494,7 @@ Just for future references:
486
494
  color: var(--color-grey-500);
487
495
  }
488
496
  ._YjZTi {
489
- font-family: var(--font-family-brand);
497
+ font-family: var(--font-family-body);
490
498
  font-size: var(--font-size-200);
491
499
  line-height: var(--font-line-height-200);
492
500
  font-weight: var(--p-font-weight-normal);
@@ -899,7 +907,7 @@ Just for future references:
899
907
  border: 1px solid var(--color-grey-200);
900
908
  }
901
909
  ._31UYJ {
902
- font-family: var(--font-family-brand);
910
+ font-family: var(--font-family-body);
903
911
  font-size: var(--font-size-100);
904
912
  line-height: var(--font-line-height-100);
905
913
  font-weight: var(--p-font-weight-normal);
@@ -917,7 +925,7 @@ Just for future references:
917
925
  text-decoration: underline;
918
926
  }
919
927
  ._38KEH._38KEH {
920
- font-family: var(--font-family-brand);
928
+ font-family: var(--font-family-body);
921
929
  font-size: var(--font-size-200);
922
930
  line-height: var(--font-line-height-200);
923
931
  font-weight: var(--p-font-weight-normal);
@@ -943,7 +951,7 @@ Just for future references:
943
951
  text-align: left;
944
952
  }
945
953
  ._dJWps {
946
- font-family: var(--font-family-brand);
954
+ font-family: var(--font-family-body);
947
955
  font-size: var(--font-size-100);
948
956
  line-height: var(--font-line-height-100);
949
957
  font-weight: var(--p-font-weight-normal);
@@ -1015,7 +1023,7 @@ Just for future references:
1015
1023
  table-layout: fixed;
1016
1024
  }
1017
1025
  ._1YYyL {
1018
- font-family: var(--font-family-brand);
1026
+ font-family: var(--font-family-body);
1019
1027
  font-size: var(--font-size-200);
1020
1028
  line-height: var(--font-line-height-200);
1021
1029
  font-weight: var(--p-font-weight-normal);
@@ -1041,7 +1049,7 @@ Just for future references:
1041
1049
  border-bottom-right-radius: 0;
1042
1050
  }
1043
1051
  ._ASPHe {
1044
- font-family: var(--font-family-brand);
1052
+ font-family: var(--font-family-body);
1045
1053
  font-size: var(--font-size-200);
1046
1054
  line-height: var(--font-line-height-200);
1047
1055
  font-weight: var(--p-font-weight-normal);
@@ -1159,7 +1167,7 @@ Just for future references:
1159
1167
  }
1160
1168
 
1161
1169
  ._iZe2g {
1162
- font-family: var(--font-family-brand);
1170
+ font-family: var(--font-family-body);
1163
1171
  font-size: var(--font-size-200);
1164
1172
  line-height: var(--font-line-height-200);
1165
1173
  font-weight: var(--p-font-weight-normal);
@@ -1168,7 +1176,7 @@ Just for future references:
1168
1176
  }
1169
1177
 
1170
1178
  ._2KsRB {
1171
- font-family: var(--font-family-brand);
1179
+ font-family: var(--font-family-body);
1172
1180
  font-size: var(--font-size-200);
1173
1181
  line-height: var(--font-line-height-200);
1174
1182
  font-weight: var(--p-font-weight-normal);
@@ -1249,7 +1257,7 @@ Just for future references:
1249
1257
  min-height: 38px;
1250
1258
  }
1251
1259
  ._1eCfd {
1252
- font-family: var(--font-family-brand);
1260
+ font-family: var(--font-family-body);
1253
1261
  font-size: var(--font-size-100);
1254
1262
  line-height: var(--font-line-height-100);
1255
1263
  font-weight: var(--p-font-weight-normal);
@@ -1280,7 +1288,7 @@ Just for future references:
1280
1288
  box-shadow: 0 0 8px var(--color-blackberry-300);
1281
1289
  }
1282
1290
  ._3gsXT {
1283
- font-family: var(--font-family-brand);
1291
+ font-family: var(--font-family-body);
1284
1292
  font-size: var(--font-size-200);
1285
1293
  line-height: var(--font-line-height-200);
1286
1294
  font-weight: var(--p-font-weight-normal);
@@ -1298,21 +1306,21 @@ Just for future references:
1298
1306
  text-overflow: ellipsis;
1299
1307
  }
1300
1308
  ._1sq2y {
1301
- font-family: var(--font-family-brand);
1309
+ font-family: var(--font-family-body);
1302
1310
  font-size: var(--font-size-100);
1303
1311
  line-height: var(--font-line-height-100);
1304
1312
  font-weight: var(--p-font-weight-normal);
1305
1313
  color: var(--color-grey-500);
1306
1314
  }
1307
1315
  ._2EaHy {
1308
- font-family: var(--font-family-brand);
1316
+ font-family: var(--font-family-body);
1309
1317
  font-size: var(--font-size-100);
1310
1318
  line-height: var(--font-line-height-100);
1311
1319
  font-weight: var(--p-font-weight-normal);
1312
1320
  color: var(--color-radish-400);
1313
1321
  }
1314
1322
  ._3BVGA {
1315
- font-family: var(--font-family-brand);
1323
+ font-family: var(--font-family-body);
1316
1324
  font-size: var(--font-size-200);
1317
1325
  line-height: var(--font-line-height-200);
1318
1326
  font-weight: var(--p-font-weight-normal);
@@ -1367,7 +1375,7 @@ Just for future references:
1367
1375
  }
1368
1376
 
1369
1377
  ._KE6FS {
1370
- font-family: var(--font-family-brand);
1378
+ font-family: var(--font-family-body);
1371
1379
  font-size: var(--font-size-200);
1372
1380
  line-height: var(--font-line-height-200);
1373
1381
  font-weight: var(--p-font-weight-normal);
@@ -1392,7 +1400,7 @@ Just for future references:
1392
1400
  }
1393
1401
 
1394
1402
  ._1Zl92 {
1395
- font-family: var(--font-family-brand);
1403
+ font-family: var(--font-family-body);
1396
1404
  font-size: var(--font-size-200);
1397
1405
  line-height: var(--font-line-height-200);
1398
1406
  font-weight: var(--p-font-weight-normal);
@@ -1446,7 +1454,7 @@ Just for future references:
1446
1454
  color: var(--color-grey-400);
1447
1455
  }
1448
1456
  ._3zhrP {
1449
- font-family: var(--font-family-brand);
1457
+ font-family: var(--font-family-body);
1450
1458
  font-size: var(--font-size-200);
1451
1459
  line-height: var(--font-line-height-200);
1452
1460
  font-weight: var(--p-font-weight-normal);
@@ -1475,40 +1483,41 @@ Just for future references:
1475
1483
  outline: none;
1476
1484
  }
1477
1485
  h1._32amZ {
1478
- font-family: var(--font-family-brand);
1486
+ font-family: var(--font-family-heading);
1479
1487
  font-size: var(--font-size-600);
1480
1488
  line-height: var(--font-line-height-600);
1481
- font-weight: var(--p-font-weight-bold);
1489
+ font-weight: var(--p-font-weight-semibold);
1490
+ color: var(--color-grey-600);
1482
1491
  }
1483
1492
 
1484
1493
  h2._32amZ {
1485
- font-family: var(--font-family-brand);
1494
+ font-family: var(--font-family-heading);
1486
1495
  font-size: var(--font-size-500);
1487
1496
  line-height: var(--font-line-height-500);
1488
- font-weight: var(--p-font-weight-bold);
1497
+ font-weight: var(--p-font-weight-semibold);
1498
+ color: var(--color-grey-600);
1489
1499
  }
1490
1500
 
1491
1501
  h3._32amZ {
1492
- font-family: var(--font-family-brand);
1502
+ font-family: var(--font-family-heading);
1493
1503
  font-size: var(--font-size-400);
1494
1504
  line-height: var(--font-line-height-400);
1495
- font-weight: var(--p-font-weight-bold);
1505
+ font-weight: var(--p-font-weight-semibold);
1506
+ color: var(--color-grey-600);
1496
1507
  }
1497
1508
 
1498
1509
  h4._32amZ {
1499
- font-family: var(--font-family-brand);
1510
+ font-family: var(--font-family-body);
1500
1511
  font-size: var(--font-size-400);
1501
1512
  line-height: var(--font-line-height-400);
1502
1513
  font-weight: var(--p-font-weight-normal);
1503
- color: var(--color-grey-400);
1504
1514
  }
1505
1515
 
1506
1516
  h5._32amZ {
1507
- font-family: var(--font-family-brand);
1517
+ font-family: var(--font-family-body);
1508
1518
  font-size: var(--font-size-300);
1509
1519
  line-height: var(--font-line-height-300);
1510
1520
  font-weight: var(--p-font-weight-normal);
1511
- color: var(--color-grey-400);
1512
1521
  }
1513
1522
 
1514
1523
  ._32amZ {
@@ -1516,25 +1525,26 @@ h5._32amZ {
1516
1525
  margin: 0;
1517
1526
  }
1518
1527
  ._ayJRy {
1519
- font-family: var(--font-family-brand);
1528
+ font-family: var(--font-family-body);
1520
1529
  font-size: var(--font-size-200);
1521
1530
  line-height: var(--font-line-height-200);
1522
1531
  font-weight: var(--p-font-weight-normal);
1523
1532
  }
1524
1533
  ._3g1gi {
1525
- font-family: var(--font-family-brand);
1534
+ font-family: var(--font-family-body);
1526
1535
  font-size: var(--font-size-100);
1527
1536
  line-height: var(--font-line-height-100);
1528
1537
  font-weight: var(--p-font-weight-normal);
1529
1538
  }
1530
1539
  ._20Phg {
1531
- font-family: var(--font-family-brand);
1540
+ font-family: var(--font-family-heading);
1532
1541
  font-size: var(--font-size-700);
1533
1542
  line-height: var(--font-line-height-700);
1534
- font-weight: var(--p-font-weight-bold);
1543
+ font-weight: var(--p-font-weight-semibold);
1535
1544
  }
1536
1545
  ._A0AyZ {
1537
1546
  font-weight: var(--p-font-weight-bold);
1547
+ color: var(--color-grey-600);
1538
1548
  }
1539
1549
  ._3jayQ {
1540
1550
  font-style: italic;
@@ -1630,7 +1640,7 @@ h5._32amZ {
1630
1640
  text-transform: uppercase;
1631
1641
  }
1632
1642
  ._12zfd {
1633
- font-family: var(--font-family-brand);
1643
+ font-family: var(--font-family-body);
1634
1644
  font-size: var(--font-size-200);
1635
1645
  line-height: var(--font-line-height-200);
1636
1646
  font-weight: var(--p-font-weight-normal);
@@ -1668,7 +1678,7 @@ h5._32amZ {
1668
1678
  max-width: 1000px;
1669
1679
  }
1670
1680
  ._EtQ8V {
1671
- font-family: var(--font-family-brand);
1681
+ font-family: var(--font-family-body);
1672
1682
  font-size: var(--font-size-200);
1673
1683
  line-height: var(--font-line-height-200);
1674
1684
  font-weight: var(--p-font-weight-normal);
@@ -1691,7 +1701,7 @@ h5._32amZ {
1691
1701
  height: 48px;
1692
1702
  }
1693
1703
  ._2u-Hw {
1694
- font-family: var(--font-family-brand);
1704
+ font-family: var(--font-family-body);
1695
1705
  font-size: var(--font-size-100);
1696
1706
  line-height: var(--font-line-height-100);
1697
1707
  font-weight: var(--p-font-weight-normal);
@@ -1725,8 +1735,6 @@ h5._32amZ {
1725
1735
  ._3cjo0 {
1726
1736
  display: flex;
1727
1737
  justify-content: space-around;
1728
- color: var(--color-grey-500);
1729
- font-family: var(--font-family-brand);
1730
1738
  }
1731
1739
  ._WwXRR {
1732
1740
  background: var(--color-grey-100);
@@ -1925,10 +1933,10 @@ h5._32amZ {
1925
1933
  opacity: 0;
1926
1934
  }
1927
1935
  ._2iRIU {
1928
- font-family: var(--font-family-brand);
1936
+ font-family: var(--font-family-heading);
1929
1937
  font-size: var(--font-size-500);
1930
1938
  line-height: var(--font-line-height-500);
1931
- font-weight: var(--p-font-weight-bold);
1939
+ font-weight: var(--p-font-weight-semibold);
1932
1940
  color: var(--color-grey-500);
1933
1941
  padding: 0;
1934
1942
  }
@@ -1941,7 +1949,7 @@ h5._32amZ {
1941
1949
  }
1942
1950
 
1943
1951
  ._3UWdF {
1944
- font-family: var(--font-family-brand);
1952
+ font-family: var(--font-family-body);
1945
1953
  font-size: var(--font-size-400);
1946
1954
  line-height: var(--font-line-height-400);
1947
1955
  font-weight: var(--p-font-weight-normal);
@@ -1953,7 +1961,7 @@ h5._32amZ {
1953
1961
  * 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
1954
1962
  */
1955
1963
  ._vu6lH {
1956
- font-family: var(--font-family-brand);
1964
+ font-family: var(--font-family-body);
1957
1965
  font-size: var(--font-size-200);
1958
1966
  line-height: var(--font-line-height-200);
1959
1967
  font-weight: var(--p-font-weight-normal);
@@ -2025,7 +2033,7 @@ h5._32amZ {
2025
2033
  }
2026
2034
 
2027
2035
  ._3YRyk {
2028
- font-family: var(--font-family-brand);
2036
+ font-family: var(--font-family-body);
2029
2037
  font-size: var(--font-size-200);
2030
2038
  line-height: var(--font-line-height-200);
2031
2039
  font-weight: var(--p-font-weight-normal);
@@ -2104,7 +2112,7 @@ h5._32amZ {
2104
2112
  }
2105
2113
 
2106
2114
  ._2AdsD {
2107
- font-family: var(--font-family-brand);
2115
+ font-family: var(--font-family-body);
2108
2116
  font-size: var(--font-size-200);
2109
2117
  line-height: var(--font-line-height-200);
2110
2118
  font-weight: var(--p-font-weight-normal);
@@ -2314,7 +2322,7 @@ input:disabled + ._2W10t::after {
2314
2322
  height: 100%;
2315
2323
  }
2316
2324
  ._1-1WW input {
2317
- font-family: var(--font-family-brand);
2325
+ font-family: var(--font-family-body);
2318
2326
  font-size: var(--font-size-200);
2319
2327
  line-height: var(--font-line-height-200);
2320
2328
  font-weight: var(--p-font-weight-normal);
@@ -2607,7 +2615,7 @@ input:disabled + ._2W10t::after {
2607
2615
  display: flex;
2608
2616
  justify-content: space-between;
2609
2617
  max-width: 424px;
2610
- gap: 20px;
2618
+ gap: 32px;
2611
2619
  flex-direction: column;
2612
2620
  align-items: center;
2613
2621
  }
@@ -2624,7 +2632,7 @@ input:disabled + ._2W10t::after {
2624
2632
  max-width: 667px;
2625
2633
  }
2626
2634
  ._1b3C0 {
2627
- font-family: var(--font-family-brand);
2635
+ font-family: var(--font-family-body);
2628
2636
  font-size: var(--font-size-200);
2629
2637
  line-height: var(--font-line-height-200);
2630
2638
  font-weight: var(--p-font-weight-normal);
@@ -2714,7 +2722,7 @@ input:disabled + ._2W10t::after {
2714
2722
  width: 336px;
2715
2723
  }
2716
2724
  ._2UNAw {
2717
- font-family: var(--font-family-brand);
2725
+ font-family: var(--font-family-body);
2718
2726
  font-size: var(--font-size-200);
2719
2727
  line-height: var(--font-line-height-200);
2720
2728
  font-weight: var(--p-font-weight-normal);
@@ -2771,7 +2779,7 @@ input:disabled + ._2W10t::after {
2771
2779
  display: flex;
2772
2780
  }
2773
2781
  ._9hSoW {
2774
- font-family: var(--font-family-brand);
2782
+ font-family: var(--font-family-body);
2775
2783
  font-size: var(--font-size-200);
2776
2784
  line-height: var(--font-line-height-200);
2777
2785
  font-weight: var(--p-font-weight-normal);
@@ -2865,14 +2873,14 @@ input:disabled + ._2W10t::after {
2865
2873
  color: var(--color-grey-500);
2866
2874
  }
2867
2875
  ._39X-5 {
2868
- font-family: var(--font-family-brand);
2876
+ font-family: var(--font-family-heading);
2869
2877
  font-size: var(--font-size-400);
2870
2878
  line-height: var(--font-line-height-400);
2871
- font-weight: var(--p-font-weight-bold);
2879
+ font-weight: var(--p-font-weight-semibold);
2872
2880
  margin: 0;
2873
2881
  }
2874
2882
  ._pwBR_ {
2875
- font-family: var(--font-family-brand);
2883
+ font-family: var(--font-family-body);
2876
2884
  font-size: var(--font-size-200);
2877
2885
  line-height: var(--font-line-height-200);
2878
2886
  font-weight: var(--p-font-weight-normal);
@@ -2899,7 +2907,7 @@ input:disabled + ._2W10t::after {
2899
2907
  background-color: var(--color-white);
2900
2908
  }
2901
2909
  ._eyfGn textarea {
2902
- font-family: var(--font-family-brand);
2910
+ font-family: var(--font-family-body);
2903
2911
  font-size: var(--font-size-200);
2904
2912
  line-height: var(--font-line-height-200);
2905
2913
  font-weight: var(--p-font-weight-normal);
@@ -2947,7 +2955,7 @@ input:disabled + ._2W10t::after {
2947
2955
  cursor: pointer;
2948
2956
  }
2949
2957
  ._W4HpY {
2950
- font-family: var(--font-family-brand);
2958
+ font-family: var(--font-family-body);
2951
2959
  font-size: var(--font-size-200);
2952
2960
  line-height: var(--font-line-height-200);
2953
2961
  font-weight: var(--p-font-weight-normal);
@@ -3000,7 +3008,7 @@ input:focus-visible + ._W4HpY {
3000
3008
  outline: none;
3001
3009
  }
3002
3010
  ._3QyeH {
3003
- font-family: var(--font-family-brand);
3011
+ font-family: var(--font-family-body);
3004
3012
  font-size: var(--font-size-200);
3005
3013
  line-height: var(--font-line-height-200);
3006
3014
  font-weight: var(--p-font-weight-normal);
@@ -3019,7 +3027,7 @@ input:focus-visible + ._W4HpY {
3019
3027
  }
3020
3028
 
3021
3029
  ._thT22 {
3022
- font-family: var(--font-family-brand);
3030
+ font-family: var(--font-family-body);
3023
3031
  font-size: var(--font-size-200);
3024
3032
  line-height: var(--font-line-height-200);
3025
3033
  font-weight: var(--p-font-weight-normal);
@@ -3031,7 +3039,7 @@ input:focus-visible + ._W4HpY {
3031
3039
  min-height: 16px;
3032
3040
  }
3033
3041
  ._3hIRY {
3034
- font-family: var(--font-family-brand);
3042
+ font-family: var(--font-family-body);
3035
3043
  font-size: var(--font-size-200);
3036
3044
  line-height: var(--font-line-height-200);
3037
3045
  font-weight: var(--p-font-weight-normal);
@@ -3050,7 +3058,7 @@ input:focus-visible + ._W4HpY {
3050
3058
  }
3051
3059
 
3052
3060
  ._2RJol {
3053
- font-family: var(--font-family-brand);
3061
+ font-family: var(--font-family-body);
3054
3062
  font-size: var(--font-size-100);
3055
3063
  line-height: var(--font-line-height-100);
3056
3064
  font-weight: var(--p-font-weight-normal);
@@ -3102,7 +3110,7 @@ input:checked ~ ._3mCob {
3102
3110
  pointer-events: none;
3103
3111
  }
3104
3112
  ._kl23S {
3105
- font-family: var(--font-family-brand);
3113
+ font-family: var(--font-family-body);
3106
3114
  font-size: var(--font-size-200);
3107
3115
  line-height: var(--font-line-height-200);
3108
3116
  font-weight: var(--p-font-weight-normal);
@@ -3117,7 +3125,7 @@ input:checked ~ ._3mCob {
3117
3125
  color: var(--color-grey-300);
3118
3126
  }
3119
3127
  ._2CvoH {
3120
- font-family: var(--font-family-brand);
3128
+ font-family: var(--font-family-body);
3121
3129
  font-size: var(--font-size-100);
3122
3130
  line-height: var(--font-line-height-100);
3123
3131
  font-weight: var(--p-font-weight-normal);
@@ -3190,7 +3198,7 @@ input:disabled + ._1aaPx::after {
3190
3198
  top: 4px;
3191
3199
  }
3192
3200
  ._2XkkE {
3193
- font-family: var(--font-family-brand);
3201
+ font-family: var(--font-family-body);
3194
3202
  font-size: var(--font-size-200);
3195
3203
  line-height: var(--font-line-height-200);
3196
3204
  font-weight: var(--p-font-weight-normal);
@@ -3245,15 +3253,13 @@ input:disabled + ._1aaPx::after {
3245
3253
  }
3246
3254
  ._1XvvK {
3247
3255
  color: var(--color-grey-200);
3248
- font-family: var(--font-family-brand);
3249
3256
  }
3250
3257
 
3251
3258
  ._1cNVk {
3252
3259
  color: var(--color-grey-400);
3253
- font-family: var(--font-family-brand);
3254
3260
  }
3255
3261
  ._12jq3 {
3256
- font-family: var(--font-family-brand);
3262
+ font-family: var(--font-family-body);
3257
3263
  font-size: var(--font-size-200);
3258
3264
  line-height: var(--font-line-height-200);
3259
3265
  font-weight: var(--p-font-weight-normal);
@@ -3264,7 +3270,7 @@ input:disabled + ._1aaPx::after {
3264
3270
  padding: 8px 12px;
3265
3271
  }
3266
3272
  ._10EFd, ._33Mhr {
3267
- font-family: var(--font-family-brand);
3273
+ font-family: var(--font-family-body);
3268
3274
  font-size: var(--font-size-200);
3269
3275
  line-height: var(--font-line-height-200);
3270
3276
  font-weight: var(--p-font-weight-normal);
@@ -3311,7 +3317,7 @@ input:disabled + ._1aaPx::after {
3311
3317
  width: 100%;
3312
3318
  }
3313
3319
  ._vgwnU, ._LZvMX input, ._LZvMX {
3314
- font-family: var(--font-family-brand);
3320
+ font-family: var(--font-family-body);
3315
3321
  font-size: var(--font-size-200);
3316
3322
  line-height: var(--font-line-height-200);
3317
3323
  font-weight: var(--p-font-weight-normal);
@@ -3409,7 +3415,7 @@ input:disabled + ._1aaPx::after {
3409
3415
  }
3410
3416
 
3411
3417
  ._2x1hd {
3412
- font-family: var(--font-family-brand);
3418
+ font-family: var(--font-family-body);
3413
3419
  font-size: var(--font-size-200);
3414
3420
  line-height: var(--font-line-height-200);
3415
3421
  font-weight: var(--p-font-weight-normal);
@@ -3477,7 +3483,7 @@ input:disabled + ._1aaPx::after {
3477
3483
  color: var(--color-grey-200);
3478
3484
  }
3479
3485
  ._pPDKc, ._rSyiE input, ._rSyiE {
3480
- font-family: var(--font-family-brand);
3486
+ font-family: var(--font-family-body);
3481
3487
  font-size: var(--font-size-200);
3482
3488
  line-height: var(--font-line-height-200);
3483
3489
  font-weight: var(--p-font-weight-normal);
@@ -3554,7 +3560,7 @@ input:disabled + ._1aaPx::after {
3554
3560
  border-bottom-left-radius: 0;
3555
3561
  }
3556
3562
  ._2K8Ob {
3557
- font-family: var(--font-family-brand);
3563
+ font-family: var(--font-family-body);
3558
3564
  font-size: var(--font-size-200);
3559
3565
  line-height: var(--font-line-height-200);
3560
3566
  font-weight: var(--p-font-weight-normal);
@@ -4618,7 +4624,7 @@ input._1zowl {
4618
4624
  background-image: url(./flags/zw.svg);
4619
4625
  }
4620
4626
  ._1QLaK {
4621
- font-family: var(--font-family-brand);
4627
+ font-family: var(--font-family-body);
4622
4628
  font-size: var(--font-size-100);
4623
4629
  line-height: var(--font-line-height-100);
4624
4630
  font-weight: var(--p-font-weight-normal);
@@ -4632,6 +4638,7 @@ input._1zowl {
4632
4638
  box-sizing: border-box;
4633
4639
  padding: 0 6px;
4634
4640
  align-items: center;
4641
+ justify-content: center;
4635
4642
  border: 1px solid var(--color-white);
4636
4643
  }
4637
4644
  ._1QLaK svg {
@@ -4649,6 +4656,10 @@ input._1zowl {
4649
4656
  ._1mLjf {
4650
4657
  background-color: var(--color-blueberry-400);
4651
4658
  }
4659
+ ._2bb5N {
4660
+ font-variant-numeric: tabular-nums;
4661
+ padding: 0 5px;
4662
+ }
4652
4663
  ._1X7La {
4653
4664
  display: flex;
4654
4665
  justify-content: center;
@@ -4674,7 +4685,7 @@ input._1zowl {
4674
4685
  object-fit: cover;
4675
4686
  }
4676
4687
  ._o5x6S {
4677
- font-family: var(--font-family-brand);
4688
+ font-family: var(--font-family-body);
4678
4689
  font-size: var(--font-size-200);
4679
4690
  line-height: var(--font-line-height-200);
4680
4691
  font-weight: var(--p-font-weight-normal);
@@ -4686,7 +4697,7 @@ input._1zowl {
4686
4697
  margin-top: 10px;
4687
4698
  }
4688
4699
  ._VxW5y {
4689
- font-family: var(--font-family-brand);
4700
+ font-family: var(--font-family-body);
4690
4701
  font-size: var(--font-size-400);
4691
4702
  line-height: var(--font-line-height-400);
4692
4703
  font-weight: var(--p-font-weight-normal);
@@ -4698,10 +4709,10 @@ input._1zowl {
4698
4709
  margin-top: 15px;
4699
4710
  }
4700
4711
  ._ec7jQ {
4701
- font-family: var(--font-family-brand);
4712
+ font-family: var(--font-family-heading);
4702
4713
  font-size: var(--font-size-500);
4703
4714
  line-height: var(--font-line-height-500);
4704
- font-weight: var(--p-font-weight-bold);
4715
+ font-weight: var(--p-font-weight-semibold);
4705
4716
  width: 40px;
4706
4717
  height: 40px;
4707
4718
  }
@@ -4710,10 +4721,10 @@ input._1zowl {
4710
4721
  margin-top: 18px;
4711
4722
  }
4712
4723
  ._3VS00 {
4713
- font-family: var(--font-family-brand);
4724
+ font-family: var(--font-family-heading);
4714
4725
  font-size: var(--font-size-600);
4715
4726
  line-height: var(--font-line-height-600);
4716
- font-weight: var(--p-font-weight-bold);
4727
+ font-weight: var(--p-font-weight-semibold);
4717
4728
  width: 80px;
4718
4729
  height: 80px;
4719
4730
  }
@@ -4731,7 +4742,7 @@ input._1zowl {
4731
4742
  padding-top: 25%;
4732
4743
  }
4733
4744
  ._3e7Of {
4734
- font-family: var(--font-family-brand);
4745
+ font-family: var(--font-family-body);
4735
4746
  font-size: var(--font-size-100);
4736
4747
  line-height: var(--font-line-height-100);
4737
4748
  font-weight: var(--p-font-weight-normal);
@@ -4767,7 +4778,7 @@ input._1zowl {
4767
4778
  color: var(--color-radish-600);
4768
4779
  }
4769
4780
  ._1vA9B {
4770
- font-family: var(--font-family-brand);
4781
+ font-family: var(--font-family-body);
4771
4782
  font-size: var(--font-size-200);
4772
4783
  line-height: var(--font-line-height-200);
4773
4784
  font-weight: var(--p-font-weight-normal);
@@ -4804,6 +4815,7 @@ input._1zowl {
4804
4815
  display: flex;
4805
4816
  flex-direction: row;
4806
4817
  justify-content: space-between;
4818
+ gap: 32px;
4807
4819
  }
4808
4820
  ._Y1L-A {
4809
4821
  flex-direction: row-reverse;
@@ -4823,7 +4835,7 @@ input._1zowl {
4823
4835
  max-width: 667px;
4824
4836
  }
4825
4837
  ._1o2PF {
4826
- font-family: var(--font-family-brand);
4838
+ font-family: var(--font-family-body);
4827
4839
  font-size: var(--font-size-200);
4828
4840
  line-height: var(--font-line-height-200);
4829
4841
  font-weight: var(--p-font-weight-normal);