@oliasoft-open-source/react-ui-library 5.8.10-beta-3 → 5.8.11-beta-1

package/dist/index.d.ts

@@ -82,6 +82,8 @@ export declare const CheckBox: ({ noMargin, dataix, isInTable, tabIndex, checked
 
 export declare const Chevron: ({ expanded }: IChevronProps) => JSX_2.Element;
 
+export declare const Collapse: ({ children, expanded }: ICollapseProps) => JSX_2.Element;
+
 export declare enum Color {
     DANGER = "danger",
     RED = "red",
@@ -323,6 +325,11 @@ export declare interface IChevronProps {
     expanded: boolean;
 }
 
+export declare interface ICollapseProps {
+    children: default_2.ReactNode;
+    expanded: boolean;
+}
+
 /**
  * Icon wrapper component to support different icon formats:
  *     - string names (default recommendation)

package/dist/index.js

@@ -5,6 +5,7 @@ import { TbAlertTriangle, TbArrowDown, TbArrowLeft, TbArrowRight, TbArrowUp, TbA
 import { VscCollapseAll, VscExpandAll } from "react-icons/vsc";
 import { AiOutlineMinusSquare, AiOutlinePlusSquare } from "react-icons/ai";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { CSSTransition } from "react-transition-group";
 import ResizeObserver$1 from "resize-observer-polyfill";
 import { Arrow, mergeRefs, useHover, useLayer, useMousePositionAsTrigger } from "react-laag";
 import { cloneDeep, cloneDeepWith, debounce, get, isArray, isBoolean, isEmpty, isEqual, isFunction, isNil, isNumber, isObject, isPlainObject, isString, noop, set, toLower, toNumber } from "lodash";
@@ -50,8 +51,8 @@ let TriggerType = /* @__PURE__ */ function(e) {
 	return e.TEXT = "text", e.RADIO = "radio", e.CHECKBOX = "checkbox", e;
 }({});
 var chevron_module_default = {
-	chevron: "_chevron_1kw4m_1",
-	expanded: "_expanded_1kw4m_9"
+	chevron: "_chevron_dd6mn_1",
+	expanded: "_expanded_dd6mn_9"
 };
 const DisabledContext = React.createContext(!1);
 var icon_module_default = {
@@ -253,8 +254,32 @@ var accordion_module_default = {
 	expanded: "_expanded_15p8j_36",
 	padding: "_padding_15p8j_44",
 	squareBottom: "_squareBottom_15p8j_47"
-};
-const AccordionBase = ({ heading: e, expanded: t = !1, bordered: n = !1, padding: r = !0, children: i, squareBottom: a = !1, onClick: o, testId: s }) => /* @__PURE__ */ jsxs("div", {
+}, collapse_module_default = {
+	collapse: "_collapse_1m1n2_5",
+	enter: "_enter_1m1n2_9",
+	enterActive: "_enterActive_1m1n2_12",
+	exit: "_exit_1m1n2_15",
+	exitActive: "_exitActive_1m1n2_18",
+	collapseInner: "_collapseInner_1m1n2_21"
+};
+const Collapse = ({ children: e, expanded: t }) => /* @__PURE__ */ jsx(CSSTransition, {
+	in: t,
+	timeout: 100,
+	classNames: {
+		enter: collapse_module_default.enter,
+		enterActive: collapse_module_default.enterActive,
+		exit: collapse_module_default.exit,
+		exitActive: collapse_module_default.exitActive
+	},
+	unmountOnExit: !0,
+	children: /* @__PURE__ */ jsx("div", {
+		className: collapse_module_default.collapse,
+		children: /* @__PURE__ */ jsx("div", {
+			className: collapse_module_default.collapseInner,
+			children: /* @__PURE__ */ jsx("div", { children: e })
+		})
+	})
+}), AccordionBase = ({ heading: e, expanded: t = !1, bordered: n = !1, padding: r = !0, children: i, squareBottom: a = !1, onClick: o, testId: s }) => /* @__PURE__ */ jsxs("div", {
 	className: cx(accordion_module_default.accordion, n ? accordion_module_default.bordered : "", t ? accordion_module_default.expanded : "", a ? accordion_module_default.squareBottom : ""),
 	children: [/* @__PURE__ */ jsxs("div", {
 		className: cx(accordion_module_default.accordionHeader, o ? accordion_module_default.clickable : ""),
@@ -264,9 +289,12 @@ const AccordionBase = ({ heading: e, expanded: t = !1, bordered: n = !1, padding
 			className: accordion_module_default.heading,
 			children: e
 		})]
-	}), t && i && /* @__PURE__ */ jsx("div", {
-		className: cx(accordion_module_default.accordionContent, n && r ? accordion_module_default.padding : ""),
-		children: i
+	}), /* @__PURE__ */ jsx(Collapse, {
+		expanded: t,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cx(accordion_module_default.accordionContent, n && r ? accordion_module_default.padding : ""),
+			children: i
+		})
 	})]
 }), AccordionManaged = ({ heading: t, bordered: n, padding: r, expanded: i = !1, children: a, testId: o }) => {
 	let [s, c] = React.useState(i);
@@ -301,9 +329,11 @@ var check_box_module_default = {
 	isInTable: "_isInTable_oo4mp_99",
 	helpIconEnabled: "_helpIconEnabled_oo4mp_102"
 }, tooltip_module_default = {
-	tooltip: "_tooltip_wli9z_1",
-	error: "_error_wli9z_15",
-	warning: "_warning_wli9z_19"
+	tooltip: "_tooltip_hixsm_1",
+	error: "_error_hixsm_15",
+	warning: "_warning_hixsm_19",
+	enter: "_enter_hixsm_23",
+	enterActive: "_enterActive_hixsm_26"
 };
 const TooltipLayer = ({ text: e = "", error: t = !1, warning: n = !1, maxWidth: r = "none", fontSize: i = "inherit", padding: a = "var(--padding-xxs) var(--padding-xs)", layerProps: o = { style: { position: "fixed" } }, arrowProps: s = { style: {
 	top: "100%",
@@ -344,16 +374,25 @@ const TooltipLayer = ({ text: e = "", error: t = !1, warning: n = !1, maxWidth:
 		possiblePlacements: a,
 		onParentClose: v
 	});
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [y && b(/* @__PURE__ */ jsx(TooltipLayer, {
-		text: t,
-		error: n,
-		warning: s,
-		padding: d,
-		maxWidth: c,
-		fontSize: u,
-		layerProps: S,
-		arrowProps: C
-	})), /* @__PURE__ */ jsx("span", {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(CSSTransition, {
+		in: y,
+		timeout: 100,
+		classNames: {
+			enter: tooltip_module_default.enter,
+			enterActive: tooltip_module_default.enterActive
+		},
+		unmountOnExit: !0,
+		children: /* @__PURE__ */ jsx(Fragment$1, { children: y && b(/* @__PURE__ */ jsx(TooltipLayer, {
+			text: t,
+			error: n,
+			warning: s,
+			padding: d,
+			maxWidth: c,
+			fontSize: u,
+			layerProps: S,
+			arrowProps: C
+		})) })
+	}), /* @__PURE__ */ jsx("span", {
 		...x,
 		..._,
 		style: {
@@ -586,35 +625,37 @@ var actions_module_default = {
 	actionComponentContainer: "_actionComponentContainer_1t7vd_14",
 	active: "_active_1t7vd_36"
 }, menu_module_default = {
-	wrapper: "_wrapper_9g7i6_1",
-	layer: "_layer_9g7i6_5",
-	layerContainer: "_layerContainer_9g7i6_8",
-	nested: "_nested_9g7i6_24",
-	fileInput: "_fileInput_9g7i6_36",
-	trigger: "_trigger_9g7i6_41",
-	middleAlignedInline: "_middleAlignedInline_9g7i6_50",
-	heading: "_heading_9g7i6_56",
-	headingIcon: "_headingIcon_9g7i6_62",
-	clickable: "_clickable_9g7i6_69",
-	option: "_option_9g7i6_73",
-	active: "_active_9g7i6_92",
-	disabled: "_disabled_9g7i6_97",
-	selected: "_selected_9g7i6_101",
-	optionContent: "_optionContent_9g7i6_108",
-	inline: "_inline_9g7i6_112",
-	icon: "_icon_9g7i6_117",
-	check: "_check_9g7i6_118",
-	text: "_text_9g7i6_144",
-	label: "_label_9g7i6_149",
-	description: "_description_9g7i6_160",
-	arrow: "_arrow_9g7i6_164",
-	divider: "_divider_9g7i6_168",
-	deprecatedSemanticIcon: "_deprecatedSemanticIcon_9g7i6_172",
-	buttonLabel: "_buttonLabel_9g7i6_180",
-	buttonCaret: "_buttonCaret_9g7i6_186",
-	component: "_component_9g7i6_190",
-	right: "_right_9g7i6_196",
-	actions: "_actions_9g7i6_201"
+	wrapper: "_wrapper_15ymr_1",
+	layer: "_layer_15ymr_5",
+	layerContainer: "_layerContainer_15ymr_8",
+	enter: "_enter_15ymr_24",
+	enterActive: "_enterActive_15ymr_28",
+	nested: "_nested_15ymr_33",
+	fileInput: "_fileInput_15ymr_54",
+	trigger: "_trigger_15ymr_59",
+	middleAlignedInline: "_middleAlignedInline_15ymr_68",
+	heading: "_heading_15ymr_74",
+	headingIcon: "_headingIcon_15ymr_80",
+	clickable: "_clickable_15ymr_87",
+	option: "_option_15ymr_91",
+	active: "_active_15ymr_110",
+	disabled: "_disabled_15ymr_115",
+	selected: "_selected_15ymr_119",
+	optionContent: "_optionContent_15ymr_126",
+	inline: "_inline_15ymr_130",
+	icon: "_icon_15ymr_135",
+	check: "_check_15ymr_136",
+	text: "_text_15ymr_162",
+	label: "_label_15ymr_167",
+	description: "_description_15ymr_178",
+	arrow: "_arrow_15ymr_182",
+	divider: "_divider_15ymr_186",
+	deprecatedSemanticIcon: "_deprecatedSemanticIcon_15ymr_190",
+	buttonLabel: "_buttonLabel_15ymr_198",
+	buttonCaret: "_buttonCaret_15ymr_204",
+	component: "_component_15ymr_208",
+	right: "_right_15ymr_214",
+	actions: "_actions_15ymr_219"
 };
 const Heading$3 = ({ label: e, onClick: t, icon: n, testId: r }) => /* @__PURE__ */ jsxs("div", {
 	onClick: (e) => e.stopPropagation(),
@@ -1023,24 +1064,33 @@ const DropDownMenu = ({ menu: e, width: t, disabled: n = !1, badgeTitle: r, badg
 		testId: g,
 		selected: S,
 		tabIndex: C
-	}), L && U(/* @__PURE__ */ jsx("div", {
-		...H,
-		className: menu_module_default.layerContainer,
-		"data-testid": e.testId,
-		onClick: (e) => e.stopPropagation(),
-		children: /* @__PURE__ */ jsx(Layer$2, {
-			sections: M,
-			isNested: o,
-			width: t,
-			closeOnOptionClick: c,
-			close: l || z,
-			tree: u,
-			path: d,
-			maxHeight: h,
-			showAllButton: F,
-			testId: g && `${g}-layer`
-		})
-	}))] });
+	}), /* @__PURE__ */ jsx(CSSTransition, {
+		in: L,
+		timeout: 100,
+		classNames: {
+			enter: menu_module_default.enter,
+			enterActive: menu_module_default.enterActive
+		},
+		unmountOnExit: !0,
+		children: /* @__PURE__ */ jsx(Fragment$1, { children: L && U(/* @__PURE__ */ jsx("div", {
+			...H,
+			className: menu_module_default.layerContainer,
+			"data-testid": e.testId,
+			onClick: (e) => e.stopPropagation(),
+			children: /* @__PURE__ */ jsx(Layer$2, {
+				sections: M,
+				isNested: o,
+				width: t,
+				closeOnOptionClick: c,
+				close: l || z,
+				tree: u,
+				path: d,
+				maxHeight: h,
+				showAllButton: F,
+				testId: g && `${g}-layer`
+			})
+		})) })
+	})] });
 }, Menu = (e) => e.contextMenu ? /* @__PURE__ */ jsx(ContextMenu, {
 	...e,
 	tree: {},
@@ -1710,22 +1760,37 @@ const FileInput = ({ label: e = "Select", loading: t = !1, placeholder: n = "No
 	}, [e]), n ? createPortal(t, n) : null;
 };
 var modal_module_default = {
-	wrapper: "_wrapper_sb0hc_1",
-	contentContainer: "_contentContainer_sb0hc_15",
-	centered: "_centered_sb0hc_24",
-	newLine: "_newLine_sb0hc_28"
-}, Wrapper = ({ children: e }) => {
-	let t = useRef(null);
+	wrapper: "_wrapper_1sv3a_1",
+	enter: "_enter_1sv3a_15",
+	enterActive: "_enterActive_1sv3a_18",
+	exit: "_exit_1sv3a_22",
+	exitActive: "_exitActive_1sv3a_25",
+	contentContainer: "_contentContainer_1sv3a_29",
+	centered: "_centered_1sv3a_52",
+	newLine: "_newLine_1sv3a_56"
+}, Wrapper = ({ children: e, visible: t }) => {
+	let n = useRef(null);
 	return useEffect(() => {
-		if (t.current) {
-			let e = t.current.querySelector("[tabindex=\"0\"]");
-			e ? e.focus() : t.current.focus();
+		if (n.current) {
+			let e = n.current.querySelector("[tabindex=\"0\"]");
+			e ? e.focus() : n.current.focus();
 		}
-	}, []), /* @__PURE__ */ jsx("div", {
-		ref: t,
-		tabIndex: -1,
-		className: cx(modal_module_default.wrapper),
-		children: e
+	}, []), /* @__PURE__ */ jsx(CSSTransition, {
+		in: t,
+		timeout: 100,
+		classNames: {
+			enter: modal_module_default.enter,
+			enterActive: modal_module_default.enterActive,
+			exit: modal_module_default.exit,
+			exitActive: modal_module_default.exitActive
+		},
+		unmountOnExit: !0,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: n,
+			tabIndex: -1,
+			className: cx(modal_module_default.wrapper),
+			children: e
+		})
 	});
 }, Content$2 = ({ children: e, width: t, centered: n }) => /* @__PURE__ */ jsx("div", {
 	className: cx(modal_module_default.contentContainer, n ? modal_module_default.centered : ""),
@@ -1744,14 +1809,17 @@ const Modal = ({ children: e, visible: t = !1, centered: n = !1, width: r = "100
 		t && i && i();
 	}, [t, i]), useKeyboardEvent("Escape", () => {
 		t && a && a();
-	}, [t, a]), /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(Portal, {
+	}, [t, a]), /* @__PURE__ */ jsx(Portal, {
 		id: o,
-		children: t ? /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsx(Content$2, {
-			width: r,
-			centered: n,
-			children: e
-		}) }) : null
-	}) });
+		children: /* @__PURE__ */ jsx(Wrapper, {
+			visible: t,
+			children: /* @__PURE__ */ jsx(Content$2, {
+				width: r,
+				centered: n,
+				children: e
+			})
+		})
+	});
 };
 var progress_bar_module_default = {
 	progress: "_progress_23ror_1",
@@ -1966,10 +2034,13 @@ var reducer$1 = (e, t) => {
 	className: cx(message_module_default.legendToggle),
 	onClick: n,
 	children: t ? "Hide details" : "Show details"
-}), t ? /* @__PURE__ */ jsx("div", {
-	className: message_module_default.detailsText,
-	children: e
-}) : null] }), DialogIcon = ({ type: e }) => {
+}), /* @__PURE__ */ jsx(Collapse, {
+	expanded: t,
+	children: /* @__PURE__ */ jsx("div", {
+		className: message_module_default.detailsText,
+		children: e
+	})
+})] }), DialogIcon = ({ type: e }) => {
 	switch (e) {
 		case MessageType.SUCCESS: return /* @__PURE__ */ jsx(Icon, {
 			icon: IconType.SUCCESS,
@@ -2154,20 +2225,22 @@ const useWindowWidth = () => {
 	}), []), e;
 };
 var custom_select_module_default = {
-	layerContainer: "_layerContainer_41zze_1",
-	layer: "_layer_41zze_1",
-	small: "_small_41zze_23",
-	heading: "_heading_41zze_26",
-	option: "_option_41zze_27",
-	message: "_message_41zze_28",
-	focused: "_focused_41zze_67",
-	selected: "_selected_41zze_71",
-	disabled: "_disabled_41zze_74",
-	check: "_check_41zze_78",
-	optionContent: "_optionContent_41zze_95",
-	label: "_label_41zze_100",
-	icon: "_icon_41zze_107",
-	details: "_details_41zze_112"
+	layerContainer: "_layerContainer_q5iac_1",
+	layer: "_layer_q5iac_1",
+	enter: "_enter_q5iac_14",
+	enterActive: "_enterActive_q5iac_18",
+	small: "_small_q5iac_32",
+	heading: "_heading_q5iac_35",
+	option: "_option_q5iac_36",
+	message: "_message_q5iac_37",
+	focused: "_focused_q5iac_76",
+	selected: "_selected_q5iac_80",
+	disabled: "_disabled_q5iac_83",
+	check: "_check_q5iac_87",
+	optionContent: "_optionContent_q5iac_104",
+	label: "_label_q5iac_109",
+	icon: "_icon_q5iac_116",
+	details: "_details_q5iac_121"
 };
 const Heading$2 = ({ label: e }) => /* @__PURE__ */ jsx("div", {
 	onClick: (e) => e.stopPropagation(),
@@ -2710,27 +2783,36 @@ const useCustomSelectLogic = ({ state: e, dispatch: t, options: n, setTriggerFoc
 			placeholder: u,
 			right: w,
 			testId: T
-		}), M.isLayerOpen && H(/* @__PURE__ */ jsx("div", {
-			...U,
-			className: custom_select_module_default.layerContainer,
-			children: /* @__PURE__ */ jsx(Layer$1, {
-				listRef: O,
-				isMulti: t,
-				sections: M.visibleOptions,
-				selectedOptions: c,
-				onSelectOption: (e, n) => {
-					G(e, n, t ? void 0 : W);
-				},
-				closeLayer: () => {
-					b && W();
-				},
-				width: K(q),
-				small: d,
-				focusedOptionIndex: M.layerFocus.current,
-				firstSelectedOptionIndex: C ?? 0,
-				testId: T && `${T}-layer`
-			})
-		}))]
+		}), /* @__PURE__ */ jsx(CSSTransition, {
+			in: M.isLayerOpen,
+			timeout: 100,
+			classNames: {
+				enter: custom_select_module_default.enter,
+				enterActive: custom_select_module_default.enterActive
+			},
+			unmountOnExit: !0,
+			children: /* @__PURE__ */ jsx(Fragment$1, { children: M.isLayerOpen && H(/* @__PURE__ */ jsx("div", {
+				...U,
+				className: custom_select_module_default.layerContainer,
+				children: /* @__PURE__ */ jsx(Layer$1, {
+					listRef: O,
+					isMulti: t,
+					sections: M.visibleOptions,
+					selectedOptions: c,
+					onSelectOption: (e, n) => {
+						G(e, n, t ? void 0 : W);
+					},
+					closeLayer: () => {
+						b && W();
+					},
+					width: K(q),
+					small: d,
+					focusedOptionIndex: M.layerFocus.current,
+					firstSelectedOptionIndex: C ?? 0,
+					testId: T && `${T}-layer`
+				})
+			})) })
+		})]
 	});
 }, isEmptyNullOrUndefined = (e) => e == null || e === "", isNumericLike = (e) => /^-?\d+(\.\d+)?$/.test(e.trim()), isMulti = (e) => e instanceof Array, standardizeOptions = (e, t) => t && Array.isArray(e) ? e.map((e) => typeof e == "string" || typeof e == "number" ? {
 	label: e,
@@ -3327,9 +3409,11 @@ const Slider = ({ name: e, label: t, width: n = "100%", labelWidth: r = "auto",
 	});
 }, ActionsCell = ({ cell: e }) => /* @__PURE__ */ jsx(Actions, { actions: e.actions });
 var popover_module_default = {
-	toggleBox: "_toggleBox_lhie5_1",
-	fullWidthStyleFix: "_fullWidthStyleFix_lhie5_8",
-	dismiss: "_dismiss_lhie5_13"
+	toggleBox: "_toggleBox_rwod1_1",
+	enter: "_enter_rwod1_8",
+	enterActive: "_enterActive_rwod1_12",
+	fullWidthStyleFix: "_fullWidthStyleFix_rwod1_17",
+	dismiss: "_dismiss_rwod1_22"
 };
 const Popover = ({ children: t, content: n, placement: r = "top-center", closeOnOutsideClick: i = !0, fullWidth: a = !1, showCloseButton: o = !1, testId: l, disabled: u = !1, overflowContainer: d = !1, isOpen: f, onToggle: p }) => {
 	let h = useContext(DisabledContext), [_, v] = f === void 0 ? useState(!1) : [f, p], y = () => {
@@ -3354,25 +3438,34 @@ const Popover = ({ children: t, content: n, placement: r = "top-center", closeOn
 		onClick: b,
 		"data-testid": l,
 		children: t
-	}), _ && x(/* @__PURE__ */ jsxs("div", {
-		className: a ? cx(popover_module_default.toggleBox, popover_module_default.fullWidthStyleFix) : cx(popover_module_default.toggleBox),
-		...C,
-		children: [/* @__PURE__ */ jsxs("div", { children: [React.isValidElement(n) ? React.cloneElement(n, { close: y }) : n, o && /* @__PURE__ */ jsx("div", {
-			className: popover_module_default.dismiss,
-			children: /* @__PURE__ */ jsx(Button, {
-				small: !0,
-				round: !0,
-				onClick: y,
-				icon: IconType.CLOSE
-			})
-		})] }), /* @__PURE__ */ jsx(Arrow, {
-			...S,
-			backgroundColor: "var(--color-background-layer)",
-			borderColor: "var(--color-border)",
-			borderWidth: 1,
-			size: 6
-		})]
-	}))] });
+	}), /* @__PURE__ */ jsx(CSSTransition, {
+		in: _,
+		timeout: 100,
+		classNames: {
+			enter: popover_module_default.enter,
+			enterActive: popover_module_default.enterActive
+		},
+		unmountOnExit: !0,
+		children: /* @__PURE__ */ jsx(Fragment$1, { children: _ && x(/* @__PURE__ */ jsxs("div", {
+			className: a ? cx(popover_module_default.toggleBox, popover_module_default.fullWidthStyleFix) : cx(popover_module_default.toggleBox),
+			...C,
+			children: [/* @__PURE__ */ jsxs("div", { children: [React.isValidElement(n) ? React.cloneElement(n, { close: y }) : n, o && /* @__PURE__ */ jsx("div", {
+				className: popover_module_default.dismiss,
+				children: /* @__PURE__ */ jsx(Button, {
+					small: !0,
+					round: !0,
+					onClick: y,
+					icon: IconType.CLOSE
+				})
+			})] }), /* @__PURE__ */ jsx(Arrow, {
+				...S,
+				backgroundColor: "var(--color-background-layer)",
+				borderColor: "var(--color-border)",
+				borderWidth: 1,
+				size: 6
+			})]
+		})) })
+	})] });
 }, CellHelpIcon = ({ cell: e }) => {
 	let { helpIcon: t } = e;
 	return t ? /* @__PURE__ */ jsx("div", {
@@ -6596,7 +6689,7 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 	} : {
 		value: G,
 		unit: U
-	}), Ad = k || K?.value === void 0, [J, jd] = useState(w ? PredefinedOptionsMenuState.PREDEFINED : PredefinedOptionsMenuState.CUSTOM), Md = !!(O || n), Y = C && C.find((e) => {
+	}), Nd = k || K?.value === void 0, [J, Pd] = useState(w ? PredefinedOptionsMenuState.PREDEFINED : PredefinedOptionsMenuState.CUSTOM), Fd = !!(O || n), Y = C && C.find((e) => {
 		if (!e?.value) return;
 		if (E) return E === e.valueKey;
 		let t = isValueWithUnit(e.value) ? getUnit(e.value) : "", { value: n = l } = convertUnit({
@@ -6605,7 +6698,7 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 			toUnit: t
 		});
 		return withUnit(n, t) === e.value;
-	}), Nd = () => {
+	}), Id = () => {
 		let e = l ?? "", t = K.unit;
 		if (checkConversion({
 			value: e,
@@ -6619,7 +6712,7 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 				return null;
 			}
 		} else return getAltUnitsListByQuantity(u)?.map((e) => ["", e?.unit]);
-	}, Pd = (t) => {
+	}, Ld = (t) => {
 		let n = getStringName(e), r = t.target, { value: i, selectionStart: a } = r, o = withUnit(i, K?.unit || ""), s = A ? withUnit(convertAndGetValue(o, B), B) : o;
 		h({ target: {
 			value: s,
@@ -6632,7 +6725,7 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 		}), R(() => {
 			r.selectionStart = a, r.selectionEnd = a;
 		});
-	}, Fd = (e, t) => {
+	}, Rd = (e, t) => {
 		t === K.unit || isNaN(Number(e)) || (q({
 			value: e,
 			unit: t
@@ -6663,7 +6756,7 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 			e !== void 0 && q({
 				value: e,
 				unit: t
-			}), C && jd(Y && T ? PredefinedOptionsMenuState.PREDEFINED : PredefinedOptionsMenuState.CUSTOM);
+			}), C && Pd(Y && T ? PredefinedOptionsMenuState.PREDEFINED : PredefinedOptionsMenuState.CUSTOM);
 		}
 	}, [
 		U,
@@ -6671,7 +6764,7 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 		i,
 		T
 	]);
-	let X = Nd(), Z = label(K.unit) || K.unit || "", Id = p || !X || X && X.length === 1, Q = getStringName(e), $, Ld = (t) => {
+	let X = Id(), Z = label(K.unit) || K.unit || "", zd = p || !X || X && X.length === 1, Q = getStringName(e), $, Bd = (t) => {
 		let r = t?.value ? t.value : "", [i = "", a = ""] = isValueWithUnit(r) ? split(r) : [r], o = withPrettyUnitLabel(r);
 		if (checkConversion({
 			value: r,
@@ -6691,7 +6784,7 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 			type: MenuType.OPTION,
 			inline: !0,
 			onClick: () => {
-				validateNumber(i).valid && !n && (jd(PredefinedOptionsMenuState.PREDEFINED), h({ target: {
+				validateNumber(i).valid && !n && (Pd(PredefinedOptionsMenuState.PREDEFINED), h({ target: {
 					value: r,
 					name: typeof e == "string" ? e : e?.fieldName || "",
 					predefinedSelected: !0,
@@ -6718,10 +6811,10 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 		label: "Custom",
 		selected: J === PredefinedOptionsMenuState.CUSTOM
 	}], C?.length) {
-		let e = C.map(Ld);
+		let e = C.map(Bd);
 		$ = [...$, ...e];
 	}
-	let Rd = (e) => {
+	let Vd = (e) => {
 		if (isValueWithUnit(e)) {
 			let t = getUnit(e), { value: n } = safeConvertValue({
 				value: e,
@@ -6733,7 +6826,7 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 			return n;
 		}
 		return e;
-	}, zd = !C && (!F || F === GroupOrder.FIRST) ? GroupOrder.FIRST : GroupOrder.MIDDLE, Bd = !F || F === GroupOrder.LAST ? GroupOrder.LAST : GroupOrder.MIDDLE;
+	}, Hd = !C && (!F || F === GroupOrder.FIRST) ? GroupOrder.FIRST : GroupOrder.MIDDLE, Ud = !F || F === GroupOrder.LAST ? GroupOrder.LAST : GroupOrder.MIDDLE;
 	return /* @__PURE__ */ jsx("div", {
 		className: J === PredefinedOptionsMenuState.PREDEFINED ? cx(unit_input_module_default.predefinedMenuActive) : "",
 		children: /* @__PURE__ */ jsxs(InputGroup, {
@@ -6765,31 +6858,31 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 						name: Q,
 						testId: x,
 						disabled: n,
-						placeholder: Rd(t),
+						placeholder: Vd(t),
 						value: K.value,
-						onChange: Pd,
+						onChange: Ld,
 						onFocus: v,
 						error: i === null ? void 0 : i,
 						warning: S === null ? void 0 : S,
 						left: a,
-						allowEmpty: Ad,
+						allowEmpty: Nd,
 						validationCallback: (e, t) => D(Q, t),
 						enableCosmeticRounding: j,
 						enableDisplayRounding: M,
 						roundDisplayValue: N,
-						groupOrder: zd,
-						disableInternalErrorValidationMessages: Md,
+						groupOrder: Hd,
+						disableInternalErrorValidationMessages: Fd,
 						small: o,
 						selectOnFocus: P,
 						tooltip: I
 					}, Q)
 				}),
-				Z && (Id || !H ? /* @__PURE__ */ jsx(InputGroupAddon, {
-					groupOrder: Bd,
+				Z && (zd || !H ? /* @__PURE__ */ jsx(InputGroupAddon, {
+					groupOrder: Ud,
 					small: o,
 					children: Z
 				}) : /* @__PURE__ */ jsx(Menu, {
-					groupOrder: Bd,
+					groupOrder: Ud,
 					maxHeight: 380,
 					disabled: r,
 					testId: x && `${x}-menu`,
@@ -6805,7 +6898,7 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 								label: j ? safeRoundNumbers(i) : i,
 								inline: !0,
 								onClick: (n) => {
-									n.stopPropagation(), Fd(e, t);
+									n.stopPropagation(), Rd(e, t);
 								},
 								description: r,
 								selected: r === Z,
@@ -8682,4 +8775,4 @@ const ComparisonViewModal = ({ auditLog: e, auditLogs: t, data: n, isOpen: r, se
 		}
 	});
 };
-export { Accordion, AccordionWithDefaultToggle, Actions, Align, AuditLog, Badge, Breadcrumb, BreadcrumbLinkType, Button, ButtonGroup, ButtonPosition, ButtonType, Card, CheckBox, Chevron, Color, Column, Dialog, DiffViewer, DisabledContext, Divider, Drawer, ElementType, Empty, Field, FileButton, FileInput, Flex, FormRow, Grid, GroupOrder, Heading, HelpIcon, Icon, IconType, Input, InputGroup, InputGroupAddon, InputReaderMethods, InputType, Label, List, ListHeading, ListSubheading, Loader, Menu, MenuCarat, MenuType, Message, MessageType, Modal, NativeSelect, NumberInput, OptionDropdown, Page, Pagination, PopConfirm, Popover, Portal, PrintHeader, ProgressBar, RadioButton, RichTextInput, Row, Select, SettingField, SideBar, Slider, SmartUploadModal, Spacer, Spinner, Table, TableImportExport, Tabs, Text, TextArea, TextLink, TextTransform, Theme, Toaster, Toggle, Tooltip, TopBar, Tree, TriggerType, UnitInput, UnitTable, dismissToast, initializeContext, initializeGuiLibrary, readFile, toast, useFocus, useKeyboardEvent, useWindowWidth };
+export { Accordion, AccordionWithDefaultToggle, Actions, Align, AuditLog, Badge, Breadcrumb, BreadcrumbLinkType, Button, ButtonGroup, ButtonPosition, ButtonType, Card, CheckBox, Chevron, Collapse, Color, Column, Dialog, DiffViewer, DisabledContext, Divider, Drawer, ElementType, Empty, Field, FileButton, FileInput, Flex, FormRow, Grid, GroupOrder, Heading, HelpIcon, Icon, IconType, Input, InputGroup, InputGroupAddon, InputReaderMethods, InputType, Label, List, ListHeading, ListSubheading, Loader, Menu, MenuCarat, MenuType, Message, MessageType, Modal, NativeSelect, NumberInput, OptionDropdown, Page, Pagination, PopConfirm, Popover, Portal, PrintHeader, ProgressBar, RadioButton, RichTextInput, Row, Select, SettingField, SideBar, Slider, SmartUploadModal, Spacer, Spinner, Table, TableImportExport, Tabs, Text, TextArea, TextLink, TextTransform, Theme, Toaster, Toggle, Tooltip, TopBar, Tree, TriggerType, UnitInput, UnitTable, dismissToast, initializeContext, initializeGuiLibrary, readFile, toast, useFocus, useKeyboardEvent, useWindowWidth };