tw-react-components 0.0.169 → 0.0.173

package/index.css

@@ -1,10 +1,8 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
 
 @layer base {
   :root {
-    --background: 0 0% 100%;
+    --background: var(--color-white);
     --foreground: 222.2 47.4% 11.2%;
 
     --muted: 210 40% 96.1%;
@@ -35,18 +33,18 @@
 
     --radius: 0.5rem;
 
-    --sidebar-background: 0 0% 100%;
+    --sidebar-background: var(--color-slate-100);
     --sidebar-foreground: 240 5.3% 26.1%;
     --sidebar-primary: 240 5.9% 10%;
     --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent: var(--color-slate-200);
     --sidebar-accent-foreground: 240 5.9% 10%;
     --sidebar-border: 220 13% 91%;
     --sidebar-ring: 217.2 91.2% 59.8%;
   }
 
   .dark {
-    --background: 222 47% 11%;
+    --background: var(--color-slate-800);
     --foreground: 213 31% 91%;
 
     --muted: 223 47% 11%;
@@ -77,11 +75,11 @@
 
     --radius: 0.5rem;
 
-    --sidebar-background: 222 47% 11%;
+    --sidebar-background: var(--color-slate-900);
     --sidebar-foreground: 240 4.8% 95.9%;
     --sidebar-primary: 224.3 76.3% 48%;
     --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 215 28% 17%;
+    --sidebar-accent: var(--color-slate-800);
     --sidebar-accent-foreground: 240 4.8% 95.9%;
     --sidebar-border: 215 25% 27%;
     --sidebar-ring: 217.2 91.2% 59.8%;

package/index.esm.js

@@ -145,7 +145,7 @@ function resolveTargetObject(payload, fieldChain, defaultValue) {
 const variantClassNames = {
     filled: {
         slate: {
-            base: 'bg-slate-100 dark:bg-slate-800',
+            base: 'bg-slate-100 dark:bg-slate-900/70',
             hover: 'hover:bg-slate-200 dark:hover:bg-slate-700',
             focus: 'focus:bg-slate-200 dark:focus:bg-slate-700',
             active: 'active:bg-slate-300 dark:active:bg-slate-800/50',
@@ -569,7 +569,7 @@ const Button = (_a) => {
     return (jsxs("button", Object.assign({ className: cn('relative flex aspect-square items-center font-medium duration-200', sizeClassNames[size].base, variantClassNames[variant][color].base, rounded ? 'rounded-full' : 'rounded-md', props.disabled
             ? 'cursor-not-allowed opacity-50'
             : !unstyled
-                ? `${variantClassNames[variant][color].hover} ${variantClassNames[variant][color].focus} ${variantClassNames[variant][color].active}`
+                ? `${variantClassNames[variant][color].hover} ${variantClassNames[variant][color].focus} ${variantClassNames[variant][color].active} cursor-pointer`
                 : 'cursor-default', children ? `${sizeClassNames[size].withChildren} aspect-[initial]` : 'justify-center', className), "data-testid": dataTestId, type: "button" }, props, { children: [PrefixIcon && (jsx(PrefixIcon, { className: children ? sizeClassNames[size].icon.withChildren : sizeClassNames[size].icon.base })), children, SuffixIcon && (jsx(SuffixIcon, { className: children ? sizeClassNames[size].icon.withChildren : sizeClassNames[size].icon.base }))] })));
 };
 
@@ -585,7 +585,7 @@ const Block = (_a) => {
 
 const Card = (_a) => {
     var { children, className, dataTestId = 'card' } = _a, blockProps = __rest(_a, ["children", "className", "dataTestId"]);
-    return (jsx(Block, Object.assign({ className: cn('rounded-lg border p-2 dark:border-slate-700 dark:bg-slate-900', className), dataTestId: dataTestId }, blockProps, { children: children })));
+    return (jsx(Block, Object.assign({ className: cn('bg-background rounded-lg border p-2 dark:border-slate-700', className), dataTestId: dataTestId }, blockProps, { children: children })));
 };
 
 const CollapsibleRoot = (_a) => {
@@ -856,7 +856,7 @@ const BasicInput = (_a) => {
                             [inputClasses.withoutErrors.input]: !hasErrors,
                             [inputClasses.withErrors.input]: hasErrors,
                             'rounded-r-none border-r-0': SuffixIcon,
-                        }, inputClassName) }, props, { value: props.value, "data-testid": `${dataTestId}-textarea` }))) : type === 'checkbox' ? (jsx("input", Object.assign({ id: id, className: cn('rounded border-slate-300 text-blue-600', sizeClasses[size].checkbox.input, {
+                        }, inputClassName) }, props, { value: props.value, "data-testid": `${dataTestId}-textarea` }))) : type === 'checkbox' ? (jsx("input", Object.assign({ id: id, className: cn('rounded-sm border-slate-300 text-blue-600', sizeClasses[size].checkbox.input, {
                             [inputClasses.base.disabled]: props.disabled,
                             'bg-red-100': hasErrors,
                         }, inputClassName), type: type, checked: Boolean(props.value) }, props, { "data-testid": `${dataTestId}-checkbox` }))) : (jsx("input", Object.assign({ id: id, className: cn(inputClasses.base.input, sizeClasses[size].input, {
@@ -864,7 +864,7 @@ const BasicInput = (_a) => {
                             [inputClasses.withoutErrors.input]: !hasErrors,
                             [inputClasses.withErrors.input]: hasErrors,
                             'rounded-r-none border-r-0': SuffixIcon,
-                        }, inputClassName), type: type !== null && type !== void 0 ? type : 'text' }, props, { value: props.value, "data-testid": `${dataTestId}-input` }))), type === 'checkbox' && memoLabel, clearable && (onClear || !!props.value) && !props.disabled && (jsx(XIcon, { className: cn('absolute right-2 top-1/2 -translate-y-1/2 cursor-pointer rounded-full bg-white p-0.5 opacity-0 duration-200 hover:bg-slate-200 group-hover:opacity-100 dark:bg-slate-700 dark:hover:bg-slate-800', sizeClasses[size].clearButton.base, {
+                        }, inputClassName), type: type !== null && type !== void 0 ? type : 'text' }, props, { value: props.value, "data-testid": `${dataTestId}-input` }))), type === 'checkbox' && memoLabel, clearable && (onClear || !!props.value) && !props.disabled && (jsx(XIcon, { className: cn('absolute top-1/2 right-2 -translate-y-1/2 cursor-pointer rounded-full bg-white p-0.5 opacity-0 duration-200 group-hover:opacity-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-800', sizeClasses[size].clearButton.base, {
                             [sizeClasses[size].clearButton.withSuffixIcon]: SuffixIcon,
                         }), onClick: handleClear, onPointerDown: (event) => event.stopPropagation(), "data-testid": `${dataTestId}-clear` })), type !== 'checkbox' && SuffixIcon && (jsx(BasicInputExtension, { className: extensionClassName, hasErrors: hasErrors, size: size, disabled: props.disabled, onClick: onSuffixIconClick, dataTestId: `${dataTestId}-suffix`, children: jsx(SuffixIcon, { className: sizeClasses[size].suffix.icon }) }))] })] }));
 };
@@ -966,7 +966,7 @@ const DaysView = ({ date, value, month, year, minDate, maxDate, locale, dataTest
         }
         setNewDate(newDate);
     }, [date, maxDate, minDate, month, setNewDate, year]);
-    return (jsxs("div", { className: "gap-1 px-3 py-2", "data-testid": dataTestId, children: [jsx("div", { className: "grid grid-cols-7", children: days.map((day, index) => (jsx("span", { className: "flex h-8 w-8 items-center justify-center text-xs uppercase text-slate-500 dark:text-slate-400", "data-testid": `${dataTestId}-weekday-${index}`, children: day.shortName }, index))) }), jsxs("div", { className: "grid grid-cols-7 gap-1", children: [prefixDays.map((dayNumber, index) => (jsx(Day, { value: value, day: dayNumber, month: (month - 1 + 12) % 12, year: month % 12 ? year : year - 1, minDate: minDate, maxDate: maxDate, setDayNumber: setDayNumber, dataTestId: dataTestId }, `${dayNumber}-${index}`))), monthDays.map((dayNumber, index) => (jsx(Day, { value: value, day: dayNumber, month: month, year: year, minDate: minDate, maxDate: maxDate, primary: true, setDayNumber: setDayNumber, dataTestId: dataTestId }, `${dayNumber}-${index}`))), suffixDays.map((dayNumber, index) => (jsx(Day, { value: value, day: dayNumber, month: (month + 1) % 12, year: (month + 1) % 12 ? year : year + 1, minDate: minDate, maxDate: maxDate, setDayNumber: setDayNumber, dataTestId: dataTestId }, `${dayNumber}-${index}`)))] })] }));
+    return (jsxs("div", { className: "gap-1 px-3 py-2", "data-testid": dataTestId, children: [jsx("div", { className: "grid grid-cols-7", children: days.map((day, index) => (jsx("span", { className: "flex h-8 w-8 items-center justify-center text-xs text-slate-500 uppercase dark:text-slate-400", "data-testid": `${dataTestId}-weekday-${index}`, children: day.shortName }, index))) }), jsxs("div", { className: "grid grid-cols-7 gap-1", children: [prefixDays.map((dayNumber, index) => (jsx(Day, { value: value, day: dayNumber, month: (month - 1 + 12) % 12, year: month % 12 ? year : year - 1, minDate: minDate, maxDate: maxDate, setDayNumber: setDayNumber, dataTestId: dataTestId }, `${dayNumber}-${index}`))), monthDays.map((dayNumber, index) => (jsx(Day, { value: value, day: dayNumber, month: month, year: year, minDate: minDate, maxDate: maxDate, primary: true, setDayNumber: setDayNumber, dataTestId: dataTestId }, `${dayNumber}-${index}`))), suffixDays.map((dayNumber, index) => (jsx(Day, { value: value, day: dayNumber, month: (month + 1) % 12, year: (month + 1) % 12 ? year : year + 1, minDate: minDate, maxDate: maxDate, setDayNumber: setDayNumber, dataTestId: dataTestId }, `${dayNumber}-${index}`)))] })] }));
 };
 const Day = ({ value, day, month, year, minDate, maxDate, primary, dataTestId = 'day', setDayNumber, }) => {
     const dayDate = useMemo(() => new Date(year, month, day), [day, month, year]);
@@ -993,7 +993,7 @@ const Month = ({ date, value, shortName, month, year, minDate, maxDate, dataTest
         (!maxDate || compareDates(dayDate, new Date(maxDate), 'month') <= 0), [dayDate, minDate, maxDate]);
     const isSelected = useMemo(() => !!value && !compareDates(dayDate, new Date(value), 'month'), [dayDate, value]);
     const isEqualThisMonth = useMemo(() => !compareDates(dayDate, new Date(), 'month'), [dayDate]);
-    return (jsx("div", { className: cn('mx-auto flex w-14 items-center justify-center rounded border py-3 text-sm', {
+    return (jsx("div", { className: cn('mx-auto flex w-14 items-center justify-center rounded-sm border py-3 text-sm', {
             'border-blue-500': isEqualThisMonth,
             'border-transparent': !isEqualThisMonth,
             'bg-blue-500 text-white': isSelected,
@@ -1010,7 +1010,7 @@ const Year = ({ date, value, year, minDate, maxDate, dataTestId = 'year', select
         (!maxDate || compareDates(dayDate, new Date(maxDate), 'year') <= 0), [dayDate, minDate, maxDate]);
     const isSelected = useMemo(() => !!value && !compareDates(dayDate, new Date(value), 'year'), [dayDate, value]);
     const isEqualThisYear = useMemo(() => !compareDates(dayDate, new Date(), 'year'), [dayDate]);
-    return (jsx("div", { className: cn('mx-auto flex w-14 items-center justify-center rounded border py-3 text-sm', {
+    return (jsx("div", { className: cn('mx-auto flex w-14 items-center justify-center rounded-sm border py-3 text-sm', {
             'border-blue-500': isEqualThisYear,
             'border-transparent': !isEqualThisYear,
             'bg-blue-500 text-white': isSelected,
@@ -1079,7 +1079,7 @@ const DateSelector = ({ date, value, minDate, maxDate, locale, calendarView, set
         setYear(year);
         setCalendarView('months');
     };
-    return (jsxs("div", { className: "select-none", "data-testid": dataTestId, children: [jsxs("div", { className: "flex justify-between px-3 pt-2", children: [jsx("div", { className: "flex cursor-pointer items-center justify-center rounded-lg px-1 transition duration-100 ease-in-out hover:bg-slate-100 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-slate-700", onClick: editCalendarViewPage('subtract'), "data-testid": `${dataTestId}-prev`, children: jsx(ChevronLeftIcon, { className: "h-5 w-5 text-slate-400" }) }), jsxs("div", { className: "flex cursor-pointer items-center gap-1 rounded px-2 py-1 transition duration-100 ease-in-out hover:bg-slate-100 dark:hover:bg-slate-700", onClick: nextCalendarView, "data-testid": `${dataTestId}-view-selector`, children: [calendarView === 'days' && (jsx("span", { className: "capitalize", "data-testid": `${dataTestId}-month`, children: months[month].name })), calendarView !== 'years' ? (jsx("span", { className: "text-slate-500 dark:text-slate-300", "data-testid": `${dataTestId}-year`, children: year })) : (jsxs("span", { className: "text-slate-500 dark:text-slate-300", "data-testid": `${dataTestId}-year-range`, children: [yearsRange[0], " - ", yearsRange[11]] }))] }), jsx("div", { className: "flex cursor-pointer items-center justify-center rounded-lg px-1 transition duration-100 ease-in-out hover:bg-slate-100 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-slate-700", onClick: editCalendarViewPage('add'), "data-testid": `${dataTestId}-next`, children: jsx(ChevronRightIcon, { className: "h-5 w-5 text-slate-400" }) })] }), calendarView === 'days' ? (jsx(DaysView, { date: date, value: value, month: month, year: year, minDate: minDate, maxDate: maxDate, locale: locale, setNewDate: setNewDate, dataTestId: `${dataTestId}-days` })) : calendarView === 'months' ? (jsx(MonthsView, { date: date, value: value, year: year, minDate: minDate, maxDate: maxDate, locale: locale, selectMonth: selectMonth, dataTestId: `${dataTestId}-months` })) : (jsx(YearsView, { date: date, value: value, years: yearsRange, minDate: minDate, maxDate: maxDate, selectYear: selectYear, dataTestId: `${dataTestId}-years` }))] }));
+    return (jsxs("div", { className: "select-none", "data-testid": dataTestId, children: [jsxs("div", { className: "flex justify-between px-3 pt-2", children: [jsx("div", { className: "flex cursor-pointer items-center justify-center rounded-lg px-1 transition duration-100 ease-in-out hover:bg-slate-100 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-slate-700", onClick: editCalendarViewPage('subtract'), "data-testid": `${dataTestId}-prev`, children: jsx(ChevronLeftIcon, { className: "h-5 w-5 text-slate-400" }) }), jsxs("div", { className: "flex cursor-pointer items-center gap-1 rounded-sm px-2 py-1 transition duration-100 ease-in-out hover:bg-slate-100 dark:hover:bg-slate-700", onClick: nextCalendarView, "data-testid": `${dataTestId}-view-selector`, children: [calendarView === 'days' && (jsx("span", { className: "capitalize", "data-testid": `${dataTestId}-month`, children: months[month].name })), calendarView !== 'years' ? (jsx("span", { className: "text-slate-500 dark:text-slate-300", "data-testid": `${dataTestId}-year`, children: year })) : (jsxs("span", { className: "text-slate-500 dark:text-slate-300", "data-testid": `${dataTestId}-year-range`, children: [yearsRange[0], " - ", yearsRange[11]] }))] }), jsx("div", { className: "flex cursor-pointer items-center justify-center rounded-lg px-1 transition duration-100 ease-in-out hover:bg-slate-100 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-slate-700", onClick: editCalendarViewPage('add'), "data-testid": `${dataTestId}-next`, children: jsx(ChevronRightIcon, { className: "h-5 w-5 text-slate-400" }) })] }), calendarView === 'days' ? (jsx(DaysView, { date: date, value: value, month: month, year: year, minDate: minDate, maxDate: maxDate, locale: locale, setNewDate: setNewDate, dataTestId: `${dataTestId}-days` })) : calendarView === 'months' ? (jsx(MonthsView, { date: date, value: value, year: year, minDate: minDate, maxDate: maxDate, locale: locale, selectMonth: selectMonth, dataTestId: `${dataTestId}-months` })) : (jsx(YearsView, { date: date, value: value, years: yearsRange, minDate: minDate, maxDate: maxDate, selectYear: selectYear, dataTestId: `${dataTestId}-years` }))] }));
 };
 
 const TimeSelector = ({ date, step = 1, minDate, maxDate, setNewDate, dataTestId = 'time-selector', }) => {
@@ -1096,7 +1096,7 @@ const TimeSelector = ({ date, step = 1, minDate, maxDate, setNewDate, dataTestId
     const increaseMinutes = useLongPress(editDateField('minutes', step));
     const decreaseMinutes = useLongPress(editDateField('minutes', -step));
     const onWheel = (field) => (event) => editDateField(field, (event.deltaY < 0 ? 1 : -1) * (field === 'hours' ? 1 : step))();
-    return (jsxs(Fragment, { children: [jsx("label", { className: "text-sm text-slate-700 dark:text-slate-300", children: "Time" }), jsxs("div", { className: "flex flex-grow justify-center gap-2", children: [jsxs("div", { className: "flex flex-col items-center justify-center", children: [jsx(ChevronUpIcon, Object.assign({ className: "h-4 w-4 rounded hover:bg-slate-100 dark:hover:bg-slate-700", onClick: editDateField('hours', 1) }, increaseHours, { "data-testid": `${dataTestId}-hours-up` })), jsx(ChevronDownIcon, Object.assign({ className: "h-4 w-4 rounded hover:bg-slate-100 dark:hover:bg-slate-700", onClick: editDateField('hours', -1) }, decreaseHours, { "data-testid": `${dataTestId}-hours-down` }))] }), jsxs("div", { className: "flex items-center rounded-lg border border-slate-100 bg-slate-100 text-right dark:border-slate-700 dark:bg-slate-800", children: [jsx("span", { className: "flex px-2", onWheel: onWheel('hours'), "data-testid": `${dataTestId}-hours`, children: date.getHours().toString().padStart(2, '0') }), jsx("span", { children: ":" }), jsx("span", { className: "flex px-2", onWheel: onWheel('minutes'), "data-testid": `${dataTestId}-minutes`, children: date.getMinutes().toString().padStart(2, '0') })] }), jsxs("div", { className: "flex flex-col items-center justify-center", children: [jsx(ChevronUpIcon, Object.assign({ className: "h-4 w-4 rounded hover:bg-slate-100 dark:hover:bg-slate-700", onClick: editDateField('minutes', step) }, increaseMinutes, { "data-testid": `${dataTestId}-minutes-up` })), jsx(ChevronDownIcon, Object.assign({ className: "h-4 w-4 rounded hover:bg-slate-100 dark:hover:bg-slate-700", onClick: editDateField('minutes', -step) }, decreaseMinutes, { "data-testid": `${dataTestId}-minutes-down` }))] })] })] }));
+    return (jsxs(Fragment, { children: [jsx("label", { className: "text-sm text-slate-700 dark:text-slate-300", children: "Time" }), jsxs("div", { className: "flex flex-grow justify-center gap-2", children: [jsxs("div", { className: "flex flex-col items-center justify-center", children: [jsx(ChevronUpIcon, Object.assign({ className: "h-4 w-4 rounded-sm hover:bg-slate-100 dark:hover:bg-slate-700", onClick: editDateField('hours', 1) }, increaseHours, { "data-testid": `${dataTestId}-hours-up` })), jsx(ChevronDownIcon, Object.assign({ className: "h-4 w-4 rounded-sm hover:bg-slate-100 dark:hover:bg-slate-700", onClick: editDateField('hours', -1) }, decreaseHours, { "data-testid": `${dataTestId}-hours-down` }))] }), jsxs("div", { className: "flex items-center rounded-lg border border-slate-100 bg-slate-100 text-right dark:border-slate-700 dark:bg-slate-800", children: [jsx("span", { className: "flex px-2", onWheel: onWheel('hours'), "data-testid": `${dataTestId}-hours`, children: date.getHours().toString().padStart(2, '0') }), jsx("span", { children: ":" }), jsx("span", { className: "flex px-2", onWheel: onWheel('minutes'), "data-testid": `${dataTestId}-minutes`, children: date.getMinutes().toString().padStart(2, '0') })] }), jsxs("div", { className: "flex flex-col items-center justify-center", children: [jsx(ChevronUpIcon, Object.assign({ className: "h-4 w-4 rounded-sm hover:bg-slate-100 dark:hover:bg-slate-700", onClick: editDateField('minutes', step) }, increaseMinutes, { "data-testid": `${dataTestId}-minutes-up` })), jsx(ChevronDownIcon, Object.assign({ className: "h-4 w-4 rounded-sm hover:bg-slate-100 dark:hover:bg-slate-700", onClick: editDateField('minutes', -step) }, decreaseMinutes, { "data-testid": `${dataTestId}-minutes-down` }))] })] })] }));
 };
 
 const DateTimeInput = (_a) => {
@@ -1152,12 +1152,12 @@ const DateTimeInput = (_a) => {
                 setIsOpen(false);
         }
     };
-    return (jsxs("div", { className: cn('relative w-full', className), ref: ref, children: [jsx(BasicInput, Object.assign({}, props, { type: "text", readOnly: true, value: displayDate !== null && displayDate !== void 0 ? displayDate : '', hasErrors: hasErrors, onClick: handleOnClick, onKeyUp: handleOnKeyUp, clearable: clearable && !!displayDate, onClear: clearDate, suffixIcon: (type === null || type === void 0 ? void 0 : type.includes('date')) ? CalendarIcon : ClockIcon, onSuffixIconClick: handleOnClick, dataTestId: dataTestId })), isOpen && (jsxs("div", { className: "absolute z-20 mt-2 flex origin-top-left flex-col rounded-md border bg-white shadow duration-200 dark:border-slate-700 dark:bg-slate-900 dark:text-white", tabIndex: 0, onBlur: handleOnBlur, ref: calendarRef, "data-testid": `${dataTestId}-popup`, children: [(type === null || type === void 0 ? void 0 : type.includes('date')) && (jsx(DateSelector, { date: date, value: value, minDate: minDate, maxDate: maxDate, locale: displayLocale, calendarView: calendarView, setCalendarView: setCalendarView, setNewDate: setNewDate, dataTestId: `${dataTestId}-date-selector` })), calendarView === 'days' && (jsxs("div", { className: "flex select-none items-center justify-end gap-2 px-3 py-2", "data-testid": `${dataTestId}-time-selector`, children: [(type === null || type === void 0 ? void 0 : type.includes('time')) && (jsx(TimeSelector, { date: date, step: step, minDate: minDate, maxDate: maxDate, setNewDate: setNewDate, dataTestId: `${dataTestId}-time-selector` })), jsx("div", { className: "cursor-pointer rounded-lg border border-transparent p-1 text-sm font-bold uppercase text-blue-600 transition duration-100 ease-in-out hover:bg-slate-100 dark:text-blue-500 dark:hover:bg-slate-700", onClick: () => setIsOpen(false), "data-testid": `${dataTestId}-ok`, children: "OK" })] }))] }))] }));
+    return (jsxs("div", { className: cn('relative w-full', className), ref: ref, children: [jsx(BasicInput, Object.assign({}, props, { type: "text", readOnly: true, value: displayDate !== null && displayDate !== void 0 ? displayDate : '', hasErrors: hasErrors, onClick: handleOnClick, onKeyUp: handleOnKeyUp, clearable: clearable && !!displayDate, onClear: clearDate, suffixIcon: (type === null || type === void 0 ? void 0 : type.includes('date')) ? CalendarIcon : ClockIcon, onSuffixIconClick: handleOnClick, dataTestId: dataTestId })), isOpen && (jsxs("div", { className: "absolute z-20 mt-2 flex origin-top-left flex-col rounded-md border bg-white shadow-sm duration-200 dark:border-slate-700 dark:bg-slate-900 dark:text-white", tabIndex: 0, onBlur: handleOnBlur, ref: calendarRef, "data-testid": `${dataTestId}-popup`, children: [(type === null || type === void 0 ? void 0 : type.includes('date')) && (jsx(DateSelector, { date: date, value: value, minDate: minDate, maxDate: maxDate, locale: displayLocale, calendarView: calendarView, setCalendarView: setCalendarView, setNewDate: setNewDate, dataTestId: `${dataTestId}-date-selector` })), calendarView === 'days' && (jsxs("div", { className: "flex items-center justify-end gap-2 px-3 py-2 select-none", "data-testid": `${dataTestId}-time-selector`, children: [(type === null || type === void 0 ? void 0 : type.includes('time')) && (jsx(TimeSelector, { date: date, step: step, minDate: minDate, maxDate: maxDate, setNewDate: setNewDate, dataTestId: `${dataTestId}-time-selector` })), jsx("div", { className: "cursor-pointer rounded-lg border border-transparent p-1 text-sm font-bold text-blue-600 uppercase transition duration-100 ease-in-out hover:bg-slate-100 dark:text-blue-500 dark:hover:bg-slate-700", onClick: () => setIsOpen(false), "data-testid": `${dataTestId}-ok`, children: "OK" })] }))] }))] }));
 };
 
 const ListContent = (_a) => {
     var { className, dataTestId = 'list' } = _a, props = __rest(_a, ["className", "dataTestId"]);
-    return (jsx(Block, Object.assign({ className: cn('z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-100 bg-white p-1 text-slate-700 shadow-md dark:border-slate-700 dark:bg-slate-900 dark:text-white', className), dataTestId: dataTestId }, props)));
+    return (jsx(Block, Object.assign({ className: cn('bg-background z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-100 p-1 text-slate-700 shadow-md dark:border-slate-700 dark:text-white', className), dataTestId: dataTestId }, props)));
 };
 const labelSizeClasses = {
     small: 'p-1 text-sm',
@@ -1165,7 +1165,7 @@ const labelSizeClasses = {
 };
 const ListItem = (_a) => {
     var { className, size = 'medium', inset, dataTestId = 'list-item' } = _a, props = __rest(_a, ["className", "size", "inset", "dataTestId"]);
-    return (jsx(Flex, Object.assign({ className: cn(labelSizeClasses[size], 'relative cursor-default select-none gap-2 rounded-md outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-700', inset && 'pl-8', className), align: "center", dataTestId: dataTestId }, props)));
+    return (jsx(Flex, Object.assign({ className: cn(labelSizeClasses[size], 'relative cursor-default gap-2 rounded-md outline-hidden select-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-700', inset && 'pl-8', className), align: "center", dataTestId: dataTestId }, props)));
 };
 const ListLabel = (_a) => {
     var { className, size = 'medium', inset, dataTestId = 'list-label' } = _a, props = __rest(_a, ["className", "size", "inset", "dataTestId"]);
@@ -1355,7 +1355,7 @@ const SelectInput = (_a) => {
             }, dataTestId: option.dataTestId, children: jsx("span", { children: renderItem(option, isNotNullOrUndefined(selectedMap[option.id])) }) }));
     }, [ItemComponent, handleOnSelect, multiple, renderItem, selectedMap]);
     return (jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, children: [jsx(DropdownMenu.Trigger, { className: cn('w-full', className), dataTestId: `${dataTestId}-trigger`, children: jsx(TextInput, Object.assign({ className: "[&>div>*]:cursor-pointer", inputClassName: "text-left" }, props, { value: text !== null && text !== void 0 ? text : '', clearable: clearable && !!selectedItems.length, onClear: handleOnClear, suffixIcon: ChevronDownIcon, onSuffixIconClick: () => setOpen((open) => !open), readOnly: true, dataTestId: dataTestId })) }), jsxs(DropdownMenu.Content, { className: "flex max-h-80 w-[calc(var(--radix-popper-anchor-width))] flex-col overflow-hidden", dataTestId: `${dataTestId}-content`, children: [search && (jsxs(Fragment, { children: [jsx(TextInput, { value: searchValue, placeholder: "Search...", size: props.size, onChange: handleOnSearchValueChange, onKeyUp: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), clearable: !!searchValue.length, onClear: clearSearchValue, dataTestId: `${dataTestId}-search` }), jsx(DropdownMenu.Separator, { className: "w-full", dataTestId: `${dataTestId}-separator` })] })), filteredItems.length === 0 &&
-                        (allowAddition && searchValue ? (jsxs("button", { className: "rounded bg-slate-100 py-1.5 text-center hover:bg-slate-200 dark:bg-slate-900/30 dark:hover:bg-slate-700/30", onClick: handleOnAddItemClicked, "data-testid": `${dataTestId}-add-button`, children: ["Add '", searchValue, "'"] })) : (jsx("div", { className: "py-1.5 text-center text-slate-500", "data-testid": `${dataTestId}-no-items`, children: "No items" }))), jsx(GroupComponent, { className: "flex flex-col gap-1 overflow-auto", value: !multiple && selectedItems.length ? String(selectedItems[0].id) : undefined, dataTestId: `${dataTestId}-group`, children: filteredItems.map((item, index) => item.group ? (jsxs(Flex, { className: "gap-1", direction: "column", fullWidth: true, children: [jsx(DropdownMenu.Label, { className: "sticky top-0 z-[51] w-full rounded-md border bg-white py-1 dark:bg-slate-900", dataTestId: `${dataTestId}-group-label-${item.id}`, children: item.label }), item.items.map((subItem) => (jsx(RenderOption, Object.assign({}, subItem, { dataTestId: `${dataTestId}-item-${subItem.id}` }), subItem.id))), index < filteredItems.length - 1 && (jsx("div", { className: "mb-1 h-px w-full bg-slate-200 dark:bg-slate-700" }))] }, item.id)) : (jsx(RenderOption, Object.assign({}, item, { dataTestId: `${dataTestId}-item-${item.id}` }), item.id))) })] })] }));
+                        (allowAddition && searchValue ? (jsxs("button", { className: "rounded-sm bg-slate-100 py-1.5 text-center hover:bg-slate-200 dark:bg-slate-900/30 dark:hover:bg-slate-700/30", onClick: handleOnAddItemClicked, "data-testid": `${dataTestId}-add-button`, children: ["Add '", searchValue, "'"] })) : (jsx("div", { className: "py-1.5 text-center text-slate-500", "data-testid": `${dataTestId}-no-items`, children: "No items" }))), jsx(GroupComponent, { className: "flex flex-col gap-1 overflow-auto", value: !multiple && selectedItems.length ? String(selectedItems[0].id) : undefined, dataTestId: `${dataTestId}-group`, children: filteredItems.map((item, index) => item.group ? (jsxs(Flex, { className: "gap-1", direction: "column", fullWidth: true, children: [jsx(DropdownMenu.Label, { className: "sticky top-0 z-[51] w-full rounded-md border bg-white py-1 dark:bg-slate-900", dataTestId: `${dataTestId}-group-label-${item.id}`, children: item.label }), item.items.map((subItem) => (jsx(RenderOption, Object.assign({}, subItem, { dataTestId: `${dataTestId}-item-${subItem.id}` }), subItem.id))), index < filteredItems.length - 1 && (jsx("div", { className: "mb-1 h-px w-full bg-slate-200 dark:bg-slate-700" }))] }, item.id)) : (jsx(RenderOption, Object.assign({}, item, { dataTestId: `${dataTestId}-item-${item.id}` }), item.id))) })] })] }));
 };
 function isNotNullOrUndefined(value) {
     return value !== null && value !== undefined;
@@ -1376,7 +1376,7 @@ const FileInput = (_a) => {
                 }, type: "file", hidden: true, accept: accept, onChange: handleFileChange, "data-testid": `${dataTestId}-hidden` })] }));
 };
 
-const FormGroup = ({ className, label, children }) => (jsxs(Flex, { className: cn('relative !gap-4 rounded-lg border p-4 dark:border-slate-700', className), direction: "column", fullWidth: true, children: [jsx("div", { className: "absolute right-0 top-0 rounded-bl-lg rounded-tr-lg bg-slate-500 px-2 py-1 font-medium text-white dark:bg-slate-900 dark:text-white", children: label }), children] }));
+const FormGroup = ({ className, label, children }) => (jsxs(Flex, { className: cn('relative !gap-4 rounded-lg border p-4 dark:border-slate-700', className), direction: "column", fullWidth: true, children: [jsx("div", { className: "absolute top-0 right-0 rounded-tr-lg rounded-bl-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 (props) => {
@@ -1487,9 +1487,9 @@ const Pagination = ({ disabled, pageSize = 10, currentPage, totalItems, dataTest
     useEffect(() => {
         setCurrentPage((page) => Math.min(page, Math.max(0, totalPages - 1)));
     }, [setCurrentPage, totalPages]);
-    return (jsx(Flex, { justify: "end", dataTestId: dataTestId, children: jsxs(Flex, { className: "h-9 gap-0 divide-x rounded-md border border-slate-300 bg-white dark:divide-slate-700 dark:border-slate-700 dark:bg-slate-800", children: [jsx(PaginationItem, { title: "First page", onClick: () => setCurrentPage(0), disabled: !currentPage || disabled, dataTestId: `${dataTestId}-first-page`, children: jsx(ChevronsLeftIcon, { className: "h-4 w-4" }) }), jsx(PaginationItem, { title: "Previous page", onClick: () => currentPage && setCurrentPage(currentPage - 1), disabled: !currentPage || disabled, dataTestId: `${dataTestId}-previous-page`, children: jsx(ChevronLeftIcon, { className: "h-4 w-4" }) }), pagination.map((page, index) => (jsx(PaginationItem, { active: page !== '...' && page - 1 === currentPage, title: page !== '...' ? `Page ${page}` : undefined, onClick: page !== '...' ? () => setCurrentPage(page - 1) : undefined, disabled: page === '...' || disabled, dataTestId: `${dataTestId}-page-${page}`, children: page }, index))), jsx(PaginationItem, { title: "Next page", onClick: () => currentPage + 1 < totalPages && setCurrentPage(currentPage + 1), disabled: currentPage + 1 === totalPages || disabled, dataTestId: `${dataTestId}-next-page`, children: jsx(ChevronRightIcon, { className: "h-4 w-4" }) }), jsx(PaginationItem, { title: "Last page", onClick: () => setCurrentPage(Math.floor(totalItems && !(totalItems % pageSize)
+    return (jsx(Flex, { justify: "end", dataTestId: dataTestId, children: jsxs(Flex, { className: "h-9 gap-0 divide-x rounded-md border border-slate-300 bg-white dark:divide-slate-700 dark:border-slate-700 dark:bg-slate-800", children: [jsx(PaginationItem, { title: "First page", onClick: () => setCurrentPage(0), disabled: !currentPage || disabled, dataTestId: `${dataTestId}-first-page`, children: jsx(ChevronsLeftIcon, { className: "h-4 w-4" }) }), jsx(PaginationItem, { title: "Previous page", onClick: () => currentPage && setCurrentPage(currentPage - 1), disabled: !currentPage || disabled, dataTestId: `${dataTestId}-previous-page`, children: jsx(ChevronLeftIcon, { className: "h-4 w-4" }) }), pagination.map((page, index) => (jsx(PaginationItem, { active: page !== '...' && page - 1 === currentPage, title: page !== '...' ? `Page ${page}` : undefined, onClick: page !== '...' ? () => setCurrentPage(page - 1) : undefined, disabled: page === '...' || disabled, dataTestId: `${dataTestId}-page-${page}`, children: page }, index))), jsx(PaginationItem, { title: "Next page", onClick: () => currentPage + 1 < totalPages && setCurrentPage(currentPage + 1), disabled: !totalPages || currentPage + 1 === totalPages || disabled, dataTestId: `${dataTestId}-next-page`, children: jsx(ChevronRightIcon, { className: "h-4 w-4" }) }), jsx(PaginationItem, { title: "Last page", onClick: () => setCurrentPage(Math.floor(totalItems && !(totalItems % pageSize)
                         ? (totalItems - 1) / pageSize
-                        : totalItems / pageSize)), disabled: currentPage + 1 === totalPages || disabled, dataTestId: `${dataTestId}-last-page`, children: jsx(ChevronsRightIcon, { className: "h-4 w-4" }) })] }) }));
+                        : totalItems / pageSize)), disabled: !totalPages || currentPage + 1 === totalPages || disabled, dataTestId: `${dataTestId}-last-page`, children: jsx(ChevronsRightIcon, { className: "h-4 w-4" }) })] }) }));
 };
 const PaginationItem = (_a) => {
     var { children, active, disabled } = _a, props = __rest(_a, ["children", "active", "disabled"]);
@@ -1511,7 +1511,7 @@ const $Table = (_a) => {
 };
 const TableHead = (_a) => {
     var { children, className, dataTestId = 'table-head' } = _a, props = __rest(_a, ["children", "className", "dataTestId"]);
-    return (jsx("thead", Object.assign({ className: cn('border-b bg-slate-100 text-slate-800 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300', className), "data-testid": dataTestId }, props, { children: children })));
+    return (jsx("thead", Object.assign({ className: cn('bg-background border-b text-slate-800 dark:border-slate-700 dark:text-slate-300', className), "data-testid": dataTestId }, props, { children: children })));
 };
 const TableHeadCell = (_a) => {
     var { children, className, dataTestId = 'table-head-cell' } = _a, props = __rest(_a, ["children", "className", "dataTestId"]);
@@ -1519,7 +1519,7 @@ const TableHeadCell = (_a) => {
 };
 const TableBody = (_a) => {
     var { children, className, dataTestId = 'table-body' } = _a, props = __rest(_a, ["children", "className", "dataTestId"]);
-    return (jsx("tbody", Object.assign({ className: cn('divide-y divide-slate-200 bg-slate-50/80 dark:divide-slate-700 dark:bg-slate-900', className), "data-testid": dataTestId }, props, { children: children })));
+    return (jsx("tbody", Object.assign({ className: cn('bg-background divide-y divide-slate-200 dark:divide-slate-700', className), "data-testid": dataTestId }, props, { children: children })));
 };
 const TableRow = (_a) => {
     var { children, dataTestId = 'table-row' } = _a, props = __rest(_a, ["children", "dataTestId"]);
@@ -1531,7 +1531,7 @@ const TableCell = (_a) => {
 };
 const TableFooter = (_a) => {
     var { children, className, dataTestId = 'table-footer' } = _a, props = __rest(_a, ["children", "className", "dataTestId"]);
-    return (jsx("tfoot", Object.assign({ className: cn('bg-slate-100 text-slate-800 dark:bg-slate-800 dark:text-slate-300', className), "data-testid": dataTestId }, props, { children: children })));
+    return (jsx("tfoot", Object.assign({ className: cn('bg-background text-slate-800 dark:text-slate-300', className), "data-testid": dataTestId }, props, { children: children })));
 };
 const Table = Object.assign($Table, {
     Head: TableHead,
@@ -1629,7 +1629,7 @@ function DataTable({ className, columns, rows, sorting, pagination, actions = []
 }
 const ExpandButton = ({ folded, foldComponent, unfoldComponent, onClick, dataTestId, }) => {
     const Icon = folded ? unfoldComponent : foldComponent;
-    return (jsx(Icon, { className: "h-6 w-6 cursor-pointer rounded p-1 hover:bg-slate-300 hover:dark:bg-slate-600", onClick: onClick, "data-testid": dataTestId }));
+    return (jsx(Icon, { className: "h-6 w-6 cursor-pointer rounded-sm p-1 hover:bg-slate-300 hover:dark:bg-slate-600", onClick: onClick, "data-testid": dataTestId }));
 };
 
 const $Dialog = (props) => (jsx(DialogPrimitive.Root, Object.assign({}, props)));
@@ -1644,7 +1644,7 @@ const DialogOverlay = (_a) => {
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 const DialogContent = (_a) => {
     var { className, fullScreen, children, dataTestId = 'dialog-content' } = _a, props = __rest(_a, ["className", "fullScreen", "children", "dataTestId"]);
-    return (jsxs(DialogPortal, { children: [jsx(DialogOverlay, { dataTestId: `${dataTestId}-overlay` }), jsxs(DialogPrimitive.Content, Object.assign({ className: cn('bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]', 'fixed left-[50%] top-[50%] z-50 flex max-h-[95dvh] w-full max-w-lg translate-x-[-50%] translate-y-[-50%] flex-col gap-4 rounded-lg border p-4 shadow-lg duration-200', className, fullScreen && 'h-full max-h-none w-full max-w-none rounded-none'), "aria-describedby": "dialog-content", "data-testid": dataTestId }, props, { children: [children, jsx(DialogPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-2 top-2 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none", asChild: true, "data-testid": `${dataTestId}-close-button`, children: jsx(Button, { prefixIcon: XIcon, size: "small", variant: "text" }) }), jsx(DialogPrimitive.Description, { className: "hidden" })] }))] }));
+    return (jsxs(DialogPortal, { children: [jsx(DialogOverlay, { dataTestId: `${dataTestId}-overlay` }), jsxs(DialogPrimitive.Content, Object.assign({ className: cn('bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]', 'fixed top-[50%] left-[50%] z-50 flex max-h-[95dvh] w-full max-w-lg translate-x-[-50%] translate-y-[-50%] flex-col gap-4 rounded-lg border p-4 shadow-lg duration-200', className, fullScreen && 'h-full max-h-none w-full max-w-none rounded-none'), "aria-describedby": "dialog-content", "data-testid": dataTestId }, props, { children: [children, jsx(DialogPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-2 right-2 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", asChild: true, "data-testid": `${dataTestId}-close-button`, children: jsx(Button, { prefixIcon: XIcon, size: "small", variant: "text" }) }), jsx(DialogPrimitive.Description, { className: "hidden" })] }))] }));
 };
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 const DialogHeader = (_a) => {
@@ -1704,7 +1704,7 @@ const sheetVariants = cva('fixed flex flex-col z-50 gap-4 bg-background p-4 shad
 });
 const SheetContent = (_a) => {
     var { side = 'right', className, children, dataTestId = 'sheet-content' } = _a, props = __rest(_a, ["side", "className", "children", "dataTestId"]);
-    return (jsxs(SheetPortal, { children: [jsx(SheetOverlay, { dataTestId: `${dataTestId}-overlay` }), jsxs(DialogPrimitive.Content, Object.assign({ className: cn(sheetVariants({ side }), className), "data-testid": dataTestId }, props, { children: [children, jsx(DialogPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-2 top-2 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none", asChild: true, "data-testid": `${dataTestId}-close-button`, children: jsx(Button, { prefixIcon: XIcon, size: "small", variant: "text" }) }), jsx(DialogPrimitive.Description, { className: "hidden" })] }))] }));
+    return (jsxs(SheetPortal, { children: [jsx(SheetOverlay, { dataTestId: `${dataTestId}-overlay` }), jsxs(DialogPrimitive.Content, Object.assign({ className: cn(sheetVariants({ side }), className), "data-testid": dataTestId }, props, { children: [children, jsx(DialogPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-2 right-2 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", asChild: true, "data-testid": `${dataTestId}-close-button`, children: jsx(Button, { prefixIcon: XIcon, size: "small", variant: "text" }) }), jsx(DialogPrimitive.Description, { className: "hidden" })] }))] }));
 };
 SheetContent.displayName = DialogPrimitive.Content.displayName;
 const SheetHeader = (_a) => {
@@ -1778,7 +1778,7 @@ function ListSorterDialog({ className, open, title, items, idResolver, renderer,
         }
     }, [items, open]);
     const preFinish = () => onSubmit(sortedItems);
-    const customRenderer = (item, index, listeners) => (jsxs(Flex, { align: "center", className: "gap-4 p-4 focus:outline-none dark:bg-slate-900 hover:dark:bg-slate-800", "data-testid": `${dataTestId}-item-${index}`, children: [jsx(Flex, Object.assign({ align: "center", justify: "center", className: "cursor-move rounded-lg p-2 hover:bg-slate-200 dark:hover:bg-slate-700", "data-testid": `${dataTestId}-drag-handle-${index}` }, listeners, { children: jsx(ArrowUpDownIcon, { className: "h-5 w-5" }) })), renderer(item, index, listeners)] }));
+    const customRenderer = (item, index, listeners) => (jsxs(Flex, { align: "center", className: "gap-4 p-4 focus:outline-hidden dark:bg-slate-900 hover:dark:bg-slate-800", "data-testid": `${dataTestId}-item-${index}`, children: [jsx(Flex, Object.assign({ align: "center", justify: "center", className: "cursor-move rounded-lg p-2 hover:bg-slate-200 dark:hover:bg-slate-700", "data-testid": `${dataTestId}-drag-handle-${index}` }, listeners, { children: jsx(ArrowUpDownIcon, { className: "h-5 w-5" }) })), renderer(item, index, listeners)] }));
     return (jsx(Dialog, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxs(Dialog.Content, { className: className, onPointerDownOutside: (event) => event.preventDefault(), dataTestId: `${dataTestId}-content`, children: [jsx(Dialog.Header, { dataTestId: `${dataTestId}-header`, children: jsx(Dialog.Title, { dataTestId: `${dataTestId}-title`, children: title }) }), jsx(ListSorter, { className: "divide-y overflow-auto rounded-lg border dark:divide-slate-700 dark:border-slate-700 dark:text-white", items: sortedItems, idResolver: idResolver, renderer: customRenderer, onChange: setSortedItems, dataTestId: `${dataTestId}-sorter` }), jsxs(Dialog.Footer, { dataTestId: `${dataTestId}-footer`, children: [jsx(Dialog.Close, { asChild: true, children: jsx(Button, { color: "red", dataTestId: `${dataTestId}-cancel-button`, children: cancelLabel !== null && cancelLabel !== void 0 ? cancelLabel : 'Cancel' }) }), jsx(Button, { color: "green", onClick: preFinish, dataTestId: `${dataTestId}-submit-button`, children: submitLabel !== null && submitLabel !== void 0 ? submitLabel : 'Submit' })] })] }) }));
 }
 
@@ -1866,22 +1866,22 @@ const SidebarComp = (_a) => {
     var { side = 'left', variant = 'sidebar', collapsible = 'offcanvas', className, children, dataTestId = 'sidebar' } = _a, props = __rest(_a, ["side", "variant", "collapsible", "className", "children", "dataTestId"]);
     const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
     if (collapsible === 'none') {
-        return (jsx("div", Object.assign({ "data-testid": dataTestId, className: cn('bg-sidebar text-sidebar-foreground flex h-full w-[--sidebar-width] flex-col', className) }, props, { children: children })));
+        return (jsx("div", Object.assign({ "data-testid": dataTestId, className: cn('bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col', className) }, props, { children: children })));
     }
     if (isMobile) {
-        return (jsx(Sheet, Object.assign({ open: openMobile, onOpenChange: setOpenMobile }, props, { children: jsx(Sheet.Content, { "data-testid": dataTestId, "data-sidebar": "sidebar", "data-mobile": "true", className: "bg-sidebar text-sidebar-foreground w-[--sidebar-width] p-0 [&>button]:hidden", style: {
+        return (jsx(Sheet, Object.assign({ open: openMobile, onOpenChange: setOpenMobile }, props, { children: jsx(Sheet.Content, { "data-testid": dataTestId, "data-sidebar": "sidebar", "data-mobile": "true", className: "bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden", style: {
                     '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
                 }, side: side, children: jsx("div", { className: "flex h-full w-full flex-col", children: children }) }) })));
     }
-    return (jsxs("div", { className: "text-sidebar-foreground group peer hidden md:block", "data-state": state, "data-collapsible": state === 'collapsed' ? collapsible : '', "data-variant": variant, "data-side": side, children: [jsx("div", { className: cn('relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear', 'group-data-[collapsible=offcanvas]:w-0', 'group-data-[side=right]:rotate-180', variant === 'floating' || variant === 'inset'
-                    ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'
-                    : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]') }), jsx("div", Object.assign({ className: cn('fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex', side === 'left'
+    return (jsxs("div", { className: "text-sidebar-foreground group peer hidden md:block", "data-state": state, "data-collapsible": state === 'collapsed' ? collapsible : '', "data-variant": variant, "data-side": side, children: [jsx("div", { className: cn('relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear', 'group-data-[collapsible=offcanvas]:w-0', 'group-data-[side=right]:rotate-180', variant === 'floating' || variant === 'inset'
+                    ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.2))]'
+                    : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)') }), jsx("div", Object.assign({ className: cn('fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex', side === 'left'
                     ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
                     : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]', 
                 // Adjust the padding for floating and inset variants.
                 variant === 'floating' || variant === 'inset'
-                    ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
-                    : 'border-sidebar-border group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l', className) }, props, { "data-testid": dataTestId, "data-state": state, children: jsx("div", { "data-sidebar": "sidebar", className: "bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow", children: children }) }))] }));
+                    ? 'p-2 pr-0 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.2)_+2px)]'
+                    : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l', className) }, props, { "data-testid": dataTestId, "data-state": state, children: jsx("div", { "data-sidebar": "sidebar", className: "bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm", children: children }) }))] }));
 };
 SidebarComp.displayName = 'Sidebar';
 const SidebarTrigger = (_a) => {
@@ -1896,12 +1896,12 @@ SidebarTrigger.displayName = 'SidebarTrigger';
 const SidebarRail = (_a) => {
     var { className, dataTestId = 'sidebar-rail' } = _a, props = __rest(_a, ["className", "dataTestId"]);
     const { toggleSidebar } = useSidebar();
-    return (jsx("button", Object.assign({ "data-testid": dataTestId, "data-sidebar": "rail", "aria-label": "Toggle Sidebar", tabIndex: -1, onClick: toggleSidebar, title: "Toggle Sidebar", className: cn('hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex', '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize', '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize', 'group-data-[collapsible=offcanvas]:hover:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full', '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2', '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2', className) }, props)));
+    return (jsx("button", Object.assign({ "data-testid": dataTestId, "data-sidebar": "rail", "aria-label": "Toggle Sidebar", tabIndex: -1, onClick: toggleSidebar, title: "Toggle Sidebar", className: cn('hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex', '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize', '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize', 'group-data-[collapsible=offcanvas]:hover:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full', '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2', '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2', className) }, props)));
 };
 SidebarRail.displayName = 'SidebarRail';
 const SidebarInset = (_a) => {
     var { className, dataTestId = 'sidebar-inset' } = _a, props = __rest(_a, ["className", "dataTestId"]);
-    return (jsx("main", Object.assign({ "data-testid": dataTestId, className: cn('bg-background relative flex min-h-svh flex-1 flex-col', 'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow', className) }, props)));
+    return (jsx("main", Object.assign({ "data-testid": dataTestId, className: cn('bg-background relative flex w-full flex-1 flex-col', 'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2', className) }, props)));
 };
 SidebarInset.displayName = 'SidebarInset';
 const SidebarInput = (_a) => {
@@ -1937,20 +1937,20 @@ SidebarGroup.displayName = 'SidebarGroup';
 const SidebarGroupLabel = (_a) => {
     var { className, asChild = false, dataTestId = 'sidebar-group-label' } = _a, props = __rest(_a, ["className", "asChild", "dataTestId"]);
     const Comp = asChild ? Slot : 'div';
-    return (jsx(Comp, Object.assign({ "data-testid": dataTestId, "data-sidebar": "group-label", className: cn('text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-none transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0', 'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0', className) }, props)));
+    return (jsx(Comp, Object.assign({ "data-testid": dataTestId, "data-sidebar": "group-label", className: cn('text-sidebar-foreground/70 ring-sidebar-ring flex h-9 shrink-0 items-center rounded-md px-2 text-sm font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0', 'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0', className) }, props)));
 };
 SidebarGroupLabel.displayName = 'SidebarGroupLabel';
 const SidebarGroupAction = (_a) => {
     var { className, asChild = false, dataTestId = 'sidebar-group-action' } = _a, props = __rest(_a, ["className", "asChild", "dataTestId"]);
     const Comp = asChild ? Slot : 'button';
-    return (jsx(Comp, Object.assign({ "data-testid": dataTestId, "data-sidebar": "group-action", className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0', 
+    return (jsx(Comp, Object.assign({ "data-testid": dataTestId, "data-sidebar": "group-action", className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0', 
         // Increases the hit area of the button on mobile.
         'after:absolute after:-inset-2 after:md:hidden', 'group-data-[collapsible=icon]:hidden', className) }, props)));
 };
 SidebarGroupAction.displayName = 'SidebarGroupAction';
 const SidebarGroupContent = (_a) => {
     var { className, dataTestId = 'sidebar-group-content' } = _a, props = __rest(_a, ["className", "dataTestId"]);
-    return (jsx("div", Object.assign({ "data-testid": dataTestId, "data-sidebar": "group-content", className: cn('w-full text-sm', className) }, props)));
+    return (jsx("div", Object.assign({ "data-testid": dataTestId, "data-sidebar": "group-content", className: cn('w-full', className) }, props)));
 };
 SidebarGroupContent.displayName = 'SidebarGroupContent';
 const SidebarMenu = (_a) => {
@@ -1963,16 +1963,16 @@ const SidebarMenuItem = (_a) => {
     return (jsx("li", Object.assign({ "data-testid": dataTestId, "data-sidebar": "menu-item", className: cn('group/menu-item relative', className) }, props)));
 };
 SidebarMenuItem.displayName = 'SidebarMenuItem';
-const sidebarMenuButtonVariants = cva('peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', {
+const sidebarMenuButtonVariants = cva('cursor-pointer peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', {
     variants: {
         variant: {
             default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
-            outline: 'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
+            outline: 'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]',
         },
         size: {
-            default: 'h-8 text-sm',
-            sm: 'h-7 text-xs',
-            lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',
+            default: 'h-9',
+            sm: 'h-7 text-sm',
+            lg: 'h-12 text-md group-data-[collapsible=icon]:!p-0',
         },
     },
     defaultVariants: {
@@ -1999,7 +1999,7 @@ SidebarMenuButton.displayName = 'SidebarMenuButton';
 const SidebarMenuAction = (_a) => {
     var { className, asChild = false, showOnHover = false, dataTestId = 'sidebar-menu-action' } = _a, props = __rest(_a, ["className", "asChild", "showOnHover", "dataTestId"]);
     const Comp = asChild ? Slot : 'button';
-    return (jsx(Comp, Object.assign({ "data-testid": dataTestId, "data-sidebar": "menu-action", className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0', 
+    return (jsx(Comp, Object.assign({ "data-testid": dataTestId, "data-sidebar": "menu-action", className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0', 
         // Increases the hit area of the button on mobile.
         'after:absolute after:-inset-2 after:md:hidden', 'peer-data-[size=sm]/menu-button:top-1', 'peer-data-[size=default]/menu-button:top-1.5', 'peer-data-[size=lg]/menu-button:top-2.5', 'group-data-[collapsible=icon]:hidden', showOnHover &&
             'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0', className) }, props)));
@@ -2007,7 +2007,7 @@ const SidebarMenuAction = (_a) => {
 SidebarMenuAction.displayName = 'SidebarMenuAction';
 const SidebarMenuBadge = (_a) => {
     var { className, dataTestId = 'sidebar-menu-badge' } = _a, props = __rest(_a, ["className", "dataTestId"]);
-    return (jsx("div", Object.assign({ "data-testid": dataTestId, "data-sidebar": "menu-badge", className: cn('text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums', 'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground', 'peer-data-[size=sm]/menu-button:top-1', 'peer-data-[size=default]/menu-button:top-1.5', 'peer-data-[size=lg]/menu-button:top-2.5', 'group-data-[collapsible=icon]:hidden', className) }, props)));
+    return (jsx("div", Object.assign({ "data-testid": dataTestId, "data-sidebar": "menu-badge", className: cn('text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none', 'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground', 'peer-data-[size=sm]/menu-button:top-1', 'peer-data-[size=default]/menu-button:top-1.5', 'peer-data-[size=lg]/menu-button:top-2.5', 'group-data-[collapsible=icon]:hidden', className) }, props)));
 };
 SidebarMenuBadge.displayName = 'SidebarMenuBadge';
 const SidebarMenuSkeleton = (_a) => {
@@ -2016,7 +2016,7 @@ const SidebarMenuSkeleton = (_a) => {
     const width = useMemo(() => {
         return `${Math.floor(Math.random() * 40) + 50}%`;
     }, []);
-    return (jsxs("div", Object.assign({ "data-testid": dataTestId, "data-sidebar": "menu-skeleton", className: cn('flex h-8 items-center gap-2 rounded-md px-2', className) }, props, { children: [showIcon && jsx(Skeleton, { className: "size-4 rounded-md", "data-sidebar": "menu-skeleton-icon" }), jsx(Skeleton, { className: "h-4 max-w-[--skeleton-width] flex-1", "data-sidebar": "menu-skeleton-text", style: {
+    return (jsxs("div", Object.assign({ "data-testid": dataTestId, "data-sidebar": "menu-skeleton", className: cn('flex h-9 items-center gap-2 rounded-md px-2', className) }, props, { children: [showIcon && jsx(Skeleton, { className: "size-4 rounded-md", "data-sidebar": "menu-skeleton-icon" }), jsx(Skeleton, { className: "h-4 max-w-[--skeleton-width] flex-1", "data-sidebar": "menu-skeleton-text", style: {
                     '--skeleton-width': width,
                 } })] })));
 };
@@ -2034,7 +2034,7 @@ SidebarMenuSubItem.displayName = 'SidebarMenuSubItem';
 const SidebarMenuSubButton = (_a) => {
     var { asChild = false, size = 'md', isActive, className, dataTestId = 'sidebar-menu-sub-button' } = _a, props = __rest(_a, ["asChild", "size", "isActive", "className", "dataTestId"]);
     const Comp = asChild ? Slot : 'button';
-    return (jsx(Comp, Object.assign({ "data-testid": dataTestId, "data-sidebar": "menu-sub-button", "data-size": size, "data-active": isActive, className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 w-full min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', 'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground', size === 'sm' && 'text-xs', size === 'md' && 'text-sm', 'group-data-[collapsible=icon]:hidden', className) }, props)));
+    return (jsx(Comp, Object.assign({ "data-testid": dataTestId, "data-sidebar": "menu-sub-button", "data-size": size, "data-active": isActive, className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-8 w-full min-w-0 -translate-x-px cursor-pointer items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden 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-sm', size === 'md' && 'text-md', 'group-data-[collapsible=icon]:hidden', className) }, props)));
 };
 SidebarMenuSubButton.displayName = 'SidebarMenuSubButton';
 const Sidebar = Object.assign(SidebarComp, {
@@ -2065,11 +2065,12 @@ const Navbar = ({ className, sidebarTriggerClassName, leftSlot, rightSlot, dataT
 
 const Layout = (_a) => {
     var { children, className } = _a, _b = _a.sidebarProps, { basePath, header, items, extraContent, footer } = _b, sidebarProps = __rest(_b, ["basePath", "header", "items", "extraContent", "footer"]), { navbarProps, NavLink, useLocation } = _a;
-    return (jsxs(Flex, { className: "h-screen w-screen gap-0 text-black dark:bg-slate-900 dark:text-white", children: [jsxs(Sidebar, Object.assign({ collapsible: "icon" }, sidebarProps, { children: [header && (jsx(Sidebar.Header, { children: jsx(Sidebar.Menu, { children: jsx(Sidebar.MenuItem, { children: header }) }) })), jsxs(Sidebar.Content, { className: "gap-0", children: [items
+    const Wrapper = ({ children }) => sidebarProps.variant === 'inset' ? (jsx(Block, { className: "overflow-hidden p-2", fullHeight: true, fullWidth: true, children: jsx(Block, { className: "bg-background overflow-hidden rounded-xl shadow-sm", fullHeight: true, fullWidth: true, children: children }) })) : (children);
+    return (jsxs(Flex, { className: "bg-sidebar h-screen w-screen gap-0 text-black dark:text-white", children: [jsxs(Sidebar, Object.assign({ collapsible: "icon" }, sidebarProps, { className: cn('h-full overflow-hidden', sidebarProps.className), children: [header && (jsx(Sidebar.Header, { children: jsx(Sidebar.Menu, { children: jsx(Sidebar.MenuItem, { children: header }) }) })), jsxs(Sidebar.Content, { className: "gap-0", children: [items
                                 .filter((item) => !item.hidden)
                                 .map((item, index) => item.type === 'item' ? (jsx(Sidebar.Group, { children: jsx(Sidebar.Menu, { children: jsx(RenderSideBarItem, Object.assign({ basePath: basePath }, item, { NavLink: NavLink, useLocation: useLocation })) }) }, index)) : (jsxs(Sidebar.Group, { children: [item.title && jsx(Sidebar.GroupLabel, { children: item.title }), jsx(Sidebar.GroupContent, { children: jsx(Sidebar.Menu, { children: item.items
                                                 .filter((subItem) => !subItem.hidden)
-                                                .map((subItem, index) => (jsx(RenderSideBarItem, Object.assign({ basePath: basePath }, subItem, { NavLink: NavLink, useLocation: useLocation }), index))) }) })] }, index))), extraContent] }), footer && (jsx(Sidebar.Footer, { children: jsx(Sidebar.Menu, { children: jsx(Sidebar.MenuItem, { children: footer }) }) })), jsx(Sidebar.Rail, {})] })), jsxs(Flex, { className: "gap-0 overflow-hidden", direction: "column", fullHeight: true, fullWidth: true, children: [navbarProps && jsx(Navbar, Object.assign({}, navbarProps)), jsx(Flex, { className: cn('overflow-hidden p-3', className), direction: "column", fullWidth: true, fullHeight: true, children: children })] })] }));
+                                                .map((subItem, index) => (jsx(RenderSideBarItem, Object.assign({ basePath: basePath }, subItem, { NavLink: NavLink, useLocation: useLocation }), index))) }) })] }, index))), extraContent] }), footer && (jsx(Sidebar.Footer, { children: jsx(Sidebar.Menu, { children: jsx(Sidebar.MenuItem, { children: footer }) }) })), sidebarProps.variant === 'sidebar' && jsx(Sidebar.Rail, {})] })), jsx(Wrapper, { children: jsxs(Flex, { className: "gap-0 overflow-hidden", direction: "column", fullWidth: true, fullHeight: true, children: [navbarProps && jsx(Navbar, Object.assign({}, navbarProps)), jsx(Flex, { className: cn('overflow-hidden p-3', className), direction: "column", fullWidth: true, fullHeight: true, children: children })] }) })] }));
 };
 const RenderSideBarItem = ({ basePath = '/', pathname, title, Icon, items, NavLink, useLocation }) => {
     const location = useLocation();
@@ -2094,7 +2095,7 @@ const PopoverTrigger = (_a) => {
 };
 const PopoverContent = (_a) => {
     var { className, align = 'center', sideOffset = 4, container, dataTestId = 'popover-content' } = _a, props = __rest(_a, ["className", "align", "sideOffset", "container", "dataTestId"]);
-    return (jsx(PopoverPrimitive.Portal, { container: container, children: jsx(PopoverPrimitive.Content, Object.assign({ align: align, sideOffset: sideOffset, "data-testid": dataTestId, className: cn('z-50 rounded-md border bg-white p-1 shadow-md outline-none dark:border-slate-700 dark:bg-slate-900 dark:text-white', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', 'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', className) }, props)) }));
+    return (jsx(PopoverPrimitive.Portal, { container: container, children: jsx(PopoverPrimitive.Content, Object.assign({ align: align, sideOffset: sideOffset, "data-testid": dataTestId, className: cn('z-50 rounded-md border bg-white p-1 shadow-md outline-hidden dark:border-slate-700 dark:bg-slate-900 dark:text-white', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', 'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', className) }, props)) }));
 };
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 const Popover = Object.assign($Popover, {
@@ -2112,7 +2113,7 @@ const ResizablePanel = (_a) => {
 };
 const ResizableHandle = (_a) => {
     var { withHandle, className, dataTestId = 'resizable-handle' } = _a, props = __rest(_a, ["withHandle", "className", "dataTestId"]);
-    return (jsx(ResizablePrimitive.PanelResizeHandle, Object.assign({ className: cn('bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1', 'data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90', className), "data-testid": dataTestId }, props, { children: withHandle && (jsx("div", { className: "bg-border z-10 flex h-4 w-3 items-center justify-center rounded-sm border", "data-testid": `${dataTestId}-handle`, children: jsx(GripVertical, { className: "h-2.5 w-2.5" }) })) })));
+    return (jsx(ResizablePrimitive.PanelResizeHandle, Object.assign({ className: cn('bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden', 'data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90', className), "data-testid": dataTestId }, props, { children: withHandle && (jsx("div", { className: "bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border", "data-testid": `${dataTestId}-handle`, children: jsx(GripVertical, { className: "h-2.5 w-2.5" }) })) })));
 };
 const Resizable = {
     PanelGroup: ResizablePanelGroup,
@@ -2122,7 +2123,7 @@ const Resizable = {
 
 const Switch = (_a) => {
     var { className } = _a, _b = _a.thumbProps, _c = _b === void 0 ? {} : _b, { className: thumbClassName } = _c, thumbProps = __rest(_c, ["className"]), { dataTestId = 'switch' } = _a, props = __rest(_a, ["className", "thumbProps", "dataTestId"]);
-    return (jsx(SwitchPrimitives.Root, Object.assign({ className: cn('peer inline-flex h-[calc(1.5rem+6px)] w-[calc(3rem+6px)] shrink-0 cursor-pointer items-center rounded-full border-[3px] border-transparent', 'transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-600 focus-visible:ring-offset-2', 'focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-blue-600 data-[state=unchecked]:bg-slate-300', 'dark:focus-visible:ring-slate-200 dark:focus-visible:ring-offset-slate-800 dark:data-[state=checked]:bg-blue-700 dark:data-[state=unchecked]:bg-slate-700', className), "data-testid": dataTestId }, props, { children: jsx(SwitchPrimitives.Thumb, Object.assign({ className: cn('pointer-events-none block h-6 w-6 rounded-full bg-white shadow-lg ring-0 transition-transform', 'data-[state=checked]:translate-x-6 data-[state=unchecked]:translate-x-0 dark:bg-slate-900', thumbClassName), "data-testid": `${dataTestId}-thumb` }, thumbProps)) })));
+    return (jsx(SwitchPrimitives.Root, Object.assign({ className: cn('peer inline-flex h-[calc(1.5rem+6px)] w-[calc(3rem+6px)] shrink-0 cursor-pointer items-center rounded-full border-[3px] border-transparent', 'transition-colors focus-visible:ring-2 focus-visible:ring-slate-600 focus-visible:ring-offset-2 focus-visible:outline-hidden', 'focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-blue-600 data-[state=unchecked]:bg-slate-300', 'dark:focus-visible:ring-slate-200 dark:focus-visible:ring-offset-slate-800 dark:data-[state=checked]:bg-blue-700 dark:data-[state=unchecked]:bg-slate-700', className), "data-testid": dataTestId }, props, { children: jsx(SwitchPrimitives.Thumb, Object.assign({ className: cn('pointer-events-none block h-6 w-6 rounded-full bg-white shadow-lg ring-0 transition-transform', 'data-[state=checked]:translate-x-6 data-[state=unchecked]:translate-x-0 dark:bg-slate-900', thumbClassName), "data-testid": `${dataTestId}-thumb` }, thumbProps)) })));
 };
 Switch.displayName = SwitchPrimitives.Root.displayName;
 
@@ -2138,7 +2139,7 @@ const TabsList = (_a) => {
 TabsList.displayName = TabsPrimitive.List.displayName;
 const TabsTrigger = (_a) => {
     var { className, dataTestId = 'tabs-trigger' } = _a, props = __rest(_a, ["className", "dataTestId"]);
-    return (jsx(TabsPrimitive.Trigger, Object.assign({ className: cn('inline-flex w-full items-center justify-center whitespace-nowrap rounded-md px-2 py-1.5 font-medium transition-all hover:bg-slate-200 disabled:pointer-events-none disabled:opacity-50 dark:hover:bg-slate-800', 'data-[state=active]:bg-white data-[state=active]:text-black data-[state=active]:shadow dark:data-[state=active]:bg-slate-700 dark:data-[state=active]:text-white', className), "data-testid": dataTestId }, props)));
+    return (jsx(TabsPrimitive.Trigger, Object.assign({ className: cn('inline-flex w-full items-center justify-center rounded-md px-2 py-1.5 font-medium whitespace-nowrap 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-sm dark:data-[state=active]:bg-slate-700 dark:data-[state=active]:text-white', className), "data-testid": dataTestId }, props)));
 };
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 const TabsContent = (_a) => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tw-react-components",
   "description": "A set of React components build with TailwindCSS to make a nice dashboard.",
-  "version": "0.0.169",
+  "version": "0.0.173",
   "license": "MIT",
   "homepage": "https://bacali95.github.io/tw-react-components",
   "type": "module",

package/tailwindcss-plugin.cjs

@@ -18,7 +18,7 @@ module.exports = plugin(
           border: 'hsl(var(--border))',
           input: 'hsl(var(--input))',
           ring: 'hsl(var(--ring))',
-          background: 'hsl(var(--background))',
+          background: 'var(--background)',
           foreground: 'hsl(var(--foreground))',
           primary: {
             DEFAULT: 'hsl(var(--primary))',
@@ -49,11 +49,11 @@ module.exports = plugin(
             foreground: 'hsl(var(--card-foreground))',
           },
           sidebar: {
-            DEFAULT: 'hsl(var(--sidebar-background))',
+            DEFAULT: 'var(--sidebar-background)',
             foreground: 'hsl(var(--sidebar-foreground))',
             primary: 'hsl(var(--sidebar-primary))',
             'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
-            accent: 'hsl(var(--sidebar-accent))',
+            accent: 'var(--sidebar-accent)',
             'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
             border: 'hsl(var(--sidebar-border))',
             ring: 'hsl(var(--sidebar-ring))',