@code-coaching/vuetiful 0.11.3 → 0.12.1

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.
@@ -602,9 +602,9 @@ h4:not(.unstyled):is(:not(.prose *)) {
602
602
  }
603
603
 
604
604
  h5:not(.unstyled):is(:not(.prose *)) {
605
- font-size: 1rem;
606
- line-height: 1.5rem;
607
605
  font-family: var(--theme-font-family-heading);
606
+ font-size:1rem;
607
+ line-height:1.5rem;
608
608
  }
609
609
 
610
610
  @media (min-width: 768px) {
@@ -631,8 +631,8 @@ h6:not(.unstyled):is(:not(.prose *)) {
631
631
 
632
632
  p:not(.unstyled):is(:not(.prose *)) {
633
633
  /* NOTE: do not hardcode a text color style here. It makes color overrides difficult. */
634
- font-size: 1rem;
635
- line-height: 1.5rem;
634
+ font-size:1rem;
635
+ line-height:1.5rem;
636
636
  }
637
637
 
638
638
  a:not(.unstyled):not(.permalink):is(:not(.prose *)):not(.btn):not(.btn-icon):not(.app-bar a):not(
@@ -674,7 +674,10 @@ blockquote:not(.unstyled):is(:not(.prose *)) {
674
674
  }
675
675
 
676
676
  blockquote:not(.unstyled):is(:not(.prose *)){
677
- padding-left:1rem
677
+ padding-right:1rem;
678
+ padding-left:1rem;
679
+ font-size:1rem;
680
+ line-height:1.5rem
678
681
  }
679
682
 
680
683
  .dark blockquote:not(.unstyled):is(:not(.prose *)){
@@ -729,11 +732,11 @@ pre:not(.unstyled):not(.code-block pre):is(:not(.prose *)) {
729
732
  overflow-x: auto;
730
733
  background-color: rgb(23 23 23 / 0.9);
731
734
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
732
- font-size: 1rem;
733
- line-height: 1.5rem;
734
735
  white-space:pre-wrap;
735
736
  background-color:#171717e6;
736
737
  padding:1rem;
738
+ font-size:1rem;
739
+ line-height:1.5rem;
737
740
  --tw-text-opacity: 1;
738
741
  color:rgb(255 255 255 / var(--tw-text-opacity));
739
742
  border-radius:var(--theme-rounded-container);
@@ -945,24 +948,282 @@ progress::-webkit-progress-value {
945
948
 
946
949
  /* === Core Styles === */
947
950
 
951
+ .input,
952
+ .textarea,
953
+ .select,
954
+ .input-group {
955
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
956
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
957
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
958
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
959
+ transition-duration: 200ms;
960
+ width:100%;
961
+ transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;
962
+ transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
963
+ transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;
964
+ transition-timing-function:cubic-bezier(.4,0,.2,1);
965
+ transition-duration:.15s;
966
+ /* Background */
967
+ background-color: rgb(var(--color-surface-200));
968
+ }
969
+
970
+ .dark .input,.dark
971
+ .textarea,.dark
972
+ .select,.dark
973
+ .input-group {
974
+ background-color: rgb(var(--color-surface-700));
975
+ }
976
+
977
+ .input,
978
+ .textarea,
979
+ .select,
980
+ .input-group{
981
+ background-color:rgb(var(--color-surface-200))
982
+ }
983
+
984
+ .dark .input,.dark
985
+ .textarea,.dark
986
+ .select,.dark
987
+ .input-group{
988
+ background-color:rgb(var(--color-surface-700))
989
+ }
990
+
991
+ .input:hover,
992
+ .textarea:hover,
993
+ .select:hover,
994
+ .input-group:hover {
995
+ --tw-brightness: brightness(1.05);
996
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
997
+ }
998
+
999
+ .input:focus,
1000
+ .textarea:focus,
1001
+ .select:focus,
1002
+ .input-group:focus {
1003
+ --tw-brightness: brightness(1.05);
1004
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
1005
+ }
1006
+
1007
+ .input,
1008
+ .textarea,
1009
+ .select,
1010
+ .input-group {
1011
+ /* Ring */
1012
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
1013
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
1014
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
1015
+ /* Border */
1016
+ border-width: var(--theme-border-base);
1017
+ border-color: rgb(var(--color-surface-400));
1018
+ }
1019
+
1020
+ .dark .input,.dark
1021
+ .textarea,.dark
1022
+ .select,.dark
1023
+ .input-group {
1024
+ border-color: rgb(var(--color-surface-500));
1025
+ }
1026
+
1027
+ .input,
1028
+ .textarea,
1029
+ .select,
1030
+ .input-group{
1031
+ border-width:var(--theme-border-base);
1032
+ border-color:rgb(var(--color-surface-400))
1033
+ }
1034
+
1035
+ .dark .input,.dark
1036
+ .textarea,.dark
1037
+ .select,.dark
1038
+ .input-group{
1039
+ border-color:rgb(var(--color-surface-500))
1040
+ }
1041
+
1042
+ .input:focus-within,
1043
+ .textarea:focus-within,
1044
+ .select:focus-within,
1045
+ .input-group:focus-within {
1046
+ --tw-border-opacity: 1;
1047
+ border-color: rgb(var(--color-primary-500) / var(--tw-border-opacity));
1048
+ }
1049
+
948
1050
  /* Base Inputs */
949
1051
 
1052
+ .input,
1053
+ .input-group {
1054
+ border-radius:var(--theme-rounded-base);
1055
+ }
1056
+
950
1057
  /* Container Inputs */
951
1058
 
952
1059
  /* Select (size/multiple) */
953
1060
 
954
1061
  /* Checkbox & Radio */
955
1062
 
1063
+ .checkbox,
1064
+ .radio {
1065
+ height: 1.25rem;
1066
+ width: 1.25rem;
1067
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
1068
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
1069
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
1070
+ cursor:pointer;
1071
+ border-radius:.25rem;
1072
+ /* Background */
1073
+ background-color: rgb(var(--color-surface-200));
1074
+ }
1075
+
1076
+ .dark .checkbox,.dark
1077
+ .radio {
1078
+ background-color: rgb(var(--color-surface-700));
1079
+ }
1080
+
1081
+ .checkbox,
1082
+ .radio{
1083
+ background-color:rgb(var(--color-surface-200))
1084
+ }
1085
+
1086
+ .dark .checkbox,.dark
1087
+ .radio{
1088
+ background-color:rgb(var(--color-surface-700))
1089
+ }
1090
+
1091
+ .checkbox:hover,
1092
+ .radio:hover {
1093
+ --tw-brightness: brightness(1.05);
1094
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
1095
+ }
1096
+
1097
+ .checkbox:focus,
1098
+ .radio:focus {
1099
+ --tw-brightness: brightness(1.05);
1100
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
1101
+ }
1102
+
1103
+ .checkbox,
1104
+ .radio {
1105
+ /* Border */
1106
+ border-width: var(--theme-border-base);
1107
+ border-color: rgb(var(--color-surface-400));
1108
+ }
1109
+
1110
+ .dark .checkbox,.dark
1111
+ .radio {
1112
+ border-color: rgb(var(--color-surface-500));
1113
+ }
1114
+
1115
+ .checkbox,
1116
+ .radio{
1117
+ border-width:var(--theme-border-base);
1118
+ border-color:rgb(var(--color-surface-400))
1119
+ }
1120
+
1121
+ .dark .checkbox,.dark
1122
+ .radio{
1123
+ border-color:rgb(var(--color-surface-500))
1124
+ }
1125
+
1126
+ .checkbox:focus,
1127
+ .radio:focus {
1128
+ --tw-border-opacity: 1;
1129
+ border-color: rgb(var(--color-primary-500) / var(--tw-border-opacity));
1130
+ }
1131
+
1132
+ .checkbox:checked,
1133
+ .radio:checked {
1134
+ --tw-bg-opacity: 1;
1135
+ background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity));
1136
+ }
1137
+
1138
+ .checkbox:checked:hover,
1139
+ .radio:checked:hover {
1140
+ --tw-bg-opacity: 1;
1141
+ background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity));
1142
+ }
1143
+
1144
+ .checkbox:checked:focus,
1145
+ .radio:checked:focus {
1146
+ --tw-bg-opacity: 1;
1147
+ background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity));
1148
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1149
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1150
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1151
+ }
1152
+
1153
+ .radio {
1154
+ border-radius:var(--theme-rounded-base);
1155
+ }
1156
+
956
1157
  /* === Specialized === */
957
1158
 
958
1159
  /* File Inputs */
959
1160
 
1161
+ .input[type="file"] {
1162
+ padding:.25rem;
1163
+ }
1164
+
960
1165
  /* Color Picker */
961
1166
 
962
1167
  /* https://stackoverflow.com/questions/11167281/webkit-css-to-control-the-box-around-the-color-in-an-inputtype-color */
963
1168
 
1169
+ .input[type="color"] {
1170
+ height: 2.5rem;
1171
+ width: 2.5rem;
1172
+ border-style: none;
1173
+ cursor:pointer;
1174
+ overflow:hidden;
1175
+ border-radius:var(--theme-rounded-base);
1176
+ -webkit-appearance: none;
1177
+ /* WebKit Only */
1178
+ }
1179
+
1180
+ .input[type="color"]::-webkit-color-swatch-wrapper {
1181
+ padding: 0px;
1182
+ }
1183
+
1184
+ .input[type="color"]::-webkit-color-swatch {
1185
+ border-style: none;
1186
+ }
1187
+
1188
+ .input[type="color"]:hover::-webkit-color-swatch {
1189
+ --tw-brightness: brightness(1.1);
1190
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
1191
+ }
1192
+
1193
+ .input[type="color"]::-moz-color-swatch {
1194
+ border-style: none;
1195
+ }
1196
+
964
1197
  /* === States === */
965
1198
 
1199
+ .input:disabled,
1200
+ .textarea:disabled,
1201
+ .select:disabled {
1202
+ cursor: not-allowed !important;
1203
+ opacity: 0.5 !important;
1204
+ }
1205
+
1206
+ .input:disabled:hover,
1207
+ .textarea:disabled:hover,
1208
+ .select:disabled:hover {
1209
+ --tw-brightness: brightness(1) !important;
1210
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
1211
+ }
1212
+
1213
+ .input[readonly],
1214
+ .textarea[readonly],
1215
+ .select[readonly] {
1216
+ cursor: not-allowed !important;
1217
+ border-width: 0px !important;
1218
+ }
1219
+
1220
+ .input[readonly]:hover,
1221
+ .textarea[readonly]:hover,
1222
+ .select[readonly]:hover {
1223
+ --tw-brightness: brightness(1) !important;
1224
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
1225
+ }
1226
+
966
1227
  /* === Input Groups === */
967
1228
 
968
1229
  /* === Variants === */
@@ -1081,6 +1342,23 @@ progress::-webkit-progress-value {
1081
1342
  color: rgb(96 165 250 / var(--tw-text-opacity));
1082
1343
  }
1083
1344
 
1345
+ .variant-filled {
1346
+ background-color: rgb(var(--color-surface-900));
1347
+ }
1348
+
1349
+ .dark .variant-filled {
1350
+ background-color: rgb(var(--color-surface-50));
1351
+ }
1352
+
1353
+ .variant-filled {
1354
+ color: rgb(var(--color-surface-50));
1355
+ }
1356
+
1357
+ .dark .variant-filled {
1358
+ background-color:rgb(var(--color-surface-50));
1359
+ color:rgb(var(--color-surface-900));
1360
+ }
1361
+
1084
1362
  .variant-soft,.variant-soft-surface {
1085
1363
  background-color: rgb(var(--color-surface-400) / 0.2);
1086
1364
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
@@ -1111,6 +1389,7 @@ progress::-webkit-progress-value {
1111
1389
 
1112
1390
  .badge {
1113
1391
  white-space: nowrap;
1392
+ display:inline-flex;
1114
1393
  align-items:center;
1115
1394
  justify-content:center;
1116
1395
  font-weight: 600;
@@ -1118,8 +1397,8 @@ progress::-webkit-progress-value {
1118
1397
  line-height:1rem;
1119
1398
  padding-left: 0.5rem;
1120
1399
  padding-right: 0.5rem;
1121
- padding-top: 0.25rem;
1122
- padding-bottom: 0.25rem;
1400
+ padding-top:.25rem;
1401
+ padding-bottom:.25rem;
1123
1402
  border-radius:var(--theme-rounded-base);
1124
1403
  }
1125
1404
 
@@ -1141,13 +1420,14 @@ progress::-webkit-progress-value {
1141
1420
  padding-right: 1.25rem;
1142
1421
  padding-top: 9px;
1143
1422
  padding-bottom: 9px;
1144
- font-size: 1rem;
1145
- line-height: 1.5rem;
1146
1423
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1147
1424
  transition-duration: 150ms;
1425
+ display:inline-flex;
1148
1426
  align-items:center;
1149
1427
  justify-content:center;
1150
1428
  text-align:center;
1429
+ font-size:1rem;
1430
+ line-height:1.5rem;
1151
1431
  transition-property:all;
1152
1432
  transition-timing-function:cubic-bezier(.4,0,.2,1);
1153
1433
  transition-duration:.15s;
@@ -1164,8 +1444,8 @@ progress::-webkit-progress-value {
1164
1444
  padding-right: 1.25rem;
1165
1445
  padding-top: 9px;
1166
1446
  padding-bottom: 9px;
1167
- font-size: 1rem;
1168
- line-height: 1.5rem;
1447
+ font-size:1rem;
1448
+ line-height:1.5rem;
1169
1449
  /* Core */
1170
1450
  white-space: nowrap;
1171
1451
  text-align:center;
@@ -1182,6 +1462,7 @@ progress::-webkit-progress-value {
1182
1462
  }
1183
1463
 
1184
1464
  .btn{
1465
+ display:inline-flex;
1185
1466
  align-items:center;
1186
1467
  justify-content:center
1187
1468
  /* States */
@@ -1237,13 +1518,14 @@ progress::-webkit-progress-value {
1237
1518
  padding-right: 1.25rem;
1238
1519
  padding-top: 9px;
1239
1520
  padding-bottom: 9px;
1240
- font-size: 1rem;
1241
- line-height: 1.5rem;
1242
1521
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1243
1522
  transition-duration: 150ms;
1523
+ display:inline-flex;
1244
1524
  align-items:center;
1245
1525
  justify-content:center;
1246
1526
  text-align:center;
1527
+ font-size:1rem;
1528
+ line-height:1.5rem;
1247
1529
  transition-property:all;
1248
1530
  transition-timing-function:cubic-bezier(.4,0,.2,1);
1249
1531
  transition-duration:.15s;
@@ -1260,8 +1542,8 @@ progress::-webkit-progress-value {
1260
1542
  padding-right: 1.25rem;
1261
1543
  padding-top: 9px;
1262
1544
  padding-bottom: 9px;
1263
- font-size: 1rem;
1264
- line-height: 1.5rem;
1545
+ font-size:1rem;
1546
+ line-height:1.5rem;
1265
1547
  /* Core */
1266
1548
  white-space: nowrap;
1267
1549
  text-align:center;
@@ -1278,6 +1560,7 @@ progress::-webkit-progress-value {
1278
1560
  }
1279
1561
 
1280
1562
  .btn-icon{
1563
+ display:inline-flex;
1281
1564
  align-items:center;
1282
1565
  justify-content:center
1283
1566
  /* States */
@@ -1324,13 +1607,14 @@ progress::-webkit-progress-value {
1324
1607
  padding-right: 1.25rem;
1325
1608
  padding-top: 9px;
1326
1609
  padding-bottom: 9px;
1327
- font-size: 1rem;
1328
- line-height: 1.5rem;
1329
1610
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1330
1611
  transition-duration: 150ms;
1612
+ display:inline-flex;
1331
1613
  align-items:center;
1332
1614
  justify-content:center;
1333
1615
  text-align:center;
1616
+ font-size:1rem;
1617
+ line-height:1.5rem;
1334
1618
  transition-property:all;
1335
1619
  transition-timing-function:cubic-bezier(.4,0,.2,1);
1336
1620
  transition-duration:.15s;
@@ -1347,8 +1631,8 @@ progress::-webkit-progress-value {
1347
1631
  padding-right: 1.25rem;
1348
1632
  padding-top: 9px;
1349
1633
  padding-bottom: 9px;
1350
- font-size: 1rem;
1351
- line-height: 1.5rem;
1634
+ font-size:1rem;
1635
+ line-height:1.5rem;
1352
1636
  /* Core */
1353
1637
  white-space: nowrap;
1354
1638
  text-align:center;
@@ -1365,6 +1649,7 @@ progress::-webkit-progress-value {
1365
1649
  }
1366
1650
 
1367
1651
  .btn-icon{
1652
+ display:inline-flex;
1368
1653
  align-items:center;
1369
1654
  justify-content:center
1370
1655
  /* States */
@@ -1395,9 +1680,9 @@ progress::-webkit-progress-value {
1395
1680
 
1396
1681
  .btn-icon {
1397
1682
  width: 43px;
1398
- font-size: 1rem;
1399
- line-height: 1.5rem;
1400
1683
  aspect-ratio:1 / 1;
1684
+ font-size:1rem;
1685
+ line-height:1.5rem;
1401
1686
  border-radius: 9999px;
1402
1687
  }
1403
1688
 
@@ -1424,6 +1709,7 @@ progress::-webkit-progress-value {
1424
1709
  }
1425
1710
 
1426
1711
  .chip{
1712
+ display:inline-flex;
1427
1713
  align-items:center;
1428
1714
  justify-content:center
1429
1715
  }
@@ -1464,6 +1750,202 @@ progress::-webkit-progress-value {
1464
1750
  margin-bottom:calc(.25rem * var(--tw-space-y-reverse))
1465
1751
  }
1466
1752
 
1753
+ .input,.textarea,.select,.input-group {
1754
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
1755
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
1756
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
1757
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1758
+ transition-duration: 200ms;
1759
+ width:100%;
1760
+ transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;
1761
+ transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
1762
+ transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;
1763
+ transition-timing-function:cubic-bezier(.4,0,.2,1);
1764
+ transition-duration:.15s;
1765
+ background-color: rgb(var(--color-surface-200));
1766
+ }
1767
+
1768
+ .dark .input,.dark .textarea,.dark .select,.dark .input-group {
1769
+ background-color: rgb(var(--color-surface-700));
1770
+ }
1771
+
1772
+ .input,.textarea,.select,.input-group{
1773
+ background-color:rgb(var(--color-surface-200))
1774
+ }
1775
+
1776
+ .dark .input,.dark .textarea,.dark .select,.dark .input-group{
1777
+ background-color:rgb(var(--color-surface-700))
1778
+ }
1779
+
1780
+ .input:hover,.textarea:hover,.select:hover,.input-group:hover {
1781
+ --tw-brightness: brightness(1.05);
1782
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
1783
+ }
1784
+
1785
+ .input:focus,.textarea:focus,.select:focus,.input-group:focus {
1786
+ --tw-brightness: brightness(1.05);
1787
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
1788
+ }
1789
+
1790
+ .input,.textarea,.select,.input-group {
1791
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
1792
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
1793
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
1794
+ border-width: var(--theme-border-base);
1795
+ border-color: rgb(var(--color-surface-400));
1796
+ }
1797
+
1798
+ .dark .input,.dark .textarea,.dark .select,.dark .input-group {
1799
+ border-color: rgb(var(--color-surface-500));
1800
+ }
1801
+
1802
+ .input,.textarea,.select,.input-group{
1803
+ border-width:var(--theme-border-base);
1804
+ border-color:rgb(var(--color-surface-400))
1805
+ }
1806
+
1807
+ .dark .input,.dark .textarea,.dark .select,.dark .input-group{
1808
+ border-color:rgb(var(--color-surface-500))
1809
+ }
1810
+
1811
+ .input:focus-within,.textarea:focus-within,.select:focus-within,.input-group:focus-within {
1812
+ --tw-border-opacity: 1;
1813
+ border-color: rgb(var(--color-primary-500) / var(--tw-border-opacity));
1814
+ }
1815
+
1816
+ .input,.input-group {
1817
+ border-radius:var(--theme-rounded-base);
1818
+ }
1819
+
1820
+ .checkbox,.radio {
1821
+ height: 1.25rem;
1822
+ width: 1.25rem;
1823
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
1824
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
1825
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
1826
+ cursor:pointer;
1827
+ border-radius:.25rem;
1828
+ background-color: rgb(var(--color-surface-200));
1829
+ }
1830
+
1831
+ .dark .checkbox,.dark .radio {
1832
+ background-color: rgb(var(--color-surface-700));
1833
+ }
1834
+
1835
+ .checkbox,.radio{
1836
+ background-color:rgb(var(--color-surface-200))
1837
+ }
1838
+
1839
+ .dark .checkbox,.dark .radio{
1840
+ background-color:rgb(var(--color-surface-700))
1841
+ }
1842
+
1843
+ .checkbox:hover,.radio:hover {
1844
+ --tw-brightness: brightness(1.05);
1845
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
1846
+ }
1847
+
1848
+ .checkbox:focus,.radio:focus {
1849
+ --tw-brightness: brightness(1.05);
1850
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
1851
+ }
1852
+
1853
+ .checkbox,.radio {
1854
+ border-width: var(--theme-border-base);
1855
+ border-color: rgb(var(--color-surface-400));
1856
+ }
1857
+
1858
+ .dark .checkbox,.dark .radio {
1859
+ border-color: rgb(var(--color-surface-500));
1860
+ }
1861
+
1862
+ .checkbox,.radio{
1863
+ border-width:var(--theme-border-base);
1864
+ border-color:rgb(var(--color-surface-400))
1865
+ }
1866
+
1867
+ .dark .checkbox,.dark .radio{
1868
+ border-color:rgb(var(--color-surface-500))
1869
+ }
1870
+
1871
+ .checkbox:focus,.radio:focus {
1872
+ --tw-border-opacity: 1;
1873
+ border-color: rgb(var(--color-primary-500) / var(--tw-border-opacity));
1874
+ }
1875
+
1876
+ .checkbox:checked,.radio:checked {
1877
+ --tw-bg-opacity: 1;
1878
+ background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity));
1879
+ }
1880
+
1881
+ .checkbox:checked:hover,.radio:checked:hover {
1882
+ --tw-bg-opacity: 1;
1883
+ background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity));
1884
+ }
1885
+
1886
+ .checkbox:checked:focus,.radio:checked:focus {
1887
+ --tw-bg-opacity: 1;
1888
+ background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity));
1889
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1890
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1891
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1892
+ }
1893
+
1894
+ .radio {
1895
+ border-radius:var(--theme-rounded-base);
1896
+ }
1897
+
1898
+ .input[type='file'] {
1899
+ padding:.25rem;
1900
+ }
1901
+
1902
+ .input[type='color'] {
1903
+ height: 2.5rem;
1904
+ width: 2.5rem;
1905
+ border-style: none;
1906
+ cursor:pointer;
1907
+ overflow:hidden;
1908
+ border-radius:var(--theme-rounded-base);
1909
+ -webkit-appearance: none ;
1910
+ }
1911
+
1912
+ .input[type='color']::-webkit-color-swatch-wrapper {
1913
+ padding: 0px;
1914
+ }
1915
+
1916
+ .input[type='color']::-webkit-color-swatch {
1917
+ border-style: none;
1918
+ }
1919
+
1920
+ .input[type='color']:hover::-webkit-color-swatch {
1921
+ --tw-brightness: brightness(1.1);
1922
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
1923
+ }
1924
+
1925
+ .input[type='color']::-moz-color-swatch {
1926
+ border-style: none;
1927
+ }
1928
+
1929
+ .input:disabled,.textarea:disabled,.select:disabled {
1930
+ cursor: not-allowed !important;
1931
+ opacity: 0.5 !important;
1932
+ }
1933
+
1934
+ .input:disabled:hover,.textarea:disabled:hover,.select:disabled:hover {
1935
+ --tw-brightness: brightness(1) !important;
1936
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
1937
+ }
1938
+
1939
+ .input[readonly],.textarea[readonly],.select[readonly] {
1940
+ cursor: not-allowed !important;
1941
+ border-width: 0px !important;
1942
+ }
1943
+
1944
+ .input[readonly]:hover,.textarea[readonly]:hover,.select[readonly]:hover {
1945
+ --tw-brightness: brightness(1) !important;
1946
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
1947
+ }
1948
+
1467
1949
  .list,.list-dl,.list-nav ul {
1468
1950
  list-style-type: none;
1469
1951
  }
@@ -1495,10 +1977,10 @@ progress::-webkit-progress-value {
1495
1977
  white-space: nowrap;
1496
1978
  display:flex;
1497
1979
  align-items:center;
1498
- padding-left: 1rem;
1499
- padding-right: 1rem;
1500
1980
  padding-top: 0.5rem;
1501
1981
  padding-bottom: 0.5rem;
1982
+ padding-left:1rem;
1983
+ padding-right:1rem;
1502
1984
  }
1503
1985
 
1504
1986
  .list-nav a:hover,.list-nav button:hover,.list-option:hover {
@@ -1525,6 +2007,7 @@ progress::-webkit-progress-value {
1525
2007
 
1526
2008
  .badge {
1527
2009
  white-space: nowrap;
2010
+ display:inline-flex;
1528
2011
  align-items:center;
1529
2012
  justify-content:center;
1530
2013
  /* Text */
@@ -1534,8 +2017,8 @@ progress::-webkit-progress-value {
1534
2017
  /* Padding */
1535
2018
  padding-left: 0.5rem;
1536
2019
  padding-right: 0.5rem;
1537
- padding-top: 0.25rem;
1538
- padding-bottom: 0.25rem;
2020
+ padding-top:.25rem;
2021
+ padding-bottom:.25rem;
1539
2022
  /* Theme: Rounded */
1540
2023
  border-radius:var(--theme-rounded-base);
1541
2024
  }
@@ -1586,13 +2069,14 @@ button:disabled:active {
1586
2069
  padding-right: 1.25rem;
1587
2070
  padding-top: 9px;
1588
2071
  padding-bottom: 9px;
1589
- font-size: 1rem;
1590
- line-height: 1.5rem;
1591
2072
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1592
2073
  transition-duration: 150ms;
2074
+ display:inline-flex;
1593
2075
  align-items:center;
1594
2076
  justify-content:center;
1595
2077
  text-align:center;
2078
+ font-size:1rem;
2079
+ line-height:1.5rem;
1596
2080
  transition-property:all;
1597
2081
  transition-timing-function:cubic-bezier(.4,0,.2,1);
1598
2082
  transition-duration:.15s;
@@ -1609,8 +2093,8 @@ button:disabled:active {
1609
2093
  padding-right: 1.25rem;
1610
2094
  padding-top: 9px;
1611
2095
  padding-bottom: 9px;
1612
- font-size: 1rem;
1613
- line-height: 1.5rem;
2096
+ font-size:1rem;
2097
+ line-height:1.5rem;
1614
2098
  /* Core */
1615
2099
  white-space: nowrap;
1616
2100
  text-align:center;
@@ -1627,6 +2111,7 @@ button:disabled:active {
1627
2111
  }
1628
2112
 
1629
2113
  .btn{
2114
+ display:inline-flex;
1630
2115
  align-items:center;
1631
2116
  justify-content:center
1632
2117
  /* States */
@@ -1691,13 +2176,14 @@ button:disabled:active {
1691
2176
  padding-right: 1.25rem;
1692
2177
  padding-top: 9px;
1693
2178
  padding-bottom: 9px;
1694
- font-size: 1rem;
1695
- line-height: 1.5rem;
1696
2179
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1697
2180
  transition-duration: 150ms;
2181
+ display:inline-flex;
1698
2182
  align-items:center;
1699
2183
  justify-content:center;
1700
2184
  text-align:center;
2185
+ font-size:1rem;
2186
+ line-height:1.5rem;
1701
2187
  transition-property:all;
1702
2188
  transition-timing-function:cubic-bezier(.4,0,.2,1);
1703
2189
  transition-duration:.15s;
@@ -1714,8 +2200,8 @@ button:disabled:active {
1714
2200
  padding-right: 1.25rem;
1715
2201
  padding-top: 9px;
1716
2202
  padding-bottom: 9px;
1717
- font-size: 1rem;
1718
- line-height: 1.5rem;
2203
+ font-size:1rem;
2204
+ line-height:1.5rem;
1719
2205
  /* Core */
1720
2206
  white-space: nowrap;
1721
2207
  text-align:center;
@@ -1732,6 +2218,7 @@ button:disabled:active {
1732
2218
  }
1733
2219
 
1734
2220
  .btn-icon{
2221
+ display:inline-flex;
1735
2222
  align-items:center;
1736
2223
  justify-content:center
1737
2224
  /* States */
@@ -1778,13 +2265,14 @@ button:disabled:active {
1778
2265
  padding-right: 1.25rem;
1779
2266
  padding-top: 9px;
1780
2267
  padding-bottom: 9px;
1781
- font-size: 1rem;
1782
- line-height: 1.5rem;
1783
2268
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1784
2269
  transition-duration: 150ms;
2270
+ display:inline-flex;
1785
2271
  align-items:center;
1786
2272
  justify-content:center;
1787
2273
  text-align:center;
2274
+ font-size:1rem;
2275
+ line-height:1.5rem;
1788
2276
  transition-property:all;
1789
2277
  transition-timing-function:cubic-bezier(.4,0,.2,1);
1790
2278
  transition-duration:.15s;
@@ -1801,8 +2289,8 @@ button:disabled:active {
1801
2289
  padding-right: 1.25rem;
1802
2290
  padding-top: 9px;
1803
2291
  padding-bottom: 9px;
1804
- font-size: 1rem;
1805
- line-height: 1.5rem;
2292
+ font-size:1rem;
2293
+ line-height:1.5rem;
1806
2294
  /* Core */
1807
2295
  white-space: nowrap;
1808
2296
  text-align:center;
@@ -1819,6 +2307,7 @@ button:disabled:active {
1819
2307
  }
1820
2308
 
1821
2309
  .btn-icon{
2310
+ display:inline-flex;
1822
2311
  align-items:center;
1823
2312
  justify-content:center
1824
2313
  /* States */
@@ -1850,9 +2339,9 @@ button:disabled:active {
1850
2339
  .btn-icon {
1851
2340
  /* Size (match base) */
1852
2341
  width: 43px;
1853
- font-size: 1rem;
1854
- line-height: 1.5rem;
1855
2342
  aspect-ratio:1 / 1;
2343
+ font-size:1rem;
2344
+ line-height:1.5rem;
1856
2345
  /* Rounded */
1857
2346
  border-radius: 9999px;
1858
2347
  }
@@ -1896,13 +2385,14 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
1896
2385
  padding-right: 1.25rem;
1897
2386
  padding-top: 9px;
1898
2387
  padding-bottom: 9px;
1899
- font-size: 1rem;
1900
- line-height: 1.5rem;
1901
2388
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1902
2389
  transition-duration: 150ms;
2390
+ display:inline-flex;
1903
2391
  align-items:center;
1904
2392
  justify-content:center;
1905
2393
  text-align:center;
2394
+ font-size:1rem;
2395
+ line-height:1.5rem;
1906
2396
  transition-property:all;
1907
2397
  transition-timing-function:cubic-bezier(.4,0,.2,1);
1908
2398
  transition-duration:.15s;
@@ -1919,8 +2409,8 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
1919
2409
  padding-right: 1.25rem;
1920
2410
  padding-top: 9px;
1921
2411
  padding-bottom: 9px;
1922
- font-size: 1rem;
1923
- line-height: 1.5rem;
2412
+ font-size:1rem;
2413
+ line-height:1.5rem;
1924
2414
  /* Core */
1925
2415
  white-space: nowrap;
1926
2416
  text-align:center;
@@ -1937,6 +2427,7 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button > :not([hidde
1937
2427
  }
1938
2428
 
1939
2429
  input[type="file"]:not(.file-dropzone-input)::file-selector-button{
2430
+ display:inline-flex;
1940
2431
  align-items:center;
1941
2432
  justify-content:center
1942
2433
  /* States */
@@ -1989,13 +2480,14 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
1989
2480
  padding-right: 1.25rem;
1990
2481
  padding-top: 9px;
1991
2482
  padding-bottom: 9px;
1992
- font-size: 1rem;
1993
- line-height: 1.5rem;
1994
2483
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1995
2484
  transition-duration: 150ms;
2485
+ display:inline-flex;
1996
2486
  align-items:center;
1997
2487
  justify-content:center;
1998
2488
  text-align:center;
2489
+ font-size:1rem;
2490
+ line-height:1.5rem;
1999
2491
  transition-property:all;
2000
2492
  transition-timing-function:cubic-bezier(.4,0,.2,1);
2001
2493
  transition-duration:.15s;
@@ -2012,8 +2504,8 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
2012
2504
  padding-right: 1.25rem;
2013
2505
  padding-top: 9px;
2014
2506
  padding-bottom: 9px;
2015
- font-size: 1rem;
2016
- line-height: 1.5rem;
2507
+ font-size:1rem;
2508
+ line-height:1.5rem;
2017
2509
  /* Core */
2018
2510
  white-space: nowrap;
2019
2511
  text-align:center;
@@ -2030,6 +2522,7 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button > :not([hidde
2030
2522
  }
2031
2523
 
2032
2524
  input[type="file"]:not(.file-dropzone-input)::file-selector-button{
2525
+ display:inline-flex;
2033
2526
  align-items:center;
2034
2527
  justify-content:center
2035
2528
  /* States */
@@ -2122,6 +2615,7 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
2122
2615
  }
2123
2616
 
2124
2617
  .chip{
2618
+ display:inline-flex;
2125
2619
  align-items:center;
2126
2620
  justify-content:center
2127
2621
  /* States */
@@ -2204,10 +2698,10 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
2204
2698
  display:flex;
2205
2699
  align-items:center;
2206
2700
  /* Padding */
2207
- padding-left: 1rem;
2208
- padding-right: 1rem;
2209
2701
  padding-top: 0.5rem;
2210
2702
  padding-bottom: 0.5rem;
2703
+ padding-left:1rem;
2704
+ padding-right:1rem;
2211
2705
  /* Hover */
2212
2706
  }
2213
2707
 
@@ -2275,6 +2769,23 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
2275
2769
 
2276
2770
  /* Filled */
2277
2771
 
2772
+ .variant-filled {
2773
+ background-color: rgb(var(--color-surface-900));
2774
+ }
2775
+
2776
+ .dark .variant-filled {
2777
+ background-color: rgb(var(--color-surface-50));
2778
+ }
2779
+
2780
+ .variant-filled {
2781
+ color: rgb(var(--color-surface-50));
2782
+ }
2783
+
2784
+ .dark .variant-filled {
2785
+ background-color:rgb(var(--color-surface-50));
2786
+ color:rgb(var(--color-surface-900));
2787
+ }
2788
+
2278
2789
  /* Ringed */
2279
2790
 
2280
2791
  /* Ghost */
@@ -2346,14 +2857,26 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
2346
2857
  display: flex;
2347
2858
  }
2348
2859
 
2860
+ .inline-flex {
2861
+ display: inline-flex;
2862
+ }
2863
+
2349
2864
  .grid {
2350
2865
  display: grid;
2351
2866
  }
2352
2867
 
2868
+ .hidden {
2869
+ display: none;
2870
+ }
2871
+
2353
2872
  .aspect-square {
2354
2873
  aspect-ratio: 1 / 1;
2355
2874
  }
2356
2875
 
2876
+ .h-0 {
2877
+ height: 0px;
2878
+ }
2879
+
2357
2880
  .h-6 {
2358
2881
  height: 1.5rem;
2359
2882
  }
@@ -2370,6 +2893,10 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
2370
2893
  max-height: 16rem;
2371
2894
  }
2372
2895
 
2896
+ .w-0 {
2897
+ width: 0px;
2898
+ }
2899
+
2373
2900
  .w-12 {
2374
2901
  width: 3rem;
2375
2902
  }
@@ -2465,6 +2992,12 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
2465
2992
  gap: 1rem;
2466
2993
  }
2467
2994
 
2995
+ .space-x-1 > :not([hidden]) ~ :not([hidden]) {
2996
+ --tw-space-x-reverse: 0;
2997
+ margin-right: calc(0.25rem * var(--tw-space-x-reverse));
2998
+ margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
2999
+ }
3000
+
2468
3001
  .space-y-1 > :not([hidden]) ~ :not([hidden]) {
2469
3002
  --tw-space-y-reverse: 0;
2470
3003
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
@@ -2535,6 +3068,10 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
2535
3068
  background-color: rgb(var(--color-surface-900) / var(--tw-bg-opacity));
2536
3069
  }
2537
3070
 
3071
+ .p-1 {
3072
+ padding: 0.25rem;
3073
+ }
3074
+
2538
3075
  .p-2 {
2539
3076
  padding: 0.5rem;
2540
3077
  }
@@ -2543,6 +3080,16 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
2543
3080
  padding: 1rem;
2544
3081
  }
2545
3082
 
3083
+ .px-4 {
3084
+ padding-left: 1rem;
3085
+ padding-right: 1rem;
3086
+ }
3087
+
3088
+ .py-1 {
3089
+ padding-top: 0.25rem;
3090
+ padding-bottom: 0.25rem;
3091
+ }
3092
+
2546
3093
  .pb-0 {
2547
3094
  padding-bottom: 0px;
2548
3095
  }
@@ -2559,6 +3106,11 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
2559
3106
  text-align: center;
2560
3107
  }
2561
3108
 
3109
+ .text-base {
3110
+ font-size: 1rem;
3111
+ line-height: 1.5rem;
3112
+ }
3113
+
2562
3114
  .text-sm {
2563
3115
  font-size: 0.875rem;
2564
3116
  line-height: 1.25rem;
@@ -2952,6 +3504,10 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
2952
3504
  background-color: rgb(var(--color-surface-800));
2953
3505
  }
2954
3506
 
3507
+ .bg-surface-200-700-token {
3508
+ background-color: rgb(var(--color-surface-200));
3509
+ }
3510
+
2955
3511
  .dark .bg-surface-200-700-token {
2956
3512
  background-color: rgb(var(--color-surface-700));
2957
3513
  }
@@ -3244,6 +3800,10 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
3244
3800
  border-color: rgb(var(--color-surface-600));
3245
3801
  }
3246
3802
 
3803
+ .border-surface-400-500-token {
3804
+ border-color: rgb(var(--color-surface-400));
3805
+ }
3806
+
3247
3807
  .dark .border-surface-400-500-token {
3248
3808
  border-color: rgb(var(--color-surface-500));
3249
3809
  }
@@ -3868,6 +4428,38 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
3868
4428
  --tw-ring-color: rgb(var(--color-surface-400) / 1);
3869
4429
  }
3870
4430
 
4431
+ .hover\:variant-soft:hover {
4432
+ background-color: rgb(var(--color-surface-400) / 0.2);
4433
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
4434
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
4435
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
4436
+ color: rgb(var(--color-surface-700));
4437
+ }
4438
+
4439
+ .dark .hover\:variant-soft:hover {
4440
+ color:rgb(var(--color-surface-200));
4441
+ }
4442
+
4443
+ :is(.dark .hover\:variant-soft:hover) {
4444
+ background-color: rgb(var(--color-surface-500) / 0.2);
4445
+ }
4446
+
4447
+ .hover\:variant-soft:hover {
4448
+ background-color: rgb(var(--color-surface-400) / 0.2);
4449
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
4450
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
4451
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
4452
+ color: rgb(var(--color-surface-700));
4453
+ }
4454
+
4455
+ .dark .hover\:variant-soft:hover {
4456
+ color:rgb(var(--color-surface-200));
4457
+ }
4458
+
4459
+ :is(.dark .hover\:variant-soft:hover) {
4460
+ background-color: rgb(var(--color-surface-500) / 0.2);
4461
+ }
4462
+
3871
4463
  .hover\:cursor-pointer:hover {
3872
4464
  cursor: pointer;
3873
4465
  }
@@ -3968,7 +4560,7 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
3968
4560
  top:0px;
3969
4561
  /* max-w-max */
3970
4562
  /* Set hidden on page load */
3971
- display: none;
4563
+ display:none;
3972
4564
  /* Transitions */
3973
4565
  transition-property: opacity;
3974
4566
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -4466,14 +5058,26 @@ img,video{
4466
5058
  display:flex
4467
5059
  }
4468
5060
 
5061
+ .inline-flex{
5062
+ display:inline-flex
5063
+ }
5064
+
4469
5065
  .grid{
4470
5066
  display:grid
4471
5067
  }
4472
5068
 
5069
+ .hidden{
5070
+ display:none
5071
+ }
5072
+
4473
5073
  .aspect-square{
4474
5074
  aspect-ratio:1 / 1
4475
5075
  }
4476
5076
 
5077
+ .h-0{
5078
+ height:0px
5079
+ }
5080
+
4477
5081
  .h-6{
4478
5082
  height:1.5rem
4479
5083
  }
@@ -4490,6 +5094,10 @@ img,video{
4490
5094
  max-height:16rem
4491
5095
  }
4492
5096
 
5097
+ .w-0{
5098
+ width:0px
5099
+ }
5100
+
4493
5101
  .w-12{
4494
5102
  width:3rem
4495
5103
  }
@@ -4585,6 +5193,12 @@ img,video{
4585
5193
  gap:1rem
4586
5194
  }
4587
5195
 
5196
+ .space-x-1>:not([hidden])~:not([hidden]){
5197
+ --tw-space-x-reverse: 0;
5198
+ margin-right:calc(.25rem * var(--tw-space-x-reverse));
5199
+ margin-left:calc(.25rem * calc(1 - var(--tw-space-x-reverse)))
5200
+ }
5201
+
4588
5202
  .space-y-1>:not([hidden])~:not([hidden]){
4589
5203
  --tw-space-y-reverse: 0;
4590
5204
  margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));
@@ -4655,6 +5269,10 @@ img,video{
4655
5269
  background-color:rgb(var(--color-surface-900) / var(--tw-bg-opacity))
4656
5270
  }
4657
5271
 
5272
+ .p-1{
5273
+ padding:.25rem
5274
+ }
5275
+
4658
5276
  .p-2{
4659
5277
  padding:.5rem
4660
5278
  }
@@ -4663,6 +5281,16 @@ img,video{
4663
5281
  padding:1rem
4664
5282
  }
4665
5283
 
5284
+ .px-4{
5285
+ padding-left:1rem;
5286
+ padding-right:1rem
5287
+ }
5288
+
5289
+ .py-1{
5290
+ padding-top:.25rem;
5291
+ padding-bottom:.25rem
5292
+ }
5293
+
4666
5294
  .pb-0{
4667
5295
  padding-bottom:0
4668
5296
  }
@@ -4679,6 +5307,11 @@ img,video{
4679
5307
  text-align:center
4680
5308
  }
4681
5309
 
5310
+ .text-base{
5311
+ font-size:1rem;
5312
+ line-height:1.5rem
5313
+ }
5314
+
4682
5315
  .text-sm{
4683
5316
  font-size:.875rem;
4684
5317
  line-height:1.25rem
@@ -5072,6 +5705,10 @@ img,video{
5072
5705
  background-color:rgb(var(--color-surface-800))
5073
5706
  }
5074
5707
 
5708
+ .bg-surface-200-700-token{
5709
+ background-color:rgb(var(--color-surface-200))
5710
+ }
5711
+
5075
5712
  .dark .bg-surface-200-700-token{
5076
5713
  background-color:rgb(var(--color-surface-700))
5077
5714
  }
@@ -5364,6 +6001,10 @@ img,video{
5364
6001
  border-color:rgb(var(--color-surface-600))
5365
6002
  }
5366
6003
 
6004
+ .border-surface-400-500-token{
6005
+ border-color:rgb(var(--color-surface-400))
6006
+ }
6007
+
5367
6008
  .dark .border-surface-400-500-token{
5368
6009
  border-color:rgb(var(--color-surface-500))
5369
6010
  }