@aivenio/aquarium 1.22.0-rc1 → 1.22.0

package/dist/system.cjs

@@ -714,18 +714,18 @@ var require_tokens = __commonJS({
             "secondary-10": "#fee8d0",
             "secondary-5": "#fff3e8",
             "secondary-0": "#fffbf8",
-            "primary-100": "0e1652",
-            "primary-90": "#222f95",
-            "primary-80": "#3545be",
-            "primary-70": "#5865cd",
-            "primary-60": "#818eec",
-            "primary-50": "#000000",
-            "primary-40": "#b9c5ef",
-            "primary-30": "#000000",
-            "primary-20": "#000000",
-            "primary-10": "#e3e9ff",
-            "primary-5": "#f3f6ff",
-            "primary-0": "#ffffff",
+            "primary-100": "#a70045",
+            "primary-90": "#c60443",
+            "primary-80": "#e41a4a",
+            "primary-70": "#ff3554",
+            "primary-60": "#ff5275",
+            "primary-50": "#ff6f94",
+            "primary-40": "#ff8db0",
+            "primary-30": "#ffa9c9",
+            "primary-20": "#ffc4de",
+            "primary-10": "#ffdeef",
+            "primary-5": "#ffe8f4",
+            "primary-0": "#fff9fc",
             "grey-20": "#d2d2d6"
           },
           typography: {
@@ -5798,18 +5798,18 @@ var tailwind_theme_default = {
     "secondary-10": "var(--aquarium-colors-secondary-10, #fee8d0)",
     "secondary-5": "var(--aquarium-colors-secondary-5, #fff3e8)",
     "secondary-0": "var(--aquarium-colors-secondary-0, #fffbf8)",
-    "primary-100": "var(--aquarium-colors-primary-100, 0e1652)",
-    "primary-90": "var(--aquarium-colors-primary-90, #222f95)",
-    "primary-80": "var(--aquarium-colors-primary-80, #3545be)",
-    "primary-70": "var(--aquarium-colors-primary-70, #5865cd)",
-    "primary-60": "var(--aquarium-colors-primary-60, #818eec)",
-    "primary-50": "var(--aquarium-colors-primary-50, #000000)",
-    "primary-40": "var(--aquarium-colors-primary-40, #b9c5ef)",
-    "primary-30": "var(--aquarium-colors-primary-30, #000000)",
-    "primary-20": "var(--aquarium-colors-primary-20, #000000)",
-    "primary-10": "var(--aquarium-colors-primary-10, #e3e9ff)",
-    "primary-5": "var(--aquarium-colors-primary-5, #f3f6ff)",
-    "primary-0": "var(--aquarium-colors-primary-0, #ffffff)",
+    "primary-100": "var(--aquarium-colors-primary-100, #a70045)",
+    "primary-90": "var(--aquarium-colors-primary-90, #c60443)",
+    "primary-80": "var(--aquarium-colors-primary-80, #e41a4a)",
+    "primary-70": "var(--aquarium-colors-primary-70, #ff3554)",
+    "primary-60": "var(--aquarium-colors-primary-60, #ff5275)",
+    "primary-50": "var(--aquarium-colors-primary-50, #ff6f94)",
+    "primary-40": "var(--aquarium-colors-primary-40, #ff8db0)",
+    "primary-30": "var(--aquarium-colors-primary-30, #ffa9c9)",
+    "primary-20": "var(--aquarium-colors-primary-20, #ffc4de)",
+    "primary-10": "var(--aquarium-colors-primary-10, #ffdeef)",
+    "primary-5": "var(--aquarium-colors-primary-5, #ffe8f4)",
+    "primary-0": "var(--aquarium-colors-primary-0, #fff9fc)",
     "grey-20": "var(--aquarium-colors-grey-20, #d2d2d6)",
     transparent: "var(--aquarium-colors-transparent, transparent)",
     white: "var(--aquarium-colors-white, white)",
@@ -7132,12 +7132,9 @@ var getCommonInputStyles = ({ readOnly, valid }) => tw(
   }
 );
 var ghostButtonStyle = tw(
-  "text-primary-80 active:text-primary-70 focus-visible:text-primary-90 hover:text-primary-70 disabled:text-primary-40"
-);
-var linkStyle = classNames(
-  ghostButtonStyle,
-  tw("visited:text-primary-80 underline hover:no-underline focusable")
+  "text-primary-80 active:text-primary-70 focus-visible:text-grey-90 hover:text-primary-70 disabled:text-primary-40"
 );
+var linkStyle = classNames(ghostButtonStyle, tw("visited:text-primary-80 focusable"));
 
 // src/utils/string.ts
 var capitalize = (a) => a.charAt(0).toUpperCase() + a.slice(1);
@@ -7147,12 +7144,12 @@ var import_chevronDown3 = __toESM(require_chevronDown());
 var import_loading2 = __toESM(require_loading());
 var COLOR_CLASSNAMES = {
   "primary": tw(
-    "text-white bg-primary-80 active:bg-primary-90 active:ring-0 focus-visible:ring-2 focus-visible:ring-primary-90 focus-visible:ring-inset hover:bg-primary-70 disabled:bg-primary-40"
+    "text-white bg-primary-80 active:bg-primary-90 active:ring-0 focus-visible:ring-2 focus-visible:ring-primary-100 focus-visible:ring-inset hover:bg-primary-70 disabled:bg-primary-5"
   ),
   "secondary": tw(
-    "text-primary-80 bg-white ring-1 ring-primary-80 ring-inset active:bg-primary-5 active:ring-primary-90 active:text-primary-80",
-    "focus-visible:ring-2 focus-visible:ring-primary-90 focus-visible:text-primary-80",
-    "hover:ring-primary-70 hover:text-primary-70 disabled:text-primary-40 disabled:ring-primary-40"
+    "text-grey-60 bg-white ring-1 ring-grey-30 ring-inset active:bg-grey-5 active:ring-grey-50 active:text-grey-80",
+    "focus-visible:ring-2 focus-visible:ring-grey-50 focus-visible:text-grey-80",
+    "hover:ring-grey-50 hover:text-grey-80 disabled:text-grey-30 disabled:bg-grey-0 disabled:ring-grey-20"
   ),
   "ghost": ghostButtonStyle,
   "text": ghostButtonStyle,
@@ -7160,12 +7157,15 @@ var COLOR_CLASSNAMES = {
     "text-grey-60 active:text-grey-50 focus-visible:text-grey-80 hover:text-grey-80 disabled:text-grey-30"
   )
 };
-var LoadingSpinner = ({ size = "20px" }) => {
+var LoadingSpinner = ({
+  size = "20px",
+  kind = "primary"
+}) => {
   return /* @__PURE__ */ import_react19.default.createElement(InlineIcon, {
     icon: import_loading2.default,
     width: size,
     height: size,
-    color: "primary-80",
+    color: kind === "primary" ? "primary-60" : "grey-60",
     "data-testid": "loading-button"
   });
 };
@@ -7263,7 +7263,6 @@ var asButton = (Component, isDropdownButton) => {
               "text-grey-70 p-2 active:text-grey-70 active:bg-transparent hover:text-grey-90 hover:bg-grey-0 focus-visible:text-grey-90 focus-visible:bg-grey-0 disabled:text-grey-20 disabled:bg-transparent": isIconOnlyButton,
               "typography-default-strong": !dense && !isIconOnlyButton && kind !== "text",
               "typography-small-strong": dense && !isIconOnlyButton && kind !== "text",
-              "underline hover:no-underline": kind === "text",
               "py-3 px-4": !dense && isButton,
               "py-2 px-3": dense && isButton,
               "py-3": !dense && isGhost,
@@ -7280,7 +7279,8 @@ var asButton = (Component, isDropdownButton) => {
         className: tw("absolute left-1/2 top-0 bottom-0 flex"),
         style: { transform: "translate(-50%)" }
       }, /* @__PURE__ */ import_react19.default.createElement(LoadingSpinner, {
-        size: iconSize
+        size: iconSize,
+        kind: kind === "primary" ? "primary" : "secondary"
       })), /* @__PURE__ */ import_react19.default.createElement("div", {
         className: tw({ invisible: loading2 })
       }, buttonContent())) : buttonContent());
@@ -7440,6 +7440,7 @@ var Alert = (_a) => {
     "dense"
   ]);
   return /* @__PURE__ */ import_react21.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+    role: type === "error" || type === "warning" ? "alert" : "status",
     className: classNames(
       tw("rounded grid grid-cols-[auto_1fr_auto] items-center gap-x-3 gap-y-2", {
         "bg-error-5": type === "error",
@@ -7656,10 +7657,10 @@ var Banner = (_a) => {
   }), children);
 };
 Banner.Title = (_a) => {
-  var _b = _a, { children, className, layout } = _b, rest = __objRest(_b, ["children", "className", "layout"]);
+  var _b = _a, { children, className, layout, titleVariant = "primary" } = _b, rest = __objRest(_b, ["children", "className", "layout", "titleVariant"]);
   return /* @__PURE__ */ import_react26.default.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
     variant: "subheading",
-    color: "grey-100",
+    color: titleVariant === "secondary" ? "primary-80" : "grey-100",
     className: classNames(
       className,
       tw("whitespace-nowrap", {
@@ -7731,7 +7732,8 @@ var createBanner = (displayName, opts = {}) => {
     }, /* @__PURE__ */ import_react27.default.createElement(Banner.ContentContainer, {
       layout
     }, /* @__PURE__ */ import_react27.default.createElement(Banner.Title, {
-      layout
+      layout,
+      titleVariant: opts.isOneLineBanner ? "secondary" : "primary"
     }, title), /* @__PURE__ */ import_react27.default.createElement(Banner.Description, {
       flexGrow: isDismissable ? false : true
     }, children || description), action && /* @__PURE__ */ import_react27.default.createElement(Banner.Actions, {
@@ -7801,7 +7803,7 @@ var asCrumb = (Component, displayName, options = { isActive: false }) => {
     }), /* @__PURE__ */ import_react28.default.createElement("span", {
       className: (0, import_classnames3.default)(
         tw("flex flex-row flex-nowrap items-center gap-x-3 ", {
-          "text-primary-80 hover:text-primary-70 underline hover:no-underline": !options.isActive,
+          "text-primary-80 hover:text-primary-70": !options.isActive,
           "text-grey-90": options.isActive
         })
       )
@@ -8505,7 +8507,7 @@ var Checkbox = import_react39.default.forwardRef(
     var _b = _a, { id, children, name, disabled = false, readOnly = false, indeterminate = false } = _b, props = __objRest(_b, ["id", "children", "name", "disabled", "readOnly", "indeterminate"]);
     return /* @__PURE__ */ import_react39.default.createElement("span", {
       className: classNames(tw("inline-flex justify-center items-center self-center relative"), {
-        "hover:border-grey-50 peer-checked:border-primary-80": !disabled,
+        "hover:border-grey-50 peer-checked:border-navyBlue-100": !disabled,
         "border-grey-5": disabled
       })
     }, /* @__PURE__ */ import_react39.default.createElement("input", __spreadProps(__spreadValues({
@@ -8516,8 +8518,8 @@ var Checkbox = import_react39.default.forwardRef(
     }, props), {
       className: classNames(
         tw("peer appearance-none outline-none w-5 h-5", "rounded-sm border border-transparent", {
-          "cursor-pointer checked:bg-primary-80": !disabled,
-          "cursor-not-allowed bg-grey-0 checked:bg-primary-40": disabled
+          "cursor-pointer checked:bg-navyBlue-100": !disabled,
+          "cursor-not-allowed bg-grey-0": disabled
         })
       ),
       readOnly,
@@ -8532,8 +8534,8 @@ var Checkbox = import_react39.default.forwardRef(
           "rounded-sm border border-grey-20 peer-focus:border-info-70"
         ),
         {
-          "peer-hover:border-grey-50 peer-checked:text-white peer-checked:[&>path]:stroke-white peer-checked:border-primary-80": !disabled,
-          "border-grey-5 peer-checked:text-primary-10 peer-checked:[&>path]:stroke-primary-10 peer-checked:border-primary-40": disabled
+          "peer-hover:border-grey-50 peer-checked:text-white peer-checked:[&>path]:stroke-white peer-checked:border-navyBlue-100": !disabled,
+          "border-grey-5 peer-checked:text-grey-30 peer-checked:[&>path]:stroke-grey-30": disabled
         }
       )
     }));
@@ -9783,10 +9785,10 @@ var RadioButton = import_react59.default.forwardRef(
         tw(
           "inline-flex justify-center items-center self-center appearance-none",
           "w-5 h-5 p-[3px] rounded-full cursor-pointer border border-grey-20",
-          "outline-none focus:border-info-70 checked:bg-primary-80 checked:shadow-whiteInset",
+          "outline-none focus:border-info-70 checked:bg-navyBlue-100 checked:shadow-whiteInset",
           {
-            "hover:border-grey-50 checked:border-primary-80": !disabled,
-            "cursor-not-allowed border-grey-5 bg-grey-0 checked:bg-opacity-40 checked:bg-primary-40 checked:border-primary-40": disabled
+            "hover:border-grey-50 checked:border-navyBlue-100": !disabled,
+            "cursor-not-allowed border-grey-5 bg-grey-0 checked:bg-opacity-40": disabled
           }
         )
       ),
@@ -10991,12 +10993,12 @@ var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
       if (status === "warning") {
         statusIcon = /* @__PURE__ */ import_react81.default.createElement(InlineIcon, {
           icon: import_warningSign4.default,
-          color: selected ? void 0 : "warning-80"
+          color: "warning-80"
         });
       } else if (status === "error") {
         statusIcon = /* @__PURE__ */ import_react81.default.createElement(InlineIcon, {
           icon: import_warningSign4.default,
-          color: selected ? void 0 : "error-50"
+          color: "error-50"
         });
       }
       const tab = /* @__PURE__ */ import_react81.default.createElement(Component, __spreadValues({
@@ -11982,7 +11984,9 @@ var Navigation2 = (_a) => {
 var Item6 = (_a) => {
   var _b = _a, { children, icon } = _b, rest = __objRest(_b, ["children", "icon"]);
   return /* @__PURE__ */ import_react88.default.createElement(Navigation.Item, __spreadValues({}, rest), icon && /* @__PURE__ */ import_react88.default.createElement(InlineIcon, {
-    icon
+    icon,
+    width: "20px",
+    height: "20px"
   }), children);
 };
 Navigation2.Item = Item6;
@@ -12989,8 +12993,8 @@ var Switch = import_react104.default.forwardRef(
           "outline-none focus:border border-info-70 bg-grey-20",
           "cursor-pointer disabled:cursor-not-allowed",
           {
-            "hover:bg-grey-30 checked:bg-primary-80 hover:checked:bg-primary-80": !disabled,
-            "bg-grey-5 checked:opacity-40 checked:bg-primary-40": disabled
+            "hover:bg-grey-30 checked:bg-navyBlue-100 hover:checked:bg-navyBlue-100": !disabled,
+            "bg-grey-5 checked:opacity-40": disabled
           }
         )
       ),

package/dist/system.mjs

@@ -712,18 +712,18 @@ var require_tokens = __commonJS({
             "secondary-10": "#fee8d0",
             "secondary-5": "#fff3e8",
             "secondary-0": "#fffbf8",
-            "primary-100": "0e1652",
-            "primary-90": "#222f95",
-            "primary-80": "#3545be",
-            "primary-70": "#5865cd",
-            "primary-60": "#818eec",
-            "primary-50": "#000000",
-            "primary-40": "#b9c5ef",
-            "primary-30": "#000000",
-            "primary-20": "#000000",
-            "primary-10": "#e3e9ff",
-            "primary-5": "#f3f6ff",
-            "primary-0": "#ffffff",
+            "primary-100": "#a70045",
+            "primary-90": "#c60443",
+            "primary-80": "#e41a4a",
+            "primary-70": "#ff3554",
+            "primary-60": "#ff5275",
+            "primary-50": "#ff6f94",
+            "primary-40": "#ff8db0",
+            "primary-30": "#ffa9c9",
+            "primary-20": "#ffc4de",
+            "primary-10": "#ffdeef",
+            "primary-5": "#ffe8f4",
+            "primary-0": "#fff9fc",
             "grey-20": "#d2d2d6"
           },
           typography: {
@@ -5656,18 +5656,18 @@ var tailwind_theme_default = {
     "secondary-10": "var(--aquarium-colors-secondary-10, #fee8d0)",
     "secondary-5": "var(--aquarium-colors-secondary-5, #fff3e8)",
     "secondary-0": "var(--aquarium-colors-secondary-0, #fffbf8)",
-    "primary-100": "var(--aquarium-colors-primary-100, 0e1652)",
-    "primary-90": "var(--aquarium-colors-primary-90, #222f95)",
-    "primary-80": "var(--aquarium-colors-primary-80, #3545be)",
-    "primary-70": "var(--aquarium-colors-primary-70, #5865cd)",
-    "primary-60": "var(--aquarium-colors-primary-60, #818eec)",
-    "primary-50": "var(--aquarium-colors-primary-50, #000000)",
-    "primary-40": "var(--aquarium-colors-primary-40, #b9c5ef)",
-    "primary-30": "var(--aquarium-colors-primary-30, #000000)",
-    "primary-20": "var(--aquarium-colors-primary-20, #000000)",
-    "primary-10": "var(--aquarium-colors-primary-10, #e3e9ff)",
-    "primary-5": "var(--aquarium-colors-primary-5, #f3f6ff)",
-    "primary-0": "var(--aquarium-colors-primary-0, #ffffff)",
+    "primary-100": "var(--aquarium-colors-primary-100, #a70045)",
+    "primary-90": "var(--aquarium-colors-primary-90, #c60443)",
+    "primary-80": "var(--aquarium-colors-primary-80, #e41a4a)",
+    "primary-70": "var(--aquarium-colors-primary-70, #ff3554)",
+    "primary-60": "var(--aquarium-colors-primary-60, #ff5275)",
+    "primary-50": "var(--aquarium-colors-primary-50, #ff6f94)",
+    "primary-40": "var(--aquarium-colors-primary-40, #ff8db0)",
+    "primary-30": "var(--aquarium-colors-primary-30, #ffa9c9)",
+    "primary-20": "var(--aquarium-colors-primary-20, #ffc4de)",
+    "primary-10": "var(--aquarium-colors-primary-10, #ffdeef)",
+    "primary-5": "var(--aquarium-colors-primary-5, #ffe8f4)",
+    "primary-0": "var(--aquarium-colors-primary-0, #fff9fc)",
     "grey-20": "var(--aquarium-colors-grey-20, #d2d2d6)",
     transparent: "var(--aquarium-colors-transparent, transparent)",
     white: "var(--aquarium-colors-white, white)",
@@ -6990,12 +6990,9 @@ var getCommonInputStyles = ({ readOnly, valid }) => tw(
   }
 );
 var ghostButtonStyle = tw(
-  "text-primary-80 active:text-primary-70 focus-visible:text-primary-90 hover:text-primary-70 disabled:text-primary-40"
-);
-var linkStyle = classNames(
-  ghostButtonStyle,
-  tw("visited:text-primary-80 underline hover:no-underline focusable")
+  "text-primary-80 active:text-primary-70 focus-visible:text-grey-90 hover:text-primary-70 disabled:text-primary-40"
 );
+var linkStyle = classNames(ghostButtonStyle, tw("visited:text-primary-80 focusable"));
 
 // src/utils/string.ts
 var capitalize = (a) => a.charAt(0).toUpperCase() + a.slice(1);
@@ -7005,12 +7002,12 @@ var import_chevronDown3 = __toESM(require_chevronDown());
 var import_loading2 = __toESM(require_loading());
 var COLOR_CLASSNAMES = {
   "primary": tw(
-    "text-white bg-primary-80 active:bg-primary-90 active:ring-0 focus-visible:ring-2 focus-visible:ring-primary-90 focus-visible:ring-inset hover:bg-primary-70 disabled:bg-primary-40"
+    "text-white bg-primary-80 active:bg-primary-90 active:ring-0 focus-visible:ring-2 focus-visible:ring-primary-100 focus-visible:ring-inset hover:bg-primary-70 disabled:bg-primary-5"
   ),
   "secondary": tw(
-    "text-primary-80 bg-white ring-1 ring-primary-80 ring-inset active:bg-primary-5 active:ring-primary-90 active:text-primary-80",
-    "focus-visible:ring-2 focus-visible:ring-primary-90 focus-visible:text-primary-80",
-    "hover:ring-primary-70 hover:text-primary-70 disabled:text-primary-40 disabled:ring-primary-40"
+    "text-grey-60 bg-white ring-1 ring-grey-30 ring-inset active:bg-grey-5 active:ring-grey-50 active:text-grey-80",
+    "focus-visible:ring-2 focus-visible:ring-grey-50 focus-visible:text-grey-80",
+    "hover:ring-grey-50 hover:text-grey-80 disabled:text-grey-30 disabled:bg-grey-0 disabled:ring-grey-20"
   ),
   "ghost": ghostButtonStyle,
   "text": ghostButtonStyle,
@@ -7018,12 +7015,15 @@ var COLOR_CLASSNAMES = {
     "text-grey-60 active:text-grey-50 focus-visible:text-grey-80 hover:text-grey-80 disabled:text-grey-30"
   )
 };
-var LoadingSpinner = ({ size = "20px" }) => {
+var LoadingSpinner = ({
+  size = "20px",
+  kind = "primary"
+}) => {
   return /* @__PURE__ */ React15.createElement(InlineIcon, {
     icon: import_loading2.default,
     width: size,
     height: size,
-    color: "primary-80",
+    color: kind === "primary" ? "primary-60" : "grey-60",
     "data-testid": "loading-button"
   });
 };
@@ -7121,7 +7121,6 @@ var asButton = (Component, isDropdownButton) => {
               "text-grey-70 p-2 active:text-grey-70 active:bg-transparent hover:text-grey-90 hover:bg-grey-0 focus-visible:text-grey-90 focus-visible:bg-grey-0 disabled:text-grey-20 disabled:bg-transparent": isIconOnlyButton,
               "typography-default-strong": !dense && !isIconOnlyButton && kind !== "text",
               "typography-small-strong": dense && !isIconOnlyButton && kind !== "text",
-              "underline hover:no-underline": kind === "text",
               "py-3 px-4": !dense && isButton,
               "py-2 px-3": dense && isButton,
               "py-3": !dense && isGhost,
@@ -7138,7 +7137,8 @@ var asButton = (Component, isDropdownButton) => {
         className: tw("absolute left-1/2 top-0 bottom-0 flex"),
         style: { transform: "translate(-50%)" }
       }, /* @__PURE__ */ React15.createElement(LoadingSpinner, {
-        size: iconSize
+        size: iconSize,
+        kind: kind === "primary" ? "primary" : "secondary"
       })), /* @__PURE__ */ React15.createElement("div", {
         className: tw({ invisible: loading2 })
       }, buttonContent())) : buttonContent());
@@ -7298,6 +7298,7 @@ var Alert = (_a) => {
     "dense"
   ]);
   return /* @__PURE__ */ React17.createElement("div", __spreadProps(__spreadValues({}, rest), {
+    role: type === "error" || type === "warning" ? "alert" : "status",
     className: classNames(
       tw("rounded grid grid-cols-[auto_1fr_auto] items-center gap-x-3 gap-y-2", {
         "bg-error-5": type === "error",
@@ -7514,10 +7515,10 @@ var Banner = (_a) => {
   }), children);
 };
 Banner.Title = (_a) => {
-  var _b = _a, { children, className, layout } = _b, rest = __objRest(_b, ["children", "className", "layout"]);
+  var _b = _a, { children, className, layout, titleVariant = "primary" } = _b, rest = __objRest(_b, ["children", "className", "layout", "titleVariant"]);
   return /* @__PURE__ */ React22.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
     variant: "subheading",
-    color: "grey-100",
+    color: titleVariant === "secondary" ? "primary-80" : "grey-100",
     className: classNames(
       className,
       tw("whitespace-nowrap", {
@@ -7589,7 +7590,8 @@ var createBanner = (displayName, opts = {}) => {
     }, /* @__PURE__ */ React23.createElement(Banner.ContentContainer, {
       layout
     }, /* @__PURE__ */ React23.createElement(Banner.Title, {
-      layout
+      layout,
+      titleVariant: opts.isOneLineBanner ? "secondary" : "primary"
     }, title), /* @__PURE__ */ React23.createElement(Banner.Description, {
       flexGrow: isDismissable ? false : true
     }, children || description), action && /* @__PURE__ */ React23.createElement(Banner.Actions, {
@@ -7659,7 +7661,7 @@ var asCrumb = (Component, displayName, options = { isActive: false }) => {
     }), /* @__PURE__ */ React24.createElement("span", {
       className: classNames3(
         tw("flex flex-row flex-nowrap items-center gap-x-3 ", {
-          "text-primary-80 hover:text-primary-70 underline hover:no-underline": !options.isActive,
+          "text-primary-80 hover:text-primary-70": !options.isActive,
           "text-grey-90": options.isActive
         })
       )
@@ -8363,7 +8365,7 @@ var Checkbox = React34.forwardRef(
     var _b = _a, { id, children, name, disabled = false, readOnly = false, indeterminate = false } = _b, props = __objRest(_b, ["id", "children", "name", "disabled", "readOnly", "indeterminate"]);
     return /* @__PURE__ */ React34.createElement("span", {
       className: classNames(tw("inline-flex justify-center items-center self-center relative"), {
-        "hover:border-grey-50 peer-checked:border-primary-80": !disabled,
+        "hover:border-grey-50 peer-checked:border-navyBlue-100": !disabled,
         "border-grey-5": disabled
       })
     }, /* @__PURE__ */ React34.createElement("input", __spreadProps(__spreadValues({
@@ -8374,8 +8376,8 @@ var Checkbox = React34.forwardRef(
     }, props), {
       className: classNames(
         tw("peer appearance-none outline-none w-5 h-5", "rounded-sm border border-transparent", {
-          "cursor-pointer checked:bg-primary-80": !disabled,
-          "cursor-not-allowed bg-grey-0 checked:bg-primary-40": disabled
+          "cursor-pointer checked:bg-navyBlue-100": !disabled,
+          "cursor-not-allowed bg-grey-0": disabled
         })
       ),
       readOnly,
@@ -8390,8 +8392,8 @@ var Checkbox = React34.forwardRef(
           "rounded-sm border border-grey-20 peer-focus:border-info-70"
         ),
         {
-          "peer-hover:border-grey-50 peer-checked:text-white peer-checked:[&>path]:stroke-white peer-checked:border-primary-80": !disabled,
-          "border-grey-5 peer-checked:text-primary-10 peer-checked:[&>path]:stroke-primary-10 peer-checked:border-primary-40": disabled
+          "peer-hover:border-grey-50 peer-checked:text-white peer-checked:[&>path]:stroke-white peer-checked:border-navyBlue-100": !disabled,
+          "border-grey-5 peer-checked:text-grey-30 peer-checked:[&>path]:stroke-grey-30": disabled
         }
       )
     }));
@@ -9641,10 +9643,10 @@ var RadioButton = React54.forwardRef(
         tw(
           "inline-flex justify-center items-center self-center appearance-none",
           "w-5 h-5 p-[3px] rounded-full cursor-pointer border border-grey-20",
-          "outline-none focus:border-info-70 checked:bg-primary-80 checked:shadow-whiteInset",
+          "outline-none focus:border-info-70 checked:bg-navyBlue-100 checked:shadow-whiteInset",
           {
-            "hover:border-grey-50 checked:border-primary-80": !disabled,
-            "cursor-not-allowed border-grey-5 bg-grey-0 checked:bg-opacity-40 checked:bg-primary-40 checked:border-primary-40": disabled
+            "hover:border-grey-50 checked:border-navyBlue-100": !disabled,
+            "cursor-not-allowed border-grey-5 bg-grey-0 checked:bg-opacity-40": disabled
           }
         )
       ),
@@ -10849,12 +10851,12 @@ var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
       if (status === "warning") {
         statusIcon = /* @__PURE__ */ React75.createElement(InlineIcon, {
           icon: import_warningSign4.default,
-          color: selected ? void 0 : "warning-80"
+          color: "warning-80"
         });
       } else if (status === "error") {
         statusIcon = /* @__PURE__ */ React75.createElement(InlineIcon, {
           icon: import_warningSign4.default,
-          color: selected ? void 0 : "error-50"
+          color: "error-50"
         });
       }
       const tab = /* @__PURE__ */ React75.createElement(Component, __spreadValues({
@@ -11840,7 +11842,9 @@ var Navigation2 = (_a) => {
 var Item6 = (_a) => {
   var _b = _a, { children, icon } = _b, rest = __objRest(_b, ["children", "icon"]);
   return /* @__PURE__ */ React82.createElement(Navigation.Item, __spreadValues({}, rest), icon && /* @__PURE__ */ React82.createElement(InlineIcon, {
-    icon
+    icon,
+    width: "20px",
+    height: "20px"
   }), children);
 };
 Navigation2.Item = Item6;
@@ -12847,8 +12851,8 @@ var Switch = React98.forwardRef(
           "outline-none focus:border border-info-70 bg-grey-20",
           "cursor-pointer disabled:cursor-not-allowed",
           {
-            "hover:bg-grey-30 checked:bg-primary-80 hover:checked:bg-primary-80": !disabled,
-            "bg-grey-5 checked:opacity-40 checked:bg-primary-40": disabled
+            "hover:bg-grey-30 checked:bg-navyBlue-100 hover:checked:bg-navyBlue-100": !disabled,
+            "bg-grey-5 checked:opacity-40": disabled
           }
         )
       ),

package/dist/tailwind.theme.json

@@ -341,18 +341,18 @@
     "secondary-10": "var(--aquarium-colors-secondary-10, #fee8d0)",
     "secondary-5": "var(--aquarium-colors-secondary-5, #fff3e8)",
     "secondary-0": "var(--aquarium-colors-secondary-0, #fffbf8)",
-    "primary-100": "var(--aquarium-colors-primary-100, 0e1652)",
-    "primary-90": "var(--aquarium-colors-primary-90, #222f95)",
-    "primary-80": "var(--aquarium-colors-primary-80, #3545be)",
-    "primary-70": "var(--aquarium-colors-primary-70, #5865cd)",
-    "primary-60": "var(--aquarium-colors-primary-60, #818eec)",
-    "primary-50": "var(--aquarium-colors-primary-50, #000000)",
-    "primary-40": "var(--aquarium-colors-primary-40, #b9c5ef)",
-    "primary-30": "var(--aquarium-colors-primary-30, #000000)",
-    "primary-20": "var(--aquarium-colors-primary-20, #000000)",
-    "primary-10": "var(--aquarium-colors-primary-10, #e3e9ff)",
-    "primary-5": "var(--aquarium-colors-primary-5, #f3f6ff)",
-    "primary-0": "var(--aquarium-colors-primary-0, #ffffff)",
+    "primary-100": "var(--aquarium-colors-primary-100, #a70045)",
+    "primary-90": "var(--aquarium-colors-primary-90, #c60443)",
+    "primary-80": "var(--aquarium-colors-primary-80, #e41a4a)",
+    "primary-70": "var(--aquarium-colors-primary-70, #ff3554)",
+    "primary-60": "var(--aquarium-colors-primary-60, #ff5275)",
+    "primary-50": "var(--aquarium-colors-primary-50, #ff6f94)",
+    "primary-40": "var(--aquarium-colors-primary-40, #ff8db0)",
+    "primary-30": "var(--aquarium-colors-primary-30, #ffa9c9)",
+    "primary-20": "var(--aquarium-colors-primary-20, #ffc4de)",
+    "primary-10": "var(--aquarium-colors-primary-10, #ffdeef)",
+    "primary-5": "var(--aquarium-colors-primary-5, #ffe8f4)",
+    "primary-0": "var(--aquarium-colors-primary-0, #fff9fc)",
     "grey-20": "var(--aquarium-colors-grey-20, #d2d2d6)",
     "transparent": "var(--aquarium-colors-transparent, transparent)",
     "white": "var(--aquarium-colors-white, white)",

package/dist/tokens.json

@@ -633,18 +633,18 @@
                 "secondary-10": "#fee8d0",
                 "secondary-5": "#fff3e8",
                 "secondary-0": "#fffbf8",
-                "primary-100": "0e1652",
-                "primary-90": "#222f95",
-                "primary-80": "#3545be",
-                "primary-70": "#5865cd",
-                "primary-60": "#818eec",
-                "primary-50": "#000000",
-                "primary-40": "#b9c5ef",
-                "primary-30": "#000000",
-                "primary-20": "#000000",
-                "primary-10": "#e3e9ff",
-                "primary-5": "#f3f6ff",
-                "primary-0": "#ffffff",
+                "primary-100": "#a70045",
+                "primary-90": "#c60443",
+                "primary-80": "#e41a4a",
+                "primary-70": "#ff3554",
+                "primary-60": "#ff5275",
+                "primary-50": "#ff6f94",
+                "primary-40": "#ff8db0",
+                "primary-30": "#ffa9c9",
+                "primary-20": "#ffc4de",
+                "primary-10": "#ffdeef",
+                "primary-5": "#ffe8f4",
+                "primary-0": "#fff9fc",
                 "grey-20": "#d2d2d6"
             },
             "typography": {