@pagamio/frontend-commons-lib 0.8.237 → 0.8.239

package/lib/api/client.js

@@ -5,8 +5,8 @@ export class ApiClient {
     mockConfig;
     constructor(config) {
         this.config = {
-            timeout: 30000,
             retries: 1,
+            timeout: 30000,
             retryDelay: 1000,
             defaultHeaders: {
                 'Content-Type': 'application/json',

package/lib/auth/components/AuthPageLayout.js

@@ -7,10 +7,10 @@ export function AuthPageLayout({ title, subtitle, errorMessage, showLogo = true,
     width: 280,
     height: 250,
     className: 'mb-[2.5em]',
-}, renderInAppLayout = false, className = '', horizontal = true, children, appLabel, sideContent, sideContentClass = 'bg-gradient-to-br from-blue-500 to-blue-600', footer, }) {
+}, renderInAppLayout = false, className = '', horizontal = true, children, appLabel, sideContent, sideContentClass = 'bg-gradient-to-br from-primary-600 to-primary-800', footer, }) {
     // Split-screen layout for when sideContent is provided
     if (sideContent) {
-        return (_jsxs("div", { className: `flex h-screen overflow-hidden bg-white ${className}`, children: [_jsxs("div", { className: "flex flex-1 flex-col px-4 py-8 sm:px-6 lg:w-1/2 lg:flex-none lg:px-16 xl:px-24 bg-white overflow-y-auto", children: [_jsxs("div", { className: "flex-1 flex flex-col justify-center mx-auto w-full max-w-sm lg:w-[420px]", children: [_jsxs("div", { className: "flex flex-col items-center text-center", children: [showLogo && logo && (_jsxs("div", { className: "flex flex-col items-center mb-8", children: [_jsx("img", { src: logo.src, alt: logo.alt, width: 180, height: 160, className: "mb-4" }), appLabel && _jsx(AppBanner, { text: appLabel })] })), _jsx("h2", { "data-testid": "auth-page-title", className: "text-2xl font-bold tracking-tight text-neutral-900 dark:text-white sm:text-3xl", children: title }), _jsx("p", { "data-testid": "auth-page-subtitle", className: "mt-2 text-sm text-neutral-600 dark:text-neutral-400", children: subtitle })] }), errorMessage && (_jsx("div", { "data-testid": "login-error-alert", className: "mt-6 rounded-md bg-red-50 p-4 text-sm text-red-700", children: errorMessage })), _jsx("div", { className: "mt-8", children: children })] }), footer && _jsx("div", { className: "mt-8 mx-auto w-full max-w-sm lg:w-[420px]", children: footer })] }), _jsx("div", { className: `relative hidden w-0 flex-1 lg:block lg:w-1/2 ${sideContentClass}`, children: sideContent })] }));
+        return (_jsxs("div", { className: `flex h-screen overflow-hidden bg-white ${className}`, children: [_jsx("div", { className: "flex flex-1 flex-col px-4 py-8 sm:px-6 lg:w-1/2 lg:flex-none lg:px-16 xl:px-24 bg-white overflow-y-auto", children: _jsxs("div", { className: "flex flex-col justify-center mx-auto w-full max-w-sm lg:w-[420px] my-auto", children: [_jsxs("div", { className: "flex flex-col items-center text-center", children: [showLogo && logo && (_jsxs("div", { className: "flex flex-col items-center mb-8", children: [_jsx("img", { src: logo.src, alt: logo.alt, width: 180, height: 160, className: "mb-4" }), appLabel && _jsx(AppBanner, { text: appLabel })] })), _jsx("h2", { "data-testid": "auth-page-title", className: "text-2xl font-bold tracking-tight text-neutral-900 dark:text-white sm:text-3xl", children: title }), _jsx("p", { "data-testid": "auth-page-subtitle", className: "mt-2 text-sm text-neutral-600 dark:text-neutral-400", children: subtitle })] }), errorMessage && (_jsx("div", { "data-testid": "login-error-alert", className: "mt-6 rounded-md bg-red-50 p-4 text-sm text-red-700", children: errorMessage })), _jsx("div", { className: "mt-8", children: children }), footer && _jsx("div", { className: "mt-8", children: footer })] }) }), _jsx("div", { className: `relative hidden w-0 flex-1 lg:block lg:w-1/2 overflow-hidden ${sideContentClass}`, children: sideContent })] }));
     }
     // Original Centered Card Layout
     return (_jsxs("div", { className: `-my-4 mx-auto flex w-full max-w-[640px] flex-col items-center justify-center px-4 py-8 sm:px-6 ${renderInAppLayout ? 'h-[calc(100vh-64px)]' : 'min-h-screen md:h-screen'} ${className}`, children: [showLogo && logo && (_jsxs("div", { className: "flex flex-col items-center mb-5", children: [_jsx("img", { src: logo.src, alt: logo.alt, width: logo.width, height: logo.height }), _jsx(AppBanner, { text: appLabel })] })), _jsxs(AuthCard, { className: "p-2 sm:p-3", horizontal: horizontal, children: [_jsxs("div", { children: [_jsx("h2", { "data-testid": "auth-page-title", className: "text-[1.5em] font-bold text-gray-900 dark:text-white sm:text-[1.875em]", children: title }), _jsx("h2", { "data-testid": "auth-page-subtitle", className: "text-[1em] font-medium text-gray-600 dark:text-white sm:text-[1em]", children: subtitle })] }), errorMessage && (_jsx("div", { "data-testid": "login-error-alert", className: "mt-4 rounded border border-red-400 bg-red-100 p-2 text-red-700", children: errorMessage })), children] })] }));

package/lib/auth/components/FeatureCarousel.js

@@ -11,7 +11,7 @@ export function FeatureCarousel({ features, className, interval = 5000 }) {
     }, [features.length, interval]);
     if (!features || features.length === 0)
         return null;
-    return (_jsx("div", { className: cn('relative h-full flex flex-col justify-center items-center px-12 text-white text-center', className), children: _jsxs("div", { className: "relative z-10 w-full max-w-md mx-auto", children: [features.map((feature, index) => (_jsxs("div", { className: cn('transition-all duration-700 ease-in-out absolute top-0 left-0 w-full transform flex flex-col items-center', index === activeIndex
+    return (_jsx("div", { className: cn('relative h-full flex flex-col justify-center items-center px-12 text-white text-center overflow-hidden', className), children: _jsxs("div", { className: "relative z-10 w-full max-w-md mx-auto", children: [features.map((feature, index) => (_jsxs("div", { className: cn('transition-all duration-700 ease-in-out absolute top-0 left-0 w-full transform flex flex-col items-center', index === activeIndex
                         ? 'opacity-100 translate-y-0 relative'
                         : 'opacity-0 translate-y-8 absolute pointer-events-none'), "aria-hidden": index !== activeIndex, children: [feature.icon && (_jsx("div", { className: "mb-8 flex h-24 w-24 items-center justify-center rounded-2xl bg-white/10 backdrop-blur-md shadow-xl border border-white/20", children: feature.icon })), _jsx("h2", { className: "mb-4 text-3xl font-bold tracking-tight", children: feature.title }), _jsx("p", { className: "text-lg text-primary-100 leading-relaxed font-light opacity-90", children: feature.description })] }, index))), _jsx("div", { className: "mt-16 flex gap-3 justify-center", children: features.map((_, index) => (_jsx("button", { onClick: () => setActiveIndex(index), className: cn('h-2 rounded-full transition-all duration-300', index === activeIndex ? 'w-8 bg-white' : 'w-2 bg-white/40 hover:bg-white/60'), "aria-label": `Go to slide ${index + 1}` }, index))) })] }) }));
 }

package/lib/components/ui/Calendar.js

@@ -3,33 +3,40 @@ import { DayPicker } from 'react-day-picker';
 import { cn } from '../../helpers';
 import { variantStyles } from '../ui';
 const Calendar = ({ className, classNames, showOutsideDays = true, ...props }) => {
-    return (_jsx(DayPicker, { showOutsideDays: showOutsideDays, className: cn('p-3', className), classNames: {
-            months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
-            month: 'space-y-4',
-            caption: 'flex justify-center pt-1 relative items-center',
-            caption_label: 'text-sm font-medium',
-            nav: 'space-x-1 flex items-center',
-            nav_button: cn(variantStyles.outline, 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100'),
-            nav_button_previous: 'absolute left-1',
-            nav_button_next: 'absolute right-1',
-            table: 'w-full border-collapse space-y-1',
-            head_row: 'flex',
-            head_cell: 'text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]',
-            row: 'flex w-full mt-2',
-            cell: cn('relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md', props.mode === 'range'
-                ? '[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md'
-                : '[&:has([aria-selected])]:rounded-md'),
-            day: cn(variantStyles.ghost, 'h-8 w-8 p-0 font-normal aria-selected:opacity-100'),
-            day_range_start: 'day-range-start',
-            day_range_end: 'day-range-end',
-            day_selected: 'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
-            day_today: 'bg-accent text-accent-foreground',
-            day_outside: 'day-outside text-muted-foreground opacity-50  aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',
-            day_disabled: 'text-muted-foreground opacity-50',
-            day_range_middle: 'aria-selected:bg-accent aria-selected:text-accent-foreground',
-            day_hidden: 'invisible',
-            ...classNames,
-        }, ...props }));
+    return (_jsx("div", { style: {
+            // Provide fallback CSS variables for colors
+            ['--primary']: 'var(--primary, hsl(305 38% 54%))',
+            ['--primary-foreground']: 'var(--primary-foreground, hsl(0 0% 100%))',
+            ['--accent']: 'var(--accent, hsl(305 38% 94%))',
+            ['--accent-foreground']: 'var(--accent-foreground, hsl(305 38% 20%))',
+            ['--muted-foreground']: 'var(--muted-foreground, hsl(0 0% 45%))',
+        }, children: _jsx(DayPicker, { showOutsideDays: showOutsideDays, className: cn('p-3', className), classNames: {
+                months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
+                month: 'space-y-4',
+                caption: 'flex justify-center pt-1 relative items-center',
+                caption_label: 'text-sm font-medium',
+                nav: 'space-x-1 flex items-center',
+                nav_button: cn(variantStyles.outline, 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100'),
+                nav_button_previous: 'absolute left-1',
+                nav_button_next: 'absolute right-1',
+                table: 'w-full border-collapse space-y-1',
+                head_row: 'flex',
+                head_cell: 'text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]',
+                row: 'flex w-full mt-2',
+                cell: cn('relative p-0 text-center text-sm focus-within:relative focus-within:z-20', props.mode === 'range'
+                    ? '[&:has([aria-selected].day-range-middle)]:bg-accent [&:has([aria-selected].day-range-start)]:bg-accent [&:has([aria-selected].day-range-end)]:bg-accent [&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md'
+                    : '[&:has([aria-selected])]:rounded-md [&:has([aria-selected])]:bg-accent'),
+                day: cn(variantStyles.ghost, 'h-8 w-8 p-0 font-normal aria-selected:opacity-100'),
+                day_range_start: 'day-range-start',
+                day_range_end: 'day-range-end',
+                day_selected: 'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
+                day_today: 'bg-accent text-accent-foreground',
+                day_outside: 'day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',
+                day_disabled: 'text-muted-foreground opacity-50',
+                day_range_middle: 'aria-selected:bg-accent aria-selected:text-accent-foreground rounded-none',
+                day_hidden: 'invisible',
+                ...classNames,
+            }, ...props }) }));
 };
 Calendar.displayName = 'Calendar';
 export default Calendar;

package/lib/components/ui/DateRangePickerWithPresets.js

@@ -63,8 +63,8 @@ export const defaultDatePresets = [
         label: 'Custom Range',
         value: 'custom',
         getRange: () => ({
-            from: startOfDay(subDays(new Date(), 6)),
-            to: endOfDay(new Date()),
+            from: undefined,
+            to: undefined,
         }),
     },
 ];
@@ -89,7 +89,7 @@ export const defaultDatePresets = [
  * />
  * ```
  */
-const DateRangePickerWithPresets = ({ value, onChange, presets = defaultDatePresets, selectedPreset = 'last_7_days', placeholder = 'Select date range', minDate, maxDate = new Date(), numberOfMonths = 2, className, showClearButton = true, dateFormat = 'MM/dd/yyyy', disabled = false, }) => {
+const DateRangePickerWithPresets = ({ value, onChange, presets = defaultDatePresets, selectedPreset = 'last_7_days', placeholder = 'Select date range', minDate, maxDate, numberOfMonths = 2, className, showClearButton = true, dateFormat = 'MM/dd/yyyy', disabled = false, }) => {
     const [isOpen, setIsOpen] = useState(false);
     const [tempRange, setTempRange] = useState(value);
     const [tempPreset, setTempPreset] = useState(selectedPreset);
@@ -111,11 +111,19 @@ const DateRangePickerWithPresets = ({ value, onChange, presets = defaultDatePres
     }, [value, dateFormat, placeholder]);
     // Handle preset selection
     const handlePresetSelect = (preset) => {
-        const range = preset.getRange();
-        setTempRange(range);
-        setTempPreset(preset.value);
-        // For non-custom presets, immediately apply and close
-        if (preset.value !== 'custom') {
+        // For custom preset, preserve current selection or clear it
+        if (preset.value === 'custom') {
+            setTempPreset('custom');
+            // Keep current tempRange if it exists, otherwise undefined
+            if (!tempRange?.from && !tempRange?.to) {
+                setTempRange(undefined);
+            }
+        }
+        else {
+            // For other presets, apply immediately
+            const range = preset.getRange();
+            setTempRange(range);
+            setTempPreset(preset.value);
             onChange?.(range, preset.value);
             setIsOpen(false);
         }
@@ -141,8 +149,17 @@ const DateRangePickerWithPresets = ({ value, onChange, presets = defaultDatePres
         e.stopPropagation();
         onChange?.(undefined, undefined);
     };
-    return (_jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", disabled: disabled, className: cn('w-auto justify-start text-left font-normal', !value && 'text-muted-foreground', className), children: [_jsx(CalendarIcon, { className: "mr-2 h-4 w-4" }), _jsx("span", { children: displayText }), showClearButton && value?.from && (_jsx(X, { className: "ml-2 h-4 w-4 opacity-50 hover:opacity-100 cursor-pointer", onClick: handleClear }))] }) }), _jsx(PopoverContent, { className: "w-auto p-0 bg-background border border-border shadow-lg", align: "start", sideOffset: 8, children: _jsxs("div", { className: "flex", children: [_jsx("div", { className: "border-r border-border p-2 min-w-[140px] bg-background", children: _jsx("div", { className: "flex flex-col gap-1", children: presets.map((preset) => (_jsx("button", { type: "button", onClick: () => handlePresetSelect(preset), className: cn('text-left px-3 py-2 text-sm rounded-md transition-colors', 'hover:bg-accent hover:text-accent-foreground', tempPreset === preset.value &&
-                                        'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground'), children: preset.label }, preset.value))) }) }), tempPreset === 'custom' && (_jsxs("div", { className: "p-3 bg-background", children: [_jsx(Calendar, { mode: "range", defaultMonth: tempRange?.from, selected: tempRange, onSelect: handleCalendarSelect, numberOfMonths: numberOfMonths, disabled: (date) => {
+    return (_jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", disabled: disabled, className: cn('w-auto justify-start text-left font-normal', !value && 'text-muted-foreground', className), children: [_jsx(CalendarIcon, { className: "mr-2 h-4 w-4" }), _jsx("span", { children: displayText }), showClearButton && value?.from && (_jsx(X, { className: "ml-2 h-4 w-4 opacity-50 hover:opacity-100 cursor-pointer", onClick: handleClear }))] }) }), _jsx(PopoverContent, { className: "w-auto p-0 bg-background border border-border shadow-lg", align: "start", sideOffset: 8, children: _jsxs("div", { className: "flex", style: {
+                        // Provide fallback CSS variables for colors
+                        ['--primary']: 'var(--primary, hsl(305 38% 54%))',
+                        ['--primary-foreground']: 'var(--primary-foreground, hsl(0 0% 100%))',
+                        ['--accent']: 'var(--accent, hsl(305 38% 94%))',
+                        ['--accent-foreground']: 'var(--accent-foreground, hsl(305 38% 20%))',
+                        ['--background']: 'var(--background, hsl(0 0% 100%))',
+                        ['--border']: 'var(--border, hsl(0 0% 90%))',
+                        ['--muted-foreground']: 'var(--muted-foreground, hsl(0 0% 45%))',
+                    }, children: [_jsx("div", { className: "border-r border-border p-2 min-w-[140px] bg-background", children: _jsx("div", { className: "flex flex-col gap-1", children: presets.map((preset) => (_jsx("button", { type: "button", onClick: () => handlePresetSelect(preset), className: cn('text-left px-3 py-2 text-sm rounded-md transition-colors', 'hover:bg-accent hover:text-accent-foreground', tempPreset === preset.value &&
+                                        'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground'), children: preset.label }, preset.value))) }) }), tempPreset === 'custom' && (_jsxs("div", { className: "p-3 bg-background", children: [_jsx(Calendar, { mode: "range", defaultMonth: tempRange?.from || new Date(), selected: tempRange, onSelect: handleCalendarSelect, numberOfMonths: numberOfMonths, disabled: (date) => {
                                         if (minDate && date < minDate)
                                             return true;
                                         if (maxDate && date > maxDate)

package/lib/components/ui/FilterComponent.js

@@ -1,14 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Input, MultiSelect, Select } from '@mantine/core';
-import { IconCalendar, IconSearch } from '@tabler/icons-react';
-import { format } from 'date-fns';
+import { IconSearch } from '@tabler/icons-react';
+import { endOfDay, startOfDay } from 'date-fns';
 import React from 'react';
 import { isDefaultFilterValue } from '../../shared/utils/filterUtils';
 import Button from './Button';
 import DatePicker from './DatePicker';
+import DateRangePickerWithPresets from './DateRangePickerWithPresets';
 import FilterWrapper from './FilterWrapper';
-import { Popover, PopoverContent, PopoverTrigger } from './Popover';
-import RangeDatePicker from './RangeDatePicker';
 const sharedStyles = {
     input: {
         borderRadius: '6px',
@@ -84,28 +83,24 @@ const FilterComponent = ({ filters, selectedFilters, showApplyFilterButton = tru
                                 const endDateValue = rangeKeys ? selectedFilters[rangeKeys.end] : undefined;
                                 const startDate = parseDateValue(startDateValue);
                                 const endDate = parseDateValue(endDateValue);
-                                const displayValue = startDate && endDate
-                                    ? `${format(startDate, 'dd MMM yyyy')} - ${format(endDate, 'dd MMM yyyy')}`
-                                    : (filter.placeholder ?? 'Select date range');
-                                const applyRange = (start, end) => {
+                                const dateRange = startDate && endDate
+                                    ? { from: startDate, to: endDate }
+                                    : startDate
+                                        ? { from: startDate, to: startDate }
+                                        : undefined;
+                                const handleRangeChange = (range) => {
                                     if (!rangeKeys)
                                         return;
-                                    handleFilterChange(rangeKeys.start, start);
-                                    handleFilterChange(rangeKeys.end, end);
+                                    if (range?.from) {
+                                        handleFilterChange(rangeKeys.start, startOfDay(range.from));
+                                        handleFilterChange(rangeKeys.end, range.to ? endOfDay(range.to) : endOfDay(range.from));
+                                    }
+                                    else {
+                                        handleFilterChange(rangeKeys.start, null);
+                                        handleFilterChange(rangeKeys.end, null);
+                                    }
                                 };
-                                const rangeSelection = {
-                                    startDate: startDate ?? new Date(),
-                                    endDate: endDate ?? startDate ?? new Date(),
-                                    key: name,
-                                };
-                                return (_jsxs(Popover, { open: activeRangePicker === name, onOpenChange: (open) => setActiveRangePicker(open ? name : null), children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "flex w-full items-center justify-between rounded-md border border-gray-300 bg-white px-3 py-2 text-left text-sm text-gray-700 shadow-sm transition hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(IconCalendar, { size: 16, className: "text-gray-500" }), _jsx("span", { className: !startDate || !endDate ? 'text-gray-400' : '', children: displayValue })] }) }) }), _jsx(PopoverContent, { align: "start", className: "w-auto border border-gray-200 bg-white p-0 shadow-2xl", children: _jsxs("div", { className: "p-4", children: [_jsx(RangeDatePicker, { dateRange: rangeSelection, rangeKey: name, onChange: (updatedRange) => {
-                                                            if (updatedRange.startDate) {
-                                                                applyRange(updatedRange.startDate, updatedRange.endDate ?? updatedRange.startDate);
-                                                            }
-                                                        }, months: 2, showPreview: false }), _jsxs("div", { className: "flex justify-end gap-2 pt-3", children: [_jsx(Button, { variant: "outline-primary", type: "button", onClick: () => {
-                                                                    applyRange(null, null);
-                                                                    setActiveRangePicker(null);
-                                                                }, className: "h-9 px-3", children: "Clear" }), _jsx(Button, { variant: "primary", type: "button", onClick: () => setActiveRangePicker(null), className: "h-9 px-4", children: "Done" })] })] }) })] }));
+                                return (_jsx(DateRangePickerWithPresets, { value: dateRange, onChange: handleRangeChange, placeholder: filter.placeholder ?? 'Select date range', showClearButton: true, className: "w-full" }));
                             }
                             if (type === 'date') {
                                 return (_jsx(DatePicker, { value: value || null, onChange: (date) => handleFilterChange(name, date), placeholder: filter.placeholder ?? `Select ${name}` }));

package/lib/styles.css

@@ -2916,11 +2916,6 @@ input[type="range"]::-ms-fill-lower {
 .bg-gradient-to-r {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
-.from-blue-500 {
-  --tw-gradient-from: #3F83F8 var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(63 131 248 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
 .from-cyan-400 {
   --tw-gradient-from: #22d3ee var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(34 211 238 / 0) var(--tw-gradient-to-position);
@@ -3042,9 +3037,6 @@ input[type="range"]::-ms-fill-lower {
   --tw-gradient-to: rgb(6 148 162 / 0)  var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), #0694A2 var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
-.to-blue-600 {
-  --tw-gradient-to: #1C64F2 var(--tw-gradient-to-position);
-}
 .to-cyan-500 {
   --tw-gradient-to: #06b6d4 var(--tw-gradient-to-position);
 }
@@ -3824,11 +3816,6 @@ input[type="range"]::-ms-fill-lower {
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.shadow-2xl {
-  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
-  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -6792,12 +6779,14 @@ input[type="range"]::-ms-fill-lower {
   border-top-right-radius: 0.375rem;
   border-bottom-right-radius: 0.375rem;
 }
-.\[\&\:has\(\[aria-selected\]\.day-outside\)\]\:bg-accent\/50:has([aria-selected].day-outside) {
-  background-color: hsl(var(--accent) / 0.5);
+.\[\&\:has\(\[aria-selected\]\.day-range-end\)\]\:bg-accent:has([aria-selected].day-range-end) {
+  background-color: hsl(var(--accent));
 }
-.\[\&\:has\(\[aria-selected\]\.day-range-end\)\]\:rounded-r-md:has([aria-selected].day-range-end) {
-  border-top-right-radius: 0.375rem;
-  border-bottom-right-radius: 0.375rem;
+.\[\&\:has\(\[aria-selected\]\.day-range-middle\)\]\:bg-accent:has([aria-selected].day-range-middle) {
+  background-color: hsl(var(--accent));
+}
+.\[\&\:has\(\[aria-selected\]\.day-range-start\)\]\:bg-accent:has([aria-selected].day-range-start) {
+  background-color: hsl(var(--accent));
 }
 .\[\&\>\*\]\:pointer-events-none>* {
   pointer-events: none;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pagamio/frontend-commons-lib",
   "description": "Pagamio library for Frontend reusable components like the form engine and table container",
-  "version": "0.8.237",
+  "version": "0.8.239",
   "publishConfig": {
     "access": "public",
     "provenance": false