@aivenio/aquarium 2.5.1 → 2.5.3

package/dist/system.cjs

@@ -8675,6 +8675,7 @@ var DotBadge = (_a) => {
   }));
 };
 var Badge = createBadge("default", "Badge");
+Badge.displayName = "Badge";
 Badge.Notification = NotificationBadge;
 Badge.Notification.displayName = "Badge.Notification";
 Badge.Dot = DotBadge;
@@ -10418,6 +10419,15 @@ var isOptionGroup = (val) => {
 var hasOptionGroups = (val) => {
   return val.some(isOptionGroup);
 };
+var defaultGetValue = (opt) => {
+  if (typeof opt === "string") {
+    return opt;
+  }
+  if (typeof opt.value === "string") {
+    return opt.value;
+  }
+  return opt;
+};
 
 // src/molecules/Combobox/Combobox.tsx
 var import_smallCross2 = __toESM(require_smallCross());
@@ -10480,8 +10490,23 @@ var ComboboxBase = (_a) => {
     if (selected && itemToString(selected) === query) {
       setInputItems(allOptions);
     } else {
-      setInputItems(query ? (0, import_match_sorter.matchSorter)(allOptions, query, { keys }) : allOptions);
+      if (hasOptionGroups(options)) {
+        const filteredGroupedOptions = options.flatMap(
+          (group) => query ? (0, import_match_sorter.matchSorter)(group.options, query, { keys, threshold: import_match_sorter.matchSorter.rankings.CONTAINS }) : group.options
+        );
+        setInputItems(filteredGroupedOptions);
+      } else {
+        setInputItems(
+          query ? (0, import_match_sorter.matchSorter)(allOptions, query, { keys, threshold: import_match_sorter.matchSorter.rankings.CONTAINS }) : allOptions
+        );
+      }
+    }
+  };
+  const findItemByValue = (val) => {
+    if (val === null) {
+      return null;
     }
+    return val === void 0 ? void 0 : inputItems.find((opt) => defaultGetValue(opt) === defaultGetValue(val));
   };
   const {
     isOpen,
@@ -10498,8 +10523,8 @@ var ComboboxBase = (_a) => {
     selectItem
   } = (0, import_downshift.useCombobox)({
     id,
-    selectedItem: value,
-    defaultSelectedItem: defaultValue,
+    selectedItem: findItemByValue(value),
+    defaultSelectedItem: findItemByValue(defaultValue),
     isItemDisabled: (item, index) => isOptionDisabled(item, index),
     itemToString,
     items: inputItems,
@@ -10533,7 +10558,7 @@ var ComboboxBase = (_a) => {
     setOpen: (isOpen2) => isOpen2 ? openMenu() : closeMenu()
   };
   const renderGroup = (group) => {
-    const groupInputItems = group.options.filter((o) => inputItems.includes(o));
+    const groupInputItems = inputItems.filter((o) => group.options.includes(o));
     return groupInputItems.length > 0 ? /* @__PURE__ */ import_react60.default.createElement(import_react60.default.Fragment, {
       key: group.label
     }, /* @__PURE__ */ import_react60.default.createElement(Select.Group, null, group.label), groupInputItems.map((opt) => renderItem(opt, inputItems.indexOf(opt)))) : null;
@@ -10669,11 +10694,11 @@ var Container2 = ({ maxWidth = "xl", children }) => /* @__PURE__ */ import_react
 
 // src/molecules/DataList/DataList.tsx
 var import_react80 = __toESM(require("react"));
-var import_utils16 = require("@react-stately/utils");
+var import_utils17 = 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"));
+var import_isArray2 = __toESM(require("lodash/isArray"));
 var import_isFunction3 = __toESM(require("lodash/isFunction"));
 
 // src/molecules/List/List.tsx
@@ -10883,16 +10908,12 @@ var import_utils11 = require("@react-aria/utils");
 var import_downshift2 = require("downshift");
 var import_lodash = require("lodash");
 var import_defaults = __toESM(require("lodash/defaults"));
-var import_isArray = __toESM(require("lodash/isArray"));
 var import_isNil = __toESM(require("lodash/isNil"));
 var import_omit6 = __toESM(require("lodash/omit"));
 var hasIconProperty = (val) => {
   var _a;
   return typeof val === "string" || ((_a = val == null ? void 0 : val.icon) == null ? void 0 : _a.body) !== void 0;
 };
-var hasOptionGroups2 = (val) => {
-  return !val.some((opt) => (opt == null ? void 0 : opt.label) === void 0 || !(0, import_isArray.default)(opt == null ? void 0 : opt.options));
-};
 var defaultRenderOption = (item, props, { selectedItem }, { getOptionKey, getValue, optionToString = getOptionLabelBuiltin }) => {
   var _a, _b;
   return /* @__PURE__ */ import_react64.default.createElement(Select.Item, __spreadValues({
@@ -10902,15 +10923,6 @@ var defaultRenderOption = (item, props, { selectedItem }, { getOptionKey, getVal
     icon: item.icon
   }), optionToString(item));
 };
-var defaultGetValue = (opt) => {
-  if (typeof opt === "string") {
-    return opt;
-  }
-  if (typeof opt.value === "string") {
-    return opt.value;
-  }
-  return "";
-};
 var _SelectBase = (props) => {
   var _b;
   const withDefaults = (0, import_defaults.default)({}, props, {
@@ -10970,7 +10982,7 @@ var _SelectBase = (props) => {
   const [hasFocus, setFocus] = (0, import_react64.useState)(false);
   const targetRef = (0, import_react64.useRef)(null);
   const menuRef = (0, import_react64.useRef)(null);
-  const items = hasOptionGroups2(options) ? options.flatMap((g) => g.options) : options;
+  const items = hasOptionGroups(options) ? options.flatMap((g) => g.options) : options;
   const findItemByValue = (val) => {
     if (val === null) {
       return null;
@@ -11051,7 +11063,7 @@ var _SelectBase = (props) => {
     style: { width: (_b = targetRef.current) == null ? void 0 : _b.offsetWidth }
   }, /* @__PURE__ */ import_react64.default.createElement(Select.Menu, __spreadValues({
     maxHeight
-  }, menuProps), options.length === 0 && /* @__PURE__ */ import_react64.default.createElement(Select.EmptyStateContainer, null, emptyState), options.length > 0 && !hasOptionGroups2(options) && options.map(renderItem), options.length > 0 && hasOptionGroups2(options) && options.map(renderGroup), actions.length > 0 && /* @__PURE__ */ import_react64.default.createElement(import_react64.default.Fragment, null, /* @__PURE__ */ import_react64.default.createElement(Select.Divider, {
+  }, menuProps), options.length === 0 && /* @__PURE__ */ import_react64.default.createElement(Select.EmptyStateContainer, null, emptyState), options.length > 0 && !hasOptionGroups(options) && options.map(renderItem), options.length > 0 && hasOptionGroups(options) && options.map(renderGroup), actions.length > 0 && /* @__PURE__ */ import_react64.default.createElement(import_react64.default.Fragment, null, /* @__PURE__ */ import_react64.default.createElement(Select.Divider, {
     onMouseOver: () => setHighlightedIndex(-1)
   }), actions.map((act, index) => /* @__PURE__ */ import_react64.default.createElement(Select.ActionItem, __spreadProps(__spreadValues({
     key: `${index}`
@@ -11777,9 +11789,9 @@ function useScrollStyles({
 }
 
 // src/utils/table/types.ts
-var import_isArray2 = __toESM(require("lodash/isArray"));
+var import_isArray = __toESM(require("lodash/isArray"));
 var areRowsGrouped = (rows) => {
-  return !(0, import_isArray2.default)(rows);
+  return !(0, import_isArray.default)(rows);
 };
 var toSortDirection = (direction) => direction === "ascending" ? "asc" : direction === "descending" ? "desc" : false;
 var cellProps = (column) => {
@@ -11866,7 +11878,7 @@ var import_i18n2 = require("@react-aria/i18n");
 var import_interactions2 = require("@react-aria/interactions");
 var import_menu2 = require("@react-aria/menu");
 var import_separator = require("@react-aria/separator");
-var import_utils12 = require("@react-aria/utils");
+var import_utils13 = require("@react-aria/utils");
 var import_collections = require("@react-stately/collections");
 var import_menu3 = require("@react-stately/menu");
 var import_tree = require("@react-stately/tree");
@@ -12065,7 +12077,7 @@ var TriggerWrapper = (_a) => {
   if (!trigger || !import_react74.default.isValidElement(trigger)) {
     throw new Error("<DropdownMenu.Trigger> must have valid child");
   }
-  return import_react74.default.cloneElement(trigger, __spreadValues({ ref }, (0, import_utils12.mergeProps)(pressProps, props)));
+  return import_react74.default.cloneElement(trigger, __spreadValues({ ref }, (0, import_utils13.mergeProps)(pressProps, props)));
 };
 var isSectionNode = (item) => item.type === "section";
 var isItemNode = (item) => item.type === "item";
@@ -12755,12 +12767,12 @@ var DataList2 = (_a) => {
   const containerRef = (0, import_react80.useRef)(null);
   const hasStickyColumns = columns.some((column) => column.sticky);
   const stickyStyles = useScrollStyles({ containerRef, skip: !hasStickyColumns });
-  const [selected, setSelected] = (0, import_utils16.useControlledState)(
+  const [selected, setSelected] = (0, import_utils17.useControlledState)(
     selectedRows,
     defaultSelectedRows,
     (value) => onSelectionChange == null ? void 0 : onSelectionChange(value != null ? value : [])
   );
-  const [expandedGroupIds, setExpandedGroupIds] = (0, import_utils16.useControlledState)(_expandedGroupIds, []);
+  const [expandedGroupIds, setExpandedGroupIds] = (0, import_utils17.useControlledState)(_expandedGroupIds, []);
   const onGroupToggled = (id, open) => {
     if (!open) {
       setExpandedGroupIds([...expandedGroupIds, id]);
@@ -12772,7 +12784,7 @@ var DataList2 = (_a) => {
   const defaultSortedColumn = columns.find((c) => c.headerName === (defaultSort == null ? void 0 : defaultSort.headerName));
   const initialSortState = defaultSortedColumn ? { column: defaultSortedColumn, direction: (_a2 = defaultSort == null ? void 0 : defaultSort.direction) != null ? _a2 : "ascending" } : {};
   const [sort, updateSort] = useTableSort(__spreadProps(__spreadValues({}, initialSortState), { onSortChanged }));
-  const sortedRows = (0, import_isArray3.default)(rows) ? sortRowsBy(rows, sort) : [];
+  const sortedRows = (0, import_isArray2.default)(rows) ? sortRowsBy(rows, sort) : [];
   const groups = areRowsGrouped(rows) ? rows : group ? (0, import_isFunction3.default)(group) ? group(sortedRows) : (0, import_groupBy2.default)(sortedRows, group) : void 0;
   const isCollapsible = (0, import_isFunction3.default)(rowDetails);
   const templateColumns = (0, import_compact.default)([
@@ -12969,7 +12981,7 @@ var DataList2 = (_a) => {
   }, componentContent) : componentContent;
   return /* @__PURE__ */ import_react80.default.createElement(DataListContext.Provider, {
     value: {
-      rows: (0, import_isArray3.default)(rows) ? sortedRows : rows,
+      rows: (0, import_isArray2.default)(rows) ? sortedRows : rows,
       selectedRows: selected
     }
   }, wrappedContent);
@@ -13221,7 +13233,7 @@ DataTable.Skeleton = DataListSkeleton;
 var import_react91 = __toESM(require("react"));
 var import_react_aria_components8 = require("react-aria-components");
 var import_label2 = require("@react-aria/label");
-var import_utils25 = require("@react-aria/utils");
+var import_utils26 = require("@react-aria/utils");
 var import_omit9 = __toESM(require("lodash/omit"));
 
 // src/molecules/DateField/DateInput.tsx
@@ -13299,7 +13311,7 @@ var FieldGroup = (props) => {
 var import_react86 = __toESM(require("react"));
 var import_react_aria_components3 = require("react-aria-components");
 var import_label = require("@react-aria/label");
-var import_utils22 = require("@react-aria/utils");
+var import_utils23 = require("@react-aria/utils");
 var import_omit8 = __toESM(require("lodash/omit"));
 function TimeFieldBase(_a) {
   var _b = _a, { disabled, valid } = _b, props = __objRest(_b, ["disabled", "valid"]);
@@ -13310,7 +13322,7 @@ function TimeFieldBase(_a) {
 }
 function TimeField(props) {
   const { labelProps, fieldProps } = (0, import_label.useLabel)({ label: props.labelText });
-  const errorMessageId = (0, import_utils22.useId)();
+  const errorMessageId = (0, import_utils23.useId)();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const _a = getLabelControlProps(props), { "data-testid": dataTestId } = _a, labelControlProps = __objRest(_a, ["data-testid"]);
   const baseProps = (0, import_omit8.default)(props, Object.keys(labelControlProps));
@@ -13485,7 +13497,7 @@ var PickerTimeField = ({ granularity }) => {
 var createDatePicker = (variant) => (props) => {
   var _a;
   const { labelProps, fieldProps } = (0, import_label2.useLabel)({ label: props.labelText });
-  const errorMessageId = (0, import_utils25.useId)();
+  const errorMessageId = (0, import_utils26.useId)();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId, "errorMessage": (_a = props.helperText) != null ? _a : props.error } : {};
   const _b = getLabelControlProps(props), { "data-testid": dataTestId } = _b, labelControlProps = __objRest(_b, ["data-testid"]);
   const baseProps = (0, import_omit9.default)(props, Object.keys(labelControlProps));
@@ -13502,7 +13514,7 @@ var DateTimePicker = createDatePicker("datetime");
 var import_react93 = __toESM(require("react"));
 var import_react_aria_components10 = require("react-aria-components");
 var import_label3 = require("@react-aria/label");
-var import_utils27 = require("@react-aria/utils");
+var import_utils28 = require("@react-aria/utils");
 var import_omit10 = __toESM(require("lodash/omit"));
 var import_calendar3 = __toESM(require_calendar());
 
@@ -13624,7 +13636,7 @@ var DateTimeRangePickerBase = createDateRangePickerBase("datetime");
 var createDateRangePicker = (variant) => (props) => {
   var _a;
   const { labelProps, fieldProps } = (0, import_label3.useLabel)({ label: props.labelText });
-  const errorMessageId = (0, import_utils27.useId)();
+  const errorMessageId = (0, import_utils28.useId)();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId, "errorMessage": (_a = props.helperText) != null ? _a : props.error } : {};
   const _b = getLabelControlProps(props), { "data-testid": dataTestId } = _b, labelControlProps = __objRest(_b, ["data-testid"]);
   const baseProps = (0, import_omit10.default)(props, Object.keys(labelControlProps));
@@ -13641,7 +13653,7 @@ var DateTimeRangePicker = createDateRangePicker("datetime");
 var import_react95 = __toESM(require("react"));
 var import_dialog = require("@react-aria/dialog");
 var import_overlays6 = require("@react-aria/overlays");
-var import_utils28 = require("@react-aria/utils");
+var import_utils29 = require("@react-aria/utils");
 var import_overlays7 = require("@react-stately/overlays");
 var import_omit11 = __toESM(require("lodash/omit"));
 
@@ -13900,8 +13912,8 @@ var DialogWrapper = ({
   secondaryAction
 }) => {
   const ref = import_react95.default.useRef(null);
-  const labelledBy = (0, import_utils28.useId)();
-  const describedBy = (0, import_utils28.useId)();
+  const labelledBy = (0, import_utils29.useId)();
+  const describedBy = (0, import_utils29.useId)();
   const { dialogProps } = (0, import_dialog.useDialog)(
     {
       "role": "alertdialog",
@@ -14361,7 +14373,7 @@ var import_react102 = __toESM(require("react"));
 var import_react101 = __toESM(require("react"));
 var import_interactions3 = require("@react-aria/interactions");
 var import_overlays8 = require("@react-aria/overlays");
-var import_utils30 = require("@react-aria/utils");
+var import_utils31 = require("@react-aria/utils");
 var import_overlays9 = require("@react-stately/overlays");
 var import_classnames10 = __toESM(require("classnames"));
 var import_omit13 = __toESM(require("lodash/omit"));
@@ -14474,7 +14486,7 @@ var PopoverTriggerWrapper = (_a) => {
   const { pressProps } = (0, import_interactions3.usePress)(__spreadProps(__spreadValues({}, rest), { ref }));
   return import_react101.default.cloneElement(trigger, __spreadProps(__spreadValues({
     "ref": ref
-  }, (0, import_utils30.mergeProps)(pressProps, trigger.props)), {
+  }, (0, import_utils31.mergeProps)(pressProps, trigger.props)), {
     "aria-controls": (_a2 = rest["aria-controls"]) != null ? _a2 : pressProps["aria-controls"]
   }));
 };
@@ -14936,7 +14948,7 @@ var ModalTabs = createTabsComponent(
 
 // src/molecules/MultiInput/MultiInput.tsx
 var import_react113 = __toESM(require("react"));
-var import_utils33 = require("@react-aria/utils");
+var import_utils34 = require("@react-aria/utils");
 var import_castArray5 = __toESM(require("lodash/castArray"));
 var import_identity = __toESM(require("lodash/identity"));
 var import_omit15 = __toESM(require("lodash/omit"));
@@ -15167,9 +15179,9 @@ var MultiInput = (props) => {
     var _a2;
     setValue((_a2 = props.value) != null ? _a2 : []);
   }, [JSON.stringify(props.value)]);
-  const defaultId = (0, import_utils33.useId)();
+  const defaultId = (0, import_utils34.useId)();
   const id = (_e = (_d = props.id) != null ? _d : props.name) != null ? _e : defaultId;
-  const errorMessageId = (0, import_utils33.useId)();
+  const errorMessageId = (0, import_utils34.useId)();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelControlProps = getLabelControlProps(props);
   const baseProps = (0, import_omit15.default)(props, Object.keys(labelControlProps));
@@ -15200,7 +15212,7 @@ MultiInput.Skeleton.displayName = "MultiInput.Skeleton";
 // src/molecules/MultiSelect/MultiSelect.tsx
 var import_react114 = __toESM(require("react"));
 var import_overlays10 = require("@react-aria/overlays");
-var import_utils34 = require("@react-aria/utils");
+var import_utils35 = require("@react-aria/utils");
 var import_downshift3 = require("downshift");
 var import_isEqual = __toESM(require("lodash/isEqual"));
 var import_isNil2 = __toESM(require("lodash/isNil"));
@@ -15438,9 +15450,9 @@ var MultiSelect = (_a) => {
     "emptyState"
   ]);
   var _a2;
-  const defaultId = (0, import_utils34.useId)();
+  const defaultId = (0, import_utils35.useId)();
   const id = (_a2 = props.id) != null ? _a2 : defaultId;
-  const errorMessageId = (0, import_utils34.useId)();
+  const errorMessageId = (0, import_utils35.useId)();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelControlProps = getLabelControlProps(props);
   const baseProps = (0, import_omit16.default)(props, Object.keys(labelControlProps));
@@ -15464,7 +15476,7 @@ MultiSelect.Skeleton.displayName = "MultiSelect.Skeleton";
 
 // src/molecules/NativeSelect/NativeSelect.tsx
 var import_react115 = __toESM(require("react"));
-var import_utils36 = require("@react-aria/utils");
+var import_utils37 = require("@react-aria/utils");
 var import_omit17 = __toESM(require("lodash/omit"));
 var import_uniqueId = __toESM(require("lodash/uniqueId"));
 var import_caretDown2 = __toESM(require_caretDown());
@@ -15526,9 +15538,9 @@ var NativeSelect = import_react115.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { readOnly } = _b, props = __objRest(_b, ["readOnly"]);
     var _a2;
-    const defaultId = (0, import_utils36.useId)();
+    const defaultId = (0, import_utils37.useId)();
     const id = (_a2 = props.id) != null ? _a2 : defaultId;
-    const errorMessageId = (0, import_utils36.useId)();
+    const errorMessageId = (0, import_utils37.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_omit17.default)(props, Object.keys(labelControlProps));
@@ -15987,7 +15999,7 @@ RadioButton2.Skeleton.displayName = "RadioButton.Skeleton";
 
 // src/molecules/RadioButtonGroup/RadioButtonGroup.tsx
 var import_react125 = __toESM(require("react"));
-var import_utils38 = require("@react-aria/utils");
+var import_utils39 = require("@react-aria/utils");
 var isRadioButton = (c) => {
   return import_react125.default.isValidElement(c) && c.type === RadioButton2;
 };
@@ -16013,7 +16025,7 @@ var RadioButtonGroup = (_a) => {
   ]);
   var _a2;
   const [value, setValue] = import_react125.default.useState((_a2 = _value != null ? _value : defaultValue) != null ? _a2 : "");
-  const errorMessageId = (0, import_utils38.useId)();
+  const errorMessageId = (0, import_utils39.useId)();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelControlProps = getLabelControlProps(props);
   if (_value !== void 0 && _value !== value) {
@@ -16069,7 +16081,7 @@ RadioButtonGroup.Skeleton.displayName = "RadioButtonGroup.Skeleton";
 // src/molecules/Section/Section.tsx
 var import_react130 = __toESM(require("react"));
 var import_button4 = require("@react-aria/button");
-var import_utils39 = require("@react-aria/utils");
+var import_utils40 = require("@react-aria/utils");
 var import_web6 = require("@react-spring/web");
 var import_castArray7 = __toESM(require("lodash/castArray"));
 var import_isUndefined9 = __toESM(require("lodash/isUndefined"));
@@ -16333,9 +16345,9 @@ var Section4 = (props) => {
     onStart: () => isMounted.current && setResting(false),
     onRest: () => isMounted.current && setResting(true)
   }), { transform } = _f, spring = __objRest(_f, ["transform"]);
-  const toggleId = (0, import_utils39.useId)();
-  const regionId = (0, import_utils39.useId)();
-  const titleId = (0, import_utils39.useId)();
+  const toggleId = (0, import_utils40.useId)();
+  const regionId = (0, import_utils40.useId)();
+  const titleId = (0, import_utils40.useId)();
   const hasTabs = isComponentType(children, Tabs);
   const { buttonProps } = (0, import_button4.useButton)(
     { "elementType": "div", "onPress": handleTitleClick, "aria-expanded": !isCollapsed, "aria-controls": regionId },
@@ -16584,7 +16596,7 @@ Stepper2.Step = Step2;
 
 // src/molecules/SwitchGroup/SwitchGroup.tsx
 var import_react134 = __toESM(require("react"));
-var import_utils42 = require("@react-aria/utils");
+var import_utils43 = require("@react-aria/utils");
 var SwitchGroup = (_a) => {
   var _b = _a, {
     value,
@@ -16606,7 +16618,7 @@ var SwitchGroup = (_a) => {
   if (value !== void 0 && value !== selectedItems) {
     setSelectedItems(value);
   }
-  const errorMessageId = (0, import_utils42.useId)();
+  const errorMessageId = (0, import_utils43.useId)();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelControlProps = getLabelControlProps(props);
   const handleChange = (e) => {
@@ -16650,7 +16662,7 @@ SwitchGroup.Skeleton.displayName = "SwitchGroup.Skeleton";
 
 // src/molecules/Textarea/Textarea.tsx
 var import_react135 = __toESM(require("react"));
-var import_utils44 = require("@react-aria/utils");
+var import_utils45 = require("@react-aria/utils");
 var import_omit19 = __toESM(require("lodash/omit"));
 var import_toString2 = __toESM(require("lodash/toString"));
 var TextareaBase = import_react135.default.forwardRef(
@@ -16670,9 +16682,9 @@ TextareaBase.Skeleton = () => /* @__PURE__ */ import_react135.default.createElem
 var Textarea = import_react135.default.forwardRef((props, ref) => {
   var _a, _b, _c;
   const [value, setValue] = (0, import_react135.useState)((_b = (_a = props.value) != null ? _a : props.defaultValue) != null ? _b : "");
-  const defaultId = (0, import_utils44.useId)();
+  const defaultId = (0, import_utils45.useId)();
   const id = (_c = props.id) != null ? _c : defaultId;
-  const errorMessageId = (0, import_utils44.useId)();
+  const errorMessageId = (0, import_utils45.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_omit19.default)(props, Object.keys(labelControlProps));

package/dist/system.mjs

@@ -8512,6 +8512,7 @@ var DotBadge = (_a) => {
   }));
 };
 var Badge = createBadge("default", "Badge");
+Badge.displayName = "Badge";
 Badge.Notification = NotificationBadge;
 Badge.Notification.displayName = "Badge.Notification";
 Badge.Dot = DotBadge;
@@ -10255,6 +10256,15 @@ var isOptionGroup = (val) => {
 var hasOptionGroups = (val) => {
   return val.some(isOptionGroup);
 };
+var defaultGetValue = (opt) => {
+  if (typeof opt === "string") {
+    return opt;
+  }
+  if (typeof opt.value === "string") {
+    return opt.value;
+  }
+  return opt;
+};
 
 // src/molecules/Combobox/Combobox.tsx
 var import_smallCross2 = __toESM(require_smallCross());
@@ -10317,8 +10327,23 @@ var ComboboxBase = (_a) => {
     if (selected && itemToString(selected) === query) {
       setInputItems(allOptions);
     } else {
-      setInputItems(query ? matchSorter(allOptions, query, { keys }) : allOptions);
+      if (hasOptionGroups(options)) {
+        const filteredGroupedOptions = options.flatMap(
+          (group) => query ? matchSorter(group.options, query, { keys, threshold: matchSorter.rankings.CONTAINS }) : group.options
+        );
+        setInputItems(filteredGroupedOptions);
+      } else {
+        setInputItems(
+          query ? matchSorter(allOptions, query, { keys, threshold: matchSorter.rankings.CONTAINS }) : allOptions
+        );
+      }
+    }
+  };
+  const findItemByValue = (val) => {
+    if (val === null) {
+      return null;
     }
+    return val === void 0 ? void 0 : inputItems.find((opt) => defaultGetValue(opt) === defaultGetValue(val));
   };
   const {
     isOpen,
@@ -10335,8 +10360,8 @@ var ComboboxBase = (_a) => {
     selectItem
   } = useCombobox({
     id,
-    selectedItem: value,
-    defaultSelectedItem: defaultValue,
+    selectedItem: findItemByValue(value),
+    defaultSelectedItem: findItemByValue(defaultValue),
     isItemDisabled: (item, index) => isOptionDisabled(item, index),
     itemToString,
     items: inputItems,
@@ -10370,7 +10395,7 @@ var ComboboxBase = (_a) => {
     setOpen: (isOpen2) => isOpen2 ? openMenu() : closeMenu()
   };
   const renderGroup = (group) => {
-    const groupInputItems = group.options.filter((o) => inputItems.includes(o));
+    const groupInputItems = inputItems.filter((o) => group.options.includes(o));
     return groupInputItems.length > 0 ? /* @__PURE__ */ React54.createElement(React54.Fragment, {
       key: group.label
     }, /* @__PURE__ */ React54.createElement(Select.Group, null, group.label), groupInputItems.map((opt) => renderItem(opt, inputItems.indexOf(opt)))) : null;
@@ -10510,7 +10535,7 @@ import { useControlledState } from "@react-stately/utils";
 import castArray2 from "lodash/castArray";
 import compact from "lodash/compact";
 import groupBy2 from "lodash/groupBy";
-import isArray3 from "lodash/isArray";
+import isArray2 from "lodash/isArray";
 import isFunction3 from "lodash/isFunction";
 
 // src/molecules/List/List.tsx
@@ -10720,16 +10745,12 @@ import { useId as useId8 } from "@react-aria/utils";
 import { useSelect } from "downshift";
 import { without } from "lodash";
 import defaults from "lodash/defaults";
-import isArray from "lodash/isArray";
 import isNil from "lodash/isNil";
 import omit6 from "lodash/omit";
 var hasIconProperty = (val) => {
   var _a;
   return typeof val === "string" || ((_a = val == null ? void 0 : val.icon) == null ? void 0 : _a.body) !== void 0;
 };
-var hasOptionGroups2 = (val) => {
-  return !val.some((opt) => (opt == null ? void 0 : opt.label) === void 0 || !isArray(opt == null ? void 0 : opt.options));
-};
 var defaultRenderOption = (item, props, { selectedItem }, { getOptionKey, getValue, optionToString = getOptionLabelBuiltin }) => {
   var _a, _b;
   return /* @__PURE__ */ React58.createElement(Select.Item, __spreadValues({
@@ -10739,15 +10760,6 @@ var defaultRenderOption = (item, props, { selectedItem }, { getOptionKey, getVal
     icon: item.icon
   }), optionToString(item));
 };
-var defaultGetValue = (opt) => {
-  if (typeof opt === "string") {
-    return opt;
-  }
-  if (typeof opt.value === "string") {
-    return opt.value;
-  }
-  return "";
-};
 var _SelectBase = (props) => {
   var _b;
   const withDefaults = defaults({}, props, {
@@ -10807,7 +10819,7 @@ var _SelectBase = (props) => {
   const [hasFocus, setFocus] = useState8(false);
   const targetRef = useRef7(null);
   const menuRef = useRef7(null);
-  const items = hasOptionGroups2(options) ? options.flatMap((g) => g.options) : options;
+  const items = hasOptionGroups(options) ? options.flatMap((g) => g.options) : options;
   const findItemByValue = (val) => {
     if (val === null) {
       return null;
@@ -10888,7 +10900,7 @@ var _SelectBase = (props) => {
     style: { width: (_b = targetRef.current) == null ? void 0 : _b.offsetWidth }
   }, /* @__PURE__ */ React58.createElement(Select.Menu, __spreadValues({
     maxHeight
-  }, menuProps), options.length === 0 && /* @__PURE__ */ React58.createElement(Select.EmptyStateContainer, null, emptyState), options.length > 0 && !hasOptionGroups2(options) && options.map(renderItem), options.length > 0 && hasOptionGroups2(options) && options.map(renderGroup), actions.length > 0 && /* @__PURE__ */ React58.createElement(React58.Fragment, null, /* @__PURE__ */ React58.createElement(Select.Divider, {
+  }, menuProps), options.length === 0 && /* @__PURE__ */ React58.createElement(Select.EmptyStateContainer, null, emptyState), options.length > 0 && !hasOptionGroups(options) && options.map(renderItem), options.length > 0 && hasOptionGroups(options) && options.map(renderGroup), actions.length > 0 && /* @__PURE__ */ React58.createElement(React58.Fragment, null, /* @__PURE__ */ React58.createElement(Select.Divider, {
     onMouseOver: () => setHighlightedIndex(-1)
   }), actions.map((act, index) => /* @__PURE__ */ React58.createElement(Select.ActionItem, __spreadProps(__spreadValues({
     key: `${index}`
@@ -11614,9 +11626,9 @@ function useScrollStyles({
 }
 
 // src/utils/table/types.ts
-import isArray2 from "lodash/isArray";
+import isArray from "lodash/isArray";
 var areRowsGrouped = (rows) => {
-  return !isArray2(rows);
+  return !isArray(rows);
 };
 var toSortDirection = (direction) => direction === "ascending" ? "asc" : direction === "descending" ? "desc" : false;
 var cellProps = (column) => {
@@ -12609,7 +12621,7 @@ var DataList2 = (_a) => {
   const defaultSortedColumn = columns.find((c) => c.headerName === (defaultSort == null ? void 0 : defaultSort.headerName));
   const initialSortState = defaultSortedColumn ? { column: defaultSortedColumn, direction: (_a2 = defaultSort == null ? void 0 : defaultSort.direction) != null ? _a2 : "ascending" } : {};
   const [sort, updateSort] = useTableSort(__spreadProps(__spreadValues({}, initialSortState), { onSortChanged }));
-  const sortedRows = isArray3(rows) ? sortRowsBy(rows, sort) : [];
+  const sortedRows = isArray2(rows) ? sortRowsBy(rows, sort) : [];
   const groups = areRowsGrouped(rows) ? rows : group ? isFunction3(group) ? group(sortedRows) : groupBy2(sortedRows, group) : void 0;
   const isCollapsible = isFunction3(rowDetails);
   const templateColumns = compact([
@@ -12806,7 +12818,7 @@ var DataList2 = (_a) => {
   }, componentContent) : componentContent;
   return /* @__PURE__ */ React72.createElement(DataListContext.Provider, {
     value: {
-      rows: isArray3(rows) ? sortedRows : rows,
+      rows: isArray2(rows) ? sortedRows : rows,
       selectedRows: selected
     }
   }, wrappedContent);