tw-react-components 0.0.161 → 0.0.164

package/index.esm.js

@@ -1,11 +1,11 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { forwardRef, useMemo, useState, useEffect, useId, useCallback, useRef, createContext, useContext } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import dayjs from 'dayjs';
 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';
+import { useMemo, useState, useEffect, useId, useCallback, useRef, createContext, useContext } from 'react';
 import localeData from 'dayjs/plugin/localeData.js';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
@@ -115,19 +115,6 @@ function isEmpty(s) {
     return [null, undefined, ''].includes(s);
 }
 
-function mergeRefs(refs) {
-    return (value) => {
-        refs.forEach((ref) => {
-            if (typeof ref === 'function') {
-                ref(value);
-            }
-            else if (ref != null) {
-                ref.current = value;
-            }
-        });
-    };
-}
-
 function resolveTargetObject(payload, fieldChain, defaultValue) {
     if (!fieldChain.length) {
         return payload === null ? payload : payload || defaultValue;
@@ -573,29 +560,29 @@ const sizeClassNames = {
         },
     },
 };
-const Button = forwardRef((_a, ref) => {
+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"]);
     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, { ref: ref, 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), 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 = forwardRef((_a, ref) => {
+const Badge = (_a) => {
     var { size = 'small' } = _a, props = __rest(_a, ["size"]);
-    return jsx(Button, Object.assign({ size: size }, props, { ref: ref }));
-});
+    return (jsx(Button, Object.assign({ size: size }, props)));
+};
 
-const Block = forwardRef((_a, ref) => {
+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, { ref: ref, children: children })));
-});
+    return (jsx("div", Object.assign({ className: cn(centered && 'mx-auto', container && 'container', fullWidth && 'w-full', fullHeight && 'h-full', className) }, props, { children: children })));
+};
 
-const Card = forwardRef((_a, ref) => {
+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, { ref: ref, children: children })));
-});
+    return (jsx(Block, Object.assign({ className: cn('rounded-lg border p-2 dark:border-slate-700 dark:bg-slate-900', className) }, blockProps, { children: children })));
+};
 
 const $Collapsible = CollapsiblePrimitive.Root;
 const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
@@ -626,10 +613,10 @@ const justifyClasses = {
     between: 'justify-between',
     end: 'justify-end',
 };
-const Flex = forwardRef((_a, ref) => {
+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, { ref: ref, children: children })));
-});
+    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 })));
+};
 
 dayjs.extend(localeData);
 function useDays(locale = 'en') {
@@ -836,7 +823,7 @@ const sizeClasses = {
         },
     },
 };
-const BasicInput = forwardRef(function BasicInput(_a, ref) {
+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"]);
     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]);
@@ -854,18 +841,18 @@ const BasicInput = forwardRef(function BasicInput(_a, ref) {
                             [inputClasses.withoutErrors.input]: !hasErrors,
                             [inputClasses.withErrors.input]: hasErrors,
                             'rounded-r-none border-r-0': SuffixIcon,
-                        }, inputClassName) }, props, { value: props.value, ref: ref }))) : 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 }))) : 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, { ref: ref }))) : (jsx("input", Object.assign({ id: id, className: cn(inputClasses.base.input, sizeClasses[size].input, {
+                        }, inputClassName), type: type, checked: Boolean(props.value) }, props))) : (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, ref: ref }))), 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 }))), 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 }) }))] })] }));
-});
+};
 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, {
         [inputClasses.base.disabled]: disabled,
         [inputClasses.withoutErrors.extension]: !hasErrors,
@@ -873,26 +860,26 @@ const BasicInputExtension = ({ children, className, size, hasErrors, disabled, o
         'cursor-pointer': onClick,
     }, className), onClick: !disabled ? onClick : undefined, onPointerDown: (event) => event.stopPropagation(), children: children }));
 
-const CheckboxInput = forwardRef((props, ref) => (jsx(BasicInput, Object.assign({ type: "checkbox" }, props, { ref: ref }))));
+const CheckboxInput = (props) => (jsx(BasicInput, Object.assign({ type: "checkbox" }, props)));
 
-const EmailInput = forwardRef((props, ref) => (jsx(BasicInput, Object.assign({ type: "email" }, props, { suffixIcon: AtSignIcon, ref: ref }))));
+const EmailInput = (props) => (jsx(BasicInput, Object.assign({ type: "email" }, props, { suffixIcon: AtSignIcon })));
 
-const NumberInput = forwardRef((_a, ref) => {
+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
             ? ({ className }) => (jsx("div", { className: cn(className, 'flex w-min items-center'), onClick: props.onSuffixIconClick, children: unit }))
-            : props.suffixIcon, ref: ref })));
-});
+            : props.suffixIcon })));
+};
 
-const PasswordInput = forwardRef((props, ref) => {
+const PasswordInput = (props) => {
     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, ref: ref })));
-});
+    return (jsx(BasicInput, Object.assign({ type: type }, props, { suffixIcon: type === 'password' ? EyeIcon : EyeOffIcon, onSuffixIconClick: toggleType })));
+};
 
-const TextareaInput = forwardRef((props, ref) => (jsx(BasicInput, Object.assign({ type: "textarea" }, props, { ref: ref }))));
+const TextareaInput = (props) => (jsx(BasicInput, Object.assign({ type: "textarea" }, props)));
 
-const TextInput = forwardRef((props, ref) => (jsx(BasicInput, Object.assign({ type: "text" }, props, { ref: ref }))));
+const TextInput = (props) => jsx(BasicInput, Object.assign({ type: "text" }, props));
 
 const DaysView = ({ date, value, month, year, minDate, maxDate, locale, setNewDate, }) => {
     const days = useDays(locale);
@@ -1084,8 +1071,8 @@ const TimeSelector = ({ date, step = 1, minDate, maxDate, setNewDate, }) => {
     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))] })] })] }));
 };
 
-const DateTimeInput = forwardRef((_a, 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' } = _a, props = __rest(_a, ["className", "value", "clearable", "type", "step", "minDate", "maxDate", "hasErrors", "onChange", "onBlur", "displayFormat", "displayLocale"]);
+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"]);
     const [isOpen, setIsOpen] = useState();
     const [calendarView, setCalendarView] = useState('days');
     const date = useMemo(() => {
@@ -1138,33 +1125,33 @@ const DateTimeInput = forwardRef((_a, ref) => {
         }
     };
     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" })] }))] }))] }));
-});
+};
 
-const ListContent = forwardRef((_a, ref) => {
+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), ref: ref }, props)));
-});
+    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)));
+};
 const labelSizeClasses = {
     small: 'p-1 text-sm',
     medium: 'px-2 py-1.5',
 };
-const ListItem = forwardRef((_a, ref) => {
+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", ref: ref }, props)));
-});
-const ListLabel = forwardRef((_a, ref) => {
+    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)));
+};
+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), ref: ref }, props)));
-});
-const ListIndicator = forwardRef((_a, ref) => {
+    return (jsx(Block, Object.assign({ className: cn(labelSizeClasses[size], 'font-semibold text-slate-900 dark:text-slate-300', inset && 'pl-8', className) }, 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", ref: ref }, props, { children: jsx(Icon, { className: iconClassName }) })));
-});
-const ListIcon = forwardRef(({ className, icon: Icon }, ref) => jsx(Icon, { className: cn('h-4 w-4', className), ref: ref }));
-const ListSeparator = forwardRef((_a, ref) => {
+    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 }) })));
+};
+const ListIcon = ({ className, icon: Icon, ref, }) => jsx(Icon, { className: cn('h-4 w-4', className), ref: ref });
+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), ref: ref }, props)));
-});
+    return (jsx(Block, Object.assign({ className: cn('-mx-1 my-1 h-px bg-slate-100 dark:bg-slate-700', className) }, props)));
+};
 const List = Object.assign(ListContent, {
     Item: ListItem,
     Label: ListLabel,
@@ -1178,45 +1165,45 @@ const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-const DropdownMenuSubTrigger = forwardRef((_a, ref) => {
+const DropdownMenuSubTrigger = (_a) => {
     var { className, inset, children } = _a, props = __rest(_a, ["className", "inset", "children"]);
-    return (jsx(DropdownMenuPrimitive.SubTrigger, Object.assign({ ref: ref }, props, { asChild: true, children: jsxs(List.Item, { className: className, inset: inset, children: [children, jsx(ChevronRightIcon, { className: "ml-auto h-4 w-4" })] }) })));
-});
+    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" })] }) })));
+};
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-const DropdownMenuSubContent = forwardRef((_a, ref) => {
+const DropdownMenuSubContent = (_a) => {
     var { className, children } = _a, props = __rest(_a, ["className", "children"]);
-    return (jsx(DropdownMenuPrimitive.Portal, { children: jsx(DropdownMenuPrimitive.SubContent, Object.assign({ ref: ref }, props, { asChild: true, children: jsx(List, { className: className, children: children }) })) }));
-});
+    return (jsx(DropdownMenuPrimitive.Portal, { children: jsx(DropdownMenuPrimitive.SubContent, Object.assign({}, props, { asChild: true, children: jsx(List, { className: className, children: children }) })) }));
+};
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-const DropdownMenuContent = forwardRef((_a, ref) => {
+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({ ref: ref, sideOffset: sideOffset }, props, { asChild: true, children: jsx(List, { className: className, children: children }) })) }));
-});
+    return (jsx(DropdownMenuPrimitive.Portal, { children: jsx(DropdownMenuPrimitive.Content, Object.assign({ sideOffset: sideOffset }, props, { asChild: true, children: jsx(List, { className: className, children: children }) })) }));
+};
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-const DropdownMenuItem = forwardRef((_a, ref) => {
+const DropdownMenuItem = (_a) => {
     var { className, inset, children } = _a, props = __rest(_a, ["className", "inset", "children"]);
-    return (jsx(DropdownMenuPrimitive.Item, Object.assign({ ref: ref }, props, { asChild: true, children: jsx(List.Item, { inset: inset, className: className, children: children }) })));
-});
+    return (jsx(DropdownMenuPrimitive.Item, Object.assign({}, props, { asChild: true, children: jsx(List.Item, { inset: inset, className: className, children: children }) })));
+};
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-const DropdownMenuCheckboxItem = forwardRef((_a, ref) => {
+const DropdownMenuCheckboxItem = (_a) => {
     var { className, children } = _a, props = __rest(_a, ["className", "children"]);
-    return (jsx(DropdownMenuPrimitive.CheckboxItem, Object.assign({ ref: ref }, 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] }) })));
-});
+    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] }) })));
+};
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-const DropdownMenuRadioItem = forwardRef((_a, ref) => {
+const DropdownMenuRadioItem = (_a) => {
     var { className, children } = _a, props = __rest(_a, ["className", "children"]);
-    return (jsx(DropdownMenuPrimitive.RadioItem, Object.assign({ ref: ref }, 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] }) })));
-});
+    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] }) })));
+};
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-const DropdownMenuLabel = forwardRef((_a, ref) => {
+const DropdownMenuLabel = (_a) => {
     var { className, inset, children } = _a, props = __rest(_a, ["className", "inset", "children"]);
-    return (jsx(DropdownMenuPrimitive.Label, Object.assign({ ref: ref }, props, { asChild: true, children: jsx(List.Label, { className: className, inset: inset, children: children }) })));
-});
+    return (jsx(DropdownMenuPrimitive.Label, Object.assign({}, props, { asChild: true, children: jsx(List.Label, { className: className, inset: inset, children: children }) })));
+};
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-const DropdownMenuSeparator = forwardRef((_a, ref) => {
+const DropdownMenuSeparator = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx(DropdownMenuPrimitive.Separator, Object.assign({ ref: ref }, props, { asChild: true, children: jsx(List.Separator, { className: className }) })));
-});
+    return (jsx(DropdownMenuPrimitive.Separator, Object.assign({}, props, { asChild: true, children: jsx(List.Separator, { className: className }) })));
+};
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 const DropdownMenuShortcut = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
@@ -1244,7 +1231,7 @@ const DropdownMenu = Object.assign(DropdownMenuPrimitive.Root, {
 const defaultRenderItem = (item, selected) => item.label;
 const defaultSearchPredicate = (item, searchValue) => item.label.toLowerCase().includes(searchValue.toLowerCase());
 const defaultSelectPredicate = (a, b) => a === b;
-const SelectInput = forwardRef((_a, ref) => {
+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"]);
     const [open, setOpen] = useState(false);
     const [searchValue, setSearchValue] = useState('');
@@ -1324,32 +1311,32 @@ const SelectInput = forwardRef((_a, ref) => {
                 handleOnSelect(option.id);
             }, 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), ref: ref, 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 &&
+    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))) })] })] }));
-});
+};
 function isNotNullOrUndefined(value) {
     return value !== null && value !== undefined;
 }
 
-const FileInput = forwardRef((_a, ref) => {
+const FileInput = (_a) => {
     var { className, value, onChange, onFileChange, accept } = _a, props = __rest(_a, ["className", "value", "onChange", "onFileChange", "accept"]);
     const fileInputRef = useRef(null);
     const handleFileChange = (_a) => __awaiter(void 0, [_a], void 0, function* ({ target: { files } }) {
-        console.log(files);
         if (files && files.length > 0) {
             const file = files[0];
-            console.log(file, file.name, onChange, onFileChange);
             onChange === null || onChange === void 0 ? void 0 : onChange(file.name);
             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(); }, ref: ref, readOnly: true })), jsx("input", { ref: (ref) => (fileInputRef.current = ref), type: "file", hidden: true, accept: accept, onChange: handleFileChange })] }));
-});
+    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) => {
+                    fileInputRef.current = ref;
+                }, type: "file", hidden: true, accept: accept, onChange: handleFileChange })] }));
+};
 
 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] }));
 
 function withForm(Component) {
-    return forwardRef((props, ref) => {
+    return (props) => {
         const _a = props, { name, pattern, validate } = _a, restProps = __rest(_a, ["name", "pattern", "validate"]);
         const { control, formState } = useFormContext();
         return (jsx(Controller, { name: name, control: control, rules: {
@@ -1363,9 +1350,9 @@ function withForm(Component) {
             }, render: ({ field, fieldState }) => {
                 var _a, _b;
                 return (jsx(Component, Object.assign({}, restProps, field, { value: (_a = field.value) !== null && _a !== void 0 ? _a : '', disabled: ((_b = field.disabled) !== null && _b !== void 0 ? _b : restProps.disabled) ||
-                        formState.isSubmitting, hasErrors: fieldState.error, ref: mergeRefs([ref, field.ref]) })));
+                        formState.isSubmitting, hasErrors: fieldState.error })));
             } }));
-    });
+    };
 }
 const FormInputs = {
     Text: withForm(TextInput),
@@ -1379,7 +1366,7 @@ const FormInputs = {
     File: withForm(FileInput),
 };
 
-const HintRoot = forwardRef(({ children }, ref) => (jsx(Block, { className: "relative", ref: ref, children: children })));
+const HintRoot = ({ children, ref }) => (jsx(Block, { className: "relative", ref: ref, children: children }));
 HintRoot.displayName = 'HintRoot';
 const dotSizeClassNames = {
     small: {
@@ -1421,7 +1408,7 @@ const colorClassNames = {
     pink: 'bg-pink-500 dark:bg-pink-600',
     rose: 'bg-rose-500 dark:bg-rose-600',
 };
-const HintDot = forwardRef(({ 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, }) => (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',
@@ -1431,7 +1418,7 @@ const HintDot = forwardRef(({ size = 'medium', placement = 'top-right', color =
                 [`${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',
-            }) }))] })));
+            }) }))] }));
 HintDot.displayName = 'HintDot';
 const badgeSizeClassNames = {
     top: 'top-0 -translate-y-1/2',
@@ -1439,15 +1426,15 @@ const badgeSizeClassNames = {
     bottom: 'bottom-0 translate-y-1/2',
     left: 'left-2 -translate-x-full',
 };
-const HintBadge = forwardRef((_a, ref) => {
+const HintBadge = (_a) => {
     var { className, size = 'small', placement = 'top-right' } = _a, props = __rest(_a, ["className", "size", "placement"]);
     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, { ref: ref })));
-});
+        }, className), size: size }, props)));
+};
 HintBadge.displayName = 'HintBadge';
 const Hint = Object.assign(HintRoot, { Dot: HintDot, Badge: HintBadge });
 
@@ -1607,15 +1594,15 @@ $Dialog.displayName = DialogPrimitive.Root.displayName;
 const DialogTrigger = DialogPrimitive.Trigger;
 const DialogPortal = DialogPrimitive.Portal;
 const DialogClose = DialogPrimitive.Close;
-const DialogOverlay = forwardRef((_a, ref) => {
+const DialogOverlay = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx(DialogPrimitive.Overlay, Object.assign({ ref: ref, 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)));
-});
+    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)));
+};
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-const DialogContent = forwardRef((_a, ref) => {
+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({ ref: ref, 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" })] }))] }));
-});
+    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" })] }))] }));
+};
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 const DialogHeader = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
@@ -1627,15 +1614,15 @@ const DialogFooter = (_a) => {
     return (jsx("div", Object.assign({ className: cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className) }, props)));
 };
 DialogFooter.displayName = 'DialogFooter';
-const DialogTitle = forwardRef((_a, ref) => {
+const DialogTitle = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx(DialogPrimitive.Title, Object.assign({ ref: ref, className: cn('text-foreground text-lg font-semibold', className) }, props)));
-});
+    return (jsx(DialogPrimitive.Title, Object.assign({ className: cn('text-foreground text-lg font-semibold', className) }, props)));
+};
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-const DialogDescription = forwardRef((_a, ref) => {
+const DialogDescription = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx(DialogPrimitive.Description, Object.assign({ ref: ref, className: cn('text-muted-foreground text-sm', className) }, props)));
-});
+    return (jsx(DialogPrimitive.Description, Object.assign({ className: cn('text-muted-foreground text-sm', className) }, props)));
+};
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 const Dialog = Object.assign($Dialog, {
     Portal: DialogPortal,
@@ -1656,10 +1643,10 @@ $Sheet.displayName = DialogPrimitive.Root.displayName;
 const SheetTrigger = DialogPrimitive.Trigger;
 const SheetClose = DialogPrimitive.Close;
 const SheetPortal = DialogPrimitive.Portal;
-const SheetOverlay = forwardRef((_a, ref) => {
+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, { ref: ref })));
-});
+    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)));
+};
 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', {
     variants: {
@@ -1674,10 +1661,10 @@ const sheetVariants = cva('fixed flex flex-col z-50 gap-4 bg-background p-4 shad
         side: 'right',
     },
 });
-const SheetContent = forwardRef((_a, ref) => {
+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({ ref: ref, 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" })] }))] }));
-});
+    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" })] }))] }));
+};
 SheetContent.displayName = DialogPrimitive.Content.displayName;
 const SheetHeader = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
@@ -1689,15 +1676,15 @@ const SheetFooter = (_a) => {
     return (jsx("div", Object.assign({ className: cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className) }, props)));
 };
 SheetFooter.displayName = 'SheetFooter';
-const SheetTitle = forwardRef((_a, ref) => {
+const SheetTitle = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx(DialogPrimitive.Title, Object.assign({ ref: ref, className: cn('text-foreground text-lg font-semibold', className) }, props)));
-});
+    return (jsx(DialogPrimitive.Title, Object.assign({ className: cn('text-foreground text-lg font-semibold', className) }, props)));
+};
 SheetTitle.displayName = DialogPrimitive.Title.displayName;
-const SheetDescription = forwardRef((_a, ref) => {
+const SheetDescription = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx(DialogPrimitive.Description, Object.assign({ ref: ref, className: cn('text-muted-foreground text-sm', className) }, props)));
-});
+    return (jsx(DialogPrimitive.Description, Object.assign({ className: cn('text-muted-foreground text-sm', className) }, props)));
+};
 SheetDescription.displayName = DialogPrimitive.Description.displayName;
 const Sheet = Object.assign($Sheet, {
     Portal: SheetPortal,
@@ -1766,10 +1753,10 @@ 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 Separator = forwardRef((_a, ref) => {
+const Separator = (_a) => {
     var { className, orientation = 'horizontal', decorative = true } = _a, props = __rest(_a, ["className", "orientation", "decorative"]);
-    return (jsx(SeparatorPrimitive.Root, Object.assign({ ref: ref, decorative: decorative, orientation: orientation, className: cn('bg-border shrink-0', orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]', className) }, props)));
-});
+    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)));
+};
 Separator.displayName = SeparatorPrimitive.Root.displayName;
 
 const Skeleton = (_a) => {
@@ -1792,7 +1779,7 @@ function useSidebar() {
     }
     return context;
 }
-const SidebarContextProvider = forwardRef((_a, ref) => {
+const SidebarContextProvider = (_a) => {
     var { defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children } = _a, props = __rest(_a, ["defaultOpen", "open", "onOpenChange", "className", "style", "children"]);
     const isMobile = useIsMobile();
     const [openMobile, setOpenMobile] = useState(false);
@@ -1839,21 +1826,21 @@ const SidebarContextProvider = forwardRef((_a, ref) => {
         setOpenMobile,
         toggleSidebar,
     }), [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]);
-    return (jsx(SidebarContext.Provider, { value: contextValue, children: jsx("div", Object.assign({ style: Object.assign({ '--sidebar-width': SIDEBAR_WIDTH, '--sidebar-width-icon': SIDEBAR_WIDTH_ICON }, style), className: cn('group/sidebar-wrapper has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full', className), ref: ref }, props, { children: children })) }));
-});
+    return (jsx(SidebarContext.Provider, { value: contextValue, children: jsx("div", Object.assign({ style: Object.assign({ '--sidebar-width': SIDEBAR_WIDTH, '--sidebar-width-icon': SIDEBAR_WIDTH_ICON }, style), className: cn('group/sidebar-wrapper has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full', className) }, props, { children: children })) }));
+};
 SidebarContextProvider.displayName = 'SidebarContextProvider';
-const $Sidebar = forwardRef((_a, ref) => {
+const SidebarComp = (_a) => {
     var { side = 'left', variant = 'sidebar', collapsible = 'offcanvas', className, children } = _a, props = __rest(_a, ["side", "variant", "collapsible", "className", "children"]);
     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), ref: ref }, props, { children: children })));
+        return (jsx("div", Object.assign({ 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: {
                     '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
                 }, side: side, children: jsx("div", { className: "flex h-full w-full flex-col", children: children }) }) })));
     }
-    return (jsxs("div", { ref: ref, className: "text-sidebar-foreground group peer hidden md:block", "data-state": state, "data-collapsible": state === 'collapsed' ? collapsible : '', "data-variant": variant, "data-side": side, children: [jsx("div", { className: cn('relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear', 'group-data-[collapsible=offcanvas]:w-0', 'group-data-[side=right]:rotate-180', variant === 'floating' || variant === 'inset'
+    return (jsxs("div", { className: "text-sidebar-foreground group peer hidden md:block", "data-state": state, "data-collapsible": state === 'collapsed' ? collapsible : '', "data-variant": variant, "data-side": side, children: [jsx("div", { className: cn('relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear', 'group-data-[collapsible=offcanvas]:w-0', 'group-data-[side=right]:rotate-180', variant === 'floating' || variant === 'inset'
                     ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'
                     : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]') }), jsx("div", Object.assign({ className: cn('fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex', side === 'left'
                     ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
@@ -1862,86 +1849,86 @@ const $Sidebar = forwardRef((_a, ref) => {
                 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 }) }))] }));
-});
-$Sidebar.displayName = 'Sidebar';
-const SidebarTrigger = forwardRef((_a, ref) => {
+};
+SidebarComp.displayName = 'Sidebar';
+const SidebarTrigger = (_a) => {
     var { className, onClick } = _a, props = __rest(_a, ["className", "onClick"]);
     const { toggleSidebar } = useSidebar();
-    return (jsx(Button, Object.assign({ ref: ref, "data-sidebar": "trigger", variant: "text", suffixIcon: PanelLeft, className: className, onClick: (event) => {
+    return (jsx(Button, Object.assign({ "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 = forwardRef((_a, ref) => {
+const SidebarRail = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
     const { toggleSidebar } = useSidebar();
-    return (jsx("button", Object.assign({ ref: ref, "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-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 = forwardRef((_a, ref) => {
+const SidebarInset = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx("main", Object.assign({ ref: ref, 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)));
-});
+    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)));
+};
 SidebarInset.displayName = 'SidebarInset';
-const SidebarInput = forwardRef((_a, ref) => {
+const SidebarInput = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx(BasicInput, Object.assign({ ref: ref, "data-sidebar": "input", className: cn('focus-visible:ring-sidebar-ring focus-visible:ring-2', className) }, props)));
-});
+    return (jsx(BasicInput, Object.assign({ "data-sidebar": "input", className: cn('focus-visible:ring-sidebar-ring focus-visible:ring-2', className) }, props)));
+};
 SidebarInput.displayName = 'SidebarInput';
-const SidebarHeader = forwardRef((_a, ref) => {
+const SidebarHeader = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx("div", Object.assign({ ref: ref, "data-sidebar": "header", className: cn('flex flex-col gap-2 p-2', className) }, props)));
-});
+    return (jsx("div", Object.assign({ "data-sidebar": "header", className: cn('flex flex-col gap-2 p-2', className) }, props)));
+};
 SidebarHeader.displayName = 'SidebarHeader';
-const SidebarFooter = forwardRef((_a, ref) => {
+const SidebarFooter = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx("div", Object.assign({ ref: ref, "data-sidebar": "footer", className: cn('flex flex-col gap-2 p-2', className) }, props)));
-});
+    return (jsx("div", Object.assign({ "data-sidebar": "footer", className: cn('flex flex-col gap-2 p-2', className) }, props)));
+};
 SidebarFooter.displayName = 'SidebarFooter';
-const SidebarSeparator = forwardRef((_a, ref) => {
+const SidebarSeparator = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx(Separator, Object.assign({ ref: ref, "data-sidebar": "separator", className: cn('bg-sidebar-border mx-2 w-auto', className) }, props)));
-});
+    return (jsx(Separator, Object.assign({ "data-sidebar": "separator", className: cn('bg-sidebar-border mx-2 w-auto', className) }, props)));
+};
 SidebarSeparator.displayName = 'SidebarSeparator';
-const SidebarContent = forwardRef((_a, ref) => {
+const SidebarContent = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx("div", Object.assign({ ref: ref, "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)));
-});
+    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)));
+};
 SidebarContent.displayName = 'SidebarContent';
-const SidebarGroup = forwardRef((_a, ref) => {
+const SidebarGroup = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx("div", Object.assign({ ref: ref, "data-sidebar": "group", className: cn('relative flex w-full min-w-0 flex-col p-2', className) }, props)));
-});
+    return (jsx("div", Object.assign({ "data-sidebar": "group", className: cn('relative flex w-full min-w-0 flex-col p-2', className) }, props)));
+};
 SidebarGroup.displayName = 'SidebarGroup';
-const SidebarGroupLabel = forwardRef((_a, ref) => {
+const SidebarGroupLabel = (_a) => {
     var { className, asChild = false } = _a, props = __rest(_a, ["className", "asChild"]);
     const Comp = asChild ? Slot : 'div';
-    return (jsx(Comp, Object.assign({ ref: ref, "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-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 = forwardRef((_a, ref) => {
+const SidebarGroupAction = (_a) => {
     var { className, asChild = false } = _a, props = __rest(_a, ["className", "asChild"]);
     const Comp = asChild ? Slot : 'button';
-    return (jsx(Comp, Object.assign({ ref: ref, "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-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 = forwardRef((_a, ref) => {
+const SidebarGroupContent = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx("div", Object.assign({ ref: ref, "data-sidebar": "group-content", className: cn('w-full text-sm', className) }, props)));
-});
+    return (jsx("div", Object.assign({ "data-sidebar": "group-content", className: cn('w-full text-sm', className) }, props)));
+};
 SidebarGroupContent.displayName = 'SidebarGroupContent';
-const SidebarMenu = forwardRef((_a, ref) => {
+const SidebarMenu = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx("ul", Object.assign({ ref: ref, "data-sidebar": "menu", className: cn('flex w-full min-w-0 flex-col gap-1', className) }, props)));
-});
+    return (jsx("ul", Object.assign({ "data-sidebar": "menu", className: cn('flex w-full min-w-0 flex-col gap-1', className) }, props)));
+};
 SidebarMenu.displayName = 'SidebarMenu';
-const SidebarMenuItem = forwardRef((_a, ref) => {
+const SidebarMenuItem = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx("li", Object.assign({ ref: ref, "data-sidebar": "menu-item", className: cn('group/menu-item relative', className) }, props)));
-});
+    return (jsx("li", Object.assign({ "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', {
     variants: {
@@ -1960,11 +1947,11 @@ const sidebarMenuButtonVariants = cva('peer/menu-button flex w-full items-center
         size: 'default',
     },
 });
-const SidebarMenuButton = forwardRef((_a, ref) => {
+const SidebarMenuButton = (_a) => {
     var { asChild = false, isActive = false, variant = 'default', size = 'default', tooltip, className } = _a, props = __rest(_a, ["asChild", "isActive", "variant", "size", "tooltip", "className"]);
     const Comp = asChild ? Slot : 'button';
     const { isMobile, state } = useSidebar();
-    const button = (jsx(Comp, Object.assign({ ref: ref, "data-sidebar": "menu-button", "data-size": size, "data-active": isActive, className: cn(sidebarMenuButtonVariants({ variant, size }), className) }, props)));
+    const button = (jsx(Comp, Object.assign({ "data-sidebar": "menu-button", "data-size": size, "data-active": isActive, className: cn(sidebarMenuButtonVariants({ variant, size }), className) }, props)));
     if (!tooltip || state !== 'collapsed' || isMobile) {
         return button;
     }
@@ -1974,50 +1961,50 @@ const SidebarMenuButton = forwardRef((_a, ref) => {
         };
     }
     return (jsx(Tooltip, Object.assign({ asChild: true, placement: "right" }, tooltip, { children: button })));
-});
+};
 SidebarMenuButton.displayName = 'SidebarMenuButton';
-const SidebarMenuAction = forwardRef((_a, ref) => {
+const SidebarMenuAction = (_a) => {
     var { className, asChild = false, showOnHover = false } = _a, props = __rest(_a, ["className", "asChild", "showOnHover"]);
     const Comp = asChild ? Slot : 'button';
-    return (jsx(Comp, Object.assign({ ref: ref, "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-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 = forwardRef((_a, ref) => {
+const SidebarMenuBadge = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx("div", Object.assign({ ref: ref, "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)));
-});
+    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)));
+};
 SidebarMenuBadge.displayName = 'SidebarMenuBadge';
-const SidebarMenuSkeleton = forwardRef((_a, ref) => {
+const SidebarMenuSkeleton = (_a) => {
     var { className, showIcon = false } = _a, props = __rest(_a, ["className", "showIcon"]);
     // Random width between 50 to 90%.
     const width = useMemo(() => {
         return `${Math.floor(Math.random() * 40) + 50}%`;
     }, []);
-    return (jsxs("div", Object.assign({ ref: ref, "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-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 = forwardRef((_a, ref) => {
+const SidebarMenuSub = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx("ul", Object.assign({ ref: ref, "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)));
-});
+    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)));
+};
 SidebarMenuSub.displayName = 'SidebarMenuSub';
-const SidebarMenuSubItem = forwardRef((_a, ref) => {
+const SidebarMenuSubItem = (_a) => {
     var props = __rest(_a, []);
-    return (jsx("li", Object.assign({ ref: ref }, props)));
-});
+    return jsx("li", Object.assign({}, props));
+};
 SidebarMenuSubItem.displayName = 'SidebarMenuSubItem';
-const SidebarMenuSubButton = forwardRef((_a, ref) => {
+const SidebarMenuSubButton = (_a) => {
     var { asChild = false, size = 'md', isActive, className } = _a, props = __rest(_a, ["asChild", "size", "isActive", "className"]);
     const Comp = asChild ? Slot : 'button';
-    return (jsx(Comp, Object.assign({ ref: ref, "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-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($Sidebar, {
+const Sidebar = Object.assign(SidebarComp, {
     Content: SidebarContent,
     Footer: SidebarFooter,
     Group: SidebarGroup,
@@ -2069,36 +2056,36 @@ function isLinkStartsWithPathname(link, pathname) {
 
 const $Popover = PopoverPrimitive.Root;
 const PopoverTrigger = PopoverPrimitive.Trigger;
-const PopoverContent = forwardRef((_a, ref) => {
+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({ ref: ref, 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)) }));
-});
+    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)) }));
+};
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 const Popover = Object.assign($Popover, {
     Trigger: PopoverTrigger,
     Content: PopoverContent,
 });
 
-const Switch = forwardRef((_a, ref) => {
+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, { ref: ref, 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)) })));
-});
+    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)) })));
+};
 Switch.displayName = SwitchPrimitives.Root.displayName;
 
-const $Tabs = forwardRef((_a, ref) => {
+const $Tabs = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx(TabsPrimitive.Root, Object.assign({ ref: ref, className: cn('flex flex-col gap-2', className) }, props)));
-});
+    return (jsx(TabsPrimitive.Root, Object.assign({ className: cn('flex flex-col gap-2', className) }, props)));
+};
 $Tabs.displayName = TabsPrimitive.Root.displayName;
-const TabsList = forwardRef((_a, ref) => {
+const TabsList = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx(TabsPrimitive.List, Object.assign({ ref: ref, 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)));
-});
+    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)));
+};
 TabsList.displayName = TabsPrimitive.List.displayName;
-const TabsTrigger = forwardRef((_a, ref) => {
+const TabsTrigger = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx(TabsPrimitive.Trigger, Object.assign({ ref: ref, 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)));
-});
+    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)));
+};
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 const TabsContent = TabsPrimitive.Content;
 const Tabs = Object.assign($Tabs, {
@@ -2169,4 +2156,4 @@ const ThemeSelector = ({ className }) => {
     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"] })] })] }));
 };
 
-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, mergeRefs, resolveTargetObject, useDays, useIsMobile, useLayoutContext, useLongPress, useMonths, useOnSwipe, useOutsideClick, usePagination, useSidebar };
+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 };