@aivenio/aquarium 2.5.2 → 2.6.0

package/dist/system.cjs

@@ -5976,7 +5976,11 @@ var tailwind_theme_default = {
         animationTimingFunction: "cubic-bezier(0,0,0.2,1)"
       }
     },
-    "positioner-fade-in": { from: { opacity: "0" }, to: { opacity: "1" } }
+    "positioner-fade-in": { from: { opacity: "0" }, to: { opacity: "1" } },
+    draw: {
+      from: { "stroke-dasharray": "1000", "stroke-dashoffset": "1000" },
+      to: { "stroke-dashoffset": "0" }
+    }
   },
   animation: {
     none: "none",
@@ -5984,7 +5988,8 @@ var tailwind_theme_default = {
     ping: "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite",
     pulse: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
     bounce: "bounce 1s infinite",
-    "positioner-fade-in": "positioner-fade-in 300ms ease-in-out"
+    "positioner-fade-in": "positioner-fade-in 300ms ease-in-out",
+    draw: "draw 2s cubic-bezier(0.47, 0, 0.745, 0.715) forwards"
   }
 };
 
@@ -10419,6 +10424,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());
@@ -10493,6 +10507,12 @@ var ComboboxBase = (_a) => {
       }
     }
   };
+  const findItemByValue = (val) => {
+    if (val === null) {
+      return null;
+    }
+    return val === void 0 ? void 0 : inputItems.find((opt) => defaultGetValue(opt) === defaultGetValue(val));
+  };
   const {
     isOpen,
     openMenu,
@@ -10508,8 +10528,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,
@@ -10679,11 +10699,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
@@ -10893,16 +10913,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({
@@ -10912,15 +10928,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, {
@@ -10980,7 +10987,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;
@@ -11061,7 +11068,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}`
@@ -11787,9 +11794,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) => {
@@ -11876,7 +11883,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");
@@ -12075,7 +12082,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";
@@ -12765,12 +12772,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]);
@@ -12782,7 +12789,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)([
@@ -12979,7 +12986,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);
@@ -13231,7 +13238,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
@@ -13309,7 +13316,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"]);
@@ -13320,7 +13327,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));
@@ -13495,7 +13502,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));
@@ -13512,7 +13519,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());
 
@@ -13634,7 +13641,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));
@@ -13651,7 +13658,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"));
 
@@ -13910,8 +13917,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",
@@ -14371,7 +14378,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"));
@@ -14484,7 +14491,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"]
   }));
 };
@@ -14653,7 +14660,7 @@ var layoutStyle = (layout) => {
 var isVerticalLayout = (layout) => layout === "vertical" /* Vertical */ || layout === "center-vertical" /* CenterVertical */;
 var EmptyState = ({
   title,
-  image,
+  image: Image2,
   imageAlt = "",
   imageWidth,
   description,
@@ -14685,11 +14692,13 @@ var EmptyState = ({
     justifyContent: template.justifyContent,
     alignItems: template.layout === "row" ? "center" : template.alignItems,
     height: fullHeight ? "full" : void 0
-  }, image && /* @__PURE__ */ import_react103.default.createElement("img", {
-    src: image,
+  }, Image2 && (typeof Image2 === "string" ? /* @__PURE__ */ import_react103.default.createElement("img", {
+    src: Image2,
     alt: imageAlt,
     style: { width: imageWidth ? `${imageWidth}px` : void 0, height: "auto" }
-  }), /* @__PURE__ */ import_react103.default.createElement(Box.Flex, {
+  }) : /* @__PURE__ */ import_react103.default.createElement("div", {
+    className: tw("animate-draw")
+  }, /* @__PURE__ */ import_react103.default.createElement(Image2, null))), /* @__PURE__ */ import_react103.default.createElement(Box.Flex, {
     flexDirection: "column",
     justifyContent: template.justifyContent,
     alignItems: template.alignItems
@@ -14946,7 +14955,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"));
@@ -15177,9 +15186,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));
@@ -15210,7 +15219,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"));
@@ -15448,9 +15457,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));
@@ -15474,7 +15483,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());
@@ -15536,9 +15545,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));
@@ -15997,7 +16006,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;
 };
@@ -16023,7 +16032,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) {
@@ -16079,7 +16088,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"));
@@ -16343,9 +16352,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 },
@@ -16594,7 +16603,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,
@@ -16616,7 +16625,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) => {
@@ -16660,7 +16669,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(
@@ -16680,9 +16689,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

@@ -5813,7 +5813,11 @@ var tailwind_theme_default = {
         animationTimingFunction: "cubic-bezier(0,0,0.2,1)"
       }
     },
-    "positioner-fade-in": { from: { opacity: "0" }, to: { opacity: "1" } }
+    "positioner-fade-in": { from: { opacity: "0" }, to: { opacity: "1" } },
+    draw: {
+      from: { "stroke-dasharray": "1000", "stroke-dashoffset": "1000" },
+      to: { "stroke-dashoffset": "0" }
+    }
   },
   animation: {
     none: "none",
@@ -5821,7 +5825,8 @@ var tailwind_theme_default = {
     ping: "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite",
     pulse: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
     bounce: "bounce 1s infinite",
-    "positioner-fade-in": "positioner-fade-in 300ms ease-in-out"
+    "positioner-fade-in": "positioner-fade-in 300ms ease-in-out",
+    draw: "draw 2s cubic-bezier(0.47, 0, 0.745, 0.715) forwards"
   }
 };
 
@@ -10256,6 +10261,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());
@@ -10330,6 +10344,12 @@ var ComboboxBase = (_a) => {
       }
     }
   };
+  const findItemByValue = (val) => {
+    if (val === null) {
+      return null;
+    }
+    return val === void 0 ? void 0 : inputItems.find((opt) => defaultGetValue(opt) === defaultGetValue(val));
+  };
   const {
     isOpen,
     openMenu,
@@ -10345,8 +10365,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,
@@ -10520,7 +10540,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
@@ -10730,16 +10750,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({
@@ -10749,15 +10765,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, {
@@ -10817,7 +10824,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;
@@ -10898,7 +10905,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}`
@@ -11624,9 +11631,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) => {
@@ -12619,7 +12626,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([
@@ -12816,7 +12823,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);
@@ -14518,7 +14525,7 @@ var layoutStyle = (layout) => {
 var isVerticalLayout = (layout) => layout === "vertical" /* Vertical */ || layout === "center-vertical" /* CenterVertical */;
 var EmptyState = ({
   title,
-  image,
+  image: Image2,
   imageAlt = "",
   imageWidth,
   description,
@@ -14550,11 +14557,13 @@ var EmptyState = ({
     justifyContent: template.justifyContent,
     alignItems: template.layout === "row" ? "center" : template.alignItems,
     height: fullHeight ? "full" : void 0
-  }, image && /* @__PURE__ */ React94.createElement("img", {
-    src: image,
+  }, Image2 && (typeof Image2 === "string" ? /* @__PURE__ */ React94.createElement("img", {
+    src: Image2,
     alt: imageAlt,
     style: { width: imageWidth ? `${imageWidth}px` : void 0, height: "auto" }
-  }), /* @__PURE__ */ React94.createElement(Box.Flex, {
+  }) : /* @__PURE__ */ React94.createElement("div", {
+    className: tw("animate-draw")
+  }, /* @__PURE__ */ React94.createElement(Image2, null))), /* @__PURE__ */ React94.createElement(Box.Flex, {
     flexDirection: "column",
     justifyContent: template.justifyContent,
     alignItems: template.alignItems

package/dist/tailwind.config.js

@@ -63,12 +63,22 @@ module.exports = {
       },
       animation: {
         'positioner-fade-in': 'positioner-fade-in 300ms ease-in-out',
+        'draw': 'draw 2s cubic-bezier(0.47, 0, 0.745, 0.715) forwards',
       },
       keyframes: {
         'positioner-fade-in': {
           from: { opacity: '0' },
           to: { opacity: '1' },
         },
+        'draw': {
+          from: {
+            'stroke-dasharray': '1000',
+            'stroke-dashoffset': '1000',
+          },
+          to: {
+            'stroke-dashoffset': '0',
+          },
+        },
       },
     },
   },
@@ -100,6 +110,7 @@ module.exports = {
     'line-clamp-4',
     'line-clamp-5',
     'line-clamp-6',
+    'animate-draw',
   ],
   plugins: [
     require('tailwindcss-children'),