@aivenio/aquarium 6.4.0 → 6.6.0

package/dist/system.mjs

@@ -393,235 +393,225 @@ var data7 = {
 };
 var calendar_default = data7;
 
-// src/icons/caretDownFilled.js
-var data8 = {
-  "body": '<path fill="currentColor" d="M6.386 8.532a.5.5 0 01-.772 0l-3.27-3.964a.5.5 0 01.386-.818h6.54a.5.5 0 01.385.818l-3.27 3.964Z"/>',
-  "left": 0,
-  "top": 0,
-  "width": 12,
-  "height": 12
-};
-var caretDownFilled_default = data8;
-
 // src/icons/caretDown.js
-var data9 = {
+var data8 = {
   "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m5.5 8.25 5.5 5.5 5.5-5.5"/>',
   "left": 0,
   "top": 0,
   "width": 22,
   "height": 22
 };
-var caretDown_default = data9;
+var caretDown_default = data8;
 
-// src/icons/caretUpFilled.js
-var data10 = {
-  "body": '<path fill="currentColor" d="M5.614 3.468a.5.5 0 01.772 0l3.27 3.964a.5.5 0 01-.386.818H2.73a.5.5 0 01-.385-.818l3.27-3.964Z"/>',
+// src/icons/caretRight.js
+var data9 = {
+  "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m8.25 16.5 5.5-5.5-5.5-5.5"/>',
   "left": 0,
   "top": 0,
-  "width": 12,
-  "height": 12
+  "width": 22,
+  "height": 22
 };
-var caretUpFilled_default = data10;
+var caretRight_default = data9;
 
 // src/icons/caretUp.js
-var data11 = {
+var data10 = {
   "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16.5 13.75 11 8.25l-5.5 5.5"/>',
   "left": 0,
   "top": 0,
   "width": 22,
   "height": 22
 };
-var caretUp_default = data11;
+var caretUp_default = data10;
 
 // src/icons/chevronBackward.js
-var data12 = {
+var data11 = {
   "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 4v14m8-1.25-5.5-5.5 5.5-5.5"/>',
   "left": 0,
   "top": 0,
   "width": 22,
   "height": 22
 };
-var chevronBackward_default = data12;
+var chevronBackward_default = data11;
 
 // src/icons/chevronForward.js
-var data13 = {
+var data12 = {
   "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 4v14m-8-1.25 5.5-5.5L7 5.75"/>',
   "left": 0,
   "top": 0,
   "width": 22,
   "height": 22
 };
-var chevronForward_default = data13;
+var chevronForward_default = data12;
 
 // src/icons/chevronLeft.js
-var data14 = {
+var data13 = {
   "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.75 16.5 8.25 11l5.5-5.5"/>',
   "left": 0,
   "top": 0,
   "width": 22,
   "height": 22
 };
-var chevronLeft_default = data14;
+var chevronLeft_default = data13;
 
 // src/icons/chevronRight.js
-var data15 = {
+var data14 = {
   "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m8.25 16.5 5.5-5.5-5.5-5.5"/>',
   "left": 0,
   "top": 0,
   "width": 22,
   "height": 22
 };
-var chevronRight_default = data15;
+var chevronRight_default = data14;
 
 // src/icons/confirm.js
-var data16 = {
+var data15 = {
   "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20.167 10.162v.843a9.166 9.166 0 11-5.436-8.378m5.436 1.04L11 12.842l-2.75-2.75"/>',
   "left": 0,
   "top": 0,
   "width": 22,
   "height": 22
 };
-var confirm_default = data16;
+var confirm_default = data15;
 
 // src/icons/cross.js
-var data17 = {
+var data16 = {
   "body": '<path fill="currentColor" fill-rule="evenodd" d="m12.293 11 3.932-3.933a.885.885 0 00.275-.65.92.92 0 00-1.568-.651L11 9.707 7.067 5.766a.92.92 0 00-1.302 1.302L9.708 11l-3.932 3.932a.885.885 0 00-.275.651.92.92 0 001.567.651L11 12.292l3.932 3.933a.885.885 0 00.651.275.92.92 0 00.651-1.568L12.292 11Z" clip-rule="evenodd"/>',
   "left": 0,
   "top": 0,
   "width": 22,
   "height": 22
 };
-var cross_default = data17;
+var cross_default = data16;
 
 // src/icons/error.js
-var data18 = {
+var data17 = {
   "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11 7.333V11m0 3.667h.01M20.166 11a9.167 9.167 0 11-18.334 0 9.167 9.167 0 0118.334 0Z"/>',
   "left": 0,
   "top": 0,
   "width": 22,
   "height": 22
 };
-var error_default = data18;
+var error_default = data17;
 
 // src/icons/infoSign.js
-var data19 = {
+var data18 = {
   "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11 7.333V9m0 7v-4m9.167-1a9.167 9.167 0 11-18.334 0 9.167 9.167 0 0118.334 0Z"/>',
   "left": 0,
   "top": 0,
   "width": 22,
   "height": 22
 };
-var infoSign_default = data19;
+var infoSign_default = data18;
 
 // src/icons/loading.js
-var data20 = {
+var data19 = {
   "body": '<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="3" transform="translate(1 1)"><circle cx="18" cy="18" r="18" stroke-opacity=".5"/><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" dur="1s" from="0 18 18" repeatCount="indefinite" to="360 18 18" type="rotate"/></path></g>',
   "left": 0,
   "top": 0,
   "width": 38,
   "height": 38
 };
-var loading_default = data20;
+var loading_default = data19;
 
 // src/icons/lock.js
-var data21 = {
+var data20 = {
   "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.583 9.167V7.333a4.583 4.583 0 10-9.166 0v1.834M11 13.292v1.833M8.067 19.25h5.866c1.54 0 2.31 0 2.899-.3a2.75 2.75 0 001.202-1.201c.3-.589.3-1.359.3-2.899v-1.283c0-1.54 0-2.31-.3-2.899a2.75 2.75 0 00-1.202-1.202c-.588-.3-1.359-.3-2.899-.3H8.067c-1.54 0-2.31 0-2.899.3a2.75 2.75 0 00-1.202 1.202c-.3.588-.3 1.359-.3 2.899v1.283c0 1.54 0 2.31.3 2.899a2.75 2.75 0 001.202 1.201c.588.3 1.359.3 2.899.3Z"/>',
   "left": 0,
   "top": 0,
   "width": 22,
   "height": 22
 };
-var lock_default = data21;
+var lock_default = data20;
 
 // src/icons/minus.js
-var data22 = {
+var data21 = {
   "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.583 11h12.834"/>',
   "left": 0,
   "top": 0,
   "width": 22,
   "height": 22
 };
-var minus_default = data22;
+var minus_default = data21;
 
 // src/icons/more.js
-var data23 = {
+var data22 = {
   "body": '<g fill="none"><path fill="currentColor" d="M11 12a1 1 0 100-2 1 1 0 000 2Zm8 0a1 1 0 100-2 1 1 0 000 2ZM3 12a1 1 0 100-2 1 1 0 000 2Z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M11 12a1 1 0 100-2 1 1 0 000 2Zm8 0a1 1 0 100-2 1 1 0 000 2ZM3 12a1 1 0 100-2 1 1 0 000 2Z"/></g>',
   "left": 0,
   "top": 0,
   "width": 22,
   "height": 22
 };
-var more_default = data23;
+var more_default = data22;
 
 // src/icons/questionMark.js
-var data24 = {
+var data23 = {
   "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.332 8.25a2.75 2.75 0 015.345.917c0 1.833-2.75 2.75-2.75 2.75M11 16.5s-.004-1.11 0-1.5m9.167-4a9.167 9.167 0 11-18.334 0 9.167 9.167 0 0118.334 0Z"/>',
   "left": 0,
   "top": 0,
   "width": 22,
   "height": 22
 };
-var questionMark_default = data24;
+var questionMark_default = data23;
 
 // src/icons/slash.js
-var data25 = {
+var data24 = {
   "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m6.417 20.167 9.166-18.334"/>',
   "left": 0,
   "top": 0,
   "width": 22,
   "height": 22
 };
-var slash_default = data25;
+var slash_default = data24;
 
 // src/icons/smallCross.js
-var data26 = {
+var data25 = {
   "body": '<path fill="currentColor" fill-rule="evenodd" d="m12.293 11 3.932-3.933a.885.885 0 00.275-.65.92.92 0 00-1.568-.651L11 9.707 7.067 5.766a.92.92 0 00-1.302 1.302L9.708 11l-3.932 3.932a.885.885 0 00-.275.651.92.92 0 001.567.651L11 12.292l3.932 3.933a.885.885 0 00.651.275.92.92 0 00.651-1.568L12.292 11Z" clip-rule="evenodd"/>',
   "left": 0,
   "top": 0,
   "width": 22,
   "height": 22
 };
-var smallCross_default = data26;
+var smallCross_default = data25;
 
 // src/icons/tickCircle.js
-var data27 = {
+var data26 = {
   "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m6.875 11 2.75 2.75 5.5-5.5M20.167 11a9.167 9.167 0 11-18.334 0 9.167 9.167 0 0118.334 0Z"/>',
   "left": 0,
   "top": 0,
   "width": 22,
   "height": 22
 };
-var tickCircle_default = data27;
+var tickCircle_default = data26;
 
 // src/icons/time.js
-var data28 = {
+var data27 = {
   "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11 5.5V11l3.667 1.833m5.5-1.833a9.167 9.167 0 11-18.334 0 9.167 9.167 0 0118.334 0Z"/>',
   "left": 0,
   "top": 0,
   "width": 22,
   "height": 22
 };
-var time_default = data28;
+var time_default = data27;
 
 // src/icons/upload.js
-var data29 = {
+var data28 = {
   "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.25 13.75v1.1c0 1.54 0 2.31-.3 2.899a2.751 2.751 0 01-1.201 1.201c-.589.3-1.359.3-2.899.3h-7.7c-1.54 0-2.31 0-2.898-.3a2.75 2.75 0 01-1.202-1.2c-.3-.589-.3-1.359-.3-2.899v-1.1m12.833-6.417L11 2.75m0 0L6.417 7.333M11 2.75v11"/>',
   "left": 0,
   "top": 0,
   "width": 22,
   "height": 22
 };
-var upload_default = data29;
+var upload_default = data28;
 
 // src/icons/warningSign.js
-var data30 = {
+var data29 = {
   "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11 8.25v3.667M11 16l.009-1.5M9.73 3.567 2.191 16.59c-.418.723-.627 1.084-.596 1.38a.917.917 0 00.372.646c.241.176.659.176 1.493.176h15.08c.834 0 1.251 0 1.492-.176a.917.917 0 00.373-.646c.03-.296-.178-.657-.596-1.38l-7.54-13.023c-.417-.72-.625-1.08-.897-1.2a.917.917 0 00-.745 0c-.272.12-.48.48-.897 1.2Z"/>',
   "left": 0,
   "top": 0,
   "width": 22,
   "height": 22
 };
-var warningSign_default = data30;
+var warningSign_default = data29;
 
 // src/utils/useMeasure.ts
 import React3 from "react";
@@ -1813,7 +1803,7 @@ var tokens_default = {
     }
   },
   code: {
-    background: "rgba(250,250,250,1)",
+    background: "rgba(255,255,255,1)",
     text: "rgba(45,46,48,1)",
     variable: "rgba(91,30,103,1)",
     keyword: "rgba(202, 33, 101, 1)",
@@ -2281,7 +2271,7 @@ import React6 from "react";
 import { useFocusWithin } from "@react-aria/interactions";
 import { OverlayContainer, useOverlayPosition } from "@react-aria/overlays";
 import { useTooltip, useTooltipTrigger } from "@react-aria/tooltip";
-import { mergeProps } from "@react-aria/utils";
+import { isFocusable, mergeProps } from "@react-aria/utils";
 
 // src/molecules/Tooltip/useTooltipTriggerState.ts
 import { useEffect as useEffect2, useMemo, useRef } from "react";
@@ -2417,6 +2407,14 @@ var Tooltip = ({ delay = 200, ...props }) => {
     shouldFlip,
     offset: ARROW_OFFSET
   });
+  const [containsFocusable, setContainsFocusable] = React6.useState(false);
+  React6.useLayoutEffect(() => {
+    if (triggerRef.current) {
+      const elements = Array.from(triggerRef.current.querySelectorAll("*"));
+      const hasFocusable = elements.some((el) => isFocusable(el));
+      setContainsFocusable(hasFocusable);
+    }
+  });
   const { focusWithinProps } = useFocusWithin({
     onFocusWithinChange: (isFocusWithin) => isFocusWithin ? state.open() : state.close()
   });
@@ -2445,6 +2443,7 @@ var Tooltip = ({ delay = 200, ...props }) => {
     {
       className: display,
       ...triggerProps,
+      tabIndex: containsFocusable ? -1 : triggerProps.tabIndex,
       onFocus: (e) => {
         triggerProps.onFocus?.(e);
         focusWithinProps.onFocus?.(e);
@@ -6081,15 +6080,7 @@ Modal.TitleContainer = ({ children, className, ...rest }) => {
   const { titleContainer: titleContainer2 } = modalStyles();
   return /* @__PURE__ */ React59.createElement("div", { ...rest, className: titleContainer2({ className }) }, children);
 };
-var ModalBody = ({
-  children,
-  className,
-  noFooter = false,
-  maxHeight,
-  style,
-  size,
-  ...rest
-}) => {
+var ModalBody = ({ children, className, contentClassName, noFooter = false, maxHeight, style, size, ...rest }) => {
   const { body, bodyContent } = modalStyles({ size });
   const { containerRef, topSentinelRef, bottomSentinelRef, showTopFade, showBottomFade } = useScrollFade();
   return /* @__PURE__ */ React59.createElement(
@@ -6101,7 +6092,7 @@ var ModalBody = ({
       style: { maxHeight, ...style }
     },
     /* @__PURE__ */ React59.createElement("div", { ref: topSentinelRef, "aria-hidden": "true", className: "h-1px" }),
-    /* @__PURE__ */ React59.createElement("div", { className: bodyContent({ noFooter }) }, children),
+    /* @__PURE__ */ React59.createElement("div", { className: bodyContent({ noFooter, className: contentClassName }) }, children),
     /* @__PURE__ */ React59.createElement("div", { ref: bottomSentinelRef, "aria-hidden": "true", className: "h-1px -mt-1px" })
   );
 };
@@ -8076,11 +8067,6 @@ var useDataListContext = () => {
 // src/molecules/DataList/DataListGroup.tsx
 import React80 from "react";
 import { isFunction as isFunction2, noop } from "lodash-es";
-
-// src/molecules/DataList/utils.ts
-var flattenRows = (rows) => areRowsGrouped(rows) ? Object.values(rows).flatMap(flattenRows) : rows;
-
-// src/molecules/DataList/DataListGroup.tsx
 var GAP = 8;
 var INDENTATION = 28;
 var sortGroupKeys = (groupKeys) => [...groupKeys].sort((a) => a === "undefined" ? -1 : 1);
@@ -8111,6 +8097,7 @@ var DataListGroup = ({
     rows,
     selectable,
     selectedRows,
+    statsByNode,
     getOnSelectionChangeForId,
     selectionDisabled = () => false,
     getRowSelectionLabel = getDefaultRowSelectionLabel,
@@ -8139,8 +8126,8 @@ var DataListGroup = ({
         items: groups,
         renderItem: (row, index) => {
           const isSelected = selectedRows?.includes(row.id) ?? false;
-          const isDisabled = disabled?.(row, index, rows);
-          const isSelectionDisabled = selectionDisabled(row, index, rows);
+          const isDisabled = disabled?.(row, index, groups);
+          const isSelectionDisabled = selectionDisabled(row, index, groups);
           const isLastRow = isLastGroup && index === groups.length - 1;
           return /* @__PURE__ */ React80.createElement(
             DataListRow,
@@ -8150,7 +8137,7 @@ var DataListGroup = ({
               row,
               index,
               isLast: isLastRow,
-              rows,
+              rows: groups,
               active: selectable && isSelected,
               menu: /* @__PURE__ */ React80.createElement(
                 DataListRowMenu,
@@ -8179,7 +8166,7 @@ var DataListGroup = ({
                   RadioButton,
                   {
                     value: row2.id.toString(),
-                    "aria-label": getRowSelectionLabel(row2, index2, isSelected, rows),
+                    "aria-label": getRowSelectionLabel(row2, index2, isSelected, groups),
                     onChange: noop,
                     checked: isSelected,
                     disabled: isDisabled || isSelectionDisabled
@@ -8187,7 +8174,7 @@ var DataListGroup = ({
                 ), isMultiSelectionMode && /* @__PURE__ */ React80.createElement(
                   Checkbox,
                   {
-                    "aria-label": getRowSelectionLabel(row2, index2, isSelected, rows),
+                    "aria-label": getRowSelectionLabel(row2, index2, isSelected, groups),
                     onChange: getOnSelectionChangeForId(row2.id),
                     checked: isSelected,
                     disabled: isDisabled || isSelectionDisabled
@@ -8224,10 +8211,12 @@ var DataListGroup = ({
           );
         }
         const openPanelId = expandedGroupIds ? expandedGroupIds.find((id) => id === key) ?? null : void 0;
-        const nestedRowIds = flattenRows(group).map((row) => row.id);
-        const nestedSelectedIds = selectedRows?.filter((id) => nestedRowIds.includes(id)) ?? [];
-        const allSelected = nestedRowIds.length === nestedSelectedIds.length;
-        const isChecked = nestedSelectedIds.length > 0;
+        const { selectableIds, allSelected, isChecked, isDisabled } = statsByNode.get(group) ?? {
+          selectableIds: [],
+          allSelected: false,
+          isChecked: false,
+          isDisabled: true
+        };
         const isActiveRow = !!openPanelId || selectable && isChecked;
         const isLastRow = isLastGroup && index === groupKeys.length - 1 && !openPanelId;
         return /* @__PURE__ */ React80.createElement(Accordion, { key, openPanelId }, hasCustomRowForGroup && /* @__PURE__ */ React80.createElement(DataList.Row, { active: isActiveRow, noDivider: isLastRow }, selectable && /* @__PURE__ */ React80.createElement(DataList.Cell, null, isMultiSelectionMode && /* @__PURE__ */ React80.createElement(
@@ -8236,8 +8225,8 @@ var DataListGroup = ({
             "aria-label": getGroupCheckboxLabel(key, group, index, isChecked, rows),
             checked: isChecked,
             indeterminate: isChecked && !allSelected,
-            disabled: group.length === 0,
-            onChange: getOnSelectionChangeForId(nestedRowIds)
+            disabled: isDisabled,
+            onChange: getOnSelectionChangeForId(selectableIds)
           }
         )), /* @__PURE__ */ React80.createElement(
           List,
@@ -8271,8 +8260,8 @@ var DataListGroup = ({
             "aria-label": getGroupCheckboxLabel(key, group, index, isChecked, rows),
             checked: isChecked,
             indeterminate: isChecked && !allSelected,
-            disabled: group.length === 0,
-            onChange: getOnSelectionChangeForId(nestedRowIds)
+            disabled: isDisabled,
+            onChange: getOnSelectionChangeForId(selectableIds)
           }
         )), /* @__PURE__ */ React80.createElement(
           DataList.Cell,
@@ -8410,6 +8399,7 @@ var DataList2 = ({
   const [sort, updateSort] = useTableSort({ ...initialSortState, onSortChanged });
   const sortedRows = isArray2(rows) ? sortRowsBy(rows, sort) : [];
   const groups = areRowsGrouped(rows) ? rows : group ? isFunction3(group) ? group(sortedRows) : groupBy2(sortedRows, group) : void 0;
+  const rootNode = groups ?? sortedRows;
   const isCollapsible = isFunction3(rowDetails);
   const templateColumns = compact([
     selectable ? "fit-content(28px)" : void 0,
@@ -8432,26 +8422,37 @@ var DataList2 = ({
     }
   };
   const isMultiSelectionMode = selectable === "multiple" || selectable === "multiple-not-all";
-  const allRows = flattenRows(rows);
-  const totalSelected = selected?.length ?? 0;
-  const allEnabledRowIds = compact(
-    allRows.map(
-      (row, index) => disabled?.(row, index, sortedRows) || selectionDisabled(row, index, sortedRows) ? void 0 : row.id
-    )
-  );
-  const allRowsSelected = totalSelected >= allEnabledRowIds.length;
+  const selectedIds = new Set(selected);
+  const buildSelectionStats = (root) => {
+    const statsByNode2 = /* @__PURE__ */ new Map();
+    const recordStats = (node) => {
+      const selectableIds2 = areRowsGrouped(node) ? Object.values(node).flatMap((child) => recordStats(child).selectableIds) : node.filter((row, i) => !disabled?.(row, i, node) && !selectionDisabled(row, i, node)).map((row) => row.id);
+      const selectedSelectableCount = selectableIds2.filter((id) => selectedIds.has(id)).length;
+      const stats = {
+        selectableIds: selectableIds2,
+        selectedSelectableCount,
+        allSelected: selectableIds2.length > 0 && selectedSelectableCount === selectableIds2.length,
+        isChecked: selectedSelectableCount > 0,
+        isDisabled: selectableIds2.length === 0
+      };
+      statsByNode2.set(node, stats);
+      return stats;
+    };
+    return { statsByNode: statsByNode2, rootStats: recordStats(root) };
+  };
+  const { statsByNode, rootStats } = buildSelectionStats(rootNode);
+  const { selectableIds, isChecked, allSelected, isDisabled } = rootStats;
   const componentContent = /* @__PURE__ */ React83.createElement(Template, { className: "Aquarium-DataList", columns: templateColumns, role: "table", "aria-label": ariaLabel }, !hideHeader && /* @__PURE__ */ React83.createElement(React83.Fragment, null, /* @__PURE__ */ React83.createElement(DataList.Row, { header: true }, selectable && /* @__PURE__ */ React83.createElement(DataList.HeadCell, { align: "left", sticky }, selectable === "multiple" && /* @__PURE__ */ React83.createElement(
     Checkbox,
     {
       "aria-label": "Select all rows",
-      indeterminate: totalSelected > 0 && totalSelected < allRows.length,
-      checked: totalSelected > 0,
+      indeterminate: isChecked && !allSelected,
+      checked: isChecked,
+      disabled: isDisabled,
       onChange: () => {
-        if (!allRowsSelected) {
-          setSelected(allEnabledRowIds);
-        } else {
-          setSelected([]);
-        }
+        const enabledSet = new Set(selectableIds);
+        const keptSelection = (selected ?? []).filter((id) => !enabledSet.has(id));
+        setSelected(allSelected ? keptSelection : [...keptSelection, ...selectableIds]);
       }
     }
   )), isCollapsible && /* @__PURE__ */ React83.createElement(DataList.HeadCell, { align: "left", sticky }), columns.map((column) => {
@@ -8496,6 +8497,7 @@ var DataList2 = ({
       getGroupCheckboxLabel,
       rows,
       groups,
+      statsByNode,
       groupKey: void 0,
       level: 0,
       isLastGroup: true
@@ -8510,7 +8512,7 @@ var DataList2 = ({
         const details = rowDetails?.(row, index, sortedRows);
         const isSelected = selected?.includes(row.id) ?? false;
         const isSelectionDisabled = selectionDisabled(row, index, sortedRows);
-        const isDisabled = disabled?.(row, index, sortedRows);
+        const isDisabled2 = disabled?.(row, index, sortedRows);
         const openPanelId = expandedGroupIds.find((id) => id === row.id.toString()) || null;
         const isLastRow = index === sortedRows.length - 1;
         const content = /* @__PURE__ */ React83.createElement(
@@ -8533,7 +8535,7 @@ var DataList2 = ({
                 onAction,
                 onMenuOpenChange,
                 menuAriaLabel,
-                disabled: isDisabled
+                disabled: isDisabled2
               }
             ),
             disabled,
@@ -8550,7 +8552,7 @@ var DataList2 = ({
                   "aria-label": getRowSelectionLabel(row2, index2, isSelected, sortedRows),
                   onChange: noop2,
                   checked: isSelected,
-                  disabled: isDisabled || isSelectionDisabled
+                  disabled: isDisabled2 || isSelectionDisabled
                 }
               ), isMultiSelectionMode && /* @__PURE__ */ React83.createElement(
                 Checkbox,
@@ -8558,7 +8560,7 @@ var DataList2 = ({
                   "aria-label": getRowSelectionLabel(row2, index2, isSelected, sortedRows),
                   onChange: getOnSelectionChangeForId(row2.id),
                   checked: isSelected,
-                  disabled: isDisabled || isSelectionDisabled
+                  disabled: isDisabled2 || isSelectionDisabled
                 }
               )), rowDetails !== void 0 && /* @__PURE__ */ React83.createElement(DataList.Cell, null, details && /* @__PURE__ */ React83.createElement(Accordion.Toggle, { panelId: row2.id.toString(), onChange: onGroupToggled })));
             },
@@ -11766,7 +11768,7 @@ var Dialog2 = (props) => {
   if (!state.isOpen) {
     return null;
   }
-  return /* @__PURE__ */ React96.createElement(Overlay, null, /* @__PURE__ */ React96.createElement(Modal, { className: "Aquarium-Dialog", open: true }, /* @__PURE__ */ React96.createElement(Modal.BackDrop, { ...underlayProps }), /* @__PURE__ */ React96.createElement(Modal.Dialog, { ref, size: "sm", isResponsive: false, ...modalProps }, /* @__PURE__ */ React96.createElement(DialogWrapper, { ...props }))));
+  return /* @__PURE__ */ React96.createElement(Overlay, null, /* @__PURE__ */ React96.createElement(Modal, { className: "Aquarium-Dialog", open: true }, /* @__PURE__ */ React96.createElement(Modal.BackDrop, { ...underlayProps }), /* @__PURE__ */ React96.createElement(Modal.Dialog, { ref, size: "sm", isResponsive: false, className: "sm:max-w-[520px]", ...modalProps }, /* @__PURE__ */ React96.createElement(DialogWrapper, { ...props }))));
 };
 var DialogWrapper = ({
   title,
@@ -11786,7 +11788,7 @@ var DialogWrapper = ({
     },
     ref
   );
-  return /* @__PURE__ */ React96.createElement("div", { ref, ...dialogProps, className: "outline-none" }, /* @__PURE__ */ React96.createElement(Modal.Header, { className: "icon-stroke-2" }, /* @__PURE__ */ React96.createElement(Icon, { icon: DIALOG_ICONS_AND_COLORS[type].icon, color: DIALOG_ICONS_AND_COLORS[type].color, fontSize: 20 }), /* @__PURE__ */ React96.createElement(Modal.Title, { id: labelledBy, variant: "large", color: DIALOG_ICONS_AND_COLORS[type].color }, title)), /* @__PURE__ */ React96.createElement(Modal.Body, { id: describedBy }, /* @__PURE__ */ React96.createElement(Typography2.Default, null, children)), /* @__PURE__ */ React96.createElement(Modal.Footer, null, /* @__PURE__ */ React96.createElement(Modal.Actions, { className: "gap-4" }, secondaryAction && /* @__PURE__ */ React96.createElement(Button2.Ghost, { key: secondaryAction.text, ...omit10(secondaryAction, "text") }, secondaryAction.text), /* @__PURE__ */ React96.createElement(Button2.Secondary, { key: primaryAction.text, ...omit10(primaryAction, "text") }, primaryAction.text))));
+  return /* @__PURE__ */ React96.createElement("div", { ref, ...dialogProps, className: "outline-none" }, /* @__PURE__ */ React96.createElement(Modal.Header, { className: "icon-stroke-2 px-6 pr-6" }, /* @__PURE__ */ React96.createElement(Icon, { icon: DIALOG_ICONS_AND_COLORS[type].icon, color: DIALOG_ICONS_AND_COLORS[type].color, fontSize: 20 }), /* @__PURE__ */ React96.createElement(Modal.Title, { id: labelledBy, variant: "large", color: "default" }, title)), /* @__PURE__ */ React96.createElement(Modal.Body, { id: describedBy, contentClassName: "px-6" }, /* @__PURE__ */ React96.createElement(Typography2.Default, null, children)), /* @__PURE__ */ React96.createElement(Modal.Footer, { className: "px-6" }, /* @__PURE__ */ React96.createElement(Modal.Actions, { className: "gap-4" }, secondaryAction && /* @__PURE__ */ React96.createElement(Button2.Ghost, { key: secondaryAction.text, ...omit10(secondaryAction, "text") }, secondaryAction.text), /* @__PURE__ */ React96.createElement(Button2.Secondary, { key: primaryAction.text, ...omit10(primaryAction, "text") }, primaryAction.text))));
 };
 
 // src/molecules/Drawer/Drawer.tsx
@@ -13204,17 +13206,18 @@ var navigationClasses = tv28({
   slots: {
     nav: "bg-body h-full border-r border-muted",
     list: "flex flex-col h-full",
-    header: "px-6 py-5",
+    header: "px-6 py-4",
     headerTitle: "uppercase text-muted typography-small",
     headerSubtitle: "text-intense",
     footer: "px-6 py-5 mt-auto",
-    sectionContainer: "py-5",
+    sectionContainer: "py-4",
     sectionTitle: "py-2 px-6 text-inactive uppercase cursor-default typography-small",
     sectionList: "flex flex-col",
     divider: "border-t border-muted",
     itemContainer: "",
     itemAnchor: "py-3 px-6 hover:bg-medium cursor-pointer flex gap-4 items-center typography-default focusable",
-    submenuContainer: "",
+    // `[&+&]:pt-0` prevents doubled spacing when two submenu containers are adjacent (flex items don't margin-collapse).
+    submenuContainer: "py-3 [&+&]:pt-0",
     submenuAnchor: "py-3 pr-6 pl-3 hover:bg-medium cursor-pointer typography-default focusable flex items-center w-full",
     submenuList: "flex flex-col",
     submenuItem: "pl-[56px]"
@@ -13299,13 +13302,22 @@ var Item5 = ({
   showNotification = false,
   ...rest
 }) => /* @__PURE__ */ React113.createElement(Navigation.Item, { ...rest }, icon && showNotification && /* @__PURE__ */ React113.createElement(Badge.Notification, null, /* @__PURE__ */ React113.createElement(InlineIcon, { icon, width: "20px", height: "20px" })), icon && !showNotification && /* @__PURE__ */ React113.createElement(InlineIcon, { icon, width: "20px", height: "20px" }), children);
+var DisclosureCaret = ({ open }) => /* @__PURE__ */ React113.createElement(
+  InlineIcon,
+  {
+    icon: caretRight_default,
+    width: "12px",
+    height: "12px",
+    className: clsx35("mr-1 transition-transform duration-200 ease-in-out", open ? "rotate-90" : "rotate-0")
+  }
+);
 var Submenu2 = ({ children, title, icon, defaultOpen = false }) => {
   const [open, setOpen] = React113.useState(defaultOpen);
   const id = uniqueId2();
   return /* @__PURE__ */ React113.createElement(
     Navigation.Submenu,
     {
-      title: /* @__PURE__ */ React113.createElement(React113.Fragment, null, /* @__PURE__ */ React113.createElement(InlineIcon, { icon: open ? caretUpFilled_default : caretDownFilled_default, width: "12px", height: "12px", className: "mr-1" }), /* @__PURE__ */ React113.createElement(Box.Flex, { paddingX: "1", gap: "4" }, icon && /* @__PURE__ */ React113.createElement(InlineIcon, { icon, width: "20px", height: "20px" }), title)),
+      title: /* @__PURE__ */ React113.createElement(React113.Fragment, null, /* @__PURE__ */ React113.createElement(DisclosureCaret, { open }), /* @__PURE__ */ React113.createElement(Box.Flex, { paddingX: "1", gap: "4" }, icon && /* @__PURE__ */ React113.createElement(InlineIcon, { icon, width: "20px", height: "20px" }), title)),
       "aria-expanded": open,
       id,
       onClick: (e) => {
@@ -14359,11 +14371,11 @@ var useSortState = (initialSortState) => React136.useState(initialSortState);
 
 // src/utils/table/useTableSelect.ts
 import React137 from "react";
-var useTableSelect = (data31, { key }) => {
+var useTableSelect = (data30, { key }) => {
   const [selected, setSelected] = React137.useState([]);
-  const allSelected = selected.length === data31.length;
+  const allSelected = selected.length === data30.length;
   const isSelected = (dot) => selected.includes(dot[key]);
-  const selectAll = () => setSelected(data31.map((dot) => dot[key]));
+  const selectAll = () => setSelected(data30.map((dot) => dot[key]));
   const selectOnlyOne = (dot) => setSelected([dot[key]]);
   const unselectAll = () => setSelected([]);
   const toggle = (dot) => {

package/dist/tokens.json

@@ -187,7 +187,7 @@
     }
   },
   "code": {
-    "background": "rgba(250,250,250,1)",
+    "background": "rgba(255,255,255,1)",
     "text": "rgba(45,46,48,1)",
     "variable": "rgba(91,30,103,1)",
     "keyword": "rgba(202, 33, 101, 1)",