willba-component-library 0.3.12 → 0.3.14

package/lib/index.esm.js

@@ -1,6 +1,5 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import * as React__default from 'react';
-import React__default__default, { useState, createContext, useContext, useRef, useEffect, forwardRef, useMemo } from 'react';
+import * as React from 'react';
+import React__default, { useState, createContext, useContext, useRef, useEffect, forwardRef, useMemo } from 'react';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -201,7 +200,7 @@ styleInject(css_248z$h);
 var Button$1 = function (_a) {
     var _b = _a.type, type = _b === void 0 ? 'primary' : _b, textColor = _a.textColor, _c = _a.size, size = _c === void 0 ? 'medium' : _c, onClick = _a.onClick, label = _a.label;
     var _d = __read(useState(4), 2), theState = _d[0]; _d[1];
-    return (jsx("button", { type: "button", className: classNames('storybook-button', "storybook-button--".concat(size), "storybook-button--".concat(type)), style: textColor ? { color: textColor } : {}, onClick: onClick, children: "".concat(label, " ").concat(theState) }));
+    return (React__default.createElement("button", { type: "button", className: classNames('storybook-button', "storybook-button--".concat(size), "storybook-button--".concat(type)), style: textColor ? { color: textColor } : {}, onClick: onClick }, "".concat(label, " ").concat(theState)));
 };
 
 function warn() {
@@ -470,7 +469,7 @@ var DefaultContext = {
   style: undefined,
   attr: undefined
 };
-var IconContext = React__default__default.createContext && React__default__default.createContext(DefaultContext);
+var IconContext = React__default.createContext && React__default.createContext(DefaultContext);
 
 var __assign$1 = undefined && undefined.__assign || function () {
   __assign$1 = Object.assign || function (t) {
@@ -492,7 +491,7 @@ var __rest$1 = undefined && undefined.__rest || function (s, e) {
 };
 function Tree2Element(tree) {
   return tree && tree.map(function (node, i) {
-    return React__default__default.createElement(node.tag, __assign$1({
+    return React__default.createElement(node.tag, __assign$1({
       key: i
     }, node.attr), Tree2Element(node.child));
   });
@@ -500,7 +499,7 @@ function Tree2Element(tree) {
 function GenIcon(data) {
   // eslint-disable-next-line react/display-name
   return function (props) {
-    return React__default__default.createElement(IconBase, __assign$1({
+    return React__default.createElement(IconBase, __assign$1({
       attr: __assign$1({}, data.attr)
     }, props), Tree2Element(data.child));
   };
@@ -515,7 +514,7 @@ function IconBase(props) {
     var className;
     if (conf.className) className = conf.className;
     if (props.className) className = (className ? className + " " : "") + props.className;
-    return React__default__default.createElement("svg", __assign$1({
+    return React__default.createElement("svg", __assign$1({
       stroke: "currentColor",
       fill: "currentColor",
       strokeWidth: "0"
@@ -527,9 +526,9 @@ function IconBase(props) {
       height: computedSize,
       width: computedSize,
       xmlns: "http://www.w3.org/2000/svg"
-    }), title && React__default__default.createElement("title", null, title), props.children);
+    }), title && React__default.createElement("title", null, title), props.children);
   };
-  return IconContext !== undefined ? React__default__default.createElement(IconContext.Consumer, null, function (conf) {
+  return IconContext !== undefined ? React__default.createElement(IconContext.Consumer, null, function (conf) {
     return elem(conf);
   }) : elem(DefaultContext);
 }
@@ -3004,7 +3003,9 @@ styleInject(css_248z$f);
 
 var SubmitButton = function (_a) {
     var onClick = _a.onClick, startIcon = _a.startIcon, label = _a.label, disabled = _a.disabled, isLoading = _a.isLoading, variant = _a.variant;
-    return (jsxs("button", { className: "will-filter-bar-submit-button ".concat(variant || 'default'), onClick: onClick, disabled: disabled || isLoading, children: [isLoading ? (jsx("span", { children: jsx(FaSpinner, { style: { animation: 'spin 1s linear infinite' } }) })) : (startIcon && jsx("span", { children: startIcon })), label || 'Label'] }));
+    return (React__default.createElement("button", { className: "will-filter-bar-submit-button ".concat(variant || 'default'), onClick: onClick, disabled: disabled || isLoading },
+        isLoading ? (React__default.createElement("span", null, React__default.createElement(FaSpinner, { style: { animation: 'spin 1s linear infinite' } }))) : (startIcon && React__default.createElement("span", null, startIcon)),
+        label || 'Label'));
 };
 
 // THIS FILE IS AUTO GENERATED
@@ -3017,7 +3018,8 @@ styleInject(css_248z$e);
 
 var CloseButton = function (_a) {
     var handleClose = _a.handleClose;
-    return (jsx("button", { className: "will-filter-bar-close-button", onClick: handleClose, children: jsx(IoIosCloseCircleOutline, {}) }));
+    return (React__default.createElement("button", { className: "will-filter-bar-close-button", onClick: handleClose },
+        React__default.createElement(IoIosCloseCircleOutline, null)));
 };
 
 function _typeof(o) {
@@ -7320,7 +7322,7 @@ function DayPickerProvider(props) {
         onSelect = initialProps.onSelect;
     }
     var value = __assign(__assign(__assign({}, defaultContextValues), initialProps), { captionLayout: captionLayout, classNames: __assign(__assign({}, defaultContextValues.classNames), initialProps.classNames), components: __assign({}, initialProps.components), formatters: __assign(__assign({}, defaultContextValues.formatters), initialProps.formatters), fromDate: fromDate, labels: __assign(__assign({}, defaultContextValues.labels), initialProps.labels), mode: initialProps.mode || defaultContextValues.mode, modifiers: __assign(__assign({}, defaultContextValues.modifiers), initialProps.modifiers), modifiersClassNames: __assign(__assign({}, defaultContextValues.modifiersClassNames), initialProps.modifiersClassNames), onSelect: onSelect, styles: __assign(__assign({}, defaultContextValues.styles), initialProps.styles), toDate: toDate });
-    return (React__default__default.createElement(DayPickerContext.Provider, { value: value }, props.children));
+    return (React__default.createElement(DayPickerContext.Provider, { value: value }, props.children));
 }
 /**
  * Hook to access the {@link DayPickerContextValue}.
@@ -7339,15 +7341,15 @@ function useDayPicker() {
 /** Render the caption for the displayed month. This component is used when `captionLayout="buttons"`. */
 function CaptionLabel(props) {
     var _a = useDayPicker(), locale = _a.locale, classNames = _a.classNames, styles = _a.styles, formatCaption = _a.formatters.formatCaption;
-    return (React__default__default.createElement("div", { className: classNames.caption_label, style: styles.caption_label, "aria-live": "polite", role: "presentation", id: props.id }, formatCaption(props.displayMonth, { locale: locale })));
+    return (React__default.createElement("div", { className: classNames.caption_label, style: styles.caption_label, "aria-live": "polite", role: "presentation", id: props.id }, formatCaption(props.displayMonth, { locale: locale })));
 }
 
 /**
  * Render the icon in the styled drop-down.
  */
 function IconDropdown(props) {
-    return (React__default__default.createElement("svg", __assign({ width: "8px", height: "8px", viewBox: "0 0 120 120", "data-testid": "iconDropdown" }, props),
-        React__default__default.createElement("path", { d: "M4.22182541,48.2218254 C8.44222828,44.0014225 15.2388494,43.9273804 19.5496459,47.9996989 L19.7781746,48.2218254 L60,88.443 L100.221825,48.2218254 C104.442228,44.0014225 111.238849,43.9273804 115.549646,47.9996989 L115.778175,48.2218254 C119.998577,52.4422283 120.07262,59.2388494 116.000301,63.5496459 L115.778175,63.7781746 L67.7781746,111.778175 C63.5577717,115.998577 56.7611506,116.07262 52.4503541,112.000301 L52.2218254,111.778175 L4.22182541,63.7781746 C-0.0739418023,59.4824074 -0.0739418023,52.5175926 4.22182541,48.2218254 Z", fill: "currentColor", fillRule: "nonzero" })));
+    return (React__default.createElement("svg", __assign({ width: "8px", height: "8px", viewBox: "0 0 120 120", "data-testid": "iconDropdown" }, props),
+        React__default.createElement("path", { d: "M4.22182541,48.2218254 C8.44222828,44.0014225 15.2388494,43.9273804 19.5496459,47.9996989 L19.7781746,48.2218254 L60,88.443 L100.221825,48.2218254 C104.442228,44.0014225 111.238849,43.9273804 115.549646,47.9996989 L115.778175,48.2218254 C119.998577,52.4422283 120.07262,59.2388494 116.000301,63.5496459 L115.778175,63.7781746 L67.7781746,111.778175 C63.5577717,115.998577 56.7611506,116.07262 52.4503541,112.000301 L52.2218254,111.778175 L4.22182541,63.7781746 C-0.0739418023,59.4824074 -0.0739418023,52.5175926 4.22182541,48.2218254 Z", fill: "currentColor", fillRule: "nonzero" })));
 }
 
 /**
@@ -7359,12 +7361,12 @@ function Dropdown(props) {
     var onChange = props.onChange, value = props.value, children = props.children, caption = props.caption, className = props.className, style = props.style;
     var dayPicker = useDayPicker();
     var IconDropdownComponent = (_b = (_a = dayPicker.components) === null || _a === void 0 ? void 0 : _a.IconDropdown) !== null && _b !== void 0 ? _b : IconDropdown;
-    return (React__default__default.createElement("div", { className: className, style: style },
-        React__default__default.createElement("span", { className: dayPicker.classNames.vhidden }, props['aria-label']),
-        React__default__default.createElement("select", { name: props.name, "aria-label": props['aria-label'], className: dayPicker.classNames.dropdown, style: dayPicker.styles.dropdown, value: value, onChange: onChange }, children),
-        React__default__default.createElement("div", { className: dayPicker.classNames.caption_label, style: dayPicker.styles.caption_label, "aria-hidden": "true" },
+    return (React__default.createElement("div", { className: className, style: style },
+        React__default.createElement("span", { className: dayPicker.classNames.vhidden }, props['aria-label']),
+        React__default.createElement("select", { name: props.name, "aria-label": props['aria-label'], className: dayPicker.classNames.dropdown, style: dayPicker.styles.dropdown, value: value, onChange: onChange }, children),
+        React__default.createElement("div", { className: dayPicker.classNames.caption_label, style: dayPicker.styles.caption_label, "aria-hidden": "true" },
             caption,
-            React__default__default.createElement(IconDropdownComponent, { className: dayPicker.classNames.dropdown_icon, style: dayPicker.styles.dropdown_icon }))));
+            React__default.createElement(IconDropdownComponent, { className: dayPicker.classNames.dropdown_icon, style: dayPicker.styles.dropdown_icon }))));
 }
 
 /** Render the dropdown to navigate between months. */
@@ -7373,9 +7375,9 @@ function MonthsDropdown(props) {
     var _b = useDayPicker(), fromDate = _b.fromDate, toDate = _b.toDate, styles = _b.styles, locale = _b.locale, formatMonthCaption = _b.formatters.formatMonthCaption, classNames = _b.classNames, components = _b.components, labelMonthDropdown = _b.labels.labelMonthDropdown;
     // Dropdown should appear only when both from/toDate is set
     if (!fromDate)
-        return React__default__default.createElement(React__default__default.Fragment, null);
+        return React__default.createElement(React__default.Fragment, null);
     if (!toDate)
-        return React__default__default.createElement(React__default__default.Fragment, null);
+        return React__default.createElement(React__default.Fragment, null);
     var dropdownMonths = [];
     if (isSameYear(fromDate, toDate)) {
         // only display the months included in the range
@@ -7397,7 +7399,7 @@ function MonthsDropdown(props) {
         props.onChange(newMonth);
     };
     var DropdownComponent = (_a = components === null || components === void 0 ? void 0 : components.Dropdown) !== null && _a !== void 0 ? _a : Dropdown;
-    return (React__default__default.createElement(DropdownComponent, { name: "months", "aria-label": labelMonthDropdown(), className: classNames.dropdown_month, style: styles.dropdown_month, onChange: handleChange, value: props.displayMonth.getMonth(), caption: formatMonthCaption(props.displayMonth, { locale: locale }) }, dropdownMonths.map(function (m) { return (React__default__default.createElement("option", { key: m.getMonth(), value: m.getMonth() }, formatMonthCaption(m, { locale: locale }))); })));
+    return (React__default.createElement(DropdownComponent, { name: "months", "aria-label": labelMonthDropdown(), className: classNames.dropdown_month, style: styles.dropdown_month, onChange: handleChange, value: props.displayMonth.getMonth(), caption: formatMonthCaption(props.displayMonth, { locale: locale }) }, dropdownMonths.map(function (m) { return (React__default.createElement("option", { key: m.getMonth(), value: m.getMonth() }, formatMonthCaption(m, { locale: locale }))); })));
 }
 
 /**
@@ -7411,9 +7413,9 @@ function YearsDropdown(props) {
     var years = [];
     // Dropdown should appear only when both from/toDate is set
     if (!fromDate)
-        return React__default__default.createElement(React__default__default.Fragment, null);
+        return React__default.createElement(React__default.Fragment, null);
     if (!toDate)
-        return React__default__default.createElement(React__default__default.Fragment, null);
+        return React__default.createElement(React__default.Fragment, null);
     var fromYear = fromDate.getFullYear();
     var toYear = toDate.getFullYear();
     for (var year = fromYear; year <= toYear; year++) {
@@ -7424,7 +7426,7 @@ function YearsDropdown(props) {
         props.onChange(newMonth);
     };
     var DropdownComponent = (_a = components === null || components === void 0 ? void 0 : components.Dropdown) !== null && _a !== void 0 ? _a : Dropdown;
-    return (React__default__default.createElement(DropdownComponent, { name: "years", "aria-label": labelYearDropdown(), className: classNames.dropdown_year, style: styles.dropdown_year, onChange: handleChange, value: displayMonth.getFullYear(), caption: formatYearCaption(displayMonth, { locale: locale }) }, years.map(function (year) { return (React__default__default.createElement("option", { key: year.getFullYear(), value: year.getFullYear() }, formatYearCaption(year, { locale: locale }))); })));
+    return (React__default.createElement(DropdownComponent, { name: "years", "aria-label": labelYearDropdown(), className: classNames.dropdown_year, style: styles.dropdown_year, onChange: handleChange, value: displayMonth.getFullYear(), caption: formatYearCaption(displayMonth, { locale: locale }) }, years.map(function (year) { return (React__default.createElement("option", { key: year.getFullYear(), value: year.getFullYear() }, formatYearCaption(year, { locale: locale }))); })));
 }
 
 /**
@@ -7588,7 +7590,7 @@ function NavigationProvider(props) {
         nextMonth: nextMonth,
         isDateDisplayed: isDateDisplayed
     };
-    return (React__default__default.createElement(NavigationContext.Provider, { value: value }, props.children));
+    return (React__default.createElement(NavigationContext.Provider, { value: value }, props.children));
 }
 /**
  * Hook to access the {@link NavigationContextValue}. Use this hook to navigate
@@ -7615,27 +7617,27 @@ function CaptionDropdowns(props) {
         goToMonth(newMonth);
     };
     var CaptionLabelComponent = (_a = components === null || components === void 0 ? void 0 : components.CaptionLabel) !== null && _a !== void 0 ? _a : CaptionLabel;
-    var captionLabel = (React__default__default.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }));
-    return (React__default__default.createElement("div", { className: classNames.caption_dropdowns, style: styles.caption_dropdowns },
-        React__default__default.createElement("div", { className: classNames.vhidden }, captionLabel),
-        React__default__default.createElement(MonthsDropdown, { onChange: handleMonthChange, displayMonth: props.displayMonth }),
-        React__default__default.createElement(YearsDropdown, { onChange: handleMonthChange, displayMonth: props.displayMonth })));
+    var captionLabel = (React__default.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }));
+    return (React__default.createElement("div", { className: classNames.caption_dropdowns, style: styles.caption_dropdowns },
+        React__default.createElement("div", { className: classNames.vhidden }, captionLabel),
+        React__default.createElement(MonthsDropdown, { onChange: handleMonthChange, displayMonth: props.displayMonth }),
+        React__default.createElement(YearsDropdown, { onChange: handleMonthChange, displayMonth: props.displayMonth })));
 }
 
 /**
  * Render the "previous month" button in the navigation.
  */
 function IconLeft(props) {
-    return (React__default__default.createElement("svg", __assign({ width: "16px", height: "16px", viewBox: "0 0 120 120" }, props),
-        React__default__default.createElement("path", { d: "M69.490332,3.34314575 C72.6145263,0.218951416 77.6798462,0.218951416 80.8040405,3.34314575 C83.8617626,6.40086786 83.9268205,11.3179931 80.9992143,14.4548388 L80.8040405,14.6568542 L35.461,60 L80.8040405,105.343146 C83.8617626,108.400868 83.9268205,113.317993 80.9992143,116.454839 L80.8040405,116.656854 C77.7463184,119.714576 72.8291931,119.779634 69.6923475,116.852028 L69.490332,116.656854 L18.490332,65.6568542 C15.4326099,62.5991321 15.367552,57.6820069 18.2951583,54.5451612 L18.490332,54.3431458 L69.490332,3.34314575 Z", fill: "currentColor", fillRule: "nonzero" })));
+    return (React__default.createElement("svg", __assign({ width: "16px", height: "16px", viewBox: "0 0 120 120" }, props),
+        React__default.createElement("path", { d: "M69.490332,3.34314575 C72.6145263,0.218951416 77.6798462,0.218951416 80.8040405,3.34314575 C83.8617626,6.40086786 83.9268205,11.3179931 80.9992143,14.4548388 L80.8040405,14.6568542 L35.461,60 L80.8040405,105.343146 C83.8617626,108.400868 83.9268205,113.317993 80.9992143,116.454839 L80.8040405,116.656854 C77.7463184,119.714576 72.8291931,119.779634 69.6923475,116.852028 L69.490332,116.656854 L18.490332,65.6568542 C15.4326099,62.5991321 15.367552,57.6820069 18.2951583,54.5451612 L18.490332,54.3431458 L69.490332,3.34314575 Z", fill: "currentColor", fillRule: "nonzero" })));
 }
 
 /**
  * Render the "next month" button in the navigation.
  */
 function IconRight(props) {
-    return (React__default__default.createElement("svg", __assign({ width: "16px", height: "16px", viewBox: "0 0 120 120" }, props),
-        React__default__default.createElement("path", { d: "M49.8040405,3.34314575 C46.6798462,0.218951416 41.6145263,0.218951416 38.490332,3.34314575 C35.4326099,6.40086786 35.367552,11.3179931 38.2951583,14.4548388 L38.490332,14.6568542 L83.8333725,60 L38.490332,105.343146 C35.4326099,108.400868 35.367552,113.317993 38.2951583,116.454839 L38.490332,116.656854 C41.5480541,119.714576 46.4651794,119.779634 49.602025,116.852028 L49.8040405,116.656854 L100.804041,65.6568542 C103.861763,62.5991321 103.926821,57.6820069 100.999214,54.5451612 L100.804041,54.3431458 L49.8040405,3.34314575 Z", fill: "currentColor" })));
+    return (React__default.createElement("svg", __assign({ width: "16px", height: "16px", viewBox: "0 0 120 120" }, props),
+        React__default.createElement("path", { d: "M49.8040405,3.34314575 C46.6798462,0.218951416 41.6145263,0.218951416 38.490332,3.34314575 C35.4326099,6.40086786 35.367552,11.3179931 38.2951583,14.4548388 L38.490332,14.6568542 L83.8333725,60 L38.490332,105.343146 C35.4326099,108.400868 35.367552,113.317993 38.2951583,116.454839 L38.490332,116.656854 C41.5480541,119.714576 46.4651794,119.779634 49.602025,116.852028 L49.8040405,116.656854 L100.804041,65.6568542 C103.861763,62.5991321 103.926821,57.6820069 100.999214,54.5451612 L100.804041,54.3431458 L49.8040405,3.34314575 Z", fill: "currentColor" })));
 }
 
 /** Render a button HTML element applying the reset class name. */
@@ -7650,7 +7652,7 @@ var Button = forwardRef(function (props, ref) {
     if (props.style) {
         Object.assign(style, props.style);
     }
-    return (React__default__default.createElement("button", __assign({}, props, { ref: ref, type: "button", className: className, style: style })));
+    return (React__default.createElement("button", __assign({}, props, { ref: ref, type: "button", className: className, style: style })));
 });
 
 /** A component rendering the navigation buttons or the drop-downs. */
@@ -7658,7 +7660,7 @@ function Navigation(props) {
     var _a, _b;
     var _c = useDayPicker(), dir = _c.dir, locale = _c.locale, classNames = _c.classNames, styles = _c.styles, _d = _c.labels, labelPrevious = _d.labelPrevious, labelNext = _d.labelNext, components = _c.components;
     if (!props.nextMonth && !props.previousMonth) {
-        return React__default__default.createElement(React__default__default.Fragment, null);
+        return React__default.createElement(React__default.Fragment, null);
     }
     var previousLabel = labelPrevious(props.previousMonth, { locale: locale });
     var previousClassName = [
@@ -7672,9 +7674,9 @@ function Navigation(props) {
     ].join(' ');
     var IconRightComponent = (_a = components === null || components === void 0 ? void 0 : components.IconRight) !== null && _a !== void 0 ? _a : IconRight;
     var IconLeftComponent = (_b = components === null || components === void 0 ? void 0 : components.IconLeft) !== null && _b !== void 0 ? _b : IconLeft;
-    return (React__default__default.createElement("div", { className: classNames.nav, style: styles.nav },
-        !props.hidePrevious && (React__default__default.createElement(Button, { name: "previous-month", "aria-label": previousLabel, className: previousClassName, style: styles.nav_button_previous, disabled: !props.previousMonth, onClick: props.onPreviousClick }, dir === 'rtl' ? (React__default__default.createElement(IconRightComponent, { className: classNames.nav_icon, style: styles.nav_icon })) : (React__default__default.createElement(IconLeftComponent, { className: classNames.nav_icon, style: styles.nav_icon })))),
-        !props.hideNext && (React__default__default.createElement(Button, { name: "next-month", "aria-label": nextLabel, className: nextClassName, style: styles.nav_button_next, disabled: !props.nextMonth, onClick: props.onNextClick }, dir === 'rtl' ? (React__default__default.createElement(IconLeftComponent, { className: classNames.nav_icon, style: styles.nav_icon })) : (React__default__default.createElement(IconRightComponent, { className: classNames.nav_icon, style: styles.nav_icon }))))));
+    return (React__default.createElement("div", { className: classNames.nav, style: styles.nav },
+        !props.hidePrevious && (React__default.createElement(Button, { name: "previous-month", "aria-label": previousLabel, className: previousClassName, style: styles.nav_button_previous, disabled: !props.previousMonth, onClick: props.onPreviousClick }, dir === 'rtl' ? (React__default.createElement(IconRightComponent, { className: classNames.nav_icon, style: styles.nav_icon })) : (React__default.createElement(IconLeftComponent, { className: classNames.nav_icon, style: styles.nav_icon })))),
+        !props.hideNext && (React__default.createElement(Button, { name: "next-month", "aria-label": nextLabel, className: nextClassName, style: styles.nav_button_next, disabled: !props.nextMonth, onClick: props.onNextClick }, dir === 'rtl' ? (React__default.createElement(IconLeftComponent, { className: classNames.nav_icon, style: styles.nav_icon })) : (React__default.createElement(IconRightComponent, { className: classNames.nav_icon, style: styles.nav_icon }))))));
 }
 
 /**
@@ -7700,7 +7702,7 @@ function CaptionNavigation(props) {
             return;
         goToMonth(nextMonth);
     };
-    return (React__default__default.createElement(Navigation, { displayMonth: props.displayMonth, hideNext: hideNext, hidePrevious: hidePrevious, nextMonth: nextMonth, previousMonth: previousMonth, onPreviousClick: handlePreviousClick, onNextClick: handleNextClick }));
+    return (React__default.createElement(Navigation, { displayMonth: props.displayMonth, hideNext: hideNext, hidePrevious: hidePrevious, nextMonth: nextMonth, previousMonth: previousMonth, onPreviousClick: handlePreviousClick, onNextClick: handleNextClick }));
 }
 
 /**
@@ -7713,22 +7715,22 @@ function Caption(props) {
     var CaptionLabelComponent = (_a = components === null || components === void 0 ? void 0 : components.CaptionLabel) !== null && _a !== void 0 ? _a : CaptionLabel;
     var caption;
     if (disableNavigation) {
-        caption = (React__default__default.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }));
+        caption = (React__default.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }));
     }
     else if (captionLayout === 'dropdown') {
-        caption = (React__default__default.createElement(CaptionDropdowns, { displayMonth: props.displayMonth, id: props.id }));
+        caption = (React__default.createElement(CaptionDropdowns, { displayMonth: props.displayMonth, id: props.id }));
     }
     else if (captionLayout === 'dropdown-buttons') {
-        caption = (React__default__default.createElement(React__default__default.Fragment, null,
-            React__default__default.createElement(CaptionDropdowns, { displayMonth: props.displayMonth, id: props.id }),
-            React__default__default.createElement(CaptionNavigation, { displayMonth: props.displayMonth, id: props.id })));
+        caption = (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(CaptionDropdowns, { displayMonth: props.displayMonth, id: props.id }),
+            React__default.createElement(CaptionNavigation, { displayMonth: props.displayMonth, id: props.id })));
     }
     else {
-        caption = (React__default__default.createElement(React__default__default.Fragment, null,
-            React__default__default.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }),
-            React__default__default.createElement(CaptionNavigation, { displayMonth: props.displayMonth, id: props.id })));
+        caption = (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }),
+            React__default.createElement(CaptionNavigation, { displayMonth: props.displayMonth, id: props.id })));
     }
-    return (React__default__default.createElement("div", { className: classNames.caption, style: styles.caption }, caption));
+    return (React__default.createElement("div", { className: classNames.caption, style: styles.caption }, caption));
 }
 
 /** Render the Footer component (empty as default).*/
@@ -7736,10 +7738,10 @@ function Caption(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);
-    return (React__default__default.createElement("tfoot", { className: tfoot, style: styles.tfoot },
-        React__default__default.createElement("tr", null,
-            React__default__default.createElement("td", { colSpan: 8 }, footer))));
+        return React__default.createElement(React__default.Fragment, null);
+    return (React__default.createElement("tfoot", { className: tfoot, style: styles.tfoot },
+        React__default.createElement("tr", null,
+            React__default.createElement("td", { colSpan: 8 }, footer))));
 }
 
 /**
@@ -7768,9 +7770,9 @@ ISOWeek) {
 function HeadRow() {
     var _a = useDayPicker(), classNames = _a.classNames, styles = _a.styles, showWeekNumber = _a.showWeekNumber, locale = _a.locale, weekStartsOn = _a.weekStartsOn, ISOWeek = _a.ISOWeek, formatWeekdayName = _a.formatters.formatWeekdayName, labelWeekday = _a.labels.labelWeekday;
     var weekdays = getWeekdays(locale, weekStartsOn, ISOWeek);
-    return (React__default__default.createElement("tr", { style: styles.head_row, className: classNames.head_row },
-        showWeekNumber && (React__default__default.createElement("td", { style: styles.head_cell, className: classNames.head_cell })),
-        weekdays.map(function (weekday, i) { return (React__default__default.createElement("th", { key: i, scope: "col", className: classNames.head_cell, style: styles.head_cell, "aria-label": labelWeekday(weekday, { locale: locale }) }, formatWeekdayName(weekday, { locale: locale }))); })));
+    return (React__default.createElement("tr", { style: styles.head_row, className: classNames.head_row },
+        showWeekNumber && (React__default.createElement("td", { style: styles.head_cell, className: classNames.head_cell })),
+        weekdays.map(function (weekday, i) { return (React__default.createElement("th", { key: i, scope: "col", className: classNames.head_cell, style: styles.head_cell, "aria-label": labelWeekday(weekday, { locale: locale }) }, formatWeekdayName(weekday, { locale: locale }))); })));
 }
 
 /** Render the table head. */
@@ -7778,14 +7780,14 @@ function Head() {
     var _a;
     var _b = useDayPicker(), classNames = _b.classNames, styles = _b.styles, components = _b.components;
     var HeadRowComponent = (_a = components === null || components === void 0 ? void 0 : components.HeadRow) !== null && _a !== void 0 ? _a : HeadRow;
-    return (React__default__default.createElement("thead", { style: styles.head, className: classNames.head },
-        React__default__default.createElement(HeadRowComponent, null)));
+    return (React__default.createElement("thead", { style: styles.head, className: classNames.head },
+        React__default.createElement(HeadRowComponent, null)));
 }
 
 /** Render the content of the day cell. */
 function DayContent(props) {
     var _a = useDayPicker(), locale = _a.locale, formatDay = _a.formatters.formatDay;
-    return React__default__default.createElement(React__default__default.Fragment, null, formatDay(props.date, { locale: locale }));
+    return React__default.createElement(React__default.Fragment, null, formatDay(props.date, { locale: locale }));
 }
 
 /**
@@ -7804,9 +7806,9 @@ function SelectMultipleProvider(props) {
                 disabled: []
             }
         };
-        return (React__default__default.createElement(SelectMultipleContext.Provider, { value: emptyContextValue }, props.children));
+        return (React__default.createElement(SelectMultipleContext.Provider, { value: emptyContextValue }, props.children));
     }
-    return (React__default__default.createElement(SelectMultipleProviderInternal, { initialProps: props.initialProps, children: props.children }));
+    return (React__default.createElement(SelectMultipleProviderInternal, { initialProps: props.initialProps, children: props.children }));
 }
 function SelectMultipleProviderInternal(_a) {
     var initialProps = _a.initialProps, children = _a.children;
@@ -7851,7 +7853,7 @@ function SelectMultipleProviderInternal(_a) {
         onDayClick: onDayClick,
         modifiers: modifiers
     };
-    return (React__default__default.createElement(SelectMultipleContext.Provider, { value: contextValue }, children));
+    return (React__default.createElement(SelectMultipleContext.Provider, { value: contextValue }, children));
 }
 /**
  * Hook to access the {@link SelectMultipleContextValue}.
@@ -7920,9 +7922,9 @@ function SelectRangeProvider(props) {
                 disabled: []
             }
         };
-        return (React__default__default.createElement(SelectRangeContext.Provider, { value: emptyContextValue }, props.children));
+        return (React__default.createElement(SelectRangeContext.Provider, { value: emptyContextValue }, props.children));
     }
-    return (React__default__default.createElement(SelectRangeProviderInternal, { initialProps: props.initialProps, children: props.children }));
+    return (React__default.createElement(SelectRangeProviderInternal, { initialProps: props.initialProps, children: props.children }));
 }
 function SelectRangeProviderInternal(_a) {
     var initialProps = _a.initialProps, children = _a.children;
@@ -7993,7 +7995,7 @@ function SelectRangeProviderInternal(_a) {
             });
         }
     }
-    return (React__default__default.createElement(SelectRangeContext.Provider, { value: { selected: selected, onDayClick: onDayClick, modifiers: modifiers } }, children));
+    return (React__default.createElement(SelectRangeContext.Provider, { value: { selected: selected, onDayClick: onDayClick, modifiers: modifiers } }, children));
 }
 /**
  * Hook to access the {@link SelectRangeContextValue}.
@@ -8093,7 +8095,7 @@ function ModifiersProvider(props) {
     var internalModifiers = getInternalModifiers(dayPicker, selectMultiple, selectRange);
     var customModifiers = getCustomModifiers(dayPicker.modifiers);
     var modifiers = __assign(__assign({}, internalModifiers), customModifiers);
-    return (React__default__default.createElement(ModifiersContext.Provider, { value: modifiers }, props.children));
+    return (React__default.createElement(ModifiersContext.Provider, { value: modifiers }, props.children));
 }
 /**
  * Return the modifiers used by DayPicker.
@@ -8391,7 +8393,7 @@ function FocusProvider(props) {
         focusStartOfWeek: function () { return moveFocus('startOfWeek', 'before'); },
         focusEndOfWeek: function () { return moveFocus('endOfWeek', 'after'); }
     };
-    return (React__default__default.createElement(FocusContext.Provider, { value: value }, props.children));
+    return (React__default.createElement(FocusContext.Provider, { value: value }, props.children));
 }
 /**
  * Hook to access the {@link FocusContextValue}. Use this hook to handle the
@@ -8439,9 +8441,9 @@ function SelectSingleProvider(props) {
         var emptyContextValue = {
             selected: undefined
         };
-        return (React__default__default.createElement(SelectSingleContext.Provider, { value: emptyContextValue }, props.children));
+        return (React__default.createElement(SelectSingleContext.Provider, { value: emptyContextValue }, props.children));
     }
-    return (React__default__default.createElement(SelectSingleProviderInternal, { initialProps: props.initialProps, children: props.children }));
+    return (React__default.createElement(SelectSingleProviderInternal, { initialProps: props.initialProps, children: props.children }));
 }
 function SelectSingleProviderInternal(_a) {
     var initialProps = _a.initialProps, children = _a.children;
@@ -8458,7 +8460,7 @@ function SelectSingleProviderInternal(_a) {
         selected: initialProps.selected,
         onDayClick: onDayClick
     };
-    return (React__default__default.createElement(SelectSingleContext.Provider, { value: contextValue }, children));
+    return (React__default.createElement(SelectSingleContext.Provider, { value: contextValue }, children));
 }
 /**
  * Hook to access the {@link SelectSingleContextValue}.
@@ -8728,7 +8730,7 @@ buttonRef) {
     var isHidden = Boolean((activeModifiers.outside && !dayPicker.showOutsideDays) ||
         activeModifiers.hidden);
     var DayContentComponent = (_c = (_b = dayPicker.components) === null || _b === void 0 ? void 0 : _b.DayContent) !== null && _c !== void 0 ? _c : DayContent;
-    var children = (React__default__default.createElement(DayContentComponent, { date: day, displayMonth: displayMonth, activeModifiers: activeModifiers }));
+    var children = (React__default.createElement(DayContentComponent, { date: day, displayMonth: displayMonth, activeModifiers: activeModifiers }));
     var divProps = {
         style: style,
         className: className,
@@ -8759,12 +8761,12 @@ function Day(props) {
     var buttonRef = useRef(null);
     var dayRender = useDayRender(props.date, props.displayMonth, buttonRef);
     if (dayRender.isHidden) {
-        return React__default__default.createElement("div", { role: "gridcell" });
+        return React__default.createElement("div", { role: "gridcell" });
     }
     if (!dayRender.isButton) {
-        return React__default__default.createElement("div", __assign({}, dayRender.divProps));
+        return React__default.createElement("div", __assign({}, dayRender.divProps));
     }
-    return React__default__default.createElement(Button, __assign({ name: "day", ref: buttonRef }, dayRender.buttonProps));
+    return React__default.createElement(Button, __assign({ name: "day", ref: buttonRef }, dayRender.buttonProps));
 }
 
 /**
@@ -8776,13 +8778,13 @@ function WeekNumber(props) {
     var _a = useDayPicker(), onWeekNumberClick = _a.onWeekNumberClick, styles = _a.styles, classNames = _a.classNames, locale = _a.locale, labelWeekNumber = _a.labels.labelWeekNumber, formatWeekNumber = _a.formatters.formatWeekNumber;
     var content = formatWeekNumber(Number(weekNumber), { locale: locale });
     if (!onWeekNumberClick) {
-        return (React__default__default.createElement("span", { className: classNames.weeknumber, style: styles.weeknumber }, content));
+        return (React__default.createElement("span", { className: classNames.weeknumber, style: styles.weeknumber }, content));
     }
     var label = labelWeekNumber(Number(weekNumber), { locale: locale });
     var handleClick = function (e) {
         onWeekNumberClick(weekNumber, dates, e);
     };
-    return (React__default__default.createElement(Button, { name: "week-number", "aria-label": label, className: classNames.weeknumber, style: styles.weeknumber, onClick: handleClick }, content));
+    return (React__default.createElement(Button, { name: "week-number", "aria-label": label, className: classNames.weeknumber, style: styles.weeknumber, onClick: handleClick }, content));
 }
 
 /** Render a row in the calendar, with the days and the week number. */
@@ -8793,13 +8795,13 @@ function Row(props) {
     var WeeknumberComponent = (_b = components === null || components === void 0 ? void 0 : components.WeekNumber) !== null && _b !== void 0 ? _b : WeekNumber;
     var weekNumberCell;
     if (showWeekNumber) {
-        weekNumberCell = (React__default__default.createElement("td", { className: classNames.cell, style: styles.cell },
-            React__default__default.createElement(WeeknumberComponent, { number: props.weekNumber, dates: props.dates })));
+        weekNumberCell = (React__default.createElement("td", { className: classNames.cell, style: styles.cell },
+            React__default.createElement(WeeknumberComponent, { number: props.weekNumber, dates: props.dates })));
     }
-    return (React__default__default.createElement("tr", { className: classNames.row, style: styles.row },
+    return (React__default.createElement("tr", { className: classNames.row, style: styles.row },
         weekNumberCell,
-        props.dates.map(function (date) { return (React__default__default.createElement("td", { className: classNames.cell, style: styles.cell, key: getUnixTime(date), role: "presentation" },
-            React__default__default.createElement(DayComponent, { displayMonth: props.displayMonth, date: date }))); })));
+        props.dates.map(function (date) { return (React__default.createElement("td", { className: classNames.cell, style: styles.cell, key: getUnixTime(date), role: "presentation" },
+            React__default.createElement(DayComponent, { displayMonth: props.displayMonth, date: date }))); })));
 }
 
 /** Return the weeks between two dates.  */
@@ -8867,10 +8869,10 @@ 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$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, role: "rowgroup" }, weeks.map(function (week) { return (React__default__default.createElement(RowComponent, { displayMonth: props.displayMonth, key: week.weekNumber, dates: week.dates, weekNumber: week.weekNumber })); })),
-        React__default__default.createElement(FooterComponent, { displayMonth: props.displayMonth })));
+    return (React__default.createElement("table", { id: props.id, className: classNames.table, style: styles.table, role: "grid", "aria-labelledby": props['aria-labelledby'] },
+        !hideHead && React__default.createElement(HeadComponent, null),
+        React__default.createElement("tbody", { className: classNames.tbody, style: styles.tbody, role: "rowgroup" }, weeks.map(function (week) { return (React__default.createElement(RowComponent, { displayMonth: props.displayMonth, key: week.weekNumber, dates: week.dates, weekNumber: week.weekNumber })); })),
+        React__default.createElement(FooterComponent, { displayMonth: props.displayMonth })));
 }
 
 /*
@@ -8914,8 +8916,8 @@ function canUseDOM() {
  * @param deps
  */
 var useIsomorphicLayoutEffect = canUseDOM()
-    ? React__default.useLayoutEffect
-    : React__default.useEffect;
+    ? React.useLayoutEffect
+    : React.useEffect;
 var serverHandoffComplete = false;
 var id = 0;
 function genId() {
@@ -8928,7 +8930,7 @@ function useId(providedId) {
     // If this instance isn't part of the initial render, we don't have to do the
     // double render/patch-up dance. We can just generate the ID and return it.
     var initialId = providedId !== null && providedId !== void 0 ? providedId : (serverHandoffComplete ? genId() : null);
-    var _b = React__default.useState(initialId), id = _b[0], setId = _b[1];
+    var _b = React.useState(initialId), id = _b[0], setId = _b[1];
     useIsomorphicLayoutEffect(function () {
         if (id === null) {
             // Patch the ID after render. We do this in `useLayoutEffect` to avoid any
@@ -8939,7 +8941,7 @@ function useId(providedId) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    React__default.useEffect(function () {
+    React.useEffect(function () {
         if (serverHandoffComplete === false) {
             // Flag all future uses of `useId` to skip the update dance. This is in
             // `useEffect` because it goes after `useLayoutEffect`, ensuring we don't
@@ -8982,9 +8984,9 @@ function Month(props) {
         style = __assign(__assign({}, style), styles.caption_between);
     }
     var CaptionComponent = (_b = components === null || components === void 0 ? void 0 : components.Caption) !== null && _b !== void 0 ? _b : Caption;
-    return (React__default__default.createElement("div", { key: props.displayIndex, className: className.join(' '), style: style },
-        React__default__default.createElement(CaptionComponent, { id: captionId, displayMonth: props.displayMonth }),
-        React__default__default.createElement(Table, { id: tableId, "aria-labelledby": captionId, displayMonth: props.displayMonth })));
+    return (React__default.createElement("div", { key: props.displayIndex, className: className.join(' '), style: style },
+        React__default.createElement(CaptionComponent, { id: captionId, displayMonth: props.displayMonth }),
+        React__default.createElement(Table, { id: tableId, "aria-labelledby": captionId, displayMonth: props.displayMonth })));
 }
 
 /** Render the container with the months according to the number of months to display. */
@@ -9026,20 +9028,20 @@ function Root(_a) {
         var _a;
         return __assign(__assign({}, attrs), (_a = {}, _a[key] = initialProps[key], _a));
     }, {});
-    return (React__default__default.createElement("div", __assign({ className: classNames.join(' '), style: style, dir: dayPicker.dir, id: dayPicker.id }, dataAttributes),
-        React__default__default.createElement("div", { className: dayPicker.classNames.months, style: dayPicker.styles.months }, navigation.displayMonths.map(function (month, i) { return (React__default__default.createElement(Month, { key: i, displayIndex: i, displayMonth: month })); }))));
+    return (React__default.createElement("div", __assign({ className: classNames.join(' '), style: style, dir: dayPicker.dir, id: dayPicker.id }, dataAttributes),
+        React__default.createElement("div", { className: dayPicker.classNames.months, style: dayPicker.styles.months }, navigation.displayMonths.map(function (month, i) { return (React__default.createElement(Month, { key: i, displayIndex: i, displayMonth: month })); }))));
 }
 
 /** Provide the value for all the context providers. */
 function RootProvider(props) {
     var children = props.children, initialProps = __rest(props, ["children"]);
-    return (React__default__default.createElement(DayPickerProvider, { initialProps: initialProps },
-        React__default__default.createElement(NavigationProvider, null,
-            React__default__default.createElement(SelectSingleProvider, { initialProps: initialProps },
-                React__default__default.createElement(SelectMultipleProvider, { initialProps: initialProps },
-                    React__default__default.createElement(SelectRangeProvider, { initialProps: initialProps },
-                        React__default__default.createElement(ModifiersProvider, null,
-                            React__default__default.createElement(FocusProvider, null, children))))))));
+    return (React__default.createElement(DayPickerProvider, { initialProps: initialProps },
+        React__default.createElement(NavigationProvider, null,
+            React__default.createElement(SelectSingleProvider, { initialProps: initialProps },
+                React__default.createElement(SelectMultipleProvider, { initialProps: initialProps },
+                    React__default.createElement(SelectRangeProvider, { initialProps: initialProps },
+                        React__default.createElement(ModifiersProvider, null,
+                            React__default.createElement(FocusProvider, null, children))))))));
 }
 
 /**
@@ -9130,8 +9132,8 @@ function RootProvider(props) {
  * ```
  */
 function DayPicker(props) {
-    return (React__default__default.createElement(RootProvider, __assign({}, props),
-        React__default__default.createElement(Root, { initialProps: props })));
+    return (React__default.createElement(RootProvider, __assign({}, props),
+        React__default.createElement(Root, { initialProps: props })));
 }
 
 var reactResponsive$1 = {exports: {}};
@@ -9145,7 +9147,7 @@ function requireReactResponsive () {
 	hasRequiredReactResponsive = 1;
 	(function (module, exports) {
 		(function webpackUniversalModuleDefinition(root, factory) {
-			module.exports = factory(React__default__default);
+			module.exports = factory(React__default);
 		})(reactResponsive, (__WEBPACK_EXTERNAL_MODULE_react__) => {
 		return /******/ (() => { // webpackBootstrap
 		/******/ 	var __webpack_modules__ = ({
@@ -10974,15 +10976,19 @@ var IconsSvg = function (_a) {
     var fill = _a.fill, size = _a.size, icon = _a.icon;
     switch (icon) {
         case 'spinner':
-            return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "".concat(size || 25), height: "".concat(size || 25), viewBox: "0 0 24 24", children: [jsx("style", { children: "\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      " }), jsx("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 }), jsx("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 })] }));
+            return (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "".concat(size || 25), height: "".concat(size || 25), viewBox: "0 0 24 24" },
+                React__default.createElement("style", null, "\n      .spinner_z9k8 {\n      transform-origin: center;\n      animation: spinner_StKS .75s infinite linear;\n      }\n      @keyframes spinner_StKS {\n      100% {\n      transform: rotate(360deg);\n      }\n      }\n      "),
+                React__default.createElement("path", { d: "M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z", opacity: ".25", fill: fill }),
+                React__default.createElement("path", { d: "M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z", className: "spinner_z9k8", fill: fill })));
         case 'warning':
-            return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "".concat(size || 25), height: "".concat(size || 25), className: "svg-icon", style: {
+            return (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "".concat(size || 25), height: "".concat(size || 25), className: "svg-icon", style: {
                     verticalAlign: 'middle',
                     fill: fill,
                     overflow: 'hidden',
                     minWidth: '25px',
                     minHeight: '25px',
-                }, viewBox: "0 0 1024 1024", version: "1.1", children: jsx("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" }) }));
+                }, viewBox: "0 0 1024 1024", version: "1.1" },
+                React__default.createElement("path", { d: "M42.666667 896h938.666666L512 85.333333 42.666667 896z m512-128h-85.333334v-85.333333h85.333334v85.333333z m0-170.666667h-85.333334v-170.666666h85.333334v170.666666z" })));
         default:
             return null;
     }
@@ -11564,39 +11570,53 @@ var Calendar = forwardRef(function (_a, ref) {
         : __spreadArray$1(__spreadArray$1(__spreadArray$1(__spreadArray$1([
             lastPossibleCheckout
         ], __read(base), false), __read(firstPossibleRangeContextCheckIn), false), __read(lastPossibleRangeContextCheckOut), false), __read(disabledInsideSelectableRange()), false);
-    return (jsx("div", { className: "will-filter-bar-calendar", ref: ref, children: jsxs("div", { className: "will-calendar-filter-container", ref: calendarContainerRef, children: [jsx(DayPicker, { 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: disabled, fromMonth: today, onMonthChange: function (val) {
-                        requestDates === null || requestDates === void 0 ? void 0 : requestDates(val);
-                        setUpdateCalendarMonthNavigation === null || setUpdateCalendarMonthNavigation === void 0 ? void 0 : setUpdateCalendarMonthNavigation(function (prev) { return !prev; });
-                    }, classNames: {
-                        day_range_start: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) ? 'rdp-day_range_start' : '',
-                        day_range_end: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) ? 'rdp-day_range_end' : '',
-                    }, modifiersClassNames: {
-                        today: 'my-today',
-                        booked: 'booked',
-                        disabledAfterCheckIn: 'disabled-after-check-in',
-                        overlappingDate: 'overlapping-date',
-                        noActiveSelectionStart: 'no-active-selection-start',
-                        noActiveSelectionMid: 'no-active-selection-mid',
-                        noActiveSelectionEnd: 'no-active-selection-end',
-                        checkoutOptionsMid: 'rdp-day_selected rdp-day_range_middle checkout-option',
-                        checkInOnly: 'check-in-only',
-                        checkOutOnly: 'check-out-only',
-                    }, modifiers: 
-                    // This function handles conditions for applying the modifiersClassNames
-                    handleCalendarModifiers({
-                        calendarRange: calendarRange,
-                        disabledDates: disabled,
-                        overlappingDate: overlappingDate,
-                        rangeContext: rangeContext,
-                        findFirstPossibleRangeContextCheckIn: findFirstPossibleRangeContextCheckIn,
-                        findLastPossibleRangeContextCheckOut: findLastPossibleRangeContextCheckOut,
-                        currentSelectionLastCheckoutDate: currentSelectionAvailability,
-                    }) }, updateCalendarDefaultMonth), jsx("div", { className: 'will-calendar-tooltip', children: jsx("div", { children: t('noCheckIn') }) }), jsx("div", { className: 'will-calendar-tooltip-check-out', children: jsx("div", { children: t('noCheckOut') }) }), jsx("div", { className: 'will-calendar-tooltip-overlapping-date', children: jsx("div", { children: t('checkOutOnly') }) }), jsx("div", { className: 'will-calendar-tooltip-check-in-only', children: jsx("div", { children: t('checkInOnly') }) }), jsx("div", { className: 'will-calendar-tooltip-check-out-only', children: jsx("div", { children: t('checkOutOnly') }) }), jsx("div", { className: 'will-calendar-spinner', children: jsx(IconsSvg, { fill: (palette === null || palette === void 0 ? void 0 : palette.primary) || 'inherit', size: 50, icon: "spinner" }) })] }) }));
+    return (React__default.createElement("div", { className: "will-filter-bar-calendar", ref: ref },
+        React__default.createElement("div", { className: "will-calendar-filter-container", ref: calendarContainerRef },
+            React__default.createElement(DayPicker, { key: updateCalendarDefaultMonth, id: "will-calendar", mode: "range", locale: language === 'en' ? enUS : fi, numberOfMonths: !isTablet ? 2 : 1, weekStartsOn: 1, selected: calendarRange, onSelect: function (range) { return handleOnSelect(range); }, captionLayout: "dropdown-buttons", defaultMonth: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) ||
+                    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: disabled, fromMonth: today, onMonthChange: function (val) {
+                    requestDates === null || requestDates === void 0 ? void 0 : requestDates(val);
+                    setUpdateCalendarMonthNavigation === null || setUpdateCalendarMonthNavigation === void 0 ? void 0 : setUpdateCalendarMonthNavigation(function (prev) { return !prev; });
+                }, classNames: {
+                    day_range_start: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) ? 'rdp-day_range_start' : '',
+                    day_range_end: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) ? 'rdp-day_range_end' : '',
+                }, modifiersClassNames: {
+                    today: 'my-today',
+                    booked: 'booked',
+                    disabledAfterCheckIn: 'disabled-after-check-in',
+                    overlappingDate: 'overlapping-date',
+                    noActiveSelectionStart: 'no-active-selection-start',
+                    noActiveSelectionMid: 'no-active-selection-mid',
+                    noActiveSelectionEnd: 'no-active-selection-end',
+                    checkoutOptionsMid: 'rdp-day_selected rdp-day_range_middle checkout-option',
+                    checkInOnly: 'check-in-only',
+                    checkOutOnly: 'check-out-only',
+                }, modifiers: 
+                // This function handles conditions for applying the modifiersClassNames
+                handleCalendarModifiers({
+                    calendarRange: calendarRange,
+                    disabledDates: disabled,
+                    overlappingDate: overlappingDate,
+                    rangeContext: rangeContext,
+                    findFirstPossibleRangeContextCheckIn: findFirstPossibleRangeContextCheckIn,
+                    findLastPossibleRangeContextCheckOut: findLastPossibleRangeContextCheckOut,
+                    currentSelectionLastCheckoutDate: currentSelectionAvailability,
+                }) }),
+            React__default.createElement("div", { className: 'will-calendar-tooltip' },
+                React__default.createElement("div", null, t('noCheckIn'))),
+            React__default.createElement("div", { className: 'will-calendar-tooltip-check-out' },
+                React__default.createElement("div", null, t('noCheckOut'))),
+            React__default.createElement("div", { className: 'will-calendar-tooltip-overlapping-date' },
+                React__default.createElement("div", null, t('checkOutOnly'))),
+            React__default.createElement("div", { className: 'will-calendar-tooltip-check-in-only' },
+                React__default.createElement("div", null, t('checkInOnly'))),
+            React__default.createElement("div", { className: 'will-calendar-tooltip-check-out-only' },
+                React__default.createElement("div", null, t('checkOutOnly'))),
+            React__default.createElement("div", { className: 'will-calendar-spinner' },
+                React__default.createElement(IconsSvg, { fill: (palette === null || palette === void 0 ? void 0 : palette.primary) || 'inherit', size: 50, icon: "spinner" })))));
 });
 
 var parseGuests = function (_a) {
@@ -11656,8 +11676,6 @@ var Pages;
 
 var calculateDropdownPosition = function (_a) {
     var filterSection = _a.filterSection, headerRef = _a.headerRef, locationsButtonRef = _a.locationsButtonRef, datesButtonRef = _a.datesButtonRef, guestsButtonRef = _a.guestsButtonRef, isMobile = _a.isMobile;
-    // On mobile, don't apply any positioning - let CSS handle it naturally
-    // Dropdowns will start from leftmost point with position: relative
     if (isMobile) {
         return {};
     }
@@ -11667,7 +11685,6 @@ var calculateDropdownPosition = function (_a) {
     var containerLeft = 0;
     switch (filterSection) {
         case FilterSections.LOCATIONS:
-            // Locations: Start from beginning, hug content
             if (locationsButtonRef.current) {
                 var buttonRect = locationsButtonRef.current.getBoundingClientRect();
                 var relativeLeft = buttonRect.left - containerRect.left;
@@ -11679,15 +11696,12 @@ var calculateDropdownPosition = function (_a) {
             }
             break;
         case FilterSections.CALENDAR:
-            // Calendar: Two months side-by-side, needs ~650-700px
-            // Start from dates button, but push left if not enough space
             if (datesButtonRef.current) {
                 var buttonRect = datesButtonRef.current.getBoundingClientRect();
                 var relativeLeft = buttonRect.left - containerRect.left;
                 var availableWidth = containerRect.width - relativeLeft;
                 var calendarMinWidth = 650;
                 if (availableWidth < calendarMinWidth) {
-                    // Not enough space, align to the right edge
                     return {
                         left: 'auto',
                         right: containerLeft,
@@ -11696,7 +11710,6 @@ var calculateDropdownPosition = function (_a) {
                     };
                 }
                 else {
-                    // Enough space, start from dates button
                     return {
                         left: relativeLeft,
                         right: 'auto',
@@ -11706,14 +11719,12 @@ var calculateDropdownPosition = function (_a) {
             }
             break;
         case FilterSections.GUESTS:
-            // Guests: Start from guests button, push left if not enough space
             if (guestsButtonRef.current) {
                 var buttonRect = guestsButtonRef.current.getBoundingClientRect();
                 var relativeLeft = buttonRect.left - containerRect.left;
                 var availableWidth = containerRect.width - relativeLeft;
                 var dropdownMinWidth = 350;
                 if (availableWidth < dropdownMinWidth) {
-                    // Not enough space, align to the right
                     return {
                         left: 'auto',
                         right: containerLeft,
@@ -11722,7 +11733,6 @@ var calculateDropdownPosition = function (_a) {
                     };
                 }
                 else {
-                    // Enough space, start from button
                     return {
                         left: relativeLeft,
                         right: 'auto',
@@ -11928,7 +11938,11 @@ styleInject(css_248z$b);
 
 var SelectButton = forwardRef(function (_a, ref) {
     var active = _a.active, label = _a.label, onClick = _a.onClick, description = _a.description, disabled = _a.disabled, ariaExpanded = _a.ariaExpanded, ariaControls = _a.ariaControls;
-    return (jsx("button", { ref: ref, className: "will-filter-bar-select-button ".concat(disabled ? 'disabled' : ''), onClick: disabled ? undefined : onClick, disabled: disabled, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, "aria-haspopup": "true", "aria-disabled": disabled, children: jsx("span", { className: "select-button-wrapper", children: jsxs("div", { children: [jsx("p", { className: "select-button-label", children: label }), jsx("p", { className: "select-button-description ".concat(active ? 'active' : ''), dangerouslySetInnerHTML: { __html: description } })] }) }) }));
+    return (React__default.createElement("button", { ref: ref, className: "will-filter-bar-select-button ".concat(disabled ? 'disabled' : ''), onClick: disabled ? undefined : onClick, disabled: disabled, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, "aria-haspopup": "true", "aria-disabled": disabled },
+        React__default.createElement("span", { className: "select-button-wrapper" },
+            React__default.createElement("div", null,
+                React__default.createElement("p", { className: "select-button-label" }, label),
+                React__default.createElement("p", { className: "select-button-description ".concat(active ? 'active' : ''), dangerouslySetInnerHTML: { __html: description } })))));
 });
 SelectButton.displayName = 'SelectButton';
 
@@ -11937,7 +11951,7 @@ styleInject(css_248z$a);
 
 var TabButton = function (_a) {
     var onClick = _a.onClick, label = _a.label, active = _a.active, mode = _a.mode;
-    return (jsx("button", { className: "will-filter-bar-tab-button ".concat(mode || 'light', " ").concat(active && 'active', " "), onClick: onClick, children: label }));
+    return (React__default.createElement("button", { className: "will-filter-bar-tab-button ".concat(mode || 'light', " ").concat(active && 'active', " "), onClick: onClick }, label));
 };
 
 var css_248z$9 = ".will-guests-filter-label,\n.will-guests-filter-count {\n  font-size: 18px;\n  color: var(--will-text);\n}\n\n.will-guests-filter-inner {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.will-guests-filter-label {\n  display: block;\n  font-weight: 600;\n  margin-bottom: 10px;\n}\n\n.will-guests-filter-inner .will-guests-filter-counter {\n  display: flex;\n  align-items: center;\n}\n\n.will-guests-filter-count {\n  margin: 0 10px;\n  min-width: 30px;\n  text-align: center;\n}\n\n.will-guests-filter-counter-button {\n  border-radius: 50%;\n  background-color: transparent;\n  border: 1px solid var(--will-grey);\n  width: 30px;\n  height: 30px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 20px;\n  cursor: pointer;\n  color: var(--will-black);\n\n  padding: 0;\n  margin: 0;\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n.will-guests-filter-counter-button:hover {\n  background-color: var(--will-onahau);\n}\n\n@media (max-width: 960px) {\n  .will-guests-filter-inner {\n    width: 100%;\n    margin: 15px 0;\n    justify-content: space-between;\n  }\n}\n";
@@ -11958,11 +11972,20 @@ var GuestCount = function (_a) {
     var handleIncrement = function () {
         updateGuestsCount("guests-".concat(id), count + 1);
     };
-    return (jsxs("div", { className: "will-guests-filter-inner", style: { order: "".concat(sortOrder) }, children: [jsx("p", { className: "will-guests-filter-label", children: label }), jsxs("div", { className: "will-guests-filter-counter", children: [jsx("button", { className: "will-guests-filter-counter-button", onClick: handleDecrement, disabled: (minVal && count <= minVal) || !count, style: {
-                            cursor: (minVal && count <= minVal) || !count ? 'initial' : 'pointer',
-                            paddingBottom: '4px',
-                            opacity: (minVal && count <= minVal) || !count ? 0.4 : 1,
-                        }, children: jsx("svg", { width: "10", height: "10", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M4 10H16", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) }), jsx("span", { className: "will-guests-filter-count", children: count }), jsx("button", { className: "will-guests-filter-counter-button", onClick: handleIncrement, children: jsx("svg", { width: "15", height: "15", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M10 4V16M4 10H16", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) })] })] }));
+    return (React__default.createElement("div", { className: "will-guests-filter-inner", style: { order: "".concat(sortOrder) } },
+        React__default.createElement("p", { className: "will-guests-filter-label" }, label),
+        React__default.createElement("div", { className: "will-guests-filter-counter" },
+            React__default.createElement("button", { className: "will-guests-filter-counter-button", onClick: handleDecrement, disabled: (minVal && count <= minVal) || !count, style: {
+                    cursor: (minVal && count <= minVal) || !count ? 'initial' : 'pointer',
+                    paddingBottom: '4px',
+                    opacity: (minVal && count <= minVal) || !count ? 0.4 : 1,
+                } },
+                React__default.createElement("svg", { width: "10", height: "10", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                    React__default.createElement("path", { d: "M4 10H16", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }))),
+            React__default.createElement("span", { className: "will-guests-filter-count" }, count),
+            React__default.createElement("button", { className: "will-guests-filter-counter-button", onClick: handleIncrement },
+                React__default.createElement("svg", { width: "15", height: "15", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                    React__default.createElement("path", { d: "M10 4V16M4 10H16", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }))))));
 };
 
 var css_248z$8 = ".will-filter-section-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px;\n}\n\n.will-filter-section-title {\n  font-size: 22px;\n  margin: 0;\n}\n\n.will-filter-section-action {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.will-filter-section-action .will-filter-bar-close-button {\n  position: relative;\n  top: auto;\n  right: auto;\n  margin: 0;\n}\n\n@media (max-width: 960px) {\n  .will-filter-section-title {\n    font-size: 18px;\n  }\n}\n";
@@ -11970,7 +11993,9 @@ styleInject(css_248z$8);
 
 var FilterSectionHeader = function (_a) {
     var title = _a.title, action = _a.action;
-    return (jsxs("div", { className: "will-filter-section-header", children: [jsx("h3", { className: "will-filter-section-title", children: title }), action && jsx("div", { className: "will-filter-section-action", children: action })] }));
+    return (React__default.createElement("div", { className: "will-filter-section-header" },
+        React__default.createElement("h3", { className: "will-filter-section-title" }, title),
+        action && React__default.createElement("div", { className: "will-filter-section-action" }, action)));
 };
 
 var css_248z$7 = ".will-filter-bar-guests {\n  text-align: initial;\n}\n\n.will-guests-filter-container {\n  display: flex;\n  flex-direction: column;\n  min-width: 400px;\n  gap: 20px;\n  padding: 16px;\n}\n\n@media (max-width: 960px) {\n  .will-guests-filter-container {\n    margin-top: 15px;\n    min-width: 100%;\n  }\n}\n";
@@ -11980,7 +12005,9 @@ var Guests = forwardRef(function (_a, ref) {
     var ageCategories = _a.ageCategories, updateGuestsCount = _a.updateGuestsCount, ageCategoryCounts = _a.ageCategoryCounts, autoFocus = _a.autoFocus, onClose = _a.onClose;
     var t = useTranslation('filterBar').t;
     var containerRef = useAutoFocus(autoFocus);
-    return (jsxs("div", { className: "will-filter-bar-guests", ref: ref, children: [jsx(FilterSectionHeader, { title: t('guests.title'), action: onClose && jsx(CloseButton, { handleClose: onClose }) }), jsx("div", { className: "will-guests-filter-container", ref: containerRef, children: ageCategories === null || ageCategories === void 0 ? void 0 : ageCategories.map(function (category) { return (jsx(GuestCount, { id: category.id, label: category.name, minVal: category.minVal, sortOrder: category.sortOrder, updateGuestsCount: updateGuestsCount, count: ageCategoryCounts["guests-".concat(category.id)] || 0 }, category.id)); }) })] }));
+    return (React__default.createElement("div", { className: "will-filter-bar-guests", ref: ref },
+        React__default.createElement(FilterSectionHeader, { title: t('guests.title'), action: onClose && React__default.createElement(CloseButton, { handleClose: onClose }) }),
+        React__default.createElement("div", { className: "will-guests-filter-container", ref: containerRef }, ageCategories === null || ageCategories === void 0 ? void 0 : ageCategories.map(function (category) { return (React__default.createElement(GuestCount, { key: category.id, id: category.id, label: category.name, minVal: category.minVal, sortOrder: category.sortOrder, updateGuestsCount: updateGuestsCount, count: ageCategoryCounts["guests-".concat(category.id)] || 0 })); }))));
 });
 Guests.displayName = 'Guests';
 
@@ -11988,7 +12015,7 @@ var css_248z$6 = ".will-filter-bar-divider {\n  width: 1px;\n  margin: 0 10px;\n
 styleInject(css_248z$6);
 
 var Divider = function () {
-    return jsx("div", { className: "will-filter-bar-divider" });
+    return React__default.createElement("div", { className: "will-filter-bar-divider" });
 };
 
 var css_248z$5 = ".will-filter-bar-categories {\n  text-align: center;\n}\n\n.will-categories-filter-title {\n  font-size: 16px;\n  text-transform: uppercase;\n  margin: 10px 0 30px 0;\n}\n\n.will-categories-filter-inner {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 20px;\n}\n\n.will-categories-filter-inner input {\n  cursor: pointer;\n  margin-right: 10px;\n}\n";
@@ -12008,7 +12035,11 @@ var Categories = function (_a) {
         setSelectedCategory(selectedCategory);
         setCategories(selectedCategory);
     };
-    return (jsxs("div", { className: "will-filter-bar-categories", children: [jsx("h3", { className: "will-categories-filter-title", children: t('categories.label') }), jsx("div", { className: "will-categories-filter-inner", children: categoriesPlaceholder.map(function (itm, idx) { return (jsxs("div", { children: [jsx("input", { type: "radio", value: itm, checked: selectedCategory === itm, onChange: function () { return handleCategoryChange(itm); } }), jsx("span", { children: itm })] }, idx)); }) })] }));
+    return (React__default.createElement("div", { className: "will-filter-bar-categories" },
+        React__default.createElement("h3", { className: "will-categories-filter-title" }, t('categories.label')),
+        React__default.createElement("div", { className: "will-categories-filter-inner" }, categoriesPlaceholder.map(function (itm, idx) { return (React__default.createElement("div", { key: idx },
+            React__default.createElement("input", { type: "radio", value: itm, checked: selectedCategory === itm, onChange: function () { return handleCategoryChange(itm); } }),
+            React__default.createElement("span", null, itm))); }))));
 };
 
 var css_248z$4 = ".will-filter-bar-locations {\n  text-align: initial;\n}\n\n.will-locations-filter-container {\n  display: flex;\n  gap: 10px;\n  flex-direction: column;\n  min-width: 400px;\n  padding: 16px 0;\n}\n\n@media (max-width: 960px) {\n  .will-locations-filter-container {\n    margin-top: 15px;\n    min-width: 100%;\n  }\n}\n";
@@ -12020,12 +12051,16 @@ styleInject(css_248z$3);
 var ImageCard = forwardRef(function (_a, ref) {
     var title = _a.title, description = _a.description, imageUrl = _a.imageUrl, isSelected = _a.isSelected, onClick = _a.onClick;
     var ariaLabel = "".concat(title).concat(description ? ", ".concat(description) : '');
-    return (jsxs("div", { ref: ref, className: "will-image-card ".concat(isSelected ? 'is-selected' : ''), onClick: onClick, onKeyDown: function (e) {
+    return (React__default.createElement("div", { ref: ref, className: "will-image-card ".concat(isSelected ? 'is-selected' : ''), onClick: onClick, onKeyDown: function (e) {
             if (e.key === 'Enter' || e.key === ' ') {
                 e.preventDefault();
                 onClick === null || onClick === void 0 ? void 0 : onClick();
             }
-        }, role: "button", tabIndex: 0, "aria-pressed": isSelected, "aria-label": ariaLabel, children: [jsxs("div", { className: "will-image-card-content", children: [jsx("h3", { children: title }), description && jsx("p", { children: description })] }), jsx("div", { className: "will-image-card-image", children: imageUrl && jsx("img", { src: imageUrl, alt: title || 'Location image' }) })] }));
+        }, role: "button", tabIndex: 0, "aria-pressed": isSelected, "aria-label": ariaLabel },
+        React__default.createElement("div", { className: "will-image-card-content" },
+            React__default.createElement("h3", null, title),
+            description && React__default.createElement("p", null, description)),
+        React__default.createElement("div", { className: "will-image-card-image" }, imageUrl && React__default.createElement("img", { src: imageUrl, alt: title || 'Location image' }))));
 });
 ImageCard.displayName = 'ImageCard';
 
@@ -12057,10 +12092,12 @@ var Locations = forwardRef(function (_a, ref) {
             onClose === null || onClose === void 0 ? void 0 : onClose();
         }
     };
-    return (jsxs("div", { className: "will-filter-bar-locations", ref: ref, children: [jsx(FilterSectionHeader, { title: t('locations.title'), action: onClose && jsx(CloseButton, { handleClose: onClose }) }), jsx("div", { className: "will-locations-filter-container", children: !!((locations === null || locations === void 0 ? void 0 : locations.length) && language) &&
-                    locations.map(function (location, index) {
-                        return (jsx(ImageCard, { ref: index === 0 ? firstCardRef : null, title: location.label, description: location.description, imageUrl: location.imageUrl, isSelected: selectedLocations.some(function (loc) { return loc.id === location.id; }), onClick: function () { return handleLocationClick(location); } }, location.id));
-                    }) })] }));
+    return (React__default.createElement("div", { className: "will-filter-bar-locations", ref: ref },
+        React__default.createElement(FilterSectionHeader, { title: t('locations.title'), action: onClose && React__default.createElement(CloseButton, { handleClose: onClose }) }),
+        React__default.createElement("div", { className: "will-locations-filter-container" }, !!((locations === null || locations === void 0 ? void 0 : locations.length) && language) &&
+            locations.map(function (location, index) {
+                return (React__default.createElement(ImageCard, { key: location.id, ref: index === 0 ? firstCardRef : null, title: location.label, description: location.description, imageUrl: location.imageUrl, isSelected: selectedLocations.some(function (loc) { return loc.id === location.id; }), onClick: function () { return handleLocationClick(location); } }));
+            }))));
 });
 Locations.displayName = 'Locations';
 
@@ -12072,7 +12109,10 @@ styleInject(css_248z$1);
 
 var Dates = forwardRef(function (_a, ref) {
     var onClose = _a.onClose, autoFocus = _a.autoFocus, calendarRange = _a.calendarRange, setCalendarRange = _a.setCalendarRange, disableCalendarDates = _a.disableCalendarDates, selectedPath = _a.selectedPath, language = _a.language, filtersRef = _a.filtersRef;
-    return (jsxs("div", { className: "will-filter-bar-dates", ref: ref, children: [jsx(FilterSectionHeader, { title: '', action: onClose && jsx(CloseButton, { handleClose: onClose }) }), jsx("div", { className: "will-dates-filter-container", children: jsx(Calendar, { autoFocus: autoFocus, calendarRange: calendarRange, setCalendarRange: setCalendarRange, disableCalendarDates: disableCalendarDates, selectedPath: selectedPath, language: language, ref: filtersRef }) })] }));
+    return (React__default.createElement("div", { className: "will-filter-bar-dates", ref: ref },
+        React__default.createElement(FilterSectionHeader, { title: '', action: onClose && React__default.createElement(CloseButton, { handleClose: onClose }) }),
+        React__default.createElement("div", { className: "will-dates-filter-container" },
+            React__default.createElement(Calendar, { autoFocus: autoFocus, calendarRange: calendarRange, setCalendarRange: setCalendarRange, disableCalendarDates: disableCalendarDates, selectedPath: selectedPath, language: language, ref: filtersRef }))));
 });
 Dates.displayName = 'Dates';
 
@@ -12141,31 +12181,50 @@ function FilterBar(_a) {
         locationsPlaceholder: t('locations.placeholder'),
         locationsSelectedLabel: t('locations.selected'),
     });
-    return (jsxs("div", { className: "will-root ".concat(fullWidth ? 'is-full-width' : ''), style: themePalette, children: [tabs && tabs.length > 1 && (jsx("div", { className: "will-filter-bar-tabs", ref: targetFilterBarRef, children: tabs
-                    .sort(function (a, b) { return a.order - b.order; })
-                    .map(function (tab, idx) { return (jsx(TabButton, { label: tab.label || t("tabs.".concat(tab.path.substring(1))), onClick: function () {
-                        setSelectedPath(tab.path);
-                        handleResetFilters();
-                        handleSelectedFilter(false);
-                    }, active: selectedPath === tab.path, mode: mode }, "tab-".concat(idx))); }) })), jsxs("div", { className: "will-filter-bar-header ".concat(mode || 'light'), ref: function (el) {
-                    headerRef.current = el;
-                    if ((tabs === null || tabs === void 0 ? void 0 : tabs.length) === 1 && targetFilterBarRef) {
-                        targetFilterBarRef.current = el;
-                    }
-                }, children: [!!((_b = locations === null || locations === void 0 ? void 0 : locations.data) === null || _b === void 0 ? void 0 : _b.length) && (jsxs(Fragment, { children: [jsx(SelectButton, { ref: locationsButtonRef, label: t('locations.label'), description: parsedLocations, onClick: function () {
-                                    previouslyFocusedButtonRef.current = locationsButtonRef.current;
-                                    handleSelectedFilterWithPosition(FilterSections.LOCATIONS);
-                                }, active: !!selectedLocations.length, disabled: locations === null || locations === void 0 ? void 0 : locations.disabled, ariaExpanded: selectedFilter === FilterSections.LOCATIONS, ariaControls: "will-locations-filter" }), jsx(Divider, {})] })), jsx(SelectButton, { ref: datesButtonRef, label: t('calendar.label'), description: parsedDates
-                            ? parsedDates
-                            : selectedPath === Pages.ROOMS
-                                ? t('calendar.roomsLabelPlaceholder')
-                                : t('calendar.eventsLabelPlaceholder'), onClick: function () {
-                            previouslyFocusedButtonRef.current = datesButtonRef.current;
-                            handleSelectedFilterWithPosition(FilterSections.CALENDAR);
-                        }, active: !!parsedDates, ariaExpanded: selectedFilter === FilterSections.CALENDAR, ariaControls: "will-calendar-filter" }), selectedPath !== Pages.EVENTS && (jsxs(Fragment, { children: [jsx(Divider, {}), jsx(SelectButton, { ref: guestsButtonRef, label: t('guests.label'), description: parsedGuests.content, onClick: function () {
-                                    previouslyFocusedButtonRef.current = guestsButtonRef.current;
-                                    handleSelectedFilterWithPosition(FilterSections.GUESTS);
-                                }, active: !!parsedGuests.data.total, ariaExpanded: selectedFilter === FilterSections.GUESTS, ariaControls: "will-guests-filter" })] })), jsx(SubmitButton, { onClick: handleSubmit, startIcon: jsx(FaSearch, {}), label: t('common:search'), isLoading: innerLoading || outerLoading })] }), selectedFilter && (jsxs("div", { className: "will-filter-bar-container ".concat(mode || 'light'), style: __assign$2(__assign$2({}, ((!tabs || tabs.length < 2) && !isMobile ? { top: 66 } : {})), dropdownStyle), children: [selectedFilter === FilterSections.CALENDAR && (jsx("div", { id: "will-dates-filter", children: jsx(Dates, { autoFocus: true, ref: filtersRef, onClose: function () { return handleSelectedFilter(false); }, calendarRange: calendarRange, setCalendarRange: setCalendarRange, disableCalendarDates: disableCalendarDates, selectedPath: selectedPath, language: language, filtersRef: filtersRef }) })), selectedFilter === FilterSections.GUESTS && (jsx("div", { id: "will-guests-filter", children: jsx(Guests, { updateGuestsCount: updateGuestsCount, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts, ref: filtersRef, autoFocus: true, onClose: function () { return handleSelectedFilter(false); } }) })), selectedFilter === FilterSections.CATEGORIES && (jsx("div", { id: "will-categories-filter", children: jsx(Categories, { categories: categories, setCategories: setCategories }) })), selectedFilter === FilterSections.LOCATIONS && (jsx("div", { id: "will-locations-filter", children: jsx(Locations, { autoFocus: true, ref: filtersRef, locations: locations === null || locations === void 0 ? void 0 : locations.data, language: language, selectedLocations: selectedLocations, setSelectedLocations: setSelectedLocations, multiSelect: locations === null || locations === void 0 ? void 0 : locations.multiSelect, onClose: function () { return handleSelectedFilter(false); } }) }))] }))] }));
+    return (React__default.createElement("div", { className: "will-root ".concat(fullWidth ? 'is-full-width' : ''), style: themePalette },
+        tabs && tabs.length > 1 && (React__default.createElement("div", { className: "will-filter-bar-tabs", ref: targetFilterBarRef }, tabs
+            .sort(function (a, b) { return a.order - b.order; })
+            .map(function (tab, idx) { return (React__default.createElement(TabButton, { key: "tab-".concat(idx), label: tab.label || t("tabs.".concat(tab.path.substring(1))), onClick: function () {
+                setSelectedPath(tab.path);
+                handleResetFilters();
+                handleSelectedFilter(false);
+            }, active: selectedPath === tab.path, mode: mode })); }))),
+        React__default.createElement("div", { className: "will-filter-bar-header ".concat(mode || 'light'), ref: function (el) {
+                headerRef.current = el;
+                if ((tabs === null || tabs === void 0 ? void 0 : tabs.length) === 1 && targetFilterBarRef) {
+                    targetFilterBarRef.current = el;
+                }
+            } },
+            !!((_b = locations === null || locations === void 0 ? void 0 : locations.data) === null || _b === void 0 ? void 0 : _b.length) && (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(SelectButton, { ref: locationsButtonRef, label: t('locations.label'), description: parsedLocations, onClick: function () {
+                        previouslyFocusedButtonRef.current = locationsButtonRef.current;
+                        handleSelectedFilterWithPosition(FilterSections.LOCATIONS);
+                    }, active: !!selectedLocations.length, disabled: locations === null || locations === void 0 ? void 0 : locations.disabled, ariaExpanded: selectedFilter === FilterSections.LOCATIONS, ariaControls: "will-locations-filter" }),
+                React__default.createElement(Divider, null))),
+            React__default.createElement(SelectButton, { ref: datesButtonRef, label: t('calendar.label'), description: parsedDates
+                    ? parsedDates
+                    : selectedPath === Pages.ROOMS
+                        ? t('calendar.roomsLabelPlaceholder')
+                        : t('calendar.eventsLabelPlaceholder'), onClick: function () {
+                    previouslyFocusedButtonRef.current = datesButtonRef.current;
+                    handleSelectedFilterWithPosition(FilterSections.CALENDAR);
+                }, active: !!parsedDates, ariaExpanded: selectedFilter === FilterSections.CALENDAR, ariaControls: "will-calendar-filter" }),
+            selectedPath !== Pages.EVENTS && (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(Divider, null),
+                React__default.createElement(SelectButton, { ref: guestsButtonRef, label: t('guests.label'), description: parsedGuests.content, onClick: function () {
+                        previouslyFocusedButtonRef.current = guestsButtonRef.current;
+                        handleSelectedFilterWithPosition(FilterSections.GUESTS);
+                    }, active: !!parsedGuests.data.total, ariaExpanded: selectedFilter === FilterSections.GUESTS, ariaControls: "will-guests-filter" }))),
+            React__default.createElement(SubmitButton, { onClick: handleSubmit, startIcon: React__default.createElement(FaSearch, null), label: t('common:search'), isLoading: innerLoading || outerLoading })),
+        selectedFilter && (React__default.createElement("div", { className: "will-filter-bar-container ".concat(mode || 'light'), style: __assign$2(__assign$2({}, ((!tabs || tabs.length < 2) && !isMobile ? { top: 66 } : {})), dropdownStyle) },
+            selectedFilter === FilterSections.CALENDAR && (React__default.createElement("div", { id: "will-dates-filter" },
+                React__default.createElement(Dates, { autoFocus: true, ref: filtersRef, onClose: function () { return handleSelectedFilter(false); }, calendarRange: calendarRange, setCalendarRange: setCalendarRange, disableCalendarDates: disableCalendarDates, selectedPath: selectedPath, language: language, filtersRef: filtersRef }))),
+            selectedFilter === FilterSections.GUESTS && (React__default.createElement("div", { id: "will-guests-filter" },
+                React__default.createElement(Guests, { updateGuestsCount: updateGuestsCount, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts, ref: filtersRef, autoFocus: true, onClose: function () { return handleSelectedFilter(false); } }))),
+            selectedFilter === FilterSections.CATEGORIES && (React__default.createElement("div", { id: "will-categories-filter" },
+                React__default.createElement(Categories, { categories: categories, setCategories: setCategories }))),
+            selectedFilter === FilterSections.LOCATIONS && (React__default.createElement("div", { id: "will-locations-filter" },
+                React__default.createElement(Locations, { autoFocus: true, ref: filtersRef, locations: locations === null || locations === void 0 ? void 0 : locations.data, language: language, selectedLocations: selectedLocations, setSelectedLocations: setSelectedLocations, multiSelect: locations === null || locations === void 0 ? void 0 : locations.multiSelect, onClose: function () { return handleSelectedFilter(false); } })))))));
 }
 ////////////
 var AGE_CATEGORIES_FALLBACK = [
@@ -12306,26 +12365,36 @@ var Footer = function (_a) {
     var nights = nightsCount({
         calendarRange: calendarRange,
     });
-    return (jsxs("div", { className: "will-calendar-footer-actions-wrapper", children: [jsxs("div", { className: "will-calendar-footer-dates", children: [calendarHasError ? (jsx("div", { className: "will-calendar-footer-error", children: calendarHasError &&
-                            renderCalendarErrorMessage({
-                                palette: palette,
-                                message: t("common:errors.calendarErrors.checkInAvailabilityError"),
-                            }) })) : (jsxs("div", { children: [jsx("span", { children: parseDate({
-                                    date: calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from,
-                                    dateFormat: 'EEEEEE d.M.yyyy',
-                                    language: language,
-                                }) || t('common:checkIn') }), jsx("span", { className: "will-calendar-footer-dates-separator", children: "-" }), jsx("span", { children: parseDate({
-                                    date: calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to,
-                                    dateFormat: 'EEEEEE d.M.yyyy',
-                                    language: language,
-                                }) || t('common:checkOut') })] })), jsx("span", { className: "will-calendar-footer-booked", children: !calendarHasError && nights
-                            ? "".concat(nights, " ").concat(t("common:".concat(nights === 1 ? 'night' : 'nights')))
-                            : '' })] }), jsx("div", { className: "will-calendar-footer-actions", children: jsx(SubmitButton, { onClick: handleClearDates, disabled: !(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from), label: t("common:clearDates"), variant: "text" }) })] }));
+    return (React__default.createElement("div", { className: "will-calendar-footer-actions-wrapper" },
+        React__default.createElement("div", { className: "will-calendar-footer-dates" },
+            calendarHasError ? (React__default.createElement("div", { className: "will-calendar-footer-error" }, calendarHasError &&
+                renderCalendarErrorMessage({
+                    palette: palette,
+                    message: t("common:errors.calendarErrors.checkInAvailabilityError"),
+                }))) : (React__default.createElement("div", null,
+                React__default.createElement("span", null, parseDate({
+                    date: calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from,
+                    dateFormat: 'EEEEEE d.M.yyyy',
+                    language: language,
+                }) || t('common:checkIn')),
+                React__default.createElement("span", { className: "will-calendar-footer-dates-separator" }, "-"),
+                React__default.createElement("span", null, parseDate({
+                    date: calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to,
+                    dateFormat: 'EEEEEE d.M.yyyy',
+                    language: language,
+                }) || t('common:checkOut')))),
+            React__default.createElement("span", { className: "will-calendar-footer-booked" }, !calendarHasError && nights
+                ? "".concat(nights, " ").concat(t("common:".concat(nights === 1 ? 'night' : 'nights')))
+                : '')),
+        React__default.createElement("div", { className: "will-calendar-footer-actions" },
+            React__default.createElement(SubmitButton, { onClick: handleClearDates, disabled: !(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from), label: t("common:clearDates"), variant: "text" }))));
 };
 /////////
 var renderCalendarErrorMessage = function (_a) {
     var message = _a.message, palette = _a.palette;
-    return (jsxs(Fragment, { children: [jsx(IconsSvg, { fill: (palette === null || palette === void 0 ? void 0 : palette.error) || 'inherit', size: 25, icon: "warning" }), jsx("span", { children: message || '' })] }));
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(IconsSvg, { fill: (palette === null || palette === void 0 ? void 0 : palette.error) || 'inherit', size: 25, icon: "warning" }),
+        React__default.createElement("span", null, message || '')));
 };
 
 var css_248z = ".will-root .will-calendar-wrapper {\n    box-shadow: var(--will-box-shadow-dark);\n    border-radius: 20px;\n    background-color: var(--will-white);\n    position: absolute;\n    top: 0;\n    left: 0;\n   \n}\n\n.will-root .will-calendar-wrapper .will-calendar-header,\n.will-root .will-calendar-wrapper .will-calendar-main,\n.will-root .will-calendar-wrapper .will-calendar-footer {\n   padding: 20px;\n}\n\n/* Header */\n\n.will-root .will-calendar-wrapper .will-calendar-header {\n    display: flex;\n    justify-content: space-between;\n    border-bottom: 1px solid var(--will-grey);\n    align-items: center;\n}\n\n/* Footer */\n\n.will-root .will-calendar-wrapper .will-calendar-footer {\n    border-top: 1px solid var(--will-grey);\n}\n\n/* Footer actions */\n\n.will-root .will-calendar-wrapper .will-calendar-footer-actions-wrapper {\n    display: flex;\n    justify-content: space-between;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-dates > div {\n    margin-bottom: 5px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-dates-separator {\n    margin: 0 15px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-dates .will-calendar-footer-booked {\n    display: flex;\n    min-height: 20.5px;\n    margin-top: 10px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-error {\n    display: flex;\n    max-width: 80%;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-error span {\n    display: inline-block;\n    margin-left: 10px;\n}\n\n@media (max-width: 960px) {\n    .will-root .will-calendar-wrapper {\n        width: -webkit-fill-available;\n        margin: 0 -6%;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-header,\n    .will-root .will-calendar-wrapper .will-calendar-main,\n    .will-root .will-calendar-wrapper .will-calendar-footer {\n        padding: 20px 10px;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-footer-actions-wrapper {\n        flex-direction: column;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-footer-dates  {\n        text-align: center;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-footer-dates .will-calendar-footer-booked {\n       justify-content: center;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-footer-actions {\n       flex-direction: column;\n       width: 100%;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-footer-actions button{\n        width: 100%;\n        margin-top: 10px;\n     }\n\n     .will-root .will-calendar-wrapper .will-calendar-footer-error {\n        max-width: 100%;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-footer-error span {\n        text-align: center;\n        margin-left: 5px;\n    }\n  }\n\n.will-root .will-calendar-wrapper .will-calendar-header .will-filter-bar-close-button {\n    position: initial;\n}";
@@ -12351,7 +12420,14 @@ function FilterCalendar(_a) {
     var filtersRef = useCloseFilterSection({
         handleSelectedFilter: setToggleCalendar,
     }).filtersRef;
-    return (jsx("div", { className: "will-root", style: themePalette, children: toggleCalendar && (jsxs("div", { className: "will-calendar-wrapper", ref: filtersRef, children: [jsxs("div", { className: "will-calendar-header", children: [jsx("h2", { children: t('filterBar:calendar.title') }), jsx(CloseButton, { handleClose: function () { return setToggleCalendar(false); } })] }), jsx("div", { className: "will-calendar-main", children: jsx(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange, calendarOffset: calendarOffset, selectedPath: '/rooms', language: language, disableCalendarDates: disableCalendarDates, requestDates: requestDates, disabledDates: disabledDates, updateCalendarMonthNavigation: updateCalendarMonthNavigation, setUpdateCalendarMonthNavigation: setUpdateCalendarMonthNavigation, updateCalendarDefaultMonth: updateCalendarDefaultMonth, loadingData: loadingData, showFeedback: showFeedback, noActiveSelection: noActiveSelection, palette: palette, setCalendarHasError: setCalendarHasError, setUpdatedForSubmit: setUpdatedForSubmit, rangeContext: rangeContext, calendarHasError: calendarHasError }) }), jsx("div", { className: "will-calendar-footer", children: jsx(Footer, { calendarHasError: calendarHasError, calendarRange: calendarRange, handleClearDates: handleClearDates, language: language, palette: palette }) })] })) }));
+    return (React__default.createElement("div", { className: "will-root", style: themePalette }, toggleCalendar && (React__default.createElement("div", { className: "will-calendar-wrapper", ref: filtersRef },
+        React__default.createElement("div", { className: "will-calendar-header" },
+            React__default.createElement("h2", null, t('filterBar:calendar.title')),
+            React__default.createElement(CloseButton, { handleClose: function () { return setToggleCalendar(false); } })),
+        React__default.createElement("div", { className: "will-calendar-main" },
+            React__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange, calendarOffset: calendarOffset, selectedPath: '/rooms', language: language, disableCalendarDates: disableCalendarDates, requestDates: requestDates, disabledDates: disabledDates, updateCalendarMonthNavigation: updateCalendarMonthNavigation, setUpdateCalendarMonthNavigation: setUpdateCalendarMonthNavigation, updateCalendarDefaultMonth: updateCalendarDefaultMonth, loadingData: loadingData, showFeedback: showFeedback, noActiveSelection: noActiveSelection, palette: palette, setCalendarHasError: setCalendarHasError, setUpdatedForSubmit: setUpdatedForSubmit, rangeContext: rangeContext, calendarHasError: calendarHasError })),
+        React__default.createElement("div", { className: "will-calendar-footer" },
+            React__default.createElement(Footer, { calendarHasError: calendarHasError, calendarRange: calendarRange, handleClearDates: handleClearDates, language: language, palette: palette }))))));
 }
 
 export { Button$1 as Button, FilterBar, FilterCalendar };