@aivenio/aquarium 1.19.0 → 1.21.0

package/dist/styles.css

@@ -1,19 +1,21 @@
-/* https://tailwindcss.com/docs/using-with-preprocessors */
-/* @import statement must come first and tailwind base must be the first one imported*/
-/* ! tailwindcss v3.2.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)
 */
+
 *,::before,::after {
   box-sizing: border-box; /* 1 */
   border-width: 0; /* 2 */
   border-style: solid; /* 2 */
   border-color: currentColor; /* 2 */
 }
+
 ::before,::after {
   --tw-content: '';
 }
+
 /*
 1. Use a consistent sensible line-height in all browsers.
 2. Prevent adjustments of font size after orientation changes in iOS.
@@ -21,6 +23,7 @@
 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 */
   -webkit-text-size-adjust: 100%; /* 2 */
@@ -30,95 +33,119 @@ html {
   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.
 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
 */
+
 body {
   margin: 0; /* 1 */
   line-height: inherit; /* 2 */
 }
+
 /*
 1. Add the correct height in Firefox.
 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
 3. Ensure horizontal rules are visible by default.
 */
+
 hr {
   height: 0; /* 1 */
   color: inherit; /* 2 */
   border-top-width: 1px; /* 3 */
 }
+
 /*
 Add the correct text decoration in Chrome, Edge, and Safari.
 */
+
 abbr:where([title]) {
   -webkit-text-decoration: underline dotted;
           text-decoration: underline dotted;
 }
+
 /*
 Remove the default font size and weight for headings.
 */
+
 h1,h2,h3,h4,h5,h6 {
   font-size: inherit;
   font-weight: inherit;
 }
+
 /*
 Reset links to optimize for opt-in styling instead of opt-out.
 */
+
 a {
   color: inherit;
   text-decoration: inherit;
 }
+
 /*
 Add the correct font weight in Edge and Safari.
 */
+
 b,strong {
   font-weight: bolder;
 }
+
 /*
 1. Use the user's configured `mono` font family by default.
 2. Correct the odd `em` font sizing in all browsers.
 */
+
 code,kbd,samp,pre {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
   font-size: 1em; /* 2 */
 }
+
 /*
 Add the correct font size in all browsers.
 */
+
 small {
   font-size: 80%;
 }
+
 /*
 Prevent `sub` and `sup` elements from affecting the line height in all browsers.
 */
+
 sub,sup {
   font-size: 75%;
   line-height: 0;
   position: relative;
   vertical-align: baseline;
 }
+
 sub {
   bottom: -0.25em;
 }
+
 sup {
   top: -0.5em;
 }
+
 /*
 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
 3. Remove gaps between table borders by default.
 */
+
 table {
   text-indent: 0; /* 1 */
   border-color: inherit; /* 2 */
   border-collapse: collapse; /* 3 */
 }
+
 /*
 1. Change the font styles in all browsers.
 2. Remove the margin in Firefox and Safari.
 3. Remove default padding in all browsers.
 */
+
 button,input,optgroup,select,textarea {
   font-family: inherit; /* 1 */
   font-size: 100%; /* 1 */
@@ -128,141 +155,180 @@ button,input,optgroup,select,textarea {
   margin: 0; /* 2 */
   padding: 0; /* 3 */
 }
+
 /*
 Remove the inheritance of text transform in Edge and Firefox.
 */
+
 button,select {
   text-transform: none;
 }
+
 /*
 1. Correct the inability to style clickable types in iOS and Safari.
 2. Remove default button styles.
 */
+
 button,[type='button'],[type='reset'],[type='submit'] {
   -webkit-appearance: button; /* 1 */
   background-color: transparent; /* 2 */
   background-image: none; /* 2 */
 }
+
 /*
 Use the modern Firefox focus style for all focusable elements.
 */
+
 :-moz-focusring {
   outline: auto;
 }
+
 /*
 Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
 */
+
 :-moz-ui-invalid {
   box-shadow: none;
 }
+
 /*
 Add the correct vertical alignment in Chrome and Firefox.
 */
+
 progress {
   vertical-align: baseline;
 }
+
 /*
 Correct the cursor style of increment and decrement buttons in Safari.
 */
+
 ::-webkit-inner-spin-button,::-webkit-outer-spin-button {
   height: auto;
 }
+
 /*
 1. Correct the odd appearance in Chrome and Safari.
 2. Correct the outline style in Safari.
 */
+
 [type='search'] {
   -webkit-appearance: textfield; /* 1 */
   outline-offset: -2px; /* 2 */
 }
+
 /*
 Remove the inner padding in Chrome and Safari on macOS.
 */
+
 ::-webkit-search-decoration {
   -webkit-appearance: none;
 }
+
 /*
 1. Correct the inability to style clickable types in iOS and Safari.
 2. Change font properties to `inherit` in Safari.
 */
+
 ::-webkit-file-upload-button {
   -webkit-appearance: button; /* 1 */
   font: inherit; /* 2 */
 }
+
 /*
 Add the correct display in Chrome and Safari.
 */
+
 summary {
   display: list-item;
 }
+
 /*
 Removes the default spacing and border for appropriate elements.
 */
+
 blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre {
   margin: 0;
 }
+
 fieldset {
   margin: 0;
   padding: 0;
 }
+
 legend {
   padding: 0;
 }
+
 ol,ul,menu {
   list-style: none;
   margin: 0;
   padding: 0;
 }
+
 /*
 Prevent resizing textareas horizontally by default.
 */
+
 textarea {
   resize: vertical;
 }
+
 /*
 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
 2. Set the default placeholder color to the user's configured gray 400 color.
 */
+
 input::-moz-placeholder, textarea::-moz-placeholder {
   opacity: 1; /* 1 */
   color: #9ca3af; /* 2 */
 }
+
 input::placeholder,textarea::placeholder {
   opacity: 1; /* 1 */
   color: #9ca3af; /* 2 */
 }
+
 /*
 Set the default cursor for buttons.
 */
+
 button,[role="button"] {
   cursor: pointer;
 }
+
 /*
 Make sure disabled buttons don't get the pointer cursor.
 */
 :disabled {
   cursor: default;
 }
+
 /*
 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
    This can trigger a poorly considered lint error in some tools but is included by design.
 */
+
 img,svg,video,canvas,audio,iframe,embed,object {
   display: block; /* 1 */
   vertical-align: middle; /* 2 */
 }
+
 /*
 Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
 */
+
 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;
@@ -309,6 +375,7 @@ img,video {
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
 }
+
 ::backdrop {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -355,6 +422,182 @@ img,video {
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
 }
+/**
+ * This file is autogenerated. Do not edit directly.
+ */
+:root {
+  --aquarium-border-radius-none: 0px;
+  --aquarium-border-radius-sm: 0.125rem;
+  --aquarium-border-radius-default: 4px;
+  --aquarium-border-radius-md: 0.375rem;
+  --aquarium-border-radius-lg: 0.5rem;
+  --aquarium-border-radius-xl: 0.75rem;
+  --aquarium-border-radius-2xl: 1rem;
+  --aquarium-border-radius-3xl: 1.5rem;
+  --aquarium-border-radius-full: 9999px;
+  --aquarium-colors-error-100: #aa0000;
+  --aquarium-colors-error-90: #b90000;
+  --aquarium-colors-error-80: #c50001;
+  --aquarium-colors-error-70: #d80005;
+  --aquarium-colors-error-60: #e70000;
+  --aquarium-colors-error-50: #e62728;
+  --aquarium-colors-error-40: #e0504f;
+  --aquarium-colors-error-30: #ed7975;
+  --aquarium-colors-error-20: #ffadb3;
+  --aquarium-colors-error-10: #ffcbd2;
+  --aquarium-colors-error-5: #fee8e7;
+  --aquarium-colors-error-0: #fef2f1;
+  --aquarium-colors-warning-100: #fe6d00;
+  --aquarium-colors-warning-90: #ff9003;
+  --aquarium-colors-warning-80: #fd9f00;
+  --aquarium-colors-warning-70: #ffb300;
+  --aquarium-colors-warning-60: #ffc107;
+  --aquarium-colors-warning-50: #fdc926;
+  --aquarium-colors-warning-40: #fdd44d;
+  --aquarium-colors-warning-30: #fddf81;
+  --aquarium-colors-warning-20: #feebb2;
+  --aquarium-colors-warning-10: #fff2cd;
+  --aquarium-colors-warning-5: #fff8ea;
+  --aquarium-colors-warning-0: #fffdf9;
+  --aquarium-colors-success-100: #006f00;
+  --aquarium-colors-success-90: #008e00;
+  --aquarium-colors-success-80: #009f00;
+  --aquarium-colors-success-70: #00b300;
+  --aquarium-colors-success-60: #00c300;
+  --aquarium-colors-success-50: #40ce37;
+  --aquarium-colors-success-40: #60db57;
+  --aquarium-colors-success-30: #89eb80;
+  --aquarium-colors-success-20: #afffa7;
+  --aquarium-colors-success-10: #cbffc9;
+  --aquarium-colors-success-5: #ecf7ed;
+  --aquarium-colors-success-0: #f5faf5;
+  --aquarium-colors-info-100: #02569a;
+  --aquarium-colors-info-90: #0174ba;
+  --aquarium-colors-info-80: #0788d1;
+  --aquarium-colors-info-70: #0399e3;
+  --aquarium-colors-info-60: #02a8f3;
+  --aquarium-colors-info-50: #28b4f4;
+  --aquarium-colors-info-40: #4cc2f7;
+  --aquarium-colors-info-30: #7fd1f7;
+  --aquarium-colors-info-20: #b4e5fb;
+  --aquarium-colors-info-10: #e0f5fe;
+  --aquarium-colors-info-5: #effaff;
+  --aquarium-colors-info-0: #f9fdff;
+  --aquarium-colors-grey-100: #19191d;
+  --aquarium-colors-grey-90: #292a31;
+  --aquarium-colors-grey-80: #3a3a44;
+  --aquarium-colors-grey-70: #4a4b57;
+  --aquarium-colors-grey-60: #5a5b6a;
+  --aquarium-colors-grey-50: #787885;
+  --aquarium-colors-grey-40: #9696a0;
+  --aquarium-colors-grey-30: #b4b4bb;
+  --aquarium-colors-grey-10: #e1e1e3;
+  --aquarium-colors-grey-5: #ededf0;
+  --aquarium-colors-grey-0: #f7f7fa;
+  --aquarium-colors-secondary-100: #e11d16;
+  --aquarium-colors-secondary-90: #eb4610;
+  --aquarium-colors-secondary-80: #f3580d;
+  --aquarium-colors-secondary-70: #f96a02;
+  --aquarium-colors-secondary-60: #ff7700;
+  --aquarium-colors-secondary-50: #fc871a;
+  --aquarium-colors-secondary-40: #fb9a3e;
+  --aquarium-colors-secondary-30: #fab26e;
+  --aquarium-colors-secondary-20: #f8c99c;
+  --aquarium-colors-secondary-10: #fee8d0;
+  --aquarium-colors-secondary-5: #fff3e8;
+  --aquarium-colors-secondary-0: #fffbf8;
+  --aquarium-colors-primary-100: #a70045;
+  --aquarium-colors-primary-90: #c60443;
+  --aquarium-colors-primary-80: #e41a4a;
+  --aquarium-colors-primary-70: #ff3554;
+  --aquarium-colors-primary-60: #ff5275;
+  --aquarium-colors-primary-50: #ff6f94;
+  --aquarium-colors-primary-40: #ff8db0;
+  --aquarium-colors-primary-30: #ffa9c9;
+  --aquarium-colors-primary-20: #ffc4de;
+  --aquarium-colors-primary-10: #ffdeef;
+  --aquarium-colors-primary-5: #ffe8f4;
+  --aquarium-colors-primary-0: #fff9fc;
+  --aquarium-colors-grey-20: #d2d2d6;
+  --aquarium-colors-transparent: transparent;
+  --aquarium-colors-white: white;
+  --aquarium-colors-black: black;
+  --aquarium-colors-current: currentColor;
+  --aquarium-colors-navy-blue-100: #30375E;
+  --aquarium-box-shadow-24dp: 0px 24px 48px rgba(90, 91, 106, 0.08), 0px 12px 24px rgba(58, 58, 68, 0.08);
+  --aquarium-box-shadow-16dp: 0px 16px 32px rgba(90, 91, 106, 0.12), 0px 8px 16px rgba(58, 58, 68, 0.12);
+  --aquarium-box-shadow-8dp: 0px 8px 16px rgba(90, 91, 106, 0.16), 0px 4px 8px rgba(58, 58, 68, 0.16);
+  --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-screens-default: 0px;
+  --aquarium-screens-xs: 320px;
+  --aquarium-screens-sm: 672px;
+  --aquarium-screens-md: 1056px;
+  --aquarium-screens-lg: 1312px;
+  --aquarium-screens-xl: 1536px;
+  --aquarium-border-width-0: 0px;
+  --aquarium-border-width-2: 2px;
+  --aquarium-border-width-4: 4px;
+  --aquarium-border-width-8: 8px;
+  --aquarium-border-width-default: 1px;
+  --aquarium-font-family-sans: 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";
+  --aquarium-font-family-serif: ui-serif,Georgia,Cambria,"Times New Roman",Times,serif;
+  --aquarium-font-family-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
+  --aquarium-font-size-xs: 0.75rem;
+  --aquarium-font-size-xs-line-height: 1rem;
+  --aquarium-font-size-sm: 0.875rem;
+  --aquarium-font-size-sm-line-height: 1.25rem;
+  --aquarium-font-size-base: 1rem;
+  --aquarium-font-size-base-line-height: 1.5rem;
+  --aquarium-font-size-lg: 1.125rem;
+  --aquarium-font-size-lg-line-height: 1.75rem;
+  --aquarium-font-size-xl: 1.25rem;
+  --aquarium-font-size-xl-line-height: 1.75rem;
+  --aquarium-font-size-2xl: 1.5rem;
+  --aquarium-font-size-2xl-line-height: 2rem;
+  --aquarium-font-size-3xl: 1.875rem;
+  --aquarium-font-size-3xl-line-height: 2.25rem;
+  --aquarium-font-size-4xl: 2.25rem;
+  --aquarium-font-size-4xl-line-height: 2.5rem;
+  --aquarium-font-size-5xl: 3rem;
+  --aquarium-font-size-5xl-line-height: 1;
+  --aquarium-font-size-6xl: 3.75rem;
+  --aquarium-font-size-6xl-line-height: 1;
+  --aquarium-font-size-7xl: 4.5rem;
+  --aquarium-font-size-7xl-line-height: 1;
+  --aquarium-font-size-8xl: 6rem;
+  --aquarium-font-size-8xl-line-height: 1;
+  --aquarium-font-size-9xl: 8rem;
+  --aquarium-font-size-9xl-line-height: 1;
+  --aquarium-font-weight-thin: 100;
+  --aquarium-font-weight-extralight: 200;
+  --aquarium-font-weight-light: 300;
+  --aquarium-font-weight-normal: 400;
+  --aquarium-font-weight-medium: 500;
+  --aquarium-font-weight-semibold: 600;
+  --aquarium-font-weight-bold: 700;
+  --aquarium-font-weight-extrabold: 800;
+  --aquarium-font-weight-black: 900;
+  --aquarium-spacing-0: 0;
+  --aquarium-spacing-1: 2px;
+  --aquarium-spacing-2: 4px;
+  --aquarium-spacing-3: 8px;
+  --aquarium-spacing-4: 12px;
+  --aquarium-spacing-5: 16px;
+  --aquarium-spacing-6: 24px;
+  --aquarium-spacing-7: 32px;
+  --aquarium-spacing-8: 40px;
+  --aquarium-spacing-9: 48px;
+  --aquarium-spacing-1px: 1px;
+  --aquarium-spacing-l1: 16px;
+  --aquarium-spacing-l2: 24px;
+  --aquarium-spacing-l3: 32px;
+  --aquarium-spacing-l4: 48px;
+  --aquarium-spacing-l5: 64px;
+  --aquarium-spacing-l6: 96px;
+  --aquarium-spacing-l7: 160px;
+}
 input[type='number'].no-arrows::-webkit-inner-spin-button,input[type='number'].no-arrow::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
@@ -370,6 +613,7 @@ input[type='number'].no-arrows {
   line-height: 1.26;
   text-transform: none;
   fill: #787885;
+  fill: var(--aquarium-colors-grey-50, #787885);
 }
 .recharts-tooltip-wrapper {
   font-family: Inter;
@@ -378,8 +622,8 @@ input[type='number'].no-arrows {
   font-style: normal;
   line-height: 1.26;
   text-transform: none;
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+  color: white;
+  color: var(--aquarium-colors-white, white);
 }
 .recharts-tooltip-item {
   align-items: center;
@@ -398,6 +642,29 @@ input[type='number'].no-arrows {
 .recharts-tooltip-item-separator {
   margin-right: 2px;
 }
+.focusable.focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --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(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
+  --tw-ring-color: var(--aquarium-colors-info-70, #0399e3);
+}
+.focusable:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --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(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
+  --tw-ring-color: var(--aquarium-colors-info-70, #0399e3);
+}
+.icon-stroke-2 svg path {
+  stroke-width: 2;
+}
+/* https://tailwindcss.com/docs/using-with-preprocessors */
+/* @import statements must come first*/
 .container {
   width: 100%;
 }
@@ -405,49 +672,61 @@ input[type='number'].no-arrows {
   width: 100% !important;
 }
 @media (min-width: 0px) {
+
   .container {
     max-width: 0px;
   }
+
   .\!container {
     max-width: 0px !important;
   }
 }
 @media (min-width: 320px) {
+
   .container {
     max-width: 320px;
   }
+
   .\!container {
     max-width: 320px !important;
   }
 }
 @media (min-width: 672px) {
+
   .container {
     max-width: 672px;
   }
+
   .\!container {
     max-width: 672px !important;
   }
 }
 @media (min-width: 1056px) {
+
   .container {
     max-width: 1056px;
   }
+
   .\!container {
     max-width: 1056px !important;
   }
 }
 @media (min-width: 1312px) {
+
   .container {
     max-width: 1312px;
   }
+
   .\!container {
     max-width: 1312px !important;
   }
 }
 @media (min-width: 1536px) {
+
   .container {
     max-width: 1536px;
   }
+
   .\!container {
     max-width: 1536px !important;
   }
@@ -703,29 +982,6 @@ input[type='number'].no-arrows {
   letter-spacing: -1.98px;
   text-transform: none;
 }
-.focusable.focus-visible {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  --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(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(3 153 227 / var(--tw-ring-opacity));
-}
-.focusable:focus-visible {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  --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(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(3 153 227 / var(--tw-ring-opacity));
-}
-.icon-stroke-2 svg path {
-  stroke-width: 2;
-}
 .pointer-events-none {
   pointer-events: none;
 }
@@ -1155,6 +1411,7 @@ input[type='number'].no-arrows {
   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));
 }
 @keyframes pulse {
+
   50% {
     opacity: .5;
   }
@@ -1344,12 +1601,15 @@ input[type='number'].no-arrows {
 }
 .rounded-sm {
   border-radius: 0.125rem;
+  border-radius: var(--aquarium-border-radius-sm, 0.125rem);
 }
 .rounded-full {
   border-radius: 9999px;
+  border-radius: var(--aquarium-border-radius-full, 9999px);
 }
 .rounded {
   border-radius: 4px;
+  border-radius: var(--aquarium-border-radius-default, 4px);
 }
 .rounded-\[2px\] {
   border-radius: 2px;
@@ -1388,152 +1648,156 @@ input[type='number'].no-arrows {
   border-style: none;
 }
 .border-error-50 {
-  --tw-border-opacity: 1;
-  border-color: rgb(230 39 40 / var(--tw-border-opacity));
+  border-color: #e62728;
+  border-color: var(--aquarium-colors-error-50, #e62728);
 }
 .border-grey-20 {
-  --tw-border-opacity: 1;
-  border-color: rgb(210 210 214 / var(--tw-border-opacity));
+  border-color: #d2d2d6;
+  border-color: var(--aquarium-colors-grey-20, #d2d2d6);
 }
 .border-info-70 {
-  --tw-border-opacity: 1;
-  border-color: rgb(3 153 227 / var(--tw-border-opacity));
+  border-color: #0399e3;
+  border-color: var(--aquarium-colors-info-70, #0399e3);
 }
 .border-grey-5 {
-  --tw-border-opacity: 1;
-  border-color: rgb(237 237 240 / var(--tw-border-opacity));
+  border-color: #ededf0;
+  border-color: var(--aquarium-colors-grey-5, #ededf0);
 }
 .border-transparent {
   border-color: transparent;
+  border-color: var(--aquarium-colors-transparent, transparent);
 }
 .border-grey-10 {
-  --tw-border-opacity: 1;
-  border-color: rgb(225 225 227 / var(--tw-border-opacity));
+  border-color: #e1e1e3;
+  border-color: var(--aquarium-colors-grey-10, #e1e1e3);
 }
 .border-navyBlue-100 {
   --tw-border-opacity: 1;
   border-color: rgb(48 55 94 / var(--tw-border-opacity));
 }
 .border-grey-50 {
-  --tw-border-opacity: 1;
-  border-color: rgb(120 120 133 / var(--tw-border-opacity));
+  border-color: #787885;
+  border-color: var(--aquarium-colors-grey-50, #787885);
 }
 .border-grey-90 {
-  --tw-border-opacity: 1;
-  border-color: rgb(41 42 49 / var(--tw-border-opacity));
+  border-color: #292a31;
+  border-color: var(--aquarium-colors-grey-90, #292a31);
 }
 .border-success-70 {
-  --tw-border-opacity: 1;
-  border-color: rgb(0 179 0 / var(--tw-border-opacity));
+  border-color: #00b300;
+  border-color: var(--aquarium-colors-success-70, #00b300);
 }
 .border-grey-40 {
-  --tw-border-opacity: 1;
-  border-color: rgb(150 150 160 / var(--tw-border-opacity));
+  border-color: #9696a0;
+  border-color: var(--aquarium-colors-grey-40, #9696a0);
 }
 .border-current {
   border-color: currentColor;
+  border-color: var(--aquarium-colors-current, currentColor);
 }
 .border-grey-100 {
-  --tw-border-opacity: 1;
-  border-color: rgb(25 25 29 / var(--tw-border-opacity));
+  border-color: #19191d;
+  border-color: var(--aquarium-colors-grey-100, #19191d);
 }
 .border-primary-80 {
-  --tw-border-opacity: 1;
-  border-color: rgb(228 26 74 / var(--tw-border-opacity));
+  border-color: #e41a4a;
+  border-color: var(--aquarium-colors-primary-80, #e41a4a);
 }
 .bg-grey-10 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(225 225 227 / var(--tw-bg-opacity));
+  background-color: #e1e1e3;
+  background-color: var(--aquarium-colors-grey-10, #e1e1e3);
 }
 .bg-error-5 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 232 231 / var(--tw-bg-opacity));
+  background-color: #fee8e7;
+  background-color: var(--aquarium-colors-error-5, #fee8e7);
 }
 .bg-info-5 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(239 250 255 / var(--tw-bg-opacity));
+  background-color: #effaff;
+  background-color: var(--aquarium-colors-info-5, #effaff);
 }
 .bg-success-5 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(236 247 237 / var(--tw-bg-opacity));
+  background-color: #ecf7ed;
+  background-color: var(--aquarium-colors-success-5, #ecf7ed);
 }
 .bg-warning-5 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 248 234 / var(--tw-bg-opacity));
+  background-color: #fff8ea;
+  background-color: var(--aquarium-colors-warning-5, #fff8ea);
 }
 .bg-grey-0 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(247 247 250 / var(--tw-bg-opacity));
+  background-color: #f7f7fa;
+  background-color: var(--aquarium-colors-grey-0, #f7f7fa);
 }
 .bg-white {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  background-color: white;
+  background-color: var(--aquarium-colors-white, white);
 }
 .bg-navyBlue-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(48 55 94 / var(--tw-bg-opacity));
 }
 .bg-grey-5 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(237 237 240 / var(--tw-bg-opacity));
+  background-color: #ededf0;
+  background-color: var(--aquarium-colors-grey-5, #ededf0);
 }
 .bg-info-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(40 180 244 / var(--tw-bg-opacity));
+  background-color: #28b4f4;
+  background-color: var(--aquarium-colors-info-50, #28b4f4);
 }
 .bg-warning-70 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 179 0 / var(--tw-bg-opacity));
+  background-color: #ffb300;
+  background-color: var(--aquarium-colors-warning-70, #ffb300);
 }
 .bg-success-70 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(0 179 0 / var(--tw-bg-opacity));
+  background-color: #00b300;
+  background-color: var(--aquarium-colors-success-70, #00b300);
 }
 .bg-error-70 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(216 0 5 / var(--tw-bg-opacity));
+  background-color: #d80005;
+  background-color: var(--aquarium-colors-error-70, #d80005);
 }
 .bg-grey-20 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(210 210 214 / var(--tw-bg-opacity));
+  background-color: #d2d2d6;
+  background-color: var(--aquarium-colors-grey-20, #d2d2d6);
 }
 .bg-grey-90 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(41 42 49 / var(--tw-bg-opacity));
+  background-color: #292a31;
+  background-color: var(--aquarium-colors-grey-90, #292a31);
 }
 .bg-grey-30 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(180 180 187 / var(--tw-bg-opacity));
+  background-color: #b4b4bb;
+  background-color: var(--aquarium-colors-grey-30, #b4b4bb);
 }
 .bg-grey-80 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(58 58 68 / var(--tw-bg-opacity));
+  background-color: #3a3a44;
+  background-color: var(--aquarium-colors-grey-80, #3a3a44);
 }
 .bg-current {
   background-color: currentColor;
+  background-color: var(--aquarium-colors-current, currentColor);
 }
 .bg-primary-80 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(228 26 74 / var(--tw-bg-opacity));
+  background-color: #e41a4a;
+  background-color: var(--aquarium-colors-primary-80, #e41a4a);
 }
 .bg-transparent {
   background-color: transparent;
+  background-color: var(--aquarium-colors-transparent, transparent);
 }
 .bg-secondary-5 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 243 232 / var(--tw-bg-opacity));
+  background-color: #fff3e8;
+  background-color: var(--aquarium-colors-secondary-5, #fff3e8);
 }
 .bg-error-0 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 242 241 / var(--tw-bg-opacity));
+  background-color: #fef2f1;
+  background-color: var(--aquarium-colors-error-0, #fef2f1);
 }
 .bg-error-20 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 173 179 / var(--tw-bg-opacity));
+  background-color: #ffadb3;
+  background-color: var(--aquarium-colors-error-20, #ffadb3);
 }
 .bg-primary-70 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 53 84 / var(--tw-bg-opacity));
+  background-color: #ff3554;
+  background-color: var(--aquarium-colors-primary-70, #ff3554);
 }
 .bg-opacity-40 {
   --tw-bg-opacity: 0.4;
@@ -1545,19 +1809,20 @@ input[type='number'].no-arrows {
   background-image: linear-gradient(to left, var(--tw-gradient-stops));
 }
 .from-white {
-  --tw-gradient-from: white;
+  --tw-gradient-from: var(--aquarium-colors-white, white);
   --tw-gradient-to: rgba(255, 255, 255, 0);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 .via-white {
   --tw-gradient-to: rgba(255, 255, 255, 0);
-  --tw-gradient-stops: var(--tw-gradient-from), white, var(--tw-gradient-to);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--aquarium-colors-white, white), var(--tw-gradient-to);
 }
 .bg-cover {
   background-size: cover;
 }
 .stroke-grey-30 {
   stroke: #b4b4bb;
+  stroke: var(--aquarium-colors-grey-30, #b4b4bb);
 }
 .object-cover {
   -o-object-fit: cover;
@@ -1729,347 +1994,348 @@ input[type='number'].no-arrows {
   line-height: 0px;
 }
 .text-error-100 {
-  --tw-text-opacity: 1;
-  color: rgb(170 0 0 / var(--tw-text-opacity));
+  color: #aa0000;
+  color: var(--aquarium-colors-error-100, #aa0000);
 }
 .text-error-90 {
-  --tw-text-opacity: 1;
-  color: rgb(185 0 0 / var(--tw-text-opacity));
+  color: #b90000;
+  color: var(--aquarium-colors-error-90, #b90000);
 }
 .text-error-80 {
-  --tw-text-opacity: 1;
-  color: rgb(197 0 1 / var(--tw-text-opacity));
+  color: #c50001;
+  color: var(--aquarium-colors-error-80, #c50001);
 }
 .text-error-70 {
-  --tw-text-opacity: 1;
-  color: rgb(216 0 5 / var(--tw-text-opacity));
+  color: #d80005;
+  color: var(--aquarium-colors-error-70, #d80005);
 }
 .text-error-60 {
-  --tw-text-opacity: 1;
-  color: rgb(231 0 0 / var(--tw-text-opacity));
+  color: #e70000;
+  color: var(--aquarium-colors-error-60, #e70000);
 }
 .text-error-50 {
-  --tw-text-opacity: 1;
-  color: rgb(230 39 40 / var(--tw-text-opacity));
+  color: #e62728;
+  color: var(--aquarium-colors-error-50, #e62728);
 }
 .text-error-40 {
-  --tw-text-opacity: 1;
-  color: rgb(224 80 79 / var(--tw-text-opacity));
+  color: #e0504f;
+  color: var(--aquarium-colors-error-40, #e0504f);
 }
 .text-error-30 {
-  --tw-text-opacity: 1;
-  color: rgb(237 121 117 / var(--tw-text-opacity));
+  color: #ed7975;
+  color: var(--aquarium-colors-error-30, #ed7975);
 }
 .text-error-20 {
-  --tw-text-opacity: 1;
-  color: rgb(255 173 179 / var(--tw-text-opacity));
+  color: #ffadb3;
+  color: var(--aquarium-colors-error-20, #ffadb3);
 }
 .text-error-10 {
-  --tw-text-opacity: 1;
-  color: rgb(255 203 210 / var(--tw-text-opacity));
+  color: #ffcbd2;
+  color: var(--aquarium-colors-error-10, #ffcbd2);
 }
 .text-error-5 {
-  --tw-text-opacity: 1;
-  color: rgb(254 232 231 / var(--tw-text-opacity));
+  color: #fee8e7;
+  color: var(--aquarium-colors-error-5, #fee8e7);
 }
 .text-error-0 {
-  --tw-text-opacity: 1;
-  color: rgb(254 242 241 / var(--tw-text-opacity));
+  color: #fef2f1;
+  color: var(--aquarium-colors-error-0, #fef2f1);
 }
 .text-warning-100 {
-  --tw-text-opacity: 1;
-  color: rgb(254 109 0 / var(--tw-text-opacity));
+  color: #fe6d00;
+  color: var(--aquarium-colors-warning-100, #fe6d00);
 }
 .text-warning-90 {
-  --tw-text-opacity: 1;
-  color: rgb(255 144 3 / var(--tw-text-opacity));
+  color: #ff9003;
+  color: var(--aquarium-colors-warning-90, #ff9003);
 }
 .text-warning-80 {
-  --tw-text-opacity: 1;
-  color: rgb(253 159 0 / var(--tw-text-opacity));
+  color: #fd9f00;
+  color: var(--aquarium-colors-warning-80, #fd9f00);
 }
 .text-warning-70 {
-  --tw-text-opacity: 1;
-  color: rgb(255 179 0 / var(--tw-text-opacity));
+  color: #ffb300;
+  color: var(--aquarium-colors-warning-70, #ffb300);
 }
 .text-warning-60 {
-  --tw-text-opacity: 1;
-  color: rgb(255 193 7 / var(--tw-text-opacity));
+  color: #ffc107;
+  color: var(--aquarium-colors-warning-60, #ffc107);
 }
 .text-warning-50 {
-  --tw-text-opacity: 1;
-  color: rgb(253 201 38 / var(--tw-text-opacity));
+  color: #fdc926;
+  color: var(--aquarium-colors-warning-50, #fdc926);
 }
 .text-warning-40 {
-  --tw-text-opacity: 1;
-  color: rgb(253 212 77 / var(--tw-text-opacity));
+  color: #fdd44d;
+  color: var(--aquarium-colors-warning-40, #fdd44d);
 }
 .text-warning-30 {
-  --tw-text-opacity: 1;
-  color: rgb(253 223 129 / var(--tw-text-opacity));
+  color: #fddf81;
+  color: var(--aquarium-colors-warning-30, #fddf81);
 }
 .text-warning-20 {
-  --tw-text-opacity: 1;
-  color: rgb(254 235 178 / var(--tw-text-opacity));
+  color: #feebb2;
+  color: var(--aquarium-colors-warning-20, #feebb2);
 }
 .text-warning-10 {
-  --tw-text-opacity: 1;
-  color: rgb(255 242 205 / var(--tw-text-opacity));
+  color: #fff2cd;
+  color: var(--aquarium-colors-warning-10, #fff2cd);
 }
 .text-warning-5 {
-  --tw-text-opacity: 1;
-  color: rgb(255 248 234 / var(--tw-text-opacity));
+  color: #fff8ea;
+  color: var(--aquarium-colors-warning-5, #fff8ea);
 }
 .text-warning-0 {
-  --tw-text-opacity: 1;
-  color: rgb(255 253 249 / var(--tw-text-opacity));
+  color: #fffdf9;
+  color: var(--aquarium-colors-warning-0, #fffdf9);
 }
 .text-success-100 {
-  --tw-text-opacity: 1;
-  color: rgb(0 111 0 / var(--tw-text-opacity));
+  color: #006f00;
+  color: var(--aquarium-colors-success-100, #006f00);
 }
 .text-success-90 {
-  --tw-text-opacity: 1;
-  color: rgb(0 142 0 / var(--tw-text-opacity));
+  color: #008e00;
+  color: var(--aquarium-colors-success-90, #008e00);
 }
 .text-success-80 {
-  --tw-text-opacity: 1;
-  color: rgb(0 159 0 / var(--tw-text-opacity));
+  color: #009f00;
+  color: var(--aquarium-colors-success-80, #009f00);
 }
 .text-success-70 {
-  --tw-text-opacity: 1;
-  color: rgb(0 179 0 / var(--tw-text-opacity));
+  color: #00b300;
+  color: var(--aquarium-colors-success-70, #00b300);
 }
 .text-success-60 {
-  --tw-text-opacity: 1;
-  color: rgb(0 195 0 / var(--tw-text-opacity));
+  color: #00c300;
+  color: var(--aquarium-colors-success-60, #00c300);
 }
 .text-success-50 {
-  --tw-text-opacity: 1;
-  color: rgb(64 206 55 / var(--tw-text-opacity));
+  color: #40ce37;
+  color: var(--aquarium-colors-success-50, #40ce37);
 }
 .text-success-40 {
-  --tw-text-opacity: 1;
-  color: rgb(96 219 87 / var(--tw-text-opacity));
+  color: #60db57;
+  color: var(--aquarium-colors-success-40, #60db57);
 }
 .text-success-30 {
-  --tw-text-opacity: 1;
-  color: rgb(137 235 128 / var(--tw-text-opacity));
+  color: #89eb80;
+  color: var(--aquarium-colors-success-30, #89eb80);
 }
 .text-success-20 {
-  --tw-text-opacity: 1;
-  color: rgb(175 255 167 / var(--tw-text-opacity));
+  color: #afffa7;
+  color: var(--aquarium-colors-success-20, #afffa7);
 }
 .text-success-10 {
-  --tw-text-opacity: 1;
-  color: rgb(203 255 201 / var(--tw-text-opacity));
+  color: #cbffc9;
+  color: var(--aquarium-colors-success-10, #cbffc9);
 }
 .text-success-5 {
-  --tw-text-opacity: 1;
-  color: rgb(236 247 237 / var(--tw-text-opacity));
+  color: #ecf7ed;
+  color: var(--aquarium-colors-success-5, #ecf7ed);
 }
 .text-success-0 {
-  --tw-text-opacity: 1;
-  color: rgb(245 250 245 / var(--tw-text-opacity));
+  color: #f5faf5;
+  color: var(--aquarium-colors-success-0, #f5faf5);
 }
 .text-info-100 {
-  --tw-text-opacity: 1;
-  color: rgb(2 86 154 / var(--tw-text-opacity));
+  color: #02569a;
+  color: var(--aquarium-colors-info-100, #02569a);
 }
 .text-info-90 {
-  --tw-text-opacity: 1;
-  color: rgb(1 116 186 / var(--tw-text-opacity));
+  color: #0174ba;
+  color: var(--aquarium-colors-info-90, #0174ba);
 }
 .text-info-80 {
-  --tw-text-opacity: 1;
-  color: rgb(7 136 209 / var(--tw-text-opacity));
+  color: #0788d1;
+  color: var(--aquarium-colors-info-80, #0788d1);
 }
 .text-info-70 {
-  --tw-text-opacity: 1;
-  color: rgb(3 153 227 / var(--tw-text-opacity));
+  color: #0399e3;
+  color: var(--aquarium-colors-info-70, #0399e3);
 }
 .text-info-60 {
-  --tw-text-opacity: 1;
-  color: rgb(2 168 243 / var(--tw-text-opacity));
+  color: #02a8f3;
+  color: var(--aquarium-colors-info-60, #02a8f3);
 }
 .text-info-50 {
-  --tw-text-opacity: 1;
-  color: rgb(40 180 244 / var(--tw-text-opacity));
+  color: #28b4f4;
+  color: var(--aquarium-colors-info-50, #28b4f4);
 }
 .text-info-40 {
-  --tw-text-opacity: 1;
-  color: rgb(76 194 247 / var(--tw-text-opacity));
+  color: #4cc2f7;
+  color: var(--aquarium-colors-info-40, #4cc2f7);
 }
 .text-info-30 {
-  --tw-text-opacity: 1;
-  color: rgb(127 209 247 / var(--tw-text-opacity));
+  color: #7fd1f7;
+  color: var(--aquarium-colors-info-30, #7fd1f7);
 }
 .text-info-20 {
-  --tw-text-opacity: 1;
-  color: rgb(180 229 251 / var(--tw-text-opacity));
+  color: #b4e5fb;
+  color: var(--aquarium-colors-info-20, #b4e5fb);
 }
 .text-info-10 {
-  --tw-text-opacity: 1;
-  color: rgb(224 245 254 / var(--tw-text-opacity));
+  color: #e0f5fe;
+  color: var(--aquarium-colors-info-10, #e0f5fe);
 }
 .text-info-5 {
-  --tw-text-opacity: 1;
-  color: rgb(239 250 255 / var(--tw-text-opacity));
+  color: #effaff;
+  color: var(--aquarium-colors-info-5, #effaff);
 }
 .text-info-0 {
-  --tw-text-opacity: 1;
-  color: rgb(249 253 255 / var(--tw-text-opacity));
+  color: #f9fdff;
+  color: var(--aquarium-colors-info-0, #f9fdff);
 }
 .text-grey-100 {
-  --tw-text-opacity: 1;
-  color: rgb(25 25 29 / var(--tw-text-opacity));
+  color: #19191d;
+  color: var(--aquarium-colors-grey-100, #19191d);
 }
 .text-grey-90 {
-  --tw-text-opacity: 1;
-  color: rgb(41 42 49 / var(--tw-text-opacity));
+  color: #292a31;
+  color: var(--aquarium-colors-grey-90, #292a31);
 }
 .text-grey-80 {
-  --tw-text-opacity: 1;
-  color: rgb(58 58 68 / var(--tw-text-opacity));
+  color: #3a3a44;
+  color: var(--aquarium-colors-grey-80, #3a3a44);
 }
 .text-grey-70 {
-  --tw-text-opacity: 1;
-  color: rgb(74 75 87 / var(--tw-text-opacity));
+  color: #4a4b57;
+  color: var(--aquarium-colors-grey-70, #4a4b57);
 }
 .text-grey-60 {
-  --tw-text-opacity: 1;
-  color: rgb(90 91 106 / var(--tw-text-opacity));
+  color: #5a5b6a;
+  color: var(--aquarium-colors-grey-60, #5a5b6a);
 }
 .text-grey-50 {
-  --tw-text-opacity: 1;
-  color: rgb(120 120 133 / var(--tw-text-opacity));
+  color: #787885;
+  color: var(--aquarium-colors-grey-50, #787885);
 }
 .text-grey-40 {
-  --tw-text-opacity: 1;
-  color: rgb(150 150 160 / var(--tw-text-opacity));
+  color: #9696a0;
+  color: var(--aquarium-colors-grey-40, #9696a0);
 }
 .text-grey-30 {
-  --tw-text-opacity: 1;
-  color: rgb(180 180 187 / var(--tw-text-opacity));
+  color: #b4b4bb;
+  color: var(--aquarium-colors-grey-30, #b4b4bb);
 }
 .text-grey-10 {
-  --tw-text-opacity: 1;
-  color: rgb(225 225 227 / var(--tw-text-opacity));
+  color: #e1e1e3;
+  color: var(--aquarium-colors-grey-10, #e1e1e3);
 }
 .text-grey-5 {
-  --tw-text-opacity: 1;
-  color: rgb(237 237 240 / var(--tw-text-opacity));
+  color: #ededf0;
+  color: var(--aquarium-colors-grey-5, #ededf0);
 }
 .text-grey-0 {
-  --tw-text-opacity: 1;
-  color: rgb(247 247 250 / var(--tw-text-opacity));
+  color: #f7f7fa;
+  color: var(--aquarium-colors-grey-0, #f7f7fa);
 }
 .text-secondary-100 {
-  --tw-text-opacity: 1;
-  color: rgb(225 29 22 / var(--tw-text-opacity));
+  color: #e11d16;
+  color: var(--aquarium-colors-secondary-100, #e11d16);
 }
 .text-secondary-90 {
-  --tw-text-opacity: 1;
-  color: rgb(235 70 16 / var(--tw-text-opacity));
+  color: #eb4610;
+  color: var(--aquarium-colors-secondary-90, #eb4610);
 }
 .text-secondary-80 {
-  --tw-text-opacity: 1;
-  color: rgb(243 88 13 / var(--tw-text-opacity));
+  color: #f3580d;
+  color: var(--aquarium-colors-secondary-80, #f3580d);
 }
 .text-secondary-70 {
-  --tw-text-opacity: 1;
-  color: rgb(249 106 2 / var(--tw-text-opacity));
+  color: #f96a02;
+  color: var(--aquarium-colors-secondary-70, #f96a02);
 }
 .text-secondary-60 {
-  --tw-text-opacity: 1;
-  color: rgb(255 119 0 / var(--tw-text-opacity));
+  color: #ff7700;
+  color: var(--aquarium-colors-secondary-60, #ff7700);
 }
 .text-secondary-50 {
-  --tw-text-opacity: 1;
-  color: rgb(252 135 26 / var(--tw-text-opacity));
+  color: #fc871a;
+  color: var(--aquarium-colors-secondary-50, #fc871a);
 }
 .text-secondary-40 {
-  --tw-text-opacity: 1;
-  color: rgb(251 154 62 / var(--tw-text-opacity));
+  color: #fb9a3e;
+  color: var(--aquarium-colors-secondary-40, #fb9a3e);
 }
 .text-secondary-30 {
-  --tw-text-opacity: 1;
-  color: rgb(250 178 110 / var(--tw-text-opacity));
+  color: #fab26e;
+  color: var(--aquarium-colors-secondary-30, #fab26e);
 }
 .text-secondary-20 {
-  --tw-text-opacity: 1;
-  color: rgb(248 201 156 / var(--tw-text-opacity));
+  color: #f8c99c;
+  color: var(--aquarium-colors-secondary-20, #f8c99c);
 }
 .text-secondary-10 {
-  --tw-text-opacity: 1;
-  color: rgb(254 232 208 / var(--tw-text-opacity));
+  color: #fee8d0;
+  color: var(--aquarium-colors-secondary-10, #fee8d0);
 }
 .text-secondary-5 {
-  --tw-text-opacity: 1;
-  color: rgb(255 243 232 / var(--tw-text-opacity));
+  color: #fff3e8;
+  color: var(--aquarium-colors-secondary-5, #fff3e8);
 }
 .text-secondary-0 {
-  --tw-text-opacity: 1;
-  color: rgb(255 251 248 / var(--tw-text-opacity));
+  color: #fffbf8;
+  color: var(--aquarium-colors-secondary-0, #fffbf8);
 }
 .text-primary-100 {
-  --tw-text-opacity: 1;
-  color: rgb(167 0 69 / var(--tw-text-opacity));
+  color: #a70045;
+  color: var(--aquarium-colors-primary-100, #a70045);
 }
 .text-primary-90 {
-  --tw-text-opacity: 1;
-  color: rgb(198 4 67 / var(--tw-text-opacity));
+  color: #c60443;
+  color: var(--aquarium-colors-primary-90, #c60443);
 }
 .text-primary-80 {
-  --tw-text-opacity: 1;
-  color: rgb(228 26 74 / var(--tw-text-opacity));
+  color: #e41a4a;
+  color: var(--aquarium-colors-primary-80, #e41a4a);
 }
 .text-primary-70 {
-  --tw-text-opacity: 1;
-  color: rgb(255 53 84 / var(--tw-text-opacity));
+  color: #ff3554;
+  color: var(--aquarium-colors-primary-70, #ff3554);
 }
 .text-primary-60 {
-  --tw-text-opacity: 1;
-  color: rgb(255 82 117 / var(--tw-text-opacity));
+  color: #ff5275;
+  color: var(--aquarium-colors-primary-60, #ff5275);
 }
 .text-primary-50 {
-  --tw-text-opacity: 1;
-  color: rgb(255 111 148 / var(--tw-text-opacity));
+  color: #ff6f94;
+  color: var(--aquarium-colors-primary-50, #ff6f94);
 }
 .text-primary-40 {
-  --tw-text-opacity: 1;
-  color: rgb(255 141 176 / var(--tw-text-opacity));
+  color: #ff8db0;
+  color: var(--aquarium-colors-primary-40, #ff8db0);
 }
 .text-primary-30 {
-  --tw-text-opacity: 1;
-  color: rgb(255 169 201 / var(--tw-text-opacity));
+  color: #ffa9c9;
+  color: var(--aquarium-colors-primary-30, #ffa9c9);
 }
 .text-primary-20 {
-  --tw-text-opacity: 1;
-  color: rgb(255 196 222 / var(--tw-text-opacity));
+  color: #ffc4de;
+  color: var(--aquarium-colors-primary-20, #ffc4de);
 }
 .text-primary-10 {
-  --tw-text-opacity: 1;
-  color: rgb(255 222 239 / var(--tw-text-opacity));
+  color: #ffdeef;
+  color: var(--aquarium-colors-primary-10, #ffdeef);
 }
 .text-primary-5 {
-  --tw-text-opacity: 1;
-  color: rgb(255 232 244 / var(--tw-text-opacity));
+  color: #ffe8f4;
+  color: var(--aquarium-colors-primary-5, #ffe8f4);
 }
 .text-primary-0 {
-  --tw-text-opacity: 1;
-  color: rgb(255 249 252 / var(--tw-text-opacity));
+  color: #fff9fc;
+  color: var(--aquarium-colors-primary-0, #fff9fc);
 }
 .text-grey-20 {
-  --tw-text-opacity: 1;
-  color: rgb(210 210 214 / var(--tw-text-opacity));
+  color: #d2d2d6;
+  color: var(--aquarium-colors-grey-20, #d2d2d6);
 }
 .text-transparent {
   color: transparent;
+  color: var(--aquarium-colors-transparent, transparent);
 }
 .text-white {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+  color: white;
+  color: var(--aquarium-colors-white, white);
 }
 .no-underline {
   -webkit-text-decoration-line: none;
@@ -2082,20 +2348,20 @@ input[type='number'].no-arrows {
   opacity: 0.4;
 }
 .shadow-16dp {
-  --tw-shadow: 0px 16px 32px rgba(90, 91, 106, 0.12), 0px 8px 16px rgba(58, 58, 68, 0.12);
-  --tw-shadow-colored: 0px 16px 32px var(--tw-shadow-color), 0px 8px 16px var(--tw-shadow-color);
+  --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);
   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-4dp {
-  --tw-shadow: 0px 4px 8px rgba(90, 91, 106, 0.20), 0px 2px 4px rgba(58, 58, 68, 0.20);
-  --tw-shadow-colored: 0px 4px 8px var(--tw-shadow-color), 0px 2px 4px var(--tw-shadow-color);
+  --tw-shadow: var(--aquarium-box-shadow-4dp, 0px 4px 8px rgba(90, 91, 106, 0.20), 0px 2px 4px rgba(58, 58, 68, 0.20));
+  --tw-shadow-colored: 0px 4px 8px 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-2dp {
-  --tw-shadow: 0px 2px 4px rgba(90, 91, 106, 0.24), 0px 1px 2px rgba(58, 58, 68, 0.24);
-  --tw-shadow-colored: 0px 2px 4px var(--tw-shadow-color), 0px 1px 2px var(--tw-shadow-color);
+  --tw-shadow: var(--aquarium-box-shadow-2dp, 0px 2px 4px rgba(90, 91, 106, 0.24), 0px 1px 2px rgba(58, 58, 68, 0.24));
+  --tw-shadow-colored: 0px 2px 4px 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);
 }
@@ -2125,8 +2391,7 @@ input[type='number'].no-arrows {
   --tw-ring-inset: inset;
 }
 .ring-grey-30 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(180 180 187 / var(--tw-ring-opacity));
+  --tw-ring-color: var(--aquarium-colors-grey-30, #b4b4bb);
 }
 .ring-offset-0 {
   --tw-ring-offset-width: 0px;
@@ -2203,12 +2468,12 @@ input[type='number'].no-arrows {
   display: none;
 }
 .placeholder\:text-grey-40::-moz-placeholder {
-  --tw-text-opacity: 1;
-  color: rgb(150 150 160 / var(--tw-text-opacity));
+  color: #9696a0;
+  color: var(--aquarium-colors-grey-40, #9696a0);
 }
 .placeholder\:text-grey-40::placeholder {
-  --tw-text-opacity: 1;
-  color: rgb(150 150 160 / var(--tw-text-opacity));
+  color: #9696a0;
+  color: var(--aquarium-colors-grey-40, #9696a0);
 }
 .before\:content-\[\'_\'\]::before {
   --tw-content: ' ';
@@ -2218,7 +2483,8 @@ input[type='number'].no-arrows {
   margin-top: 0;
 }
 .visited\:text-primary-80:visited {
-  color: rgb(228, 26, 74 );
+  color: #e41a4a;
+  color: var(--aquarium-colors-primary-80, #e41a4a);
 }
 .checked\:border-navyBlue-100:checked {
   --tw-border-opacity: 1;
@@ -2235,7 +2501,7 @@ input[type='number'].no-arrows {
   opacity: 0.4;
 }
 .checked\:shadow-whiteInset:checked {
-  --tw-shadow: inset 0 0 0 3px rgba(255,255,255,1);
+  --tw-shadow: var(--aquarium-box-shadow-white-inset, inset 0 0 0 3px rgba(255,255,255,1));
   --tw-shadow-colored: inset 0 0 0 3px 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);
@@ -2244,56 +2510,55 @@ input[type='number'].no-arrows {
   cursor: pointer;
 }
 .hover\:border-grey-50:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(120 120 133 / var(--tw-border-opacity));
+  border-color: #787885;
+  border-color: var(--aquarium-colors-grey-50, #787885);
 }
 .hover\:border-grey-20:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(210 210 214 / var(--tw-border-opacity));
+  border-color: #d2d2d6;
+  border-color: var(--aquarium-colors-grey-20, #d2d2d6);
 }
 .hover\:bg-grey-0:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(247 247 250 / var(--tw-bg-opacity));
+  background-color: #f7f7fa;
+  background-color: var(--aquarium-colors-grey-0, #f7f7fa);
 }
 .hover\:bg-grey-5:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(237 237 240 / var(--tw-bg-opacity));
+  background-color: #ededf0;
+  background-color: var(--aquarium-colors-grey-5, #ededf0);
 }
 .hover\:bg-grey-30:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(180 180 187 / var(--tw-bg-opacity));
+  background-color: #b4b4bb;
+  background-color: var(--aquarium-colors-grey-30, #b4b4bb);
 }
 .hover\:bg-primary-70:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 53 84 / var(--tw-bg-opacity));
+  background-color: #ff3554;
+  background-color: var(--aquarium-colors-primary-70, #ff3554);
 }
 .hover\:bg-error-10:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 203 210 / var(--tw-bg-opacity));
+  background-color: #ffcbd2;
+  background-color: var(--aquarium-colors-error-10, #ffcbd2);
 }
 .hover\:bg-grey-10:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(225 225 227 / var(--tw-bg-opacity));
+  background-color: #e1e1e3;
+  background-color: var(--aquarium-colors-grey-10, #e1e1e3);
 }
 .hover\:text-primary-70:hover {
-  --tw-text-opacity: 1;
-  color: rgb(255 53 84 / var(--tw-text-opacity));
+  color: #ff3554;
+  color: var(--aquarium-colors-primary-70, #ff3554);
 }
 .hover\:text-grey-80:hover {
-  --tw-text-opacity: 1;
-  color: rgb(58 58 68 / var(--tw-text-opacity));
+  color: #3a3a44;
+  color: var(--aquarium-colors-grey-80, #3a3a44);
 }
 .hover\:text-grey-90:hover {
-  --tw-text-opacity: 1;
-  color: rgb(41 42 49 / var(--tw-text-opacity));
+  color: #292a31;
+  color: var(--aquarium-colors-grey-90, #292a31);
 }
 .hover\:text-primary-80:hover {
-  --tw-text-opacity: 1;
-  color: rgb(228 26 74 / var(--tw-text-opacity));
+  color: #e41a4a;
+  color: var(--aquarium-colors-primary-80, #e41a4a);
 }
 .hover\:ring-grey-50:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(120 120 133 / var(--tw-ring-opacity));
+  --tw-ring-color: var(--aquarium-colors-grey-50, #787885);
 }
 .hover\:checked\:bg-navyBlue-100:checked:hover {
   --tw-bg-opacity: 1;
@@ -2303,23 +2568,24 @@ input[type='number'].no-arrows {
   border-width: 1px;
 }
 .focus\:border-info-70:focus {
-  --tw-border-opacity: 1;
-  border-color: rgb(3 153 227 / var(--tw-border-opacity));
+  border-color: #0399e3;
+  border-color: var(--aquarium-colors-info-70, #0399e3);
 }
 .focus\:border-transparent:focus {
   border-color: transparent;
+  border-color: var(--aquarium-colors-transparent, transparent);
 }
 .focus\:bg-error-20:focus {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 173 179 / var(--tw-bg-opacity));
+  background-color: #ffadb3;
+  background-color: var(--aquarium-colors-error-20, #ffadb3);
 }
 .focus\:bg-grey-20:focus {
-  --tw-bg-opacity: 1;
-  background-color: rgb(210 210 214 / var(--tw-bg-opacity));
+  background-color: #d2d2d6;
+  background-color: var(--aquarium-colors-grey-20, #d2d2d6);
 }
 .focus\:text-primary-80:focus {
-  --tw-text-opacity: 1;
-  color: rgb(228 26 74 / var(--tw-text-opacity));
+  color: #e41a4a;
+  color: var(--aquarium-colors-primary-80, #e41a4a);
 }
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
@@ -2344,43 +2610,42 @@ input[type='number'].no-arrows {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
 }
 .focus\:ring-grey-60:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(90 91 106 / var(--tw-ring-opacity));
+  --tw-ring-color: var(--aquarium-colors-grey-60, #5a5b6a);
 }
 .focus\:ring-offset-0:focus {
   --tw-ring-offset-width: 0px;
 }
 .focus-visible\:border-info-70.focus-visible {
-  --tw-border-opacity: 1;
-  border-color: rgb(3 153 227 / var(--tw-border-opacity));
+  border-color: #0399e3;
+  border-color: var(--aquarium-colors-info-70, #0399e3);
 }
 .focus-visible\:border-info-70:focus-visible {
-  --tw-border-opacity: 1;
-  border-color: rgb(3 153 227 / var(--tw-border-opacity));
+  border-color: #0399e3;
+  border-color: var(--aquarium-colors-info-70, #0399e3);
 }
 .focus-visible\:bg-grey-0.focus-visible {
-  --tw-bg-opacity: 1;
-  background-color: rgb(247 247 250 / var(--tw-bg-opacity));
+  background-color: #f7f7fa;
+  background-color: var(--aquarium-colors-grey-0, #f7f7fa);
 }
 .focus-visible\:bg-grey-0:focus-visible {
-  --tw-bg-opacity: 1;
-  background-color: rgb(247 247 250 / var(--tw-bg-opacity));
+  background-color: #f7f7fa;
+  background-color: var(--aquarium-colors-grey-0, #f7f7fa);
 }
 .focus-visible\:text-grey-90.focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(41 42 49 / var(--tw-text-opacity));
+  color: #292a31;
+  color: var(--aquarium-colors-grey-90, #292a31);
 }
 .focus-visible\:text-grey-90:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(41 42 49 / var(--tw-text-opacity));
+  color: #292a31;
+  color: var(--aquarium-colors-grey-90, #292a31);
 }
 .focus-visible\:text-grey-80.focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(58 58 68 / var(--tw-text-opacity));
+  color: #3a3a44;
+  color: var(--aquarium-colors-grey-80, #3a3a44);
 }
 .focus-visible\:text-grey-80:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(58 58 68 / var(--tw-text-opacity));
+  color: #3a3a44;
+  color: var(--aquarium-colors-grey-80, #3a3a44);
 }
 .focus-visible\:outline-0.focus-visible {
   outline-width: 0px;
@@ -2419,59 +2684,54 @@ input[type='number'].no-arrows {
   --tw-ring-inset: inset;
 }
 .focus-visible\:ring-primary-100.focus-visible {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(167 0 69 / var(--tw-ring-opacity));
+  --tw-ring-color: var(--aquarium-colors-primary-100, #a70045);
 }
 .focus-visible\:ring-primary-100:focus-visible {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(167 0 69 / var(--tw-ring-opacity));
+  --tw-ring-color: var(--aquarium-colors-primary-100, #a70045);
 }
 .focus-visible\:ring-grey-50.focus-visible {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(120 120 133 / var(--tw-ring-opacity));
+  --tw-ring-color: var(--aquarium-colors-grey-50, #787885);
 }
 .focus-visible\:ring-grey-50:focus-visible {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(120 120 133 / var(--tw-ring-opacity));
+  --tw-ring-color: var(--aquarium-colors-grey-50, #787885);
 }
 .focus-visible\:ring-info-70.focus-visible {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(3 153 227 / var(--tw-ring-opacity));
+  --tw-ring-color: var(--aquarium-colors-info-70, #0399e3);
 }
 .focus-visible\:ring-info-70:focus-visible {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(3 153 227 / var(--tw-ring-opacity));
+  --tw-ring-color: var(--aquarium-colors-info-70, #0399e3);
 }
 .active\:bg-grey-5:active {
-  --tw-bg-opacity: 1;
-  background-color: rgb(237 237 240 / var(--tw-bg-opacity));
+  background-color: #ededf0;
+  background-color: var(--aquarium-colors-grey-5, #ededf0);
 }
 .active\:bg-primary-90:active {
-  --tw-bg-opacity: 1;
-  background-color: rgb(198 4 67 / var(--tw-bg-opacity));
+  background-color: #c60443;
+  background-color: var(--aquarium-colors-primary-90, #c60443);
 }
 .active\:bg-transparent:active {
   background-color: transparent;
+  background-color: var(--aquarium-colors-transparent, transparent);
 }
 .active\:bg-grey-10:active {
-  --tw-bg-opacity: 1;
-  background-color: rgb(225 225 227 / var(--tw-bg-opacity));
+  background-color: #e1e1e3;
+  background-color: var(--aquarium-colors-grey-10, #e1e1e3);
 }
 .active\:text-primary-70:active {
-  --tw-text-opacity: 1;
-  color: rgb(255 53 84 / var(--tw-text-opacity));
+  color: #ff3554;
+  color: var(--aquarium-colors-primary-70, #ff3554);
 }
 .active\:text-grey-80:active {
-  --tw-text-opacity: 1;
-  color: rgb(58 58 68 / var(--tw-text-opacity));
+  color: #3a3a44;
+  color: var(--aquarium-colors-grey-80, #3a3a44);
 }
 .active\:text-grey-50:active {
-  --tw-text-opacity: 1;
-  color: rgb(120 120 133 / var(--tw-text-opacity));
+  color: #787885;
+  color: var(--aquarium-colors-grey-50, #787885);
 }
 .active\:text-grey-70:active {
-  --tw-text-opacity: 1;
-  color: rgb(74 75 87 / var(--tw-text-opacity));
+  color: #4a4b57;
+  color: var(--aquarium-colors-grey-70, #4a4b57);
 }
 .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);
@@ -2480,50 +2740,49 @@ input[type='number'].no-arrows {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
 }
 .active\:ring-grey-50:active {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(120 120 133 / var(--tw-ring-opacity));
+  --tw-ring-color: var(--aquarium-colors-grey-50, #787885);
 }
 .disabled\:cursor-not-allowed:disabled {
   cursor: not-allowed;
 }
 .disabled\:border-grey-20:disabled {
-  --tw-border-opacity: 1;
-  border-color: rgb(210 210 214 / var(--tw-border-opacity));
+  border-color: #d2d2d6;
+  border-color: var(--aquarium-colors-grey-20, #d2d2d6);
 }
 .disabled\:bg-grey-5:disabled {
-  --tw-bg-opacity: 1;
-  background-color: rgb(237 237 240 / var(--tw-bg-opacity));
+  background-color: #ededf0;
+  background-color: var(--aquarium-colors-grey-5, #ededf0);
 }
 .disabled\:bg-primary-5:disabled {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 232 244 / var(--tw-bg-opacity));
+  background-color: #ffe8f4;
+  background-color: var(--aquarium-colors-primary-5, #ffe8f4);
 }
 .disabled\:bg-grey-0:disabled {
-  --tw-bg-opacity: 1;
-  background-color: rgb(247 247 250 / var(--tw-bg-opacity));
+  background-color: #f7f7fa;
+  background-color: var(--aquarium-colors-grey-0, #f7f7fa);
 }
 .disabled\:bg-transparent:disabled {
   background-color: transparent;
+  background-color: var(--aquarium-colors-transparent, transparent);
 }
 .disabled\:text-grey-40:disabled {
-  --tw-text-opacity: 1;
-  color: rgb(150 150 160 / var(--tw-text-opacity));
+  color: #9696a0;
+  color: var(--aquarium-colors-grey-40, #9696a0);
 }
 .disabled\:text-primary-40:disabled {
-  --tw-text-opacity: 1;
-  color: rgb(255 141 176 / var(--tw-text-opacity));
+  color: #ff8db0;
+  color: var(--aquarium-colors-primary-40, #ff8db0);
 }
 .disabled\:text-grey-30:disabled {
-  --tw-text-opacity: 1;
-  color: rgb(180 180 187 / var(--tw-text-opacity));
+  color: #b4b4bb;
+  color: var(--aquarium-colors-grey-30, #b4b4bb);
 }
 .disabled\:text-grey-20:disabled {
-  --tw-text-opacity: 1;
-  color: rgb(210 210 214 / var(--tw-text-opacity));
+  color: #d2d2d6;
+  color: var(--aquarium-colors-grey-20, #d2d2d6);
 }
 .disabled\:ring-grey-20:disabled {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(210 210 214 / var(--tw-ring-opacity));
+  --tw-ring-color: var(--aquarium-colors-grey-20, #d2d2d6);
 }
 .group:last-child .group-last\:border-b-0 {
   border-bottom-width: 0px;
@@ -2532,8 +2791,8 @@ input[type='number'].no-arrows {
   visibility: visible;
 }
 .group:hover .group-hover\:bg-grey-0 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(247 247 250 / var(--tw-bg-opacity));
+  background-color: #f7f7fa;
+  background-color: var(--aquarium-colors-grey-0, #f7f7fa);
 }
 .peer\/switch:checked~.peer-checked\/switch\:left-1 {
   left: 2px;
@@ -2547,54 +2806,57 @@ input[type='number'].no-arrows {
   border-color: rgb(48 55 94 / var(--tw-border-opacity));
 }
 .peer:checked~.peer-checked\:text-white {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+  color: white;
+  color: var(--aquarium-colors-white, white);
 }
 .peer:checked~.peer-checked\:text-grey-30 {
-  --tw-text-opacity: 1;
-  color: rgb(180 180 187 / var(--tw-text-opacity));
+  color: #b4b4bb;
+  color: var(--aquarium-colors-grey-30, #b4b4bb);
 }
 .peer:hover~.peer-hover\:border-grey-50 {
-  --tw-border-opacity: 1;
-  border-color: rgb(120 120 133 / var(--tw-border-opacity));
+  border-color: #787885;
+  border-color: var(--aquarium-colors-grey-50, #787885);
 }
 .peer:focus~.peer-focus\:border-info-70 {
-  --tw-border-opacity: 1;
-  border-color: rgb(3 153 227 / var(--tw-border-opacity));
+  border-color: #0399e3;
+  border-color: var(--aquarium-colors-info-70, #0399e3);
 }
 .peer\/switch:disabled~.peer-disabled\/switch\:bg-grey-0 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(247 247 250 / var(--tw-bg-opacity));
+  background-color: #f7f7fa;
+  background-color: var(--aquarium-colors-grey-0, #f7f7fa);
 }
 .children\:inline-block>* {
   display: inline-block;
 }
 .children\:border-grey-10>* {
-  --tw-border-opacity: 1;
-  border-color: rgb(225 225 227 / var(--tw-border-opacity));
+  border-color: #e1e1e3;
+  border-color: var(--aquarium-colors-grey-10, #e1e1e3);
 }
 .children\:last\:border-b-0:last-child>* {
   border-bottom-width: 0px;
 }
 .\[\&\>path\]\:stroke-transparent>path {
   stroke: transparent;
+  stroke: var(--aquarium-colors-transparent, transparent);
 }
 .peer:checked~.peer-checked\:\[\&\>path\]\:stroke-white>path {
   stroke: white;
+  stroke: var(--aquarium-colors-white, white);
 }
 .peer:checked~.peer-checked\:\[\&\>path\]\:stroke-grey-30>path {
   stroke: #b4b4bb;
+  stroke: var(--aquarium-colors-grey-30, #b4b4bb);
 }
 .\[\&\>button\]\:p-0>button {
   padding: 0;
 }
 .\[\&\>button\]\:text-grey-50>button {
-  --tw-text-opacity: 1;
-  color: rgb(120 120 133 / var(--tw-text-opacity));
+  color: #787885;
+  color: var(--aquarium-colors-grey-50, #787885);
 }
 .\[\&\>button\]\:text-error-20>button {
-  --tw-text-opacity: 1;
-  color: rgb(255 173 179 / var(--tw-text-opacity));
+  color: #ffadb3;
+  color: var(--aquarium-colors-error-20, #ffadb3);
 }
 .\[\&\>\*\:not\(\:first-child\)\]\:-ml-3>*:not(:first-child) {
   margin-left: -8px;