@aivenio/aquarium 1.65.1 → 1.66.0

package/dist/atoms.mjs

@@ -4689,12 +4689,8 @@ var require_resolveTheme = __commonJS({
   "src/js/resolveTheme.js"(exports, module) {
     "use strict";
     var tokensJson = require_tokens();
-    var themeName = process.env.THEME || process.env.STORYBOOK_THEME || "aiven";
-    if (!(themeName in tokensJson.themes)) {
-      throw new Error(`Could not find theme '${themeName}' from tokens.json`);
-    }
     module.exports = {
-      theme: tokensJson.themes[themeName]
+      theme: tokensJson.themes.aiven
     };
   }
 });
@@ -5081,7 +5077,247 @@ var tailwind_theme_default = {
     transparent: "var(--aquarium-colors-transparent, transparent)",
     current: "var(--aquarium-colors-current, currentColor)",
     white: "var(--aquarium-colors-white, white)",
-    black: "var(--aquarium-colors-black, black)"
+    black: "var(--aquarium-colors-black, black)",
+    body: "var(--aquarium-background-color-body)",
+    "popover-content": "var(--aquarium-background-color-popover-content)",
+    muted: "var(--aquarium-background-color-muted)",
+    default: "var(--aquarium-background-color-default)",
+    intense: "var(--aquarium-background-color-intense)",
+    "intense-2x": "var(--aquarium-background-color-intense-2x)",
+    "primary-muted-3x": "var(--aquarium-background-color-primary-muted-3x)",
+    "primary-muted-2x": "var(--aquarium-background-color-primary-muted-2x)",
+    "primary-muted": "var(--aquarium-background-color-primary-muted)",
+    "primary-default": "var(--aquarium-background-color-primary-default)",
+    "primary-intense": "var(--aquarium-background-color-primary-intense)",
+    "secondary-default": "var(--aquarium-background-color-secondary-default)",
+    "info-muted": "var(--aquarium-background-color-info-muted)",
+    "info-default": "var(--aquarium-background-color-info-default)",
+    "success-muted": "var(--aquarium-background-color-success-muted)",
+    "success-default": "var(--aquarium-background-color-success-default)",
+    "success-intense": "var(--aquarium-background-color-success-intense)",
+    "warning-muted": "var(--aquarium-background-color-warning-muted)",
+    "warning-default": "var(--aquarium-background-color-warning-default)",
+    "danger-muted-2x": "var(--aquarium-background-color-danger-muted-2x)",
+    "danger-muted": "var(--aquarium-background-color-danger-muted)",
+    "danger-default": "var(--aquarium-background-color-danger-default)",
+    "danger-intense": "var(--aquarium-background-color-danger-intense)"
+  },
+  textColor: {
+    "error-100": "var(--aquarium-colors-error-100, #aa0000)",
+    "error-90": "var(--aquarium-colors-error-90, #b90000)",
+    "error-80": "var(--aquarium-colors-error-80, #c50001)",
+    "error-70": "var(--aquarium-colors-error-70, #d80005)",
+    "error-60": "var(--aquarium-colors-error-60, #e70000)",
+    "error-50": "var(--aquarium-colors-error-50, #e62728)",
+    "error-40": "var(--aquarium-colors-error-40, #e0504f)",
+    "error-30": "var(--aquarium-colors-error-30, #ed7975)",
+    "error-20": "var(--aquarium-colors-error-20, #ffadb3)",
+    "error-10": "var(--aquarium-colors-error-10, #ffcbd2)",
+    "error-5": "var(--aquarium-colors-error-5, #fee8e7)",
+    "error-0": "var(--aquarium-colors-error-0, #fef2f1)",
+    "warning-100": "var(--aquarium-colors-warning-100, #fe6d00)",
+    "warning-90": "var(--aquarium-colors-warning-90, #ff9003)",
+    "warning-80": "var(--aquarium-colors-warning-80, #fd9f00)",
+    "warning-70": "var(--aquarium-colors-warning-70, #ffb300)",
+    "warning-60": "var(--aquarium-colors-warning-60, #ffc107)",
+    "warning-50": "var(--aquarium-colors-warning-50, #fdc926)",
+    "warning-40": "var(--aquarium-colors-warning-40, #fdd44d)",
+    "warning-30": "var(--aquarium-colors-warning-30, #fddf81)",
+    "warning-20": "var(--aquarium-colors-warning-20, #feebb2)",
+    "warning-10": "var(--aquarium-colors-warning-10, #fff2cd)",
+    "warning-5": "var(--aquarium-colors-warning-5, #fff8ea)",
+    "warning-0": "var(--aquarium-colors-warning-0, #fffdf9)",
+    "success-100": "var(--aquarium-colors-success-100, #006f00)",
+    "success-90": "var(--aquarium-colors-success-90, #008e00)",
+    "success-80": "var(--aquarium-colors-success-80, #009f00)",
+    "success-70": "var(--aquarium-colors-success-70, #00b300)",
+    "success-60": "var(--aquarium-colors-success-60, #00c300)",
+    "success-50": "var(--aquarium-colors-success-50, #40ce37)",
+    "success-40": "var(--aquarium-colors-success-40, #60db57)",
+    "success-30": "var(--aquarium-colors-success-30, #89eb80)",
+    "success-20": "var(--aquarium-colors-success-20, #afffa7)",
+    "success-10": "var(--aquarium-colors-success-10, #cbffc9)",
+    "success-5": "var(--aquarium-colors-success-5, #ecf7ed)",
+    "success-0": "var(--aquarium-colors-success-0, #f5faf5)",
+    "info-100": "var(--aquarium-colors-info-100, #02569a)",
+    "info-90": "var(--aquarium-colors-info-90, #0174ba)",
+    "info-80": "var(--aquarium-colors-info-80, #0788d1)",
+    "info-70": "var(--aquarium-colors-info-70, #0399e3)",
+    "info-60": "var(--aquarium-colors-info-60, #02a8f3)",
+    "info-50": "var(--aquarium-colors-info-50, #28b4f4)",
+    "info-40": "var(--aquarium-colors-info-40, #4cc2f7)",
+    "info-30": "var(--aquarium-colors-info-30, #7fd1f7)",
+    "info-20": "var(--aquarium-colors-info-20, #b4e5fb)",
+    "info-10": "var(--aquarium-colors-info-10, #e0f5fe)",
+    "info-5": "var(--aquarium-colors-info-5, #effaff)",
+    "info-0": "var(--aquarium-colors-info-0, #f9fdff)",
+    "grey-100": "var(--aquarium-colors-grey-100, #19191d)",
+    "grey-90": "var(--aquarium-colors-grey-90, #292a31)",
+    "grey-80": "var(--aquarium-colors-grey-80, #3a3a44)",
+    "grey-70": "var(--aquarium-colors-grey-70, #4a4b57)",
+    "grey-60": "var(--aquarium-colors-grey-60, #5a5b6a)",
+    "grey-50": "var(--aquarium-colors-grey-50, #787885)",
+    "grey-40": "var(--aquarium-colors-grey-40, #9696a0)",
+    "grey-30": "var(--aquarium-colors-grey-30, #b4b4bb)",
+    "grey-20": "var(--aquarium-colors-grey-20, #d2d2d6)",
+    "grey-10": "var(--aquarium-colors-grey-10, #e1e1e3)",
+    "grey-5": "var(--aquarium-colors-grey-5, #ededf0)",
+    "grey-0": "var(--aquarium-colors-grey-0, #f7f7fa)",
+    "secondary-100": "var(--aquarium-colors-secondary-100, #e11d16)",
+    "secondary-90": "var(--aquarium-colors-secondary-90, #eb4610)",
+    "secondary-80": "var(--aquarium-colors-secondary-80, #f3580d)",
+    "secondary-70": "var(--aquarium-colors-secondary-70, #f96a02)",
+    "secondary-60": "var(--aquarium-colors-secondary-60, #ff7700)",
+    "secondary-50": "var(--aquarium-colors-secondary-50, #fc871a)",
+    "secondary-40": "var(--aquarium-colors-secondary-40, #fb9a3e)",
+    "secondary-30": "var(--aquarium-colors-secondary-30, #fab26e)",
+    "secondary-20": "var(--aquarium-colors-secondary-20, #f8c99c)",
+    "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, #9daaee)",
+    "primary-40": "var(--aquarium-colors-primary-40, #b9c5ef)",
+    "primary-30": "var(--aquarium-colors-primary-30, #c7d1f4)",
+    "primary-20": "var(--aquarium-colors-primary-20, #d5ddfa)",
+    "primary-10": "var(--aquarium-colors-primary-10, #e3e9ff)",
+    "primary-5": "var(--aquarium-colors-primary-5, #f3f6ff)",
+    "primary-0": "var(--aquarium-colors-primary-0, #ffffff)",
+    transparent: "var(--aquarium-colors-transparent, transparent)",
+    current: "var(--aquarium-colors-current, currentColor)",
+    white: "var(--aquarium-colors-white, white)",
+    black: "var(--aquarium-colors-black, black)",
+    "muted-3x": "var(--aquarium-text-color-muted-3x)",
+    "muted-2x": "var(--aquarium-text-color-muted-2x)",
+    muted: "var(--aquarium-text-color-muted)",
+    default: "var(--aquarium-text-color-default)",
+    intense: "var(--aquarium-text-color-intense)",
+    "primary-muted-3x": "var(--aquarium-text-color-primary-muted-3x)",
+    "primary-muted-2x": "var(--aquarium-text-color-primary-muted-2x)",
+    "primary-muted": "var(--aquarium-text-color-primary-muted)",
+    "primary-default": "var(--aquarium-text-color-primary-default)",
+    "primary-intense": "var(--aquarium-text-color-primary-intense)",
+    "primary-intense-2x": "var(--aquarium-text-color-primary-intense-2x)",
+    "info-default": "var(--aquarium-text-color-info-default)",
+    "info-intense": "var(--aquarium-text-color-info-intense)",
+    "success-default": "var(--aquarium-text-color-success-default)",
+    "success-intense": "var(--aquarium-text-color-success-intense)",
+    "warning-default": "var(--aquarium-text-color-warning-default)",
+    "warning-intense": "var(--aquarium-text-color-warning-intense)",
+    "danger-muted": "var(--aquarium-text-color-danger-muted)",
+    "danger-default": "var(--aquarium-text-color-danger-default)",
+    "danger-intense": "var(--aquarium-text-color-danger-intense)"
+  },
+  borderColor: {
+    "error-100": "var(--aquarium-colors-error-100, #aa0000)",
+    "error-90": "var(--aquarium-colors-error-90, #b90000)",
+    "error-80": "var(--aquarium-colors-error-80, #c50001)",
+    "error-70": "var(--aquarium-colors-error-70, #d80005)",
+    "error-60": "var(--aquarium-colors-error-60, #e70000)",
+    "error-50": "var(--aquarium-colors-error-50, #e62728)",
+    "error-40": "var(--aquarium-colors-error-40, #e0504f)",
+    "error-30": "var(--aquarium-colors-error-30, #ed7975)",
+    "error-20": "var(--aquarium-colors-error-20, #ffadb3)",
+    "error-10": "var(--aquarium-colors-error-10, #ffcbd2)",
+    "error-5": "var(--aquarium-colors-error-5, #fee8e7)",
+    "error-0": "var(--aquarium-colors-error-0, #fef2f1)",
+    "warning-100": "var(--aquarium-colors-warning-100, #fe6d00)",
+    "warning-90": "var(--aquarium-colors-warning-90, #ff9003)",
+    "warning-80": "var(--aquarium-colors-warning-80, #fd9f00)",
+    "warning-70": "var(--aquarium-colors-warning-70, #ffb300)",
+    "warning-60": "var(--aquarium-colors-warning-60, #ffc107)",
+    "warning-50": "var(--aquarium-colors-warning-50, #fdc926)",
+    "warning-40": "var(--aquarium-colors-warning-40, #fdd44d)",
+    "warning-30": "var(--aquarium-colors-warning-30, #fddf81)",
+    "warning-20": "var(--aquarium-colors-warning-20, #feebb2)",
+    "warning-10": "var(--aquarium-colors-warning-10, #fff2cd)",
+    "warning-5": "var(--aquarium-colors-warning-5, #fff8ea)",
+    "warning-0": "var(--aquarium-colors-warning-0, #fffdf9)",
+    "success-100": "var(--aquarium-colors-success-100, #006f00)",
+    "success-90": "var(--aquarium-colors-success-90, #008e00)",
+    "success-80": "var(--aquarium-colors-success-80, #009f00)",
+    "success-70": "var(--aquarium-colors-success-70, #00b300)",
+    "success-60": "var(--aquarium-colors-success-60, #00c300)",
+    "success-50": "var(--aquarium-colors-success-50, #40ce37)",
+    "success-40": "var(--aquarium-colors-success-40, #60db57)",
+    "success-30": "var(--aquarium-colors-success-30, #89eb80)",
+    "success-20": "var(--aquarium-colors-success-20, #afffa7)",
+    "success-10": "var(--aquarium-colors-success-10, #cbffc9)",
+    "success-5": "var(--aquarium-colors-success-5, #ecf7ed)",
+    "success-0": "var(--aquarium-colors-success-0, #f5faf5)",
+    "info-100": "var(--aquarium-colors-info-100, #02569a)",
+    "info-90": "var(--aquarium-colors-info-90, #0174ba)",
+    "info-80": "var(--aquarium-colors-info-80, #0788d1)",
+    "info-70": "var(--aquarium-colors-info-70, #0399e3)",
+    "info-60": "var(--aquarium-colors-info-60, #02a8f3)",
+    "info-50": "var(--aquarium-colors-info-50, #28b4f4)",
+    "info-40": "var(--aquarium-colors-info-40, #4cc2f7)",
+    "info-30": "var(--aquarium-colors-info-30, #7fd1f7)",
+    "info-20": "var(--aquarium-colors-info-20, #b4e5fb)",
+    "info-10": "var(--aquarium-colors-info-10, #e0f5fe)",
+    "info-5": "var(--aquarium-colors-info-5, #effaff)",
+    "info-0": "var(--aquarium-colors-info-0, #f9fdff)",
+    "grey-100": "var(--aquarium-colors-grey-100, #19191d)",
+    "grey-90": "var(--aquarium-colors-grey-90, #292a31)",
+    "grey-80": "var(--aquarium-colors-grey-80, #3a3a44)",
+    "grey-70": "var(--aquarium-colors-grey-70, #4a4b57)",
+    "grey-60": "var(--aquarium-colors-grey-60, #5a5b6a)",
+    "grey-50": "var(--aquarium-colors-grey-50, #787885)",
+    "grey-40": "var(--aquarium-colors-grey-40, #9696a0)",
+    "grey-30": "var(--aquarium-colors-grey-30, #b4b4bb)",
+    "grey-20": "var(--aquarium-colors-grey-20, #d2d2d6)",
+    "grey-10": "var(--aquarium-colors-grey-10, #e1e1e3)",
+    "grey-5": "var(--aquarium-colors-grey-5, #ededf0)",
+    "grey-0": "var(--aquarium-colors-grey-0, #f7f7fa)",
+    "secondary-100": "var(--aquarium-colors-secondary-100, #e11d16)",
+    "secondary-90": "var(--aquarium-colors-secondary-90, #eb4610)",
+    "secondary-80": "var(--aquarium-colors-secondary-80, #f3580d)",
+    "secondary-70": "var(--aquarium-colors-secondary-70, #f96a02)",
+    "secondary-60": "var(--aquarium-colors-secondary-60, #ff7700)",
+    "secondary-50": "var(--aquarium-colors-secondary-50, #fc871a)",
+    "secondary-40": "var(--aquarium-colors-secondary-40, #fb9a3e)",
+    "secondary-30": "var(--aquarium-colors-secondary-30, #fab26e)",
+    "secondary-20": "var(--aquarium-colors-secondary-20, #f8c99c)",
+    "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, #9daaee)",
+    "primary-40": "var(--aquarium-colors-primary-40, #b9c5ef)",
+    "primary-30": "var(--aquarium-colors-primary-30, #c7d1f4)",
+    "primary-20": "var(--aquarium-colors-primary-20, #d5ddfa)",
+    "primary-10": "var(--aquarium-colors-primary-10, #e3e9ff)",
+    "primary-5": "var(--aquarium-colors-primary-5, #f3f6ff)",
+    "primary-0": "var(--aquarium-colors-primary-0, #ffffff)",
+    transparent: "var(--aquarium-colors-transparent, transparent)",
+    current: "var(--aquarium-colors-current, currentColor)",
+    white: "var(--aquarium-colors-white, white)",
+    black: "var(--aquarium-colors-black, black)",
+    DEFAULT: "currentColor",
+    "muted-2x": "var(--aquarium-border-color-muted-2x)",
+    muted: "var(--aquarium-border-color-muted)",
+    default: "var(--aquarium-border-color-default)",
+    intense: "var(--aquarium-border-color-intense)",
+    "primary-muted-3x": "var(--aquarium-border-color-primary-muted-3x)",
+    "primary-muted-2x": "var(--aquarium-border-color-primary-muted-2x)",
+    "primary-muted": "var(--aquarium-border-color-primary-muted)",
+    "primary-default": "var(--aquarium-border-color-primary-default)",
+    "info-default": "var(--aquarium-border-color-info-default)",
+    "success-muted": "var(--aquarium-border-color-success-muted)",
+    "success-default": "var(--aquarium-border-color-success-default)",
+    "success-intense": "var(--aquarium-border-color-success-intense)",
+    "warning-muted": "var(--aquarium-border-color-warning-muted)",
+    "danger-muted": "var(--aquarium-border-color-danger-muted)",
+    "danger-default": "var(--aquarium-border-color-danger-default)",
+    "danger-intense": "var(--aquarium-border-color-danger-intense)"
   },
   gap: {
     "0": "0",
@@ -5521,8 +5757,8 @@ var Toast = (_a) => {
   return /* @__PURE__ */ React6.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames2(
       tw("typography-body-small rounded grid grid-cols-[1fr_auto] items-center gap-x-6 gap-y-2 p-4 text-white", {
-        "bg-grey-80": variant === "default",
-        "bg-error-70": variant === "danger"
+        "bg-intense-2x": variant === "default",
+        "bg-danger-intense": variant === "danger"
       }),
       className
     )
@@ -5533,8 +5769,8 @@ var Dismiss = (_a) => {
   return /* @__PURE__ */ React6.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames2(
       tw("self-start [&>button]:p-0 flex", {
-        "[&>button]:text-grey-50": variant === "default",
-        "[&>button]:text-error-20": variant === "danger"
+        "[&>button]:text-muted": variant === "default",
+        "[&>button]:text-danger-muted": variant === "danger"
       }),
       className
     )
@@ -6007,7 +6243,7 @@ import {
 } from "@iconify/react";
 var Icon = React12.forwardRef((_a, ref) => {
   var _b = _a, { color, className } = _b, rest = __objRest(_b, ["color", "className"]);
-  const classes2 = classNames("Aquarium-Icon", className, color && `text-${color}`);
+  const classes2 = classNames("Aquarium-Icon", className, color && `text-${String(color)}`);
   return /* @__PURE__ */ React12.createElement(IconifyIconComponent, __spreadValues({
     ref: ref != null ? ref : void 0,
     className: classes2 !== "" ? classes2 : void 0
@@ -6015,7 +6251,7 @@ var Icon = React12.forwardRef((_a, ref) => {
 });
 var InlineIcon = React12.forwardRef((_a, ref) => {
   var _b = _a, { color, className } = _b, rest = __objRest(_b, ["color", "className"]);
-  const classes2 = classNames("Aquarium-InlineIcon", color && `text-${color}`);
+  const classes2 = classNames("Aquarium-InlineIcon", color && `text-${String(color)}`);
   return /* @__PURE__ */ React12.createElement("span", {
     className: classNames(tw("children:inline-block inline-flex justify-center items-center"), className)
   }, /* @__PURE__ */ React12.createElement(IconifyInlineIconComponent, __spreadValues({
@@ -6228,7 +6464,7 @@ var TooltipWrapper = React13.forwardRef(
     const arrowStyle = getArrowStyle(ref.current, placement, (_a2 = arrowProps.style) != null ? _a2 : {});
     return /* @__PURE__ */ React13.createElement(OverlayContainer, null, /* @__PURE__ */ React13.createElement("div", __spreadValues({
       ref,
-      className: classNames(tw("p-3 rounded-sm typography-caption max-w-[320px] bg-grey-90 text-white"))
+      className: classNames(tw("p-3 rounded-sm typography-caption max-w-[320px] bg-intense-2x text-white"))
     }, mergeProps(props, tooltipProps)), props.children, /* @__PURE__ */ React13.createElement(Arrow, __spreadProps(__spreadValues({}, arrowProps), {
       style: arrowStyle
     }))));
@@ -6267,17 +6503,17 @@ var getArrowStyle = (element, position, { left, top }) => {
 };
 var Arrow = (props) => {
   return /* @__PURE__ */ React13.createElement("div", __spreadValues({
-    className: tw("absolute w-3 h-3 bg-grey-90 rotate-45")
+    className: tw("absolute w-3 h-3 bg-intense-2x rotate-45")
   }, props));
 };
 
 // src/utils/constants.ts
 var ghostButtonStyle = tw(
-  "text-primary-80 active:text-primary-90 focus-visible:text-primary-90 hover:text-primary-90 disabled:text-primary-40"
+  "text-primary-intense active:text-primary-intense-2x focus-visible:text-primary-intense-2x hover:text-primary-intense-2x disabled:text-primary-muted-2x"
 );
 var linkStyle = classNames(
   ghostButtonStyle,
-  tw("visited:text-primary-80 no-underline hover:underline focusable")
+  tw("visited:text-primary-intense no-underline hover:underline focusable")
 );
 
 // src/utils/string.ts
@@ -6288,19 +6524,19 @@ var import_chevronDown2 = __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-100 focus-visible:ring-inset hover:bg-primary-90 disabled:bg-primary-40"
+    "text-white bg-primary-default active:bg-primary-intense active:ring-0 focus-visible:ring-2 focus-visible:ring-primary-100 focus-visible:ring-inset hover:bg-primary-intense disabled:bg-primary-muted"
   ),
   "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-90",
-    "focus-visible:ring-2 focus-visible:ring-primary-90 focus-visible:text-primary-80",
-    "hover:bg-primary-5 hover:ring-primary-90 hover:text-primary-90",
-    "disabled:bg-white disabled:text-primary-40 disabled:ring-primary-40"
+    "text-primary-intense bg-body ring-1 ring-primary-80 ring-inset",
+    "active:bg-primary-muted-3x active:ring-primary-90 active:text-primary-intense",
+    "focus-visible:ring-2 focus-visible:ring-primary-90 focus-visible:text-primary-intense",
+    "hover:bg-primary-muted-3x hover:ring-primary-90 hover:text-primary-intense",
+    "disabled:bg-body disabled:text-primary-muted-2x disabled:ring-primary-40"
   ),
   "ghost": ghostButtonStyle,
   "text": linkStyle,
   "secondary-ghost": tw(
-    "text-grey-60 active:text-grey-50 focus-visible:text-grey-80 hover:text-grey-80 disabled:text-grey-30"
+    "text-grey-60 active:text-muted focus-visible:text-intense hover:text-intense disabled:text-muted-3x"
   )
 };
 var LoadingSpinner = ({ size = "20px" }) => {
@@ -6308,7 +6544,7 @@ var LoadingSpinner = ({ size = "20px" }) => {
     icon: import_loading2.default,
     width: size,
     height: size,
-    color: "primary-80",
+    color: "primary-intense",
     "data-testid": "loading-button"
   });
 };
@@ -6403,7 +6639,7 @@ var asButton = (Component, isDropdownButton) => {
           tw(
             "inline-block border-0 rounded-sm transition whitespace-nowrap focus:outline-none relative text-center",
             {
-              "text-default p-2 active:text-default active:bg-transparent hover:text-grey-90 hover:bg-grey-0 focus-visible:text-grey-90 focus-visible:bg-grey-0 disabled:text-muted disabled:bg-transparent": isIconOnlyButton,
+              "text-default p-2 active:text-default active:bg-transparent hover:text-intense hover:bg-muted focus-visible:text-intense focus-visible:bg-muted disabled:text-muted-2x disabled:bg-transparent": isIconOnlyButton,
               "typography-default-strong": !dense && !isIconOnlyButton && kind !== "text",
               "typography-small-strong": dense && !isIconOnlyButton && kind !== "text",
               "py-3 px-4": !dense && isButton,
@@ -6544,7 +6780,7 @@ var Typography = (_a) => {
   const resolvedColorName = isUndefined6(color) || color === "current" ? "default" : color;
   const style = useStyle({ fontWeight });
   return /* @__PURE__ */ React15.createElement(HtmlElement, __spreadValues({
-    className: classNames(typographies[variant], `text-${resolvedColorName}`, className),
+    className: classNames(typographies[variant], `text-${resolvedColorName.toString()}`, className),
     style
   }, rest), children);
 };
@@ -6559,23 +6795,23 @@ var import_warningSign2 = __toESM(require_warningSign());
 var alertTypes = {
   announcement: {
     icon: import_announcement2.default,
-    color: "primary-80"
+    color: "primary-intense"
   },
   information: {
     icon: import_infoSign2.default,
-    color: "info-70"
+    color: "info-default"
   },
   warning: {
     icon: import_warningSign2.default,
-    color: "warning-90"
+    color: "warning-default"
   },
   error: {
     icon: import_error2.default,
-    color: "error-70"
+    color: "danger-intense"
   },
   success: {
     icon: import_tickCircle2.default,
-    color: "success-70"
+    color: "success-default"
   }
 };
 var Alert = (_a) => {
@@ -6594,11 +6830,11 @@ var Alert = (_a) => {
     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",
-        "bg-info-10": type === "information",
-        "bg-success-5": type === "success",
-        "bg-warning-5": type === "warning",
-        "bg-primary-10": type === "announcement",
+        "bg-danger-muted-2x": type === "error",
+        "bg-info-muted": type === "information",
+        "bg-success-muted": type === "success",
+        "bg-warning-muted": type === "warning",
+        "bg-primary-muted-2x": type === "announcement",
         "p-4": Boolean(dense),
         "p-5": !dense
       }),
@@ -6662,10 +6898,10 @@ var Banner = (_a) => {
     role: type === "error" || type === "warning" ? "alert" : "status",
     className: classNames(
       tw("relative flex px-[60px] justify-center", {
-        "bg-error-5": type === "error",
-        "bg-primary-5": type === "information",
-        "bg-success-5": type === "success",
-        "bg-warning-5": type === "warning"
+        "bg-danger-muted-2x": type === "error",
+        "bg-primary-muted-3x": type === "information",
+        "bg-success-muted": type === "success",
+        "bg-warning-muted": type === "warning"
       }),
       className
     )
@@ -6753,18 +6989,104 @@ var IllustrationRight = (_a) => {
 Banner.IllustrationRight = IllustrationRight;
 Banner.IllustrationRight.displayName = "Alert.Banner.IllustrationRight";
 
+// src/atoms/Banner/Banner.tsx
+import React17 from "react";
+var spacing = {
+  spacingAroundBanner: "p-6",
+  omitSpacingAroundBanner: "-6"
+};
+var Banner2 = (_a) => {
+  var _b = _a, {
+    children,
+    className,
+    layout,
+    variant
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "className",
+    "layout",
+    "variant"
+  ]);
+  return /* @__PURE__ */ React17.createElement("div", __spreadProps(__spreadValues({}, rest), {
+    className: classNames(
+      className,
+      tw(`rounded flex justify-between gap-7 flex-nowrap ${spacing.spacingAroundBanner}`, {
+        "items-center": layout === "horizontal",
+        "bg-muted": variant === "default",
+        "bg-body border border-muted": variant === "outlined"
+      })
+    )
+  }), children);
+};
+Banner2.Title = (_a) => {
+  var _b = _a, { children, className, layout } = _b, rest = __objRest(_b, ["children", "className", "layout"]);
+  return /* @__PURE__ */ React17.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
+    variant: "subheading",
+    color: "grey-100",
+    className: classNames(
+      className,
+      tw({
+        "mb-3": layout === "vertical"
+      })
+    )
+  }), children);
+};
+Banner2.Description = (_a) => {
+  var _b = _a, { flexGrow, children, className } = _b, rest = __objRest(_b, ["flexGrow", "children", "className"]);
+  return /* @__PURE__ */ React17.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
+    variant: "default",
+    className: classNames(className, tw({ "flex-grow": flexGrow }))
+  }), children);
+};
+Banner2.ContentContainer = (_a) => {
+  var _b = _a, { layout, children, className } = _b, rest = __objRest(_b, ["layout", "children", "className"]);
+  return /* @__PURE__ */ React17.createElement("div", __spreadProps(__spreadValues({}, rest), {
+    className: classNames(
+      className,
+      tw("flex w-full", {
+        "flex-col": layout === "vertical",
+        "flex-row flex-nowrap gap-7 items-center": layout === "horizontal"
+      })
+    )
+  }), children);
+};
+Banner2.ImageContainer = (_a) => {
+  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ React17.createElement(Box, __spreadProps(__spreadValues({}, rest), {
+    display: "inline-flex",
+    alignItems: "center",
+    margin: spacing.omitSpacingAroundBanner,
+    marginLeft: "0"
+  }), children);
+};
+Banner2.Actions = (_a) => {
+  var _b = _a, { children, className, layout } = _b, rest = __objRest(_b, ["children", "className", "layout"]);
+  return /* @__PURE__ */ React17.createElement("div", __spreadProps(__spreadValues({}, rest), {
+    className: classNames(className, tw("flex gap-4", { "mt-5": layout === "vertical" }))
+  }), children);
+};
+Banner2.DismissContainer = (_a) => {
+  var _b = _a, { layout, children, className } = _b, rest = __objRest(_b, ["layout", "children", "className"]);
+  return /* @__PURE__ */ React17.createElement("div", __spreadProps(__spreadValues({}, rest), {
+    className: classNames(
+      className,
+      tw({ "self-start": layout === "vertical", "self-center": layout === "horizontal" })
+    )
+  }), children);
+};
+
 // src/atoms/Card/Card.tsx
-import React19 from "react";
+import React20 from "react";
 import isNumber from "lodash/isNumber";
 
 // src/molecules/Typography/Typography.tsx
-import React17 from "react";
+import React18 from "react";
 import classNames3 from "classnames";
-var Typography2 = (props) => /* @__PURE__ */ React17.createElement(Typography, __spreadValues({}, props));
+var Typography2 = (props) => /* @__PURE__ */ React18.createElement(Typography, __spreadValues({}, props));
 Typography2.displayName = "Typography";
 Typography2.LargeHeading = (_a) => {
   var _b = _a, { htmlTag = "h1" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React17.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React18.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
     variant: "large-heading"
   }));
@@ -6772,7 +7094,7 @@ Typography2.LargeHeading = (_a) => {
 Typography2.LargeHeading.displayName = "Typography.LargeHeading";
 Typography2.Heading = (_a) => {
   var _b = _a, { htmlTag = "h1", fontWeight } = _b, props = __objRest(_b, ["htmlTag", "fontWeight"]);
-  return /* @__PURE__ */ React17.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React18.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
     variant: "heading"
   }));
@@ -6780,7 +7102,7 @@ Typography2.Heading = (_a) => {
 Typography2.Heading.displayName = "Typography.Heading";
 Typography2.Subheading = (_a) => {
   var _b = _a, { htmlTag = "h2", fontWeight } = _b, props = __objRest(_b, ["htmlTag", "fontWeight"]);
-  return /* @__PURE__ */ React17.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React18.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
     variant: "subheading"
   }));
@@ -6788,7 +7110,7 @@ Typography2.Subheading = (_a) => {
 Typography2.Subheading.displayName = "Typography.Subheading";
 Typography2.LargeStrong = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React17.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React18.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
     variant: "large-strong"
   }));
@@ -6796,7 +7118,7 @@ Typography2.LargeStrong = (_a) => {
 Typography2.LargeStrong.displayName = "Typography.LargeStrong";
 Typography2.Large = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React17.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React18.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
     variant: "large"
   }));
@@ -6804,7 +7126,7 @@ Typography2.Large = (_a) => {
 Typography2.Large.displayName = "Typography.Large";
 Typography2.DefaultStrong = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React17.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React18.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
     variant: "default-strong"
   }));
@@ -6812,7 +7134,7 @@ Typography2.DefaultStrong = (_a) => {
 Typography2.DefaultStrong.displayName = "Typography.DefaultStrong";
 Typography2.Default = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React17.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React18.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
     variant: "default"
   }));
@@ -6820,7 +7142,7 @@ Typography2.Default = (_a) => {
 Typography2.Default.displayName = "Typography.Default";
 Typography2.Paragraph = (_a) => {
   var _b = _a, { htmlTag = "p", fontWeight } = _b, props = __objRest(_b, ["htmlTag", "fontWeight"]);
-  return /* @__PURE__ */ React17.createElement(Typography2.Default, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React18.createElement(Typography2.Default, __spreadProps(__spreadValues({}, props), {
     htmlTag
   }));
 };
@@ -6828,7 +7150,7 @@ Typography2.P = Typography2.Paragraph;
 Typography2.Paragraph.displayName = "Typography.Paragraph";
 Typography2.Small = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React17.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React18.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
     variant: "small"
   }));
@@ -6836,7 +7158,7 @@ Typography2.Small = (_a) => {
 Typography2.Small.displayName = "Typography.Small";
 Typography2.SmallStrong = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React17.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React18.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
     variant: "small-strong"
   }));
@@ -6844,14 +7166,14 @@ Typography2.SmallStrong = (_a) => {
 Typography2.SmallStrong.displayName = "Typography.SmallStrong";
 Typography2.Strong = (_a) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React17.createElement("strong", __spreadValues({
+  return /* @__PURE__ */ React18.createElement("strong", __spreadValues({
     className: classNames3(tw("font-semibold"), className)
   }, props));
 };
 Typography2.Strong.displayName = "Typography.Strong";
 Typography2.Caption = (_a) => {
   var _b = _a, { htmlTag = "div", fontWeight } = _b, props = __objRest(_b, ["htmlTag", "fontWeight"]);
-  return /* @__PURE__ */ React17.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React18.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
     variant: "caption"
   }));
@@ -6859,7 +7181,7 @@ Typography2.Caption = (_a) => {
 Typography2.Caption.displayName = "Typography.Caption";
 Typography2.LargeText = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React17.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React18.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
     variant: "large-strong"
   }));
@@ -6867,7 +7189,7 @@ Typography2.LargeText = (_a) => {
 Typography2.LargeText.displayName = "Typography.LargeText";
 Typography2.MediumText = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React17.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React18.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
     variant: "default-strong"
   }));
@@ -6875,7 +7197,7 @@ Typography2.MediumText = (_a) => {
 Typography2.MediumText.displayName = "Typography.MediumText";
 Typography2.Text = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React17.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React18.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
     variant: "default"
   }));
@@ -6883,7 +7205,7 @@ Typography2.Text = (_a) => {
 Typography2.Text.displayName = "Typography.Text";
 Typography2.SmallText = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React17.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React18.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
     variant: "small"
   }));
@@ -6891,7 +7213,7 @@ Typography2.SmallText = (_a) => {
 Typography2.SmallText.displayName = "Typography.SmallText";
 Typography2.SmallTextBold = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
-  return /* @__PURE__ */ React17.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React18.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
     variant: "small-strong"
   }));
@@ -6899,11 +7221,11 @@ Typography2.SmallTextBold = (_a) => {
 Typography2.SmallTextBold.displayName = "Typography.SmallTextBold";
 
 // src/atoms/LineClamp/LineClamp.tsx
-import React18 from "react";
-var LineClamp = React18.forwardRef(
+import React19 from "react";
+var LineClamp = React19.forwardRef(
   (_a, ref) => {
     var _b = _a, { lines = 1, clamped = true, children, className, wordBreak = "break-words" } = _b, props = __objRest(_b, ["lines", "clamped", "children", "className", "wordBreak"]);
-    return /* @__PURE__ */ React18.createElement("div", __spreadValues({
+    return /* @__PURE__ */ React19.createElement("div", __spreadValues({
       ref,
       className: classNames(className, wordBreak === "break-words" ? "break-words" : "break-all", {
         [`line-clamp-${lines}`]: clamped
@@ -6917,13 +7239,13 @@ var getCommonCardStyles = ({
   fullWidth = false,
   enableMinWidth = true,
   disabled = false
-}) => tw("border-[2px] border-muted rounded-[2px] relative p-5 flex flex-col gap-5 bg-white outline-none transition-all", {
+}) => tw("border-[2px] border-muted rounded-[2px] relative p-5 flex flex-col gap-5 bg-body outline-none transition-all", {
   "w-[280px]": !fullWidth,
   "w-full": fullWidth,
   "min-w-[280px]": fullWidth && enableMinWidth,
-  "bg-grey-0 cursor-not-allowed focus:border-transparent opacity-50": disabled
+  "bg-muted cursor-not-allowed focus:border-transparent opacity-50": disabled
 });
-var Card = React19.forwardRef((props, ref) => {
+var Card = React20.forwardRef((props, ref) => {
   const _a = props, {
     disabled = false,
     clickable: _clickable,
@@ -6944,14 +7266,14 @@ var Card = React19.forwardRef((props, ref) => {
     "fullWidth"
   ]);
   const clickable = Boolean(role !== void 0 && !disabled);
-  return /* @__PURE__ */ React19.createElement("div", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React20.createElement("div", __spreadProps(__spreadValues({
     ref,
     role
   }, rest), {
     className: classNames(
       getCommonCardStyles(props),
       tw({
-        "cursor-pointer hover:bg-primary-5 active:bg-white": clickable && !disabled,
+        "cursor-pointer hover:bg-primary-muted-3x active:bg-body": clickable && !disabled,
         "focusable": clickable && modality === "keyboard"
       }),
       className
@@ -6960,12 +7282,12 @@ var Card = React19.forwardRef((props, ref) => {
 });
 var Label = (props) => {
   const _a = props, { className, checked = false, children, modality, enableMinWidth, fullWidth, disabled } = _a, rest = __objRest(_a, ["className", "checked", "children", "modality", "enableMinWidth", "fullWidth", "disabled"]);
-  return /* @__PURE__ */ React19.createElement("label", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React20.createElement("label", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       getCommonCardStyles(props),
       tw({
-        "cursor-pointer hover:bg-primary-5 active:bg-white": !disabled,
-        "border-primary-80": checked,
+        "cursor-pointer hover:bg-primary-muted-3x active:bg-body": !disabled,
+        "border-primary-default": checked,
         "focusable": modality === "keyboard"
       }),
       className
@@ -6974,14 +7296,14 @@ var Label = (props) => {
 };
 var ColorHighlight = (_a) => {
   var _b = _a, { color, className } = _b, rest = __objRest(_b, ["color", "className"]);
-  return /* @__PURE__ */ React19.createElement(Box, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React20.createElement(Box, __spreadProps(__spreadValues({}, rest), {
     backgroundColor: color,
     className: classNames(tw("h-1 w-full absolute top-0 left-0 right-0"), className)
   }));
 };
 var ImageContainer = (_a) => {
   var _b = _a, { className, fullSize } = _b, rest = __objRest(_b, ["className", "fullSize"]);
-  return /* @__PURE__ */ React19.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React20.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       tw("-mx-4", {
         "-mt-4": Boolean(fullSize)
@@ -6991,7 +7313,7 @@ var ImageContainer = (_a) => {
   }));
 };
 var classes = "w-full bg-cover object-cover";
-var Image = ({ image, imageAlt, fullSize = false, imageHeight }) => /* @__PURE__ */ React19.createElement("img", {
+var Image = ({ image, imageAlt, fullSize = false, imageHeight }) => /* @__PURE__ */ React20.createElement("img", {
   src: image,
   alt: imageAlt,
   className: tw(classes, {
@@ -7000,20 +7322,20 @@ var Image = ({ image, imageAlt, fullSize = false, imageHeight }) => /* @__PURE__
   }),
   style: { height: isNumber(imageHeight) ? `${imageHeight}px` : imageHeight }
 });
-var Title = (props) => /* @__PURE__ */ React19.createElement(Box.Flex, __spreadValues({
+var Title = (props) => /* @__PURE__ */ React20.createElement(Box.Flex, __spreadValues({
   component: "div",
   alignItems: "center",
   gap: "2"
 }, props));
 var Content = (_a) => {
   var _b = _a, { className, dense } = _b, rest = __objRest(_b, ["className", "dense"]);
-  return /* @__PURE__ */ React19.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React20.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("flex flex-col", { "gap-4": !dense }), className)
   }));
 };
 var Actions = (_a) => {
   var _b = _a, { className, dense } = _b, rest = __objRest(_b, ["className", "dense"]);
-  return /* @__PURE__ */ React19.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React20.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("flex gap-3 items-center", { "pt-3 ": !dense }), className)
   }));
 };
@@ -7025,7 +7347,7 @@ Card.ImageContainer = ImageContainer;
 Card.Image = Image;
 Card.ColorHiglight = ColorHighlight;
 var isCardTitleComponent = (c) => {
-  return React19.isValidElement(c) && c.type === Card.Title;
+  return React20.isValidElement(c) && c.type === Card.Title;
 };
 var getTitleContent = ({
   title,
@@ -7037,12 +7359,12 @@ var getTitleContent = ({
       "Wrap a custom card title element with <Card.Title> to get the desired spacing between children elements applied."
     );
   }
-  const titleContent = /* @__PURE__ */ React19.createElement(Typography2, {
+  const titleContent = /* @__PURE__ */ React20.createElement(Typography2, {
     variant: dense ? "small-strong" : "default-strong",
     color: "black"
   }, title);
   if (clampTitle) {
-    return /* @__PURE__ */ React19.createElement(LineClamp, {
+    return /* @__PURE__ */ React20.createElement(LineClamp, {
       lines: clampTitle,
       wordBreak: "break-all"
     }, titleContent);
@@ -7051,18 +7373,18 @@ var getTitleContent = ({
 };
 
 // src/atoms/Checkbox/Checkbox.tsx
-import React20 from "react";
+import React21 from "react";
 var import_minus2 = __toESM(require_minus());
 var import_tick2 = __toESM(require_tick());
-var Checkbox = React20.forwardRef(
+var Checkbox = React21.forwardRef(
   (_a, ref) => {
     var _b = _a, { id, children, name, disabled = false, readOnly = false, indeterminate = false } = _b, props = __objRest(_b, ["id", "children", "name", "disabled", "readOnly", "indeterminate"]);
-    return /* @__PURE__ */ React20.createElement("span", {
+    return /* @__PURE__ */ React21.createElement("span", {
       className: classNames(tw("inline-flex justify-center items-center self-center relative"), {
-        "hover:border-intense peer-checked:border-primary-80": !disabled,
+        "hover:border-intense peer-checked:border-primary-default": !disabled,
         "border-muted": disabled
       })
-    }, /* @__PURE__ */ React20.createElement("input", __spreadProps(__spreadValues({
+    }, /* @__PURE__ */ React21.createElement("input", __spreadProps(__spreadValues({
       id,
       ref,
       type: "checkbox",
@@ -7070,13 +7392,13 @@ var Checkbox = React20.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-primary-default": !disabled,
+          "cursor-not-allowed bg-muted checked:bg-primary-muted": disabled
         })
       ),
       readOnly,
       disabled
-    })), /* @__PURE__ */ React20.createElement(Icon, {
+    })), /* @__PURE__ */ React21.createElement(Icon, {
       icon: indeterminate ? import_minus2.default : import_tick2.default,
       strokeWidth: "2px",
       className: classNames(
@@ -7084,11 +7406,11 @@ var Checkbox = React20.forwardRef(
           "absolute top-0 right-0",
           "pointer-events-none p-[2px] w-5 h-5",
           "text-transparent [&>path]:stroke-transparent [&>path]:stroke-2",
-          "rounded-sm border border-default peer-focus:border-info-70"
+          "rounded-sm border border-default peer-focus:border-info-default"
         ),
         {
-          "peer-hover:border-intense peer-checked:text-white peer-checked:[&>path]:stroke-white peer-checked:border-primary-80": !disabled,
-          "border-muted peer-checked:text-primary-10 peer-checked:[&>path]:stroke-primary-10 peer-checked:border-primary-40": disabled
+          "peer-hover:border-intense peer-checked:text-white peer-checked:[&>path]:stroke-white peer-checked:border-primary-default": !disabled,
+          "border-muted peer-checked:text-primary-muted-3x peer-checked:[&>path]:stroke-primary-10 peer-checked:border-primary-muted-2x": disabled
         }
       )
     }));
@@ -7096,11 +7418,11 @@ var Checkbox = React20.forwardRef(
 );
 
 // src/atoms/Chip/Chip.tsx
-import React21 from "react";
-var Container = React21.forwardRef(
+import React22 from "react";
+var Container = React22.forwardRef(
   (_a, ref) => {
     var _b = _a, { dense = false, className, children } = _b, rest = __objRest(_b, ["dense", "className", "children"]);
-    return /* @__PURE__ */ React21.createElement("span", __spreadValues({
+    return /* @__PURE__ */ React22.createElement("span", __spreadValues({
       ref,
       className: classNames(
         tw("inline-flex items-center rounded-sm transition whitespace-nowrap", {
@@ -7117,17 +7439,17 @@ var Chip = {
 };
 
 // src/atoms/DataList/DataList.tsx
-import React24 from "react";
+import React25 from "react";
 
 // src/atoms/Table/Table.tsx
-import React23 from "react";
+import React24 from "react";
 
 // src/atoms/RadioButton/RadioButton.tsx
-import React22 from "react";
-var RadioButton = React22.forwardRef(
+import React23 from "react";
+var RadioButton = React23.forwardRef(
   (_a, ref) => {
     var _b = _a, { id, children, name, disabled = false, readOnly = false } = _b, props = __objRest(_b, ["id", "children", "name", "disabled", "readOnly"]);
-    return /* @__PURE__ */ React22.createElement("input", __spreadProps(__spreadValues({
+    return /* @__PURE__ */ React23.createElement("input", __spreadProps(__spreadValues({
       id,
       ref,
       type: "radio",
@@ -7137,10 +7459,10 @@ var RadioButton = React22.forwardRef(
         tw(
           "inline-flex justify-center items-center self-center appearance-none",
           "w-5 h-5 p-[3px] rounded-full cursor-pointer border border-default",
-          "outline-none focus:border-info-70 checked:bg-primary-80 checked:shadow-whiteInset",
+          "outline-none focus:border-info-default checked:bg-primary-default checked:shadow-whiteInset",
           {
-            "hover:border-intense checked:border-primary-80": !disabled,
-            "cursor-not-allowed border-muted bg-grey-0 checked:bg-opacity-40 checked:bg-primary-40 checked:border-primary-40": disabled
+            "hover:border-intense checked:border-primary-default": !disabled,
+            "cursor-not-allowed border-muted bg-muted checked:bg-opacity-40 checked:bg-primary-muted checked:border-primary-muted-2x": disabled
           }
         )
       ),
@@ -7153,29 +7475,29 @@ var RadioButton = React22.forwardRef(
 // src/atoms/Table/Table.tsx
 var import_chevronDown3 = __toESM(require_chevronDown());
 var import_chevronUp2 = __toESM(require_chevronUp());
-var HeadContext = React23.createContext(null);
+var HeadContext = React24.createContext(null);
 var tableClassNames = tw("w-full relative typography-default border-spacing-0");
 var Table = (_a) => {
   var _b = _a, { children, ariaLabel, className } = _b, rest = __objRest(_b, ["children", "ariaLabel", "className"]);
-  return /* @__PURE__ */ React23.createElement("table", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React24.createElement("table", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tableClassNames, className),
     "aria-label": ariaLabel
   }), children);
 };
 var TableHead = (_a) => {
   var _b = _a, { children, sticky } = _b, rest = __objRest(_b, ["children", "sticky"]);
-  return /* @__PURE__ */ React23.createElement("thead", __spreadValues({}, rest), /* @__PURE__ */ React23.createElement("tr", null, /* @__PURE__ */ React23.createElement(HeadContext.Provider, {
+  return /* @__PURE__ */ React24.createElement("thead", __spreadValues({}, rest), /* @__PURE__ */ React24.createElement("tr", null, /* @__PURE__ */ React24.createElement(HeadContext.Provider, {
     value: { children, sticky }
   }, children)));
 };
 var TableBody = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ React23.createElement("tbody", __spreadValues({}, rest), children);
+  return /* @__PURE__ */ React24.createElement("tbody", __spreadValues({}, rest), children);
 };
-var rowClassNames = tw("children:border-default group children:last:border-b-0 hover:bg-grey-0");
+var rowClassNames = tw("children:border-default group children:last:border-b-0 hover:bg-muted");
 var TableRow = (_a) => {
   var _b = _a, { children, className, disabled } = _b, rest = __objRest(_b, ["children", "className", "disabled"]);
-  return /* @__PURE__ */ React23.createElement("tr", __spreadProps(__spreadValues(__spreadValues({}, rest), { inert: disabled ? "" : void 0 }), {
+  return /* @__PURE__ */ React24.createElement("tr", __spreadProps(__spreadValues(__spreadValues({}, rest), { inert: disabled ? "" : void 0 }), {
     className: classNames(rowClassNames, className, {
       "opacity-70": disabled
     })
@@ -7185,13 +7507,13 @@ var cellClassNames = tw("px-4 border-b typography-small leading-[18px]");
 var getBodyCellClassNames = (table = true, stickyColumn) => tw("text-default py-3", {
   "h-[50px]": table,
   "min-h-[50px]": !table,
-  "sticky z-10 bg-white group-hover:bg-grey-0": Boolean(stickyColumn),
+  "sticky z-10 bg-body group-hover:bg-muted": Boolean(stickyColumn),
   "left-0": stickyColumn === "left",
   "right-0": stickyColumn === "right"
 });
 var getAlignClassNames = (align) => tw({ "text-right": align === "right", "text-center": align === "center" });
 var getHeadCellClassNames = (sticky = true, stickyColumn) => {
-  const common = tw("py-[14px] text-left bg-white border-intense text-grey-50 font-semibold whitespace-nowrap");
+  const common = tw("py-[14px] text-left bg-body border-intense text-muted font-semibold whitespace-nowrap");
   return sticky ? classNames(
     common,
     tw("sticky top-0", {
@@ -7204,15 +7526,15 @@ var getHeadCellClassNames = (sticky = true, stickyColumn) => {
 };
 var TableCell = (_a) => {
   var _b = _a, { children, className, stickyColumn, align = "left" } = _b, rest = __objRest(_b, ["children", "className", "stickyColumn", "align"]);
-  const headContext = React23.useContext(HeadContext);
-  return headContext ? /* @__PURE__ */ React23.createElement("th", __spreadProps(__spreadValues({}, rest), {
+  const headContext = React24.useContext(HeadContext);
+  return headContext ? /* @__PURE__ */ React24.createElement("th", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       cellClassNames,
       getHeadCellClassNames(headContext.sticky, stickyColumn),
       getAlignClassNames(align),
       className
     )
-  }), children) : /* @__PURE__ */ React23.createElement("td", __spreadProps(__spreadValues({}, rest), {
+  }), children) : /* @__PURE__ */ React24.createElement("td", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       cellClassNames,
       getBodyCellClassNames(true, stickyColumn),
@@ -7223,56 +7545,56 @@ var TableCell = (_a) => {
 };
 var TableSelectCell = (_a) => {
   var _b = _a, { ariaLabel } = _b, props = __objRest(_b, ["ariaLabel"]);
-  return /* @__PURE__ */ React23.createElement(Table.Cell, {
+  return /* @__PURE__ */ React24.createElement(Table.Cell, {
     className: tw("leading-[0px]")
-  }, props.type === "radio" ? /* @__PURE__ */ React23.createElement(RadioButton, __spreadValues({
+  }, props.type === "radio" ? /* @__PURE__ */ React24.createElement(RadioButton, __spreadValues({
     "aria-label": ariaLabel
-  }, props)) : /* @__PURE__ */ React23.createElement(Checkbox, __spreadValues({
+  }, props)) : /* @__PURE__ */ React24.createElement(Checkbox, __spreadValues({
     "aria-label": ariaLabel
   }, props)));
 };
-var getSortCellButtonClassNames = (align) => tw("group flex items-center gap-x-4 text-grey-50", { "flex-row-reverse": align === "right" });
+var getSortCellButtonClassNames = (align) => tw("group flex items-center gap-x-4 text-muted", { "flex-row-reverse": align === "right" });
 var getSortCellIconClassNames = (active) => {
-  return tw("text-[9px]", active ? "text-default" : "text-muted");
+  return tw("text-[9px]", active ? "text-default" : "text-muted-2x");
 };
 var TableSortCell = (_a) => {
   var _b = _a, { children, direction = "none", onClick } = _b, rest = __objRest(_b, ["children", "direction", "onClick"]);
-  return /* @__PURE__ */ React23.createElement(Table.Cell, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React24.createElement(Table.Cell, __spreadProps(__spreadValues({}, rest), {
     "aria-sort": direction
-  }), /* @__PURE__ */ React23.createElement("span", {
+  }), /* @__PURE__ */ React24.createElement("span", {
     className: getSortCellButtonClassNames(rest.align),
     role: "button",
     tabIndex: -1,
     onClick
-  }, children, /* @__PURE__ */ React23.createElement("div", {
+  }, children, /* @__PURE__ */ React24.createElement("div", {
     "data-sort-icons": true,
     className: tw("flex flex-col", {
       "invisible group-hover:visible": direction === "none"
     })
-  }, /* @__PURE__ */ React23.createElement(InlineIcon, {
+  }, /* @__PURE__ */ React24.createElement(InlineIcon, {
     icon: import_chevronUp2.default,
     className: getSortCellIconClassNames(direction === "ascending")
-  }), /* @__PURE__ */ React23.createElement(InlineIcon, {
+  }), /* @__PURE__ */ React24.createElement(InlineIcon, {
     icon: import_chevronDown3.default,
     className: getSortCellIconClassNames(direction === "descending")
   }))));
 };
-var Caption = ({ children }) => /* @__PURE__ */ React23.createElement(Typography2.Caption, {
+var Caption = ({ children }) => /* @__PURE__ */ React24.createElement(Typography2.Caption, {
   htmlTag: "caption"
 }, children);
-var Item = ({ image, imageAlt, imageSize = 35, title, caption }) => /* @__PURE__ */ React23.createElement("div", {
+var Item = ({ image, imageAlt, imageSize = 35, title, caption }) => /* @__PURE__ */ React24.createElement("div", {
   className: tw("flex gap-4 items-center")
-}, image && /* @__PURE__ */ React23.createElement("img", {
+}, image && /* @__PURE__ */ React24.createElement("img", {
   src: image,
   alt: imageAlt != null ? imageAlt : "",
   style: { width: imageSize, height: imageSize }
-}), /* @__PURE__ */ React23.createElement("div", null, title, caption && /* @__PURE__ */ React23.createElement(Typography2.Caption, null, caption)));
-Table.Head = React23.memo(TableHead);
-Table.Body = React23.memo(TableBody);
-Table.Row = React23.memo(TableRow);
-Table.Cell = React23.memo(TableCell);
-Table.SortCell = React23.memo(TableSortCell);
-Table.SelectCell = React23.memo(TableSelectCell);
+}), /* @__PURE__ */ React24.createElement("div", null, title, caption && /* @__PURE__ */ React24.createElement(Typography2.Caption, null, caption)));
+Table.Head = React24.memo(TableHead);
+Table.Body = React24.memo(TableBody);
+Table.Row = React24.memo(TableRow);
+Table.Cell = React24.memo(TableCell);
+Table.SortCell = React24.memo(TableSortCell);
+Table.SelectCell = React24.memo(TableSelectCell);
 Table.Caption = Caption;
 
 // src/atoms/DataList/DataList.tsx
@@ -7285,7 +7607,7 @@ var getAlignClassNames2 = (align) => tw("flex items-center", {
 });
 var DataList = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React24.createElement("div", __spreadValues({}, rest));
+  return /* @__PURE__ */ React25.createElement("div", __spreadValues({}, rest));
 };
 var HeadCell = (_a) => {
   var _b = _a, {
@@ -7299,7 +7621,7 @@ var HeadCell = (_a) => {
     "align",
     "stickyColumn"
   ]);
-  return /* @__PURE__ */ React24.createElement("div", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React25.createElement("div", __spreadProps(__spreadValues({
     role: "columnheader"
   }, rest), {
     className: classNames(
@@ -7320,7 +7642,7 @@ var Cell = (_a) => {
     "align",
     "stickyColumn"
   ]);
-  return /* @__PURE__ */ React24.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React25.createElement("div", __spreadProps(__spreadValues({}, rest), {
     role: "cell",
     className: classNames(
       cellClassNames,
@@ -7345,53 +7667,50 @@ var Row = (_a) => {
     "subgroup",
     "active"
   ]);
-  return /* @__PURE__ */ React24.createElement("div", __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React25.createElement("div", __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, rest), {
     role: subgroup ? "rowgroup" : "row"
   }), { inert: disabled ? "" : void 0 }), {
     className: classNames(tw("contents"), className, {
       "children:opacity-70": disabled,
-      "[&>*]:bg-primary-5": active,
-      "[&>*]:hover:bg-grey-0": !disabled && !header
+      "[&>*]:bg-primary-muted-3x": active,
+      "[&>*]:hover:bg-muted": !disabled && !header
     })
   }));
 };
 var SubGroupSpacing = (_a) => {
   var _b = _a, { className, divider } = _b, rest = __objRest(_b, ["className", "divider"]);
-  return /* @__PURE__ */ React24.createElement("span", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React25.createElement("span", __spreadProps(__spreadValues({}, rest), {
     "aria-hidden": true,
-    className: classNames(
-      tw("col-span-full h-6 bg-grey-0 border-default", { "border-b": Boolean(divider) }),
-      className
-    )
+    className: classNames(tw("col-span-full h-6 bg-muted border-default", { "border-b": Boolean(divider) }), className)
   }));
 };
 var SortCell = (_a) => {
   var _b = _a, { children, direction = "none", onClick, sticky } = _b, rest = __objRest(_b, ["children", "direction", "onClick", "sticky"]);
-  return /* @__PURE__ */ React24.createElement(HeadCell, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React25.createElement(HeadCell, __spreadProps(__spreadValues({}, rest), {
     "aria-sort": direction,
     role: "columnheader",
     sticky
-  }), /* @__PURE__ */ React24.createElement("span", {
+  }), /* @__PURE__ */ React25.createElement("span", {
     className: getSortCellButtonClassNames(rest.align),
     role: "button",
     tabIndex: -1,
     onClick
-  }, children, /* @__PURE__ */ React24.createElement("div", {
+  }, children, /* @__PURE__ */ React25.createElement("div", {
     "data-sort-icons": true,
     className: tw("flex flex-col", {
       "invisible group-hover:visible": direction === "none"
     })
-  }, /* @__PURE__ */ React24.createElement(InlineIcon, {
+  }, /* @__PURE__ */ React25.createElement(InlineIcon, {
     icon: import_chevronUp3.default,
     className: getSortCellIconClassNames(direction === "ascending")
-  }), /* @__PURE__ */ React24.createElement(InlineIcon, {
+  }), /* @__PURE__ */ React25.createElement(InlineIcon, {
     icon: import_chevronDown4.default,
     className: getSortCellIconClassNames(direction === "descending")
   }))));
 };
-var EmptyGroup = ({ icon, children }) => /* @__PURE__ */ React24.createElement("div", {
+var EmptyGroup = ({ icon, children }) => /* @__PURE__ */ React25.createElement("div", {
   className: tw("flex gap-3 items-center")
-}, icon && /* @__PURE__ */ React24.createElement(Icon, {
+}, icon && /* @__PURE__ */ React25.createElement(Icon, {
   icon,
   width: 22
 }), children);
@@ -7409,11 +7728,11 @@ DataList.Row = Row;
 DataList.Row.displayName = "DataList.Row";
 var ToolbarContainer = (_a) => {
   var _b = _a, { className, sticky = true } = _b, rest = __objRest(_b, ["className", "sticky"]);
-  return /* @__PURE__ */ React24.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React25.createElement("div", __spreadProps(__spreadValues({}, rest), {
     role: "row",
     className: classNames(
       tw("col-span-full flex items-stretch py-4 px-l2 border-b border-default", {
-        "sticky top-[47px] bg-white z-10": sticky
+        "sticky top-[47px] bg-body z-10": sticky
       }),
       className
     )
@@ -7422,7 +7741,7 @@ var ToolbarContainer = (_a) => {
 ToolbarContainer.displayName = "DataList.Toolbar.Container";
 var ToolbarGroup = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React24.createElement("div", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React25.createElement("div", __spreadProps(__spreadValues({
     role: "cell"
   }, rest), {
     className: classNames(tw("flex items-center px-l2 border-r-[1px] border-muted last:border-r-0"), className)
@@ -7431,7 +7750,7 @@ var ToolbarGroup = (_a) => {
 ToolbarGroup.displayName = "DataList.Toolbar.Group";
 var ToolbarSelectionCount = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React24.createElement(Typography, __spreadValues({
+  return /* @__PURE__ */ React25.createElement(Typography, __spreadValues({
     variant: "small",
     color: "muted",
     className: classNames(tw("whitespace-nowrap"), className)
@@ -7439,7 +7758,7 @@ var ToolbarSelectionCount = (_a) => {
 };
 var ToolbarActions = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React24.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React25.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("flex items-center gap-x-5"), className)
   }));
 };
@@ -7458,26 +7777,26 @@ var import_warningSign3 = __toESM(require_warningSign());
 var DIALOG_ICONS_AND_COLORS = {
   confirmation: {
     icon: import_confirm2.default,
-    color: "info-70"
+    color: "info-default"
   },
   warning: {
     icon: import_warningSign3.default,
-    color: "secondary-70"
+    color: "warning-default"
   },
   danger: {
     icon: import_error3.default,
-    color: "error-70"
+    color: "danger-default"
   }
 };
 
 // src/atoms/DropdownMenu/DropdownMenu.tsx
-import React27 from "react";
+import React28 from "react";
 
 // src/molecules/Badge/Badge.tsx
-import React26 from "react";
+import React27 from "react";
 
 // src/molecules/Skeleton/Skeleton.tsx
-import React25 from "react";
+import React26 from "react";
 import isNumber2 from "lodash/isNumber";
 import isUndefined7 from "lodash/isUndefined";
 var Skeleton = (_a) => {
@@ -7502,14 +7821,14 @@ var Skeleton = (_a) => {
     width: isNumber2(width) ? `${width}px` : width,
     height: isNumber2(height) ? `${height}px` : height
   };
-  return /* @__PURE__ */ React25.createElement("div", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React26.createElement("div", __spreadProps(__spreadValues({
     "aria-label": "Loading..."
   }, rest), {
     style: __spreadValues(__spreadValues({}, styles), style),
     role: "progressbar",
     className: classNames(
       "Aquarium-Skeleton",
-      tw("bg-grey-5", {
+      tw("bg-default", {
         "h-auto before:content-['_'] whitespace-pre origin-[0%_45%] scale-[0.55]": isUndefined7(height),
         "rounded-full": rounded,
         "block": display === "block",
@@ -7526,7 +7845,7 @@ var createBadge = (type, displayName) => {
   const Component = (props) => {
     const _a = props, { kind = "filled", value, textClassname, dense = false } = _a, rest = __objRest(_a, ["kind", "value", "textClassname", "dense"]);
     const valueStr = value.toString();
-    return /* @__PURE__ */ React26.createElement("span", __spreadProps(__spreadValues({}, rest), {
+    return /* @__PURE__ */ React27.createElement("span", __spreadProps(__spreadValues({}, rest), {
       className: classNames(
         tw("inline-block text-center", {
           "rounded-full": type === "default" || type === "chip",
@@ -7541,7 +7860,7 @@ var createBadge = (type, displayName) => {
         }),
         "Aquarium-Badge"
       )
-    }), /* @__PURE__ */ React26.createElement("span", {
+    }), /* @__PURE__ */ React27.createElement("span", {
       className: classNames(
         textClassname,
         tw("inline-block", {
@@ -7552,7 +7871,7 @@ var createBadge = (type, displayName) => {
     }, valueStr));
   };
   Component.displayName = displayName;
-  Component.Skeleton = () => /* @__PURE__ */ React26.createElement(Skeleton, {
+  Component.Skeleton = () => /* @__PURE__ */ React27.createElement(Skeleton, {
     height: 16,
     width: 16,
     display: "inline-block",
@@ -7563,16 +7882,16 @@ var createBadge = (type, displayName) => {
 };
 var NotificationBadge = (_a) => {
   var _b = _a, { children, top = "-2px", right = "-2px" } = _b, props = __objRest(_b, ["children", "top", "right"]);
-  return /* @__PURE__ */ React26.createElement("div", __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React27.createElement("div", __spreadProps(__spreadValues({}, props), {
     className: classNames("Aquarium-Badge.Notification", tw("relative inline-flex"))
-  }), children, /* @__PURE__ */ React26.createElement("span", {
+  }), children, /* @__PURE__ */ React27.createElement("span", {
     style: { top, right },
-    className: tw("absolute rounded-full w-[6px] h-[6px] bg-error-70")
+    className: tw("absolute rounded-full w-[6px] h-[6px] bg-danger-intense")
   }));
 };
 var DotBadge = (_a) => {
   var _b = _a, { dense = false } = _b, props = __objRest(_b, ["dense"]);
-  return /* @__PURE__ */ React26.createElement("span", __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React27.createElement("span", __spreadProps(__spreadValues({}, props), {
     className: classNames(
       "Aquarium-Badge.Dot",
       tw("rounded-full bg-current", {
@@ -7592,90 +7911,93 @@ var ChipBadge = createBadge("chip", "ChipBadge");
 
 // src/atoms/DropdownMenu/DropdownMenu.tsx
 var import_tick3 = __toESM(require_tick());
-var DropdownMenu = React27.forwardRef(
+var DropdownMenu = React28.forwardRef(
   (_a, ref) => {
     var _b = _a, { minHeight, maxHeight = "100%", minWidth = "125px", maxWidth, className, children } = _b, props = __objRest(_b, ["minHeight", "maxHeight", "minWidth", "maxWidth", "className", "children"]);
-    return /* @__PURE__ */ React27.createElement("div", __spreadValues({
+    return /* @__PURE__ */ React28.createElement("div", __spreadValues({
       ref,
       style: { minHeight, maxHeight, minWidth, maxWidth },
-      className: classNames(className, "bg-white w-full flex flex-col overflow-x-hidden typography-small text-default")
+      className: classNames(
+        className,
+        "bg-popover-content w-full flex flex-col overflow-x-hidden typography-small text-default"
+      )
     }, props), children);
   }
 );
-var ContentContainer = ({ children }) => /* @__PURE__ */ React27.createElement("div", {
+var ContentContainer = ({ children }) => /* @__PURE__ */ React28.createElement("div", {
   className: tw("p-3 overflow-y-auto overflow-x-hidden")
 }, children);
 DropdownMenu.ContentContainer = ContentContainer;
-var List = React27.forwardRef(
+var List = React28.forwardRef(
   (_a, ref) => {
     var _b = _a, { children, className } = _b, props = __objRest(_b, ["children", "className"]);
-    return /* @__PURE__ */ React27.createElement("ul", __spreadValues({
+    return /* @__PURE__ */ React28.createElement("ul", __spreadValues({
       ref,
       className: classNames(className, "outline-none ring-0")
     }, props), children);
   }
 );
 DropdownMenu.List = List;
-var Group = React27.forwardRef(
+var Group = React28.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, title, titleProps, children } = _b, props = __objRest(_b, ["className", "title", "titleProps", "children"]);
-    return /* @__PURE__ */ React27.createElement("li", __spreadValues({
+    return /* @__PURE__ */ React28.createElement("li", __spreadValues({
       ref
-    }, props), title && /* @__PURE__ */ React27.createElement("div", __spreadValues({
-      className: classNames(className, "p-3 text-muted uppercase cursor-default typography-caption", {
-        "text-grey-20": props.disabled
+    }, props), title && /* @__PURE__ */ React28.createElement("div", __spreadValues({
+      className: classNames(className, "p-3 text-muted-2x uppercase cursor-default typography-caption", {
+        "text-muted-3x": props.disabled
       })
     }, titleProps), title), children);
   }
 );
 DropdownMenu.Group = Group;
-var Item2 = React27.forwardRef(
+var Item2 = React28.forwardRef(
   (_a, ref) => {
     var _b = _a, { kind, highlighted, selected, className, icon, showNotification = false, children } = _b, props = __objRest(_b, ["kind", "highlighted", "selected", "className", "icon", "showNotification", "children"]);
-    return /* @__PURE__ */ React27.createElement("li", __spreadValues({
+    return /* @__PURE__ */ React28.createElement("li", __spreadValues({
       ref,
       className: classNames(className, "flex items-center gap-x-3 p-3 outline-none", {
-        "cursor-pointer hover:bg-grey-0": !props.disabled,
-        "bg-grey-0": highlighted,
-        "text-primary-80": kind === "action",
-        "text-grey-20 cursor-not-allowed": props.disabled
+        "cursor-pointer hover:bg-muted": !props.disabled,
+        "bg-muted": highlighted,
+        "text-primary-intense": kind === "action",
+        "text-muted-3x cursor-not-allowed": props.disabled
       })
-    }, props), icon && showNotification && /* @__PURE__ */ React27.createElement(Badge.Notification, null, /* @__PURE__ */ React27.createElement(InlineIcon, {
+    }, props), icon && showNotification && /* @__PURE__ */ React28.createElement(Badge.Notification, null, /* @__PURE__ */ React28.createElement(InlineIcon, {
       icon
-    })), icon && !showNotification && /* @__PURE__ */ React27.createElement(InlineIcon, {
+    })), icon && !showNotification && /* @__PURE__ */ React28.createElement(InlineIcon, {
       icon
-    }), /* @__PURE__ */ React27.createElement("span", {
+    }), /* @__PURE__ */ React28.createElement("span", {
       className: tw("grow")
-    }, children), selected && /* @__PURE__ */ React27.createElement(InlineIcon, {
+    }, children), selected && /* @__PURE__ */ React28.createElement(InlineIcon, {
       icon: import_tick3.default
     }));
   }
 );
 DropdownMenu.Item = Item2;
-var Description = ({ disabled, children }) => /* @__PURE__ */ React27.createElement(Typography2.Caption, {
+var Description = ({ disabled, children }) => /* @__PURE__ */ React28.createElement(Typography2.Caption, {
   color: disabled ? "grey-20" : "grey-40"
 }, children);
 DropdownMenu.Description = Description;
 var Separator = (_a) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React27.createElement("li", __spreadProps(__spreadValues({}, props), {
-    className: classNames(className, tw("m-3 block bg-grey-5 h-[1px]"))
+  return /* @__PURE__ */ React28.createElement("li", __spreadProps(__spreadValues({}, props), {
+    className: classNames(className, tw("m-3 block bg-default h-[1px]"))
   }));
 };
 DropdownMenu.Separator = Separator;
 var EmptyStateContainer = (_a) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ React27.createElement("div", __spreadValues({
+  return /* @__PURE__ */ React28.createElement("div", __spreadValues({
     className: classNames(tw("border border-dashed border-default p-3"), className)
   }, props), children);
 };
 DropdownMenu.EmptyStateContainer = EmptyStateContainer;
 
 // src/atoms/InputGroup/InputGroup.tsx
-import React29 from "react";
+import React30 from "react";
 
 // src/molecules/Grid/Grid.tsx
-import React28 from "react";
+import React29 from "react";
 import isEmpty from "lodash/isEmpty";
 import mapValues from "lodash/mapValues";
 import pick from "lodash/pick";
@@ -7726,14 +8048,14 @@ var GridItem = Tailwindify(
       gridRowEnd: rowEnd
     });
     const HtmlElement = htmlTag;
-    return /* @__PURE__ */ React28.createElement(HtmlElement, {
+    return /* @__PURE__ */ React29.createElement(HtmlElement, {
       style: __spreadValues(__spreadValues({}, hookStyle), style),
       className
     }, children);
   }
 );
 var Grid = (props) => {
-  return /* @__PURE__ */ React28.createElement(GridComponent, __spreadValues({}, props));
+  return /* @__PURE__ */ React29.createElement(GridComponent, __spreadValues({}, props));
 };
 var GridComponent = Tailwindify(
   ({
@@ -7787,7 +8109,7 @@ var GridComponent = Tailwindify(
       gridRowEnd: rowEnd
     });
     const HtmlElement = htmlTag;
-    return /* @__PURE__ */ React28.createElement(HtmlElement, {
+    return /* @__PURE__ */ React29.createElement(HtmlElement, {
       style: __spreadValues(__spreadValues({}, hookStyle), style),
       className
     }, children);
@@ -7806,7 +8128,7 @@ var gridColumnStyles = {
 };
 var InputGroup = (_a) => {
   var _b = _a, { cols = "1", children } = _b, rest = __objRest(_b, ["cols", "children"]);
-  return /* @__PURE__ */ React29.createElement(Grid, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React30.createElement(Grid, __spreadProps(__spreadValues({}, rest), {
     display: "inline-grid",
     colGap: "l4",
     rowGap: "3",
@@ -7816,16 +8138,16 @@ var InputGroup = (_a) => {
 };
 
 // src/atoms/Link/Link.tsx
-import React30 from "react";
+import React31 from "react";
 var Link = (_a) => {
   var _b = _a, { children, className } = _b, props = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React30.createElement("a", __spreadValues({
+  return /* @__PURE__ */ React31.createElement("a", __spreadValues({
     className: classNames(className, linkStyle)
   }, props), children);
 };
 
 // src/atoms/Modal/Modal.tsx
-import React31 from "react";
+import React32 from "react";
 var Modal = (_a) => {
   var _b = _a, {
     children,
@@ -7838,7 +8160,7 @@ var Modal = (_a) => {
     "className",
     "open"
   ]);
-  return open ? /* @__PURE__ */ React31.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return open ? /* @__PURE__ */ React32.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       tw("inset-0 overflow-y-auto z-modal fixed"),
       {
@@ -7850,14 +8172,14 @@ var Modal = (_a) => {
 };
 Modal.BackDrop = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React31.createElement("div", __spreadProps(__spreadValues({}, rest), {
-    className: classNames(tw("-z-10 fixed min-w-full min-h-full bg-primary-100 opacity-60"), className)
+  return /* @__PURE__ */ React32.createElement("div", __spreadProps(__spreadValues({}, rest), {
+    className: classNames(tw("-z-10 fixed min-w-full min-h-full bg-primary-intense opacity-60"), className)
   }));
 };
-Modal.Dialog = React31.forwardRef(
+Modal.Dialog = React32.forwardRef(
   (_a, ref) => {
     var _b = _a, { kind = "dialog", children, className, size = "sm" } = _b, rest = __objRest(_b, ["kind", "children", "className", "size"]);
-    const commonClasses = tw("bg-white max-h-full flex flex-col");
+    const commonClasses = tw("bg-popover-content max-h-full flex flex-col");
     const dialogClasses = classNames("relative w-full rounded mx-7", {
       "max-w-[600px]": size === "sm",
       "max-w-[940px]": size === "md",
@@ -7868,7 +8190,7 @@ Modal.Dialog = React31.forwardRef(
       "w-[560px]": size === "md",
       "w-[1080px]": size === "full"
     });
-    return /* @__PURE__ */ React31.createElement("div", __spreadProps(__spreadValues({
+    return /* @__PURE__ */ React32.createElement("div", __spreadProps(__spreadValues({
       ref,
       "aria-modal": "true"
     }, rest), {
@@ -7878,31 +8200,31 @@ Modal.Dialog = React31.forwardRef(
 );
 Modal.Header = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React31.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React32.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("pl-7 pr-[64px] py-6 gap-3 flex items-center"), className)
   }), children);
 };
 Modal.HeaderImage = (_a) => {
   var _b = _a, { backgroundImage, className } = _b, rest = __objRest(_b, ["backgroundImage", "className"]);
   const common = tw("h-[120px] min-h-[120px] w-full ");
-  return backgroundImage ? /* @__PURE__ */ React31.createElement("img", __spreadProps(__spreadValues({
+  return backgroundImage ? /* @__PURE__ */ React32.createElement("img", __spreadProps(__spreadValues({
     "aria-hidden": true,
     src: backgroundImage != null ? backgroundImage : void 0
   }, rest), {
     className: classNames(common, tw("object-cover"), className)
-  })) : /* @__PURE__ */ React31.createElement("div", {
-    className: classNames(common, tw("bg-grey-5"), className)
+  })) : /* @__PURE__ */ React32.createElement("div", {
+    className: classNames(common, tw("bg-default"), className)
   });
 };
 Modal.CloseButtonContainer = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React31.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React32.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("absolute top-[24px] right-[28px]"), className)
   }));
 };
 Modal.Title = (_a) => {
   var _b = _a, { kind = "dialog", children, className } = _b, rest = __objRest(_b, ["kind", "children", "className"]);
-  return /* @__PURE__ */ React31.createElement(Typography, __spreadValues({
+  return /* @__PURE__ */ React32.createElement(Typography, __spreadValues({
     htmlTag: "h2",
     variant: "subheading",
     color: "grey-90",
@@ -7916,77 +8238,77 @@ Modal.Title = (_a) => {
 };
 Modal.Subtitle = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ React31.createElement(Typography, __spreadValues({
+  return /* @__PURE__ */ React32.createElement(Typography, __spreadValues({
     variant: "small",
     color: "grey-60"
   }, rest), children);
 };
 Modal.TitleContainer = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React31.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React32.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("flex flex-col grow"), className)
   }), children);
 };
 Modal.Body = (_a) => {
   var _b = _a, { children, className, noFooter = false, maxHeight, style } = _b, rest = __objRest(_b, ["children", "className", "noFooter", "maxHeight", "style"]);
-  return /* @__PURE__ */ React31.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React32.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("px-7 grow overflow-y-auto", { "pb-6": noFooter }), className),
     style: __spreadValues({ maxHeight }, style)
   }), children);
 };
 Modal.Footer = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React31.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React32.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("px-7 py-6"), className)
   }), children);
 };
 Modal.Actions = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React31.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React32.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("flex gap-4 justify-end"), className)
   }), children);
 };
 
 // src/atoms/Navigation/Navigation.tsx
-import React32 from "react";
+import React33 from "react";
 var Navigation = (_a) => {
   var _b = _a, { className, children } = _b, rest = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ React32.createElement("nav", {
-    className: classNames(tw("bg-grey-0 h-full"))
-  }, /* @__PURE__ */ React32.createElement("ul", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React33.createElement("nav", {
+    className: classNames(tw("bg-muted h-full"))
+  }, /* @__PURE__ */ React33.createElement("ul", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("flex flex-col h-full"), className),
     role: "menubar"
   }), children));
 };
 var Header = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React32.createElement("li", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React33.createElement("li", __spreadProps(__spreadValues({}, rest), {
     role: "presentation",
     className: classNames(tw("px-6 py-5"), className)
   }));
 };
 var Footer = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React32.createElement("li", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React33.createElement("li", __spreadProps(__spreadValues({}, rest), {
     role: "presentation",
     className: classNames(tw("px-6 py-5 mt-auto"), className)
   }));
 };
 var Section = (_a) => {
   var _b = _a, { title, className } = _b, rest = __objRest(_b, ["title", "className"]);
-  return /* @__PURE__ */ React32.createElement("li", {
+  return /* @__PURE__ */ React33.createElement("li", {
     role: "presentation",
     className: tw("py-5")
-  }, title && /* @__PURE__ */ React32.createElement("div", {
-    className: classNames(className, "py-2 px-6 text-muted uppercase cursor-default typography-caption")
-  }, title), /* @__PURE__ */ React32.createElement("ul", __spreadProps(__spreadValues({}, rest), {
+  }, title && /* @__PURE__ */ React33.createElement("div", {
+    className: classNames(className, "py-2 px-6 text-muted-2x uppercase cursor-default typography-caption")
+  }, title), /* @__PURE__ */ React33.createElement("ul", __spreadProps(__spreadValues({}, rest), {
     role: "group",
     className: classNames(tw("flex flex-col"), className)
   })));
 };
 var Divider = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React32.createElement("li", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React33.createElement("li", __spreadProps(__spreadValues({
     role: "separator"
   }, rest), {
     className: classNames(tw("border-t-2 border-muted"), className)
@@ -7994,14 +8316,14 @@ var Divider = (_a) => {
 };
 var Item3 = (_a) => {
   var _b = _a, { className, active } = _b, rest = __objRest(_b, ["className", "active"]);
-  return /* @__PURE__ */ React32.createElement("li", {
+  return /* @__PURE__ */ React33.createElement("li", {
     role: "presentation"
-  }, /* @__PURE__ */ React32.createElement("a", __spreadProps(__spreadValues({}, rest), {
+  }, /* @__PURE__ */ React33.createElement("a", __spreadProps(__spreadValues({}, rest), {
     role: "menuitem",
     className: classNames(
-      tw("py-3 px-6 hover:bg-grey-5 cursor-pointer flex gap-4 items-center typography-small focusable", {
+      tw("py-3 px-6 hover:bg-default cursor-pointer flex gap-4 items-center typography-small focusable", {
         "text-grey-60": !active,
-        "text-primary-80": !!active
+        "text-primary-intense": !!active
       }),
       className
     )
@@ -8013,20 +8335,69 @@ Navigation.Section = Section;
 Navigation.Item = Item3;
 Navigation.Divider = Divider;
 
+// src/atoms/PageHeader/PageHeader.tsx
+import React34 from "react";
+var PageHeader = (_a) => {
+  var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+  return /* @__PURE__ */ React34.createElement("div", __spreadValues({
+    className: classNames(tw("flex flex-row gap-4 pb-6"), className)
+  }, rest), children);
+};
+PageHeader.Container = (_a) => {
+  var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+  return /* @__PURE__ */ React34.createElement("div", __spreadValues({
+    className: classNames(tw("flex flex-col grow gap-0"), className)
+  }, rest), children);
+};
+PageHeader.TitleContainer = (_a) => {
+  var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+  return /* @__PURE__ */ React34.createElement("div", __spreadValues({
+    className: classNames(tw("flex flex-col justify-center gap-2"), className)
+  }, rest), children);
+};
+PageHeader.Title = (_a) => {
+  var _b = _a, { isSubHeader = false, children } = _b, rest = __objRest(_b, ["isSubHeader", "children"]);
+  return /* @__PURE__ */ React34.createElement(Typography2, __spreadProps(__spreadValues({}, rest), {
+    color: "grey-100",
+    variant: isSubHeader ? "subheading" : "heading",
+    htmlTag: isSubHeader ? "h2" : "h1"
+  }), children);
+};
+PageHeader.Subtitle = (_a) => {
+  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ React34.createElement(Typography2.Small, __spreadProps(__spreadValues({}, rest), {
+    color: "grey-70"
+  }), children);
+};
+PageHeader.Chips = (_a) => {
+  var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+  return /* @__PURE__ */ React34.createElement("div", __spreadValues({
+    className: classNames(tw("flex gap-3"), className)
+  }, rest), children);
+};
+PageHeader.Actions = (_a) => {
+  var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+  return /* @__PURE__ */ React34.createElement("div", __spreadValues({
+    className: classNames(tw("flex flex-row gap-4 self-start"), className)
+  }, rest), children);
+};
+
 // src/atoms/Popover/Popover.tsx
-import React33 from "react";
-var PopoverPanel = React33.forwardRef((_a, ref) => {
+import React35 from "react";
+var PopoverPanel = React35.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ React33.createElement("div", __spreadValues({
+  return /* @__PURE__ */ React35.createElement("div", __spreadValues({
     ref,
     className: classNames(
       className,
-      tw("rounded-sm shadow-16dp bg-white mt-1 overflow-y-auto flex flex-col border border-default outline-none")
+      tw(
+        "rounded-sm shadow-16dp bg-popover-content mt-1 overflow-y-auto flex flex-col border border-default outline-none"
+      )
     )
   }, props), children);
 });
 PopoverPanel.displayName = "Popover.Panel";
-var PopoverUnderlay = React33.forwardRef((props, ref) => /* @__PURE__ */ React33.createElement("div", __spreadProps(__spreadValues({
+var PopoverUnderlay = React35.forwardRef((props, ref) => /* @__PURE__ */ React35.createElement("div", __spreadProps(__spreadValues({
   ref
 }, props), {
   className: tw("fixed inset-0")
@@ -8038,23 +8409,23 @@ var Popover = {
 };
 
 // src/atoms/PopoverDialog/PopoverDialog.tsx
-import React34 from "react";
+import React36 from "react";
 var Header2 = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React34.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React36.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("p-5 gap-3 flex items-center"), className)
   }), children);
 };
 var Title2 = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React34.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React36.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
     htmlTag: "h1",
     variant: "small-strong"
   }), children);
 };
 var Body = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React34.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React36.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
     htmlTag: "div",
     variant: "caption",
     className: classNames(tw("px-5 overflow-y-auto"), className)
@@ -8062,13 +8433,13 @@ var Body = (_a) => {
 };
 var Footer2 = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React34.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React36.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("p-5"), className)
   }), children);
 };
 var Actions2 = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React34.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React36.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("flex gap-4"), className)
   }), children);
 };
@@ -8080,8 +8451,115 @@ var PopoverDialog = {
   Actions: Actions2
 };
 
+// src/atoms/ProgressBar/ProgressBar.tsx
+import React37 from "react";
+import clamp from "lodash/clamp";
+var ProgressBar = (_a) => {
+  var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+  return /* @__PURE__ */ React37.createElement("div", __spreadProps(__spreadValues({}, rest), {
+    className: classNames(tw("relative flex items-center w-full bg-muted h-2 rounded-full overflow-hidden"), className)
+  }), children);
+};
+var STATUS_COLORS = {
+  info: tw("bg-info-default"),
+  warning: tw("bg-warning-default"),
+  success: tw("bg-success-default"),
+  error: tw("bg-danger-intense")
+};
+ProgressBar.Indicator = (_a) => {
+  var _b = _a, { min, max, value, "aria-label": ariaLabel, status, className } = _b, rest = __objRest(_b, ["min", "max", "value", "aria-label", "status", "className"]);
+  const completedPercentage = clamp((value - min) / (max - min) * 100, 0, 100);
+  return /* @__PURE__ */ React37.createElement("div", __spreadProps(__spreadValues({}, rest), {
+    className: classNames(
+      tw("h-2 rounded-full transition-all ease-in-out delay-150"),
+      STATUS_COLORS[status],
+      className
+    ),
+    style: { width: `${completedPercentage}%` },
+    role: "progressbar",
+    "aria-label": ariaLabel || value.toString(),
+    "aria-valuenow": value,
+    "aria-valuemin": min,
+    "aria-valuemax": max
+  }));
+};
+ProgressBar.Labels = (_a) => {
+  var _b = _a, { children, startLabel, endLabel, className } = _b, rest = __objRest(_b, ["children", "startLabel", "endLabel", "className"]);
+  return /* @__PURE__ */ React37.createElement("div", {
+    className: classNames(tw("flex flex-row"), className)
+  }, /* @__PURE__ */ React37.createElement("span", __spreadProps(__spreadValues({}, rest), {
+    className: tw("grow text-default typography-caption")
+  }), startLabel), /* @__PURE__ */ React37.createElement("span", __spreadProps(__spreadValues({}, rest), {
+    className: tw("grow text-default typography-caption text-right")
+  }), endLabel));
+};
+
+// src/atoms/Section/Section.tsx
+import React38 from "react";
+var import_caretUp2 = __toESM(require_caretUp());
+var Section2 = (_a) => {
+  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ React38.createElement(Box, __spreadValues({
+    component: "section",
+    borderColor: "grey-5",
+    borderWidth: "1px"
+  }, rest), children);
+};
+Section2.Header = (_a) => {
+  var _b = _a, { children, className, expanded } = _b, rest = __objRest(_b, ["children", "className", "expanded"]);
+  return /* @__PURE__ */ React38.createElement("div", __spreadProps(__spreadValues({}, rest), {
+    className: classNames(
+      tw("px-6 flex gap-5 justify-between items-center h-[72px]", { "bg-muted": expanded }),
+      className
+    )
+  }), children);
+};
+Section2.TitleContainer = (_a) => {
+  var _b = _a, { children, className, collapsible } = _b, rest = __objRest(_b, ["children", "className", "collapsible"]);
+  return /* @__PURE__ */ React38.createElement("div", __spreadProps(__spreadValues({}, rest), {
+    className: classNames(
+      tw("grow grid grid-cols-[auto_1fr] gap-x-3 items-center", { "cursor-pointer": collapsible }),
+      className
+    )
+  }), children);
+};
+Section2.Toggle = (props) => /* @__PURE__ */ React38.createElement(Icon, __spreadProps(__spreadValues({}, props), {
+  icon: import_caretUp2.default,
+  height: 22,
+  width: 22
+}));
+Section2.Title = (_a) => {
+  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ React38.createElement(Typography2.Large, __spreadProps(__spreadValues({}, rest), {
+    htmlTag: "h2",
+    color: "black",
+    className: "flex gap-3 items-center"
+  }), children);
+};
+Section2.Subtitle = (_a) => {
+  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ React38.createElement(Typography2.Small, __spreadProps(__spreadValues({}, rest), {
+    color: "grey-70"
+  }), children);
+};
+Section2.Actions = (_a) => {
+  var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+  return /* @__PURE__ */ React38.createElement("div", __spreadProps(__spreadValues({}, rest), {
+    className: classNames(tw("flex gap-4 justify-end"), className)
+  }), children);
+};
+Section2.Body = (_a) => {
+  var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+  return /* @__PURE__ */ React38.createElement("div", __spreadProps(__spreadValues({}, rest), {
+    className: classNames(tw("p-6"), className)
+  }), /* @__PURE__ */ React38.createElement(Typography, {
+    htmlTag: "div",
+    color: "grey-70"
+  }, children));
+};
+
 // src/atoms/Select/Select.tsx
-import React35 from "react";
+import React39 from "react";
 var import_chevronDown5 = __toESM(require_chevronDown());
 var import_chevronUp4 = __toESM(require_chevronUp());
 var import_search2 = __toESM(require_search());
@@ -8101,140 +8579,140 @@ function isOptionDisabledBuiltin(option) {
 }
 var getValues = (children) => {
   var _a;
-  const values = React35.Children.map(children, (c) => {
+  const values = React39.Children.map(children, (c) => {
     var _a2;
     return (_a2 = c == null ? void 0 : c.props) == null ? void 0 : _a2.value;
   });
   return (_a = values == null ? void 0 : values.filter((v) => v !== void 0 && v !== null)) != null ? _a : [];
 };
-var InputContainer = React35.forwardRef(
+var InputContainer = React39.forwardRef(
   (_a, ref) => {
     var _b = _a, { variant = "default", className } = _b, props = __objRest(_b, ["variant", "className"]);
-    return /* @__PURE__ */ React35.createElement("div", __spreadValues({
+    return /* @__PURE__ */ React39.createElement("div", __spreadValues({
       ref,
       className: classNames(
         className,
-        "relative rounded-sm typography-default-strong w-full flex flex-row items-center focus-visible:outline-0 focus-visible:border-info-70",
+        "relative rounded-sm typography-default-strong w-full flex flex-row items-center focus-visible:outline-0 focus-visible:border-info-default",
         {
           "border px-3 py-[6px]": variant !== "readOnly",
           "cursor-default": variant === "readOnly",
           "border-default": variant !== "error" && variant !== "readOnly",
-          "border-error-50": variant === "error",
+          "border-danger-default": variant === "error",
           "hover:border-intense": variant !== "error" && variant !== "disabled" && variant !== "focused",
-          "border-info-70": variant === "focused",
-          "bg-white": variant !== "disabled",
-          "cursor-not-allowed border-default bg-grey-5": variant === "disabled"
+          "border-info-default": variant === "focused",
+          "bg-body": variant !== "disabled",
+          "cursor-not-allowed border-default bg-default": variant === "disabled"
         }
       )
     }, props));
   }
 );
-var Input = React35.forwardRef((_a, ref) => {
+var Input = React39.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React35.createElement("input", __spreadValues({
+  return /* @__PURE__ */ React39.createElement("input", __spreadValues({
     ref,
     type: "text",
     className: classNames(
       className,
-      "grow rounded border-0 focus:outline-none px-[1px] my-1 min-w-0 typography-small disabled:cursor-not-allowed disabled:bg-grey-5 placeholder:text-muted",
+      "grow rounded border-0 focus:outline-none px-[1px] my-1 min-w-0 typography-small disabled:cursor-not-allowed disabled:bg-default placeholder:text-muted-2x",
       {
         "text-default": !props.disabled,
-        "text-grey-30": props.disabled,
+        "text-muted-3x": props.disabled,
         "cursor-default": props.readOnly
       }
     )
   }, props));
 });
-var Menu = React35.forwardRef(
+var Menu = React39.forwardRef(
   (_a, ref) => {
     var _b = _a, { maxHeight = "450px", className, children } = _b, props = __objRest(_b, ["maxHeight", "className", "children"]);
-    return /* @__PURE__ */ React35.createElement("ul", __spreadValues({
+    return /* @__PURE__ */ React39.createElement("ul", __spreadValues({
       ref,
       style: { maxHeight },
       className
     }, props), children);
   }
 );
-var NoResults = React35.forwardRef(
+var NoResults = React39.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, children } = _b, rest = __objRest(_b, ["className", "children"]);
-    return /* @__PURE__ */ React35.createElement("li", __spreadProps(__spreadValues({
+    return /* @__PURE__ */ React39.createElement("li", __spreadProps(__spreadValues({
       ref
     }, rest), {
-      className: classNames(tw("p-3 text-muted italic typography-small"), className)
+      className: classNames(tw("p-3 text-muted-2x italic typography-small"), className)
     }), children);
   }
 );
-var EmptyStateContainer2 = React35.forwardRef((_a, ref) => {
+var EmptyStateContainer2 = React39.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ React35.createElement("li", __spreadValues({
+  return /* @__PURE__ */ React39.createElement("li", __spreadValues({
     ref,
     className: tw("border border-dashed border-default m-4 p-6")
   }, props), children);
 });
-var Divider2 = (props) => /* @__PURE__ */ React35.createElement("div", __spreadValues({
+var Divider2 = (props) => /* @__PURE__ */ React39.createElement("div", __spreadValues({
   className: tw("border-b-[1px] border-muted mx-3 my-4")
 }, props));
-var Group2 = React35.forwardRef((_a, ref) => {
+var Group2 = React39.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ React35.createElement("li", __spreadValues({
+  return /* @__PURE__ */ React39.createElement("li", __spreadValues({
     ref,
     className: classNames(
       className,
-      "flex items-center gap-x-3 p-3 text-muted uppercase cursor-default typography-caption mt-4 first:mt-0",
+      "flex items-center gap-x-3 p-3 text-muted-2x uppercase cursor-default typography-caption mt-4 first:mt-0",
       {
-        "text-grey-20": props.disabled
+        "text-muted-3x": props.disabled
       }
     )
   }, props), children);
 });
-var Item4 = React35.forwardRef(
+var Item4 = React39.forwardRef(
   (_a, ref) => {
     var _b = _a, { highlighted, selected, className, children } = _b, props = __objRest(_b, ["highlighted", "selected", "className", "children"]);
-    return /* @__PURE__ */ React35.createElement("li", __spreadValues({
+    return /* @__PURE__ */ React39.createElement("li", __spreadValues({
       ref,
       className: classNames(className, "flex items-center gap-x-3 p-3 typography-small", {
-        "cursor-pointer hover:bg-grey-0": !props["aria-disabled"],
+        "cursor-pointer hover:bg-muted": !props["aria-disabled"],
         "cursor-not-allowed opacity-40 grayscale": props["aria-disabled"],
-        "bg-grey-0": highlighted
+        "bg-muted": highlighted
       })
-    }, props), /* @__PURE__ */ React35.createElement("span", {
+    }, props), /* @__PURE__ */ React39.createElement("span", {
       className: tw("grow flex gap-x-3")
-    }, children), selected && /* @__PURE__ */ React35.createElement(InlineIcon, {
+    }, children), selected && /* @__PURE__ */ React39.createElement(InlineIcon, {
       icon: import_tick4.default
     }));
   }
 );
-var ActionItem = React35.forwardRef(
+var ActionItem = React39.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, dense, icon, onClick, children } = _b, props = __objRest(_b, ["className", "dense", "icon", "onClick", "children"]);
-    return /* @__PURE__ */ React35.createElement("li", __spreadValues({
+    return /* @__PURE__ */ React39.createElement("li", __spreadValues({
       ref,
       role: "button",
       onClick: () => !props.disabled && (onClick == null ? void 0 : onClick()),
-      className: classNames(className, "flex items-center gap-x-3 typography-small text-primary-80", {
+      className: classNames(className, "flex items-center gap-x-3 typography-small text-primary-intense", {
         "p-3": !dense,
         "px-3 py-2": dense,
         "cursor-pointer": !props.disabled,
-        "text-grey-20": props.disabled,
-        "hover:text-primary-70": !props.disabled
+        "text-muted-3x": props.disabled,
+        "hover:text-primary-default": !props.disabled
       })
-    }, props), icon && /* @__PURE__ */ React35.createElement(InlineIcon, {
+    }, props), icon && /* @__PURE__ */ React39.createElement(InlineIcon, {
       icon
     }), children);
   }
 );
-var Toggle = React35.forwardRef((_a, ref) => {
+var Toggle = React39.forwardRef((_a, ref) => {
   var _b = _a, { hasFocus, isOpen } = _b, props = __objRest(_b, ["hasFocus", "isOpen"]);
   var _a2;
-  return /* @__PURE__ */ React35.createElement("button", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React39.createElement("button", __spreadProps(__spreadValues({
     ref,
     type: "button",
     "aria-label": "Toggle"
   }, props), {
     className: tw("grow-0 leading-none", { "cursor-not-allowed": (_a2 = props.disabled) != null ? _a2 : false })
-  }), /* @__PURE__ */ React35.createElement(InlineIcon, {
-    color: props.disabled ? "grey-40" : "grey-70",
+  }), /* @__PURE__ */ React39.createElement(InlineIcon, {
+    color: props.disabled ? "muted-2x" : "default",
     icon: hasFocus ? import_search2.default : isOpen ? import_chevronUp4.default : import_chevronDown5.default
   }));
 });
@@ -8252,11 +8730,11 @@ var Select = {
 };
 
 // src/atoms/Stepper/Stepper.tsx
-import React36 from "react";
+import React40 from "react";
 var import_tick5 = __toESM(require_tick());
 var Stepper = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React36.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React40.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(className)
   }));
 };
@@ -8270,7 +8748,7 @@ var ConnectorContainer = (_a) => {
     "completed",
     "dense"
   ]);
-  return /* @__PURE__ */ React36.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React40.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       tw("absolute w-full -left-1/2", {
         "top-[3px] px-[14px]": Boolean(dense),
@@ -8282,11 +8760,11 @@ var ConnectorContainer = (_a) => {
 };
 var Connector = (_a) => {
   var _b = _a, { children, className, completed, dense } = _b, rest = __objRest(_b, ["children", "className", "completed", "dense"]);
-  return /* @__PURE__ */ React36.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React40.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       tw("w-full", {
-        "bg-grey-20": !completed,
-        "bg-success-70": Boolean(completed),
+        "bg-intense": !completed,
+        "bg-success-default": Boolean(completed),
         "h-[2px]": !dense,
         "h-[3px]": Boolean(dense)
       }),
@@ -8296,34 +8774,34 @@ var Connector = (_a) => {
 };
 var Step = (_a) => {
   var _b = _a, { className, state } = _b, rest = __objRest(_b, ["className", "state"]);
-  return /* @__PURE__ */ React36.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React40.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
-      tw("flex flex-col items-center text-grey-90 relative text-center", {
-        "text-grey-20": state === "inactive"
+      tw("flex flex-col items-center text-intense relative text-center", {
+        "text-muted-3x": state === "inactive"
       }),
       className
     )
   }));
 };
 var getClassNames = (state) => tw("h-[32px] w-[32px] border-2", {
-  "border-grey-90 bg-white": state === "active",
-  "border-default bg-white": state === "inactive",
-  "text-white bg-success-70 border-success-70": state === "completed"
+  "border-grey-90 bg-body": state === "active",
+  "border-default bg-body": state === "inactive",
+  "text-white bg-success-default border-success-intense": state === "completed"
 });
 var getDenseClassNames = (state) => tw("h-[8px] w-[8px]", {
-  "bg-grey-90": state === "active",
-  "bg-grey-20": state === "inactive",
-  "text-success-70": state === "completed"
+  "bg-intense-2x": state === "active",
+  "bg-intense": state === "inactive",
+  "text-success-default": state === "completed"
 });
 var Indicator = (_a) => {
   var _b = _a, { children, className, state, dense } = _b, rest = __objRest(_b, ["children", "className", "state", "dense"]);
-  return /* @__PURE__ */ React36.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React40.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       tw("rounded-full flex justify-center items-center mx-2 mb-3"),
       dense ? getDenseClassNames(state) : getClassNames(state),
       className
     )
-  }), state === "completed" ? /* @__PURE__ */ React36.createElement(InlineIcon, {
+  }), state === "completed" ? /* @__PURE__ */ React40.createElement(InlineIcon, {
     icon: import_tick5.default
   }) : dense ? null : children);
 };
@@ -8333,14 +8811,14 @@ ConnectorContainer.Connector = Connector;
 Stepper.ConnectorContainer = ConnectorContainer;
 
 // src/atoms/Switch/Switch.tsx
-import React37 from "react";
+import React41 from "react";
 var import_ban2 = __toESM(require_ban());
-var Switch = React37.forwardRef(
+var Switch = React41.forwardRef(
   (_a, ref) => {
     var _b = _a, { id, children, name, disabled = false, readOnly = false } = _b, props = __objRest(_b, ["id", "children", "name", "disabled", "readOnly"]);
-    return /* @__PURE__ */ React37.createElement("span", {
+    return /* @__PURE__ */ React41.createElement("span", {
       className: tw("relative inline-flex justify-center items-center self-center group")
-    }, /* @__PURE__ */ React37.createElement("input", __spreadProps(__spreadValues({
+    }, /* @__PURE__ */ React41.createElement("input", __spreadProps(__spreadValues({
       id,
       ref,
       type: "checkbox",
@@ -8349,25 +8827,25 @@ var Switch = React37.forwardRef(
       className: classNames(
         tw(
           "appearance-none peer/switch rounded-full inline-block w-[34px] h-[20px] transition duration-300",
-          "outline-none focusable bg-grey-10",
+          "outline-none focusable bg-intense",
           "cursor-pointer disabled:cursor-not-allowed",
           {
-            "hover:bg-grey-20 checked:bg-primary-80 hover:checked:bg-primary-70": !disabled,
-            "bg-grey-5 checked:opacity-50 checked:bg-primary-40": disabled
+            "hover:bg-intense checked:bg-primary-default hover:checked:bg-primary-intense": !disabled,
+            "bg-default checked:opacity-50 checked:bg-primary-muted": disabled
           }
         )
       ),
       readOnly,
       disabled
-    })), /* @__PURE__ */ React37.createElement("span", {
+    })), /* @__PURE__ */ React41.createElement("span", {
       className: tw(
         "pointer-events-none rounded-full absolute inline-flex justify-center items-center transition duration-300 h-4 w-4 transform peer-checked/switch:translate-x-5",
-        "bg-white left-2 peer-checked/switch:left-1 text-grey-30 peer-checked/switch:text-primary-60",
+        "bg-white left-2 peer-checked/switch:left-1 text-muted-3x peer-checked/switch:text-primary-muted",
         {
           "shadow-4dp": !disabled
         }
       )
-    }, disabled && /* @__PURE__ */ React37.createElement(Icon, {
+    }, disabled && /* @__PURE__ */ React41.createElement(Icon, {
       icon: import_ban2.default,
       width: "10px",
       height: "10px"
@@ -8376,6 +8854,7 @@ var Switch = React37.forwardRef(
 );
 export {
   Alert,
+  Banner2 as Banner,
   Caption,
   Card,
   Checkbox,
@@ -8389,14 +8868,18 @@ export {
   Link,
   Modal,
   Navigation,
+  PageHeader,
   Popover,
   PopoverDialog,
+  ProgressBar,
   RadioButton,
+  Section2 as Section,
   Select,
   Stepper,
   Switch,
   Table,
   Toast,
+  Typography,
   cellClassNames,
   getAlignClassNames,
   getBodyCellClassNames,