@aivenio/aquarium 5.1.0 → 5.2.0

package/dist/styles.css

@@ -659,10 +659,13 @@ video {
   --aquarium-background-color-popover-content: var(--aquarium-colors-white);
   --aquarium-background-color-muted: var(--aquarium-colors-grey-0);
   --aquarium-background-color-default: var(--aquarium-colors-grey-5);
+  --aquarium-background-color-medium: var(--aquarium-colors-grey-5);
   --aquarium-background-color-intense: var(--aquarium-colors-grey-20);
   --aquarium-background-color-primary-muted: var(--aquarium-colors-primary-40);
   --aquarium-background-color-primary-default: var(--aquarium-colors-primary-80);
+  --aquarium-background-color-primary-graphic: var(--aquarium-colors-primary-80);
   --aquarium-background-color-primary-intense: var(--aquarium-colors-primary-90);
+  --aquarium-background-color-primary-inverse: var(--aquarium-colors-primary-90);
   --aquarium-background-color-primary-active: var(--aquarium-colors-primary-5);
   --aquarium-background-color-primary-hover: var(--aquarium-colors-primary-5);
   --aquarium-background-color-action-primary-button-default: var(--aquarium-colors-primary-80);
@@ -2513,6 +2516,10 @@ video {
   background-color: white;
   background-color: var(--aquarium-background-color-layer);
 }
+.bg-medium{
+  background-color: rgba(237,237,240,1);
+  background-color: var(--aquarium-background-color-medium);
+}
 .bg-muted{
   background-color: rgba(247,247,250,1);
   background-color: var(--aquarium-background-color-muted);
@@ -2581,6 +2588,10 @@ video {
   background-color: rgba(53,69,190,1);
   background-color: var(--aquarium-background-color-primary-default);
 }
+.bg-primary-graphic{
+  background-color: rgba(53,69,190,1);
+  background-color: var(--aquarium-background-color-primary-graphic);
+}
 .bg-primary-hover{
   background-color: rgba(243,246,255,1);
   background-color: var(--aquarium-background-color-primary-hover);
@@ -2589,6 +2600,10 @@ video {
   background-color: rgba(34,47,149,1);
   background-color: var(--aquarium-background-color-primary-intense);
 }
+.bg-primary-inverse{
+  background-color: rgba(34,47,149,1);
+  background-color: var(--aquarium-background-color-primary-inverse);
+}
 .bg-primary-muted{
   background-color: rgba(185,197,239,1);
   background-color: var(--aquarium-background-color-primary-muted);
@@ -3753,10 +3768,13 @@ input[type="number"].no-arrows{
   --aquarium-background-color-overlay: var(--aquarium-colors-grey-90);
   --aquarium-background-color-muted: var(--aquarium-colors-grey-90);
   --aquarium-background-color-default: var(--aquarium-colors-grey-80);
+  --aquarium-background-color-medium: var(--aquarium-colors-grey-80);
   --aquarium-background-color-intense: var(--aquarium-colors-grey-20);
   --aquarium-background-color-primary-muted: var(--aquarium-colors-primary-90);
   --aquarium-background-color-primary-default: var(--aquarium-colors-primary-60);
+  --aquarium-background-color-primary-graphic: var(--aquarium-colors-primary-60);
   --aquarium-background-color-primary-intense: var(--aquarium-colors-primary-10);
+  --aquarium-background-color-primary-inverse: var(--aquarium-colors-primary-10);
   --aquarium-background-color-primary-active: var(--aquarium-colors-primary-90);
   --aquarium-background-color-primary-hover: var(--aquarium-colors-primary-90);
   --aquarium-background-color-action-primary-button-default: var(--aquarium-colors-primary-90);
@@ -3825,19 +3843,18 @@ input[type="number"].no-arrows{
     }
 .aquarium-theme-dark .Aquarium-Switch {
     --aquarium-background-color-intense: var(--aquarium-colors-grey-70);
-    --aquarium-background-color-primary-intense: var(--aquarium-colors-primary-60);
+    --aquarium-background-color-primary-inverse: var(--aquarium-colors-primary-60);
   }
 .aquarium-theme-dark .Aquarium-Button\.Primary:disabled {
-      color: rgba(53,69,190,1);
-      color: var(--aquarium-text-color-primary-intense);
+      color: var(--aquarium-text-color-primary-inverse);
     }
 .aquarium-theme-dark .Aquarium-Checkbox input:disabled {
       background-color: rgba(237,237,240,1);
-      background-color: var(--aquarium-background-color-default);
+      background-color: var(--aquarium-background-color-medium);
     }
 .aquarium-theme-dark .Aquarium-Checkbox input:disabled + svg {
         background-color: rgba(237,237,240,1);
-        background-color: var(--aquarium-background-color-default);
+        background-color: var(--aquarium-background-color-medium);
         border-color: rgba(247,247,250,1);
         border-color: var(--aquarium-background-color-muted);
       }
@@ -3850,14 +3867,14 @@ input[type="number"].no-arrows{
       stroke: var(--aquarium-border-color-default);
     }
 .aquarium-theme-dark .Aquarium-Button\.Secondary {
-    --tw-ring-color: var(--aquarium-text-color-primary-intense);
+    --tw-ring-color: var(--aquarium-text-color-primary-inverse);
   }
 .aquarium-theme-dark .Aquarium-Button\.Secondary:active,
     .aquarium-theme-dark .Aquarium-Button\.Secondary:hover {
       background-color: transparent;
       color: rgba(34,47,149,1);
-      color: var(--aquarium-background-color-primary-intense);
-      --tw-ring-color: var(--aquarium-background-color-primary-intense);
+      color: var(--aquarium-background-color-primary-inverse);
+      --tw-ring-color: var(--aquarium-background-color-primary-inverse);
     }
 .aquarium-theme-dark .Aquarium-Button\.Secondary:focus {
       --tw-ring-color: var(--aquarium-border-color-primary-default);
@@ -3889,7 +3906,7 @@ input[type="number"].no-arrows{
     .aquarium-theme-dark .Aquarium-Select\.Item.bg-muted,
     .aquarium-theme-dark .Aquarium-Select\.Item.hover\:bg-muted:hover{
       background-color: rgba(237,237,240,1);
-      background-color: var(--aquarium-background-color-default);
+      background-color: var(--aquarium-background-color-medium);
     }
 .aquarium-theme-dark .Aquarium-Card {
     --aquarium-background-color-primary-hover: color-mix(in srgb, var(--aquarium-colors-primary-100) 70%, transparent);
@@ -3923,10 +3940,10 @@ input[type="number"].no-arrows{
       --aquarium-colors-white: var(--aquarium-background-color-muted);
     }
 .aquarium-theme-dark .Aquarium-Modal .Aquarium-Banner, .aquarium-theme-dark .Aquarium-Dialog .Aquarium-Banner, .aquarium-theme-dark .Aquarium-Drawer .Aquarium-Banner, .aquarium-theme-dark .Aquarium-Popover .Aquarium-Banner {
-      --aquarium-background-color-muted: var(--aquarium-background-color-default);
+      --aquarium-background-color-muted: var(--aquarium-background-color-medium);
     }
 .aquarium-theme-dark .Aquarium-Modal .Aquarium-InputChip, .aquarium-theme-dark .Aquarium-Dialog .Aquarium-InputChip, .aquarium-theme-dark .Aquarium-Drawer .Aquarium-InputChip, .aquarium-theme-dark .Aquarium-Popover .Aquarium-InputChip {
-      --aquarium-background-color-muted: var(--aquarium-background-color-default);
+      --aquarium-background-color-muted: var(--aquarium-background-color-medium);
     }
 .aquarium-theme-dark .Aquarium-Modal .Aquarium-InputChip [role="button"]:hover, .aquarium-theme-dark .Aquarium-Modal .Aquarium-InputChip [role="button"]:focus, .aquarium-theme-dark .Aquarium-Dialog .Aquarium-InputChip [role="button"]:hover, .aquarium-theme-dark .Aquarium-Dialog .Aquarium-InputChip [role="button"]:focus, .aquarium-theme-dark .Aquarium-Drawer .Aquarium-InputChip [role="button"]:hover, .aquarium-theme-dark .Aquarium-Drawer .Aquarium-InputChip [role="button"]:focus, .aquarium-theme-dark .Aquarium-Popover .Aquarium-InputChip [role="button"]:hover, .aquarium-theme-dark .Aquarium-Popover .Aquarium-InputChip [role="button"]:focus {
         --aquarium-background-color-intense: var(--aquarium-background-color-inactive);
@@ -3960,7 +3977,7 @@ input[type="number"].no-arrows{
 .aquarium-theme-dark .Aquarium-Modal .Aquarium-DataList [role="row"]:hover > *:not([role="columnheader"]), 
     .aquarium-theme-dark .Aquarium-Modal .Aquarium-DataTable tbody tr:hover > *:not([role="columnheader"]) {
       background-color: rgba(237,237,240,1);
-      background-color: var(--aquarium-background-color-default);
+      background-color: var(--aquarium-background-color-medium);
     }
 .file\:typography-small-strong::file-selector-button{
   font: normal 500 14px/1.42 Inter;
@@ -4132,9 +4149,9 @@ input[type="number"].no-arrows{
   border-color: transparent;
   border-color: var(--aquarium-colors-transparent);
 }
-.checked\:bg-primary-default:checked{
+.checked\:bg-primary-graphic:checked{
   background-color: rgba(53,69,190,1);
-  background-color: var(--aquarium-background-color-primary-default);
+  background-color: var(--aquarium-background-color-primary-graphic);
 }
 .checked\:bg-primary-muted:checked{
   background-color: rgba(185,197,239,1);
@@ -4268,10 +4285,6 @@ input[type="number"].no-arrows{
   background-color: rgba(255,203,210,1);
   background-color: var(--aquarium-background-color-danger-muted);
 }
-.hover\:bg-default:where([data-rac])[data-hovered]{
-  background-color: rgba(237,237,240,1);
-  background-color: var(--aquarium-background-color-default);
-}
 .hover\:bg-icon-button-hover:where([data-rac])[data-hovered]{
   background-color: rgba(25,25,29,.05);
   background-color: var(--aquarium-background-color-icon-button-hover);
@@ -4280,6 +4293,10 @@ input[type="number"].no-arrows{
   background-color: rgba(210,210,214,1);
   background-color: var(--aquarium-background-color-intense);
 }
+.hover\:bg-medium:where([data-rac])[data-hovered]{
+  background-color: rgba(237,237,240,1);
+  background-color: var(--aquarium-background-color-medium);
+}
 .hover\:bg-muted:where([data-rac])[data-hovered]{
   background-color: rgba(247,247,250,1);
   background-color: var(--aquarium-background-color-muted);
@@ -4300,9 +4317,9 @@ input[type="number"].no-arrows{
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
 }
-.hover\:checked\:bg-primary-intense:checked:where([data-rac])[data-hovered]{
+.hover\:checked\:bg-primary-inverse:checked:where([data-rac])[data-hovered]{
   background-color: rgba(34,47,149,1);
-  background-color: var(--aquarium-background-color-primary-intense);
+  background-color: var(--aquarium-background-color-primary-inverse);
 }
 .hover\:cursor-pointer:where(:not([data-rac])):hover{
   cursor: pointer;
@@ -4319,10 +4336,6 @@ input[type="number"].no-arrows{
   background-color: rgba(255,203,210,1);
   background-color: var(--aquarium-background-color-danger-muted);
 }
-.hover\:bg-default:where(:not([data-rac])):hover{
-  background-color: rgba(237,237,240,1);
-  background-color: var(--aquarium-background-color-default);
-}
 .hover\:bg-icon-button-hover:where(:not([data-rac])):hover{
   background-color: rgba(25,25,29,.05);
   background-color: var(--aquarium-background-color-icon-button-hover);
@@ -4331,6 +4344,10 @@ input[type="number"].no-arrows{
   background-color: rgba(210,210,214,1);
   background-color: var(--aquarium-background-color-intense);
 }
+.hover\:bg-medium:where(:not([data-rac])):hover{
+  background-color: rgba(237,237,240,1);
+  background-color: var(--aquarium-background-color-medium);
+}
 .hover\:bg-muted:where(:not([data-rac])):hover{
   background-color: rgba(247,247,250,1);
   background-color: var(--aquarium-background-color-muted);
@@ -4351,24 +4368,24 @@ input[type="number"].no-arrows{
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
 }
-.hover\:checked\:bg-primary-intense:checked:where(:not([data-rac])):hover{
+.hover\:checked\:bg-primary-inverse:checked:where(:not([data-rac])):hover{
   background-color: rgba(34,47,149,1);
-  background-color: var(--aquarium-background-color-primary-intense);
+  background-color: var(--aquarium-background-color-primary-inverse);
 }
 .group:where([data-rac])[data-hovered] .group-hover\:visible{
   visibility: visible;
 }
-.group:where([data-rac])[data-hovered] .group-hover\:bg-default{
+.group:where([data-rac])[data-hovered] .group-hover\:bg-medium{
   background-color: rgba(237,237,240,1);
-  background-color: var(--aquarium-background-color-default);
+  background-color: var(--aquarium-background-color-medium);
 }
 .group:where([data-rac])[data-hovered] .group-hover\:bg-muted{
   background-color: rgba(247,247,250,1);
   background-color: var(--aquarium-background-color-muted);
 }
-.group:where([data-rac])[data-hovered] .group-hover\:bg-primary-default{
+.group:where([data-rac])[data-hovered] .group-hover\:bg-primary-graphic{
   background-color: rgba(53,69,190,1);
-  background-color: var(--aquarium-background-color-primary-default);
+  background-color: var(--aquarium-background-color-primary-graphic);
 }
 .group:where([data-rac])[data-hovered] .group-hover\:opacity-100{
   opacity: 1;
@@ -4376,17 +4393,17 @@ input[type="number"].no-arrows{
 .group:where(:not([data-rac])):hover .group-hover\:visible{
   visibility: visible;
 }
-.group:where(:not([data-rac])):hover .group-hover\:bg-default{
+.group:where(:not([data-rac])):hover .group-hover\:bg-medium{
   background-color: rgba(237,237,240,1);
-  background-color: var(--aquarium-background-color-default);
+  background-color: var(--aquarium-background-color-medium);
 }
 .group:where(:not([data-rac])):hover .group-hover\:bg-muted{
   background-color: rgba(247,247,250,1);
   background-color: var(--aquarium-background-color-muted);
 }
-.group:where(:not([data-rac])):hover .group-hover\:bg-primary-default{
+.group:where(:not([data-rac])):hover .group-hover\:bg-primary-graphic{
   background-color: rgba(53,69,190,1);
-  background-color: var(--aquarium-background-color-primary-default);
+  background-color: var(--aquarium-background-color-primary-graphic);
 }
 .group:where(:not([data-rac])):hover .group-hover\:opacity-100{
   opacity: 1;
@@ -4435,14 +4452,14 @@ input[type="number"].no-arrows{
   background-color: rgba(255,173,179,1);
   background-color: var(--aquarium-background-color-danger-default);
 }
-.focus\:bg-default:where([data-rac])[data-focused]{
-  background-color: rgba(237,237,240,1);
-  background-color: var(--aquarium-background-color-default);
-}
 .focus\:bg-intense:where([data-rac])[data-focused]{
   background-color: rgba(210,210,214,1);
   background-color: var(--aquarium-background-color-intense);
 }
+.focus\:bg-medium:where([data-rac])[data-focused]{
+  background-color: rgba(237,237,240,1);
+  background-color: var(--aquarium-background-color-medium);
+}
 .focus\:text-primary-intense:where([data-rac])[data-focused]{
   color: rgba(53,69,190,1);
   color: var(--aquarium-text-color-primary-intense);
@@ -4469,14 +4486,14 @@ input[type="number"].no-arrows{
   background-color: rgba(255,173,179,1);
   background-color: var(--aquarium-background-color-danger-default);
 }
-.focus\:bg-default:where(:not([data-rac])):focus{
-  background-color: rgba(237,237,240,1);
-  background-color: var(--aquarium-background-color-default);
-}
 .focus\:bg-intense:where(:not([data-rac])):focus{
   background-color: rgba(210,210,214,1);
   background-color: var(--aquarium-background-color-intense);
 }
+.focus\:bg-medium:where(:not([data-rac])):focus{
+  background-color: rgba(237,237,240,1);
+  background-color: var(--aquarium-background-color-medium);
+}
 .focus\:text-primary-intense:where(:not([data-rac])):focus{
   color: rgba(53,69,190,1);
   color: var(--aquarium-text-color-primary-intense);
@@ -4682,9 +4699,9 @@ input[type="number"].no-arrows{
   background-color: rgba(210,210,214,1);
   background-color: var(--aquarium-background-color-intense);
 }
-.group[data-pressed] .group-pressed\:bg-primary-intense{
+.group[data-pressed] .group-pressed\:bg-primary-inverse{
   background-color: rgba(34,47,149,1);
-  background-color: var(--aquarium-background-color-primary-intense);
+  background-color: var(--aquarium-background-color-primary-inverse);
 }
 .group:where([data-rac])[data-invalid][data-pressed] .group-invalid\:group-pressed\:bg-danger-intense{
   background-color: rgba(230,39,40,1);
@@ -4694,9 +4711,9 @@ input[type="number"].no-arrows{
   background-color: rgba(230,39,40,1);
   background-color: var(--aquarium-background-color-danger-intense);
 }
-.selected\:bg-primary-default[data-selected]{
+.selected\:bg-primary-graphic[data-selected]{
   background-color: rgba(53,69,190,1);
-  background-color: var(--aquarium-background-color-primary-default);
+  background-color: var(--aquarium-background-color-primary-graphic);
 }
 .invalid\:selected\:bg-danger-default[data-selected]:where([data-rac])[data-invalid]{
   background-color: rgba(255,173,179,1);
@@ -4733,9 +4750,9 @@ input[type="number"].no-arrows{
   background-color: white;
   background-color: var(--aquarium-background-color-body);
 }
-.disabled\:bg-default:where([data-rac])[data-disabled]{
+.disabled\:bg-medium:where([data-rac])[data-disabled]{
   background-color: rgba(237,237,240,1);
-  background-color: var(--aquarium-background-color-default);
+  background-color: var(--aquarium-background-color-medium);
 }
 .disabled\:bg-muted:where([data-rac])[data-disabled]{
   background-color: rgba(247,247,250,1);
@@ -4773,9 +4790,9 @@ input[type="number"].no-arrows{
   background-color: white;
   background-color: var(--aquarium-background-color-body);
 }
-.disabled\:bg-default:where(:not([data-rac])):disabled{
+.disabled\:bg-medium:where(:not([data-rac])):disabled{
   background-color: rgba(237,237,240,1);
-  background-color: var(--aquarium-background-color-default);
+  background-color: var(--aquarium-background-color-medium);
 }
 .disabled\:bg-muted:where(:not([data-rac])):disabled{
   background-color: rgba(247,247,250,1);
@@ -4860,10 +4877,10 @@ input[type="number"].no-arrows{
   content: var(--tw-content);
   height: 1px;
 }
-.\[\&\:not\(\:first-child\)\]\:before\:bg-default:not(:first-child)::before{
+.\[\&\:not\(\:first-child\)\]\:before\:bg-medium:not(:first-child)::before{
   content: var(--tw-content);
   background-color: rgba(237,237,240,1);
-  background-color: var(--aquarium-background-color-default);
+  background-color: var(--aquarium-background-color-medium);
 }
 .\[\&\:not\(\:first-child\)\]\:before\:content-\[\"\"\]:not(:first-child)::before{
   --tw-content: "";

package/dist/system.cjs

@@ -4617,7 +4617,7 @@ var inputContainerClasses = (0, import_tailwind_variants.tv)({
   variants: {
     variant: {
       default: "border px-3 py-[6px] border-default hover:border-intense bg-transparent",
-      disabled: "border px-3 py-[6px] cursor-not-allowed border-default bg-default",
+      disabled: "border px-3 py-[6px] cursor-not-allowed border-default bg-medium",
       error: "border px-3 py-[6px] border-danger-default bg-transparent",
       focused: "border px-3 py-[6px] border-info-default bg-transparent",
       readOnly: "cursor-default border-default bg-transparent"
@@ -4625,7 +4625,7 @@ var inputContainerClasses = (0, import_tailwind_variants.tv)({
   }
 });
 var inputClasses = (0, import_tailwind_variants.tv)({
-  base: "grow rounded border-0 focus:outline-none px-[1px] my-1 min-w-0 typography-small bg-transparent disabled:cursor-not-allowed disabled:bg-default placeholder:text-inactive",
+  base: "grow rounded border-0 focus:outline-none px-[1px] my-1 min-w-0 typography-small bg-transparent disabled:cursor-not-allowed disabled:bg-medium placeholder:text-inactive",
   variants: {
     disabled: {
       true: "text-inactive",
@@ -5561,7 +5561,9 @@ var tailwind_theme_default = {
       "100": "var(--aquarium-colors-primary-100)",
       muted: "var(--aquarium-background-color-primary-muted)",
       default: "var(--aquarium-background-color-primary-default)",
+      graphic: "var(--aquarium-background-color-primary-graphic)",
       intense: "var(--aquarium-background-color-primary-intense)",
+      inverse: "var(--aquarium-background-color-primary-inverse)",
       active: "var(--aquarium-background-color-primary-active)",
       hover: "var(--aquarium-background-color-primary-hover)"
     },
@@ -5573,6 +5575,7 @@ var tailwind_theme_default = {
     "popover-content": "var(--aquarium-background-color-popover-content)",
     muted: "var(--aquarium-background-color-muted)",
     default: "var(--aquarium-background-color-default)",
+    medium: "var(--aquarium-background-color-medium)",
     intense: "var(--aquarium-background-color-intense)",
     action: {
       "primary-button": {
@@ -6094,11 +6097,14 @@ var tokens_default = {
     "popover-content": "white",
     muted: "rgba(247,247,250,1)",
     default: "rgba(237,237,240,1)",
+    medium: "rgba(237,237,240,1)",
     intense: "rgba(210,210,214,1)",
     primary: {
       muted: "rgba(185,197,239,1)",
       default: "rgba(53,69,190,1)",
+      graphic: "rgba(53,69,190,1)",
       intense: "rgba(34,47,149,1)",
+      inverse: "rgba(34,47,149,1)",
       active: "rgba(243,246,255,1)",
       hover: "rgba(243,246,255,1)"
     },
@@ -6982,7 +6988,7 @@ var import_tailwind_variants3 = require("tailwind-variants");
 var import_clsx3 = require("clsx");
 var import_tailwind_variants2 = require("tailwind-variants");
 var getCommonInputStyles = ({ readOnly, valid }) => (0, import_clsx3.clsx)(
-  "block w-full rounded-sm disabled:cursor-not-allowed disabled:border-default disabled:bg-default typography-small text-default disabled:text-inactive placeholder:text-inactive focus:outline-none",
+  "block w-full rounded-sm disabled:cursor-not-allowed disabled:border-default disabled:bg-medium typography-small text-default disabled:text-inactive placeholder:text-inactive focus:outline-none",
   {
     "px-3 py-3 bg-transparent": !readOnly,
     "border-none resize-none cursor-default bg-transparent": readOnly,
@@ -8060,7 +8066,7 @@ var import_react31 = __toESM(require("react"));
 var import_lodash_es9 = require("lodash-es");
 var import_tailwind_variants7 = require("tailwind-variants");
 var skeletonStyles = (0, import_tailwind_variants7.tv)({
-  base: "bg-default",
+  base: "bg-medium",
   variants: {
     hasHeight: {
       false: "h-auto before:content-['_'] whitespace-pre origin-[0%_45%] scale-[0.55]"
@@ -8364,7 +8370,7 @@ var getStatusClassNames = (status = "neutral") => {
       return "text-success-intense bg-status-success";
     case "neutral":
     default:
-      return "text-default bg-default";
+      return "text-default bg-medium";
   }
 };
 var Chip2 = ({
@@ -8705,7 +8711,7 @@ var checkboxClasses = (0, import_tailwind_variants11.tv)({
       },
       false: {
         wrapper: "hover:border-intense peer-checked:border-primary-default",
-        input: "cursor-pointer checked:bg-primary-default",
+        input: "cursor-pointer checked:bg-primary-graphic",
         icon: "border-default peer-hover:border-intense peer-checked:text-white peer-checked:[&>path]:stroke-white peer-checked:border-primary-default"
       }
     }
@@ -8734,7 +8740,7 @@ var Checkbox = import_react42.default.forwardRef(
 var import_react43 = __toESM(require("react"));
 var import_tailwind_variants12 = require("tailwind-variants");
 var radioButtonClasses = (0, import_tailwind_variants12.tv)({
-  base: "inline-flex justify-center items-center self-center appearance-none w-5 h-5 p-[3px] rounded-full border border-default outline-none focus:border-info-default checked:bg-primary-default checked:shadow-bodyInset",
+  base: "inline-flex justify-center items-center self-center appearance-none w-5 h-5 p-[3px] rounded-full border border-default outline-none focus:border-info-default checked:bg-primary-graphic checked:shadow-bodyInset",
   variants: {
     disabled: {
       true: "cursor-not-allowed border-muted bg-muted checked:bg-primary-muted checked:border-transparent",
@@ -11362,7 +11368,7 @@ var dropdownMenuGroupStyles = (0, import_tailwind_variants17.tv)({
   slots: {
     base: [
       '[&:not(:first-child)]:before:content-[""] [&:not(:first-child)]:before:block',
-      "[&:not(:first-child)]:before:h-[1px] [&:not(:first-child)]:before:bg-default [&:not(:first-child)]:before:m-3"
+      "[&:not(:first-child)]:before:h-[1px] [&:not(:first-child)]:before:bg-medium [&:not(:first-child)]:before:m-3"
     ],
     title: "p-3 text-inactive uppercase cursor-default typography-caption"
   }
@@ -11468,7 +11474,7 @@ var fieldBorder = (0, import_tailwind_variants18.tv)({
       true: "border-danger-default"
     },
     isDisabled: {
-      true: "bg-default cursor-not-allowed text-inactive"
+      true: "bg-medium cursor-not-allowed text-inactive"
     }
   }
 });
@@ -12566,8 +12572,8 @@ var cellStyles = (0, import_tailwind_variants21.tv)({
   base: "w-8 h-8 typography-small cursor-default rounded-md flex items-center justify-center outside-month:hidden",
   variants: {
     isSelected: {
-      false: "text-default hover:bg-default pressed:bg-intense",
-      true: "bg-primary-default invalid:bg-danger-default text-white"
+      false: "text-default hover:bg-medium pressed:bg-intense",
+      true: "bg-primary-graphic invalid:bg-danger-default text-white"
     },
     isUnavailable: {
       true: "text-inactive"
@@ -15253,7 +15259,7 @@ var import_tailwind_variants23 = require("tailwind-variants");
 var cellContainer = (0, import_tailwind_variants23.tv)({
   base: [
     "group w-8 h-8 typography-small outline outline-0 cursor-default",
-    "outside-month:hidden selected:bg-primary-default",
+    "outside-month:hidden selected:bg-primary-graphic",
     "invalid:selected:bg-danger-default",
     "selection-start:rounded-s-md selection-end:rounded-e-md"
   ]
@@ -15263,15 +15269,15 @@ var cell = (0, import_tailwind_variants23.tv)({
   base: "w-full h-full flex items-center justify-center rounded-md text-default",
   variants: {
     selectionState: {
-      none: "group-hover:bg-default group-pressed:bg-intense",
+      none: "group-hover:bg-medium group-pressed:bg-intense",
       middle: [
         "text-white",
-        "group-hover:bg-primary-default",
+        "group-hover:bg-primary-graphic",
         "group-invalid:group-hover:bg-danger-default",
-        "group-pressed:bg-primary-intense",
+        "group-pressed:bg-primary-inverse",
         "group-invalid:group-pressed:bg-danger-intense"
       ],
-      cap: "text-white bg-primary-default group-invalid:bg-danger-default"
+      cap: "text-white bg-primary-graphic group-invalid:bg-danger-default"
     },
     isUnavailable: {
       true: "text-inactive"
@@ -15479,7 +15485,7 @@ var modalStyles = (0, import_tailwind_variants24.tv)({
         headerImage: "object-cover"
       },
       false: {
-        headerImage: "bg-default"
+        headerImage: "bg-medium"
       }
     }
   },
@@ -16305,7 +16311,7 @@ var FilterClearButton = ({ onClear }) => (
         }
         onClear();
       },
-      className: "py-[10px] pl-[6px] pr-4 inline-flex items-center hover:bg-default focus:bg-default outline-0 outline-none rounded-r-full"
+      className: "py-[10px] pl-[6px] pr-4 inline-flex items-center hover:bg-medium focus:bg-medium outline-0 outline-none rounded-r-full"
     },
     /* @__PURE__ */ import_react107.default.createElement(InlineIcon, { icon: import_cross7.default })
   )
@@ -16376,7 +16382,7 @@ var ListItem = ({ name, icon, active = false }) => {
       variant: active ? "small-strong" : "small",
       color: "default",
       htmlTag: "span",
-      className: `px-4 py-2 rounded-full ${active ? "bg-default" : "hover:bg-muted"}`
+      className: `px-4 py-2 rounded-full ${active ? "bg-medium" : "hover:bg-muted"}`
     },
     /* @__PURE__ */ import_react110.default.createElement("img", { src: icon, alt: "", className: "inline mr-4", height: 28, width: 28 }),
     name
@@ -16462,7 +16468,7 @@ var InputChip = import_react112.default.forwardRef(
           {
             "bg-status-danger": invalid,
             "bg-muted": !invalid && !disabled,
-            "bg-default": disabled
+            "bg-medium": disabled
           }
         )
       },
@@ -16960,7 +16966,7 @@ var NativeSelectBase = import_react115.default.forwardRef(
         className: (0, import_clsx37.clsx)(
           "block w-full rounded-sm appearance-none disabled:cursor-not-allowed typography-small text-default placeholder:text-inactive focus:outline-none",
           {
-            "px-3 py-3 bg-transparent disabled:border-default disabled:bg-default disabled:text-inactive": !readOnly,
+            "px-3 py-3 bg-transparent disabled:border-default disabled:bg-medium disabled:text-inactive": !readOnly,
             "px-0 py-3 border-none bg-transparent": readOnly,
             "border border-danger-default": !valid && !readOnly,
             "border border-default hover:border-intense focus:border-info-default": valid && !readOnly
@@ -17039,9 +17045,9 @@ var navigationClasses = (0, import_tailwind_variants26.tv)({
     sectionList: "flex flex-col",
     divider: "border-t-2 border-muted",
     itemContainer: "",
-    itemAnchor: "py-3 px-6 hover:bg-default cursor-pointer flex gap-4 items-center typography-small focusable",
+    itemAnchor: "py-3 px-6 hover:bg-medium cursor-pointer flex gap-4 items-center typography-small focusable",
     submenuContainer: "",
-    submenuAnchor: "py-3 pr-6 pl-3 hover:bg-default cursor-pointer typography-small focusable flex items-center w-full",
+    submenuAnchor: "py-3 pr-6 pl-3 hover:bg-medium cursor-pointer typography-small focusable flex items-center w-full",
     submenuList: "flex flex-col",
     submenuItem: "pl-[56px]"
   },
@@ -17462,10 +17468,10 @@ var switchStyles = (0, import_tailwind_variants29.tv)({
   variants: {
     disabled: {
       true: {
-        input: "bg-default checked:opacity-50 checked:bg-primary-muted"
+        input: "bg-medium checked:opacity-50 checked:bg-primary-muted"
       },
       false: {
-        input: "bg-intense hover:bg-intense checked:bg-primary-default hover:checked:bg-primary-intense",
+        input: "bg-intense hover:bg-intense checked:bg-primary-graphic hover:checked:bg-primary-inverse",
         thumb: "shadow-4dp"
       }
     }
@@ -17532,14 +17538,14 @@ var import_clsx41 = require("clsx");
 var getVariantClassNames = (variant = "primary") => {
   switch (variant) {
     case "neutral":
-      return "bg-default";
+      return "bg-medium";
     case "danger":
       return "bg-danger-intense";
     case "success":
       return "bg-success-intense";
     case "primary":
     default:
-      return "bg-primary-default";
+      return "bg-primary-graphic";
   }
 };
 var TagLabel = ({ title, dense = false, variant, ...rest }) => /* @__PURE__ */ import_react129.default.createElement(
@@ -18017,7 +18023,7 @@ var Timeline = ({ className, ...rest }) => /* @__PURE__ */ import_react137.defau
 var Content2 = ({ className, ...rest }) => /* @__PURE__ */ import_react137.default.createElement("div", { ...rest, className: (0, import_clsx45.clsx)("pb-6", className) });
 var Separator = ({ className, ...rest }) => /* @__PURE__ */ import_react137.default.createElement("div", { ...rest, className: (0, import_clsx45.clsx)("flex items-center justify-center h-5 w-5", className) });
 var LineContainer = ({ className, ...rest }) => /* @__PURE__ */ import_react137.default.createElement("div", { ...rest, className: (0, import_clsx45.clsx)("flex justify-center py-1", className) });
-var Line = ({ className, ...rest }) => /* @__PURE__ */ import_react137.default.createElement("div", { ...rest, className: (0, import_clsx45.clsx)("w-1 bg-default h-full justify-self-center", className) });
+var Line = ({ className, ...rest }) => /* @__PURE__ */ import_react137.default.createElement("div", { ...rest, className: (0, import_clsx45.clsx)("w-1 bg-medium h-full justify-self-center", className) });
 var Dot = ({ className, ...rest }) => /* @__PURE__ */ import_react137.default.createElement("div", { ...rest, className: (0, import_clsx45.clsx)("bg-intense h-[6px] w-[6px] rounded", className) });
 Separator.Dot = Dot;
 LineContainer.Line = Line;