@aivenio/aquarium 1.4.0 → 1.5.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 (39) hide show
  1. package/dist/_variables.scss +1 -1
  2. package/dist/_variables_timescale.scss +1 -1
  3. package/dist/atoms.cjs +410 -162
  4. package/dist/atoms.mjs +409 -162
  5. package/dist/src/common/Card/Card.d.ts +35 -0
  6. package/dist/src/common/Card/Card.js +50 -0
  7. package/dist/src/common/Checkbox/Checkbox.js +12 -6
  8. package/dist/src/common/RadioButton/RadioButton.js +2 -2
  9. package/dist/src/common/Select/Select.js +4 -4
  10. package/dist/src/common/Switch/Switch.js +7 -10
  11. package/dist/src/common/index.d.ts +1 -0
  12. package/dist/src/common/index.js +2 -1
  13. package/dist/src/components/Avatar/Avatar.js +2 -2
  14. package/dist/src/components/Banner/Banner.js +2 -2
  15. package/dist/src/components/Card/Card.d.ts +8 -47
  16. package/dist/src/components/Card/Card.js +15 -27
  17. package/dist/src/components/Card/Compact.d.ts +36 -0
  18. package/dist/src/components/Card/Compact.js +33 -0
  19. package/dist/src/components/Card/types.d.ts +44 -0
  20. package/dist/src/components/Card/types.js +2 -0
  21. package/dist/src/components/Carousel/Carousel.js +4 -2
  22. package/dist/src/components/Chip/Chip.d.ts +1 -1
  23. package/dist/src/components/Chip/Chip.js +2 -2
  24. package/dist/src/components/Combobox/Combobox.js +4 -6
  25. package/dist/src/components/MultiSelect/MultiSelect.d.ts +1 -1
  26. package/dist/src/components/MultiSelect/MultiSelect.js +13 -8
  27. package/dist/src/components/Select/Select.js +2 -2
  28. package/dist/src/components/Skeleton/Skeleton.js +3 -2
  29. package/dist/src/components/Tabs/Tabs.js +54 -18
  30. package/dist/src/components/Timeline/Timeline.js +3 -3
  31. package/dist/src/components/Typography/Typography.d.ts +5 -3
  32. package/dist/src/components/Typography/Typography.js +1 -1
  33. package/dist/styles.css +75 -73
  34. package/dist/styles_timescaledb.css +75 -73
  35. package/dist/system.cjs +942 -764
  36. package/dist/system.mjs +909 -731
  37. package/dist/tsconfig.module.tsbuildinfo +1 -1
  38. package/dist/types/tailwindGenerated.d.ts +1 -1
  39. package/package.json +5 -4
@@ -697,6 +697,15 @@ input[type='number'].no-arrows {
697
697
  top: 0 !important;
698
698
  bottom: 0 !important;
699
699
  }
700
+ .top-0 {
701
+ top: 0 !important;
702
+ }
703
+ .left-0 {
704
+ left: 0 !important;
705
+ }
706
+ .right-0 {
707
+ right: 0 !important;
708
+ }
700
709
  .top-\[20px\] {
701
710
  top: 20px !important;
702
711
  }
@@ -715,21 +724,12 @@ input[type='number'].no-arrows {
715
724
  .left-2 {
716
725
  left: 4px !important;
717
726
  }
718
- .top-0 {
719
- top: 0 !important;
720
- }
721
727
  .left-1\/2 {
722
728
  left: 50% !important;
723
729
  }
724
730
  .bottom-0 {
725
731
  bottom: 0 !important;
726
732
  }
727
- .right-0 {
728
- right: 0 !important;
729
- }
730
- .left-0 {
731
- left: 0 !important;
732
- }
733
733
  .z-modal {
734
734
  z-index: 100 !important;
735
735
  }
@@ -772,6 +772,10 @@ input[type='number'].no-arrows {
772
772
  .m-\[1px\] {
773
773
  margin: 1px !important;
774
774
  }
775
+ .-mx-4 {
776
+ margin-left: -12px !important;
777
+ margin-right: -12px !important;
778
+ }
775
779
  .mx-7 {
776
780
  margin-left: 32px !important;
777
781
  margin-right: 32px !important;
@@ -806,6 +810,9 @@ input[type='number'].no-arrows {
806
810
  .mt-5 {
807
811
  margin-top: 16px !important;
808
812
  }
813
+ .-mt-4 {
814
+ margin-top: -12px !important;
815
+ }
809
816
  .mt-1 {
810
817
  margin-top: 2px !important;
811
818
  }
@@ -884,8 +891,11 @@ input[type='number'].no-arrows {
884
891
  .h-\[20px\] {
885
892
  height: 20px !important;
886
893
  }
887
- .h-0 {
888
- height: 0 !important;
894
+ .h-\[174px\] {
895
+ height: 174px !important;
896
+ }
897
+ .h-\[225px\] {
898
+ height: 225px !important;
889
899
  }
890
900
  .h-5 {
891
901
  height: 16px !important;
@@ -923,12 +933,6 @@ input[type='number'].no-arrows {
923
933
  .h-\[6px\] {
924
934
  height: 6px !important;
925
935
  }
926
- .h-\[174px\] {
927
- height: 174px !important;
928
- }
929
- .h-\[225px\] {
930
- height: 225px !important;
931
- }
932
936
  .h-1px {
933
937
  height: 1px !important;
934
938
  }
@@ -959,8 +963,8 @@ input[type='number'].no-arrows {
959
963
  .w-full {
960
964
  width: 100% !important;
961
965
  }
962
- .w-0 {
963
- width: 0 !important;
966
+ .w-\[280px\] {
967
+ width: 280px !important;
964
968
  }
965
969
  .w-5 {
966
970
  width: 16px !important;
@@ -983,9 +987,6 @@ input[type='number'].no-arrows {
983
987
  .w-\[6px\] {
984
988
  width: 6px !important;
985
989
  }
986
- .w-\[280px\] {
987
- width: 280px !important;
988
- }
989
990
  .w-1px {
990
991
  width: 1px !important;
991
992
  }
@@ -1001,15 +1002,15 @@ input[type='number'].no-arrows {
1001
1002
  .w-\[56px\] {
1002
1003
  width: 56px !important;
1003
1004
  }
1005
+ .min-w-\[280px\] {
1006
+ min-width: 280px !important;
1007
+ }
1004
1008
  .min-w-full {
1005
1009
  min-width: 100% !important;
1006
1010
  }
1007
1011
  .min-w-0 {
1008
1012
  min-width: 0px !important;
1009
1013
  }
1010
- .min-w-\[280px\] {
1011
- min-width: 280px !important;
1012
- }
1013
1014
  .max-w-\[600px\] {
1014
1015
  max-width: 600px !important;
1015
1016
  }
@@ -1178,6 +1179,10 @@ input[type='number'].no-arrows {
1178
1179
  grid-gap: 32px !important;
1179
1180
  gap: 32px !important;
1180
1181
  }
1182
+ .gap-5 {
1183
+ grid-gap: 16px !important;
1184
+ gap: 16px !important;
1185
+ }
1181
1186
  .gap-3 {
1182
1187
  grid-gap: 8px !important;
1183
1188
  gap: 8px !important;
@@ -1186,10 +1191,6 @@ input[type='number'].no-arrows {
1186
1191
  grid-gap: 4px !important;
1187
1192
  gap: 4px !important;
1188
1193
  }
1189
- .gap-5 {
1190
- grid-gap: 16px !important;
1191
- gap: 16px !important;
1192
- }
1193
1194
  .gap-8 {
1194
1195
  grid-gap: 40px !important;
1195
1196
  gap: 40px !important;
@@ -1252,9 +1253,15 @@ input[type='number'].no-arrows {
1252
1253
  .rounded {
1253
1254
  border-radius: 4px !important;
1254
1255
  }
1256
+ .rounded-\[2px\] {
1257
+ border-radius: 2px !important;
1258
+ }
1255
1259
  .border {
1256
1260
  border-width: 1px !important;
1257
1261
  }
1262
+ .border-\[1px\] {
1263
+ border-width: 1px !important;
1264
+ }
1258
1265
  .border-0 {
1259
1266
  border-width: 0px !important;
1260
1267
  }
@@ -1295,6 +1302,9 @@ input[type='number'].no-arrows {
1295
1302
  --tw-border-opacity: 1 !important;
1296
1303
  border-color: rgb(237 237 240 / var(--tw-border-opacity)) !important;
1297
1304
  }
1305
+ .border-transparent {
1306
+ border-color: transparent !important;
1307
+ }
1298
1308
  .border-grey-10 {
1299
1309
  --tw-border-opacity: 1 !important;
1300
1310
  border-color: rgb(225 225 227 / var(--tw-border-opacity)) !important;
@@ -1322,9 +1332,6 @@ input[type='number'].no-arrows {
1322
1332
  .border-current {
1323
1333
  border-color: currentColor !important;
1324
1334
  }
1325
- .border-transparent {
1326
- border-color: transparent !important;
1327
- }
1328
1335
  .border-grey-100 {
1329
1336
  --tw-border-opacity: 1 !important;
1330
1337
  border-color: rgb(25 25 29 / var(--tw-border-opacity)) !important;
@@ -1361,14 +1368,14 @@ input[type='number'].no-arrows {
1361
1368
  --tw-bg-opacity: 1 !important;
1362
1369
  background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
1363
1370
  }
1364
- .bg-grey-5 {
1365
- --tw-bg-opacity: 1 !important;
1366
- background-color: rgb(237 237 240 / var(--tw-bg-opacity)) !important;
1367
- }
1368
1371
  .bg-navyBlue-100 {
1369
1372
  --tw-bg-opacity: 1 !important;
1370
1373
  background-color: rgb(48 55 94 / var(--tw-bg-opacity)) !important;
1371
1374
  }
1375
+ .bg-grey-5 {
1376
+ --tw-bg-opacity: 1 !important;
1377
+ background-color: rgb(237 237 240 / var(--tw-bg-opacity)) !important;
1378
+ }
1372
1379
  .bg-info-50 {
1373
1380
  --tw-bg-opacity: 1 !important;
1374
1381
  background-color: rgb(40 180 244 / var(--tw-bg-opacity)) !important;
@@ -1456,12 +1463,15 @@ input[type='number'].no-arrows {
1456
1463
  .p-6 {
1457
1464
  padding: 24px !important;
1458
1465
  }
1459
- .p-\[3px\] {
1460
- padding: 3px !important;
1466
+ .p-\[2px\] {
1467
+ padding: 2px !important;
1461
1468
  }
1462
1469
  .p-3 {
1463
1470
  padding: 8px !important;
1464
1471
  }
1472
+ .p-\[3px\] {
1473
+ padding: 3px !important;
1474
+ }
1465
1475
  .p-2 {
1466
1476
  padding: 4px !important;
1467
1477
  }
@@ -1549,6 +1559,9 @@ input[type='number'].no-arrows {
1549
1559
  padding-left: 0 !important;
1550
1560
  padding-right: 0 !important;
1551
1561
  }
1562
+ .pt-3 {
1563
+ padding-top: 8px !important;
1564
+ }
1552
1565
  .pb-6 {
1553
1566
  padding-bottom: 24px !important;
1554
1567
  }
@@ -1957,12 +1970,12 @@ input[type='number'].no-arrows {
1957
1970
  .underline-offset-2 {
1958
1971
  text-underline-offset: 2px !important;
1959
1972
  }
1960
- .opacity-0 {
1961
- opacity: 0 !important;
1962
- }
1963
1973
  .opacity-70 {
1964
1974
  opacity: 0.7 !important;
1965
1975
  }
1976
+ .opacity-40 {
1977
+ opacity: 0.4 !important;
1978
+ }
1966
1979
  .shadow-16dp {
1967
1980
  --tw-shadow: 0px 16px 32px rgba(90, 91, 106, 0.12), 0px 8px 16px rgba(58, 58, 68, 0.12) !important;
1968
1981
  --tw-shadow-colored: 0px 16px 32px var(--tw-shadow-color), 0px 8px 16px var(--tw-shadow-color) !important;
@@ -2064,6 +2077,9 @@ input[type='number'].no-arrows {
2064
2077
  .checked\:bg-opacity-40:checked {
2065
2078
  --tw-bg-opacity: 0.4 !important;
2066
2079
  }
2080
+ .checked\:opacity-40:checked {
2081
+ opacity: 0.4 !important;
2082
+ }
2067
2083
  .checked\:shadow-whiteInset:checked {
2068
2084
  --tw-shadow: inset 0 0 0 3px rgba(255,255,255,1) !important;
2069
2085
  --tw-shadow-colored: inset 0 0 0 3px var(--tw-shadow-color) !important;
@@ -2085,6 +2101,10 @@ input[type='number'].no-arrows {
2085
2101
  --tw-bg-opacity: 1 !important;
2086
2102
  background-color: rgb(247 247 250 / var(--tw-bg-opacity)) !important;
2087
2103
  }
2104
+ .hover\:bg-grey-30:hover {
2105
+ --tw-bg-opacity: 1 !important;
2106
+ background-color: rgb(180 180 187 / var(--tw-bg-opacity)) !important;
2107
+ }
2088
2108
  .hover\:bg-primary-70:hover {
2089
2109
  --tw-bg-opacity: 1 !important;
2090
2110
  background-color: rgb(3 153 227 / var(--tw-bg-opacity)) !important;
@@ -2117,6 +2137,13 @@ input[type='number'].no-arrows {
2117
2137
  --tw-ring-opacity: 1 !important;
2118
2138
  --tw-ring-color: rgb(120 120 133 / var(--tw-ring-opacity)) !important;
2119
2139
  }
2140
+ .hover\:checked\:bg-navyBlue-100:checked:hover {
2141
+ --tw-bg-opacity: 1 !important;
2142
+ background-color: rgb(48 55 94 / var(--tw-bg-opacity)) !important;
2143
+ }
2144
+ .focus\:border:focus {
2145
+ border-width: 1px !important;
2146
+ }
2120
2147
  .focus\:border-info-70:focus {
2121
2148
  --tw-border-opacity: 1 !important;
2122
2149
  border-color: rgb(3 153 227 / var(--tw-border-opacity)) !important;
@@ -2249,14 +2276,14 @@ input[type='number'].no-arrows {
2249
2276
  --tw-ring-opacity: 1 !important;
2250
2277
  --tw-ring-color: rgb(3 153 227 / var(--tw-ring-opacity)) !important;
2251
2278
  }
2252
- .active\:bg-primary-90:active {
2253
- --tw-bg-opacity: 1 !important;
2254
- background-color: rgb(1 116 186 / var(--tw-bg-opacity)) !important;
2255
- }
2256
2279
  .active\:bg-grey-5:active {
2257
2280
  --tw-bg-opacity: 1 !important;
2258
2281
  background-color: rgb(237 237 240 / var(--tw-bg-opacity)) !important;
2259
2282
  }
2283
+ .active\:bg-primary-90:active {
2284
+ --tw-bg-opacity: 1 !important;
2285
+ background-color: rgb(1 116 186 / var(--tw-bg-opacity)) !important;
2286
+ }
2260
2287
  .active\:bg-transparent:active {
2261
2288
  background-color: transparent !important;
2262
2289
  }
@@ -2342,10 +2369,6 @@ input[type='number'].no-arrows {
2342
2369
  --tw-bg-opacity: 1 !important;
2343
2370
  background-color: rgb(247 247 250 / var(--tw-bg-opacity)) !important;
2344
2371
  }
2345
- .group:hover .group-hover\:bg-grey-30 {
2346
- --tw-bg-opacity: 1 !important;
2347
- background-color: rgb(180 180 187 / var(--tw-bg-opacity)) !important;
2348
- }
2349
2372
  .peer\/switch:checked~.peer-checked\/switch\:left-1 {
2350
2373
  left: 2px !important;
2351
2374
  }
@@ -2357,14 +2380,6 @@ input[type='number'].no-arrows {
2357
2380
  --tw-border-opacity: 1 !important;
2358
2381
  border-color: rgb(48 55 94 / var(--tw-border-opacity)) !important;
2359
2382
  }
2360
- .peer:checked~.peer-checked\:bg-navyBlue-100 {
2361
- --tw-bg-opacity: 1 !important;
2362
- background-color: rgb(48 55 94 / var(--tw-bg-opacity)) !important;
2363
- }
2364
- .peer\/switch:checked~.peer-checked\/switch\:bg-navyBlue-100 {
2365
- --tw-bg-opacity: 1 !important;
2366
- background-color: rgb(48 55 94 / var(--tw-bg-opacity)) !important;
2367
- }
2368
2383
  .peer:checked~.peer-checked\:text-white {
2369
2384
  --tw-text-opacity: 1 !important;
2370
2385
  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
@@ -2373,27 +2388,14 @@ input[type='number'].no-arrows {
2373
2388
  --tw-text-opacity: 1 !important;
2374
2389
  color: rgb(180 180 187 / var(--tw-text-opacity)) !important;
2375
2390
  }
2376
- .peer\/switch:checked~.peer-checked\/switch\:opacity-40 {
2377
- opacity: 0.4 !important;
2378
- }
2379
2391
  .peer:hover~.peer-hover\:border-grey-50 {
2380
2392
  --tw-border-opacity: 1 !important;
2381
2393
  border-color: rgb(120 120 133 / var(--tw-border-opacity)) !important;
2382
2394
  }
2383
- .peer\/switch:focus~.peer-focus\/switch\:border {
2384
- border-width: 1px !important;
2385
- }
2386
2395
  .peer:focus~.peer-focus\:border-info-70 {
2387
2396
  --tw-border-opacity: 1 !important;
2388
2397
  border-color: rgb(3 153 227 / var(--tw-border-opacity)) !important;
2389
2398
  }
2390
- .peer:disabled~.peer-disabled\:cursor-not-allowed {
2391
- cursor: not-allowed !important;
2392
- }
2393
- .peer:disabled~.peer-disabled\:border-grey-5 {
2394
- --tw-border-opacity: 1 !important;
2395
- border-color: rgb(237 237 240 / var(--tw-border-opacity)) !important;
2396
- }
2397
2399
  .peer\/switch:disabled~.peer-disabled\/switch\:bg-grey-0 {
2398
2400
  --tw-bg-opacity: 1 !important;
2399
2401
  background-color: rgb(247 247 250 / var(--tw-bg-opacity)) !important;
@@ -2408,15 +2410,15 @@ input[type='number'].no-arrows {
2408
2410
  .children\:last\:border-b-0:last-child>* {
2409
2411
  border-bottom-width: 0px !important;
2410
2412
  }
2413
+ .\[\&\>path\]\:stroke-transparent>path {
2414
+ stroke: transparent !important;
2415
+ }
2411
2416
  .peer:checked~.peer-checked\:\[\&\>path\]\:stroke-white>path {
2412
2417
  stroke: white !important;
2413
2418
  }
2414
2419
  .peer:checked~.peer-checked\:\[\&\>path\]\:stroke-grey-30>path {
2415
2420
  stroke: #b4b4bb !important;
2416
2421
  }
2417
- .peer:checked~.peer-checked\:\[\&\>path\]\:stroke-2>path {
2418
- stroke-width: 2 !important;
2419
- }
2420
2422
  .\[\&\>\*\:not\(\:first-child\)\]\:-ml-3>*:not(:first-child) {
2421
2423
  margin-left: -8px !important;
2422
2424
  }