@aivenio/aquarium 6.0.0-rc4 → 6.0.0-rc6

package/dist/_variables.scss

@@ -176,6 +176,7 @@ $background-color-body: $colors-white;
 $background-color-layer: $colors-white;
 $background-color-inverse: $colors-grey-80;
 $background-color-overlay: $colors-white;
+$background-color-backdrop: rgb(from $colors-grey-100 r g b / 70%);
 $background-color-muted: $colors-grey-5;
 $background-color-medium: $colors-grey-10;
 $background-color-intense: $colors-grey-30;

package/dist/atoms.cjs

@@ -90,7 +90,7 @@ module.exports = __toCommonJS(atoms_exports);
 
 // src/atoms/Alert/Alert.tsx
 var import_react142 = __toESM(require("react"));
-var import_tailwind_variants32 = require("tailwind-variants");
+var import_tailwind_variants33 = require("tailwind-variants");
 
 // src/molecules/Button/Button.tsx
 var import_react5 = __toESM(require("react"));
@@ -841,7 +841,7 @@ var InlineIcon2 = import_react6.default.forwardRef(({ color, className, ...rest
 
 // src/atoms/Typography/Typography.tsx
 var import_react141 = __toESM(require("react"));
-var import_clsx42 = require("clsx");
+var import_clsx41 = require("clsx");
 
 // src/tokens/tokens.json
 var tokens_default = {
@@ -865,6 +865,7 @@ var tokens_default = {
     "body-intense": "rgba(31,32,33,1)",
     inverse: "rgba(31,32,33,1)",
     overlay: "rgba(255,255,255,1)",
+    backdrop: "rgb(from rgba(13,14,16,1) r g b / 70%)",
     "popover-content": "rgba(255,255,255,1)",
     muted: "rgba(244,244,244,1)",
     default: "rgba(235,235,235,1)",
@@ -1855,6 +1856,7 @@ var tailwind_theme_default = {
     "body-intense": "var(--aquarium-background-color-body-intense)",
     inverse: "var(--aquarium-background-color-inverse)",
     overlay: "var(--aquarium-background-color-overlay)",
+    backdrop: "var(--aquarium-background-color-backdrop)",
     "popover-content": "var(--aquarium-background-color-popover-content)",
     muted: "var(--aquarium-background-color-muted)",
     default: "var(--aquarium-background-color-default)",
@@ -2611,13 +2613,13 @@ var getValues = (children) => {
   return values?.filter((v) => v !== void 0 && v !== null) ?? [];
 };
 var inputContainerClasses = (0, import_tailwind_variants4.tv)({
-  base: "relative rounded typography-default-strong w-full flex flex-row items-center focus-visible:outline-0 focus-visible:border-info-default group",
+  base: "relative rounded typography-default-strong w-full flex flex-row items-center bg-body focus-visible:outline-0 focus-visible:border-info-default group",
   variants: {
     variant: {
-      default: "border px-3 py-[6px] border-default hover:border-intense bg-transparent",
+      default: "border px-3 py-[6px] border-default hover:border-intense",
       disabled: "border px-3 py-[6px] cursor-not-allowed border-default bg-medium",
-      error: "border px-3 py-[6px] border-danger-default bg-transparent",
-      focused: "border px-3 py-[6px] border-info-default bg-transparent",
+      error: "border px-3 py-[6px] border-danger-default",
+      focused: "border px-3 py-[6px] border-info-default",
       readOnly: "cursor-default border-default bg-transparent"
     }
   }
@@ -3077,6 +3079,7 @@ var Alert2 = ({
       className: "Aquarium-Alert",
       type,
       dense: Boolean(title),
+      hasAction: Boolean(action),
       "aria-describedby": descriptionID,
       "aria-labelledby": title ? titleID : void 0
     },
@@ -3817,11 +3820,11 @@ var Checkbox = import_react35.default.forwardRef(
 var import_react36 = __toESM(require("react"));
 var import_tailwind_variants11 = require("tailwind-variants");
 var radioButtonClasses = (0, import_tailwind_variants11.tv)({
-  base: "inline-flex justify-center items-center self-center appearance-none w-5 h-5 p-[3px] rounded-full border border-default outline-none focus:border-info-default checked:bg-primary-graphic checked:shadow-bodyInset",
+  base: "inline-flex justify-center items-center self-center appearance-none w-5 h-5 p-[3px] rounded-full border border-default outline-none focus:border-info-default checked:bg-primary-inverse checked:shadow-bodyInset",
   variants: {
     disabled: {
-      true: "cursor-not-allowed border-muted bg-muted checked:bg-primary-muted checked:border-transparent",
-      false: "cursor-pointer hover:border-intense checked:border-primary-default"
+      true: "cursor-not-allowed border-muted bg-muted checked:bg-intense checked:border-transparent",
+      false: "cursor-pointer hover:bg-primary-active hover:border-primary-default checked:border-primary-default hover:checked:bg-primary-inverse"
     }
   }
 });
@@ -3995,7 +3998,15 @@ var CompactCard = ({
       ...commonProps
     },
     commonContent,
-    (primaryAction ?? secondaryAction) && /* @__PURE__ */ import_react40.default.createElement(Card.Actions, { disabled, dense: true }, primaryAction && renderAction({ kind: "secondary", dense: true, action: primaryAction, disabled }), secondaryAction && renderAction({ kind: "ghost", dense: true, action: secondaryAction, disabled }))
+    (primaryAction ?? secondaryAction) && /* @__PURE__ */ import_react40.default.createElement(Card.Actions, { disabled, dense: true }, primaryAction && renderAction({
+      kind: "secondary",
+      dense: true,
+      action: { ...primaryAction, disabled: primaryAction.disabled || disabled }
+    }), secondaryAction && renderAction({
+      kind: "ghost",
+      dense: true,
+      action: { ...secondaryAction, disabled: secondaryAction.disabled || disabled }
+    }))
   );
 };
 var CompactSkeleton = ({
@@ -4105,7 +4116,15 @@ var Card2 = ({
       hasImage: Boolean(image) && !chipElements && !icons.length
     },
     commonContent,
-    (primaryAction ?? secondaryAction) && /* @__PURE__ */ import_react41.default.createElement(Card.Actions, { disabled }, primaryAction && renderAction({ kind: "secondary", dense: true, action: primaryAction, disabled }), secondaryAction && renderAction({ kind: "ghost", dense: true, action: secondaryAction, disabled }))
+    (primaryAction ?? secondaryAction) && /* @__PURE__ */ import_react41.default.createElement(Card.Actions, { disabled }, primaryAction && renderAction({
+      kind: "secondary",
+      dense: true,
+      action: { ...primaryAction, disabled: primaryAction.disabled || disabled }
+    }), secondaryAction && renderAction({
+      kind: "ghost",
+      dense: true,
+      action: { ...secondaryAction, disabled: secondaryAction.disabled || disabled }
+    }))
   );
 };
 Card2.Title = Card.Title;
@@ -4167,7 +4186,7 @@ var ControlLabel = ({
     },
     rtl ? labelEl : children,
     rtl ? children : labelEl,
-    caption && /* @__PURE__ */ import_react43.default.createElement(Typography2, { className: (0, import_clsx13.clsx)({ "col-start-2": !rtl }), variant: "small", color: disabled ? "inactive" : "default" }, caption)
+    caption && /* @__PURE__ */ import_react43.default.createElement(Typography2, { className: (0, import_clsx13.clsx)({ "col-start-2": !rtl }), variant: "small", color: disabled ? "inactive" : "muted" }, caption)
   );
 };
 
@@ -5648,24 +5667,24 @@ var rowClassNamesBase = (0, import_tailwind_variants14.tv)({
 });
 var rowClassNames = rowClassNamesBase();
 var cellClassNamesBase = (0, import_tailwind_variants14.tv)({
-  base: "px-4 border-b typography-default leading-[18px]"
+  base: "px-4 border-b leading-[18px]"
 });
 var cellClassNames = cellClassNamesBase();
 var rowClasses = (0, import_tailwind_variants14.tv)({
   extend: rowClassNamesBase,
   variants: {
     disabled: {
-      true: "opacity-70",
+      true: "[&>div]:text-inactive",
       false: ""
     }
   }
 });
 var bodyCellClasses = (0, import_tailwind_variants14.tv)({
-  base: "text-default py-3",
+  base: "py-5 typography-default",
   variants: {
     table: {
       true: "h-[50px]",
-      false: "min-h-[50px]"
+      false: "min-h-[48px]"
     },
     stickyColumn: {
       left: "sticky z-10 bg-body group-hover:bg-muted left-0",
@@ -5689,7 +5708,7 @@ var alignClasses = (0, import_tailwind_variants14.tv)({
   }
 });
 var headCellClasses = (0, import_tailwind_variants14.tv)({
-  base: "py-[14px] text-left border-intense text-muted font-semibold whitespace-nowrap",
+  base: "py-4 text-left border-muted text-muted whitespace-nowrap min-h-[40px] typography-small-strong",
   variants: {
     sticky: {
       true: "sticky bg-body top-0 z-10",
@@ -5852,7 +5871,7 @@ var rowClasses2 = (0, import_tailwind_variants15.tv)({
       false: ""
     },
     disabled: {
-      true: "children:opacity-70",
+      true: "[&>div]:text-inactive",
       false: ""
     },
     active: {
@@ -5893,10 +5912,10 @@ var sortCellIconsClasses = (0, import_tailwind_variants15.tv)({
   }
 });
 var toolbarContainerClasses = (0, import_tailwind_variants15.tv)({
-  base: "col-span-full flex items-stretch py-4 px-l2 border-b border-default",
+  base: "col-span-full flex items-stretch py-4 px-l2 border-b border-muted",
   variants: {
     sticky: {
-      true: "sticky top-[47px] bg-body z-10",
+      true: "sticky top-[47px] bg-layer z-10",
       false: ""
     }
   }
@@ -5943,7 +5962,7 @@ var Cell = ({
       cellClassNames,
       getBodyCellClassNames(false, stickyColumn),
       alignClasses2({ align }),
-      "border-default",
+      "border-muted",
       className
     )
   }
@@ -5977,7 +5996,7 @@ var Row = ({
 };
 var SubGroupSpacing = ({ className, divider = false, ...rest }) => /* @__PURE__ */ import_react66.default.createElement("span", { ...rest, "aria-hidden": true, className: (0, import_clsx24.clsx)(subGroupSpacingClasses({ divider }), className) });
 var SortCell = ({ children, direction = "none", onClick, sticky, ...rest }) => /* @__PURE__ */ import_react66.default.createElement(HeadCell, { ...rest, "aria-sort": direction, role: "columnheader", sticky }, /* @__PURE__ */ import_react66.default.createElement("span", { className: getSortCellButtonClassNames(rest.align), role: "button", tabIndex: -1, onClick }, children, /* @__PURE__ */ import_react66.default.createElement("div", { "data-sort-icons": true, className: sortCellIconsClasses({ direction }) }, /* @__PURE__ */ import_react66.default.createElement(InlineIcon2, { icon: chevronUp_default, className: getSortCellIconClassNames(direction === "ascending") }), /* @__PURE__ */ import_react66.default.createElement(InlineIcon2, { icon: chevronDown_default, className: getSortCellIconClassNames(direction === "descending") }))));
-var EmptyGroup = ({ icon, children }) => /* @__PURE__ */ import_react66.default.createElement("div", { className: emptyGroupClasses() }, icon && /* @__PURE__ */ import_react66.default.createElement(Icon2, { icon, width: 22 }), children);
+var EmptyGroup = ({ icon, children }) => /* @__PURE__ */ import_react66.default.createElement("div", { className: emptyGroupClasses() }, icon && /* @__PURE__ */ import_react66.default.createElement(Icon2, { icon, width: 18 }), children);
 DataList.EmptyGroup = EmptyGroup;
 DataList.EmptyGroup.displayName = "DataList.EmptyGroup";
 DataList.HeadCell = HeadCell;
@@ -6131,7 +6150,7 @@ function useScrollStyles({
   containerRef,
   skip = false,
   direction = "horizontal",
-  options = { borderColor: "210, 210, 214", boxShadowColor: "58, 58, 68" }
+  options = { borderColor: "210, 210, 214", boxShadowColor: "74, 74, 83" }
 }) {
   const scrollXProgress = useScrollProgress({ containerRef, skip });
   return useStickyStyles(scrollXProgress, direction, options);
@@ -6229,7 +6248,7 @@ var import_react_aria_components2 = require("react-aria-components");
 var import_clsx25 = require("clsx");
 var import_tailwind_variants16 = require("tailwind-variants");
 var dropdownMenuStyles = (0, import_tailwind_variants16.tv)({
-  base: "bg-overlay w-full flex flex-col overflow-x-hidden typography-small text-default"
+  base: "bg-overlay w-full flex flex-col overflow-x-hidden typography-default text-default"
 });
 var DropdownMenu = ({ className, children, ...props }) => {
   return /* @__PURE__ */ import_react69.default.createElement(import_react_aria_components2.Menu, { className: dropdownMenuStyles({ className: ["Aquarium-DropdownMenu", className] }), ...props }, children);
@@ -6452,7 +6471,8 @@ var DataListRowMenu = ({
   menu,
   onAction,
   onMenuOpenChange,
-  menuAriaLabel
+  menuAriaLabel,
+  disabled = false
 }) => {
   if (!menu) {
     return null;
@@ -6465,7 +6485,7 @@ var DataListRowMenu = ({
       onAction: (action) => onAction?.(action, row, index),
       onOpenChange: onMenuOpenChange
     },
-    /* @__PURE__ */ import_react74.default.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ import_react74.default.createElement(Button2.Icon, { "aria-label": menuAriaLabel, icon: more_default })),
+    /* @__PURE__ */ import_react74.default.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ import_react74.default.createElement(Button2.Icon, { "aria-label": menuAriaLabel, icon: more_default, disabled })),
     menuContent
   ));
 };
@@ -6519,7 +6539,7 @@ var DataListRow = ({
               ...additionalColumnProps(column, columnIndex, columns, row),
               className: rowClassName?.(row, index, rows)
             },
-            /* @__PURE__ */ import_react74.default.createElement(DataListCell, { column, row, index, rows })
+            /* @__PURE__ */ import_react74.default.createElement(DataListCell, { column, row, index, rows, disabled: isRowDisabled })
           );
           return createAnimatedCell({
             cellElement: cell2,
@@ -6537,7 +6557,8 @@ var DataListCell = ({
   column,
   row,
   index,
-  rows: _rows
+  rows: _rows,
+  disabled = false
 }) => {
   let cellContent = DEFAULT_CONTENT;
   const rows = areRowsGrouped(_rows) ? void 0 : _rows;
@@ -6552,13 +6573,17 @@ var DataListCell = ({
     case "action": {
       const action = renameProperty("text", "children", column.action(row, index, rows));
       if (action) {
+        const isActionDisabled = disabled || action.disabled;
         cellContent = /* @__PURE__ */ import_react74.default.createElement(
           Button2.Secondary,
           {
             dense: true,
             ...action,
+            disabled: isActionDisabled,
             onClick: (e) => {
-              action.onClick();
+              if (!isActionDisabled) {
+                action.onClick();
+              }
               e.stopPropagation();
             }
           }
@@ -6609,7 +6634,8 @@ var DataListCell = ({
 var import_react75 = require("react");
 var DataListContext = (0, import_react75.createContext)({
   rows: [],
-  selectedRows: void 0
+  selectedRows: void 0,
+  selectable: false
 });
 var useDataListContext = () => {
   const ctx = (0, import_react75.useContext)(DataListContext);
@@ -6823,7 +6849,7 @@ var DataListGroup = ({
         )), /* @__PURE__ */ import_react76.default.createElement(
           DataList.Cell,
           {
-            className: "gap-3",
+            className: "gap-2",
             style: { paddingLeft: `${GAP + level * INDENTATION}px`, gridColumn: `${selectable ? 2 : 1} / -1` }
           },
           /* @__PURE__ */ import_react76.default.createElement(Accordion.Toggle, { panelId: key, onChange: onGroupToggled }),
@@ -6874,13 +6900,19 @@ var DataListToolbar = ({
   menuLabel,
   sticky = true
 }) => {
-  const { selectedRows } = useDataListContext();
+  const { selectedRows, selectable } = useDataListContext();
   const actions2 = (0, import_lodash_es26.castArray)(_actions).filter(Boolean);
+  const noRowsSelected = (selectedRows?.length ?? 0) === 0;
+  const disableToolbarActions = selectable && noRowsSelected;
   return /* @__PURE__ */ import_react78.default.createElement(DataList.Toolbar.Container, { sticky }, /* @__PURE__ */ import_react78.default.createElement(DataList.Toolbar.Group, null, /* @__PURE__ */ import_react78.default.createElement(DataList.Toolbar.SelectionCount, null, selectedRows?.length ?? 0, " selected")), actions2.length > 0 && /* @__PURE__ */ import_react78.default.createElement(DataList.Toolbar.Group, null, /* @__PURE__ */ import_react78.default.createElement(DataList.Toolbar.Actions, null, actions2.map(
     (action) => renderAction({
       kind: "ghost",
       dense: true,
-      action: { ...action, onClick: () => action.onClick(selectedRows ?? []) }
+      action: {
+        ...action,
+        disabled: disableToolbarActions || action.disabled,
+        onClick: () => action.onClick(selectedRows ?? [])
+      }
     })
   ))), menu && /* @__PURE__ */ import_react78.default.createElement(DataList.Toolbar.Group, null, /* @__PURE__ */ import_react78.default.createElement(
     DropdownMenu2,
@@ -6889,7 +6921,7 @@ var DataListToolbar = ({
       onAction: (key) => onAction(key, selectedRows ?? []),
       onOpenChange: onMenuOpenChange
     },
-    /* @__PURE__ */ import_react78.default.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ import_react78.default.createElement(Button2.Dropdown, { kind: "ghost", dense: true }, menuLabel)),
+    /* @__PURE__ */ import_react78.default.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ import_react78.default.createElement(Button2.Dropdown, { kind: "ghost", dense: true, disabled: disableToolbarActions }, menuLabel)),
     menu
   )));
 };
@@ -6995,7 +7027,7 @@ var DataList2 = ({
     }
   )), isCollapsible && /* @__PURE__ */ import_react79.default.createElement(DataList.HeadCell, { align: "left", sticky }), columns.map((column) => {
     const content = column.headerTooltip ? /* @__PURE__ */ import_react79.default.createElement(Tooltip, { placement: column.headerTooltip.placement, content: column.headerTooltip.content }, column.headerName) : column.headerName;
-    const headerContentAndIcon = column.icon ? /* @__PURE__ */ import_react79.default.createElement(Box.Flex, { flexDirection: "row", gap: "3", alignItems: "center" }, /* @__PURE__ */ import_react79.default.createElement(InlineIcon2, { icon: column.icon, height: "22", color: "muted", "aria-hidden": true }), content) : content;
+    const headerContentAndIcon = column.icon ? /* @__PURE__ */ import_react79.default.createElement(Box.Flex, { flexDirection: "row", gap: "2", alignItems: "center" }, /* @__PURE__ */ import_react79.default.createElement(InlineIcon2, { icon: column.icon, width: 18, height: 18, color: "muted", "aria-hidden": true }), content) : content;
     const cell2 = columnHasSort(column) ? /* @__PURE__ */ import_react79.default.createElement(
       DataList.SortCell,
       {
@@ -7071,7 +7103,8 @@ var DataList2 = ({
                 menu,
                 onAction,
                 onMenuOpenChange,
-                menuAriaLabel
+                menuAriaLabel,
+                disabled: isDisabled
               }
             ),
             disabled,
@@ -7128,7 +7161,8 @@ var DataList2 = ({
     {
       value: {
         rows: (0, import_lodash_es27.isArray)(rows) ? sortedRows : rows,
-        selectedRows: selected
+        selectedRows: selected,
+        selectable: Boolean(selectable)
       }
     },
     wrappedContent
@@ -10274,10 +10308,10 @@ var bodyMaskClasses = (0, import_tailwind_variants23.tv)({
         "before:sticky",
         "before:top-0",
         "before:left-0",
-        "before:h-4",
+        "before:h-5",
         "before:flex-shrink-0",
         "before:bg-gradient-to-b",
-        "before:from-white",
+        "before:from-overlay",
         "before:to-transparent",
         "before:z-10"
       ],
@@ -10285,12 +10319,12 @@ var bodyMaskClasses = (0, import_tailwind_variants23.tv)({
         'after:content-[""]',
         "after:pointer-events-none",
         "after:sticky",
-        "after:bottom-0",
+        "after:bottom-3",
         "after:left-0",
-        "after:h-4",
+        "after:h-5",
         "after:flex-shrink-0",
         "after:bg-gradient-to-t",
-        "after:from-white",
+        "after:from-overlay",
         "after:to-transparent",
         "after:z-10"
       ]
@@ -10300,12 +10334,13 @@ var bodyMaskClasses = (0, import_tailwind_variants23.tv)({
 var modalStyles = (0, import_tailwind_variants23.tv)({
   slots: {
     overlay: "inset-0 overflow-y-auto z-modal fixed",
-    backdrop: "-z-10 fixed min-w-full min-h-full bg-inverse opacity-30",
-    dialog: "bg-overlay max-h-full flex flex-col",
+    backdrop: "-z-10 fixed min-w-full min-h-full bg-backdrop",
+    dialog: "Aquarium-Modal.Container 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",
     title: "",
+    subtitle: "max-w-[700px]",
     closeButtonContainer: "absolute top-[24px] right-[28px]",
     body: [
       "grow overflow-y-auto text-default flex flex-col",
@@ -10314,7 +10349,7 @@ var modalStyles = (0, import_tailwind_variants23.tv)({
     ],
     bodyContent: "px-7 grow",
     footer: "px-7 pt-4 pb-6",
-    actions: "flex gap-4 justify-end"
+    actions: "flex gap-3 justify-end"
   },
   variants: {
     kind: {
@@ -10367,7 +10402,7 @@ var modalStyles = (0, import_tailwind_variants23.tv)({
       isResponsive: true,
       class: {
         overlay: "py-0 sm:py-7",
-        dialog: "w-dvw h-dvh mx-0 rounded-none sm:h-auto sm:w-full sm:rounded sm:mx-7"
+        dialog: "w-dvw h-dvh mx-0 rounded-none sm:h-auto sm:w-full sm:rounded-lg sm:mx-7"
       }
     },
     {
@@ -10376,7 +10411,7 @@ var modalStyles = (0, import_tailwind_variants23.tv)({
       isResponsive: false,
       class: {
         overlay: "py-0",
-        dialog: "h-auto w-full rounded mx-7"
+        dialog: "h-auto w-full rounded-lg mx-7"
       }
     },
     {
@@ -10460,7 +10495,10 @@ Modal.Title = ({ kind = "dialog", children, className, ...rest }) => {
   const { title } = modalStyles({ kind });
   return /* @__PURE__ */ import_react92.default.createElement(Typography, { htmlTag: "h2", variant: "subheading", color: "intense", className: title({ className }), ...rest }, children);
 };
-Modal.Subtitle = ({ children, ...rest }) => /* @__PURE__ */ import_react92.default.createElement(Typography, { variant: "default", color: "default", ...rest }, children);
+Modal.Subtitle = ({ children, className, ...rest }) => {
+  const { subtitle } = modalStyles();
+  return /* @__PURE__ */ import_react92.default.createElement(Typography, { variant: "default", color: "muted", className: subtitle({ className }), ...rest }, children);
+};
 Modal.TitleContainer = ({ children, className, ...rest }) => {
   const { titleContainer: titleContainer2 } = modalStyles();
   return /* @__PURE__ */ import_react92.default.createElement("div", { ...rest, className: titleContainer2({ className }) }, children);
@@ -10899,7 +10937,7 @@ Dropdown.Item = DropdownItem;
 var import_react99 = __toESM(require("react"));
 var import_tailwind_variants24 = require("tailwind-variants");
 var emptyStateClasses = (0, import_tailwind_variants24.tv)({
-  base: "Aquarium-EmptyState rounded flex bg-transparent border-default py-l6 max-h-[800px]",
+  base: "Aquarium-EmptyState rounded flex bg-transparent border-default py-l6 max-h-[800px] w-full",
   variants: {
     layout: {
       vertical: "flex-col justify-center items-center gap-7 text-center px-9",
@@ -11001,7 +11039,7 @@ var FilterTrigger = ({
           "px-4": !showClearButton
         })
       },
-      /* @__PURE__ */ import_react100.default.createElement("div", { className: "flex items-center gap-3 divide-x divide-grey-20" }, /* @__PURE__ */ import_react100.default.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ import_react100.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react100.default.createElement(InlineIcon2, { icon }), /* @__PURE__ */ import_react100.default.createElement(Typography2.Default, null, labelText)), badge && /* @__PURE__ */ import_react100.default.createElement(Typography2, { color: "primary-active", className: "flex items-center" }, /* @__PURE__ */ import_react100.default.createElement(Badge, { dense: true, value: badge }))), hasValue && /* @__PURE__ */ import_react100.default.createElement("div", { className: "pl-3" }, /* @__PURE__ */ import_react100.default.createElement(
+      /* @__PURE__ */ import_react100.default.createElement("div", { className: "flex items-center gap-3 divide-x divide-grey-20" }, /* @__PURE__ */ import_react100.default.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ import_react100.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react100.default.createElement(InlineIcon2, { icon }), /* @__PURE__ */ import_react100.default.createElement(Typography2.Default, null, labelText)), badge && /* @__PURE__ */ import_react100.default.createElement(Typography2, { color: "primary-default", className: "flex items-center" }, /* @__PURE__ */ import_react100.default.createElement(Badge, { dense: true, value: badge }))), hasValue && /* @__PURE__ */ import_react100.default.createElement("div", { className: "pl-3" }, /* @__PURE__ */ import_react100.default.createElement(
         Typography2.Default,
         {
           className: (0, import_clsx31.clsx)("truncate", {
@@ -11009,7 +11047,7 @@ var FilterTrigger = ({
             "max-w-[233px]": !isUsedInsideDateRangePicker
             // Set to 233px to keep the total width of the filter pill within approximately 360px.
           }),
-          color: error ? "danger-intense" : "primary-active"
+          color: error ? "danger-default" : "primary-default"
         },
         value,
         isUsedInsideDatePicker && /* @__PURE__ */ import_react100.default.createElement(DateDisplay, { state: ariaDatePickerState }),
@@ -12213,7 +12251,7 @@ Section2.Toggle = (props) => /* @__PURE__ */ import_react123.default.createEleme
     })
   }
 );
-Section2.Title = ({ children, ...rest }) => /* @__PURE__ */ import_react123.default.createElement(Typography2.Large, { ...rest, htmlTag: "h2", color: "intense", className: "flex gap-2 items-center" }, children);
+Section2.Title = ({ children, ...rest }) => /* @__PURE__ */ import_react123.default.createElement(Typography2.Large, { ...rest, htmlTag: "h2", color: "intense", className: "flex gap-3 items-center" }, children);
 Section2.Subtitle = ({ children, ...rest }) => /* @__PURE__ */ import_react123.default.createElement(Typography2.Default, { ...rest, color: "default" }, children);
 Section2.Actions = ({ children, className, ...rest }) => {
   const { actions: actions2 } = sectionStyles();
@@ -12231,15 +12269,44 @@ var SectionTabs = createTabsComponent(ModalTab, TabItem, "SectionTabs", (childre
 
 // src/molecules/SegmentedControl/SegmentedControl.tsx
 var import_react125 = __toESM(require("react"));
-var import_clsx39 = require("clsx");
+var import_tailwind_variants31 = require("tailwind-variants");
+var segmentedControlStyles = (0, import_tailwind_variants31.tv)({
+  slots: {
+    wrapper: [
+      "transition border-l border-grey-20 overflow-hidden hover:bg-primary-hover",
+      "first:border-l-0 first:rounded-l last:rounded-r",
+      "focus-within:border-l-transparent focus-within:relative focus-within:z-50 focus-within:ring-1 focus-within:ring-offset-0 focus-within:ring-primary-default"
+    ],
+    button: [
+      "typography-default",
+      "whitespace-nowrap px-4 py-[10px] bg-transparent focus-visible:outline-none",
+      "disabled:cursor-not-allowed disabled:text-inactive disabled:bg-muted"
+    ]
+  },
+  variants: {
+    selected: {
+      true: {
+        wrapper: "border-l-transparent relative z-40 ring-1 ring-offset-0 ring-primary-default bg-primary-default",
+        button: "text-primary-intense"
+      },
+      false: { button: "text-default" }
+    }
+  },
+  defaultVariants: {
+    selected: false
+  }
+});
+var segmentedControlGroupStyles = (0, import_tailwind_variants31.tv)({
+  base: "Aquarium-SegmentedControl flex border border-default rounded"
+});
 
 // src/molecules/Stepper/Stepper.tsx
 var import_react127 = __toESM(require("react"));
 
 // src/atoms/Stepper/Stepper.tsx
 var import_react126 = __toESM(require("react"));
-var import_tailwind_variants31 = require("tailwind-variants");
-var connectorStyles = (0, import_tailwind_variants31.tv)({
+var import_tailwind_variants32 = require("tailwind-variants");
+var connectorStyles = (0, import_tailwind_variants32.tv)({
   slots: {
     container: "absolute w-full -left-1/2",
     connector: "w-full"
@@ -12261,7 +12328,7 @@ var connectorStyles = (0, import_tailwind_variants31.tv)({
     }
   }
 });
-var stepStyles = (0, import_tailwind_variants31.tv)({
+var stepStyles = (0, import_tailwind_variants32.tv)({
   slots: {
     step: "flex flex-col items-center relative text-center",
     indicator: "Aquarium-Stepper-Indicator rounded-full flex justify-center items-center mx-2 mb-3"
@@ -12411,7 +12478,7 @@ SwitchGroup.Skeleton.displayName = "SwitchGroup.Skeleton";
 // src/molecules/Textarea/Textarea.tsx
 var import_react129 = __toESM(require("react"));
 var import_utils42 = require("@react-aria/utils");
-var import_clsx40 = require("clsx");
+var import_clsx39 = require("clsx");
 var import_lodash_es44 = require("lodash-es");
 var TextareaBase = import_react129.default.forwardRef(
   ({ readOnly = false, valid = true, ...props }, ref) => /* @__PURE__ */ import_react129.default.createElement(
@@ -12420,7 +12487,7 @@ var TextareaBase = import_react129.default.forwardRef(
       ref,
       ...props,
       readOnly,
-      className: (0, import_clsx40.clsx)("Aquarium-TextareaBase", getCommonInputStyles({ readOnly, valid }), props.className)
+      className: (0, import_clsx39.clsx)("Aquarium-TextareaBase", getCommonInputStyles({ readOnly, valid }), props.className)
     }
   )
 );
@@ -12473,13 +12540,13 @@ var import_react131 = __toESM(require("react"));
 
 // src/atoms/Timeline/Timeline.tsx
 var import_react130 = __toESM(require("react"));
-var import_clsx41 = require("clsx");
-var Timeline = ({ className, ...rest }) => /* @__PURE__ */ import_react130.default.createElement("div", { ...rest, className: (0, import_clsx41.clsx)("grid grid-cols-[16px_1fr] gap-x-4", className) });
-var Content2 = ({ className, ...rest }) => /* @__PURE__ */ import_react130.default.createElement("div", { ...rest, className: (0, import_clsx41.clsx)("pb-6", className) });
-var Separator = ({ className, ...rest }) => /* @__PURE__ */ import_react130.default.createElement("div", { ...rest, className: (0, import_clsx41.clsx)("flex items-center justify-center h-5 w-5", className) });
-var LineContainer = ({ className, ...rest }) => /* @__PURE__ */ import_react130.default.createElement("div", { ...rest, className: (0, import_clsx41.clsx)("flex justify-center py-1", className) });
-var Line = ({ className, ...rest }) => /* @__PURE__ */ import_react130.default.createElement("div", { ...rest, className: (0, import_clsx41.clsx)("w-1 bg-medium h-full justify-self-center", className) });
-var Dot = ({ className, ...rest }) => /* @__PURE__ */ import_react130.default.createElement("div", { ...rest, className: (0, import_clsx41.clsx)("bg-intense h-[6px] w-[6px] rounded", className) });
+var import_clsx40 = require("clsx");
+var Timeline = ({ className, ...rest }) => /* @__PURE__ */ import_react130.default.createElement("div", { ...rest, className: (0, import_clsx40.clsx)("grid grid-cols-[16px_1fr] gap-x-4", className) });
+var Content2 = ({ className, ...rest }) => /* @__PURE__ */ import_react130.default.createElement("div", { ...rest, className: (0, import_clsx40.clsx)("pb-6", className) });
+var Separator = ({ className, ...rest }) => /* @__PURE__ */ import_react130.default.createElement("div", { ...rest, className: (0, import_clsx40.clsx)("flex items-center justify-center h-5 w-5", className) });
+var LineContainer = ({ className, ...rest }) => /* @__PURE__ */ import_react130.default.createElement("div", { ...rest, className: (0, import_clsx40.clsx)("flex justify-center py-1", className) });
+var Line = ({ className, ...rest }) => /* @__PURE__ */ import_react130.default.createElement("div", { ...rest, className: (0, import_clsx40.clsx)("w-1 bg-medium h-full justify-self-center", className) });
+var Dot = ({ className, ...rest }) => /* @__PURE__ */ import_react130.default.createElement("div", { ...rest, className: (0, import_clsx40.clsx)("bg-intense h-[6px] w-[6px] rounded", className) });
 Separator.Dot = Dot;
 LineContainer.Line = Line;
 Timeline.Separator = Separator;
@@ -12518,7 +12585,7 @@ var import_react135 = __toESM(require("react"));
 var SelectItem = Select.Item;
 
 // src/utils/actions.tsx
-var renderAction = ({ kind = "primary", dense = false, action, type = "button", disabled }) => {
+var renderAction = ({ kind = "primary", dense = false, action, type = "button" }) => {
   return isLink(action) ? /* @__PURE__ */ import_react136.default.createElement(
     Link2.Button,
     {
@@ -12526,11 +12593,10 @@ var renderAction = ({ kind = "primary", dense = false, action, type = "button",
       kind,
       dense,
       ...(0, import_lodash_es45.omit)(action, "text"),
-      disabled,
-      className: disabled ? "pointer-events-none" : ""
+      className: action.disabled ? "pointer-events-none" : void 0
     },
     action.text
-  ) : /* @__PURE__ */ import_react136.default.createElement(Button2, { key: action.text, kind, dense, ...(0, import_lodash_es45.omit)(action, "text"), type, disabled }, action.text);
+  ) : /* @__PURE__ */ import_react136.default.createElement(Button2, { key: action.text, kind, dense, ...(0, import_lodash_es45.omit)(action, "text"), type }, action.text);
 };
 
 // src/molecules/Toast/Timer.tsx
@@ -12607,7 +12673,7 @@ var Typography = ({
   return /* @__PURE__ */ import_react141.default.createElement(
     HtmlElement,
     {
-      className: (0, import_clsx42.clsx)(
+      className: (0, import_clsx41.clsx)(
         typographies[variant],
         // eslint-disable-next-line better-tailwindcss/no-unregistered-classes
         `text-${resolvedColorName}`,
@@ -12649,9 +12715,9 @@ var alertTypes = {
     textColor: "success-default"
   }
 };
-var alertStyles = (0, import_tailwind_variants32.tv)({
+var alertStyles = (0, import_tailwind_variants33.tv)({
   slots: {
-    base: "px-4 py-3 rounded-lg grid grid-cols-[auto_1fr_auto] items-center gap-x-3 gap-y-2",
+    base: "px-4 rounded-lg grid grid-cols-[auto_1fr_auto] items-center gap-x-3 gap-y-2",
     title: "col-start-2",
     description: "col-start-2",
     actions: "flex gap-4 col-start-2",
@@ -12670,10 +12736,18 @@ var alertStyles = (0, import_tailwind_variants32.tv)({
       false: {
         icon: "self-start"
       }
+    },
+    hasAction: {
+      true: {
+        base: "pt-3 pb-2"
+      },
+      false: {
+        base: "py-3"
+      }
     }
   }
 });
-var bannerStyles2 = (0, import_tailwind_variants32.tv)({
+var bannerStyles2 = (0, import_tailwind_variants33.tv)({
   slots: {
     base: "relative flex px-[60px] justify-center",
     content: "flex flex-row flex-wrap gap-x-3 items-center justify-center py-4 text-center z-10",
@@ -12693,9 +12767,10 @@ var Alert = ({
   className,
   type,
   dense = false,
+  hasAction = false,
   ...rest
 }) => {
-  const { base: base2 } = alertStyles({ type, dense });
+  const { base: base2 } = alertStyles({ type, dense, hasAction });
   return /* @__PURE__ */ import_react142.default.createElement(AlertContext.Provider, { value: { type, dense } }, /* @__PURE__ */ import_react142.default.createElement("div", { ...rest, role: type === "error" || type === "warning" ? "alert" : "status", className: base2({ className }) }, children));
 };
 var AlertTitle = ({ children, className, ...rest }) => {