willba-component-library 0.2.54 → 0.2.56

package/lib/index.esm.js

@@ -522,11 +522,12 @@ function useTheme(_a) {
     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 () {
@@ -3757,6 +3758,111 @@ function differenceInCalendarWeeks(dirtyDateLeft, dirtyDateRight, options) {
   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
@@ -10817,83 +10923,304 @@ var reactResponsive = {exports: {}};
 
 var reactResponsiveExports = reactResponsive.exports;
 
-var SpinnerSVG = function (_a) {
-    var fill = _a.fill, size = _a.size;
-    return (React__default__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__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__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__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__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__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__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__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__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__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 = 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(useState(undefined), 2), overlappingDate = _c[0], setOverlappingDate = _c[1];
-    var newDisableCalendarDates = 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
-    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 useEffect(function () {
         if (typeof document === 'undefined' || !showFeedback)
             return;
         // Children
@@ -10901,11 +11228,16 @@ var Calendar = forwardRef(function (_a, ref) {
         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 = [];
@@ -10924,13 +11256,24 @@ var Calendar = forwardRef(function (_a, ref) {
                 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);
@@ -10947,11 +11290,13 @@ var Calendar = forwardRef(function (_a, ref) {
         calendarRange,
         updateCalendarMonthNavigation,
         overlappingDate,
-        initialCalendarRange,
         updateCalendarDefaultMoth,
     ]);
-    // Handle loading spinner
-    useEffect(function () {
+};
+
+var useCalendarLoadingSpinner = function (_a) {
+    var loadingData = _a.loadingData, updateCalendarMonthNavigation = _a.updateCalendarMonthNavigation, updateCalendarDefaultMoth = _a.updateCalendarDefaultMoth;
+    return useEffect(function () {
         if (typeof document === 'undefined')
             return;
         var loadingSpinner = document.querySelector('.will-filter-bar-calendar .rdp-months .will-calendar-spinner');
@@ -10964,195 +11309,186 @@ var Calendar = forwardRef(function (_a, ref) {
                 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(useState(undefined), 2), overlappingDate = _b[0], setOverlappingDate = _b[1];
+    var newDisableCalendarDates = 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 = 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__default.createElement("div", { className: "will-filter-bar-calendar", ref: ref },
         React__default__default.createElement("div", { className: "will-calendar-filter-container" },
-            React__default__default.createElement(DayPicker, { 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__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__default.createElement("div", { className: 'will-calendar-tooltip' },
                 React__default__default.createElement("div", null, t('noCheckIn'))),
             React__default__default.createElement("div", { className: 'will-calendar-tooltip-check-out' },
                 React__default__default.createElement("div", null, t('noCheckOut'))),
             React__default__default.createElement("div", { className: 'will-calendar-tooltip-overlapping-date' },
                 React__default__default.createElement("div", null, t('checkOutOnly'))),
+            React__default__default.createElement("div", { className: 'will-calendar-tooltip-check-in-only' },
+                React__default__default.createElement("div", null, "Check-in Only")),
+            React__default__default.createElement("div", { className: 'will-calendar-tooltip-check-out-only' },
+                React__default__default.createElement("div", null, "Checkout Only")),
             React__default__default.createElement("div", { className: 'will-calendar-spinner' },
-                React__default__default.createElement(SpinnerSVG, { fill: (palette === null || palette === void 0 ? void 0 : palette.primary) || 'inherit', size: 50 })))));
+                React__default__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;
@@ -11524,12 +11860,15 @@ var REDIRECT_URL_FALLBACK = 'http://localhost:3000/';
 
 var useFilterCalendar = function (_a) {
     var onSubmit = _a.onSubmit, setToggleCalendar = _a.setToggleCalendar, noActiveSelection = _a.noActiveSelection, toggleCalendar = _a.toggleCalendar;
+    // State
     var _b = __read(useState(), 2), calendarRange = _b[0], setCalendarRange = _b[1];
     var _c = __read(useState(), 2), initialCalendarRange = _c[0], setInitialCalendarRange = _c[1];
     var _d = __read(useState([]), 2), disabledDates = _d[0], setDisabledDates = _d[1];
     var _e = __read(useState(false), 2), updateCalendarMonthNavigation = _e[0], setUpdateCalendarMonthNavigation = _e[1];
     var _f = __read(useState(0), 2), updateCalendarDefaultMoth = _f[0], setUpdateCalendarDefaultMoth = _f[1];
-    var _g = __read(useState(false), 2), overlappingDates = _g[0], setOverlappingDates = _g[1];
+    var _g = __read(useState(false), 2), calendarHasError = _g[0], setCalendarHasError = _g[1];
+    var _h = __read(useState(false), 2), updatedForSubmit = _h[0], setUpdatedForSubmit = _h[1];
+    // Lifecycle
     useEffect(function () {
         if (typeof window === 'undefined')
             return;
@@ -11540,10 +11879,15 @@ var useFilterCalendar = function (_a) {
             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({
@@ -11553,6 +11897,31 @@ var useFilterCalendar = function (_a) {
             }
         }
     }, [toggleCalendar]);
+    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);
@@ -11560,6 +11929,8 @@ var useFilterCalendar = function (_a) {
     var handleClearDates = function () {
         setDisabledDates([]);
         setCalendarRange(undefined);
+        setCalendarHasError(false);
+        setInitialCalendarRange(undefined);
     };
     return {
         handleSubmit: handleSubmit,
@@ -11571,17 +11942,17 @@ var useFilterCalendar = function (_a) {
         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 });
@@ -11591,7 +11962,7 @@ function FilterCalendar(_a) {
         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
@@ -11599,36 +11970,39 @@ function FilterCalendar(_a) {
         handleSelectedFilter: setToggleCalendar,
     }).filtersRef;
     var nights = nightsCount({
-        calendarRange: calendarRange || initialCalendarRange,
+        calendarRange: calendarRange,
     });
     return (React__default__default.createElement("div", { className: "will-root", style: themePalette }, toggleCalendar && (React__default__default.createElement("div", { className: "will-calendar-wrapper", ref: filtersRef },
         React__default__default.createElement("div", { className: "will-calendar-header" },
-            React__default__default.createElement("div", { className: "will-calendar-header-row" },
-                React__default__default.createElement("h2", null, t('filterBar:calendar.title')),
-                React__default__default.createElement(CloseButton, { handleClose: function () { return setToggleCalendar(false); } })),
-            overlappingDates && React__default__default.createElement("div", null, "Chose other dates")),
+            React__default__default.createElement("h2", null, t('filterBar:calendar.title')),
+            React__default__default.createElement(CloseButton, { handleClose: function () { return setToggleCalendar(false); } })),
         React__default__default.createElement("div", { className: "will-calendar-main" },
-            React__default__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__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__default.createElement("div", { className: "will-calendar-footer" },
-            React__default__default.createElement("div", { className: "will-calendar-footer-dates" },
-                React__default__default.createElement("div", null,
-                    React__default__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__default.createElement("span", { className: "will-calendar-footer-dates-separator" }, "-"),
-                    React__default__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__default.createElement("span", { className: "will-calendar-footer-booked" }, nights
-                    ? "".concat(nights, " ").concat(t("common:".concat(nights === 1 ? 'night' : 'nights')))
-                    : '')),
-            React__default__default.createElement("div", { className: "will-calendar-footer-actions" },
-                React__default__default.createElement(SubmitButton, { onClick: handleClearDates, disabled: !(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from), label: t("common:clearDates") }),
-                React__default__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__default.createElement("div", { className: "will-calendar-footer-actions-wrapper" },
+                React__default__default.createElement("div", { className: "will-calendar-footer-dates" },
+                    calendarHasError ? (React__default__default.createElement("span", null, "Start or end day need connection for previous reservation")) : (React__default__default.createElement("div", null,
+                        React__default__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__default.createElement("span", { className: "will-calendar-footer-dates-separator" }, "-"),
+                        React__default__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__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__default.createElement("div", { className: "will-calendar-footer-actions" },
+                    React__default__default.createElement(SubmitButton, { onClick: handleClearDates, disabled: !(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from), label: t("common:clearDates") }))),
+            calendarHasError && (React__default__default.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
+                React__default__default.createElement(IconsSvg, { fill: (palette === null || palette === void 0 ? void 0 : palette.error) || 'inherit', size: 25, icon: "warning" }),
+                React__default__default.createElement("span", { style: { marginLeft: '10px' } }, "Check-in available for second room only with connection dates"))))))));
 }
 
 export { Button$1 as Button, FilterBar, FilterCalendar };