tw-react-components 0.0.164 → 0.0.166

package/index.esm.js

@@ -2,6 +2,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import dayjs from 'dayjs';
+import 'dayjs/locale/en';
 import advancedFormat from 'dayjs/plugin/advancedFormat.js';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import { HelpCircle, XIcon, AtSignIcon, EyeIcon, EyeOffIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, CalendarIcon, ClockIcon, CheckIcon, CircleIcon, CloudUploadIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsDownUpIcon, ChevronsUpDownIcon, ArrowUpDownIcon, SortAscIcon, SortDescIcon, MinusIcon, PlusIcon, PanelLeft, MoonIcon, SunIcon, MonitorIcon } from 'lucide-react';
@@ -92,20 +93,22 @@ function generalComparator(a, b) {
 }
 
 dayjs.extend(advancedFormat);
-function getDisplayDate(date, format, locale) {
-    return (locale ? dayjs(date).locale(locale) : dayjs(date)).format(format);
+function getDisplayDate(date, { format = 'YYYY-MM-DD HH:mm:ss', locale = 'en', offset = 0, }) {
+    const dateWithOffset = dayjs(date).add(offset, 'minutes');
+    return (locale ? dateWithOffset.locale(locale) : dateWithOffset).format(format);
 }
 
 function getValueFromCookie(key, _default) {
-    var _a, _b;
+    var _a;
     const transformers = {
-        string: String,
-        boolean: (value) => value === 'true',
+        string: (value) => String(value !== null && value !== void 0 ? value : _default),
+        number: (value) => parseInt(value !== null && value !== void 0 ? value : _default) || _default,
+        boolean: (value) => (value ? value === 'true' : _default),
     };
     return typeof window !== 'undefined'
-        ? transformers[typeof _default]((_b = (_a = document.cookie
+        ? transformers[typeof _default]((_a = window.document.cookie
             .split('; ')
-            .find((row) => row.startsWith(key))) === null || _a === void 0 ? void 0 : _a.split('=')[1]) !== null && _b !== void 0 ? _b : _default)
+            .find((row) => row.startsWith(`${key}=`))) === null || _a === void 0 ? void 0 : _a.replace(`${key}=`, ''))
         : _default;
 }
 
@@ -561,33 +564,42 @@ const sizeClassNames = {
     },
 };
 const Button = (_a) => {
-    var { children, className, size = 'medium', color = 'slate', variant = 'filled', rounded, prefixIcon: PrefixIcon, suffixIcon: SuffixIcon, unstyled } = _a, props = __rest(_a, ["children", "className", "size", "color", "variant", "rounded", "prefixIcon", "suffixIcon", "unstyled"]);
+    var { children, className, size = 'medium', color = 'slate', variant = 'filled', rounded, prefixIcon: PrefixIcon, suffixIcon: SuffixIcon, unstyled, dataTestId = 'button' } = _a, props = __rest(_a, ["children", "className", "size", "color", "variant", "rounded", "prefixIcon", "suffixIcon", "unstyled", "dataTestId"]);
     return (jsxs("button", Object.assign({ className: cn('relative flex aspect-square items-center font-medium duration-200', sizeClassNames[size].base, variantClassNames[variant][color].base, rounded ? 'rounded-full' : 'rounded-md', props.disabled
             ? 'cursor-not-allowed opacity-50'
             : !unstyled
                 ? `${variantClassNames[variant][color].hover} ${variantClassNames[variant][color].focus} ${variantClassNames[variant][color].active}`
-                : 'cursor-default', children ? `${sizeClassNames[size].withChildren} aspect-[initial]` : 'justify-center', className), type: "button" }, props, { children: [PrefixIcon && (jsx(PrefixIcon, { className: children ? sizeClassNames[size].icon.withChildren : sizeClassNames[size].icon.base })), children, SuffixIcon && (jsx(SuffixIcon, { className: children ? sizeClassNames[size].icon.withChildren : sizeClassNames[size].icon.base }))] })));
+                : 'cursor-default', children ? `${sizeClassNames[size].withChildren} aspect-[initial]` : 'justify-center', className), "data-testid": dataTestId, type: "button" }, props, { children: [PrefixIcon && (jsx(PrefixIcon, { className: children ? sizeClassNames[size].icon.withChildren : sizeClassNames[size].icon.base })), children, SuffixIcon && (jsx(SuffixIcon, { className: children ? sizeClassNames[size].icon.withChildren : sizeClassNames[size].icon.base }))] })));
 };
 
 const Badge = (_a) => {
-    var { size = 'small' } = _a, props = __rest(_a, ["size"]);
-    return (jsx(Button, Object.assign({ size: size }, props)));
+    var { size = 'small', dataTestId = 'badge' } = _a, props = __rest(_a, ["size", "dataTestId"]);
+    return (jsx(Button, Object.assign({ size: size, dataTestId: dataTestId }, props)));
 };
 
 const Block = (_a) => {
-    var { children, className, centered, container, fullWidth, fullHeight } = _a, props = __rest(_a, ["children", "className", "centered", "container", "fullWidth", "fullHeight"]);
-    return (jsx("div", Object.assign({ className: cn(centered && 'mx-auto', container && 'container', fullWidth && 'w-full', fullHeight && 'h-full', className) }, props, { children: children })));
+    var { children, className, centered, container, fullWidth, fullHeight, dataTestId = 'block' } = _a, props = __rest(_a, ["children", "className", "centered", "container", "fullWidth", "fullHeight", "dataTestId"]);
+    return (jsx("div", Object.assign({ "data-testid": dataTestId, className: cn(centered && 'mx-auto', container && 'container', fullWidth && 'w-full', fullHeight && 'h-full', className) }, props, { children: children })));
 };
 
 const Card = (_a) => {
-    var { children, className } = _a, blockProps = __rest(_a, ["children", "className"]);
-    return (jsx(Block, Object.assign({ className: cn('rounded-lg border p-2 dark:border-slate-700 dark:bg-slate-900', className) }, blockProps, { children: children })));
+    var { children, className, dataTestId = 'card' } = _a, blockProps = __rest(_a, ["children", "className", "dataTestId"]);
+    return (jsx(Block, Object.assign({ className: cn('rounded-lg border p-2 dark:border-slate-700 dark:bg-slate-900', className), dataTestId: dataTestId }, blockProps, { children: children })));
 };
 
-const $Collapsible = CollapsiblePrimitive.Root;
-const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
-const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
-const Collapsible = Object.assign($Collapsible, {
+const CollapsibleRoot = (_a) => {
+    var { dataTestId = 'collapsible' } = _a, props = __rest(_a, ["dataTestId"]);
+    return (jsx(CollapsiblePrimitive.Root, Object.assign({ "data-testid": dataTestId }, props)));
+};
+const CollapsibleTrigger = (_a) => {
+    var { dataTestId = 'collapsible-trigger' } = _a, props = __rest(_a, ["dataTestId"]);
+    return jsx(CollapsiblePrimitive.Trigger, Object.assign({ "data-testid": dataTestId }, props));
+};
+const CollapsibleContent = (_a) => {
+    var { dataTestId = 'collapsible-content' } = _a, props = __rest(_a, ["dataTestId"]);
+    return jsx(CollapsiblePrimitive.Content, Object.assign({ "data-testid": dataTestId }, props));
+};
+const Collapsible = Object.assign(CollapsibleRoot, {
     Trigger: CollapsibleTrigger,
     Content: CollapsibleContent,
 });
@@ -614,8 +626,8 @@ const justifyClasses = {
     end: 'justify-end',
 };
 const Flex = (_a) => {
-    var { children, className, reverse, wrap, direction = 'row', align = 'start', justify = 'start' } = _a, blockProps = __rest(_a, ["children", "className", "reverse", "wrap", "direction", "align", "justify"]);
-    return (jsx(Block, Object.assign({ className: cn('flex gap-2', wrap && 'flex-wrap', directionClasses[direction][reverse ? 'reverse' : 'normal'], alignClasses[align], justifyClasses[justify], className) }, blockProps, { children: children })));
+    var { children, className, reverse, wrap, direction = 'row', align = 'start', justify = 'start', dataTestId = 'flex' } = _a, blockProps = __rest(_a, ["children", "className", "reverse", "wrap", "direction", "align", "justify", "dataTestId"]);
+    return (jsx(Block, Object.assign({ className: cn('flex gap-2', wrap && 'flex-wrap', directionClasses[direction][reverse ? 'reverse' : 'normal'], alignClasses[align], justifyClasses[justify], className), dataTestId: dataTestId }, blockProps, { children: children })));
 };
 
 dayjs.extend(localeData);
@@ -736,7 +748,7 @@ function useOutsideClick(ref, callback) {
 function usePagination(currentIndex, totalPages) {
     return useMemo(() => {
         const result = [];
-        result.push(currentIndex);
+        result.push(Math.min(currentIndex, totalPages));
         if (totalPages > 7 && currentIndex > 4) {
             for (let index = currentIndex - 1; index >= Math.min(totalPages - 4, currentIndex - 1); index--) {
                 result.push(index);
@@ -745,7 +757,7 @@ function usePagination(currentIndex, totalPages) {
             result.push(1);
         }
         else {
-            for (let index = currentIndex - 1; index > 0; index--) {
+            for (let index = Math.min(currentIndex, totalPages) - 1; index > 0; index--) {
                 result.push(index);
             }
         }
@@ -766,13 +778,13 @@ function usePagination(currentIndex, totalPages) {
     }, [currentIndex, totalPages]);
 }
 
-const Tooltip = ({ children, className, content, asChild, placement }) => (jsx(TooltipPrimitive.Provider, { delayDuration: 200, children: jsxs(TooltipPrimitive.Root, { children: [jsx(TooltipPrimitive.Trigger, { asChild: asChild, children: children }), jsx(TooltipPrimitive.Portal, { children: jsx(TooltipPrimitive.Content, { className: cn('animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', 'z-[101] overflow-hidden rounded-md border bg-white px-3 py-1.5 text-sm shadow-md dark:border-slate-700 dark:bg-slate-800 dark:text-white', className), side: placement, sideOffset: 5, children: content }) })] }) }));
+const Tooltip = ({ children, className, content, asChild, placement, dataTestId = 'tooltip', }) => (jsx(TooltipPrimitive.Provider, { delayDuration: 200, children: jsxs(TooltipPrimitive.Root, { children: [jsx(TooltipPrimitive.Trigger, { asChild: asChild, "data-testid": `${dataTestId}-trigger`, children: children }), jsx(TooltipPrimitive.Portal, { children: jsx(TooltipPrimitive.Content, { className: cn('animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', 'z-[101] overflow-hidden rounded-md border bg-white px-3 py-1.5 text-sm shadow-md dark:border-slate-700 dark:bg-slate-800 dark:text-white', className), side: placement, sideOffset: 5, "data-testid": `${dataTestId}-content`, children: content }) })] }) }));
 
-const Label = ({ children, className, description, required, hasErrors, htmlFor, }) => {
+const Label = ({ children, className, description, required, hasErrors, htmlFor, dataTestId = 'label', }) => {
     return !children ? null : (jsxs("label", { className: cn('flex items-center gap-1 font-medium', {
             'text-slate-700 dark:text-slate-100': !hasErrors,
             'text-red-600 dark:text-red-500': hasErrors,
-        }, className), htmlFor: htmlFor, children: [children, description && (jsx(Tooltip, { content: jsx("div", { className: "max-w-xs", children: description }), placement: "top", asChild: true, children: jsx(HelpCircle, { className: "h-4 w-4" }) })), required && jsx("span", { className: "text-red-600", children: "*" })] }));
+        }, className), htmlFor: htmlFor, "data-testid": dataTestId, children: [children, description && (jsx(Tooltip, { content: jsx("div", { className: "max-w-xs", children: description }), placement: "top", asChild: true, dataTestId: `${dataTestId}-description-tooltip`, children: jsx(HelpCircle, { className: "h-4 w-4", "data-testid": `${dataTestId}-description-tooltip-icon` }) })), required && jsx("span", { className: "text-red-600", children: "*" })] }));
 };
 
 const inputClasses = {
@@ -824,16 +836,16 @@ const sizeClasses = {
     },
 };
 const BasicInput = (_a) => {
-    var { className, inputClassName, extensionClassName, type = 'text', label, description, size = 'medium', hasErrors, clearable, suffixIcon: SuffixIcon, onClear, onSuffixIconClick } = _a, props = __rest(_a, ["className", "inputClassName", "extensionClassName", "type", "label", "description", "size", "hasErrors", "clearable", "suffixIcon", "onClear", "onSuffixIconClick"]);
+    var { className, inputClassName, extensionClassName, type = 'text', label, description, size = 'medium', hasErrors, clearable, suffixIcon: SuffixIcon, onClear, onSuffixIconClick, dataTestId = 'basic-input' } = _a, props = __rest(_a, ["className", "inputClassName", "extensionClassName", "type", "label", "description", "size", "hasErrors", "clearable", "suffixIcon", "onClear", "onSuffixIconClick", "dataTestId"]);
     const id = useId();
-    const memoLabel = useMemo(() => label && (jsx(Label, { className: sizeClasses[size].label, htmlFor: id, description: description, required: props.required, hasErrors: hasErrors, children: label })), [description, hasErrors, id, label, props.required, size]);
+    const memoLabel = useMemo(() => label && (jsx(Label, { className: sizeClasses[size].label, htmlFor: id, description: description, required: props.required, hasErrors: hasErrors, dataTestId: `${dataTestId}-label`, children: label })), [description, hasErrors, id, label, props.required, size, dataTestId]);
     const handleClear = (event) => {
         var _a;
         event.stopPropagation();
         onClear === null || onClear === void 0 ? void 0 : onClear();
         (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, { target: { value: '', checked: false } });
     };
-    return (jsxs("div", { className: cn('w-full dark:text-white', className), children: [type !== 'checkbox' && memoLabel, jsxs("div", { className: cn('group relative flex', {
+    return (jsxs("div", { className: cn('w-full dark:text-white', className), "data-testid": dataTestId, children: [type !== 'checkbox' && memoLabel, jsxs("div", { className: cn('group relative flex', {
                     'mt-1': label && type !== 'checkbox',
                     [`items-center ${sizeClasses[size].checkbox.wrapper}`]: type === 'checkbox',
                 }), title: type !== 'textarea' && typeof props.value === 'string' ? props.value : undefined, children: [type === 'textarea' ? (jsx("textarea", Object.assign({ id: id, className: cn(inputClasses.base.input, sizeClasses[size].input.replace(/ h-\d/g, ''), {
@@ -841,47 +853,60 @@ const BasicInput = (_a) => {
                             [inputClasses.withoutErrors.input]: !hasErrors,
                             [inputClasses.withErrors.input]: hasErrors,
                             'rounded-r-none border-r-0': SuffixIcon,
-                        }, inputClassName) }, props, { value: props.value }))) : type === 'checkbox' ? (jsx("input", Object.assign({ id: id, className: cn('rounded border-slate-300 text-blue-600', sizeClasses[size].checkbox.input, {
+                        }, inputClassName) }, props, { value: props.value, "data-testid": `${dataTestId}-textarea` }))) : type === 'checkbox' ? (jsx("input", Object.assign({ id: id, className: cn('rounded border-slate-300 text-blue-600', sizeClasses[size].checkbox.input, {
                             [inputClasses.base.disabled]: props.disabled,
                             'bg-red-100': hasErrors,
-                        }, inputClassName), type: type, checked: Boolean(props.value) }, props))) : (jsx("input", Object.assign({ id: id, className: cn(inputClasses.base.input, sizeClasses[size].input, {
+                        }, inputClassName), type: type, checked: Boolean(props.value) }, props, { "data-testid": `${dataTestId}-checkbox` }))) : (jsx("input", Object.assign({ id: id, className: cn(inputClasses.base.input, sizeClasses[size].input, {
                             [inputClasses.base.disabled]: props.disabled,
                             [inputClasses.withoutErrors.input]: !hasErrors,
                             [inputClasses.withErrors.input]: hasErrors,
                             'rounded-r-none border-r-0': SuffixIcon,
-                        }, inputClassName), type: type !== null && type !== void 0 ? type : 'text' }, props, { value: props.value }))), type === 'checkbox' && memoLabel, clearable && (onClear || !!props.value) && !props.disabled && (jsx(XIcon, { className: cn('absolute right-2 top-1/2 -translate-y-1/2 cursor-pointer rounded-full bg-white p-0.5 opacity-0 duration-200 hover:bg-slate-200 group-hover:opacity-100 dark:bg-slate-700 dark:hover:bg-slate-800', sizeClasses[size].clearButton.base, {
+                        }, inputClassName), type: type !== null && type !== void 0 ? type : 'text' }, props, { value: props.value, "data-testid": `${dataTestId}-input` }))), type === 'checkbox' && memoLabel, clearable && (onClear || !!props.value) && !props.disabled && (jsx(XIcon, { className: cn('absolute right-2 top-1/2 -translate-y-1/2 cursor-pointer rounded-full bg-white p-0.5 opacity-0 duration-200 hover:bg-slate-200 group-hover:opacity-100 dark:bg-slate-700 dark:hover:bg-slate-800', sizeClasses[size].clearButton.base, {
                             [sizeClasses[size].clearButton.withSuffixIcon]: SuffixIcon,
-                        }), onClick: handleClear, onPointerDown: (event) => event.stopPropagation() })), type !== 'checkbox' && SuffixIcon && (jsx(BasicInputExtension, { className: extensionClassName, hasErrors: hasErrors, size: size, disabled: props.disabled, onClick: onSuffixIconClick, children: jsx(SuffixIcon, { className: sizeClasses[size].suffix.icon }) }))] })] }));
+                        }), onClick: handleClear, onPointerDown: (event) => event.stopPropagation(), "data-testid": `${dataTestId}-clear` })), type !== 'checkbox' && SuffixIcon && (jsx(BasicInputExtension, { className: extensionClassName, hasErrors: hasErrors, size: size, disabled: props.disabled, onClick: onSuffixIconClick, dataTestId: `${dataTestId}-suffix`, children: jsx(SuffixIcon, { className: sizeClasses[size].suffix.icon }) }))] })] }));
 };
-const BasicInputExtension = ({ children, className, size, hasErrors, disabled, onClick }) => (jsx("div", { className: cn('flex aspect-square items-center justify-center rounded-r-md border border-l-0', sizeClasses[size].suffix.wrapper, {
+const BasicInputExtension = ({ children, className, size, hasErrors, disabled, onClick, dataTestId }) => (jsx("div", { className: cn('flex aspect-square items-center justify-center rounded-r-md border border-l-0', sizeClasses[size].suffix.wrapper, {
         [inputClasses.base.disabled]: disabled,
         [inputClasses.withoutErrors.extension]: !hasErrors,
         [inputClasses.withErrors.extension]: hasErrors,
         'cursor-pointer': onClick,
-    }, className), onClick: !disabled ? onClick : undefined, onPointerDown: (event) => event.stopPropagation(), children: children }));
+    }, className), onClick: !disabled ? onClick : undefined, onPointerDown: (event) => event.stopPropagation(), "data-testid": dataTestId, children: children }));
 
-const CheckboxInput = (props) => (jsx(BasicInput, Object.assign({ type: "checkbox" }, props)));
+const CheckboxInput = (_a) => {
+    var { dataTestId = 'checkbox-input' } = _a, props = __rest(_a, ["dataTestId"]);
+    return jsx(BasicInput, Object.assign({ type: "checkbox", dataTestId: dataTestId }, props));
+};
 
-const EmailInput = (props) => (jsx(BasicInput, Object.assign({ type: "email" }, props, { suffixIcon: AtSignIcon })));
+const EmailInput = (_a) => {
+    var { dataTestId = 'email-input' } = _a, props = __rest(_a, ["dataTestId"]);
+    return (jsx(BasicInput, Object.assign({ type: "email", dataTestId: dataTestId }, props, { suffixIcon: AtSignIcon })));
+};
 
 const NumberInput = (_a) => {
-    var { unit } = _a, props = __rest(_a, ["unit"]);
-    return (jsx(BasicInput, Object.assign({ type: "number", inputClassName: cn(props.clearable && !!props.value && 'pr-8', props.className) }, props, { suffixIcon: unit
+    var { unit, dataTestId = 'number-input' } = _a, props = __rest(_a, ["unit", "dataTestId"]);
+    return (jsx(BasicInput, Object.assign({ type: "number", inputClassName: cn(props.clearable && !!props.value && 'pr-8', props.className), dataTestId: dataTestId }, props, { suffixIcon: unit
             ? ({ className }) => (jsx("div", { className: cn(className, 'flex w-min items-center'), onClick: props.onSuffixIconClick, children: unit }))
             : props.suffixIcon })));
 };
 
-const PasswordInput = (props) => {
+const PasswordInput = (_a) => {
+    var { dataTestId = 'password-input' } = _a, props = __rest(_a, ["dataTestId"]);
     const [type, setType] = useState('password');
     const toggleType = () => setType((type) => (type === 'text' ? 'password' : 'text'));
-    return (jsx(BasicInput, Object.assign({ type: type }, props, { suffixIcon: type === 'password' ? EyeIcon : EyeOffIcon, onSuffixIconClick: toggleType })));
+    return (jsx(BasicInput, Object.assign({ type: type, dataTestId: dataTestId }, props, { suffixIcon: type === 'password' ? EyeIcon : EyeOffIcon, onSuffixIconClick: toggleType })));
 };
 
-const TextareaInput = (props) => (jsx(BasicInput, Object.assign({ type: "textarea" }, props)));
+const TextareaInput = (_a) => {
+    var { dataTestId = 'textarea-input' } = _a, props = __rest(_a, ["dataTestId"]);
+    return jsx(BasicInput, Object.assign({ type: "textarea", dataTestId: dataTestId }, props));
+};
 
-const TextInput = (props) => jsx(BasicInput, Object.assign({ type: "text" }, props));
+const TextInput = (_a) => {
+    var { dataTestId = 'text-input' } = _a, props = __rest(_a, ["dataTestId"]);
+    return (jsx(BasicInput, Object.assign({ type: "text", dataTestId: dataTestId }, props)));
+};
 
-const DaysView = ({ date, value, month, year, minDate, maxDate, locale, setNewDate, }) => {
+const DaysView = ({ date, value, month, year, minDate, maxDate, locale, dataTestId = 'days-view', setNewDate, }) => {
     const days = useDays(locale);
     const monthDays = useMemo(() => {
         const daysInMonth = new Date(year, month + 1, 0).getDate();
@@ -938,9 +963,9 @@ const DaysView = ({ date, value, month, year, minDate, maxDate, locale, setNewDa
         }
         setNewDate(newDate);
     }, [date, maxDate, minDate, month, setNewDate, year]);
-    return (jsxs("div", { className: "gap-1 px-3 py-2", children: [jsx("div", { className: "grid grid-cols-7", children: days.map((day, index) => (jsx("span", { className: "flex h-8 w-8 items-center justify-center text-xs uppercase text-slate-500 dark:text-slate-400", children: day.shortName }, index))) }), jsxs("div", { className: "grid grid-cols-7 gap-1", children: [prefixDays.map((dayNumber, index) => (jsx(Day, { value: value, day: dayNumber, month: (month - 1 + 12) % 12, year: month % 12 ? year : year - 1, minDate: minDate, maxDate: maxDate, setDayNumber: setDayNumber }, `${dayNumber}-${index}`))), monthDays.map((dayNumber, index) => (jsx(Day, { value: value, day: dayNumber, month: month, year: year, minDate: minDate, maxDate: maxDate, primary: true, setDayNumber: setDayNumber }, `${dayNumber}-${index}`))), suffixDays.map((dayNumber, index) => (jsx(Day, { value: value, day: dayNumber, month: (month + 1) % 12, year: (month + 1) % 12 ? year : year + 1, minDate: minDate, maxDate: maxDate, setDayNumber: setDayNumber }, `${dayNumber}-${index}`)))] })] }));
+    return (jsxs("div", { className: "gap-1 px-3 py-2", "data-testid": dataTestId, children: [jsx("div", { className: "grid grid-cols-7", children: days.map((day, index) => (jsx("span", { className: "flex h-8 w-8 items-center justify-center text-xs uppercase text-slate-500 dark:text-slate-400", "data-testid": `${dataTestId}-weekday-${index}`, children: day.shortName }, index))) }), jsxs("div", { className: "grid grid-cols-7 gap-1", children: [prefixDays.map((dayNumber, index) => (jsx(Day, { value: value, day: dayNumber, month: (month - 1 + 12) % 12, year: month % 12 ? year : year - 1, minDate: minDate, maxDate: maxDate, setDayNumber: setDayNumber, dataTestId: dataTestId }, `${dayNumber}-${index}`))), monthDays.map((dayNumber, index) => (jsx(Day, { value: value, day: dayNumber, month: month, year: year, minDate: minDate, maxDate: maxDate, primary: true, setDayNumber: setDayNumber, dataTestId: dataTestId }, `${dayNumber}-${index}`))), suffixDays.map((dayNumber, index) => (jsx(Day, { value: value, day: dayNumber, month: (month + 1) % 12, year: (month + 1) % 12 ? year : year + 1, minDate: minDate, maxDate: maxDate, setDayNumber: setDayNumber, dataTestId: dataTestId }, `${dayNumber}-${index}`)))] })] }));
 };
-const Day = ({ value, day, month, year, minDate, maxDate, primary, setDayNumber, }) => {
+const Day = ({ value, day, month, year, minDate, maxDate, primary, dataTestId = 'day', setDayNumber, }) => {
     const dayDate = useMemo(() => new Date(year, month, day), [day, month, year]);
     const isSelectable = useMemo(() => (!minDate || compareDates(dayDate, new Date(minDate), 'day') >= 0) &&
         (!maxDate || compareDates(dayDate, new Date(maxDate), 'day') <= 0), [minDate, dayDate, maxDate]);
@@ -952,14 +977,14 @@ const Day = ({ value, day, month, year, minDate, maxDate, primary, setDayNumber,
             'cursor-pointer': isSelectable,
             'hover:bg-blue-100 dark:hover:bg-blue-800': isSelectable && !isSelected,
             'text-slate-400 dark:text-slate-500': !isSelectable || !primary,
-        }), onClick: isSelectable ? setDayNumber(day, month, year) : undefined, children: day }));
+        }), onClick: isSelectable ? setDayNumber(day, month, year) : undefined, "data-testid": `${dataTestId}-day-${day}`, children: day }));
 };
 
-const MonthsView = ({ date, value, year, minDate, maxDate, locale, selectMonth, }) => {
+const MonthsView = ({ date, value, year, minDate, maxDate, locale, selectMonth, dataTestId = 'months-view', }) => {
     const months = useMonths(locale);
-    return (jsx("div", { className: "grid grid-cols-4 gap-1 px-3 py-2", children: months.map((month, index) => (jsx(Month, { date: date, value: value, shortName: month.shortName, month: index, year: year, minDate: minDate, maxDate: maxDate, selectMonth: selectMonth }, index))) }));
+    return (jsx("div", { className: "grid grid-cols-4 gap-1 px-3 py-2", "data-testid": dataTestId, children: months.map((month, index) => (jsx(Month, { date: date, value: value, shortName: month.shortName, month: index, year: year, minDate: minDate, maxDate: maxDate, selectMonth: selectMonth, dataTestId: dataTestId }, index))) }));
 };
-const Month = ({ date, value, shortName, month, year, minDate, maxDate, selectMonth, }) => {
+const Month = ({ date, value, shortName, month, year, minDate, maxDate, dataTestId = 'month', selectMonth, }) => {
     const dayDate = useMemo(() => new Date(year, month, date.getDate(), date.getHours(), date.getMinutes()), [date, month, year]);
     const isSelectable = useMemo(() => (!minDate || compareDates(dayDate, new Date(minDate), 'month') >= 0) &&
         (!maxDate || compareDates(dayDate, new Date(maxDate), 'month') <= 0), [dayDate, minDate, maxDate]);
@@ -972,11 +997,11 @@ const Month = ({ date, value, shortName, month, year, minDate, maxDate, selectMo
             'cursor-pointer': isSelectable,
             'hover:bg-blue-100 dark:hover:bg-blue-900': isSelectable && !isSelected,
             'text-slate-400 dark:text-slate-500': !isSelectable,
-        }), onClick: isSelectable ? selectMonth(month) : undefined, children: shortName }));
+        }), onClick: isSelectable ? selectMonth(month) : undefined, "data-testid": `${dataTestId}-month-${month}`, children: shortName }));
 };
 
-const YearsView = ({ date, value, years, minDate, maxDate, selectYear, }) => (jsx("div", { className: "grid grid-cols-4 gap-1 px-3 py-2", children: years.map((year, index) => (jsx(Year, { date: date, value: value, year: year, minDate: minDate, maxDate: maxDate, selectYear: selectYear }, index))) }));
-const Year = ({ date, value, year, minDate, maxDate, selectYear }) => {
+const YearsView = ({ date, value, years, minDate, maxDate, selectYear, dataTestId = 'years-view', }) => (jsx("div", { className: "grid grid-cols-4 gap-1 px-3 py-2", "data-testid": dataTestId, children: years.map((year, index) => (jsx(Year, { date: date, value: value, year: year, minDate: minDate, maxDate: maxDate, selectYear: selectYear, dataTestId: dataTestId }, index))) }));
+const Year = ({ date, value, year, minDate, maxDate, dataTestId = 'year', selectYear, }) => {
     const dayDate = useMemo(() => new Date(year, date.getMonth(), date.getDate(), date.getHours(), date.getMinutes()), [date, year]);
     const isSelectable = useMemo(() => (!minDate || compareDates(dayDate, new Date(minDate), 'year') >= 0) &&
         (!maxDate || compareDates(dayDate, new Date(maxDate), 'year') <= 0), [dayDate, minDate, maxDate]);
@@ -989,10 +1014,10 @@ const Year = ({ date, value, year, minDate, maxDate, selectYear }) => {
             'cursor-pointer': isSelectable,
             'hover:bg-blue-100 dark:hover:bg-blue-900': isSelectable && !isSelected,
             'text-slate-400 dark:text-slate-500': !isSelectable,
-        }), onClick: isSelectable ? selectYear(year) : undefined, children: year }));
+        }), onClick: isSelectable ? selectYear(year) : undefined, "data-testid": `${dataTestId}-year-${year}`, children: year }));
 };
 
-const DateSelector = ({ date, value, minDate, maxDate, locale, calendarView, setCalendarView, setNewDate, }) => {
+const DateSelector = ({ date, value, minDate, maxDate, locale, calendarView, setCalendarView, setNewDate, dataTestId = 'date-selector', }) => {
     const months = useMonths(locale);
     const [month, setMonth] = useState(date.getMonth());
     const [year, setYear] = useState(date.getFullYear());
@@ -1051,10 +1076,10 @@ const DateSelector = ({ date, value, minDate, maxDate, locale, calendarView, set
         setYear(year);
         setCalendarView('months');
     };
-    return (jsxs("div", { className: "select-none", children: [jsxs("div", { className: "flex justify-between px-3 pt-2", children: [jsx("div", { className: "flex cursor-pointer items-center justify-center rounded-lg px-1 transition duration-100 ease-in-out hover:bg-slate-100 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-slate-700", onClick: editCalendarViewPage('subtract'), children: jsx(ChevronLeftIcon, { className: "h-5 w-5 text-slate-400" }) }), jsxs("div", { className: "flex cursor-pointer items-center gap-1 rounded px-2 py-1 transition duration-100 ease-in-out hover:bg-slate-100 dark:hover:bg-slate-700", onClick: nextCalendarView, children: [calendarView === 'days' && jsx("span", { className: "capitalize", children: months[month].name }), calendarView !== 'years' ? (jsx("span", { className: "text-slate-500 dark:text-slate-300", children: year })) : (jsxs("span", { className: "text-slate-500 dark:text-slate-300", children: [yearsRange[0], " - ", yearsRange[11]] }))] }), jsx("div", { className: "flex cursor-pointer items-center justify-center rounded-lg px-1 transition duration-100 ease-in-out hover:bg-slate-100 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-slate-700", onClick: editCalendarViewPage('add'), children: jsx(ChevronRightIcon, { className: "h-5 w-5 text-slate-400" }) })] }), calendarView === 'days' ? (jsx(DaysView, { date: date, value: value, month: month, year: year, minDate: minDate, maxDate: maxDate, locale: locale, setNewDate: setNewDate })) : calendarView === 'months' ? (jsx(MonthsView, { date: date, value: value, year: year, minDate: minDate, maxDate: maxDate, locale: locale, selectMonth: selectMonth })) : (jsx(YearsView, { date: date, value: value, years: yearsRange, minDate: minDate, maxDate: maxDate, selectYear: selectYear }))] }));
+    return (jsxs("div", { className: "select-none", "data-testid": dataTestId, children: [jsxs("div", { className: "flex justify-between px-3 pt-2", children: [jsx("div", { className: "flex cursor-pointer items-center justify-center rounded-lg px-1 transition duration-100 ease-in-out hover:bg-slate-100 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-slate-700", onClick: editCalendarViewPage('subtract'), "data-testid": `${dataTestId}-prev`, children: jsx(ChevronLeftIcon, { className: "h-5 w-5 text-slate-400" }) }), jsxs("div", { className: "flex cursor-pointer items-center gap-1 rounded px-2 py-1 transition duration-100 ease-in-out hover:bg-slate-100 dark:hover:bg-slate-700", onClick: nextCalendarView, "data-testid": `${dataTestId}-view-selector`, children: [calendarView === 'days' && (jsx("span", { className: "capitalize", "data-testid": `${dataTestId}-month`, children: months[month].name })), calendarView !== 'years' ? (jsx("span", { className: "text-slate-500 dark:text-slate-300", "data-testid": `${dataTestId}-year`, children: year })) : (jsxs("span", { className: "text-slate-500 dark:text-slate-300", "data-testid": `${dataTestId}-year-range`, children: [yearsRange[0], " - ", yearsRange[11]] }))] }), jsx("div", { className: "flex cursor-pointer items-center justify-center rounded-lg px-1 transition duration-100 ease-in-out hover:bg-slate-100 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-slate-700", onClick: editCalendarViewPage('add'), "data-testid": `${dataTestId}-next`, children: jsx(ChevronRightIcon, { className: "h-5 w-5 text-slate-400" }) })] }), calendarView === 'days' ? (jsx(DaysView, { date: date, value: value, month: month, year: year, minDate: minDate, maxDate: maxDate, locale: locale, setNewDate: setNewDate, dataTestId: `${dataTestId}-days` })) : calendarView === 'months' ? (jsx(MonthsView, { date: date, value: value, year: year, minDate: minDate, maxDate: maxDate, locale: locale, selectMonth: selectMonth, dataTestId: `${dataTestId}-months` })) : (jsx(YearsView, { date: date, value: value, years: yearsRange, minDate: minDate, maxDate: maxDate, selectYear: selectYear, dataTestId: `${dataTestId}-years` }))] }));
 };
 
-const TimeSelector = ({ date, step = 1, minDate, maxDate, setNewDate, }) => {
+const TimeSelector = ({ date, step = 1, minDate, maxDate, setNewDate, dataTestId = 'time-selector', }) => {
     const editDateField = (field, diff) => () => {
         const newDate = dayjs(date).add(diff, field).toDate();
         if (minDate && compareDates(newDate, new Date(minDate), 'minute') < 0)
@@ -1068,11 +1093,11 @@ const TimeSelector = ({ date, step = 1, minDate, maxDate, setNewDate, }) => {
     const increaseMinutes = useLongPress(editDateField('minutes', step));
     const decreaseMinutes = useLongPress(editDateField('minutes', -step));
     const onWheel = (field) => (event) => editDateField(field, (event.deltaY < 0 ? 1 : -1) * (field === 'hours' ? 1 : step))();
-    return (jsxs(Fragment, { children: [jsx("label", { className: "text-sm text-slate-700 dark:text-slate-300", children: "Time" }), jsxs("div", { className: "flex flex-grow justify-center gap-2", children: [jsxs("div", { className: "flex flex-col items-center justify-center", children: [jsx(ChevronUpIcon, Object.assign({ className: "h-4 w-4 rounded hover:bg-slate-100 dark:hover:bg-slate-700", onClick: editDateField('hours', 1) }, increaseHours)), jsx(ChevronDownIcon, Object.assign({ className: "h-4 w-4 rounded hover:bg-slate-100 dark:hover:bg-slate-700", onClick: editDateField('hours', -1) }, decreaseHours))] }), jsxs("div", { className: "flex items-center rounded-lg border border-slate-100 bg-slate-100 text-right dark:border-slate-700 dark:bg-slate-800", children: [jsx("span", { className: "flex px-2", onWheel: onWheel('hours'), children: date.getHours().toString().padStart(2, '0') }), jsx("span", { children: ":" }), jsx("span", { className: "flex px-2", onWheel: onWheel('minutes'), children: date.getMinutes().toString().padStart(2, '0') })] }), jsxs("div", { className: "flex flex-col items-center justify-center", children: [jsx(ChevronUpIcon, Object.assign({ className: "h-4 w-4 rounded hover:bg-slate-100 dark:hover:bg-slate-700", onClick: editDateField('minutes', step) }, increaseMinutes)), jsx(ChevronDownIcon, Object.assign({ className: "h-4 w-4 rounded hover:bg-slate-100 dark:hover:bg-slate-700", onClick: editDateField('minutes', -step) }, decreaseMinutes))] })] })] }));
+    return (jsxs(Fragment, { children: [jsx("label", { className: "text-sm text-slate-700 dark:text-slate-300", children: "Time" }), jsxs("div", { className: "flex flex-grow justify-center gap-2", children: [jsxs("div", { className: "flex flex-col items-center justify-center", children: [jsx(ChevronUpIcon, Object.assign({ className: "h-4 w-4 rounded hover:bg-slate-100 dark:hover:bg-slate-700", onClick: editDateField('hours', 1) }, increaseHours, { "data-testid": `${dataTestId}-hours-up` })), jsx(ChevronDownIcon, Object.assign({ className: "h-4 w-4 rounded hover:bg-slate-100 dark:hover:bg-slate-700", onClick: editDateField('hours', -1) }, decreaseHours, { "data-testid": `${dataTestId}-hours-down` }))] }), jsxs("div", { className: "flex items-center rounded-lg border border-slate-100 bg-slate-100 text-right dark:border-slate-700 dark:bg-slate-800", children: [jsx("span", { className: "flex px-2", onWheel: onWheel('hours'), "data-testid": `${dataTestId}-hours`, children: date.getHours().toString().padStart(2, '0') }), jsx("span", { children: ":" }), jsx("span", { className: "flex px-2", onWheel: onWheel('minutes'), "data-testid": `${dataTestId}-minutes`, children: date.getMinutes().toString().padStart(2, '0') })] }), jsxs("div", { className: "flex flex-col items-center justify-center", children: [jsx(ChevronUpIcon, Object.assign({ className: "h-4 w-4 rounded hover:bg-slate-100 dark:hover:bg-slate-700", onClick: editDateField('minutes', step) }, increaseMinutes, { "data-testid": `${dataTestId}-minutes-up` })), jsx(ChevronDownIcon, Object.assign({ className: "h-4 w-4 rounded hover:bg-slate-100 dark:hover:bg-slate-700", onClick: editDateField('minutes', -step) }, decreaseMinutes, { "data-testid": `${dataTestId}-minutes-down` }))] })] })] }));
 };
 
 const DateTimeInput = (_a) => {
-    var { className, value, clearable, type = 'datetime-local', step = 1, minDate, maxDate, hasErrors, onChange, onBlur, displayFormat = 'dddd, MMMM Do YYYY, HH:mm:ss', displayLocale = 'en', ref } = _a, props = __rest(_a, ["className", "value", "clearable", "type", "step", "minDate", "maxDate", "hasErrors", "onChange", "onBlur", "displayFormat", "displayLocale", "ref"]);
+    var { className, value, clearable, type = 'datetime-local', step = 1, minDate, maxDate, hasErrors, onChange, onBlur, displayFormat = 'dddd, MMMM Do YYYY, HH:mm:ss', displayLocale = 'en', ref, dataTestId = 'date-time-input' } = _a, props = __rest(_a, ["className", "value", "clearable", "type", "step", "minDate", "maxDate", "hasErrors", "onChange", "onBlur", "displayFormat", "displayLocale", "ref", "dataTestId"]);
     const [isOpen, setIsOpen] = useState();
     const [calendarView, setCalendarView] = useState('days');
     const date = useMemo(() => {
@@ -1082,7 +1107,7 @@ const DateTimeInput = (_a) => {
         result.setMinutes(result.getMinutes() - ((result.getMinutes() + step) % step));
         return result;
     }, [step, maxDate, minDate, value]);
-    const displayDate = useMemo(() => value && getDisplayDate(date, displayFormat, displayLocale), [date, value, displayFormat, displayLocale]);
+    const displayDate = useMemo(() => value && getDisplayDate(date, { format: displayFormat, locale: displayLocale }), [date, value, displayFormat, displayLocale]);
     const calendarRef = useRef(null);
     useOutsideClick(calendarRef, () => setIsOpen(false));
     useEffect(() => {
@@ -1124,33 +1149,33 @@ const DateTimeInput = (_a) => {
                 setIsOpen(false);
         }
     };
-    return (jsxs("div", { className: cn('relative w-full', className), ref: ref, children: [jsx(BasicInput, Object.assign({}, props, { type: "text", readOnly: true, value: displayDate !== null && displayDate !== void 0 ? displayDate : '', hasErrors: hasErrors, onClick: handleOnClick, onKeyUp: handleOnKeyUp, clearable: clearable && !!displayDate, onClear: clearDate, suffixIcon: (type === null || type === void 0 ? void 0 : type.includes('date')) ? CalendarIcon : ClockIcon, onSuffixIconClick: handleOnClick })), isOpen && (jsxs("div", { className: "absolute z-20 mt-2 flex origin-top-left flex-col rounded-md border bg-white shadow duration-200 dark:border-slate-700 dark:bg-slate-900 dark:text-white", tabIndex: 0, onBlur: handleOnBlur, ref: calendarRef, children: [(type === null || type === void 0 ? void 0 : type.includes('date')) && (jsx(DateSelector, { date: date, value: value, minDate: minDate, maxDate: maxDate, locale: displayLocale, calendarView: calendarView, setCalendarView: setCalendarView, setNewDate: setNewDate })), calendarView === 'days' && (jsxs("div", { className: "flex select-none items-center justify-end gap-2 px-3 py-2", children: [(type === null || type === void 0 ? void 0 : type.includes('time')) && (jsx(TimeSelector, { date: date, step: step, minDate: minDate, maxDate: maxDate, setNewDate: setNewDate })), jsx("div", { className: "cursor-pointer rounded-lg border border-transparent p-1 text-sm font-bold uppercase text-blue-600 transition duration-100 ease-in-out hover:bg-slate-100 dark:text-blue-500 dark:hover:bg-slate-700", onClick: () => setIsOpen(false), children: "OK" })] }))] }))] }));
+    return (jsxs("div", { className: cn('relative w-full', className), ref: ref, children: [jsx(BasicInput, Object.assign({}, props, { type: "text", readOnly: true, value: displayDate !== null && displayDate !== void 0 ? displayDate : '', hasErrors: hasErrors, onClick: handleOnClick, onKeyUp: handleOnKeyUp, clearable: clearable && !!displayDate, onClear: clearDate, suffixIcon: (type === null || type === void 0 ? void 0 : type.includes('date')) ? CalendarIcon : ClockIcon, onSuffixIconClick: handleOnClick, dataTestId: dataTestId })), isOpen && (jsxs("div", { className: "absolute z-20 mt-2 flex origin-top-left flex-col rounded-md border bg-white shadow duration-200 dark:border-slate-700 dark:bg-slate-900 dark:text-white", tabIndex: 0, onBlur: handleOnBlur, ref: calendarRef, "data-testid": `${dataTestId}-popup`, children: [(type === null || type === void 0 ? void 0 : type.includes('date')) && (jsx(DateSelector, { date: date, value: value, minDate: minDate, maxDate: maxDate, locale: displayLocale, calendarView: calendarView, setCalendarView: setCalendarView, setNewDate: setNewDate, dataTestId: `${dataTestId}-date-selector` })), calendarView === 'days' && (jsxs("div", { className: "flex select-none items-center justify-end gap-2 px-3 py-2", "data-testid": `${dataTestId}-time-selector`, children: [(type === null || type === void 0 ? void 0 : type.includes('time')) && (jsx(TimeSelector, { date: date, step: step, minDate: minDate, maxDate: maxDate, setNewDate: setNewDate, dataTestId: `${dataTestId}-time-selector` })), jsx("div", { className: "cursor-pointer rounded-lg border border-transparent p-1 text-sm font-bold uppercase text-blue-600 transition duration-100 ease-in-out hover:bg-slate-100 dark:text-blue-500 dark:hover:bg-slate-700", onClick: () => setIsOpen(false), "data-testid": `${dataTestId}-ok`, children: "OK" })] }))] }))] }));
 };
 
 const ListContent = (_a) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx(Block, Object.assign({ className: cn('z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-100 bg-white p-1 text-slate-700 shadow-md dark:border-slate-700 dark:bg-slate-900 dark:text-white', className) }, props)));
+    var { className, dataTestId = 'list' } = _a, props = __rest(_a, ["className", "dataTestId"]);
+    return (jsx(Block, Object.assign({ className: cn('z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-100 bg-white p-1 text-slate-700 shadow-md dark:border-slate-700 dark:bg-slate-900 dark:text-white', className), dataTestId: dataTestId }, props)));
 };
 const labelSizeClasses = {
     small: 'p-1 text-sm',
     medium: 'px-2 py-1.5',
 };
 const ListItem = (_a) => {
-    var { className, size = 'medium', inset } = _a, props = __rest(_a, ["className", "size", "inset"]);
-    return (jsx(Flex, Object.assign({ className: cn(labelSizeClasses[size], 'relative cursor-default select-none gap-2 rounded-md outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-700', inset && 'pl-8', className), align: "center" }, props)));
+    var { className, size = 'medium', inset, dataTestId = 'list-item' } = _a, props = __rest(_a, ["className", "size", "inset", "dataTestId"]);
+    return (jsx(Flex, Object.assign({ className: cn(labelSizeClasses[size], 'relative cursor-default select-none gap-2 rounded-md outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-700', inset && 'pl-8', className), align: "center", dataTestId: dataTestId }, props)));
 };
 const ListLabel = (_a) => {
-    var { className, size = 'medium', inset } = _a, props = __rest(_a, ["className", "size", "inset"]);
-    return (jsx(Block, Object.assign({ className: cn(labelSizeClasses[size], 'font-semibold text-slate-900 dark:text-slate-300', inset && 'pl-8', className) }, props)));
+    var { className, size = 'medium', inset, dataTestId = 'list-label' } = _a, props = __rest(_a, ["className", "size", "inset", "dataTestId"]);
+    return (jsx(Block, Object.assign({ className: cn(labelSizeClasses[size], 'font-semibold text-slate-900 dark:text-slate-300', inset && 'pl-8', className), dataTestId: dataTestId }, props)));
 };
 const ListIndicator = (_a) => {
-    var { className, icon: Icon, iconClassName } = _a, props = __rest(_a, ["className", "icon", "iconClassName"]);
-    return (jsx(Flex, Object.assign({ className: cn('absolute left-2 h-3.5 w-3.5', className), align: "center", justify: "center" }, props, { children: jsx(Icon, { className: iconClassName }) })));
+    var { className, icon: Icon, iconClassName, dataTestId = 'list-indicator' } = _a, props = __rest(_a, ["className", "icon", "iconClassName", "dataTestId"]);
+    return (jsx(Flex, Object.assign({ className: cn('absolute left-2 h-3.5 w-3.5', className), align: "center", justify: "center", dataTestId: dataTestId }, props, { children: jsx(Icon, { className: iconClassName }) })));
 };
-const ListIcon = ({ className, icon: Icon, ref, }) => jsx(Icon, { className: cn('h-4 w-4', className), ref: ref });
+const ListIcon = ({ className, icon: Icon, ref, dataTestId = 'list-icon' }) => (jsx(Icon, { className: cn('h-4 w-4', className), ref: ref, "data-testid": dataTestId }));
 const ListSeparator = (_a) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx(Block, Object.assign({ className: cn('-mx-1 my-1 h-px bg-slate-100 dark:bg-slate-700', className) }, props)));
+    var { className, dataTestId = 'list-separator' } = _a, props = __rest(_a, ["className", "dataTestId"]);
+    return (jsx(Block, Object.assign({ className: cn('-mx-1 my-1 h-px bg-slate-100 dark:bg-slate-700', className), dataTestId: dataTestId }, props)));
 };
 const List = Object.assign(ListContent, {
     Item: ListItem,
@@ -1160,54 +1185,69 @@ const List = Object.assign(ListContent, {
     Separator: ListSeparator,
 });
 
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-const DropdownMenuGroup = DropdownMenuPrimitive.Group;
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
-const DropdownMenuSub = DropdownMenuPrimitive.Sub;
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+const DropdownMenuTrigger = (_a) => {
+    var { children, dataTestId = 'dropdown-menu-trigger' } = _a, props = __rest(_a, ["children", "dataTestId"]);
+    return (jsx(DropdownMenuPrimitive.Trigger, Object.assign({ "data-testid": dataTestId }, props, { children: children })));
+};
+const DropdownMenuGroup = (_a) => {
+    var { children, dataTestId = 'dropdown-menu-group' } = _a, props = __rest(_a, ["children", "dataTestId"]);
+    return (jsx(DropdownMenuPrimitive.Group, Object.assign({ "data-testid": dataTestId }, props, { children: children })));
+};
+const DropdownMenuPortal = (_a) => {
+    var { children, dataTestId = 'dropdown-menu-portal' } = _a, props = __rest(_a, ["children", "dataTestId"]);
+    return jsx(DropdownMenuPrimitive.Portal, Object.assign({}, props, { children: children }));
+};
+const DropdownMenuSub = (_a) => {
+    var { children, dataTestId = 'dropdown-menu-sub' } = _a, props = __rest(_a, ["children", "dataTestId"]);
+    return jsx(DropdownMenuPrimitive.Sub, Object.assign({}, props, { children: children }));
+};
+const DropdownMenuRadioGroup = (_a) => {
+    var { children, dataTestId = 'dropdown-menu-radio-group' } = _a, props = __rest(_a, ["children", "dataTestId"]);
+    return (jsx(DropdownMenuPrimitive.RadioGroup, Object.assign({ "data-testid": dataTestId }, props, { children: children })));
+};
 const DropdownMenuSubTrigger = (_a) => {
-    var { className, inset, children } = _a, props = __rest(_a, ["className", "inset", "children"]);
-    return (jsx(DropdownMenuPrimitive.SubTrigger, Object.assign({}, props, { asChild: true, children: jsxs(List.Item, { className: className, inset: inset, children: [children, jsx(ChevronRightIcon, { className: "ml-auto h-4 w-4" })] }) })));
+    var { className, inset, children, dataTestId = 'dropdown-menu-subtrigger' } = _a, props = __rest(_a, ["className", "inset", "children", "dataTestId"]);
+    return (jsx(DropdownMenuPrimitive.SubTrigger, Object.assign({}, props, { asChild: true, children: jsxs(List.Item, { className: className, inset: inset, "data-testid": dataTestId, children: [children, jsx(ChevronRightIcon, { className: "ml-auto h-4 w-4" })] }) })));
 };
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
 const DropdownMenuSubContent = (_a) => {
-    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
-    return (jsx(DropdownMenuPrimitive.Portal, { children: jsx(DropdownMenuPrimitive.SubContent, Object.assign({}, props, { asChild: true, children: jsx(List, { className: className, children: children }) })) }));
+    var { className, children, dataTestId = 'dropdown-menu-subcontent' } = _a, props = __rest(_a, ["className", "children", "dataTestId"]);
+    return (jsx(DropdownMenuPrimitive.Portal, { children: jsx(DropdownMenuPrimitive.SubContent, Object.assign({}, props, { asChild: true, children: jsx(List, { className: className, dataTestId: dataTestId, children: children }) })) }));
 };
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
 const DropdownMenuContent = (_a) => {
-    var { className, children, sideOffset = 4 } = _a, props = __rest(_a, ["className", "children", "sideOffset"]);
-    return (jsx(DropdownMenuPrimitive.Portal, { children: jsx(DropdownMenuPrimitive.Content, Object.assign({ sideOffset: sideOffset }, props, { asChild: true, children: jsx(List, { className: className, children: children }) })) }));
+    var { className, children, sideOffset = 4, dataTestId = 'dropdown-menu-content' } = _a, props = __rest(_a, ["className", "children", "sideOffset", "dataTestId"]);
+    return (jsx(DropdownMenuPrimitive.Portal, { children: jsx(DropdownMenuPrimitive.Content, Object.assign({ sideOffset: sideOffset }, props, { asChild: true, children: jsx(List, { className: className, dataTestId: dataTestId, children: children }) })) }));
 };
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 const DropdownMenuItem = (_a) => {
-    var { className, inset, children } = _a, props = __rest(_a, ["className", "inset", "children"]);
-    return (jsx(DropdownMenuPrimitive.Item, Object.assign({}, props, { asChild: true, children: jsx(List.Item, { inset: inset, className: className, children: children }) })));
+    var { className, inset, children, dataTestId = 'dropdown-menu-item' } = _a, props = __rest(_a, ["className", "inset", "children", "dataTestId"]);
+    return (jsx(DropdownMenuPrimitive.Item, Object.assign({}, props, { asChild: true, children: jsx(List.Item, { inset: inset, className: className, "data-testid": dataTestId, children: children }) })));
 };
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 const DropdownMenuCheckboxItem = (_a) => {
-    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
-    return (jsx(DropdownMenuPrimitive.CheckboxItem, Object.assign({}, props, { asChild: true, children: jsxs(List.Item, { inset: true, className: className, children: [jsx(DropdownMenuPrimitive.ItemIndicator, { asChild: true, children: jsx(List.Indicator, { icon: CheckIcon, iconClassName: "h-4 w-4" }) }), children] }) })));
+    var { className, children, dataTestId = 'dropdown-menu-checkbox-item' } = _a, props = __rest(_a, ["className", "children", "dataTestId"]);
+    return (jsx(DropdownMenuPrimitive.CheckboxItem, Object.assign({}, props, { asChild: true, children: jsxs(List.Item, { inset: true, className: className, "data-testid": dataTestId, children: [jsx(DropdownMenuPrimitive.ItemIndicator, { asChild: true, children: jsx(List.Indicator, { icon: CheckIcon, iconClassName: "h-4 w-4" }) }), children] }) })));
 };
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
 const DropdownMenuRadioItem = (_a) => {
-    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
-    return (jsx(DropdownMenuPrimitive.RadioItem, Object.assign({}, props, { asChild: true, children: jsxs(List.Item, { inset: true, className: className, children: [jsx(DropdownMenuPrimitive.ItemIndicator, { asChild: true, children: jsx(List.Indicator, { icon: CircleIcon, iconClassName: "h-2 w-2 fill-current" }) }), children] }) })));
+    var { className, children, dataTestId = 'dropdown-menu-radio-item' } = _a, props = __rest(_a, ["className", "children", "dataTestId"]);
+    return (jsx(DropdownMenuPrimitive.RadioItem, Object.assign({}, props, { asChild: true, children: jsxs(List.Item, { inset: true, className: className, "data-testid": dataTestId, children: [jsx(DropdownMenuPrimitive.ItemIndicator, { asChild: true, children: jsx(List.Indicator, { icon: CircleIcon, iconClassName: "h-2 w-2 fill-current" }) }), children] }) })));
 };
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 const DropdownMenuLabel = (_a) => {
-    var { className, inset, children } = _a, props = __rest(_a, ["className", "inset", "children"]);
-    return (jsx(DropdownMenuPrimitive.Label, Object.assign({}, props, { asChild: true, children: jsx(List.Label, { className: className, inset: inset, children: children }) })));
+    var { className, inset, children, dataTestId = 'dropdown-menu-label' } = _a, props = __rest(_a, ["className", "inset", "children", "dataTestId"]);
+    return (jsx(DropdownMenuPrimitive.Label, Object.assign({}, props, { asChild: true, children: jsx(List.Label, { className: className, inset: inset, "data-testid": dataTestId, children: children }) })));
 };
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 const DropdownMenuSeparator = (_a) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx(DropdownMenuPrimitive.Separator, Object.assign({}, props, { asChild: true, children: jsx(List.Separator, { className: className }) })));
+    var { className, dataTestId = 'dropdown-menu-separator' } = _a, props = __rest(_a, ["className", "dataTestId"]);
+    return (jsx(DropdownMenuPrimitive.Separator, Object.assign({}, props, { asChild: true, children: jsx(List.Separator, { className: className, "data-testid": dataTestId }) })));
 };
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 const DropdownMenuShortcut = (_a) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx("span", Object.assign({ className: cn('ml-auto text-xs tracking-widest text-slate-500', className) }, props)));
+    var { className, dataTestId = 'dropdown-menu-shortcut' } = _a, props = __rest(_a, ["className", "dataTestId"]);
+    return (jsx("span", Object.assign({ className: cn('ml-auto text-xs tracking-widest text-slate-500', className), "data-testid": dataTestId }, props)));
 };
 DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
 const DropdownMenu = Object.assign(DropdownMenuPrimitive.Root, {
@@ -1232,7 +1272,7 @@ const defaultRenderItem = (item, selected) => item.label;
 const defaultSearchPredicate = (item, searchValue) => item.label.toLowerCase().includes(searchValue.toLowerCase());
 const defaultSelectPredicate = (a, b) => a === b;
 const SelectInput = (_a) => {
-    var { className, items, renderItem = defaultRenderItem, value, multiple, clearable, allowAddition, onNewItemAdded, search, searchPredicate = defaultSearchPredicate, selectPredicate = defaultSelectPredicate, onChange, readOnly, parentRef } = _a, props = __rest(_a, ["className", "items", "renderItem", "value", "multiple", "clearable", "allowAddition", "onNewItemAdded", "search", "searchPredicate", "selectPredicate", "onChange", "readOnly", "parentRef"]);
+    var { className, items, renderItem = defaultRenderItem, value, multiple, clearable, allowAddition, onNewItemAdded, search, searchPredicate = defaultSearchPredicate, selectPredicate = defaultSelectPredicate, onChange, readOnly, parentRef, dataTestId = 'select-input' } = _a, props = __rest(_a, ["className", "items", "renderItem", "value", "multiple", "clearable", "allowAddition", "onNewItemAdded", "search", "searchPredicate", "selectPredicate", "onChange", "readOnly", "parentRef", "dataTestId"]);
     const [open, setOpen] = useState(false);
     const [searchValue, setSearchValue] = useState('');
     const pureItems = useMemo(() => items.flatMap((item) => (item.group ? item.items : [item])), [items]);
@@ -1309,17 +1349,17 @@ const SelectInput = (_a) => {
             }), value: String(option.id), checked: isNotNullOrUndefined(selectedMap[option.id]), onSelect: (event) => {
                 multiple && event.preventDefault();
                 handleOnSelect(option.id);
-            }, children: jsx("span", { children: renderItem(option, isNotNullOrUndefined(selectedMap[option.id])) }) }));
+            }, dataTestId: option.dataTestId, children: jsx("span", { children: renderItem(option, isNotNullOrUndefined(selectedMap[option.id])) }) }));
     }, [ItemComponent, handleOnSelect, multiple, renderItem, selectedMap]);
-    return (jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, children: [jsx(DropdownMenu.Trigger, { className: cn('w-full', className), children: jsx(TextInput, Object.assign({ className: "[&>div>*]:cursor-pointer", inputClassName: "text-left" }, props, { value: text !== null && text !== void 0 ? text : '', clearable: clearable && !!selectedItems.length, onClear: handleOnClear, suffixIcon: ChevronDownIcon, onSuffixIconClick: () => setOpen((open) => !open), readOnly: true })) }), jsxs(DropdownMenu.Content, { className: "flex max-h-80 w-[calc(var(--radix-popper-anchor-width))] flex-col overflow-hidden", children: [search && (jsxs(Fragment, { children: [jsx(TextInput, { value: searchValue, placeholder: "Search...", size: props.size, onChange: handleOnSearchValueChange, onKeyUp: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), clearable: !!searchValue.length, onClear: clearSearchValue }), jsx(DropdownMenu.Separator, { className: "w-full" })] })), filteredItems.length === 0 &&
-                        (allowAddition && searchValue ? (jsxs("button", { className: "rounded bg-slate-100 py-1.5 text-center hover:bg-slate-200 dark:bg-slate-900/30 dark:hover:bg-slate-700/30", onClick: handleOnAddItemClicked, children: ["Add '", searchValue, "'"] })) : (jsx("div", { className: "py-1.5 text-center text-slate-500", children: "No items." }))), jsx(GroupComponent, { className: "flex flex-col gap-1 overflow-auto", value: !multiple && selectedItems.length ? String(selectedItems[0].id) : undefined, children: filteredItems.map((item, index) => item.group ? (jsxs(Flex, { className: "gap-1", direction: "column", fullWidth: true, children: [jsx(DropdownMenu.Label, { className: "sticky top-0 z-[51] w-full rounded-md border bg-white py-1 dark:bg-slate-900", children: item.label }), item.items.map((subItem) => (jsx(RenderOption, Object.assign({}, subItem), subItem.id))), index < filteredItems.length - 1 && (jsx("div", { className: "mb-1 h-px w-full bg-slate-200 dark:bg-slate-700" }))] }, item.id)) : (jsx(RenderOption, Object.assign({}, item), item.id))) })] })] }));
+    return (jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, children: [jsx(DropdownMenu.Trigger, { className: cn('w-full', className), dataTestId: `${dataTestId}-trigger`, children: jsx(TextInput, Object.assign({ className: "[&>div>*]:cursor-pointer", inputClassName: "text-left" }, props, { value: text !== null && text !== void 0 ? text : '', clearable: clearable && !!selectedItems.length, onClear: handleOnClear, suffixIcon: ChevronDownIcon, onSuffixIconClick: () => setOpen((open) => !open), readOnly: true, dataTestId: dataTestId })) }), jsxs(DropdownMenu.Content, { className: "flex max-h-80 w-[calc(var(--radix-popper-anchor-width))] flex-col overflow-hidden", dataTestId: `${dataTestId}-content`, children: [search && (jsxs(Fragment, { children: [jsx(TextInput, { value: searchValue, placeholder: "Search...", size: props.size, onChange: handleOnSearchValueChange, onKeyUp: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), clearable: !!searchValue.length, onClear: clearSearchValue, dataTestId: `${dataTestId}-search` }), jsx(DropdownMenu.Separator, { className: "w-full", dataTestId: `${dataTestId}-separator` })] })), filteredItems.length === 0 &&
+                        (allowAddition && searchValue ? (jsxs("button", { className: "rounded bg-slate-100 py-1.5 text-center hover:bg-slate-200 dark:bg-slate-900/30 dark:hover:bg-slate-700/30", onClick: handleOnAddItemClicked, "data-testid": `${dataTestId}-add-button`, children: ["Add '", searchValue, "'"] })) : (jsx("div", { className: "py-1.5 text-center text-slate-500", "data-testid": `${dataTestId}-no-items`, children: "No items" }))), jsx(GroupComponent, { className: "flex flex-col gap-1 overflow-auto", value: !multiple && selectedItems.length ? String(selectedItems[0].id) : undefined, dataTestId: `${dataTestId}-group`, children: filteredItems.map((item, index) => item.group ? (jsxs(Flex, { className: "gap-1", direction: "column", fullWidth: true, children: [jsx(DropdownMenu.Label, { className: "sticky top-0 z-[51] w-full rounded-md border bg-white py-1 dark:bg-slate-900", dataTestId: `${dataTestId}-group-label-${item.id}`, children: item.label }), item.items.map((subItem) => (jsx(RenderOption, Object.assign({}, subItem, { dataTestId: `${dataTestId}-item-${subItem.id}` }), subItem.id))), index < filteredItems.length - 1 && (jsx("div", { className: "mb-1 h-px w-full bg-slate-200 dark:bg-slate-700" }))] }, item.id)) : (jsx(RenderOption, Object.assign({}, item, { dataTestId: `${dataTestId}-item-${item.id}` }), item.id))) })] })] }));
 };
 function isNotNullOrUndefined(value) {
     return value !== null && value !== undefined;
 }
 
 const FileInput = (_a) => {
-    var { className, value, onChange, onFileChange, accept } = _a, props = __rest(_a, ["className", "value", "onChange", "onFileChange", "accept"]);
+    var { className, inputClassName, value, onChange, onFileChange, accept, dataTestId = 'file-input' } = _a, props = __rest(_a, ["className", "inputClassName", "value", "onChange", "onFileChange", "accept", "dataTestId"]);
     const fileInputRef = useRef(null);
     const handleFileChange = (_a) => __awaiter(void 0, [_a], void 0, function* ({ target: { files } }) {
         if (files && files.length > 0) {
@@ -1328,9 +1368,9 @@ const FileInput = (_a) => {
             onFileChange === null || onFileChange === void 0 ? void 0 : onFileChange(file);
         }
     });
-    return (jsxs(Fragment, { children: [jsx(TextInput, Object.assign({ className: cn('[&>div>*]:cursor-pointer', className), inputClassName: "text-left" }, props, { value: value !== null && value !== void 0 ? value : '', onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, suffixIcon: CloudUploadIcon, onSuffixIconClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, readOnly: true })), jsx("input", { ref: (ref) => {
+    return (jsxs(Fragment, { children: [jsx(TextInput, Object.assign({ className: cn('[&>div>*]:cursor-pointer', className), inputClassName: cn('text-left', inputClassName) }, props, { value: value !== null && value !== void 0 ? value : '', onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, suffixIcon: CloudUploadIcon, onSuffixIconClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, dataTestId: dataTestId, readOnly: true })), jsx("input", { ref: (ref) => {
                     fileInputRef.current = ref;
-                }, type: "file", hidden: true, accept: accept, onChange: handleFileChange })] }));
+                }, type: "file", hidden: true, accept: accept, onChange: handleFileChange, "data-testid": `${dataTestId}-hidden` })] }));
 };
 
 const FormGroup = ({ className, label, children }) => (jsxs(Flex, { className: cn('relative !gap-4 rounded-lg border p-4 dark:border-slate-700', className), direction: "column", fullWidth: true, children: [jsx("div", { className: "absolute right-0 top-0 rounded-bl-lg rounded-tr-lg bg-slate-500 px-2 py-1 font-medium text-white dark:bg-slate-900 dark:text-white", children: label }), children] }));
@@ -1366,7 +1406,7 @@ const FormInputs = {
     File: withForm(FileInput),
 };
 
-const HintRoot = ({ children, ref }) => (jsx(Block, { className: "relative", ref: ref, children: children }));
+const HintRoot = ({ children, ref, dataTestId = 'hint' }) => (jsx(Block, { className: "relative", ref: ref, dataTestId: dataTestId, children: children }));
 HintRoot.displayName = 'HintRoot';
 const dotSizeClassNames = {
     small: {
@@ -1408,12 +1448,12 @@ const colorClassNames = {
     pink: 'bg-pink-500 dark:bg-pink-600',
     rose: 'bg-rose-500 dark:bg-rose-600',
 };
-const HintDot = ({ size = 'medium', placement = 'top-right', color = 'green', ping, ref, }) => (jsxs(Fragment, { children: [jsx(Block, { className: cn('absolute rounded-full', colorClassNames[color], dotSizeClassNames[size].base, {
+const HintDot = ({ size = 'medium', placement = 'top-right', color = 'green', ping, ref, dataTestId = 'hint-dot', }) => (jsxs(Fragment, { children: [jsx(Block, { className: cn('absolute rounded-full', colorClassNames[color], dotSizeClassNames[size].base, {
                 [`${dotSizeClassNames[size].top} ${dotSizeClassNames[size].left}`]: placement === 'top-left',
                 [`${dotSizeClassNames[size].top} ${dotSizeClassNames[size].right}`]: placement === 'top-right',
                 [`${dotSizeClassNames[size].bottom} ${dotSizeClassNames[size].right}`]: placement === 'bottom-right',
                 [`${dotSizeClassNames[size].bottom} ${dotSizeClassNames[size].left}`]: placement === 'bottom-left',
-            }), ref: ref }), ping && (jsx(Block, { className: cn('absolute animate-ping rounded-full', colorClassNames[color], dotSizeClassNames[size].base, {
+            }), ref: ref, "data-testid": dataTestId }), ping && (jsx(Block, { className: cn('absolute animate-ping rounded-full', colorClassNames[color], dotSizeClassNames[size].base, {
                 [`${dotSizeClassNames[size].top} ${dotSizeClassNames[size].left}`]: placement === 'top-left',
                 [`${dotSizeClassNames[size].top} ${dotSizeClassNames[size].right}`]: placement === 'top-right',
                 [`${dotSizeClassNames[size].bottom} ${dotSizeClassNames[size].right}`]: placement === 'bottom-right',
@@ -1427,26 +1467,26 @@ const badgeSizeClassNames = {
     left: 'left-2 -translate-x-full',
 };
 const HintBadge = (_a) => {
-    var { className, size = 'small', placement = 'top-right' } = _a, props = __rest(_a, ["className", "size", "placement"]);
+    var { className, size = 'small', placement = 'top-right', dataTestId = 'hint-badge' } = _a, props = __rest(_a, ["className", "size", "placement", "dataTestId"]);
     return (jsx(Badge, Object.assign({ className: cn('absolute z-10 px-1', size === 'small' ? 'h-4' : 'h-5', {
             [`${badgeSizeClassNames.top} ${badgeSizeClassNames.left}`]: placement === 'top-left',
             [`${badgeSizeClassNames.top} ${badgeSizeClassNames.right}`]: placement === 'top-right',
             [`${badgeSizeClassNames.bottom} ${badgeSizeClassNames.right}`]: placement === 'bottom-right',
             [`${badgeSizeClassNames.bottom} ${badgeSizeClassNames.left}`]: placement === 'bottom-left',
-        }, className), size: size }, props)));
+        }, className), size: size, dataTestId: dataTestId }, props)));
 };
 HintBadge.displayName = 'HintBadge';
 const Hint = Object.assign(HintRoot, { Dot: HintDot, Badge: HintBadge });
 
-const Pagination = ({ disabled, pageSize = 10, currentPage, totalItems, setCurrentPage, }) => {
+const Pagination = ({ disabled, pageSize = 10, currentPage, totalItems, dataTestId = 'pagination', setCurrentPage, }) => {
     const totalPages = useMemo(() => Math.ceil(totalItems / pageSize), [pageSize, totalItems]);
     const pagination = usePagination(currentPage + 1, totalPages);
     useEffect(() => {
         setCurrentPage((page) => Math.min(page, Math.max(0, totalPages - 1)));
     }, [setCurrentPage, totalPages]);
-    return (jsx(Flex, { justify: "end", children: jsxs(Flex, { className: "h-9 gap-0 divide-x rounded-md border border-slate-300 bg-white dark:divide-slate-700 dark:border-slate-700 dark:bg-slate-800", children: [jsx(PaginationItem, { title: "First page", onClick: () => setCurrentPage(0), disabled: !currentPage || disabled, children: jsx(ChevronsLeftIcon, { className: "h-4 w-4" }) }), jsx(PaginationItem, { title: "Previous page", onClick: () => currentPage && setCurrentPage(currentPage - 1), disabled: !currentPage || disabled, children: jsx(ChevronLeftIcon, { className: "h-4 w-4" }) }), pagination.map((page, index) => (jsx(PaginationItem, { active: page !== '...' && page - 1 === currentPage, title: page !== '...' ? `Page ${page}` : undefined, onClick: page !== '...' ? () => setCurrentPage(page - 1) : undefined, disabled: page === '...' || disabled, children: page }, index))), jsx(PaginationItem, { title: "Next page", onClick: () => currentPage + 1 < totalPages && setCurrentPage(currentPage + 1), disabled: currentPage + 1 === totalPages || disabled, children: jsx(ChevronRightIcon, { className: "h-4 w-4" }) }), jsx(PaginationItem, { title: "Last page", onClick: () => setCurrentPage(Math.floor(totalItems && !(totalItems % pageSize)
+    return (jsx(Flex, { justify: "end", dataTestId: dataTestId, children: jsxs(Flex, { className: "h-9 gap-0 divide-x rounded-md border border-slate-300 bg-white dark:divide-slate-700 dark:border-slate-700 dark:bg-slate-800", children: [jsx(PaginationItem, { title: "First page", onClick: () => setCurrentPage(0), disabled: !currentPage || disabled, dataTestId: `${dataTestId}-first-page`, children: jsx(ChevronsLeftIcon, { className: "h-4 w-4" }) }), jsx(PaginationItem, { title: "Previous page", onClick: () => currentPage && setCurrentPage(currentPage - 1), disabled: !currentPage || disabled, dataTestId: `${dataTestId}-previous-page`, children: jsx(ChevronLeftIcon, { className: "h-4 w-4" }) }), pagination.map((page, index) => (jsx(PaginationItem, { active: page !== '...' && page - 1 === currentPage, title: page !== '...' ? `Page ${page}` : undefined, onClick: page !== '...' ? () => setCurrentPage(page - 1) : undefined, disabled: page === '...' || disabled, dataTestId: `${dataTestId}-page-${page}`, children: page }, index))), jsx(PaginationItem, { title: "Next page", onClick: () => currentPage + 1 < totalPages && setCurrentPage(currentPage + 1), disabled: currentPage + 1 === totalPages || disabled, dataTestId: `${dataTestId}-next-page`, children: jsx(ChevronRightIcon, { className: "h-4 w-4" }) }), jsx(PaginationItem, { title: "Last page", onClick: () => setCurrentPage(Math.floor(totalItems && !(totalItems % pageSize)
                         ? (totalItems - 1) / pageSize
-                        : totalItems / pageSize)), disabled: currentPage + 1 === totalPages || disabled, children: jsx(ChevronsRightIcon, { className: "h-4 w-4" }) })] }) }));
+                        : totalItems / pageSize)), disabled: currentPage + 1 === totalPages || disabled, dataTestId: `${dataTestId}-last-page`, children: jsx(ChevronsRightIcon, { className: "h-4 w-4" }) })] }) }));
 };
 const PaginationItem = (_a) => {
     var { children, active, disabled } = _a, props = __rest(_a, ["children", "active", "disabled"]);
@@ -1457,38 +1497,38 @@ const PaginationItem = (_a) => {
         }), align: "center", justify: "center", fullHeight: true }, props, { children: children })));
 };
 
-const Spinner = ({ className, fullScreen }) => (jsx("div", { className: cn('flex w-full items-center justify-center bg-white dark:bg-slate-900', {
+const Spinner = ({ className, fullScreen, dataTestId = 'spinner' }) => (jsx("div", { className: cn('flex w-full items-center justify-center bg-white dark:bg-slate-900', {
         'h-screen': fullScreen,
         'h-full': !fullScreen,
-    }, className), children: jsxs("svg", { className: "h-8 w-8 animate-spin text-black dark:text-white", fill: "none", viewBox: "0 0 24 24", children: [jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }) }));
+    }, className), "data-testid": dataTestId, children: jsxs("svg", { className: "h-8 w-8 animate-spin text-black dark:text-white", fill: "none", viewBox: "0 0 24 24", children: [jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }) }));
 
 const $Table = (_a) => {
-    var { children, className } = _a, props = __rest(_a, ["children", "className"]);
-    return (jsx(Flex, { className: cn('overflow-auto rounded-lg', className), fullWidth: true, children: jsx("table", Object.assign({ className: "min-w-full divide-y divide-slate-200 dark:divide-slate-800 dark:text-white" }, props, { children: children })) }));
+    var { children, className, dataTestId = 'table' } = _a, props = __rest(_a, ["children", "className", "dataTestId"]);
+    return (jsx(Flex, { className: cn('overflow-auto rounded-lg', className), fullWidth: true, children: jsx("table", Object.assign({ className: "min-w-full divide-y divide-slate-200 dark:divide-slate-800 dark:text-white", "data-testid": dataTestId }, props, { children: children })) }));
 };
 const TableHead = (_a) => {
-    var { children, className } = _a, props = __rest(_a, ["children", "className"]);
-    return (jsx("thead", Object.assign({ className: cn('border-b bg-slate-100 text-slate-800 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300', className) }, props, { children: children })));
+    var { children, className, dataTestId = 'table-head' } = _a, props = __rest(_a, ["children", "className", "dataTestId"]);
+    return (jsx("thead", Object.assign({ className: cn('border-b bg-slate-100 text-slate-800 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300', className), "data-testid": dataTestId }, props, { children: children })));
 };
 const TableHeadCell = (_a) => {
-    var { children, className } = _a, props = __rest(_a, ["children", "className"]);
-    return (jsx("th", Object.assign({ className: cn('px-4 py-2 font-medium', className) }, props, { children: children })));
+    var { children, className, dataTestId = 'table-head-cell' } = _a, props = __rest(_a, ["children", "className", "dataTestId"]);
+    return (jsx("th", Object.assign({ className: cn('px-4 py-2 font-medium', className), "data-testid": dataTestId }, props, { children: children })));
 };
 const TableBody = (_a) => {
-    var { children, className } = _a, props = __rest(_a, ["children", "className"]);
-    return (jsx("tbody", Object.assign({ className: cn('divide-y divide-slate-200 bg-slate-50/80 dark:divide-slate-700 dark:bg-slate-900', className) }, props, { children: children })));
+    var { children, className, dataTestId = 'table-body' } = _a, props = __rest(_a, ["children", "className", "dataTestId"]);
+    return (jsx("tbody", Object.assign({ className: cn('divide-y divide-slate-200 bg-slate-50/80 dark:divide-slate-700 dark:bg-slate-900', className), "data-testid": dataTestId }, props, { children: children })));
 };
 const TableRow = (_a) => {
-    var { children } = _a, props = __rest(_a, ["children"]);
-    return (jsx("tr", Object.assign({}, props, { children: children })));
+    var { children, dataTestId = 'table-row' } = _a, props = __rest(_a, ["children", "dataTestId"]);
+    return (jsx("tr", Object.assign({ "data-testid": dataTestId }, props, { children: children })));
 };
 const TableCell = (_a) => {
-    var { children, className } = _a, props = __rest(_a, ["children", "className"]);
-    return (jsx("td", Object.assign({ className: cn('px-4 py-2', className) }, props, { children: children })));
+    var { children, className, dataTestId = 'table-cell' } = _a, props = __rest(_a, ["children", "className", "dataTestId"]);
+    return (jsx("td", Object.assign({ className: cn('px-4 py-2', className), "data-testid": dataTestId }, props, { children: children })));
 };
 const TableFooter = (_a) => {
-    var { children, className } = _a, props = __rest(_a, ["children", "className"]);
-    return (jsx("tfoot", Object.assign({ className: cn('bg-slate-100 text-slate-800 dark:bg-slate-800 dark:text-slate-300', className) }, props, { children: children })));
+    var { children, className, dataTestId = 'table-footer' } = _a, props = __rest(_a, ["children", "className", "dataTestId"]);
+    return (jsx("tfoot", Object.assign({ className: cn('bg-slate-100 text-slate-800 dark:bg-slate-800 dark:text-slate-300', className), "data-testid": dataTestId }, props, { children: children })));
 };
 const Table = Object.assign($Table, {
     Head: TableHead,
@@ -1503,7 +1543,7 @@ const possiblePageSize = [5, 10, 25, 50, 100, 500, 1000];
 function defaultRender(item, field) {
     return resolveTargetObject(item, field.split('.'), '-');
 }
-function DataTable({ className, columns, rows, sorting, pagination, actions = [], isLoading, rowExtraContent, noDataMessage, onRowClick, rowClassName, }) {
+function DataTable({ className, columns, rows, sorting, pagination, actions = [], isLoading, rowExtraContent, noDataMessage, onRowClick, rowClassName, dataTestId = 'data-table', }) {
     var _a;
     const footerRef = useRef(null);
     const [expandedRows, setExpandedRows] = useState({});
@@ -1552,41 +1592,41 @@ function DataTable({ className, columns, rows, sorting, pagination, actions = []
         event.stopPropagation();
         setExpandedRows((prev) => (rowExtraContent === null || rowExtraContent === void 0 ? void 0 : rowExtraContent.singleExpansion) ? { [id]: !prev[id] } : Object.assign(Object.assign({}, prev), { [id]: !prev[id] }));
     };
-    return (jsxs(Table, { className: cn('border dark:border-slate-700', className), children: [jsx(Table.Head, { className: "sticky top-0 z-10", children: jsxs(Table.Row, { children: [rowExtraContent && (jsx(Table.HeadCell, { align: "center", children: !rowExtraContent.singleExpansion && (jsx(ExpandButton, { folded: !allRowsExpanded, foldComponent: ChevronsDownUpIcon, unfoldComponent: ChevronsUpDownIcon, onClick: handleExpandAll })) })), _columns.map((column, columnIndex) => {
+    return (jsxs(Table, { className: cn('border dark:border-slate-700', className), dataTestId: dataTestId, children: [jsx(Table.Head, { className: "sticky top-0 z-10", dataTestId: `${dataTestId}-head`, children: jsxs(Table.Row, { dataTestId: `${dataTestId}-header-row`, children: [rowExtraContent && (jsx(Table.HeadCell, { align: "center", dataTestId: `${dataTestId}-expand-header`, children: !rowExtraContent.singleExpansion && (jsx(ExpandButton, { folded: !allRowsExpanded, foldComponent: ChevronsDownUpIcon, unfoldComponent: ChevronsUpDownIcon, onClick: handleExpandAll, dataTestId: `${dataTestId}-expand-all-button` })) })), _columns.map((column, columnIndex) => {
                             var _a, _b, _c;
                             return (jsxs(Table.HeadCell, { className: cn('group relative', {
                                     'cursor-pointer': !isLoading && sorting && !column.noSorting,
                                 }), align: (_a = column.align) !== null && _a !== void 0 ? _a : 'left', onClick: !isLoading && sorting && !column.noSorting
                                     ? handleSorting(column.field, column.comparator)
-                                    : undefined, children: [column.header, sorting &&
+                                    : undefined, dataTestId: `${dataTestId}-column-${column.field}`, children: [column.header, sorting &&
                                         !column.noSorting &&
                                         (((_b = sorting.sorting) === null || _b === void 0 ? void 0 : _b.field) !== column.field ? (jsx(ArrowUpDownIcon, { className: "absolute top-1/2 float-right ml-1 hidden h-4 w-4 -translate-y-1/2 group-hover:inline-block" })) : ((_c = sorting.sorting) === null || _c === void 0 ? void 0 : _c.direction) === 'asc' ? (jsx(SortAscIcon, { className: "absolute top-1/2 float-right ml-1 inline-block h-4 w-4 -translate-y-1/2" })) : (jsx(SortDescIcon, { className: "absolute top-1/2 float-right ml-1 inline-block h-4 w-4 -translate-y-1/2" })))] }, columnIndex));
-                        }), actions.filter((action) => rows.some((item) => { var _a; return typeof action.hide === 'boolean' ? !action.hide : !((_a = action.hide) === null || _a === void 0 ? void 0 : _a.call(action, item)); })).length > 0 && jsx(Table.HeadCell, { align: "center", children: "Actions" })] }) }), jsxs(Table.Body, { className: "relative", children: [isLoading && (jsx(Table.Row, { children: jsx(Table.Cell, { className: cn('z-10 h-full w-full p-0', {
+                        }), actions.filter((action) => rows.some((item) => { var _a; return typeof action.hide === 'boolean' ? !action.hide : !((_a = action.hide) === null || _a === void 0 ? void 0 : _a.call(action, item)); })).length > 0 && (jsx(Table.HeadCell, { align: "center", dataTestId: `${dataTestId}-actions-header`, children: "Actions" }))] }) }), jsxs(Table.Body, { className: "relative", dataTestId: `${dataTestId}-body`, children: [isLoading && (jsx(Table.Row, { dataTestId: `${dataTestId}-loading-row`, children: jsx(Table.Cell, { className: cn('z-10 h-full w-full p-0', {
                                 absolute: rows.length,
-                            }), colSpan: columnsLength, children: jsx(Spinner, { className: "bg-white/50 py-4 dark:bg-slate-700/50" }) }) })), !isLoading && !rows.length && (jsx(Table.Row, { children: jsx(Table.Cell, { colSpan: columnsLength, children: jsx(Flex, { className: "text-slate-500", justify: "center", children: noDataMessage !== null && noDataMessage !== void 0 ? noDataMessage : 'No data' }) }) })), rows.map((item, rowIndex) => [
+                            }), colSpan: columnsLength, dataTestId: `${dataTestId}-loading-cell`, children: jsx(Spinner, { className: "bg-white/50 py-4 dark:bg-slate-700/50", dataTestId: `${dataTestId}-spinner` }) }) })), !isLoading && !rows.length && (jsx(Table.Row, { dataTestId: `${dataTestId}-empty-row`, children: jsx(Table.Cell, { colSpan: columnsLength, dataTestId: `${dataTestId}-empty-cell`, children: jsx(Flex, { className: "text-slate-500", justify: "center", children: noDataMessage !== null && noDataMessage !== void 0 ? noDataMessage : 'No data' }) }) })), rows.map((item, rowIndex) => [
                         jsxs(Table.Row, { className: cn({
                                 'cursor-pointer hover:bg-slate-100 dark:hover:bg-slate-800': onRowClick || rowExtraContent,
-                            }, rowClassName === null || rowClassName === void 0 ? void 0 : rowClassName(item, rowIndex)), onClick: handleRowClicked(item, rowIndex), children: [rowExtraContent && (jsx(Table.Cell, { className: "w-min", align: "center", children: jsx(ExpandButton, { folded: !expandedRows[rowExtraContent.idGetter(item)], foldComponent: MinusIcon, unfoldComponent: PlusIcon, onClick: handleExpandRow(rowExtraContent.idGetter(item)) }) })), _columns.map((column, columnIndex) => {
+                            }, rowClassName === null || rowClassName === void 0 ? void 0 : rowClassName(item, rowIndex)), onClick: handleRowClicked(item, rowIndex), dataTestId: `${dataTestId}-row-${rowIndex}`, children: [rowExtraContent && (jsx(Table.Cell, { className: "w-min", align: "center", dataTestId: `${dataTestId}-expand-cell-${rowIndex}`, children: jsx(ExpandButton, { folded: !expandedRows[rowExtraContent.idGetter(item)], foldComponent: MinusIcon, unfoldComponent: PlusIcon, onClick: handleExpandRow(rowExtraContent.idGetter(item)), dataTestId: `${dataTestId}-expand-button-${rowIndex}` }) })), _columns.map((column, columnIndex) => {
                                     var _a, _b, _c;
-                                    return (jsx(Table.Cell, { className: column.className, align: (_a = column.align) !== null && _a !== void 0 ? _a : 'left', children: (_c = (_b = column.render) === null || _b === void 0 ? void 0 : _b.call(column, item, rowIndex)) !== null && _c !== void 0 ? _c : defaultRender(item, column.field) }, columnIndex));
-                                }), actions.filter((action) => { var _a; return typeof action.hide === 'boolean' ? !action.hide : !((_a = action.hide) === null || _a === void 0 ? void 0 : _a.call(action, item)); }).length > 0 && (jsx(Table.Cell, { className: "py-3", children: jsx(Flex, { align: "center", justify: "center", children: actions
+                                    return (jsx(Table.Cell, { className: column.className, align: (_a = column.align) !== null && _a !== void 0 ? _a : 'left', dataTestId: `${dataTestId}-cell-${rowIndex}-${column.field}`, children: (_c = (_b = column.render) === null || _b === void 0 ? void 0 : _b.call(column, item, rowIndex)) !== null && _c !== void 0 ? _c : defaultRender(item, column.field) }, columnIndex));
+                                }), actions.filter((action) => { var _a; return typeof action.hide === 'boolean' ? !action.hide : !((_a = action.hide) === null || _a === void 0 ? void 0 : _a.call(action, item)); }).length > 0 && (jsx(Table.Cell, { className: "py-3", dataTestId: `${dataTestId}-actions-cell-${rowIndex}`, children: jsx(Flex, { align: "center", justify: "center", children: actions
                                             .filter((action) => { var _a; return typeof action.hide === 'boolean' ? !action.hide : !((_a = action.hide) === null || _a === void 0 ? void 0 : _a.call(action, item)); })
                                             .map((action, actionIndex) => {
                                             var _a;
                                             const notification = (_a = action.hasNotification) === null || _a === void 0 ? void 0 : _a.call(action, item, rowIndex);
-                                            return (jsxs("div", { className: "relative", children: [jsx(Button, { size: "small", prefixIcon: action.icon, color: action.color, onClick: handleActionClicked(action, item, rowIndex), children: action.label }), notification &&
+                                            return (jsxs("div", { className: "relative", children: [jsx(Button, { size: "small", prefixIcon: action.icon, color: action.color, onClick: handleActionClicked(action, item, rowIndex), children: action.label, dataTestId: `${dataTestId}-action-button-${rowIndex}-${actionIndex}` }), notification &&
                                                         (notification === true ? (jsx(Hint.Dot, {})) : notification.type === 'dot' ? (jsx(Hint.Dot, Object.assign({}, notification.props))) : (jsx(Hint.Badge, Object.assign({}, notification.props))))] }, actionIndex));
                                         }) }) }))] }, rowIndex),
-                        rowExtraContent && expandedRows[rowExtraContent.idGetter(item)] && (jsx(Table.Row, { children: jsx(Table.Cell, { className: "p-0", colSpan: columnsLength, children: jsx(rowExtraContent.component, { item: item, rowIndex: rowIndex }) }) }, `${rowIndex}-expanded`)),
-                    ])] }), pagination && (jsx(Table.Footer, { className: "sticky -bottom-px", children: jsx(Table.Row, { className: "border-t dark:border-slate-700", children: jsx(Table.Cell, { colSpan: columnsLength, children: jsxs(Flex, { justify: "end", ref: footerRef, children: [jsx(Pagination, Object.assign({ disabled: isLoading }, pagination)), pagination.onPageSizeChange && (jsx(SelectInput, { className: "w-32", value: (_a = pagination.pageSize) !== null && _a !== void 0 ? _a : 10, items: possiblePageSize.map((pageSize) => ({
+                        rowExtraContent && expandedRows[rowExtraContent.idGetter(item)] && (jsx(Table.Row, { dataTestId: `${dataTestId}-expanded-row-${rowIndex}`, children: jsx(Table.Cell, { className: "p-0", colSpan: columnsLength, dataTestId: `${dataTestId}-expanded-cell-${rowIndex}`, children: jsx(rowExtraContent.component, { item: item, rowIndex: rowIndex }) }) }, `${rowIndex}-expanded`)),
+                    ])] }), pagination && (jsx(Table.Footer, { className: "sticky -bottom-px", dataTestId: `${dataTestId}-footer`, children: jsx(Table.Row, { className: "border-t dark:border-slate-700", dataTestId: `${dataTestId}-footer-row`, children: jsx(Table.Cell, { colSpan: columnsLength, dataTestId: `${dataTestId}-footer-cell`, children: jsxs(Flex, { justify: "end", ref: footerRef, children: [jsx(Pagination, Object.assign({ disabled: isLoading }, pagination, { dataTestId: `${dataTestId}-pagination` })), pagination.onPageSizeChange && (jsx(SelectInput, { className: "w-32", value: (_a = pagination.pageSize) !== null && _a !== void 0 ? _a : 10, items: possiblePageSize.map((pageSize) => ({
                                         id: pageSize,
                                         label: String(pageSize),
                                         value: pageSize,
-                                    })), onChange: (newPageSize) => { var _a; return newPageSize && ((_a = pagination.onPageSizeChange) === null || _a === void 0 ? void 0 : _a.call(pagination, newPageSize)); }, disabled: isLoading, parentRef: footerRef }))] }) }) }) }))] }));
+                                    })), onChange: (newPageSize) => { var _a; return newPageSize && ((_a = pagination.onPageSizeChange) === null || _a === void 0 ? void 0 : _a.call(pagination, newPageSize)); }, disabled: isLoading, parentRef: footerRef, dataTestId: `${dataTestId}-page-size-select` }))] }) }) }) }))] }));
 }
-const ExpandButton = ({ folded, foldComponent, unfoldComponent, onClick, }) => {
+const ExpandButton = ({ folded, foldComponent, unfoldComponent, onClick, dataTestId, }) => {
     const Icon = folded ? unfoldComponent : foldComponent;
-    return (jsx(Icon, { className: "h-6 w-6 cursor-pointer rounded p-1 hover:bg-slate-300 hover:dark:bg-slate-600", onClick: onClick }));
+    return (jsx(Icon, { className: "h-6 w-6 cursor-pointer rounded p-1 hover:bg-slate-300 hover:dark:bg-slate-600", onClick: onClick, "data-testid": dataTestId }));
 };
 
 const $Dialog = (props) => (jsx(DialogPrimitive.Root, Object.assign({}, props)));
@@ -1595,33 +1635,33 @@ const DialogTrigger = DialogPrimitive.Trigger;
 const DialogPortal = DialogPrimitive.Portal;
 const DialogClose = DialogPrimitive.Close;
 const DialogOverlay = (_a) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx(DialogPrimitive.Overlay, Object.assign({ className: cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', className) }, props)));
+    var { className, dataTestId } = _a, props = __rest(_a, ["className", "dataTestId"]);
+    return (jsx(DialogPrimitive.Overlay, Object.assign({ className: cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', className), "data-testid": dataTestId }, props)));
 };
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 const DialogContent = (_a) => {
-    var { className, fullScreen, children } = _a, props = __rest(_a, ["className", "fullScreen", "children"]);
-    return (jsxs(DialogPortal, { children: [jsx(DialogOverlay, {}), jsxs(DialogPrimitive.Content, Object.assign({ className: cn('bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]', 'fixed left-[50%] top-[50%] z-50 flex max-h-[95dvh] w-full max-w-lg translate-x-[-50%] translate-y-[-50%] flex-col gap-4 rounded-lg border p-4 shadow-lg duration-200', className, fullScreen && 'h-full max-h-none w-full max-w-none rounded-none'), "aria-describedby": "dialog-content" }, props, { children: [children, jsx(DialogPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-2 top-2 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none", asChild: true, children: jsx(Button, { prefixIcon: XIcon, size: "small", variant: "text" }) }), jsx(DialogPrimitive.Description, { className: "hidden" })] }))] }));
+    var { className, fullScreen, children, dataTestId = 'dialog-content' } = _a, props = __rest(_a, ["className", "fullScreen", "children", "dataTestId"]);
+    return (jsxs(DialogPortal, { children: [jsx(DialogOverlay, { dataTestId: `${dataTestId}-overlay` }), jsxs(DialogPrimitive.Content, Object.assign({ className: cn('bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]', 'fixed left-[50%] top-[50%] z-50 flex max-h-[95dvh] w-full max-w-lg translate-x-[-50%] translate-y-[-50%] flex-col gap-4 rounded-lg border p-4 shadow-lg duration-200', className, fullScreen && 'h-full max-h-none w-full max-w-none rounded-none'), "aria-describedby": "dialog-content", "data-testid": dataTestId }, props, { children: [children, jsx(DialogPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-2 top-2 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none", asChild: true, "data-testid": `${dataTestId}-close-button`, children: jsx(Button, { prefixIcon: XIcon, size: "small", variant: "text" }) }), jsx(DialogPrimitive.Description, { className: "hidden" })] }))] }));
 };
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 const DialogHeader = (_a) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx("div", Object.assign({ className: cn('flex flex-col space-y-1.5 text-left', className) }, props)));
+    var { className, dataTestId = 'dialog-header' } = _a, props = __rest(_a, ["className", "dataTestId"]);
+    return (jsx("div", Object.assign({ className: cn('flex flex-col space-y-1.5 text-left', className), "data-testid": dataTestId }, props)));
 };
 DialogHeader.displayName = 'DialogHeader';
 const DialogFooter = (_a) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx("div", Object.assign({ className: cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className) }, props)));
+    var { className, dataTestId = 'dialog-footer' } = _a, props = __rest(_a, ["className", "dataTestId"]);
+    return (jsx("div", Object.assign({ className: cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className), "data-testid": dataTestId }, props)));
 };
 DialogFooter.displayName = 'DialogFooter';
 const DialogTitle = (_a) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx(DialogPrimitive.Title, Object.assign({ className: cn('text-foreground text-lg font-semibold', className) }, props)));
+    var { className, dataTestId = 'dialog-title' } = _a, props = __rest(_a, ["className", "dataTestId"]);
+    return (jsx(DialogPrimitive.Title, Object.assign({ className: cn('text-foreground text-lg font-semibold', className), "data-testid": dataTestId }, props)));
 };
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
 const DialogDescription = (_a) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx(DialogPrimitive.Description, Object.assign({ className: cn('text-muted-foreground text-sm', className) }, props)));
+    var { className, dataTestId = 'dialog-description' } = _a, props = __rest(_a, ["className", "dataTestId"]);
+    return (jsx(DialogPrimitive.Description, Object.assign({ className: cn('text-muted-foreground text-sm', className), "data-testid": dataTestId }, props)));
 };
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 const Dialog = Object.assign($Dialog, {
@@ -1636,16 +1676,14 @@ const Dialog = Object.assign($Dialog, {
     Description: DialogDescription,
 });
 
-const ConfirmDialog = ({ open, title, children, yesLabel, noLabel, onConfirm, onClose, }) => (jsx(Dialog, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxs(Dialog.Content, { children: [jsx(Dialog.Header, { children: jsx(Dialog.Title, { children: title }) }), children, jsxs(Dialog.Footer, { children: [jsx(Dialog.Close, { asChild: true, children: jsx(Button, { color: "red", children: noLabel !== null && noLabel !== void 0 ? noLabel : 'No' }) }), jsx(Dialog.Close, { asChild: true, children: jsx(Button, { color: "green", onClick: onConfirm, children: yesLabel !== null && yesLabel !== void 0 ? yesLabel : 'Yes' }) })] })] }) }));
+const ConfirmDialog = ({ open, title, children, yesLabel, noLabel, onConfirm, onClose, dataTestId = 'confirm-dialog', }) => (jsx(Dialog, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxs(Dialog.Content, { dataTestId: `${dataTestId}-content`, children: [jsx(Dialog.Header, { dataTestId: `${dataTestId}-header`, children: jsx(Dialog.Title, { dataTestId: `${dataTestId}-title`, children: title }) }), children, jsxs(Dialog.Footer, { dataTestId: `${dataTestId}-footer`, children: [jsx(Dialog.Close, { asChild: true, children: jsx(Button, { color: "red", "data-testid": `${dataTestId}-no-button`, children: noLabel !== null && noLabel !== void 0 ? noLabel : 'No' }) }), jsx(Dialog.Close, { asChild: true, children: jsx(Button, { color: "green", onClick: onConfirm, "data-testid": `${dataTestId}-yes-button`, children: yesLabel !== null && yesLabel !== void 0 ? yesLabel : 'Yes' }) })] })] }) }));
 
-const $Sheet = (props) => (jsx(DialogPrimitive.Root, Object.assign({}, props)));
-$Sheet.displayName = DialogPrimitive.Root.displayName;
 const SheetTrigger = DialogPrimitive.Trigger;
 const SheetClose = DialogPrimitive.Close;
 const SheetPortal = DialogPrimitive.Portal;
 const SheetOverlay = (_a) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx(DialogPrimitive.Overlay, Object.assign({ className: cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', className) }, props)));
+    var { className, dataTestId } = _a, props = __rest(_a, ["className", "dataTestId"]);
+    return (jsx(DialogPrimitive.Overlay, Object.assign({ className: cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', className), "data-testid": dataTestId }, props)));
 };
 SheetOverlay.displayName = DialogPrimitive.Overlay.displayName;
 const sheetVariants = cva('fixed flex flex-col z-50 gap-4 bg-background p-4 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500', {
@@ -1662,31 +1700,31 @@ const sheetVariants = cva('fixed flex flex-col z-50 gap-4 bg-background p-4 shad
     },
 });
 const SheetContent = (_a) => {
-    var { side = 'right', className, children } = _a, props = __rest(_a, ["side", "className", "children"]);
-    return (jsxs(SheetPortal, { children: [jsx(SheetOverlay, {}), jsxs(DialogPrimitive.Content, Object.assign({ className: cn(sheetVariants({ side }), className) }, props, { children: [children, jsx(DialogPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-2 top-2 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none", asChild: true, children: jsx(Button, { prefixIcon: XIcon, size: "small", variant: "text" }) }), jsx(DialogPrimitive.Description, { className: "hidden" })] }))] }));
+    var { side = 'right', className, children, dataTestId = 'sheet-content' } = _a, props = __rest(_a, ["side", "className", "children", "dataTestId"]);
+    return (jsxs(SheetPortal, { children: [jsx(SheetOverlay, { dataTestId: `${dataTestId}-overlay` }), jsxs(DialogPrimitive.Content, Object.assign({ className: cn(sheetVariants({ side }), className), "data-testid": dataTestId }, props, { children: [children, jsx(DialogPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-2 top-2 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none", asChild: true, "data-testid": `${dataTestId}-close-button`, children: jsx(Button, { prefixIcon: XIcon, size: "small", variant: "text" }) }), jsx(DialogPrimitive.Description, { className: "hidden" })] }))] }));
 };
 SheetContent.displayName = DialogPrimitive.Content.displayName;
 const SheetHeader = (_a) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx("div", Object.assign({ className: cn('flex flex-col space-y-2 text-center sm:text-left', className) }, props)));
+    var { className, dataTestId = 'sheet-header' } = _a, props = __rest(_a, ["className", "dataTestId"]);
+    return (jsx("div", Object.assign({ className: cn('flex flex-col space-y-2 text-center sm:text-left', className), "data-testid": dataTestId }, props)));
 };
 SheetHeader.displayName = 'SheetHeader';
 const SheetFooter = (_a) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx("div", Object.assign({ className: cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className) }, props)));
+    var { className, dataTestId = 'sheet-footer' } = _a, props = __rest(_a, ["className", "dataTestId"]);
+    return (jsx("div", Object.assign({ className: cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className), "data-testid": dataTestId }, props)));
 };
 SheetFooter.displayName = 'SheetFooter';
 const SheetTitle = (_a) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx(DialogPrimitive.Title, Object.assign({ className: cn('text-foreground text-lg font-semibold', className) }, props)));
+    var { className, dataTestId = 'sheet-title' } = _a, props = __rest(_a, ["className", "dataTestId"]);
+    return (jsx(DialogPrimitive.Title, Object.assign({ className: cn('text-foreground text-lg font-semibold', className), "data-testid": dataTestId }, props)));
 };
 SheetTitle.displayName = DialogPrimitive.Title.displayName;
 const SheetDescription = (_a) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx(DialogPrimitive.Description, Object.assign({ className: cn('text-muted-foreground text-sm', className) }, props)));
+    var { className, dataTestId = 'sheet-description' } = _a, props = __rest(_a, ["className", "dataTestId"]);
+    return (jsx(DialogPrimitive.Description, Object.assign({ className: cn('text-muted-foreground text-sm', className), "data-testid": dataTestId }, props)));
 };
 SheetDescription.displayName = DialogPrimitive.Description.displayName;
-const Sheet = Object.assign($Sheet, {
+const Sheet = Object.assign(DialogPrimitive.Root, {
     Portal: SheetPortal,
     Overlay: SheetOverlay,
     Trigger: SheetTrigger,
@@ -1698,20 +1736,12 @@ const Sheet = Object.assign($Sheet, {
     Description: SheetDescription,
 });
 
-const FormDialog = ({ className, formClassName, open, title, form, children, submitLabel = 'Submit', cancelLabel = 'Cancel', extraAction, as: As = Sheet, onSubmit, onInvalid, onClose, }) => {
+const FormDialog = ({ className, formClassName, open, title, form, children, submitLabel = 'Submit', cancelLabel = 'Cancel', extraAction, as: As = Sheet, onSubmit, onInvalid, onClose, dataTestId = 'form-dialog', }) => {
     const id = useId();
-    const handleSubmit = (data, event) => __awaiter(void 0, void 0, void 0, function* () {
-        try {
-            yield onSubmit(data, event);
-        }
-        catch (_a) {
-            // do nothering
-        }
-    });
-    return (jsx(As, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxs(As.Content, { className: className, children: [jsx(As.Header, { children: jsx(As.Title, { children: title }) }), jsx(FormProvider, Object.assign({}, form, { children: jsx("form", { id: `form-${id}`, className: cn('flex h-full w-full flex-col gap-2 overflow-auto', formClassName), onSubmit: form.handleSubmit(handleSubmit, onInvalid), children: children }) })), jsxs(As.Footer, { className: "w-full sm:justify-between", children: [extraAction, jsxs(As.Footer, { className: "ml-auto", children: [jsx(As.Close, { asChild: true, children: jsx(Button, { color: "red", children: cancelLabel }) }), jsx(Button, { color: "green", type: "submit", form: `form-${id}`, disabled: form.formState.isSubmitting, children: submitLabel })] })] })] }) }));
+    return (jsx(As, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxs(As.Content, { className: className, dataTestId: `${dataTestId}-content`, children: [jsx(As.Header, { dataTestId: `${dataTestId}-header`, children: jsx(As.Title, { dataTestId: `${dataTestId}-title`, children: title }) }), jsx(FormProvider, Object.assign({}, form, { children: jsx("form", { id: `form-${id}`, className: cn('flex h-full w-full flex-col gap-2 overflow-auto', formClassName), onSubmit: form.handleSubmit(onSubmit, onInvalid), "data-testid": `${dataTestId}-form`, children: children }) })), jsxs(As.Footer, { className: "w-full sm:justify-between", dataTestId: `${dataTestId}-footer`, children: [extraAction, jsxs(As.Footer, { className: "ml-auto", dataTestId: `${dataTestId}-actions`, children: [jsx(As.Close, { asChild: true, children: jsx(Button, { color: "red", dataTestId: `${dataTestId}-cancel-button`, children: cancelLabel }) }), jsx(Button, { color: "green", type: "submit", form: `form-${id}`, disabled: form.formState.isSubmitting, dataTestId: `${dataTestId}-submit-button`, children: submitLabel })] })] })] }) }));
 };
 
-function ListSorter({ className, items, idResolver, renderer, onChange, }) {
+function ListSorter({ className, items, dataTestId = 'list-sorter', idResolver, renderer, onChange, }) {
     const adaptedItems = useMemo(() => items.map((value, index) => ({ id: idResolver(value, index), value })), [idResolver, items]);
     const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
     const onDragEnd = ({ active, over }) => {
@@ -1729,39 +1759,39 @@ function ListSorter({ className, items, idResolver, renderer, onChange, }) {
         }
         onChange(sortedItems.map(({ value }) => value));
     };
-    return (jsx(DndContext, { sensors: sensors, modifiers: [restrictToFirstScrollableAncestor], collisionDetection: closestCenter, onDragEnd: onDragEnd, children: jsx(SortableContext, { items: adaptedItems, strategy: verticalListSortingStrategy, children: jsx("div", { className: className, children: adaptedItems.map((item, index) => (jsx(SortableItem, { item: item, index: index, renderer: renderer }, item.id))) }) }) }));
+    return (jsx(DndContext, { sensors: sensors, modifiers: [restrictToFirstScrollableAncestor], collisionDetection: closestCenter, onDragEnd: onDragEnd, children: jsx(SortableContext, { items: adaptedItems, strategy: verticalListSortingStrategy, children: jsx("div", { className: className, "data-testid": dataTestId, children: adaptedItems.map((item, index) => (jsx(SortableItem, { item: item, index: index, renderer: renderer, dataTestId: dataTestId }, item.id))) }) }) }));
 }
-function SortableItem({ item, index, renderer, }) {
+function SortableItem({ item, index, dataTestId, renderer, }) {
     const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: item.id });
     const style = { transform: CSS.Transform.toString(transform), transition };
-    return (jsx("div", Object.assign({ ref: setNodeRef, style: style }, attributes, { children: renderer(item.value, index, listeners) })));
+    return (jsx("div", Object.assign({ ref: setNodeRef, style: style }, attributes, { "data-testid": `${dataTestId}-item-${index}`, children: renderer(item.value, index, listeners) })));
 }
 
-function ListSorterDialog({ className, open, title, items, idResolver, renderer, cancelLabel, submitLabel, onSubmit, onClose, }) {
+function ListSorterDialog({ className, open, title, items, idResolver, renderer, cancelLabel, submitLabel, onSubmit, onClose, dataTestId = 'list-sorter-dialog', }) {
     const [sortedItems, setSortedItems] = useState(structuredClone(items));
     useEffect(() => {
-        return () => {
+        if (!open) {
             setSortedItems(structuredClone(items));
-        };
-    }, [items]);
+        }
+    }, [items, open]);
     const preFinish = () => onSubmit(sortedItems);
-    const customRenderer = (item, index, listeners) => (jsxs(Flex, { align: "center", className: "gap-4 p-4 focus:outline-none dark:bg-slate-900 hover:dark:bg-slate-800", children: [jsx(Flex, Object.assign({ align: "center", justify: "center", className: "cursor-move rounded-lg p-2 hover:bg-slate-200 dark:hover:bg-slate-700" }, listeners, { children: jsx(ArrowUpDownIcon, { className: "h-5 w-5" }) })), renderer(item, index, listeners)] }));
-    return (jsx(Dialog, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxs(Dialog.Content, { className: className, onPointerDownOutside: (event) => event.preventDefault(), children: [jsx(Dialog.Header, { children: jsx(Dialog.Title, { children: title }) }), jsx(ListSorter, { className: "divide-y overflow-auto rounded-lg border dark:divide-slate-700 dark:border-slate-700 dark:text-white", items: sortedItems, idResolver: idResolver, renderer: customRenderer, onChange: setSortedItems }), jsxs(Dialog.Footer, { children: [jsx(Dialog.Close, { asChild: true, children: jsx(Button, { color: "red", children: cancelLabel !== null && cancelLabel !== void 0 ? cancelLabel : 'Cancel' }) }), jsx(Button, { color: "green", onClick: preFinish, children: submitLabel !== null && submitLabel !== void 0 ? submitLabel : 'Submit' })] })] }) }));
+    const customRenderer = (item, index, listeners) => (jsxs(Flex, { align: "center", className: "gap-4 p-4 focus:outline-none dark:bg-slate-900 hover:dark:bg-slate-800", "data-testid": `${dataTestId}-item-${index}`, children: [jsx(Flex, Object.assign({ align: "center", justify: "center", className: "cursor-move rounded-lg p-2 hover:bg-slate-200 dark:hover:bg-slate-700", "data-testid": `${dataTestId}-drag-handle-${index}` }, listeners, { children: jsx(ArrowUpDownIcon, { className: "h-5 w-5" }) })), renderer(item, index, listeners)] }));
+    return (jsx(Dialog, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxs(Dialog.Content, { className: className, onPointerDownOutside: (event) => event.preventDefault(), dataTestId: `${dataTestId}-content`, children: [jsx(Dialog.Header, { dataTestId: `${dataTestId}-header`, children: jsx(Dialog.Title, { dataTestId: `${dataTestId}-title`, children: title }) }), jsx(ListSorter, { className: "divide-y overflow-auto rounded-lg border dark:divide-slate-700 dark:border-slate-700 dark:text-white", items: sortedItems, idResolver: idResolver, renderer: customRenderer, onChange: setSortedItems, dataTestId: `${dataTestId}-sorter` }), jsxs(Dialog.Footer, { dataTestId: `${dataTestId}-footer`, children: [jsx(Dialog.Close, { asChild: true, children: jsx(Button, { color: "red", dataTestId: `${dataTestId}-cancel-button`, children: cancelLabel !== null && cancelLabel !== void 0 ? cancelLabel : 'Cancel' }) }), jsx(Button, { color: "green", onClick: preFinish, dataTestId: `${dataTestId}-submit-button`, children: submitLabel !== null && submitLabel !== void 0 ? submitLabel : 'Submit' })] })] }) }));
 }
 
-const PdfViewerDialog = ({ open, title, url, data, onClose }) => {
-    return !(url || data) ? null : (jsx(Dialog, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxs(Dialog.Content, { className: "h-[95dvh] max-w-[95dvw]", children: [jsx(Dialog.Header, { children: jsx(Dialog.Title, { children: title }) }), (url || data) && (jsx("embed", { className: "rounded-lg", src: url !== null && url !== void 0 ? url : `data:application/pdf;base64,${data}`, type: "application/pdf", width: "100%", height: "100%" }))] }) }));
+const PdfViewerDialog = ({ open, title, url, data, onClose, dataTestId = 'pdf-viewer-dialog', }) => {
+    return !(url || data) ? null : (jsx(Dialog, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxs(Dialog.Content, { className: "h-[95dvh] max-w-[95dvw]", dataTestId: `${dataTestId}-content`, children: [jsx(Dialog.Header, { dataTestId: `${dataTestId}-header`, children: jsx(Dialog.Title, { dataTestId: `${dataTestId}-title`, children: title }) }), (url || data) && (jsx("embed", { className: "rounded-lg", src: url !== null && url !== void 0 ? url : `data:application/pdf;base64,${data}`, type: "application/pdf", width: "100%", height: "100%", "data-testid": `${dataTestId}-embed` }))] }) }));
 };
 
 const Separator = (_a) => {
-    var { className, orientation = 'horizontal', decorative = true } = _a, props = __rest(_a, ["className", "orientation", "decorative"]);
-    return (jsx(SeparatorPrimitive.Root, Object.assign({ decorative: decorative, orientation: orientation, className: cn('bg-border shrink-0', orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]', className) }, props)));
+    var { className, orientation = 'horizontal', decorative = true, dataTestId = 'separator' } = _a, props = __rest(_a, ["className", "orientation", "decorative", "dataTestId"]);
+    return (jsx(SeparatorPrimitive.Root, Object.assign({ decorative: decorative, orientation: orientation, className: cn('bg-border shrink-0', orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]', className), "data-testid": dataTestId }, props)));
 };
 Separator.displayName = SeparatorPrimitive.Root.displayName;
 
 const Skeleton = (_a) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx("div", Object.assign({ className: cn('bg-muted animate-pulse rounded-md', className) }, props)));
+    var { className, dataTestId = 'skeleton' } = _a, props = __rest(_a, ["className", "dataTestId"]);
+    return (jsx("div", Object.assign({ className: cn('bg-muted animate-pulse rounded-md', className), "data-testid": dataTestId }, props)));
 };
 Skeleton.displayName = 'Skeleton';
 
@@ -1830,13 +1860,13 @@ const SidebarContextProvider = (_a) => {
 };
 SidebarContextProvider.displayName = 'SidebarContextProvider';
 const SidebarComp = (_a) => {
-    var { side = 'left', variant = 'sidebar', collapsible = 'offcanvas', className, children } = _a, props = __rest(_a, ["side", "variant", "collapsible", "className", "children"]);
+    var { side = 'left', variant = 'sidebar', collapsible = 'offcanvas', className, children, dataTestId = 'sidebar' } = _a, props = __rest(_a, ["side", "variant", "collapsible", "className", "children", "dataTestId"]);
     const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
     if (collapsible === 'none') {
-        return (jsx("div", Object.assign({ className: cn('bg-sidebar text-sidebar-foreground flex h-full w-[--sidebar-width] flex-col', className) }, props, { children: children })));
+        return (jsx("div", Object.assign({ "data-testid": dataTestId, className: cn('bg-sidebar text-sidebar-foreground flex h-full w-[--sidebar-width] flex-col', className) }, props, { children: children })));
     }
     if (isMobile) {
-        return (jsx(Sheet, Object.assign({ open: openMobile, onOpenChange: setOpenMobile }, props, { children: jsx(Sheet.Content, { "data-sidebar": "sidebar", "data-mobile": "true", className: "bg-sidebar text-sidebar-foreground w-[--sidebar-width] p-0 [&>button]:hidden", style: {
+        return (jsx(Sheet, Object.assign({ open: openMobile, onOpenChange: setOpenMobile }, props, { children: jsx(Sheet.Content, { "data-testid": dataTestId, "data-sidebar": "sidebar", "data-mobile": "true", className: "bg-sidebar text-sidebar-foreground w-[--sidebar-width] p-0 [&>button]:hidden", style: {
                     '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
                 }, side: side, children: jsx("div", { className: "flex h-full w-full flex-col", children: children }) }) })));
     }
@@ -1848,86 +1878,86 @@ const SidebarComp = (_a) => {
                 // Adjust the padding for floating and inset variants.
                 variant === 'floating' || variant === 'inset'
                     ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
-                    : 'border-sidebar-border group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l', className) }, props, { children: jsx("div", { "data-sidebar": "sidebar", className: "bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow", children: children }) }))] }));
+                    : 'border-sidebar-border group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l', className) }, props, { "data-testid": dataTestId, "data-state": state, children: jsx("div", { "data-sidebar": "sidebar", className: "bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow", children: children }) }))] }));
 };
 SidebarComp.displayName = 'Sidebar';
 const SidebarTrigger = (_a) => {
-    var { className, onClick } = _a, props = __rest(_a, ["className", "onClick"]);
+    var { className, onClick, dataTestId = 'sidebar-trigger' } = _a, props = __rest(_a, ["className", "onClick", "dataTestId"]);
     const { toggleSidebar } = useSidebar();
-    return (jsx(Button, Object.assign({ "data-sidebar": "trigger", variant: "text", suffixIcon: PanelLeft, className: className, onClick: (event) => {
+    return (jsx(Button, Object.assign({ "data-testid": dataTestId, "data-sidebar": "trigger", variant: "text", suffixIcon: PanelLeft, className: className, onClick: (event) => {
             onClick === null || onClick === void 0 ? void 0 : onClick(event);
             toggleSidebar();
         } }, props)));
 };
 SidebarTrigger.displayName = 'SidebarTrigger';
 const SidebarRail = (_a) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
+    var { className, dataTestId = 'sidebar-rail' } = _a, props = __rest(_a, ["className", "dataTestId"]);
     const { toggleSidebar } = useSidebar();
-    return (jsx("button", Object.assign({ "data-sidebar": "rail", "aria-label": "Toggle Sidebar", tabIndex: -1, onClick: toggleSidebar, title: "Toggle Sidebar", className: cn('hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex', '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize', '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize', 'group-data-[collapsible=offcanvas]:hover:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full', '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2', '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2', className) }, props)));
+    return (jsx("button", Object.assign({ "data-testid": dataTestId, "data-sidebar": "rail", "aria-label": "Toggle Sidebar", tabIndex: -1, onClick: toggleSidebar, title: "Toggle Sidebar", className: cn('hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex', '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize', '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize', 'group-data-[collapsible=offcanvas]:hover:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full', '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2', '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2', className) }, props)));
 };
 SidebarRail.displayName = 'SidebarRail';
 const SidebarInset = (_a) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx("main", Object.assign({ className: cn('bg-background relative flex min-h-svh flex-1 flex-col', 'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow', className) }, props)));
+    var { className, dataTestId = 'sidebar-inset' } = _a, props = __rest(_a, ["className", "dataTestId"]);
+    return (jsx("main", Object.assign({ "data-testid": dataTestId, className: cn('bg-background relative flex min-h-svh flex-1 flex-col', 'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow', className) }, props)));
 };
 SidebarInset.displayName = 'SidebarInset';
 const SidebarInput = (_a) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx(BasicInput, Object.assign({ "data-sidebar": "input", className: cn('focus-visible:ring-sidebar-ring focus-visible:ring-2', className) }, props)));
+    var { className, dataTestId = 'sidebar-input' } = _a, props = __rest(_a, ["className", "dataTestId"]);
+    return (jsx(BasicInput, Object.assign({ dataTestId: dataTestId, "data-sidebar": "input", className: cn('focus-visible:ring-sidebar-ring focus-visible:ring-2', className) }, props)));
 };
 SidebarInput.displayName = 'SidebarInput';
 const SidebarHeader = (_a) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx("div", Object.assign({ "data-sidebar": "header", className: cn('flex flex-col gap-2 p-2', className) }, props)));
+    var { className, dataTestId = 'sidebar-header' } = _a, props = __rest(_a, ["className", "dataTestId"]);
+    return (jsx("div", Object.assign({ "data-testid": dataTestId, "data-sidebar": "header", className: cn('flex flex-col gap-2 p-2', className) }, props)));
 };
 SidebarHeader.displayName = 'SidebarHeader';
 const SidebarFooter = (_a) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx("div", Object.assign({ "data-sidebar": "footer", className: cn('flex flex-col gap-2 p-2', className) }, props)));
+    var { className, dataTestId = 'sidebar-footer' } = _a, props = __rest(_a, ["className", "dataTestId"]);
+    return (jsx("div", Object.assign({ "data-testid": dataTestId, "data-sidebar": "footer", className: cn('flex flex-col gap-2 p-2', className) }, props)));
 };
 SidebarFooter.displayName = 'SidebarFooter';
 const SidebarSeparator = (_a) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx(Separator, Object.assign({ "data-sidebar": "separator", className: cn('bg-sidebar-border mx-2 w-auto', className) }, props)));
+    var { className, dataTestId = 'sidebar-separator' } = _a, props = __rest(_a, ["className", "dataTestId"]);
+    return (jsx(Separator, Object.assign({ dataTestId: dataTestId, "data-sidebar": "separator", className: cn('bg-sidebar-border mx-2 w-auto', className) }, props)));
 };
 SidebarSeparator.displayName = 'SidebarSeparator';
 const SidebarContent = (_a) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx("div", Object.assign({ "data-sidebar": "content", className: cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', className) }, props)));
+    var { className, dataTestId = 'sidebar-content' } = _a, props = __rest(_a, ["className", "dataTestId"]);
+    return (jsx("div", Object.assign({ "data-testid": dataTestId, "data-sidebar": "content", className: cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', className) }, props)));
 };
 SidebarContent.displayName = 'SidebarContent';
 const SidebarGroup = (_a) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx("div", Object.assign({ "data-sidebar": "group", className: cn('relative flex w-full min-w-0 flex-col p-2', className) }, props)));
+    var { className, dataTestId = 'sidebar-group' } = _a, props = __rest(_a, ["className", "dataTestId"]);
+    return (jsx("div", Object.assign({ "data-testid": dataTestId, "data-sidebar": "group", className: cn('relative flex w-full min-w-0 flex-col p-2', className) }, props)));
 };
 SidebarGroup.displayName = 'SidebarGroup';
 const SidebarGroupLabel = (_a) => {
-    var { className, asChild = false } = _a, props = __rest(_a, ["className", "asChild"]);
+    var { className, asChild = false, dataTestId = 'sidebar-group-label' } = _a, props = __rest(_a, ["className", "asChild", "dataTestId"]);
     const Comp = asChild ? Slot : 'div';
-    return (jsx(Comp, Object.assign({ "data-sidebar": "group-label", className: cn('text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-none transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0', 'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0', className) }, props)));
+    return (jsx(Comp, Object.assign({ "data-testid": dataTestId, "data-sidebar": "group-label", className: cn('text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-none transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0', 'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0', className) }, props)));
 };
 SidebarGroupLabel.displayName = 'SidebarGroupLabel';
 const SidebarGroupAction = (_a) => {
-    var { className, asChild = false } = _a, props = __rest(_a, ["className", "asChild"]);
+    var { className, asChild = false, dataTestId = 'sidebar-group-action' } = _a, props = __rest(_a, ["className", "asChild", "dataTestId"]);
     const Comp = asChild ? Slot : 'button';
-    return (jsx(Comp, Object.assign({ "data-sidebar": "group-action", className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0', 
+    return (jsx(Comp, Object.assign({ "data-testid": dataTestId, "data-sidebar": "group-action", className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0', 
         // Increases the hit area of the button on mobile.
         'after:absolute after:-inset-2 after:md:hidden', 'group-data-[collapsible=icon]:hidden', className) }, props)));
 };
 SidebarGroupAction.displayName = 'SidebarGroupAction';
 const SidebarGroupContent = (_a) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx("div", Object.assign({ "data-sidebar": "group-content", className: cn('w-full text-sm', className) }, props)));
+    var { className, dataTestId = 'sidebar-group-content' } = _a, props = __rest(_a, ["className", "dataTestId"]);
+    return (jsx("div", Object.assign({ "data-testid": dataTestId, "data-sidebar": "group-content", className: cn('w-full text-sm', className) }, props)));
 };
 SidebarGroupContent.displayName = 'SidebarGroupContent';
 const SidebarMenu = (_a) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx("ul", Object.assign({ "data-sidebar": "menu", className: cn('flex w-full min-w-0 flex-col gap-1', className) }, props)));
+    var { className, dataTestId = 'sidebar-menu' } = _a, props = __rest(_a, ["className", "dataTestId"]);
+    return (jsx("ul", Object.assign({ "data-testid": dataTestId, "data-sidebar": "menu", className: cn('flex w-full min-w-0 flex-col gap-1', className) }, props)));
 };
 SidebarMenu.displayName = 'SidebarMenu';
 const SidebarMenuItem = (_a) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx("li", Object.assign({ "data-sidebar": "menu-item", className: cn('group/menu-item relative', className) }, props)));
+    var { className, dataTestId = 'sidebar-menu-item' } = _a, props = __rest(_a, ["className", "dataTestId"]);
+    return (jsx("li", Object.assign({ "data-testid": dataTestId, "data-sidebar": "menu-item", className: cn('group/menu-item relative', className) }, props)));
 };
 SidebarMenuItem.displayName = 'SidebarMenuItem';
 const sidebarMenuButtonVariants = cva('peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', {
@@ -1948,10 +1978,10 @@ const sidebarMenuButtonVariants = cva('peer/menu-button flex w-full items-center
     },
 });
 const SidebarMenuButton = (_a) => {
-    var { asChild = false, isActive = false, variant = 'default', size = 'default', tooltip, className } = _a, props = __rest(_a, ["asChild", "isActive", "variant", "size", "tooltip", "className"]);
+    var { asChild = false, isActive = false, variant = 'default', size = 'default', tooltip, className, dataTestId = 'sidebar-menu-button' } = _a, props = __rest(_a, ["asChild", "isActive", "variant", "size", "tooltip", "className", "dataTestId"]);
     const Comp = asChild ? Slot : 'button';
     const { isMobile, state } = useSidebar();
-    const button = (jsx(Comp, Object.assign({ "data-sidebar": "menu-button", "data-size": size, "data-active": isActive, className: cn(sidebarMenuButtonVariants({ variant, size }), className) }, props)));
+    const button = (jsx(Comp, Object.assign({ "data-testid": dataTestId, "data-sidebar": "menu-button", "data-size": size, "data-active": isActive, className: cn(sidebarMenuButtonVariants({ variant, size }), className) }, props)));
     if (!tooltip || state !== 'collapsed' || isMobile) {
         return button;
     }
@@ -1964,44 +1994,44 @@ const SidebarMenuButton = (_a) => {
 };
 SidebarMenuButton.displayName = 'SidebarMenuButton';
 const SidebarMenuAction = (_a) => {
-    var { className, asChild = false, showOnHover = false } = _a, props = __rest(_a, ["className", "asChild", "showOnHover"]);
+    var { className, asChild = false, showOnHover = false, dataTestId = 'sidebar-menu-action' } = _a, props = __rest(_a, ["className", "asChild", "showOnHover", "dataTestId"]);
     const Comp = asChild ? Slot : 'button';
-    return (jsx(Comp, Object.assign({ "data-sidebar": "menu-action", className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0', 
+    return (jsx(Comp, Object.assign({ "data-testid": dataTestId, "data-sidebar": "menu-action", className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0', 
         // Increases the hit area of the button on mobile.
         'after:absolute after:-inset-2 after:md:hidden', 'peer-data-[size=sm]/menu-button:top-1', 'peer-data-[size=default]/menu-button:top-1.5', 'peer-data-[size=lg]/menu-button:top-2.5', 'group-data-[collapsible=icon]:hidden', showOnHover &&
             'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0', className) }, props)));
 };
 SidebarMenuAction.displayName = 'SidebarMenuAction';
 const SidebarMenuBadge = (_a) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx("div", Object.assign({ "data-sidebar": "menu-badge", className: cn('text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums', 'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground', 'peer-data-[size=sm]/menu-button:top-1', 'peer-data-[size=default]/menu-button:top-1.5', 'peer-data-[size=lg]/menu-button:top-2.5', 'group-data-[collapsible=icon]:hidden', className) }, props)));
+    var { className, dataTestId = 'sidebar-menu-badge' } = _a, props = __rest(_a, ["className", "dataTestId"]);
+    return (jsx("div", Object.assign({ "data-testid": dataTestId, "data-sidebar": "menu-badge", className: cn('text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums', 'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground', 'peer-data-[size=sm]/menu-button:top-1', 'peer-data-[size=default]/menu-button:top-1.5', 'peer-data-[size=lg]/menu-button:top-2.5', 'group-data-[collapsible=icon]:hidden', className) }, props)));
 };
 SidebarMenuBadge.displayName = 'SidebarMenuBadge';
 const SidebarMenuSkeleton = (_a) => {
-    var { className, showIcon = false } = _a, props = __rest(_a, ["className", "showIcon"]);
+    var { className, showIcon = false, dataTestId = 'sidebar-menu-skeleton' } = _a, props = __rest(_a, ["className", "showIcon", "dataTestId"]);
     // Random width between 50 to 90%.
     const width = useMemo(() => {
         return `${Math.floor(Math.random() * 40) + 50}%`;
     }, []);
-    return (jsxs("div", Object.assign({ "data-sidebar": "menu-skeleton", className: cn('flex h-8 items-center gap-2 rounded-md px-2', className) }, props, { children: [showIcon && jsx(Skeleton, { className: "size-4 rounded-md", "data-sidebar": "menu-skeleton-icon" }), jsx(Skeleton, { className: "h-4 max-w-[--skeleton-width] flex-1", "data-sidebar": "menu-skeleton-text", style: {
+    return (jsxs("div", Object.assign({ "data-testid": dataTestId, "data-sidebar": "menu-skeleton", className: cn('flex h-8 items-center gap-2 rounded-md px-2', className) }, props, { children: [showIcon && jsx(Skeleton, { className: "size-4 rounded-md", "data-sidebar": "menu-skeleton-icon" }), jsx(Skeleton, { className: "h-4 max-w-[--skeleton-width] flex-1", "data-sidebar": "menu-skeleton-text", style: {
                     '--skeleton-width': width,
                 } })] })));
 };
 SidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton';
 const SidebarMenuSub = (_a) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx("ul", Object.assign({ "data-sidebar": "menu-sub", className: cn('border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5', 'group-data-[collapsible=icon]:hidden', className) }, props)));
+    var { className, dataTestId = 'sidebar-menu-sub' } = _a, props = __rest(_a, ["className", "dataTestId"]);
+    return (jsx("ul", Object.assign({ "data-testid": dataTestId, "data-sidebar": "menu-sub", className: cn('border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5', 'group-data-[collapsible=icon]:hidden', className) }, props)));
 };
 SidebarMenuSub.displayName = 'SidebarMenuSub';
 const SidebarMenuSubItem = (_a) => {
-    var props = __rest(_a, []);
-    return jsx("li", Object.assign({}, props));
+    var { dataTestId = 'sidebar-menu-sub-item' } = _a, props = __rest(_a, ["dataTestId"]);
+    return jsx("li", Object.assign({ "data-testid": dataTestId }, props));
 };
 SidebarMenuSubItem.displayName = 'SidebarMenuSubItem';
 const SidebarMenuSubButton = (_a) => {
-    var { asChild = false, size = 'md', isActive, className } = _a, props = __rest(_a, ["asChild", "size", "isActive", "className"]);
+    var { asChild = false, size = 'md', isActive, className, dataTestId = 'sidebar-menu-sub-button' } = _a, props = __rest(_a, ["asChild", "size", "isActive", "className", "dataTestId"]);
     const Comp = asChild ? Slot : 'button';
-    return (jsx(Comp, Object.assign({ "data-sidebar": "menu-sub-button", "data-size": size, "data-active": isActive, className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 w-full min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', 'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground', size === 'sm' && 'text-xs', size === 'md' && 'text-sm', 'group-data-[collapsible=icon]:hidden', className) }, props)));
+    return (jsx(Comp, Object.assign({ "data-testid": dataTestId, "data-sidebar": "menu-sub-button", "data-size": size, "data-active": isActive, className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 w-full min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', 'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground', size === 'sm' && 'text-xs', size === 'md' && 'text-sm', 'group-data-[collapsible=icon]:hidden', className) }, props)));
 };
 SidebarMenuSubButton.displayName = 'SidebarMenuSubButton';
 const Sidebar = Object.assign(SidebarComp, {
@@ -2028,7 +2058,7 @@ const Sidebar = Object.assign(SidebarComp, {
     Trigger: SidebarTrigger,
 });
 
-const Navbar = ({ className, sidebarTriggerClassName, leftSlot, rightSlot, }) => (jsx(Block, { className: cn('border-b p-2 dark:border-slate-700', className), fullWidth: true, children: jsxs(Flex, { align: "center", justify: "between", children: [jsxs(Flex, { align: "center", children: [jsx(Sidebar.Trigger, { className: sidebarTriggerClassName }), leftSlot] }), rightSlot] }) }));
+const Navbar = ({ className, sidebarTriggerClassName, leftSlot, rightSlot, dataTestId = 'navbar', }) => (jsx(Block, { className: cn('border-b p-2 dark:border-slate-700', className), fullWidth: true, dataTestId: dataTestId, children: jsxs(Flex, { align: "center", justify: "between", children: [jsxs(Flex, { align: "center", children: [jsx(Sidebar.Trigger, { className: sidebarTriggerClassName }), leftSlot] }), rightSlot] }) }));
 
 const Layout = (_a) => {
     var { children, className } = _a, _b = _a.sidebarProps, { basePath, header, items, extraContent, footer } = _b, sidebarProps = __rest(_b, ["basePath", "header", "items", "extraContent", "footer"]), { navbarProps, NavLink, useLocation } = _a;
@@ -2055,10 +2085,13 @@ function isLinkStartsWithPathname(link, pathname) {
 }
 
 const $Popover = PopoverPrimitive.Root;
-const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverTrigger = (_a) => {
+    var { dataTestId = 'popover-trigger' } = _a, props = __rest(_a, ["dataTestId"]);
+    return (jsx(PopoverPrimitive.Trigger, Object.assign({ "data-testid": dataTestId }, props)));
+};
 const PopoverContent = (_a) => {
-    var { className, align = 'center', sideOffset = 4, container } = _a, props = __rest(_a, ["className", "align", "sideOffset", "container"]);
-    return (jsx(PopoverPrimitive.Portal, { container: container, children: jsx(PopoverPrimitive.Content, Object.assign({ align: align, sideOffset: sideOffset, className: cn('z-50 rounded-md border bg-white p-1 shadow-md outline-none dark:border-slate-700 dark:bg-slate-900 dark:text-white', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', 'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', className) }, props)) }));
+    var { className, align = 'center', sideOffset = 4, container, dataTestId = 'popover-content' } = _a, props = __rest(_a, ["className", "align", "sideOffset", "container", "dataTestId"]);
+    return (jsx(PopoverPrimitive.Portal, { container: container, children: jsx(PopoverPrimitive.Content, Object.assign({ align: align, sideOffset: sideOffset, "data-testid": dataTestId, className: cn('z-50 rounded-md border bg-white p-1 shadow-md outline-none dark:border-slate-700 dark:bg-slate-900 dark:text-white', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', 'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', className) }, props)) }));
 };
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 const Popover = Object.assign($Popover, {
@@ -2067,27 +2100,31 @@ const Popover = Object.assign($Popover, {
 });
 
 const Switch = (_a) => {
-    var { className } = _a, _b = _a.thumbProps, _c = _b === void 0 ? {} : _b, { className: thumbClassName } = _c, thumbProps = __rest(_c, ["className"]), props = __rest(_a, ["className", "thumbProps"]);
-    return (jsx(SwitchPrimitives.Root, Object.assign({ className: cn('peer inline-flex h-[calc(1.5rem+6px)] w-[calc(3rem+6px)] shrink-0 cursor-pointer items-center rounded-full border-[3px] border-transparent', 'transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-600 focus-visible:ring-offset-2', 'focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-blue-600 data-[state=unchecked]:bg-slate-300', 'dark:focus-visible:ring-slate-200 dark:focus-visible:ring-offset-slate-800 dark:data-[state=checked]:bg-blue-700 dark:data-[state=unchecked]:bg-slate-700', className) }, props, { children: jsx(SwitchPrimitives.Thumb, Object.assign({ className: cn('pointer-events-none block h-6 w-6 rounded-full bg-white shadow-lg ring-0 transition-transform', 'data-[state=checked]:translate-x-6 data-[state=unchecked]:translate-x-0 dark:bg-slate-900', thumbClassName) }, thumbProps)) })));
+    var { className } = _a, _b = _a.thumbProps, _c = _b === void 0 ? {} : _b, { className: thumbClassName } = _c, thumbProps = __rest(_c, ["className"]), { dataTestId = 'switch' } = _a, props = __rest(_a, ["className", "thumbProps", "dataTestId"]);
+    return (jsx(SwitchPrimitives.Root, Object.assign({ className: cn('peer inline-flex h-[calc(1.5rem+6px)] w-[calc(3rem+6px)] shrink-0 cursor-pointer items-center rounded-full border-[3px] border-transparent', 'transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-600 focus-visible:ring-offset-2', 'focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-blue-600 data-[state=unchecked]:bg-slate-300', 'dark:focus-visible:ring-slate-200 dark:focus-visible:ring-offset-slate-800 dark:data-[state=checked]:bg-blue-700 dark:data-[state=unchecked]:bg-slate-700', className), "data-testid": dataTestId }, props, { children: jsx(SwitchPrimitives.Thumb, Object.assign({ className: cn('pointer-events-none block h-6 w-6 rounded-full bg-white shadow-lg ring-0 transition-transform', 'data-[state=checked]:translate-x-6 data-[state=unchecked]:translate-x-0 dark:bg-slate-900', thumbClassName), "data-testid": `${dataTestId}-thumb` }, thumbProps)) })));
 };
 Switch.displayName = SwitchPrimitives.Root.displayName;
 
 const $Tabs = (_a) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx(TabsPrimitive.Root, Object.assign({ className: cn('flex flex-col gap-2', className) }, props)));
+    var { className, dataTestId = 'tabs' } = _a, props = __rest(_a, ["className", "dataTestId"]);
+    return (jsx(TabsPrimitive.Root, Object.assign({ className: cn('flex flex-col gap-2', className), "data-testid": dataTestId }, props)));
 };
 $Tabs.displayName = TabsPrimitive.Root.displayName;
 const TabsList = (_a) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx(TabsPrimitive.List, Object.assign({ className: cn('inline-flex w-full items-center justify-center gap-1 rounded-lg border bg-slate-100 p-1 text-slate-400 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-500', className) }, props)));
+    var { className, dataTestId = 'tabs-list' } = _a, props = __rest(_a, ["className", "dataTestId"]);
+    return (jsx(TabsPrimitive.List, Object.assign({ className: cn('inline-flex w-full items-center justify-center gap-1 rounded-lg border bg-slate-100 p-1 text-slate-400 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-500', className), "data-testid": dataTestId }, props)));
 };
 TabsList.displayName = TabsPrimitive.List.displayName;
 const TabsTrigger = (_a) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx(TabsPrimitive.Trigger, Object.assign({ className: cn('inline-flex w-full items-center justify-center whitespace-nowrap rounded-md px-2 py-1.5 font-medium transition-all hover:bg-slate-200 disabled:pointer-events-none disabled:opacity-50 dark:hover:bg-slate-800', 'data-[state=active]:bg-white data-[state=active]:text-black data-[state=active]:shadow dark:data-[state=active]:bg-slate-700 dark:data-[state=active]:text-white', className) }, props)));
+    var { className, dataTestId = 'tabs-trigger' } = _a, props = __rest(_a, ["className", "dataTestId"]);
+    return (jsx(TabsPrimitive.Trigger, Object.assign({ className: cn('inline-flex w-full items-center justify-center whitespace-nowrap rounded-md px-2 py-1.5 font-medium transition-all hover:bg-slate-200 disabled:pointer-events-none disabled:opacity-50 dark:hover:bg-slate-800', 'data-[state=active]:bg-white data-[state=active]:text-black data-[state=active]:shadow dark:data-[state=active]:bg-slate-700 dark:data-[state=active]:text-white', className), "data-testid": dataTestId }, props)));
 };
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-const TabsContent = TabsPrimitive.Content;
+const TabsContent = (_a) => {
+    var { dataTestId = 'tabs-content' } = _a, props = __rest(_a, ["dataTestId"]);
+    return (jsx(TabsPrimitive.Content, Object.assign({ "data-testid": dataTestId }, props)));
+};
+TabsContent.displayName = TabsPrimitive.Content.displayName;
 const Tabs = Object.assign($Tabs, {
     List: TabsList,
     Trigger: TabsTrigger,
@@ -2151,9 +2188,9 @@ function getSystemTheme(e) {
     return e.matches ? 'dark' : 'light';
 }
 
-const ThemeSelector = ({ className }) => {
+const ThemeSelector = ({ className, dataTestId = 'theme-selector' }) => {
     const { resolvedTheme, setTheme } = useLayoutContext();
-    return (jsxs(DropdownMenu, { children: [jsx(DropdownMenu.Trigger, { asChild: true, children: jsx(Button, { prefixIcon: resolvedTheme === 'dark' ? MoonIcon : SunIcon, className: className, variant: "text" }) }), jsxs(DropdownMenu.Content, { children: [jsxs(DropdownMenu.Item, { onClick: () => setTheme('light'), children: [jsx(DropdownMenu.Icon, { icon: SunIcon }), "Light"] }), jsxs(DropdownMenu.Item, { onClick: () => setTheme('dark'), children: [jsx(DropdownMenu.Icon, { icon: MoonIcon }), "Dark"] }), jsxs(DropdownMenu.Item, { onClick: () => setTheme('system'), children: [jsx(DropdownMenu.Icon, { icon: MonitorIcon }), "System"] })] })] }));
+    return (jsxs(DropdownMenu, { children: [jsx(DropdownMenu.Trigger, { asChild: true, dataTestId: `${dataTestId}-trigger`, children: jsx(Button, { prefixIcon: resolvedTheme === 'dark' ? MoonIcon : SunIcon, className: className, variant: "text" }) }), jsxs(DropdownMenu.Content, { dataTestId: `${dataTestId}-content`, children: [jsxs(DropdownMenu.Item, { onClick: () => setTheme('light'), dataTestId: `${dataTestId}-light`, children: [jsx(DropdownMenu.Icon, { icon: SunIcon }), "Light"] }), jsxs(DropdownMenu.Item, { onClick: () => setTheme('dark'), dataTestId: `${dataTestId}-dark`, children: [jsx(DropdownMenu.Icon, { icon: MoonIcon }), "Dark"] }), jsxs(DropdownMenu.Item, { onClick: () => setTheme('system'), dataTestId: `${dataTestId}-system`, children: [jsx(DropdownMenu.Icon, { icon: MonitorIcon }), "System"] })] })] }));
 };
 
 export { Badge, BasicInput, BasicInputExtension, Block, Button, Card, CheckboxInput, Collapsible, ConfirmDialog, DataTable, DateTimeInput, Dialog, DropdownMenu, EmailInput, FileInput, Flex, FormDialog, FormGroup, FormInputs, Hint, Label, Layout, LayoutContext, LayoutContextProvider, List, ListSorter, ListSorterDialog, Navbar, NumberInput, Pagination, PasswordInput, PdfViewerDialog, Popover, SHOW_IDS_COOKIE_MAX_AGE, SHOW_IDS_COOKIE_NAME, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SIDEBAR_WIDTH_MOBILE, SelectInput, Separator, Sheet, Sidebar, SidebarContext, SidebarContextProvider, Skeleton, Spinner, Switch, THEME_COOKIE_MAX_AGE, THEME_COOKIE_NAME, THEME_MEDIA_QUERY, Table, Tabs, TextInput, TextareaInput, ThemeSelector, Tooltip, cn, compareDates, generalComparator, getDisplayDate, getValueFromCookie, isEmpty, resolveTargetObject, useDays, useIsMobile, useLayoutContext, useLongPress, useMonths, useOnSwipe, useOutsideClick, usePagination, useSidebar };