@povio/ui 2.2.6 → 2.2.8-rc

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

@@ -1,8 +1,13 @@
+import { ArrowDropDownIcon } from "../../../../assets/icons/ArrowDropDown.js";
+import { UIConfig } from "../../../../config/uiConfig.context.js";
+import { StaticInput } from "../../shared/StaticInput.js";
 import { SelectBase } from "../shared/SelectBase.js";
 import { jsx } from "react/jsx-runtime";
+import { isValidElement, useEffect, useRef, useState } from "react";
 import { mergeRefs } from "@react-aria/utils";
-import { Controller } from "react-hook-form";
-const Select = (props) => {
+import { Controller, useWatch } from "react-hook-form";
+//#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 +26,62 @@ const Select = (props) => {
 	}
 	return /* @__PURE__ */ jsx(SelectBase, { ...props });
 };
+var Select = (props) => {
+	const ui = UIConfig.useConfig();
+	const [renderInput, setRenderInput] = useState(!ui.renderStaticInput);
+	const [shouldFocus, setShouldFocus] = useState(false);
+	const rootRef = useRef(null);
+	const currentValue = ("formControl" in props && props.formControl ? useWatch({
+		control: props.formControl.control,
+		name: props.formControl.name
+	}) : props.value) ?? props.value;
+	let isFormControlDisabled = false;
+	if ("formControl" in props && props.formControl) isFormControlDisabled = !!props.formControl.control._options?.disabled;
+	if (!renderInput && props.selectionMode !== "multiple" && !!props.showSelectionContent && currentValue != null) setRenderInput(true);
+	useEffect(() => {
+		if (!renderInput || !shouldFocus) return;
+		requestAnimationFrame(() => {
+			(rootRef.current?.querySelector("[data-type='select-trigger'], input, button, [tabindex]"))?.focus();
+		});
+		setShouldFocus(false);
+	}, [renderInput, shouldFocus]);
+	if (!renderInput) {
+		const getItemLabel = (id) => {
+			const item = props.items.find((innerItem) => innerItem.id === id);
+			if (!item) return "";
+			if (props.showSelectionContent && item.content) return isValidElement(item.content) ? item.label : item.content;
+			return item.label;
+		};
+		const mode = props.selectionMode ?? ui.select.selectionMode;
+		let displayValue = "";
+		if (mode === "multiple") {
+			if (Array.isArray(currentValue) && currentValue.length > 0) displayValue = currentValue.map((id) => getItemLabel(id)).filter(Boolean).join(", ");
+		} else if (currentValue != null) displayValue = getItemLabel(currentValue);
+		const as = props.as ?? ui.input.as;
+		let isDisabled = !!props.isDisabled;
+		if (isFormControlDisabled) isDisabled = true;
+		return /* @__PURE__ */ jsx(StaticInput, {
+			...props,
+			onInteract: (focus) => {
+				setShouldFocus(focus);
+				setRenderInput(true);
+			},
+			as,
+			size: props.size ?? ui.input.size,
+			variant: props.variant ?? ui.input.variant,
+			isHeaderHidden: props.isHeaderHidden || as === "inline",
+			hideLabel: props.hideLabel ?? ui.input.hideLabel,
+			isDisabled,
+			placeholder: as === "floating" ? "" : props.placeholder,
+			displayValue,
+			isEmpty: !displayValue,
+			trailingVisual: /* @__PURE__ */ jsx(ArrowDropDownIcon, { className: "size-6 shrink-0 text-interactive-text-secondary-idle" })
+		});
+	}
+	return /* @__PURE__ */ jsx(_Select, {
+		...props,
+		ref: mergeRefs(props.ref, rootRef)
+	});
+};
+//#endregion
 export { Select };

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,
@@ -26,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,7 +1,7 @@
 import { ArrowDropDownIcon } from "../../../../assets/icons/ArrowDropDown.js";
 import { UIStyle } from "../../../../config/uiStyle.context.js";
 import { Typography } from "../../../text/Typography/Typography.js";
-import { ns } from "../../../../config/i18n.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";
@@ -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,4 +1,4 @@
-import { ns } from "../../../../config/i18n.js";
+import "../../../../config/i18n.js";
 import { CheckboxCheckmark } from "../../Checkbox/CheckboxCheckmark.js";
 import { SelectContext } from "./select.context.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -6,7 +6,8 @@ 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,4 +1,4 @@
-import { ns } from "../../../../config/i18n.js";
+import "../../../../config/i18n.js";
 import { CheckboxCheckmark } from "../../Checkbox/CheckboxCheckmark.js";
 import { SelectContext } from "./select.context.js";
 import { selectListBoxItemClass } from "./SelectListBoxItem.js";
@@ -6,7 +6,8 @@ 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 { ns } from "../../../../config/i18n.js";
+import "../../../../config/i18n.js";
 import { TextButton } from "../../../buttons/TextButton/TextButton.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

@@ -12,7 +12,8 @@ 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 }) => {
+//#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,
@@ -112,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 };

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

@@ -2,7 +2,8 @@ import { TextColorIcon } from "../../../../assets/icons/TextColor.js";
 import { ColorPickerDropdown } from "./ColorPickerDropdown.js";
 import { defaultColors } from "../textEditor.types.js";
 import { jsx } from "react/jsx-runtime";
-const TextColorSelect = ({ editor }) => {
+//#region src/components/inputs/TextEditor/Toolbar/TextColorSelect.tsx
+var TextColorSelect = ({ editor }) => {
 	if (!editor.extensionManager.extensions.some((extension) => extension.name === "color")) return null;
 	const onChange = (color) => {
 		editor.chain().focus().setColor(color).run();
@@ -19,4 +20,5 @@ const TextColorSelect = ({ editor }) => {
 		})
 	});
 };
+//#endregion
 export { TextColorSelect };

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

@@ -6,7 +6,8 @@ import { TextListActions } from "./TextListActions.js";
 import { TextMarksActions } from "./TextMarksActions.js";
 import { TextStyleSelect } from "./TextStyleSelect.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-const TextEditorToolbar = ({ editor }) => {
+//#region src/components/inputs/TextEditor/Toolbar/TextEditorToolbar.tsx
+var TextEditorToolbar = ({ editor }) => {
 	if (!editor) return null;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex w-full flex-wrap items-center gap-x-7 gap-y-1 border-elevation-outline-default-2 border-b border-solid p-2",
@@ -27,4 +28,5 @@ const TextEditorToolbar = ({ editor }) => {
 		]
 	});
 };
+//#endregion
 export { TextEditorToolbar };

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

@@ -3,7 +3,8 @@ import { HighlightOnIcon } from "../../../../assets/icons/HighlightOn.js";
 import { ColorPickerDropdown } from "./ColorPickerDropdown.js";
 import { defaultColors } from "../textEditor.types.js";
 import { jsx } from "react/jsx-runtime";
-const TextHighlightSelect = ({ editor }) => {
+//#region src/components/inputs/TextEditor/Toolbar/TextHighlightSelect.tsx
+var TextHighlightSelect = ({ editor }) => {
 	if (!editor.extensionManager.extensions.some((extension) => extension.name === "highlight")) return null;
 	const onChange = (color) => {
 		if (color === "#FFFFFF") editor.chain().focus().unsetHighlight().run();
@@ -21,4 +22,5 @@ const TextHighlightSelect = ({ editor }) => {
 		}) : /* @__PURE__ */ jsx(HighlightIcon, { className: "size-6" })
 	});
 };
+//#endregion
 export { TextHighlightSelect };

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

@@ -1,11 +1,12 @@
 import { BulletedListIcon } from "../../../../assets/icons/BulletedList.js";
 import { NumberedListIcon } from "../../../../assets/icons/NumberedList.js";
 import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
-import { ns } from "../../../../config/i18n.js";
+import "../../../../config/i18n.js";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useTranslation } from "react-i18next";
-const TextListActions = ({ editor }) => {
+//#region src/components/inputs/TextEditor/Toolbar/TextListActions.tsx
+var TextListActions = ({ editor }) => {
 	const { t } = useTranslation("ui");
 	const enabledActions = [{
 		can: !!editor.extensionManager.extensions.find((extension) => extension.name === "bulletList"),
@@ -39,4 +40,5 @@ const TextListActions = ({ editor }) => {
 		}, action.label))
 	});
 };
+//#endregion
 export { TextListActions };

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

@@ -3,11 +3,12 @@ import { ItalicIcon } from "../../../../assets/icons/Italic.js";
 import { StrikethroughIcon } from "../../../../assets/icons/Strikethrough.js";
 import { UnderlinedIcon } from "../../../../assets/icons/Underlined.js";
 import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
-import { ns } from "../../../../config/i18n.js";
+import "../../../../config/i18n.js";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useTranslation } from "react-i18next";
-const TextMarksActions = ({ editor }) => {
+//#region src/components/inputs/TextEditor/Toolbar/TextMarksActions.tsx
+var TextMarksActions = ({ editor }) => {
 	const { t } = useTranslation("ui");
 	const enabledActions = [
 		{
@@ -64,4 +65,5 @@ const TextMarksActions = ({ editor }) => {
 		}, action.label))
 	});
 };
+//#endregion
 export { TextMarksActions };