@povio/ui 2.3.3 → 3.0.0-rc.1

package/dist/components/inputs/Selection/shared/SelectInput.js

@@ -1,148 +1,427 @@
 import { ArrowDropDownIcon } from "../../../../assets/icons/ArrowDropDown.js";
-import { UIStyle } from "../../../../config/uiStyle.context.js";
+import { UIOverrides } from "../../../../config/uiOverrides.context.js";
 import { Typography } from "../../../text/Typography/Typography.js";
 import "../../../../config/i18n.js";
 import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
 import { InputClear } from "../../shared/InputClear.js";
-import { inputBase, inputSize } from "../../shared/input.cva.js";
+import { inputBaseDefinition, inputClearClass, inputSizeDefinition } from "../../shared/input.cva.js";
 import { SelectInputTags } from "./SelectInputTags.js";
 import { SelectContext } from "./select.context.js";
+import { selectInputTagsContentWrapperCva } from "./selectInput.cva.js";
+import { useKeyInteractions } from "../../../../hooks/useKeyInteractions.js";
+import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { use, useMemo, useRef, useState } from "react";
+import { use, useRef, useState } from "react";
 import { Button, ComboBoxStateContext, Input } from "react-aria-components";
 import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
 import { useTranslation } from "react-i18next";
 //#region src/components/inputs/Selection/shared/SelectInput.tsx
-var SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid, className, hideDropdownIcon, isSearchable, isClearable, showSelectionContent, inputClassName, fieldProps, headerProps, selectedTagsType, collapseAfter, onCloseComboBox, onBlur, ...props }) => {
-	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
-	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
+var SelectInput = (t0) => {
+	const $0 = c(123);
+	const { ref, placeholder, variant, as, size, isDisabled, isInvalid, className, hideDropdownIcon, isSearchable, isClearable, showSelectionContent, inputClassName, fieldProps, headerProps, selectedTagsType, collapseAfter, isRequired, isDirty, onCloseComboBox, onBlur, leadingContent, trailingContent, onMouseEnter, onFocusCapture, ...props } = t0;
+	const inputSizeCva = UIOverrides.useCva("input.sizeCva", inputSizeDefinition);
+	const inputBaseCva = UIOverrides.useCva("input.baseCva", inputBaseDefinition);
+	const inputClearClassCva = UIOverrides.useCva("input.clearClassCva", inputClearClass);
 	const { t } = useTranslation("ui");
 	const state = use(ComboBoxStateContext);
-	const { hoverProps, isHovered } = useHover({ isDisabled });
+	let t1;
+	if ($0[0] !== isDisabled) {
+		t1 = { isDisabled };
+		$0[0] = isDisabled;
+		$0[1] = t1;
+	} else t1 = $0[1];
+	const { hoverProps, isHovered } = useHover(t1);
 	const [isFocused, setIsFocused] = useState(false);
-	const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setIsFocused });
+	let t2;
+	if ($0[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = { onFocusWithinChange: setIsFocused };
+		$0[2] = t2;
+	} else t2 = $0[2];
+	const { focusWithinProps } = useFocusWithin(t2);
 	const { isFocusVisible } = useFocusVisible();
 	const inputRef = useRef(null);
 	const { fieldState, isOpen, setIsOpen, listItems, selectedItems, onChange, onClear, onRemove, isMultiple, isLoading } = SelectContext.useSelect();
 	const isEmpty = selectedItems.length === 0;
 	const showTags = isMultiple && !isEmpty;
-	const showClearButton = isClearable && (selectedItems.length > 0 || isSearchable && fieldState.inputValue !== "");
-	const labelProps = useMemo(() => {
-		const { labelProps: headerLabelProps } = headerProps ?? {};
-		if (!(as && ["filter", "floating"].includes(as)) || isSearchable) return headerLabelProps;
-		return {
-			...headerLabelProps,
-			className: clsx(headerLabelProps?.className, "pointer-events-none")
-		};
-	}, [
-		as,
-		headerProps,
-		isSearchable
-	]);
-	const onKeyDown = (e) => {
-		if (e.key === "Enter" && !isMultiple && !isLoading && listItems.length === 1 && !listItems[0].isDisabled) {
-			e.preventDefault();
+	const showClearButton = !isDisabled && isClearable && (selectedItems.length > 0 || isSearchable && fieldState.inputValue !== "");
+	let t3;
+	bb0: {
+		let t4;
+		if ($0[3] !== headerProps) {
+			t4 = headerProps ?? {};
+			$0[3] = headerProps;
+			$0[4] = t4;
+		} else t4 = $0[4];
+		const { labelProps: headerLabelProps } = t4;
+		if (!(as && ["filter", "floating"].includes(as)) || isSearchable) {
+			t3 = headerLabelProps;
+			break bb0;
+		}
+		const t5 = headerLabelProps?.className;
+		let t6;
+		if ($0[5] !== t5) {
+			t6 = clsx(t5, "pointer-events-none");
+			$0[5] = t5;
+			$0[6] = t6;
+		} else t6 = $0[6];
+		let t7;
+		if ($0[7] !== headerLabelProps || $0[8] !== t6) {
+			t7 = {
+				...headerLabelProps,
+				className: t6
+			};
+			$0[7] = headerLabelProps;
+			$0[8] = t6;
+			$0[9] = t7;
+		} else t7 = $0[9];
+		t3 = t7;
+	}
+	const labelProps = t3;
+	const t4 = !isMultiple && !isLoading && listItems.length === 1 && !listItems[0].isDisabled;
+	let t5;
+	if ($0[10] !== listItems || $0[11] !== onChange || $0[12] !== onCloseComboBox || $0[13] !== state) {
+		t5 = () => {
 			onChange(listItems[0].id);
 			onCloseComboBox?.(state);
-		}
-		if (e.key === "Backspace" && isMultiple && fieldState.inputValue === "" && Array.isArray(fieldState.value) && fieldState.value.length > 0) onChange(fieldState.value.slice(0, -1));
-	};
-	const onClick = () => {
-		if (isDisabled) return;
-		if (!isSearchable) {
-			setIsOpen(!isOpen);
-			return;
-		}
-		inputRef.current?.focus();
-	};
-	return /* @__PURE__ */ jsxs("div", {
-		ref,
-		className: inputBaseCva({
-			variant,
+		};
+		$0[10] = listItems;
+		$0[11] = onChange;
+		$0[12] = onCloseComboBox;
+		$0[13] = state;
+		$0[14] = t5;
+	} else t5 = $0[14];
+	let t6;
+	if ($0[15] !== t4 || $0[16] !== t5) {
+		t6 = {
+			enabled: t4,
+			preventDefault: true,
+			callback: t5
+		};
+		$0[15] = t4;
+		$0[16] = t5;
+		$0[17] = t6;
+	} else t6 = $0[17];
+	const t7 = isMultiple && fieldState.inputValue === "" && Array.isArray(fieldState.value) && fieldState.value.length > 0;
+	let t8;
+	if ($0[18] !== fieldState.value || $0[19] !== onChange) {
+		t8 = () => {
+			if (!Array.isArray(fieldState.value)) return;
+			onChange(fieldState.value.slice(0, -1));
+		};
+		$0[18] = fieldState.value;
+		$0[19] = onChange;
+		$0[20] = t8;
+	} else t8 = $0[20];
+	let t9;
+	if ($0[21] !== t7 || $0[22] !== t8) {
+		t9 = {
+			enabled: t7,
+			callback: t8
+		};
+		$0[21] = t7;
+		$0[22] = t8;
+		$0[23] = t9;
+	} else t9 = $0[23];
+	let t10;
+	if ($0[24] !== t6 || $0[25] !== t9) {
+		t10 = {
+			enter: t6,
+			backspace: t9
+		};
+		$0[24] = t6;
+		$0[25] = t9;
+		$0[26] = t10;
+	} else t10 = $0[26];
+	const { onKeyDown } = useKeyInteractions(t10);
+	let t11;
+	if ($0[27] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = ["up", "down"];
+		$0[27] = t11;
+	} else t11 = $0[27];
+	const t12 = !isSearchable && !isDisabled && !isOpen;
+	let t13;
+	if ($0[28] !== setIsOpen) {
+		t13 = () => {
+			setIsOpen(true);
+		};
+		$0[28] = setIsOpen;
+		$0[29] = t13;
+	} else t13 = $0[29];
+	let t14;
+	if ($0[30] !== t12 || $0[31] !== t13) {
+		t14 = { interactions: [{
+			actions: t11,
+			enabled: t12,
+			preventDefault: true,
+			callback: t13
+		}] };
+		$0[30] = t12;
+		$0[31] = t13;
+		$0[32] = t14;
+	} else t14 = $0[32];
+	const { onKeyDown: onTriggerKeyDown } = useKeyInteractions(t14);
+	let t15;
+	if ($0[33] !== isDisabled || $0[34] !== isOpen || $0[35] !== isSearchable || $0[36] !== setIsOpen) {
+		t15 = () => {
+			if (isDisabled) return;
+			if (!isSearchable) {
+				setIsOpen(!isOpen);
+				return;
+			}
+			inputRef.current?.focus();
+		};
+		$0[33] = isDisabled;
+		$0[34] = isOpen;
+		$0[35] = isSearchable;
+		$0[36] = setIsOpen;
+		$0[37] = t15;
+	} else t15 = $0[37];
+	const onClick = t15;
+	const t16 = inputBaseCva({
+		variant,
+		as,
+		...props,
+		className: clsx("group/select-content relative flex px-0!", !isDisabled && isSearchable && "cursor-text", className)
+	});
+	const t17 = "";
+	const t18 = isDisabled || void 0;
+	const t19 = isDisabled || void 0;
+	const t20 = isHovered || void 0;
+	const t21 = isOpen || isFocused || void 0;
+	const t22 = isFocused || void 0;
+	const t23 = isFocused && isSearchable || void 0;
+	const t24 = isFocused && isFocusVisible || void 0;
+	const t25 = !isEmpty || void 0;
+	const t26 = fieldState.searchValue !== "" || void 0;
+	const t27 = isInvalid || void 0;
+	const t28 = isEmpty || void 0;
+	const t29 = !isEmpty || void 0;
+	const t30 = isRequired || void 0;
+	const t31 = isDirty || void 0;
+	const t32 = "";
+	const t33 = clsx("relative flex flex-1 items-center gap-input-gap-input-text-to-elements truncate", !isDisabled && isSearchable && "cursor-text", !isDisabled && !isSearchable && "cursor-pointer", inputSizeCva({
+		as,
+		size,
+		...props
+	}));
+	let t34;
+	if ($0[38] !== as || $0[39] !== headerProps || $0[40] !== labelProps) {
+		t34 = as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
 			as,
-			...props,
-			className: clsx("group/select-content relative flex px-0!", !isDisabled && isSearchable && "cursor-text", className)
-		}),
-		"data-rac": "",
-		"data-disabled": isDisabled || void 0,
-		"data-hovered": isHovered || void 0,
-		"data-focused": isOpen || isFocused || void 0,
-		"data-focus-within": isFocused || void 0,
-		"data-searchable-focus-within": isFocused && isSearchable || void 0,
-		"data-focus-visible": isFocused && isFocusVisible || void 0,
-		"data-has-selection": !isEmpty || void 0,
-		"data-has-search": fieldState.searchValue !== "" || void 0,
-		"data-invalid": isInvalid || void 0,
-		"data-is-empty": isEmpty || void 0,
-		"data-select-input": "",
-		...hoverProps,
-		...focusWithinProps,
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: clsx("relative flex flex-1 items-center gap-input-gap-input-text-to-elements truncate", !isDisabled && isSearchable && "cursor-text", !isDisabled && !isSearchable && "cursor-pointer", inputSizeCva({
-					as,
-					size,
-					...props
-				})),
-				onClick,
-				children: [
-					as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
-						as,
-						...headerProps,
-						labelProps
-					}),
-					(showTags || isSearchable) && /* @__PURE__ */ jsxs("div", {
-						className: clsx("flex flex-1 flex-wrap gap-input-gap-input-text-to-elements truncate", !isSearchable && "pointer-events-none z-1"),
-						children: [showTags && /* @__PURE__ */ jsx(SelectInputTags, {
-							selectedItems,
-							isDisabled,
-							collapseAfter,
-							selectedTagsType,
-							onRemove
-						}), isSearchable && /* @__PURE__ */ jsx(Input, {
-							ref: inputRef,
-							placeholder: as === "floating" ? void 0 : placeholder,
-							onBlur,
-							className: clsx("w-full flex-1 bg-transparent outline-none placeholder:text-text-default-3", "disabled:text-text-default-3 disabled:placeholder:text-interactive-text-secondary-disabled", inputClassName),
-							onKeyDown,
-							...fieldProps
-						})]
-					}),
-					!isSearchable && /* @__PURE__ */ jsxs(Button, {
-						isDisabled,
-						onPress: () => setIsOpen(!isOpen),
-						onBlur,
-						"data-type": "select-trigger",
-						className: clsx("group/select-trigger w-full truncate text-start outline-none disabled:text-text-default-3", showTags && "absolute inset-0 z-0"),
-						...fieldProps,
-						children: [(as === "floating" && isEmpty || isMultiple && !isEmpty) && /* @__PURE__ */ jsx(Fragment, { children: "\xA0" }), (isEmpty || !isMultiple) && (as !== "floating" || !isEmpty) && /* @__PURE__ */ jsxs(Typography, {
-							size: "label-1",
-							className: clsx("truncate empty:before:inline-block empty:before:content-['']", isEmpty && "text-text-default-3 group-disabled/select-trigger:text-interactive-text-secondary-disabled"),
-							children: [isEmpty && placeholder, !isEmpty && (showSelectionContent ? selectedItems[0].content : selectedItems[0].label)]
-						})]
-					})
-				]
-			}),
-			isClearable && /* @__PURE__ */ jsx(InputClear, {
-				onClear,
-				show: showClearButton
-			}),
-			!hideDropdownIcon && /* @__PURE__ */ jsx(Button, {
-				excludeFromTabOrder: true,
-				"aria-label": t(($) => isOpen ? $.ui.closeAlt : $.ui.openAlt),
-				className: clsx("self-stretch pl-1-5 outline-none", inputSizeCva({ size })),
+			...headerProps,
+			labelProps
+		});
+		$0[38] = as;
+		$0[39] = headerProps;
+		$0[40] = labelProps;
+		$0[41] = t34;
+	} else t34 = $0[41];
+	let t35;
+	if ($0[42] !== leadingContent) {
+		t35 = leadingContent && /* @__PURE__ */ jsx("div", {
+			className: "ml-input-side-default flex shrink-0 items-center",
+			children: leadingContent
+		});
+		$0[42] = leadingContent;
+		$0[43] = t35;
+	} else t35 = $0[43];
+	let t36;
+	if ($0[44] !== as || $0[45] !== collapseAfter || $0[46] !== fieldProps || $0[47] !== inputClassName || $0[48] !== isDisabled || $0[49] !== isSearchable || $0[50] !== onBlur || $0[51] !== onKeyDown || $0[52] !== onRemove || $0[53] !== placeholder || $0[54] !== selectedItems || $0[55] !== selectedTagsType || $0[56] !== showTags) {
+		t36 = (showTags || isSearchable) && /* @__PURE__ */ jsxs("div", {
+			className: selectInputTagsContentWrapperCva({ isSearchable }),
+			children: [showTags && /* @__PURE__ */ jsx(SelectInputTags, {
+				selectedItems,
 				isDisabled,
-				onPress: () => {
-					if (!isSearchable) setIsOpen(!isOpen);
-				},
-				children: /* @__PURE__ */ jsx(ArrowDropDownIcon, {
-					className: clsx("size-6 shrink-0", isOpen && "rotate-180", isDisabled ? "text-interactive-text-secondary-disabled" : "text-interactive-text-secondary-idle"),
-					"aria-hidden": "true"
-				})
+				collapseAfter,
+				selectedTagsType,
+				onRemove
+			}), isSearchable && /* @__PURE__ */ jsx(Input, {
+				ref: inputRef,
+				placeholder: as === "floating" ? void 0 : placeholder,
+				onBlur,
+				className: clsx("w-full flex-1 bg-transparent outline-none placeholder:text-text-default-3", "disabled:text-text-default-3 disabled:placeholder:text-interactive-text-secondary-disabled", inputClassName),
+				onKeyDown,
+				...fieldProps
+			})]
+		});
+		$0[44] = as;
+		$0[45] = collapseAfter;
+		$0[46] = fieldProps;
+		$0[47] = inputClassName;
+		$0[48] = isDisabled;
+		$0[49] = isSearchable;
+		$0[50] = onBlur;
+		$0[51] = onKeyDown;
+		$0[52] = onRemove;
+		$0[53] = placeholder;
+		$0[54] = selectedItems;
+		$0[55] = selectedTagsType;
+		$0[56] = showTags;
+		$0[57] = t36;
+	} else t36 = $0[57];
+	let t37;
+	if ($0[58] !== as || $0[59] !== fieldProps || $0[60] !== isDisabled || $0[61] !== isEmpty || $0[62] !== isMultiple || $0[63] !== isOpen || $0[64] !== isSearchable || $0[65] !== onBlur || $0[66] !== onTriggerKeyDown || $0[67] !== placeholder || $0[68] !== selectedItems[0] || $0[69] !== setIsOpen || $0[70] !== showSelectionContent || $0[71] !== showTags) {
+		t37 = !isSearchable && /* @__PURE__ */ jsxs(Button, {
+			isDisabled,
+			onPress: () => setIsOpen(!isOpen),
+			onBlur,
+			"data-type": "select-trigger",
+			className: clsx("group/select-trigger w-full truncate text-start outline-none disabled:text-text-default-3", showTags && "absolute inset-0 z-0"),
+			onKeyDown: onTriggerKeyDown,
+			...fieldProps,
+			children: [(as === "floating" && isEmpty || isMultiple && !isEmpty) && /* @__PURE__ */ jsx(Fragment, { children: "\xA0" }), (isEmpty || !isMultiple) && (as !== "floating" || !isEmpty) && /* @__PURE__ */ jsxs(Typography, {
+				size: "label-1",
+				className: clsx("truncate empty:before:inline-block empty:before:content-['']", isEmpty && "text-text-default-3 group-disabled/select-trigger:text-interactive-text-secondary-disabled"),
+				children: [isEmpty && placeholder, !isEmpty && (showSelectionContent ? selectedItems[0].content : selectedItems[0].label)]
+			})]
+		});
+		$0[58] = as;
+		$0[59] = fieldProps;
+		$0[60] = isDisabled;
+		$0[61] = isEmpty;
+		$0[62] = isMultiple;
+		$0[63] = isOpen;
+		$0[64] = isSearchable;
+		$0[65] = onBlur;
+		$0[66] = onTriggerKeyDown;
+		$0[67] = placeholder;
+		$0[68] = selectedItems[0];
+		$0[69] = setIsOpen;
+		$0[70] = showSelectionContent;
+		$0[71] = showTags;
+		$0[72] = t37;
+	} else t37 = $0[72];
+	let t38;
+	if ($0[73] !== onClick || $0[74] !== t33 || $0[75] !== t34 || $0[76] !== t35 || $0[77] !== t36 || $0[78] !== t37) {
+		t38 = /* @__PURE__ */ jsxs("div", {
+			className: t33,
+			onClick,
+			children: [
+				t34,
+				t35,
+				t36,
+				t37
+			]
+		});
+		$0[73] = onClick;
+		$0[74] = t33;
+		$0[75] = t34;
+		$0[76] = t35;
+		$0[77] = t36;
+		$0[78] = t37;
+		$0[79] = t38;
+	} else t38 = $0[79];
+	let t39;
+	if ($0[80] !== as || $0[81] !== inputClearClassCva || $0[82] !== isClearable || $0[83] !== isDisabled || $0[84] !== onClear || $0[85] !== showClearButton) {
+		t39 = isClearable && !isDisabled && /* @__PURE__ */ jsx(InputClear, {
+			onClear: () => {
+				onClear();
+			},
+			className: inputClearClassCva({ as }),
+			show: showClearButton
+		});
+		$0[80] = as;
+		$0[81] = inputClearClassCva;
+		$0[82] = isClearable;
+		$0[83] = isDisabled;
+		$0[84] = onClear;
+		$0[85] = showClearButton;
+		$0[86] = t39;
+	} else t39 = $0[86];
+	let t40;
+	if ($0[87] !== trailingContent) {
+		t40 = trailingContent && /* @__PURE__ */ jsx("div", {
+			className: "flex shrink-0 items-center",
+			children: trailingContent
+		});
+		$0[87] = trailingContent;
+		$0[88] = t40;
+	} else t40 = $0[88];
+	let t41;
+	if ($0[89] !== hideDropdownIcon || $0[90] !== inputSizeCva || $0[91] !== isDisabled || $0[92] !== isOpen || $0[93] !== isSearchable || $0[94] !== setIsOpen || $0[95] !== size || $0[96] !== t) {
+		t41 = !hideDropdownIcon && /* @__PURE__ */ jsx(Button, {
+			excludeFromTabOrder: true,
+			"aria-label": t(($) => isOpen ? $.ui.closeAlt : $.ui.openAlt),
+			className: clsx("self-stretch pl-1-5 outline-none", inputSizeCva({ size })),
+			isDisabled,
+			onPress: () => {
+				if (!isSearchable) setIsOpen(!isOpen);
+			},
+			children: /* @__PURE__ */ jsx(ArrowDropDownIcon, {
+				className: clsx("size-6 shrink-0", isOpen && "rotate-180", isDisabled ? "text-interactive-text-secondary-disabled" : "text-interactive-text-secondary-idle"),
+				"aria-hidden": "true"
 			})
-		]
-	});
+		});
+		$0[89] = hideDropdownIcon;
+		$0[90] = inputSizeCva;
+		$0[91] = isDisabled;
+		$0[92] = isOpen;
+		$0[93] = isSearchable;
+		$0[94] = setIsOpen;
+		$0[95] = size;
+		$0[96] = t;
+		$0[97] = t41;
+	} else t41 = $0[97];
+	let t42;
+	if ($0[98] !== focusWithinProps || $0[99] !== hoverProps || $0[100] !== onFocusCapture || $0[101] !== onMouseEnter || $0[102] !== ref || $0[103] !== t16 || $0[104] !== t18 || $0[105] !== t19 || $0[106] !== t20 || $0[107] !== t21 || $0[108] !== t22 || $0[109] !== t23 || $0[110] !== t24 || $0[111] !== t25 || $0[112] !== t26 || $0[113] !== t27 || $0[114] !== t28 || $0[115] !== t29 || $0[116] !== t30 || $0[117] !== t31 || $0[118] !== t38 || $0[119] !== t39 || $0[120] !== t40 || $0[121] !== t41) {
+		t42 = /* @__PURE__ */ jsxs("div", {
+			ref,
+			className: t16,
+			"data-rac": t17,
+			"data-disabled": t18,
+			"data-is-disabled": t19,
+			"data-hovered": t20,
+			"data-focused": t21,
+			"data-focus-within": t22,
+			"data-searchable-focus-within": t23,
+			"data-focus-visible": t24,
+			"data-has-selection": t25,
+			"data-has-search": t26,
+			"data-invalid": t27,
+			"data-is-empty": t28,
+			"data-is-filled": t29,
+			"data-is-required": t30,
+			"data-is-dirty": t31,
+			"data-select-input": t32,
+			onMouseEnter,
+			onFocusCapture,
+			...hoverProps,
+			...focusWithinProps,
+			children: [
+				t38,
+				t39,
+				t40,
+				t41
+			]
+		});
+		$0[98] = focusWithinProps;
+		$0[99] = hoverProps;
+		$0[100] = onFocusCapture;
+		$0[101] = onMouseEnter;
+		$0[102] = ref;
+		$0[103] = t16;
+		$0[104] = t18;
+		$0[105] = t19;
+		$0[106] = t20;
+		$0[107] = t21;
+		$0[108] = t22;
+		$0[109] = t23;
+		$0[110] = t24;
+		$0[111] = t25;
+		$0[112] = t26;
+		$0[113] = t27;
+		$0[114] = t28;
+		$0[115] = t29;
+		$0[116] = t30;
+		$0[117] = t31;
+		$0[118] = t38;
+		$0[119] = t39;
+		$0[120] = t40;
+		$0[121] = t41;
+		$0[122] = t42;
+	} else t42 = $0[122];
+	return t42;
 };
 //#endregion
 export { SelectInput };

package/dist/components/inputs/Selection/shared/SelectInputTags.js

@@ -1,31 +1,105 @@
 import { Tag } from "../../../text/Tag/Tag.js";
+import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
 //#region src/components/inputs/Selection/shared/SelectInputTags.tsx
-var SelectInputTags = ({ selectedItems, isDisabled, selectedTagsType, collapseAfter, onRemove }) => {
-	const { displayedItems, remainingCount } = useMemo(() => {
-		if (!collapseAfter || selectedItems.length <= collapseAfter) return {
-			displayedItems: selectedItems,
-			remainingCount: 0
-		};
-		return {
-			displayedItems: selectedItems.slice(0, collapseAfter - 1),
-			remainingCount: selectedItems.length - (collapseAfter - 1)
-		};
-	}, [selectedItems, collapseAfter]);
-	if (selectedTagsType === "tags") return /* @__PURE__ */ jsxs(Fragment, { children: [displayedItems.map((item) => /* @__PURE__ */ jsx(Tag, {
-		dismissable: true,
-		isDisabled,
-		onDismiss: () => onRemove(item.id),
-		excludeFromTabOrder: true,
-		className: "z-1",
-		children: item.label
-	}, item.id)), remainingCount > 0 && /* @__PURE__ */ jsx(Tag, {
-		isDisabled,
-		excludeFromTabOrder: true,
-		children: `+${remainingCount} more`
-	}, "remaining-count")] });
-	return /* @__PURE__ */ jsx("p", { children: selectedItems.map((item) => item.label).join(", ") });
+var SelectInputTags = (t0) => {
+	const $ = c(25);
+	const { selectedItems, isDisabled, selectedTagsType, collapseAfter, onRemove } = t0;
+	let t1;
+	bb0: {
+		if (!collapseAfter || selectedItems.length <= collapseAfter) {
+			let t2;
+			if ($[0] !== selectedItems) {
+				t2 = {
+					displayedItems: selectedItems,
+					remainingCount: 0
+				};
+				$[0] = selectedItems;
+				$[1] = t2;
+			} else t2 = $[1];
+			t1 = t2;
+			break bb0;
+		}
+		let t2;
+		if ($[2] !== collapseAfter || $[3] !== selectedItems) {
+			t2 = selectedItems.slice(0, collapseAfter - 1);
+			$[2] = collapseAfter;
+			$[3] = selectedItems;
+			$[4] = t2;
+		} else t2 = $[4];
+		const t3 = selectedItems.length - (collapseAfter - 1);
+		let t4;
+		if ($[5] !== t2 || $[6] !== t3) {
+			t4 = {
+				displayedItems: t2,
+				remainingCount: t3
+			};
+			$[5] = t2;
+			$[6] = t3;
+			$[7] = t4;
+		} else t4 = $[7];
+		t1 = t4;
+	}
+	const { displayedItems, remainingCount } = t1;
+	if (selectedTagsType === "tags") {
+		let t2;
+		if ($[8] !== displayedItems || $[9] !== isDisabled || $[10] !== onRemove) {
+			let t3;
+			if ($[12] !== isDisabled || $[13] !== onRemove) {
+				t3 = (item) => /* @__PURE__ */ jsx(Tag, {
+					dismissable: true,
+					isDisabled,
+					onDismiss: () => onRemove(item.id),
+					excludeFromTabOrder: true,
+					className: "z-1",
+					children: item.label
+				}, item.id);
+				$[12] = isDisabled;
+				$[13] = onRemove;
+				$[14] = t3;
+			} else t3 = $[14];
+			t2 = displayedItems.map(t3);
+			$[8] = displayedItems;
+			$[9] = isDisabled;
+			$[10] = onRemove;
+			$[11] = t2;
+		} else t2 = $[11];
+		let t3;
+		if ($[15] !== isDisabled || $[16] !== remainingCount) {
+			t3 = remainingCount > 0 && /* @__PURE__ */ jsx(Tag, {
+				isDisabled,
+				excludeFromTabOrder: true,
+				children: `+${remainingCount} more`
+			}, "remaining-count");
+			$[15] = isDisabled;
+			$[16] = remainingCount;
+			$[17] = t3;
+		} else t3 = $[17];
+		let t4;
+		if ($[18] !== t2 || $[19] !== t3) {
+			t4 = /* @__PURE__ */ jsxs(Fragment, { children: [t2, t3] });
+			$[18] = t2;
+			$[19] = t3;
+			$[20] = t4;
+		} else t4 = $[20];
+		return t4;
+	}
+	let t2;
+	if ($[21] !== selectedItems) {
+		t2 = selectedItems.map(_temp).join(", ");
+		$[21] = selectedItems;
+		$[22] = t2;
+	} else t2 = $[22];
+	let t3;
+	if ($[23] !== t2) {
+		t3 = /* @__PURE__ */ jsx("p", { children: t2 });
+		$[23] = t2;
+		$[24] = t3;
+	} else t3 = $[24];
+	return t3;
 };
+function _temp(item_0) {
+	return item_0.label;
+}
 //#endregion
 export { SelectInputTags };