@povio/ui 2.2.5 → 2.2.7

package/dist/components/inputs/RadioGroup/radio.cva.js

@@ -1,7 +1,8 @@
 import { uiGroupOutlineClass } from "../../outline.clsx.js";
 import { compoundMapper } from "../../../utils/compoundMapper.js";
 import { cva } from "class-variance-authority";
-const radio = cva([
+//#region src/components/inputs/RadioGroup/radio.cva.ts
+var radio = cva([
 	"flex items-center justify-center border-2",
 	"relative size-3-5 rounded-full p-1-5",
 	"before:absolute before:hidden before:size-1 before:rounded-full",
@@ -24,9 +25,11 @@ const radio = cva([
 	] } },
 	defaultVariants: { variant: "default" }
 });
-const radioIndicatorClass = "group flex items-center gap-2";
-const radioTypography = compoundMapper({ default: {
+var radioIndicatorClass = "group flex items-center gap-2";
+var radioTypography = compoundMapper({ default: {
 	size: "label-1",
+	sizeMobile: "label-1",
 	variant: "default"
 } });
+//#endregion
 export { radio, radioIndicatorClass, radioTypography };

package/dist/components/inputs/Selection/Autocomplete/Autocomplete.js

@@ -2,7 +2,8 @@ import { SelectBase } from "../shared/SelectBase.js";
 import { jsx } from "react/jsx-runtime";
 import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
-const Autocomplete = (props) => {
+//#region src/components/inputs/Selection/Autocomplete/Autocomplete.tsx
+var Autocomplete = (props) => {
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
@@ -25,4 +26,5 @@ const Autocomplete = (props) => {
 		isSearchable: true
 	});
 };
+//#endregion
 export { Autocomplete };

package/dist/components/inputs/Selection/Autocomplete/QueryAutocomplete.js

@@ -1,7 +1,8 @@
 import { Autocomplete } from "./Autocomplete.js";
 import { jsx } from "react/jsx-runtime";
 import { useState } from "react";
-const QueryAutocomplete = ({ query, queryParams, queryOptions, ...props }) => {
+//#region src/components/inputs/Selection/Autocomplete/QueryAutocomplete.tsx
+var QueryAutocomplete = ({ query, queryParams, queryOptions, ...props }) => {
 	const [search, setSearch] = useState("");
 	const { data: items, isLoading } = query({
 		search,
@@ -15,4 +16,5 @@ const QueryAutocomplete = ({ query, queryParams, queryOptions, ...props }) => {
 		isLoading
 	});
 };
+//#endregion
 export { QueryAutocomplete };

package/dist/components/inputs/Selection/Select/Select.js

@@ -2,7 +2,8 @@ import { SelectBase } from "../shared/SelectBase.js";
 import { jsx } from "react/jsx-runtime";
 import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
-const Select = (props) => {
+//#region src/components/inputs/Selection/Select/Select.tsx
+var Select = (props) => {
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
@@ -21,4 +22,5 @@ const Select = (props) => {
 	}
 	return /* @__PURE__ */ jsx(SelectBase, { ...props });
 };
+//#endregion
 export { Select };

package/dist/components/inputs/Selection/shared/SelectBase.d.ts

@@ -9,6 +9,7 @@ export type SelectBaseProps<TKey extends Key = Key, TInitialSelectItem = Default
     className?: string;
     placeholder?: string;
     hideDropdownIcon?: boolean;
+    hideSearchIcon?: boolean;
     isSearchable?: boolean;
     isClearable?: boolean;
     isClientSearchDisabled?: boolean;

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

@@ -4,7 +4,8 @@ import { SelectContext } from "./select.context.js";
 import { SelectDesktop } from "./SelectDesktop.js";
 import { SelectMobile } from "./SelectMobile.js";
 import { jsx } from "react/jsx-runtime";
-const SelectBase = (dProps) => {
+//#region src/components/inputs/Selection/shared/SelectBase.tsx
+var SelectBase = (dProps) => {
 	const ui = UIConfig.useConfig();
 	const props = {
 		...dProps,
@@ -17,7 +18,8 @@ const SelectBase = (dProps) => {
 		isSearchable: dProps.isSearchable ?? ui.select.isSearchable,
 		selectedTagsType: dProps.selectedTagsType ?? ui.select.selectedTagsType,
 		ignoreTriggerWidth: dProps.virtualizerOptions || dProps.items.length > 100 ? false : dProps.ignoreTriggerWidth ?? false,
-		collapseAfter: dProps.collapseAfter ?? ui.select.collapseAfter
+		collapseAfter: dProps.collapseAfter ?? ui.select.collapseAfter,
+		hideSearchIcon: dProps.hideSearchIcon ?? ui.select.hideSearchIcon
 	};
 	const isDesktop = useBreakpoint("md");
 	return /* @__PURE__ */ jsx(SelectContext.Provider, {
@@ -25,4 +27,5 @@ const SelectBase = (dProps) => {
 		children: isDesktop ? /* @__PURE__ */ jsx(SelectDesktop, { ...props }) : /* @__PURE__ */ jsx(SelectMobile, { ...props })
 	});
 };
+//#endregion
 export { SelectBase };

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

@@ -2,7 +2,7 @@ import { UIStyle } from "../../../../config/uiStyle.context.js";
 import { popover } from "../../../shared/popover.cva.js";
 import { FormField } from "../../FormField/FormField.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
-import { SelectAllItemId } from "./useSelectItems.js";
+import "./useSelectItems.js";
 import { SelectContext } from "./select.context.js";
 import { SelectInput } from "./SelectInput.js";
 import { SelectListBox } from "./SelectListBox.js";
@@ -12,7 +12,8 @@ import { Fragment as Fragment$1, useLayoutEffect, useMemo, useRef, useState } fr
 import { ComboBox, DialogTrigger, Popover } from "react-aria-components";
 import { useLabel, usePreventScroll } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
-const SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, inputClassName, containerClassName, customTrigger, onBlur, ...props }) => {
+//#region src/components/inputs/Selection/shared/SelectDesktop.tsx
+var SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, inputClassName, containerClassName, customTrigger, onBlur, ...props }) => {
 	const { label, tooltipText, helperText, isRequired, rightContent, isHeaderHidden, headerClassName, errorClassName, placeholder, variant, isDisabled, className, hideLabel, hideDropdownIcon, isSearchable, isClearable, isLoading, as, size, collapseAfter, selectedTagsType } = props;
 	const popoverCva = UIStyle.useCva("popover.cva", popover);
 	const formFieldProps = {
@@ -159,4 +160,5 @@ const SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, i
 		})
 	});
 };
+//#endregion
 export { SelectDesktop };

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

@@ -1,8 +1,8 @@
 import { ArrowDropDownIcon } from "../../../../assets/icons/ArrowDropDown.js";
 import { UIStyle } from "../../../../config/uiStyle.context.js";
 import { Typography } from "../../../text/Typography/Typography.js";
+import "../../../../config/i18n.js";
 import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
-import { ns } from "../../../../config/i18n.js";
 import { InputClear } from "../../shared/InputClear.js";
 import { inputBase, inputSize } from "../../shared/input.cva.js";
 import { SelectInputTags } from "./SelectInputTags.js";
@@ -13,7 +13,8 @@ import { use, useMemo, useRef, useState } from "react";
 import { Button, ComboBoxStateContext, Input } from "react-aria-components";
 import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
 import { useTranslation } from "react-i18next";
-const SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid, className, hideDropdownIcon, isSearchable, isClearable, showSelectionContent, inputClassName, fieldProps, headerProps, selectedTagsType, collapseAfter, onCloseComboBox, onBlur, ...props }) => {
+//#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);
 	const { t } = useTranslation("ui");
@@ -143,4 +144,5 @@ const SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvali
 		]
 	});
 };
+//#endregion
 export { SelectInput };

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

@@ -1,7 +1,8 @@
 import { Tag } from "../../../text/Tag/Tag.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
-const SelectInputTags = ({ selectedItems, isDisabled, selectedTagsType, collapseAfter, onRemove }) => {
+//#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,
@@ -26,4 +27,5 @@ const SelectInputTags = ({ selectedItems, isDisabled, selectedTagsType, collapse
 	}, "remaining-count")] });
 	return /* @__PURE__ */ jsx("p", { children: selectedItems.map((item) => item.label).join(", ") });
 };
+//#endregion
 export { SelectInputTags };

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

@@ -1,4 +1,4 @@
-import { SelectAllItemId } from "./useSelectItems.js";
+import "./useSelectItems.js";
 import { SelectContext } from "./select.context.js";
 import { SelectListBoxItem } from "./SelectListBoxItem.js";
 import { SelectListBoxItemSelectAll } from "./SelectListBoxItemSelectAll.js";
@@ -6,7 +6,8 @@ import { SelectListBoxLoadingItem } from "./SelectListBoxLoadingItem.js";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { ListBox, ListLayout, Virtualizer } from "react-aria-components";
-const SelectListBox = ({ label, selectionMode, isSearchable, isScrollable = true, virtualizerOptions, newItemRender, onLoadMore, className, onClose, ...props }) => {
+//#region src/components/inputs/Selection/shared/SelectListBox.tsx
+var SelectListBox = ({ label, selectionMode, isSearchable, isScrollable = true, virtualizerOptions, newItemRender, onLoadMore, className, onClose, ...props }) => {
 	const { fieldState, onChange, listItems, selectableListItems, selectedIds, isMultiple, onClear, onSelectAll } = SelectContext.useSelect();
 	const onSelectionChange = (value) => {
 		const ids = Array.from(value);
@@ -70,4 +71,5 @@ const SelectListBox = ({ label, selectionMode, isSearchable, isScrollable = true
 		children: renderItem
 	});
 };
+//#endregion
 export { SelectListBox };

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

@@ -1,12 +1,13 @@
+import "../../../../config/i18n.js";
 import { CheckboxCheckmark } from "../../Checkbox/CheckboxCheckmark.js";
-import { ns } from "../../../../config/i18n.js";
 import { SelectContext } from "./select.context.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useMemo, useRef } from "react";
 import { ListBoxItem } from "react-aria-components";
 import { useTranslation } from "react-i18next";
-const SelectListBoxItem = ({ isSearchable, isNewItem, newItemRender, id, label, content, isDisabled }) => {
+//#region src/components/inputs/Selection/shared/SelectListBoxItem.tsx
+var SelectListBoxItem = ({ isSearchable, isNewItem, newItemRender, id, label, content, isDisabled }) => {
 	const ref = useRef(null);
 	const { t } = useTranslation("ui");
 	const { selectedIds, isMultiple } = SelectContext.useSelect();
@@ -44,5 +45,6 @@ const SelectListBoxItem = ({ isSearchable, isNewItem, newItemRender, id, label,
 		]
 	});
 };
-const selectListBoxItemClass = clsx("group flex cursor-pointer items-center gap-2 px-list-side-item-left py-list-height-item", "border-b border-b-elevation-outline-default-1 outline-none", "font-labels-default text-interactive-text-secondary-idle text-label-2", "hover:text-interactive-text-secondary-hover", "focus-visible:bg-interactive-contained-primary-focus focus-visible:text-interactive-text-secondary-idle-inverted", "disabled:cursor-default disabled:text-interactive-text-secondary-disabled");
+var selectListBoxItemClass = clsx("group flex cursor-pointer items-center gap-2 px-list-side-item-left py-list-height-item", "border-b border-b-elevation-outline-default-1 outline-none", "font-labels-default text-interactive-text-secondary-idle text-label-2", "hover:text-interactive-text-secondary-hover", "focus-visible:bg-interactive-contained-primary-focus focus-visible:text-interactive-text-secondary-idle-inverted", "disabled:cursor-default disabled:text-interactive-text-secondary-disabled");
+//#endregion
 export { SelectListBoxItem, selectListBoxItemClass };

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

@@ -1,12 +1,13 @@
+import "../../../../config/i18n.js";
 import { CheckboxCheckmark } from "../../Checkbox/CheckboxCheckmark.js";
-import { ns } from "../../../../config/i18n.js";
 import { SelectContext } from "./select.context.js";
 import { selectListBoxItemClass } from "./SelectListBoxItem.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
 import { ListBoxItem } from "react-aria-components";
 import { useTranslation } from "react-i18next";
-const SelectListBoxItemSelectAll = ({ id, label, isDisabled }) => {
+//#region src/components/inputs/Selection/shared/SelectListBoxItemSelectAll.tsx
+var SelectListBoxItemSelectAll = ({ id, label, isDisabled }) => {
 	const ref = useRef(null);
 	const { t } = useTranslation("ui");
 	const { selectableListItems, selectedIds } = SelectContext.useSelect();
@@ -28,4 +29,5 @@ const SelectListBoxItemSelectAll = ({ id, label, isDisabled }) => {
 		}), t(($) => $.ui.select.allOption)]
 	});
 };
+//#endregion
 export { SelectListBoxItemSelectAll };

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

@@ -1,5 +1,5 @@
 import { Loader } from "../../../status/Loader/Loader.js";
-import { ns } from "../../../../config/i18n.js";
+import "../../../../config/i18n.js";
 import { SelectContext } from "./select.context.js";
 import { selectListBoxItemClass } from "./SelectListBoxItem.js";
 import { useIntersectionObserver } from "../../../../hooks/useIntersectionObserver.js";
@@ -7,7 +7,8 @@ import { jsx } from "react/jsx-runtime";
 import { useCallback } from "react";
 import { ListBoxItem } from "react-aria-components";
 import { useTranslation } from "react-i18next";
-const SelectListBoxLoadingItem = ({ id, label, onLoadMore }) => {
+//#region src/components/inputs/Selection/shared/SelectListBoxLoadingItem.tsx
+var SelectListBoxLoadingItem = ({ id, label, onLoadMore }) => {
 	const { t } = useTranslation("ui");
 	const { isDebouncing, isLoading, hasLoadMore } = SelectContext.useSelect();
 	const { ref } = useIntersectionObserver({
@@ -33,4 +34,5 @@ const SelectListBoxLoadingItem = ({ id, label, onLoadMore }) => {
 		})
 	});
 };
+//#endregion
 export { SelectListBoxLoadingItem };

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

@@ -1,10 +1,11 @@
+import "../../../../config/i18n.js";
 import { TextButton } from "../../../buttons/TextButton/TextButton.js";
-import { ns } from "../../../../config/i18n.js";
 import { SelectContext } from "./select.context.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useTranslation } from "react-i18next";
-const SelectListBoxSelectionBar = ({ className }) => {
+//#region src/components/inputs/Selection/shared/SelectListBoxSelectionBar.tsx
+var SelectListBoxSelectionBar = ({ className }) => {
 	const { t } = useTranslation("ui");
 	const { onClear, onSelectAll } = SelectContext.useSelect();
 	return /* @__PURE__ */ jsxs("div", {
@@ -22,4 +23,5 @@ const SelectListBoxSelectionBar = ({ className }) => {
 		})]
 	});
 };
+//#endregion
 export { SelectListBoxSelectionBar };

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

@@ -1,10 +1,10 @@
 import { BottomSheet } from "../../../overlays/BottomSheet/BottomSheet.js";
-import { FormFieldHeader } from "../../FormField/FormFieldHeader.js";
-import { FormFieldHeaderClose } from "../../FormField/FormFieldHeaderClose.js";
 import { FormField } from "../../FormField/FormField.js";
 import { SelectContext } from "./select.context.js";
 import { SelectInput } from "./SelectInput.js";
 import { SelectListBox } from "./SelectListBox.js";
+import { SearchIcon } from "../../../../assets/icons/Search.js";
+import { FormFieldHeaderClose } from "../../FormField/FormFieldHeaderClose.js";
 import { TextInput } from "../../Input/TextInput/TextInput.js";
 import { SelectListBoxSelectionBar } from "./SelectListBoxSelectionBar.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -12,8 +12,9 @@ import { clsx } from "clsx";
 import { useRef } from "react";
 import { DialogTrigger } from "react-aria-components";
 import { useLabel } from "react-aria";
-const SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containerClassName, customTrigger, onBlur, ...props }) => {
-	const { label, tooltipText, helperText, isRequired, rightContent, isHeaderHidden, headerClassName, errorClassName, placeholder, variant, isDisabled, className, hideLabel, hideDropdownIcon, isSearchable, isClearable, as, collapseAfter, selectedTagsType } = props;
+//#region src/components/inputs/Selection/shared/SelectMobile.tsx
+var SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containerClassName, customTrigger, onBlur, ...props }) => {
+	const { label, tooltipText, helperText, isRequired, rightContent, isHeaderHidden, headerClassName, errorClassName, placeholder, variant, isDisabled, className, hideLabel, hideDropdownIcon, hideSearchIcon, isSearchable, isClearable, as, collapseAfter, selectedTagsType } = props;
 	const formFieldProps = {
 		error,
 		label,
@@ -41,9 +42,15 @@ const SelectMobile = ({ ref, error, showSelectionContent, inputClassName, contai
 	};
 	const { fieldState, isOpen, setIsOpen, onInputChange, isMultiple } = SelectContext.useSelect();
 	const searchInputRef = useRef(null);
+	const onBlurRef = useRef(onBlur);
+	onBlurRef.current = onBlur;
+	const handleOpenChange = (open) => {
+		if (!open) onBlurRef.current?.({});
+		setIsOpen(open);
+	};
 	const dialogTriggerProps = {
 		isOpen,
-		onOpenChange: setIsOpen
+		onOpenChange: handleOpenChange
 	};
 	return /* @__PURE__ */ jsx(FormField, {
 		...formFieldProps,
@@ -68,23 +75,24 @@ const SelectMobile = ({ ref, error, showSelectionContent, inputClassName, contai
 				isSearchable: false,
 				isClearable,
 				showSelectionContent,
-				onBlur,
+				onBlur: void 0,
 				fieldProps,
 				headerProps,
 				collapseAfter,
 				selectedTagsType
 			}), /* @__PURE__ */ jsx(BottomSheet, {
 				isOpen,
-				onOpenChange: setIsOpen,
+				onOpenChange: handleOpenChange,
 				onStateChange: (state) => {
 					if (state === "opened") searchInputRef.current?.focus();
 				},
 				label,
 				footer: isMultiple && /* @__PURE__ */ jsx(SelectListBoxSelectionBar, {}),
 				isDismissable: true,
+				hideHeader: isSearchable,
 				children: (close) => /* @__PURE__ */ jsxs("div", {
 					className: "flex max-h-full flex-col overflow-hidden",
-					children: [isSearchable ? /* @__PURE__ */ jsx(TextInput, {
+					children: [isSearchable && /* @__PURE__ */ jsx(TextInput, {
 						ref: searchInputRef,
 						label,
 						placeholder,
@@ -92,11 +100,8 @@ const SelectMobile = ({ ref, error, showSelectionContent, inputClassName, contai
 						onChange: onInputChange,
 						rightContent: /* @__PURE__ */ jsx(FormFieldHeaderClose, { onClose: close }),
 						inputClassName,
-						className: "mb-1-5 px-4 pt-3"
-					}) : /* @__PURE__ */ jsx(FormFieldHeader, {
-						label,
-						rightContent: /* @__PURE__ */ jsx(FormFieldHeaderClose, { onClose: close }),
-						className: "mb-1-5! px-4 pt-3"
+						className: "mb-list-height-title-bottom px-list-side-title",
+						leadingIcon: !hideSearchIcon ? /* @__PURE__ */ jsx(SearchIcon, { className: "size-6" }) : void 0
 					}), /* @__PURE__ */ jsx(SelectListBox, {
 						...props,
 						autoFocus: !isSearchable,
@@ -108,4 +113,5 @@ const SelectMobile = ({ ref, error, showSelectionContent, inputClassName, contai
 		})
 	});
 };
+//#endregion
 export { SelectMobile };

package/dist/components/inputs/Selection/shared/select.context.js

@@ -1,8 +1,9 @@
-import { NewItemId, useSelectItems } from "./useSelectItems.js";
+import { useSelectItems } from "./useSelectItems.js";
 import { useDebounceCallback } from "../../../../hooks/useDebounceCallback.js";
 import { jsx } from "react/jsx-runtime";
 import { createContext, use, useCallback, useEffect, useMemo, useRef, useState } from "react";
-let SelectContext;
+//#region src/components/inputs/Selection/shared/select.context.tsx
+var SelectContext;
 (function(_SelectContext) {
 	const Context = createContext({});
 	const defaultMapInitialToSelectItem = (item) => ({
@@ -45,10 +46,10 @@ let SelectContext;
 		});
 		const selectedItems = useMemo(() => allItems.filter(({ id }) => Array.isArray(fieldState.value) ? fieldState.value.includes(id) : id === fieldState.value), [allItems, fieldState.value]);
 		const selectedIds = useMemo(() => selectedItems.map(({ id }) => id), [selectedItems]);
-		const getItem = useCallback((value$1) => allItems.find((item) => item && item.id === value$1) ?? null, [allItems]);
-		const updateValue = useCallback((value$1) => {
-			if (Array.isArray(value$1)) valueRef.current = value$1.map((id) => getItem(id)).filter((item) => item !== null);
-			else valueRef.current = getItem(value$1);
+		const getItem = useCallback((value) => allItems.find((item) => item && item.id === value) ?? null, [allItems]);
+		const updateValue = useCallback((value) => {
+			if (Array.isArray(value)) valueRef.current = value.map((id) => getItem(id)).filter((item) => item !== null);
+			else valueRef.current = getItem(value);
 		}, [getItem]);
 		const getValueIds = () => Array.isArray(valueRef.current) ? valueRef.current.map(({ id }) => id) : valueRef.current?.id ?? null;
 		const emitStateChanges = useCallback((changes, skipSelectionChange) => {
@@ -67,10 +68,10 @@ let SelectContext;
 			onSearchChangeDebounced,
 			updateValue
 		]);
-		const syncFieldState = (value$1) => {
+		const syncFieldState = (value) => {
 			const newFieldState = {
-				value: value$1,
-				inputValue: isMultiple || Array.isArray(value$1) ? fieldState.inputValue : getItem(value$1)?.label ?? "",
+				value,
+				inputValue: isMultiple || Array.isArray(value) ? fieldState.inputValue : getItem(value)?.label ?? "",
 				searchValue: ""
 			};
 			setFieldState(newFieldState);
@@ -78,9 +79,9 @@ let SelectContext;
 			if (!isMultiple) setShowAll(true);
 		};
 		useEffect(() => {
-			const value$1 = props.value ?? null;
-			if (JSON.stringify(value$1) !== JSON.stringify(fieldState.value)) syncFieldState(value$1);
-			else updateValue(value$1);
+			const value = props.value ?? null;
+			if (JSON.stringify(value) !== JSON.stringify(fieldState.value)) syncFieldState(value);
+			else updateValue(value);
 		}, [props.value]);
 		useEffect(() => {
 			if (!isMultiple && fieldState.value && fieldState.inputValue === "" && getItem(fieldState.value)?.label) syncFieldState(fieldState.value);
@@ -100,12 +101,12 @@ let SelectContext;
 			fieldState.value,
 			isMultiple
 		]);
-		const onChange = useCallback((value$1) => {
-			if (value$1 === "new-item-id") onNewItemOption?.(fieldState.inputValue);
+		const onChange = useCallback((value) => {
+			if (value === "new-item-id") onNewItemOption?.(fieldState.inputValue);
 			else {
 				const newFieldState = {
-					value: value$1,
-					inputValue: isMultiple || Array.isArray(value$1) ? "" : getItem(value$1)?.label ?? "",
+					value,
+					inputValue: isMultiple || Array.isArray(value) ? "" : getItem(value)?.label ?? "",
 					searchValue: ""
 				};
 				setFieldState(newFieldState);
@@ -136,8 +137,8 @@ let SelectContext;
 		const onSelectAll = useCallback(() => {
 			onChange(selectableListItems.map(({ id }) => id));
 		}, [selectableListItems, onChange]);
-		const onRemove = useCallback((value$1) => {
-			if (isMultiple && Array.isArray(fieldState.value)) onChange(fieldState.value.filter((id) => id !== value$1));
+		const onRemove = useCallback((value) => {
+			if (isMultiple && Array.isArray(fieldState.value)) onChange(fieldState.value.filter((id) => id !== value));
 		}, [
 			isMultiple,
 			fieldState.value,
@@ -187,4 +188,5 @@ let SelectContext;
 		return use(Context);
 	};
 })(SelectContext || (SelectContext = {}));
+//#endregion
 export { SelectContext };

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

@@ -1,24 +1,25 @@
 import { useMemo } from "react";
 import { useFilter } from "react-aria-components";
-const SelectAllItemId = "all-item-id";
+//#region src/components/inputs/Selection/shared/useSelectItems.tsx
+var SelectAllItemId = "all-item-id";
 var SelectAllItem = (inputValue) => ({
 	id: SelectAllItemId,
 	label: inputValue,
 	isSelectAllItem: true
 });
-const NewItemId = "new-item-id";
+var NewItemId = "new-item-id";
 var NewItem = (inputValue) => ({
 	id: NewItemId,
 	label: inputValue,
 	isNewItem: true
 });
-const LoadingItemId = "loading-item-id";
+var LoadingItemId = "loading-item-id";
 var LoadingItem = (inputValue) => ({
 	id: LoadingItemId,
 	label: inputValue,
 	isLoadingItem: true
 });
-const ReservedItemIds = [
+var ReservedItemIds = [
 	SelectAllItemId,
 	NewItemId,
 	LoadingItemId
@@ -79,4 +80,5 @@ function useSelectItems({ initialSelectedItems, selectedItems, cachedItems, inpu
 		selectableListItems: useMemo(() => listItems.filter((item) => !item.isDisabled && !ReservedItemIds.includes(String(item.id))), [listItems])
 	};
 }
+//#endregion
 export { NewItemId, SelectAllItemId, useSelectItems };

package/dist/components/inputs/Slider/Slider.js

@@ -7,6 +7,7 @@ import { clsx } from "clsx";
 import { Slider, SliderThumb, SliderTrack } from "react-aria-components";
 import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
+//#region src/components/inputs/Slider/Slider.tsx
 var SliderBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const { label, tooltipText, helperText, isRequired, rightContent, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, unit, hideLabel = ui.input.hideLabel, minValue = ui.slider.minValue, maxValue = ui.slider.maxValue, ...rest } = props;
@@ -72,7 +73,7 @@ var SliderBase = (props) => {
 		})
 	});
 };
-const Slider$1 = (props) => {
+var Slider$1 = (props) => {
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
@@ -90,4 +91,5 @@ const Slider$1 = (props) => {
 	}
 	return /* @__PURE__ */ jsx(SliderBase, { ...props });
 };
+//#endregion
 export { Slider$1 as Slider };

package/dist/components/inputs/TextEditor/TextEditor.js

@@ -20,6 +20,7 @@ import { TextStyle } from "@tiptap/extension-text-style";
 import { Underline } from "@tiptap/extension-underline";
 import { EditorContent, useEditor } from "@tiptap/react";
 import { StarterKit } from "@tiptap/starter-kit";
+//#region src/components/inputs/TextEditor/TextEditor.tsx
 var extensions = [
 	StarterKit.configure({ heading: { levels: [
 		1,
@@ -129,7 +130,7 @@ var TextEditorBase = ({ ref, as = "default", placeholder, label, hideLabel, tool
 		})
 	});
 };
-const TextEditor = (props) => {
+var TextEditor = (props) => {
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
@@ -147,4 +148,5 @@ const TextEditor = (props) => {
 	}
 	return /* @__PURE__ */ jsx(TextEditorBase, { ...props });
 };
+//#endregion
 export { TextEditor };

package/dist/components/inputs/TextEditor/Toolbar/ColorPicker.js

@@ -1,7 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { ColorSwatch, ColorSwatchPicker, ColorSwatchPickerItem } from "react-aria-components";
-const ColorPicker = ({ colors, value, onChange }) => {
+//#region src/components/inputs/TextEditor/Toolbar/ColorPicker.tsx
+var ColorPicker = ({ colors, value, onChange }) => {
 	return /* @__PURE__ */ jsx(ColorSwatchPicker, {
 		value,
 		onChange: (color) => onChange(color.toString("hex")),
@@ -13,4 +14,5 @@ const ColorPicker = ({ colors, value, onChange }) => {
 		}, color))
 	});
 };
+//#endregion
 export { ColorPicker };

package/dist/components/inputs/TextEditor/Toolbar/ColorPickerDropdown.js

@@ -8,7 +8,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useState } from "react";
 import { Button, Dialog, DialogTrigger, Popover } from "react-aria-components";
-const ColorPickerDropdown = ({ colors, value, onChange, isDisabled, children }) => {
+//#region src/components/inputs/TextEditor/Toolbar/ColorPickerDropdown.tsx
+var ColorPickerDropdown = ({ colors, value, onChange, isDisabled, children }) => {
 	const inputCva = useInputCva();
 	const popoverCva = UIStyle.useCva("popover.cva", popover);
 	const [isOpen, setIsOpen] = useState(false);
@@ -51,4 +52,5 @@ const ColorPickerDropdown = ({ colors, value, onChange, isDisabled, children })
 		})]
 	});
 };
+//#endregion
 export { ColorPickerDropdown };

package/dist/components/inputs/TextEditor/Toolbar/HyperlinkAction.js

@@ -1,14 +1,15 @@
 import { LinkIcon } from "../../../../assets/icons/Link.js";
 import { Button } from "../../../buttons/Button/Button.js";
 import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
-import { ns } from "../../../../config/i18n.js";
+import "../../../../config/i18n.js";
 import { TextInput } from "../../Input/TextInput/TextInput.js";
 import { ResponsivePopover } from "../../../overlays/ResponsivePopover/ResponsivePopover.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-const HyperlinkAction = ({ editor }) => {
+//#region src/components/inputs/TextEditor/Toolbar/HyperlinkAction.tsx
+var HyperlinkAction = ({ editor }) => {
 	const { t } = useTranslation("ui");
 	const [isOpen, setIsOpen] = useState(false);
 	const [url, setUrl] = useState("");
@@ -67,4 +68,5 @@ const HyperlinkAction = ({ editor }) => {
 		})]
 	});
 };
+//#endregion
 export { HyperlinkAction };

package/dist/components/inputs/TextEditor/Toolbar/TextAlignSelect.js

@@ -2,11 +2,12 @@ import { AlignCenterIcon } from "../../../../assets/icons/AlignCenter.js";
 import { AlignLeftIcon } from "../../../../assets/icons/AlignLeft.js";
 import { AlignLeftRightIcon } from "../../../../assets/icons/AlignLeftRight.js";
 import { AlignRightIcon } from "../../../../assets/icons/AlignRight.js";
-import { ns } from "../../../../config/i18n.js";
+import "../../../../config/i18n.js";
 import { Select } from "../../Selection/Select/Select.js";
 import { jsx } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
-const TextAlignSelect = ({ editor }) => {
+//#region src/components/inputs/TextEditor/Toolbar/TextAlignSelect.tsx
+var TextAlignSelect = ({ editor }) => {
 	const { t } = useTranslation("ui");
 	if (!!!editor.extensionManager.extensions.find((extension) => extension.name === "textAlign")) return null;
 	const onChange = (val) => {
@@ -41,4 +42,5 @@ const TextAlignSelect = ({ editor }) => {
 		isDisabled: !editor.isEditable
 	});
 };
+//#endregion
 export { TextAlignSelect };