@aivenio/aquarium 1.62.0 → 1.63.0

package/dist/system.cjs

@@ -9528,6 +9528,7 @@ var ComboboxBase = (_a) => {
     createOption,
     renderOption = (opt) => itemToString(opt),
     isOptionDisabled = isOptionDisabledBuiltin,
+    getOptionKey,
     defaultValue,
     value,
     onChange,
@@ -9549,6 +9550,7 @@ var ComboboxBase = (_a) => {
     "createOption",
     "renderOption",
     "isOptionDisabled",
+    "getOptionKey",
     "defaultValue",
     "value",
     "onChange",
@@ -9670,11 +9672,14 @@ var ComboboxBase = (_a) => {
     style: { width: (_a2 = targetRef.current) == null ? void 0 : _a2.offsetWidth }
   }, /* @__PURE__ */ import_react56.default.createElement(Select.Menu, __spreadValues({
     maxHeight
-  }, menuProps), hasNoResults && /* @__PURE__ */ import_react56.default.createElement(Select.NoResults, null, emptyState), inputItems.map((item, index) => /* @__PURE__ */ import_react56.default.createElement(Select.Item, __spreadValues({
-    key: itemToString(item),
-    selected: item === selectedItem,
-    highlighted: index === highlightedIndex || item === selectedItem
-  }, getItemProps({ item, index })), renderOption(item))))));
+  }, menuProps), hasNoResults && /* @__PURE__ */ import_react56.default.createElement(Select.NoResults, null, emptyState), inputItems.map((item, index) => {
+    var _a3;
+    return /* @__PURE__ */ import_react56.default.createElement(Select.Item, __spreadValues({
+      key: (_a3 = getOptionKey == null ? void 0 : getOptionKey(item)) != null ? _a3 : itemToString(item),
+      selected: item === selectedItem,
+      highlighted: index === highlightedIndex || item === selectedItem
+    }, getItemProps({ item, index })), renderOption(item));
+  }))));
 };
 var ComboboxBaseSkeleton = () => /* @__PURE__ */ import_react56.default.createElement(Skeleton, {
   height: 38
@@ -9733,7 +9738,8 @@ var Container2 = ({ maxWidth = "xl", children }) => /* @__PURE__ */ import_react
 
 // src/molecules/DataList/DataList.tsx
 var import_react79 = __toESM(require("react"));
-var import_utils14 = require("@react-stately/utils");
+var import_utils15 = require("@react-stately/utils");
+var import_castArray2 = __toESM(require("lodash/castArray"));
 var import_compact = __toESM(require("lodash/compact"));
 var import_groupBy2 = __toESM(require("lodash/groupBy"));
 var import_isArray3 = __toESM(require("lodash/isArray"));
@@ -11413,9 +11419,16 @@ var useDataListContext = () => {
 // src/molecules/DataList/DataListGroup.tsx
 var import_react76 = __toESM(require("react"));
 var import_isFunction2 = __toESM(require("lodash/isFunction"));
+
+// 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);
+var getDefaultRowCheckboxLabel = () => "Select row";
+var getDefaultGroupCheckboxLabel = (key) => `Select ${key}`;
 var DataListGroup = (_a) => {
   var _b = _a, {
     groups,
@@ -11434,7 +11447,12 @@ var DataListGroup = (_a) => {
     onAction,
     onGroupToggled,
     onMenuOpenChange,
-    rows
+    rows,
+    selectable,
+    selectedRows,
+    onSelectionChange,
+    getRowCheckboxLabel = getDefaultRowCheckboxLabel,
+    getGroupCheckboxLabel = getDefaultGroupCheckboxLabel
   } = props;
   const groupKeys = groups ? Object.keys(groups) : void 0;
   const hasCustomRowForGroup = (0, import_isFunction2.default)(getGroupRow);
@@ -11442,12 +11460,16 @@ var DataListGroup = (_a) => {
     return /* @__PURE__ */ import_react76.default.createElement(List, {
       items: groups,
       renderItem: (row, index) => {
+        var _a2;
+        const isChecked = (_a2 = selectedRows == null ? void 0 : selectedRows.includes(row.id)) != null ? _a2 : false;
+        const isDisabled = disabled == null ? void 0 : disabled(row, index, rows);
         return /* @__PURE__ */ import_react76.default.createElement(DataListRow, {
           key: row.id,
           columns,
           row,
           index,
           rows,
+          active: selectable && isChecked,
           menu: /* @__PURE__ */ import_react76.default.createElement(DataListRowMenu, {
             row,
             index,
@@ -11457,11 +11479,22 @@ var DataListGroup = (_a) => {
             menuAriaLabel
           }),
           disabled,
+          additionalRowProps: () => selectable ? {
+            "aria-selected": isChecked
+          } : {},
           additionalColumnProps: (_, columnIndex) => columnIndex === 0 ? {
             style: {
               paddingLeft: `${GAP + level * INDENTATION}px`
             }
-          } : {}
+          } : {},
+          renderFirstColumn: (row2, index2) => {
+            return /* @__PURE__ */ import_react76.default.createElement(import_react76.default.Fragment, null, selectable && /* @__PURE__ */ import_react76.default.createElement(DataList.Cell, null, /* @__PURE__ */ import_react76.default.createElement(Checkbox, {
+              "aria-label": getRowCheckboxLabel(row2, index2, isChecked, rows),
+              onChange: onSelectionChange(row2.id),
+              checked: isChecked,
+              disabled: isDisabled
+            })));
+          }
         });
       }
     });
@@ -11471,8 +11504,8 @@ var DataListGroup = (_a) => {
   }
   return /* @__PURE__ */ import_react76.default.createElement(List, {
     items: sortGroupKeys(groupKeys),
-    renderItem: (key) => {
-      var _a2;
+    renderItem: (key, index) => {
+      var _a2, _b2;
       const group = groups[key];
       if (key === "undefined" || key === void 0) {
         return /* @__PURE__ */ import_react76.default.createElement(DataListGroup, __spreadProps(__spreadValues({
@@ -11483,12 +11516,21 @@ var DataListGroup = (_a) => {
         }));
       }
       const openPanelId = expandedGroupIds ? (_a2 = expandedGroupIds.find((id) => id === key)) != null ? _a2 : null : void 0;
+      const nestedRowIds = flattenRows(group).map((row) => row.id);
+      const nestedSelectedIds = (_b2 = selectedRows == null ? void 0 : selectedRows.filter((id) => nestedRowIds.includes(id))) != null ? _b2 : [];
+      const allSelected = nestedRowIds.length === nestedSelectedIds.length;
+      const isChecked = nestedSelectedIds.length > 0;
       return /* @__PURE__ */ import_react76.default.createElement(Accordion, {
         key,
         openPanelId
       }, hasCustomRowForGroup && /* @__PURE__ */ import_react76.default.createElement(DataList.Row, {
-        active: !!openPanelId
-      }, /* @__PURE__ */ import_react76.default.createElement(List, {
+        active: !!openPanelId || selectable && isChecked
+      }, selectable && /* @__PURE__ */ import_react76.default.createElement(DataList.Cell, null, /* @__PURE__ */ import_react76.default.createElement(Checkbox, {
+        "aria-label": getGroupCheckboxLabel(key, group, index, isChecked, rows),
+        checked: isChecked,
+        indeterminate: isChecked && !allSelected,
+        onChange: onSelectionChange(nestedRowIds)
+      })), /* @__PURE__ */ import_react76.default.createElement(List, {
         items: columns,
         renderItem: (column, idx) => /* @__PURE__ */ import_react76.default.createElement(DataList.Cell, __spreadProps(__spreadValues({}, cellProps(column)), {
           className: tw("gap-3"),
@@ -11510,10 +11552,15 @@ var DataListGroup = (_a) => {
         onMenuOpenChange,
         menuAriaLabel
       })), !hasCustomRowForGroup && /* @__PURE__ */ import_react76.default.createElement(DataList.Row, {
-        active: !!openPanelId
-      }, /* @__PURE__ */ import_react76.default.createElement(DataList.Cell, {
+        active: !!openPanelId || selectable && isChecked
+      }, selectable && /* @__PURE__ */ import_react76.default.createElement(DataList.Cell, null, /* @__PURE__ */ import_react76.default.createElement(Checkbox, {
+        "aria-label": getGroupCheckboxLabel(key, group, index, isChecked, rows),
+        checked: isChecked,
+        indeterminate: isChecked && !allSelected,
+        onChange: onSelectionChange(nestedRowIds)
+      })), /* @__PURE__ */ import_react76.default.createElement(DataList.Cell, {
         className: tw("gap-3"),
-        style: { paddingLeft: `${GAP + level * INDENTATION}px`, gridColumn: "1 / -1" }
+        style: { paddingLeft: `${GAP + level * INDENTATION}px`, gridColumn: `${selectable ? 2 : 1} / -1` }
       }, /* @__PURE__ */ import_react76.default.createElement(Accordion.Toggle, {
         panelId: key,
         onChange: onGroupToggled
@@ -11570,11 +11617,11 @@ var DataListToolbar = ({
   sticky = true
 }) => {
   var _a;
-  const { selectedRows, rows } = useDataListContext();
+  const { selectedRows } = useDataListContext();
   const actions = (0, import_castArray.default)(_actions).filter(Boolean);
   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, (_a = selectedRows == null ? void 0 : selectedRows.length) != null ? _a : 0, " of ", rows.length, " selected")), actions.length > 0 && /* @__PURE__ */ import_react78.default.createElement(DataList.Toolbar.Group, null, /* @__PURE__ */ import_react78.default.createElement(DataList.Toolbar.Actions, null, actions.map(
+  }, /* @__PURE__ */ import_react78.default.createElement(DataList.Toolbar.Group, null, /* @__PURE__ */ import_react78.default.createElement(DataList.Toolbar.SelectionCount, null, (_a = selectedRows == null ? void 0 : selectedRows.length) != null ? _a : 0, " selected")), actions.length > 0 && /* @__PURE__ */ import_react78.default.createElement(DataList.Toolbar.Group, null, /* @__PURE__ */ import_react78.default.createElement(DataList.Toolbar.Actions, null, actions.map(
     (action) => renderAction({
       kind: "ghost",
       dense: true,
@@ -11591,7 +11638,6 @@ var DataListToolbar = ({
 DataListToolbar.displayName = "DataList.Toolbar";
 
 // src/molecules/DataList/DataList.tsx
-var getDefaultCheckboxLabel = () => "Select row";
 var DataList2 = (_a) => {
   var _b = _a, {
     columns,
@@ -11613,7 +11659,8 @@ var DataList2 = (_a) => {
     defaultSort,
     onSortChanged,
     selectable,
-    getCheckboxLabel = getDefaultCheckboxLabel,
+    getRowCheckboxLabel = getDefaultRowCheckboxLabel,
+    getGroupCheckboxLabel = getDefaultGroupCheckboxLabel,
     selectedRows,
     defaultSelectedRows,
     onSelectionChange,
@@ -11638,14 +11685,15 @@ var DataList2 = (_a) => {
     "defaultSort",
     "onSortChanged",
     "selectable",
-    "getCheckboxLabel",
+    "getRowCheckboxLabel",
+    "getGroupCheckboxLabel",
     "selectedRows",
     "defaultSelectedRows",
     "onSelectionChange",
     "toolbar"
   ]);
   var _a2, _b2;
-  const [selected, setSelected] = (0, import_utils14.useControlledState)(
+  const [selected, setSelected] = (0, import_utils15.useControlledState)(
     selectedRows,
     defaultSelectedRows,
     (value) => onSelectionChange == null ? void 0 : onSelectionChange(value != null ? value : [])
@@ -11677,20 +11725,22 @@ var DataList2 = (_a) => {
     []
   );
   const handleSelectionChange = (id) => (e) => {
+    const ids = (0, import_castArray2.default)(id);
     if (e.target.checked) {
-      setSelected([...selected != null ? selected : [], id]);
+      setSelected([...selected != null ? selected : [], ...ids]);
     } else {
-      setSelected(selected == null ? void 0 : selected.filter((_id) => _id !== id));
+      setSelected(selected == null ? void 0 : selected.filter((_id) => !ids.includes(_id)));
     }
   };
+  const allRows = flattenRows(rows);
   const totalSelected = (_b2 = selected == null ? void 0 : selected.length) != null ? _b2 : 0;
   const allEnabledRowIds = (0, import_compact.default)(
-    sortedRows.map((row, index) => (disabled == null ? void 0 : disabled(row, index, sortedRows)) ? void 0 : row.id)
+    allRows.map((row, index) => (disabled == null ? void 0 : disabled(row, index, sortedRows)) ? void 0 : row.id)
   );
   const allRowsSelected = totalSelected >= allEnabledRowIds.length;
   return /* @__PURE__ */ import_react79.default.createElement(DataListContext.Provider, {
     value: {
-      rows: sortedRows,
+      rows: (0, import_isArray3.default)(rows) ? sortedRows : rows,
       selectedRows: selected
     }
   }, /* @__PURE__ */ import_react79.default.createElement(Template, {
@@ -11704,7 +11754,7 @@ var DataList2 = (_a) => {
     sticky
   }, /* @__PURE__ */ import_react79.default.createElement(Checkbox, {
     "aria-label": "Select all rows",
-    indeterminate: totalSelected > 0 && totalSelected < sortedRows.length,
+    indeterminate: totalSelected > 0 && totalSelected < allRows.length,
     checked: totalSelected > 0,
     onChange: () => {
       if (!allRowsSelected) {
@@ -11752,6 +11802,11 @@ var DataList2 = (_a) => {
     onAction,
     onGroupToggled,
     onMenuOpenChange,
+    selectable,
+    selectedRows: selected,
+    onSelectionChange: handleSelectionChange,
+    getRowCheckboxLabel,
+    getGroupCheckboxLabel,
     rows,
     groups,
     level: 0
@@ -11759,13 +11814,17 @@ var DataList2 = (_a) => {
     paginationContainer: PaginationFooter,
     items: sortedRows,
     renderItem: (row, index) => {
+      var _a3;
       const details = rowDetails == null ? void 0 : rowDetails(row, index, sortedRows);
+      const isChecked = (_a3 = selected == null ? void 0 : selected.includes(row.id)) != null ? _a3 : false;
+      const isDisabled = disabled == null ? void 0 : disabled(row, index, sortedRows);
       const content = /* @__PURE__ */ import_react79.default.createElement(DataListRow, {
         key: row.id,
         columns,
         row,
         index,
         rows: sortedRows,
+        active: selectable && isChecked,
         menu: /* @__PURE__ */ import_react79.default.createElement(DataListRowMenu, {
           row,
           index,
@@ -11776,17 +11835,14 @@ var DataList2 = (_a) => {
         }),
         disabled,
         additionalRowProps: (row2) => {
-          var _a3;
+          var _a4;
           return selectable ? {
-            "aria-selected": (_a3 = selected == null ? void 0 : selected.includes(row2.id)) != null ? _a3 : false
+            "aria-selected": (_a4 = selected == null ? void 0 : selected.includes(row2.id)) != null ? _a4 : false
           } : {};
         },
         renderFirstColumn: (row2, index2) => {
-          var _a3;
-          const isChecked = (_a3 = selected == null ? void 0 : selected.includes(row2.id)) != null ? _a3 : false;
-          const isDisabled = disabled == null ? void 0 : disabled(row2, index2, sortedRows);
           return /* @__PURE__ */ import_react79.default.createElement(import_react79.default.Fragment, null, selectable && /* @__PURE__ */ import_react79.default.createElement(DataList.Cell, null, /* @__PURE__ */ import_react79.default.createElement(Checkbox, {
-            "aria-label": getCheckboxLabel(row2, index2, isChecked, sortedRows),
+            "aria-label": getRowCheckboxLabel(row2, index2, isChecked, sortedRows),
             onChange: handleSelectionChange(row2.id),
             checked: isChecked,
             disabled: isDisabled
@@ -12039,7 +12095,7 @@ DataTable.Skeleton = DataListSkeleton;
 var import_react84 = __toESM(require("react"));
 var import_dialog = require("@react-aria/dialog");
 var import_overlays6 = require("@react-aria/overlays");
-var import_utils17 = require("@react-aria/utils");
+var import_utils19 = require("@react-aria/utils");
 var import_overlays7 = require("@react-stately/overlays");
 var import_omit8 = __toESM(require("lodash/omit"));
 
@@ -12188,8 +12244,13 @@ Modal.Actions = (_a) => {
 // src/molecules/Dialog/Dialog.tsx
 var Dialog = (props) => {
   const ref = import_react84.default.useRef(null);
-  const state = (0, import_overlays7.useOverlayTriggerState)({ isOpen: props.open });
-  const { modalProps, underlayProps } = (0, import_overlays6.useModalOverlay)({}, state, ref);
+  const { open, onClose } = props;
+  const state = (0, import_overlays7.useOverlayTriggerState)({ isOpen: open, onOpenChange: (isOpen) => !isOpen && (onClose == null ? void 0 : onClose()) });
+  const { modalProps, underlayProps } = (0, import_overlays6.useModalOverlay)(
+    { isDismissable: false, isKeyboardDismissDisabled: false },
+    state,
+    ref
+  );
   if (!state.isOpen) {
     return null;
   }
@@ -12209,10 +12270,14 @@ var DialogWrapper = ({
   secondaryAction
 }) => {
   const ref = import_react84.default.useRef(null);
-  const labelledBy = (0, import_utils17.useId)();
-  const describedBy = (0, import_utils17.useId)();
+  const labelledBy = (0, import_utils19.useId)();
+  const describedBy = (0, import_utils19.useId)();
   const { dialogProps } = (0, import_dialog.useDialog)(
-    { "role": "alertdialog", "aria-labelledby": labelledBy, "aria-describedby": describedBy },
+    {
+      "role": "alertdialog",
+      "aria-labelledby": labelledBy,
+      "aria-describedby": describedBy
+    },
     ref
   );
   return /* @__PURE__ */ import_react84.default.createElement("div", __spreadProps(__spreadValues({
@@ -12243,9 +12308,9 @@ var import_react86 = __toESM(require("react"));
 var import_react_stately = require("react-stately");
 var import_dialog2 = require("@react-aria/dialog");
 var import_overlays8 = require("@react-aria/overlays");
-var import_utils18 = require("@react-aria/utils");
+var import_utils20 = require("@react-aria/utils");
 var import_web4 = require("@react-spring/web");
-var import_castArray2 = __toESM(require("lodash/castArray"));
+var import_castArray3 = __toESM(require("lodash/castArray"));
 var import_omit9 = __toESM(require("lodash/omit"));
 
 // src/molecules/Tabs/Tabs.tsx
@@ -12632,8 +12697,8 @@ var DrawerWrapper = import_react86.default.forwardRef(
       "menuAriaLabel"
     ]);
     var _a2;
-    const labelledBy = (0, import_utils18.useId)();
-    const describedBy = (0, import_utils18.useId)();
+    const labelledBy = (0, import_utils20.useId)();
+    const describedBy = (0, import_utils20.useId)();
     const { dialogProps } = (0, import_dialog2.useDialog)(
       { "role": "dialog", "aria-labelledby": labelledBy, "aria-describedby": describedBy },
       ref
@@ -12674,7 +12739,7 @@ var DrawerWrapper = import_react86.default.forwardRef(
     }, /* @__PURE__ */ import_react86.default.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ import_react86.default.createElement(Button.Icon, {
       "aria-label": (_a2 = menuAriaLabel != null ? menuAriaLabel : menuLabel) != null ? _a2 : "Context menu",
       icon: import_more4.default
-    })), menu)), secondaryActions && (0, import_castArray2.default)(secondaryActions).filter(Boolean).map((_b2) => {
+    })), menu)), secondaryActions && (0, import_castArray3.default)(secondaryActions).filter(Boolean).map((_b2) => {
       var _c = _b2, { text } = _c, action = __objRest(_c, ["text"]);
       return /* @__PURE__ */ import_react86.default.createElement(Button.Secondary, __spreadValues({
         key: text
@@ -12697,7 +12762,7 @@ var import_react90 = __toESM(require("react"));
 var import_react89 = __toESM(require("react"));
 var import_interactions3 = require("@react-aria/interactions");
 var import_overlays9 = require("@react-aria/overlays");
-var import_utils20 = require("@react-aria/utils");
+var import_utils22 = require("@react-aria/utils");
 var import_overlays10 = require("@react-stately/overlays");
 var import_classnames8 = __toESM(require("classnames"));
 var import_omit10 = __toESM(require("lodash/omit"));
@@ -12804,7 +12869,7 @@ var PopoverTriggerWrapper = (_a) => {
   const { pressProps } = (0, import_interactions3.usePress)(__spreadProps(__spreadValues({}, rest), { ref }));
   return import_react89.default.cloneElement(trigger, __spreadProps(__spreadValues({
     "ref": ref
-  }, (0, import_utils20.mergeProps)(pressProps, trigger.props)), {
+  }, (0, import_utils22.mergeProps)(pressProps, trigger.props)), {
     "aria-controls": (_a2 = rest["aria-controls"]) != null ? _a2 : pressProps["aria-controls"]
   }));
 };
@@ -13195,9 +13260,9 @@ var ListItem = ({ name, icon, active = false }) => {
 var import_react99 = __toESM(require("react"));
 var import_dialog4 = require("@react-aria/dialog");
 var import_overlays11 = require("@react-aria/overlays");
-var import_utils22 = require("@react-aria/utils");
+var import_utils24 = require("@react-aria/utils");
 var import_overlays12 = require("@react-stately/overlays");
-var import_castArray3 = __toESM(require("lodash/castArray"));
+var import_castArray4 = __toESM(require("lodash/castArray"));
 var import_omit11 = __toESM(require("lodash/omit"));
 var import_cross7 = __toESM(require_cross());
 var Modal2 = (_a) => {
@@ -13226,8 +13291,8 @@ var Modal2 = (_a) => {
 var ModalWrapper = import_react99.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { title, subtitle, headerImage, primaryAction, secondaryActions, children, onClose } = _b, props = __objRest(_b, ["title", "subtitle", "headerImage", "primaryAction", "secondaryActions", "children", "onClose"]);
-    const labelledBy = (0, import_utils22.useId)();
-    const describedBy = (0, import_utils22.useId)();
+    const labelledBy = (0, import_utils24.useId)();
+    const describedBy = (0, import_utils24.useId)();
     const { dialogProps } = (0, import_dialog4.useDialog)(
       { "role": "dialog", "aria-labelledby": labelledBy, "aria-describedby": describedBy },
       ref
@@ -13250,7 +13315,7 @@ var ModalWrapper = import_react99.default.forwardRef(
       id: describedBy,
       tabIndex: 0,
       noFooter: !(secondaryActions || primaryAction)
-    }, children), (secondaryActions || primaryAction) && /* @__PURE__ */ import_react99.default.createElement(Modal.Footer, null, /* @__PURE__ */ import_react99.default.createElement(Modal.Actions, null, secondaryActions && (0, import_castArray3.default)(secondaryActions).filter(Boolean).map((_a2) => {
+    }, children), (secondaryActions || primaryAction) && /* @__PURE__ */ import_react99.default.createElement(Modal.Footer, null, /* @__PURE__ */ import_react99.default.createElement(Modal.Actions, null, secondaryActions && (0, import_castArray4.default)(secondaryActions).filter(Boolean).map((_a2) => {
       var _b2 = _a2, { text } = _b2, action = __objRest(_b2, ["text"]);
       return /* @__PURE__ */ import_react99.default.createElement(Button.Secondary, __spreadValues({
         key: text
@@ -13273,8 +13338,8 @@ var ModalTabs = createTabsComponent(
 
 // src/molecules/MultiInput/MultiInput.tsx
 var import_react101 = __toESM(require("react"));
-var import_utils24 = require("@react-aria/utils");
-var import_castArray4 = __toESM(require("lodash/castArray"));
+var import_utils26 = require("@react-aria/utils");
+var import_castArray5 = __toESM(require("lodash/castArray"));
 var import_identity = __toESM(require("lodash/identity"));
 var import_omit12 = __toESM(require("lodash/omit"));
 
@@ -13414,7 +13479,7 @@ var MultiInputBase = (_a) => {
       inputRef.current.value = "";
     }
     if (value2) {
-      const newItems = (0, import_castArray4.default)(value2).map(createItem).filter((item) => !items.includes(item));
+      const newItems = (0, import_castArray5.default)(value2).map(createItem).filter((item) => !items.includes(item));
       if (newItems.length > 0 && items.length + newItems.length <= (maxLength != null ? maxLength : Number.MAX_SAFE_INTEGER)) {
         const updated = (items != null ? items : []).concat(newItems);
         setItems(updated);
@@ -13503,9 +13568,9 @@ var MultiInput = (props) => {
     var _a2;
     setValue((_a2 = props.value) != null ? _a2 : []);
   }, [JSON.stringify(props.value)]);
-  const defaultId = (0, import_utils24.useId)();
+  const defaultId = (0, import_utils26.useId)();
   const id = (_e = (_d = props.id) != null ? _d : props.name) != null ? _e : defaultId;
-  const errorMessageId = (0, import_utils24.useId)();
+  const errorMessageId = (0, import_utils26.useId)();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelControlProps = getLabelControlProps(props);
   const baseProps = (0, import_omit12.default)(props, Object.keys(labelControlProps));
@@ -13536,7 +13601,7 @@ MultiInput.Skeleton.displayName = "MultiInput.Skeleton";
 // src/molecules/MultiSelect/MultiSelect.tsx
 var import_react102 = __toESM(require("react"));
 var import_overlays13 = require("@react-aria/overlays");
-var import_utils25 = require("@react-aria/utils");
+var import_utils27 = require("@react-aria/utils");
 var import_downshift3 = require("downshift");
 var import_isArray4 = __toESM(require("lodash/isArray"));
 var import_isEqual = __toESM(require("lodash/isEqual"));
@@ -13781,9 +13846,9 @@ var MultiSelect = (_a) => {
     "emptyState"
   ]);
   var _a2;
-  const defaultId = (0, import_utils25.useId)();
+  const defaultId = (0, import_utils27.useId)();
   const id = (_a2 = props.id) != null ? _a2 : defaultId;
-  const errorMessageId = (0, import_utils25.useId)();
+  const errorMessageId = (0, import_utils27.useId)();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelControlProps = getLabelControlProps(props);
   const baseProps = (0, import_omit13.default)(props, Object.keys(labelControlProps));
@@ -13807,7 +13872,7 @@ MultiSelect.Skeleton.displayName = "MultiSelect.Skeleton";
 
 // src/molecules/NativeSelect/NativeSelect.tsx
 var import_react103 = __toESM(require("react"));
-var import_utils26 = require("@react-aria/utils");
+var import_utils28 = require("@react-aria/utils");
 var import_omit14 = __toESM(require("lodash/omit"));
 var import_uniqueId = __toESM(require("lodash/uniqueId"));
 var import_caretDown2 = __toESM(require_caretDown());
@@ -13869,9 +13934,9 @@ var NativeSelect = import_react103.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { readOnly } = _b, props = __objRest(_b, ["readOnly"]);
     var _a2;
-    const defaultId = (0, import_utils26.useId)();
+    const defaultId = (0, import_utils28.useId)();
     const id = (_a2 = props.id) != null ? _a2 : defaultId;
-    const errorMessageId = (0, import_utils26.useId)();
+    const errorMessageId = (0, import_utils28.useId)();
     const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
     const _b2 = getLabelControlProps(props), { "data-testid": dataTestId } = _b2, labelControlProps = __objRest(_b2, ["data-testid"]);
     const baseProps = (0, import_omit14.default)(props, Object.keys(labelControlProps));
@@ -14013,7 +14078,7 @@ Navigation2.Section = Navigation.Section;
 
 // src/molecules/PageHeader/PageHeader.tsx
 var import_react107 = __toESM(require("react"));
-var import_castArray5 = __toESM(require("lodash/castArray"));
+var import_castArray6 = __toESM(require("lodash/castArray"));
 
 // src/atoms/PageHeader/PageHeader.tsx
 var import_react106 = __toESM(require("react"));
@@ -14107,7 +14172,7 @@ var CommonPageHeader = ({
   }, /* @__PURE__ */ import_react107.default.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ import_react107.default.createElement(Button.Icon, {
     "aria-label": menuAriaLabel,
     icon: import_more5.default
-  })), menu)), secondaryActions && (0, import_castArray5.default)(secondaryActions).filter(Boolean).map((secondaryAction2) => renderAction({ kind: "secondary", action: secondaryAction2 })), primaryAction && renderAction({ kind: "primary", action: primaryAction })));
+  })), menu)), secondaryActions && (0, import_castArray6.default)(secondaryActions).filter(Boolean).map((secondaryAction2) => renderAction({ kind: "secondary", action: secondaryAction2 })), primaryAction && renderAction({ kind: "primary", action: primaryAction })));
 };
 var PageHeader2 = (props) => /* @__PURE__ */ import_react107.default.createElement(CommonPageHeader, __spreadValues({}, props));
 PageHeader2.displayName = "PageHeader";
@@ -14326,7 +14391,7 @@ RadioButton2.Skeleton.displayName = "RadioButton.Skeleton";
 
 // src/molecules/RadioButtonGroup/RadioButtonGroup.tsx
 var import_react113 = __toESM(require("react"));
-var import_utils28 = require("@react-aria/utils");
+var import_utils30 = require("@react-aria/utils");
 var isRadioButton = (c) => {
   return import_react113.default.isValidElement(c) && c.type === RadioButton2;
 };
@@ -14352,7 +14417,7 @@ var RadioButtonGroup = (_a) => {
   ]);
   var _a2;
   const [value, setValue] = import_react113.default.useState((_a2 = _value != null ? _value : defaultValue) != null ? _a2 : "");
-  const errorMessageId = (0, import_utils28.useId)();
+  const errorMessageId = (0, import_utils30.useId)();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelControlProps = getLabelControlProps(props);
   if (_value !== void 0 && _value !== value) {
@@ -14407,9 +14472,9 @@ RadioButtonGroup.Skeleton.displayName = "RadioButtonGroup.Skeleton";
 
 // src/molecules/Section/Section.tsx
 var import_react118 = __toESM(require("react"));
-var import_utils29 = require("@react-aria/utils");
+var import_utils31 = require("@react-aria/utils");
 var import_web5 = require("@react-spring/web");
-var import_castArray6 = __toESM(require("lodash/castArray"));
+var import_castArray7 = __toESM(require("lodash/castArray"));
 var import_isUndefined9 = __toESM(require("lodash/isUndefined"));
 
 // src/molecules/Switch/Switch.tsx
@@ -14645,9 +14710,9 @@ var Section4 = (props) => {
     },
     immediate: !_collapsible
   }), { transform, backgroundColor } = _f, spring = __objRest(_f, ["transform", "backgroundColor"]);
-  const toggleId = (0, import_utils29.useId)();
-  const regionId = (0, import_utils29.useId)();
-  const titleId = (0, import_utils29.useId)();
+  const toggleId = (0, import_utils31.useId)();
+  const regionId = (0, import_utils31.useId)();
+  const titleId = (0, import_utils31.useId)();
   const hasTabs = isComponentType(children, Tabs);
   return /* @__PURE__ */ import_react118.default.createElement(Section3, {
     "aria-label": title,
@@ -14682,7 +14747,7 @@ var Section4 = (props) => {
   }, /* @__PURE__ */ import_react118.default.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ import_react118.default.createElement(Button.Icon, {
     "aria-label": menuAriaLabel,
     icon: import_more6.default
-  })), menu)), props.actions && (0, import_castArray6.default)(props.actions).filter(Boolean).map((action) => renderAction({ kind: "secondary", action })), props.switch && /* @__PURE__ */ import_react118.default.createElement(Switch2, __spreadValues({}, props.switch)), props.select && /* @__PURE__ */ import_react118.default.createElement(SelectBase, __spreadValues({
+  })), menu)), props.actions && (0, import_castArray7.default)(props.actions).filter(Boolean).map((action) => renderAction({ kind: "secondary", action })), props.switch && /* @__PURE__ */ import_react118.default.createElement(Switch2, __spreadValues({}, props.switch)), props.select && /* @__PURE__ */ import_react118.default.createElement(SelectBase, __spreadValues({
     "aria-labelledby": titleId
   }, props.select)))), !hasTabs && /* @__PURE__ */ import_react118.default.createElement(import_web5.animated.div, {
     className: tw(`h-[1px]`),
@@ -14915,7 +14980,7 @@ Stepper2.Step = Step2;
 
 // src/molecules/SwitchGroup/SwitchGroup.tsx
 var import_react122 = __toESM(require("react"));
-var import_utils32 = require("@react-aria/utils");
+var import_utils34 = require("@react-aria/utils");
 var SwitchGroup = (_a) => {
   var _b = _a, {
     value,
@@ -14937,7 +15002,7 @@ var SwitchGroup = (_a) => {
   if (value !== void 0 && value !== selectedItems) {
     setSelectedItems(value);
   }
-  const errorMessageId = (0, import_utils32.useId)();
+  const errorMessageId = (0, import_utils34.useId)();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelControlProps = getLabelControlProps(props);
   const handleChange = (e) => {
@@ -14981,7 +15046,7 @@ SwitchGroup.Skeleton.displayName = "SwitchGroup.Skeleton";
 
 // src/molecules/Textarea/Textarea.tsx
 var import_react123 = __toESM(require("react"));
-var import_utils34 = require("@react-aria/utils");
+var import_utils36 = require("@react-aria/utils");
 var import_omit16 = __toESM(require("lodash/omit"));
 var import_toString2 = __toESM(require("lodash/toString"));
 var TextareaBase = import_react123.default.forwardRef(
@@ -15001,9 +15066,9 @@ TextareaBase.Skeleton = () => /* @__PURE__ */ import_react123.default.createElem
 var Textarea = import_react123.default.forwardRef((props, ref) => {
   var _a, _b, _c;
   const [value, setValue] = (0, import_react123.useState)((_b = (_a = props.value) != null ? _a : props.defaultValue) != null ? _b : "");
-  const defaultId = (0, import_utils34.useId)();
+  const defaultId = (0, import_utils36.useId)();
   const id = (_c = props.id) != null ? _c : defaultId;
-  const errorMessageId = (0, import_utils34.useId)();
+  const errorMessageId = (0, import_utils36.useId)();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const _d = getLabelControlProps(props), { "data-testid": dataTestId } = _d, labelControlProps = __objRest(_d, ["data-testid"]);
   const baseProps = (0, import_omit16.default)(props, Object.keys(labelControlProps));