willba-component-library 0.2.79 → 0.2.80

package/lib/index.umd.js

@@ -544,12 +544,11 @@
         var themePalette = {
             '--will-primary': palette === null || palette === void 0 ? void 0 : palette.primary,
             '--will-secondary': palette === null || palette === void 0 ? void 0 : palette.secondary,
-            '--will-error': palette === null || palette === void 0 ? void 0 : palette.error,
         };
         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-light-grey: #C8C8C8;\n  --will-white: #fff;\n  --will-white-transparent: #ffffffcf;\n  --will-black: #000;\n  --will-onahau: #CDEEFF;\n  --will-text: #5A5959;\n  --will-charcoal-blue: #384265;\n  --will-error: #d32f2f;\n\n  /* Transparent */\n  --will-transparent-black: rgba(0, 0, 0, 0.5);\n  --will-transparent-white: rgba(255, 255, 255, 0.30);\n  --will-transparent-lavender: rgba(171, 167, 175, 0.30);\n\n  /* Color mix */\n  --will-primary-lighter: color-mix(in srgb, var(--will-primary), white 50%);\n  --will-primary-lightest: color-mix(in srgb, var(--will-primary), white 80%);\n\n\n  /* Shadows */\n  --will-box-shadow-dark: 0px 2px 12px 2px #a1a1a180;\n  --will-box-shadow-light: 0px 2px 12px 2px #bcb9b980;\n\n  /* Breakpoints */\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-white-transparent: #ffffffcf;\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 () {
@@ -2841,8 +2840,7 @@
     	endDate: "End date",
     	title: "Calendar",
     	checkoutOnly: "Check-out only",
-    	hasDisableDates: "Contains unavailable dates",
-    	minNights: "2 nights min"
+    	hasDisableDates: "Contains unavailable dates"
     };
     var guests$1 = {
     	label: "Number of guests",
@@ -2878,12 +2876,6 @@
     var noCheckIn$1 = "Room not available";
     var noCheckOut$1 = "Check-out not available";
     var checkOutOnly$1 = "Check-out only";
-    var checkInOnly$1 = "Check-in only";
-    var errors$1 = {
-    	calendarErrors: {
-    		checkInAvailabilityError: "All room reservations in a single purchase must be for the same dates. If you need reservations for different dates, please make a separate purchase."
-    	}
-    };
     var enCommon = {
     	night: night$1,
     	nights: nights$1,
@@ -2894,9 +2886,7 @@
     	clearDates: clearDates$1,
     	noCheckIn: noCheckIn$1,
     	noCheckOut: noCheckOut$1,
-    	checkOutOnly: checkOutOnly$1,
-    	checkInOnly: checkInOnly$1,
-    	errors: errors$1
+    	checkOutOnly: checkOutOnly$1
     };
 
     var calendar = {
@@ -2907,8 +2897,7 @@
     	endDate: "Loppu",
     	title: "Kalenteri",
     	checkoutOnly: "Check-out only",
-    	hasDisableDates: "Contains unavailable dates",
-    	minNights: "2 nights min"
+    	hasDisableDates: "Contains unavailable dates"
     };
     var guests = {
     	label: "Vierasmäärä",
@@ -2946,12 +2935,6 @@
     var noCheckIn = "Huone ei saatavilla";
     var noCheckOut = "Uloskirjaus ei saatavilla";
     var checkOutOnly = "Vain uloskirjaus";
-    var checkInOnly = "Vain sisäänkirjaus";
-    var errors = {
-    	calendarErrors: {
-    		checkInAvailabilityError: "Yhdellä ostolla tehdyt huonevaraukset tulee olla samalle ajankohdalle. Jos tarvitset huonevarauksia eri ajankohdille, ole hyvä ja tee uusi osto."
-    	}
-    };
     var fiCommon = {
     	night: night,
     	nights: nights,
@@ -2962,9 +2945,7 @@
     	clearDates: clearDates,
     	noCheckIn: noCheckIn,
     	noCheckOut: noCheckOut,
-    	checkOutOnly: checkOutOnly,
-    	checkInOnly: checkInOnly,
-    	errors: errors
+    	checkOutOnly: checkOutOnly
     };
 
     var urlParams = typeof window !== 'undefined'
@@ -3011,12 +2992,12 @@
         return { filtersRef: filtersRef };
     };
 
-    var css_248z$b = ".will-filter-bar-submit-button {\n  width: auto;\n  height: auto;\n  padding: 10px 20px;\n  border-radius: 20px;\n  cursor: pointer;\n  border: none;\n  white-space: nowrap;\n  text-transform: uppercase;\n  font-size: 12px;\n  display: flex;\n  align-items: center;\n  user-select: none;\n}\n\n/* Submit button variants */\n.will-filter-bar-submit-button.default {\n  background-color: var(--will-primary);\n  color: var(--will-white);\n}\n\n.will-filter-bar-submit-button.text {\n  background-color: transparent;\n  color: var(--will-black);\n  text-decoration: underline;\n  font-weight: 500;\n  font-size: 15px;\n  padding: 0 10px;\n}\n\n.will-filter-bar-submit-button span {\n margin-right: 10px;\n display: flex;\n}\n\nbutton.will-filter-bar-submit-button:disabled  {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n\n@media (max-width: 960px) {\n  .will-filter-bar-submit-button {\n    justify-content: center;\n   \n  }\n}\n\n/* --- */\n\n@keyframes spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n";
+    var css_248z$b = ".will-filter-bar-submit-button {\n  width: auto;\n  height: auto;\n  background-color: var(--will-primary);\n  color: var(--will-white);\n  padding: 10px 20px;\n  border-radius: 20px;\n  cursor: pointer;\n  border: none;\n  white-space: nowrap;\n  text-transform: uppercase;\n  font-size: 12px;\n  display: flex;\n  align-items: center;\n}\n\n.will-filter-bar-submit-button span {\n margin-right: 10px;\n display: flex;\n}\n\nbutton.will-filter-bar-submit-button:disabled  {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n\n@media (max-width: 960px) {\n  .will-filter-bar-submit-button {\n    justify-content: center;\n   \n  }\n}\n\n/* --- */\n\n@keyframes spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n";
     styleInject(css_248z$b);
 
     var SubmitButton = function (_a) {
-        var onClick = _a.onClick, startIcon = _a.startIcon, label = _a.label, disabled = _a.disabled, isLoading = _a.isLoading, variant = _a.variant;
-        return (React__default.createElement("button", { className: "will-filter-bar-submit-button ".concat(variant || 'default'), onClick: onClick, disabled: disabled || isLoading },
+        var onClick = _a.onClick, startIcon = _a.startIcon, label = _a.label, disabled = _a.disabled, isLoading = _a.isLoading;
+        return (React__default.createElement("button", { className: "will-filter-bar-submit-button", onClick: onClick, disabled: disabled || isLoading },
             isLoading ? (React__default.createElement("span", null, React__default.createElement(FaSpinner, { style: { animation: 'spin 1s linear infinite' } }))) : (startIcon && React__default.createElement("span", null, startIcon)),
             label || 'Label'));
     };
@@ -3515,78 +3496,6 @@
       return addMonths(dirtyDate, amount * 12);
     }
 
-    /**
-     * @name areIntervalsOverlapping
-     * @category Interval Helpers
-     * @summary Is the given time interval overlapping with another time interval?
-     *
-     * @description
-     * Is the given time interval overlapping with another time interval? Adjacent intervals do not count as overlapping.
-     *
-     * @param {Interval} intervalLeft - the first interval to compare. See [Interval]{@link https://date-fns.org/docs/Interval}
-     * @param {Interval} intervalRight - the second interval to compare. See [Interval]{@link https://date-fns.org/docs/Interval}
-     * @param {Object} [options] - the object with options
-     * @param {Boolean} [options.inclusive=false] - whether the comparison is inclusive or not
-     * @returns {Boolean} whether the time intervals are overlapping
-     * @throws {TypeError} 2 arguments required
-     * @throws {RangeError} The start of an interval cannot be after its end
-     * @throws {RangeError} Date in interval cannot be `Invalid Date`
-     *
-     * @example
-     * // For overlapping time intervals:
-     * areIntervalsOverlapping(
-     *   { start: new Date(2014, 0, 10), end: new Date(2014, 0, 20) },
-     *   { start: new Date(2014, 0, 17), end: new Date(2014, 0, 21) }
-     * )
-     * //=> true
-     *
-     * @example
-     * // For non-overlapping time intervals:
-     * areIntervalsOverlapping(
-     *   { start: new Date(2014, 0, 10), end: new Date(2014, 0, 20) },
-     *   { start: new Date(2014, 0, 21), end: new Date(2014, 0, 22) }
-     * )
-     * //=> false
-     *
-     * @example
-     * // For adjacent time intervals:
-     * areIntervalsOverlapping(
-     *   { start: new Date(2014, 0, 10), end: new Date(2014, 0, 20) },
-     *   { start: new Date(2014, 0, 20), end: new Date(2014, 0, 30) }
-     * )
-     * //=> false
-     *
-     * @example
-     * // Using the inclusive option:
-     * areIntervalsOverlapping(
-     *   { start: new Date(2014, 0, 10), end: new Date(2014, 0, 20) },
-     *   { start: new Date(2014, 0, 20), end: new Date(2014, 0, 24) }
-     * )
-     * //=> false
-     * areIntervalsOverlapping(
-     *   { start: new Date(2014, 0, 10), end: new Date(2014, 0, 20) },
-     *   { start: new Date(2014, 0, 20), end: new Date(2014, 0, 24) },
-     *   { inclusive: true }
-     * )
-     * //=> true
-     */
-    function areIntervalsOverlapping(intervalLeft, intervalRight, options) {
-      requiredArgs(2, arguments);
-      var leftStartTime = toDate(intervalLeft === null || intervalLeft === void 0 ? void 0 : intervalLeft.start).getTime();
-      var leftEndTime = toDate(intervalLeft === null || intervalLeft === void 0 ? void 0 : intervalLeft.end).getTime();
-      var rightStartTime = toDate(intervalRight === null || intervalRight === void 0 ? void 0 : intervalRight.start).getTime();
-      var rightEndTime = toDate(intervalRight === null || intervalRight === void 0 ? void 0 : intervalRight.end).getTime();
-
-      // Throw an exception if start date is after end date or if any date is `Invalid Date`
-      if (!(leftStartTime <= leftEndTime && rightStartTime <= rightEndTime)) {
-        throw new RangeError('Invalid interval');
-      }
-      if (options !== null && options !== void 0 && options.inclusive) {
-        return leftStartTime <= rightEndTime && rightStartTime <= leftEndTime;
-      }
-      return leftStartTime < rightEndTime && rightStartTime < leftEndTime;
-    }
-
     /**
      * @name max
      * @category Common Helpers
@@ -3678,53 +3587,6 @@
       return result || new Date(NaN);
     }
 
-    /**
-     * @name compareAsc
-     * @category Common Helpers
-     * @summary Compare the two dates and return -1, 0 or 1.
-     *
-     * @description
-     * Compare the two dates and return 1 if the first date is after the second,
-     * -1 if the first date is before the second or 0 if dates are equal.
-     *
-     * @param {Date|Number} dateLeft - the first date to compare
-     * @param {Date|Number} dateRight - the second date to compare
-     * @returns {Number} the result of the comparison
-     * @throws {TypeError} 2 arguments required
-     *
-     * @example
-     * // Compare 11 February 1987 and 10 July 1989:
-     * const result = compareAsc(new Date(1987, 1, 11), new Date(1989, 6, 10))
-     * //=> -1
-     *
-     * @example
-     * // Sort the array of dates:
-     * const result = [
-     *   new Date(1995, 6, 2),
-     *   new Date(1987, 1, 11),
-     *   new Date(1989, 6, 10)
-     * ].sort(compareAsc)
-     * //=> [
-     * //   Wed Feb 11 1987 00:00:00,
-     * //   Mon Jul 10 1989 00:00:00,
-     * //   Sun Jul 02 1995 00:00:00
-     * // ]
-     */
-    function compareAsc(dirtyDateLeft, dirtyDateRight) {
-      requiredArgs(2, arguments);
-      var dateLeft = toDate(dirtyDateLeft);
-      var dateRight = toDate(dirtyDateRight);
-      var diff = dateLeft.getTime() - dateRight.getTime();
-      if (diff < 0) {
-        return -1;
-      } else if (diff > 0) {
-        return 1;
-        // Return 0 if diff is 0; return NaN if diff is NaN
-      } else {
-        return diff;
-      }
-    }
-
     /**
      * @name isSameDay
      * @category Day Helpers
@@ -3917,31 +3779,6 @@
       return Math.round((timestampLeft - timestampRight) / MILLISECONDS_IN_WEEK$4);
     }
 
-    /**
-     * @name endOfDay
-     * @category Day Helpers
-     * @summary Return the end of a day for the given date.
-     *
-     * @description
-     * Return the end of a day for the given date.
-     * The result will be in the local timezone.
-     *
-     * @param {Date|Number} date - the original date
-     * @returns {Date} the end of a day
-     * @throws {TypeError} 1 argument required
-     *
-     * @example
-     * // The end of a day for 2 September 2014 11:55:00:
-     * const result = endOfDay(new Date(2014, 8, 2, 11, 55, 0))
-     * //=> Tue Sep 02 2014 23:59:59.999
-     */
-    function endOfDay(dirtyDate) {
-      requiredArgs(1, arguments);
-      var date = toDate(dirtyDate);
-      date.setHours(23, 59, 59, 999);
-      return date;
-    }
-
     /**
      * @name endOfMonth
      * @category Month Helpers
@@ -6475,34 +6312,6 @@
       return date.getTime() < dateToCompare.getTime();
     }
 
-    /**
-     * @name isEqual
-     * @category Common Helpers
-     * @summary Are the given dates equal?
-     *
-     * @description
-     * Are the given dates equal?
-     *
-     * @param {Date|Number} dateLeft - the first date to compare
-     * @param {Date|Number} dateRight - the second date to compare
-     * @returns {Boolean} the dates are equal
-     * @throws {TypeError} 2 arguments required
-     *
-     * @example
-     * // Are 2 July 2014 06:30:45.000 and 2 July 2014 06:30:45.500 equal?
-     * const result = isEqual(
-     *   new Date(2014, 6, 2, 6, 30, 45, 0),
-     *   new Date(2014, 6, 2, 6, 30, 45, 500)
-     * )
-     * //=> false
-     */
-    function isEqual(dirtyLeftDate, dirtyRightDate) {
-      requiredArgs(2, arguments);
-      var dateLeft = toDate(dirtyLeftDate);
-      var dateRight = toDate(dirtyRightDate);
-      return dateLeft.getTime() === dateRight.getTime();
-    }
-
     /**
      * @name isSameMonth
      * @category Month Helpers
@@ -7753,7 +7562,7 @@
 
     /** Render the Footer component (empty as default).*/
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    function Footer$1(props) {
+    function Footer(props) {
         var _a = useDayPicker(), footer = _a.footer, styles = _a.styles, tfoot = _a.classNames.tfoot;
         if (!footer)
             return React__default.createElement(React__default.Fragment, null);
@@ -8907,7 +8716,7 @@
         });
         var HeadComponent = (_a = components === null || components === void 0 ? void 0 : components.Head) !== null && _a !== void 0 ? _a : Head;
         var RowComponent = (_b = components === null || components === void 0 ? void 0 : components.Row) !== null && _b !== void 0 ? _b : Row;
-        var FooterComponent = (_c = components === null || components === void 0 ? void 0 : components.Footer) !== null && _c !== void 0 ? _c : Footer$1;
+        var FooterComponent = (_c = components === null || components === void 0 ? void 0 : components.Footer) !== null && _c !== void 0 ? _c : Footer;
         return (React__default.createElement("table", { id: props.id, className: classNames.table, style: styles.table, role: "grid", "aria-labelledby": props['aria-labelledby'] },
             !hideHead && React__default.createElement(HeadComponent, null),
             React__default.createElement("tbody", { className: classNames.tbody, style: styles.tbody }, weeks.map(function (week) { return (React__default.createElement(RowComponent, { displayMonth: props.displayMonth, key: week.weekNumber, dates: week.dates, weekNumber: week.weekNumber })); })),
@@ -11002,396 +10811,83 @@
 
     var reactResponsiveExports = reactResponsive.exports;
 
-    var IconsSvg = function (_a) {
-        var fill = _a.fill, size = _a.size, icon = _a.icon;
-        switch (icon) {
-            case 'spinner':
-                return (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "".concat(size || 25), height: "".concat(size || 25), viewBox: "0 0 24 24" },
-                    React__default.createElement("style", null, "\n      .spinner_z9k8 {\n      transform-origin: center;\n      animation: spinner_StKS .75s infinite linear;\n      }\n      @keyframes spinner_StKS {\n      100% {\n      transform: rotate(360deg);\n      }\n      }\n      "),
-                    React__default.createElement("path", { d: "M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z", opacity: ".25", fill: fill }),
-                    React__default.createElement("path", { d: "M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z", className: "spinner_z9k8", fill: fill })));
-            case 'warning':
-                return (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "".concat(size || 25), height: "".concat(size || 25), className: "svg-icon", style: {
-                        verticalAlign: 'middle',
-                        fill: fill,
-                        overflow: 'hidden',
-                        minWidth: '25px',
-                        minHeight: '25px',
-                    }, viewBox: "0 0 1024 1024", version: "1.1" },
-                    React__default.createElement("path", { d: "M42.666667 896h938.666666L512 85.333333 42.666667 896z m512-128h-85.333334v-85.333333h85.333334v85.333333z m0-170.666667h-85.333334v-170.666666h85.333334v170.666666z" })));
-        }
-    };
-
-    var parseDates = function (_a) {
-        var calendarRange = _a.calendarRange;
-        return (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) && (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from)
-            ? "".concat(format(calendarRange.from, 'dd.MM.yyyy'), " -\n").concat(format(calendarRange.to, 'dd.MM.yyyy'))
-            : null;
-    };
-
-    var parseDate = function (_a) {
-        var date = _a.date, _b = _a.dateFormat, dateFormat = _b === void 0 ? 'dd.MM.yyyy' : _b, language = _a.language;
-        return date
-            ? format(date, dateFormat, { locale: language === 'en' ? enUS : fi })
-            : null;
+    var SpinnerSVG = function (_a) {
+        var fill = _a.fill, size = _a.size;
+        return (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "".concat(size || 25), height: "".concat(size || 25), viewBox: "0 0 24 24" },
+            React__default.createElement("style", null, "\n  .spinner_z9k8 {\n  transform-origin: center;\n  animation: spinner_StKS .75s infinite linear;\n  }\n  @keyframes spinner_StKS {\n  100% {\n  transform: rotate(360deg);\n  }\n  }\n  "),
+            React__default.createElement("path", { d: "M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z", opacity: ".25", fill: fill }),
+            React__default.createElement("path", { d: "M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z", className: "spinner_z9k8", fill: fill })));
     };
 
-    var nightsCount = function (_a) {
-        var calendarRange = _a.calendarRange;
-        if (!calendarRange || !calendarRange.from || !calendarRange.to) {
-            return undefined;
-        }
-        var diffDays = differenceInCalendarDays(calendarRange.to, calendarRange.from);
-        return diffDays;
-    };
-
-    var calendarSelectionRules = function (_a) {
-        var _b;
-        var range = _a.range, newDisableCalendarDates = _a.newDisableCalendarDates, setCalendarRange = _a.setCalendarRange, setDisabledDates = _a.setDisabledDates, calendarRange = _a.calendarRange, overlappingDate = _a.overlappingDate, setCalendarHasError = _a.setCalendarHasError, rangeContext = _a.rangeContext;
-        // Get and parse needed data
-        var rangeFrom = (range === null || range === void 0 ? void 0 : range.from) ? endOfDay(range.from) : null;
-        var rangeTo = (range === null || range === void 0 ? void 0 : range.to) ? endOfDay(range.to) : null;
-        var calendarRangeFrom = (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from)
-            ? endOfDay(calendarRange.from)
-            : null;
-        var calendarRangeTo = (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) ? endOfDay(calendarRange.to) : null;
-        var rangeContextFrom = (rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.from)
-            ? endOfDay(rangeContext.from)
-            : null;
-        var rangeContextTo = (rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.to) ? endOfDay(rangeContext.to) : null;
-        // When some dates are not available for selection, the earliest date will be available only for "end"
-        // and the latest date will only be available for "start"
-        var rangeFromDate = !range && calendarRangeFrom && calendarRangeTo
-            ? calendarRangeFrom
-            : rangeFrom;
-        var overlappingDateFrom = (overlappingDate === null || overlappingDate === void 0 ? void 0 : overlappingDate.length)
-            ? overlappingDate.find(function (date) {
-                return !!(date.from && rangeFromDate)
-                    ? isEqual(endOfDay(date.from), rangeFromDate)
-                    : false;
-            })
-            : null;
-        var overlappingDateTo = (overlappingDate === null || overlappingDate === void 0 ? void 0 : overlappingDate.length)
-            ? overlappingDate.find(function (date) {
-                return !!(date.from && rangeTo) ? isEqual(endOfDay(date.from), rangeTo) : false;
-            })
-            : null;
-        //----------
-        var checkOutRange = ((_b = newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.availableDates) === null || _b === void 0 ? void 0 : _b.length)
-            ? newDisableCalendarDates.availableDates.find(function (checkInDate) {
-                return !!(checkInDate.checkIn && rangeFrom)
-                    ? isEqual(endOfDay(checkInDate.checkIn), rangeFrom)
-                    : false;
-            })
-            : null;
-        // On check-in, disable future dates that are unavailable for checkout
-        disableFutureDates({
-            rangeFrom: rangeFrom,
-            checkOutRange: checkOutRange,
-            setDisabledDates: setDisabledDates,
-            newDisableCalendarDates: newDisableCalendarDates,
-        });
-        // Calendar selection rules: The cases are handled sequentially, starting from simple selections to more complex contextual selections.
-        // The rules are processed in a specific order, so one case is handled before another.
-        // Changing the order will cause the rules to break or not work properly.
-        if ((calendarRangeFrom &&
-            overlappingDateFrom &&
-            rangeFrom &&
-            !isEqual(rangeFrom, calendarRangeFrom)) ||
-            !range ||
-            (calendarRangeFrom &&
-                calendarRangeTo &&
-                overlappingDateTo &&
-                rangeTo &&
-                !isEqual(rangeTo, calendarRangeTo))) {
-            // 1. If dates overlap, clear the selection.
-            return setCalendarRange(undefined);
-        }
-        if (
-        // 2. If selected "start" is after "range context end", clear selection and display error.
-        // Also, if there are unavailable dates between the rangeContext "start" and "end", do not allow a fully overlapping selection.
-        (rangeFrom && rangeContextTo && isAfter(rangeFrom, rangeContextTo)) ||
-            // In case of current rangeTo is after contextRange and user clicks the new check-in
-            (calendarRangeFrom &&
-                calendarRangeTo &&
-                rangeContextTo &&
-                rangeTo &&
-                // If rangeTo has been adjusted, the current click was at the end
-                // In this case we can verify if the new click (check-in-to-be) goes over the context range end
-                !isEqual(rangeTo, calendarRangeTo) &&
-                isAfter(rangeTo, rangeContextTo))) {
-            setCalendarHasError && setCalendarHasError(true);
-            return setCalendarRange(undefined);
-        }
-        if (rangeFrom && rangeTo && isEqual(rangeFrom, rangeTo)) {
-            // 3. If "start" is selected and the same date is clicked again, keep the current "start" selection.
-            return setCalendarRange({ from: rangeFrom, to: undefined });
-        }
-        if (calendarRangeFrom && calendarRangeTo && !range) {
-            // 4. If "calendarRange" has dates selected and the same "start" date is clicked, the "range" will become undefined.
-            // Set the current selection (calendarRange) to the initial "start" of calendarRange.
-            return setCalendarRange({ from: calendarRangeFrom, to: undefined });
-        }
-        // 5. Handle gap selection backwards and forwards
-        if (
-        // In the range context case, every date selection that is after selected "start" last checkout,
-        // clear selection and prompt error
-        rangeContext &&
-            rangeTo &&
-            (checkOutRange === null || checkOutRange === void 0 ? void 0 : checkOutRange.lastCheckOut) &&
-            isAfter(rangeTo, endOfDay(checkOutRange.lastCheckOut)) &&
-            // Handle case of existing range that span over the end of the context range
-            ((calendarRangeTo && !isEqual(rangeTo, calendarRangeTo)) ||
-                !calendarRangeTo) &&
-            isAfter(rangeTo, endOfDay(rangeContext.to))) {
-            setCalendarHasError && setCalendarHasError(true);
-            return setCalendarRange(undefined);
-        }
-        if (
-        // Enforce on every date selection before current "start", mark as "start" selection
-        rangeFrom &&
-            calendarRangeFrom &&
-            isBefore(rangeFrom, calendarRangeFrom)) {
-            return setCalendarRange({ from: rangeFrom, to: undefined });
-        }
-        if (
-        // Every date selection that is after selected "start" last checkout, mark as "start"
-        rangeTo &&
-            (checkOutRange === null || checkOutRange === void 0 ? void 0 : checkOutRange.lastCheckOut) &&
-            isAfter(rangeTo, endOfDay(checkOutRange.lastCheckOut))) {
-            if (overlappingDateTo) {
-                return setCalendarRange(undefined);
-            }
-            return setCalendarRange({ from: rangeTo, to: undefined });
-        }
-        if (calendarRangeFrom &&
-            rangeFrom &&
-            !isEqual(calendarRangeFrom, rangeFrom)) {
-            // 6. If "calendarRange" has selected dates and the new selection "start" differs from the current "calendarRange start", reset and make a new "start" selection.
-            return setCalendarRange({ from: rangeFrom, to: undefined });
-        }
-        else if (calendarRangeTo && rangeTo && !isEqual(calendarRangeTo, rangeTo)) {
-            // 7. If "calendarRange" has selected dates and the new selection "end" differs from the current "calendarRange end", reset and make a new "start" selection.
-            return setCalendarRange({ from: rangeTo, to: undefined });
-        }
-        if (
-        // 8. If selected "end" is before "context start", mark as "start" and display error
-        rangeFrom &&
-            rangeTo &&
-            rangeContextFrom &&
-            isBefore(rangeTo, rangeContextFrom)) {
-            setCalendarHasError && setCalendarHasError(true);
-            return setCalendarRange({ from: rangeTo, to: undefined });
-        }
-        setCalendarRange(range);
-    };
-    /////////
-    var disableFutureDates = function (_a) {
-        var rangeFrom = _a.rangeFrom, checkOutRange = _a.checkOutRange, setDisabledDates = _a.setDisabledDates, newDisableCalendarDates = _a.newDisableCalendarDates;
-        if (rangeFrom && checkOutRange && setDisabledDates) {
-            // Get parse data
-            var checkIn = addDays(checkOutRange.checkIn, 1);
-            var firstCheckOut = addDays(checkOutRange.firstCheckOut, -1);
-            var noDatesRange = isEqual(checkIn, checkOutRange.firstCheckOut);
-            setDisabledDates(__spreadArray$1(__spreadArray$1([], __read(((newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.disabledDates) || [])), false), [
-                {
-                    from: noDatesRange ? undefined : checkIn,
-                    to: noDatesRange ? undefined : firstCheckOut,
-                },
-            ], false));
-        }
-    };
+    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 disabledDatesByPage = function (_a) {
-        var _b, _c, _d;
-        var newDisableCalendarDates = _a.newDisableCalendarDates, selectedPath = _a.selectedPath, today = _a.today;
-        var daysToOffsetCalendar = (newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.disabledDatesByPage) && selectedPath
-            ? [
-                (_b = newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.disabledDatesByPage) === null || _b === void 0 ? void 0 : _b.find(function (item) { return selectedPath === item.page; }),
-            ]
-            : [];
-        return daysToOffsetCalendar.length
-            ? [
-                {
-                    from: addDays(today, daysToOffsetCalendar.length && ((_c = daysToOffsetCalendar[0]) === null || _c === void 0 ? void 0 : _c.offset)
-                        ? (_d = daysToOffsetCalendar[0]) === null || _d === void 0 ? void 0 : _d.offset
-                        : -2),
-                    to: addDays(today, -100),
-                },
-            ]
-            : [];
-    };
+    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.rdp-day_selected {\n  background-color: var(--will-primary);\n  opacity: 1;\n}\n\n.will-calendar-filter-container .my-today:not(.rdp-day_selected) { \n  font-weight: 700;\n  opacity: 1;\n  color: var(--will-primary);\n}\n\n.will-calendar-filter-container .rdp-cell {\n  position: relative;\n}\n\n.will-calendar-filter-container .rdp-cell button {\n  font-weight: 500;\n}\n\n.will-calendar-filter-container .rdp-cell button.booked  {\n  font-weight: 400;\n  cursor: not-allowed;\n}\n\n.will-calendar-filter-container .rdp-cell .rdp-button[disabled] {\n  opacity: 0.5;\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.will-root .will-calendar-filter-container .will-calendar-tooltip,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-overlapping-date {\n position: absolute;\n top: -42px;\n transform: translateX(calc(-50% + 20px));\n display: none;\n white-space: nowrap;\n z-index: 2;\n}\n.will-root .will-calendar-filter-container .will-calendar-tooltip > div,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out > div,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-overlapping-date > 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.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out::before,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-overlapping-date::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.will-root .will-calendar-filter-container .rdp-cell:hover .will-calendar-tooltip,\n.will-root .will-calendar-filter-container .rdp-cell:hover .will-calendar-tooltip-check-out,\n.will-root .will-calendar-filter-container .rdp-cell:hover .will-calendar-tooltip-overlapping-date {\n  display: block;\n}\n\n/* Loading spinner */\n\n.will-root .will-calendar-filter-container .rdp-months {\n  position: relative;\n}\n\n.will-root .will-calendar-filter-container .will-calendar-spinner {\n  position: absolute;\n  top:0;\n  bottom:0;\n  left: 0;\n  right: 0;\n  background-color: var(--will-white-transparent);\n  z-index: 3;\n  display: none;\n  justify-content: center;\n  align-items: center;\n  font-weight: 600;\n}\n\n/* No active selection */\n\n.will-root .will-calendar-filter-container .rdp-day_selected.rdp-day_range_start.no-active-selection,\n.will-root .will-calendar-filter-container .rdp-day_selected.rdp-day_range_middle.no-active-selection,\n.will-root .will-calendar-filter-container .rdp-day_selected.rdp-day_range_end.no-active-selection {\n  background-color: var(--will-onahau);\n  color: inherit;\n}\n\n.will-root .will-calendar-filter-container .rdp-day_selected.rdp-day_range_start.no-active-selection:hover,\n.will-root .will-calendar-filter-container .rdp-day_selected.rdp-day_range_middle.no-active-selection:hover,\n.will-root .will-calendar-filter-container .rdp-day_selected.rdp-day_range_end.no-active-selection:hover {\n  background-color: var(--rdp-background-color);\n}\n\n/* Overlapping date */\n\n.will-root .will-calendar-filter-container .overlapping-date {\n  user-select: none;\n  pointer-events: none;\n  \n}\n\n.will-root .will-calendar-filter-container .overlapping-date:hover {\n  cursor: not-allowed;\n}\n\n\n";
+    styleInject(css_248z$8);
 
-    var handleCalendarModifiers = function (_a) {
+    var Calendar = React__default.forwardRef(function (_a, ref) {
         var _b;
-        var newDisableCalendarDates = _a.newDisableCalendarDates, calendarRange = _a.calendarRange, disabledDatesByPage = _a.disabledDatesByPage, disabledDates = _a.disabledDates, overlappingDate = _a.overlappingDate, rangeContext = _a.rangeContext, firstPossibleRangeContextCheckIn = _a.firstPossibleRangeContextCheckIn, lastPossibleRangeContextCheckOut = _a.lastPossibleRangeContextCheckOut, findFirstPossibleRangeContextCheckIn = _a.findFirstPossibleRangeContextCheckIn, findLastPossibleRangeContextCheckOut = _a.findLastPossibleRangeContextCheckOut, currentSelectionLastCheckoutDate = _a.currentSelectionLastCheckoutDate, lastPossibleCheckout = _a.lastPossibleCheckout;
-        // Parse data
-        var calendarRangeFrom = (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) && endOfDay(calendarRange.from);
-        var calendarRangeTo = (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) && endOfDay(calendarRange.to);
-        var rangeContextFrom = (rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.from) && endOfDay(rangeContext.from);
-        var rangeContextTo = (rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.to) && endOfDay(rangeContext.to);
-        var filteredOverlappingDates = overlappingDate
-            ? overlappingDate
-                .filter(function (date) {
-                var dateFrom = date.from ? endOfDay(date.from) : null;
-                var isBeforeRange = dateFrom &&
-                    (findFirstPossibleRangeContextCheckIn === null || findFirstPossibleRangeContextCheckIn === void 0 ? void 0 : findFirstPossibleRangeContextCheckIn.checkIn) &&
-                    isBefore(dateFrom, findFirstPossibleRangeContextCheckIn === null || findFirstPossibleRangeContextCheckIn === void 0 ? void 0 : findFirstPossibleRangeContextCheckIn.checkIn);
-                var isAfterRange = dateFrom &&
-                    (findLastPossibleRangeContextCheckOut === null || findLastPossibleRangeContextCheckOut === void 0 ? void 0 : findLastPossibleRangeContextCheckOut.lastCheckOut) &&
-                    isAfter(dateFrom, endOfDay(findLastPossibleRangeContextCheckOut === null || findLastPossibleRangeContextCheckOut === void 0 ? void 0 : findLastPossibleRangeContextCheckOut.lastCheckOut));
-                return !(isBeforeRange || isAfterRange);
-            })
-                .map(function (date) { return ({ from: date.from }); })
-            : [];
-        return {
-            booked: disabledDatesByPage.length
-                ? disabledDatesByPage
-                : (disabledDates === null || disabledDates === void 0 ? void 0 : disabledDates.length)
-                    ? __spreadArray$1(__spreadArray$1(__spreadArray$1([
-                        lastPossibleCheckout || []
-                    ], __read(disabledDates), false), __read(firstPossibleRangeContextCheckIn), false), __read(lastPossibleRangeContextCheckOut), false) : ((_b = newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.disabledDates) === null || _b === void 0 ? void 0 : _b.length)
-                    ? __spreadArray$1(__spreadArray$1(__spreadArray$1([
-                        lastPossibleCheckout || []
-                    ], __read(newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.disabledDates), false), __read(firstPossibleRangeContextCheckIn), false), __read(lastPossibleRangeContextCheckOut), false) : [],
-            disabledAfterCheckIn: calendarRangeFrom
-                ? [{ after: calendarRangeFrom }]
-                : [],
-            overlappingDate: !calendarRangeFrom && !!filteredOverlappingDates.length
-                ? filteredOverlappingDates.map(function (date) { return ({ from: date.from }); })
-                : [],
-            noActiveSelectionStart: rangeContextFrom || [],
-            noActiveSelectionMid: [
-                rangeContextFrom && rangeContextTo
-                    ? { after: rangeContextFrom, before: rangeContextTo }
-                    : [],
-            ],
-            noActiveSelectionEnd: rangeContextTo || [],
-            checkoutOptionsMid: __spreadArray$1([], __read((calendarRangeFrom &&
-                !calendarRangeTo &&
-                (currentSelectionLastCheckoutDate === null || currentSelectionLastCheckoutDate === void 0 ? void 0 : currentSelectionLastCheckoutDate.lastCheckOut)
-                ? [
-                    {
-                        after: calendarRangeFrom,
-                        before: addDays(currentSelectionLastCheckoutDate.lastCheckOut, 1),
-                    },
-                ]
-                : [])), false),
-            checkInOnly: __spreadArray$1([], __read(((findFirstPossibleRangeContextCheckIn === null || findFirstPossibleRangeContextCheckIn === void 0 ? void 0 : findFirstPossibleRangeContextCheckIn.checkIn) &&
-                rangeContext &&
-                rangeContextFrom
-                ? [
-                    {
-                        from: findFirstPossibleRangeContextCheckIn.checkIn,
-                        to: addDays(rangeContextFrom, -1),
-                    },
-                ]
-                : [])), false),
-            checkOutOnly: __spreadArray$1([], __read(((findLastPossibleRangeContextCheckOut === null || findLastPossibleRangeContextCheckOut === void 0 ? void 0 : findLastPossibleRangeContextCheckOut.checkIn) &&
-                findLastPossibleRangeContextCheckOut.lastCheckOut
-                ? [
-                    {
-                        from: addDays(findLastPossibleRangeContextCheckOut.checkIn, 1),
-                        to: findLastPossibleRangeContextCheckOut.lastCheckOut,
-                    },
-                ]
-                : [])), false),
-        };
-    };
-
-    var handleRangeContextDisabledDates = function (_a) {
-        var rangeContext = _a.rangeContext, availableDates = _a.availableDates, calendarRange = _a.calendarRange;
-        var findFirstPossibleRangeContextCheckIn;
-        var findLastPossibleRangeContextCheckOut;
-        var firstPossibleRangeContextCheckIn = [];
-        var lastPossibleRangeContextCheckOut = [];
-        // Parse data
-        var rangeContextFrom = (rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.from) && endOfDay(rangeContext.from);
-        var rangeContextTo = (rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.to) && endOfDay(rangeContext.to);
-        var calendarRangeFrom = (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) && endOfDay(calendarRange.from);
-        if (rangeContext && (availableDates === null || availableDates === void 0 ? void 0 : availableDates.length)) {
-            // Find the first possible check-in after the last date gap till the range context
-            findFirstPossibleRangeContextCheckIn = availableDates === null || availableDates === void 0 ? void 0 : availableDates.find(function (date) {
-                return rangeContextFrom &&
-                    endOfDay(date.checkIn) < rangeContextFrom &&
-                    endOfDay(date.lastCheckOut) >= rangeContextFrom;
-            });
-            if (findFirstPossibleRangeContextCheckIn === null || findFirstPossibleRangeContextCheckIn === void 0 ? void 0 : findFirstPossibleRangeContextCheckIn.checkIn) {
-                firstPossibleRangeContextCheckIn.push({
-                    before: findFirstPossibleRangeContextCheckIn.checkIn,
-                });
-            }
-            // Find the last possible checkout before the first date gap till the range context
-            findLastPossibleRangeContextCheckOut = availableDates === null || availableDates === void 0 ? void 0 : availableDates.find(function (date) {
-                return rangeContextTo && isEqual(rangeContextTo, endOfDay(date.checkIn));
-            });
-            if (findLastPossibleRangeContextCheckOut === null || findLastPossibleRangeContextCheckOut === void 0 ? void 0 : findLastPossibleRangeContextCheckOut.checkIn) {
-                lastPossibleRangeContextCheckOut.push({
-                    after: findLastPossibleRangeContextCheckOut.lastCheckOut,
-                });
+        var selectedPath = _a.selectedPath, calendarRange = _a.calendarRange, setCalendarRange = _a.setCalendarRange, language = _a.language, disableCalendarDates = _a.disableCalendarDates, requestDates = _a.requestDates, disabledDates = _a.disabledDates, setDisabledDates = _a.setDisabledDates, updateCalendarMonthNavigation = _a.updateCalendarMonthNavigation, setUpdateCalendarMonthNavigation = _a.setUpdateCalendarMonthNavigation, updateCalendarDefaultMoth = _a.updateCalendarDefaultMoth, loadingData = _a.loadingData, initialCalendarRange = _a.initialCalendarRange, showFeedback = _a.showFeedback, palette = _a.palette;
+        // Translations
+        var t = useTranslation('common').t;
+        var isTablet = reactResponsiveExports.useMediaQuery({ maxWidth: 960 });
+        var today = startOfDay(new Date());
+        var selectedStartDate = calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from;
+        // Handle overlapping availableDates.lastCheckOut and disabledDates.start
+        var _c = __read(React__default.useState(undefined), 2), overlappingDate = _c[0], setOverlappingDate = _c[1];
+        var newDisableCalendarDates = React__default.useMemo(function () {
+            if (disableCalendarDates === null || disableCalendarDates === void 0 ? void 0 : disableCalendarDates.availableDates) {
+                var dateFormat_1 = 'dd-MM-yyyy';
+                var disabledDates_1 = disableCalendarDates.disabledDates;
+                var _a = (disabledDates_1 || []).reduce(function (acc, dateRange) {
+                    var _a, _b;
+                    var formattedFromDate = format(dateRange.from, dateFormat_1);
+                    var formattedToDate = format(dateRange.to, dateFormat_1);
+                    var hasTwoOverlappingDates = (_a = disableCalendarDates.availableDates) === null || _a === void 0 ? void 0 : _a.some(function (item) {
+                        return format(item.lastCheckOut, dateFormat_1) === formattedFromDate &&
+                            format(item.lastCheckOut, dateFormat_1) === formattedToDate;
+                    });
+                    var hasOneOverlappingDate = (_b = disableCalendarDates.availableDates) === null || _b === void 0 ? void 0 : _b.some(function (item) {
+                        return format(item.lastCheckOut, dateFormat_1) === formattedFromDate &&
+                            format(item.lastCheckOut, dateFormat_1) !== formattedToDate;
+                    });
+                    if (hasTwoOverlappingDates) {
+                        acc.newOverlappingDates.push(dateRange);
+                    }
+                    else if (hasOneOverlappingDate) {
+                        acc.newOverlappingDates.push(dateRange);
+                        acc.updatedDisabledDates.push(__assign$2(__assign$2({}, dateRange), { from: addDays(dateRange.from, 1) }));
+                    }
+                    else {
+                        acc.updatedDisabledDates.push(dateRange);
+                    }
+                    return acc;
+                }, { updatedDisabledDates: [], newOverlappingDates: [] }), updatedDisabledDates = _a.updatedDisabledDates, newOverlappingDates_1 = _a.newOverlappingDates;
+                if (newOverlappingDates_1.length) {
+                    setOverlappingDate(function (prev) {
+                        if (prev === void 0) { prev = []; }
+                        return __spreadArray$1(__spreadArray$1([], __read(prev), false), __read(newOverlappingDates_1), false);
+                    });
+                }
+                var newDisableCalendarDates_1 = __assign$2(__assign$2({}, disableCalendarDates), { disabledDates: updatedDisabledDates });
+                return newDisableCalendarDates_1;
             }
-        }
-        // Get last possible check-out dates for current check-in
-        var currentSelectionLastCheckoutDate = availableDates === null || availableDates === void 0 ? void 0 : availableDates.find(function (date) {
-            return calendarRangeFrom
-                ? isEqual(endOfDay(date.checkIn), calendarRangeFrom)
-                : false;
-        });
-        return {
-            findFirstPossibleRangeContextCheckIn: findFirstPossibleRangeContextCheckIn,
-            findLastPossibleRangeContextCheckOut: findLastPossibleRangeContextCheckOut,
-            firstPossibleRangeContextCheckIn: firstPossibleRangeContextCheckIn,
-            lastPossibleRangeContextCheckOut: lastPossibleRangeContextCheckOut,
-            currentSelectionLastCheckoutDate: currentSelectionLastCheckoutDate,
-        };
-    };
-
-    // Case: If the selected dates do not overlap with the rangeContext during continuous selection,
-    //       set setCalendarHasError to true. This will display an error message and
-    //       prevent the submission of the selected dates.
-    var checkForContinuousSelection = function (_a) {
-        var setCalendarHasError = _a.setCalendarHasError, rangeContext = _a.rangeContext, calendarRange = _a.calendarRange, calendarHasError = _a.calendarHasError, disabledDates = _a.disabledDates;
-        var calendarRangeFrom = (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) && endOfDay(calendarRange.from);
-        var calendarRangeTo = (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) && endOfDay(calendarRange.to);
-        var rangeContextFrom = (rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.from) && endOfDay(rangeContext.from);
-        var rangeContextTo = (rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.to) && endOfDay(rangeContext.to);
-        // Checking if rangeFrom is equal to or before rangeContextTo
-        var startIsEqualOrBeforeRangeContextEnd = calendarRangeFrom && rangeContextTo
-            ? isBefore(calendarRangeFrom, rangeContextTo) ||
-                isEqual(calendarRangeFrom, rangeContextTo)
-            : null;
-        // Checking if rangeTo is equal to or after rangeContextFrom
-        var endIsEqualOrAfterRangeContextStart = calendarRangeTo && rangeContextFrom && rangeContextTo
-            ? isAfter(calendarRangeTo, rangeContextFrom) ||
-                isEqual(calendarRangeTo, rangeContextFrom)
-            : null;
-        // Check if selection overlapping unavailable dates
-        var selectionOverlappingUnavailableDate = disabledDates === null || disabledDates === void 0 ? void 0 : disabledDates.find(function (range) {
-            var rangeFrom = endOfDay(range.from);
-            var rangeTo = endOfDay(range.to);
-            return (rangeContextFrom &&
-                rangeContextTo &&
-                areIntervalsOverlapping({ start: rangeContextFrom, end: rangeContextTo }, { start: rangeFrom, end: rangeTo }) &&
-                calendarRangeFrom &&
-                calendarRangeTo &&
-                areIntervalsOverlapping({ start: calendarRangeFrom, end: calendarRangeTo }, { start: rangeFrom, end: rangeTo }));
+            return disableCalendarDates;
+        }, [
+            disableCalendarDates,
+            calendarRange,
+            updateCalendarMonthNavigation,
+            initialCalendarRange,
+            updateCalendarDefaultMoth,
+        ]);
+        // Handle disable dates by page
+        var disabledDatesByPage = handleDisabledDatesByPage({
+            today: today,
+            selectedPath: selectedPath,
+            newDisableCalendarDates: newDisableCalendarDates,
         });
+        // Handle tooltip
         React__default.useEffect(function () {
-            if ((rangeContext &&
-                calendarRangeFrom &&
-                !startIsEqualOrBeforeRangeContextEnd) ||
-                (rangeContext &&
-                    calendarRangeTo &&
-                    !endIsEqualOrAfterRangeContextStart) ||
-                selectionOverlappingUnavailableDate) {
-                !!(setCalendarHasError && !calendarHasError) && setCalendarHasError(true);
-            }
-        });
-    };
-
-    var useCalendarTooltips = function (_a) {
-        var showFeedback = _a.showFeedback;
-        return React__default.useEffect(function () {
             if (typeof document === 'undefined' || !showFeedback)
                 return;
             // Children
@@ -11399,20 +10895,13 @@
             var calendarTooltipCheckOut = document.querySelector('.will-calendar-tooltip-check-out');
             var calendarTooltipOverlappingDate = document.querySelector('.will-calendar-tooltip-overlapping-date');
             var loadingSpinner = document.querySelector('.will-filter-bar-calendar .will-calendar-spinner');
-            var calendarTooltipCheckInOnly = document.querySelector('.will-calendar-tooltip-check-in-only');
-            var calendarTooltipCheckOutOnly = document.querySelector('.will-calendar-tooltip-check-out-only');
             // Parents
             var calendarButtons = document.querySelectorAll('.will-filter-bar-calendar .rdp-cell:has(.booked):not(:has(.disabled-after-check-in))');
             var calendarButtonsCheckOut = document.querySelectorAll('.will-filter-bar-calendar .rdp-cell:has(.booked.disabled-after-check-in)');
             var calendarMonthContainer = document.querySelector('.will-filter-bar-calendar .rdp-months');
             var calendarOverlappingDate = document.querySelectorAll('.will-filter-bar-calendar .rdp-cell:has(.overlapping-date)');
-            var calendarCheckInOnly = document.querySelectorAll('.will-filter-bar-calendar .rdp-cell:has(.check-in-only)');
-            var calendarCheckOutOnly = document.querySelectorAll('.will-filter-bar-calendar .rdp-cell:has(.check-out-only)');
-            // Append children to parents
             var tooltipClonesCheckIn = [];
             var tooltipClonesCheckOut = [];
-            var tooltipClonesCheckInOnly = [];
-            var tooltipClonesCheckOutOnly = [];
             var tooltipClonesSpinner = [];
             var tooltipClonesOverlappingDates = [];
             if (calendarTooltip && calendarButtons.length > 0) {
@@ -11429,26 +10918,13 @@
                     tooltipClonesCheckOut.push(tooltipClone);
                 });
             }
-            if (calendarTooltipCheckOutOnly && calendarCheckOutOnly.length > 0) {
-                calendarCheckOutOnly.forEach(function (element) {
-                    var tooltipClone = calendarTooltipCheckOutOnly.cloneNode(true);
-                    element.appendChild(tooltipClone);
-                    tooltipClonesCheckOutOnly.push(tooltipClone);
-                });
-            }
-            if (calendarTooltipCheckInOnly && calendarCheckInOnly.length > 0) {
-                calendarCheckInOnly.forEach(function (element) {
-                    var tooltipClone = calendarTooltipCheckInOnly.cloneNode(true);
-                    element.appendChild(tooltipClone);
-                    tooltipClonesCheckInOnly.push(tooltipClone);
-                });
-            }
             if (loadingSpinner && calendarMonthContainer) {
                 var tooltipClone = loadingSpinner.cloneNode(true);
                 calendarMonthContainer.appendChild(tooltipClone);
                 tooltipClonesSpinner.push(tooltipClone);
             }
-            if (calendarTooltipOverlappingDate && calendarOverlappingDate.length > 0) {
+            if (calendarTooltipOverlappingDate &&
+                calendarOverlappingDate.length > 0) {
                 calendarOverlappingDate.forEach(function (element) {
                     var tooltipClone = calendarTooltipOverlappingDate.cloneNode(true);
                     element.appendChild(tooltipClone);
@@ -11460,15 +10936,16 @@
                 tooltipClonesCheckOut.forEach(function (clone) { return clone.remove(); });
                 tooltipClonesSpinner.forEach(function (clone) { return clone.remove(); });
                 tooltipClonesOverlappingDates.forEach(function (clone) { return clone.remove(); });
-                tooltipClonesCheckInOnly.forEach(function (clone) { return clone.remove(); });
-                tooltipClonesCheckOutOnly.forEach(function (clone) { return clone.remove(); });
             };
-        });
-    };
-
-    var useCalendarLoadingSpinner = function (_a) {
-        var loadingData = _a.loadingData;
-        return React__default.useEffect(function () {
+        }, [
+            calendarRange,
+            updateCalendarMonthNavigation,
+            overlappingDate,
+            initialCalendarRange,
+            updateCalendarDefaultMoth,
+        ]);
+        // Handle loading spinner
+        React__default.useEffect(function () {
             if (typeof document === 'undefined')
                 return;
             var loadingSpinner = document.querySelector('.will-filter-bar-calendar .rdp-months .will-calendar-spinner');
@@ -11480,191 +10957,170 @@
                 if (loadingSpinner)
                     loadingSpinner.style.display = 'none';
             }
-        });
-    };
-
-    var useUpdateDisabledDates = function (_a) {
-        var disableCalendarDates = _a.disableCalendarDates, calendarRange = _a.calendarRange, updateCalendarMonthNavigation = _a.updateCalendarMonthNavigation, updateCalendarDefaultMonth = _a.updateCalendarDefaultMonth;
-        var _b = __read(React__default.useState(undefined), 2), overlappingDate = _b[0], setOverlappingDate = _b[1];
-        var _c = __read(React__default.useState([]), 2), lastPossibleCheckout = _c[0], setLatsPossibleCheckout = _c[1];
-        var newDisableCalendarDates = React__default.useMemo(function () {
-            if (disableCalendarDates === null || disableCalendarDates === void 0 ? void 0 : disableCalendarDates.availableDates) {
-                var dateFormat_1 = 'dd-MM-yyyy';
-                var disabledDates = disableCalendarDates.disabledDates;
-                var _a = (disabledDates || []).reduce(function (acc, dateRange) {
-                    var _a, _b;
-                    var formattedFromDate = format(dateRange.from, dateFormat_1);
-                    var formattedToDate = format(dateRange.to, dateFormat_1);
-                    var hasTwoOverlappingDates = (_a = disableCalendarDates.availableDates) === null || _a === void 0 ? void 0 : _a.some(function (item) {
-                        return format(item.lastCheckOut, dateFormat_1) === formattedFromDate &&
-                            format(item.lastCheckOut, dateFormat_1) === formattedToDate;
-                    });
-                    var hasOneOverlappingDate = (_b = disableCalendarDates.availableDates) === null || _b === void 0 ? void 0 : _b.some(function (item) {
-                        return format(item.lastCheckOut, dateFormat_1) === formattedFromDate &&
-                            format(item.lastCheckOut, dateFormat_1) !== formattedToDate;
-                    });
-                    if (hasTwoOverlappingDates) {
-                        acc.newOverlappingDates.push(dateRange);
-                    }
-                    else if (hasOneOverlappingDate) {
-                        acc.newOverlappingDates.push(dateRange);
-                        acc.updatedDisabledDates.push(__assign$2(__assign$2({}, dateRange), { from: addDays(dateRange.from, 1) }));
-                    }
-                    else {
-                        acc.updatedDisabledDates.push(dateRange);
-                    }
-                    return acc;
-                }, { updatedDisabledDates: [], newOverlappingDates: [] }), updatedDisabledDates = _a.updatedDisabledDates, newOverlappingDates = _a.newOverlappingDates;
-                // Find last possible checkout ( disable all dates after the last possible checkout )
-                var lastPossibleCheckout_1 = disableCalendarDates.availableDates[disableCalendarDates.availableDates.length - 1].lastCheckOut;
-                if (lastPossibleCheckout_1) {
-                    setLatsPossibleCheckout({ after: lastPossibleCheckout_1 });
-                }
-                // Extract overlapping dates ( dates that are only available for checkout )
-                if (newOverlappingDates.length) {
-                    setOverlappingDate(__spreadArray$1([], __read(newOverlappingDates), false));
-                }
-                var newDisableCalendarDates_1 = __assign$2(__assign$2({}, disableCalendarDates), { disabledDates: updatedDisabledDates });
-                return newDisableCalendarDates_1;
-            }
-            return disableCalendarDates;
-        }, [
-            disableCalendarDates,
-            calendarRange,
-            updateCalendarMonthNavigation,
-            updateCalendarDefaultMonth,
-        ]);
-        return { newDisableCalendarDates: newDisableCalendarDates, overlappingDate: overlappingDate, lastPossibleCheckout: lastPossibleCheckout };
-    };
-
-    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.will-calendar-filter-container .DayPicker {\n  font-size: 25px;\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-table {\n  border-collapse: separate;\n  border-spacing: 0px 2px;\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  color: var(--will-white)\n}\n\n.will-calendar-filter-container .my-today:not(.rdp-day_selected) { \n  font-weight: 700;\n  opacity: 1;\n  color: var(--will-primary);\n}\n\n.will-calendar-filter-container .rdp-cell {\n  position: relative;\n}\n\n.will-calendar-filter-container .rdp-cell button {\n  font-weight: 500;\n}\n\n.will-calendar-filter-container .rdp-cell button.booked  {\n  font-weight: 400;\n  cursor: not-allowed;\n}\n\n.will-calendar-filter-container .rdp-cell .rdp-button[disabled] {\n  color: var(--will-transparent-black);\n  opacity: 1\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/* Tooltips */\n.will-root .will-calendar-filter-container .will-calendar-tooltip,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-overlapping-date,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out-only,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-in-only {\n position: absolute;\n top: -42px;\n transform: translateX(calc(-50% + 20px));\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.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out > div,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-overlapping-date > div,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out-only > div,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-in-only > 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.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out::before,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-overlapping-date::before,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out-only::before,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-in-only::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.will-root .will-calendar-filter-container .rdp-cell:hover .will-calendar-tooltip,\n.will-root .will-calendar-filter-container .rdp-cell:hover .will-calendar-tooltip-check-out,\n.will-root .will-calendar-filter-container .rdp-cell:hover .will-calendar-tooltip-overlapping-date,\n.will-root .will-calendar-filter-container .rdp-cell:hover .will-calendar-tooltip-check-out-only,\n.will-root .will-calendar-filter-container .rdp-cell:hover .will-calendar-tooltip-check-in-only {\n  display: block;\n}\n\n/* Loading spinner */\n\n.will-root .will-calendar-filter-container .rdp-months {\n  position: relative;\n}\n\n.will-root .will-calendar-filter-container .will-calendar-spinner {\n  position: absolute;\n  top:0;\n  bottom:0;\n  left: 0;\n  right: 0;\n  background-color: var(--will-white-transparent);\n  z-index: 3;\n  display: none;\n  justify-content: center;\n  align-items: center;\n  font-weight: 600;\n}\n\n/* No active selection */\n\n.will-root .will-calendar-filter-container .no-active-selection-start,\n.will-root .will-calendar-filter-container .no-active-selection-mid,\n.will-root .will-calendar-filter-container .no-active-selection-end { \n  position: initial;\n}\n\n.will-root .will-calendar-filter-container .no-active-selection-start::before,\n.will-root .will-calendar-filter-container .no-active-selection-mid::before,\n.will-root .will-calendar-filter-container .no-active-selection-end::before { \n  content: \"\";\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 2px solid var(--will-light-grey);\n  box-sizing: border-box;\n}\n\n.will-root .will-calendar-filter-container .no-active-selection-start::before {\n  border-right: none;\n  border-top-left-radius: 50%;\n  border-bottom-left-radius: 50%;\n}\n\n.will-root .will-calendar-filter-container .no-active-selection-mid::before {\n  border-right: none;\n  border-left: none;\n}\n\n.will-root .will-calendar-filter-container .no-active-selection-end::before {\n  border-left: none;\n  border-top-right-radius: 50%;\n  border-bottom-right-radius: 50%;\n}\n\n.will-root .will-calendar-filter-container .rdp-day_selected.rdp-day_range_middle.checkout-option {\n  background-color: var(--will-primary-lightest);\n  color: inherit;\n}\n\n/* Overlapping date */\n\n.will-root .will-calendar-filter-container .overlapping-date {\n  user-select: none;\n  pointer-events: none;\n}\n\n.will-root .will-calendar-filter-container .overlapping-date:hover {\n  cursor: not-allowed;\n}\n\n@media (max-width: 600px) {\n /* Tooltips */\n.will-root .will-calendar-filter-container .will-calendar-tooltip,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-overlapping-date,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out-only,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-in-only {\n  top: -70px;\n  white-space: wrap;\n  max-width: 120px;\n}\n}\n\n\n";
-    styleInject(css_248z$8);
-
-    var Calendar = React__default.forwardRef(function (_a, ref) {
-        var _b, _c;
-        var selectedPath = _a.selectedPath, calendarRange = _a.calendarRange, setCalendarRange = _a.setCalendarRange, language = _a.language, disableCalendarDates = _a.disableCalendarDates, requestDates = _a.requestDates, disabledDates = _a.disabledDates, setDisabledDates = _a.setDisabledDates, updateCalendarMonthNavigation = _a.updateCalendarMonthNavigation, setUpdateCalendarMonthNavigation = _a.setUpdateCalendarMonthNavigation, updateCalendarDefaultMonth = _a.updateCalendarDefaultMonth, loadingData = _a.loadingData, showFeedback = _a.showFeedback, palette = _a.palette, setCalendarHasError = _a.setCalendarHasError, setUpdatedForSubmit = _a.setUpdatedForSubmit, rangeContext = _a.rangeContext, calendarHasError = _a.calendarHasError;
-        // Translations
-        var t = useTranslation('common').t;
-        var isTablet = reactResponsiveExports.useMediaQuery({ maxWidth: 960 });
-        var today = startOfDay(new Date());
-        var selectedStartDate = calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from;
-        var rangeContextStartDate = rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.from;
-        // Handle initial disable dates including overlapping availableDates.lastCheckOut and disabledDates.start
-        var _d = useUpdateDisabledDates({
-            disableCalendarDates: disableCalendarDates,
-            calendarRange: calendarRange,
-            updateCalendarMonthNavigation: updateCalendarMonthNavigation,
-            updateCalendarDefaultMonth: updateCalendarDefaultMonth,
-        }), newDisableCalendarDates = _d.newDisableCalendarDates, overlappingDate = _d.overlappingDate, lastPossibleCheckout = _d.lastPossibleCheckout;
-        // Handle disable dates by page
-        var disabledDatesByPage$1 = disabledDatesByPage({
-            today: today,
-            selectedPath: selectedPath,
-            newDisableCalendarDates: newDisableCalendarDates,
-        });
-        // Handle tooltip
-        useCalendarTooltips({
-            showFeedback: showFeedback,
-        });
-        // Handle loading spinner
-        useCalendarLoadingSpinner({
-            loadingData: loadingData,
-        });
-        // Handle the date selection and availability for selection logic.
-        var handleOnSelect = function (range) {
-            setCalendarHasError && calendarHasError && setCalendarHasError(false);
-            calendarSelectionRules({
-                range: range,
-                newDisableCalendarDates: newDisableCalendarDates,
-                setCalendarRange: setCalendarRange,
-                setDisabledDates: setDisabledDates,
-                calendarRange: calendarRange,
-                overlappingDate: overlappingDate,
-                setCalendarHasError: setCalendarHasError,
-                rangeContext: rangeContext,
-            });
-            setUpdatedForSubmit && setUpdatedForSubmit(true);
-        };
-        // Handle disabled dates for range context
-        var _e = handleRangeContextDisabledDates({
-            rangeContext: rangeContext,
-            availableDates: newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.availableDates,
-            calendarRange: calendarRange,
-        }), findFirstPossibleRangeContextCheckIn = _e.findFirstPossibleRangeContextCheckIn, findLastPossibleRangeContextCheckOut = _e.findLastPossibleRangeContextCheckOut, firstPossibleRangeContextCheckIn = _e.firstPossibleRangeContextCheckIn, lastPossibleRangeContextCheckOut = _e.lastPossibleRangeContextCheckOut, currentSelectionLastCheckoutDate = _e.currentSelectionLastCheckoutDate;
-        // Handle check for continuous selection in the range context
-        checkForContinuousSelection({
-            setCalendarHasError: setCalendarHasError,
-            rangeContext: rangeContext,
-            calendarRange: calendarRange,
-            calendarHasError: calendarHasError,
-            disabledDates: newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.disabledDates,
-        });
+        }, [loadingData, updateCalendarMonthNavigation, updateCalendarDefaultMoth]);
         return (React__default.createElement("div", { className: "will-filter-bar-calendar", ref: ref },
             React__default.createElement("div", { className: "will-calendar-filter-container" },
-                React__default.createElement(DayPicker, { key: updateCalendarDefaultMonth, id: "will-calendar", mode: "range", locale: language === 'en' ? enUS : fi, numberOfMonths: !isTablet ? 2 : 1, weekStartsOn: 1, selected: calendarRange, onSelect: function (range) { return handleOnSelect(range); }, captionLayout: "dropdown-buttons", defaultMonth: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) ||
+                React__default.createElement(DayPicker, { key: updateCalendarDefaultMoth, id: "will-calendar", mode: "range", locale: language === 'en' ? enUS : fi, numberOfMonths: !isTablet ? 2 : 1, weekStartsOn: 1, selected: calendarRange, onSelect: function (range) {
+                        return handleSelectedCheckIn({
+                            range: range,
+                            newDisableCalendarDates: newDisableCalendarDates,
+                            setCalendarRange: setCalendarRange,
+                            setDisabledDates: setDisabledDates,
+                            calendarRange: calendarRange,
+                            overlappingDate: overlappingDate,
+                        });
+                    }, captionLayout: "dropdown-buttons", defaultMonth: (initialCalendarRange === null || initialCalendarRange === void 0 ? void 0 : initialCalendarRange.from) ||
                         selectedStartDate ||
-                        rangeContextStartDate ||
                         (((_b = newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.disabledDates) === null || _b === void 0 ? void 0 : _b.length)
                             ? newDisableCalendarDates.disabledDates[0].from
-                            : today), disabled: disabledDatesByPage$1.length
-                        ? disabledDatesByPage$1
+                            : today), disabled: disabledDatesByPage.length
+                        ? disabledDatesByPage
                         : (disabledDates === null || disabledDates === void 0 ? void 0 : disabledDates.length)
-                            ? __spreadArray$1(__spreadArray$1(__spreadArray$1([
-                                lastPossibleCheckout && lastPossibleCheckout
-                            ], __read(disabledDates), false), __read(firstPossibleRangeContextCheckIn), false), __read(lastPossibleRangeContextCheckOut), false) : ((_c = newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.disabledDates) === null || _c === void 0 ? void 0 : _c.length)
-                            ? __spreadArray$1(__spreadArray$1(__spreadArray$1([
-                                lastPossibleCheckout && lastPossibleCheckout
-                            ], __read(newDisableCalendarDates.disabledDates), false), __read(firstPossibleRangeContextCheckIn), false), __read(lastPossibleRangeContextCheckOut), false) : [], fromMonth: today, onMonthChange: function (val) {
+                            ? disabledDates
+                            : (newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.disabledDates) || [], fromMonth: today, onMonthChange: function (val) {
                         requestDates && setUpdateCalendarMonthNavigation
                             ? (requestDates(val),
                                 setUpdateCalendarMonthNavigation(function (prev) { return !prev; }))
                             : null;
-                    }, classNames: {
-                        day_range_start: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) ? 'rdp-day_range_start' : '',
-                        day_range_end: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) ? 'rdp-day_range_end' : '',
                     }, modifiersClassNames: {
                         today: 'my-today',
                         booked: 'booked',
                         disabledAfterCheckIn: 'disabled-after-check-in',
                         overlappingDate: 'overlapping-date',
-                        noActiveSelectionStart: 'no-active-selection-start',
-                        noActiveSelectionMid: 'no-active-selection-mid',
-                        noActiveSelectionEnd: 'no-active-selection-end',
-                        checkoutOptionsMid: 'rdp-day_selected rdp-day_range_middle checkout-option',
-                        checkInOnly: 'check-in-only',
-                        checkOutOnly: 'check-out-only',
-                    }, modifiers: 
-                    // This function handles conditions for applying the modifiersClassNames
-                    handleCalendarModifiers({
-                        newDisableCalendarDates: newDisableCalendarDates,
-                        calendarRange: calendarRange,
-                        disabledDatesByPage: disabledDatesByPage$1,
-                        disabledDates: disabledDates,
-                        overlappingDate: overlappingDate,
-                        rangeContext: rangeContext,
-                        lastPossibleCheckout: lastPossibleCheckout,
-                        findFirstPossibleRangeContextCheckIn: findFirstPossibleRangeContextCheckIn,
-                        findLastPossibleRangeContextCheckOut: findLastPossibleRangeContextCheckOut,
-                        firstPossibleRangeContextCheckIn: firstPossibleRangeContextCheckIn,
-                        lastPossibleRangeContextCheckOut: lastPossibleRangeContextCheckOut,
-                        currentSelectionLastCheckoutDate: currentSelectionLastCheckoutDate,
-                    }) }),
+                        noActiveSelectionStart: 'rdp-day_selected rdp-day_range_start no-active-selection ',
+                        noActiveSelectionMid: 'rdp-day_selected rdp-day_range_middle no-active-selection',
+                        noActiveSelectionEnd: 'rdp-day_selected rdp-day_range_end no-active-selection',
+                    }, modifiers: {
+                        booked: disabledDatesByPage.length
+                            ? disabledDatesByPage
+                            : (disabledDates === null || disabledDates === void 0 ? void 0 : disabledDates.length)
+                                ? disabledDates
+                                : (newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.disabledDates) || [],
+                        disabledAfterCheckIn: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from)
+                            ? [{ after: calendarRange.from }]
+                            : [],
+                        noActiveSelectionStart: !calendarRange
+                            ? (initialCalendarRange === null || initialCalendarRange === void 0 ? void 0 : initialCalendarRange.from) || []
+                            : [],
+                        noActiveSelectionMid: !calendarRange &&
+                            (initialCalendarRange === null || initialCalendarRange === void 0 ? void 0 : initialCalendarRange.from) &&
+                            (initialCalendarRange === null || initialCalendarRange === void 0 ? void 0 : initialCalendarRange.to)
+                            ? [
+                                {
+                                    after: initialCalendarRange === null || initialCalendarRange === void 0 ? void 0 : initialCalendarRange.from,
+                                    before: initialCalendarRange === null || initialCalendarRange === void 0 ? void 0 : initialCalendarRange.to,
+                                },
+                            ]
+                            : [],
+                        noActiveSelectionEnd: !calendarRange
+                            ? (initialCalendarRange === null || initialCalendarRange === void 0 ? void 0 : initialCalendarRange.to) || []
+                            : [],
+                        overlappingDate: (!(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) &&
+                            (overlappingDate === null || overlappingDate === void 0 ? void 0 : overlappingDate.map(function (item) { return ({
+                                from: item.from,
+                            }); }))) ||
+                            [],
+                    } }),
                 React__default.createElement("div", { className: 'will-calendar-tooltip' },
                     React__default.createElement("div", null, t('noCheckIn'))),
                 React__default.createElement("div", { className: 'will-calendar-tooltip-check-out' },
                     React__default.createElement("div", null, t('noCheckOut'))),
                 React__default.createElement("div", { className: 'will-calendar-tooltip-overlapping-date' },
                     React__default.createElement("div", null, t('checkOutOnly'))),
-                React__default.createElement("div", { className: 'will-calendar-tooltip-check-in-only' },
-                    React__default.createElement("div", null, t('checkInOnly'))),
-                React__default.createElement("div", { className: 'will-calendar-tooltip-check-out-only' },
-                    React__default.createElement("div", null, t('checkOutOnly'))),
                 React__default.createElement("div", { className: 'will-calendar-spinner' },
-                    React__default.createElement(IconsSvg, { fill: (palette === null || palette === void 0 ? void 0 : palette.primary) || 'inherit', size: 50, icon: "spinner" })))));
+                    React__default.createElement(SpinnerSVG, { fill: (palette === null || palette === void 0 ? void 0 : palette.primary) || 'inherit', size: 50 })))));
     });
+    /////////
+    var handleSelectedCheckIn = function (_a) {
+        var _b;
+        var range = _a.range, newDisableCalendarDates = _a.newDisableCalendarDates, setCalendarRange = _a.setCalendarRange, setDisabledDates = _a.setDisabledDates, calendarRange = _a.calendarRange, overlappingDate = _a.overlappingDate;
+        // Calendar dates select logic
+        var dateFormat = 'dd-MM-yyyy';
+        var rangeFrom = (range === null || range === void 0 ? void 0 : range.from) ? format(range.from, dateFormat) : null;
+        var rangeTo = (range === null || range === void 0 ? void 0 : range.to) ? format(range.to, dateFormat) : null;
+        var calendarFrom = (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from)
+            ? format(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from, dateFormat)
+            : null;
+        var overlappingDateFrom = (overlappingDate === null || overlappingDate === void 0 ? void 0 : overlappingDate.length)
+            ? overlappingDate.find(function (date) { return format(date.from || 1, dateFormat) === rangeFrom; })
+            : null;
+        var checkOutRange = ((_b = newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.availableDates) === null || _b === void 0 ? void 0 : _b.length)
+            ? newDisableCalendarDates.availableDates.find(function (checkInDate) {
+                return format(checkInDate.checkIn || 1, dateFormat) ===
+                    format((range === null || range === void 0 ? void 0 : range.from) || 1, dateFormat);
+            })
+            : null;
+        if (rangeFrom && checkOutRange && setDisabledDates) {
+            var checkIn = addDays(checkOutRange.checkIn, 1);
+            var firstCheckOut = addDays(checkOutRange.firstCheckOut, -1);
+            var noDatesRange = format(checkIn, dateFormat) ===
+                format(checkOutRange.firstCheckOut, dateFormat);
+            setDisabledDates(__spreadArray$1(__spreadArray$1([], __read(((newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.disabledDates) || [])), false), [
+                {
+                    from: noDatesRange ? undefined : checkIn,
+                    to: noDatesRange ? undefined : firstCheckOut,
+                },
+                { after: checkOutRange === null || checkOutRange === void 0 ? void 0 : checkOutRange.lastCheckOut },
+            ], false));
+        }
+        if ((rangeTo && rangeFrom && rangeFrom === rangeTo) ||
+            (!rangeTo && !rangeFrom) ||
+            overlappingDateFrom) {
+            setCalendarRange(undefined);
+            setDisabledDates && setDisabledDates([]);
+        }
+        else if (calendarFrom && rangeFrom && rangeFrom !== calendarFrom) {
+            setCalendarRange({
+                from: range === null || range === void 0 ? void 0 : range.from,
+                to: undefined,
+            });
+        }
+        else {
+            setCalendarRange(range);
+        }
+    };
+    var handleDisabledDatesByPage = function (_a) {
+        var _b, _c, _d;
+        var newDisableCalendarDates = _a.newDisableCalendarDates, selectedPath = _a.selectedPath, today = _a.today;
+        var daysToOffsetCalendar = (newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.disabledDatesByPage) && selectedPath
+            ? [
+                (_b = newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.disabledDatesByPage) === null || _b === void 0 ? void 0 : _b.find(function (item) { return selectedPath === item.page; }),
+            ]
+            : [];
+        return daysToOffsetCalendar.length
+            ? [
+                {
+                    from: addDays(today, daysToOffsetCalendar.length && ((_c = daysToOffsetCalendar[0]) === null || _c === void 0 ? void 0 : _c.offset)
+                        ? (_d = daysToOffsetCalendar[0]) === null || _d === void 0 ? void 0 : _d.offset
+                        : -2),
+                    to: addDays(today, -100),
+                },
+            ]
+            : [];
+    };
+
+    var parseDates = function (_a) {
+        var calendarRange = _a.calendarRange;
+        return (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) && (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from)
+            ? "".concat(format(calendarRange.from, 'dd.MM.yyyy'), " -\n").concat(format(calendarRange.to, 'dd.MM.yyyy'))
+            : null;
+    };
+
+    var parseDate = function (_a) {
+        var date = _a.date, _b = _a.dateFormat, dateFormat = _b === void 0 ? 'dd.MM.yyyy' : _b, language = _a.language;
+        return date
+            ? format(date, dateFormat, { locale: language === 'en' ? enUS : fi })
+            : null;
+    };
+
+    var nightsCount = function (_a) {
+        var calendarRange = _a.calendarRange;
+        if (!calendarRange || !calendarRange.from || !calendarRange.to) {
+            return undefined;
+        }
+        var diffDays = differenceInCalendarDays(calendarRange.to, calendarRange.from);
+        return diffDays;
+    };
 
     var parseGuests = function (_a) {
         var guestLabel = _a.guestLabel, guestsLabel = _a.guestsLabel, guestsPlaceholder = _a.guestsPlaceholder, ageCategoryCounts = _a.ageCategoryCounts, ageCategories = _a.ageCategories;
@@ -11800,7 +11256,7 @@
                 finally { if (e_2) throw e_2.error; }
             }
             handleSelectedFilter(false);
-            if (onSubmit && selectedPath === Pages.ROOMS) {
+            if (onSubmit && window.location.href.includes(selectedPath)) {
                 onSubmit(newParams);
             }
             else {
@@ -11882,7 +11338,7 @@
                     React__default.createElement("p", { className: "select-button-description ".concat(active ? 'active' : ''), dangerouslySetInnerHTML: { __html: description } })))));
     };
 
-    var css_248z$6 = ".will-filter-bar-tab-button {\n    width: auto;\n    height: auto;\n    padding: 10px 20px;\n    cursor: pointer;\n    border: none;\n    white-space: nowrap;\n    font-size: 16px;\n    display: flex;\n    align-items: center;\n    background-color: transparent;\n    user-select: none;\n    font-weight: 600;\n    border-radius: 50px;\n  }\n\n  .will-filter-bar-tab-button.light {\n    color: var(--will-white)\n  }\n\n  .will-filter-bar-tab-button.dark {\n    color: var(--will-black)\n  }\n\n  .will-filter-bar-tab-button.light.active,\n  .will-filter-bar-tab-button:hover {\n    background-color: var(--will-transparent-white);\n  }\n\n  .will-filter-bar-tab-button.dark.active,\n  .will-filter-bar-tab-button:hover {\n    background-color: var(--will-transparent-lavender);\n  }\n\n \n\n";
+    var css_248z$6 = ".will-filter-bar-tab-button {\n    width: auto;\n    height: auto;\n    padding: 10px 20px;\n    cursor: pointer;\n    border: none;\n    white-space: nowrap;\n    font-size: 16px;\n    display: flex;\n    align-items: center;\n    background-color: transparent;\n    user-select: none;\n    font-weight: 600;\n    border-radius: 50px;\n  }\n\n  .will-filter-bar-tab-button.light {\n    color: var(--will-white)\n  }\n\n  .will-filter-bar-tab-button.dark {\n    color: var(--will-black)\n  }\n\n  .will-filter-bar-tab-button.light.active,\n  .will-filter-bar-tab-button:hover {\n    background-color: var(--will-transparent-white);\n  }\n\n  .will-filter-bar-tab-button.dark.active,\n  .will-filter-bar-tab-button:hover {\n    background-color: var(--will-transparent-black);\n  }\n\n \n\n";
     styleInject(css_248z$6);
 
     var TabButton = function (_a) {
@@ -12035,37 +11491,12 @@
     var REDIRECT_URL_FALLBACK = 'http://localhost:3000/';
 
     var useFilterCalendar = function (_a) {
-        var onSubmit = _a.onSubmit, setToggleCalendar = _a.setToggleCalendar, noActiveSelection = _a.noActiveSelection, toggleCalendar = _a.toggleCalendar, outerRangeContext = _a.outerRangeContext, outerDisableCalendarDates = _a.outerDisableCalendarDates;
-        // State
+        var onSubmit = _a.onSubmit, setToggleCalendar = _a.setToggleCalendar, noActiveSelection = _a.noActiveSelection, toggleCalendar = _a.toggleCalendar;
         var _b = __read(React__default.useState(), 2), calendarRange = _b[0], setCalendarRange = _b[1];
-        var _c = __read(React__default.useState(outerRangeContext), 2), rangeContext = _c[0], setRangeContext = _c[1];
-        var _d = __read(React__default.useState(), 2), initialCalendarRange = _d[0], setInitialCalendarRange = _d[1];
-        var _e = __read(React__default.useState([]), 2), disabledDates = _e[0], setDisabledDates = _e[1];
-        var _f = __read(React__default.useState(false), 2), updateCalendarMonthNavigation = _f[0], setUpdateCalendarMonthNavigation = _f[1];
-        var _g = __read(React__default.useState(0), 2), updateCalendarDefaultMonth = _g[0], setUpdateCalendarDefaultMonth = _g[1];
-        var _h = __read(React__default.useState(false), 2), calendarHasError = _h[0], setCalendarHasError = _h[1];
-        var _j = __read(React__default.useState(false), 2), updatedForSubmit = _j[0], setUpdatedForSubmit = _j[1];
-        var _k = __read(React__default.useState(), 2), disableCalendarDates = _k[0], setDisableCalendarDates = _k[1];
-        // Lifecycle
-        // Handle update component with new data
-        React__default.useEffect(function () {
-            var _a;
-            if (outerDisableCalendarDates === null || outerDisableCalendarDates === void 0 ? void 0 : outerDisableCalendarDates.availableDates) {
-                setDisableCalendarDates({
-                    availableDates: __spreadArray$1([], __read(outerDisableCalendarDates.availableDates.sort(function (a, b) {
-                        return compareAsc(a.checkIn, b.checkIn);
-                    })), false),
-                    disabledDates: outerDisableCalendarDates.disabledDates
-                        ? __spreadArray$1([], __read(outerDisableCalendarDates.disabledDates.sort(function (a, b) {
-                            return compareAsc(a.from, b.from);
-                        })), false) : [],
-                });
-            }
-            if (disabledDates && !!((_a = outerDisableCalendarDates === null || outerDisableCalendarDates === void 0 ? void 0 : outerDisableCalendarDates.disabledDates) === null || _a === void 0 ? void 0 : _a.length)) {
-                setDisabledDates(__assign$2(__assign$2({}, disabledDates), outerDisableCalendarDates.disabledDates));
-            }
-        }, [outerDisableCalendarDates]);
-        // Handle Range Context initial selections
+        var _c = __read(React__default.useState(), 2), initialCalendarRange = _c[0], setInitialCalendarRange = _c[1];
+        var _d = __read(React__default.useState([]), 2), disabledDates = _d[0], setDisabledDates = _d[1];
+        var _e = __read(React__default.useState(false), 2), updateCalendarMonthNavigation = _e[0], setUpdateCalendarMonthNavigation = _e[1];
+        var _f = __read(React__default.useState(0), 2), updateCalendarDefaultMoth = _f[0], setUpdateCalendarDefaultMoth = _f[1];
         React__default.useEffect(function () {
             if (typeof window === 'undefined')
                 return;
@@ -12075,17 +11506,11 @@
             if (startDateParam && endDateParam) {
                 if (noActiveSelection) {
                     handleClearDates();
-                    setUpdateCalendarDefaultMonth(function (prev) { return prev + 1; });
-                    setUpdatedForSubmit(false);
-                    setRangeContext(outerRangeContext);
+                    setUpdateCalendarDefaultMoth(function (prev) { return prev + 1; });
                     setInitialCalendarRange({
                         from: new Date(startDateParam),
                         to: new Date(endDateParam),
                     });
-                    setCalendarRange({
-                        from: new Date(startDateParam),
-                        to: new Date(endDateParam),
-                    });
                 }
                 else {
                     setCalendarRange({
@@ -12095,32 +11520,6 @@
                 }
             }
         }, [toggleCalendar]);
-        // Handle submit dates
-        React__default.useEffect(function () {
-            var formatString = 'dd.MM.yyyy';
-            var initialRangeTo = (initialCalendarRange === null || initialCalendarRange === void 0 ? void 0 : initialCalendarRange.to)
-                ? format(initialCalendarRange.to, formatString)
-                : null;
-            var initialRangeFrom = (initialCalendarRange === null || initialCalendarRange === void 0 ? void 0 : initialCalendarRange.from)
-                ? format(initialCalendarRange.from, formatString)
-                : null;
-            var calendarRangeTo = (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to)
-                ? format(calendarRange.to, formatString)
-                : null;
-            var calendarRangeFrom = (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from)
-                ? format(calendarRange.from, formatString)
-                : null;
-            if (!!(calendarRangeTo && calendarRangeFrom && updatedForSubmit)) {
-                if (!!(calendarRangeTo !== initialRangeTo) ||
-                    !!(calendarRangeFrom !== initialRangeFrom)) {
-                    handleSubmit();
-                }
-                else {
-                    setToggleCalendar(false);
-                }
-            }
-        }, [calendarRange]);
-        // Methods
         var handleSubmit = function () {
             setToggleCalendar(false);
             return onSubmit(calendarRange);
@@ -12128,8 +11527,6 @@
         var handleClearDates = function () {
             setDisabledDates([]);
             setCalendarRange(undefined);
-            setCalendarHasError(false);
-            setInitialCalendarRange(undefined);
         };
         return {
             handleSubmit: handleSubmit,
@@ -12140,59 +11537,16 @@
             calendarRange: calendarRange,
             disabledDates: disabledDates,
             updateCalendarMonthNavigation: updateCalendarMonthNavigation,
-            updateCalendarDefaultMonth: updateCalendarDefaultMonth,
-            calendarHasError: calendarHasError,
-            setCalendarHasError: setCalendarHasError,
-            setUpdatedForSubmit: setUpdatedForSubmit,
-            rangeContext: rangeContext,
-            disableCalendarDates: disableCalendarDates,
+            updateCalendarDefaultMoth: updateCalendarDefaultMoth,
+            initialCalendarRange: initialCalendarRange,
         };
     };
 
-    var Footer = function (_a) {
-        var calendarHasError = _a.calendarHasError, calendarRange = _a.calendarRange, handleClearDates = _a.handleClearDates, language = _a.language, palette = _a.palette;
-        var t = useTranslation().t;
-        reactResponsiveExports.useMediaQuery({ maxWidth: 600 });
-        var nights = nightsCount({
-            calendarRange: calendarRange,
-        });
-        return (React__default.createElement("div", { className: "will-calendar-footer-actions-wrapper" },
-            React__default.createElement("div", { className: "will-calendar-footer-dates" },
-                calendarHasError ? (React__default.createElement("div", { className: "will-calendar-footer-error" }, calendarHasError &&
-                    renderCalendarErrorMessage({
-                        palette: palette,
-                        message: t("common:errors.calendarErrors.checkInAvailabilityError"),
-                    }))) : (React__default.createElement("div", null,
-                    React__default.createElement("span", null, parseDate({
-                        date: calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from,
-                        dateFormat: 'EEEEEE d.M.yyyy',
-                        language: language,
-                    }) || t('common:checkIn')),
-                    React__default.createElement("span", { className: "will-calendar-footer-dates-separator" }, "-"),
-                    React__default.createElement("span", null, parseDate({
-                        date: calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to,
-                        dateFormat: 'EEEEEE d.M.yyyy',
-                        language: language,
-                    }) || t('common:checkOut')))),
-                React__default.createElement("span", { className: "will-calendar-footer-booked" }, !calendarHasError && nights
-                    ? "".concat(nights, " ").concat(t("common:".concat(nights === 1 ? 'night' : 'nights')))
-                    : '')),
-            React__default.createElement("div", { className: "will-calendar-footer-actions" },
-                React__default.createElement(SubmitButton, { onClick: handleClearDates, disabled: !(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from), label: t("common:clearDates"), variant: "text" }))));
-    };
-    /////////
-    var renderCalendarErrorMessage = function (_a) {
-        var message = _a.message, palette = _a.palette;
-        return (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement(IconsSvg, { fill: (palette === null || palette === void 0 ? void 0 : palette.error) || 'inherit', size: 25, icon: "warning" }),
-            React__default.createElement("span", null, message || '')));
-    };
-
-    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\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    border-top: 1px solid var(--will-grey);\n}\n\n/* Footer actions */\n\n.will-root .will-calendar-wrapper .will-calendar-footer-actions-wrapper {\n    display: flex;\n    justify-content: space-between;\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-dates .will-calendar-footer-booked {\n    display: flex;\n    min-height: 20.5px;\n    margin-top: 10px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-error {\n    display: flex;\n    max-width: 80%;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-error span {\n    display: inline-block;\n    margin-left: 10px;\n}\n\n@media (max-width: 960px) {\n    .will-root .will-calendar-wrapper {\n        width: -webkit-fill-available;\n        margin: 0 -6%;\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-actions-wrapper {\n        flex-direction: column;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-footer-dates  {\n        text-align: center;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-footer-dates .will-calendar-footer-booked {\n       justify-content: 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        margin-top: 10px;\n     }\n\n     .will-root .will-calendar-wrapper .will-calendar-footer-error {\n        max-width: 100%;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-footer-error span {\n        text-align: center;\n        margin-left: 5px;\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-dates .will-calendar-footer-booked {\n    display: flex;\n    min-height: 20.5px;\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\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: 12px;\n        text-align: center;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-footer-dates .will-calendar-footer-booked {\n       justify-content: 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) {
-        var calendarOffset = _a.calendarOffset, language = _a.language, palette = _a.palette, onSubmit = _a.onSubmit, outerDisableCalendarDates = _a.disableCalendarDates, toggleCalendar = _a.toggleCalendar, loadingData = _a.loadingData, setToggleCalendar = _a.setToggleCalendar, requestDates = _a.requestDates, showFeedback = _a.showFeedback, noActiveSelection = _a.noActiveSelection, outerRangeContext = _a.rangeContext;
+        var calendarOffset = _a.calendarOffset, language = _a.language, palette = _a.palette, onSubmit = _a.onSubmit, disableCalendarDates = _a.disableCalendarDates, toggleCalendar = _a.toggleCalendar, loadingData = _a.loadingData, setToggleCalendar = _a.setToggleCalendar, requestDates = _a.requestDates, showFeedback = _a.showFeedback, noActiveSelection = _a.noActiveSelection;
         var themePalette = useTheme({ palette: palette });
         // Translations
         useUpdateTranslations({ language: language });
@@ -12202,23 +11556,42 @@
             setToggleCalendar: setToggleCalendar,
             noActiveSelection: noActiveSelection,
             toggleCalendar: toggleCalendar,
-            outerRangeContext: outerRangeContext,
-            outerDisableCalendarDates: outerDisableCalendarDates,
-        }), setCalendarRange = _b.setCalendarRange, handleClearDates = _b.handleClearDates, calendarRange = _b.calendarRange, disabledDates = _b.disabledDates, setDisabledDates = _b.setDisabledDates, updateCalendarMonthNavigation = _b.updateCalendarMonthNavigation, updateCalendarDefaultMonth = _b.updateCalendarDefaultMonth, setUpdateCalendarMonthNavigation = _b.setUpdateCalendarMonthNavigation, calendarHasError = _b.calendarHasError, setCalendarHasError = _b.setCalendarHasError, setUpdatedForSubmit = _b.setUpdatedForSubmit, rangeContext = _b.rangeContext, disableCalendarDates = _b.disableCalendarDates;
+        }), handleSubmit = _b.handleSubmit, setCalendarRange = _b.setCalendarRange, handleClearDates = _b.handleClearDates, calendarRange = _b.calendarRange, disabledDates = _b.disabledDates, setDisabledDates = _b.setDisabledDates, updateCalendarMonthNavigation = _b.updateCalendarMonthNavigation, updateCalendarDefaultMoth = _b.updateCalendarDefaultMoth, setUpdateCalendarMonthNavigation = _b.setUpdateCalendarMonthNavigation, initialCalendarRange = _b.initialCalendarRange;
         // Display component after fully loaded
         useAwaitRender();
         // Handle close filter section
         var filtersRef = useCloseFilterSection({
             handleSelectedFilter: setToggleCalendar,
         }).filtersRef;
+        var nights = nightsCount({
+            calendarRange: calendarRange || initialCalendarRange,
+        });
         return (React__default.createElement("div", { className: "will-root", style: themePalette }, toggleCalendar && (React__default.createElement("div", { className: "will-calendar-wrapper", ref: filtersRef },
             React__default.createElement("div", { className: "will-calendar-header" },
                 React__default.createElement("h2", null, t('filterBar:calendar.title')),
                 React__default.createElement(CloseButton, { handleClose: function () { return setToggleCalendar(false); } })),
             React__default.createElement("div", { className: "will-calendar-main" },
-                React__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange, calendarOffset: calendarOffset, selectedPath: '/rooms', language: language, disableCalendarDates: disableCalendarDates, requestDates: requestDates, disabledDates: disabledDates, setDisabledDates: setDisabledDates, updateCalendarMonthNavigation: updateCalendarMonthNavigation, setUpdateCalendarMonthNavigation: setUpdateCalendarMonthNavigation, updateCalendarDefaultMonth: updateCalendarDefaultMonth, loadingData: loadingData, showFeedback: showFeedback, noActiveSelection: noActiveSelection, palette: palette, setCalendarHasError: setCalendarHasError, setUpdatedForSubmit: setUpdatedForSubmit, rangeContext: rangeContext, calendarHasError: calendarHasError })),
+                React__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange, calendarOffset: calendarOffset, selectedPath: '/rooms', language: language, disableCalendarDates: disableCalendarDates, requestDates: requestDates, disabledDates: disabledDates, setDisabledDates: setDisabledDates, updateCalendarMonthNavigation: updateCalendarMonthNavigation, setUpdateCalendarMonthNavigation: setUpdateCalendarMonthNavigation, updateCalendarDefaultMoth: updateCalendarDefaultMoth, loadingData: loadingData, initialCalendarRange: initialCalendarRange, showFeedback: showFeedback, noActiveSelection: noActiveSelection, palette: palette })),
             React__default.createElement("div", { className: "will-calendar-footer" },
-                React__default.createElement(Footer, { calendarHasError: calendarHasError, calendarRange: calendarRange, handleClearDates: handleClearDates, language: language, palette: palette }))))));
+                React__default.createElement("div", { className: "will-calendar-footer-dates" },
+                    React__default.createElement("div", null,
+                        React__default.createElement("span", null, parseDate({
+                            date: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) || (initialCalendarRange === null || initialCalendarRange === void 0 ? void 0 : initialCalendarRange.from),
+                            dateFormat: 'EEEEEE d.M.yyyy',
+                            language: language,
+                        }) || t('common:checkIn')),
+                        React__default.createElement("span", { className: "will-calendar-footer-dates-separator" }, "-"),
+                        React__default.createElement("span", null, parseDate({
+                            date: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) || (initialCalendarRange === null || initialCalendarRange === void 0 ? void 0 : initialCalendarRange.to),
+                            dateFormat: 'EEEEEE d.M.yyyy',
+                            language: language,
+                        }) || t('common:checkOut'))),
+                    React__default.createElement("span", { className: "will-calendar-footer-booked" }, nights
+                        ? "".concat(nights, " ").concat(t("common:".concat(nights === 1 ? 'night' : 'nights')))
+                        : '')),
+                React__default.createElement("div", { className: "will-calendar-footer-actions" },
+                    React__default.createElement(SubmitButton, { onClick: handleClearDates, disabled: !(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from), label: t("common:clearDates") }),
+                    React__default.createElement(SubmitButton, { onClick: function () { return handleSubmit(); }, label: t("common:apply"), disabled: !(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) || !(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) })))))));
     }
 
     exports.Button = Button$1;