@aivenio/aquarium 1.52.1 → 1.53.0

package/dist/styles.css

@@ -466,6 +466,10 @@ img,video {
   --aquarium-box-shadow-4dp: 0px 4px 8px rgba(90, 91, 106, 0.20), 0px 2px 4px rgba(58, 58, 68, 0.20);
   --aquarium-box-shadow-2dp: 0px 2px 4px rgba(90, 91, 106, 0.24), 0px 1px 2px rgba(58, 58, 68, 0.24);
   --aquarium-box-shadow-white-inset: inset 0 0 0 3px rgba(255,255,255,1);
+  --aquarium-box-shadow-card-default: 0px 3px 3px rgba(0, 0, 0, 0.1), 0px -1px 1px rgba(0, 0, 0, 0.05);
+  --aquarium-box-shadow-card-hover: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px rgba(0, 0, 0, 0.05);
+  --aquarium-box-shadow-card-active: 0px 1px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px rgba(0, 0, 0, 0.05);
+  --aquarium-box-shadow-card-checked: 0px -1px 1px 0px rgba(53, 69, 190, 0.05), 0px 3px 3px 0px rgba(53, 69, 190, 0.20);
   --aquarium-screens-default: 0px;
   --aquarium-screens-xs: 320px;
   --aquarium-screens-sm: 672px;
@@ -541,7 +545,7 @@ input[type='number'].no-arrows::-webkit-inner-spin-button,input[type='number'].n
 input[type='number'].no-arrows {
   -moz-appearance: textfield; /* Firefox */
 }
-.recharts-cartesian-axis-tick-value{
+.recharts-cartesian-axis-tick-value,.recharts-label{
   font-family: Inter;
   font-size: 12px;
   font-weight: 400;
@@ -551,6 +555,12 @@ input[type='number'].no-arrows {
   fill: #787885;
   fill: var(--aquarium-colors-grey-50, #787885);
 }
+.recharts-label{
+  stroke: none;
+}
+.recharts-yAxis .recharts-label {
+  text-anchor: middle;
+}
 .recharts-tooltip-wrapper{
   font-family: Inter;
   font-size: 16px;
@@ -1683,6 +1693,10 @@ input[type='number'].no-arrows {
   border-color: #ededf0;
   border-color: var(--aquarium-colors-grey-5, #ededf0);
 }
+.border-primary-80{
+  border-color: #3545be;
+  border-color: var(--aquarium-colors-primary-80, #3545be);
+}
 .border-transparent{
   border-color: transparent;
   border-color: var(--aquarium-colors-transparent, transparent);
@@ -1691,10 +1705,6 @@ input[type='number'].no-arrows {
   border-color: #e1e1e3;
   border-color: var(--aquarium-colors-grey-10, #e1e1e3);
 }
-.border-primary-80{
-  border-color: #3545be;
-  border-color: var(--aquarium-colors-primary-80, #3545be);
-}
 .border-primary-40{
   border-color: #b9c5ef;
   border-color: var(--aquarium-colors-primary-40, #b9c5ef);
@@ -1936,6 +1946,10 @@ input[type='number'].no-arrows {
   padding-left: 60px;
   padding-right: 60px;
 }
+.py-4{
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
 .py-2{
   padding-top: 4px;
   padding-bottom: 4px;
@@ -2004,10 +2018,6 @@ input[type='number'].no-arrows {
   padding-left: 4px;
   padding-right: 4px;
 }
-.py-4{
-  padding-top: 12px;
-  padding-bottom: 12px;
-}
 .px-0{
   padding-left: 0;
   padding-right: 0;
@@ -2442,6 +2452,30 @@ input[type='number'].no-arrows {
 .opacity-40{
   opacity: 0.4;
 }
+.opacity-100{
+  opacity: 1;
+}
+.opacity-0{
+  opacity: 0;
+}
+.shadow-card-default{
+  --tw-shadow: var(--aquarium-box-shadow-card-default, 0px 3px 3px rgba(0, 0, 0, 0.1), 0px -1px 1px rgba(0, 0, 0, 0.05));
+  --tw-shadow-colored: 0px 3px 3px 0px var(--tw-shadow-color);
+  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
+  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);
+}
+.shadow-card-checked{
+  --tw-shadow: var(--aquarium-box-shadow-card-checked, 0px -1px 1px 0px rgba(53, 69, 190, 0.05), 0px 3px 3px 0px rgba(53, 69, 190, 0.20));
+  --tw-shadow-colored: 0px -1px 1px 0px var(--tw-shadow-color);
+  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
+  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);
+}
+.shadow-card-active{
+  --tw-shadow: var(--aquarium-box-shadow-card-active, 0px 1px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px rgba(0, 0, 0, 0.05));
+  --tw-shadow-colored: 0px 1px 3px 0px var(--tw-shadow-color);
+  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
+  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);
+}
 .shadow-16dp{
   --tw-shadow: var(--aquarium-box-shadow-16dp, 0px 16px 32px rgba(90, 91, 106, 0.12), 0px 8px 16px rgba(58, 58, 68, 0.12));
   --tw-shadow-colored: 0px 16px 32px 0px var(--tw-shadow-color);
@@ -2523,12 +2557,20 @@ input[type='number'].no-arrows {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+.transition-opacity{
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .delay-150{
   transition-delay: 150ms;
 }
 .duration-300{
   transition-duration: 300ms;
 }
+.duration-200{
+  transition-duration: 200ms;
+}
 .ease-in-out{
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -2633,6 +2675,10 @@ input[type='number'].no-arrows {
   border-color: #d2d2d6;
   border-color: var(--aquarium-colors-grey-20, #d2d2d6);
 }
+.hover\:bg-primary-5:hover{
+  background-color: #f3f6ff;
+  background-color: var(--aquarium-colors-primary-5, #f3f6ff);
+}
 .hover\:bg-grey-0:hover{
   background-color: #f7f7fa;
   background-color: var(--aquarium-colors-grey-0, #f7f7fa);
@@ -2649,10 +2695,6 @@ input[type='number'].no-arrows {
   background-color: #222f95;
   background-color: var(--aquarium-colors-primary-90, #222f95);
 }
-.hover\:bg-primary-5:hover{
-  background-color: #f3f6ff;
-  background-color: var(--aquarium-colors-primary-5, #f3f6ff);
-}
 .hover\:bg-error-10:hover{
   background-color: #ffcbd2;
   background-color: var(--aquarium-colors-error-10, #ffcbd2);
@@ -2685,6 +2727,12 @@ input[type='number'].no-arrows {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
 }
+.hover\:shadow-card-hover:hover{
+  --tw-shadow: var(--aquarium-box-shadow-card-hover, 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px rgba(0, 0, 0, 0.05));
+  --tw-shadow-colored: 0px 3px 3px 0px var(--tw-shadow-color);
+  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
+  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);
+}
 .hover\:ring-primary-90:hover{
   --tw-ring-color: var(--aquarium-colors-primary-90, #222f95);
 }
@@ -2842,9 +2890,9 @@ input[type='number'].no-arrows {
 .focus-visible\:ring-info-70:focus-visible{
   --tw-ring-color: var(--aquarium-colors-info-70, #0399e3);
 }
-.active\:bg-grey-5:active{
-  background-color: #ededf0;
-  background-color: var(--aquarium-colors-grey-5, #ededf0);
+.active\:bg-white:active{
+  background-color: white;
+  background-color: var(--aquarium-colors-white, white);
 }
 .active\:bg-primary-90:active{
   background-color: #222f95;
@@ -2858,6 +2906,10 @@ input[type='number'].no-arrows {
   background-color: transparent;
   background-color: var(--aquarium-colors-transparent, transparent);
 }
+.active\:bg-grey-5:active{
+  background-color: #ededf0;
+  background-color: var(--aquarium-colors-grey-5, #ededf0);
+}
 .active\:bg-grey-10:active{
   background-color: #e1e1e3;
   background-color: var(--aquarium-colors-grey-10, #e1e1e3);
@@ -2874,6 +2926,12 @@ input[type='number'].no-arrows {
   color: #4a4b57;
   color: var(--aquarium-colors-grey-70, #4a4b57);
 }
+.active\:shadow-card-active:active{
+  --tw-shadow: var(--aquarium-box-shadow-card-active, 0px 1px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px rgba(0, 0, 0, 0.05));
+  --tw-shadow-colored: 0px 1px 3px 0px var(--tw-shadow-color);
+  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
+  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);
+}
 .active\:ring-0:active{
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -3026,3 +3084,7 @@ input[type='number'].no-arrows {
   padding-left: 16px;
   padding-right: 16px;
 }
+.\[\&\>div\:first-child\]\:px-3>div:first-child{
+  padding-left: 8px;
+  padding-right: 8px;
+}