tw-react-components 0.0.138 → 0.0.140

package/index.cjs.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
+var react = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var dayjs = require('dayjs');
@@ -12,13 +12,13 @@ var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
 var reactHookForm = require('react-hook-form');
 var DialogPrimitive = require('@radix-ui/react-dialog');
+var classVarianceAuthority = require('class-variance-authority');
 var core = require('@dnd-kit/core');
 var modifiers = require('@dnd-kit/modifiers');
 var sortable = require('@dnd-kit/sortable');
 var utilities = require('@dnd-kit/utilities');
 var reactRouterDom = require('react-router-dom');
 var reactSlot = require('@radix-ui/react-slot');
-var classVarianceAuthority = require('class-variance-authority');
 var SeparatorPrimitive = require('@radix-ui/react-separator');
 var PopoverPrimitive = require('@radix-ui/react-popover');
 var SwitchPrimitives = require('@radix-ui/react-switch');
@@ -41,7 +41,6 @@ function _interopNamespaceDefault(e) {
     return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(TooltipPrimitive);
 var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(DropdownMenuPrimitive);
 var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(DialogPrimitive);
@@ -124,6 +123,19 @@ function getDisplayDate(date, format, locale) {
     return (locale ? dayjs(date).locale(locale) : dayjs(date)).format(format);
 }
 
+function getValueFromCookie(key, _default) {
+    var _a, _b;
+    const transformers = {
+        string: String,
+        boolean: (value) => value === 'true',
+    };
+    return typeof window !== 'undefined'
+        ? transformers[typeof _default]((_b = (_a = document.cookie
+            .split('; ')
+            .find((row) => row.startsWith(key))) === null || _a === void 0 ? void 0 : _a.split('=')[1]) !== null && _b !== void 0 ? _b : _default)
+        : _default;
+}
+
 function isEmpty(s) {
     if (Array.isArray(s))
         return s.length === 0;
@@ -586,26 +598,26 @@ const sizeClassNames = {
         },
     },
 };
-const Button = React.forwardRef((_a, ref) => {
-    var { children, className, size = 'medium', color = 'slate', variant = 'filled', rounded, prefixIcon: PrefixIcon, suffixIcon: SuffixIcon } = _a, props = __rest(_a, ["children", "className", "size", "color", "variant", "rounded", "prefixIcon", "suffixIcon"]);
+const Button = react.forwardRef((_a, ref) => {
+    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 (jsxRuntime.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'
-            : props.onClick
+            : !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 && (jsxRuntime.jsx(PrefixIcon, { className: children ? sizeClassNames[size].icon.withChildren : sizeClassNames[size].icon.base })), children, SuffixIcon && (jsxRuntime.jsx(SuffixIcon, { className: children ? sizeClassNames[size].icon.withChildren : sizeClassNames[size].icon.base }))] })));
 });
 
-const Badge = React.forwardRef((_a, ref) => {
+const Badge = react.forwardRef((_a, ref) => {
     var { size = 'small' } = _a, props = __rest(_a, ["size"]);
     return jsxRuntime.jsx(Button, Object.assign({ size: size }, props, { ref: ref }));
 });
 
-const Block = React.forwardRef((_a, ref) => {
+const Block = react.forwardRef((_a, ref) => {
     var { children, className, centered, container, fullWidth, fullHeight } = _a, props = __rest(_a, ["children", "className", "centered", "container", "fullWidth", "fullHeight"]);
     return (jsxRuntime.jsx("div", Object.assign({ className: cn(centered && 'mx-auto', container && 'container', fullWidth && 'w-full', fullHeight && 'h-full', className) }, props, { ref: ref, children: children })));
 });
 
-const Card = React.forwardRef((_a, ref) => {
+const Card = react.forwardRef((_a, ref) => {
     var { children, className } = _a, blockProps = __rest(_a, ["children", "className"]);
     return (jsxRuntime.jsx(Block, Object.assign({ className: cn('rounded-lg border p-3 dark:border-slate-700 dark:bg-slate-900', className) }, blockProps, { ref: ref, children: children })));
 });
@@ -631,14 +643,14 @@ const justifyClasses = {
     between: 'justify-between',
     end: 'justify-end',
 };
-const Flex = React.forwardRef((_a, ref) => {
+const Flex = react.forwardRef((_a, ref) => {
     var { children, className, reverse, wrap, direction = 'row', align = 'start', justify = 'start' } = _a, blockProps = __rest(_a, ["children", "className", "reverse", "wrap", "direction", "align", "justify"]);
     return (jsxRuntime.jsx(Block, Object.assign({ className: cn('flex gap-3', wrap && 'flex-wrap', directionClasses[direction][reverse ? 'reverse' : 'normal'], alignClasses[align], justifyClasses[justify], className) }, blockProps, { ref: ref, children: children })));
 });
 
 dayjs.extend(localeData);
 function useDays(locale = 'en') {
-    return React.useMemo(() => {
+    return react.useMemo(() => {
         dayjs.extend(localeData).locale(locale);
         const names = dayjs.weekdays();
         const shortNames = dayjs.weekdaysShort();
@@ -648,8 +660,8 @@ function useDays(locale = 'en') {
 
 const MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
-    const [isMobile, setIsMobile] = React.useState(undefined);
-    React.useEffect(() => {
+    const [isMobile, setIsMobile] = react.useState(undefined);
+    react.useEffect(() => {
         const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
         const onChange = () => {
             setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
@@ -662,8 +674,8 @@ function useIsMobile() {
 }
 
 function useLongPress(callback, ms = 100) {
-    const [startLongPress, setStartLongPress] = React.useState(false);
-    React.useEffect(() => {
+    const [startLongPress, setStartLongPress] = react.useState(false);
+    react.useEffect(() => {
         let timerId;
         if (startLongPress) {
             timerId = setTimeout(callback, ms);
@@ -686,7 +698,7 @@ function useLongPress(callback, ms = 100) {
 
 dayjs.extend(localeData);
 function useMonths(locale = 'en') {
-    return React.useMemo(() => {
+    return react.useMemo(() => {
         dayjs.extend(localeData).locale(locale);
         const names = dayjs.months();
         const shortNames = dayjs.monthsShort();
@@ -695,7 +707,7 @@ function useMonths(locale = 'en') {
 }
 
 function useOnSwipe(element, onSwipe, minSwipeDistance = 50) {
-    React.useEffect(() => {
+    react.useEffect(() => {
         if (!element.current)
             return;
         const elem = element.current;
@@ -736,7 +748,7 @@ function useOnSwipe(element, onSwipe, minSwipeDistance = 50) {
 }
 
 function useOutsideClick(ref, callback) {
-    React.useEffect(() => {
+    react.useEffect(() => {
         const handleClickOutside = (event) => {
             if ((ref === null || ref === void 0 ? void 0 : ref.current) && !ref.current.contains(event.target)) {
                 callback();
@@ -752,7 +764,7 @@ function useOutsideClick(ref, callback) {
 }
 
 function usePagination(currentIndex, totalPages) {
-    return React.useMemo(() => {
+    return react.useMemo(() => {
         const result = [];
         result.push(currentIndex);
         if (totalPages > 7 && currentIndex > 4) {
@@ -841,10 +853,10 @@ const sizeClasses = {
         },
     },
 };
-const BasicInput = React.forwardRef(function BasicInput(_a, ref) {
+const BasicInput = react.forwardRef(function BasicInput(_a, ref) {
     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 = React.useId();
-    const memoLabel = React.useMemo(() => label && (jsxRuntime.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 id = react.useId();
+    const memoLabel = react.useMemo(() => label && (jsxRuntime.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 handleClear = (event) => {
         var _a;
         event.stopPropagation();
@@ -878,30 +890,30 @@ const BasicInputExtension = ({ children, className, size, hasErrors, disabled, o
         'cursor-pointer': onClick,
     }, className), onClick: !disabled ? onClick : undefined, onPointerDown: (event) => event.stopPropagation(), children: children }));
 
-const CheckboxInput = React.forwardRef((props, ref) => (jsxRuntime.jsx(BasicInput, Object.assign({ type: "checkbox" }, props, { ref: ref }))));
+const CheckboxInput = react.forwardRef((props, ref) => (jsxRuntime.jsx(BasicInput, Object.assign({ type: "checkbox" }, props, { ref: ref }))));
 
-const EmailInput = React.forwardRef((props, ref) => (jsxRuntime.jsx(BasicInput, Object.assign({ type: "email" }, props, { suffixIcon: lucideReact.AtSignIcon, ref: ref }))));
+const EmailInput = react.forwardRef((props, ref) => (jsxRuntime.jsx(BasicInput, Object.assign({ type: "email" }, props, { suffixIcon: lucideReact.AtSignIcon, ref: ref }))));
 
-const NumberInput = React.forwardRef((_a, ref) => {
+const NumberInput = react.forwardRef((_a, ref) => {
     var { unit } = _a, props = __rest(_a, ["unit"]);
     return (jsxRuntime.jsx(BasicInput, Object.assign({ type: "number" }, props, { suffixIcon: unit
             ? ({ className }) => (jsxRuntime.jsx("div", { className: cn(className, 'flex w-min items-center'), onClick: props.onSuffixIconClick, children: unit }))
             : props.suffixIcon, ref: ref })));
 });
 
-const PasswordInput = React.forwardRef((props, ref) => {
-    const [type, setType] = React.useState('password');
+const PasswordInput = react.forwardRef((props, ref) => {
+    const [type, setType] = react.useState('password');
     const toggleType = () => setType((type) => (type === 'text' ? 'password' : 'text'));
     return (jsxRuntime.jsx(BasicInput, Object.assign({ type: type }, props, { suffixIcon: type === 'password' ? lucideReact.EyeIcon : lucideReact.EyeOffIcon, onSuffixIconClick: toggleType, ref: ref })));
 });
 
-const TextareaInput = React.forwardRef((props, ref) => (jsxRuntime.jsx(BasicInput, Object.assign({ type: "textarea" }, props, { ref: ref }))));
+const TextareaInput = react.forwardRef((props, ref) => (jsxRuntime.jsx(BasicInput, Object.assign({ type: "textarea" }, props, { ref: ref }))));
 
-const TextInput = React.forwardRef((props, ref) => (jsxRuntime.jsx(BasicInput, Object.assign({ type: "text" }, props, { ref: ref }))));
+const TextInput = react.forwardRef((props, ref) => (jsxRuntime.jsx(BasicInput, Object.assign({ type: "text" }, props, { ref: ref }))));
 
 const DaysView = ({ date, value, month, year, minDate, maxDate, locale, setNewDate, }) => {
     const days = useDays(locale);
-    const monthDays = React.useMemo(() => {
+    const monthDays = react.useMemo(() => {
         const daysInMonth = new Date(year, month + 1, 0).getDate();
         const daysInMonthArr = [];
         for (let i = 1; i <= daysInMonth; i++) {
@@ -909,7 +921,7 @@ const DaysView = ({ date, value, month, year, minDate, maxDate, locale, setNewDa
         }
         return daysInMonthArr;
     }, [month, year]);
-    const prefixDays = React.useMemo(() => {
+    const prefixDays = react.useMemo(() => {
         const firstDay = new Date(year, month);
         const dayOfWeek = firstDay.getDay();
         firstDay.setDate(firstDay.getDate() - 1);
@@ -920,7 +932,7 @@ const DaysView = ({ date, value, month, year, minDate, maxDate, locale, setNewDa
         }
         return prefixDays;
     }, [month, year]);
-    const suffixDays = React.useMemo(() => {
+    const suffixDays = react.useMemo(() => {
         const lastDay = new Date(year, month + 1);
         lastDay.setDate(lastDay.getDate() - 1);
         const dayOfWeek = lastDay.getDay();
@@ -930,7 +942,7 @@ const DaysView = ({ date, value, month, year, minDate, maxDate, locale, setNewDa
         }
         return suffixDays;
     }, [month, year]);
-    const setDayNumber = React.useCallback((newDay, newMonth = month, newYear = year) => () => {
+    const setDayNumber = react.useCallback((newDay, newMonth = month, newYear = year) => () => {
         const newDate = new Date(newYear, newMonth, newDay, date.getHours(), date.getMinutes());
         if (minDate) {
             const _minDate = new Date(minDate);
@@ -959,11 +971,11 @@ const DaysView = ({ date, value, month, year, minDate, maxDate, locale, setNewDa
     return (jsxRuntime.jsxs("div", { className: "gap-1 px-3 py-2", children: [jsxRuntime.jsx("div", { className: "grid grid-cols-7", children: days.map((day, index) => (jsxRuntime.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))) }), jsxRuntime.jsxs("div", { className: "grid grid-cols-7 gap-1", children: [prefixDays.map((dayNumber, index) => (jsxRuntime.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) => (jsxRuntime.jsx(Day, { value: value, day: dayNumber, month: month, year: year, minDate: minDate, maxDate: maxDate, primary: true, setDayNumber: setDayNumber }, `${dayNumber}-${index}`))), suffixDays.map((dayNumber, index) => (jsxRuntime.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}`)))] })] }));
 };
 const Day = ({ value, day, month, year, minDate, maxDate, primary, setDayNumber, }) => {
-    const dayDate = React.useMemo(() => new Date(year, month, day), [day, month, year]);
-    const isSelectable = React.useMemo(() => (!minDate || compareDates(dayDate, new Date(minDate), 'day') >= 0) &&
+    const dayDate = react.useMemo(() => new Date(year, month, day), [day, month, year]);
+    const isSelectable = react.useMemo(() => (!minDate || compareDates(dayDate, new Date(minDate), 'day') >= 0) &&
         (!maxDate || compareDates(dayDate, new Date(maxDate), 'day') <= 0), [minDate, dayDate, maxDate]);
-    const isSelected = React.useMemo(() => !!value && !compareDates(dayDate, new Date(value), 'day'), [dayDate, value]);
-    const isEqualToday = React.useMemo(() => !compareDates(dayDate, new Date(), 'day'), [dayDate]);
+    const isSelected = react.useMemo(() => !!value && !compareDates(dayDate, new Date(value), 'day'), [dayDate, value]);
+    const isEqualToday = react.useMemo(() => !compareDates(dayDate, new Date(), 'day'), [dayDate]);
     return (jsxRuntime.jsx("div", { className: cn('mx-auto flex h-8 w-8 items-center justify-center rounded-lg text-sm', {
             'border-2 border-blue-500': isEqualToday,
             'bg-blue-500 text-white': isSelected,
@@ -978,11 +990,11 @@ const MonthsView = ({ date, value, year, minDate, maxDate, locale, selectMonth,
     return (jsxRuntime.jsx("div", { className: "grid grid-cols-4 gap-1 px-3 py-2", children: months.map((month, index) => (jsxRuntime.jsx(Month, { date: date, value: value, shortName: month.shortName, month: index, year: year, minDate: minDate, maxDate: maxDate, selectMonth: selectMonth }, index))) }));
 };
 const Month = ({ date, value, shortName, month, year, minDate, maxDate, selectMonth, }) => {
-    const dayDate = React.useMemo(() => new Date(year, month, date.getDate(), date.getHours(), date.getMinutes()), [date, month, year]);
-    const isSelectable = React.useMemo(() => (!minDate || compareDates(dayDate, new Date(minDate), 'month') >= 0) &&
+    const dayDate = react.useMemo(() => new Date(year, month, date.getDate(), date.getHours(), date.getMinutes()), [date, month, year]);
+    const isSelectable = react.useMemo(() => (!minDate || compareDates(dayDate, new Date(minDate), 'month') >= 0) &&
         (!maxDate || compareDates(dayDate, new Date(maxDate), 'month') <= 0), [dayDate, minDate, maxDate]);
-    const isSelected = React.useMemo(() => !!value && !compareDates(dayDate, new Date(value), 'month'), [dayDate, value]);
-    const isEqualThisMonth = React.useMemo(() => !compareDates(dayDate, new Date(), 'month'), [dayDate]);
+    const isSelected = react.useMemo(() => !!value && !compareDates(dayDate, new Date(value), 'month'), [dayDate, value]);
+    const isEqualThisMonth = react.useMemo(() => !compareDates(dayDate, new Date(), 'month'), [dayDate]);
     return (jsxRuntime.jsx("div", { className: cn('mx-auto flex w-14 items-center justify-center rounded border py-3 text-sm', {
             'border-blue-500': isEqualThisMonth,
             'border-transparent': !isEqualThisMonth,
@@ -995,11 +1007,11 @@ const Month = ({ date, value, shortName, month, year, minDate, maxDate, selectMo
 
 const YearsView = ({ date, value, years, minDate, maxDate, selectYear, }) => (jsxRuntime.jsx("div", { className: "grid grid-cols-4 gap-1 px-3 py-2", children: years.map((year, index) => (jsxRuntime.jsx(Year, { date: date, value: value, year: year, minDate: minDate, maxDate: maxDate, selectYear: selectYear }, index))) }));
 const Year = ({ date, value, year, minDate, maxDate, selectYear }) => {
-    const dayDate = React.useMemo(() => new Date(year, date.getMonth(), date.getDate(), date.getHours(), date.getMinutes()), [date, year]);
-    const isSelectable = React.useMemo(() => (!minDate || compareDates(dayDate, new Date(minDate), 'year') >= 0) &&
+    const dayDate = react.useMemo(() => new Date(year, date.getMonth(), date.getDate(), date.getHours(), date.getMinutes()), [date, year]);
+    const isSelectable = react.useMemo(() => (!minDate || compareDates(dayDate, new Date(minDate), 'year') >= 0) &&
         (!maxDate || compareDates(dayDate, new Date(maxDate), 'year') <= 0), [dayDate, minDate, maxDate]);
-    const isSelected = React.useMemo(() => !!value && !compareDates(dayDate, new Date(value), 'year'), [dayDate, value]);
-    const isEqualThisYear = React.useMemo(() => !compareDates(dayDate, new Date(), 'year'), [dayDate]);
+    const isSelected = react.useMemo(() => !!value && !compareDates(dayDate, new Date(value), 'year'), [dayDate, value]);
+    const isEqualThisYear = react.useMemo(() => !compareDates(dayDate, new Date(), 'year'), [dayDate]);
     return (jsxRuntime.jsx("div", { className: cn('mx-auto flex w-14 items-center justify-center rounded border py-3 text-sm', {
             'border-blue-500': isEqualThisYear,
             'border-transparent': !isEqualThisYear,
@@ -1012,14 +1024,14 @@ const Year = ({ date, value, year, minDate, maxDate, selectYear }) => {
 
 const DateSelector = ({ date, value, minDate, maxDate, locale, calendarView, setCalendarView, setNewDate, }) => {
     const months = useMonths(locale);
-    const [month, setMonth] = React.useState(date.getMonth());
-    const [year, setYear] = React.useState(date.getFullYear());
-    const [yearOffset, setYearOffset] = React.useState(0);
-    React.useEffect(() => {
+    const [month, setMonth] = react.useState(date.getMonth());
+    const [year, setYear] = react.useState(date.getFullYear());
+    const [yearOffset, setYearOffset] = react.useState(0);
+    react.useEffect(() => {
         setMonth(date.getMonth());
         setYear(date.getFullYear());
     }, [date]);
-    const yearsRange = React.useMemo(() => {
+    const yearsRange = react.useMemo(() => {
         const yearsRangeArr = [];
         for (let i = year + yearOffset - 6; i < year + yearOffset + 6; i++) {
             yearsRangeArr.push(i);
@@ -1089,21 +1101,21 @@ const TimeSelector = ({ date, step = 1, minDate, maxDate, setNewDate, }) => {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("label", { className: "text-sm text-slate-700 dark:text-slate-300", children: "Time" }), jsxRuntime.jsxs("div", { className: "flex flex-grow justify-center gap-2", children: [jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center", children: [jsxRuntime.jsx(lucideReact.ChevronUpIcon, Object.assign({ className: "h-4 w-4 rounded hover:bg-slate-100 dark:hover:bg-slate-700", onClick: editDateField('hours', 1) }, increaseHours)), jsxRuntime.jsx(lucideReact.ChevronDownIcon, Object.assign({ className: "h-4 w-4 rounded hover:bg-slate-100 dark:hover:bg-slate-700", onClick: editDateField('hours', -1) }, decreaseHours))] }), jsxRuntime.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: [jsxRuntime.jsx("span", { className: "flex px-2", onWheel: onWheel('hours'), children: date.getHours().toString().padStart(2, '0') }), jsxRuntime.jsx("span", { children: ":" }), jsxRuntime.jsx("span", { className: "flex px-2", onWheel: onWheel('minutes'), children: date.getMinutes().toString().padStart(2, '0') })] }), jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center", children: [jsxRuntime.jsx(lucideReact.ChevronUpIcon, Object.assign({ className: "h-4 w-4 rounded hover:bg-slate-100 dark:hover:bg-slate-700", onClick: editDateField('minutes', step) }, increaseMinutes)), jsxRuntime.jsx(lucideReact.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 = React.forwardRef((_a, ref) => {
+const DateTimeInput = react.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 [isOpen, setIsOpen] = React.useState();
-    const [calendarView, setCalendarView] = React.useState('days');
-    const date = React.useMemo(() => {
+    const [isOpen, setIsOpen] = react.useState();
+    const [calendarView, setCalendarView] = react.useState('days');
+    const date = react.useMemo(() => {
         const result = value
             ? new Date(value)
             : new Date(Math.min(Math.max(new Date(minDate !== null && minDate !== void 0 ? minDate : Date.now()).getTime(), Date.now()), new Date(maxDate !== null && maxDate !== void 0 ? maxDate : Date.now()).getTime()));
         result.setMinutes(result.getMinutes() - ((result.getMinutes() + step) % step));
         return result;
     }, [step, maxDate, minDate, value]);
-    const displayDate = React.useMemo(() => value && getDisplayDate(date, displayFormat, displayLocale), [date, value, displayFormat, displayLocale]);
-    const calendarRef = React.useRef(null);
+    const displayDate = react.useMemo(() => value && getDisplayDate(date, displayFormat, displayLocale), [date, value, displayFormat, displayLocale]);
+    const calendarRef = react.useRef(null);
     useOutsideClick(calendarRef, () => setIsOpen(false));
-    React.useEffect(() => {
+    react.useEffect(() => {
         if (!isOpen) {
             setCalendarView('days');
         }
@@ -1145,7 +1157,7 @@ const DateTimeInput = React.forwardRef((_a, ref) => {
     return (jsxRuntime.jsxs("div", { className: cn('relative w-full', className), ref: ref, children: [jsxRuntime.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')) ? lucideReact.CalendarIcon : lucideReact.ClockIcon, onSuffixIconClick: handleOnClick })), isOpen && (jsxRuntime.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')) && (jsxRuntime.jsx(DateSelector, { date: date, value: value, minDate: minDate, maxDate: maxDate, locale: displayLocale, calendarView: calendarView, setCalendarView: setCalendarView, setNewDate: setNewDate })), calendarView === 'days' && (jsxRuntime.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')) && (jsxRuntime.jsx(TimeSelector, { date: date, step: step, minDate: minDate, maxDate: maxDate, setNewDate: setNewDate })), jsxRuntime.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 = React.forwardRef((_a, ref) => {
+const ListContent = react.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
     return (jsxRuntime.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)));
 });
@@ -1153,20 +1165,20 @@ const labelSizeClasses = {
     small: 'p-1 text-sm',
     medium: 'px-2 py-1.5',
 };
-const ListItem = React.forwardRef((_a, ref) => {
+const ListItem = react.forwardRef((_a, ref) => {
     var { className, size = 'medium', inset } = _a, props = __rest(_a, ["className", "size", "inset"]);
     return (jsxRuntime.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 = React.forwardRef((_a, ref) => {
+const ListLabel = react.forwardRef((_a, ref) => {
     var { className, size = 'medium', inset } = _a, props = __rest(_a, ["className", "size", "inset"]);
     return (jsxRuntime.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 = React.forwardRef((_a, ref) => {
+const ListIndicator = react.forwardRef((_a, ref) => {
     var { className, icon: Icon, iconClassName } = _a, props = __rest(_a, ["className", "icon", "iconClassName"]);
     return (jsxRuntime.jsx(Flex, Object.assign({ className: cn('absolute left-2 h-3.5 w-3.5', className), align: "center", justify: "center", ref: ref }, props, { children: jsxRuntime.jsx(Icon, { className: iconClassName }) })));
 });
-const ListIcon = React.forwardRef(({ className, icon: Icon }, ref) => jsxRuntime.jsx(Icon, { className: cn('h-4 w-4', className), ref: ref }));
-const ListSeparator = React.forwardRef((_a, ref) => {
+const ListIcon = react.forwardRef(({ className, icon: Icon }, ref) => jsxRuntime.jsx(Icon, { className: cn('h-4 w-4', className), ref: ref }));
+const ListSeparator = react.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
     return (jsxRuntime.jsx(Block, Object.assign({ className: cn('-mx-1 my-1 h-px bg-slate-100 dark:bg-slate-700', className), ref: ref }, props)));
 });
@@ -1183,42 +1195,42 @@ const DropdownMenuGroup = DropdownMenuPrimitive__namespace.Group;
 const DropdownMenuPortal = DropdownMenuPrimitive__namespace.Portal;
 const DropdownMenuSub = DropdownMenuPrimitive__namespace.Sub;
 const DropdownMenuRadioGroup = DropdownMenuPrimitive__namespace.RadioGroup;
-const DropdownMenuSubTrigger = React.forwardRef((_a, ref) => {
+const DropdownMenuSubTrigger = react.forwardRef((_a, ref) => {
     var { className, inset, children } = _a, props = __rest(_a, ["className", "inset", "children"]);
     return (jsxRuntime.jsx(DropdownMenuPrimitive__namespace.SubTrigger, Object.assign({ ref: ref }, props, { asChild: true, children: jsxRuntime.jsxs(List.Item, { className: className, inset: inset, children: [children, jsxRuntime.jsx(lucideReact.ChevronRightIcon, { className: "ml-auto h-4 w-4" })] }) })));
 });
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive__namespace.SubTrigger.displayName;
-const DropdownMenuSubContent = React.forwardRef((_a, ref) => {
+const DropdownMenuSubContent = react.forwardRef((_a, ref) => {
     var { className, children } = _a, props = __rest(_a, ["className", "children"]);
     return (jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Portal, { children: jsxRuntime.jsx(DropdownMenuPrimitive__namespace.SubContent, Object.assign({ ref: ref }, props, { asChild: true, children: jsxRuntime.jsx(List, { className: className, children: children }) })) }));
 });
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive__namespace.SubContent.displayName;
-const DropdownMenuContent = React.forwardRef((_a, ref) => {
+const DropdownMenuContent = react.forwardRef((_a, ref) => {
     var { className, children, sideOffset = 4 } = _a, props = __rest(_a, ["className", "children", "sideOffset"]);
     return (jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Portal, { children: jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Content, Object.assign({ ref: ref, sideOffset: sideOffset }, props, { asChild: true, children: jsxRuntime.jsx(List, { className: className, children: children }) })) }));
 });
 DropdownMenuContent.displayName = DropdownMenuPrimitive__namespace.Content.displayName;
-const DropdownMenuItem = React.forwardRef((_a, ref) => {
+const DropdownMenuItem = react.forwardRef((_a, ref) => {
     var { className, inset, children } = _a, props = __rest(_a, ["className", "inset", "children"]);
     return (jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Item, Object.assign({ ref: ref }, props, { asChild: true, children: jsxRuntime.jsx(List.Item, { inset: inset, className: className, children: children }) })));
 });
 DropdownMenuItem.displayName = DropdownMenuPrimitive__namespace.Item.displayName;
-const DropdownMenuCheckboxItem = React.forwardRef((_a, ref) => {
+const DropdownMenuCheckboxItem = react.forwardRef((_a, ref) => {
     var { className, children } = _a, props = __rest(_a, ["className", "children"]);
     return (jsxRuntime.jsx(DropdownMenuPrimitive__namespace.CheckboxItem, Object.assign({ ref: ref }, props, { asChild: true, children: jsxRuntime.jsxs(List.Item, { inset: true, className: className, children: [jsxRuntime.jsx(DropdownMenuPrimitive__namespace.ItemIndicator, { asChild: true, children: jsxRuntime.jsx(List.Indicator, { icon: lucideReact.CheckIcon, iconClassName: "h-4 w-4" }) }), children] }) })));
 });
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive__namespace.CheckboxItem.displayName;
-const DropdownMenuRadioItem = React.forwardRef((_a, ref) => {
+const DropdownMenuRadioItem = react.forwardRef((_a, ref) => {
     var { className, children } = _a, props = __rest(_a, ["className", "children"]);
     return (jsxRuntime.jsx(DropdownMenuPrimitive__namespace.RadioItem, Object.assign({ ref: ref }, props, { asChild: true, children: jsxRuntime.jsxs(List.Item, { inset: true, className: className, children: [jsxRuntime.jsx(DropdownMenuPrimitive__namespace.ItemIndicator, { asChild: true, children: jsxRuntime.jsx(List.Indicator, { icon: lucideReact.CircleIcon, iconClassName: "h-2 w-2 fill-current" }) }), children] }) })));
 });
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive__namespace.RadioItem.displayName;
-const DropdownMenuLabel = React.forwardRef((_a, ref) => {
+const DropdownMenuLabel = react.forwardRef((_a, ref) => {
     var { className, inset, children } = _a, props = __rest(_a, ["className", "inset", "children"]);
     return (jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Label, Object.assign({ ref: ref }, props, { asChild: true, children: jsxRuntime.jsx(List.Label, { className: className, inset: inset, children: children }) })));
 });
 DropdownMenuLabel.displayName = DropdownMenuPrimitive__namespace.Label.displayName;
-const DropdownMenuSeparator = React.forwardRef((_a, ref) => {
+const DropdownMenuSeparator = react.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
     return (jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Separator, Object.assign({ ref: ref }, props, { asChild: true, children: jsxRuntime.jsx(List.Separator, { className: className }) })));
 });
@@ -1246,12 +1258,12 @@ const DropdownMenu = Object.assign(DropdownMenuPrimitive__namespace.Root, {
     RadioGroup: DropdownMenuRadioGroup,
 });
 
-const SelectInput = React.forwardRef((_a, ref) => {
+const SelectInput = react.forwardRef((_a, ref) => {
     var { className, items, renderItem = (item) => item.label, value, multiple, clearable, allowAddition, onNewItemAdded, search, searchPredicate = (item, searchValue) => item.label.toLowerCase().includes(searchValue.toLowerCase()), selectPredicate = (a, b) => a === b, onChange, readOnly, parentRef } = _a, props = __rest(_a, ["className", "items", "renderItem", "value", "multiple", "clearable", "allowAddition", "onNewItemAdded", "search", "searchPredicate", "selectPredicate", "onChange", "readOnly", "parentRef"]);
-    const [open, setOpen] = React.useState(false);
-    const [searchValue, setSearchValue] = React.useState('');
-    const pureItems = React.useMemo(() => items.flatMap((item) => (item.group ? item.items : [item])), [items]);
-    const selectedItems = React.useMemo(() => value
+    const [open, setOpen] = react.useState(false);
+    const [searchValue, setSearchValue] = react.useState('');
+    const pureItems = react.useMemo(() => items.flatMap((item) => (item.group ? item.items : [item])), [items]);
+    const selectedItems = react.useMemo(() => value
         ? !multiple
             ? pureItems.find((item) => selectPredicate(item.value, value))
                 ? [pureItems.find((item) => selectPredicate(item.value, value))]
@@ -1262,7 +1274,7 @@ const SelectInput = React.forwardRef((_a, ref) => {
                     .filter(Boolean)
                 : []
         : [], [multiple, pureItems, selectPredicate, value]);
-    const filteredItems = React.useMemo(() => !search || !searchValue
+    const filteredItems = react.useMemo(() => !search || !searchValue
         ? items
         : items.flatMap((item) => item.group
             ? item.items.some((subItem) => subItem.label.toLowerCase().includes(searchValue.toLowerCase()))
@@ -1273,13 +1285,13 @@ const SelectInput = React.forwardRef((_a, ref) => {
             : item.label.toLowerCase().includes(searchValue.toLowerCase())
                 ? [item]
                 : []), [items, search, searchValue]);
-    const text = React.useMemo(() => selectedItems.length
+    const text = react.useMemo(() => selectedItems.length
         ? !multiple
             ? selectedItems[0].label
             : selectedItems.map((item) => item.label).join(', ')
         : undefined, [multiple, selectedItems]);
-    const selectedMap = React.useMemo(() => selectedItems.reduce((prev, curr) => (Object.assign(Object.assign({}, prev), { [curr.id]: curr.value })), {}), [selectedItems]);
-    const handleOnSelect = React.useCallback((id) => {
+    const selectedMap = react.useMemo(() => selectedItems.reduce((prev, curr) => (Object.assign(Object.assign({}, prev), { [curr.id]: curr.value })), {}), [selectedItems]);
+    const handleOnSelect = react.useCallback((id) => {
         var _a, _b, _c;
         !multiple && setOpen(false);
         if (!multiple) {
@@ -1315,7 +1327,7 @@ const SelectInput = React.forwardRef((_a, ref) => {
     };
     const GroupComponent = multiple ? DropdownMenu.Group : DropdownMenu.RadioGroup;
     const ItemComponent = multiple ? DropdownMenu.CheckboxItem : DropdownMenu.RadioItem;
-    const RenderOption = React.useCallback((option) => {
+    const RenderOption = react.useCallback((option) => {
         return (jsxRuntime.jsx(ItemComponent, { className: cn('w-full cursor-pointer hover:bg-slate-200 dark:hover:bg-slate-700', {
                 'bg-slate-200 dark:bg-slate-700': selectedMap[option.id],
             }), value: String(option.id), checked: !!selectedMap[option.id], onSelect: (event) => {
@@ -1327,9 +1339,9 @@ const SelectInput = React.forwardRef((_a, ref) => {
                         (allowAddition && searchValue ? (jsxRuntime.jsxs("button", { className: "rounded bg-slate-100 text-center hover:bg-slate-200 dark:bg-slate-900/30 dark:hover:bg-slate-700/30", onClick: handleOnAddItemClicked, children: ["Add '", searchValue, "'"] })) : (jsxRuntime.jsx("div", { className: "text-center text-slate-500", children: "No items." }))), jsxRuntime.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 ? (jsxRuntime.jsxs(Flex, { className: "gap-1", direction: "column", fullWidth: true, children: [jsxRuntime.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) => (jsxRuntime.jsx(RenderOption, Object.assign({}, subItem), subItem.id))), index < filteredItems.length - 1 && (jsxRuntime.jsx("div", { className: "mb-1 h-px w-full bg-slate-200 dark:bg-slate-700" }))] }, item.id)) : (jsxRuntime.jsx(RenderOption, Object.assign({}, item), item.id))) })] })] }));
 });
 
-const FileInput = React.forwardRef((_a, ref) => {
+const FileInput = react.forwardRef((_a, ref) => {
     var { className, value, onChange, onFileChange, accept } = _a, props = __rest(_a, ["className", "value", "onChange", "onFileChange", "accept"]);
-    const fileInputRef = React.useRef(null);
+    const fileInputRef = react.useRef(null);
     const handleFileChange = (_a) => __awaiter(void 0, [_a], void 0, function* ({ target: { files } }) {
         console.log(files);
         if (files && files.length > 0) {
@@ -1345,7 +1357,7 @@ const FileInput = React.forwardRef((_a, ref) => {
 const FormGroup = ({ className, label, children }) => (jsxRuntime.jsxs(Flex, { className: cn('relative !gap-4 rounded-lg border p-4 dark:border-slate-700', className), direction: "column", fullWidth: true, children: [jsxRuntime.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 React.forwardRef((props, ref) => {
+    return react.forwardRef((props, ref) => {
         const _a = props, { name, pattern, validate } = _a, restProps = __rest(_a, ["name", "pattern", "validate"]);
         const { control, formState } = reactHookForm.useFormContext();
         return (jsxRuntime.jsx(reactHookForm.Controller, { name: name, control: control, rules: {
@@ -1375,7 +1387,7 @@ const FormInputs = {
     File: withForm(FileInput),
 };
 
-const HintRoot = React.forwardRef(({ children }, ref) => (jsxRuntime.jsx(Block, { className: "relative", ref: ref, children: children })));
+const HintRoot = react.forwardRef(({ children }, ref) => (jsxRuntime.jsx(Block, { className: "relative", ref: ref, children: children })));
 HintRoot.displayName = 'HintRoot';
 const dotSizeClassNames = {
     small: {
@@ -1417,7 +1429,7 @@ const colorClassNames = {
     pink: 'bg-pink-500 dark:bg-pink-600',
     rose: 'bg-rose-500 dark:bg-rose-600',
 };
-const HintDot = React.forwardRef(({ size = 'medium', placement = 'top-right', color = 'green', ping }, ref) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Block, { className: cn('absolute rounded-full', colorClassNames[color], dotSizeClassNames[size].base, {
+const HintDot = react.forwardRef(({ size = 'medium', placement = 'top-right', color = 'green', ping }, ref) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.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',
@@ -1435,7 +1447,7 @@ const badgeSizeClassNames = {
     bottom: 'bottom-0 translate-y-1/2',
     left: 'left-2 -translate-x-full',
 };
-const HintBadge = React.forwardRef((_a, ref) => {
+const HintBadge = react.forwardRef((_a, ref) => {
     var { className, size = 'small', placement = 'top-right' } = _a, props = __rest(_a, ["className", "size", "placement"]);
     return (jsxRuntime.jsx(Badge, Object.assign({ className: cn('absolute px-1', size === 'small' ? 'h-5' : 'h-6', {
             [`${badgeSizeClassNames.top} ${badgeSizeClassNames.left}`]: placement === 'top-left',
@@ -1448,9 +1460,9 @@ HintBadge.displayName = 'HintBadge';
 const Hint = Object.assign(HintRoot, { Dot: HintDot, Badge: HintBadge });
 
 const Pagination = ({ disabled, pageSize = 10, currentPage, totalItems, setCurrentPage, }) => {
-    const totalPages = React.useMemo(() => Math.ceil(totalItems / pageSize), [pageSize, totalItems]);
+    const totalPages = react.useMemo(() => Math.ceil(totalItems / pageSize), [pageSize, totalItems]);
     const pagination = usePagination(currentPage + 1, totalPages);
-    React.useEffect(() => {
+    react.useEffect(() => {
         setCurrentPage((page) => Math.min(page, Math.max(0, totalPages - 1)));
     }, [setCurrentPage, totalPages]);
     return (jsxRuntime.jsx(Flex, { justify: "end", children: jsxRuntime.jsxs(Flex, { className: "h-10 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: [jsxRuntime.jsx(PaginationItem, { title: "First page", onClick: () => setCurrentPage(0), disabled: !currentPage || disabled, children: jsxRuntime.jsx(lucideReact.ChevronsLeftIcon, { className: "h-5 w-5" }) }), jsxRuntime.jsx(PaginationItem, { title: "Previous page", onClick: () => currentPage && setCurrentPage(currentPage - 1), disabled: !currentPage || disabled, children: jsxRuntime.jsx(lucideReact.ChevronLeftIcon, { className: "h-5 w-5" }) }), pagination.map((page, index) => (jsxRuntime.jsx(PaginationItem, { active: page !== '...' && page - 1 === currentPage, title: page !== '...' ? `Page ${page}` : undefined, onClick: page !== '...' ? () => setCurrentPage(page - 1) : undefined, disabled: page === '...' || disabled, children: page }, index))), jsxRuntime.jsx(PaginationItem, { title: "Next page", onClick: () => currentPage + 1 < totalPages && setCurrentPage(currentPage + 1), disabled: currentPage + 1 === totalPages || disabled, children: jsxRuntime.jsx(lucideReact.ChevronRightIcon, { className: "h-5 w-5" }) }), jsxRuntime.jsx(PaginationItem, { title: "Last page", onClick: () => setCurrentPage(Math.floor(totalItems && !(totalItems % pageSize)
@@ -1514,11 +1526,11 @@ function defaultRender(item, field) {
 }
 function DataTable({ className, columns, rows, sorting, pagination, actions = [], isLoading, rowExtraContent, noDataMessage, onRowClick, rowClassName, }) {
     var _a;
-    const footerRef = React.useRef(null);
-    const [expandedRows, setExpandedRows] = React.useState({});
-    const allRowsExpanded = React.useMemo(() => rowExtraContent ? rows.every((row) => expandedRows[rowExtraContent.idGetter(row)]) : false, [expandedRows, rowExtraContent, rows]);
-    const _columns = React.useMemo(() => (Array.isArray(columns) ? columns : Object.values(columns)).filter((column) => !column.hide), [columns]);
-    const columnsLength = React.useMemo(() => (rowExtraContent ? 1 : 0) + _columns.length + Math.min(1, actions.length), [_columns.length, actions.length, rowExtraContent]);
+    const footerRef = react.useRef(null);
+    const [expandedRows, setExpandedRows] = react.useState({});
+    const allRowsExpanded = react.useMemo(() => rowExtraContent ? rows.every((row) => expandedRows[rowExtraContent.idGetter(row)]) : false, [expandedRows, rowExtraContent, rows]);
+    const _columns = react.useMemo(() => (Array.isArray(columns) ? columns : Object.values(columns)).filter((column) => !column.hide), [columns]);
+    const columnsLength = react.useMemo(() => (rowExtraContent ? 1 : 0) + _columns.length + Math.min(1, actions.length), [_columns.length, actions.length, rowExtraContent]);
     const handleSorting = (field, comparator) => () => {
         if (!sorting)
             return;
@@ -1598,18 +1610,19 @@ const ExpandButton = ({ folded, foldComponent, unfoldComponent, onClick, }) => {
     return (jsxRuntime.jsx(Icon, { className: "h-6 w-6 cursor-pointer rounded p-1 hover:bg-slate-300 hover:dark:bg-slate-600", onClick: onClick }));
 };
 
-const $Dialog = DialogPrimitive__namespace.Root;
+const $Dialog = (props) => (jsxRuntime.jsx(DialogPrimitive__namespace.Root, Object.assign({}, props)));
+$Dialog.displayName = DialogPrimitive__namespace.Root.displayName;
 const DialogTrigger = DialogPrimitive__namespace.Trigger;
 const DialogPortal = DialogPrimitive__namespace.Portal;
 const DialogClose = DialogPrimitive__namespace.Close;
-const DialogOverlay = React.forwardRef((_a, ref) => {
+const DialogOverlay = react.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsxRuntime.jsx(DialogPrimitive__namespace.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 backdrop-blur-sm', className) }, props)));
+    return (jsxRuntime.jsx(DialogPrimitive__namespace.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)));
 });
 DialogOverlay.displayName = DialogPrimitive__namespace.Overlay.displayName;
-const DialogContent = React.forwardRef((_a, ref) => {
+const DialogContent = react.forwardRef((_a, ref) => {
     var { className, fullScreen, children } = _a, props = __rest(_a, ["className", "fullScreen", "children"]);
-    return (jsxRuntime.jsxs(DialogPortal, { children: [jsxRuntime.jsx(DialogOverlay, {}), jsxRuntime.jsxs(DialogPrimitive__namespace.Content, 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 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 w-full max-w-lg translate-x-[-50%] translate-y-[-50%] flex-col gap-3 rounded-lg border bg-white p-3 shadow-md duration-200 xl:gap-4 xl:p-4 dark:border-slate-700 dark:bg-slate-900 dark:text-white', className, fullScreen && 'h-full max-h-none w-full max-w-none rounded-none') }, props, { children: [children, jsxRuntime.jsx(DialogPrimitive__namespace.Close, { className: "!absolute right-1 top-1 opacity-70 ring-offset-white transition-opacity hover:opacity-100 disabled:pointer-events-none xl:right-2 xl:top-2", asChild: true, children: jsxRuntime.jsx(Button, { prefixIcon: lucideReact.XIcon, size: "small", variant: "text" }) })] }))] }));
+    return (jsxRuntime.jsxs(DialogPortal, { children: [jsxRuntime.jsx(DialogOverlay, {}), jsxRuntime.jsxs(DialogPrimitive__namespace.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, jsxRuntime.jsx(DialogPrimitive__namespace.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: jsxRuntime.jsx(Button, { prefixIcon: lucideReact.XIcon, size: "small", variant: "text" }) }), jsxRuntime.jsx(DialogPrimitive__namespace.Description, { className: "hidden" })] }))] }));
 });
 DialogContent.displayName = DialogPrimitive__namespace.Content.displayName;
 const DialogHeader = (_a) => {
@@ -1622,14 +1635,14 @@ const DialogFooter = (_a) => {
     return (jsxRuntime.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 = React.forwardRef((_a, ref) => {
+const DialogTitle = react.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsxRuntime.jsx(DialogPrimitive__namespace.Title, Object.assign({ ref: ref, className: cn('text-lg font-semibold leading-none tracking-tight', className) }, props)));
+    return (jsxRuntime.jsx(DialogPrimitive__namespace.Title, Object.assign({ ref: ref, className: cn('text-foreground text-lg font-semibold', className) }, props)));
 });
 DialogTitle.displayName = DialogPrimitive__namespace.Title.displayName;
-const DialogDescription = React.forwardRef((_a, ref) => {
+const DialogDescription = react.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsxRuntime.jsx(DialogPrimitive__namespace.Description, Object.assign({ ref: ref, className: cn('text-sm text-slate-600 dark:text-slate-400', className) }, props)));
+    return (jsxRuntime.jsx(DialogPrimitive__namespace.Description, Object.assign({ ref: ref, className: cn('text-muted-foreground text-sm', className) }, props)));
 });
 DialogDescription.displayName = DialogPrimitive__namespace.Description.displayName;
 const Dialog = Object.assign($Dialog, {
@@ -1644,79 +1657,19 @@ const Dialog = Object.assign($Dialog, {
     Description: DialogDescription,
 });
 
-const ConfirmDialog = ({ open, title, children, yesLabel, noLabel, onConfirm, onClose, }) => (jsxRuntime.jsx(Dialog, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxRuntime.jsxs(Dialog.Content, { onPointerDownOutside: (event) => event.preventDefault(), children: [jsxRuntime.jsx(Dialog.Header, { children: jsxRuntime.jsx(Dialog.Title, { children: title }) }), children, jsxRuntime.jsxs(Dialog.Footer, { children: [jsxRuntime.jsx(Dialog.Close, { asChild: true, children: jsxRuntime.jsx(Button, { color: "red", children: noLabel !== null && noLabel !== void 0 ? noLabel : 'No' }) }), jsxRuntime.jsx(Dialog.Close, { asChild: true, children: jsxRuntime.jsx(Button, { color: "green", onClick: onConfirm, children: yesLabel !== null && yesLabel !== void 0 ? yesLabel : 'Yes' }) })] })] }) }));
-
-const FormDialog = ({ className, open, title, form, children, submitLabel = 'Submit', cancelLabel = 'Cancel', extraAction, onSubmit, onInvalid, onClose, }) => {
-    const id = React.useId();
-    const handleSubmit = (data, event) => __awaiter(void 0, void 0, void 0, function* () {
-        try {
-            yield onSubmit(data, event);
-        }
-        catch (_a) {
-            // do nothering
-        }
-    });
-    return (jsxRuntime.jsx(Dialog, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxRuntime.jsxs(Dialog.Content, { className: className, onPointerDownOutside: (event) => event.preventDefault(), children: [jsxRuntime.jsx(Dialog.Header, { children: jsxRuntime.jsx(Dialog.Title, { children: title }) }), jsxRuntime.jsx(reactHookForm.FormProvider, Object.assign({}, form, { children: jsxRuntime.jsx("form", { id: `form-${id}`, onSubmit: form.handleSubmit(handleSubmit, onInvalid), children: children }) })), jsxRuntime.jsxs(Dialog.Footer, { className: "w-full sm:justify-between", children: [extraAction, jsxRuntime.jsxs(Dialog.Footer, { className: "ml-auto", children: [jsxRuntime.jsx(Dialog.Close, { asChild: true, children: jsxRuntime.jsx(Button, { color: "red", children: cancelLabel }) }), jsxRuntime.jsx(Button, { color: "green", type: "submit", form: `form-${id}`, disabled: form.formState.isSubmitting, children: submitLabel })] })] })] }) }));
-};
-
-function ListSorter({ className, items, idResolver, renderer, onChange, }) {
-    const adaptedItems = React.useMemo(() => items.map((value, index) => ({ id: idResolver(value, index), value })), [idResolver, items]);
-    const sensors = core.useSensors(core.useSensor(core.PointerSensor), core.useSensor(core.KeyboardSensor, { coordinateGetter: sortable.sortableKeyboardCoordinates }));
-    const onDragEnd = ({ active, over }) => {
-        if (!over || active.id === over.id)
-            return;
-        const sortedItems = structuredClone(adaptedItems);
-        const oldIndex = sortedItems.findIndex((item) => item.id === active.id);
-        const newIndex = sortedItems.findIndex((item) => item.id === over.id);
-        const [removed] = sortedItems.splice(oldIndex, 1);
-        sortedItems.splice(newIndex, 0, removed);
-        for (const [index, { value }] of Object.entries(sortedItems)) {
-            if (typeof value === 'object') {
-                value.rank = +index;
-            }
-        }
-        onChange(sortedItems.map(({ value }) => value));
-    };
-    return (jsxRuntime.jsx(core.DndContext, { sensors: sensors, modifiers: [modifiers.restrictToFirstScrollableAncestor], collisionDetection: core.closestCenter, onDragEnd: onDragEnd, children: jsxRuntime.jsx(sortable.SortableContext, { items: adaptedItems, strategy: sortable.verticalListSortingStrategy, children: jsxRuntime.jsx("div", { className: className, children: adaptedItems.map((item, index) => (jsxRuntime.jsx(SortableItem, { item: item, index: index, renderer: renderer }, item.id))) }) }) }));
-}
-function SortableItem({ item, index, renderer, }) {
-    const { attributes, listeners, setNodeRef, transform, transition } = sortable.useSortable({ id: item.id });
-    const style = { transform: utilities.CSS.Transform.toString(transform), transition };
-    return (jsxRuntime.jsx("div", Object.assign({ ref: setNodeRef, style: style }, attributes, { children: renderer(item.value, index, listeners) })));
-}
-
-function ListSorterDialog({ className, open, title, items, idResolver, renderer, cancelLabel, submitLabel, onSubmit, onClose, }) {
-    const [sortedItems, setSortedItems] = React.useState(structuredClone(items));
-    React.useEffect(() => {
-        return () => {
-            setSortedItems(structuredClone(items));
-        };
-    }, [items]);
-    const preFinish = () => onSubmit(sortedItems);
-    const customRenderer = (item, index, listeners) => (jsxRuntime.jsxs(Flex, { align: "center", className: "gap-4 p-4 focus:outline-none dark:bg-slate-900 hover:dark:bg-slate-800", children: [jsxRuntime.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: jsxRuntime.jsx(lucideReact.ArrowUpDownIcon, { className: "h-5 w-5" }) })), renderer(item, index, listeners)] }));
-    return (jsxRuntime.jsx(Dialog, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxRuntime.jsxs(Dialog.Content, { className: cn('max-h-[90dvh]', className), onPointerDownOutside: (event) => event.preventDefault(), children: [jsxRuntime.jsx(Dialog.Header, { children: title }), jsxRuntime.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 }), jsxRuntime.jsxs(Dialog.Footer, { children: [jsxRuntime.jsx(Dialog.Close, { asChild: true, children: jsxRuntime.jsx(Button, { color: "red", children: cancelLabel !== null && cancelLabel !== void 0 ? cancelLabel : 'Cancel' }) }), jsxRuntime.jsx(Button, { color: "green", onClick: preFinish, children: submitLabel !== null && submitLabel !== void 0 ? submitLabel : 'Submit' })] })] }) }));
-}
-
-const PdfViewerDialog = ({ open, title, url, data, onClose }) => {
-    return !(url || data) ? null : (jsxRuntime.jsx(Dialog, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxRuntime.jsxs(Dialog.Content, { className: "h-[90dvh] max-w-[90dvw]", children: [jsxRuntime.jsx(Dialog.Header, { children: title }), (url || data) && (jsxRuntime.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 = React.forwardRef((_a, ref) => {
-    var { className, orientation = 'horizontal', decorative = true } = _a, props = __rest(_a, ["className", "orientation", "decorative"]);
-    return (jsxRuntime.jsx(SeparatorPrimitive__namespace.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)));
-});
-Separator.displayName = SeparatorPrimitive__namespace.Root.displayName;
+const ConfirmDialog = ({ open, title, children, yesLabel, noLabel, onConfirm, onClose, }) => (jsxRuntime.jsx(Dialog, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxRuntime.jsxs(Dialog.Content, { children: [jsxRuntime.jsx(Dialog.Header, { children: jsxRuntime.jsx(Dialog.Title, { children: title }) }), children, jsxRuntime.jsxs(Dialog.Footer, { children: [jsxRuntime.jsx(Dialog.Close, { asChild: true, children: jsxRuntime.jsx(Button, { color: "red", children: noLabel !== null && noLabel !== void 0 ? noLabel : 'No' }) }), jsxRuntime.jsx(Dialog.Close, { asChild: true, children: jsxRuntime.jsx(Button, { color: "green", onClick: onConfirm, children: yesLabel !== null && yesLabel !== void 0 ? yesLabel : 'Yes' }) })] })] }) }));
 
-const $Sheet = DialogPrimitive__namespace.Root;
+const $Sheet = (props) => (jsxRuntime.jsx(DialogPrimitive__namespace.Root, Object.assign({}, props)));
+$Sheet.displayName = DialogPrimitive__namespace.Root.displayName;
 const SheetTrigger = DialogPrimitive__namespace.Trigger;
 const SheetClose = DialogPrimitive__namespace.Close;
 const SheetPortal = DialogPrimitive__namespace.Portal;
-const SheetOverlay = React__namespace.forwardRef((_a, ref) => {
+const SheetOverlay = react.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
     return (jsxRuntime.jsx(DialogPrimitive__namespace.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 })));
 });
 SheetOverlay.displayName = DialogPrimitive__namespace.Overlay.displayName;
-const sheetVariants = classVarianceAuthority.cva('fixed z-50 gap-4 bg-background p-6 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', {
+const sheetVariants = classVarianceAuthority.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: {
         side: {
             top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
@@ -1729,9 +1682,9 @@ const sheetVariants = classVarianceAuthority.cva('fixed z-50 gap-4 bg-background
         side: 'right',
     },
 });
-const SheetContent = React__namespace.forwardRef((_a, ref) => {
+const SheetContent = react.forwardRef((_a, ref) => {
     var { side = 'right', className, children } = _a, props = __rest(_a, ["side", "className", "children"]);
-    return (jsxRuntime.jsxs(SheetPortal, { children: [jsxRuntime.jsx(SheetOverlay, {}), jsxRuntime.jsxs(DialogPrimitive__namespace.Content, Object.assign({ ref: ref, className: cn(sheetVariants({ side }), className) }, props, { children: [children, jsxRuntime.jsxs(DialogPrimitive__namespace.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none", children: [jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }), jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })] })] }))] }));
+    return (jsxRuntime.jsxs(SheetPortal, { children: [jsxRuntime.jsx(SheetOverlay, {}), jsxRuntime.jsxs(DialogPrimitive__namespace.Content, Object.assign({ ref: ref, className: cn(sheetVariants({ side }), className) }, props, { children: [children, jsxRuntime.jsx(DialogPrimitive__namespace.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: jsxRuntime.jsx(Button, { prefixIcon: lucideReact.XIcon, size: "small", variant: "text" }) }), jsxRuntime.jsx(DialogPrimitive__namespace.Description, { className: "hidden" })] }))] }));
 });
 SheetContent.displayName = DialogPrimitive__namespace.Content.displayName;
 const SheetHeader = (_a) => {
@@ -1744,12 +1697,12 @@ const SheetFooter = (_a) => {
     return (jsxRuntime.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 = React__namespace.forwardRef((_a, ref) => {
+const SheetTitle = react.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
     return (jsxRuntime.jsx(DialogPrimitive__namespace.Title, Object.assign({ ref: ref, className: cn('text-foreground text-lg font-semibold', className) }, props)));
 });
 SheetTitle.displayName = DialogPrimitive__namespace.Title.displayName;
-const SheetDescription = React__namespace.forwardRef((_a, ref) => {
+const SheetDescription = react.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
     return (jsxRuntime.jsx(DialogPrimitive__namespace.Description, Object.assign({ ref: ref, className: cn('text-muted-foreground text-sm', className) }, props)));
 });
@@ -1766,6 +1719,67 @@ 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 id = react.useId();
+    const handleSubmit = (data, event) => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            yield onSubmit(data, event);
+        }
+        catch (_a) {
+            // do nothering
+        }
+    });
+    return (jsxRuntime.jsx(As, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxRuntime.jsxs(As.Content, { className: className, children: [jsxRuntime.jsx(As.Header, { children: jsxRuntime.jsx(As.Title, { children: title }) }), jsxRuntime.jsx(reactHookForm.FormProvider, Object.assign({}, form, { children: jsxRuntime.jsx("form", { id: `form-${id}`, className: cn('flex h-full w-full flex-col gap-3 overflow-auto', formClassName), onSubmit: form.handleSubmit(handleSubmit, onInvalid), children: children }) })), jsxRuntime.jsxs(As.Footer, { className: "w-full sm:justify-between", children: [extraAction, jsxRuntime.jsxs(As.Footer, { className: "ml-auto", children: [jsxRuntime.jsx(As.Close, { asChild: true, children: jsxRuntime.jsx(Button, { color: "red", children: cancelLabel }) }), jsxRuntime.jsx(Button, { color: "green", type: "submit", form: `form-${id}`, disabled: form.formState.isSubmitting, children: submitLabel })] })] })] }) }));
+};
+
+function ListSorter({ className, items, idResolver, renderer, onChange, }) {
+    const adaptedItems = react.useMemo(() => items.map((value, index) => ({ id: idResolver(value, index), value })), [idResolver, items]);
+    const sensors = core.useSensors(core.useSensor(core.PointerSensor), core.useSensor(core.KeyboardSensor, { coordinateGetter: sortable.sortableKeyboardCoordinates }));
+    const onDragEnd = ({ active, over }) => {
+        if (!over || active.id === over.id)
+            return;
+        const sortedItems = structuredClone(adaptedItems);
+        const oldIndex = sortedItems.findIndex((item) => item.id === active.id);
+        const newIndex = sortedItems.findIndex((item) => item.id === over.id);
+        const [removed] = sortedItems.splice(oldIndex, 1);
+        sortedItems.splice(newIndex, 0, removed);
+        for (const [index, { value }] of Object.entries(sortedItems)) {
+            if (typeof value === 'object') {
+                value.rank = +index;
+            }
+        }
+        onChange(sortedItems.map(({ value }) => value));
+    };
+    return (jsxRuntime.jsx(core.DndContext, { sensors: sensors, modifiers: [modifiers.restrictToFirstScrollableAncestor], collisionDetection: core.closestCenter, onDragEnd: onDragEnd, children: jsxRuntime.jsx(sortable.SortableContext, { items: adaptedItems, strategy: sortable.verticalListSortingStrategy, children: jsxRuntime.jsx("div", { className: className, children: adaptedItems.map((item, index) => (jsxRuntime.jsx(SortableItem, { item: item, index: index, renderer: renderer }, item.id))) }) }) }));
+}
+function SortableItem({ item, index, renderer, }) {
+    const { attributes, listeners, setNodeRef, transform, transition } = sortable.useSortable({ id: item.id });
+    const style = { transform: utilities.CSS.Transform.toString(transform), transition };
+    return (jsxRuntime.jsx("div", Object.assign({ ref: setNodeRef, style: style }, attributes, { children: renderer(item.value, index, listeners) })));
+}
+
+function ListSorterDialog({ className, open, title, items, idResolver, renderer, cancelLabel, submitLabel, onSubmit, onClose, }) {
+    const [sortedItems, setSortedItems] = react.useState(structuredClone(items));
+    react.useEffect(() => {
+        return () => {
+            setSortedItems(structuredClone(items));
+        };
+    }, [items]);
+    const preFinish = () => onSubmit(sortedItems);
+    const customRenderer = (item, index, listeners) => (jsxRuntime.jsxs(Flex, { align: "center", className: "gap-4 p-4 focus:outline-none dark:bg-slate-900 hover:dark:bg-slate-800", children: [jsxRuntime.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: jsxRuntime.jsx(lucideReact.ArrowUpDownIcon, { className: "h-5 w-5" }) })), renderer(item, index, listeners)] }));
+    return (jsxRuntime.jsx(Dialog, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxRuntime.jsxs(Dialog.Content, { className: className, onPointerDownOutside: (event) => event.preventDefault(), children: [jsxRuntime.jsx(Dialog.Header, { children: jsxRuntime.jsx(Dialog.Title, { children: title }) }), jsxRuntime.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 }), jsxRuntime.jsxs(Dialog.Footer, { children: [jsxRuntime.jsx(Dialog.Close, { asChild: true, children: jsxRuntime.jsx(Button, { color: "red", children: cancelLabel !== null && cancelLabel !== void 0 ? cancelLabel : 'Cancel' }) }), jsxRuntime.jsx(Button, { color: "green", onClick: preFinish, children: submitLabel !== null && submitLabel !== void 0 ? submitLabel : 'Submit' })] })] }) }));
+}
+
+const PdfViewerDialog = ({ open, title, url, data, onClose }) => {
+    return !(url || data) ? null : (jsxRuntime.jsx(Dialog, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxRuntime.jsxs(Dialog.Content, { className: "h-[95dvh] max-w-[95dvw]", children: [jsxRuntime.jsx(Dialog.Header, { children: jsxRuntime.jsx(Dialog.Title, { children: title }) }), (url || data) && (jsxRuntime.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 = react.forwardRef((_a, ref) => {
+    var { className, orientation = 'horizontal', decorative = true } = _a, props = __rest(_a, ["className", "orientation", "decorative"]);
+    return (jsxRuntime.jsx(SeparatorPrimitive__namespace.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)));
+});
+Separator.displayName = SeparatorPrimitive__namespace.Root.displayName;
+
 const Skeleton = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
     return (jsxRuntime.jsx("div", Object.assign({ className: cn('bg-muted animate-pulse rounded-md', className) }, props)));
@@ -1778,39 +1792,40 @@ const SIDEBAR_WIDTH = '16rem';
 const SIDEBAR_WIDTH_MOBILE = '18rem';
 const SIDEBAR_WIDTH_ICON = '3rem';
 const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
-const SidebarContext = React.createContext(null);
+const SidebarContext = react.createContext(null);
 function useSidebar() {
-    const context = React.useContext(SidebarContext);
+    const context = react.useContext(SidebarContext);
     if (!context) {
         throw new Error('useSidebar must be used within a SidebarProvider.');
     }
     return context;
 }
-const SidebarContextProvider = React.forwardRef((_a, ref) => {
+const SidebarContextProvider = react.forwardRef((_a, ref) => {
     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] = React.useState(false);
-    const screenRef = React.useRef(document.documentElement);
+    const [openMobile, setOpenMobile] = react.useState(false);
+    const screenRef = react.useRef(document.documentElement);
     // This is the internal state of the sidebar.
     // We use openProp and setOpenProp for control from outside the component.
-    const [_open, _setOpen] = React.useState(defaultOpen);
+    const [_open, _setOpen] = react.useState(getValueFromCookie(SIDEBAR_COOKIE_NAME, defaultOpen));
     const open = openProp !== null && openProp !== void 0 ? openProp : _open;
-    const setOpen = React.useCallback((value) => {
+    const setOpen = react.useCallback((value) => {
         if (setOpenProp) {
             return setOpenProp === null || setOpenProp === void 0 ? void 0 : setOpenProp(typeof value === 'function' ? value(open) : value);
         }
-        _setOpen(value);
+        const newValue = typeof value === 'function' ? value(open) : value;
+        _setOpen(newValue);
         // This sets the cookie to keep the sidebar state.
-        document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+        document.cookie = `${SIDEBAR_COOKIE_NAME}=${newValue}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
     }, [setOpenProp, open]);
     // Helper to toggle the sidebar.
-    const toggleSidebar = React.useCallback(() => {
+    const toggleSidebar = react.useCallback(() => {
         return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
     }, [isMobile, setOpen, setOpenMobile]);
     // Add swipe gesture support for opening and closing the sidebar.
     useOnSwipe(screenRef, (direction) => direction === 'right' ? setOpen(true) : direction === 'left' && setOpen(false));
     // Adds a keyboard shortcut to toggle the sidebar.
-    React.useEffect(() => {
+    react.useEffect(() => {
         const handleKeyDown = (event) => {
             if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
                 event.preventDefault();
@@ -1823,7 +1838,7 @@ const SidebarContextProvider = React.forwardRef((_a, ref) => {
     // We add a state so that we can do data-state="expanded" or "collapsed".
     // This makes it easier to style the sidebar with Tailwind classes.
     const state = open ? 'expanded' : 'collapsed';
-    const contextValue = React.useMemo(() => ({
+    const contextValue = react.useMemo(() => ({
         state,
         open,
         setOpen,
@@ -1835,7 +1850,7 @@ const SidebarContextProvider = React.forwardRef((_a, ref) => {
     return (jsxRuntime.jsx(SidebarContext.Provider, { value: contextValue, children: jsxRuntime.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 })) }));
 });
 SidebarContextProvider.displayName = 'SidebarContextProvider';
-const $Sidebar = React.forwardRef((_a, ref) => {
+const $Sidebar = react.forwardRef((_a, ref) => {
     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') {
@@ -1857,63 +1872,63 @@ const $Sidebar = React.forwardRef((_a, ref) => {
                     : '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: jsxRuntime.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 = React.forwardRef((_a, ref) => {
+const SidebarTrigger = react.forwardRef((_a, ref) => {
     var { className, onClick } = _a, props = __rest(_a, ["className", "onClick"]);
     const { toggleSidebar } = useSidebar();
-    return (jsxRuntime.jsx(Button, Object.assign({ ref: ref, "data-sidebar": "trigger", variant: "text", suffixIcon: lucideReact.PanelLeft, className: cn('h-7 w-7', className), onClick: (event) => {
+    return (jsxRuntime.jsx(Button, Object.assign({ ref: ref, "data-sidebar": "trigger", variant: "text", suffixIcon: lucideReact.PanelLeft, className: className, onClick: (event) => {
             onClick === null || onClick === void 0 ? void 0 : onClick(event);
             toggleSidebar();
         } }, props)));
 });
 SidebarTrigger.displayName = 'SidebarTrigger';
-const SidebarRail = React.forwardRef((_a, ref) => {
+const SidebarRail = react.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
     const { toggleSidebar } = useSidebar();
     return (jsxRuntime.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)));
 });
 SidebarRail.displayName = 'SidebarRail';
-const SidebarInset = React.forwardRef((_a, ref) => {
+const SidebarInset = react.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
     return (jsxRuntime.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)));
 });
 SidebarInset.displayName = 'SidebarInset';
-const SidebarInput = React.forwardRef((_a, ref) => {
+const SidebarInput = react.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
     return (jsxRuntime.jsx(BasicInput, Object.assign({ ref: ref, "data-sidebar": "input", className: cn('focus-visible:ring-sidebar-ring focus-visible:ring-2', className) }, props)));
 });
 SidebarInput.displayName = 'SidebarInput';
-const SidebarHeader = React.forwardRef((_a, ref) => {
+const SidebarHeader = react.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
     return (jsxRuntime.jsx("div", Object.assign({ ref: ref, "data-sidebar": "header", className: cn('flex flex-col gap-2 p-2', className) }, props)));
 });
 SidebarHeader.displayName = 'SidebarHeader';
-const SidebarFooter = React.forwardRef((_a, ref) => {
+const SidebarFooter = react.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
     return (jsxRuntime.jsx("div", Object.assign({ ref: ref, "data-sidebar": "footer", className: cn('flex flex-col gap-2 p-2', className) }, props)));
 });
 SidebarFooter.displayName = 'SidebarFooter';
-const SidebarSeparator = React.forwardRef((_a, ref) => {
+const SidebarSeparator = react.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
     return (jsxRuntime.jsx(Separator, Object.assign({ ref: ref, "data-sidebar": "separator", className: cn('bg-sidebar-border mx-2 w-auto', className) }, props)));
 });
 SidebarSeparator.displayName = 'SidebarSeparator';
-const SidebarContent = React.forwardRef((_a, ref) => {
+const SidebarContent = react.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
     return (jsxRuntime.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)));
 });
 SidebarContent.displayName = 'SidebarContent';
-const SidebarGroup = React.forwardRef((_a, ref) => {
+const SidebarGroup = react.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
     return (jsxRuntime.jsx("div", Object.assign({ ref: ref, "data-sidebar": "group", className: cn('relative flex w-full min-w-0 flex-col p-2', className) }, props)));
 });
 SidebarGroup.displayName = 'SidebarGroup';
-const SidebarGroupLabel = React.forwardRef((_a, ref) => {
+const SidebarGroupLabel = react.forwardRef((_a, ref) => {
     var { className, asChild = false } = _a, props = __rest(_a, ["className", "asChild"]);
     const Comp = asChild ? reactSlot.Slot : 'div';
     return (jsxRuntime.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)));
 });
 SidebarGroupLabel.displayName = 'SidebarGroupLabel';
-const SidebarGroupAction = React.forwardRef((_a, ref) => {
+const SidebarGroupAction = react.forwardRef((_a, ref) => {
     var { className, asChild = false } = _a, props = __rest(_a, ["className", "asChild"]);
     const Comp = asChild ? reactSlot.Slot : 'button';
     return (jsxRuntime.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', 
@@ -1921,17 +1936,17 @@ const SidebarGroupAction = React.forwardRef((_a, ref) => {
         'after:absolute after:-inset-2 after:md:hidden', 'group-data-[collapsible=icon]:hidden', className) }, props)));
 });
 SidebarGroupAction.displayName = 'SidebarGroupAction';
-const SidebarGroupContent = React.forwardRef((_a, ref) => {
+const SidebarGroupContent = react.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
     return (jsxRuntime.jsx("div", Object.assign({ ref: ref, "data-sidebar": "group-content", className: cn('w-full text-sm', className) }, props)));
 });
 SidebarGroupContent.displayName = 'SidebarGroupContent';
-const SidebarMenu = React.forwardRef((_a, ref) => {
+const SidebarMenu = react.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
     return (jsxRuntime.jsx("ul", Object.assign({ ref: ref, "data-sidebar": "menu", className: cn('flex w-full min-w-0 flex-col gap-1', className) }, props)));
 });
 SidebarMenu.displayName = 'SidebarMenu';
-const SidebarMenuItem = React.forwardRef((_a, ref) => {
+const SidebarMenuItem = react.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
     return (jsxRuntime.jsx("li", Object.assign({ ref: ref, "data-sidebar": "menu-item", className: cn('group/menu-item relative', className) }, props)));
 });
@@ -1953,7 +1968,7 @@ const sidebarMenuButtonVariants = classVarianceAuthority.cva('peer/menu-button f
         size: 'default',
     },
 });
-const SidebarMenuButton = React.forwardRef((_a, ref) => {
+const SidebarMenuButton = react.forwardRef((_a, ref) => {
     var { asChild = false, isActive = false, variant = 'default', size = 'default', tooltip, className } = _a, props = __rest(_a, ["asChild", "isActive", "variant", "size", "tooltip", "className"]);
     const Comp = asChild ? reactSlot.Slot : 'button';
     const { isMobile, state } = useSidebar();
@@ -1969,7 +1984,7 @@ const SidebarMenuButton = React.forwardRef((_a, ref) => {
     return (jsxRuntime.jsx(Tooltip, Object.assign({ asChild: true, placement: "right" }, tooltip, { children: button })));
 });
 SidebarMenuButton.displayName = 'SidebarMenuButton';
-const SidebarMenuAction = React.forwardRef((_a, ref) => {
+const SidebarMenuAction = react.forwardRef((_a, ref) => {
     var { className, asChild = false, showOnHover = false } = _a, props = __rest(_a, ["className", "asChild", "showOnHover"]);
     const Comp = asChild ? reactSlot.Slot : 'button';
     return (jsxRuntime.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', 
@@ -1978,15 +1993,15 @@ const SidebarMenuAction = React.forwardRef((_a, ref) => {
             '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 = React.forwardRef((_a, ref) => {
+const SidebarMenuBadge = react.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
     return (jsxRuntime.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)));
 });
 SidebarMenuBadge.displayName = 'SidebarMenuBadge';
-const SidebarMenuSkeleton = React.forwardRef((_a, ref) => {
+const SidebarMenuSkeleton = react.forwardRef((_a, ref) => {
     var { className, showIcon = false } = _a, props = __rest(_a, ["className", "showIcon"]);
     // Random width between 50 to 90%.
-    const width = React.useMemo(() => {
+    const width = react.useMemo(() => {
         return `${Math.floor(Math.random() * 40) + 50}%`;
     }, []);
     return (jsxRuntime.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 && jsxRuntime.jsx(Skeleton, { className: "size-4 rounded-md", "data-sidebar": "menu-skeleton-icon" }), jsxRuntime.jsx(Skeleton, { className: "h-4 max-w-[--skeleton-width] flex-1", "data-sidebar": "menu-skeleton-text", style: {
@@ -1994,17 +2009,17 @@ const SidebarMenuSkeleton = React.forwardRef((_a, ref) => {
                 } })] })));
 });
 SidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton';
-const SidebarMenuSub = React.forwardRef((_a, ref) => {
+const SidebarMenuSub = react.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
     return (jsxRuntime.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)));
 });
 SidebarMenuSub.displayName = 'SidebarMenuSub';
-const SidebarMenuSubItem = React.forwardRef((_a, ref) => {
+const SidebarMenuSubItem = react.forwardRef((_a, ref) => {
     var props = __rest(_a, []);
     return (jsxRuntime.jsx("li", Object.assign({ ref: ref }, props)));
 });
 SidebarMenuSubItem.displayName = 'SidebarMenuSubItem';
-const SidebarMenuSubButton = React.forwardRef((_a, ref) => {
+const SidebarMenuSubButton = react.forwardRef((_a, ref) => {
     var { asChild = false, size = 'md', isActive, className } = _a, props = __rest(_a, ["asChild", "size", "isActive", "className"]);
     const Comp = asChild ? reactSlot.Slot : 'a';
     return (jsxRuntime.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 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)));
@@ -2034,7 +2049,7 @@ const Sidebar = Object.assign($Sidebar, {
     Trigger: SidebarTrigger,
 });
 
-const Navbar = ({ className, leftSlot, rightSlot }) => (jsxRuntime.jsx(Block, { className: cn('border-b p-3 dark:border-slate-700', className), fullWidth: true, children: jsxRuntime.jsxs(Flex, { align: "center", justify: "between", children: [jsxRuntime.jsxs(Flex, { align: "center", children: [jsxRuntime.jsx(Sidebar.Trigger, {}), leftSlot] }), rightSlot] }) }));
+const Navbar = ({ className, sidebarTriggerClassName, leftSlot, rightSlot, }) => (jsxRuntime.jsx(Block, { className: cn('border-b p-3 dark:border-slate-700', className), fullWidth: true, children: jsxRuntime.jsxs(Flex, { align: "center", justify: "between", children: [jsxRuntime.jsxs(Flex, { align: "center", children: [jsxRuntime.jsx(Sidebar.Trigger, { className: sidebarTriggerClassName }), leftSlot] }), rightSlot] }) }));
 
 const Layout = (_a) => {
     var { children, className } = _a, _b = _a.sidebarProps, { basePath, smallLogo, fullLogo, items } = _b, sidebarProps = __rest(_b, ["basePath", "smallLogo", "fullLogo", "items"]), { navbarProps } = _a;
@@ -2043,7 +2058,7 @@ const Layout = (_a) => {
 const RenderSideBarItem = ({ basePath = '/', pathname, title, Icon, items, }) => {
     const location = reactRouterDom.useLocation();
     const { open } = useSidebar();
-    const currentPath = React.useMemo(() => location.pathname.replace(basePath, '').replace(/^\/*/, ''), [basePath, location.pathname]);
+    const currentPath = react.useMemo(() => location.pathname.replace(basePath, '').replace(/^\/*/, ''), [basePath, location.pathname]);
     return (jsxRuntime.jsxs(Sidebar.MenuItem, { children: [jsxRuntime.jsx(Sidebar.MenuButton, { asChild: true, tooltip: title, isActive: isLinkStartsWithPathname(currentPath, pathname) &&
                     (!items ||
                         (!open &&
@@ -2055,7 +2070,7 @@ function isLinkStartsWithPathname(link, pathname) {
 
 const $Popover = PopoverPrimitive__namespace.Root;
 const PopoverTrigger = PopoverPrimitive__namespace.Trigger;
-const PopoverContent = React.forwardRef((_a, ref) => {
+const PopoverContent = react.forwardRef((_a, ref) => {
     var { className, align = 'center', sideOffset = 4, container } = _a, props = __rest(_a, ["className", "align", "sideOffset", "container"]);
     return (jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { container: container, children: jsxRuntime.jsx(PopoverPrimitive__namespace.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)) }));
 });
@@ -2065,23 +2080,23 @@ const Popover = Object.assign($Popover, {
     Content: PopoverContent,
 });
 
-const Switch = React.forwardRef((_a, ref) => {
+const Switch = react.forwardRef((_a, ref) => {
     var { className } = _a, _b = _a.thumbProps, _c = _b === void 0 ? {} : _b, { className: thumbClassName } = _c, thumbProps = __rest(_c, ["className"]), props = __rest(_a, ["className", "thumbProps"]);
     return (jsxRuntime.jsx(SwitchPrimitives__namespace.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: jsxRuntime.jsx(SwitchPrimitives__namespace.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__namespace.Root.displayName;
 
-const $Tabs = React.forwardRef((_a, ref) => {
+const $Tabs = react.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
     return (jsxRuntime.jsx(TabsPrimitive__namespace.Root, Object.assign({ ref: ref, className: cn('flex flex-col gap-2', className) }, props)));
 });
 $Tabs.displayName = TabsPrimitive__namespace.Root.displayName;
-const TabsList = React.forwardRef((_a, ref) => {
+const TabsList = react.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
     return (jsxRuntime.jsx(TabsPrimitive__namespace.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)));
 });
 TabsList.displayName = TabsPrimitive__namespace.List.displayName;
-const TabsTrigger = React.forwardRef((_a, ref) => {
+const TabsTrigger = react.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
     return (jsxRuntime.jsx(TabsPrimitive__namespace.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)));
 });
@@ -2093,53 +2108,55 @@ const Tabs = Object.assign($Tabs, {
     Content: TabsContent,
 });
 
-const LayoutContext = React.createContext(undefined);
+const LayoutContext = react.createContext(undefined);
+const THEME_MEDIA_QUERY = '(prefers-color-scheme: dark)';
+const THEME_COOKIE_NAME = 'theme:state';
+const THEME_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 const LayoutContextProvider = ({ children }) => {
-    const [theme, setTheme] = React.useState(getValueFromLocalStorage(THEME_KEY, 'light'));
-    React.useEffect(() => {
-        if (theme) {
-            if (theme === 'dark') {
-                document.documentElement.classList.add('dark');
-            }
-            else {
-                document.documentElement.classList.remove('dark');
-            }
+    const [theme, _setTheme] = react.useState(getValueFromCookie(THEME_COOKIE_NAME, 'system'));
+    const [resolvedTheme, setResolvedTheme] = react.useState(() => theme === 'system' ? getSystemTheme() : theme);
+    react.useEffect(() => {
+        if (resolvedTheme === 'dark') {
+            document.documentElement.classList.add('dark');
+        }
+        else {
+            document.documentElement.classList.remove('dark');
+        }
+    }, [resolvedTheme]);
+    react.useEffect(() => {
+        if (theme !== 'system') {
+            setResolvedTheme(theme);
+            return;
         }
+        setResolvedTheme(getSystemTheme());
+        const handleMediaQuery = (e) => setResolvedTheme(getSystemTheme(e));
+        const mediaQuery = window.matchMedia(THEME_MEDIA_QUERY);
+        mediaQuery.addEventListener('change', handleMediaQuery);
+        return () => mediaQuery.removeEventListener('change', handleMediaQuery);
     }, [theme]);
-    const toggleTheme = () => {
-        setTheme((theme) => {
-            const newValue = theme === 'dark' ? 'light' : 'dark';
-            window.localStorage.setItem(THEME_KEY, newValue);
-            return newValue;
-        });
+    const setTheme = (theme) => {
+        _setTheme(theme);
+        // This sets the cookie to keep the theme state.
+        document.cookie = `${THEME_COOKIE_NAME}=${theme}; path=/; max-age=${THEME_COOKIE_MAX_AGE}`;
     };
-    return jsxRuntime.jsx(LayoutContext.Provider, { value: { theme, toggleTheme }, children: children });
+    return (jsxRuntime.jsx(LayoutContext.Provider, { value: { theme, resolvedTheme, setTheme }, children: children }));
 };
 function useLayoutContext() {
-    const context = React.useContext(LayoutContext);
+    const context = react.useContext(LayoutContext);
     if (!context) {
         throw new Error('Please use LayoutContextProvider!');
     }
     return context;
 }
-const THEME_KEY = 'tw-react-components__theme';
-function getValueFromLocalStorage(key, _default) {
-    var _a;
-    const transformers = {
-        string: String,
-        boolean: (value) => value === 'true',
-    };
-    return typeof window !== 'undefined'
-        ? transformers[typeof _default]((_a = window.localStorage.getItem(key)) !== null && _a !== void 0 ? _a : _default)
-        : _default;
+function getSystemTheme(e) {
+    if (!e)
+        e = window.matchMedia(THEME_MEDIA_QUERY);
+    return e.matches ? 'dark' : 'light';
 }
 
-const ThemeSwitcher = ({ className }) => {
-    const { theme, toggleTheme } = useLayoutContext();
-    const darkMode = theme === 'dark';
-    return (jsxRuntime.jsx(Switch, { className: className, checked: darkMode, onCheckedChange: toggleTheme, thumbProps: {
-            children: darkMode ? (jsxRuntime.jsx(lucideReact.MoonIcon, { className: "h-6 w-6 rounded-full bg-slate-900 p-1 text-white" })) : (jsxRuntime.jsx(lucideReact.SunIcon, { className: "h-6 w-6 rounded-full bg-white p-1 text-black" })),
-        } }));
+const ThemeSelector = ({ className }) => {
+    const { resolvedTheme, setTheme } = useLayoutContext();
+    return (jsxRuntime.jsxs(DropdownMenu, { children: [jsxRuntime.jsx(DropdownMenu.Trigger, { asChild: true, children: jsxRuntime.jsx(Button, { prefixIcon: resolvedTheme === 'dark' ? lucideReact.MoonIcon : lucideReact.SunIcon, className: className, variant: "text" }) }), jsxRuntime.jsxs(DropdownMenu.Content, { children: [jsxRuntime.jsxs(DropdownMenu.Item, { onClick: () => setTheme('light'), children: [jsxRuntime.jsx(DropdownMenu.Icon, { icon: lucideReact.SunIcon }), "Light"] }), jsxRuntime.jsxs(DropdownMenu.Item, { onClick: () => setTheme('dark'), children: [jsxRuntime.jsx(DropdownMenu.Icon, { icon: lucideReact.MoonIcon }), "Dark"] }), jsxRuntime.jsxs(DropdownMenu.Item, { onClick: () => setTheme('system'), children: [jsxRuntime.jsx(DropdownMenu.Icon, { icon: lucideReact.MonitorIcon }), "System"] })] })] }));
 };
 
 exports.Badge = Badge;
@@ -2174,6 +2191,12 @@ exports.Pagination = Pagination;
 exports.PasswordInput = PasswordInput;
 exports.PdfViewerDialog = PdfViewerDialog;
 exports.Popover = Popover;
+exports.SIDEBAR_COOKIE_MAX_AGE = SIDEBAR_COOKIE_MAX_AGE;
+exports.SIDEBAR_COOKIE_NAME = SIDEBAR_COOKIE_NAME;
+exports.SIDEBAR_KEYBOARD_SHORTCUT = SIDEBAR_KEYBOARD_SHORTCUT;
+exports.SIDEBAR_WIDTH = SIDEBAR_WIDTH;
+exports.SIDEBAR_WIDTH_ICON = SIDEBAR_WIDTH_ICON;
+exports.SIDEBAR_WIDTH_MOBILE = SIDEBAR_WIDTH_MOBILE;
 exports.SelectInput = SelectInput;
 exports.Separator = Separator;
 exports.Sheet = Sheet;
@@ -2183,17 +2206,20 @@ exports.SidebarContextProvider = SidebarContextProvider;
 exports.Skeleton = Skeleton;
 exports.Spinner = Spinner;
 exports.Switch = Switch;
-exports.THEME_KEY = THEME_KEY;
+exports.THEME_COOKIE_MAX_AGE = THEME_COOKIE_MAX_AGE;
+exports.THEME_COOKIE_NAME = THEME_COOKIE_NAME;
+exports.THEME_MEDIA_QUERY = THEME_MEDIA_QUERY;
 exports.Table = Table;
 exports.Tabs = Tabs;
 exports.TextInput = TextInput;
 exports.TextareaInput = TextareaInput;
-exports.ThemeSwitcher = ThemeSwitcher;
+exports.ThemeSelector = ThemeSelector;
 exports.Tooltip = Tooltip;
 exports.cn = cn;
 exports.compareDates = compareDates;
 exports.generalComparator = generalComparator;
 exports.getDisplayDate = getDisplayDate;
+exports.getValueFromCookie = getValueFromCookie;
 exports.isEmpty = isEmpty;
 exports.mergeRefs = mergeRefs;
 exports.resolveTargetObject = resolveTargetObject;