@sanity-labs/ui-poc 0.0.1-alpha.4 → 0.0.1-alpha.5

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.
package/dist/styles.css CHANGED
@@ -988,13 +988,13 @@
988
988
  display: none;
989
989
  }
990
990
  }
991
- .sui-align-items-start {
991
+ .sui-align-items-flex-start {
992
992
  align-items: flex-start;
993
993
  }
994
994
  .sui-align-items-center {
995
995
  align-items: center;
996
996
  }
997
- .sui-align-items-end {
997
+ .sui-align-items-flex-end {
998
998
  align-items: flex-end;
999
999
  }
1000
1000
  .sui-align-items-baseline {
@@ -1003,22 +1003,22 @@
1003
1003
  .sui-align-items-stretch {
1004
1004
  align-items: stretch;
1005
1005
  }
1006
- .sui-justify-content-start {
1006
+ .sui-justify-content-flex-start {
1007
1007
  justify-content: flex-start;
1008
1008
  }
1009
1009
  .sui-justify-content-center {
1010
1010
  justify-content: center;
1011
1011
  }
1012
- .sui-justify-content-end {
1012
+ .sui-justify-content-flex-end {
1013
1013
  justify-content: flex-end;
1014
1014
  }
1015
- .sui-justify-content-between {
1015
+ .sui-justify-content-space-between {
1016
1016
  justify-content: space-between;
1017
1017
  }
1018
- .sui-justify-content-around {
1018
+ .sui-justify-content-space-around {
1019
1019
  justify-content: space-around;
1020
1020
  }
1021
- .sui-justify-content-evenly {
1021
+ .sui-justify-content-space-evenly {
1022
1022
  justify-content: space-evenly;
1023
1023
  }
1024
1024
  .sui-justify-content-stretch {
@@ -1046,13 +1046,13 @@
1046
1046
  flex-wrap: wrap-reverse;
1047
1047
  }
1048
1048
  @media (min-width: 360px) {
1049
- .sui-align-items-start-bp-1 {
1049
+ .sui-align-items-flex-start-bp-1 {
1050
1050
  align-items: flex-start;
1051
1051
  }
1052
1052
  .sui-align-items-center-bp-1 {
1053
1053
  align-items: center;
1054
1054
  }
1055
- .sui-align-items-end-bp-1 {
1055
+ .sui-align-items-flex-end-bp-1 {
1056
1056
  align-items: flex-end;
1057
1057
  }
1058
1058
  .sui-align-items-baseline-bp-1 {
@@ -1061,22 +1061,22 @@
1061
1061
  .sui-align-items-stretch-bp-1 {
1062
1062
  align-items: stretch;
1063
1063
  }
1064
- .sui-justify-content-start-bp-1 {
1064
+ .sui-justify-content-flex-start-bp-1 {
1065
1065
  justify-content: flex-start;
1066
1066
  }
1067
1067
  .sui-justify-content-center-bp-1 {
1068
1068
  justify-content: center;
1069
1069
  }
1070
- .sui-justify-content-end-bp-1 {
1070
+ .sui-justify-content-flex-end-bp-1 {
1071
1071
  justify-content: flex-end;
1072
1072
  }
1073
- .sui-justify-content-between-bp-1 {
1073
+ .sui-justify-content-space-between-bp-1 {
1074
1074
  justify-content: space-between;
1075
1075
  }
1076
- .sui-justify-content-around-bp-1 {
1076
+ .sui-justify-content-space-around-bp-1 {
1077
1077
  justify-content: space-around;
1078
1078
  }
1079
- .sui-justify-content-evenly-bp-1 {
1079
+ .sui-justify-content-space-evenly-bp-1 {
1080
1080
  justify-content: space-evenly;
1081
1081
  }
1082
1082
  .sui-justify-content-stretch-bp-1 {
@@ -1105,13 +1105,13 @@
1105
1105
  }
1106
1106
  }
1107
1107
  @media (min-width: 600px) {
1108
- .sui-align-items-start-bp-2 {
1108
+ .sui-align-items-flex-start-bp-2 {
1109
1109
  align-items: flex-start;
1110
1110
  }
1111
1111
  .sui-align-items-center-bp-2 {
1112
1112
  align-items: center;
1113
1113
  }
1114
- .sui-align-items-end-bp-2 {
1114
+ .sui-align-items-flex-end-bp-2 {
1115
1115
  align-items: flex-end;
1116
1116
  }
1117
1117
  .sui-align-items-baseline-bp-2 {
@@ -1120,22 +1120,22 @@
1120
1120
  .sui-align-items-stretch-bp-2 {
1121
1121
  align-items: stretch;
1122
1122
  }
1123
- .sui-justify-content-start-bp-2 {
1123
+ .sui-justify-content-flex-start-bp-2 {
1124
1124
  justify-content: flex-start;
1125
1125
  }
1126
1126
  .sui-justify-content-center-bp-2 {
1127
1127
  justify-content: center;
1128
1128
  }
1129
- .sui-justify-content-end-bp-2 {
1129
+ .sui-justify-content-flex-end-bp-2 {
1130
1130
  justify-content: flex-end;
1131
1131
  }
1132
- .sui-justify-content-between-bp-2 {
1132
+ .sui-justify-content-space-between-bp-2 {
1133
1133
  justify-content: space-between;
1134
1134
  }
1135
- .sui-justify-content-around-bp-2 {
1135
+ .sui-justify-content-space-around-bp-2 {
1136
1136
  justify-content: space-around;
1137
1137
  }
1138
- .sui-justify-content-evenly-bp-2 {
1138
+ .sui-justify-content-space-evenly-bp-2 {
1139
1139
  justify-content: space-evenly;
1140
1140
  }
1141
1141
  .sui-justify-content-stretch-bp-2 {
@@ -1164,13 +1164,13 @@
1164
1164
  }
1165
1165
  }
1166
1166
  @media (min-width: 900px) {
1167
- .sui-align-items-start-bp-3 {
1167
+ .sui-align-items-flex-start-bp-3 {
1168
1168
  align-items: flex-start;
1169
1169
  }
1170
1170
  .sui-align-items-center-bp-3 {
1171
1171
  align-items: center;
1172
1172
  }
1173
- .sui-align-items-end-bp-3 {
1173
+ .sui-align-items-flex-end-bp-3 {
1174
1174
  align-items: flex-end;
1175
1175
  }
1176
1176
  .sui-align-items-baseline-bp-3 {
@@ -1179,22 +1179,22 @@
1179
1179
  .sui-align-items-stretch-bp-3 {
1180
1180
  align-items: stretch;
1181
1181
  }
1182
- .sui-justify-content-start-bp-3 {
1182
+ .sui-justify-content-flex-start-bp-3 {
1183
1183
  justify-content: flex-start;
1184
1184
  }
1185
1185
  .sui-justify-content-center-bp-3 {
1186
1186
  justify-content: center;
1187
1187
  }
1188
- .sui-justify-content-end-bp-3 {
1188
+ .sui-justify-content-flex-end-bp-3 {
1189
1189
  justify-content: flex-end;
1190
1190
  }
1191
- .sui-justify-content-between-bp-3 {
1191
+ .sui-justify-content-space-between-bp-3 {
1192
1192
  justify-content: space-between;
1193
1193
  }
1194
- .sui-justify-content-around-bp-3 {
1194
+ .sui-justify-content-space-around-bp-3 {
1195
1195
  justify-content: space-around;
1196
1196
  }
1197
- .sui-justify-content-evenly-bp-3 {
1197
+ .sui-justify-content-space-evenly-bp-3 {
1198
1198
  justify-content: space-evenly;
1199
1199
  }
1200
1200
  .sui-justify-content-stretch-bp-3 {
@@ -1223,13 +1223,13 @@
1223
1223
  }
1224
1224
  }
1225
1225
  @media (min-width: 1200px) {
1226
- .sui-align-items-start-bp-4 {
1226
+ .sui-align-items-flex-start-bp-4 {
1227
1227
  align-items: flex-start;
1228
1228
  }
1229
1229
  .sui-align-items-center-bp-4 {
1230
1230
  align-items: center;
1231
1231
  }
1232
- .sui-align-items-end-bp-4 {
1232
+ .sui-align-items-flex-end-bp-4 {
1233
1233
  align-items: flex-end;
1234
1234
  }
1235
1235
  .sui-align-items-baseline-bp-4 {
@@ -1238,22 +1238,22 @@
1238
1238
  .sui-align-items-stretch-bp-4 {
1239
1239
  align-items: stretch;
1240
1240
  }
1241
- .sui-justify-content-start-bp-4 {
1241
+ .sui-justify-content-flex-start-bp-4 {
1242
1242
  justify-content: flex-start;
1243
1243
  }
1244
1244
  .sui-justify-content-center-bp-4 {
1245
1245
  justify-content: center;
1246
1246
  }
1247
- .sui-justify-content-end-bp-4 {
1247
+ .sui-justify-content-flex-end-bp-4 {
1248
1248
  justify-content: flex-end;
1249
1249
  }
1250
- .sui-justify-content-between-bp-4 {
1250
+ .sui-justify-content-space-between-bp-4 {
1251
1251
  justify-content: space-between;
1252
1252
  }
1253
- .sui-justify-content-around-bp-4 {
1253
+ .sui-justify-content-space-around-bp-4 {
1254
1254
  justify-content: space-around;
1255
1255
  }
1256
- .sui-justify-content-evenly-bp-4 {
1256
+ .sui-justify-content-space-evenly-bp-4 {
1257
1257
  justify-content: space-evenly;
1258
1258
  }
1259
1259
  .sui-justify-content-stretch-bp-4 {
@@ -1282,13 +1282,13 @@
1282
1282
  }
1283
1283
  }
1284
1284
  @media (min-width: 1800px) {
1285
- .sui-align-items-start-bp-5 {
1285
+ .sui-align-items-flex-start-bp-5 {
1286
1286
  align-items: flex-start;
1287
1287
  }
1288
1288
  .sui-align-items-center-bp-5 {
1289
1289
  align-items: center;
1290
1290
  }
1291
- .sui-align-items-end-bp-5 {
1291
+ .sui-align-items-flex-end-bp-5 {
1292
1292
  align-items: flex-end;
1293
1293
  }
1294
1294
  .sui-align-items-baseline-bp-5 {
@@ -1297,22 +1297,22 @@
1297
1297
  .sui-align-items-stretch-bp-5 {
1298
1298
  align-items: stretch;
1299
1299
  }
1300
- .sui-justify-content-start-bp-5 {
1300
+ .sui-justify-content-flex-start-bp-5 {
1301
1301
  justify-content: flex-start;
1302
1302
  }
1303
1303
  .sui-justify-content-center-bp-5 {
1304
1304
  justify-content: center;
1305
1305
  }
1306
- .sui-justify-content-end-bp-5 {
1306
+ .sui-justify-content-flex-end-bp-5 {
1307
1307
  justify-content: flex-end;
1308
1308
  }
1309
- .sui-justify-content-between-bp-5 {
1309
+ .sui-justify-content-space-between-bp-5 {
1310
1310
  justify-content: space-between;
1311
1311
  }
1312
- .sui-justify-content-around-bp-5 {
1312
+ .sui-justify-content-space-around-bp-5 {
1313
1313
  justify-content: space-around;
1314
1314
  }
1315
- .sui-justify-content-evenly-bp-5 {
1315
+ .sui-justify-content-space-evenly-bp-5 {
1316
1316
  justify-content: space-evenly;
1317
1317
  }
1318
1318
  .sui-justify-content-stretch-bp-5 {
@@ -1341,13 +1341,13 @@
1341
1341
  }
1342
1342
  }
1343
1343
  @media (min-width: 2400px) {
1344
- .sui-align-items-start-bp-6 {
1344
+ .sui-align-items-flex-start-bp-6 {
1345
1345
  align-items: flex-start;
1346
1346
  }
1347
1347
  .sui-align-items-center-bp-6 {
1348
1348
  align-items: center;
1349
1349
  }
1350
- .sui-align-items-end-bp-6 {
1350
+ .sui-align-items-flex-end-bp-6 {
1351
1351
  align-items: flex-end;
1352
1352
  }
1353
1353
  .sui-align-items-baseline-bp-6 {
@@ -1356,22 +1356,22 @@
1356
1356
  .sui-align-items-stretch-bp-6 {
1357
1357
  align-items: stretch;
1358
1358
  }
1359
- .sui-justify-content-start-bp-6 {
1359
+ .sui-justify-content-flex-start-bp-6 {
1360
1360
  justify-content: flex-start;
1361
1361
  }
1362
1362
  .sui-justify-content-center-bp-6 {
1363
1363
  justify-content: center;
1364
1364
  }
1365
- .sui-justify-content-end-bp-6 {
1365
+ .sui-justify-content-flex-end-bp-6 {
1366
1366
  justify-content: flex-end;
1367
1367
  }
1368
- .sui-justify-content-between-bp-6 {
1368
+ .sui-justify-content-space-between-bp-6 {
1369
1369
  justify-content: space-between;
1370
1370
  }
1371
- .sui-justify-content-around-bp-6 {
1371
+ .sui-justify-content-space-around-bp-6 {
1372
1372
  justify-content: space-around;
1373
1373
  }
1374
- .sui-justify-content-evenly-bp-6 {
1374
+ .sui-justify-content-space-evenly-bp-6 {
1375
1375
  justify-content: space-evenly;
1376
1376
  }
1377
1377
  .sui-justify-content-stretch-bp-6 {
@@ -1399,120 +1399,120 @@
1399
1399
  flex-wrap: wrap-reverse;
1400
1400
  }
1401
1401
  }
1402
- .sui-flow-row {
1402
+ .sui-grid-auto-flow-row {
1403
1403
  grid-auto-flow: row;
1404
1404
  }
1405
- .sui-flow-row-dense {
1405
+ .sui-grid-auto-flow-row-dense {
1406
1406
  grid-auto-flow: row dense;
1407
1407
  }
1408
- .sui-flow-column {
1408
+ .sui-grid-auto-flow-column {
1409
1409
  grid-auto-flow: column;
1410
1410
  }
1411
- .sui-flow-column-dense {
1411
+ .sui-grid-auto-flow-column-dense {
1412
1412
  grid-auto-flow: column dense;
1413
1413
  }
1414
- .sui-flow-dense {
1414
+ .sui-grid-auto-flow-dense {
1415
1415
  grid-auto-flow: dense;
1416
1416
  }
1417
1417
  @media (min-width: 360px) {
1418
- .sui-flow-row-bp-1 {
1418
+ .sui-grid-auto-flow-row-bp-1 {
1419
1419
  grid-auto-flow: row;
1420
1420
  }
1421
- .sui-flow-row-dense-bp-1 {
1421
+ .sui-grid-auto-flow-row-dense-bp-1 {
1422
1422
  grid-auto-flow: row dense;
1423
1423
  }
1424
- .sui-flow-column-bp-1 {
1424
+ .sui-grid-auto-flow-column-bp-1 {
1425
1425
  grid-auto-flow: column;
1426
1426
  }
1427
- .sui-flow-column-dense-bp-1 {
1427
+ .sui-grid-auto-flow-column-dense-bp-1 {
1428
1428
  grid-auto-flow: column dense;
1429
1429
  }
1430
- .sui-flow-dense-bp-1 {
1430
+ .sui-grid-auto-flow-dense-bp-1 {
1431
1431
  grid-auto-flow: dense;
1432
1432
  }
1433
1433
  }
1434
1434
  @media (min-width: 600px) {
1435
- .sui-flow-row-bp-2 {
1435
+ .sui-grid-auto-flow-row-bp-2 {
1436
1436
  grid-auto-flow: row;
1437
1437
  }
1438
- .sui-flow-row-dense-bp-2 {
1438
+ .sui-grid-auto-flow-row-dense-bp-2 {
1439
1439
  grid-auto-flow: row dense;
1440
1440
  }
1441
- .sui-flow-column-bp-2 {
1441
+ .sui-grid-auto-flow-column-bp-2 {
1442
1442
  grid-auto-flow: column;
1443
1443
  }
1444
- .sui-flow-column-dense-bp-2 {
1444
+ .sui-grid-auto-flow-column-dense-bp-2 {
1445
1445
  grid-auto-flow: column dense;
1446
1446
  }
1447
- .sui-flow-dense-bp-2 {
1447
+ .sui-grid-auto-flow-dense-bp-2 {
1448
1448
  grid-auto-flow: dense;
1449
1449
  }
1450
1450
  }
1451
1451
  @media (min-width: 900px) {
1452
- .sui-flow-row-bp-3 {
1452
+ .sui-grid-auto-flow-row-bp-3 {
1453
1453
  grid-auto-flow: row;
1454
1454
  }
1455
- .sui-flow-row-dense-bp-3 {
1455
+ .sui-grid-auto-flow-row-dense-bp-3 {
1456
1456
  grid-auto-flow: row dense;
1457
1457
  }
1458
- .sui-flow-column-bp-3 {
1458
+ .sui-grid-auto-flow-column-bp-3 {
1459
1459
  grid-auto-flow: column;
1460
1460
  }
1461
- .sui-flow-column-dense-bp-3 {
1461
+ .sui-grid-auto-flow-column-dense-bp-3 {
1462
1462
  grid-auto-flow: column dense;
1463
1463
  }
1464
- .sui-flow-dense-bp-3 {
1464
+ .sui-grid-auto-flow-dense-bp-3 {
1465
1465
  grid-auto-flow: dense;
1466
1466
  }
1467
1467
  }
1468
1468
  @media (min-width: 1200px) {
1469
- .sui-flow-row-bp-4 {
1469
+ .sui-grid-auto-flow-row-bp-4 {
1470
1470
  grid-auto-flow: row;
1471
1471
  }
1472
- .sui-flow-row-dense-bp-4 {
1472
+ .sui-grid-auto-flow-row-dense-bp-4 {
1473
1473
  grid-auto-flow: row dense;
1474
1474
  }
1475
- .sui-flow-column-bp-4 {
1475
+ .sui-grid-auto-flow-column-bp-4 {
1476
1476
  grid-auto-flow: column;
1477
1477
  }
1478
- .sui-flow-column-dense-bp-4 {
1478
+ .sui-grid-auto-flow-column-dense-bp-4 {
1479
1479
  grid-auto-flow: column dense;
1480
1480
  }
1481
- .sui-flow-dense-bp-4 {
1481
+ .sui-grid-auto-flow-dense-bp-4 {
1482
1482
  grid-auto-flow: dense;
1483
1483
  }
1484
1484
  }
1485
1485
  @media (min-width: 1800px) {
1486
- .sui-flow-row-bp-5 {
1486
+ .sui-grid-auto-flow-row-bp-5 {
1487
1487
  grid-auto-flow: row;
1488
1488
  }
1489
- .sui-flow-row-dense-bp-5 {
1489
+ .sui-grid-auto-flow-row-dense-bp-5 {
1490
1490
  grid-auto-flow: row dense;
1491
1491
  }
1492
- .sui-flow-column-bp-5 {
1492
+ .sui-grid-auto-flow-column-bp-5 {
1493
1493
  grid-auto-flow: column;
1494
1494
  }
1495
- .sui-flow-column-dense-bp-5 {
1495
+ .sui-grid-auto-flow-column-dense-bp-5 {
1496
1496
  grid-auto-flow: column dense;
1497
1497
  }
1498
- .sui-flow-dense-bp-5 {
1498
+ .sui-grid-auto-flow-dense-bp-5 {
1499
1499
  grid-auto-flow: dense;
1500
1500
  }
1501
1501
  }
1502
1502
  @media (min-width: 2400px) {
1503
- .sui-flow-row-bp-6 {
1503
+ .sui-grid-auto-flow-row-bp-6 {
1504
1504
  grid-auto-flow: row;
1505
1505
  }
1506
- .sui-flow-row-dense-bp-6 {
1506
+ .sui-grid-auto-flow-row-dense-bp-6 {
1507
1507
  grid-auto-flow: row dense;
1508
1508
  }
1509
- .sui-flow-column-bp-6 {
1509
+ .sui-grid-auto-flow-column-bp-6 {
1510
1510
  grid-auto-flow: column;
1511
1511
  }
1512
- .sui-flow-column-dense-bp-6 {
1512
+ .sui-grid-auto-flow-column-dense-bp-6 {
1513
1513
  grid-auto-flow: column dense;
1514
1514
  }
1515
- .sui-flow-dense-bp-6 {
1515
+ .sui-grid-auto-flow-dense-bp-6 {
1516
1516
  grid-auto-flow: dense;
1517
1517
  }
1518
1518
  }
@@ -2760,6 +2760,648 @@
2760
2760
  width: var(--container-5);
2761
2761
  }
2762
2762
  }
2763
+ .sui-gap0 {
2764
+ gap: var(--space-0);
2765
+ }
2766
+ .sui-gap1 {
2767
+ gap: var(--space-1);
2768
+ }
2769
+ .sui-gap2 {
2770
+ gap: var(--space-2);
2771
+ }
2772
+ .sui-gap3 {
2773
+ gap: var(--space-3);
2774
+ }
2775
+ .sui-gap4 {
2776
+ gap: var(--space-4);
2777
+ }
2778
+ .sui-gap5 {
2779
+ gap: var(--space-5);
2780
+ }
2781
+ .sui-gap6 {
2782
+ gap: var(--space-6);
2783
+ }
2784
+ .sui-gap7 {
2785
+ gap: var(--space-7);
2786
+ }
2787
+ .sui-gap8 {
2788
+ gap: var(--space-8);
2789
+ }
2790
+ .sui-gap9 {
2791
+ gap: var(--space-9);
2792
+ }
2793
+ .sui-row-gap0 {
2794
+ row-gap: var(--space-0);
2795
+ }
2796
+ .sui-row-gap1 {
2797
+ row-gap: var(--space-1);
2798
+ }
2799
+ .sui-row-gap2 {
2800
+ row-gap: var(--space-2);
2801
+ }
2802
+ .sui-row-gap3 {
2803
+ row-gap: var(--space-3);
2804
+ }
2805
+ .sui-row-gap4 {
2806
+ row-gap: var(--space-4);
2807
+ }
2808
+ .sui-row-gap5 {
2809
+ row-gap: var(--space-5);
2810
+ }
2811
+ .sui-row-gap6 {
2812
+ row-gap: var(--space-6);
2813
+ }
2814
+ .sui-row-gap7 {
2815
+ row-gap: var(--space-7);
2816
+ }
2817
+ .sui-row-gap8 {
2818
+ row-gap: var(--space-8);
2819
+ }
2820
+ .sui-row-gap9 {
2821
+ row-gap: var(--space-9);
2822
+ }
2823
+ .sui-column-gap0 {
2824
+ column-gap: var(--space-0);
2825
+ }
2826
+ .sui-column-gap1 {
2827
+ column-gap: var(--space-1);
2828
+ }
2829
+ .sui-column-gap2 {
2830
+ column-gap: var(--space-2);
2831
+ }
2832
+ .sui-column-gap3 {
2833
+ column-gap: var(--space-3);
2834
+ }
2835
+ .sui-column-gap4 {
2836
+ column-gap: var(--space-4);
2837
+ }
2838
+ .sui-column-gap5 {
2839
+ column-gap: var(--space-5);
2840
+ }
2841
+ .sui-column-gap6 {
2842
+ column-gap: var(--space-6);
2843
+ }
2844
+ .sui-column-gap7 {
2845
+ column-gap: var(--space-7);
2846
+ }
2847
+ .sui-column-gap8 {
2848
+ column-gap: var(--space-8);
2849
+ }
2850
+ .sui-column-gap9 {
2851
+ column-gap: var(--space-9);
2852
+ }
2853
+ @media (min-width: 360px) {
2854
+ .sui-gap0-bp-1 {
2855
+ gap: var(--space-0);
2856
+ }
2857
+ .sui-gap1-bp-1 {
2858
+ gap: var(--space-1);
2859
+ }
2860
+ .sui-gap2-bp-1 {
2861
+ gap: var(--space-2);
2862
+ }
2863
+ .sui-gap3-bp-1 {
2864
+ gap: var(--space-3);
2865
+ }
2866
+ .sui-gap4-bp-1 {
2867
+ gap: var(--space-4);
2868
+ }
2869
+ .sui-gap5-bp-1 {
2870
+ gap: var(--space-5);
2871
+ }
2872
+ .sui-gap6-bp-1 {
2873
+ gap: var(--space-6);
2874
+ }
2875
+ .sui-gap7-bp-1 {
2876
+ gap: var(--space-7);
2877
+ }
2878
+ .sui-gap8-bp-1 {
2879
+ gap: var(--space-8);
2880
+ }
2881
+ .sui-gap9-bp-1 {
2882
+ gap: var(--space-9);
2883
+ }
2884
+ .sui-row-gap0-bp-1 {
2885
+ row-gap: var(--space-0);
2886
+ }
2887
+ .sui-row-gap1-bp-1 {
2888
+ row-gap: var(--space-1);
2889
+ }
2890
+ .sui-row-gap2-bp-1 {
2891
+ row-gap: var(--space-2);
2892
+ }
2893
+ .sui-row-gap3-bp-1 {
2894
+ row-gap: var(--space-3);
2895
+ }
2896
+ .sui-row-gap4-bp-1 {
2897
+ row-gap: var(--space-4);
2898
+ }
2899
+ .sui-row-gap5-bp-1 {
2900
+ row-gap: var(--space-5);
2901
+ }
2902
+ .sui-row-gap6-bp-1 {
2903
+ row-gap: var(--space-6);
2904
+ }
2905
+ .sui-row-gap7-bp-1 {
2906
+ row-gap: var(--space-7);
2907
+ }
2908
+ .sui-row-gap8-bp-1 {
2909
+ row-gap: var(--space-8);
2910
+ }
2911
+ .sui-row-gap9-bp-1 {
2912
+ row-gap: var(--space-9);
2913
+ }
2914
+ .sui-column-gap0-bp-1 {
2915
+ column-gap: var(--space-0);
2916
+ }
2917
+ .sui-column-gap1-bp-1 {
2918
+ column-gap: var(--space-1);
2919
+ }
2920
+ .sui-column-gap2-bp-1 {
2921
+ column-gap: var(--space-2);
2922
+ }
2923
+ .sui-column-gap3-bp-1 {
2924
+ column-gap: var(--space-3);
2925
+ }
2926
+ .sui-column-gap4-bp-1 {
2927
+ column-gap: var(--space-4);
2928
+ }
2929
+ .sui-column-gap5-bp-1 {
2930
+ column-gap: var(--space-5);
2931
+ }
2932
+ .sui-column-gap6-bp-1 {
2933
+ column-gap: var(--space-6);
2934
+ }
2935
+ .sui-column-gap7-bp-1 {
2936
+ column-gap: var(--space-7);
2937
+ }
2938
+ .sui-column-gap8-bp-1 {
2939
+ column-gap: var(--space-8);
2940
+ }
2941
+ .sui-column-gap9-bp-1 {
2942
+ column-gap: var(--space-9);
2943
+ }
2944
+ }
2945
+ @media (min-width: 600px) {
2946
+ .sui-gap0-bp-2 {
2947
+ gap: var(--space-0);
2948
+ }
2949
+ .sui-gap1-bp-2 {
2950
+ gap: var(--space-1);
2951
+ }
2952
+ .sui-gap2-bp-2 {
2953
+ gap: var(--space-2);
2954
+ }
2955
+ .sui-gap3-bp-2 {
2956
+ gap: var(--space-3);
2957
+ }
2958
+ .sui-gap4-bp-2 {
2959
+ gap: var(--space-4);
2960
+ }
2961
+ .sui-gap5-bp-2 {
2962
+ gap: var(--space-5);
2963
+ }
2964
+ .sui-gap6-bp-2 {
2965
+ gap: var(--space-6);
2966
+ }
2967
+ .sui-gap7-bp-2 {
2968
+ gap: var(--space-7);
2969
+ }
2970
+ .sui-gap8-bp-2 {
2971
+ gap: var(--space-8);
2972
+ }
2973
+ .sui-gap9-bp-2 {
2974
+ gap: var(--space-9);
2975
+ }
2976
+ .sui-row-gap0-bp-2 {
2977
+ row-gap: var(--space-0);
2978
+ }
2979
+ .sui-row-gap1-bp-2 {
2980
+ row-gap: var(--space-1);
2981
+ }
2982
+ .sui-row-gap2-bp-2 {
2983
+ row-gap: var(--space-2);
2984
+ }
2985
+ .sui-row-gap3-bp-2 {
2986
+ row-gap: var(--space-3);
2987
+ }
2988
+ .sui-row-gap4-bp-2 {
2989
+ row-gap: var(--space-4);
2990
+ }
2991
+ .sui-row-gap5-bp-2 {
2992
+ row-gap: var(--space-5);
2993
+ }
2994
+ .sui-row-gap6-bp-2 {
2995
+ row-gap: var(--space-6);
2996
+ }
2997
+ .sui-row-gap7-bp-2 {
2998
+ row-gap: var(--space-7);
2999
+ }
3000
+ .sui-row-gap8-bp-2 {
3001
+ row-gap: var(--space-8);
3002
+ }
3003
+ .sui-row-gap9-bp-2 {
3004
+ row-gap: var(--space-9);
3005
+ }
3006
+ .sui-column-gap0-bp-2 {
3007
+ column-gap: var(--space-0);
3008
+ }
3009
+ .sui-column-gap1-bp-2 {
3010
+ column-gap: var(--space-1);
3011
+ }
3012
+ .sui-column-gap2-bp-2 {
3013
+ column-gap: var(--space-2);
3014
+ }
3015
+ .sui-column-gap3-bp-2 {
3016
+ column-gap: var(--space-3);
3017
+ }
3018
+ .sui-column-gap4-bp-2 {
3019
+ column-gap: var(--space-4);
3020
+ }
3021
+ .sui-column-gap5-bp-2 {
3022
+ column-gap: var(--space-5);
3023
+ }
3024
+ .sui-column-gap6-bp-2 {
3025
+ column-gap: var(--space-6);
3026
+ }
3027
+ .sui-column-gap7-bp-2 {
3028
+ column-gap: var(--space-7);
3029
+ }
3030
+ .sui-column-gap8-bp-2 {
3031
+ column-gap: var(--space-8);
3032
+ }
3033
+ .sui-column-gap9-bp-2 {
3034
+ column-gap: var(--space-9);
3035
+ }
3036
+ }
3037
+ @media (min-width: 900px) {
3038
+ .sui-gap0-bp-3 {
3039
+ gap: var(--space-0);
3040
+ }
3041
+ .sui-gap1-bp-3 {
3042
+ gap: var(--space-1);
3043
+ }
3044
+ .sui-gap2-bp-3 {
3045
+ gap: var(--space-2);
3046
+ }
3047
+ .sui-gap3-bp-3 {
3048
+ gap: var(--space-3);
3049
+ }
3050
+ .sui-gap4-bp-3 {
3051
+ gap: var(--space-4);
3052
+ }
3053
+ .sui-gap5-bp-3 {
3054
+ gap: var(--space-5);
3055
+ }
3056
+ .sui-gap6-bp-3 {
3057
+ gap: var(--space-6);
3058
+ }
3059
+ .sui-gap7-bp-3 {
3060
+ gap: var(--space-7);
3061
+ }
3062
+ .sui-gap8-bp-3 {
3063
+ gap: var(--space-8);
3064
+ }
3065
+ .sui-gap9-bp-3 {
3066
+ gap: var(--space-9);
3067
+ }
3068
+ .sui-row-gap0-bp-3 {
3069
+ row-gap: var(--space-0);
3070
+ }
3071
+ .sui-row-gap1-bp-3 {
3072
+ row-gap: var(--space-1);
3073
+ }
3074
+ .sui-row-gap2-bp-3 {
3075
+ row-gap: var(--space-2);
3076
+ }
3077
+ .sui-row-gap3-bp-3 {
3078
+ row-gap: var(--space-3);
3079
+ }
3080
+ .sui-row-gap4-bp-3 {
3081
+ row-gap: var(--space-4);
3082
+ }
3083
+ .sui-row-gap5-bp-3 {
3084
+ row-gap: var(--space-5);
3085
+ }
3086
+ .sui-row-gap6-bp-3 {
3087
+ row-gap: var(--space-6);
3088
+ }
3089
+ .sui-row-gap7-bp-3 {
3090
+ row-gap: var(--space-7);
3091
+ }
3092
+ .sui-row-gap8-bp-3 {
3093
+ row-gap: var(--space-8);
3094
+ }
3095
+ .sui-row-gap9-bp-3 {
3096
+ row-gap: var(--space-9);
3097
+ }
3098
+ .sui-column-gap0-bp-3 {
3099
+ column-gap: var(--space-0);
3100
+ }
3101
+ .sui-column-gap1-bp-3 {
3102
+ column-gap: var(--space-1);
3103
+ }
3104
+ .sui-column-gap2-bp-3 {
3105
+ column-gap: var(--space-2);
3106
+ }
3107
+ .sui-column-gap3-bp-3 {
3108
+ column-gap: var(--space-3);
3109
+ }
3110
+ .sui-column-gap4-bp-3 {
3111
+ column-gap: var(--space-4);
3112
+ }
3113
+ .sui-column-gap5-bp-3 {
3114
+ column-gap: var(--space-5);
3115
+ }
3116
+ .sui-column-gap6-bp-3 {
3117
+ column-gap: var(--space-6);
3118
+ }
3119
+ .sui-column-gap7-bp-3 {
3120
+ column-gap: var(--space-7);
3121
+ }
3122
+ .sui-column-gap8-bp-3 {
3123
+ column-gap: var(--space-8);
3124
+ }
3125
+ .sui-column-gap9-bp-3 {
3126
+ column-gap: var(--space-9);
3127
+ }
3128
+ }
3129
+ @media (min-width: 1200px) {
3130
+ .sui-gap0-bp-4 {
3131
+ gap: var(--space-0);
3132
+ }
3133
+ .sui-gap1-bp-4 {
3134
+ gap: var(--space-1);
3135
+ }
3136
+ .sui-gap2-bp-4 {
3137
+ gap: var(--space-2);
3138
+ }
3139
+ .sui-gap3-bp-4 {
3140
+ gap: var(--space-3);
3141
+ }
3142
+ .sui-gap4-bp-4 {
3143
+ gap: var(--space-4);
3144
+ }
3145
+ .sui-gap5-bp-4 {
3146
+ gap: var(--space-5);
3147
+ }
3148
+ .sui-gap6-bp-4 {
3149
+ gap: var(--space-6);
3150
+ }
3151
+ .sui-gap7-bp-4 {
3152
+ gap: var(--space-7);
3153
+ }
3154
+ .sui-gap8-bp-4 {
3155
+ gap: var(--space-8);
3156
+ }
3157
+ .sui-gap9-bp-4 {
3158
+ gap: var(--space-9);
3159
+ }
3160
+ .sui-row-gap0-bp-4 {
3161
+ row-gap: var(--space-0);
3162
+ }
3163
+ .sui-row-gap1-bp-4 {
3164
+ row-gap: var(--space-1);
3165
+ }
3166
+ .sui-row-gap2-bp-4 {
3167
+ row-gap: var(--space-2);
3168
+ }
3169
+ .sui-row-gap3-bp-4 {
3170
+ row-gap: var(--space-3);
3171
+ }
3172
+ .sui-row-gap4-bp-4 {
3173
+ row-gap: var(--space-4);
3174
+ }
3175
+ .sui-row-gap5-bp-4 {
3176
+ row-gap: var(--space-5);
3177
+ }
3178
+ .sui-row-gap6-bp-4 {
3179
+ row-gap: var(--space-6);
3180
+ }
3181
+ .sui-row-gap7-bp-4 {
3182
+ row-gap: var(--space-7);
3183
+ }
3184
+ .sui-row-gap8-bp-4 {
3185
+ row-gap: var(--space-8);
3186
+ }
3187
+ .sui-row-gap9-bp-4 {
3188
+ row-gap: var(--space-9);
3189
+ }
3190
+ .sui-column-gap0-bp-4 {
3191
+ column-gap: var(--space-0);
3192
+ }
3193
+ .sui-column-gap1-bp-4 {
3194
+ column-gap: var(--space-1);
3195
+ }
3196
+ .sui-column-gap2-bp-4 {
3197
+ column-gap: var(--space-2);
3198
+ }
3199
+ .sui-column-gap3-bp-4 {
3200
+ column-gap: var(--space-3);
3201
+ }
3202
+ .sui-column-gap4-bp-4 {
3203
+ column-gap: var(--space-4);
3204
+ }
3205
+ .sui-column-gap5-bp-4 {
3206
+ column-gap: var(--space-5);
3207
+ }
3208
+ .sui-column-gap6-bp-4 {
3209
+ column-gap: var(--space-6);
3210
+ }
3211
+ .sui-column-gap7-bp-4 {
3212
+ column-gap: var(--space-7);
3213
+ }
3214
+ .sui-column-gap8-bp-4 {
3215
+ column-gap: var(--space-8);
3216
+ }
3217
+ .sui-column-gap9-bp-4 {
3218
+ column-gap: var(--space-9);
3219
+ }
3220
+ }
3221
+ @media (min-width: 1800px) {
3222
+ .sui-gap0-bp-5 {
3223
+ gap: var(--space-0);
3224
+ }
3225
+ .sui-gap1-bp-5 {
3226
+ gap: var(--space-1);
3227
+ }
3228
+ .sui-gap2-bp-5 {
3229
+ gap: var(--space-2);
3230
+ }
3231
+ .sui-gap3-bp-5 {
3232
+ gap: var(--space-3);
3233
+ }
3234
+ .sui-gap4-bp-5 {
3235
+ gap: var(--space-4);
3236
+ }
3237
+ .sui-gap5-bp-5 {
3238
+ gap: var(--space-5);
3239
+ }
3240
+ .sui-gap6-bp-5 {
3241
+ gap: var(--space-6);
3242
+ }
3243
+ .sui-gap7-bp-5 {
3244
+ gap: var(--space-7);
3245
+ }
3246
+ .sui-gap8-bp-5 {
3247
+ gap: var(--space-8);
3248
+ }
3249
+ .sui-gap9-bp-5 {
3250
+ gap: var(--space-9);
3251
+ }
3252
+ .sui-row-gap0-bp-5 {
3253
+ row-gap: var(--space-0);
3254
+ }
3255
+ .sui-row-gap1-bp-5 {
3256
+ row-gap: var(--space-1);
3257
+ }
3258
+ .sui-row-gap2-bp-5 {
3259
+ row-gap: var(--space-2);
3260
+ }
3261
+ .sui-row-gap3-bp-5 {
3262
+ row-gap: var(--space-3);
3263
+ }
3264
+ .sui-row-gap4-bp-5 {
3265
+ row-gap: var(--space-4);
3266
+ }
3267
+ .sui-row-gap5-bp-5 {
3268
+ row-gap: var(--space-5);
3269
+ }
3270
+ .sui-row-gap6-bp-5 {
3271
+ row-gap: var(--space-6);
3272
+ }
3273
+ .sui-row-gap7-bp-5 {
3274
+ row-gap: var(--space-7);
3275
+ }
3276
+ .sui-row-gap8-bp-5 {
3277
+ row-gap: var(--space-8);
3278
+ }
3279
+ .sui-row-gap9-bp-5 {
3280
+ row-gap: var(--space-9);
3281
+ }
3282
+ .sui-column-gap0-bp-5 {
3283
+ column-gap: var(--space-0);
3284
+ }
3285
+ .sui-column-gap1-bp-5 {
3286
+ column-gap: var(--space-1);
3287
+ }
3288
+ .sui-column-gap2-bp-5 {
3289
+ column-gap: var(--space-2);
3290
+ }
3291
+ .sui-column-gap3-bp-5 {
3292
+ column-gap: var(--space-3);
3293
+ }
3294
+ .sui-column-gap4-bp-5 {
3295
+ column-gap: var(--space-4);
3296
+ }
3297
+ .sui-column-gap5-bp-5 {
3298
+ column-gap: var(--space-5);
3299
+ }
3300
+ .sui-column-gap6-bp-5 {
3301
+ column-gap: var(--space-6);
3302
+ }
3303
+ .sui-column-gap7-bp-5 {
3304
+ column-gap: var(--space-7);
3305
+ }
3306
+ .sui-column-gap8-bp-5 {
3307
+ column-gap: var(--space-8);
3308
+ }
3309
+ .sui-column-gap9-bp-5 {
3310
+ column-gap: var(--space-9);
3311
+ }
3312
+ }
3313
+ @media (min-width: 2400px) {
3314
+ .sui-gap0-bp-6 {
3315
+ gap: var(--space-0);
3316
+ }
3317
+ .sui-gap1-bp-6 {
3318
+ gap: var(--space-1);
3319
+ }
3320
+ .sui-gap2-bp-6 {
3321
+ gap: var(--space-2);
3322
+ }
3323
+ .sui-gap3-bp-6 {
3324
+ gap: var(--space-3);
3325
+ }
3326
+ .sui-gap4-bp-6 {
3327
+ gap: var(--space-4);
3328
+ }
3329
+ .sui-gap5-bp-6 {
3330
+ gap: var(--space-5);
3331
+ }
3332
+ .sui-gap6-bp-6 {
3333
+ gap: var(--space-6);
3334
+ }
3335
+ .sui-gap7-bp-6 {
3336
+ gap: var(--space-7);
3337
+ }
3338
+ .sui-gap8-bp-6 {
3339
+ gap: var(--space-8);
3340
+ }
3341
+ .sui-gap9-bp-6 {
3342
+ gap: var(--space-9);
3343
+ }
3344
+ .sui-row-gap0-bp-6 {
3345
+ row-gap: var(--space-0);
3346
+ }
3347
+ .sui-row-gap1-bp-6 {
3348
+ row-gap: var(--space-1);
3349
+ }
3350
+ .sui-row-gap2-bp-6 {
3351
+ row-gap: var(--space-2);
3352
+ }
3353
+ .sui-row-gap3-bp-6 {
3354
+ row-gap: var(--space-3);
3355
+ }
3356
+ .sui-row-gap4-bp-6 {
3357
+ row-gap: var(--space-4);
3358
+ }
3359
+ .sui-row-gap5-bp-6 {
3360
+ row-gap: var(--space-5);
3361
+ }
3362
+ .sui-row-gap6-bp-6 {
3363
+ row-gap: var(--space-6);
3364
+ }
3365
+ .sui-row-gap7-bp-6 {
3366
+ row-gap: var(--space-7);
3367
+ }
3368
+ .sui-row-gap8-bp-6 {
3369
+ row-gap: var(--space-8);
3370
+ }
3371
+ .sui-row-gap9-bp-6 {
3372
+ row-gap: var(--space-9);
3373
+ }
3374
+ .sui-column-gap0-bp-6 {
3375
+ column-gap: var(--space-0);
3376
+ }
3377
+ .sui-column-gap1-bp-6 {
3378
+ column-gap: var(--space-1);
3379
+ }
3380
+ .sui-column-gap2-bp-6 {
3381
+ column-gap: var(--space-2);
3382
+ }
3383
+ .sui-column-gap3-bp-6 {
3384
+ column-gap: var(--space-3);
3385
+ }
3386
+ .sui-column-gap4-bp-6 {
3387
+ column-gap: var(--space-4);
3388
+ }
3389
+ .sui-column-gap5-bp-6 {
3390
+ column-gap: var(--space-5);
3391
+ }
3392
+ .sui-column-gap6-bp-6 {
3393
+ column-gap: var(--space-6);
3394
+ }
3395
+ .sui-column-gap7-bp-6 {
3396
+ column-gap: var(--space-7);
3397
+ }
3398
+ .sui-column-gap8-bp-6 {
3399
+ column-gap: var(--space-8);
3400
+ }
3401
+ .sui-column-gap9-bp-6 {
3402
+ column-gap: var(--space-9);
3403
+ }
3404
+ }
2763
3405
  .sui-inset0 {
2764
3406
  inset: var(--space-0);
2765
3407
  }