willba-component-library 0.2.70 → 0.2.72

package/lib/components/FilterCalendar/components/Footer.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { DateRange } from 'react-day-picker';
+import { Palette } from '../../../themes/useTheme';
+export declare const Footer: ({ calendarHasError, calendarRange, handleClearDates, language, palette, }: {
+    calendarHasError: boolean;
+    calendarRange?: DateRange | undefined;
+    handleClearDates: () => void;
+    language?: string | undefined;
+    palette: Palette;
+}) => React.JSX.Element;

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/checkForContinuousSelection.d.ts

@@ -1,10 +1,11 @@
 import { DateRange } from 'react-day-picker';
-import { RangeContext } from '../CalendarTypes';
+import { DisableCalendarDates, RangeContext } from '../CalendarTypes';
 type Props = {
     setCalendarHasError?: (arg: boolean) => void;
     rangeContext?: RangeContext;
     calendarRange?: DateRange;
     calendarHasError?: boolean;
+    disabledDates?: DisableCalendarDates['disabledDates'];
 };
-export declare const checkForContinuousSelection: ({ setCalendarHasError, rangeContext, calendarRange, calendarHasError, }: Props) => void;
+export declare const checkForContinuousSelection: ({ setCalendarHasError, rangeContext, calendarRange, calendarHasError, disabledDates, }: Props) => void;
 export {};

package/lib/index.esm.js

@@ -527,7 +527,7 @@ function useTheme(_a) {
     return themePalette;
 }
 
-var css_248z$c = "@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');\n\n.will-root * {\n  font-family: 'Montserrat', sans-serif;\n}\n\n.will-root {\n  \n  box-sizing: border-box;\n  font-size: 14px;\n  \n  color: #1E1E1E;\n \n  /* Palette */\n  --will-primary: #374269;\n  --will-secondary: #374269;\n  --will-grey: #ABA7AF;\n  --will-white: #fff;\n  --will-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 50%);\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";
+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-error: #d32f2f;\n\n  /* Transparent */\n  --will-transparent-black: rgba(0, 0, 0, 0.5);\n  --will-transparent-white: rgba(255, 255, 255, 0.30);\n  --will-transparent-lavender: rgba(171, 167, 175, 0.30);\n\n  /* Color mix */\n  --will-primary-lighter: color-mix(in srgb, var(--will-primary), white 50%);\n  --will-primary-lightest: color-mix(in srgb, var(--will-primary), white 80%);\n\n\n  /* Shadows */\n  --will-box-shadow-dark: 0px 2px 12px 2px #a1a1a180;\n  --will-box-shadow-light: 0px 2px 12px 2px #bcb9b980;\n\n  /* Breakpoints */\n  --will-lg: 1140px;\n  --will-md: 960px;\n  --will-sm: 600px;\n  --will-xl: 1280px;\n  --will-xs: 0px;\n}\n\n/* Typography */\n\n.will-root h1, h2, h3, h4, h5, h6 {\n font-weight: 700;\n} \n\n.will-root p, h1, h2, h3, h4, h5, h6, span {\n  margin: 0;\n  padding: 0;\n}\n\n\n/* Integration fixes */\n\n.will-root p {\n  margin: 0 !important;\n}\n\n.will-root button {\n  line-height: normal !important;\n}\n";
 styleInject(css_248z$c);
 
 var useAwaitRender = function () {
@@ -2991,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  font-size: 15px;\n  padding: 0 10px;\n}\n\n.will-filter-bar-submit-button span {\n margin-right: 10px;\n display: flex;\n}\n\nbutton.will-filter-bar-submit-button:disabled  {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n\n@media (max-width: 960px) {\n  .will-filter-bar-submit-button {\n    justify-content: center;\n   \n  }\n}\n\n/* --- */\n\n@keyframes spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n";
 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'));
 };
@@ -3495,6 +3495,78 @@ function addYears(dirtyDate, dirtyAmount) {
   return addMonths(dirtyDate, amount * 12);
 }
 
+/**
+ * @name areIntervalsOverlapping
+ * @category Interval Helpers
+ * @summary Is the given time interval overlapping with another time interval?
+ *
+ * @description
+ * Is the given time interval overlapping with another time interval? Adjacent intervals do not count as overlapping.
+ *
+ * @param {Interval} intervalLeft - the first interval to compare. See [Interval]{@link https://date-fns.org/docs/Interval}
+ * @param {Interval} intervalRight - the second interval to compare. See [Interval]{@link https://date-fns.org/docs/Interval}
+ * @param {Object} [options] - the object with options
+ * @param {Boolean} [options.inclusive=false] - whether the comparison is inclusive or not
+ * @returns {Boolean} whether the time intervals are overlapping
+ * @throws {TypeError} 2 arguments required
+ * @throws {RangeError} The start of an interval cannot be after its end
+ * @throws {RangeError} Date in interval cannot be `Invalid Date`
+ *
+ * @example
+ * // For overlapping time intervals:
+ * areIntervalsOverlapping(
+ *   { start: new Date(2014, 0, 10), end: new Date(2014, 0, 20) },
+ *   { start: new Date(2014, 0, 17), end: new Date(2014, 0, 21) }
+ * )
+ * //=> true
+ *
+ * @example
+ * // For non-overlapping time intervals:
+ * areIntervalsOverlapping(
+ *   { start: new Date(2014, 0, 10), end: new Date(2014, 0, 20) },
+ *   { start: new Date(2014, 0, 21), end: new Date(2014, 0, 22) }
+ * )
+ * //=> false
+ *
+ * @example
+ * // For adjacent time intervals:
+ * areIntervalsOverlapping(
+ *   { start: new Date(2014, 0, 10), end: new Date(2014, 0, 20) },
+ *   { start: new Date(2014, 0, 20), end: new Date(2014, 0, 30) }
+ * )
+ * //=> false
+ *
+ * @example
+ * // Using the inclusive option:
+ * areIntervalsOverlapping(
+ *   { start: new Date(2014, 0, 10), end: new Date(2014, 0, 20) },
+ *   { start: new Date(2014, 0, 20), end: new Date(2014, 0, 24) }
+ * )
+ * //=> false
+ * areIntervalsOverlapping(
+ *   { start: new Date(2014, 0, 10), end: new Date(2014, 0, 20) },
+ *   { start: new Date(2014, 0, 20), end: new Date(2014, 0, 24) },
+ *   { inclusive: true }
+ * )
+ * //=> true
+ */
+function areIntervalsOverlapping(intervalLeft, intervalRight, options) {
+  requiredArgs(2, arguments);
+  var leftStartTime = toDate(intervalLeft === null || intervalLeft === void 0 ? void 0 : intervalLeft.start).getTime();
+  var leftEndTime = toDate(intervalLeft === null || intervalLeft === void 0 ? void 0 : intervalLeft.end).getTime();
+  var rightStartTime = toDate(intervalRight === null || intervalRight === void 0 ? void 0 : intervalRight.start).getTime();
+  var rightEndTime = toDate(intervalRight === null || intervalRight === void 0 ? void 0 : intervalRight.end).getTime();
+
+  // Throw an exception if start date is after end date or if any date is `Invalid Date`
+  if (!(leftStartTime <= leftEndTime && rightStartTime <= rightEndTime)) {
+    throw new RangeError('Invalid interval');
+  }
+  if (options !== null && options !== void 0 && options.inclusive) {
+    return leftStartTime <= rightEndTime && rightStartTime <= leftEndTime;
+  }
+  return leftStartTime < rightEndTime && rightStartTime < leftEndTime;
+}
+
 /**
  * @name max
  * @category Common Helpers
@@ -7661,7 +7733,7 @@ function Caption(props) {
 
 /** Render the Footer component (empty as default).*/
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-function Footer(props) {
+function Footer$1(props) {
     var _a = useDayPicker(), footer = _a.footer, styles = _a.styles, tfoot = _a.classNames.tfoot;
     if (!footer)
         return React__default__default.createElement(React__default__default.Fragment, null);
@@ -8815,7 +8887,7 @@ function Table(props) {
     });
     var HeadComponent = (_a = components === null || components === void 0 ? void 0 : components.Head) !== null && _a !== void 0 ? _a : Head;
     var RowComponent = (_b = components === null || components === void 0 ? void 0 : components.Row) !== null && _b !== void 0 ? _b : Row;
-    var FooterComponent = (_c = components === null || components === void 0 ? void 0 : components.Footer) !== null && _c !== void 0 ? _c : Footer;
+    var FooterComponent = (_c = components === null || components === void 0 ? void 0 : components.Footer) !== null && _c !== void 0 ? _c : Footer$1;
     return (React__default__default.createElement("table", { id: props.id, className: classNames.table, style: styles.table, role: "grid", "aria-labelledby": props['aria-labelledby'] },
         !hideHead && React__default__default.createElement(HeadComponent, null),
         React__default__default.createElement("tbody", { className: classNames.tbody, style: styles.tbody }, weeks.map(function (week) { return (React__default__default.createElement(RowComponent, { displayMonth: props.displayMonth, key: week.weekNumber, dates: week.dates, weekNumber: week.weekNumber })); })),
@@ -10923,6 +10995,8 @@ var IconsSvg = function (_a) {
                     verticalAlign: 'middle',
                     fill: fill,
                     overflow: 'hidden',
+                    minWidth: '25px',
+                    minHeight: '25px',
                 }, 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" })));
     }
@@ -11221,27 +11295,41 @@ var handleRangeContextDisabledDates = function (_a) {
 //       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;
+    var setCalendarHasError = _a.setCalendarHasError, rangeContext = _a.rangeContext, calendarRange = _a.calendarRange, calendarHasError = _a.calendarHasError, disabledDates = _a.disabledDates;
+    var calendarRangeFrom = (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) && endOfDay(calendarRange.from);
+    var calendarRangeTo = (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) && endOfDay(calendarRange.to);
+    var rangeContextFrom = (rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.from) && endOfDay(rangeContext.from);
+    var rangeContextTo = (rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.to) && endOfDay(rangeContext.to);
     // Checking if rangeFrom is equal to or before rangeContextTo
     var startIsEqualOrBeforeRangeContextEnd = calendarRangeFrom && rangeContextTo
-        ? isBefore(endOfDay(calendarRangeFrom), endOfDay(rangeContextTo)) ||
-            isEqual(endOfDay(calendarRangeFrom), endOfDay(rangeContextTo))
+        ? isBefore(calendarRangeFrom, rangeContextTo) ||
+            isEqual(calendarRangeFrom, 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))
+        ? isAfter(calendarRangeTo, rangeContextFrom) ||
+            isEqual(calendarRangeTo, rangeContextFrom)
         : null;
+    // Check if selection overlapping unavailable dates
+    var selectionOverlappingUnavailableDate = disabledDates === null || disabledDates === void 0 ? void 0 : disabledDates.find(function (range) {
+        var rangeFrom = endOfDay(range.from);
+        var rangeTo = endOfDay(range.to);
+        return (rangeContextFrom &&
+            rangeContextTo &&
+            areIntervalsOverlapping({ start: rangeContextFrom, end: rangeContextTo }, { start: rangeFrom, end: rangeTo }) &&
+            calendarRangeFrom &&
+            calendarRangeTo &&
+            areIntervalsOverlapping({ start: calendarRangeFrom, end: calendarRangeTo }, { start: rangeFrom, end: rangeTo }));
+    });
     useEffect(function () {
         if ((rangeContext &&
             calendarRangeFrom &&
             !startIsEqualOrBeforeRangeContextEnd) ||
-            (rangeContext && calendarRangeTo && !endIsEqualOrAfterRangeContextStart)) {
-            setCalendarHasError && !calendarHasError && setCalendarHasError(true);
+            (rangeContext &&
+                calendarRangeTo &&
+                !endIsEqualOrAfterRangeContextStart) ||
+            selectionOverlappingUnavailableDate) {
+            !!(setCalendarHasError && !calendarHasError) && setCalendarHasError(true);
         }
     });
 };
@@ -11268,6 +11356,8 @@ var useCalendarTooltips = function (_a) {
         // Append children to parents
         var tooltipClonesCheckIn = [];
         var tooltipClonesCheckOut = [];
+        var tooltipClonesCheckInOnly = [];
+        var tooltipClonesCheckOutOnly = [];
         var tooltipClonesSpinner = [];
         var tooltipClonesOverlappingDates = [];
         if (calendarTooltip && calendarButtons.length > 0) {
@@ -11288,12 +11378,14 @@ var useCalendarTooltips = function (_a) {
             calendarCheckOutOnly.forEach(function (element) {
                 var tooltipClone = calendarTooltipCheckOutOnly.cloneNode(true);
                 element.appendChild(tooltipClone);
+                tooltipClonesCheckOutOnly.push(tooltipClone);
             });
         }
         if (calendarTooltipCheckInOnly && calendarCheckInOnly.length > 0) {
             calendarCheckInOnly.forEach(function (element) {
                 var tooltipClone = calendarTooltipCheckInOnly.cloneNode(true);
                 element.appendChild(tooltipClone);
+                tooltipClonesCheckInOnly.push(tooltipClone);
             });
         }
         if (loadingSpinner && calendarMonthContainer) {
@@ -11313,6 +11405,8 @@ var useCalendarTooltips = function (_a) {
             tooltipClonesCheckOut.forEach(function (clone) { return clone.remove(); });
             tooltipClonesSpinner.forEach(function (clone) { return clone.remove(); });
             tooltipClonesOverlappingDates.forEach(function (clone) { return clone.remove(); });
+            tooltipClonesCheckInOnly.forEach(function (clone) { return clone.remove(); });
+            tooltipClonesCheckOutOnly.forEach(function (clone) { return clone.remove(); });
         };
     });
 };
@@ -11394,7 +11488,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\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: 91%;\n  margin-top: -2px;\n\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";
+var css_248z$8 = ".will-calendar-filter-container {\n  display: flex;\n  justify-content: center;\n  user-select: none;\n}\n\n/* Calendar overrides */\n\n.will-calendar-filter-container .DayPicker {\n  font-size: 25px;\n}\n\n.will-calendar-filter-container .rdp-month {\n  position: relative;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_start {\n  padding-left: 70px;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_end {\n  padding-right: 70px;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav {\n  border: 1px solid var(--will-primary);\n  border-radius: 50%;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav svg {\n  color: var(--will-primary);\n}\n\n\n.will-calendar-filter-container .rdp-month .rdp-caption {\n  position: initial;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-caption > .rdp-caption_label,\n.will-calendar-filter-container .rdp-table .rdp-head {\n  opacity: .6;\n}\n\n.will-calendar-filter-container .rdp-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  color: var(--will-transparent-black);\n  opacity: 1\n}\n\n@media (max-width: 960px) {\n  .will-calendar-filter-container .rdp-month .rdp-nav {\n    border: none;\n    border-radius: initial;\n  }\n\n  .will-calendar-filter-container .rdp-month.rdp-caption_start {\n    padding-left: 10px;\n  }\n  \n  .will-calendar-filter-container .rdp-month.rdp-caption_end {\n    padding-right: 10px;\n  }\n}\n\n/* Tooltips */\n.will-root .will-calendar-filter-container .will-calendar-tooltip,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-overlapping-date,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out-only,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-in-only {\n position: absolute;\n top: -42px;\n transform: translateX(calc(-50% + 20px));\n display: none;\n white-space: nowrap;\n z-index: 2;\n}\n\n.will-root .will-calendar-filter-container .will-calendar-tooltip > div,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out > div,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-overlapping-date > div,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out-only > div,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-in-only > div {\n  background-color: white;\n  position: relative;\n  padding: 5px 10px;\n  border: 1px solid var(--will-primary);\n  border-radius: 5px;\n}\n\n.will-root .will-calendar-filter-container .will-calendar-tooltip::before,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out::before,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-overlapping-date::before,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out-only::before,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-in-only::before {\n  content: \"\";\n  width: 10px;\n  height: 10px;\n  border: 1px solid var(--will-primary);\n  position: absolute;\n  bottom: -4px;\n  left:calc(50% - 5.555px);\n  rotate: 45deg;\n  z-index: 0;\n  background-color: var(--will-white);\n}\n\n.will-root .will-calendar-filter-container .rdp-cell:hover .will-calendar-tooltip,\n.will-root .will-calendar-filter-container .rdp-cell:hover .will-calendar-tooltip-check-out,\n.will-root .will-calendar-filter-container .rdp-cell:hover .will-calendar-tooltip-overlapping-date,\n.will-root .will-calendar-filter-container .rdp-cell:hover .will-calendar-tooltip-check-out-only,\n.will-root .will-calendar-filter-container .rdp-cell:hover .will-calendar-tooltip-check-in-only {\n  display: block;\n}\n\n/* Loading spinner */\n\n.will-root .will-calendar-filter-container .rdp-months {\n  position: relative;\n}\n\n.will-root .will-calendar-filter-container .will-calendar-spinner {\n  position: absolute;\n  top:0;\n  bottom:0;\n  left: 0;\n  right: 0;\n  background-color: var(--will-white-transparent);\n  z-index: 3;\n  display: none;\n  justify-content: center;\n  align-items: center;\n  font-weight: 600;\n}\n\n/* No active selection */\n\n.will-root .will-calendar-filter-container .no-active-selection-start,\n.will-root .will-calendar-filter-container .no-active-selection-mid,\n.will-root .will-calendar-filter-container .no-active-selection-end { \n  position: initial;\n  \n}\n\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.will-root .will-calendar-filter-container .no-active-selection-start::before {\n  border-right: none;\n  border-top-left-radius: 50%;\n  border-bottom-left-radius: 50%;\n}\n\n.will-root .will-calendar-filter-container .no-active-selection-mid::before {\n  border-right: none;\n  border-left: none;\n}\n\n.will-root .will-calendar-filter-container .no-active-selection-end::before {\n  border-left: none;\n  border-top-right-radius: 50%;\n  border-bottom-right-radius: 50%;\n}\n\n.will-root .will-calendar-filter-container .rdp-day_selected.rdp-day_range_middle.checkout-option {\n  background-color: var(--will-primary-lightest);\n  color: inherit;\n}\n\n/* Overlapping date */\n\n.will-root .will-calendar-filter-container .overlapping-date {\n  user-select: none;\n  pointer-events: none;\n}\n\n.will-root .will-calendar-filter-container .overlapping-date:hover {\n  cursor: not-allowed;\n}\n\n@media (max-width: 600px) {\n /* Tooltips */\n.will-root .will-calendar-filter-container .will-calendar-tooltip,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-overlapping-date,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out-only,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-in-only {\n  top: -70px;\n  white-space: wrap;\n  max-width: 120px;\n}\n}\n\n\n";
 styleInject(css_248z$8);
 
 var Calendar = forwardRef(function (_a, ref) {
@@ -11454,6 +11548,7 @@ var Calendar = forwardRef(function (_a, ref) {
         rangeContext: rangeContext,
         calendarRange: calendarRange,
         calendarHasError: calendarHasError,
+        disabledDates: newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.disabledDates,
     });
     return (React__default__default.createElement("div", { className: "will-filter-bar-calendar", ref: ref },
         React__default__default.createElement("div", { className: "will-calendar-filter-container" },
@@ -11735,7 +11830,7 @@ var SelectButton = function (_a) {
                 React__default__default.createElement("p", { className: "select-button-description ".concat(active ? 'active' : ''), dangerouslySetInnerHTML: { __html: description } })))));
 };
 
-var css_248z$6 = ".will-filter-bar-tab-button {\n    width: auto;\n    height: auto;\n    padding: 10px 20px;\n    cursor: pointer;\n    border: none;\n    white-space: nowrap;\n    font-size: 16px;\n    display: flex;\n    align-items: center;\n    background-color: transparent;\n    user-select: none;\n    font-weight: 600;\n    border-radius: 50px;\n  }\n\n  .will-filter-bar-tab-button.light {\n    color: var(--will-white)\n  }\n\n  .will-filter-bar-tab-button.dark {\n    color: var(--will-black)\n  }\n\n  .will-filter-bar-tab-button.light.active,\n  .will-filter-bar-tab-button:hover {\n    background-color: var(--will-transparent-white);\n  }\n\n  .will-filter-bar-tab-button.dark.active,\n  .will-filter-bar-tab-button:hover {\n    background-color: var(--will-transparent-black);\n  }\n\n \n\n";
+var css_248z$6 = ".will-filter-bar-tab-button {\n    width: auto;\n    height: auto;\n    padding: 10px 20px;\n    cursor: pointer;\n    border: none;\n    white-space: nowrap;\n    font-size: 16px;\n    display: flex;\n    align-items: center;\n    background-color: transparent;\n    user-select: none;\n    font-weight: 600;\n    border-radius: 50px;\n  }\n\n  .will-filter-bar-tab-button.light {\n    color: var(--will-white)\n  }\n\n  .will-filter-bar-tab-button.dark {\n    color: var(--will-black)\n  }\n\n  .will-filter-bar-tab-button.light.active,\n  .will-filter-bar-tab-button:hover {\n    background-color: var(--will-transparent-white);\n  }\n\n  .will-filter-bar-tab-button.dark.active,\n  .will-filter-bar-tab-button:hover {\n    background-color: var(--will-transparent-lavender);\n  }\n\n \n\n";
 styleInject(css_248z$6);
 
 var TabButton = function (_a) {
@@ -12002,7 +12097,57 @@ var useFilterCalendar = function (_a) {
     };
 };
 
-var css_248z = ".will-root .will-calendar-wrapper {\n    box-shadow: var(--will-box-shadow-dark);\n    border-radius: 20px;\n    background-color: var(--will-white);\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-header,\n.will-root .will-calendar-wrapper .will-calendar-main,\n.will-root .will-calendar-wrapper .will-calendar-footer {\n   padding: 20px;\n}\n\n/* Header */\n\n.will-root .will-calendar-wrapper .will-calendar-header {\n    display: flex;\n    justify-content: space-between;\n    border-bottom: 1px solid 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    margin-top: 10px;\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.will-root .will-calendar-wrapper .will-calendar-footer-error {\n    display: flex;\n    align-items: center;\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-actions-wrapper {\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     .will-root .will-calendar-wrapper .will-calendar-footer-error {\n       min-width: 20px;\n       margin-bottom: 10px; \n    }\n  }\n\n.will-root .will-calendar-wrapper .will-calendar-header .will-filter-bar-close-button {\n    position: initial;\n}";
+var Footer = function (_a) {
+    var calendarHasError = _a.calendarHasError, calendarRange = _a.calendarRange, handleClearDates = _a.handleClearDates, language = _a.language, palette = _a.palette;
+    var t = useTranslation().t;
+    var isMobile = reactResponsiveExports.useMediaQuery({ maxWidth: 600 });
+    var nights = nightsCount({
+        calendarRange: calendarRange,
+    });
+    return (React__default__default.createElement(React__default__default.Fragment, null,
+        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, t("common:errors.calendarErrors.checkInAvailabilityGuide"))) : (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
+                    ? t("filterBar:calendar.minNights")
+                    : nights
+                        ? "".concat(nights, " ").concat(t("common:".concat(nights === 1 ? 'night' : 'nights')))
+                        : '')),
+            React__default__default.createElement("div", { className: "will-calendar-footer-error" }, calendarHasError &&
+                isMobile &&
+                renderCalendarErrorMessage({
+                    palette: palette,
+                    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"), variant: "text" }))),
+        React__default__default.createElement("div", { className: "will-calendar-footer-error" }, calendarHasError &&
+            !isMobile &&
+            renderCalendarErrorMessage({
+                palette: palette,
+                message: t("common:errors.calendarErrors.checkInAvailabilityError"),
+            }))));
+};
+/////////
+var renderCalendarErrorMessage = function (_a) {
+    var message = _a.message, palette = _a.palette;
+    return (React__default__default.createElement(React__default__default.Fragment, null,
+        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", null, message || '')));
+};
+
+var css_248z = ".will-root .will-calendar-wrapper {\n    box-shadow: var(--will-box-shadow-dark);\n    border-radius: 20px;\n    background-color: var(--will-white);\n    position: absolute;\n    top: 0;\n    left: 0;\n   \n}\n\n.will-root .will-calendar-wrapper .will-calendar-header,\n.will-root .will-calendar-wrapper .will-calendar-main,\n.will-root .will-calendar-wrapper .will-calendar-footer {\n   padding: 20px;\n}\n\n/* Header */\n\n.will-root .will-calendar-wrapper .will-calendar-header {\n    display: flex;\n    justify-content: space-between;\n    border-bottom: 1px solid var(--will-grey);\n    align-items: center;\n}\n\n/* Footer */\n\n.will-root .will-calendar-wrapper .will-calendar-footer {\n    border-top: 1px solid var(--will-grey);\n}\n\n/* Footer actions */\n\n.will-root .will-calendar-wrapper .will-calendar-footer-actions-wrapper {\n    display: flex;\n    justify-content: space-between;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-dates > div {\n    margin-bottom: 5px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-dates-separator {\n    margin: 0 15px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-dates .will-calendar-footer-booked {\n    display: flex;\n    min-height: 20.5px;\n    margin-top: 10px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-error {\n    display: flex;\n    align-items: center;\n    margin-top: 10px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-error span {\n    display: inline-block;\n    margin-left: 10px;\n}\n\n@media (max-width: 960px) {\n    .will-root .will-calendar-wrapper {\n        width: -webkit-fill-available;\n        margin: 0 -6%;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-header,\n    .will-root .will-calendar-wrapper .will-calendar-main,\n    .will-root .will-calendar-wrapper .will-calendar-footer {\n        padding: 20px 10px;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-footer-actions-wrapper {\n        flex-direction: column;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-footer-dates  {\n        text-align: center;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-footer-dates .will-calendar-footer-booked {\n       justify-content: center;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-footer-actions {\n       flex-direction: column;\n       width: 100%;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-footer-actions button{\n        width: 100%;\n        margin-top: 10px;\n     }\n\n     .will-root .will-calendar-wrapper .will-calendar-footer-error {\n        margin-top: 10px;\n     }\n\n    .will-root .will-calendar-wrapper .will-calendar-footer-error span {\n        text-align: center;\n        margin-left: 5px;\n    }\n  }\n\n.will-root .will-calendar-wrapper .will-calendar-header .will-filter-bar-close-button {\n    position: initial;\n}";
 styleInject(css_248z);
 
 function FilterCalendar(_a) {
@@ -12011,7 +12156,6 @@ function FilterCalendar(_a) {
     // Translations
     useUpdateTranslations({ language: language });
     var t = useTranslation().t;
-    var isMobile = reactResponsiveExports.useMediaQuery({ maxWidth: 690 });
     var _b = useFilterCalendar({
         onSubmit: onSubmit,
         setToggleCalendar: setToggleCalendar,
@@ -12026,9 +12170,6 @@ function FilterCalendar(_a) {
     var filtersRef = useCloseFilterSection({
         handleSelectedFilter: setToggleCalendar,
     }).filtersRef;
-    var nights = nightsCount({
-        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("h2", null, t('filterBar:calendar.title')),
@@ -12036,47 +12177,8 @@ function FilterCalendar(_a) {
         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, updateCalendarDefaultMonth: updateCalendarDefaultMonth, 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-actions-wrapper" },
-                React__default__default.createElement("div", { className: "will-calendar-footer-dates" },
-                    calendarHasError ? (React__default__default.createElement("span", null, t("common:errors.calendarErrors.checkInAvailabilityGuide"))) : (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
-                        ? t("filterBar:calendar.minNights")
-                        : nights
-                            ? "".concat(nights, " ").concat(t("common:".concat(nights === 1 ? 'night' : 'nights')))
-                            : '')),
-                calendarHasError &&
-                    isMobile &&
-                    renderCalendarErrorMessage({
-                        palette: palette,
-                        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") }))),
-            calendarHasError &&
-                !isMobile &&
-                renderCalendarErrorMessage({
-                    palette: palette,
-                    message: t("common:errors.calendarErrors.checkInAvailabilityError"),
-                }))))));
+            React__default__default.createElement(Footer, { calendarHasError: calendarHasError, calendarRange: calendarRange, handleClearDates: handleClearDates, language: language, palette: palette }))))));
 }
-/////////
-var renderCalendarErrorMessage = function (_a) {
-    var message = _a.message, palette = _a.palette;
-    return (React__default__default.createElement("div", { className: "will-calendar-footer-error" },
-        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' } }, message || '')));
-};
 
 export { Button$1 as Button, FilterBar, FilterCalendar };
 //# sourceMappingURL=index.esm.js.map