@aivenio/aquarium 5.0.0 → 5.1.0

package/dist/system.mjs

@@ -4489,7 +4489,7 @@ var inputClasses = tv({
   }
 });
 var menuClasses = tv({
-  base: "text-default bg-popover-content overflow-y-auto"
+  base: "text-default bg-overlay overflow-y-auto"
 });
 var noResultsClasses = tv({
   base: "p-3 text-inactive typography-small"
@@ -5330,7 +5330,8 @@ var tailwind_theme_default = {
       "100": "var(--aquarium-colors-warning-100)",
       muted: "var(--aquarium-background-color-warning-muted)",
       default: "var(--aquarium-background-color-warning-default)",
-      intense: "var(--aquarium-background-color-warning-intense)"
+      intense: "var(--aquarium-background-color-warning-intense)",
+      inverse: "var(--aquarium-background-color-warning-inverse)"
     },
     success: {
       "0": "var(--aquarium-colors-success-0)",
@@ -5347,7 +5348,8 @@ var tailwind_theme_default = {
       "100": "var(--aquarium-colors-success-100)",
       muted: "var(--aquarium-background-color-success-muted)",
       default: "var(--aquarium-background-color-success-default)",
-      intense: "var(--aquarium-background-color-success-intense)"
+      intense: "var(--aquarium-background-color-success-intense)",
+      inverse: "var(--aquarium-background-color-success-inverse)"
     },
     info: {
       "0": "var(--aquarium-colors-info-0)",
@@ -5364,7 +5366,8 @@ var tailwind_theme_default = {
       "100": "var(--aquarium-colors-info-100)",
       muted: "var(--aquarium-background-color-info-muted)",
       default: "var(--aquarium-background-color-info-default)",
-      intense: "var(--aquarium-background-color-info-intense)"
+      intense: "var(--aquarium-background-color-info-intense)",
+      inverse: "var(--aquarium-background-color-info-inverse)"
     },
     grey: {
       "0": "var(--aquarium-colors-grey-0)",
@@ -5414,15 +5417,27 @@ var tailwind_theme_default = {
       hover: "var(--aquarium-background-color-primary-hover)"
     },
     body: "var(--aquarium-background-color-body)",
+    layer: "var(--aquarium-background-color-layer)",
     "body-intense": "var(--aquarium-background-color-body-intense)",
+    inverse: "var(--aquarium-background-color-inverse)",
+    overlay: "var(--aquarium-background-color-overlay)",
     "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)",
+    action: {
+      "primary-button": {
+        default: "var(--aquarium-background-color-action-primary-button-default)",
+        active: "var(--aquarium-background-color-action-primary-button-active)",
+        hover: "var(--aquarium-background-color-action-primary-button-hover)",
+        disabled: "var(--aquarium-background-color-action-primary-button-disabled)"
+      }
+    },
     danger: {
       muted: "var(--aquarium-background-color-danger-muted)",
       default: "var(--aquarium-background-color-danger-default)",
-      intense: "var(--aquarium-background-color-danger-intense)"
+      intense: "var(--aquarium-background-color-danger-intense)",
+      inverse: "var(--aquarium-background-color-danger-inverse)"
     },
     status: {
       announcement: "var(--aquarium-background-color-status-announcement)",
@@ -5686,6 +5701,15 @@ var tailwind_theme_default = {
     muted: "var(--aquarium-border-color-muted)",
     default: "var(--aquarium-border-color-default)",
     intense: "var(--aquarium-border-color-intense)",
+    action: {
+      focus: "var(--aquarium-border-color-action-focus)",
+      "secondary-button": {
+        default: "var(--aquarium-border-color-action-secondary-button-default)",
+        active: "var(--aquarium-border-color-action-secondary-button-active)",
+        hover: "var(--aquarium-border-color-action-secondary-button-hover)",
+        disabled: "var(--aquarium-border-color-action-secondary-button-disabled)"
+      }
+    },
     danger: {
       muted: "var(--aquarium-border-color-danger-muted)",
       default: "var(--aquarium-border-color-danger-default)",
@@ -5914,7 +5938,10 @@ var tokens_default = {
   },
   backgroundColor: {
     body: "white",
+    layer: "white",
     "body-intense": "rgba(58,58,68,1)",
+    inverse: "rgba(58,58,68,1)",
+    overlay: "white",
     "popover-content": "white",
     muted: "rgba(247,247,250,1)",
     default: "rgba(237,237,240,1)",
@@ -5926,25 +5953,37 @@ var tokens_default = {
       active: "rgba(243,246,255,1)",
       hover: "rgba(243,246,255,1)"
     },
+    action: {
+      "primary-button": {
+        default: "rgba(53,69,190,1)",
+        active: "rgba(243,246,255,1)",
+        hover: "rgba(34,47,149,1)",
+        disabled: "rgba(185,197,239,1)"
+      }
+    },
     info: {
       muted: "rgba(224,245,254,1)",
       default: "rgba(3,153,227,1)",
-      intense: "rgba(1,116,186,1)"
+      intense: "rgba(1,116,186,1)",
+      inverse: "rgba(3,153,227,1)"
     },
     success: {
       muted: "rgba(236,247,237,1)",
       default: "rgba(0,179,0,1)",
-      intense: "rgba(0,142,0,1)"
+      intense: "rgba(0,142,0,1)",
+      inverse: "rgba(0,179,0,1)"
     },
     warning: {
       muted: "rgba(255,248,234,1)",
       default: "rgba(255,179,0,1)",
-      intense: "rgba(255,144,3,1)"
+      intense: "rgba(255,144,3,1)",
+      inverse: "rgba(255,179,0,1)"
     },
     danger: {
       muted: "rgba(255,203,210,1)",
       default: "rgba(255,173,179,1)",
-      intense: "rgba(230,39,40,1)"
+      intense: "rgba(230,39,40,1)",
+      inverse: "rgba(216,0,5,1)"
     },
     status: {
       announcement: "rgba(243,246,255,1)",
@@ -5966,6 +6005,15 @@ var tokens_default = {
       default: "rgba(53,69,190,1)",
       intense: "rgba(14,22,82,1)"
     },
+    action: {
+      focus: "rgba(53,69,190,1)",
+      "secondary-button": {
+        default: "rgba(53,69,190,1)",
+        active: "rgba(243,246,255,1)",
+        hover: "rgba(243,246,255,1)",
+        disabled: "rgba(129,142,236,1)"
+      }
+    },
     info: {
       muted: "rgba(40,180,244,1)",
       default: "rgba(3,153,227,1)",
@@ -6732,7 +6780,7 @@ var TooltipWrapper = React6.forwardRef(
       "div",
       {
         ref,
-        className: "Aquarium-Tooltip p-3 rounded-sm typography-caption max-w-[320px] bg-body-intense text-opposite-default",
+        className: "Aquarium-Tooltip p-3 rounded-sm typography-caption max-w-[320px] bg-inverse text-opposite-default",
         ...mergeProps(props, tooltipProps)
       },
       props.children,
@@ -6772,7 +6820,7 @@ var getArrowStyle = (element, position, { left, top }) => {
   return { left, top };
 };
 var Arrow = (props) => {
-  return /* @__PURE__ */ React6.createElement("div", { className: "absolute w-3 h-3 bg-body-intense rotate-45", ...props });
+  return /* @__PURE__ */ React6.createElement("div", { className: "absolute w-3 h-3 bg-inverse rotate-45", ...props });
 };
 
 // src/atoms/Button/Button.tsx
@@ -6807,14 +6855,14 @@ var buttonStateClasses = tv3({
   variants: {
     kind: {
       primary: [
-        "active:text-white active:bg-primary-active",
-        "hover:bg-primary-intense",
-        "disabled:text-white disabled:bg-primary-muted"
+        "active:text-white active:bg-action-primary-button-active",
+        "hover:bg-action-primary-button-hover",
+        "disabled:text-white disabled:bg-action-primary-button-disabled"
       ],
       secondary: [
         "active:bg-primary-active active:text-primary-active",
         "hover:bg-primary-hover",
-        "before:disabled:border-primary-muted"
+        "before:disabled:border-action-secondary-button-disabled"
       ],
       ghost: ["hover:text-primary-active"],
       text: interactiveTextStyles(),
@@ -6833,8 +6881,8 @@ var buttonClasses = tv3({
   base: "Aquarium-Button whitespace-nowrap transition text-center text-primary-intense rounded-sm relative px-4 py-3 inline-flex gap-3 items-center justify-center",
   variants: {
     kind: {
-      primary: "Aquarium-Button.Primary text-white bg-primary-default icon-stroke-2",
-      secondary: "Aquarium-Button.Secondary bg-transparent before:absolute before:inset-0 before:border before:border-primary-default before:rounded-sm icon-stroke-2",
+      primary: "Aquarium-Button.Primary text-white bg-action-primary-button-default icon-stroke-2",
+      secondary: "Aquarium-Button.Secondary bg-transparent before:absolute before:inset-0 before:border before:border-action-secondary-button-default before:rounded-sm icon-stroke-2",
       ghost: "Aquarium-Button.Ghost px-0 icon-stroke-2",
       text: "Aquarium-Button.Text px-0 py-0 icon-stroke-2",
       icon: "Aquarium-Button.Icon px-2 py-2 text-default"
@@ -7008,7 +7056,7 @@ var toastStyles = tv4({
   variants: {
     variant: {
       default: {
-        base: "bg-body-intense text-opposite-default",
+        base: "bg-inverse text-opposite-default",
         dismiss: "[&>button]:text-muted",
         action: "[&>*]:text-primary-inactive hover:[&>*]:text-primary-muted"
       },
@@ -9648,7 +9696,8 @@ import {
 } from "react-aria-components";
 import { tv as tv14 } from "tailwind-variants";
 var popoverStyles = tv14({
-  base: "rounded-sm shadow-16dp bg-popover-content mt-1 overflow-y-auto flex flex-col border border-default outline-none"
+  // z-[101] ensures popover appears above modal (z-modal: 100)
+  base: "rounded-sm shadow-16dp bg-overlay mt-1 overflow-y-auto flex flex-col border border-default outline-none z-[101]"
 });
 var Popover = React55.forwardRef(
   ({ children, offset = 0, className, placement: _placement = "bottom-left", ...props }, ref) => {
@@ -11166,7 +11215,7 @@ import { clsx as clsx27 } from "clsx";
 import { tv as tv17 } from "tailwind-variants";
 var import_tick5 = __toESM(require_tick());
 var dropdownMenuStyles = tv17({
-  base: "bg-popover-content w-full flex flex-col overflow-x-hidden typography-small text-default"
+  base: "bg-overlay w-full flex flex-col overflow-x-hidden typography-small text-default"
 });
 var DropdownMenu = ({ className, children, ...props }) => {
   return /* @__PURE__ */ React68.createElement(AriaMenu, { className: dropdownMenuStyles({ className: ["Aquarium-DropdownMenu", className] }), ...props }, children);
@@ -15281,8 +15330,8 @@ var bodyMaskClasses = tv24({
 var modalStyles = tv24({
   slots: {
     overlay: "inset-0 overflow-y-auto z-modal fixed",
-    backdrop: "-z-10 fixed min-w-full min-h-full bg-body-intense opacity-70",
-    dialog: "bg-popover-content max-h-full flex flex-col",
+    backdrop: "-z-10 fixed min-w-full min-h-full bg-inverse opacity-30",
+    dialog: "bg-overlay max-h-full flex flex-col",
     header: "pl-7 pr-[64px] pt-6 pb-4 gap-3 flex items-center",
     headerImage: "h-[120px] min-h-[120px] w-full",
     titleContainer: "flex flex-col grow",
@@ -15470,9 +15519,8 @@ var DialogWrapper = ({
 };
 
 // src/molecules/Drawer/Drawer.tsx
-import React94, { useRef as useRef12 } from "react";
+import React94 from "react";
 import { Dialog as AriaDialog2, Modal as AriaModal, ModalOverlay as AriaModalOverlay } from "react-aria-components";
-import { UNSTABLE_PortalProvider } from "@react-aria/overlays";
 import { animated as animated5, useSpring as useSpring4 } from "@react-spring/web";
 import { clsx as clsx31 } from "clsx";
 import { castArray as castArray4, omit as omit11 } from "lodash-es";
@@ -15792,14 +15840,13 @@ var Drawer = ({
   secondaryActions,
   closeOnEsc = true
 }) => {
-  const portalContainerRef = useRef12(null);
   const [hidden, setHidden] = React94.useState(!open);
   if (open && hidden) {
     setHidden(!open);
   }
   const { opacity, right } = useSpring4({
     right: open ? "0px" : `-${WIDTHS[size]}px`,
-    opacity: open ? 0.6 : 0,
+    opacity: open ? 0.3 : 0,
     config: {
       mass: 0.5,
       tension: 150,
@@ -15829,18 +15876,13 @@ var Drawer = ({
       className: styles.overlay({ className: "Aquarium-Drawer" })
     },
     /* @__PURE__ */ React94.createElement(AnimatedBackDrop, { style: { opacity } }),
-    /* @__PURE__ */ React94.createElement(AriaModal, null, /* @__PURE__ */ React94.createElement(AnimatedDialog, { kind: "drawer", "aria-modal": "true", size: dialogSize, style: { position: "fixed", right } }, /* @__PURE__ */ React94.createElement(AriaDialog2, { className: "flex flex-col grow overflow-y-auto" }, ({ close }) => (
-      // Create a portal provider to allow nested overlays (Select, Combobox, DatePicker, etc.) to
-      // be rendered inside the modal.
-      // See: https://react-aria.adobe.com/PortalProvider
-      /* @__PURE__ */ React94.createElement(UNSTABLE_PortalProvider, { getContainer: () => portalContainerRef.current }, /* @__PURE__ */ React94.createElement(Modal.CloseButtonContainer, null, /* @__PURE__ */ React94.createElement(Button2.Icon, { "aria-label": "Close", icon: import_cross6.default, onClick: close })), /* @__PURE__ */ React94.createElement(Modal.Header, { className: clsx31({ "pb-3": hasTabs }) }, /* @__PURE__ */ React94.createElement(ModalTitle, { kind: "drawer" }, title)), hasTabs ? /* @__PURE__ */ React94.createElement(
-        DrawerTabs,
-        {
-          ...onlyChild.props,
-          className: "[&>div:first-child]:px-5 grow flex flex-col overflow-y-auto"
-        }
-      ) : /* @__PURE__ */ React94.createElement(Modal.Body, { tabIndex: 0, noFooter: !(secondaryActions ?? primaryAction) }, children, /* @__PURE__ */ React94.createElement("div", { ref: portalContainerRef, className: "relative" })), (secondaryActions ?? primaryAction) && /* @__PURE__ */ React94.createElement(Modal.Footer, null, /* @__PURE__ */ React94.createElement(Modal.Actions, { className: size === "sm" ? "flex-col" : void 0 }, size !== "sm" && menu && /* @__PURE__ */ React94.createElement(Box.Flex, { alignItems: "center" }, /* @__PURE__ */ React94.createElement(DropdownMenu2, { onAction: (action) => onAction(action), onOpenChange: onMenuOpenChange }, /* @__PURE__ */ React94.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ React94.createElement(Button2.Icon, { "aria-label": menuAriaLabel ?? "Context menu", icon: import_more4.default })), menu)), secondaryActions && castArray4(secondaryActions).filter(Boolean).map(({ text, ...action }) => /* @__PURE__ */ React94.createElement(Button2.Secondary, { key: text, ...action }, text)), primaryAction && /* @__PURE__ */ React94.createElement(Button2.Primary, { key: primaryAction.text, ...omit11(primaryAction, "text") }, primaryAction.text))))
-    ))))
+    /* @__PURE__ */ React94.createElement(AriaModal, null, /* @__PURE__ */ React94.createElement(AnimatedDialog, { kind: "drawer", "aria-modal": "true", size: dialogSize, style: { position: "fixed", right } }, /* @__PURE__ */ React94.createElement(AriaDialog2, { className: "flex flex-col grow overflow-y-auto" }, ({ close }) => /* @__PURE__ */ React94.createElement(React94.Fragment, null, /* @__PURE__ */ React94.createElement(Modal.CloseButtonContainer, null, /* @__PURE__ */ React94.createElement(Button2.Icon, { "aria-label": "Close", icon: import_cross6.default, onClick: close })), /* @__PURE__ */ React94.createElement(Modal.Header, { className: clsx31({ "pb-3": hasTabs }) }, /* @__PURE__ */ React94.createElement(ModalTitle, { kind: "drawer" }, title)), hasTabs ? /* @__PURE__ */ React94.createElement(
+      DrawerTabs,
+      {
+        ...onlyChild.props,
+        className: "[&>div:first-child]:px-5 grow flex flex-col overflow-y-auto"
+      }
+    ) : /* @__PURE__ */ React94.createElement(Modal.Body, { tabIndex: 0, noFooter: !(secondaryActions ?? primaryAction) }, children), (secondaryActions ?? primaryAction) && /* @__PURE__ */ React94.createElement(Modal.Footer, null, /* @__PURE__ */ React94.createElement(Modal.Actions, { className: size === "sm" ? "flex-col" : void 0 }, size !== "sm" && menu && /* @__PURE__ */ React94.createElement(Box.Flex, { alignItems: "center" }, /* @__PURE__ */ React94.createElement(DropdownMenu2, { onAction: (action) => onAction(action), onOpenChange: onMenuOpenChange }, /* @__PURE__ */ React94.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ React94.createElement(Button2.Icon, { "aria-label": menuAriaLabel ?? "Context menu", icon: import_more4.default })), menu)), secondaryActions && castArray4(secondaryActions).filter(Boolean).map(({ text, ...action }) => /* @__PURE__ */ React94.createElement(Button2.Secondary, { key: text, ...action }, text)), primaryAction && /* @__PURE__ */ React94.createElement(Button2.Primary, { key: primaryAction.text, ...omit11(primaryAction, "text") }, primaryAction.text)))))))
   );
 };
 var DrawerTabs = createTabsComponent(ModalTab, TabItem, "DrawerTabs", (children, selected) => /* @__PURE__ */ React94.createElement(Modal.Body, { className: "h-full" }, /* @__PURE__ */ React94.createElement(TabContainer, { className: "!py-4" }, children.find(
@@ -15901,7 +15943,7 @@ var DropdownMenu3 = ({
     const id = setTimeout(() => (menuRef.current?.children[0]).focus());
     return () => clearTimeout(id);
   }, [menuRef.current]);
-  return /* @__PURE__ */ React96.createElement("div", { style: { minWidth: "250px" }, className: "py-3 bg-popover-content" }, !!title && /* @__PURE__ */ React96.createElement("div", { className: "px-4 py-4 text-left text-intense typography-default-strong" }, title), /* @__PURE__ */ React96.createElement("ol", { role: "menu", ref: menuRef, id: contentId, "aria-labelledby": triggerId }, React96.Children.map(children, (child) => {
+  return /* @__PURE__ */ React96.createElement("div", { style: { minWidth: "250px" }, className: "py-3 bg-overlay" }, !!title && /* @__PURE__ */ React96.createElement("div", { className: "px-4 py-4 text-left text-intense typography-default-strong" }, title), /* @__PURE__ */ React96.createElement("ol", { role: "menu", ref: menuRef, id: contentId, "aria-labelledby": triggerId }, React96.Children.map(children, (child) => {
     return React96.cloneElement(child, { setClose });
   })));
 };
@@ -16247,9 +16289,8 @@ var ListItem = ({ name, icon, active = false }) => {
 };
 
 // src/molecules/Modal/Modal.tsx
-import React102, { useRef as useRef13 } from "react";
+import React102 from "react";
 import { Dialog as AriaDialog3, Modal as AriaModal2, ModalOverlay as AriaModalOverlay2 } from "react-aria-components";
-import { UNSTABLE_PortalProvider as UNSTABLE_PortalProvider2 } from "@react-aria/overlays";
 import { clsx as clsx35 } from "clsx";
 import { castArray as castArray5, isEmpty as isEmpty2, omit as omit12 } from "lodash-es";
 var import_cross8 = __toESM(require_cross());
@@ -16265,7 +16306,6 @@ var Modal2 = ({
   primaryAction,
   secondaryActions
 }) => {
-  const portalContainerRef = useRef13(null);
   if (!open) {
     return null;
   }
@@ -16282,20 +16322,15 @@ var Modal2 = ({
       className: styles.overlay({ className: "Aquarium-Modal" })
     },
     size !== "screen" && /* @__PURE__ */ React102.createElement(Modal.BackDrop, { className: styles.backdrop() }),
-    /* @__PURE__ */ React102.createElement(AriaModal2, { className: styles.dialog() }, /* @__PURE__ */ React102.createElement(AriaDialog3, { className: "flex flex-col grow overflow-y-auto" }, ({ close }) => (
-      // Create a portal provider to allow nested overlays (Select, Combobox, DatePicker, etc.) to
-      // be rendered inside the modal.
-      // See: https://react-aria.adobe.com/PortalProvider
-      /* @__PURE__ */ React102.createElement(UNSTABLE_PortalProvider2, { getContainer: () => portalContainerRef.current }, /* @__PURE__ */ React102.createElement(Modal.CloseButtonContainer, null, /* @__PURE__ */ React102.createElement(Button2.Icon, { "aria-label": "Close", icon: import_cross8.default, onClick: close })), headerImage !== void 0 && /* @__PURE__ */ React102.createElement(Modal.HeaderImage, { backgroundImage: headerImage }), /* @__PURE__ */ React102.createElement(
-        Modal.Header,
-        {
-          kind: "dialog",
-          size,
-          className: clsx35({ "pb-3": isComponentType(children, ModalTabs) })
-        },
-        /* @__PURE__ */ React102.createElement(Modal.TitleContainer, null, /* @__PURE__ */ React102.createElement(ModalTitle, { kind: "dialog" }, title), subtitle && /* @__PURE__ */ React102.createElement(Modal.Subtitle, null, subtitle))
-      ), hasTabs ? React102.cloneElement(children, { className: "[&>div:first-child]:px-5 grow" }) : /* @__PURE__ */ React102.createElement(Modal.Body, { tabIndex: 0, noFooter: !hasActions, size }, children, /* @__PURE__ */ React102.createElement("div", { ref: portalContainerRef, className: "relative" })), hasActions && /* @__PURE__ */ React102.createElement(Modal.Footer, null, /* @__PURE__ */ React102.createElement(Modal.Actions, null, secondaryActions && castArray5(secondaryActions).filter(Boolean).map(({ text, ...action }) => /* @__PURE__ */ React102.createElement(Button2.Secondary, { key: text, ...action }, text)), primaryAction && /* @__PURE__ */ React102.createElement(Button2.Primary, { key: primaryAction.text, ...omit12(primaryAction, "text") }, primaryAction.text))))
-    )))
+    /* @__PURE__ */ React102.createElement(AriaModal2, { className: styles.dialog() }, /* @__PURE__ */ React102.createElement(AriaDialog3, { className: "flex flex-col grow overflow-y-auto" }, ({ close }) => /* @__PURE__ */ React102.createElement(React102.Fragment, null, /* @__PURE__ */ React102.createElement(Modal.CloseButtonContainer, null, /* @__PURE__ */ React102.createElement(Button2.Icon, { "aria-label": "Close", icon: import_cross8.default, onClick: close })), headerImage !== void 0 && /* @__PURE__ */ React102.createElement(Modal.HeaderImage, { backgroundImage: headerImage }), /* @__PURE__ */ React102.createElement(
+      Modal.Header,
+      {
+        kind: "dialog",
+        size,
+        className: clsx35({ "pb-3": isComponentType(children, ModalTabs) })
+      },
+      /* @__PURE__ */ React102.createElement(Modal.TitleContainer, null, /* @__PURE__ */ React102.createElement(ModalTitle, { kind: "dialog" }, title), subtitle && /* @__PURE__ */ React102.createElement(Modal.Subtitle, null, subtitle))
+    ), hasTabs ? React102.cloneElement(children, { className: "[&>div:first-child]:px-5 grow" }) : /* @__PURE__ */ React102.createElement(Modal.Body, { tabIndex: 0, noFooter: !hasActions, size }, children), hasActions && /* @__PURE__ */ React102.createElement(Modal.Footer, null, /* @__PURE__ */ React102.createElement(Modal.Actions, null, secondaryActions && castArray5(secondaryActions).filter(Boolean).map(({ text, ...action }) => /* @__PURE__ */ React102.createElement(Button2.Secondary, { key: text, ...action }, text)), primaryAction && /* @__PURE__ */ React102.createElement(Button2.Primary, { key: primaryAction.text, ...omit12(primaryAction, "text") }, primaryAction.text))))))
   );
 };
 var ModalTabs = createTabsComponent(
@@ -16308,7 +16343,7 @@ var ModalTabs = createTabsComponent(
 );
 
 // src/molecules/MultiInput/MultiInput.tsx
-import React104, { useEffect as useEffect9, useRef as useRef14, useState as useState11 } from "react";
+import React104, { useEffect as useEffect9, useRef as useRef12, useState as useState11 } from "react";
 import { useId as useId13 } from "@react-aria/utils";
 import { castArray as castArray6, identity, omit as omit13 } from "lodash-es";
 
@@ -16390,7 +16425,7 @@ var MultiInputBase = ({
   valid = true,
   ...props
 }) => {
-  const inputRef = useRef14(null);
+  const inputRef = useRef12(null);
   const [items, setItems] = useState11(value ?? defaultValue ?? []);
   const [hasFocus, setFocus] = useState11(false);
   const keyCodes = [delimiter !== "enter" ? " " : null, delimiter !== "space" ? "Enter" : null].filter(identity);
@@ -16559,7 +16594,7 @@ MultiInput.Skeleton = MultiInputSkeleton;
 MultiInput.Skeleton.displayName = "MultiInput.Skeleton";
 
 // src/molecules/MultiSelect/MultiSelect.tsx
-import React105, { useEffect as useEffect10, useRef as useRef15, useState as useState12 } from "react";
+import React105, { useEffect as useEffect10, useRef as useRef13, useState as useState12 } from "react";
 import { ariaHideOutside as ariaHideOutside3 } from "@react-aria/overlays";
 import { useId as useId14 } from "@react-aria/utils";
 import { useCombobox as useCombobox2, useMultipleSelection } from "downshift";
@@ -16589,10 +16624,10 @@ var MultiSelectBase = ({
   children,
   ...props
 }) => {
-  const popoverRef = useRef15(null);
-  const targetRef = useRef15(null);
-  const menuRef = useRef15(null);
-  const inputRef = useRef15(null);
+  const popoverRef = useRef13(null);
+  const targetRef = useRef13(null);
+  const menuRef = useRef13(null);
+  const inputRef = useRef13(null);
   const [inputValue, setInputValue] = useState12("");
   const [hasFocus, setFocus] = useState12(false);
   const { selectedItems, addSelectedItem, removeSelectedItem, getDropdownProps, getSelectedItemProps } = useMultipleSelection(
@@ -17309,7 +17344,7 @@ RadioButtonGroup.Skeleton = RadioButtonGroupSkeleton;
 RadioButtonGroup.Skeleton.displayName = "RadioButtonGroup.Skeleton";
 
 // src/molecules/Section/Section.tsx
-import React121, { useRef as useRef16 } from "react";
+import React121, { useRef as useRef14 } from "react";
 import { useButton as useButton4 } from "@react-aria/button";
 import { useId as useId17 } from "@react-aria/utils";
 import { animated as animated6, useSpring as useSpring5 } from "@react-spring/web";
@@ -17491,8 +17526,8 @@ var Section3 = (props) => {
   const [isCollapsed, setCollapsed] = React121.useState(_collapsed ?? _defaultCollapsed);
   const [isResting, setResting] = React121.useState(true);
   const [ref, { height }] = useMeasure();
-  const toggleAreaRef = useRef16(null);
-  const isMounted = useRef16(true);
+  const toggleAreaRef = useRef14(null);
+  const isMounted = useRef14(true);
   React121.useEffect(
     () => () => {
       isMounted.current = false;
@@ -17711,7 +17746,7 @@ var stepStyles = tv31({
       slots: ["indicator"],
       dense: true,
       state: "active",
-      class: "bg-body-intense"
+      class: "bg-inverse"
     },
     {
       slots: ["indicator"],

package/dist/tailwind.theme.json

@@ -367,7 +367,8 @@
       "100": "var(--aquarium-colors-warning-100)",
       "muted": "var(--aquarium-background-color-warning-muted)",
       "default": "var(--aquarium-background-color-warning-default)",
-      "intense": "var(--aquarium-background-color-warning-intense)"
+      "intense": "var(--aquarium-background-color-warning-intense)",
+      "inverse": "var(--aquarium-background-color-warning-inverse)"
     },
     "success": {
       "0": "var(--aquarium-colors-success-0)",
@@ -384,7 +385,8 @@
       "100": "var(--aquarium-colors-success-100)",
       "muted": "var(--aquarium-background-color-success-muted)",
       "default": "var(--aquarium-background-color-success-default)",
-      "intense": "var(--aquarium-background-color-success-intense)"
+      "intense": "var(--aquarium-background-color-success-intense)",
+      "inverse": "var(--aquarium-background-color-success-inverse)"
     },
     "info": {
       "0": "var(--aquarium-colors-info-0)",
@@ -401,7 +403,8 @@
       "100": "var(--aquarium-colors-info-100)",
       "muted": "var(--aquarium-background-color-info-muted)",
       "default": "var(--aquarium-background-color-info-default)",
-      "intense": "var(--aquarium-background-color-info-intense)"
+      "intense": "var(--aquarium-background-color-info-intense)",
+      "inverse": "var(--aquarium-background-color-info-inverse)"
     },
     "grey": {
       "0": "var(--aquarium-colors-grey-0)",
@@ -451,15 +454,27 @@
       "hover": "var(--aquarium-background-color-primary-hover)"
     },
     "body": "var(--aquarium-background-color-body)",
+    "layer": "var(--aquarium-background-color-layer)",
     "body-intense": "var(--aquarium-background-color-body-intense)",
+    "inverse": "var(--aquarium-background-color-inverse)",
+    "overlay": "var(--aquarium-background-color-overlay)",
     "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)",
+    "action": {
+      "primary-button": {
+        "default": "var(--aquarium-background-color-action-primary-button-default)",
+        "active": "var(--aquarium-background-color-action-primary-button-active)",
+        "hover": "var(--aquarium-background-color-action-primary-button-hover)",
+        "disabled": "var(--aquarium-background-color-action-primary-button-disabled)"
+      }
+    },
     "danger": {
       "muted": "var(--aquarium-background-color-danger-muted)",
       "default": "var(--aquarium-background-color-danger-default)",
-      "intense": "var(--aquarium-background-color-danger-intense)"
+      "intense": "var(--aquarium-background-color-danger-intense)",
+      "inverse": "var(--aquarium-background-color-danger-inverse)"
     },
     "status": {
       "announcement": "var(--aquarium-background-color-status-announcement)",
@@ -723,6 +738,15 @@
     "muted": "var(--aquarium-border-color-muted)",
     "default": "var(--aquarium-border-color-default)",
     "intense": "var(--aquarium-border-color-intense)",
+    "action": {
+      "focus": "var(--aquarium-border-color-action-focus)",
+      "secondary-button": {
+        "default": "var(--aquarium-border-color-action-secondary-button-default)",
+        "active": "var(--aquarium-border-color-action-secondary-button-active)",
+        "hover": "var(--aquarium-border-color-action-secondary-button-hover)",
+        "disabled": "var(--aquarium-border-color-action-secondary-button-disabled)"
+      }
+    },
     "danger": {
       "muted": "var(--aquarium-border-color-danger-muted)",
       "default": "var(--aquarium-border-color-danger-default)",

package/dist/tokens.json

@@ -20,7 +20,10 @@
   },
   "backgroundColor": {
     "body": "white",
+    "layer": "white",
     "body-intense": "rgba(58,58,68,1)",
+    "inverse": "rgba(58,58,68,1)",
+    "overlay": "white",
     "popover-content": "white",
     "muted": "rgba(247,247,250,1)",
     "default": "rgba(237,237,240,1)",
@@ -32,25 +35,37 @@
       "active": "rgba(243,246,255,1)",
       "hover": "rgba(243,246,255,1)"
     },
+    "action": {
+      "primary-button": {
+        "default": "rgba(53,69,190,1)",
+        "active": "rgba(243,246,255,1)",
+        "hover": "rgba(34,47,149,1)",
+        "disabled": "rgba(185,197,239,1)"
+      }
+    },
     "info": {
       "muted": "rgba(224,245,254,1)",
       "default": "rgba(3,153,227,1)",
-      "intense": "rgba(1,116,186,1)"
+      "intense": "rgba(1,116,186,1)",
+      "inverse": "rgba(3,153,227,1)"
     },
     "success": {
       "muted": "rgba(236,247,237,1)",
       "default": "rgba(0,179,0,1)",
-      "intense": "rgba(0,142,0,1)"
+      "intense": "rgba(0,142,0,1)",
+      "inverse": "rgba(0,179,0,1)"
     },
     "warning": {
       "muted": "rgba(255,248,234,1)",
       "default": "rgba(255,179,0,1)",
-      "intense": "rgba(255,144,3,1)"
+      "intense": "rgba(255,144,3,1)",
+      "inverse": "rgba(255,179,0,1)"
     },
     "danger": {
       "muted": "rgba(255,203,210,1)",
       "default": "rgba(255,173,179,1)",
-      "intense": "rgba(230,39,40,1)"
+      "intense": "rgba(230,39,40,1)",
+      "inverse": "rgba(216,0,5,1)"
     },
     "status": {
       "announcement": "rgba(243,246,255,1)",
@@ -72,6 +87,15 @@
       "default": "rgba(53,69,190,1)",
       "intense": "rgba(14,22,82,1)"
     },
+    "action": {
+      "focus": "rgba(53,69,190,1)",
+      "secondary-button": {
+        "default": "rgba(53,69,190,1)",
+        "active": "rgba(243,246,255,1)",
+        "hover": "rgba(243,246,255,1)",
+        "disabled": "rgba(129,142,236,1)"
+      }
+    },
     "info": {
       "muted": "rgba(40,180,244,1)",
       "default": "rgba(3,153,227,1)",