@aivenio/aquarium 2.4.0 → 2.5.0

package/dist/system.cjs

@@ -10410,6 +10410,14 @@ var Wrapper = import_react59.default.forwardRef(
   }
 );
 
+// src/molecules/Select/utils.ts
+var isOptionGroup = (val) => {
+  return (val == null ? void 0 : val.label) !== void 0 && Array.isArray(val == null ? void 0 : val.options);
+};
+var hasOptionGroups = (val) => {
+  return val.some(isOptionGroup);
+};
+
 // src/molecules/Combobox/Combobox.tsx
 var import_smallCross2 = __toESM(require_smallCross());
 var ComboboxBase = (_a) => {
@@ -10459,18 +10467,19 @@ var ComboboxBase = (_a) => {
     "readOnly"
   ]);
   var _a2;
+  const allOptions = hasOptionGroups(options) ? options.flatMap((g) => g.options) : options;
   const popoverRef = (0, import_react60.useRef)(null);
   const targetRef = (0, import_react60.useRef)(null);
   const menuRef = (0, import_react60.useRef)(null);
   const inputRef = (0, import_react60.useRef)(null);
-  const [inputItems, setInputItems] = (0, import_react60.useState)(options);
+  const [inputItems, setInputItems] = (0, import_react60.useState)(allOptions);
   const [hasFocus, setFocus] = (0, import_react60.useState)(false);
   const updateInputItems = (query, selected) => {
-    const keys = typeof options[0] === "string" ? void 0 : optionKeys;
+    const keys = typeof allOptions[0] === "string" ? void 0 : optionKeys;
     if (selected && itemToString(selected) === query) {
-      setInputItems(options);
+      setInputItems(allOptions);
     } else {
-      setInputItems(query ? (0, import_match_sorter.matchSorter)(options, query, { keys }) : options);
+      setInputItems(query ? (0, import_match_sorter.matchSorter)(allOptions, query, { keys }) : allOptions);
     }
   };
   const {
@@ -10522,6 +10531,20 @@ var ComboboxBase = (_a) => {
     toggle: toggleMenu,
     setOpen: (isOpen2) => isOpen2 ? openMenu() : closeMenu()
   };
+  const renderGroup = (group) => {
+    const groupInputItems = group.options.filter((o) => inputItems.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;
+  };
+  const renderItem = (item, index) => {
+    var _a3;
+    return /* @__PURE__ */ import_react60.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));
+  };
   (0, import_react60.useEffect)(() => {
     updateInputItems(inputValue, selectedItem);
   }, [JSON.stringify(options)]);
@@ -10562,19 +10585,18 @@ var ComboboxBase = (_a) => {
   })), !readOnly && /* @__PURE__ */ import_react60.default.createElement(Box.Flex, {
     alignItems: "center",
     gap: "2"
-  }, !!inputProps.value && !disabled && /* @__PURE__ */ import_react60.default.createElement("div", {
-    className: tw("group-hover:opacity-100", {
+  }, !!inputProps.value && !disabled && /* @__PURE__ */ import_react60.default.createElement(Button.Icon, {
+    UNSAFE_className: tw("group-hover:opacity-100 py-1", {
       "opacity-0": !hasFocus,
       "opacity-100": hasFocus
-    })
-  }, /* @__PURE__ */ import_react60.default.createElement(Button.Icon, {
+    }),
     icon: import_smallCross2.default,
     onClick: () => selectItem(null),
     onFocus: () => setFocus(true),
     onBlur: () => setFocus(false),
     "aria-label": "Clear selection",
     dense: true
-  })), /* @__PURE__ */ import_react60.default.createElement(Select.Toggle, __spreadValues({
+  }), /* @__PURE__ */ import_react60.default.createElement(Select.Toggle, __spreadValues({
     hasFocus,
     isOpen
   }, getToggleButtonProps({ disabled }))))), isOpen && /* @__PURE__ */ import_react60.default.createElement(PopoverOverlay, {
@@ -10587,14 +10609,7 @@ var ComboboxBase = (_a) => {
     style: { width: (_a2 = targetRef.current) == null ? void 0 : _a2.offsetWidth }
   }, /* @__PURE__ */ import_react60.default.createElement(Select.Menu, __spreadValues({
     maxHeight
-  }, menuProps), hasNoResults && /* @__PURE__ */ import_react60.default.createElement(Select.NoResults, null, emptyState), inputItems.map((item, index) => {
-    var _a3;
-    return /* @__PURE__ */ import_react60.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));
-  }))));
+  }, menuProps), hasNoResults && /* @__PURE__ */ import_react60.default.createElement(Select.NoResults, null, emptyState), inputItems.length > 0 && !hasOptionGroups(options) && inputItems.map(renderItem), inputItems.length > 0 && hasOptionGroups(options) && options.map(renderGroup))));
 };
 var ComboboxBaseSkeleton = () => /* @__PURE__ */ import_react60.default.createElement(Skeleton, {
   height: 38
@@ -10653,7 +10668,7 @@ var Container2 = ({ maxWidth = "xl", children }) => /* @__PURE__ */ import_react
 
 // src/molecules/DataList/DataList.tsx
 var import_react80 = __toESM(require("react"));
-var import_utils15 = require("@react-stately/utils");
+var import_utils16 = 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"));
@@ -10671,7 +10686,7 @@ var import_clamp = __toESM(require("lodash/clamp"));
 
 // src/molecules/Input/Input.tsx
 var import_react63 = __toESM(require("react"));
-var import_utils9 = require("@react-aria/utils");
+var import_utils10 = require("@react-aria/utils");
 var import_omit5 = __toESM(require("lodash/omit"));
 var import_toString = __toESM(require("lodash/toString"));
 
@@ -10824,9 +10839,9 @@ var createInputComponent = (displayName, options = {}) => {
       },
       [isControlled, onChangeProp]
     );
-    const defaultId = (0, import_utils9.useId)();
+    const defaultId = (0, import_utils10.useId)();
     const id = (_c = props.id) != null ? _c : defaultId;
-    const errorMessageId = (0, import_utils9.useId)();
+    const errorMessageId = (0, import_utils10.useId)();
     const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
     const _d = getLabelControlProps(inputProps), { "data-testid": dataTestId } = _d, labelControlProps = __objRest(_d, ["data-testid"]);
     const baseProps = (0, import_omit5.default)(
@@ -10863,7 +10878,7 @@ Input2.Skeleton.displayName = "Input.Skeleton";
 
 // src/molecules/Select/Select.tsx
 var import_react64 = __toESM(require("react"));
-var import_utils10 = require("@react-aria/utils");
+var import_utils11 = require("@react-aria/utils");
 var import_downshift2 = require("downshift");
 var import_defaults = __toESM(require("lodash/defaults"));
 var import_isArray = __toESM(require("lodash/isArray"));
@@ -10873,7 +10888,7 @@ var hasIconProperty = (val) => {
   var _a;
   return typeof val === "string" || ((_a = val == null ? void 0 : val.icon) == null ? void 0 : _a.body) !== void 0;
 };
-var hasOptionGroups = (val) => {
+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 }) => {
@@ -10955,7 +10970,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 = hasOptionGroups(options) ? options.flatMap((g) => g.options) : options;
+  const items = hasOptionGroups2(options) ? options.flatMap((g) => g.options) : options;
   const findItemByValue = (val) => {
     if (val === null) {
       return null;
@@ -11036,7 +11051,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 && !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, {
+  }, 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, {
     onMouseOver: () => setHighlightedIndex(-1)
   }), actions.map((act, index) => /* @__PURE__ */ import_react64.default.createElement(Select.ActionItem, __spreadProps(__spreadValues({
     key: `${index}`
@@ -11062,9 +11077,9 @@ var Select2 = (_a) => {
     "options"
   ]);
   var _a2;
-  const defaultId = (0, import_utils10.useId)();
+  const defaultId = (0, import_utils11.useId)();
   const id = (_a2 = props.id) != null ? _a2 : defaultId;
-  const errorMessageId = (0, import_utils10.useId)();
+  const errorMessageId = (0, import_utils11.useId)();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelProps = getLabelControlProps(props);
   const baseProps = (0, import_omit6.default)(props, Object.keys(labelProps));
@@ -11851,7 +11866,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_utils11 = require("@react-aria/utils");
+var import_utils12 = 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");
@@ -12050,7 +12065,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_utils11.mergeProps)(pressProps, props)));
+  return import_react74.default.cloneElement(trigger, __spreadValues({ ref }, (0, import_utils12.mergeProps)(pressProps, props)));
 };
 var isSectionNode = (item) => item.type === "section";
 var isItemNode = (item) => item.type === "item";
@@ -12740,12 +12755,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_utils15.useControlledState)(
+  const [selected, setSelected] = (0, import_utils16.useControlledState)(
     selectedRows,
     defaultSelectedRows,
     (value) => onSelectionChange == null ? void 0 : onSelectionChange(value != null ? value : [])
   );
-  const [expandedGroupIds, setExpandedGroupIds] = (0, import_utils15.useControlledState)(_expandedGroupIds, []);
+  const [expandedGroupIds, setExpandedGroupIds] = (0, import_utils16.useControlledState)(_expandedGroupIds, []);
   const onGroupToggled = (id, open) => {
     if (!open) {
       setExpandedGroupIds([...expandedGroupIds, id]);
@@ -13206,7 +13221,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_utils24 = require("@react-aria/utils");
+var import_utils25 = require("@react-aria/utils");
 var import_omit9 = __toESM(require("lodash/omit"));
 
 // src/molecules/DateField/DateInput.tsx
@@ -13284,7 +13299,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_utils21 = require("@react-aria/utils");
+var import_utils22 = 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"]);
@@ -13295,7 +13310,7 @@ function TimeFieldBase(_a) {
 }
 function TimeField(props) {
   const { labelProps, fieldProps } = (0, import_label.useLabel)({ label: props.labelText });
-  const errorMessageId = (0, import_utils21.useId)();
+  const errorMessageId = (0, import_utils22.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));
@@ -13332,7 +13347,7 @@ var import_chevronLeft4 = __toESM(require_chevronLeft());
 var import_chevronRight4 = __toESM(require_chevronRight());
 var cellStyles = (0, import_tailwind_variants4.tv)({
   extend: focusRing,
-  base: "w-8 h-8 typography-small cursor-default rounded flex items-center justify-center",
+  base: "w-8 h-8 typography-small cursor-default rounded-md flex items-center justify-center outside-month:hidden",
   variants: {
     isSelected: {
       false: "text-default hover:bg-default pressed:bg-intense",
@@ -13470,7 +13485,7 @@ var PickerTimeField = ({ granularity }) => {
 var createDatePicker = (variant) => (props) => {
   var _a;
   const { labelProps, fieldProps } = (0, import_label2.useLabel)({ label: props.labelText });
-  const errorMessageId = (0, import_utils24.useId)();
+  const errorMessageId = (0, import_utils25.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));
@@ -13487,7 +13502,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_utils26 = require("@react-aria/utils");
+var import_utils27 = require("@react-aria/utils");
 var import_omit10 = __toESM(require("lodash/omit"));
 var import_calendar3 = __toESM(require_calendar());
 
@@ -13497,7 +13512,7 @@ var import_react_aria_components9 = require("react-aria-components");
 var import_tailwind_variants5 = require("tailwind-variants");
 var cell = (0, import_tailwind_variants5.tv)({
   extend: focusRing,
-  base: "w-full h-full flex items-center justify-center rounded text-default",
+  base: "w-full h-full flex items-center justify-center rounded-md text-default",
   variants: {
     selectionState: {
       none: "group-hover:bg-default group-pressed:bg-intense",
@@ -13525,9 +13540,9 @@ function RangeCalendar(props) {
     date,
     className: tw(
       "group w-8 h-8 typography-small outline outline-0 cursor-default",
-      "outside-month:text-inactive selected:bg-primary-default",
+      "outside-month:hidden selected:bg-primary-default",
       "invalid:selected:bg-danger-default",
-      "selection-start:rounded-s selection-end:rounded-e"
+      "selection-start:rounded-s-md selection-end:rounded-e-md"
     )
   }, (_a) => {
     var _b = _a, { formattedDate, isSelected, isSelectionStart, isSelectionEnd } = _b, rest = __objRest(_b, ["formattedDate", "isSelected", "isSelectionStart", "isSelectionEnd"]);
@@ -13609,7 +13624,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_utils26.useId)();
+  const errorMessageId = (0, import_utils27.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));
@@ -13626,7 +13641,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_utils27 = require("@react-aria/utils");
+var import_utils28 = require("@react-aria/utils");
 var import_overlays7 = require("@react-stately/overlays");
 var import_omit11 = __toESM(require("lodash/omit"));
 
@@ -13885,8 +13900,8 @@ var DialogWrapper = ({
   secondaryAction
 }) => {
   const ref = import_react95.default.useRef(null);
-  const labelledBy = (0, import_utils27.useId)();
-  const describedBy = (0, import_utils27.useId)();
+  const labelledBy = (0, import_utils28.useId)();
+  const describedBy = (0, import_utils28.useId)();
   const { dialogProps } = (0, import_dialog.useDialog)(
     {
       "role": "alertdialog",
@@ -14346,7 +14361,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_utils29 = require("@react-aria/utils");
+var import_utils30 = require("@react-aria/utils");
 var import_overlays9 = require("@react-stately/overlays");
 var import_classnames10 = __toESM(require("classnames"));
 var import_omit13 = __toESM(require("lodash/omit"));
@@ -14459,7 +14474,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_utils29.mergeProps)(pressProps, trigger.props)), {
+  }, (0, import_utils30.mergeProps)(pressProps, trigger.props)), {
     "aria-controls": (_a2 = rest["aria-controls"]) != null ? _a2 : pressProps["aria-controls"]
   }));
 };
@@ -14921,7 +14936,7 @@ var ModalTabs = createTabsComponent(
 
 // src/molecules/MultiInput/MultiInput.tsx
 var import_react113 = __toESM(require("react"));
-var import_utils32 = require("@react-aria/utils");
+var import_utils33 = 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"));
@@ -15152,9 +15167,9 @@ var MultiInput = (props) => {
     var _a2;
     setValue((_a2 = props.value) != null ? _a2 : []);
   }, [JSON.stringify(props.value)]);
-  const defaultId = (0, import_utils32.useId)();
+  const defaultId = (0, import_utils33.useId)();
   const id = (_e = (_d = props.id) != null ? _d : props.name) != null ? _e : defaultId;
-  const errorMessageId = (0, import_utils32.useId)();
+  const errorMessageId = (0, import_utils33.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));
@@ -15185,21 +15200,13 @@ 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_utils33 = require("@react-aria/utils");
+var import_utils34 = require("@react-aria/utils");
 var import_downshift3 = require("downshift");
-var import_isArray4 = __toESM(require("lodash/isArray"));
 var import_isEqual = __toESM(require("lodash/isEqual"));
 var import_isNil2 = __toESM(require("lodash/isNil"));
-var import_isObject2 = __toESM(require("lodash/isObject"));
 var import_omit16 = __toESM(require("lodash/omit"));
 var import_omitBy = __toESM(require("lodash/omitBy"));
 var import_match_sorter2 = require("match-sorter");
-var isOptionGroup = (option) => {
-  return (0, import_isObject2.default)(option) && "options" in option && (0, import_isArray4.default)(option.options);
-};
-var hasOptionGroups2 = (options) => {
-  return options.some(isOptionGroup);
-};
 var MultiSelectBase = (_a) => {
   var _b = _a, {
     id,
@@ -15267,14 +15274,14 @@ var MultiSelectBase = (_a) => {
   );
   const keys = typeof options[0] === "string" ? void 0 : optionKeys;
   const selectedItemsAsStrings = selectedItems.map(itemToString);
-  const filteredOptions = hasOptionGroups2(options) ? options.map((option) => __spreadProps(__spreadValues({}, option), {
+  const filteredOptions = hasOptionGroups(options) ? options.map((option) => __spreadProps(__spreadValues({}, option), {
     options: (inputValue ? (0, import_match_sorter2.matchSorter)(option.options, inputValue, { keys }) : option.options).filter(
       (opt) => !selectedItemsAsStrings.includes(itemToString(opt))
     )
   })) : (inputValue ? (0, import_match_sorter2.matchSorter)(options, inputValue, { keys }) : options).filter(
     (opt) => !selectedItemsAsStrings.includes(itemToString(opt))
   );
-  const flattenedOptions = hasOptionGroups2(filteredOptions) ? filteredOptions.flatMap((group) => group.options) : filteredOptions;
+  const flattenedOptions = hasOptionGroups(filteredOptions) ? filteredOptions.flatMap((group) => group.options) : filteredOptions;
   const {
     isOpen,
     openMenu,
@@ -15431,9 +15438,9 @@ var MultiSelect = (_a) => {
     "emptyState"
   ]);
   var _a2;
-  const defaultId = (0, import_utils33.useId)();
+  const defaultId = (0, import_utils34.useId)();
   const id = (_a2 = props.id) != null ? _a2 : 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_omit16.default)(props, Object.keys(labelControlProps));
@@ -15457,7 +15464,7 @@ MultiSelect.Skeleton.displayName = "MultiSelect.Skeleton";
 
 // src/molecules/NativeSelect/NativeSelect.tsx
 var import_react115 = __toESM(require("react"));
-var import_utils34 = require("@react-aria/utils");
+var import_utils36 = require("@react-aria/utils");
 var import_omit17 = __toESM(require("lodash/omit"));
 var import_uniqueId = __toESM(require("lodash/uniqueId"));
 var import_caretDown2 = __toESM(require_caretDown());
@@ -15519,9 +15526,9 @@ var NativeSelect = import_react115.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { readOnly } = _b, props = __objRest(_b, ["readOnly"]);
     var _a2;
-    const defaultId = (0, import_utils34.useId)();
+    const defaultId = (0, import_utils36.useId)();
     const id = (_a2 = props.id) != null ? _a2 : 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 _b2 = getLabelControlProps(props), { "data-testid": dataTestId } = _b2, labelControlProps = __objRest(_b2, ["data-testid"]);
     const baseProps = (0, import_omit17.default)(props, Object.keys(labelControlProps));
@@ -15980,7 +15987,7 @@ RadioButton2.Skeleton.displayName = "RadioButton.Skeleton";
 
 // src/molecules/RadioButtonGroup/RadioButtonGroup.tsx
 var import_react125 = __toESM(require("react"));
-var import_utils36 = require("@react-aria/utils");
+var import_utils38 = require("@react-aria/utils");
 var isRadioButton = (c) => {
   return import_react125.default.isValidElement(c) && c.type === RadioButton2;
 };
@@ -16006,7 +16013,7 @@ var RadioButtonGroup = (_a) => {
   ]);
   var _a2;
   const [value, setValue] = import_react125.default.useState((_a2 = _value != null ? _value : defaultValue) != null ? _a2 : "");
-  const errorMessageId = (0, import_utils36.useId)();
+  const errorMessageId = (0, import_utils38.useId)();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelControlProps = getLabelControlProps(props);
   if (_value !== void 0 && _value !== value) {
@@ -16062,7 +16069,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_utils37 = require("@react-aria/utils");
+var import_utils39 = 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"));
@@ -16286,6 +16293,7 @@ var Section4 = (props) => {
   const _collapsed = title ? props.collapsed : void 0;
   const _defaultCollapsed = title ? (_b = props.defaultCollapsed) != null ? _b : false : false;
   const [isCollapsed, setCollapsed] = import_react130.default.useState(_collapsed != null ? _collapsed : _defaultCollapsed);
+  const [isResting, setResting] = import_react130.default.useState(true);
   const [ref, { height }] = useMeasure();
   const toggleAreaRef = (0, import_react130.useRef)(null);
   const menu = title ? (_c = props.menu) != null ? _c : void 0 : void 0;
@@ -16314,11 +16322,13 @@ var Section4 = (props) => {
     config: {
       duration: 150
     },
-    immediate: !_collapsible
+    immediate: !_collapsible,
+    onStart: () => setResting(false),
+    onRest: () => setResting(true)
   }), { transform } = _f, spring = __objRest(_f, ["transform"]);
-  const toggleId = (0, import_utils37.useId)();
-  const regionId = (0, import_utils37.useId)();
-  const titleId = (0, import_utils37.useId)();
+  const toggleId = (0, import_utils39.useId)();
+  const regionId = (0, import_utils39.useId)();
+  const titleId = (0, import_utils39.useId)();
   const hasTabs = isComponentType(children, Tabs);
   const { buttonProps } = (0, import_button4.useButton)(
     { "elementType": "div", "onPress": handleTitleClick, "aria-expanded": !isCollapsed, "aria-controls": regionId },
@@ -16368,7 +16378,7 @@ var Section4 = (props) => {
     id: regionId,
     "aria-hidden": _collapsible ? isCollapsed ? true : void 0 : void 0,
     style: spring,
-    className: tw({ "overflow-hidden": _collapsible })
+    className: tw({ "overflow-hidden": _collapsible && (isCollapsed || !isResting) })
   }, /* @__PURE__ */ import_react130.default.createElement("div", {
     ref
   }, hasTabs ? /* @__PURE__ */ import_react130.default.createElement(SectionTabs, __spreadProps(__spreadValues({}, children.props), {
@@ -16567,7 +16577,7 @@ Stepper2.Step = Step2;
 
 // src/molecules/SwitchGroup/SwitchGroup.tsx
 var import_react134 = __toESM(require("react"));
-var import_utils40 = require("@react-aria/utils");
+var import_utils42 = require("@react-aria/utils");
 var SwitchGroup = (_a) => {
   var _b = _a, {
     value,
@@ -16589,7 +16599,7 @@ var SwitchGroup = (_a) => {
   if (value !== void 0 && value !== selectedItems) {
     setSelectedItems(value);
   }
-  const errorMessageId = (0, import_utils40.useId)();
+  const errorMessageId = (0, import_utils42.useId)();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelControlProps = getLabelControlProps(props);
   const handleChange = (e) => {
@@ -16633,7 +16643,7 @@ SwitchGroup.Skeleton.displayName = "SwitchGroup.Skeleton";
 
 // src/molecules/Textarea/Textarea.tsx
 var import_react135 = __toESM(require("react"));
-var import_utils42 = require("@react-aria/utils");
+var import_utils44 = require("@react-aria/utils");
 var import_omit19 = __toESM(require("lodash/omit"));
 var import_toString2 = __toESM(require("lodash/toString"));
 var TextareaBase = import_react135.default.forwardRef(
@@ -16653,9 +16663,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_utils42.useId)();
+  const defaultId = (0, import_utils44.useId)();
   const id = (_c = props.id) != null ? _c : defaultId;
-  const errorMessageId = (0, import_utils42.useId)();
+  const errorMessageId = (0, import_utils44.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));