@aivenio/aquarium 1.2.1 → 1.4.0

package/dist/styles.css

@@ -1,6 +1,6 @@
 /* https://tailwindcss.com/docs/using-with-preprocessors */
 /* @import statement must come first and tailwind base must be the first one imported*/
-/* ! tailwindcss v3.1.4 | MIT License | https://tailwindcss.com */
+/* ! tailwindcss v3.2.4 | MIT License | https://tailwindcss.com */
 /*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@@ -19,6 +19,7 @@
 2. Prevent adjustments of font size after orientation changes in iOS.
 3. Use a more readable tab size.
 4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
 */
 html {
   line-height: 1.5; /* 1 */
@@ -27,6 +28,7 @@ html {
   -o-tab-size: 4;
      tab-size: 4; /* 3 */
   font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
+  font-feature-settings: normal; /* 5 */
 }
 /*
 1. Remove the margin in all browsers.
@@ -257,6 +259,10 @@ img,video {
   max-width: 100%;
   height: auto;
 }
+/* Make elements with the HTML hidden attribute stay hidden by default */
+[hidden] {
+  display: none;
+}
 *,::before,::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -410,6 +416,86 @@ input[type='number'].no-arrows {
     max-width: 1536px !important;
   }
 }
+.typography-large-heading {
+  font-family: Inter;
+  font-size: 32px;
+  font-weight: 700;
+  font-style: normal;
+  line-height: 1.375;
+  text-transform: none;
+}
+.typography-heading {
+  font-family: Inter;
+  font-size: 24px;
+  font-weight: 700;
+  font-style: normal;
+  line-height: 1.375;
+  text-transform: none;
+}
+.typography-subheading {
+  font-family: Inter;
+  font-size: 20px;
+  font-weight: 600;
+  font-style: normal;
+  line-height: 1.375;
+  text-transform: none;
+}
+.typography-large-strong {
+  font-family: Inter;
+  font-size: 20px;
+  font-weight: 600;
+  font-style: normal;
+  line-height: 1.58;
+  text-transform: none;
+}
+.typography-large {
+  font-family: Inter;
+  font-size: 20px;
+  font-weight: 500;
+  font-style: normal;
+  line-height: 1.58;
+  text-transform: none;
+}
+.typography-default-strong {
+  font-family: Inter;
+  font-size: 16px;
+  font-weight: 600;
+  font-style: normal;
+  line-height: 1.5;
+  text-transform: none;
+}
+.typography-default {
+  font-family: Inter;
+  font-size: 16px;
+  font-weight: 400;
+  font-style: normal;
+  line-height: 1.5;
+  text-transform: none;
+}
+.typography-small-strong {
+  font-family: Inter;
+  font-size: 14px;
+  font-weight: 600;
+  font-style: normal;
+  line-height: 1.42;
+  text-transform: none;
+}
+.typography-small {
+  font-family: Inter;
+  font-size: 14px;
+  font-weight: 400;
+  font-style: normal;
+  line-height: 1.42;
+  text-transform: none;
+}
+.typography-caption {
+  font-family: Inter;
+  font-size: 12px;
+  font-weight: 400;
+  font-style: normal;
+  line-height: 1.26;
+  text-transform: none;
+}
 .typography-caption-small {
   font-family: Inter;
   font-size: 10px;
@@ -612,8 +698,20 @@ input[type='number'].no-arrows {
   top: 0 !important;
   bottom: 0 !important;
 }
-.top-2 {
-  top: 4px !important;
+.top-\[20px\] {
+  top: 20px !important;
+}
+.right-\[28px\] {
+  right: 28px !important;
+}
+.-left-1\/2 {
+  left: -50% !important;
+}
+.top-\[3px\] {
+  top: 3px !important;
+}
+.top-\[14px\] {
+  top: 14px !important;
 }
 .left-2 {
   left: 4px !important;
@@ -639,15 +737,15 @@ input[type='number'].no-arrows {
 .-z-10 {
   z-index: -10 !important;
 }
+.z-10 {
+  z-index: 10 !important;
+}
 .z-40 {
   z-index: 40 !important;
 }
 .z-0 {
   z-index: 0 !important;
 }
-.z-10 {
-  z-index: 10 !important;
-}
 .z-20 {
   z-index: 20 !important;
 }
@@ -787,30 +885,45 @@ input[type='number'].no-arrows {
 .h-\[20px\] {
   height: 20px !important;
 }
-.h-3 {
-  height: 8px !important;
+.h-0 {
+  height: 0 !important;
+}
+.h-5 {
+  height: 16px !important;
 }
 .h-\[1px\] {
   height: 1px !important;
 }
+.h-\[120px\] {
+  height: 120px !important;
+}
 .h-2 {
   height: 4px !important;
 }
+.h-\[2px\] {
+  height: 2px !important;
+}
+.h-\[3px\] {
+  height: 3px !important;
+}
+.h-\[32px\] {
+  height: 32px !important;
+}
+.h-\[8px\] {
+  height: 8px !important;
+}
+.h-4 {
+  height: 12px !important;
+}
 .h-\[50px\] {
   height: 50px !important;
 }
-.h-5 {
-  height: 16px !important;
-}
 .h-full {
   height: 100% !important;
 }
 .h-\[6px\] {
   height: 6px !important;
 }
-.h-\[32px\] {
-  height: 32px !important;
-}
 .h-\[174px\] {
   height: 174px !important;
 }
@@ -820,15 +933,15 @@ input[type='number'].no-arrows {
 .h-1px {
   height: 1px !important;
 }
+.h-3 {
+  height: 8px !important;
+}
 .h-6 {
   height: 24px !important;
 }
 .h-\[56px\] {
   height: 56px !important;
 }
-.h-4 {
-  height: 12px !important;
-}
 .h-\[25px\] {
   height: 25px !important;
 }
@@ -838,27 +951,39 @@ input[type='number'].no-arrows {
 .min-h-full {
   min-height: 100% !important;
 }
+.min-h-\[120px\] {
+  min-height: 120px !important;
+}
 .min-h-\[50px\] {
   min-height: 50px !important;
 }
 .w-full {
   width: 100% !important;
 }
-.w-3 {
-  width: 8px !important;
+.w-0 {
+  width: 0 !important;
 }
 .w-5 {
   width: 16px !important;
 }
+.w-\[32px\] {
+  width: 32px !important;
+}
+.w-\[8px\] {
+  width: 8px !important;
+}
+.w-\[34px\] {
+  width: 34px !important;
+}
+.w-4 {
+  width: 12px !important;
+}
 .w-1 {
   width: 2px !important;
 }
 .w-\[6px\] {
   width: 6px !important;
 }
-.w-\[32px\] {
-  width: 32px !important;
-}
 .w-\[280px\] {
   width: 280px !important;
 }
@@ -868,30 +993,45 @@ input[type='number'].no-arrows {
 .w-2 {
   width: 4px !important;
 }
+.w-3 {
+  width: 8px !important;
+}
 .w-6 {
   width: 24px !important;
 }
 .w-\[56px\] {
   width: 56px !important;
 }
-.w-\[34px\] {
-  width: 34px !important;
-}
-.w-4 {
-  width: 12px !important;
-}
 .min-w-full {
   min-width: 100% !important;
 }
 .min-w-0 {
   min-width: 0px !important;
 }
+.min-w-\[280px\] {
+  min-width: 280px !important;
+}
 .max-w-\[600px\] {
   max-width: 600px !important;
 }
 .max-w-\[940px\] {
   max-width: 940px !important;
 }
+.max-w-screen-xl {
+  max-width: 1536px !important;
+}
+.max-w-screen-lg {
+  max-width: 1312px !important;
+}
+.max-w-screen-md {
+  max-width: 1056px !important;
+}
+.max-w-screen-sm {
+  max-width: 672px !important;
+}
+.max-w-screen-xs {
+  max-width: 320px !important;
+}
 .max-w-\[70px\] {
   max-width: 70px !important;
 }
@@ -927,10 +1067,6 @@ input[type='number'].no-arrows {
   --tw-border-spacing-y: 0 !important;
   border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y) !important;
 }
-.translate-x-5 {
-  --tw-translate-x: 16px !important;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
-}
 .rotate-45 {
   --tw-rotate: 45deg !important;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
@@ -1123,6 +1259,9 @@ input[type='number'].no-arrows {
 .border-0 {
   border-width: 0px !important;
 }
+.border-2 {
+  border-width: 2px !important;
+}
 .border-b-\[1px\] {
   border-bottom-width: 1px !important;
 }
@@ -1157,18 +1296,26 @@ input[type='number'].no-arrows {
   --tw-border-opacity: 1 !important;
   border-color: rgb(237 237 240 / var(--tw-border-opacity)) !important;
 }
-.border-navyBlue-100 {
-  --tw-border-opacity: 1 !important;
-  border-color: rgb(48 55 94 / var(--tw-border-opacity)) !important;
-}
 .border-grey-10 {
   --tw-border-opacity: 1 !important;
   border-color: rgb(225 225 227 / var(--tw-border-opacity)) !important;
 }
+.border-navyBlue-100 {
+  --tw-border-opacity: 1 !important;
+  border-color: rgb(48 55 94 / var(--tw-border-opacity)) !important;
+}
 .border-grey-50 {
   --tw-border-opacity: 1 !important;
   border-color: rgb(120 120 133 / var(--tw-border-opacity)) !important;
 }
+.border-grey-90 {
+  --tw-border-opacity: 1 !important;
+  border-color: rgb(41 42 49 / var(--tw-border-opacity)) !important;
+}
+.border-success-70 {
+  --tw-border-opacity: 1 !important;
+  border-color: rgb(0 179 0 / var(--tw-border-opacity)) !important;
+}
 .border-grey-40 {
   --tw-border-opacity: 1 !important;
   border-color: rgb(150 150 160 / var(--tw-border-opacity)) !important;
@@ -1215,14 +1362,14 @@ input[type='number'].no-arrows {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
 }
-.bg-navyBlue-100 {
-  --tw-bg-opacity: 1 !important;
-  background-color: rgb(48 55 94 / var(--tw-bg-opacity)) !important;
-}
 .bg-grey-5 {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(237 237 240 / var(--tw-bg-opacity)) !important;
 }
+.bg-navyBlue-100 {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(48 55 94 / var(--tw-bg-opacity)) !important;
+}
 .bg-info-50 {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(40 180 244 / var(--tw-bg-opacity)) !important;
@@ -1239,6 +1386,14 @@ input[type='number'].no-arrows {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(216 0 5 / var(--tw-bg-opacity)) !important;
 }
+.bg-grey-20 {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(210 210 214 / var(--tw-bg-opacity)) !important;
+}
+.bg-grey-90 {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(41 42 49 / var(--tw-bg-opacity)) !important;
+}
 .bg-grey-30 {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(180 180 187 / var(--tw-bg-opacity)) !important;
@@ -1261,17 +1416,12 @@ input[type='number'].no-arrows {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(254 242 241 / var(--tw-bg-opacity)) !important;
 }
-.bg-grey-20 {
-  --tw-bg-opacity: 1 !important;
-  background-color: rgb(210 210 214 / var(--tw-bg-opacity)) !important;
-}
 .bg-primary-70 {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(255 53 84 / var(--tw-bg-opacity)) !important;
 }
-.bg-grey-90 {
-  --tw-bg-opacity: 1 !important;
-  background-color: rgb(41 42 49 / var(--tw-bg-opacity)) !important;
+.bg-opacity-40 {
+  --tw-bg-opacity: 0.4 !important;
 }
 .bg-gradient-to-r {
   background-image: linear-gradient(to right, var(--tw-gradient-stops)) !important;
@@ -1291,9 +1441,6 @@ input[type='number'].no-arrows {
 .bg-cover {
   background-size: cover !important;
 }
-.stroke-white {
-  stroke: white !important;
-}
 .stroke-grey-30 {
   stroke: #b4b4bb !important;
 }
@@ -1310,6 +1457,9 @@ input[type='number'].no-arrows {
 .p-6 {
   padding: 24px !important;
 }
+.p-\[3px\] {
+  padding: 3px !important;
+}
 .p-3 {
   padding: 8px !important;
 }
@@ -1368,6 +1518,14 @@ input[type='number'].no-arrows {
   padding-left: 1px !important;
   padding-right: 1px !important;
 }
+.px-\[14px\] {
+  padding-left: 14px !important;
+  padding-right: 14px !important;
+}
+.px-\[20px\] {
+  padding-left: 20px !important;
+  padding-right: 20px !important;
+}
 .px-4 {
   padding-left: 12px !important;
   padding-right: 12px !important;
@@ -1425,15 +1583,9 @@ input[type='number'].no-arrows {
 .text-\[8px\] {
   font-size: 8px !important;
 }
-.font-medium {
-  font-weight: 500 !important;
-}
 .font-normal {
   font-weight: 400 !important;
 }
-.font-semibold {
-  font-weight: 600 !important;
-}
 .uppercase {
   text-transform: uppercase !important;
 }
@@ -1788,6 +1940,9 @@ input[type='number'].no-arrows {
   --tw-text-opacity: 1 !important;
   color: rgb(210 210 214 / var(--tw-text-opacity)) !important;
 }
+.text-transparent {
+  color: transparent !important;
+}
 .text-white {
   --tw-text-opacity: 1 !important;
   color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
@@ -1796,10 +1951,6 @@ input[type='number'].no-arrows {
   -webkit-text-decoration-line: underline !important;
           text-decoration-line: underline !important;
 }
-.overline {
-  -webkit-text-decoration-line: overline !important;
-          text-decoration-line: overline !important;
-}
 .no-underline {
   -webkit-text-decoration-line: none !important;
           text-decoration-line: none !important;
@@ -1807,14 +1958,11 @@ input[type='number'].no-arrows {
 .underline-offset-2 {
   text-underline-offset: 2px !important;
 }
-.opacity-70 {
-  opacity: 0.7 !important;
-}
 .opacity-0 {
   opacity: 0 !important;
 }
-.opacity-40 {
-  opacity: 0.4 !important;
+.opacity-70 {
+  opacity: 0.7 !important;
 }
 .shadow-16dp {
   --tw-shadow: 0px 16px 32px rgba(90, 91, 106, 0.12), 0px 8px 16px rgba(58, 58, 68, 0.12) !important;
@@ -1822,18 +1970,18 @@ input[type='number'].no-arrows {
   box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow) !important;
   box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow) !important;
 }
-.shadow-2dp {
-  --tw-shadow: 0px 2px 4px rgba(90, 91, 106, 0.24), 0px 1px 2px rgba(58, 58, 68, 0.24) !important;
-  --tw-shadow-colored: 0px 2px 4px var(--tw-shadow-color), 0px 1px 2px var(--tw-shadow-color) !important;
-  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow) !important;
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow) !important;
-}
 .shadow-4dp {
   --tw-shadow: 0px 4px 8px rgba(90, 91, 106, 0.20), 0px 2px 4px rgba(58, 58, 68, 0.20) !important;
   --tw-shadow-colored: 0px 4px 8px var(--tw-shadow-color), 0px 2px 4px var(--tw-shadow-color) !important;
   box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow) !important;
   box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow) !important;
 }
+.shadow-2dp {
+  --tw-shadow: 0px 2px 4px rgba(90, 91, 106, 0.24), 0px 1px 2px rgba(58, 58, 68, 0.24) !important;
+  --tw-shadow-colored: 0px 2px 4px var(--tw-shadow-color), 0px 1px 2px var(--tw-shadow-color) !important;
+  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow) !important;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow) !important;
+}
 .outline-none {
   outline: 2px solid transparent !important;
   outline-offset: 2px !important;
@@ -1906,6 +2054,23 @@ input[type='number'].no-arrows {
 .first\:mt-0:first-child {
   margin-top: 0 !important;
 }
+.checked\:border-navyBlue-100:checked {
+  --tw-border-opacity: 1 !important;
+  border-color: rgb(48 55 94 / var(--tw-border-opacity)) !important;
+}
+.checked\:bg-navyBlue-100:checked {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(48 55 94 / var(--tw-bg-opacity)) !important;
+}
+.checked\:bg-opacity-40:checked {
+  --tw-bg-opacity: 0.4 !important;
+}
+.checked\:shadow-whiteInset:checked {
+  --tw-shadow: inset 0 0 0 3px rgba(255,255,255,1) !important;
+  --tw-shadow-colored: inset 0 0 0 3px var(--tw-shadow-color) !important;
+  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow) !important;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow) !important;
+}
 .hover\:cursor-pointer:hover {
   cursor: pointer !important;
 }
@@ -2182,9 +2347,58 @@ input[type='number'].no-arrows {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(180 180 187 / var(--tw-bg-opacity)) !important;
 }
-.peer:focus~.peer-focus\:border {
+.peer\/switch:checked~.peer-checked\/switch\:left-1 {
+  left: 2px !important;
+}
+.peer\/switch:checked~.peer-checked\/switch\:translate-x-5 {
+  --tw-translate-x: 16px !important;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
+}
+.peer:checked~.peer-checked\:border-navyBlue-100 {
+  --tw-border-opacity: 1 !important;
+  border-color: rgb(48 55 94 / var(--tw-border-opacity)) !important;
+}
+.peer:checked~.peer-checked\:bg-navyBlue-100 {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(48 55 94 / var(--tw-bg-opacity)) !important;
+}
+.peer\/switch:checked~.peer-checked\/switch\:bg-navyBlue-100 {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(48 55 94 / var(--tw-bg-opacity)) !important;
+}
+.peer:checked~.peer-checked\:text-white {
+  --tw-text-opacity: 1 !important;
+  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
+}
+.peer:checked~.peer-checked\:text-grey-30 {
+  --tw-text-opacity: 1 !important;
+  color: rgb(180 180 187 / var(--tw-text-opacity)) !important;
+}
+.peer\/switch:checked~.peer-checked\/switch\:opacity-40 {
+  opacity: 0.4 !important;
+}
+.peer:hover~.peer-hover\:border-grey-50 {
+  --tw-border-opacity: 1 !important;
+  border-color: rgb(120 120 133 / var(--tw-border-opacity)) !important;
+}
+.peer\/switch:focus~.peer-focus\/switch\:border {
   border-width: 1px !important;
 }
+.peer:focus~.peer-focus\:border-info-70 {
+  --tw-border-opacity: 1 !important;
+  border-color: rgb(3 153 227 / var(--tw-border-opacity)) !important;
+}
+.peer:disabled~.peer-disabled\:cursor-not-allowed {
+  cursor: not-allowed !important;
+}
+.peer:disabled~.peer-disabled\:border-grey-5 {
+  --tw-border-opacity: 1 !important;
+  border-color: rgb(237 237 240 / var(--tw-border-opacity)) !important;
+}
+.peer\/switch:disabled~.peer-disabled\/switch\:bg-grey-0 {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(247 247 250 / var(--tw-bg-opacity)) !important;
+}
 .children\:inline-block>* {
   display: inline-block !important;
 }
@@ -2195,13 +2409,13 @@ input[type='number'].no-arrows {
 .children\:last\:border-b-0:last-child>* {
   border-bottom-width: 0px !important;
 }
-.\[\&\>path\]\:stroke-white>path {
+.peer:checked~.peer-checked\:\[\&\>path\]\:stroke-white>path {
   stroke: white !important;
 }
-.\[\&\>path\]\:stroke-grey-30>path {
+.peer:checked~.peer-checked\:\[\&\>path\]\:stroke-grey-30>path {
   stroke: #b4b4bb !important;
 }
-.\[\&\>path\]\:stroke-2>path {
+.peer:checked~.peer-checked\:\[\&\>path\]\:stroke-2>path {
   stroke-width: 2 !important;
 }
 .\[\&\>\*\:not\(\:first-child\)\]\:-ml-3>*:not(:first-child) {