@aivenio/aquarium 2.1.2 → 2.3.0

package/dist/system.mjs

@@ -4260,13 +4260,13 @@ __export(molecules_exports, {
   InlineIcon: () => InlineIcon,
   Input: () => Input2,
   InputBase: () => InputBase,
+  ItemList: () => ItemList,
   LineClamp: () => LineClamp2,
   Link: () => Link2,
   List: () => List,
   ListItem: () => ListItem,
   Modal: () => Modal2,
   ModalTab: () => ModalTab,
-  ModalTabContainer: () => ModalTabContainer,
   ModalTabs: () => ModalTabs,
   MultiInput: () => MultiInput,
   MultiInputBase: () => MultiInputBase,
@@ -4325,13 +4325,16 @@ __export(molecules_exports, {
   asPopoverButton: () => asPopoverButton,
   asTabItem: () => asTabItem,
   cellProps: () => cellProps,
+  columnHasSort: () => columnHasSort,
   columnIsFieldColumn: () => columnIsFieldColumn,
   createTabsComponent: () => createTabsComponent,
   isOnSortChangedDirection: () => isOnSortChangedDirection,
+  sortByColumn: () => sortByColumn,
   toSortDirection: () => toSortDirection,
   usePagination: () => usePagination,
   usePopoverContext: () => usePopoverContext,
   useScrollTarget: () => useScrollTarget,
+  useSortState: () => useSortState,
   useStaticInfiniteList: () => useStaticInfiniteList,
   useTableSelect: () => useTableSelect,
   useTableSort: () => useTableSort,
@@ -4350,7 +4353,6 @@ import {
 } from "@iconify/react";
 
 // src/utils/tailwind.ts
-import { composeRenderProps } from "react-aria-components";
 import originalClassNames from "classnames";
 function cleanClassNames(classNames13) {
   const tokens = classNames13.split(/\s+/);
@@ -4519,7 +4521,7 @@ var ActionItem = React2.forwardRef(
     return /* @__PURE__ */ React2.createElement("li", __spreadValues({
       ref,
       role: "button",
-      onClick: () => !props.disabled && (onClick == null ? void 0 : onClick()),
+      onClick: () => !props.disabled && onClick(),
       className: classNames(className, "flex items-center gap-x-3 typography-small", {
         "p-3": !dense,
         "px-3 py-2": dense,
@@ -4839,7 +4841,7 @@ function useMeasure() {
       return;
     }
     const observer = new window.ResizeObserver(([entry]) => {
-      if (entry == null ? void 0 : entry.contentRect) {
+      if (entry.contentRect) {
         setRect({
           width: entry.contentRect.width,
           height: entry.contentRect.height
@@ -4863,7 +4865,7 @@ import isUndefined5 from "lodash/isUndefined";
 import React4 from "react";
 var Element = (_a) => {
   var _b = _a, { component } = _b, rest = __objRest(_b, ["component"]);
-  const Component = component || "div";
+  const Component = component != null ? component : "div";
   return React4.createElement(Component, rest);
 };
 
@@ -7396,7 +7398,7 @@ var toToast = (_a) => {
     id: id || crypto.randomUUID(),
     variant: variant || "default",
     position: position || "top",
-    duration: duration || (variant === "danger" ? Infinity : 5e3)
+    duration: duration != null ? duration : variant === "danger" ? Infinity : 5e3
   });
 };
 var reducer = (state, action) => {
@@ -7461,7 +7463,6 @@ var ToastConsumer = () => {
     dispatch({ type: 1 /* Dismiss */, toastId });
   };
   return /* @__PURE__ */ React14.createElement("div", null, positions.map((position) => {
-    var _a;
     return /* @__PURE__ */ React14.createElement(Spacing, {
       gap: "3",
       key: position,
@@ -7476,7 +7477,7 @@ var ToastConsumer = () => {
         transform: isCentered(position) ? "translateX(-50%)" : void 0,
         zIndex: 9e3
       }
-    }, /* @__PURE__ */ React14.createElement(Transition, null, (_a = toastsByPosition[position]) == null ? void 0 : _a.map((toast) => /* @__PURE__ */ React14.createElement(ToastComponent, {
+    }, /* @__PURE__ */ React14.createElement(Transition, null, toastsByPosition[position].map((toast) => /* @__PURE__ */ React14.createElement(ToastComponent, {
       key: toast.id,
       toast,
       onDismiss
@@ -8017,12 +8018,15 @@ var AccordionUnanimatedPanel = ({ children, panelId }) => {
 var AccordionSummary = (_a) => {
   var _b = _a, { title, description, toggle, panelId } = _b, rest = __objRest(_b, ["title", "description", "toggle", "panelId"]);
   const id = usePanelContext(panelId);
-  return /* @__PURE__ */ React20.createElement(Box.Flex, __spreadValues({
-    justifyContent: "space-between",
+  return /* @__PURE__ */ React20.createElement(Box.Flex, __spreadProps(__spreadValues({
     padding: "4",
     id: `${id}-summary`
-  }, rest), /* @__PURE__ */ React20.createElement(Typography2, null, title), /* @__PURE__ */ React20.createElement(Typography2.Small, {
-    color: "muted"
+  }, rest), {
+    alignItems: "center",
+    colGap: "4"
+  }), /* @__PURE__ */ React20.createElement(Typography2, null, title), /* @__PURE__ */ React20.createElement(Typography2.Small, {
+    color: "muted",
+    className: "grow"
   }, description), toggle);
 };
 var AccordionContainer = (_a) => {
@@ -8256,7 +8260,7 @@ Banner.IllustrationRight = IllustrationRight;
 Banner.IllustrationRight.displayName = "Alert.Banner.IllustrationRight";
 
 // src/utils/link.ts
-var isLink = (action) => action.href !== void 0;
+var isLink = (action) => "href" in action;
 
 // src/molecules/Alert/Alert.tsx
 var renderActions = (action, dense = false) => action && /* @__PURE__ */ React22.createElement(Alert.Actions, null, !isLink(action) && /* @__PURE__ */ React22.createElement(Button.Ghost, __spreadValues({
@@ -8741,8 +8745,8 @@ var Chip2 = (_a) => {
     role: "button",
     "aria-hidden": false,
     icon: import_cross4.default,
-    className: tw({ "cursor-pointer": onClose !== void 0 }),
-    onClick: () => onClose == null ? void 0 : onClose()
+    className: tw({ "cursor-pointer": true }),
+    onClick: () => onClose()
   }), locked && /* @__PURE__ */ React30.createElement(InlineIcon, {
     icon: import_lock2.default
   }));
@@ -9104,7 +9108,7 @@ var CardGroup = ({
   const [checked, setChecked] = React38.useState(_checked != null ? _checked : defaultChecked);
   const handleChange = (e) => {
     setChecked(e.value);
-    onCheckedChange == null ? void 0 : onCheckedChange(e);
+    onCheckedChange(e);
   };
   return /* @__PURE__ */ React38.createElement(CardGroupContext.Provider, {
     value: { name, checked: checked != null ? checked : defaultChecked, onCheckedChange: handleChange }
@@ -9133,13 +9137,13 @@ var CompactCard = ({
   fullWidth,
   children
 }) => {
-  var _a;
+  var _a, _b;
   const ref = useRef3(null);
   const groupContext = useContext4(CardGroupContext);
   const { isFocusVisible } = useFocusVisible();
   const checkable = _checkable != null ? _checkable : Boolean(groupContext);
   const isRadioButton2 = checkable && value && groupContext !== void 0;
-  const checkedInGroup = groupContext ? value !== void 0 && (groupContext == null ? void 0 : groupContext.checked) === value : void 0;
+  const checkedInGroup = groupContext ? value !== void 0 && groupContext.checked === value : void 0;
   const controlled = checkedInGroup != null ? checkedInGroup : _checked;
   const onCheckedChange = _onCheckedChange != null ? _onCheckedChange : groupContext == null ? void 0 : groupContext.onCheckedChange;
   const [checked, setChecked] = React39.useState(checkable ? (_a = controlled != null ? controlled : defaultChecked) != null ? _a : false : false);
@@ -9190,7 +9194,7 @@ var CompactCard = ({
   }, children))));
   const commonProps = {
     fullWidth,
-    enableMinWidth: Boolean(primaryAction || secondaryAction || chips.length),
+    enableMinWidth: Boolean((_b = primaryAction != null ? primaryAction : secondaryAction) != null ? _b : chips.length),
     disabled
   };
   if (checkable) {
@@ -9206,7 +9210,7 @@ var CompactCard = ({
     className: "Aquarium-Card.Compact"
   }, onClick ? buttonProps : {}), {
     role: onClick ? "button" : void 0
-  }), commonProps), commonContent, (primaryAction || secondaryAction) && /* @__PURE__ */ React39.createElement(Card.Actions, {
+  }), commonProps), commonContent, (primaryAction != null ? primaryAction : secondaryAction) && /* @__PURE__ */ React39.createElement(Card.Actions, {
     dense: true
   }, primaryAction && renderAction({ kind: "secondary", dense: true, action: primaryAction }), secondaryAction && renderAction({ kind: "ghost", dense: true, action: secondaryAction })));
 };
@@ -9276,7 +9280,7 @@ var Card2 = ({
   const { isFocusVisible } = useFocusVisible2();
   const checkable = _checkable != null ? _checkable : Boolean(groupContext);
   const isRadioButton2 = Boolean(checkable) && Boolean(value) && groupContext !== void 0;
-  const checkedInGroup = groupContext ? value !== void 0 && (groupContext == null ? void 0 : groupContext.checked) === value : void 0;
+  const checkedInGroup = groupContext ? value !== void 0 && groupContext.checked === value : void 0;
   const controlled = checkedInGroup != null ? checkedInGroup : _checked;
   const onCheckedChange = _onCheckedChange != null ? _onCheckedChange : groupContext == null ? void 0 : groupContext.onCheckedChange;
   const [checked, setChecked] = React40.useState(checkable ? (_a = controlled != null ? controlled : defaultChecked) != null ? _a : false : false);
@@ -9341,7 +9345,7 @@ var Card2 = ({
     return /* @__PURE__ */ React40.createElement(Card.Label, __spreadProps(__spreadValues({
       className: "Aquarium-Card.Label"
     }, commonProps), {
-      checked: checkable ? checked : void 0,
+      checked,
       modality: isFocusVisible ? "keyboard" : "pointer"
     }), commonContent);
   }
@@ -9351,7 +9355,7 @@ var Card2 = ({
   }, onClick ? buttonProps : {}), {
     role: onClick ? "button" : void 0,
     modality: isFocusVisible ? "keyboard" : "pointer"
-  }), commonProps), commonContent, (primaryAction || secondaryAction) && /* @__PURE__ */ React40.createElement(Card.Actions, null, primaryAction && renderAction({ kind: "secondary", dense: true, action: primaryAction }), secondaryAction && renderAction({ kind: "ghost", dense: true, action: secondaryAction })));
+  }), commonProps), commonContent, (primaryAction != null ? primaryAction : secondaryAction) && /* @__PURE__ */ React40.createElement(Card.Actions, null, primaryAction && renderAction({ kind: "secondary", dense: true, action: primaryAction }), secondaryAction && renderAction({ kind: "ghost", dense: true, action: secondaryAction })));
 };
 Card2.Title = Card.Title;
 Card2.Title.displayName = "Card.Title";
@@ -10276,7 +10280,7 @@ var ComboboxBase = (_a) => {
       switch (type) {
         case useCombobox.stateChangeTypes.InputKeyDownEnter:
         case useCombobox.stateChangeTypes.InputBlur: {
-          const selectedItem2 = createOption ? createOption == null ? void 0 : createOption(changes.inputValue) : changes.selectedItem;
+          const selectedItem2 = createOption ? createOption(changes.inputValue) : changes.selectedItem;
           const inputValue2 = selectedItem2 ? itemToString(selectedItem2) : "";
           return __spreadProps(__spreadValues({}, changes), {
             inputValue: inputValue2,
@@ -10519,7 +10523,7 @@ var createInput = (displayName, opts = {}) => {
         "readOnly",
         "type"
       ]);
-      var _a2;
+      var _a2, _b2;
       const inputType = opts.isSearch ? "search" : opts.isFile ? "file" : type;
       const inputRef = React57.useRef(null);
       useImperativeHandle(ref, () => inputRef.current);
@@ -10560,7 +10564,7 @@ var createInput = (displayName, opts = {}) => {
           getCommonInputStyles({ readOnly, valid }),
           props.className
         )
-      })), opts.canReset && (props.value || ((_a2 = inputRef.current) == null ? void 0 : _a2.value)) && /* @__PURE__ */ React57.createElement(InputAdornment, null, /* @__PURE__ */ React57.createElement("button", {
+      })), opts.canReset && ((_b2 = props.value) != null ? _b2 : (_a2 = inputRef.current) == null ? void 0 : _a2.value) && /* @__PURE__ */ React57.createElement(InputAdornment, null, /* @__PURE__ */ React57.createElement("button", {
         "aria-label": "reset search",
         onClick: handleReset
       }, /* @__PURE__ */ React57.createElement(ResetIcon, null))), !opts.canReset && endAdornment && /* @__PURE__ */ React57.createElement(InputAdornment, null, endAdornment));
@@ -10584,10 +10588,11 @@ var SearchInput = createInput("SearchInput", {
   isSearch: true
 });
 var createInputComponent = (displayName, options = {}) => {
-  const InputComponentBase = options.input || InputBase;
+  var _a;
+  const InputComponentBase = (_a = options.input) != null ? _a : InputBase;
   const InputComponent = React57.forwardRef((inputProps, ref) => {
     var _b, _c;
-    const _a = inputProps, { readOnly = false, value: valueProp, onChange: onChangeProp } = _a, props = __objRest(_a, ["readOnly", "value", "onChange"]);
+    const _a2 = inputProps, { readOnly = false, value: valueProp, onChange: onChangeProp } = _a2, props = __objRest(_a2, ["readOnly", "value", "onChange"]);
     const isControlled = typeof valueProp !== "undefined";
     const [valueState, setValueState] = useState7((_b = props.defaultValue) != null ? _b : "");
     const value = isControlled ? valueProp : valueState;
@@ -10983,19 +10988,22 @@ var initialState = {
 };
 var getPageIndex = (currentPage, pageSize) => currentPage === 0 ? 0 : (currentPage - 1) * pageSize;
 var usePagination = (items, options) => {
-  const [currentPage, setCurrentPage] = useState9((options == null ? void 0 : options.initialPage) || initialState.currentPage);
-  const [pageSize, setPageSize] = useState9((options == null ? void 0 : options.initialPageSize) || initialState.pageSize);
+  var _a, _b;
+  const [currentPage, setCurrentPage] = useState9((_a = options == null ? void 0 : options.initialPage) != null ? _a : initialState.currentPage);
+  const [pageSize, setPageSize] = useState9((_b = options == null ? void 0 : options.initialPageSize) != null ? _b : initialState.pageSize);
   const totalPages = items.length > 0 ? Math.ceil(items.length / pageSize) : 1;
   const hasPreviousPage = currentPage > 1;
   const hasNextPage = currentPage < totalPages;
   const pageIndex = getPageIndex(currentPage, pageSize);
   const onPageSizeChange = (pageSize2) => {
+    var _a2;
     const newTotalPages = items.length > 0 ? Math.ceil(items.length / pageSize2) : 1;
     setPageSize(pageSize2);
-    setCurrentPage(clamp2((options == null ? void 0 : options.initialPage) || initialState.currentPage, 1, newTotalPages));
+    setCurrentPage(clamp2((_a2 = options == null ? void 0 : options.initialPage) != null ? _a2 : initialState.currentPage, 1, newTotalPages));
   };
   useEffect7(() => {
-    setCurrentPage(clamp2((options == null ? void 0 : options.initialPage) || initialState.currentPage, 1, totalPages));
+    var _a2;
+    setCurrentPage(clamp2((_a2 = options == null ? void 0 : options.initialPage) != null ? _a2 : initialState.currentPage, 1, totalPages));
   }, [items.length]);
   return [
     items.slice(pageIndex, Math.min(pageIndex + pageSize, items.length)),
@@ -11047,9 +11055,7 @@ var useInView = ({
     );
     observer.observe(target);
     return () => {
-      if (target) {
-        observer.unobserve(target);
-      }
+      observer.unobserve(target);
     };
   }, [ref, skip, root, rootMargin, threshold, onChange]);
   return [ref, state.inView, state.entry];
@@ -11266,6 +11272,19 @@ var DataList = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
   return /* @__PURE__ */ React63.createElement("div", __spreadValues({}, rest));
 };
+var TreeLine = (_a) => {
+  var _b = _a, { className, style, isLast } = _b, rest = __objRest(_b, ["className", "style", "isLast"]);
+  return /* @__PURE__ */ React63.createElement("div", __spreadProps(__spreadValues({}, rest), {
+    className: classNames(tw("flex justify-start h-full mx-4"), className)
+  }), /* @__PURE__ */ React63.createElement("div", {
+    className: tw("border-l border-default border-dashed flex-1", {
+      "h-full": !isLast,
+      "h-1/2": Boolean(isLast)
+    })
+  }), /* @__PURE__ */ React63.createElement("div", {
+    className: tw("border-t border-default border-dashed self-center w-[18px]")
+  }));
+};
 var HeadCell = (_a) => {
   var _b = _a, {
     className,
@@ -11315,22 +11334,22 @@ var Row = (_a) => {
     className,
     disabled,
     header,
-    subgroup,
+    isGroup,
     active,
-    isLast
+    noDivider
   } = _b, rest = __objRest(_b, [
     "className",
     "disabled",
     "header",
-    "subgroup",
+    "isGroup",
     "active",
-    "isLast"
+    "noDivider"
   ]);
   return /* @__PURE__ */ React63.createElement("div", __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, rest), {
-    role: subgroup ? "rowgroup" : "row"
+    role: isGroup ? "rowgroup" : "row"
   }), { inert: disabled ? "" : void 0 }), {
     className: classNames(tw("contents"), className, {
-      "[&>*]:border-b-transparent": isLast,
+      "[&>*]:border-b-transparent": noDivider,
       "children:opacity-70": disabled,
       "[&>*]:bg-primary-active": active,
       "[&>*]:hover:bg-muted": !disabled && !header
@@ -11386,6 +11405,8 @@ DataList.SubGroupSpacing = SubGroupSpacing;
 DataList.SubGroupSpacing.displayName = "DataList.SubGroupSpacing";
 DataList.Row = Row;
 DataList.Row.displayName = "DataList.Row";
+DataList.TreeLine = TreeLine;
+DataList.TreeLine.displayName = "DataList.TreeLine";
 var ToolbarContainer = (_a) => {
   var _b = _a, { className, sticky = true } = _b, rest = __objRest(_b, ["className", "sticky"]);
   return /* @__PURE__ */ React63.createElement("div", __spreadProps(__spreadValues({}, rest), {
@@ -11492,7 +11513,7 @@ function useScrollProgress({ containerRef, skip }) {
     },
     pause: skip
   });
-  const isContainerUnscrollable = scrollState && scrollState.scrollX === 0 && (scrollState == null ? void 0 : scrollState.scrollXProgress) === 1;
+  const isContainerUnscrollable = scrollState && scrollState.scrollX === 0 && scrollState.scrollXProgress === 1;
   if (!scrollState || isContainerUnscrollable) {
     return null;
   }
@@ -11532,6 +11553,7 @@ var cellProps = (column) => {
   var _a;
   let align;
   switch (column.type) {
+    case "menu":
     case "action":
     case "number": {
       align = "right";
@@ -11551,6 +11573,7 @@ var cellProps = (column) => {
     stickyColumn: column.sticky
   };
 };
+var columnHasSort = (column) => columnIsFieldColumn(column) && column.sortable || Boolean(column.sort);
 var columnIsFieldColumn = (column) => Boolean(column && column.field);
 function isOnSortChangedDirection(value) {
   return value === void 0 || ["ascending", "descending"].includes(value);
@@ -11558,18 +11581,14 @@ function isOnSortChangedDirection(value) {
 
 // src/utils/table/useTableSort.tsx
 import React65 from "react";
-var useTableSort = ({
-  column,
-  direction,
-  onSortChanged
-} = {}) => {
+var useTableSort = ({ column, direction, onSortChanged } = {}) => {
   const defaultSort = column ? { column, direction } : void 0;
   const [sort, setSort] = React65.useState(defaultSort);
   const setSortAndEmitOnSortChangedEvent = (sort2) => {
     setSort(sort2);
     if (onSortChanged) {
       if (sort2 && isOnSortChangedDirection(sort2.direction)) {
-        onSortChanged({ key: sort2.column.key, direction: sort2 == null ? void 0 : sort2.direction });
+        onSortChanged({ key: sort2.column.key, direction: sort2.direction });
       } else {
         onSortChanged(null);
       }
@@ -11592,7 +11611,7 @@ var useTableSort = ({
 // src/utils/table/utils.ts
 import orderBy2 from "lodash/orderBy";
 var sortRowsBy = (rows, sort) => {
-  if (!sort) {
+  if (!sort || !columnHasSort(sort.column)) {
     return rows;
   }
   const sortFunction = sort.column.sort;
@@ -12057,7 +12076,7 @@ var DataListRow = ({
     key: row.id,
     disabled: isRowDisabled,
     active,
-    isLast
+    noDivider: isLast
   }, resolvedAdditionalRowProps), {
     style,
     onClick: isRowClickable ? onClick : void 0
@@ -12124,6 +12143,21 @@ var DataListCell = ({
       }
       break;
     }
+    case "menu": {
+      const menuContent = column.menu(row, index);
+      if (!menuContent) {
+        cellContent = null;
+      } else {
+        cellContent = /* @__PURE__ */ React68.createElement(DropdownMenu2, {
+          placement: defaultContextualMenuPlacement,
+          onAction: (action) => column.onAction(action, row, index)
+        }, /* @__PURE__ */ React68.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ React68.createElement(Button.Icon, {
+          "aria-label": "action",
+          icon: import_more2.default
+        })), menuContent);
+      }
+      break;
+    }
     default:
       if (column.formatter) {
         cellContent = column.formatter(row[column.field], row, index, rows);
@@ -12204,14 +12238,18 @@ var DataListGroup = (_a) => {
   const hasCustomRowForGroup = isFunction2(getGroupRow);
   if (!areRowsGrouped(groups)) {
     if (groups.length === 0 && groupKey && groupKey !== "undefined") {
+      const emptyGroupContent = renderEmptyGroup(groupKey);
+      if (!emptyGroupContent) {
+        return null;
+      }
       return /* @__PURE__ */ React69.createElement(DataList.Row, {
-        isLast: isLastGroup
+        noDivider: isLastGroup
       }, selectable && /* @__PURE__ */ React69.createElement(DataList.Cell, null), /* @__PURE__ */ React69.createElement(DataList.Cell, {
         style: { paddingLeft: `${2 + GAP + level * INDENTATION}px`, gridColumn: `${selectable ? 2 : 1} / -1` }
       }, /* @__PURE__ */ React69.createElement(Typography, {
         variant: "small",
         color: "muted"
-      }, renderEmptyGroup(groupKey))));
+      }, emptyGroupContent)));
     }
     return /* @__PURE__ */ React69.createElement(List, {
       items: groups,
@@ -12297,7 +12335,7 @@ var DataListGroup = (_a) => {
         openPanelId
       }, hasCustomRowForGroup && /* @__PURE__ */ React69.createElement(DataList.Row, {
         active: isActiveRow,
-        isLast: isLastRow
+        noDivider: isLastRow
       }, selectable && /* @__PURE__ */ React69.createElement(DataList.Cell, null, selectable === "multiple" && /* @__PURE__ */ React69.createElement(Checkbox, {
         "aria-label": getGroupCheckboxLabel(key, group, index, isChecked, rows),
         checked: isChecked,
@@ -12327,7 +12365,7 @@ var DataListGroup = (_a) => {
         menuAriaLabel
       })), !hasCustomRowForGroup && /* @__PURE__ */ React69.createElement(DataList.Row, {
         active: isActiveRow,
-        isLast: isLastRow
+        noDivider: isLastRow
       }, selectable === "multiple" && /* @__PURE__ */ React69.createElement(DataList.Cell, null, /* @__PURE__ */ React69.createElement(Checkbox, {
         "aria-label": getGroupCheckboxLabel(key, group, index, isChecked, rows),
         checked: isChecked,
@@ -12343,7 +12381,7 @@ var DataListGroup = (_a) => {
       }), renderGroupName(key, group))), /* @__PURE__ */ React69.createElement(Accordion.UnanimatedPanel, {
         panelId: key
       }, /* @__PURE__ */ React69.createElement(DataList.Row, {
-        subgroup: true
+        isGroup: true
       }, /* @__PURE__ */ React69.createElement(DataListGroup, __spreadProps(__spreadValues({
         key,
         groupKey: key,
@@ -12372,7 +12410,7 @@ var DataListSkeleton = ({ columns = ["1", "2", "2", 52], rows = 5 }) => {
     items: [...Array(rows).keys()],
     renderItem: (item, index) => /* @__PURE__ */ React70.createElement(DataList.Row, {
       key: item,
-      isLast: index === rows - 1
+      noDivider: index === rows - 1
     }, /* @__PURE__ */ React70.createElement(List, {
       items: columnsAmount,
       renderItem: (key) => /* @__PURE__ */ React70.createElement(DataList.Cell, {
@@ -12409,7 +12447,7 @@ var DataListToolbar = ({
     })
   ))), menu && /* @__PURE__ */ React71.createElement(DataList.Toolbar.Group, null, /* @__PURE__ */ React71.createElement(DropdownMenu2, {
     placement: defaultContextualMenuPlacement,
-    onAction: (key) => onAction == null ? void 0 : onAction(key, selectedRows != null ? selectedRows : []),
+    onAction: (key) => onAction(key, selectedRows != null ? selectedRows : []),
     onOpenChange: onMenuOpenChange
   }, /* @__PURE__ */ React71.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ React71.createElement(Button.GhostDropdown, {
     dense: true
@@ -12536,7 +12574,7 @@ var DataList2 = (_a) => {
   const totalSelected = (_b2 = selected == null ? void 0 : selected.length) != null ? _b2 : 0;
   const allEnabledRowIds = compact(
     allRows.map(
-      (row, index) => (disabled == null ? void 0 : disabled(row, index, sortedRows)) || (selectionDisabled == null ? void 0 : selectionDisabled(row, index, sortedRows)) ? void 0 : row.id
+      (row, index) => (disabled == null ? void 0 : disabled(row, index, sortedRows)) || selectionDisabled(row, index, sortedRows) ? void 0 : row.id
     )
   );
   const allRowsSelected = totalSelected >= allEnabledRowIds.length;
@@ -12578,7 +12616,7 @@ var DataList2 = (_a) => {
       color: "default",
       "aria-hidden": true
     }), content) : content;
-    const cell2 = columnIsFieldColumn(column) && column.sortable || column.sort ? /* @__PURE__ */ React72.createElement(DataList.SortCell, __spreadValues({
+    const cell2 = columnHasSort(column) ? /* @__PURE__ */ React72.createElement(DataList.SortCell, __spreadValues({
       direction: sort && sort.column.headerName === column.headerName ? sort.direction : "none",
       onClick: () => updateSort(column),
       sticky
@@ -12625,7 +12663,7 @@ var DataList2 = (_a) => {
       var _a3;
       const details = rowDetails == null ? void 0 : rowDetails(row, index, sortedRows);
       const isSelected = (_a3 = selected == null ? void 0 : selected.includes(row.id)) != null ? _a3 : false;
-      const isSelectionDisabled = selectionDisabled == null ? void 0 : selectionDisabled(row, index, sortedRows);
+      const isSelectionDisabled = selectionDisabled(row, index, sortedRows);
       const isDisabled = disabled == null ? void 0 : disabled(row, index, sortedRows);
       const openPanelId = expandedGroupIds.find((id) => id === row.id.toString()) || null;
       const isLastRow = index === sortedRows.length - 1;
@@ -12842,7 +12880,7 @@ var DataTable = (_a) => {
         color: "default",
         "aria-hidden": true
       }), content) : content;
-      const cell2 = columnIsFieldColumn(column) && column.sortable || column.sort ? /* @__PURE__ */ React75.createElement(Table2.SortCell, __spreadValues({
+      const cell2 = columnHasSort(column) ? /* @__PURE__ */ React75.createElement(Table2.SortCell, __spreadValues({
         direction: sort && sort.column.headerName === column.headerName ? sort.direction : "none",
         onClick: () => updateSort(column),
         style: { width: column.width },
@@ -13062,15 +13100,14 @@ var import_calendar2 = __toESM(require_calendar());
 
 // src/molecules/DatePicker/Button.tsx
 import React79 from "react";
-import { Button as AriaButton } from "react-aria-components";
-import { composeRenderProps as composeRenderProps2 } from "react-aria-components";
+import { Button as AriaButton, composeRenderProps } from "react-aria-components";
 import { tv as tv3 } from "tailwind-variants";
 var button = tv3({
   extend: focusRing
 });
 function Button2(props) {
   return /* @__PURE__ */ React79.createElement(AriaButton, __spreadProps(__spreadValues({}, props), {
-    className: composeRenderProps2(props.className, (className, renderProps) => button(__spreadProps(__spreadValues({}, renderProps), { className })))
+    className: composeRenderProps(props.className, (className, renderProps) => button(__spreadProps(__spreadValues({}, renderProps), { className })))
   }));
 }
 
@@ -13182,7 +13219,8 @@ var Popover2 = (_a) => {
 // src/molecules/DatePicker/DatePicker.tsx
 var createDatePickerBase = (variant) => (_a) => {
   var _b = _a, { disabled, valid, granularity, shouldCloseOnSelect } = _b, props = __objRest(_b, ["disabled", "valid", "granularity", "shouldCloseOnSelect"]);
-  const hasSomeValue = props.value || props.defaultValue || props.placeholderValue;
+  var _a2, _b2;
+  const hasSomeValue = (_b2 = (_a2 = props.value) != null ? _a2 : props.defaultValue) != null ? _b2 : props.placeholderValue;
   return /* @__PURE__ */ React83.createElement(AriaDatePicker, __spreadProps(__spreadValues({}, props), {
     shouldCloseOnSelect: shouldCloseOnSelect != null ? shouldCloseOnSelect : variant === "date",
     isDisabled: disabled,
@@ -13306,7 +13344,8 @@ var createDateRangePickerBase = (variant) => (_a) => {
     "granularity",
     "shouldCloseOnSelect"
   ]);
-  const hasSomeValue = props.value || props.defaultValue || props.placeholderValue;
+  var _a2, _b2;
+  const hasSomeValue = (_b2 = (_a2 = props.value) != null ? _a2 : props.defaultValue) != null ? _b2 : props.placeholderValue;
   return /* @__PURE__ */ React85.createElement(AriaDateRangePicker, __spreadProps(__spreadValues({}, props), {
     shouldCloseOnSelect: shouldCloseOnSelect != null ? shouldCloseOnSelect : variant === "date",
     isDisabled: disabled,
@@ -13540,7 +13579,7 @@ Modal.HeaderImage = (_a) => {
   const { headerImage } = modalStyles({ backgroundImage: Boolean(backgroundImage) });
   return backgroundImage ? /* @__PURE__ */ React86.createElement("img", __spreadProps(__spreadValues({
     "aria-hidden": true,
-    src: backgroundImage != null ? backgroundImage : void 0
+    src: backgroundImage
   }, rest), {
     className: headerImage({ className })
   })) : /* @__PURE__ */ React86.createElement("div", {
@@ -13710,7 +13749,6 @@ var TabContainer = (_a) => {
   }), children);
 };
 var ModalTab = Tab;
-var ModalTabContainer = TabContainer;
 var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
   const Tab2 = React89.forwardRef(
     (_a, ref) => {
@@ -14031,7 +14069,7 @@ var Drawer = ({
   const hasTabs = isComponentType(onlyChild, Tabs);
   return /* @__PURE__ */ React90.createElement(AriaModalOverlay, {
     isOpen: !hidden,
-    onOpenChange: (isOpen) => !isOpen && (onClose == null ? void 0 : onClose()),
+    onOpenChange: (isOpen) => !isOpen && onClose(),
     isDismissable: false,
     isKeyboardDismissDisabled: !closeOnEsc,
     className: styles.overlay({ className: "Aquarium-Drawer" })
@@ -14058,13 +14096,13 @@ var Drawer = ({
       className: tw("[&>div:first-child]:px-5 grow flex flex-col overflow-y-auto")
     })) : /* @__PURE__ */ React90.createElement(Modal.Body, {
       tabIndex: 0,
-      noFooter: !(secondaryActions || primaryAction)
-    }, children), (secondaryActions || primaryAction) && /* @__PURE__ */ React90.createElement(Modal.Footer, null, /* @__PURE__ */ React90.createElement(Modal.Actions, {
+      noFooter: !(secondaryActions != null ? secondaryActions : primaryAction)
+    }, children), (secondaryActions != null ? secondaryActions : primaryAction) && /* @__PURE__ */ React90.createElement(Modal.Footer, null, /* @__PURE__ */ React90.createElement(Modal.Actions, {
       className: size === "sm" ? tw("flex-col") : void 0
     }, size !== "sm" && menu && /* @__PURE__ */ React90.createElement(Box.Flex, {
       alignItems: "center"
     }, /* @__PURE__ */ React90.createElement(DropdownMenu2, {
-      onAction: (action) => onAction == null ? void 0 : onAction(action),
+      onAction: (action) => onAction(action),
       onOpenChange: onMenuOpenChange
     }, /* @__PURE__ */ React90.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ React90.createElement(Button.Icon, {
       "aria-label": (_a = menuAriaLabel != null ? menuAriaLabel : menuLabel) != null ? _a : "Context menu",
@@ -14081,7 +14119,7 @@ var Drawer = ({
 };
 var DrawerTabs = createTabsComponent(ModalTab, TabItem, "DrawerTabs", (children, selected) => /* @__PURE__ */ React90.createElement(Modal.Body, {
   className: tw("h-full")
-}, /* @__PURE__ */ React90.createElement(ModalTabContainer, null, children.find(
+}, /* @__PURE__ */ React90.createElement(TabContainer, null, children.find(
   (node, index) => (node == null ? void 0 : node.props.value) === selected || index === selected
 ))));
 
@@ -14229,8 +14267,8 @@ var DropdownMenu3 = ({
   const menuRef = React93.useRef(null);
   React93.useEffect(() => {
     const id = setTimeout(() => {
-      var _a, _b, _c;
-      return (_c = (_b = (_a = menuRef.current) == null ? void 0 : _a.children) == null ? void 0 : _b[0]) == null ? void 0 : _c.focus();
+      var _a;
+      return ((_a = menuRef.current) == null ? void 0 : _a.children[0]).focus();
     });
     return () => clearTimeout(id);
   }, [menuRef.current]);
@@ -14418,7 +14456,7 @@ var EmptyState = ({
     htmlTag: "h2"
   }, title), (description || children) && /* @__PURE__ */ React94.createElement(Box, {
     marginTop: "5"
-  }, /* @__PURE__ */ React94.createElement(Typography2.Default, null, children || description)), (secondaryAction || primaryAction) && /* @__PURE__ */ React94.createElement(Box.Flex, {
+  }, /* @__PURE__ */ React94.createElement(Typography2.Default, null, children || description)), (secondaryAction != null ? secondaryAction : primaryAction) && /* @__PURE__ */ React94.createElement(Box.Flex, {
     marginTop: "7",
     gap: "4",
     justifyContent: "center",
@@ -14620,7 +14658,7 @@ var Modal2 = ({
   const hasTabs = isComponentType(children, ModalTabs);
   return /* @__PURE__ */ React102.createElement(AriaModalOverlay2, {
     isOpen: open,
-    onOpenChange: (isOpen) => !isOpen && (onClose == null ? void 0 : onClose()),
+    onOpenChange: (isOpen) => !isOpen && onClose(),
     isDismissable: false,
     isKeyboardDismissDisabled: !closeOnEsc,
     className: styles.overlay({ className: "Aquarium-Modal" })
@@ -14644,8 +14682,8 @@ var Modal2 = ({
     kind: "dialog"
   }, title), subtitle && /* @__PURE__ */ React102.createElement(Modal.Subtitle, null, subtitle))), hasTabs ? React102.cloneElement(children, { className: tw("[&>div:first-child]:px-5 grow") }) : /* @__PURE__ */ React102.createElement(Modal.Body, {
     tabIndex: 0,
-    noFooter: !(secondaryActions || primaryAction)
-  }, children), (secondaryActions || primaryAction) && /* @__PURE__ */ React102.createElement(Modal.Footer, null, /* @__PURE__ */ React102.createElement(Modal.Actions, null, secondaryActions && castArray4(secondaryActions).filter(Boolean).map((_a) => {
+    noFooter: !(secondaryActions != null ? secondaryActions : primaryAction)
+  }, children), (secondaryActions != null ? secondaryActions : primaryAction) && /* @__PURE__ */ React102.createElement(Modal.Footer, null, /* @__PURE__ */ React102.createElement(Modal.Actions, null, secondaryActions && castArray4(secondaryActions).filter(Boolean).map((_a) => {
     var _b = _a, { text } = _b, action = __objRest(_b, ["text"]);
     return /* @__PURE__ */ React102.createElement(Button.Secondary, __spreadValues({
       key: text
@@ -14660,7 +14698,7 @@ var ModalTabs = createTabsComponent(
   "ModalTabs",
   (children, selected, props) => /* @__PURE__ */ React102.createElement(Modal.Body, {
     maxHeight: props.maxHeight
-  }, /* @__PURE__ */ React102.createElement(ModalTabContainer, null, children.find(
+  }, /* @__PURE__ */ React102.createElement(TabContainer, null, children.find(
     (node, index) => (node == null ? void 0 : node.props.value) === selected || index === selected
   )))
 );
@@ -14774,7 +14812,7 @@ var MultiInputBase = (_a) => {
     }
   }, [JSON.stringify(value)]);
   const handleKeyDown = (e) => {
-    var _a3, _b2, _c;
+    var _a3, _b2;
     switch (e.key) {
       case "Enter":
       case " ": {
@@ -14787,8 +14825,8 @@ var MultiInputBase = (_a) => {
         break;
       }
       case "Backspace": {
-        const length = (_a3 = items == null ? void 0 : items.length) != null ? _a3 : 0;
-        if (inline && !((_c = (_b2 = inputRef.current) == null ? void 0 : _b2.value) == null ? void 0 : _c.length) && length > 0) {
+        const length = (_a3 = items.length) != null ? _a3 : 0;
+        if (inline && !((_b2 = inputRef.current) == null ? void 0 : _b2.value.length) && length > 0) {
           handleRemoveItem(length - 1);
         }
         break;
@@ -14823,12 +14861,13 @@ var MultiInputBase = (_a) => {
     onChange == null ? void 0 : onChange(updated);
   };
   const handlePaste = (e) => {
+    var _a3;
     e.preventDefault();
     const copiedText = e.clipboardData.getData("text/plain");
     const spaceSeparated = copiedText.split(" ");
     const newLineSeparated = copiedText.split("\n");
     const commaSeparated = copiedText.split(",");
-    const separatedText = [spaceSeparated, newLineSeparated, commaSeparated].filter((items2) => items2.length > 1).shift() || [copiedText];
+    const separatedText = (_a3 = [spaceSeparated, newLineSeparated, commaSeparated].filter((items2) => items2.length > 1).shift()) != null ? _a3 : [copiedText];
     const itemsToAdd = separatedText.map((value2) => value2.trim()).filter(identity);
     handleAddItem(itemsToAdd);
   };
@@ -14844,7 +14883,7 @@ var MultiInputBase = (_a) => {
     }
     onBlur == null ? void 0 : onBlur();
   };
-  const renderChips = () => items == null ? void 0 : items.map((item, index) => {
+  const renderChips = () => items.map((item, index) => {
     var _a3;
     return /* @__PURE__ */ React104.createElement(InputChip, {
       key: `${itemToString(item)}.${index}`,
@@ -14873,7 +14912,7 @@ var MultiInputBase = (_a) => {
     autoFocus,
     disabled,
     readOnly,
-    placeholder: !inline || (items == null ? void 0 : items.length) === 0 ? placeholder : "",
+    placeholder: !inline || items.length === 0 ? placeholder : "",
     onKeyDown: handleKeyDown,
     onKeyUp: handleKeyUp,
     onKeyPress: handleKeyUp,
@@ -15476,6 +15515,13 @@ var CommonPageHeader = ({
   onMenuOpenChange,
   isSubHeader = false
 }) => {
+  var _a, _b;
+  const actions = [primaryAction, ...castArray6(secondaryActions)].filter(Boolean);
+  if (actions.length > 2) {
+    throw new Error(
+      "Limit the combined `primaryAction` and `secondaryActions` to 2 actions. Use the `menu` prop for additional actions."
+    );
+  }
   return /* @__PURE__ */ React110.createElement(PageHeader, {
     className: "Aquarium-PageHeader"
   }, /* @__PURE__ */ React110.createElement(PageHeader.Container, null, breadcrumbs && /* @__PURE__ */ React110.createElement(Box, {
@@ -15493,11 +15539,11 @@ var CommonPageHeader = ({
     key: chip,
     dense: true,
     text: chip
-  }))), subtitle && /* @__PURE__ */ React110.createElement(PageHeader.Subtitle, null, subtitle)))), (secondaryActions || primaryAction || secondaryAction || menu) && /* @__PURE__ */ React110.createElement(PageHeader.Actions, null, menu && /* @__PURE__ */ React110.createElement(Box.Flex, {
+  }))), subtitle && /* @__PURE__ */ React110.createElement(PageHeader.Subtitle, null, subtitle)))), ((_b = (_a = secondaryActions != null ? secondaryActions : primaryAction) != null ? _a : secondaryAction) != null ? _b : menu) && /* @__PURE__ */ React110.createElement(PageHeader.Actions, null, menu && /* @__PURE__ */ React110.createElement(Box.Flex, {
     alignItems: "center"
   }, /* @__PURE__ */ React110.createElement(DropdownMenu2, {
     placement: defaultContextualMenuPlacement,
-    onAction: (action) => onAction == null ? void 0 : onAction(action),
+    onAction: (action) => onAction(action),
     onOpenChange: onMenuOpenChange
   }, /* @__PURE__ */ React110.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ React110.createElement(Button.Icon, {
     "aria-label": menuAriaLabel,
@@ -16088,7 +16134,7 @@ var Section4 = (props) => {
     className: tw("row-start-2", { "col-start-2": _collapsible })
   }, /* @__PURE__ */ React121.createElement(LineClamp2, {
     lines: 1
-  }, subtitle))), !isCollapsed && /* @__PURE__ */ React121.createElement(Section3.Actions, null, menu && /* @__PURE__ */ React121.createElement(Box.Flex, {
+  }, subtitle))), !isCollapsed && /* @__PURE__ */ React121.createElement(Section3.Actions, null, props.switch && /* @__PURE__ */ React121.createElement(Switch2, __spreadValues({}, props.switch)), menu && /* @__PURE__ */ React121.createElement(Box.Flex, {
     alignItems: "center"
   }, /* @__PURE__ */ React121.createElement(DropdownMenu2, {
     onAction: (action) => onAction == null ? void 0 : onAction(action),
@@ -16097,7 +16143,7 @@ var Section4 = (props) => {
   }, /* @__PURE__ */ React121.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ React121.createElement(Button.Icon, {
     "aria-label": menuAriaLabel,
     icon: import_more6.default
-  })), menu)), props.actions && castArray7(props.actions).filter(Boolean).map((action) => renderAction({ kind: "secondary", action })), props.switch && /* @__PURE__ */ React121.createElement(Switch2, __spreadValues({}, props.switch)), props.select && /* @__PURE__ */ React121.createElement(SelectBase, __spreadValues({
+  })), menu)), props.actions && castArray7(props.actions).filter(Boolean).map((action) => renderAction({ kind: "secondary", action })), props.select && /* @__PURE__ */ React121.createElement(SelectBase, __spreadValues({
     "aria-labelledby": titleId
   }, props.select)))), !hasTabs && !isCollapsed && /* @__PURE__ */ React121.createElement(animated6.div, {
     className: tw(`h-[1px]`),
@@ -16535,10 +16581,33 @@ Timeline2.Skeleton.displayName = "Timeline.Skeleton";
 import React129 from "react";
 var TimePicker = (props) => /* @__PURE__ */ React129.createElement(TimeField, __spreadValues({}, props));
 
-// src/utils/table/useTableSelect.ts
+// src/utils/table/sortByColumn.ts
+var sortByColumn = (items, column, sortState) => {
+  const sortedColumn = column.find((column2) => column2.headerName === (sortState == null ? void 0 : sortState.headerName));
+  if (sortState && sortedColumn && columnHasSort(sortedColumn)) {
+    const sortFunction = sortedColumn.sort;
+    if (sortFunction) {
+      const ascending = [...items].sort((a, b) => sortFunction(a, b, sortState.direction));
+      if (sortState.direction === "descending") {
+        return ascending.reverse();
+      } else {
+        return ascending;
+      }
+    }
+    return items;
+  } else {
+    return items;
+  }
+};
+
+// src/utils/table/useSortState.ts
 import React130 from "react";
+var useSortState = (initialSortState) => React130.useState(initialSortState);
+
+// src/utils/table/useTableSelect.ts
+import React131 from "react";
 var useTableSelect = (data, { key }) => {
-  const [selected, setSelected] = React130.useState([]);
+  const [selected, setSelected] = React131.useState([]);
   const allSelected = selected.length === data.length;
   const isSelected = (dot) => selected.includes(dot[key]);
   const selectAll = () => setSelected(data.map((dot) => dot[key]));
@@ -16562,6 +16631,94 @@ var useTableSelect = (data, { key }) => {
   };
 };
 
+// src/molecules/ItemList/ItemList.tsx
+import React132 from "react";
+var ItemList = (_a) => {
+  var _b = _a, {
+    columns,
+    items,
+    onSortChanged,
+    sticky
+  } = _b, infiniteProps = __objRest(_b, [
+    "columns",
+    "items",
+    "onSortChanged",
+    "sticky"
+  ]);
+  const templateColumns = columns.map((column) => {
+    var _a2;
+    return (_a2 = column.width) != null ? _a2 : "auto";
+  });
+  const [sortState, setSortState] = useSortState();
+  const sortedItems = onSortChanged ? items : sortByColumn(items, columns, sortState);
+  return /* @__PURE__ */ React132.createElement(Template, {
+    className: "Aquarium-ItemList",
+    columns: templateColumns,
+    role: "table"
+  }, /* @__PURE__ */ React132.createElement(DataList.Row, {
+    header: true
+  }, columns.map((column) => {
+    if (columnHasSort(column)) {
+      return /* @__PURE__ */ React132.createElement(DataList.SortCell, __spreadValues({
+        sticky,
+        direction: (sortState == null ? void 0 : sortState.headerName) === column.headerName ? sortState.direction : "none",
+        onClick: () => {
+          setSortState((currentState) => {
+            const newState = currentState && currentState.headerName === column.headerName ? currentState.direction === "ascending" ? { headerName: column.headerName, direction: "descending" } : void 0 : { headerName: column.headerName, direction: "ascending" };
+            onSortChanged == null ? void 0 : onSortChanged(newState);
+            return newState;
+          });
+        }
+      }, cellProps(column)), column.headerName);
+    }
+    return /* @__PURE__ */ React132.createElement(DataList.HeadCell, __spreadProps(__spreadValues({}, cellProps(column)), {
+      sticky
+    }), column.headerName);
+  })), /* @__PURE__ */ React132.createElement(Rows, __spreadValues({
+    columns,
+    items: sortedItems,
+    level: 0
+  }, infiniteProps)));
+};
+var Rows = (_a) => {
+  var _b = _a, { columns, items, level, isLastGroup } = _b, infiniteProps = __objRest(_b, ["columns", "items", "level", "isLastGroup"]);
+  return /* @__PURE__ */ React132.createElement(List, __spreadProps(__spreadValues({}, level === 0 ? infiniteProps : {}), {
+    items,
+    renderItem: (item, itemIndex) => {
+      const hasSubItems = item.items && item.items.length > 0;
+      const isLastItem = itemIndex === items.length - 1;
+      const noDivider = level === 0 && isLastItem || level > 0 && (isLastGroup || !isLastItem) || hasSubItems;
+      return /* @__PURE__ */ React132.createElement(React132.Fragment, {
+        key: item.id
+      }, /* @__PURE__ */ React132.createElement(DataList.Row, {
+        noDivider
+      }, /* @__PURE__ */ React132.createElement(List, {
+        items: columns,
+        renderItem: (column, columnIndex) => /* @__PURE__ */ React132.createElement(DataList.Cell, __spreadProps(__spreadValues({}, cellProps(column)), {
+          style: level > 1 && columnIndex === 0 ? { paddingLeft: (level - 1) * 60 } : void 0
+        }), level > 0 && columnIndex === 0 && /* @__PURE__ */ React132.createElement(DataList.TreeLine, {
+          isLast: itemIndex === items.length - 1
+        }), /* @__PURE__ */ React132.createElement(DataListCell, {
+          column,
+          row: item,
+          index: columnIndex,
+          rows: items
+        }))
+      })), item.items && /* @__PURE__ */ React132.createElement(WithGroup, {
+        level
+      }, /* @__PURE__ */ React132.createElement(Rows, {
+        columns,
+        items: item.items,
+        level: level + 1,
+        isLastGroup: level === 0 && itemIndex === items.length - 1 || isLastGroup
+      })));
+    }
+  }));
+};
+var WithGroup = ({ level, children }) => level === 0 ? /* @__PURE__ */ React132.createElement(DataList.Row, {
+  isGroup: true
+}, children) : children;
+
 // src/molecules/index.ts
 var SelectItem = Select.Item;
 
@@ -16624,7 +16781,7 @@ function calcBottomLeftPosition(triggerRect, contentRect, padding) {
     y: triggerRect.top + triggerRect.height + padding
   };
 }
-function calcBottomRightPosition(triggerRect, contentRect, padding) {
+function calcBottomRightPosition(triggerRect, _contentRect, padding) {
   return {
     x: triggerRect.left + triggerRect.width + padding,
     y: triggerRect.top + triggerRect.height + padding
@@ -16737,6 +16894,7 @@ export {
   InlineIcon,
   Input2 as Input,
   InputBase,
+  ItemList,
   Label2 as Label,
   LabelControl,
   LineClamp2 as LineClamp,
@@ -16745,7 +16903,6 @@ export {
   ListItem,
   Modal2 as Modal,
   ModalTab,
-  ModalTabContainer,
   ModalTabs,
   MultiInput,
   MultiInputBase,
@@ -16815,6 +16972,7 @@ export {
   calcTopPosition,
   calcTopRightPosition,
   cellProps,
+  columnHasSort,
   columnIsFieldColumn,
   createComponent,
   createMountPointElement,
@@ -16825,10 +16983,12 @@ export {
   isOnSortChangedDirection,
   isOutOfBounds,
   placementOrder,
+  sortByColumn,
   toSortDirection,
   usePagination,
   usePopoverContext,
   useScrollTarget,
+  useSortState,
   useStaticInfiniteList,
   useTableSelect,
   useTableSort,