willba-component-library 0.3.10 → 0.3.12

package/lib/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.WillbaComponentLibrary = {}, global.React));
-})(this, (function (exports, React) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.WillbaComponentLibrary = {}, global.jsxRuntime, global.React));
+})(this, (function (exports, jsxRuntime, React__default) { 'use strict';
 
     function _interopNamespaceDefault(e) {
         var n = Object.create(null);
@@ -21,7 +21,7 @@
         return Object.freeze(n);
     }
 
-    var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+    var React__default__namespace = /*#__PURE__*/_interopNamespaceDefault(React__default);
 
     /******************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -213,16 +213,16 @@
       }
     }
 
-    var css_248z$g = ".storybook-button {\n  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n  font-weight: 700;\n  border: 0;\n  border-radius: 3em;\n  cursor: pointer;\n  display: inline-block;\n  line-height: 1;\n}\n.storybook-button--primary {\n  color: white;\n  background-color: #1ea7fd;\n}\n.storybook-button--secondary {\n  color: #333;\n  background-color: transparent;\n  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;\n}\n.storybook-button--small {\n  font-size: 12px;\n  padding: 10px 16px;\n}\n.storybook-button--medium {\n  font-size: 14px;\n  padding: 11px 20px;\n}\n.storybook-button--large {\n  font-size: 16px;\n  padding: 12px 24px;\n}";
-    styleInject(css_248z$g);
+    var css_248z$h = ".storybook-button {\n  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n  font-weight: 700;\n  border: 0;\n  border-radius: 3em;\n  cursor: pointer;\n  display: inline-block;\n  line-height: 1;\n}\n.storybook-button--primary {\n  color: white;\n  background-color: #1ea7fd;\n}\n.storybook-button--secondary {\n  color: #333;\n  background-color: transparent;\n  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;\n}\n.storybook-button--small {\n  font-size: 12px;\n  padding: 10px 16px;\n}\n.storybook-button--medium {\n  font-size: 14px;\n  padding: 11px 20px;\n}\n.storybook-button--large {\n  font-size: 16px;\n  padding: 12px 24px;\n}";
+    styleInject(css_248z$h);
 
     /**
      * Primary UI component for user interaction
      */
     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(React.useState(4), 2), theState = _d[0]; _d[1];
-        return (React.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)));
+        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(React__default.useState(4), 2), theState = _d[0]; _d[1];
+        return (jsxRuntime.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) }));
     };
 
     function warn() {
@@ -363,7 +363,7 @@
       }
     };
 
-    const I18nContext = React.createContext();
+    const I18nContext = React__default.createContext();
     class ReportNamespaces {
       constructor() {
         this.usedNamespaces = {};
@@ -379,8 +379,8 @@
     }
 
     const usePrevious = (value, ignore) => {
-      const ref = React.useRef();
-      React.useEffect(() => {
+      const ref = React__default.useRef();
+      React__default.useEffect(() => {
         ref.current = ignore ? ref.current : value;
       }, [value, ignore]);
       return ref.current;
@@ -393,7 +393,7 @@
       const {
         i18n: i18nFromContext,
         defaultNS: defaultNSFromContext
-      } = React.useContext(I18nContext) || {};
+      } = React__default.useContext(I18nContext) || {};
       const i18n = i18nFromProps || i18nFromContext || getI18n();
       if (i18n && !i18n.reportNamespaces) i18n.reportNamespaces = new ReportNamespaces();
       if (!i18n) {
@@ -426,12 +426,12 @@
       function getT() {
         return i18n.getFixedT(props.lng || null, i18nOptions.nsMode === 'fallback' ? namespaces : namespaces[0], keyPrefix);
       }
-      const [t, setT] = React.useState(getT);
+      const [t, setT] = React__default.useState(getT);
       let joinedNS = namespaces.join();
       if (props.lng) joinedNS = `${props.lng}${joinedNS}`;
       const previousJoinedNS = usePrevious(joinedNS);
-      const isMounted = React.useRef(true);
-      React.useEffect(() => {
+      const isMounted = React__default.useRef(true);
+      React__default.useEffect(() => {
         const {
           bindI18n,
           bindI18nStore
@@ -462,8 +462,8 @@
           if (bindI18nStore && i18n) bindI18nStore.split(' ').forEach(e => i18n.store.off(e, boundReset));
         };
       }, [i18n, joinedNS]);
-      const isInitial = React.useRef(true);
-      React.useEffect(() => {
+      const isInitial = React__default.useRef(true);
+      React__default.useEffect(() => {
         if (isMounted.current && !isInitial.current) {
           setT(getT);
         }
@@ -491,7 +491,7 @@
       style: undefined,
       attr: undefined
     };
-    var IconContext = React.createContext && React.createContext(DefaultContext);
+    var IconContext = React__default.createContext && React__default.createContext(DefaultContext);
 
     var __assign$1 = undefined && undefined.__assign || function () {
       __assign$1 = Object.assign || function (t) {
@@ -513,7 +513,7 @@
     };
     function Tree2Element(tree) {
       return tree && tree.map(function (node, i) {
-        return React.createElement(node.tag, __assign$1({
+        return React__default.createElement(node.tag, __assign$1({
           key: i
         }, node.attr), Tree2Element(node.child));
       });
@@ -521,7 +521,7 @@
     function GenIcon(data) {
       // eslint-disable-next-line react/display-name
       return function (props) {
-        return React.createElement(IconBase, __assign$1({
+        return React__default.createElement(IconBase, __assign$1({
           attr: __assign$1({}, data.attr)
         }, props), Tree2Element(data.child));
       };
@@ -536,7 +536,7 @@
         var className;
         if (conf.className) className = conf.className;
         if (props.className) className = (className ? className + " " : "") + props.className;
-        return React.createElement("svg", __assign$1({
+        return React__default.createElement("svg", __assign$1({
           stroke: "currentColor",
           fill: "currentColor",
           strokeWidth: "0"
@@ -548,9 +548,9 @@
           height: computedSize,
           width: computedSize,
           xmlns: "http://www.w3.org/2000/svg"
-        }), title && React.createElement("title", null, title), props.children);
+        }), title && React__default.createElement("title", null, title), props.children);
       };
-      return IconContext !== undefined ? React.createElement(IconContext.Consumer, null, function (conf) {
+      return IconContext !== undefined ? React__default.createElement(IconContext.Consumer, null, function (conf) {
         return elem(conf);
       }) : elem(DefaultContext);
     }
@@ -572,12 +572,12 @@
         return themePalette;
     }
 
-    var css_248z$f = "@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');\n\n.will-root * {\n  font-family: 'Montserrat', sans-serif;\n}\n\n.will-root {\n  \n  box-sizing: border-box;\n  font-size: 14px;\n  \n  color: #1E1E1E;\n \n  /* Palette */\n  --will-primary: #374269;\n  --will-secondary: #374269;\n  --will-grey: #ABA7AF;\n  --will-light-grey: #C8C8C8;\n  --will-white: #fff;\n  --will-white-transparent: #ffffffcf;\n  --will-black: #000;\n  --will-onahau: #CDEEFF;\n  --will-text: #5A5959;\n  --will-charcoal-blue: #384265;\n  --will-error: #d32f2f;\n\n  /* Transparent */\n  --will-transparent-black: rgba(0, 0, 0, 0.5);\n  --will-transparent-white: rgba(255, 255, 255, 0.30);\n  --will-transparent-lavender: rgba(171, 167, 175, 0.30);\n\n  /* Color mix */\n  --will-primary-lighter: color-mix(in srgb, var(--will-primary), white 50%);\n  --will-primary-lightest: color-mix(in srgb, var(--will-primary), white 80%);\n\n\n  /* Shadows */\n  --will-box-shadow-dark: 0px 2px 12px 2px #a1a1a180;\n  --will-box-shadow-light: 0px 2px 12px 2px #bcb9b980;\n\n  /* Breakpoints */\n  --will-lg: 1140px;\n  --will-md: 960px;\n  --will-sm: 600px;\n  --will-xl: 1280px;\n  --will-xs: 0px;\n}\n\n/* Typography */\n\n.will-root h1, h2, h3, h4, h5, h6 {\n font-weight: 700;\n} \n\n.will-root p, h1, h2, h3, h4, h5, h6, span {\n  margin: 0;\n  padding: 0;\n}\n\n\n/* Integration fixes */\n\n.will-root p {\n  margin: 0 !important;\n}\n\n.will-root button {\n  line-height: normal !important;\n}\n";
-    styleInject(css_248z$f);
+    var css_248z$g = "@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');\n\n.will-root * {\n  font-family: 'Montserrat', sans-serif;\n}\n\n.will-root {\n  \n  box-sizing: border-box;\n  font-size: 14px;\n  \n  color: #1E1E1E;\n \n  /* Palette */\n  --will-primary: #374269;\n  --will-secondary: #374269;\n  --will-grey: #ABA7AF;\n  --will-light-grey: #C8C8C8;\n  --will-white: #fff;\n  --will-white-transparent: #ffffffcf;\n  --will-black: #000;\n  --will-onahau: #CDEEFF;\n  --will-text: #5A5959;\n  --will-charcoal-blue: #384265;\n  --will-error: #d32f2f;\n\n  /* Transparent */\n  --will-transparent-black: rgba(0, 0, 0, 0.5);\n  --will-transparent-white: rgba(255, 255, 255, 0.30);\n  --will-transparent-lavender: rgba(171, 167, 175, 0.30);\n\n  /* Color mix */\n  --will-primary-lighter: color-mix(in srgb, var(--will-primary), white 50%);\n  --will-primary-lightest: color-mix(in srgb, var(--will-primary), white 80%);\n\n\n  /* Shadows */\n  --will-box-shadow-dark: 0px 2px 12px 2px #a1a1a180;\n  --will-box-shadow-light: 0px 2px 12px 2px #bcb9b980;\n\n  /* Breakpoints */\n  --will-lg: 1140px;\n  --will-md: 960px;\n  --will-sm: 600px;\n  --will-xl: 1280px;\n  --will-xs: 0px;\n}\n\n/* Typography */\n\n.will-root h1, h2, h3, h4, h5, h6 {\n font-weight: 700;\n} \n\n.will-root p, h1, h2, h3, h4, h5, h6, span {\n  margin: 0;\n  padding: 0;\n}\n\n\n/* Integration fixes */\n\n.will-root p {\n  margin: 0 !important;\n}\n\n.will-root button {\n  line-height: normal !important;\n}\n";
+    styleInject(css_248z$g);
 
     var useAwaitRender = function () {
-        var _a = __read(React.useState(false), 2), initialRenderComplete = _a[0], setInitialRenderComplete = _a[1];
-        React.useEffect(function () {
+        var _a = __read(React__default.useState(false), 2), initialRenderComplete = _a[0], setInitialRenderComplete = _a[1];
+        React__default.useEffect(function () {
             setInitialRenderComplete(true);
         }, []);
         if (!initialRenderComplete)
@@ -2972,8 +2972,8 @@
 
     var useUpdateTranslations = function (_a) {
         var language = _a.language;
-        var _b = __read(React.useState(0), 2); _b[0]; var setRerenderKey = _b[1];
-        React.useEffect(function () {
+        var _b = __read(React__default.useState(0), 2); _b[0]; var setRerenderKey = _b[1];
+        React__default.useEffect(function () {
             instance.changeLanguage(language);
             setRerenderKey(function (prevKey) { return prevKey + 1; });
         }, [language]);
@@ -2982,8 +2982,8 @@
     // TODO - Refactor and rename this hook
     var useCloseFilterSection = function (_a) {
         var handleSelectedFilter = _a.handleSelectedFilter;
-        var filtersRef = React.useRef(null);
-        React.useEffect(function () {
+        var filtersRef = React__default.useRef(null);
+        React__default.useEffect(function () {
             var handleClickOutside = function (event) {
                 if (filtersRef.current &&
                     !filtersRef.current.contains(event.target)) {
@@ -2999,8 +2999,8 @@
     };
 
     var useAutoFocus = function (autoFocus) {
-        var ref = React.useRef(null);
-        React.useEffect(function () {
+        var ref = React__default.useRef(null);
+        React__default.useEffect(function () {
             if (!autoFocus || !ref.current)
                 return;
             var attemptFocus = function (attempts) {
@@ -3020,14 +3020,12 @@
         return ref;
     };
 
-    var css_248z$e = ".will-filter-bar-submit-button {\n  width: auto;\n  height: auto;\n  padding: 10px 20px;\n  border-radius: 20px;\n  cursor: pointer;\n  border: none;\n  white-space: nowrap;\n  text-transform: uppercase;\n  font-size: 12px;\n  display: flex;\n  align-items: center;\n  user-select: none;\n}\n\n/* Submit button variants */\n.will-filter-bar-submit-button.default {\n  background-color: var(--will-primary);\n  color: var(--will-white);\n}\n\n.will-filter-bar-submit-button.text {\n  background-color: transparent;\n  color: var(--will-black);\n  text-decoration: underline;\n  font-weight: 500;\n  font-size: 15px;\n  padding: 0 10px;\n}\n\n.will-filter-bar-submit-button span {\n margin-right: 10px;\n display: flex;\n}\n\nbutton.will-filter-bar-submit-button:disabled  {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n\n@media (max-width: 960px) {\n  .will-filter-bar-submit-button {\n    justify-content: center;\n   \n  }\n}\n\n/* --- */\n\n@keyframes spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n";
-    styleInject(css_248z$e);
+    var css_248z$f = ".will-filter-bar-submit-button {\n  width: auto;\n  height: auto;\n  padding: 10px 20px;\n  border-radius: 20px;\n  cursor: pointer;\n  border: none;\n  white-space: nowrap;\n  text-transform: uppercase;\n  font-size: 12px;\n  display: flex;\n  align-items: center;\n  user-select: none;\n}\n\n/* Submit button variants */\n.will-filter-bar-submit-button.default {\n  background-color: var(--will-primary);\n  color: var(--will-white);\n}\n\n.will-filter-bar-submit-button.text {\n  background-color: transparent;\n  color: var(--will-black);\n  text-decoration: underline;\n  font-weight: 500;\n  font-size: 15px;\n  padding: 0 10px;\n}\n\n.will-filter-bar-submit-button span {\n margin-right: 10px;\n display: flex;\n}\n\nbutton.will-filter-bar-submit-button:disabled  {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n\n@media (max-width: 960px) {\n  .will-filter-bar-submit-button {\n    justify-content: center;\n   \n  }\n}\n\n/* --- */\n\n@keyframes spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n";
+    styleInject(css_248z$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 (React.createElement("button", { className: "will-filter-bar-submit-button ".concat(variant || 'default'), onClick: onClick, disabled: disabled || isLoading },
-            isLoading ? (React.createElement("span", null, React.createElement(FaSpinner, { style: { animation: 'spin 1s linear infinite' } }))) : (startIcon && React.createElement("span", null, startIcon)),
-            label || 'Label'));
+        return (jsxRuntime.jsxs("button", { className: "will-filter-bar-submit-button ".concat(variant || 'default'), onClick: onClick, disabled: disabled || isLoading, children: [isLoading ? (jsxRuntime.jsx("span", { children: jsxRuntime.jsx(FaSpinner, { style: { animation: 'spin 1s linear infinite' } }) })) : (startIcon && jsxRuntime.jsx("span", { children: startIcon })), label || 'Label'] }));
     };
 
     // THIS FILE IS AUTO GENERATED
@@ -3035,13 +3033,12 @@
       return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 512 512"},"child":[{"tag":"path","attr":{"d":"M331.3 308.7L278.6 256l52.7-52.7c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-52.7-52.7c-6.2-6.2-15.6-7.1-22.6 0-7.1 7.1-6 16.6 0 22.6l52.7 52.7-52.7 52.7c-6.7 6.7-6.4 16.3 0 22.6 6.4 6.4 16.4 6.2 22.6 0l52.7-52.7 52.7 52.7c6.2 6.2 16.4 6.2 22.6 0 6.3-6.2 6.3-16.4 0-22.6z"}},{"tag":"path","attr":{"d":"M256 76c48.1 0 93.3 18.7 127.3 52.7S436 207.9 436 256s-18.7 93.3-52.7 127.3S304.1 436 256 436c-48.1 0-93.3-18.7-127.3-52.7S76 304.1 76 256s18.7-93.3 52.7-127.3S207.9 76 256 76m0-28C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48z"}}]})(props);
     }
 
-    var css_248z$d = ".will-filter-bar-close-button {\n  width: auto;\n  height: auto;\n  /* background-color: var(--will-grey); */\n  color: var(--will-grey);\n  padding: 2px 7px;\n  border-radius: 50%;\n  cursor: pointer;\n  border: none;\n  display: flex;\n  align-items: center;\n  font-size: 23px;\n  /* display: none; */\n\n  position: absolute;\n  top: 10px;\n  right: 10px;\n\n  min-height: 35px;\n}\n\n@media (max-width: 960px) {\n  .will-filter-bar-close-button {\n    top: 10px;\n    right: 10px;\n\n    border-radius: 25px;\n    margin-left:0;\n   \n    display: flex;\n    justify-content: center;\n  }\n}\n";
-    styleInject(css_248z$d);
+    var css_248z$e = ".will-filter-bar-close-button {\n  width: auto;\n  height: auto;\n  /* background-color: var(--will-grey); */\n  color: var(--will-grey);\n  padding: 2px 7px;\n  border-radius: 50%;\n  cursor: pointer;\n  border: none;\n  display: flex;\n  align-items: center;\n  font-size: 23px;\n  /* display: none; */\n\n  position: absolute;\n  top: 10px;\n  right: 10px;\n\n  min-height: 35px;\n}\n\n@media (max-width: 960px) {\n  .will-filter-bar-close-button {\n    top: 10px;\n    right: 10px;\n\n    border-radius: 25px;\n    margin-left:0;\n   \n    display: flex;\n    justify-content: center;\n  }\n}\n";
+    styleInject(css_248z$e);
 
     var CloseButton = function (_a) {
         var handleClose = _a.handleClose;
-        return (React.createElement("button", { className: "will-filter-bar-close-button", onClick: handleClose },
-            React.createElement(IoIosCloseCircleOutline, null)));
+        return (jsxRuntime.jsx("button", { className: "will-filter-bar-close-button", onClick: handleClose, children: jsxRuntime.jsx(IoIosCloseCircleOutline, {}) }));
     };
 
     function _typeof(o) {
@@ -7322,7 +7319,7 @@
      *
      * Access to this context from the {@link useDayPicker} hook.
      */
-    var DayPickerContext = React.createContext(undefined);
+    var DayPickerContext = React__default.createContext(undefined);
     /**
      * The provider for the {@link DayPickerContext}, assigning the defaults from the
      * initial DayPicker props.
@@ -7344,7 +7341,7 @@
             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.createElement(DayPickerContext.Provider, { value: value }, props.children));
+        return (React__default.createElement(DayPickerContext.Provider, { value: value }, props.children));
     }
     /**
      * Hook to access the {@link DayPickerContextValue}.
@@ -7353,7 +7350,7 @@
      * internal or custom components.
      */
     function useDayPicker() {
-        var context = React.useContext(DayPickerContext);
+        var context = React__default.useContext(DayPickerContext);
         if (!context) {
             throw new Error("useDayPicker must be used within a DayPickerProvider.");
         }
@@ -7363,15 +7360,15 @@
     /** 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.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.createElement("svg", __assign({ width: "8px", height: "8px", viewBox: "0 0 120 120", "data-testid": "iconDropdown" }, props),
-            React.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" })));
     }
 
     /**
@@ -7383,12 +7380,12 @@
         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.createElement("div", { className: className, style: style },
-            React.createElement("span", { className: dayPicker.classNames.vhidden }, props['aria-label']),
-            React.createElement("select", { name: props.name, "aria-label": props['aria-label'], className: dayPicker.classNames.dropdown, style: dayPicker.styles.dropdown, value: value, onChange: onChange }, children),
-            React.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.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. */
@@ -7397,9 +7394,9 @@
         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.createElement(React.Fragment, null);
+            return React__default.createElement(React__default.Fragment, null);
         if (!toDate)
-            return React.createElement(React.Fragment, null);
+            return React__default.createElement(React__default.Fragment, null);
         var dropdownMonths = [];
         if (isSameYear(fromDate, toDate)) {
             // only display the months included in the range
@@ -7421,7 +7418,7 @@
             props.onChange(newMonth);
         };
         var DropdownComponent = (_a = components === null || components === void 0 ? void 0 : components.Dropdown) !== null && _a !== void 0 ? _a : Dropdown;
-        return (React.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.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 }))); })));
     }
 
     /**
@@ -7435,9 +7432,9 @@
         var years = [];
         // Dropdown should appear only when both from/toDate is set
         if (!fromDate)
-            return React.createElement(React.Fragment, null);
+            return React__default.createElement(React__default.Fragment, null);
         if (!toDate)
-            return React.createElement(React.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++) {
@@ -7448,7 +7445,7 @@
             props.onChange(newMonth);
         };
         var DropdownComponent = (_a = components === null || components === void 0 ? void 0 : components.Dropdown) !== null && _a !== void 0 ? _a : Dropdown;
-        return (React.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.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 }))); })));
     }
 
     /**
@@ -7461,7 +7458,7 @@
      * argument, which will be always returned as `value`.
      */
     function useControlledValue(defaultValue, controlledValue) {
-        var _a = React.useState(defaultValue), uncontrolledValue = _a[0], setValue = _a[1];
+        var _a = React__default.useState(defaultValue), uncontrolledValue = _a[0], setValue = _a[1];
         var value = controlledValue === undefined ? uncontrolledValue : controlledValue;
         return [value, setValue];
     }
@@ -7579,7 +7576,7 @@
      * The Navigation context shares details and methods to navigate the months in DayPicker.
      * Access this context from the {@link useNavigation} hook.
      */
-    var NavigationContext = React.createContext(undefined);
+    var NavigationContext = React__default.createContext(undefined);
     /** Provides the values for the {@link NavigationContext}. */
     function NavigationProvider(props) {
         var dayPicker = useDayPicker();
@@ -7612,7 +7609,7 @@
             nextMonth: nextMonth,
             isDateDisplayed: isDateDisplayed
         };
-        return (React.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
@@ -7621,7 +7618,7 @@
      * This hook is meant to be used inside internal or custom components.
      */
     function useNavigation() {
-        var context = React.useContext(NavigationContext);
+        var context = React__default.useContext(NavigationContext);
         if (!context) {
             throw new Error('useNavigation must be used within a NavigationProvider');
         }
@@ -7639,31 +7636,31 @@
             goToMonth(newMonth);
         };
         var CaptionLabelComponent = (_a = components === null || components === void 0 ? void 0 : components.CaptionLabel) !== null && _a !== void 0 ? _a : CaptionLabel;
-        var captionLabel = (React.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }));
-        return (React.createElement("div", { className: classNames.caption_dropdowns, style: styles.caption_dropdowns },
-            React.createElement("div", { className: classNames.vhidden }, captionLabel),
-            React.createElement(MonthsDropdown, { onChange: handleMonthChange, displayMonth: props.displayMonth }),
-            React.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.createElement("svg", __assign({ width: "16px", height: "16px", viewBox: "0 0 120 120" }, props),
-            React.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.createElement("svg", __assign({ width: "16px", height: "16px", viewBox: "0 0 120 120" }, props),
-            React.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. */
-    var Button = React.forwardRef(function (props, ref) {
+    var Button = React__default.forwardRef(function (props, ref) {
         var _a = useDayPicker(), classNames = _a.classNames, styles = _a.styles;
         var classNamesArr = [classNames.button_reset, classNames.button];
         if (props.className) {
@@ -7674,7 +7671,7 @@
         if (props.style) {
             Object.assign(style, props.style);
         }
-        return (React.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. */
@@ -7682,7 +7679,7 @@
         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.createElement(React.Fragment, null);
+            return React__default.createElement(React__default.Fragment, null);
         }
         var previousLabel = labelPrevious(props.previousMonth, { locale: locale });
         var previousClassName = [
@@ -7696,9 +7693,9 @@
         ].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.createElement("div", { className: classNames.nav, style: styles.nav },
-            !props.hidePrevious && (React.createElement(Button, { name: "previous-month", "aria-label": previousLabel, className: previousClassName, style: styles.nav_button_previous, disabled: !props.previousMonth, onClick: props.onPreviousClick }, dir === 'rtl' ? (React.createElement(IconRightComponent, { className: classNames.nav_icon, style: styles.nav_icon })) : (React.createElement(IconLeftComponent, { className: classNames.nav_icon, style: styles.nav_icon })))),
-            !props.hideNext && (React.createElement(Button, { name: "next-month", "aria-label": nextLabel, className: nextClassName, style: styles.nav_button_next, disabled: !props.nextMonth, onClick: props.onNextClick }, dir === 'rtl' ? (React.createElement(IconLeftComponent, { className: classNames.nav_icon, style: styles.nav_icon })) : (React.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 }))))));
     }
 
     /**
@@ -7724,7 +7721,7 @@
                 return;
             goToMonth(nextMonth);
         };
-        return (React.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 }));
     }
 
     /**
@@ -7737,22 +7734,22 @@
         var CaptionLabelComponent = (_a = components === null || components === void 0 ? void 0 : components.CaptionLabel) !== null && _a !== void 0 ? _a : CaptionLabel;
         var caption;
         if (disableNavigation) {
-            caption = (React.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.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.createElement(React.Fragment, null,
-                React.createElement(CaptionDropdowns, { displayMonth: props.displayMonth, id: props.id }),
-                React.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.createElement(React.Fragment, null,
-                React.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }),
-                React.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.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).*/
@@ -7760,10 +7757,10 @@
     function Footer$1(props) {
         var _a = useDayPicker(), footer = _a.footer, styles = _a.styles, tfoot = _a.classNames.tfoot;
         if (!footer)
-            return React.createElement(React.Fragment, null);
-        return (React.createElement("tfoot", { className: tfoot, style: styles.tfoot },
-            React.createElement("tr", null,
-                React.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))));
     }
 
     /**
@@ -7792,9 +7789,9 @@
     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.createElement("tr", { style: styles.head_row, className: classNames.head_row },
-            showWeekNumber && (React.createElement("td", { style: styles.head_cell, className: classNames.head_cell })),
-            weekdays.map(function (weekday, i) { return (React.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. */
@@ -7802,14 +7799,14 @@
         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.createElement("thead", { style: styles.head, className: classNames.head },
-            React.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.createElement(React.Fragment, null, formatDay(props.date, { locale: locale }));
+        return React__default.createElement(React__default.Fragment, null, formatDay(props.date, { locale: locale }));
     }
 
     /**
@@ -7818,7 +7815,7 @@
      *
      * Access this context from the {@link useSelectMultiple} hook.
      */
-    var SelectMultipleContext = React.createContext(undefined);
+    var SelectMultipleContext = React__default.createContext(undefined);
     /** Provides the values for the {@link SelectMultipleContext}. */
     function SelectMultipleProvider(props) {
         if (!isDayPickerMultiple(props.initialProps)) {
@@ -7828,9 +7825,9 @@
                     disabled: []
                 }
             };
-            return (React.createElement(SelectMultipleContext.Provider, { value: emptyContextValue }, props.children));
+            return (React__default.createElement(SelectMultipleContext.Provider, { value: emptyContextValue }, props.children));
         }
-        return (React.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;
@@ -7875,7 +7872,7 @@
             onDayClick: onDayClick,
             modifiers: modifiers
         };
-        return (React.createElement(SelectMultipleContext.Provider, { value: contextValue }, children));
+        return (React__default.createElement(SelectMultipleContext.Provider, { value: contextValue }, children));
     }
     /**
      * Hook to access the {@link SelectMultipleContextValue}.
@@ -7883,7 +7880,7 @@
      * This hook is meant to be used inside internal or custom components.
      */
     function useSelectMultiple() {
-        var context = React.useContext(SelectMultipleContext);
+        var context = React__default.useContext(SelectMultipleContext);
         if (!context) {
             throw new Error('useSelectMultiple must be used within a SelectMultipleProvider');
         }
@@ -7931,7 +7928,7 @@
      *
      * Access this context from the {@link useSelectRange} hook.
      */
-    var SelectRangeContext = React.createContext(undefined);
+    var SelectRangeContext = React__default.createContext(undefined);
     /** Provides the values for the {@link SelectRangeProvider}. */
     function SelectRangeProvider(props) {
         if (!isDayPickerRange(props.initialProps)) {
@@ -7944,9 +7941,9 @@
                     disabled: []
                 }
             };
-            return (React.createElement(SelectRangeContext.Provider, { value: emptyContextValue }, props.children));
+            return (React__default.createElement(SelectRangeContext.Provider, { value: emptyContextValue }, props.children));
         }
-        return (React.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;
@@ -8017,7 +8014,7 @@
                 });
             }
         }
-        return (React.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}.
@@ -8025,7 +8022,7 @@
      * This hook is meant to be used inside internal or custom components.
      */
     function useSelectRange() {
-        var context = React.useContext(SelectRangeContext);
+        var context = React__default.useContext(SelectRangeContext);
         if (!context) {
             throw new Error('useSelectRange must be used within a SelectRangeProvider');
         }
@@ -8108,7 +8105,7 @@
     }
 
     /** The Modifiers context store the modifiers used in DayPicker. To access the value of this context, use {@link useModifiers}. */
-    var ModifiersContext = React.createContext(undefined);
+    var ModifiersContext = React__default.createContext(undefined);
     /** Provide the value for the {@link ModifiersContext}. */
     function ModifiersProvider(props) {
         var dayPicker = useDayPicker();
@@ -8117,7 +8114,7 @@
         var internalModifiers = getInternalModifiers(dayPicker, selectMultiple, selectRange);
         var customModifiers = getCustomModifiers(dayPicker.modifiers);
         var modifiers = __assign(__assign({}, internalModifiers), customModifiers);
-        return (React.createElement(ModifiersContext.Provider, { value: modifiers }, props.children));
+        return (React__default.createElement(ModifiersContext.Provider, { value: modifiers }, props.children));
     }
     /**
      * Return the modifiers used by DayPicker.
@@ -8127,7 +8124,7 @@
      *
      */
     function useModifiers() {
-        var context = React.useContext(ModifiersContext);
+        var context = React__default.useContext(ModifiersContext);
         if (!context) {
             throw new Error('useModifiers must be used within a ModifiersProvider');
         }
@@ -8365,13 +8362,13 @@
      *
      * Access this context from the {@link useFocusContext} hook.
      */
-    var FocusContext = React.createContext(undefined);
+    var FocusContext = React__default.createContext(undefined);
     /** The provider for the {@link FocusContext}. */
     function FocusProvider(props) {
         var navigation = useNavigation();
         var modifiers = useModifiers();
-        var _a = React.useState(), focusedDay = _a[0], setFocusedDay = _a[1];
-        var _b = React.useState(), lastFocused = _b[0], setLastFocused = _b[1];
+        var _a = React__default.useState(), focusedDay = _a[0], setFocusedDay = _a[1];
+        var _b = React__default.useState(), lastFocused = _b[0], setLastFocused = _b[1];
         var initialFocusTarget = getInitialFocusTarget(navigation.displayMonths, modifiers);
         // TODO: cleanup and test obscure code below
         var focusTarget = (focusedDay !== null && focusedDay !== void 0 ? focusedDay : (lastFocused && navigation.isDateDisplayed(lastFocused)))
@@ -8415,7 +8412,7 @@
             focusStartOfWeek: function () { return moveFocus('startOfWeek', 'before'); },
             focusEndOfWeek: function () { return moveFocus('endOfWeek', 'after'); }
         };
-        return (React.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
@@ -8424,7 +8421,7 @@
      * This hook is meant to be used inside internal or custom components.
      */
     function useFocusContext() {
-        var context = React.useContext(FocusContext);
+        var context = React__default.useContext(FocusContext);
         if (!context) {
             throw new Error('useFocusContext must be used within a FocusProvider');
         }
@@ -8456,16 +8453,16 @@
      *
      * Access this context from the {@link useSelectSingle} hook.
      */
-    var SelectSingleContext = React.createContext(undefined);
+    var SelectSingleContext = React__default.createContext(undefined);
     /** Provides the values for the {@link SelectSingleProvider}. */
     function SelectSingleProvider(props) {
         if (!isDayPickerSingle(props.initialProps)) {
             var emptyContextValue = {
                 selected: undefined
             };
-            return (React.createElement(SelectSingleContext.Provider, { value: emptyContextValue }, props.children));
+            return (React__default.createElement(SelectSingleContext.Provider, { value: emptyContextValue }, props.children));
         }
-        return (React.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;
@@ -8482,7 +8479,7 @@
             selected: initialProps.selected,
             onDayClick: onDayClick
         };
-        return (React.createElement(SelectSingleContext.Provider, { value: contextValue }, children));
+        return (React__default.createElement(SelectSingleContext.Provider, { value: contextValue }, children));
     }
     /**
      * Hook to access the {@link SelectSingleContextValue}.
@@ -8490,7 +8487,7 @@
      * This hook is meant to be used inside internal or custom components.
      */
     function useSelectSingle() {
-        var context = React.useContext(SelectSingleContext);
+        var context = React__default.useContext(SelectSingleContext);
         if (!context) {
             throw new Error('useSelectSingle must be used within a SelectSingleProvider');
         }
@@ -8729,7 +8726,7 @@
         var selectedDays = useSelectedDays();
         var isButton = Boolean(dayPicker.onDayClick || dayPicker.mode !== 'default');
         // Focus the button if the day is focused according to the focus context
-        React.useEffect(function () {
+        React__default.useEffect(function () {
             var _a;
             if (activeModifiers.outside)
                 return;
@@ -8752,7 +8749,7 @@
         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.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,
@@ -8780,15 +8777,15 @@
      * modifiers.
      */
     function Day(props) {
-        var buttonRef = React.useRef(null);
+        var buttonRef = React__default.useRef(null);
         var dayRender = useDayRender(props.date, props.displayMonth, buttonRef);
         if (dayRender.isHidden) {
-            return React.createElement("div", { role: "gridcell" });
+            return React__default.createElement("div", { role: "gridcell" });
         }
         if (!dayRender.isButton) {
-            return React.createElement("div", __assign({}, dayRender.divProps));
+            return React__default.createElement("div", __assign({}, dayRender.divProps));
         }
-        return React.createElement(Button, __assign({ name: "day", ref: buttonRef }, dayRender.buttonProps));
+        return React__default.createElement(Button, __assign({ name: "day", ref: buttonRef }, dayRender.buttonProps));
     }
 
     /**
@@ -8800,13 +8797,13 @@
         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.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.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. */
@@ -8817,13 +8814,13 @@
         var WeeknumberComponent = (_b = components === null || components === void 0 ? void 0 : components.WeekNumber) !== null && _b !== void 0 ? _b : WeekNumber;
         var weekNumberCell;
         if (showWeekNumber) {
-            weekNumberCell = (React.createElement("td", { className: classNames.cell, style: styles.cell },
-                React.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.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.createElement("td", { className: classNames.cell, style: styles.cell, key: getUnixTime(date), role: "presentation" },
-                React.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.  */
@@ -8891,10 +8888,10 @@
         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.createElement("table", { id: props.id, className: classNames.table, style: styles.table, role: "grid", "aria-labelledby": props['aria-labelledby'] },
-            !hideHead && React.createElement(HeadComponent, null),
-            React.createElement("tbody", { className: classNames.tbody, style: styles.tbody, role: "rowgroup" }, weeks.map(function (week) { return (React.createElement(RowComponent, { displayMonth: props.displayMonth, key: week.weekNumber, dates: week.dates, weekNumber: week.weekNumber })); })),
-            React.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 })));
     }
 
     /*
@@ -8938,8 +8935,8 @@
      * @param deps
      */
     var useIsomorphicLayoutEffect = canUseDOM()
-        ? React__namespace.useLayoutEffect
-        : React__namespace.useEffect;
+        ? React__default__namespace.useLayoutEffect
+        : React__default__namespace.useEffect;
     var serverHandoffComplete = false;
     var id = 0;
     function genId() {
@@ -8952,7 +8949,7 @@
         // 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__namespace.useState(initialId), id = _b[0], setId = _b[1];
+        var _b = React__default__namespace.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
@@ -8963,7 +8960,7 @@
             }
             // eslint-disable-next-line react-hooks/exhaustive-deps
         }, []);
-        React__namespace.useEffect(function () {
+        React__default__namespace.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
@@ -9006,9 +9003,9 @@
             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.createElement("div", { key: props.displayIndex, className: className.join(' '), style: style },
-            React.createElement(CaptionComponent, { id: captionId, displayMonth: props.displayMonth }),
-            React.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. */
@@ -9017,9 +9014,9 @@
         var dayPicker = useDayPicker();
         var focusContext = useFocusContext();
         var navigation = useNavigation();
-        var _b = React.useState(false), hasInitialFocus = _b[0], setHasInitialFocus = _b[1];
+        var _b = React__default.useState(false), hasInitialFocus = _b[0], setHasInitialFocus = _b[1];
         // Focus the focus target when initialFocus is passed in
-        React.useEffect(function () {
+        React__default.useEffect(function () {
             if (!dayPicker.initialFocus)
                 return;
             if (!focusContext.focusTarget)
@@ -9050,20 +9047,20 @@
             var _a;
             return __assign(__assign({}, attrs), (_a = {}, _a[key] = initialProps[key], _a));
         }, {});
-        return (React.createElement("div", __assign({ className: classNames.join(' '), style: style, dir: dayPicker.dir, id: dayPicker.id }, dataAttributes),
-            React.createElement("div", { className: dayPicker.classNames.months, style: dayPicker.styles.months }, navigation.displayMonths.map(function (month, i) { return (React.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.createElement(DayPickerProvider, { initialProps: initialProps },
-            React.createElement(NavigationProvider, null,
-                React.createElement(SelectSingleProvider, { initialProps: initialProps },
-                    React.createElement(SelectMultipleProvider, { initialProps: initialProps },
-                        React.createElement(SelectRangeProvider, { initialProps: initialProps },
-                            React.createElement(ModifiersProvider, null,
-                                React.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))))))));
     }
 
     /**
@@ -9154,8 +9151,8 @@
      * ```
      */
     function DayPicker(props) {
-        return (React.createElement(RootProvider, __assign({}, props),
-            React.createElement(Root, { initialProps: props })));
+        return (React__default.createElement(RootProvider, __assign({}, props),
+            React__default.createElement(Root, { initialProps: props })));
     }
 
     var reactResponsive$1 = {exports: {}};
@@ -9169,7 +9166,7 @@
     	hasRequiredReactResponsive = 1;
     	(function (module, exports) {
     		(function webpackUniversalModuleDefinition(root, factory) {
-    			module.exports = factory(React);
+    			module.exports = factory(React__default);
     		})(reactResponsive, (__WEBPACK_EXTERNAL_MODULE_react__) => {
     		return /******/ (() => { // webpackBootstrap
     		/******/ 	var __webpack_modules__ = ({
@@ -10998,19 +10995,15 @@
         var fill = _a.fill, size = _a.size, icon = _a.icon;
         switch (icon) {
             case 'spinner':
-                return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "".concat(size || 25), height: "".concat(size || 25), viewBox: "0 0 24 24" },
-                    React.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.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.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 })));
+                return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "".concat(size || 25), height: "".concat(size || 25), viewBox: "0 0 24 24", children: [jsxRuntime.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      " }), jsxRuntime.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 }), jsxRuntime.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 })] }));
             case 'warning':
-                return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "".concat(size || 25), height: "".concat(size || 25), className: "svg-icon", style: {
+                return (jsxRuntime.jsx("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" },
-                    React.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" })));
+                    }, viewBox: "0 0 1024 1024", version: "1.1", children: jsxRuntime.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" }) }));
             default:
                 return null;
         }
@@ -11336,7 +11329,7 @@
                 calendarRangeTo &&
                 areIntervalsOverlapping({ start: calendarRangeFrom, end: calendarRangeTo }, { start: rangeFrom, end: rangeTo }));
         });
-        React.useEffect(function () {
+        React__default.useEffect(function () {
             if ((rangeContext &&
                 calendarRangeFrom &&
                 !startIsEqualOrBeforeRangeContextEnd) ||
@@ -11351,7 +11344,7 @@
 
     var useCalendarTooltips = function (_a) {
         var showFeedback = _a.showFeedback;
-        return React.useEffect(function () {
+        return React__default.useEffect(function () {
             if (typeof document === 'undefined' || !showFeedback)
                 return;
             // Children
@@ -11428,7 +11421,7 @@
 
     var useCalendarLoadingSpinner = function (_a) {
         var loadingData = _a.loadingData;
-        return React.useEffect(function () {
+        return React__default.useEffect(function () {
             if (typeof document === 'undefined')
                 return;
             var loadingSpinner = document.querySelector('.will-filter-bar-calendar .rdp-months .will-calendar-spinner');
@@ -11445,9 +11438,9 @@
 
     var useUpdateDisabledDates = function (_a) {
         var disableCalendarDates = _a.disableCalendarDates, calendarRange = _a.calendarRange, updateCalendarMonthNavigation = _a.updateCalendarMonthNavigation, updateCalendarDefaultMonth = _a.updateCalendarDefaultMonth;
-        var _b = __read(React.useState(undefined), 2), overlappingDate = _b[0], setOverlappingDate = _b[1];
-        var _c = __read(React.useState([]), 2), lastPossibleCheckout = _c[0], setLatsPossibleCheckout = _c[1];
-        var newDisableCalendarDates = React.useMemo(function () {
+        var _b = __read(React__default.useState(undefined), 2), overlappingDate = _b[0], setOverlappingDate = _b[1];
+        var _c = __read(React__default.useState([]), 2), lastPossibleCheckout = _c[0], setLatsPossibleCheckout = _c[1];
+        var newDisableCalendarDates = React__default.useMemo(function () {
             var _a;
             if (disableCalendarDates === null || disableCalendarDates === void 0 ? void 0 : disableCalendarDates.availableDates) {
                 var dateFormat_1 = 'dd-MM-yyyy';
@@ -11498,13 +11491,13 @@
         return { newDisableCalendarDates: newDisableCalendarDates, overlappingDate: overlappingDate, lastPossibleCheckout: lastPossibleCheckout };
     };
 
-    var css_248z$c = ".rdp {\n  --rdp-cell-size: 40px;\n  --rdp-caption-font-size: 18px;\n  --rdp-accent-color: #0000ff;\n  --rdp-background-color: #e7edff;\n  --rdp-accent-color-dark: #3003e1;\n  --rdp-background-color-dark: #180270;\n  --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */\n  --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */\n\n  margin: 1em;\n}\n\n/* Hide elements for devices that are not screen readers */\n.rdp-vhidden {\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  background: transparent;\n  border: 0;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  appearance: none;\n  position: absolute !important;\n  top: 0;\n  width: 1px !important;\n  height: 1px !important;\n  padding: 0 !important;\n  overflow: hidden !important;\n  clip: rect(1px, 1px, 1px, 1px) !important;\n  border: 0 !important;\n}\n\n/* Buttons */\n.rdp-button_reset {\n  appearance: none;\n  position: relative;\n  margin: 0;\n  padding: 0;\n  cursor: default;\n  color: inherit;\n  background: none;\n  font: inherit;\n\n  -moz-appearance: none;\n  -webkit-appearance: none;\n}\n\n.rdp-button_reset:focus-visible {\n  /* Make sure to reset outline only when :focus-visible is supported */\n  outline: none;\n}\n\n.rdp-button {\n  border: 2px solid transparent;\n}\n\n.rdp-button[disabled]:not(.rdp-day_selected) {\n  opacity: 0.25;\n}\n\n.rdp-button:not([disabled]) {\n  cursor: pointer;\n}\n\n.rdp-button:focus-visible:not([disabled]) {\n  color: inherit;\n  background-color: var(--rdp-background-color);\n  border: var(--rdp-outline);\n}\n\n.rdp-button:hover:not([disabled]):not(.rdp-day_selected) {\n  background-color: var(--rdp-background-color);\n}\n\n.rdp-months {\n  display: flex;\n}\n\n.rdp-month {\n  margin: 0 1em;\n}\n\n.rdp-month:first-child {\n  margin-left: 0;\n}\n\n.rdp-month:last-child {\n  margin-right: 0;\n}\n\n.rdp-table {\n  margin: 0;\n  max-width: calc(var(--rdp-cell-size) * 7);\n  border-collapse: collapse;\n}\n\n.rdp-with_weeknumber .rdp-table {\n  max-width: calc(var(--rdp-cell-size) * 8);\n  border-collapse: collapse;\n}\n\n.rdp-caption {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0;\n  text-align: left;\n}\n\n.rdp-multiple_months .rdp-caption {\n  position: relative;\n  display: block;\n  text-align: center;\n}\n\n.rdp-caption_dropdowns {\n  position: relative;\n  display: inline-flex;\n}\n\n.rdp-caption_label {\n  position: relative;\n  z-index: 1;\n  display: inline-flex;\n  align-items: center;\n  margin: 0;\n  padding: 0 0.25em;\n  white-space: nowrap;\n  color: currentColor;\n  border: 0;\n  border: 2px solid transparent;\n  font-family: inherit;\n  font-size: var(--rdp-caption-font-size);\n  font-weight: bold;\n}\n\n.rdp-nav {\n  white-space: nowrap;\n}\n\n.rdp-multiple_months .rdp-caption_start .rdp-nav {\n  position: absolute;\n  top: 50%;\n  left: 0;\n  transform: translateY(-50%);\n}\n\n.rdp-multiple_months .rdp-caption_end .rdp-nav {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  transform: translateY(-50%);\n}\n\n.rdp-nav_button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--rdp-cell-size);\n  height: var(--rdp-cell-size);\n  padding: 0.25em;\n  border-radius: 100%;\n}\n\n/* ---------- */\n/* Dropdowns  */\n/* ---------- */\n\n.rdp-dropdown_year,\n.rdp-dropdown_month {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n.rdp-dropdown {\n  appearance: none;\n  position: absolute;\n  z-index: 2;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  cursor: inherit;\n  opacity: 0;\n  border: none;\n  background-color: transparent;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n\n.rdp-dropdown[disabled] {\n  opacity: unset;\n  color: unset;\n}\n\n.rdp-dropdown:focus-visible:not([disabled]) + .rdp-caption_label {\n  background-color: var(--rdp-background-color);\n  border: var(--rdp-outline);\n  border-radius: 6px;\n}\n\n.rdp-dropdown_icon {\n  margin: 0 0 0 5px;\n}\n\n.rdp-head {\n  border: 0;\n}\n\n.rdp-head_row,\n.rdp-row {\n  height: 100%;\n}\n\n.rdp-head_cell {\n  vertical-align: middle;\n  font-size: 0.75em;\n  font-weight: 700;\n  text-align: center;\n  height: 100%;\n  height: var(--rdp-cell-size);\n  padding: 0;\n  text-transform: uppercase;\n}\n\n.rdp-tbody {\n  border: 0;\n}\n\n.rdp-tfoot {\n  margin: 0.5em;\n}\n\n.rdp-cell {\n  width: var(--rdp-cell-size);\n  height: 100%;\n  height: var(--rdp-cell-size);\n  padding: 0;\n  text-align: center;\n}\n\n.rdp-weeknumber {\n  font-size: 0.75em;\n}\n\n.rdp-weeknumber,\n.rdp-day {\n  display: flex;\n  overflow: hidden;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--rdp-cell-size);\n  max-width: var(--rdp-cell-size);\n  height: var(--rdp-cell-size);\n  margin: 0;\n  border: 2px solid transparent;\n  border-radius: 100%;\n}\n\n.rdp-day_today:not(.rdp-day_outside) {\n  font-weight: bold;\n}\n\n.rdp-day_selected,\n.rdp-day_selected:focus-visible,\n.rdp-day_selected:hover {\n  color: white;\n  opacity: 1;\n  background-color: var(--rdp-accent-color);\n}\n\n.rdp-day_outside {\n  opacity: 0.5;\n}\n\n.rdp-day_selected:focus-visible {\n  /* Since the background is the same use again the outline */\n  outline: var(--rdp-outline);\n  outline-offset: 2px;\n  z-index: 1;\n}\n\n.rdp:not([dir='rtl']) .rdp-day_range_start:not(.rdp-day_range_end) {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n.rdp:not([dir='rtl']) .rdp-day_range_end:not(.rdp-day_range_start) {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n.rdp[dir='rtl'] .rdp-day_range_start:not(.rdp-day_range_end) {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n.rdp[dir='rtl'] .rdp-day_range_end:not(.rdp-day_range_start) {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n.rdp-day_range_end.rdp-day_range_start {\n  border-radius: 100%;\n}\n\n.rdp-day_range_middle {\n  border-radius: 0;\n}";
-    styleInject(css_248z$c);
+    var css_248z$d = ".rdp {\n  --rdp-cell-size: 40px;\n  --rdp-caption-font-size: 18px;\n  --rdp-accent-color: #0000ff;\n  --rdp-background-color: #e7edff;\n  --rdp-accent-color-dark: #3003e1;\n  --rdp-background-color-dark: #180270;\n  --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */\n  --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */\n\n  margin: 1em;\n}\n\n/* Hide elements for devices that are not screen readers */\n.rdp-vhidden {\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  background: transparent;\n  border: 0;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  appearance: none;\n  position: absolute !important;\n  top: 0;\n  width: 1px !important;\n  height: 1px !important;\n  padding: 0 !important;\n  overflow: hidden !important;\n  clip: rect(1px, 1px, 1px, 1px) !important;\n  border: 0 !important;\n}\n\n/* Buttons */\n.rdp-button_reset {\n  appearance: none;\n  position: relative;\n  margin: 0;\n  padding: 0;\n  cursor: default;\n  color: inherit;\n  background: none;\n  font: inherit;\n\n  -moz-appearance: none;\n  -webkit-appearance: none;\n}\n\n.rdp-button_reset:focus-visible {\n  /* Make sure to reset outline only when :focus-visible is supported */\n  outline: none;\n}\n\n.rdp-button {\n  border: 2px solid transparent;\n}\n\n.rdp-button[disabled]:not(.rdp-day_selected) {\n  opacity: 0.25;\n}\n\n.rdp-button:not([disabled]) {\n  cursor: pointer;\n}\n\n.rdp-button:focus-visible:not([disabled]) {\n  color: inherit;\n  background-color: var(--rdp-background-color);\n  border: var(--rdp-outline);\n}\n\n.rdp-button:hover:not([disabled]):not(.rdp-day_selected) {\n  background-color: var(--rdp-background-color);\n}\n\n.rdp-months {\n  display: flex;\n}\n\n.rdp-month {\n  margin: 0 1em;\n}\n\n.rdp-month:first-child {\n  margin-left: 0;\n}\n\n.rdp-month:last-child {\n  margin-right: 0;\n}\n\n.rdp-table {\n  margin: 0;\n  max-width: calc(var(--rdp-cell-size) * 7);\n  border-collapse: collapse;\n}\n\n.rdp-with_weeknumber .rdp-table {\n  max-width: calc(var(--rdp-cell-size) * 8);\n  border-collapse: collapse;\n}\n\n.rdp-caption {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0;\n  text-align: left;\n}\n\n.rdp-multiple_months .rdp-caption {\n  position: relative;\n  display: block;\n  text-align: center;\n}\n\n.rdp-caption_dropdowns {\n  position: relative;\n  display: inline-flex;\n}\n\n.rdp-caption_label {\n  position: relative;\n  z-index: 1;\n  display: inline-flex;\n  align-items: center;\n  margin: 0;\n  padding: 0 0.25em;\n  white-space: nowrap;\n  color: currentColor;\n  border: 0;\n  border: 2px solid transparent;\n  font-family: inherit;\n  font-size: var(--rdp-caption-font-size);\n  font-weight: bold;\n}\n\n.rdp-nav {\n  white-space: nowrap;\n}\n\n.rdp-multiple_months .rdp-caption_start .rdp-nav {\n  position: absolute;\n  top: 50%;\n  left: 0;\n  transform: translateY(-50%);\n}\n\n.rdp-multiple_months .rdp-caption_end .rdp-nav {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  transform: translateY(-50%);\n}\n\n.rdp-nav_button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--rdp-cell-size);\n  height: var(--rdp-cell-size);\n  padding: 0.25em;\n  border-radius: 100%;\n}\n\n/* ---------- */\n/* Dropdowns  */\n/* ---------- */\n\n.rdp-dropdown_year,\n.rdp-dropdown_month {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n.rdp-dropdown {\n  appearance: none;\n  position: absolute;\n  z-index: 2;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  cursor: inherit;\n  opacity: 0;\n  border: none;\n  background-color: transparent;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n\n.rdp-dropdown[disabled] {\n  opacity: unset;\n  color: unset;\n}\n\n.rdp-dropdown:focus-visible:not([disabled]) + .rdp-caption_label {\n  background-color: var(--rdp-background-color);\n  border: var(--rdp-outline);\n  border-radius: 6px;\n}\n\n.rdp-dropdown_icon {\n  margin: 0 0 0 5px;\n}\n\n.rdp-head {\n  border: 0;\n}\n\n.rdp-head_row,\n.rdp-row {\n  height: 100%;\n}\n\n.rdp-head_cell {\n  vertical-align: middle;\n  font-size: 0.75em;\n  font-weight: 700;\n  text-align: center;\n  height: 100%;\n  height: var(--rdp-cell-size);\n  padding: 0;\n  text-transform: uppercase;\n}\n\n.rdp-tbody {\n  border: 0;\n}\n\n.rdp-tfoot {\n  margin: 0.5em;\n}\n\n.rdp-cell {\n  width: var(--rdp-cell-size);\n  height: 100%;\n  height: var(--rdp-cell-size);\n  padding: 0;\n  text-align: center;\n}\n\n.rdp-weeknumber {\n  font-size: 0.75em;\n}\n\n.rdp-weeknumber,\n.rdp-day {\n  display: flex;\n  overflow: hidden;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--rdp-cell-size);\n  max-width: var(--rdp-cell-size);\n  height: var(--rdp-cell-size);\n  margin: 0;\n  border: 2px solid transparent;\n  border-radius: 100%;\n}\n\n.rdp-day_today:not(.rdp-day_outside) {\n  font-weight: bold;\n}\n\n.rdp-day_selected,\n.rdp-day_selected:focus-visible,\n.rdp-day_selected:hover {\n  color: white;\n  opacity: 1;\n  background-color: var(--rdp-accent-color);\n}\n\n.rdp-day_outside {\n  opacity: 0.5;\n}\n\n.rdp-day_selected:focus-visible {\n  /* Since the background is the same use again the outline */\n  outline: var(--rdp-outline);\n  outline-offset: 2px;\n  z-index: 1;\n}\n\n.rdp:not([dir='rtl']) .rdp-day_range_start:not(.rdp-day_range_end) {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n.rdp:not([dir='rtl']) .rdp-day_range_end:not(.rdp-day_range_start) {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n.rdp[dir='rtl'] .rdp-day_range_start:not(.rdp-day_range_end) {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n.rdp[dir='rtl'] .rdp-day_range_end:not(.rdp-day_range_start) {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n.rdp-day_range_end.rdp-day_range_start {\n  border-radius: 100%;\n}\n\n.rdp-day_range_middle {\n  border-radius: 0;\n}";
+    styleInject(css_248z$d);
 
-    var css_248z$b = ".will-calendar-filter-container {\n  display: flex;\n  justify-content: center;\n  user-select: none;\n}\n\n/* Calendar overrides */\n.will-calendar-filter-container .rdp {\n  margin: 0;\n}\n\n.will-calendar-filter-container .DayPicker {\n  font-size: 25px;\n}\n\n.will-calendar-filter-container .rdp-month {\n  position: relative;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_start {\n  padding-left: 70px;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_end {\n  padding-right: 70px;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav {\n  border: 1px solid var(--will-primary);\n  border-radius: 50%;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav svg {\n  color: var(--will-primary);\n}\n\n.will-calendar-filter-container .rdp-month .rdp-caption {\n  position: initial;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-caption > .rdp-caption_label,\n.will-calendar-filter-container .rdp-table .rdp-head {\n  opacity: 0.6;\n}\n\n.will-calendar-filter-container .rdp-table {\n  border-collapse: separate;\n  border-spacing: 0px 2px;\n}\n\n.will-calendar-filter-container\n  .rdp-button_reset.rdp-button.rdp-day.rdp-day_selected {\n  background-color: var(--will-primary);\n  opacity: 1;\n  color: var(--will-white);\n}\n\n.will-calendar-filter-container .my-today:not(.rdp-day_selected) {\n  font-weight: 700;\n  opacity: 1;\n  color: var(--will-primary);\n}\n\n.will-calendar-filter-container .rdp-cell {\n  position: relative;\n}\n\n.will-calendar-filter-container .rdp-cell button {\n  font-weight: 500;\n}\n\n.will-calendar-filter-container .rdp-cell button.booked {\n  font-weight: 400;\n  cursor: not-allowed;\n}\n\n.will-calendar-filter-container .rdp-cell .rdp-button[disabled] {\n  color: var(--will-transparent-black);\n  opacity: 1;\n}\n\n@media (max-width: 960px) {\n  .will-calendar-filter-container .rdp-month .rdp-nav {\n    border: none;\n    border-radius: initial;\n  }\n\n  .will-calendar-filter-container .rdp-month.rdp-caption_start {\n    padding-left: 10px;\n  }\n\n  .will-calendar-filter-container .rdp-month.rdp-caption_end {\n    padding-right: 10px;\n  }\n}\n\n/* Tooltips */\n.will-root .will-calendar-filter-container .will-calendar-tooltip,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out,\n.will-root\n  .will-calendar-filter-container\n  .will-calendar-tooltip-overlapping-date,\n.will-root\n  .will-calendar-filter-container\n  .will-calendar-tooltip-check-out-only,\n.will-root\n  .will-calendar-filter-container\n  .will-calendar-tooltip-check-in-only {\n  position: absolute;\n  top: -42px;\n  transform: translateX(calc(-50% + 20px));\n  display: none;\n  white-space: nowrap;\n  z-index: 2;\n}\n\n.will-root .will-calendar-filter-container .will-calendar-tooltip > div,\n.will-root\n  .will-calendar-filter-container\n  .will-calendar-tooltip-check-out\n  > div,\n.will-root\n  .will-calendar-filter-container\n  .will-calendar-tooltip-overlapping-date\n  > div,\n.will-root\n  .will-calendar-filter-container\n  .will-calendar-tooltip-check-out-only\n  > div,\n.will-root\n  .will-calendar-filter-container\n  .will-calendar-tooltip-check-in-only\n  > div {\n  background-color: white;\n  position: relative;\n  padding: 5px 10px;\n  border: 1px solid var(--will-primary);\n  border-radius: 5px;\n}\n\n.will-root .will-calendar-filter-container .will-calendar-tooltip::before,\n.will-root\n  .will-calendar-filter-container\n  .will-calendar-tooltip-check-out::before,\n.will-root\n  .will-calendar-filter-container\n  .will-calendar-tooltip-overlapping-date::before,\n.will-root\n  .will-calendar-filter-container\n  .will-calendar-tooltip-check-out-only::before,\n.will-root\n  .will-calendar-filter-container\n  .will-calendar-tooltip-check-in-only::before {\n  content: '';\n  width: 10px;\n  height: 10px;\n  border: 1px solid var(--will-primary);\n  position: absolute;\n  bottom: -4px;\n  left: calc(50% - 5.555px);\n  rotate: 45deg;\n  z-index: 0;\n  background-color: var(--will-white);\n}\n\n.will-root\n  .will-calendar-filter-container\n  .rdp-cell:hover\n  .will-calendar-tooltip,\n.will-root\n  .will-calendar-filter-container\n  .rdp-cell:hover\n  .will-calendar-tooltip-check-out,\n.will-root\n  .will-calendar-filter-container\n  .rdp-cell:hover\n  .will-calendar-tooltip-overlapping-date,\n.will-root\n  .will-calendar-filter-container\n  .rdp-cell:hover\n  .will-calendar-tooltip-check-out-only,\n.will-root\n  .will-calendar-filter-container\n  .rdp-cell:hover\n  .will-calendar-tooltip-check-in-only {\n  display: block;\n}\n\n/* Loading spinner */\n\n.will-root .will-calendar-filter-container .rdp-months {\n  position: relative;\n}\n\n.will-root .will-calendar-filter-container .will-calendar-spinner {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background-color: var(--will-white-transparent);\n  z-index: 3;\n  display: none;\n  justify-content: center;\n  align-items: center;\n  font-weight: 600;\n}\n\n/* No active selection */\n\n.will-root .will-calendar-filter-container .no-active-selection-start,\n.will-root .will-calendar-filter-container .no-active-selection-mid,\n.will-root .will-calendar-filter-container .no-active-selection-end {\n  position: initial;\n}\n\n.will-root .will-calendar-filter-container .no-active-selection-start::before,\n.will-root .will-calendar-filter-container .no-active-selection-mid::before,\n.will-root .will-calendar-filter-container .no-active-selection-end::before {\n  content: '';\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 2px solid var(--will-light-grey);\n  box-sizing: border-box;\n}\n\n.will-root .will-calendar-filter-container .no-active-selection-start::before {\n  border-right: none;\n  border-top-left-radius: 50%;\n  border-bottom-left-radius: 50%;\n}\n\n.will-root .will-calendar-filter-container .no-active-selection-mid::before {\n  border-right: none;\n  border-left: none;\n}\n\n.will-root .will-calendar-filter-container .no-active-selection-end::before {\n  border-left: none;\n  border-top-right-radius: 50%;\n  border-bottom-right-radius: 50%;\n}\n\n.will-root\n  .will-calendar-filter-container\n  .rdp-day_selected.rdp-day_range_middle.checkout-option {\n  background-color: var(--will-primary-lightest);\n  color: inherit;\n}\n\n/* Overlapping date */\n\n.will-root .will-calendar-filter-container .overlapping-date {\n  user-select: none;\n  pointer-events: none;\n}\n\n.will-root .will-calendar-filter-container .overlapping-date:hover {\n  cursor: not-allowed;\n}\n\n@media (max-width: 600px) {\n  /* Tooltips */\n  .will-root .will-calendar-filter-container .will-calendar-tooltip,\n  .will-root .will-calendar-filter-container .will-calendar-tooltip-check-out,\n  .will-root\n    .will-calendar-filter-container\n    .will-calendar-tooltip-overlapping-date,\n  .will-root\n    .will-calendar-filter-container\n    .will-calendar-tooltip-check-out-only,\n  .will-root\n    .will-calendar-filter-container\n    .will-calendar-tooltip-check-in-only {\n    top: -70px;\n    white-space: wrap;\n    max-width: 120px;\n  }\n}\n";
-    styleInject(css_248z$b);
+    var css_248z$c = ".will-calendar-filter-container {\n  display: flex;\n  justify-content: center;\n  user-select: none;\n}\n\n/* Calendar overrides */\n.will-calendar-filter-container .rdp {\n  margin: 0;\n}\n\n.will-calendar-filter-container .DayPicker {\n  font-size: 25px;\n}\n\n.will-calendar-filter-container .rdp-month {\n  position: relative;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_start {\n  padding-left: 70px;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_end {\n  padding-right: 70px;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav {\n  border: 1px solid var(--will-primary);\n  border-radius: 50%;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav svg {\n  color: var(--will-primary);\n}\n\n.will-calendar-filter-container .rdp-month .rdp-caption {\n  position: initial;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-caption > .rdp-caption_label,\n.will-calendar-filter-container .rdp-table .rdp-head {\n  opacity: 0.6;\n}\n\n.will-calendar-filter-container .rdp-table {\n  border-collapse: separate;\n  border-spacing: 0px 2px;\n}\n\n.will-calendar-filter-container\n  .rdp-button_reset.rdp-button.rdp-day.rdp-day_selected {\n  background-color: var(--will-primary);\n  opacity: 1;\n  color: var(--will-white);\n}\n\n.will-calendar-filter-container .my-today:not(.rdp-day_selected) {\n  font-weight: 700;\n  opacity: 1;\n  color: var(--will-primary);\n}\n\n.will-calendar-filter-container .rdp-cell {\n  position: relative;\n}\n\n.will-calendar-filter-container .rdp-cell button {\n  font-weight: 500;\n}\n\n.will-calendar-filter-container .rdp-cell button.booked {\n  font-weight: 400;\n  cursor: not-allowed;\n}\n\n.will-calendar-filter-container .rdp-cell .rdp-button[disabled] {\n  color: var(--will-transparent-black);\n  opacity: 1;\n}\n\n@media (max-width: 960px) {\n  .will-calendar-filter-container .rdp-month .rdp-nav {\n    border: none;\n    border-radius: initial;\n  }\n\n  .will-calendar-filter-container .rdp-month.rdp-caption_start {\n    padding-left: 10px;\n  }\n\n  .will-calendar-filter-container .rdp-month.rdp-caption_end {\n    padding-right: 10px;\n  }\n}\n\n/* Tooltips */\n.will-root .will-calendar-filter-container .will-calendar-tooltip,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out,\n.will-root\n  .will-calendar-filter-container\n  .will-calendar-tooltip-overlapping-date,\n.will-root\n  .will-calendar-filter-container\n  .will-calendar-tooltip-check-out-only,\n.will-root\n  .will-calendar-filter-container\n  .will-calendar-tooltip-check-in-only {\n  position: absolute;\n  top: -42px;\n  transform: translateX(calc(-50% + 20px));\n  display: none;\n  white-space: nowrap;\n  z-index: 2;\n}\n\n.will-root .will-calendar-filter-container .will-calendar-tooltip > div,\n.will-root\n  .will-calendar-filter-container\n  .will-calendar-tooltip-check-out\n  > div,\n.will-root\n  .will-calendar-filter-container\n  .will-calendar-tooltip-overlapping-date\n  > div,\n.will-root\n  .will-calendar-filter-container\n  .will-calendar-tooltip-check-out-only\n  > div,\n.will-root\n  .will-calendar-filter-container\n  .will-calendar-tooltip-check-in-only\n  > div {\n  background-color: white;\n  position: relative;\n  padding: 5px 10px;\n  border: 1px solid var(--will-primary);\n  border-radius: 5px;\n}\n\n.will-root .will-calendar-filter-container .will-calendar-tooltip::before,\n.will-root\n  .will-calendar-filter-container\n  .will-calendar-tooltip-check-out::before,\n.will-root\n  .will-calendar-filter-container\n  .will-calendar-tooltip-overlapping-date::before,\n.will-root\n  .will-calendar-filter-container\n  .will-calendar-tooltip-check-out-only::before,\n.will-root\n  .will-calendar-filter-container\n  .will-calendar-tooltip-check-in-only::before {\n  content: '';\n  width: 10px;\n  height: 10px;\n  border: 1px solid var(--will-primary);\n  position: absolute;\n  bottom: -4px;\n  left: calc(50% - 5.555px);\n  rotate: 45deg;\n  z-index: 0;\n  background-color: var(--will-white);\n}\n\n.will-root\n  .will-calendar-filter-container\n  .rdp-cell:hover\n  .will-calendar-tooltip,\n.will-root\n  .will-calendar-filter-container\n  .rdp-cell:hover\n  .will-calendar-tooltip-check-out,\n.will-root\n  .will-calendar-filter-container\n  .rdp-cell:hover\n  .will-calendar-tooltip-overlapping-date,\n.will-root\n  .will-calendar-filter-container\n  .rdp-cell:hover\n  .will-calendar-tooltip-check-out-only,\n.will-root\n  .will-calendar-filter-container\n  .rdp-cell:hover\n  .will-calendar-tooltip-check-in-only {\n  display: block;\n}\n\n/* Loading spinner */\n\n.will-root .will-calendar-filter-container .rdp-months {\n  position: relative;\n}\n\n.will-root .will-calendar-filter-container .will-calendar-spinner {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background-color: var(--will-white-transparent);\n  z-index: 3;\n  display: none;\n  justify-content: center;\n  align-items: center;\n  font-weight: 600;\n}\n\n/* No active selection */\n\n.will-root .will-calendar-filter-container .no-active-selection-start,\n.will-root .will-calendar-filter-container .no-active-selection-mid,\n.will-root .will-calendar-filter-container .no-active-selection-end {\n  position: initial;\n}\n\n.will-root .will-calendar-filter-container .no-active-selection-start::before,\n.will-root .will-calendar-filter-container .no-active-selection-mid::before,\n.will-root .will-calendar-filter-container .no-active-selection-end::before {\n  content: '';\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 2px solid var(--will-light-grey);\n  box-sizing: border-box;\n}\n\n.will-root .will-calendar-filter-container .no-active-selection-start::before {\n  border-right: none;\n  border-top-left-radius: 50%;\n  border-bottom-left-radius: 50%;\n}\n\n.will-root .will-calendar-filter-container .no-active-selection-mid::before {\n  border-right: none;\n  border-left: none;\n}\n\n.will-root .will-calendar-filter-container .no-active-selection-end::before {\n  border-left: none;\n  border-top-right-radius: 50%;\n  border-bottom-right-radius: 50%;\n}\n\n.will-root\n  .will-calendar-filter-container\n  .rdp-day_selected.rdp-day_range_middle.checkout-option {\n  background-color: var(--will-primary-lightest);\n  color: inherit;\n}\n\n/* Overlapping date */\n\n.will-root .will-calendar-filter-container .overlapping-date {\n  user-select: none;\n  pointer-events: none;\n}\n\n.will-root .will-calendar-filter-container .overlapping-date:hover {\n  cursor: not-allowed;\n}\n\n@media (max-width: 600px) {\n  /* Tooltips */\n  .will-root .will-calendar-filter-container .will-calendar-tooltip,\n  .will-root .will-calendar-filter-container .will-calendar-tooltip-check-out,\n  .will-root\n    .will-calendar-filter-container\n    .will-calendar-tooltip-overlapping-date,\n  .will-root\n    .will-calendar-filter-container\n    .will-calendar-tooltip-check-out-only,\n  .will-root\n    .will-calendar-filter-container\n    .will-calendar-tooltip-check-in-only {\n    top: -70px;\n    white-space: wrap;\n    max-width: 120px;\n  }\n}\n";
+    styleInject(css_248z$c);
 
-    var Calendar = React.forwardRef(function (_a, ref) {
+    var Calendar = React__default.forwardRef(function (_a, ref) {
         var _b;
         var selectedPath = _a.selectedPath, calendarRange = _a.calendarRange, setCalendarRange = _a.setCalendarRange, language = _a.language, disableCalendarDates = _a.disableCalendarDates, requestDates = _a.requestDates, disabledDates = _a.disabledDates, updateCalendarMonthNavigation = _a.updateCalendarMonthNavigation, setUpdateCalendarMonthNavigation = _a.setUpdateCalendarMonthNavigation, updateCalendarDefaultMonth = _a.updateCalendarDefaultMonth, loadingData = _a.loadingData, showFeedback = _a.showFeedback, palette = _a.palette, setCalendarHasError = _a.setCalendarHasError, setUpdatedForSubmit = _a.setUpdatedForSubmit, rangeContext = _a.rangeContext, calendarHasError = _a.calendarHasError, autoFocus = _a.autoFocus;
         // Translations
@@ -11592,53 +11585,39 @@
             : __spreadArray$1(__spreadArray$1(__spreadArray$1(__spreadArray$1([
                 lastPossibleCheckout
             ], __read(base), false), __read(firstPossibleRangeContextCheckIn), false), __read(lastPossibleRangeContextCheckOut), false), __read(disabledInsideSelectableRange()), false);
-        return (React.createElement("div", { className: "will-filter-bar-calendar", ref: ref },
-            React.createElement("div", { className: "will-calendar-filter-container", ref: calendarContainerRef },
-                React.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.createElement("div", { className: 'will-calendar-tooltip' },
-                    React.createElement("div", null, t('noCheckIn'))),
-                React.createElement("div", { className: 'will-calendar-tooltip-check-out' },
-                    React.createElement("div", null, t('noCheckOut'))),
-                React.createElement("div", { className: 'will-calendar-tooltip-overlapping-date' },
-                    React.createElement("div", null, t('checkOutOnly'))),
-                React.createElement("div", { className: 'will-calendar-tooltip-check-in-only' },
-                    React.createElement("div", null, t('checkInOnly'))),
-                React.createElement("div", { className: 'will-calendar-tooltip-check-out-only' },
-                    React.createElement("div", null, t('checkOutOnly'))),
-                React.createElement("div", { className: 'will-calendar-spinner' },
-                    React.createElement(IconsSvg, { fill: (palette === null || palette === void 0 ? void 0 : palette.primary) || 'inherit', size: 50, icon: "spinner" })))));
+        return (jsxRuntime.jsx("div", { className: "will-filter-bar-calendar", ref: ref, children: jsxRuntime.jsxs("div", { className: "will-calendar-filter-container", ref: calendarContainerRef, children: [jsxRuntime.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), jsxRuntime.jsx("div", { className: 'will-calendar-tooltip', children: jsxRuntime.jsx("div", { children: t('noCheckIn') }) }), jsxRuntime.jsx("div", { className: 'will-calendar-tooltip-check-out', children: jsxRuntime.jsx("div", { children: t('noCheckOut') }) }), jsxRuntime.jsx("div", { className: 'will-calendar-tooltip-overlapping-date', children: jsxRuntime.jsx("div", { children: t('checkOutOnly') }) }), jsxRuntime.jsx("div", { className: 'will-calendar-tooltip-check-in-only', children: jsxRuntime.jsx("div", { children: t('checkInOnly') }) }), jsxRuntime.jsx("div", { className: 'will-calendar-tooltip-check-out-only', children: jsxRuntime.jsx("div", { children: t('checkOutOnly') }) }), jsxRuntime.jsx("div", { className: 'will-calendar-spinner', children: jsxRuntime.jsx(IconsSvg, { fill: (palette === null || palette === void 0 ? void 0 : palette.primary) || 'inherit', size: 50, icon: "spinner" }) })] }) }));
     });
 
     var parseGuests = function (_a) {
@@ -11667,28 +11646,13 @@
         };
     };
 
-    var getLocalizedContent = function (_a) {
-        var _b;
-        var contents = _a.contents, locale = _a.locale, _c = _a.fallbackLocale, fallbackLocale = _c === void 0 ? 'en' : _c;
-        var preferred = contents.find(function (content) { return content.locale === locale; });
-        if (preferred)
-            return preferred.content;
-        var fallback = contents.find(function (content) { return content.locale === fallbackLocale; });
-        if (fallback)
-            return fallback.content;
-        return (_b = contents[0]) === null || _b === void 0 ? void 0 : _b.content;
-    };
-
     var parseLocations = function (_a) {
-        var selectedLocations = _a.selectedLocations, language = _a.language, locationsPlaceholder = _a.locationsPlaceholder, _b = _a.locationsSelectedLabel, locationsSelectedLabel = _b === void 0 ? 'locations' : _b;
+        var selectedLocations = _a.selectedLocations, locationsPlaceholder = _a.locationsPlaceholder, _b = _a.locationsSelectedLabel, locationsSelectedLabel = _b === void 0 ? 'locations' : _b;
         if (!selectedLocations.length) {
             return locationsPlaceholder;
         }
         if (selectedLocations.length === 1) {
-            var translation = getLocalizedContent({
-                contents: selectedLocations[0].label,
-                locale: language,
-            });
+            var translation = selectedLocations[0].label;
             if (!translation) {
                 return locationsPlaceholder;
             }
@@ -11711,16 +11675,99 @@
         Pages["SALES"] = "/sales";
     })(Pages || (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 {};
+        }
+        if (!headerRef.current)
+            return {};
+        var containerRect = headerRef.current.getBoundingClientRect();
+        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;
+                    return {
+                        left: relativeLeft,
+                        right: 'auto',
+                        width: 'auto',
+                    };
+                }
+                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,
+                            width: 'auto',
+                            maxWidth: "".concat(containerRect.width, "px"),
+                        };
+                    }
+                    else {
+                        // Enough space, start from dates button
+                        return {
+                            left: relativeLeft,
+                            right: 'auto',
+                            width: 'auto',
+                        };
+                    }
+                }
+                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,
+                            width: 'auto',
+                            maxWidth: "".concat(containerRect.width, "px"),
+                        };
+                    }
+                    else {
+                        // Enough space, start from button
+                        return {
+                            left: relativeLeft,
+                            right: 'auto',
+                            width: 'auto',
+                        };
+                    }
+                }
+                break;
+            default:
+                return {};
+        }
+        return {};
+    };
+
     var useFilterBar = function (_a) {
         var redirectUrl = _a.redirectUrl, ageCategories = _a.ageCategories, onSubmit = _a.onSubmit, tabs = _a.tabs, locations = _a.locations;
-        var _b = __read(React.useState(Pages.EVENTS), 2), selectedPath = _b[0], setSelectedPath = _b[1];
-        var _c = __read(React.useState(false), 2), selectedFilter = _c[0], setSelectedFilter = _c[1];
-        var _d = __read(React.useState(), 2), calendarRange = _d[0], setCalendarRange = _d[1];
-        var _e = __read(React.useState(false), 2), innerLoading = _e[0], setInnerLoading = _e[1];
-        var _f = __read(React.useState(0), 2), categories = _f[0], setCategories = _f[1];
-        var _g = __read(React.useState({}), 2), ageCategoryCounts = _g[0], setAgeCategoryCounts = _g[1];
-        var _h = __read(React.useState([]), 2), selectedLocations = _h[0], setSelectedLocations = _h[1];
-        React.useEffect(function () {
+        var _b = __read(React__default.useState(Pages.EVENTS), 2), selectedPath = _b[0], setSelectedPath = _b[1];
+        var _c = __read(React__default.useState(false), 2), selectedFilter = _c[0], setSelectedFilter = _c[1];
+        var _d = __read(React__default.useState(), 2), calendarRange = _d[0], setCalendarRange = _d[1];
+        var _e = __read(React__default.useState(false), 2), innerLoading = _e[0], setInnerLoading = _e[1];
+        var _f = __read(React__default.useState(0), 2), categories = _f[0], setCategories = _f[1];
+        var _g = __read(React__default.useState({}), 2), ageCategoryCounts = _g[0], setAgeCategoryCounts = _g[1];
+        var _h = __read(React__default.useState([]), 2), selectedLocations = _h[0], setSelectedLocations = _h[1];
+        React__default.useEffect(function () {
             var _a;
             var urlSearchParams = new URLSearchParams(window.location.search);
             var startDateParam = urlSearchParams.get('startDate');
@@ -11745,7 +11792,7 @@
                 setSelectedLocations(matchedLocations);
             }
         }, []);
-        React.useEffect(function () {
+        React__default.useEffect(function () {
             if (typeof window === 'undefined')
                 return;
             var defaultTab = (tabs === null || tabs === void 0 ? void 0 : tabs.length) === 1 ? tabs[0] : tabs === null || tabs === void 0 ? void 0 : tabs.find(function (tab) { return tab.default; });
@@ -11878,9 +11925,9 @@
 
     var useScrollInToView = function (_a) {
         var selectedFilter = _a.selectedFilter;
-        var _b = __read(React.useState(true), 2), isMobile = _b[0], setIsMobile = _b[1];
-        var targetFilterBarRef = React.useRef(null);
-        React.useEffect(function () {
+        var _b = __read(React__default.useState(true), 2), isMobile = _b[0], setIsMobile = _b[1];
+        var targetFilterBarRef = React__default.useRef(null);
+        React__default.useEffect(function () {
             if (typeof window !== 'undefined' && window.innerWidth > 960) {
                 setIsMobile(false);
                 return;
@@ -11897,33 +11944,29 @@
         return { isMobile: isMobile, targetFilterBarRef: targetFilterBarRef };
     };
 
-    var css_248z$a = ".will-filter-bar-select-button {\n  width: 100%;\n  height: auto;\n  background-color: transparent;\n  border: none;\n  padding: 0 20px;\n  border-radius: 20px;\n  cursor: pointer;\n  font-size: 14px;\n  text-align: initial;\n}\n\n.will-filter-bar-select-button.disabled {\n  cursor: not-allowed;\n}\n\n.will-filter-bar-select-button .select-button-wrapper {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 10px;\n}\n\n.will-filter-bar-select-button .select-button-wrapper > div {\n  display: grid;\n}\n\n.will-filter-bar-select-button .select-button-label {\n  color: var(--will-black);\n  font-weight: 600;\n}\n\n.will-filter-bar-select-button .select-button-description {\n  color: var(--will-black);\n  font-weight: 400;\n  opacity: 0.5;\n  white-space: nowrap;\n  min-height: 19px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.will-filter-bar-select-button .select-button-description span {\n  font: inherit;\n}\n\n.will-filter-bar-select-button .select-button-label.active,\n.will-filter-bar-select-button .select-button-description.active {\n  font-weight: 700;\n  font-size: 15px;\n  opacity: 1;\n}\n\n@media (max-width: 960px) {\n  .will-filter-bar-select-button {\n    padding: 15px 0;\n  }\n\n  .will-filter-bar-select-button:first-child {\n    padding: 0 0 15px 0;\n  }\n\n  .will-filter-bar-select-button .select-button-wrapper {\n    justify-content: center;\n    text-align: center;\n  }\n\n  .will-filter-bar-select-button .select-button-description {\n    white-space: wrap;\n  }\n\n  .will-filter-bar-select-button .select-button-divider {\n    display: none;\n  }\n}\n";
-    styleInject(css_248z$a);
+    var css_248z$b = ".will-filter-bar-select-button {\n  width: 100%;\n  height: auto;\n  background-color: transparent;\n  border: none;\n  padding: 0 20px;\n  border-radius: 20px;\n  cursor: pointer;\n  font-size: 14px;\n  text-align: initial;\n}\n\n.will-filter-bar-select-button.disabled {\n  cursor: not-allowed;\n}\n\n.will-filter-bar-select-button .select-button-wrapper {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 10px;\n}\n\n.will-filter-bar-select-button .select-button-wrapper > div {\n  display: grid;\n}\n\n.will-filter-bar-select-button .select-button-label {\n  color: var(--will-black);\n  font-weight: 600;\n}\n\n.will-filter-bar-select-button .select-button-description {\n  color: var(--will-black);\n  font-weight: 400;\n  opacity: 0.5;\n  white-space: nowrap;\n  min-height: 19px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.will-filter-bar-select-button .select-button-description span {\n  font: inherit;\n}\n\n.will-filter-bar-select-button .select-button-label.active,\n.will-filter-bar-select-button .select-button-description.active {\n  font-weight: 700;\n  font-size: 15px;\n  opacity: 1;\n}\n\n@media (max-width: 960px) {\n  .will-filter-bar-select-button {\n    padding: 15px 0;\n  }\n\n  .will-filter-bar-select-button:first-child {\n    padding: 0 0 15px 0;\n  }\n\n  .will-filter-bar-select-button .select-button-wrapper {\n    justify-content: center;\n    text-align: center;\n  }\n\n  .will-filter-bar-select-button .select-button-description {\n    white-space: wrap;\n  }\n\n  .will-filter-bar-select-button .select-button-divider {\n    display: none;\n  }\n}\n";
+    styleInject(css_248z$b);
 
-    var SelectButton = React.forwardRef(function (_a, ref) {
+    var SelectButton = React__default.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 (React.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.createElement("span", { className: "select-button-wrapper" },
-                React.createElement("div", null,
-                    React.createElement("p", { className: "select-button-label" }, label),
-                    React.createElement("p", { className: "select-button-description ".concat(active ? 'active' : ''), dangerouslySetInnerHTML: { __html: description } })))));
+        return (jsxRuntime.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: jsxRuntime.jsx("span", { className: "select-button-wrapper", children: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("p", { className: "select-button-label", children: label }), jsxRuntime.jsx("p", { className: "select-button-description ".concat(active ? 'active' : ''), dangerouslySetInnerHTML: { __html: description } })] }) }) }));
     });
     SelectButton.displayName = 'SelectButton';
 
-    var css_248z$9 = ".will-filter-bar-tab-button {\n    width: auto;\n    height: auto;\n    padding: 10px 20px;\n    cursor: pointer;\n    border: none;\n    white-space: nowrap;\n    font-size: 16px;\n    display: flex;\n    align-items: center;\n    background-color: transparent;\n    user-select: none;\n    font-weight: 600;\n    border-radius: 50px;\n  }\n\n  .will-filter-bar-tab-button.light {\n    color: var(--will-white)\n  }\n\n  .will-filter-bar-tab-button.dark {\n    color: var(--will-black)\n  }\n\n  .will-filter-bar-tab-button.light.active,\n  .will-filter-bar-tab-button:hover {\n    background-color: var(--will-transparent-white);\n  }\n\n  .will-filter-bar-tab-button.dark.active,\n  .will-filter-bar-tab-button:hover {\n    background-color: var(--will-transparent-lavender);\n  }\n\n \n\n";
-    styleInject(css_248z$9);
+    var css_248z$a = ".will-filter-bar-tab-button {\n    width: auto;\n    height: auto;\n    padding: 10px 20px;\n    cursor: pointer;\n    border: none;\n    white-space: nowrap;\n    font-size: 16px;\n    display: flex;\n    align-items: center;\n    background-color: transparent;\n    user-select: none;\n    font-weight: 600;\n    border-radius: 50px;\n  }\n\n  .will-filter-bar-tab-button.light {\n    color: var(--will-white)\n  }\n\n  .will-filter-bar-tab-button.dark {\n    color: var(--will-black)\n  }\n\n  .will-filter-bar-tab-button.light.active,\n  .will-filter-bar-tab-button:hover {\n    background-color: var(--will-transparent-white);\n  }\n\n  .will-filter-bar-tab-button.dark.active,\n  .will-filter-bar-tab-button:hover {\n    background-color: var(--will-transparent-lavender);\n  }\n\n \n\n";
+    styleInject(css_248z$a);
 
     var TabButton = function (_a) {
         var onClick = _a.onClick, label = _a.label, active = _a.active, mode = _a.mode;
-        return (React.createElement("button", { className: "will-filter-bar-tab-button ".concat(mode || 'light', " ").concat(active && 'active', " "), onClick: onClick }, label));
+        return (jsxRuntime.jsx("button", { className: "will-filter-bar-tab-button ".concat(mode || 'light', " ").concat(active && 'active', " "), onClick: onClick, children: label }));
     };
 
-    var css_248z$8 = ".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";
-    styleInject(css_248z$8);
+    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";
+    styleInject(css_248z$9);
 
     var GuestCount = function (_a) {
         var label = _a.label, sortOrder = _a.sortOrder, id = _a.id, updateGuestsCount = _a.updateGuestsCount, count = _a.count, minVal = _a.minVal;
-        React.useEffect(function () {
+        React__default.useEffect(function () {
             if (minVal && minVal > count) {
                 updateGuestsCount("guests-".concat(id), minVal);
             }
@@ -11936,54 +11979,41 @@
         var handleIncrement = function () {
             updateGuestsCount("guests-".concat(id), count + 1);
         };
-        return (React.createElement("div", { className: "will-guests-filter-inner", style: { order: "".concat(sortOrder) } },
-            React.createElement("p", { className: "will-guests-filter-label" }, label),
-            React.createElement("div", { className: "will-guests-filter-counter" },
-                React.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.createElement("svg", { width: "10", height: "10", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-                        React.createElement("path", { d: "M4 10H16", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }))),
-                React.createElement("span", { className: "will-guests-filter-count" }, count),
-                React.createElement("button", { className: "will-guests-filter-counter-button", onClick: handleIncrement },
-                    React.createElement("svg", { width: "15", height: "15", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-                        React.createElement("path", { d: "M10 4V16M4 10H16", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }))))));
-    };
-
-    var css_248z$7 = ".will-filter-section-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\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";
-    styleInject(css_248z$7);
+        return (jsxRuntime.jsxs("div", { className: "will-guests-filter-inner", style: { order: "".concat(sortOrder) }, children: [jsxRuntime.jsx("p", { className: "will-guests-filter-label", children: label }), jsxRuntime.jsxs("div", { className: "will-guests-filter-counter", children: [jsxRuntime.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: jsxRuntime.jsx("svg", { width: "10", height: "10", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M4 10H16", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) }), jsxRuntime.jsx("span", { className: "will-guests-filter-count", children: count }), jsxRuntime.jsx("button", { className: "will-guests-filter-counter-button", onClick: handleIncrement, children: jsxRuntime.jsx("svg", { width: "15", height: "15", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("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";
+    styleInject(css_248z$8);
 
     var FilterSectionHeader = function (_a) {
         var title = _a.title, action = _a.action;
-        return (React.createElement("div", { className: "will-filter-section-header" },
-            React.createElement("h3", { className: "will-filter-section-title" }, title),
-            action && React.createElement("div", { className: "will-filter-section-action" }, action)));
+        return (jsxRuntime.jsxs("div", { className: "will-filter-section-header", children: [jsxRuntime.jsx("h3", { className: "will-filter-section-title", children: title }), action && jsxRuntime.jsx("div", { className: "will-filter-section-action", children: action })] }));
     };
 
-    var css_248z$6 = ".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  margin-top: 20px;\n}\n\n@media (max-width: 960px) {\n  .will-guests-filter-container {\n    margin-top: 15px;\n    min-width: 100%;\n  }\n}\n";
-    styleInject(css_248z$6);
+    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";
+    styleInject(css_248z$7);
 
-    var Guests = React.forwardRef(function (_a, ref) {
+    var Guests = React__default.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 (React.createElement("div", { className: "will-filter-bar-guests", ref: ref },
-            React.createElement(FilterSectionHeader, { title: t('guests.title'), action: onClose && React.createElement(CloseButton, { handleClose: onClose }) }),
-            React.createElement("div", { className: "will-guests-filter-container", ref: containerRef }, ageCategories === null || ageCategories === void 0 ? void 0 : ageCategories.map(function (category) { return (React.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 })); }))));
+        return (jsxRuntime.jsxs("div", { className: "will-filter-bar-guests", ref: ref, children: [jsxRuntime.jsx(FilterSectionHeader, { title: t('guests.title'), action: onClose && jsxRuntime.jsx(CloseButton, { handleClose: onClose }) }), jsxRuntime.jsx("div", { className: "will-guests-filter-container", ref: containerRef, children: ageCategories === null || ageCategories === void 0 ? void 0 : ageCategories.map(function (category) { return (jsxRuntime.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)); }) })] }));
     });
     Guests.displayName = 'Guests';
 
-    var css_248z$5 = ".will-filter-bar-divider {\n  width: 1px;\n  margin: 0 10px;\n  background-color: var(--will-charcoal-blue);\n}\n\n@media (max-width: 960px) {\n  .will-filter-bar-divider {\n    width: auto;\n    margin: 0 10px;\n    height: 1px;\n    background-color: var(--will-charcoal-blue);\n  }\n}";
-    styleInject(css_248z$5);
+    var css_248z$6 = ".will-filter-bar-divider {\n  width: 1px;\n  margin: 0 10px;\n  background-color: var(--will-charcoal-blue);\n}\n\n@media (max-width: 960px) {\n  .will-filter-bar-divider {\n    width: auto;\n    margin: 0 10px;\n    height: 1px;\n    background-color: var(--will-charcoal-blue);\n  }\n}";
+    styleInject(css_248z$6);
 
     var Divider = function () {
-        return React.createElement("div", { className: "will-filter-bar-divider" });
+        return jsxRuntime.jsx("div", { className: "will-filter-bar-divider" });
     };
 
-    var css_248z$4 = ".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";
-    styleInject(css_248z$4);
+    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";
+    styleInject(css_248z$5);
 
     var Categories = function (_a) {
         _a.categories; var setCategories = _a.setCategories;
@@ -11994,45 +12024,37 @@
             'Summer camp',
             'Winter camp',
         ];
-        var _b = __read(React.useState(''), 2), selectedCategory = _b[0], setSelectedCategory = _b[1];
+        var _b = __read(React__default.useState(''), 2), selectedCategory = _b[0], setSelectedCategory = _b[1];
         var handleCategoryChange = function (selectedCategory) {
             setSelectedCategory(selectedCategory);
             setCategories(selectedCategory);
         };
-        return (React.createElement("div", { className: "will-filter-bar-categories" },
-            React.createElement("h3", { className: "will-categories-filter-title" }, t('categories.label')),
-            React.createElement("div", { className: "will-categories-filter-inner" }, categoriesPlaceholder.map(function (itm, idx) { return (React.createElement("div", { key: idx },
-                React.createElement("input", { type: "radio", value: itm, checked: selectedCategory === itm, onChange: function () { return handleCategoryChange(itm); } }),
-                React.createElement("span", null, itm))); }))));
+        return (jsxRuntime.jsxs("div", { className: "will-filter-bar-categories", children: [jsxRuntime.jsx("h3", { className: "will-categories-filter-title", children: t('categories.label') }), jsxRuntime.jsx("div", { className: "will-categories-filter-inner", children: categoriesPlaceholder.map(function (itm, idx) { return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("input", { type: "radio", value: itm, checked: selectedCategory === itm, onChange: function () { return handleCategoryChange(itm); } }), jsxRuntime.jsx("span", { children: itm })] }, idx)); }) })] }));
     };
 
-    var css_248z$3 = ".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  margin-top: 20px;\n}\n\n@media (max-width: 960px) {\n  .will-locations-filter-container {\n    margin-top: 15px;\n    min-width: 100%;\n  }\n}\n";
-    styleInject(css_248z$3);
+    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";
+    styleInject(css_248z$4);
 
-    var css_248z$2 = ".will-image-card {\n  display: flex;\n  gap: 20px;\n  justify-content: space-between;\n  align-items: center;\n  padding: 8px 16px;\n  cursor: pointer;\n  user-select: none;\n  border-radius: 8px;\n  min-height: 40px;\n}\n\n.will-image-card.is-selected {\n  background-color: var(--will-transparent-lavender);\n}\n\n.will-image-card:hover {\n  background-color: var(--will-transparent-lavender);\n}\n\n.will-image-card-image img {\n  width: 120px;\n  height: 68px;\n  object-fit: cover;\n}\n";
-    styleInject(css_248z$2);
+    var css_248z$3 = ".will-image-card {\n  display: flex;\n  gap: 20px;\n  justify-content: space-between;\n  align-items: center;\n  padding: 8px 16px;\n  cursor: pointer;\n  user-select: none;\n  min-height: 40px;\n}\n\n.will-image-card.is-selected {\n  background-color: var(--will-transparent-lavender);\n}\n\n.will-image-card:hover {\n  background-color: var(--will-transparent-lavender);\n}\n\n.will-image-card-image img {\n  width: 120px;\n  height: 68px;\n  object-fit: cover;\n}\n";
+    styleInject(css_248z$3);
 
-    var ImageCard = React.forwardRef(function (_a, ref) {
+    var ImageCard = React__default.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 (React.createElement("div", { ref: ref, className: "will-image-card ".concat(isSelected ? 'is-selected' : ''), onClick: onClick, onKeyDown: function (e) {
+        return (jsxRuntime.jsxs("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 },
-            React.createElement("div", { className: "will-image-card-content" },
-                React.createElement("h3", null, title),
-                description && React.createElement("p", null, description)),
-            React.createElement("div", { className: "will-image-card-image" }, imageUrl && React.createElement("img", { src: imageUrl, alt: title || 'Location image' }))));
+            }, role: "button", tabIndex: 0, "aria-pressed": isSelected, "aria-label": ariaLabel, children: [jsxRuntime.jsxs("div", { className: "will-image-card-content", children: [jsxRuntime.jsx("h3", { children: title }), description && jsxRuntime.jsx("p", { children: description })] }), jsxRuntime.jsx("div", { className: "will-image-card-image", children: imageUrl && jsxRuntime.jsx("img", { src: imageUrl, alt: title || 'Location image' }) })] }));
     });
     ImageCard.displayName = 'ImageCard';
 
-    var Locations = React.forwardRef(function (_a, ref) {
+    var Locations = React__default.forwardRef(function (_a, ref) {
         var locations = _a.locations, language = _a.language, selectedLocations = _a.selectedLocations, setSelectedLocations = _a.setSelectedLocations, autoFocus = _a.autoFocus, _b = _a.multiSelect, multiSelect = _b === void 0 ? false : _b, onClose = _a.onClose;
         var t = useTranslation('filterBar').t;
-        var firstCardRef = React.useRef(null);
-        React.useEffect(function () {
+        var firstCardRef = React__default.useRef(null);
+        React__default.useEffect(function () {
             if (autoFocus && firstCardRef.current) {
                 firstCardRef.current.focus();
             }
@@ -12056,42 +12078,22 @@
                 onClose === null || onClose === void 0 ? void 0 : onClose();
             }
         };
-        return (React.createElement("div", { className: "will-filter-bar-locations", ref: ref },
-            React.createElement(FilterSectionHeader, { title: t('locations.title'), action: onClose && React.createElement(CloseButton, { handleClose: onClose }) }),
-            React.createElement("div", { className: "will-locations-filter-container" }, !!((locations === null || locations === void 0 ? void 0 : locations.length) && language) &&
-                locations
-                    .filter(function (location) {
-                    var label = getLocalizedContent({
-                        contents: location.label,
-                        locale: language,
-                    });
-                    return !!label;
-                })
-                    .map(function (location, index) {
-                    var label = getLocalizedContent({
-                        contents: location.label,
-                        locale: language,
-                    });
-                    var description = location.description
-                        ? getLocalizedContent({
-                            contents: location.description,
-                            locale: language,
-                        })
-                        : null;
-                    return (React.createElement(ImageCard, { key: location.id, ref: index === 0 ? firstCardRef : null, title: label, description: description, imageUrl: location.imageUrl, isSelected: selectedLocations.some(function (loc) { return loc.id === location.id; }), onClick: function () { return handleLocationClick(location); } }));
-                }))));
+        return (jsxRuntime.jsxs("div", { className: "will-filter-bar-locations", ref: ref, children: [jsxRuntime.jsx(FilterSectionHeader, { title: t('locations.title'), action: onClose && jsxRuntime.jsx(CloseButton, { handleClose: onClose }) }), jsxRuntime.jsx("div", { className: "will-locations-filter-container", children: !!((locations === null || locations === void 0 ? void 0 : locations.length) && language) &&
+                        locations.map(function (location, index) {
+                            return (jsxRuntime.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));
+                        }) })] }));
     });
     Locations.displayName = 'Locations';
 
-    var css_248z$1 = ".will-root {\n  z-index: 999;\n  width: fit-content;\n  min-width: 796px;\n  max-height: 100vh;\n  position: relative;\n}\n\n.will-root.is-full-width {\n  width: 100%;\n  min-width: auto;\n}\n\n.will-filter-bar {\n  box-sizing: border-box;\n  position: relative;\n}\n\n/* Tabs */\n\n.will-filter-bar-tabs {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  z-index: 222;\n  background: transparent;\n  padding: 10px;\n  gap: 10px;\n}\n\n/* Header */\n.will-filter-bar-header {\n  display: flex;\n  justify-content: space-between;\n  padding: 10px;\n  position: relative;\n  z-index: 222;\n  border-radius: 40px;\n  background-color: var(--will-white);\n}\n\n@media (max-width: 960px) {\n  .will-filter-bar-header {\n    flex-direction: column;\n    padding: 20px;\n    border-radius: 25px;\n  }\n}\n\n/* Container */\n\n.will-filter-bar-container {\n  background-color: var(--will-white);\n  min-height: 100px;\n  padding: 20px;\n  position: absolute;\n  top: 125px;\n  z-index: 111;\n  border-radius: 25px;\n  box-shadow: var(--will-box-shadow);\n}\n\n@media (max-width: 960px) {\n  .will-root {\n    width: 100%;\n    min-width: auto;\n    max-height: 100vh;\n    z-index: 3;\n  }\n\n  .will-filter-bar-container {\n    margin-top: 10px;\n    top: 0;\n    padding: 45px 20px;\n    position: relative;\n  }\n}\n\n/* Common */\n\n.will-filter-bar-header.dark,\n.will-filter-bar-container.dark {\n  box-shadow: var(--will-box-shadow-dark);\n}\n\n.will-filter-bar-header.light,\n.will-filter-bar-container.light {\n  box-shadow: var(--will-box-shadow-light);\n}\n\n.will-guest-count {\n  display: inline-block;\n  min-width: 10px;\n}\n";
+    var css_248z$2 = ".will-root {\n  z-index: 999;\n  width: fit-content;\n  min-width: 796px;\n  max-height: 100vh;\n  position: relative;\n}\n\n.will-root.is-full-width {\n  width: 100%;\n  min-width: auto;\n}\n\n.will-filter-bar {\n  box-sizing: border-box;\n  position: relative;\n}\n\n/* Tabs */\n\n.will-filter-bar-tabs {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  z-index: 222;\n  background: transparent;\n  padding: 10px;\n  gap: 10px;\n}\n\n/* Header */\n.will-filter-bar-header {\n  display: flex;\n  justify-content: space-between;\n  padding: 10px;\n  position: relative;\n  z-index: 222;\n  border-radius: 40px;\n  background-color: var(--will-white);\n}\n\n@media (max-width: 960px) {\n  .will-filter-bar-header {\n    flex-direction: column;\n    padding: 20px;\n    border-radius: 25px;\n    overflow: hidden;\n  }\n}\n\n/* Container */\n\n.will-filter-bar-container {\n  background-color: var(--will-white);\n  min-height: 100px;\n  position: absolute;\n  top: 125px;\n  z-index: 111;\n  border-radius: 25px;\n  box-shadow: var(--will-box-shadow);\n}\n\n@media (max-width: 960px) {\n  .will-root {\n    width: 100%;\n    min-width: auto;\n    max-height: 100vh;\n    z-index: 3;\n  }\n\n  .will-filter-bar-container {\n    margin-top: 10px;\n    top: 0;\n    padding: 45px 20px;\n    position: relative;\n  }\n}\n\n/* Common */\n\n.will-filter-bar-header.dark,\n.will-filter-bar-container.dark {\n  box-shadow: var(--will-box-shadow-dark);\n}\n\n.will-filter-bar-header.light,\n.will-filter-bar-container.light {\n  box-shadow: var(--will-box-shadow-light);\n}\n\n.will-guest-count {\n  display: inline-block;\n  min-width: 10px;\n}\n";
+    styleInject(css_248z$2);
+
+    var css_248z$1 = ".will-dates-filter-container {\n  padding: 0 16px;\n}\n";
     styleInject(css_248z$1);
 
-    var Dates = React.forwardRef(function (_a, ref) {
+    var Dates = React__default.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 (React.createElement("div", { className: "will-filter-bar-dates", ref: ref },
-            React.createElement(FilterSectionHeader, { title: '', action: onClose && React.createElement(CloseButton, { handleClose: onClose }) }),
-            React.createElement("div", { className: "will-dates-filter-container" },
-                React.createElement(Calendar, { autoFocus: autoFocus, calendarRange: calendarRange, setCalendarRange: setCalendarRange, disableCalendarDates: disableCalendarDates, selectedPath: selectedPath, language: language, ref: filtersRef }))));
+        return (jsxRuntime.jsxs("div", { className: "will-filter-bar-dates", ref: ref, children: [jsxRuntime.jsx(FilterSectionHeader, { title: '', action: onClose && jsxRuntime.jsx(CloseButton, { handleClose: onClose }) }), jsxRuntime.jsx("div", { className: "will-dates-filter-container", children: jsxRuntime.jsx(Calendar, { autoFocus: autoFocus, calendarRange: calendarRange, setCalendarRange: setCalendarRange, disableCalendarDates: disableCalendarDates, selectedPath: selectedPath, language: language, ref: filtersRef }) })] }));
     });
     Dates.displayName = 'Dates';
 
@@ -12103,24 +12105,42 @@
         useUpdateTranslations({ language: language });
         var t = useTranslation('filterBar').t;
         // Refs for SelectButtons
-        var locationsButtonRef = React.useRef(null);
-        var datesButtonRef = React.useRef(null);
-        var guestsButtonRef = React.useRef(null);
-        var previouslyFocusedButtonRef = React.useRef(null);
+        var locationsButtonRef = React__default.useRef(null);
+        var datesButtonRef = React__default.useRef(null);
+        var guestsButtonRef = React__default.useRef(null);
+        var previouslyFocusedButtonRef = React__default.useRef(null);
+        var headerRef = React__default.useRef(null);
+        // Dropdown positioning
+        var _f = __read(React__default.useState({}), 2), dropdownStyle = _f[0], setDropdownStyle = _f[1];
         // Filters
-        var _f = useFilterBar({
+        var _g = useFilterBar({
             redirectUrl: redirectUrl,
             ageCategories: ageCategories,
             onSubmit: onSubmit,
             tabs: tabs,
             locations: locations,
-        }), selectedFilter = _f.selectedFilter, ageCategoryCounts = _f.ageCategoryCounts, categories = _f.categories, calendarRange = _f.calendarRange, selectedPath = _f.selectedPath, innerLoading = _f.innerLoading, selectedLocations = _f.selectedLocations, setSelectedLocations = _f.setSelectedLocations, setCalendarRange = _f.setCalendarRange, setCategories = _f.setCategories, handleSelectedFilter = _f.handleSelectedFilter, handleSubmit = _f.handleSubmit, updateGuestsCount = _f.updateGuestsCount, setSelectedPath = _f.setSelectedPath, handleResetFilters = _f.handleResetFilters;
+        }), selectedFilter = _g.selectedFilter, ageCategoryCounts = _g.ageCategoryCounts, categories = _g.categories, calendarRange = _g.calendarRange, selectedPath = _g.selectedPath, innerLoading = _g.innerLoading, selectedLocations = _g.selectedLocations, setSelectedLocations = _g.setSelectedLocations, setCalendarRange = _g.setCalendarRange, setCategories = _g.setCategories, handleSelectedFilter = _g.handleSelectedFilter, handleSubmit = _g.handleSubmit, updateGuestsCount = _g.updateGuestsCount, setSelectedPath = _g.setSelectedPath, handleResetFilters = _g.handleResetFilters;
         // Scroll in to view
-        var _g = useScrollInToView({ selectedFilter: selectedFilter }), isMobile = _g.isMobile, targetFilterBarRef = _g.targetFilterBarRef;
+        var _h = useScrollInToView({ selectedFilter: selectedFilter }), isMobile = _h.isMobile, targetFilterBarRef = _h.targetFilterBarRef;
         // Handle close filter section
         var filtersRef = useCloseFilterSection({ handleSelectedFilter: handleSelectedFilter }).filtersRef;
+        // Enhanced handleSelectedFilter with positioning
+        var handleSelectedFilterWithPosition = function (filter) {
+            if (filter) {
+                var position = calculateDropdownPosition({
+                    filterSection: filter,
+                    headerRef: headerRef,
+                    locationsButtonRef: locationsButtonRef,
+                    datesButtonRef: datesButtonRef,
+                    guestsButtonRef: guestsButtonRef,
+                    isMobile: isMobile,
+                });
+                setDropdownStyle(position);
+            }
+            handleSelectedFilter(filter);
+        };
         // Store previously focused button and restore focus when closing
-        React.useEffect(function () {
+        React__default.useEffect(function () {
             if (!selectedFilter && previouslyFocusedButtonRef.current) {
                 previouslyFocusedButtonRef.current.focus();
                 previouslyFocusedButtonRef.current = null;
@@ -12139,51 +12159,34 @@
         });
         var parsedLocations = parseLocations({
             selectedLocations: selectedLocations,
-            language: language,
             locationsPlaceholder: t('locations.placeholder'),
             locationsSelectedLabel: t('locations.selected'),
         });
-        return (React.createElement("div", { className: "will-root ".concat(fullWidth ? 'is-full-width' : ''), style: themePalette },
-            tabs && tabs.length > 1 && (React.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.createElement(TabButton, { key: "tab-".concat(idx), label: tab.label && language
-                    ? tab.label[language]
-                    : t("tabs.".concat(tab.path.substring(1))), onClick: function () {
-                    setSelectedPath(tab.path);
-                    handleResetFilters();
-                    handleSelectedFilter(false);
-                }, active: selectedPath === tab.path, mode: mode })); }))),
-            React.createElement("div", { className: "will-filter-bar-header ".concat(mode || 'light'), ref: (tabs === null || tabs === void 0 ? void 0 : tabs.length) === 1 ? targetFilterBarRef : null },
-                !!((_b = locations === null || locations === void 0 ? void 0 : locations.data) === null || _b === void 0 ? void 0 : _b.length) && (React.createElement(React.Fragment, null,
-                    React.createElement(SelectButton, { ref: locationsButtonRef, label: t('locations.label'), description: parsedLocations, onClick: function () {
-                            previouslyFocusedButtonRef.current = locationsButtonRef.current;
-                            handleSelectedFilter(FilterSections.LOCATIONS);
-                        }, active: !!selectedLocations.length, disabled: locations === null || locations === void 0 ? void 0 : locations.disabled, ariaExpanded: selectedFilter === FilterSections.LOCATIONS, ariaControls: "will-locations-filter" }),
-                    React.createElement(Divider, null))),
-                React.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;
-                        handleSelectedFilter(FilterSections.CALENDAR);
-                    }, active: !!parsedDates, ariaExpanded: selectedFilter === FilterSections.CALENDAR, ariaControls: "will-calendar-filter" }),
-                selectedPath !== Pages.EVENTS && (React.createElement(React.Fragment, null,
-                    React.createElement(Divider, null),
-                    React.createElement(SelectButton, { ref: guestsButtonRef, label: t('guests.label'), description: parsedGuests.content, onClick: function () {
-                            previouslyFocusedButtonRef.current = guestsButtonRef.current;
-                            handleSelectedFilter(FilterSections.GUESTS);
-                        }, active: !!parsedGuests.data.total, ariaExpanded: selectedFilter === FilterSections.GUESTS, ariaControls: "will-guests-filter" }))),
-                React.createElement(SubmitButton, { onClick: handleSubmit, startIcon: React.createElement(FaSearch, null), label: t('common:search'), isLoading: innerLoading || outerLoading })),
-            selectedFilter && (React.createElement("div", { className: "will-filter-bar-container ".concat(mode || 'light'), style: (!tabs || tabs.length < 2) && !isMobile ? { top: 66 } : {} },
-                selectedFilter === FilterSections.CALENDAR && (React.createElement("div", { id: "will-dates-filter" },
-                    React.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.createElement("div", { id: "will-guests-filter" },
-                    React.createElement(Guests, { updateGuestsCount: updateGuestsCount, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts, ref: filtersRef, autoFocus: true, onClose: function () { return handleSelectedFilter(false); } }))),
-                selectedFilter === FilterSections.CATEGORIES && (React.createElement("div", { id: "will-categories-filter" },
-                    React.createElement(Categories, { categories: categories, setCategories: setCategories }))),
-                selectedFilter === FilterSections.LOCATIONS && (React.createElement("div", { id: "will-locations-filter" },
-                    React.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); } })))))));
+        return (jsxRuntime.jsxs("div", { className: "will-root ".concat(fullWidth ? 'is-full-width' : ''), style: themePalette, children: [tabs && tabs.length > 1 && (jsxRuntime.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 (jsxRuntime.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))); }) })), jsxRuntime.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) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.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" }), jsxRuntime.jsx(Divider, {})] })), jsxRuntime.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 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Divider, {}), jsxRuntime.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" })] })), jsxRuntime.jsx(SubmitButton, { onClick: handleSubmit, startIcon: jsxRuntime.jsx(FaSearch, {}), label: t('common:search'), isLoading: innerLoading || outerLoading })] }), selectedFilter && (jsxRuntime.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 && (jsxRuntime.jsx("div", { id: "will-dates-filter", children: jsxRuntime.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 && (jsxRuntime.jsx("div", { id: "will-guests-filter", children: jsxRuntime.jsx(Guests, { updateGuestsCount: updateGuestsCount, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts, ref: filtersRef, autoFocus: true, onClose: function () { return handleSelectedFilter(false); } }) })), selectedFilter === FilterSections.CATEGORIES && (jsxRuntime.jsx("div", { id: "will-categories-filter", children: jsxRuntime.jsx(Categories, { categories: categories, setCategories: setCategories }) })), selectedFilter === FilterSections.LOCATIONS && (jsxRuntime.jsx("div", { id: "will-locations-filter", children: jsxRuntime.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); } }) }))] }))] }));
     }
     ////////////
     var AGE_CATEGORIES_FALLBACK = [
@@ -12206,18 +12209,18 @@
     var useFilterCalendar = function (_a) {
         var onSubmit = _a.onSubmit, setToggleCalendar = _a.setToggleCalendar, noActiveSelection = _a.noActiveSelection, toggleCalendar = _a.toggleCalendar, outerRangeContext = _a.outerRangeContext, outerDisableCalendarDates = _a.outerDisableCalendarDates;
         // State
-        var _b = __read(React.useState(), 2), calendarRange = _b[0], setCalendarRange = _b[1];
-        var _c = __read(React.useState(outerRangeContext), 2), rangeContext = _c[0], setRangeContext = _c[1];
-        var _d = __read(React.useState(), 2), initialCalendarRange = _d[0], setInitialCalendarRange = _d[1];
-        var _e = __read(React.useState([]), 2), disabledDates = _e[0], setDisabledDates = _e[1];
-        var _f = __read(React.useState(false), 2), updateCalendarMonthNavigation = _f[0], setUpdateCalendarMonthNavigation = _f[1];
-        var _g = __read(React.useState(0), 2), updateCalendarDefaultMonth = _g[0], setUpdateCalendarDefaultMonth = _g[1];
-        var _h = __read(React.useState(false), 2), calendarHasError = _h[0], setCalendarHasError = _h[1];
-        var _j = __read(React.useState(false), 2), updatedForSubmit = _j[0], setUpdatedForSubmit = _j[1];
-        var _k = __read(React.useState(), 2), disableCalendarDates = _k[0], setDisableCalendarDates = _k[1];
+        var _b = __read(React__default.useState(), 2), calendarRange = _b[0], setCalendarRange = _b[1];
+        var _c = __read(React__default.useState(outerRangeContext), 2), rangeContext = _c[0], setRangeContext = _c[1];
+        var _d = __read(React__default.useState(), 2), initialCalendarRange = _d[0], setInitialCalendarRange = _d[1];
+        var _e = __read(React__default.useState([]), 2), disabledDates = _e[0], setDisabledDates = _e[1];
+        var _f = __read(React__default.useState(false), 2), updateCalendarMonthNavigation = _f[0], setUpdateCalendarMonthNavigation = _f[1];
+        var _g = __read(React__default.useState(0), 2), updateCalendarDefaultMonth = _g[0], setUpdateCalendarDefaultMonth = _g[1];
+        var _h = __read(React__default.useState(false), 2), calendarHasError = _h[0], setCalendarHasError = _h[1];
+        var _j = __read(React__default.useState(false), 2), updatedForSubmit = _j[0], setUpdatedForSubmit = _j[1];
+        var _k = __read(React__default.useState(), 2), disableCalendarDates = _k[0], setDisableCalendarDates = _k[1];
         // Lifecycle
         // Handle update component with new data
-        React.useEffect(function () {
+        React__default.useEffect(function () {
             var _a;
             if (outerDisableCalendarDates === null || outerDisableCalendarDates === void 0 ? void 0 : outerDisableCalendarDates.availableDates) {
                 setDisableCalendarDates({
@@ -12235,7 +12238,7 @@
             }
         }, [outerDisableCalendarDates]);
         // Handle Range Context initial selections
-        React.useEffect(function () {
+        React__default.useEffect(function () {
             if (typeof window === 'undefined')
                 return;
             var urlSearchParams = new URLSearchParams(window.location.search);
@@ -12265,7 +12268,7 @@
             }
         }, [toggleCalendar]);
         // Handle submit dates
-        React.useEffect(function () {
+        React__default.useEffect(function () {
             var formatString = 'dd.MM.yyyy';
             var initialRangeTo = (initialCalendarRange === null || initialCalendarRange === void 0 ? void 0 : initialCalendarRange.to)
                 ? format(initialCalendarRange.to, formatString)
@@ -12324,36 +12327,26 @@
         var nights = nightsCount({
             calendarRange: calendarRange,
         });
-        return (React.createElement("div", { className: "will-calendar-footer-actions-wrapper" },
-            React.createElement("div", { className: "will-calendar-footer-dates" },
-                calendarHasError ? (React.createElement("div", { className: "will-calendar-footer-error" }, calendarHasError &&
-                    renderCalendarErrorMessage({
-                        palette: palette,
-                        message: t("common:errors.calendarErrors.checkInAvailabilityError"),
-                    }))) : (React.createElement("div", null,
-                    React.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.createElement("span", { className: "will-calendar-footer-dates-separator" }, "-"),
-                    React.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.createElement("span", { className: "will-calendar-footer-booked" }, !calendarHasError && nights
-                    ? "".concat(nights, " ").concat(t("common:".concat(nights === 1 ? 'night' : 'nights')))
-                    : '')),
-            React.createElement("div", { className: "will-calendar-footer-actions" },
-                React.createElement(SubmitButton, { onClick: handleClearDates, disabled: !(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from), label: t("common:clearDates"), variant: "text" }))));
+        return (jsxRuntime.jsxs("div", { className: "will-calendar-footer-actions-wrapper", children: [jsxRuntime.jsxs("div", { className: "will-calendar-footer-dates", children: [calendarHasError ? (jsxRuntime.jsx("div", { className: "will-calendar-footer-error", children: calendarHasError &&
+                                renderCalendarErrorMessage({
+                                    palette: palette,
+                                    message: t("common:errors.calendarErrors.checkInAvailabilityError"),
+                                }) })) : (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("span", { children: parseDate({
+                                        date: calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from,
+                                        dateFormat: 'EEEEEE d.M.yyyy',
+                                        language: language,
+                                    }) || t('common:checkIn') }), jsxRuntime.jsx("span", { className: "will-calendar-footer-dates-separator", children: "-" }), jsxRuntime.jsx("span", { children: parseDate({
+                                        date: calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to,
+                                        dateFormat: 'EEEEEE d.M.yyyy',
+                                        language: language,
+                                    }) || t('common:checkOut') })] })), jsxRuntime.jsx("span", { className: "will-calendar-footer-booked", children: !calendarHasError && nights
+                                ? "".concat(nights, " ").concat(t("common:".concat(nights === 1 ? 'night' : 'nights')))
+                                : '' })] }), jsxRuntime.jsx("div", { className: "will-calendar-footer-actions", children: jsxRuntime.jsx(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 (React.createElement(React.Fragment, null,
-            React.createElement(IconsSvg, { fill: (palette === null || palette === void 0 ? void 0 : palette.error) || 'inherit', size: 25, icon: "warning" }),
-            React.createElement("span", null, message || '')));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(IconsSvg, { fill: (palette === null || palette === void 0 ? void 0 : palette.error) || 'inherit', size: 25, icon: "warning" }), jsxRuntime.jsx("span", { children: 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}";
@@ -12379,14 +12372,7 @@
         var filtersRef = useCloseFilterSection({
             handleSelectedFilter: setToggleCalendar,
         }).filtersRef;
-        return (React.createElement("div", { className: "will-root", style: themePalette }, toggleCalendar && (React.createElement("div", { className: "will-calendar-wrapper", ref: filtersRef },
-            React.createElement("div", { className: "will-calendar-header" },
-                React.createElement("h2", null, t('filterBar:calendar.title')),
-                React.createElement(CloseButton, { handleClose: function () { return setToggleCalendar(false); } })),
-            React.createElement("div", { className: "will-calendar-main" },
-                React.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.createElement("div", { className: "will-calendar-footer" },
-                React.createElement(Footer, { calendarHasError: calendarHasError, calendarRange: calendarRange, handleClearDates: handleClearDates, language: language, palette: palette }))))));
+        return (jsxRuntime.jsx("div", { className: "will-root", style: themePalette, children: toggleCalendar && (jsxRuntime.jsxs("div", { className: "will-calendar-wrapper", ref: filtersRef, children: [jsxRuntime.jsxs("div", { className: "will-calendar-header", children: [jsxRuntime.jsx("h2", { children: t('filterBar:calendar.title') }), jsxRuntime.jsx(CloseButton, { handleClose: function () { return setToggleCalendar(false); } })] }), jsxRuntime.jsx("div", { className: "will-calendar-main", children: jsxRuntime.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 }) }), jsxRuntime.jsx("div", { className: "will-calendar-footer", children: jsxRuntime.jsx(Footer, { calendarHasError: calendarHasError, calendarRange: calendarRange, handleClearDates: handleClearDates, language: language, palette: palette }) })] })) }));
     }
 
     exports.Button = Button$1;