@aivenio/aquarium 1.2.1 → 1.3.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,11 @@ 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-2 {
   left: 4px !important;
@@ -787,21 +876,30 @@ 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-3 {
+  height: 8px !important;
+}
+.h-4 {
+  height: 12px !important;
+}
 .h-\[50px\] {
   height: 50px !important;
 }
-.h-5 {
-  height: 16px !important;
-}
 .h-full {
   height: 100% !important;
 }
@@ -826,9 +924,6 @@ input[type='number'].no-arrows {
 .h-\[56px\] {
   height: 56px !important;
 }
-.h-4 {
-  height: 12px !important;
-}
 .h-\[25px\] {
   height: 25px !important;
 }
@@ -838,18 +933,30 @@ 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-3 {
+  width: 8px !important;
+}
+.w-\[34px\] {
+  width: 34px !important;
+}
+.w-4 {
+  width: 12px !important;
+}
 .w-1 {
   width: 2px !important;
 }
@@ -874,18 +981,15 @@ input[type='number'].no-arrows {
 .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;
 }
@@ -927,10 +1031,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;
@@ -1157,10 +1257,6 @@ 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;
@@ -1215,14 +1311,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 +1335,10 @@ 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-30 {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(180 180 187 / var(--tw-bg-opacity)) !important;
@@ -1261,10 +1361,6 @@ 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;
@@ -1291,9 +1387,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 +1403,9 @@ input[type='number'].no-arrows {
 .p-6 {
   padding: 24px !important;
 }
+.p-\[3px\] {
+  padding: 3px !important;
+}
 .p-3 {
   padding: 8px !important;
 }
@@ -1425,15 +1521,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 +1878,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 +1889,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,12 +1896,12 @@ 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-70 {
+  opacity: 0.7 !important;
+}
 .opacity-40 {
   opacity: 0.4 !important;
 }
@@ -1822,18 +1911,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;
@@ -2182,9 +2271,73 @@ 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\/radio:checked~.peer-checked\/radio\: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\/radio:checked~.peer-checked\/radio\:opacity-40 {
+  opacity: 0.4 !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\/radio:hover~.peer-hover\/radio\: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\/radio:focus~.peer-focus\/radio\: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,15 +2348,21 @@ 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;
 }
+.peer\/radio:checked~.peer-checked\/radio\:\[\&\>\*\]\:block>* {
+  display: block !important;
+}
+.peer\/radio:checked~.peer-checked\/radio\:\[\&\>\*\]\:opacity-40>* {
+  opacity: 0.4 !important;
+}
 .\[\&\>\*\:not\(\:first-child\)\]\:-ml-3>*:not(:first-child) {
   margin-left: -8px !important;
 }