willba-component-library 0.2.13 → 0.2.15

package/lib/core/components/calendar/Calendar.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
+import { CalendarTypes } from './CalendarTypes';
 import 'react-day-picker/dist/style.css';
 import './Calendar.css';
-import { CalendarTypes } from './CalendarTypes';
 export declare const Calendar: React.ForwardRefExoticComponent<CalendarTypes & React.RefAttributes<HTMLDivElement>>;

package/lib/index.esm.js

@@ -524,7 +524,7 @@ function useTheme(_a) {
     return themePalette;
 }
 
-var css_248z$c = "@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');\n\n.will-root * {\n  font-family: 'Montserrat', sans-serif;\n}\n\n.will-root {\n  \n  box-sizing: border-box;\n  font-size: 14px;\n  \n  color: #1E1E1E;\n\n  /* Palette */\n  --will-primary: #374269;\n  --will-secondary: #374269;\n  --will-grey: #ABA7AF;\n  --will-white: #fff;\n  --will-black: #000;\n  --will-onahau: #CDEEFF;\n  --will-text: #5A5959;\n  --will-transparent-white: rgba(255, 255, 255, 0.30);\n  --will-transparent-black: rgba(171, 167, 175, 0.30);\n\n  /* Confines */\n  --will-box-shadow-dark: 0px 2px 12px 2px #a1a1a180;\n  --will-box-shadow-light: 0px 2px 12px 2px #bcb9b980;\n\n  /* Breakpoints */\n\n  --will-lg: 1140px;\n  --will-md: 960px;\n  --will-sm: 600px;\n  --will-xl: 1280px;\n  --will-xs: 0px;\n}\n\n/* Typography */\n\n.will-root h1, h2, h3, h4, h5, h6 {\n font-weight: 700;\n} \n\n.will-root p, h1, h2, h3, h4, h5, h6, span {\n  margin: 0;\n  padding: 0;\n}\n\n\n/* Integration fixes */\n\n.will-root p {\n  margin: 0 !important;\n}\n\n.will-root button {\n  line-height: normal !important;\n}\n";
+var css_248z$c = "@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');\n\n.will-root * {\n  font-family: 'Montserrat', sans-serif;\n}\n\n.will-root {\n  \n  box-sizing: border-box;\n  font-size: 14px;\n  \n  color: #1E1E1E;\n \n  /* Palette */\n  --will-primary: #374269;\n  --will-secondary: #374269;\n  --will-grey: #ABA7AF;\n  --will-white: #fff;\n  --will-black: #000;\n  --will-onahau: #CDEEFF;\n  --will-text: #5A5959;\n  --will-charcoal-blue: #384265;\n  --will-transparent-white: rgba(255, 255, 255, 0.30);\n  --will-transparent-black: rgba(171, 167, 175, 0.30);\n\n  /* Confines */\n  --will-box-shadow-dark: 0px 2px 12px 2px #a1a1a180;\n  --will-box-shadow-light: 0px 2px 12px 2px #bcb9b980;\n\n  /* Breakpoints */\n\n  --will-lg: 1140px;\n  --will-md: 960px;\n  --will-sm: 600px;\n  --will-xl: 1280px;\n  --will-xs: 0px;\n}\n\n/* Typography */\n\n.will-root h1, h2, h3, h4, h5, h6 {\n font-weight: 700;\n} \n\n.will-root p, h1, h2, h3, h4, h5, h6, span {\n  margin: 0;\n  padding: 0;\n}\n\n\n/* Integration fixes */\n\n.will-root p {\n  margin: 0 !important;\n}\n\n.will-root button {\n  line-height: normal !important;\n}\n";
 styleInject(css_248z$c);
 
 var useAwaitRender = function () {
@@ -2814,7 +2814,9 @@ var calendar$1 = {
 	eventsLabelPlaceholder: "Add search dates",
 	startDate: "Start date",
 	endDate: "End date",
-	title: "Calendar"
+	title: "Calendar",
+	checkoutOnly: "Check-out only",
+	hasDisableDates: "Contains unavailable dates"
 };
 var guests$1 = {
 	label: "Number of guests",
@@ -2859,7 +2861,9 @@ var calendar = {
 	eventsLabelPlaceholder: "Lisää aikaväli",
 	startDate: "Alku",
 	endDate: "Loppu",
-	title: "Kalenteri"
+	title: "Kalenteri",
+	checkoutOnly: "Check-out only",
+	hasDisableDates: "Contains unavailable dates"
 };
 var guests = {
 	label: "Vierasmäärä",
@@ -2868,7 +2872,9 @@ var guests = {
 	adultsLabel: "Aikuiset",
 	kidsLabel: "lapset",
 	guestsLabel: "vierasta",
-	guestLabel: "vieras"
+	guestLabel: "vieras",
+	checkoutOnly: "Check-out only",
+	hasDisableDates: "Contains unavailable dates"
 };
 var categories = {
 	label: "Kategoriat",
@@ -10764,12 +10770,14 @@ var reactResponsiveExports = reactResponsive.exports;
 var css_248z$9 = ".rdp {\n  --rdp-cell-size: 40px;\n  --rdp-caption-font-size: 18px;\n  --rdp-accent-color: #0000ff;\n  --rdp-background-color: #e7edff;\n  --rdp-accent-color-dark: #3003e1;\n  --rdp-background-color-dark: #180270;\n  --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */\n  --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */\n\n  margin: 1em;\n}\n\n/* Hide elements for devices that are not screen readers */\n.rdp-vhidden {\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  background: transparent;\n  border: 0;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  appearance: none;\n  position: absolute !important;\n  top: 0;\n  width: 1px !important;\n  height: 1px !important;\n  padding: 0 !important;\n  overflow: hidden !important;\n  clip: rect(1px, 1px, 1px, 1px) !important;\n  border: 0 !important;\n}\n\n/* Buttons */\n.rdp-button_reset {\n  appearance: none;\n  position: relative;\n  margin: 0;\n  padding: 0;\n  cursor: default;\n  color: inherit;\n  background: none;\n  font: inherit;\n\n  -moz-appearance: none;\n  -webkit-appearance: none;\n}\n\n.rdp-button_reset:focus-visible {\n  /* Make sure to reset outline only when :focus-visible is supported */\n  outline: none;\n}\n\n.rdp-button {\n  border: 2px solid transparent;\n}\n\n.rdp-button[disabled]:not(.rdp-day_selected) {\n  opacity: 0.25;\n}\n\n.rdp-button:not([disabled]) {\n  cursor: pointer;\n}\n\n.rdp-button:focus-visible:not([disabled]) {\n  color: inherit;\n  background-color: var(--rdp-background-color);\n  border: var(--rdp-outline);\n}\n\n.rdp-button:hover:not([disabled]):not(.rdp-day_selected) {\n  background-color: var(--rdp-background-color);\n}\n\n.rdp-months {\n  display: flex;\n}\n\n.rdp-month {\n  margin: 0 1em;\n}\n\n.rdp-month:first-child {\n  margin-left: 0;\n}\n\n.rdp-month:last-child {\n  margin-right: 0;\n}\n\n.rdp-table {\n  margin: 0;\n  max-width: calc(var(--rdp-cell-size) * 7);\n  border-collapse: collapse;\n}\n\n.rdp-with_weeknumber .rdp-table {\n  max-width: calc(var(--rdp-cell-size) * 8);\n  border-collapse: collapse;\n}\n\n.rdp-caption {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0;\n  text-align: left;\n}\n\n.rdp-multiple_months .rdp-caption {\n  position: relative;\n  display: block;\n  text-align: center;\n}\n\n.rdp-caption_dropdowns {\n  position: relative;\n  display: inline-flex;\n}\n\n.rdp-caption_label {\n  position: relative;\n  z-index: 1;\n  display: inline-flex;\n  align-items: center;\n  margin: 0;\n  padding: 0 0.25em;\n  white-space: nowrap;\n  color: currentColor;\n  border: 0;\n  border: 2px solid transparent;\n  font-family: inherit;\n  font-size: var(--rdp-caption-font-size);\n  font-weight: bold;\n}\n\n.rdp-nav {\n  white-space: nowrap;\n}\n\n.rdp-multiple_months .rdp-caption_start .rdp-nav {\n  position: absolute;\n  top: 50%;\n  left: 0;\n  transform: translateY(-50%);\n}\n\n.rdp-multiple_months .rdp-caption_end .rdp-nav {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  transform: translateY(-50%);\n}\n\n.rdp-nav_button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--rdp-cell-size);\n  height: var(--rdp-cell-size);\n  padding: 0.25em;\n  border-radius: 100%;\n}\n\n/* ---------- */\n/* Dropdowns  */\n/* ---------- */\n\n.rdp-dropdown_year,\n.rdp-dropdown_month {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n.rdp-dropdown {\n  appearance: none;\n  position: absolute;\n  z-index: 2;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  cursor: inherit;\n  opacity: 0;\n  border: none;\n  background-color: transparent;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n\n.rdp-dropdown[disabled] {\n  opacity: unset;\n  color: unset;\n}\n\n.rdp-dropdown:focus-visible:not([disabled]) + .rdp-caption_label {\n  background-color: var(--rdp-background-color);\n  border: var(--rdp-outline);\n  border-radius: 6px;\n}\n\n.rdp-dropdown_icon {\n  margin: 0 0 0 5px;\n}\n\n.rdp-head {\n  border: 0;\n}\n\n.rdp-head_row,\n.rdp-row {\n  height: 100%;\n}\n\n.rdp-head_cell {\n  vertical-align: middle;\n  font-size: 0.75em;\n  font-weight: 700;\n  text-align: center;\n  height: 100%;\n  height: var(--rdp-cell-size);\n  padding: 0;\n  text-transform: uppercase;\n}\n\n.rdp-tbody {\n  border: 0;\n}\n\n.rdp-tfoot {\n  margin: 0.5em;\n}\n\n.rdp-cell {\n  width: var(--rdp-cell-size);\n  height: 100%;\n  height: var(--rdp-cell-size);\n  padding: 0;\n  text-align: center;\n}\n\n.rdp-weeknumber {\n  font-size: 0.75em;\n}\n\n.rdp-weeknumber,\n.rdp-day {\n  display: flex;\n  overflow: hidden;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--rdp-cell-size);\n  max-width: var(--rdp-cell-size);\n  height: var(--rdp-cell-size);\n  margin: 0;\n  border: 2px solid transparent;\n  border-radius: 100%;\n}\n\n.rdp-day_today:not(.rdp-day_outside) {\n  font-weight: bold;\n}\n\n.rdp-day_selected,\n.rdp-day_selected:focus-visible,\n.rdp-day_selected:hover {\n  color: white;\n  opacity: 1;\n  background-color: var(--rdp-accent-color);\n}\n\n.rdp-day_outside {\n  opacity: 0.5;\n}\n\n.rdp-day_selected:focus-visible {\n  /* Since the background is the same use again the outline */\n  outline: var(--rdp-outline);\n  outline-offset: 2px;\n  z-index: 1;\n}\n\n.rdp:not([dir='rtl']) .rdp-day_range_start:not(.rdp-day_range_end) {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n.rdp:not([dir='rtl']) .rdp-day_range_end:not(.rdp-day_range_start) {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n.rdp[dir='rtl'] .rdp-day_range_start:not(.rdp-day_range_end) {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n.rdp[dir='rtl'] .rdp-day_range_end:not(.rdp-day_range_start) {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n.rdp-day_range_end.rdp-day_range_start {\n  border-radius: 100%;\n}\n\n.rdp-day_range_middle {\n  border-radius: 0;\n}";
 styleInject(css_248z$9);
 
-var css_248z$8 = ".will-calendar-filter-container {\n  display: flex;\n  justify-content: center;\n  user-select: none;\n}\n\n/* Calendar overrides */\n\n\n.will-calendar-filter-container .DayPicker {\n  font-size: 25px; /* Adjust this value to make the DayPicker bigger */\n}\n\n.will-calendar-filter-container .rdp-month {\n  position: relative;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_start {\n  padding-left: 70px;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_end {\n  padding-right: 70px;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav {\n  border: 1px solid var(--will-primary);\n  border-radius: 50%;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav svg {\n  color: var(--will-primary);\n}\n\n\n.will-calendar-filter-container .rdp-month .rdp-caption {\n  position: initial;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-caption > .rdp-caption_label,\n.will-calendar-filter-container .rdp-table .rdp-head {\n  opacity: .6;\n}\n\n.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day {\n  opacity: 0.7;\n}\n\n.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day.rdp-day_selected {\n  background-color: var(--will-primary);\n  opacity: 1;\n}\n\n.my-today:not(.rdp-day_selected) { \n  font-weight: 700;\n  opacity: 1;\n  color: var(--will-primary);\n}\n\n@media (max-width: 960px) {\n  .will-calendar-filter-container .rdp-month .rdp-nav {\n    border: none;\n    border-radius: initial;\n    \n  }\n\n  .will-calendar-filter-container .rdp-month.rdp-caption_start {\n    padding-left: 10px;\n  }\n  \n  .will-calendar-filter-container .rdp-month.rdp-caption_end {\n    padding-right: 10px;\n  }\n}\n\n\n";
+var css_248z$8 = ".will-calendar-filter-container {\n  display: flex;\n  justify-content: center;\n  user-select: none;\n}\n\n/* Calendar overrides */\n\n\n.will-calendar-filter-container .DayPicker {\n  font-size: 25px; /* Adjust this value to make the DayPicker bigger */\n}\n\n.will-calendar-filter-container .rdp-month {\n  position: relative;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_start {\n  padding-left: 70px;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_end {\n  padding-right: 70px;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav {\n  border: 1px solid var(--will-primary);\n  border-radius: 50%;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav svg {\n  color: var(--will-primary);\n}\n\n\n.will-calendar-filter-container .rdp-month .rdp-caption {\n  position: initial;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-caption > .rdp-caption_label,\n.will-calendar-filter-container .rdp-table .rdp-head {\n  opacity: .6;\n}\n\n\n\n.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day.rdp-day_selected {\n  background-color: var(--will-primary);\n  opacity: 1;\n}\n\n.my-today:not(.rdp-day_selected) { \n  font-weight: 700;\n  opacity: 1;\n  color: var(--will-primary);\n}\n\n@media (max-width: 960px) {\n  .will-calendar-filter-container .rdp-month .rdp-nav {\n    border: none;\n    border-radius: initial;\n  }\n\n  .will-calendar-filter-container .rdp-month.rdp-caption_start {\n    padding-left: 10px;\n  }\n  \n  .will-calendar-filter-container .rdp-month.rdp-caption_end {\n    padding-right: 10px;\n  }\n}\n\n/* Tooltip */\n\n.will-root .will-calendar-filter-container .will-calendar-tooltip {\n position: absolute;\n top: -42px;\n display: none;\n white-space: nowrap;\n z-index: 2;\n}\n\n.will-root .will-calendar-filter-container .will-calendar-tooltip > div {\n  background-color: white;\n  position: relative;\n  padding: 5px 10px;\n  border: 1px solid var(--will-primary);\n  border-radius: 5px;\n}\n\n.will-root .will-calendar-filter-container .will-calendar-tooltip::before {\n  content: \"\";\n  width: 10px;\n  height: 10px;\n  border: 1px solid var(--will-primary);\n  position: absolute;\n  bottom: -4px;\n  left:calc(50% - 5.555px);\n  rotate: 45deg;\n  z-index: 0;\n  background-color: var(--will-white);\n}\n\n\n";
 styleInject(css_248z$8);
 
 var Calendar = forwardRef(function (_a, ref) {
     var _b;
     var calendarRange = _a.calendarRange, setCalendarRange = _a.setCalendarRange, calendarOffset = _a.calendarOffset, selectedPath = _a.selectedPath, language = _a.language, calendarOffsetGroup = _a.calendarOffsetGroup, requestDates = _a.requestDates;
+    // Translations
+    var t = useTranslation('filterBar').t;
     var isTablet = reactResponsiveExports.useMediaQuery({ maxWidth: 960 });
     useEffect(function () {
         if (!calendarRange)
@@ -10786,13 +10794,60 @@ var Calendar = forwardRef(function (_a, ref) {
         },
     ];
     var selectedStartDate = calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from;
+    // Handle selected dates with disable dates and tooltip feedback
+    var _c = __read(useState(''), 2), openTooltip = _c[0], setOpenTooltip = _c[1];
+    var handleSelectedDates = function (range, e) {
+        var isNextDayDisabled = calendarOffsetGroup === null || calendarOffsetGroup === void 0 ? void 0 : calendarOffsetGroup.find(function (item) {
+            return isSameDay(item.from, addDays((range === null || range === void 0 ? void 0 : range.from) || 1, 1));
+        });
+        var rangeHasDisabledDay = calendarOffsetGroup === null || calendarOffsetGroup === void 0 ? void 0 : calendarOffsetGroup.find(function (date) {
+            return isAfter(date.from, (range === null || range === void 0 ? void 0 : range.from) || 1) &&
+                isBefore(date.from, (range === null || range === void 0 ? void 0 : range.to) || 1);
+        });
+        var handleTooltip = function (type) {
+            var calendarButton = e.currentTarget;
+            var calendarTooltip = document.querySelector('.will-calendar-tooltip');
+            if (calendarButton && calendarTooltip) {
+                if (type) {
+                    calendarButton.appendChild(calendarTooltip);
+                    calendarTooltip.style.display = 'block';
+                    calendarButton.style.overflow = 'visible';
+                    calendarButton.style.position = 'relative';
+                }
+                else {
+                    calendarTooltip.style.display = 'none';
+                }
+            }
+        };
+        if (isNextDayDisabled) {
+            setOpenTooltip('next');
+            handleTooltip('next');
+            setCalendarRange(undefined);
+        }
+        else if (rangeHasDisabledDay) {
+            setOpenTooltip('between');
+            handleTooltip('range');
+            setCalendarRange(undefined);
+        }
+        else {
+            setCalendarRange(range);
+            setOpenTooltip('');
+            handleTooltip('');
+        }
+    };
     return (React__default__default.createElement("div", { className: "will-filter-bar-calendar", ref: ref },
         React__default__default.createElement("div", { className: "will-calendar-filter-container" },
-            React__default__default.createElement(DayPicker, { id: "will-calendar", mode: "range", locale: language === 'en' ? enUS : fi, numberOfMonths: !isTablet ? 2 : 1, weekStartsOn: 1, selected: calendarRange, onSelect: setCalendarRange, modifiersClassNames: {
+            React__default__default.createElement(DayPicker, { id: "will-calendar", mode: "range", locale: language === 'en' ? enUS : fi, numberOfMonths: !isTablet ? 2 : 1, weekStartsOn: 1, selected: calendarRange, onSelect: function (range, days, activeModifiers, e) {
+                    return handleSelectedDates(range, e);
+                }, modifiersClassNames: {
                     today: 'my-today',
                 }, modifiersStyles: {
                     disabled: { opacity: '0.2' },
-                }, captionLayout: "dropdown-buttons", defaultMonth: selectedStartDate || disabledDays[0].from, disabled: calendarOffsetGroup || disabledDays, fromMonth: today, onMonthChange: function (val) { return (requestDates ? requestDates(val) : null); } }))));
+                }, captionLayout: "dropdown-buttons", defaultMonth: selectedStartDate || disabledDays[0].from, disabled: calendarOffsetGroup || disabledDays, fromMonth: today, onMonthChange: function (val) { return (requestDates ? requestDates(val) : null); } }),
+            React__default__default.createElement("div", { className: 'will-calendar-tooltip' },
+                React__default__default.createElement("div", null, openTooltip === 'next'
+                    ? t('calendar.checkoutOnly')
+                    : t('calendar.hasDisableDates'))))));
 });
 
 var parseDates = function (_a) {
@@ -11075,7 +11130,7 @@ var Guests = forwardRef(function (_a, ref) {
         React__default__default.createElement("div", { className: "will-guests-filter-container" }, ageCategories === null || ageCategories === void 0 ? void 0 : ageCategories.map(function (category) { return (React__default__default.createElement(GuestCount, { key: category.id, id: parseInt(category.id), label: category.name, minVal: category.minVal, sortOrder: category.sortOrder, updateGuestsCount: updateGuestsCount, count: ageCategoryCounts["guests-".concat(category.id)] || 0 })); }))));
 });
 
-var css_248z$3 = ".will-filter-bar-divider {\n  width: 1px;\n  margin: 0 10px;\n  background-color: #384265;\n}\n\n@media (max-width: 960px) {\n  .will-filter-bar-divider {\n    width: auto;\n    margin: 0 10px;\n    height: 1px;\n    background-color: #384265;\n  }\n}";
+var css_248z$3 = ".will-filter-bar-divider {\n  width: 1px;\n  margin: 0 10px;\n  background-color: var(--will-charcoal-blue);\n}\n\n@media (max-width: 960px) {\n  .will-filter-bar-divider {\n    width: auto;\n    margin: 0 10px;\n    height: 1px;\n    background-color: var(--will-charcoal-blue);\n  }\n}";
 styleInject(css_248z$3);
 
 var Divider = function () {
@@ -11196,7 +11251,7 @@ var useFilterCalendar = function (_a) {
     };
 };
 
-var css_248z = ".will-root .will-calendar-wrapper {\n    box-shadow: var(--will-box-shadow-dark);\n    border-radius: 20px;\n    background-color: var(--will-white);\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-header,\n.will-root .will-calendar-wrapper .will-calendar-main,\n.will-root .will-calendar-wrapper .will-calendar-footer {\n   padding: 20px;\n}\n\n/* Header */\n\n.will-root .will-calendar-wrapper .will-calendar-header {\n    display: flex;\n    justify-content: space-between;\n    border-bottom: 1px solid grey;\n}\n\n/* Footer */\n\n.will-root .will-calendar-wrapper .will-calendar-footer {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    border-top: 1px solid grey;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-dates > div {\n    margin-bottom: 5px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-dates-separator {\n    margin: 0 15px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-actions {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n@media (max-width: 960px) {\n    .will-root .will-calendar-wrapper .will-calendar-footer {\n        flex-direction: column;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-footer-dates  {\n        margin-bottom: 20px;\n        text-align: center;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-footer-actions {\n       flex-direction: column;\n       width: 100%;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-footer-actions button{\n        width: 100%;\n     }\n  }\n\n/**/\n\n.will-root .will-calendar-wrapper .will-calendar-header .will-filter-bar-close-button {\n    position: initial;\n}";
+var css_248z = ".will-root .will-calendar-wrapper {\n    box-shadow: var(--will-box-shadow-dark);\n    border-radius: 20px;\n    background-color: var(--will-white);\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-header,\n.will-root .will-calendar-wrapper .will-calendar-main,\n.will-root .will-calendar-wrapper .will-calendar-footer {\n   padding: 20px;\n}\n\n/* Header */\n\n.will-root .will-calendar-wrapper .will-calendar-header {\n    display: flex;\n    justify-content: space-between;\n    border-bottom: 1px solid var(--will-grey);\n    align-items: center;\n}\n\n/* Footer */\n\n.will-root .will-calendar-wrapper .will-calendar-footer {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    border-top: 1px solid var(--will-grey);\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-dates > div {\n    margin-bottom: 5px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-dates-separator {\n    margin: 0 15px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-actions {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n@media (max-width: 960px) {\n    .will-root .will-calendar-wrapper {\n        width: -webkit-fill-available;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-header,\n    .will-root .will-calendar-wrapper .will-calendar-main,\n    .will-root .will-calendar-wrapper .will-calendar-footer {\n        padding: 20px 10px;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-footer {\n        flex-direction: column;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-footer-dates  {\n        margin-bottom: 20px;\n        text-align: center;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-footer-actions {\n       flex-direction: column;\n       width: 100%;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-footer-actions button{\n        width: 100%;\n     }\n  }\n\n/**/\n\n.will-root .will-calendar-wrapper .will-calendar-header .will-filter-bar-close-button {\n    position: initial;\n}";
 styleInject(css_248z);
 
 function FilterCalendar(_a) {
@@ -11231,7 +11286,7 @@ function FilterCalendar(_a) {
                         date: calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to,
                         dateFormat: 'EEEEEE d.M.yyyy',
                     }) || t('common:checkOut'))),
-                nights && (React__default__default.createElement("span", null, "".concat(nights, " ").concat(t("common:".concat(nights > 1 ? 'nights' : 'night')))))),
+                !!nights && (React__default__default.createElement("span", null, "".concat(nights, " ").concat(t("common:".concat(nights > 1 ? 'nights' : 'night')))))),
             React__default__default.createElement("div", { className: "will-calendar-footer-actions" },
                 React__default__default.createElement(SubmitButton, { onClick: handleClearDates, disabled: !(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from), label: 'Clear dates' }),
                 React__default__default.createElement(SubmitButton, { onClick: handleSubmit, label: t("common:search") })))))));