willba-component-library 0.2.54 → 0.2.56

package/lib/index.umd.js

@@ -544,11 +544,12 @@
         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-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";
+    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  --will-error: #d32f2f;\n\n  /*Color mix*/\n  --will-primary-lighter: color-mix(in srgb, var(--will-primary), white 20%);\n  --will-primary-lightest: color-mix(in srgb, var(--will-primary), white 80%);\n\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 () {
@@ -3779,6 +3780,111 @@
       return Math.round((timestampLeft - timestampRight) / MILLISECONDS_IN_WEEK$4);
     }
 
+    // for accurate equality comparisons of UTC timestamps that end up
+    // having the same representation in local time, e.g. one hour before
+    // DST ends vs. the instant that DST ends.
+    function compareLocalAsc(dateLeft, dateRight) {
+      var diff = dateLeft.getFullYear() - dateRight.getFullYear() || dateLeft.getMonth() - dateRight.getMonth() || dateLeft.getDate() - dateRight.getDate() || dateLeft.getHours() - dateRight.getHours() || dateLeft.getMinutes() - dateRight.getMinutes() || dateLeft.getSeconds() - dateRight.getSeconds() || dateLeft.getMilliseconds() - dateRight.getMilliseconds();
+      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 differenceInDays
+     * @category Day Helpers
+     * @summary Get the number of full days between the given dates.
+     *
+     * @description
+     * Get the number of full day periods between two dates. Fractional days are
+     * truncated towards zero.
+     *
+     * One "full day" is the distance between a local time in one day to the same
+     * local time on the next or previous day. A full day can sometimes be less than
+     * or more than 24 hours if a daylight savings change happens between two dates.
+     *
+     * To ignore DST and only measure exact 24-hour periods, use this instead:
+     * `Math.floor(differenceInHours(dateLeft, dateRight)/24)|0`.
+     *
+     *
+     * @param {Date|Number} dateLeft - the later date
+     * @param {Date|Number} dateRight - the earlier date
+     * @returns {Number} the number of full days according to the local timezone
+     * @throws {TypeError} 2 arguments required
+     *
+     * @example
+     * // How many full days are between
+     * // 2 July 2011 23:00:00 and 2 July 2012 00:00:00?
+     * const result = differenceInDays(
+     *   new Date(2012, 6, 2, 0, 0),
+     *   new Date(2011, 6, 2, 23, 0)
+     * )
+     * //=> 365
+     * // How many full days are between
+     * // 2 July 2011 23:59:00 and 3 July 2011 00:01:00?
+     * const result = differenceInDays(
+     *   new Date(2011, 6, 3, 0, 1),
+     *   new Date(2011, 6, 2, 23, 59)
+     * )
+     * //=> 0
+     * // How many full days are between
+     * // 1 March 2020 0:00 and 1 June 2020 0:00 ?
+     * // Note: because local time is used, the
+     * // result will always be 92 days, even in
+     * // time zones where DST starts and the
+     * // period has only 92*24-1 hours.
+     * const result = differenceInDays(
+     *   new Date(2020, 5, 1),
+     *   new Date(2020, 2, 1)
+     * )
+    //=> 92
+     */
+    function differenceInDays(dirtyDateLeft, dirtyDateRight) {
+      requiredArgs(2, arguments);
+      var dateLeft = toDate(dirtyDateLeft);
+      var dateRight = toDate(dirtyDateRight);
+      var sign = compareLocalAsc(dateLeft, dateRight);
+      var difference = Math.abs(differenceInCalendarDays(dateLeft, dateRight));
+      dateLeft.setDate(dateLeft.getDate() - sign * difference);
+
+      // Math.abs(diff in full days - diff in calendar days) === 1 if last calendar day is not full
+      // If so, result must be decreased by 1 in absolute value
+      var isLastDayNotFull = Number(compareLocalAsc(dateLeft, dateRight) === -sign);
+      var result = sign * (difference - isLastDayNotFull);
+      // Prevent negative zero
+      return result === 0 ? 0 : result;
+    }
+
+    /**
+     * @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
@@ -10839,83 +10945,304 @@
 
     var reactResponsiveExports = reactResponsive.exports;
 
-    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 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',
+                    }, 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 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 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 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 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 Calendar = React__default.forwardRef(function (_a, ref) {
+    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 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, setOverlappingDates = _a.setOverlappingDates;
-        // 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;
-            }
-            return disableCalendarDates;
-        }, [
-            disableCalendarDates,
-            calendarRange,
-            updateCalendarMonthNavigation,
-            initialCalendarRange,
-            updateCalendarDefaultMoth,
-        ]);
-        // Handle disable dates by page
-        var disabledDatesByPage = handleDisabledDatesByPage({
-            today: today,
-            selectedPath: selectedPath,
+        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 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;
+        (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to)
+            ? format(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to, dateFormat)
+            : null;
+        (rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.from)
+            ? format(rangeContext.from, dateFormat)
+            : null;
+        var overlappingDateFrom = (overlappingDate === null || overlappingDate === void 0 ? void 0 : overlappingDate.length)
+            ? overlappingDate.find(function (date) {
+                return date.from ? format(date.from, dateFormat) === rangeFrom : 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 format(checkInDate.checkIn || 1, dateFormat) ===
+                    format((range === null || range === void 0 ? void 0 : range.from) || 1, dateFormat);
+            })
+            : null;
+        // On check-in, disable future dates that are unavailable for checkout
+        disableFutureDates({
+            rangeFrom: rangeFrom,
+            checkOutRange: checkOutRange,
+            setDisabledDates: setDisabledDates,
+            dateFormat: dateFormat,
             newDisableCalendarDates: newDisableCalendarDates,
         });
-        // Handle tooltip
-        React__default.useEffect(function () {
+        // Calendar selection rules
+        switch (true) {
+            case !!overlappingDateFrom:
+                // Clear the selection when overlapping dates are detected
+                return setCalendarRange(undefined);
+            case !!((!rangeTo && !rangeFrom && calendarFrom) || rangeTo === rangeFrom):
+                // Handle double-click on the same date
+                return setCalendarRange({ from: calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from, to: undefined });
+            case (range === null || range === void 0 ? void 0 : range.to) &&
+                (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) &&
+                isAfter(endOfDay(range.to), endOfDay(calendarRange.to)) &&
+                !((range === null || range === void 0 ? void 0 : range.to) &&
+                    (rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.to) &&
+                    isAfter(startOfDay(range.to), startOfDay(rangeContext.to))):
+                // Handle checkout selection greater than current checkout
+                return setCalendarRange({ from: range === null || range === void 0 ? void 0 : range.to, to: undefined });
+            case calendarFrom && rangeFrom && rangeFrom !== calendarFrom:
+                // Handle check-in selection prior to current check-in
+                return setCalendarRange({ from: range === null || range === void 0 ? void 0 : range.from, to: undefined });
+            case checkOutRange && (range === null || range === void 0 ? void 0 : range.to) && checkOutRange.lastCheckOut < range.to:
+                return setCalendarRange({ from: range === null || range === void 0 ? void 0 : range.to, to: undefined });
+            // Handle checkout selection between the range context and first passible check-in
+            case (range === null || range === void 0 ? void 0 : range.to) &&
+                (rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.from) &&
+                isBefore(startOfDay(range.to), startOfDay(rangeContext.from)):
+                return setCalendarRange({ from: range === null || range === void 0 ? void 0 : range.to, to: undefined });
+            case (range === null || range === void 0 ? void 0 : range.from) &&
+                (rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.to) &&
+                isAfter(startOfDay(range.from), startOfDay(rangeContext.to)):
+                return (setCalendarRange(undefined),
+                    setCalendarHasError && setCalendarHasError(true));
+            //
+            default:
+                // Apply the given range
+                return setCalendarRange(range);
+        }
+    };
+    /////////
+    var disableFutureDates = function (_a) {
+        var rangeFrom = _a.rangeFrom, checkOutRange = _a.checkOutRange, setDisabledDates = _a.setDisabledDates, dateFormat = _a.dateFormat, newDisableCalendarDates = _a.newDisableCalendarDates;
+        if (rangeFrom && checkOutRange && setDisabledDates) {
+            // Get and parse data
+            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,
+                },
+            ], false));
+        }
+    };
+
+    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 handleCalendarModifiers = function (_a) {
+        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;
+        // Create range for range context middle selection and current overlapping selection
+        var rangeContextMiddleSelection = (rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.from) && (rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.to)
+            ? Array.from({ length: differenceInDays(rangeContext.to, rangeContext.from) - 1 }, function (_, i) { return ({
+                from: addDays(rangeContext.from, i + 1),
+                to: addDays(rangeContext.from, i + 1),
+            }); }).filter(function (date) {
+                return !(((calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) &&
+                    isEqual(endOfDay(calendarRange.from), endOfDay(date.from))) ||
+                    ((calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) &&
+                        isEqual(endOfDay(calendarRange.to), endOfDay(date.from))));
+            })
+            : [];
+        return {
+            booked: disabledDatesByPage.length
+                ? disabledDatesByPage
+                : (disabledDates === null || disabledDates === void 0 ? void 0 : disabledDates.length)
+                    ? __spreadArray$1(__spreadArray$1(__spreadArray$1([], __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([], __read(newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.disabledDates), false), __read(firstPossibleRangeContextCheckIn), false), __read(lastPossibleRangeContextCheckOut), false) : [],
+            disabledAfterCheckIn: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from)
+                ? [{ after: calendarRange.from }]
+                : [],
+            overlappingDate: __spreadArray$1([], __read((!(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) && !!(overlappingDate === null || overlappingDate === void 0 ? void 0 : overlappingDate.length) && !rangeContext
+                ? overlappingDate.map(function (date) { return ({ from: date.from }); })
+                : [])), false),
+            noActiveSelectionStart: (rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.from) &&
+                !((calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) &&
+                    (rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.from) &&
+                    isEqual(endOfDay(rangeContext.from), endOfDay(calendarRange.from)))
+                ? rangeContext.from
+                : [],
+            noActiveSelectionMid: __spreadArray$1([], __read((rangeContextMiddleSelection.length
+                ? rangeContextMiddleSelection
+                : [])), false),
+            noActiveSelectionEnd: (rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.to) &&
+                !((calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) &&
+                    (rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.to) &&
+                    isEqual(endOfDay(rangeContext.to), endOfDay(calendarRange.from)))
+                ? rangeContext.to
+                : [],
+            checkoutOptionsMid: __spreadArray$1([], __read(((calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) &&
+                !(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) &&
+                (currentSelectionLastCheckoutDate === null || currentSelectionLastCheckoutDate === void 0 ? void 0 : currentSelectionLastCheckoutDate.lastCheckOut)
+                ? [
+                    {
+                        after: calendarRange.from,
+                        before: addDays(currentSelectionLastCheckoutDate.lastCheckOut, 1),
+                    },
+                ]
+                : [])), false),
+            checkInOnly: __spreadArray$1([], __read(((findFirstPossibleRangeContextCheckIn === null || findFirstPossibleRangeContextCheckIn === void 0 ? void 0 : findFirstPossibleRangeContextCheckIn.checkIn) && rangeContext
+                ? [
+                    {
+                        from: findFirstPossibleRangeContextCheckIn.checkIn,
+                        to: addDays(rangeContext.from, -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 = [];
+        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 date.checkIn < rangeContext.from &&
+                    date.lastCheckOut >= rangeContext.from;
+            });
+            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 isEqual(rangeContext.to, date.checkIn);
+            });
+            if (findLastPossibleRangeContextCheckOut === null || findLastPossibleRangeContextCheckOut === void 0 ? void 0 : findLastPossibleRangeContextCheckOut.checkIn) {
+                lastPossibleRangeContextCheckOut.push({
+                    after: findLastPossibleRangeContextCheckOut.lastCheckOut,
+                });
+            }
+        }
+        // Get last possible check-out dates for current check-in
+        var currentSelectionLastCheckoutDate = availableDates === null || availableDates === void 0 ? void 0 : availableDates.find(function (date) {
+            var calendarCheckIn = (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from)
+                ? format(calendarRange.from, 'dd.MM.yyyy')
+                : null;
+            var itemCheckIn = format(date.checkIn, 'dd.MM.yyyy');
+            return calendarCheckIn ? itemCheckIn === calendarCheckIn : 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;
+        var calendarRangeFrom = (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) || null;
+        var calendarRangeTo = (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) || null;
+        var rangeContextFrom = (rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.from) || null;
+        var rangeContextTo = (rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.to) || null;
+        // Checking if rangeFrom is equal to or before rangeContextTo
+        var startIsEqualOrBeforeRangeContextEnd = calendarRangeFrom && rangeContextTo
+            ? isBefore(endOfDay(calendarRangeFrom), endOfDay(rangeContextTo)) ||
+                isEqual(endOfDay(calendarRangeFrom), endOfDay(rangeContextTo))
+            : null;
+        // Checking if rangeTo is equal to or after rangeContextFrom
+        var endIsEqualOrAfterRangeContextStart = calendarRangeTo && rangeContextFrom && rangeContextTo
+            ? isAfter(endOfDay(calendarRangeTo), endOfDay(rangeContextFrom)) ||
+                isEqual(endOfDay(calendarRangeTo), endOfDay(rangeContextFrom))
+            : null;
+        if ((rangeContext &&
+            calendarRangeFrom &&
+            !startIsEqualOrBeforeRangeContextEnd) ||
+            (rangeContext && calendarRangeTo && !endIsEqualOrAfterRangeContextStart)) {
+            setCalendarHasError && !calendarHasError && setCalendarHasError(true);
+        }
+    };
+
+    var useCalendarTooltips = function (_a) {
+        var calendarRange = _a.calendarRange, updateCalendarMonthNavigation = _a.updateCalendarMonthNavigation, overlappingDate = _a.overlappingDate, updateCalendarDefaultMoth = _a.updateCalendarDefaultMoth, showFeedback = _a.showFeedback;
+        return React__default.useEffect(function () {
             if (typeof document === 'undefined' || !showFeedback)
                 return;
             // Children
@@ -10923,11 +11250,16 @@
             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 tooltipClonesSpinner = [];
@@ -10946,13 +11278,24 @@
                     tooltipClonesCheckOut.push(tooltipClone);
                 });
             }
+            if (calendarTooltipCheckOutOnly && calendarCheckOutOnly.length > 0) {
+                calendarCheckOutOnly.forEach(function (element) {
+                    var tooltipClone = calendarTooltipCheckOutOnly.cloneNode(true);
+                    element.appendChild(tooltipClone);
+                });
+            }
+            if (calendarTooltipCheckInOnly && calendarCheckInOnly.length > 0) {
+                calendarCheckInOnly.forEach(function (element) {
+                    var tooltipClone = calendarTooltipCheckInOnly.cloneNode(true);
+                    element.appendChild(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);
@@ -10969,11 +11312,13 @@
             calendarRange,
             updateCalendarMonthNavigation,
             overlappingDate,
-            initialCalendarRange,
             updateCalendarDefaultMoth,
         ]);
-        // Handle loading spinner
-        React__default.useEffect(function () {
+    };
+
+    var useCalendarLoadingSpinner = function (_a) {
+        var loadingData = _a.loadingData, updateCalendarMonthNavigation = _a.updateCalendarMonthNavigation, updateCalendarDefaultMoth = _a.updateCalendarDefaultMoth;
+        return React__default.useEffect(function () {
             if (typeof document === 'undefined')
                 return;
             var loadingSpinner = document.querySelector('.will-filter-bar-calendar .rdp-months .will-calendar-spinner');
@@ -10986,195 +11331,186 @@
                     loadingSpinner.style.display = 'none';
             }
         }, [loadingData, updateCalendarMonthNavigation, updateCalendarDefaultMoth]);
+    };
+
+    var useUpdateDisabledDates = function (_a) {
+        var disableCalendarDates = _a.disableCalendarDates, calendarRange = _a.calendarRange, updateCalendarMonthNavigation = _a.updateCalendarMonthNavigation, updateCalendarDefaultMoth = _a.updateCalendarDefaultMoth;
+        var _b = __read(React__default.useState(undefined), 2), overlappingDate = _b[0], setOverlappingDate = _b[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_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;
+            }
+            return disableCalendarDates;
+        }, [
+            disableCalendarDates,
+            calendarRange,
+            updateCalendarMonthNavigation,
+            updateCalendarDefaultMoth,
+        ]);
+        return { newDisableCalendarDates: newDisableCalendarDates, overlappingDate: overlappingDate };
+    };
+
+    var css_248z$9 = ".rdp {\n  --rdp-cell-size: 40px;\n  --rdp-caption-font-size: 18px;\n  --rdp-accent-color: #0000ff;\n  --rdp-background-color: #e7edff;\n  --rdp-accent-color-dark: #3003e1;\n  --rdp-background-color-dark: #180270;\n  --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */\n  --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */\n\n  margin: 1em;\n}\n\n/* Hide elements for devices that are not screen readers */\n.rdp-vhidden {\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  background: transparent;\n  border: 0;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  appearance: none;\n  position: absolute !important;\n  top: 0;\n  width: 1px !important;\n  height: 1px !important;\n  padding: 0 !important;\n  overflow: hidden !important;\n  clip: rect(1px, 1px, 1px, 1px) !important;\n  border: 0 !important;\n}\n\n/* Buttons */\n.rdp-button_reset {\n  appearance: none;\n  position: relative;\n  margin: 0;\n  padding: 0;\n  cursor: default;\n  color: inherit;\n  background: none;\n  font: inherit;\n\n  -moz-appearance: none;\n  -webkit-appearance: none;\n}\n\n.rdp-button_reset:focus-visible {\n  /* Make sure to reset outline only when :focus-visible is supported */\n  outline: none;\n}\n\n.rdp-button {\n  border: 2px solid transparent;\n}\n\n.rdp-button[disabled]:not(.rdp-day_selected) {\n  opacity: 0.25;\n}\n\n.rdp-button:not([disabled]) {\n  cursor: pointer;\n}\n\n.rdp-button:focus-visible:not([disabled]) {\n  color: inherit;\n  background-color: var(--rdp-background-color);\n  border: var(--rdp-outline);\n}\n\n.rdp-button:hover:not([disabled]):not(.rdp-day_selected) {\n  background-color: var(--rdp-background-color);\n}\n\n.rdp-months {\n  display: flex;\n}\n\n.rdp-month {\n  margin: 0 1em;\n}\n\n.rdp-month:first-child {\n  margin-left: 0;\n}\n\n.rdp-month:last-child {\n  margin-right: 0;\n}\n\n.rdp-table {\n  margin: 0;\n  max-width: calc(var(--rdp-cell-size) * 7);\n  border-collapse: collapse;\n}\n\n.rdp-with_weeknumber .rdp-table {\n  max-width: calc(var(--rdp-cell-size) * 8);\n  border-collapse: collapse;\n}\n\n.rdp-caption {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0;\n  text-align: left;\n}\n\n.rdp-multiple_months .rdp-caption {\n  position: relative;\n  display: block;\n  text-align: center;\n}\n\n.rdp-caption_dropdowns {\n  position: relative;\n  display: inline-flex;\n}\n\n.rdp-caption_label {\n  position: relative;\n  z-index: 1;\n  display: inline-flex;\n  align-items: center;\n  margin: 0;\n  padding: 0 0.25em;\n  white-space: nowrap;\n  color: currentColor;\n  border: 0;\n  border: 2px solid transparent;\n  font-family: inherit;\n  font-size: var(--rdp-caption-font-size);\n  font-weight: bold;\n}\n\n.rdp-nav {\n  white-space: nowrap;\n}\n\n.rdp-multiple_months .rdp-caption_start .rdp-nav {\n  position: absolute;\n  top: 50%;\n  left: 0;\n  transform: translateY(-50%);\n}\n\n.rdp-multiple_months .rdp-caption_end .rdp-nav {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  transform: translateY(-50%);\n}\n\n.rdp-nav_button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--rdp-cell-size);\n  height: var(--rdp-cell-size);\n  padding: 0.25em;\n  border-radius: 100%;\n}\n\n/* ---------- */\n/* Dropdowns  */\n/* ---------- */\n\n.rdp-dropdown_year,\n.rdp-dropdown_month {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n.rdp-dropdown {\n  appearance: none;\n  position: absolute;\n  z-index: 2;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  cursor: inherit;\n  opacity: 0;\n  border: none;\n  background-color: transparent;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n\n.rdp-dropdown[disabled] {\n  opacity: unset;\n  color: unset;\n}\n\n.rdp-dropdown:focus-visible:not([disabled]) + .rdp-caption_label {\n  background-color: var(--rdp-background-color);\n  border: var(--rdp-outline);\n  border-radius: 6px;\n}\n\n.rdp-dropdown_icon {\n  margin: 0 0 0 5px;\n}\n\n.rdp-head {\n  border: 0;\n}\n\n.rdp-head_row,\n.rdp-row {\n  height: 100%;\n}\n\n.rdp-head_cell {\n  vertical-align: middle;\n  font-size: 0.75em;\n  font-weight: 700;\n  text-align: center;\n  height: 100%;\n  height: var(--rdp-cell-size);\n  padding: 0;\n  text-transform: uppercase;\n}\n\n.rdp-tbody {\n  border: 0;\n}\n\n.rdp-tfoot {\n  margin: 0.5em;\n}\n\n.rdp-cell {\n  width: var(--rdp-cell-size);\n  height: 100%;\n  height: var(--rdp-cell-size);\n  padding: 0;\n  text-align: center;\n}\n\n.rdp-weeknumber {\n  font-size: 0.75em;\n}\n\n.rdp-weeknumber,\n.rdp-day {\n  display: flex;\n  overflow: hidden;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--rdp-cell-size);\n  max-width: var(--rdp-cell-size);\n  height: var(--rdp-cell-size);\n  margin: 0;\n  border: 2px solid transparent;\n  border-radius: 100%;\n}\n\n.rdp-day_today:not(.rdp-day_outside) {\n  font-weight: bold;\n}\n\n.rdp-day_selected,\n.rdp-day_selected:focus-visible,\n.rdp-day_selected:hover {\n  color: white;\n  opacity: 1;\n  background-color: var(--rdp-accent-color);\n}\n\n.rdp-day_outside {\n  opacity: 0.5;\n}\n\n.rdp-day_selected:focus-visible {\n  /* Since the background is the same use again the outline */\n  outline: var(--rdp-outline);\n  outline-offset: 2px;\n  z-index: 1;\n}\n\n.rdp:not([dir='rtl']) .rdp-day_range_start:not(.rdp-day_range_end) {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n.rdp:not([dir='rtl']) .rdp-day_range_end:not(.rdp-day_range_start) {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n.rdp[dir='rtl'] .rdp-day_range_start:not(.rdp-day_range_end) {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n.rdp[dir='rtl'] .rdp-day_range_end:not(.rdp-day_range_start) {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n.rdp-day_range_end.rdp-day_range_start {\n  border-radius: 100%;\n}\n\n.rdp-day_range_middle {\n  border-radius: 0;\n}";
+    styleInject(css_248z$9);
+
+    var css_248z$8 = ".will-calendar-filter-container {\n  display: flex;\n  justify-content: center;\n  user-select: none;\n}\n\n/* Calendar overrides */\n\n\n.will-calendar-filter-container .DayPicker {\n  font-size: 25px; /* Adjust this value to make the DayPicker bigger */\n}\n\n.will-calendar-filter-container .rdp-month {\n  position: relative;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_start {\n  padding-left: 70px;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_end {\n  padding-right: 70px;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav {\n  border: 1px solid var(--will-primary);\n  border-radius: 50%;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav svg {\n  color: var(--will-primary);\n}\n\n\n.will-calendar-filter-container .rdp-month .rdp-caption {\n  position: initial;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-caption > .rdp-caption_label,\n.will-calendar-filter-container .rdp-table .rdp-head {\n  opacity: .6;\n}\n\n.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day.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.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 .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.will-root .will-calendar-filter-container .rdp-day_selected.rdp-day_range_start.no-active-selection.checkout-option,\n.will-root .will-calendar-filter-container .rdp-day_selected.rdp-day_range_middle.no-active-selection.checkout-option,\n.will-root .will-calendar-filter-container .rdp-day_selected.rdp-day_range_end.no-active-selection.checkout-option {\n  background-color: var(--rdp-background-color);\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.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\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 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, updateCalendarDefaultMoth = _a.updateCalendarDefaultMoth, 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 overlapping availableDates.lastCheckOut and disabledDates.start
+        var _d = useUpdateDisabledDates({
+            disableCalendarDates: disableCalendarDates,
+            calendarRange: calendarRange,
+            updateCalendarMonthNavigation: updateCalendarMonthNavigation,
+            updateCalendarDefaultMoth: updateCalendarDefaultMoth,
+        }), newDisableCalendarDates = _d.newDisableCalendarDates, overlappingDate = _d.overlappingDate;
+        // Handle disable dates by page
+        var disabledDatesByPage$1 = disabledDatesByPage({
+            today: today,
+            selectedPath: selectedPath,
+            newDisableCalendarDates: newDisableCalendarDates,
+        });
+        // Handle tooltip
+        useCalendarTooltips({
+            calendarRange: calendarRange,
+            updateCalendarMonthNavigation: updateCalendarMonthNavigation,
+            overlappingDate: overlappingDate,
+            updateCalendarDefaultMoth: updateCalendarDefaultMoth,
+            showFeedback: showFeedback,
+        });
+        // Handle loading spinner
+        useCalendarLoadingSpinner({
+            loadingData: loadingData,
+            updateCalendarMonthNavigation: updateCalendarMonthNavigation,
+            updateCalendarDefaultMoth: updateCalendarDefaultMoth,
+        });
+        // 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,
+        });
         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: 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,
-                            setOverlappingDates: setOverlappingDates,
-                        });
-                    }, captionLayout: "dropdown-buttons", defaultMonth: (initialCalendarRange === null || initialCalendarRange === void 0 ? void 0 : initialCalendarRange.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 handleOnSelect(range); }, captionLayout: "dropdown-buttons", defaultMonth: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.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.length
-                        ? disabledDatesByPage
+                            : today), disabled: disabledDatesByPage$1.length
+                        ? disabledDatesByPage$1
                         : (disabledDates === null || disabledDates === void 0 ? void 0 : disabledDates.length)
-                            ? disabledDates
-                            : (newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.disabledDates) || [], fromMonth: today, onMonthChange: function (val) {
+                            ? __spreadArray$1(__spreadArray$1(__spreadArray$1([], __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([], __read(newDisableCalendarDates.disabledDates), false), __read(firstPossibleRangeContextCheckIn), false), __read(lastPossibleRangeContextCheckOut), false) : [], 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: 'rdp-day_selected rdp-day_range_start no-active-selection ',
+                        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,
-                            }); }))) ||
-                            [],
-                    } }),
+                        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,
+                        findFirstPossibleRangeContextCheckIn: findFirstPossibleRangeContextCheckIn,
+                        findLastPossibleRangeContextCheckOut: findLastPossibleRangeContextCheckOut,
+                        firstPossibleRangeContextCheckIn: firstPossibleRangeContextCheckIn,
+                        lastPossibleRangeContextCheckOut: lastPossibleRangeContextCheckOut,
+                        currentSelectionLastCheckoutDate: currentSelectionLastCheckoutDate,
+                    }) }),
                 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, "Check-in Only")),
+                React__default.createElement("div", { className: 'will-calendar-tooltip-check-out-only' },
+                    React__default.createElement("div", null, "Checkout Only")),
                 React__default.createElement("div", { className: 'will-calendar-spinner' },
-                    React__default.createElement(SpinnerSVG, { fill: (palette === null || palette === void 0 ? void 0 : palette.primary) || 'inherit', size: 50 })))));
+                    React__default.createElement(IconsSvg, { fill: (palette === null || palette === void 0 ? void 0 : palette.primary) || 'inherit', size: 50, icon: "spinner" })))));
     });
-    /////////
-    var handleSelectedCheckIn = function (_a) {
-        var _b, _c, _d;
-        var range = _a.range, newDisableCalendarDates = _a.newDisableCalendarDates, setCalendarRange = _a.setCalendarRange, setDisabledDates = _a.setDisabledDates, calendarRange = _a.calendarRange, overlappingDate = _a.overlappingDate, setOverlappingDates = _a.setOverlappingDates;
-        // 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;
-        // Case: Set the calendar range only if it overlaps with the previously selected dates.
-        // The selection must remain continuous, meaning no gaps between days are allowed.
-        // Whether selecting forwards or backwards from the initially chosen dates,
-        // the new range must be directly adjacent to or overlap with the current selection.
-        var selectedDates = (newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.selectedDates) || null;
-        var rowRangeFrom = range === null || range === void 0 ? void 0 : range.from;
-        var rowRangeTo = range === null || range === void 0 ? void 0 : range.to;
-        var selectedDatesFrom = ((_c = newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.selectedDates) === null || _c === void 0 ? void 0 : _c.from) || null;
-        var selectedDatesTo = ((_d = newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.selectedDates) === null || _d === void 0 ? void 0 : _d.to) || null;
-        // Checking if rowRangeFrom is equal to or before selectedDatesTo
-        var startIsEqualOrBeforeSelectedEnd = rowRangeFrom && selectedDatesFrom && selectedDatesTo
-            ? isBefore(startOfDay(rowRangeFrom), startOfDay(selectedDatesTo)) ||
-                isEqual(startOfDay(rowRangeFrom), startOfDay(selectedDatesTo))
-            : null;
-        // Checking if rowRangeTo is equal to or after selectedDatesFrom
-        var endIsEqualOrAfterSelectedStart = rowRangeTo && selectedDatesFrom && selectedDatesTo
-            ? isAfter(startOfDay(rowRangeTo), startOfDay(selectedDatesFrom)) ||
-                isEqual(startOfDay(rowRangeTo), startOfDay(selectedDatesFrom))
-            : 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));
-        }
-        setOverlappingDates(false);
-        if ((selectedDates && !startIsEqualOrBeforeSelectedEnd) ||
-            (selectedDates && (range === null || range === void 0 ? void 0 : range.to) && !endIsEqualOrAfterSelectedStart)) {
-            setCalendarRange(undefined);
-            setOverlappingDates(true);
-        }
-        else 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;
@@ -11546,12 +11882,15 @@
 
     var useFilterCalendar = function (_a) {
         var onSubmit = _a.onSubmit, setToggleCalendar = _a.setToggleCalendar, noActiveSelection = _a.noActiveSelection, toggleCalendar = _a.toggleCalendar;
+        // State
         var _b = __read(React__default.useState(), 2), calendarRange = _b[0], setCalendarRange = _b[1];
         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];
-        var _g = __read(React__default.useState(false), 2), overlappingDates = _g[0], setOverlappingDates = _g[1];
+        var _g = __read(React__default.useState(false), 2), calendarHasError = _g[0], setCalendarHasError = _g[1];
+        var _h = __read(React__default.useState(false), 2), updatedForSubmit = _h[0], setUpdatedForSubmit = _h[1];
+        // Lifecycle
         React__default.useEffect(function () {
             if (typeof window === 'undefined')
                 return;
@@ -11562,10 +11901,15 @@
                 if (noActiveSelection) {
                     handleClearDates();
                     setUpdateCalendarDefaultMoth(function (prev) { return prev + 1; });
+                    setUpdatedForSubmit(false);
                     setInitialCalendarRange({
                         from: new Date(startDateParam),
                         to: new Date(endDateParam),
                     });
+                    setCalendarRange({
+                        from: new Date(startDateParam),
+                        to: new Date(endDateParam),
+                    });
                 }
                 else {
                     setCalendarRange({
@@ -11575,6 +11919,31 @@
                 }
             }
         }, [toggleCalendar]);
+        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);
@@ -11582,6 +11951,8 @@
         var handleClearDates = function () {
             setDisabledDates([]);
             setCalendarRange(undefined);
+            setCalendarHasError(false);
+            setInitialCalendarRange(undefined);
         };
         return {
             handleSubmit: handleSubmit,
@@ -11593,17 +11964,17 @@
             disabledDates: disabledDates,
             updateCalendarMonthNavigation: updateCalendarMonthNavigation,
             updateCalendarDefaultMoth: updateCalendarDefaultMoth,
-            initialCalendarRange: initialCalendarRange,
-            overlappingDates: overlappingDates,
-            setOverlappingDates: setOverlappingDates,
+            calendarHasError: calendarHasError,
+            setCalendarHasError: setCalendarHasError,
+            setUpdatedForSubmit: setUpdatedForSubmit,
         };
     };
 
-    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    border-bottom: 1px solid var(--will-grey);\n}\n\n.will-root .will-calendar-wrapper .will-calendar-header-row {\n    display: flex;\n    justify-content: space-between;\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}";
+    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    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    align-items: center;\n    margin-bottom: 10px;\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@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.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, disableCalendarDates = _a.disableCalendarDates, toggleCalendar = _a.toggleCalendar, loadingData = _a.loadingData, setToggleCalendar = _a.setToggleCalendar, requestDates = _a.requestDates, showFeedback = _a.showFeedback, noActiveSelection = _a.noActiveSelection;
+        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, rangeContext = _a.rangeContext;
         var themePalette = useTheme({ palette: palette });
         // Translations
         useUpdateTranslations({ language: language });
@@ -11613,7 +11984,7 @@
             setToggleCalendar: setToggleCalendar,
             noActiveSelection: noActiveSelection,
             toggleCalendar: toggleCalendar,
-        }), 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, overlappingDates = _b.overlappingDates, setOverlappingDates = _b.setOverlappingDates;
+        }), setCalendarRange = _b.setCalendarRange, handleClearDates = _b.handleClearDates, calendarRange = _b.calendarRange, disabledDates = _b.disabledDates, setDisabledDates = _b.setDisabledDates, updateCalendarMonthNavigation = _b.updateCalendarMonthNavigation, updateCalendarDefaultMoth = _b.updateCalendarDefaultMoth, setUpdateCalendarMonthNavigation = _b.setUpdateCalendarMonthNavigation, calendarHasError = _b.calendarHasError, setCalendarHasError = _b.setCalendarHasError, setUpdatedForSubmit = _b.setUpdatedForSubmit;
         // Display component after fully loaded
         useAwaitRender();
         // Handle close filter section
@@ -11621,36 +11992,39 @@
             handleSelectedFilter: setToggleCalendar,
         }).filtersRef;
         var nights = nightsCount({
-            calendarRange: calendarRange || initialCalendarRange,
+            calendarRange: calendarRange,
         });
         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("div", { className: "will-calendar-header-row" },
-                    React__default.createElement("h2", null, t('filterBar:calendar.title')),
-                    React__default.createElement(CloseButton, { handleClose: function () { return setToggleCalendar(false); } })),
-                overlappingDates && React__default.createElement("div", null, "Chose other dates")),
+                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, updateCalendarDefaultMoth: updateCalendarDefaultMoth, loadingData: loadingData, initialCalendarRange: initialCalendarRange, showFeedback: showFeedback, noActiveSelection: noActiveSelection, palette: palette, setOverlappingDates: setOverlappingDates })),
+                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, showFeedback: showFeedback, noActiveSelection: noActiveSelection, palette: palette, setCalendarHasError: setCalendarHasError, setUpdatedForSubmit: setUpdatedForSubmit, rangeContext: rangeContext, calendarHasError: calendarHasError })),
             React__default.createElement("div", { className: "will-calendar-footer" },
-                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) })))))));
+                React__default.createElement("div", { className: "will-calendar-footer-actions-wrapper" },
+                    React__default.createElement("div", { className: "will-calendar-footer-dates" },
+                        calendarHasError ? (React__default.createElement("span", null, "Start or end day need connection for previous reservation")) : (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
+                            ? '2 nights min'
+                            : 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") }))),
+                calendarHasError && (React__default.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
+                    React__default.createElement(IconsSvg, { fill: (palette === null || palette === void 0 ? void 0 : palette.error) || 'inherit', size: 25, icon: "warning" }),
+                    React__default.createElement("span", { style: { marginLeft: '10px' } }, "Check-in available for second room only with connection dates"))))))));
     }
 
     exports.Button = Button$1;