willba-component-library 0.2.69 → 0.2.71

package/lib/core/components/buttons/submit-button/SubmitButton.d.ts

@@ -1,11 +1,13 @@
 import React, { ReactNode } from 'react';
 import './SubmitButton.css';
+type SubmitButtonVariant = 'text' | 'full';
 type Props = {
     onClick?: () => void;
     startIcon?: ReactNode;
     label?: string;
     disabled?: boolean;
     isLoading?: boolean;
+    variant?: SubmitButtonVariant;
 };
-export declare const SubmitButton: ({ onClick, startIcon, label, disabled, isLoading, }: Props) => React.JSX.Element;
+export declare const SubmitButton: ({ onClick, startIcon, label, disabled, isLoading, variant, }: Props) => React.JSX.Element;
 export {};

package/lib/core/components/calendar/utils/handleCalendarModifiers.d.ts

@@ -26,7 +26,10 @@ export declare const handleCalendarModifiers: ({ newDisableCalendarDates, calend
         from: Date | undefined;
     }[];
     noActiveSelectionStart: never[] | Date;
-    noActiveSelectionMid: Date[];
+    noActiveSelectionMid: (never[] | {
+        after: Date;
+        before: Date;
+    })[];
     noActiveSelectionEnd: never[] | Date;
     checkoutOptionsMid: {
         after: Date;

package/lib/index.esm.js

@@ -2856,8 +2856,7 @@ var clearDates$1 = "Clear dates";
 var noCheckIn$1 = "Room not available";
 var noCheckOut$1 = "Check-out not available";
 var checkOutOnly$1 = "Check-out only";
-var onlyCheckOut$1 = "Check-in only";
-var onlyCheckIn$1 = "Check-out only";
+var checkInOnly$1 = "Check-in only";
 var errors$1 = {
 	calendarErrors: {
 		checkInAvailabilityError: "Check-in available for second room only with connection dates",
@@ -2875,8 +2874,7 @@ var enCommon = {
 	noCheckIn: noCheckIn$1,
 	noCheckOut: noCheckOut$1,
 	checkOutOnly: checkOutOnly$1,
-	onlyCheckOut: onlyCheckOut$1,
-	onlyCheckIn: onlyCheckIn$1,
+	checkInOnly: checkInOnly$1,
 	errors: errors$1
 };
 
@@ -2927,8 +2925,7 @@ var clearDates = "Tyhjennä";
 var noCheckIn = "Huone ei saatavilla";
 var noCheckOut = "Uloskirjaus ei saatavilla";
 var checkOutOnly = "Vain uloskirjaus";
-var onlyCheckOut = "Check-in only";
-var onlyCheckIn = "Check-out only";
+var checkInOnly = "Check-in only";
 var errors = {
 	calendarErrors: {
 		checkInAvailabilityError: "Check-in available for second room only with connection dates",
@@ -2946,8 +2943,7 @@ var fiCommon = {
 	noCheckIn: noCheckIn,
 	noCheckOut: noCheckOut,
 	checkOutOnly: checkOutOnly,
-	onlyCheckOut: onlyCheckOut,
-	onlyCheckIn: onlyCheckIn,
+	checkInOnly: checkInOnly,
 	errors: errors
 };
 
@@ -2995,12 +2991,12 @@ var useCloseFilterSection = function (_a) {
     return { filtersRef: filtersRef };
 };
 
-var css_248z$b = ".will-filter-bar-submit-button {\n  width: auto;\n  height: auto;\n  background-color: var(--will-primary);\n  color: var(--will-white);\n  padding: 10px 20px;\n  border-radius: 20px;\n  cursor: pointer;\n  border: none;\n  white-space: nowrap;\n  text-transform: uppercase;\n  font-size: 12px;\n  display: flex;\n  align-items: center;\n}\n\n.will-filter-bar-submit-button span {\n margin-right: 10px;\n display: flex;\n}\n\nbutton.will-filter-bar-submit-button:disabled  {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n\n@media (max-width: 960px) {\n  .will-filter-bar-submit-button {\n    justify-content: center;\n   \n  }\n}\n\n/* --- */\n\n@keyframes spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n";
+var css_248z$b = ".will-filter-bar-submit-button {\n  width: auto;\n  height: auto;\n  padding: 10px 20px;\n  border-radius: 20px;\n  cursor: pointer;\n  border: none;\n  white-space: nowrap;\n  text-transform: uppercase;\n  font-size: 12px;\n  display: flex;\n  align-items: center;\n  user-select: none;\n}\n\n/* Submit button variants */\n.will-filter-bar-submit-button.default {\n  background-color: var(--will-primary);\n  color: var(--will-white);\n}\n\n.will-filter-bar-submit-button.text {\n  background-color: transparent;\n  color: var(--will-black);\n  text-decoration: underline;\n  font-weight: 500;\n}\n\n.will-filter-bar-submit-button span {\n margin-right: 10px;\n display: flex;\n}\n\nbutton.will-filter-bar-submit-button:disabled  {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n\n@media (max-width: 960px) {\n  .will-filter-bar-submit-button {\n    justify-content: center;\n   \n  }\n}\n\n/* --- */\n\n@keyframes spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n";
 styleInject(css_248z$b);
 
 var SubmitButton = function (_a) {
-    var onClick = _a.onClick, startIcon = _a.startIcon, label = _a.label, disabled = _a.disabled, isLoading = _a.isLoading;
-    return (React__default__default.createElement("button", { className: "will-filter-bar-submit-button", onClick: onClick, disabled: disabled || isLoading },
+    var onClick = _a.onClick, startIcon = _a.startIcon, label = _a.label, disabled = _a.disabled, isLoading = _a.isLoading, variant = _a.variant;
+    return (React__default__default.createElement("button", { className: "will-filter-bar-submit-button ".concat(variant || 'default'), onClick: onClick, disabled: disabled || isLoading },
         isLoading ? (React__default__default.createElement("span", null, React__default__default.createElement(FaSpinner, { style: { animation: 'spin 1s linear infinite' } }))) : (startIcon && React__default__default.createElement("span", null, startIcon)),
         label || 'Label'));
 };
@@ -3881,62 +3877,6 @@ function endOfMonth(dirtyDate) {
   return date;
 }
 
-/**
- * @name eachDayOfInterval
- * @category Interval Helpers
- * @summary Return the array of dates within the specified time interval.
- *
- * @description
- * Return the array of dates within the specified time interval.
- *
- * @param {Interval} interval - the interval. See [Interval]{@link https://date-fns.org/docs/Interval}
- * @param {Object} [options] - an object with options.
- * @param {Number} [options.step=1] - the step to increment by. The value should be more than 1.
- * @returns {Date[]} the array with starts of days from the day of the interval start to the day of the interval end
- * @throws {TypeError} 1 argument required
- * @throws {RangeError} `options.step` must be a number greater than 1
- * @throws {RangeError} The start of an interval cannot be after its end
- * @throws {RangeError} Date in interval cannot be `Invalid Date`
- *
- * @example
- * // Each day between 6 October 2014 and 10 October 2014:
- * const result = eachDayOfInterval({
- *   start: new Date(2014, 9, 6),
- *   end: new Date(2014, 9, 10)
- * })
- * //=> [
- * //   Mon Oct 06 2014 00:00:00,
- * //   Tue Oct 07 2014 00:00:00,
- * //   Wed Oct 08 2014 00:00:00,
- * //   Thu Oct 09 2014 00:00:00,
- * //   Fri Oct 10 2014 00:00:00
- * // ]
- */
-function eachDayOfInterval(dirtyInterval, options) {
-  var _options$step;
-  requiredArgs(1, arguments);
-  var interval = dirtyInterval || {};
-  var startDate = toDate(interval.start);
-  var endDate = toDate(interval.end);
-  var endTime = endDate.getTime();
-
-  // Throw an exception if start date is after end date or if any date is `Invalid Date`
-  if (!(startDate.getTime() <= endTime)) {
-    throw new RangeError('Invalid interval');
-  }
-  var dates = [];
-  var currentDate = startDate;
-  currentDate.setHours(0, 0, 0, 0);
-  var step = Number((_options$step = options === null || options === void 0 ? void 0 : options.step) !== null && _options$step !== void 0 ? _options$step : 1);
-  if (step < 1 || isNaN(step)) throw new RangeError('`options.step` must be a number greater than 1');
-  while (currentDate.getTime() <= endTime) {
-    dates.push(toDate(currentDate));
-    currentDate.setDate(currentDate.getDate() + step);
-    currentDate.setHours(0, 0, 0, 0);
-  }
-  return dates;
-}
-
 /**
  * @name startOfMonth
  * @category Month Helpers
@@ -6526,58 +6466,6 @@ function isSameYear(dirtyDateLeft, dirtyDateRight) {
   return dateLeft.getFullYear() === dateRight.getFullYear();
 }
 
-/**
- * @name isWithinInterval
- * @category Interval Helpers
- * @summary Is the given date within the interval?
- *
- * @description
- * Is the given date within the interval? (Including start and end.)
- *
- * @param {Date|Number} date - the date to check
- * @param {Interval} interval - the interval to check
- * @returns {Boolean} the date is within the interval
- * @throws {TypeError} 2 arguments required
- * @throws {RangeError} The start of an interval cannot be after its end
- * @throws {RangeError} Date in interval cannot be `Invalid Date`
- *
- * @example
- * // For the date within the interval:
- * isWithinInterval(new Date(2014, 0, 3), {
- *   start: new Date(2014, 0, 1),
- *   end: new Date(2014, 0, 7)
- * })
- * //=> true
- *
- * @example
- * // For the date outside of the interval:
- * isWithinInterval(new Date(2014, 0, 10), {
- *   start: new Date(2014, 0, 1),
- *   end: new Date(2014, 0, 7)
- * })
- * //=> false
- *
- * @example
- * // For date equal to interval start:
- * isWithinInterval(date, { start, end: date }) // => true
- *
- * @example
- * // For date equal to interval end:
- * isWithinInterval(date, { start: date, end }) // => true
- */
-function isWithinInterval(dirtyDate, interval) {
-  requiredArgs(2, arguments);
-  var time = toDate(dirtyDate).getTime();
-  var startTime = toDate(interval.start).getTime();
-  var endTime = toDate(interval.end).getTime();
-
-  // Throw an exception if start date is after end date or if any date is `Invalid Date`
-  if (!(startTime <= endTime)) {
-    throw new RangeError('Invalid interval');
-  }
-  return time >= startTime && time <= endTime;
-}
-
 /**
  * @name subDays
  * @category Day Helpers
@@ -11227,35 +11115,6 @@ var handleCalendarModifiers = function (_a) {
     var calendarRangeTo = (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) && endOfDay(calendarRange.to);
     var rangeContextFrom = (rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.from) && endOfDay(rangeContext.from);
     var rangeContextTo = (rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.to) && endOfDay(rangeContext.to);
-    // Create range for range context middle selection and current overlapping selection
-    var rangeContextMiddleSelection = rangeContextFrom && rangeContextTo
-        ? eachDayOfInterval({
-            start: addDays(rangeContextFrom, 1),
-            end: addDays(rangeContextTo, -1),
-        }).filter(function (date) {
-            return !((calendarRangeFrom &&
-                isEqual(endOfDay(calendarRangeFrom), endOfDay(date))) ||
-                (calendarRangeTo &&
-                    isEqual(endOfDay(calendarRangeTo), endOfDay(date))) ||
-                (calendarRangeFrom &&
-                    !calendarRangeTo &&
-                    (currentSelectionLastCheckoutDate === null || currentSelectionLastCheckoutDate === void 0 ? void 0 : currentSelectionLastCheckoutDate.lastCheckOut) &&
-                    isAfter(calendarRangeFrom, rangeContextFrom) &&
-                    isBefore(currentSelectionLastCheckoutDate === null || currentSelectionLastCheckoutDate === void 0 ? void 0 : currentSelectionLastCheckoutDate.lastCheckOut, rangeContextTo) &&
-                    isWithinInterval(date, {
-                        start: currentSelectionLastCheckoutDate.checkIn,
-                        end: currentSelectionLastCheckoutDate.lastCheckOut,
-                    })) ||
-                (calendarRangeFrom &&
-                    calendarRangeTo &&
-                    isAfter(calendarRangeFrom, rangeContextFrom) &&
-                    isBefore(calendarRangeTo, rangeContextTo) &&
-                    isWithinInterval(date, {
-                        start: calendarRangeFrom,
-                        end: calendarRangeTo,
-                    })));
-        })
-        : [];
     return {
         booked: disabledDatesByPage.length
             ? disabledDatesByPage
@@ -11272,21 +11131,13 @@ var handleCalendarModifiers = function (_a) {
         overlappingDate: __spreadArray$1([], __read((!calendarRangeFrom && !!(overlappingDate === null || overlappingDate === void 0 ? void 0 : overlappingDate.length)
             ? overlappingDate.map(function (date) { return ({ from: date.from }); })
             : [])), false),
-        noActiveSelectionStart: rangeContextFrom &&
-            !(calendarRangeFrom &&
-                rangeContextFrom &&
-                isEqual(endOfDay(rangeContextFrom), endOfDay(calendarRangeFrom)))
-            ? rangeContextFrom
-            : [],
-        noActiveSelectionMid: __spreadArray$1([], __read((rangeContextMiddleSelection.length
-            ? rangeContextMiddleSelection
-            : [])), false),
-        noActiveSelectionEnd: rangeContextTo &&
-            !(calendarRangeFrom &&
-                rangeContextTo &&
-                isEqual(endOfDay(rangeContextTo), endOfDay(calendarRangeFrom)))
-            ? rangeContextTo
-            : [],
+        noActiveSelectionStart: rangeContextFrom || [],
+        noActiveSelectionMid: [
+            rangeContextFrom && rangeContextTo
+                ? { after: rangeContextFrom, before: rangeContextTo }
+                : [],
+        ],
+        noActiveSelectionEnd: rangeContextTo || [],
         checkoutOptionsMid: __spreadArray$1([], __read((calendarRangeFrom &&
             !calendarRangeTo &&
             (currentSelectionLastCheckoutDate === null || currentSelectionLastCheckoutDate === void 0 ? void 0 : currentSelectionLastCheckoutDate.lastCheckOut)
@@ -11543,7 +11394,7 @@ var useUpdateDisabledDates = function (_a) {
 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";
+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\n\n\n/* ---- */\n\n.will-root .will-calendar-filter-container .no-active-selection-start,\n.will-root .will-calendar-filter-container .no-active-selection-mid,\n.will-root .will-calendar-filter-container .no-active-selection-end { \n  position: initial;\n}\n\n.will-root .will-calendar-filter-container .no-active-selection-start::before,\n.will-root .will-calendar-filter-container .no-active-selection-mid::before,\n.will-root .will-calendar-filter-container .no-active-selection-end::before { \n  content: \"\";\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 3px dashed var(--will-grey);\n}\n\n\n.will-root .will-calendar-filter-container .no-active-selection-start::before {\n  border-right: none;\n  border-top-left-radius: 50%;\n  border-bottom-left-radius: 50%;\n}\n\n.will-root .will-calendar-filter-container .no-active-selection-mid::before {\n  border-right: none;\n  border-left: none;\n}\n\n.will-root .will-calendar-filter-container .no-active-selection-end::before {\n  border-left: none;\n  border-top-right-radius: 50%;\n  border-bottom-right-radius: 50%;\n}\n\n.will-root .will-calendar-filter-container .rdp-day_selected.rdp-day_range_middle.checkout-option {\n  background-color: var(--will-primary-lightest);\n  color: inherit;\n}\n\n\n/* Overlapping date */\n\n.will-root .will-calendar-filter-container .overlapping-date {\n  user-select: none;\n  pointer-events: none;\n}\n\n.will-root .will-calendar-filter-container .overlapping-date:hover {\n  cursor: not-allowed;\n}\n\n\n";
 styleInject(css_248z$8);
 
 var Calendar = forwardRef(function (_a, ref) {
@@ -11632,9 +11483,9 @@ var Calendar = forwardRef(function (_a, ref) {
                     booked: 'booked',
                     disabledAfterCheckIn: 'disabled-after-check-in',
                     overlappingDate: 'overlapping-date',
-                    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',
+                    noActiveSelectionStart: 'no-active-selection-start',
+                    noActiveSelectionMid: 'no-active-selection-mid',
+                    noActiveSelectionEnd: 'no-active-selection-end',
                     checkoutOptionsMid: 'rdp-day_selected rdp-day_range_middle checkout-option',
                     checkInOnly: 'check-in-only',
                     checkOutOnly: 'check-out-only',
@@ -11661,9 +11512,9 @@ var Calendar = forwardRef(function (_a, ref) {
             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", null, t('checkInOnly'))),
             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", null, t('checkOutOnly'))),
             React__default__default.createElement("div", { className: 'will-calendar-spinner' },
                 React__default__default.createElement(IconsSvg, { fill: (palette === null || palette === void 0 ? void 0 : palette.primary) || 'inherit', size: 50, icon: "spinner" })))));
 });
@@ -12211,7 +12062,7 @@ function FilterCalendar(_a) {
                         message: t("common:errors.calendarErrors.checkInAvailabilityError"),
                     }),
                 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: handleClearDates, disabled: !(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from), label: t("common:clearDates"), variant: "text" }))),
             calendarHasError &&
                 !isMobile &&
                 renderCalendarErrorMessage({