@paygreen/pgui 2.7.0 → 2.8.1

package/dist/cjs/types/components/InputDayPicker/index.d.ts

@@ -6,8 +6,11 @@ export type InputDayPickerProps = {
     onChange: Dispatch<SetStateAction<string | undefined | null>>;
     value?: string | Date;
     locale?: string;
-    variant?: string;
+    variant?: 'unstyled' | 'filled' | 'outlined';
     format?: string;
     withTime?: boolean;
+    minDate?: Date | null | undefined;
+    maxDate?: Date | null | undefined;
+    calendarFunc?: (date: any) => 'after-max-date' | 'before-min-date' | undefined;
 } & InputProps;
-export declare const InputDayPicker: ({ name, placeholder, value, onChange, locale, variant, format, withTime, ...inputProps }: InputDayPickerProps) => JSX.Element;
+export declare const InputDayPicker: ({ name, placeholder, value, onChange, locale, variant, format, withTime, minDate, maxDate, calendarFunc, ...inputProps }: InputDayPickerProps) => JSX.Element;

package/dist/cjs/types/components/InputRangePicker/index.d.ts

@@ -0,0 +1,17 @@
+import { Dispatch, SetStateAction } from 'react';
+export interface ValueProps {
+    from: Date | null | undefined;
+    to: Date | null | undefined;
+}
+export type InputRangePickerProps = {
+    fromLabel: string;
+    toLabel: string;
+    onChange: Dispatch<SetStateAction<ValueProps | undefined>>;
+    minDate?: Date | null;
+    maxDate?: Date | null;
+    format?: string;
+    value?: ValueProps;
+    withTime?: boolean;
+    variant?: 'unstyled' | 'filled' | 'outlined';
+};
+export declare const InputRangePicker: ({ fromLabel, toLabel, value, onChange, minDate, maxDate, withTime, format, variant, ...props }: InputRangePickerProps) => JSX.Element;

package/dist/cjs/types/components/NewDayPicker/index.d.ts

@@ -4,9 +4,11 @@ import 'dayjs/locale/fr';
 export type NewDayPickerProps = {
     defaultValue?: string | Date;
     onChange: (e: string | undefined) => void;
-    format: string;
     locale?: string;
     customFormat?: string;
     withTime?: boolean;
+    minDate?: Date | null;
+    maxDate?: Date | null;
+    calendarFunc?: (date: any) => 'after-max-date' | 'before-min-date' | undefined;
 };
-export declare const NewDayPicker: ({ defaultValue, onChange, locale, customFormat, withTime, ...props }: NewDayPickerProps) => JSX.Element;
+export declare const NewDayPicker: ({ defaultValue, onChange, locale, customFormat, withTime, minDate, maxDate, calendarFunc, ...props }: NewDayPickerProps) => JSX.Element;

package/dist/cjs/types/components/index.d.ts

@@ -6,6 +6,7 @@ export * from './DayPicker';
 export * from './FormGroup';
 export * from './InputDayPicker';
 export * from './InputPhone';
+export * from './InputRangePicker';
 export * from './ModalResponsive';
 export * from './Pagination';
 export * from './SearchInput';

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import React__default, { useState, useRef, useEffect, useContext, createContext as createContext$1, forwardRef as forwardRef$2, Component, useCallback, useMemo, useLayoutEffect, createElement, Fragment, Children } from 'react';
-import { forwardRef as forwardRef$1, IconButton, Flex as Flex$1, createStylesContext, chakra as chakra$1, useMultiStyleConfig, useMenuItem, MenuIcon, MenuCommand, useMenuState, Icon as Icon$1, Text, useBreakpointValue, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, Box, Accordion, FormControl, FormLabel, FormHelperText, FormErrorMessage, SlideFade, useTheme as useTheme$1, VStack, Stack, Button as Button$1, HStack, InputGroup, InputLeftElement, Input as Input$4, useDisclosure, Popover, PopoverTrigger, InputRightElement, PopoverContent, PopoverArrow, useOutsideClick, List, ListItem, Drawer, DrawerOverlay, DrawerContent, DrawerCloseButton, Modal, ModalOverlay, ModalContent, ModalCloseButton, useControllableState, useMergeRefs, useColorModeValue, useStyleConfig as useStyleConfig$1, useToken, useBreakpoint, extendTheme } from '@chakra-ui/react';
+import { forwardRef as forwardRef$1, IconButton, Flex as Flex$1, createStylesContext, chakra as chakra$1, useMultiStyleConfig, useMenuItem, MenuIcon, MenuCommand, useMenuState, Icon as Icon$1, Text, useBreakpointValue, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, Box, Accordion, FormControl, FormLabel, FormHelperText, FormErrorMessage, SlideFade, useTheme as useTheme$1, VStack, Stack, Button as Button$1, HStack, InputGroup, InputLeftElement, Input as Input$4, useDisclosure, Popover, PopoverTrigger, InputRightElement, PopoverContent, PopoverArrow, useOutsideClick, List, ListItem, Wrap, WrapItem, Drawer, DrawerOverlay, DrawerContent, DrawerCloseButton, Modal, ModalOverlay, ModalContent, ModalCloseButton, useControllableState, useMergeRefs, useColorModeValue, useStyleConfig as useStyleConfig$1, useToken, useBreakpoint, extendTheme } from '@chakra-ui/react';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -42826,7 +42826,7 @@ var containsAnyLetters = function (str) {
     return /[a-zA-Z]/.test(str);
 };
 var NewDayPicker = function (_a) {
-    var defaultValue = _a.defaultValue, onChange = _a.onChange, _b = _a.locale, locale = _b === void 0 ? 'fr' : _b, customFormat = _a.customFormat, _c = _a.withTime, withTime = _c === void 0 ? false : _c, props = __rest$2(_a, ["defaultValue", "onChange", "locale", "customFormat", "withTime"]);
+    var defaultValue = _a.defaultValue, onChange = _a.onChange, _b = _a.locale, locale = _b === void 0 ? 'fr' : _b, customFormat = _a.customFormat, _c = _a.withTime, withTime = _c === void 0 ? false : _c, minDate = _a.minDate, maxDate = _a.maxDate, calendarFunc = _a.calendarFunc, props = __rest$2(_a, ["defaultValue", "onChange", "locale", "customFormat", "withTime", "minDate", "maxDate", "calendarFunc"]);
     var initialFormat = function () {
         if (locale === 'fr' && withTime)
             return "DD/MM/YYYY HH:mm";
@@ -42840,16 +42840,31 @@ var NewDayPicker = function (_a) {
     var _d = useState(defaultValue), value = _d[0], setValue = _d[1];
     var _e = useState('00:00'), timeValue = _e[0], setTimeValue = _e[1];
     var _f = useState(false), isInvalid = _f[0], setIsInvalid = _f[1];
-    var _g = useState(dayjs()
-        .set('hours', 0)
-        .set('minutes', 0)
-        .set('seconds', 0)
-        .locale(locale)
-        .format(format)), inputValue = _g[0], setInputValue = _g[1];
+    var _g = useState(dayjs(defaultValue).format(withTime ? 'DD/MM/YYYY HH:mm' : 'DD/MM/YYYY') ||
+        dayjs()
+            .set('hours', 0)
+            .set('minutes', 0)
+            .set('seconds', 0)
+            .locale(locale)
+            .format(format)), inputValue = _g[0], setInputValue = _g[1];
     var theme = useTheme$1();
     useEffect(function () {
         if (value) {
-            setInputValue(dayjs(value).format(format));
+            if (minDate || maxDate) {
+                if (minDate && dayjs(value).diff(dayjs(minDate)) < 0) {
+                    setInputValue(dayjs(minDate).format(format));
+                    setValue(minDate);
+                    onChange(dayjs(minDate).toISOString());
+                }
+                if (maxDate && dayjs(value).diff(dayjs(maxDate)) > 0) {
+                    setInputValue(dayjs(maxDate).format(format));
+                    setValue(maxDate);
+                    onChange(dayjs(maxDate).toISOString());
+                }
+            }
+            else {
+                setInputValue(dayjs(value).format(format));
+            }
             if (withTime) {
                 setTimeValue(dayjs(value).format('HH:mm'));
             }
@@ -42857,7 +42872,7 @@ var NewDayPicker = function (_a) {
         else {
             setInputValue('');
         }
-    }, [value]);
+    }, [defaultValue, value]);
     var timer = [
         '00:00',
         '00:30',
@@ -42919,15 +42934,16 @@ var NewDayPicker = function (_a) {
             borderRadius: '9999px'
         }
     };
-    return (React__default.createElement(VStack, __assign$2({ spacing: "2", maxW: "full", p: 2, w: "fit-content", maxWidth: "30rem", borderRadius: "md" }, props),
+    return (React__default.createElement(VStack, __assign$2({ spacing: "2", maxW: "full", p: 2, w: "fit-content", maxWidth: "30rem", borderRadius: "md", minH: "22.75rem" }, props),
         React__default.createElement(Stack, { direction: { base: 'column', sm: 'row' }, spacing: 2, w: "full" },
-            React__default.createElement(Calendar, { locale: locale, onChange: function (e) {
-                    setValue(e);
-                    onChange(dayjs(e).toISOString());
-                    setTimeValue('00:00');
-                    setInputValue(dayjs(e).locale(locale).format(format));
-                    setIsInvalid(false);
-                }, value: dayjs(value).toDate() }),
+            React__default.createElement(Box, { minH: "19.25rem" },
+                React__default.createElement(Calendar, { locale: locale, minDate: minDate, maxDate: maxDate, tileClassName: calendarFunc, onChange: function (e) {
+                        setValue(e);
+                        onChange(dayjs(e).toISOString());
+                        setTimeValue('00:00');
+                        setInputValue(dayjs(e).locale(locale).format(format));
+                        setIsInvalid(false);
+                    }, value: dayjs(value).toDate() })),
             withTime && (React__default.createElement(Flex$1, { backgroundColor: "gray.100", p: "2", borderRadius: "sm", h: { base: '8rem', sm: 'auto' }, w: "full", minW: "8rem", alignItems: "center" },
                 React__default.createElement(Box, { w: "full", h: "full", maxH: "16rem", overflowY: "auto", sx: customScrollBar },
                     React__default.createElement(VStack, { w: "full" }, timer.map(function (t) { return (React__default.createElement(Button$1, { key: t, size: "sm", w: "full", isActive: t === timeValue, onClick: function () {
@@ -42935,15 +42951,37 @@ var NewDayPicker = function (_a) {
                                 .set('hours', parseInt(t.slice(0, 2), 10))
                                 .set('minutes', parseInt(t.slice(-2), 10));
                             setValue(settedValue.toDate());
-                            onChange(settedValue.toISOString());
+                            if (minDate && settedValue.diff(dayjs(minDate)) < 0) {
+                                onChange(dayjs(minDate).toISOString());
+                            }
+                            else if (maxDate &&
+                                settedValue.diff(dayjs(maxDate)) > 0) {
+                                onChange(dayjs(maxDate).toISOString());
+                            }
+                            else {
+                                onChange(settedValue.toISOString());
+                            }
                             setTimeValue(t);
                             setInputValue(dayjs(settedValue.toDate()).format(format));
                             setIsInvalid(false);
                         }, _active: {
                             backgroundColor: 'white',
                             color: 'brand.600'
-                        } }, t)); })))))),
-        React__default.createElement(HStack, { w: "full" },
+                        }, isDisabled: (minDate === null
+                            ? undefined
+                            : minDate &&
+                                dayjs(value)
+                                    .set('hours', parseInt(t.slice(0, 2), 10))
+                                    .set('minutes', parseInt(t.slice(-2), 10))
+                                    .diff(dayjs(minDate)) < 0) ||
+                            (maxDate === null
+                                ? undefined
+                                : maxDate &&
+                                    dayjs(value)
+                                        .set('hours', parseInt(t.slice(0, 2), 10))
+                                        .set('minutes', parseInt(t.slice(-2), 10))
+                                        .diff(dayjs(maxDate)) > 0) }, t)); })))))),
+        React__default.createElement(HStack, { flex: "1", w: "full", alignItems: "flex-end" },
             React__default.createElement(InputGroup, { w: "full", size: "sm" },
                 React__default.createElement(InputLeftElement, { pointerEvents: "none", color: "gray.300", fontSize: "1.2em", children: React__default.createElement(Icon$1, { as: MdCalendarToday }) }),
                 React__default.createElement(Input$4, { as: InputMask, mask: withTime ? '**/**/**** **:**' : '**/**/****', value: inputValue, onChange: function (e) {
@@ -42952,9 +42990,17 @@ var NewDayPicker = function (_a) {
                             containsAnyLetters(e.target.value);
                         if (!isInvalidFormat &&
                             ((_a = dayjs(e.target.value, format)) === null || _a === void 0 ? void 0 : _a.isValid())) {
+                            onChange((_c = (_b = dayjs(e.target.value, format)) === null || _b === void 0 ? void 0 : _b.locale(locale)) === null || _c === void 0 ? void 0 : _c.toISOString());
                             setInputValue(dayjs(e.target.value, format).locale(locale).format(format));
                             setValue(dayjs(e.target.value, format).locale(locale).toDate());
-                            onChange((_c = (_b = dayjs(e.target.value, format)) === null || _b === void 0 ? void 0 : _b.locale(locale)) === null || _c === void 0 ? void 0 : _c.toISOString());
+                            if (minDate &&
+                                dayjs(e.target.value, format).diff(dayjs(minDate)) < 0) {
+                                onChange(dayjs(minDate).toISOString());
+                            }
+                            else if (maxDate &&
+                                dayjs(e.target.value, format).diff(dayjs(maxDate)) > 0) {
+                                onChange(dayjs(maxDate).toISOString());
+                            }
                             setIsInvalid(false);
                         }
                         else {
@@ -42971,7 +43017,7 @@ var NewDayPicker = function (_a) {
 dayjs.extend(customParseFormat);
 dayjs.extend(utc);
 var InputDayPicker = function (_a) {
-    var name = _a.name, placeholder = _a.placeholder, value = _a.value, onChange = _a.onChange, _b = _a.locale, locale = _b === void 0 ? 'fr' : _b, _c = _a.variant, variant = _c === void 0 ? 'filled' : _c, _d = _a.format, format = _d === void 0 ? 'DD/MM/YYYY' : _d, _e = _a.withTime, withTime = _e === void 0 ? false : _e, inputProps = __rest$2(_a, ["name", "placeholder", "value", "onChange", "locale", "variant", "format", "withTime"]);
+    var name = _a.name, placeholder = _a.placeholder, value = _a.value, onChange = _a.onChange, _b = _a.locale, locale = _b === void 0 ? 'fr' : _b, _c = _a.variant, variant = _c === void 0 ? 'filled' : _c, _d = _a.format, format = _d === void 0 ? 'DD/MM/YYYY' : _d, _e = _a.withTime, withTime = _e === void 0 ? false : _e, minDate = _a.minDate, maxDate = _a.maxDate, calendarFunc = _a.calendarFunc, inputProps = __rest$2(_a, ["name", "placeholder", "value", "onChange", "locale", "variant", "format", "withTime", "minDate", "maxDate", "calendarFunc"]);
     var _f = useDisclosure(), isOpen = _f.isOpen, onClose = _f.onClose, onToggle = _f.onToggle;
     var _g = useState(''), prev = _g[0], setPrev = _g[1];
     useEffect(function () {
@@ -42998,7 +43044,9 @@ var InputDayPicker = function (_a) {
         React__default.createElement(Popover, { closeOnBlur: true, closeOnEsc: true, isOpen: isOpen, onClose: onClose, placement: "bottom", autoFocus: true },
             React__default.createElement(PopoverTrigger, null,
                 React__default.createElement(InputGroup, null,
-                    React__default.createElement(Input$4, __assign$2({ as: Button$1, onClick: onToggle, name: name, fontWeight: "normal", justifyContent: "flex-start", variant: variant }, inputProps), value ? dayjs(value).format(format) : placeholder),
+                    React__default.createElement(Input$4, __assign$2({ as: Button$1, onClick: onToggle, name: name, fontWeight: "normal", justifyContent: "flex-start", background: variant === 'filled' ? 'gray.50' : 'white', _hover: {
+                            background: variant === 'filled' ? 'gray.100' : 'gray.50'
+                        } }, inputProps), value ? dayjs(value).format(format) : placeholder),
                     value && (React__default.createElement(InputRightElement, { onClick: function () {
                             onChange(null);
                         }, _hover: {
@@ -43009,7 +43057,7 @@ var InputDayPicker = function (_a) {
                             } }))))),
             React__default.createElement(PopoverContent, { mx: 1, width: "fit-content" },
                 React__default.createElement(PopoverArrow, null),
-                isOpen && (React__default.createElement(NewDayPicker, { locale: locale, defaultValue: value, onChange: onChange, format: format, withTime: withTime }))))));
+                isOpen && (React__default.createElement(NewDayPicker, { locale: locale, defaultValue: value, onChange: onChange, withTime: withTime, minDate: minDate, maxDate: maxDate, calendarFunc: calendarFunc }))))));
 };
 
 // This file is a workaround for a bug in web browsers' "native"
@@ -62276,10 +62324,126 @@ var InputPhone = function (_a) {
             }
         }
     }, [countryFromLocale, phoneNumber]);
-    return (React__default.createElement(InputGroup, { position: "relative", display: "block" },
+    return (React__default.createElement(InputGroup, { position: "relative", display: "block", sx: { isolation: 'auto' } },
         React__default.createElement(PhoneInput, __assign$2({ international: true, inputComponent: Input$4, numberInputProps: { paddingLeft: '4rem' }, value: phoneNumber, labels: locale === 'fr' ? fr : en, defaultCountry: country || 'FR', disabled: isDisabled, onChange: function (val) { return setPhoneNumber(val || ''); }, addInternationalOption: false, countryCallingCodeEditable: false, countryOptionsOrder: ['FR', 'GB', 'BE', 'ES', 'DE', 'IT', 'CH'], countrySelectComponent: function (selectProps) { return (React__default.createElement(SearchOnList, __assign$2({ locale: locale }, selectProps))); } }, props))));
 };
 
+var isoWeek$1 = {exports: {}};
+
+(function (module, exports) {
+	!function(e,t){module.exports=t();}(commonjsGlobal,(function(){var e="day";return function(t,i,s){var a=function(t){return t.add(4-t.isoWeekday(),e)},d=i.prototype;d.isoWeekYear=function(){return a(this).year()},d.isoWeek=function(t){if(!this.$utils().u(t))return this.add(7*(t-this.isoWeek()),e);var i,d,n,o,r=a(this),u=(i=this.isoWeekYear(),d=this.$u,n=(d?s.utc:s)().year(i).startOf("year"),o=4-n.isoWeekday(),n.isoWeekday()>4&&(o+=7),n.add(o,e));return r.diff(u,"week")+1},d.isoWeekday=function(e){return this.$utils().u(e)?this.day()||7:this.day(this.day()%7?e:e-7)};var n=d.startOf;d.startOf=function(e,t){var i=this.$utils(),s=!!i.u(t)||t;return "isoweek"===i.p(e)?s?this.date(this.date()-(this.isoWeekday()-1)).startOf("day"):this.date(this.date()-1-(this.isoWeekday()-1)+7).endOf("day"):n.bind(this)(e,t)};}}));
+} (isoWeek$1));
+
+var isoWeek = isoWeek$1.exports;
+
+dayjs.extend(customParseFormat);
+dayjs.extend(utc);
+dayjs.extend(isoWeek);
+var InputRangePicker = function (_a) {
+    var fromLabel = _a.fromLabel, toLabel = _a.toLabel, value = _a.value, onChange = _a.onChange, minDate = _a.minDate, maxDate = _a.maxDate, _b = _a.withTime, withTime = _b === void 0 ? false : _b, _c = _a.format, format = _c === void 0 ? withTime ? 'DD/MM/YYYY HH:mm' : 'DD/MM/YYYY' : _c, _d = _a.variant, variant = _d === void 0 ? 'unstyled' : _d, props = __rest$2(_a, ["fromLabel", "toLabel", "value", "onChange", "minDate", "maxDate", "withTime", "format", "variant"]);
+    var _e = useState(), fromValue = _e[0], setFromValue = _e[1];
+    var _f = useState(), toValue = _f[0], setToValue = _f[1];
+    var _g = useState(minDate), formatedMinDate = _g[0], setFormatedMinDate = _g[1];
+    var _h = useState(maxDate), formatedMaxDate = _h[0], setFormatedMaxDate = _h[1];
+    useEffect(function () {
+        if (!withTime) {
+            var formatedMin = minDate
+                ? dayjs(dayjs(minDate).startOf('day').toISOString()).toDate()
+                : null;
+            var formatedMax = maxDate
+                ? dayjs(dayjs(maxDate).endOf('day').toISOString()).toDate()
+                : null;
+            setFormatedMinDate(formatedMin);
+            setFormatedMaxDate(formatedMax);
+        }
+    }, [withTime]);
+    useEffect(function () {
+        onChange({
+            from: fromValue ? dayjs(fromValue).toDate() : null,
+            to: toValue ? dayjs(toValue).toDate() : null
+        });
+    }, [fromValue, toValue]);
+    useEffect(function () {
+        if (!withTime) {
+            if (value === null || value === void 0 ? void 0 : value.from) {
+                if (dayjs(value.from).diff(dayjs(formatedMinDate).utcOffset(0, true)) < 0) {
+                    setFromValue(dayjs(formatedMinDate).utcOffset(0, true).toISOString());
+                }
+            }
+            if (value === null || value === void 0 ? void 0 : value.to) {
+                if (dayjs(value.to).diff(dayjs(formatedMaxDate).utcOffset(0, true)) > 0) {
+                    setToValue(dayjs(formatedMaxDate).utcOffset(0, true).toISOString());
+                }
+            }
+        }
+    }, [withTime, fromValue, toValue]);
+    var fromFunc = function (_a) {
+        var date = _a.date;
+        if (toValue) {
+            if (dayjs(date)
+                .startOf('day')
+                .utcOffset(0, true)
+                .diff(dayjs(toValue).endOf('day').utcOffset(0, true)) > 0) {
+                return 'after-max-date';
+            }
+        }
+        else {
+            if (formatedMaxDate &&
+                dayjs(date)
+                    .startOf('date')
+                    .utcOffset(0, true)
+                    .diff(dayjs(formatedMaxDate).startOf('date').utcOffset(0, true)) > 0) {
+                return 'after-max-date';
+            }
+        }
+        if (formatedMinDate &&
+            dayjs(date)
+                .startOf('day')
+                .utcOffset(0, true)
+                .diff(dayjs(formatedMinDate).startOf('day').utcOffset(0, true)) < 0) {
+            return 'before-min-date';
+        }
+    };
+    var toFunc = function (_a) {
+        var date = _a.date;
+        if (fromValue) {
+            if (dayjs(date)
+                .startOf('day')
+                .utcOffset(0, true)
+                .diff(dayjs(fromValue).startOf('day').utcOffset(0, true)) < 0) {
+                return 'before-min-date';
+            }
+        }
+        else {
+            if (formatedMinDate &&
+                dayjs(date)
+                    .startOf('day')
+                    .utcOffset(0, true)
+                    .diff(dayjs(formatedMinDate).startOf('date').utcOffset(0, true)) < 0) {
+                return 'before-min-date';
+            }
+        }
+        if (formatedMaxDate &&
+            dayjs(date)
+                .startOf('day')
+                .utcOffset(0, true)
+                .diff(dayjs(formatedMaxDate).startOf('day').utcOffset(0, true)) > 0) {
+            return 'after-max-date';
+        }
+    };
+    return (React__default.createElement(Wrap, __assign$2({ flexWrap: "wrap", w: "full", maxW: "full" }, props),
+        React__default.createElement(WrapItem, { flex: "1", alignItems: "center", minW: "fit-content" },
+            React__default.createElement(Text, { mr: 2, wordBreak: "normal" }, fromLabel),
+            React__default.createElement(InputDayPicker, { name: "from", onChange: function (e) {
+                    setFromValue(e);
+                }, value: fromValue, format: format, minDate: formatedMinDate, maxDate: (value === null || value === void 0 ? void 0 : value.to) || maxDate, calendarFunc: fromFunc, withTime: withTime, variant: variant, minW: "11.5rem", w: "full" })),
+        React__default.createElement(WrapItem, { flex: "1", alignItems: "center", minW: "fit-content" },
+            React__default.createElement(Text, { mr: 2, wordBreak: "normal" }, toLabel),
+            React__default.createElement(InputDayPicker, { name: "to", onChange: function (e) {
+                    setToValue(e);
+                }, value: toValue, format: format, minDate: (value === null || value === void 0 ? void 0 : value.from) || formatedMinDate, maxDate: formatedMaxDate, calendarFunc: toFunc, withTime: withTime, variant: variant, minW: "11.5rem", w: "full" }))));
+};
+
 var ModalResponsive = function (_a) {
     var _b;
     var isOpen = _a.isOpen, onClose = _a.onClose, finalFocusRef = _a.finalFocusRef, children = _a.children, rest = __rest$2(_a, ["isOpen", "onClose", "finalFocusRef", "children"]);
@@ -68038,6 +68202,12 @@ var reactCalendar = function (props) {
                     color: props.theme.colors.gray[400]
                 }
             }
+        },
+        '.before-min-date': {
+            color: props.theme.colors.gray[400]
+        },
+        '.after-max-date': {
+            color: props.theme.colors.gray[400]
         }
     };
 };
@@ -68107,5 +68277,5 @@ var styles = {
 
 var theme = extendTheme(__assign$2(__assign$2({ styles: styles }, foundations), { components: __assign$2({}, components) }));
 
-export { ActionsButton, BottomBar, Card, ConfirmMenuItem, DataList, DataListAccordion, DataListAccordionButton, DataListAccordionIcon, DataListAccordionPanel, DataListCell, DataListContext, DataListFooter, DataListHeader, DataListHeaderContext, DataListRow, DayPicker, FormGroup, InputDayPicker, InputPhone, LayoutContainer, MenuItem, ModalResponsive, Pagination, PaginationButtonFirstPage, PaginationButtonLastPage, PaginationButtonNextPage, PaginationButtonPrevPage, PaginationContext, PaginationInfo, SearchInput, Select, SideNav, SideNavBody, SideNavContainer, SideNavFooter, SideNavHeader, SideNavMenu, SideNavMenuItem, TopBar, TopBarBackAction, TopBarFirstElement, TopBarLastElement, dateFormat, formatPhoneIntl, getPaginationInfo, isValidPhone, theme, useIsMobile };
+export { ActionsButton, BottomBar, Card, ConfirmMenuItem, DataList, DataListAccordion, DataListAccordionButton, DataListAccordionIcon, DataListAccordionPanel, DataListCell, DataListContext, DataListFooter, DataListHeader, DataListHeaderContext, DataListRow, DayPicker, FormGroup, InputDayPicker, InputPhone, InputRangePicker, LayoutContainer, MenuItem, ModalResponsive, Pagination, PaginationButtonFirstPage, PaginationButtonLastPage, PaginationButtonNextPage, PaginationButtonPrevPage, PaginationContext, PaginationInfo, SearchInput, Select, SideNav, SideNavBody, SideNavContainer, SideNavFooter, SideNavHeader, SideNavMenu, SideNavMenuItem, TopBar, TopBarBackAction, TopBarFirstElement, TopBarLastElement, dateFormat, formatPhoneIntl, getPaginationInfo, isValidPhone, theme, useIsMobile };
 //# sourceMappingURL=index.js.map