willba-component-library 0.3.13 → 0.3.15

package/lib/index.esm.js

@@ -1,6 +1,5 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import * as React__default from 'react';
-import React__default__default, { useState, createContext, useContext, useRef, useEffect, forwardRef, useMemo } from 'react';
+import * as React from 'react';
+import React__default, { useState, useEffect, createContext, useContext, useRef, forwardRef, useMemo } from 'react';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -192,8 +191,8 @@ function styleInject(css, ref) {
   }
 }
 
-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);
+var css_248z$k = ".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$k);
 
 /**
  * Primary UI component for user interaction
@@ -201,443 +200,103 @@ styleInject(css_248z$h);
 var Button$1 = function (_a) {
     var _b = _a.type, type = _b === void 0 ? 'primary' : _b, textColor = _a.textColor, _c = _a.size, size = _c === void 0 ? 'medium' : _c, onClick = _a.onClick, label = _a.label;
     var _d = __read(useState(4), 2), theState = _d[0]; _d[1];
-    return (jsx("button", { type: "button", className: classNames('storybook-button', "storybook-button--".concat(size), "storybook-button--".concat(type)), style: textColor ? { color: textColor } : {}, onClick: onClick, children: "".concat(label, " ").concat(theState) }));
+    return (React__default.createElement("button", { type: "button", className: classNames('storybook-button', "storybook-button--".concat(size), "storybook-button--".concat(type)), style: textColor ? { color: textColor } : {}, onClick: onClick }, "".concat(label, " ").concat(theState)));
 };
 
-function warn() {
-  if (console && console.warn) {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    if (typeof args[0] === 'string') args[0] = `react-i18next:: ${args[0]}`;
-    console.warn(...args);
-  }
-}
-const alreadyWarned = {};
-function warnOnce() {
-  for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-    args[_key2] = arguments[_key2];
-  }
-  if (typeof args[0] === 'string' && alreadyWarned[args[0]]) return;
-  if (typeof args[0] === 'string') alreadyWarned[args[0]] = new Date();
-  warn(...args);
-}
-const loadedClb = (i18n, cb) => () => {
-  if (i18n.isInitialized) {
-    cb();
-  } else {
-    const initialized = () => {
-      setTimeout(() => {
-        i18n.off('initialized', initialized);
-      }, 0);
-      cb();
+var useTheme = function (_a) {
+    var palette = _a.palette;
+    var themePalette = {
+        '--will-primary': palette === null || palette === void 0 ? void 0 : palette.primary,
+        '--will-secondary': palette === null || palette === void 0 ? void 0 : palette.secondary,
+        '--will-error': palette === null || palette === void 0 ? void 0 : palette.error,
     };
-    i18n.on('initialized', initialized);
-  }
+    return themePalette;
 };
-function loadNamespaces(i18n, ns, cb) {
-  i18n.loadNamespaces(ns, loadedClb(i18n, cb));
-}
-function loadLanguages(i18n, lng, ns, cb) {
-  if (typeof ns === 'string') ns = [ns];
-  ns.forEach(n => {
-    if (i18n.options.ns.indexOf(n) < 0) i18n.options.ns.push(n);
-  });
-  i18n.loadLanguages(lng, loadedClb(i18n, cb));
-}
-function oldI18nextHasLoadedNamespace(ns, i18n) {
-  let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  const lng = i18n.languages[0];
-  const fallbackLng = i18n.options ? i18n.options.fallbackLng : false;
-  const lastLng = i18n.languages[i18n.languages.length - 1];
-  if (lng.toLowerCase() === 'cimode') return true;
-  const loadNotPending = (l, n) => {
-    const loadState = i18n.services.backendConnector.state[`${l}|${n}`];
-    return loadState === -1 || loadState === 2;
-  };
-  if (options.bindI18n && options.bindI18n.indexOf('languageChanging') > -1 && i18n.services.backendConnector.backend && i18n.isLanguageChangingTo && !loadNotPending(i18n.isLanguageChangingTo, ns)) return false;
-  if (i18n.hasResourceBundle(lng, ns)) return true;
-  if (!i18n.services.backendConnector.backend || i18n.options.resources && !i18n.options.partialBundledLanguages) return true;
-  if (loadNotPending(lng, ns) && (!fallbackLng || loadNotPending(lastLng, ns))) return true;
-  return false;
-}
-function hasLoadedNamespace(ns, i18n) {
-  let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  if (!i18n.languages || !i18n.languages.length) {
-    warnOnce('i18n.languages were undefined or empty', i18n.languages);
-    return true;
-  }
-  const isNewerI18next = i18n.options.ignoreJSONStructure !== undefined;
-  if (!isNewerI18next) {
-    return oldI18nextHasLoadedNamespace(ns, i18n, options);
-  }
-  return i18n.hasLoadedNamespace(ns, {
-    lng: options.lng,
-    precheck: (i18nInstance, loadNotPending) => {
-      if (options.bindI18n && options.bindI18n.indexOf('languageChanging') > -1 && i18nInstance.services.backendConnector.backend && i18nInstance.isLanguageChangingTo && !loadNotPending(i18nInstance.isLanguageChangingTo, ns)) return false;
-    }
-  });
-}
 
-const matchHtmlEntity = /&(?:amp|#38|lt|#60|gt|#62|apos|#39|quot|#34|nbsp|#160|copy|#169|reg|#174|hellip|#8230|#x2F|#47);/g;
-const htmlEntities = {
-  '&amp;': '&',
-  '&#38;': '&',
-  '&lt;': '<',
-  '&#60;': '<',
-  '&gt;': '>',
-  '&#62;': '>',
-  '&apos;': "'",
-  '&#39;': "'",
-  '&quot;': '"',
-  '&#34;': '"',
-  '&nbsp;': ' ',
-  '&#160;': ' ',
-  '&copy;': '©',
-  '&#169;': '©',
-  '&reg;': '®',
-  '&#174;': '®',
-  '&hellip;': '…',
-  '&#8230;': '…',
-  '&#x2F;': '/',
-  '&#47;': '/'
+var useAwaitRender = function () {
+    var _a = __read(useState(false), 2), initialRenderComplete = _a[0], setInitialRenderComplete = _a[1];
+    useEffect(function () {
+        setInitialRenderComplete(true);
+    }, []);
+    if (!initialRenderComplete)
+        return null;
 };
-const unescapeHtmlEntity = m => htmlEntities[m];
-const unescape = text => text.replace(matchHtmlEntity, unescapeHtmlEntity);
 
-let defaultOptions$1 = {
-  bindI18n: 'languageChanged',
-  bindI18nStore: '',
-  transEmptyNodeValue: '',
-  transSupportBasicHtmlNodes: true,
-  transWrapTextNodes: '',
-  transKeepBasicHtmlNodesFor: ['br', 'strong', 'i', 'p'],
-  useSuspense: true,
-  unescape
+const isString = obj => typeof obj === 'string';
+const defer = () => {
+  let res;
+  let rej;
+  const promise = new Promise((resolve, reject) => {
+    res = resolve;
+    rej = reject;
+  });
+  promise.resolve = res;
+  promise.reject = rej;
+  return promise;
 };
-function setDefaults() {
-  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  defaultOptions$1 = {
-    ...defaultOptions$1,
-    ...options
-  };
-}
-function getDefaults() {
-  return defaultOptions$1;
-}
-
-let i18nInstance;
-function setI18n(instance) {
-  i18nInstance = instance;
-}
-function getI18n() {
-  return i18nInstance;
-}
-
-const initReactI18next = {
-  type: '3rdParty',
-  init(instance) {
-    setDefaults(instance.options.react);
-    setI18n(instance);
-  }
+const makeString = object => {
+  if (object == null) return '';
+  return '' + object;
 };
-
-const I18nContext = createContext();
-class ReportNamespaces {
-  constructor() {
-    this.usedNamespaces = {};
+const copy = (a, s, t) => {
+  a.forEach(m => {
+    if (s[m]) t[m] = s[m];
+  });
+};
+const lastOfPathSeparatorRegExp = /###/g;
+const cleanKey = key => key && key.indexOf('###') > -1 ? key.replace(lastOfPathSeparatorRegExp, '.') : key;
+const canNotTraverseDeeper = object => !object || isString(object);
+const getLastOfPath = (object, path, Empty) => {
+  const stack = !isString(path) ? path : path.split('.');
+  let stackIndex = 0;
+  while (stackIndex < stack.length - 1) {
+    if (canNotTraverseDeeper(object)) return {};
+    const key = cleanKey(stack[stackIndex]);
+    if (!object[key] && Empty) object[key] = new Empty();
+    if (Object.prototype.hasOwnProperty.call(object, key)) {
+      object = object[key];
+    } else {
+      object = {};
+    }
+    ++stackIndex;
   }
-  addUsedNamespaces(namespaces) {
-    namespaces.forEach(ns => {
-      if (!this.usedNamespaces[ns]) this.usedNamespaces[ns] = true;
-    });
+  if (canNotTraverseDeeper(object)) return {};
+  return {
+    obj: object,
+    k: cleanKey(stack[stackIndex])
+  };
+};
+const setPath = (object, path, newValue) => {
+  const {
+    obj,
+    k
+  } = getLastOfPath(object, path, Object);
+  if (obj !== undefined || path.length === 1) {
+    obj[k] = newValue;
+    return;
   }
-  getUsedNamespaces() {
-    return Object.keys(this.usedNamespaces);
+  let e = path[path.length - 1];
+  let p = path.slice(0, path.length - 1);
+  let last = getLastOfPath(object, p, Object);
+  while (last.obj === undefined && p.length) {
+    e = `${p[p.length - 1]}.${e}`;
+    p = p.slice(0, p.length - 1);
+    last = getLastOfPath(object, p, Object);
+    if (last?.obj && typeof last.obj[`${last.k}.${e}`] !== 'undefined') {
+      last.obj = undefined;
+    }
   }
-}
-
-const usePrevious = (value, ignore) => {
-  const ref = useRef();
-  useEffect(() => {
-    ref.current = ignore ? ref.current : value;
-  }, [value, ignore]);
-  return ref.current;
+  last.obj[`${last.k}.${e}`] = newValue;
 };
-function useTranslation(ns) {
-  let props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+const pushPath = (object, path, newValue, concat) => {
   const {
-    i18n: i18nFromProps
-  } = props;
-  const {
-    i18n: i18nFromContext,
-    defaultNS: defaultNSFromContext
-  } = useContext(I18nContext) || {};
-  const i18n = i18nFromProps || i18nFromContext || getI18n();
-  if (i18n && !i18n.reportNamespaces) i18n.reportNamespaces = new ReportNamespaces();
-  if (!i18n) {
-    warnOnce('You will need to pass in an i18next instance by using initReactI18next');
-    const notReadyT = (k, optsOrDefaultValue) => {
-      if (typeof optsOrDefaultValue === 'string') return optsOrDefaultValue;
-      if (optsOrDefaultValue && typeof optsOrDefaultValue === 'object' && typeof optsOrDefaultValue.defaultValue === 'string') return optsOrDefaultValue.defaultValue;
-      return Array.isArray(k) ? k[k.length - 1] : k;
-    };
-    const retNotReady = [notReadyT, {}, false];
-    retNotReady.t = notReadyT;
-    retNotReady.i18n = {};
-    retNotReady.ready = false;
-    return retNotReady;
-  }
-  if (i18n.options.react && i18n.options.react.wait !== undefined) warnOnce('It seems you are still using the old wait option, you may migrate to the new useSuspense behaviour.');
-  const i18nOptions = {
-    ...getDefaults(),
-    ...i18n.options.react,
-    ...props
-  };
-  const {
-    useSuspense,
-    keyPrefix
-  } = i18nOptions;
-  let namespaces = ns || defaultNSFromContext || i18n.options && i18n.options.defaultNS;
-  namespaces = typeof namespaces === 'string' ? [namespaces] : namespaces || ['translation'];
-  if (i18n.reportNamespaces.addUsedNamespaces) i18n.reportNamespaces.addUsedNamespaces(namespaces);
-  const ready = (i18n.isInitialized || i18n.initializedStoreOnce) && namespaces.every(n => hasLoadedNamespace(n, i18n, i18nOptions));
-  function getT() {
-    return i18n.getFixedT(props.lng || null, i18nOptions.nsMode === 'fallback' ? namespaces : namespaces[0], keyPrefix);
-  }
-  const [t, setT] = useState(getT);
-  let joinedNS = namespaces.join();
-  if (props.lng) joinedNS = `${props.lng}${joinedNS}`;
-  const previousJoinedNS = usePrevious(joinedNS);
-  const isMounted = useRef(true);
-  useEffect(() => {
-    const {
-      bindI18n,
-      bindI18nStore
-    } = i18nOptions;
-    isMounted.current = true;
-    if (!ready && !useSuspense) {
-      if (props.lng) {
-        loadLanguages(i18n, props.lng, namespaces, () => {
-          if (isMounted.current) setT(getT);
-        });
-      } else {
-        loadNamespaces(i18n, namespaces, () => {
-          if (isMounted.current) setT(getT);
-        });
-      }
-    }
-    if (ready && previousJoinedNS && previousJoinedNS !== joinedNS && isMounted.current) {
-      setT(getT);
-    }
-    function boundReset() {
-      if (isMounted.current) setT(getT);
-    }
-    if (bindI18n && i18n) i18n.on(bindI18n, boundReset);
-    if (bindI18nStore && i18n) i18n.store.on(bindI18nStore, boundReset);
-    return () => {
-      isMounted.current = false;
-      if (bindI18n && i18n) bindI18n.split(' ').forEach(e => i18n.off(e, boundReset));
-      if (bindI18nStore && i18n) bindI18nStore.split(' ').forEach(e => i18n.store.off(e, boundReset));
-    };
-  }, [i18n, joinedNS]);
-  const isInitial = useRef(true);
-  useEffect(() => {
-    if (isMounted.current && !isInitial.current) {
-      setT(getT);
-    }
-    isInitial.current = false;
-  }, [i18n, keyPrefix]);
-  const ret = [t, i18n, ready];
-  ret.t = t;
-  ret.i18n = i18n;
-  ret.ready = ready;
-  if (ready) return ret;
-  if (!ready && !useSuspense) return ret;
-  throw new Promise(resolve => {
-    if (props.lng) {
-      loadLanguages(i18n, props.lng, namespaces, () => resolve());
-    } else {
-      loadNamespaces(i18n, namespaces, () => resolve());
-    }
-  });
-}
-
-var DefaultContext = {
-  color: undefined,
-  size: undefined,
-  className: undefined,
-  style: undefined,
-  attr: undefined
-};
-var IconContext = React__default__default.createContext && React__default__default.createContext(DefaultContext);
-
-var __assign$1 = undefined && undefined.__assign || function () {
-  __assign$1 = Object.assign || function (t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-    }
-    return t;
-  };
-  return __assign$1.apply(this, arguments);
-};
-var __rest$1 = undefined && undefined.__rest || function (s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
-function Tree2Element(tree) {
-  return tree && tree.map(function (node, i) {
-    return React__default__default.createElement(node.tag, __assign$1({
-      key: i
-    }, node.attr), Tree2Element(node.child));
-  });
-}
-function GenIcon(data) {
-  // eslint-disable-next-line react/display-name
-  return function (props) {
-    return React__default__default.createElement(IconBase, __assign$1({
-      attr: __assign$1({}, data.attr)
-    }, props), Tree2Element(data.child));
-  };
-}
-function IconBase(props) {
-  var elem = function (conf) {
-    var attr = props.attr,
-      size = props.size,
-      title = props.title,
-      svgProps = __rest$1(props, ["attr", "size", "title"]);
-    var computedSize = size || conf.size || "1em";
-    var className;
-    if (conf.className) className = conf.className;
-    if (props.className) className = (className ? className + " " : "") + props.className;
-    return React__default__default.createElement("svg", __assign$1({
-      stroke: "currentColor",
-      fill: "currentColor",
-      strokeWidth: "0"
-    }, conf.attr, attr, svgProps, {
-      className: className,
-      style: __assign$1(__assign$1({
-        color: props.color || conf.color
-      }, conf.style), props.style),
-      height: computedSize,
-      width: computedSize,
-      xmlns: "http://www.w3.org/2000/svg"
-    }), title && React__default__default.createElement("title", null, title), props.children);
-  };
-  return IconContext !== undefined ? React__default__default.createElement(IconContext.Consumer, null, function (conf) {
-    return elem(conf);
-  }) : elem(DefaultContext);
-}
-
-// THIS FILE IS AUTO GENERATED
-function FaSearch (props) {
-  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 512 512"},"child":[{"tag":"path","attr":{"d":"M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"}}]})(props);
-}function FaSpinner (props) {
-  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 512 512"},"child":[{"tag":"path","attr":{"d":"M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z"}}]})(props);
-}
-
-function useTheme(_a) {
-    var palette = _a.palette;
-    var themePalette = {
-        '--will-primary': palette === null || palette === void 0 ? void 0 : palette.primary,
-        '--will-secondary': palette === null || palette === void 0 ? void 0 : palette.secondary,
-        '--will-error': palette === null || palette === void 0 ? void 0 : palette.error,
-    };
-    return themePalette;
-}
-
-var css_248z$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(useState(false), 2), initialRenderComplete = _a[0], setInitialRenderComplete = _a[1];
-    useEffect(function () {
-        setInitialRenderComplete(true);
-    }, []);
-    if (!initialRenderComplete)
-        return null;
-};
-
-const isString = obj => typeof obj === 'string';
-const defer = () => {
-  let res;
-  let rej;
-  const promise = new Promise((resolve, reject) => {
-    res = resolve;
-    rej = reject;
-  });
-  promise.resolve = res;
-  promise.reject = rej;
-  return promise;
-};
-const makeString = object => {
-  if (object == null) return '';
-  return '' + object;
-};
-const copy = (a, s, t) => {
-  a.forEach(m => {
-    if (s[m]) t[m] = s[m];
-  });
-};
-const lastOfPathSeparatorRegExp = /###/g;
-const cleanKey = key => key && key.indexOf('###') > -1 ? key.replace(lastOfPathSeparatorRegExp, '.') : key;
-const canNotTraverseDeeper = object => !object || isString(object);
-const getLastOfPath = (object, path, Empty) => {
-  const stack = !isString(path) ? path : path.split('.');
-  let stackIndex = 0;
-  while (stackIndex < stack.length - 1) {
-    if (canNotTraverseDeeper(object)) return {};
-    const key = cleanKey(stack[stackIndex]);
-    if (!object[key] && Empty) object[key] = new Empty();
-    if (Object.prototype.hasOwnProperty.call(object, key)) {
-      object = object[key];
-    } else {
-      object = {};
-    }
-    ++stackIndex;
-  }
-  if (canNotTraverseDeeper(object)) return {};
-  return {
-    obj: object,
-    k: cleanKey(stack[stackIndex])
-  };
-};
-const setPath = (object, path, newValue) => {
-  const {
-    obj,
-    k
-  } = getLastOfPath(object, path, Object);
-  if (obj !== undefined || path.length === 1) {
-    obj[k] = newValue;
-    return;
-  }
-  let e = path[path.length - 1];
-  let p = path.slice(0, path.length - 1);
-  let last = getLastOfPath(object, p, Object);
-  while (last.obj === undefined && p.length) {
-    e = `${p[p.length - 1]}.${e}`;
-    p = p.slice(0, p.length - 1);
-    last = getLastOfPath(object, p, Object);
-    if (last?.obj && typeof last.obj[`${last.k}.${e}`] !== 'undefined') {
-      last.obj = undefined;
-    }
-  }
-  last.obj[`${last.k}.${e}`] = newValue;
-};
-const pushPath = (object, path, newValue, concat) => {
-  const {
-    obj,
-    k
-  } = getLastOfPath(object, path, Object);
-  obj[k] = obj[k] || [];
-  obj[k].push(newValue);
-};
-const getPath = (object, path) => {
+    obj,
+    k
+  } = getLastOfPath(object, path, Object);
+  obj[k] = obj[k] || [];
+  obj[k].push(newValue);
+};
+const getPath = (object, path) => {
   const {
     obj,
     k
@@ -2793,22 +2452,281 @@ instance.hasLoadedNamespace;
 instance.loadNamespaces;
 instance.loadLanguages;
 
-var locations$1 = {
-	label: "Location",
-	title: "Select location",
-	placeholder: "Add location",
-	selected: "locations"
-};
-var calendar$1 = {
-	label: "Dates",
-	roomsLabelPlaceholder: "Add check-in and check-out",
-	eventsLabelPlaceholder: "Add search dates",
-	startDate: "Start date",
-	endDate: "End date",
-	title: "Calendar"
-};
-var guests$1 = {
-	label: "Number of guests",
+function warn() {
+  if (console && console.warn) {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    if (typeof args[0] === 'string') args[0] = `react-i18next:: ${args[0]}`;
+    console.warn(...args);
+  }
+}
+const alreadyWarned = {};
+function warnOnce() {
+  for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    args[_key2] = arguments[_key2];
+  }
+  if (typeof args[0] === 'string' && alreadyWarned[args[0]]) return;
+  if (typeof args[0] === 'string') alreadyWarned[args[0]] = new Date();
+  warn(...args);
+}
+const loadedClb = (i18n, cb) => () => {
+  if (i18n.isInitialized) {
+    cb();
+  } else {
+    const initialized = () => {
+      setTimeout(() => {
+        i18n.off('initialized', initialized);
+      }, 0);
+      cb();
+    };
+    i18n.on('initialized', initialized);
+  }
+};
+function loadNamespaces(i18n, ns, cb) {
+  i18n.loadNamespaces(ns, loadedClb(i18n, cb));
+}
+function loadLanguages(i18n, lng, ns, cb) {
+  if (typeof ns === 'string') ns = [ns];
+  ns.forEach(n => {
+    if (i18n.options.ns.indexOf(n) < 0) i18n.options.ns.push(n);
+  });
+  i18n.loadLanguages(lng, loadedClb(i18n, cb));
+}
+function oldI18nextHasLoadedNamespace(ns, i18n) {
+  let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  const lng = i18n.languages[0];
+  const fallbackLng = i18n.options ? i18n.options.fallbackLng : false;
+  const lastLng = i18n.languages[i18n.languages.length - 1];
+  if (lng.toLowerCase() === 'cimode') return true;
+  const loadNotPending = (l, n) => {
+    const loadState = i18n.services.backendConnector.state[`${l}|${n}`];
+    return loadState === -1 || loadState === 2;
+  };
+  if (options.bindI18n && options.bindI18n.indexOf('languageChanging') > -1 && i18n.services.backendConnector.backend && i18n.isLanguageChangingTo && !loadNotPending(i18n.isLanguageChangingTo, ns)) return false;
+  if (i18n.hasResourceBundle(lng, ns)) return true;
+  if (!i18n.services.backendConnector.backend || i18n.options.resources && !i18n.options.partialBundledLanguages) return true;
+  if (loadNotPending(lng, ns) && (!fallbackLng || loadNotPending(lastLng, ns))) return true;
+  return false;
+}
+function hasLoadedNamespace(ns, i18n) {
+  let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  if (!i18n.languages || !i18n.languages.length) {
+    warnOnce('i18n.languages were undefined or empty', i18n.languages);
+    return true;
+  }
+  const isNewerI18next = i18n.options.ignoreJSONStructure !== undefined;
+  if (!isNewerI18next) {
+    return oldI18nextHasLoadedNamespace(ns, i18n, options);
+  }
+  return i18n.hasLoadedNamespace(ns, {
+    lng: options.lng,
+    precheck: (i18nInstance, loadNotPending) => {
+      if (options.bindI18n && options.bindI18n.indexOf('languageChanging') > -1 && i18nInstance.services.backendConnector.backend && i18nInstance.isLanguageChangingTo && !loadNotPending(i18nInstance.isLanguageChangingTo, ns)) return false;
+    }
+  });
+}
+
+const matchHtmlEntity = /&(?:amp|#38|lt|#60|gt|#62|apos|#39|quot|#34|nbsp|#160|copy|#169|reg|#174|hellip|#8230|#x2F|#47);/g;
+const htmlEntities = {
+  '&amp;': '&',
+  '&#38;': '&',
+  '&lt;': '<',
+  '&#60;': '<',
+  '&gt;': '>',
+  '&#62;': '>',
+  '&apos;': "'",
+  '&#39;': "'",
+  '&quot;': '"',
+  '&#34;': '"',
+  '&nbsp;': ' ',
+  '&#160;': ' ',
+  '&copy;': '©',
+  '&#169;': '©',
+  '&reg;': '®',
+  '&#174;': '®',
+  '&hellip;': '…',
+  '&#8230;': '…',
+  '&#x2F;': '/',
+  '&#47;': '/'
+};
+const unescapeHtmlEntity = m => htmlEntities[m];
+const unescape = text => text.replace(matchHtmlEntity, unescapeHtmlEntity);
+
+let defaultOptions$1 = {
+  bindI18n: 'languageChanged',
+  bindI18nStore: '',
+  transEmptyNodeValue: '',
+  transSupportBasicHtmlNodes: true,
+  transWrapTextNodes: '',
+  transKeepBasicHtmlNodesFor: ['br', 'strong', 'i', 'p'],
+  useSuspense: true,
+  unescape
+};
+function setDefaults() {
+  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  defaultOptions$1 = {
+    ...defaultOptions$1,
+    ...options
+  };
+}
+function getDefaults() {
+  return defaultOptions$1;
+}
+
+let i18nInstance;
+function setI18n(instance) {
+  i18nInstance = instance;
+}
+function getI18n() {
+  return i18nInstance;
+}
+
+const initReactI18next = {
+  type: '3rdParty',
+  init(instance) {
+    setDefaults(instance.options.react);
+    setI18n(instance);
+  }
+};
+
+const I18nContext = createContext();
+class ReportNamespaces {
+  constructor() {
+    this.usedNamespaces = {};
+  }
+  addUsedNamespaces(namespaces) {
+    namespaces.forEach(ns => {
+      if (!this.usedNamespaces[ns]) this.usedNamespaces[ns] = true;
+    });
+  }
+  getUsedNamespaces() {
+    return Object.keys(this.usedNamespaces);
+  }
+}
+
+const usePrevious = (value, ignore) => {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = ignore ? ref.current : value;
+  }, [value, ignore]);
+  return ref.current;
+};
+function useTranslation(ns) {
+  let props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const {
+    i18n: i18nFromProps
+  } = props;
+  const {
+    i18n: i18nFromContext,
+    defaultNS: defaultNSFromContext
+  } = useContext(I18nContext) || {};
+  const i18n = i18nFromProps || i18nFromContext || getI18n();
+  if (i18n && !i18n.reportNamespaces) i18n.reportNamespaces = new ReportNamespaces();
+  if (!i18n) {
+    warnOnce('You will need to pass in an i18next instance by using initReactI18next');
+    const notReadyT = (k, optsOrDefaultValue) => {
+      if (typeof optsOrDefaultValue === 'string') return optsOrDefaultValue;
+      if (optsOrDefaultValue && typeof optsOrDefaultValue === 'object' && typeof optsOrDefaultValue.defaultValue === 'string') return optsOrDefaultValue.defaultValue;
+      return Array.isArray(k) ? k[k.length - 1] : k;
+    };
+    const retNotReady = [notReadyT, {}, false];
+    retNotReady.t = notReadyT;
+    retNotReady.i18n = {};
+    retNotReady.ready = false;
+    return retNotReady;
+  }
+  if (i18n.options.react && i18n.options.react.wait !== undefined) warnOnce('It seems you are still using the old wait option, you may migrate to the new useSuspense behaviour.');
+  const i18nOptions = {
+    ...getDefaults(),
+    ...i18n.options.react,
+    ...props
+  };
+  const {
+    useSuspense,
+    keyPrefix
+  } = i18nOptions;
+  let namespaces = ns || defaultNSFromContext || i18n.options && i18n.options.defaultNS;
+  namespaces = typeof namespaces === 'string' ? [namespaces] : namespaces || ['translation'];
+  if (i18n.reportNamespaces.addUsedNamespaces) i18n.reportNamespaces.addUsedNamespaces(namespaces);
+  const ready = (i18n.isInitialized || i18n.initializedStoreOnce) && namespaces.every(n => hasLoadedNamespace(n, i18n, i18nOptions));
+  function getT() {
+    return i18n.getFixedT(props.lng || null, i18nOptions.nsMode === 'fallback' ? namespaces : namespaces[0], keyPrefix);
+  }
+  const [t, setT] = useState(getT);
+  let joinedNS = namespaces.join();
+  if (props.lng) joinedNS = `${props.lng}${joinedNS}`;
+  const previousJoinedNS = usePrevious(joinedNS);
+  const isMounted = useRef(true);
+  useEffect(() => {
+    const {
+      bindI18n,
+      bindI18nStore
+    } = i18nOptions;
+    isMounted.current = true;
+    if (!ready && !useSuspense) {
+      if (props.lng) {
+        loadLanguages(i18n, props.lng, namespaces, () => {
+          if (isMounted.current) setT(getT);
+        });
+      } else {
+        loadNamespaces(i18n, namespaces, () => {
+          if (isMounted.current) setT(getT);
+        });
+      }
+    }
+    if (ready && previousJoinedNS && previousJoinedNS !== joinedNS && isMounted.current) {
+      setT(getT);
+    }
+    function boundReset() {
+      if (isMounted.current) setT(getT);
+    }
+    if (bindI18n && i18n) i18n.on(bindI18n, boundReset);
+    if (bindI18nStore && i18n) i18n.store.on(bindI18nStore, boundReset);
+    return () => {
+      isMounted.current = false;
+      if (bindI18n && i18n) bindI18n.split(' ').forEach(e => i18n.off(e, boundReset));
+      if (bindI18nStore && i18n) bindI18nStore.split(' ').forEach(e => i18n.store.off(e, boundReset));
+    };
+  }, [i18n, joinedNS]);
+  const isInitial = useRef(true);
+  useEffect(() => {
+    if (isMounted.current && !isInitial.current) {
+      setT(getT);
+    }
+    isInitial.current = false;
+  }, [i18n, keyPrefix]);
+  const ret = [t, i18n, ready];
+  ret.t = t;
+  ret.i18n = i18n;
+  ret.ready = ready;
+  if (ready) return ret;
+  if (!ready && !useSuspense) return ret;
+  throw new Promise(resolve => {
+    if (props.lng) {
+      loadLanguages(i18n, props.lng, namespaces, () => resolve());
+    } else {
+      loadNamespaces(i18n, namespaces, () => resolve());
+    }
+  });
+}
+
+var locations$1 = {
+	label: "Location",
+	title: "Select location",
+	placeholder: "Add location",
+	selected: "locations"
+};
+var calendar$1 = {
+	label: "Dates",
+	roomsLabelPlaceholder: "Add check-in and check-out",
+	eventsLabelPlaceholder: "Add search dates",
+	startDate: "Start date",
+	endDate: "End date",
+	title: "Calendar"
+};
+var guests$1 = {
+	label: "Number of guests",
 	labelPlaceholder: "Add guests",
 	title: "Who's coming?",
 	adultsLabel: "Adults",
@@ -2999,25 +2917,134 @@ var useAutoFocus = function (autoFocus) {
     return ref;
 };
 
-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 css_248z$j = ".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  user-select: none;\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$j);
 
-var SubmitButton = function (_a) {
-    var onClick = _a.onClick, startIcon = _a.startIcon, label = _a.label, disabled = _a.disabled, isLoading = _a.isLoading, variant = _a.variant;
-    return (jsxs("button", { className: "will-filter-bar-submit-button ".concat(variant || 'default'), onClick: onClick, disabled: disabled || isLoading, children: [isLoading ? (jsx("span", { children: jsx(FaSpinner, { style: { animation: 'spin 1s linear infinite' } }) })) : (startIcon && jsx("span", { children: startIcon })), label || 'Label'] }));
+var SelectButton = forwardRef(function (_a, ref) {
+    var active = _a.active, label = _a.label, onClick = _a.onClick, description = _a.description, disabled = _a.disabled, ariaExpanded = _a.ariaExpanded, ariaControls = _a.ariaControls;
+    return (React__default.createElement("button", { ref: ref, className: "will-filter-bar-select-button ".concat(disabled ? 'disabled' : ''), onClick: function (e) { return (disabled ? undefined : onClick(e)); }, disabled: disabled, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, "aria-haspopup": "true", "aria-disabled": disabled },
+        React__default.createElement("span", { className: "select-button-wrapper" },
+            React__default.createElement("div", null,
+                React__default.createElement("p", { className: "select-button-label" }, label),
+                React__default.createElement("p", { className: "select-button-description ".concat(active ? 'active' : '') }, description)))));
+});
+SelectButton.displayName = 'SelectButton';
+
+var css_248z$i = ".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$i);
+
+var TabButton = function (_a) {
+    var onClick = _a.onClick, label = _a.label, active = _a.active, mode = _a.mode;
+    return (React__default.createElement("button", { className: "will-filter-bar-tab-button ".concat(mode || 'light', " ").concat(active && 'active', " "), onClick: onClick }, label));
 };
 
-// THIS FILE IS AUTO GENERATED
-function IoIosCloseCircleOutline (props) {
-  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$h = ".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$h);
 
-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 Divider = function () {
+    return React__default.createElement("div", { className: "will-filter-bar-divider" });
+};
 
-var CloseButton = function (_a) {
-    var handleClose = _a.handleClose;
-    return (jsx("button", { className: "will-filter-bar-close-button", onClick: handleClose, children: jsx(IoIosCloseCircleOutline, {}) }));
+var FilterSections;
+(function (FilterSections) {
+    FilterSections["CALENDAR"] = "calendar";
+    FilterSections["GUESTS"] = "guests";
+    FilterSections["CATEGORIES"] = "categories";
+    FilterSections["LOCATIONS"] = "locations";
+})(FilterSections || (FilterSections = {}));
+var Pages;
+(function (Pages) {
+    Pages["ROOMS"] = "/rooms";
+    Pages["EVENTS"] = "/events";
+    Pages["SALES"] = "/sales";
+})(Pages || (Pages = {}));
+
+var useScrollInToView = function (_a) {
+    var selectedFilter = _a.selectedFilter;
+    var _b = __read(useState(true), 2), isMobile = _b[0], setIsMobile = _b[1];
+    var targetFilterBarRef = useRef(null);
+    useEffect(function () {
+        if (typeof window !== 'undefined' && window.innerWidth > 960) {
+            setIsMobile(false);
+            return;
+        }
+        if (targetFilterBarRef.current && selectedFilter) {
+            window.scrollTo({
+                behavior: 'smooth',
+                top: targetFilterBarRef.current.getBoundingClientRect().top -
+                    document.body.getBoundingClientRect().top -
+                    30,
+            });
+        }
+    }, [selectedFilter]);
+    return { isMobile: isMobile, targetFilterBarRef: targetFilterBarRef };
+};
+
+var useFilterState = function (_a) {
+    var locations = _a.locations;
+    var _b = __read(useState(Pages.EVENTS), 2), selectedPath = _b[0], setSelectedPath = _b[1];
+    var _c = __read(useState(false), 2), selectedFilter = _c[0], setSelectedFilter = _c[1];
+    var _d = __read(useState(), 2), calendarRange = _d[0], setCalendarRange = _d[1];
+    var _e = __read(useState(false), 2), innerLoading = _e[0], setInnerLoading = _e[1];
+    var _f = __read(useState(0), 2), categories = _f[0], setCategories = _f[1];
+    var _g = __read(useState({}), 2), ageCategoryCounts = _g[0], setAgeCategoryCounts = _g[1];
+    var _h = __read(useState([]), 2), selectedLocations = _h[0], setSelectedLocations = _h[1];
+    useEffect(function () {
+        var _a;
+        if (typeof window === 'undefined')
+            return;
+        var urlSearchParams = new URLSearchParams(window.location.search);
+        var startDateParam = urlSearchParams.get('startDate');
+        var endDateParam = urlSearchParams.get('endDate');
+        var locationIdParams = urlSearchParams.getAll('locationId');
+        var ageCategoryCountsParam = {};
+        var ageCategoryCountsQuery = urlSearchParams.get('ageCategoryCounts');
+        if (ageCategoryCountsQuery) {
+            try {
+                ageCategoryCountsParam = JSON.parse(ageCategoryCountsQuery);
+            }
+            catch (error) {
+                console.warn('Invalid ageCategoryCounts query param, ignoring', error);
+                ageCategoryCountsParam = {};
+            }
+        }
+        var categoriesParam = urlSearchParams.get('categories');
+        var parsedCategories = 0;
+        if (categoriesParam) {
+            var parsed = parseInt(categoriesParam, 10);
+            parsedCategories = Number.isNaN(parsed) ? 0 : parsed;
+        }
+        if (startDateParam && endDateParam) {
+            setCalendarRange({
+                from: new Date(startDateParam),
+                to: new Date(endDateParam),
+            });
+        }
+        setAgeCategoryCounts(ageCategoryCountsParam);
+        setCategories(parsedCategories);
+        if (((_a = locations === null || locations === void 0 ? void 0 : locations.data) === null || _a === void 0 ? void 0 : _a.length) && locationIdParams.length) {
+            var matchedLocations = locations.data.filter(function (location) {
+                return locationIdParams.includes(location.id.toString());
+            });
+            setSelectedLocations(matchedLocations);
+        }
+    }, [locations]);
+    return {
+        selectedPath: selectedPath,
+        selectedFilter: selectedFilter,
+        calendarRange: calendarRange,
+        innerLoading: innerLoading,
+        categories: categories,
+        ageCategoryCounts: ageCategoryCounts,
+        selectedLocations: selectedLocations,
+        setSelectedLocations: setSelectedLocations,
+        setCalendarRange: setCalendarRange,
+        setAgeCategoryCounts: setAgeCategoryCounts,
+        setCategories: setCategories,
+        setSelectedPath: setSelectedPath,
+        setSelectedFilter: setSelectedFilter,
+        setInnerLoading: setInnerLoading,
+    };
 };
 
 function _typeof(o) {
@@ -6538,100 +6565,454 @@ function isSameMonth(dirtyDateLeft, dirtyDateRight) {
  */
 function isSameYear(dirtyDateLeft, dirtyDateRight) {
   requiredArgs(2, arguments);
-  var dateLeft = toDate(dirtyDateLeft);
-  var dateRight = toDate(dirtyDateRight);
-  return dateLeft.getFullYear() === dateRight.getFullYear();
+  var dateLeft = toDate(dirtyDateLeft);
+  var dateRight = toDate(dirtyDateRight);
+  return dateLeft.getFullYear() === dateRight.getFullYear();
+}
+
+/**
+ * @name subDays
+ * @category Day Helpers
+ * @summary Subtract the specified number of days from the given date.
+ *
+ * @description
+ * Subtract the specified number of days from the given date.
+ *
+ * @param {Date|Number} date - the date to be changed
+ * @param {Number} amount - the amount of days to be subtracted. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
+ * @returns {Date} the new date with the days subtracted
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // Subtract 10 days from 1 September 2014:
+ * const result = subDays(new Date(2014, 8, 1), 10)
+ * //=> Fri Aug 22 2014 00:00:00
+ */
+function subDays(dirtyDate, dirtyAmount) {
+  requiredArgs(2, arguments);
+  var amount = toInteger(dirtyAmount);
+  return addDays(dirtyDate, -amount);
+}
+
+/**
+ * @name setMonth
+ * @category Month Helpers
+ * @summary Set the month to the given date.
+ *
+ * @description
+ * Set the month to the given date.
+ *
+ * @param {Date|Number} date - the date to be changed
+ * @param {Number} month - the month of the new date
+ * @returns {Date} the new date with the month set
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // Set February to 1 September 2014:
+ * const result = setMonth(new Date(2014, 8, 1), 1)
+ * //=> Sat Feb 01 2014 00:00:00
+ */
+function setMonth(dirtyDate, dirtyMonth) {
+  requiredArgs(2, arguments);
+  var date = toDate(dirtyDate);
+  var month = toInteger(dirtyMonth);
+  var year = date.getFullYear();
+  var day = date.getDate();
+  var dateWithDesiredMonth = new Date(0);
+  dateWithDesiredMonth.setFullYear(year, month, 15);
+  dateWithDesiredMonth.setHours(0, 0, 0, 0);
+  var daysInMonth = getDaysInMonth(dateWithDesiredMonth);
+  // Set the last day of the new month
+  // if the original date was the last day of the longer month
+  date.setMonth(month, Math.min(day, daysInMonth));
+  return date;
 }
 
 /**
- * @name subDays
- * @category Day Helpers
- * @summary Subtract the specified number of days from the given date.
+ * @name setYear
+ * @category Year Helpers
+ * @summary Set the year to the given date.
  *
  * @description
- * Subtract the specified number of days from the given date.
+ * Set the year to the given date.
  *
  * @param {Date|Number} date - the date to be changed
- * @param {Number} amount - the amount of days to be subtracted. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
- * @returns {Date} the new date with the days subtracted
+ * @param {Number} year - the year of the new date
+ * @returns {Date} the new date with the year set
  * @throws {TypeError} 2 arguments required
  *
  * @example
- * // Subtract 10 days from 1 September 2014:
- * const result = subDays(new Date(2014, 8, 1), 10)
- * //=> Fri Aug 22 2014 00:00:00
+ * // Set year 2013 to 1 September 2014:
+ * const result = setYear(new Date(2014, 8, 1), 2013)
+ * //=> Sun Sep 01 2013 00:00:00
  */
-function subDays(dirtyDate, dirtyAmount) {
+function setYear(dirtyDate, dirtyYear) {
   requiredArgs(2, arguments);
-  var amount = toInteger(dirtyAmount);
-  return addDays(dirtyDate, -amount);
+  var date = toDate(dirtyDate);
+  var year = toInteger(dirtyYear);
+
+  // Check if date is Invalid Date because Date.prototype.setFullYear ignores the value of Invalid Date
+  if (isNaN(date.getTime())) {
+    return new Date(NaN);
+  }
+  date.setFullYear(year);
+  return date;
+}
+
+var parseGuests = function (_a) {
+    var guestLabel = _a.guestLabel, guestsLabel = _a.guestsLabel, guestsPlaceholder = _a.guestsPlaceholder, ageCategoryCounts = _a.ageCategoryCounts, ageCategories = _a.ageCategories;
+    var parsedData = Object.entries(ageCategoryCounts).reduce(function (acc, _a) {
+        var _b = __read(_a, 2), key = _b[0], value = _b[1];
+        var parts = key.split('-');
+        if (parts.length < 2)
+            return acc;
+        var ageCategoryId = parts[1];
+        var ageCategory = ageCategories === null || ageCategories === void 0 ? void 0 : ageCategories.find(function (c) { return c.id === ageCategoryId; });
+        if (ageCategory && value) {
+            return {
+                total: acc.total + value,
+                html: __spreadArray$1(__spreadArray$1([], __read(acc.html), false), ["".concat(value)], false),
+            };
+        }
+        return acc;
+    }, { total: 0, html: [] });
+    if (!parsedData.total) {
+        return {
+            content: guestsPlaceholder,
+            data: parsedData,
+        };
+    }
+    var breakdown = parsedData.html.length > 1 ? parsedData.html.join(' + ') : null;
+    return {
+        content: (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement("span", { className: "will-guest-count" }, parsedData.total),
+            ' ',
+            parsedData.total > 1 ? guestsLabel : guestLabel,
+            breakdown && React__default.createElement(React__default.Fragment, null,
+                " \u00A0 ( ",
+                breakdown,
+                " )"))),
+        data: parsedData,
+    };
+};
+
+var parseLocations = function (_a) {
+    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 singleSelection = selectedLocations[0].label;
+        if (!singleSelection) {
+            return locationsPlaceholder;
+        }
+        return singleSelection;
+    }
+    return "".concat(selectedLocations.length, " ").concat(locationsSelectedLabel);
+};
+
+var ageCategoryRules = function (_a) {
+    var ageCategoryCounts = _a.ageCategoryCounts, ageCategories = _a.ageCategories;
+    if (ageCategories === null || ageCategories === void 0 ? void 0 : ageCategories.length) {
+        ageCategories === null || ageCategories === void 0 ? void 0 : ageCategories.map(function (a) {
+            if (a.minVal) {
+                var ageCategory = ageCategoryCounts["guests-".concat(a.id)];
+                if (!ageCategory) {
+                    ageCategoryCounts["guests-".concat(a.id)] = a.minVal;
+                }
+            }
+        });
+    }
+    return Object.entries(ageCategoryCounts).length
+        ? JSON.stringify(ageCategoryCounts)
+        : '';
+};
+
+var useFilterActions = function (_a) {
+    var tabs = _a.tabs, calendarRange = _a.calendarRange, ageCategoryCounts = _a.ageCategoryCounts, ageCategories = _a.ageCategories, selectedLocations = _a.selectedLocations, selectedPath = _a.selectedPath, redirectUrl = _a.redirectUrl, setSelectedPath = _a.setSelectedPath, setAgeCategoryCounts = _a.setAgeCategoryCounts, setSelectedFilter = _a.setSelectedFilter, setCalendarRange = _a.setCalendarRange, onSubmit = _a.onSubmit, setInnerLoading = _a.setInnerLoading;
+    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; });
+        var paths = [Pages.EVENTS, Pages.ROOMS, Pages.SALES];
+        var currentPath = paths.find(function (path) { return window.location.pathname.includes(path); }) ||
+            (defaultTab === null || defaultTab === void 0 ? void 0 : defaultTab.path) ||
+            Pages.EVENTS;
+        setSelectedPath(currentPath);
+    }, [tabs]);
+    var updateGuestsCount = function (id, newCount) {
+        setAgeCategoryCounts(function (prev) {
+            var _a;
+            return (__assign$2(__assign$2({}, prev), (_a = {}, _a[id] = newCount, _a)));
+        });
+    };
+    var handleSelectedFilter = function (id) {
+        setSelectedFilter(id);
+    };
+    var handleSubmit = function () {
+        var e_1, _a;
+        if (typeof window === 'undefined')
+            return;
+        var newParams = {
+            startDate: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from)
+                ? format(calendarRange.from, 'yyyy-MM-dd')
+                : '',
+            endDate: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) ? format(calendarRange.to, 'yyyy-MM-dd') : '',
+            ageCategoryCounts: ageCategoryRules({
+                ageCategoryCounts: ageCategoryCounts,
+                ageCategories: ageCategories,
+            }),
+            selectedLocations: selectedLocations
+                .map(function (l) { return l.id.toString(); })
+                .join(','),
+        };
+        var querySearchParams = new URLSearchParams();
+        try {
+            for (var _b = __values(Object.entries(newParams)), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var _d = __read(_c.value, 2), key = _d[0], value = _d[1];
+                if (!value)
+                    continue;
+                if (key === 'selectedLocations' && selectedLocations.length) {
+                    selectedLocations.forEach(function (location) {
+                        return querySearchParams.append('locationId', location.id.toString());
+                    });
+                }
+                else {
+                    querySearchParams.append(key, value.toString());
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        setSelectedFilter(false);
+        if (onSubmit && window.location.href.includes(selectedPath)) {
+            onSubmit(newParams);
+            return;
+        }
+        var paramString = querySearchParams.toString();
+        var path = "".concat(redirectUrl).concat(selectedPath);
+        setInnerLoading(true);
+        window.location.href = paramString ? "".concat(path, "?").concat(paramString) : path;
+    };
+    var handleResetFilters = function () {
+        setAgeCategoryCounts({});
+        setCalendarRange(undefined);
+    };
+    return {
+        updateGuestsCount: updateGuestsCount,
+        handleSelectedFilter: handleSelectedFilter,
+        handleSubmit: handleSubmit,
+        handleResetFilters: handleResetFilters,
+    };
+};
+
+var useFilterUi = function (selectedFilter) {
+    var buttonRefs = useRef({});
+    var panelRef = useRef(null);
+    var previouslyFocusedButtonRef = useRef(null);
+    var _a = useScrollInToView({ selectedFilter: selectedFilter }), isMobile = _a.isMobile, targetFilterBarRef = _a.targetFilterBarRef;
+    return {
+        previouslyFocusedButtonRef: previouslyFocusedButtonRef,
+        isMobile: isMobile,
+        targetFilterBarRef: targetFilterBarRef,
+        panelRef: panelRef,
+        buttonRefs: buttonRefs,
+    };
+};
+
+var usePanelPosition = function (_a) {
+    var selectedFilter = _a.selectedFilter, panelRef = _a.panelRef, targetFilterBarRef = _a.targetFilterBarRef, buttonRefs = _a.buttonRefs, isMobile = _a.isMobile;
+    var _b = __read(useState({}), 2), localStyles = _b[0], setLocalStyles = _b[1];
+    useEffect(function () {
+        if (!selectedFilter || typeof selectedFilter !== 'string' || isMobile) {
+            setLocalStyles({});
+            return;
+        }
+        var timeoutId = null;
+        var calculate = function () {
+            var panel = panelRef.current;
+            var container = targetFilterBarRef.current;
+            var button = buttonRefs.current[selectedFilter];
+            if (!panel || !container || !button)
+                return;
+            var panelRect = panel.getBoundingClientRect();
+            if (panelRect.width === 0) {
+                timeoutId = window.setTimeout(calculate, 10);
+                return;
+            }
+            var containerRect = container.getBoundingClientRect();
+            var buttonRect = button.getBoundingClientRect();
+            var buttonLeft = buttonRect.left - containerRect.left;
+            var left = Math.min(buttonLeft, Math.max(containerRect.width - panelRect.width, 0));
+            setLocalStyles({ left: left });
+        };
+        calculate();
+        return function () {
+            if (timeoutId)
+                clearTimeout(timeoutId);
+        };
+    }, [selectedFilter, panelRef, targetFilterBarRef, buttonRefs, isMobile]);
+    return { localStyles: localStyles };
+};
+
+var FilterBarContext = createContext(undefined);
+var FilterBarProvider = function (_a) {
+    var children = _a.children, language = _a.language, ageCategories = _a.ageCategories, redirectUrl = _a.redirectUrl, palette = _a.palette, onSubmit = _a.onSubmit, fullWidth = _a.fullWidth, disableCalendarDates = _a.disableCalendarDates, mode = _a.mode, tabs = _a.tabs, outerLoading = _a.outerLoading, locations = _a.locations;
+    var _b = useFilterState({ locations: locations }), selectedPath = _b.selectedPath, selectedFilter = _b.selectedFilter, calendarRange = _b.calendarRange, innerLoading = _b.innerLoading, categories = _b.categories, ageCategoryCounts = _b.ageCategoryCounts, selectedLocations = _b.selectedLocations, setSelectedLocations = _b.setSelectedLocations, setCalendarRange = _b.setCalendarRange, setAgeCategoryCounts = _b.setAgeCategoryCounts, setCategories = _b.setCategories, setSelectedPath = _b.setSelectedPath, setSelectedFilter = _b.setSelectedFilter, setInnerLoading = _b.setInnerLoading;
+    var filterActions = useFilterActions({
+        tabs: tabs,
+        ageCategoryCounts: ageCategoryCounts,
+        ageCategories: ageCategories,
+        selectedLocations: selectedLocations,
+        selectedPath: selectedPath,
+        redirectUrl: redirectUrl,
+        setSelectedPath: setSelectedPath,
+        setAgeCategoryCounts: setAgeCategoryCounts,
+        setSelectedFilter: setSelectedFilter,
+        setCalendarRange: setCalendarRange,
+        onSubmit: onSubmit,
+        setInnerLoading: setInnerLoading,
+    });
+    var filterUi = useFilterUi(selectedFilter);
+    var contextValue = useMemo(function () { return (__assign$2(__assign$2(__assign$2({ selectedFilter: selectedFilter, ageCategoryCounts: ageCategoryCounts, categories: categories, calendarRange: calendarRange, selectedPath: selectedPath, innerLoading: innerLoading, selectedLocations: selectedLocations, setSelectedLocations: setSelectedLocations, setCalendarRange: setCalendarRange, setSelectedFilter: setSelectedFilter, setAgeCategoryCounts: setAgeCategoryCounts, setCategories: setCategories, setSelectedPath: setSelectedPath }, filterActions), { language: language, ageCategories: ageCategories, redirectUrl: redirectUrl, palette: palette, onSubmit: onSubmit, fullWidth: fullWidth, disableCalendarDates: disableCalendarDates, mode: mode, tabs: tabs, outerLoading: outerLoading, locations: locations }), filterUi)); }, [
+        selectedFilter,
+        ageCategoryCounts,
+        categories,
+        calendarRange,
+        selectedPath,
+        innerLoading,
+        selectedLocations,
+        language,
+        ageCategories,
+        redirectUrl,
+        palette,
+        onSubmit,
+        fullWidth,
+        disableCalendarDates,
+        mode,
+        tabs,
+        outerLoading,
+        locations,
+        filterUi.isMobile,
+        filterUi.targetFilterBarRef,
+    ]);
+    return (React__default.createElement(FilterBarContext.Provider, { value: contextValue }, children));
+};
+var useFilterBar = function () {
+    var context = useContext(FilterBarContext);
+    if (!context) {
+        throw new Error('useFilterBar must be used within FilterBarProvider');
+    }
+    return context;
+};
+
+var DefaultContext = {
+  color: undefined,
+  size: undefined,
+  className: undefined,
+  style: undefined,
+  attr: undefined
+};
+var IconContext = React__default.createContext && React__default.createContext(DefaultContext);
+
+var __assign$1 = undefined && undefined.__assign || function () {
+  __assign$1 = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign$1.apply(this, arguments);
+};
+var __rest$1 = undefined && undefined.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+function Tree2Element(tree) {
+  return tree && tree.map(function (node, i) {
+    return React__default.createElement(node.tag, __assign$1({
+      key: i
+    }, node.attr), Tree2Element(node.child));
+  });
+}
+function GenIcon(data) {
+  // eslint-disable-next-line react/display-name
+  return function (props) {
+    return React__default.createElement(IconBase, __assign$1({
+      attr: __assign$1({}, data.attr)
+    }, props), Tree2Element(data.child));
+  };
+}
+function IconBase(props) {
+  var elem = function (conf) {
+    var attr = props.attr,
+      size = props.size,
+      title = props.title,
+      svgProps = __rest$1(props, ["attr", "size", "title"]);
+    var computedSize = size || conf.size || "1em";
+    var className;
+    if (conf.className) className = conf.className;
+    if (props.className) className = (className ? className + " " : "") + props.className;
+    return React__default.createElement("svg", __assign$1({
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0"
+    }, conf.attr, attr, svgProps, {
+      className: className,
+      style: __assign$1(__assign$1({
+        color: props.color || conf.color
+      }, conf.style), props.style),
+      height: computedSize,
+      width: computedSize,
+      xmlns: "http://www.w3.org/2000/svg"
+    }), title && React__default.createElement("title", null, title), props.children);
+  };
+  return IconContext !== undefined ? React__default.createElement(IconContext.Consumer, null, function (conf) {
+    return elem(conf);
+  }) : elem(DefaultContext);
 }
 
-/**
- * @name setMonth
- * @category Month Helpers
- * @summary Set the month to the given date.
- *
- * @description
- * Set the month to the given date.
- *
- * @param {Date|Number} date - the date to be changed
- * @param {Number} month - the month of the new date
- * @returns {Date} the new date with the month set
- * @throws {TypeError} 2 arguments required
- *
- * @example
- * // Set February to 1 September 2014:
- * const result = setMonth(new Date(2014, 8, 1), 1)
- * //=> Sat Feb 01 2014 00:00:00
- */
-function setMonth(dirtyDate, dirtyMonth) {
-  requiredArgs(2, arguments);
-  var date = toDate(dirtyDate);
-  var month = toInteger(dirtyMonth);
-  var year = date.getFullYear();
-  var day = date.getDate();
-  var dateWithDesiredMonth = new Date(0);
-  dateWithDesiredMonth.setFullYear(year, month, 15);
-  dateWithDesiredMonth.setHours(0, 0, 0, 0);
-  var daysInMonth = getDaysInMonth(dateWithDesiredMonth);
-  // Set the last day of the new month
-  // if the original date was the last day of the longer month
-  date.setMonth(month, Math.min(day, daysInMonth));
-  return date;
+// THIS FILE IS AUTO GENERATED
+function FaSearch (props) {
+  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 512 512"},"child":[{"tag":"path","attr":{"d":"M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"}}]})(props);
+}function FaSpinner (props) {
+  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 512 512"},"child":[{"tag":"path","attr":{"d":"M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z"}}]})(props);
 }
 
-/**
- * @name setYear
- * @category Year Helpers
- * @summary Set the year to the given date.
- *
- * @description
- * Set the year to the given date.
- *
- * @param {Date|Number} date - the date to be changed
- * @param {Number} year - the year of the new date
- * @returns {Date} the new date with the year set
- * @throws {TypeError} 2 arguments required
- *
- * @example
- * // Set year 2013 to 1 September 2014:
- * const result = setYear(new Date(2014, 8, 1), 2013)
- * //=> Sun Sep 01 2013 00:00:00
- */
-function setYear(dirtyDate, dirtyYear) {
-  requiredArgs(2, arguments);
-  var date = toDate(dirtyDate);
-  var year = toInteger(dirtyYear);
+var css_248z$g = ".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$g);
 
-  // Check if date is Invalid Date because Date.prototype.setFullYear ignores the value of Invalid Date
-  if (isNaN(date.getTime())) {
-    return new Date(NaN);
-  }
-  date.setFullYear(year);
-  return date;
+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__default.createElement("button", { className: "will-filter-bar-submit-button ".concat(variant || 'default'), onClick: onClick, disabled: disabled || isLoading },
+        isLoading ? (React__default.createElement("span", null, React__default.createElement(FaSpinner, { style: { animation: 'spin 1s linear infinite' } }))) : (startIcon && React__default.createElement("span", null, startIcon)),
+        label || 'Label'));
+};
+
+// THIS FILE IS AUTO GENERATED
+function IoIosCloseCircleOutline (props) {
+  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$f = ".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$f);
+
+var CloseButton = function (_a) {
+    var handleClose = _a.handleClose;
+    return (React__default.createElement("button", { className: "will-filter-bar-close-button", onClick: handleClose },
+        React__default.createElement(IoIosCloseCircleOutline, null)));
+};
+
 function futureSeconds(text) {
   return text.replace(/sekuntia?/, 'sekunnin');
 }
@@ -7320,7 +7701,7 @@ function DayPickerProvider(props) {
         onSelect = initialProps.onSelect;
     }
     var value = __assign(__assign(__assign({}, defaultContextValues), initialProps), { captionLayout: captionLayout, classNames: __assign(__assign({}, defaultContextValues.classNames), initialProps.classNames), components: __assign({}, initialProps.components), formatters: __assign(__assign({}, defaultContextValues.formatters), initialProps.formatters), fromDate: fromDate, labels: __assign(__assign({}, defaultContextValues.labels), initialProps.labels), mode: initialProps.mode || defaultContextValues.mode, modifiers: __assign(__assign({}, defaultContextValues.modifiers), initialProps.modifiers), modifiersClassNames: __assign(__assign({}, defaultContextValues.modifiersClassNames), initialProps.modifiersClassNames), onSelect: onSelect, styles: __assign(__assign({}, defaultContextValues.styles), initialProps.styles), toDate: toDate });
-    return (React__default__default.createElement(DayPickerContext.Provider, { value: value }, props.children));
+    return (React__default.createElement(DayPickerContext.Provider, { value: value }, props.children));
 }
 /**
  * Hook to access the {@link DayPickerContextValue}.
@@ -7339,15 +7720,15 @@ function useDayPicker() {
 /** Render the caption for the displayed month. This component is used when `captionLayout="buttons"`. */
 function CaptionLabel(props) {
     var _a = useDayPicker(), locale = _a.locale, classNames = _a.classNames, styles = _a.styles, formatCaption = _a.formatters.formatCaption;
-    return (React__default__default.createElement("div", { className: classNames.caption_label, style: styles.caption_label, "aria-live": "polite", role: "presentation", id: props.id }, formatCaption(props.displayMonth, { locale: locale })));
+    return (React__default.createElement("div", { className: classNames.caption_label, style: styles.caption_label, "aria-live": "polite", role: "presentation", id: props.id }, formatCaption(props.displayMonth, { locale: locale })));
 }
 
 /**
  * Render the icon in the styled drop-down.
  */
 function IconDropdown(props) {
-    return (React__default__default.createElement("svg", __assign({ width: "8px", height: "8px", viewBox: "0 0 120 120", "data-testid": "iconDropdown" }, props),
-        React__default__default.createElement("path", { d: "M4.22182541,48.2218254 C8.44222828,44.0014225 15.2388494,43.9273804 19.5496459,47.9996989 L19.7781746,48.2218254 L60,88.443 L100.221825,48.2218254 C104.442228,44.0014225 111.238849,43.9273804 115.549646,47.9996989 L115.778175,48.2218254 C119.998577,52.4422283 120.07262,59.2388494 116.000301,63.5496459 L115.778175,63.7781746 L67.7781746,111.778175 C63.5577717,115.998577 56.7611506,116.07262 52.4503541,112.000301 L52.2218254,111.778175 L4.22182541,63.7781746 C-0.0739418023,59.4824074 -0.0739418023,52.5175926 4.22182541,48.2218254 Z", fill: "currentColor", fillRule: "nonzero" })));
+    return (React__default.createElement("svg", __assign({ width: "8px", height: "8px", viewBox: "0 0 120 120", "data-testid": "iconDropdown" }, props),
+        React__default.createElement("path", { d: "M4.22182541,48.2218254 C8.44222828,44.0014225 15.2388494,43.9273804 19.5496459,47.9996989 L19.7781746,48.2218254 L60,88.443 L100.221825,48.2218254 C104.442228,44.0014225 111.238849,43.9273804 115.549646,47.9996989 L115.778175,48.2218254 C119.998577,52.4422283 120.07262,59.2388494 116.000301,63.5496459 L115.778175,63.7781746 L67.7781746,111.778175 C63.5577717,115.998577 56.7611506,116.07262 52.4503541,112.000301 L52.2218254,111.778175 L4.22182541,63.7781746 C-0.0739418023,59.4824074 -0.0739418023,52.5175926 4.22182541,48.2218254 Z", fill: "currentColor", fillRule: "nonzero" })));
 }
 
 /**
@@ -7359,12 +7740,12 @@ function Dropdown(props) {
     var onChange = props.onChange, value = props.value, children = props.children, caption = props.caption, className = props.className, style = props.style;
     var dayPicker = useDayPicker();
     var IconDropdownComponent = (_b = (_a = dayPicker.components) === null || _a === void 0 ? void 0 : _a.IconDropdown) !== null && _b !== void 0 ? _b : IconDropdown;
-    return (React__default__default.createElement("div", { className: className, style: style },
-        React__default__default.createElement("span", { className: dayPicker.classNames.vhidden }, props['aria-label']),
-        React__default__default.createElement("select", { name: props.name, "aria-label": props['aria-label'], className: dayPicker.classNames.dropdown, style: dayPicker.styles.dropdown, value: value, onChange: onChange }, children),
-        React__default__default.createElement("div", { className: dayPicker.classNames.caption_label, style: dayPicker.styles.caption_label, "aria-hidden": "true" },
+    return (React__default.createElement("div", { className: className, style: style },
+        React__default.createElement("span", { className: dayPicker.classNames.vhidden }, props['aria-label']),
+        React__default.createElement("select", { name: props.name, "aria-label": props['aria-label'], className: dayPicker.classNames.dropdown, style: dayPicker.styles.dropdown, value: value, onChange: onChange }, children),
+        React__default.createElement("div", { className: dayPicker.classNames.caption_label, style: dayPicker.styles.caption_label, "aria-hidden": "true" },
             caption,
-            React__default__default.createElement(IconDropdownComponent, { className: dayPicker.classNames.dropdown_icon, style: dayPicker.styles.dropdown_icon }))));
+            React__default.createElement(IconDropdownComponent, { className: dayPicker.classNames.dropdown_icon, style: dayPicker.styles.dropdown_icon }))));
 }
 
 /** Render the dropdown to navigate between months. */
@@ -7373,9 +7754,9 @@ function MonthsDropdown(props) {
     var _b = useDayPicker(), fromDate = _b.fromDate, toDate = _b.toDate, styles = _b.styles, locale = _b.locale, formatMonthCaption = _b.formatters.formatMonthCaption, classNames = _b.classNames, components = _b.components, labelMonthDropdown = _b.labels.labelMonthDropdown;
     // Dropdown should appear only when both from/toDate is set
     if (!fromDate)
-        return React__default__default.createElement(React__default__default.Fragment, null);
+        return React__default.createElement(React__default.Fragment, null);
     if (!toDate)
-        return React__default__default.createElement(React__default__default.Fragment, null);
+        return React__default.createElement(React__default.Fragment, null);
     var dropdownMonths = [];
     if (isSameYear(fromDate, toDate)) {
         // only display the months included in the range
@@ -7397,7 +7778,7 @@ function MonthsDropdown(props) {
         props.onChange(newMonth);
     };
     var DropdownComponent = (_a = components === null || components === void 0 ? void 0 : components.Dropdown) !== null && _a !== void 0 ? _a : Dropdown;
-    return (React__default__default.createElement(DropdownComponent, { name: "months", "aria-label": labelMonthDropdown(), className: classNames.dropdown_month, style: styles.dropdown_month, onChange: handleChange, value: props.displayMonth.getMonth(), caption: formatMonthCaption(props.displayMonth, { locale: locale }) }, dropdownMonths.map(function (m) { return (React__default__default.createElement("option", { key: m.getMonth(), value: m.getMonth() }, formatMonthCaption(m, { locale: locale }))); })));
+    return (React__default.createElement(DropdownComponent, { name: "months", "aria-label": labelMonthDropdown(), className: classNames.dropdown_month, style: styles.dropdown_month, onChange: handleChange, value: props.displayMonth.getMonth(), caption: formatMonthCaption(props.displayMonth, { locale: locale }) }, dropdownMonths.map(function (m) { return (React__default.createElement("option", { key: m.getMonth(), value: m.getMonth() }, formatMonthCaption(m, { locale: locale }))); })));
 }
 
 /**
@@ -7411,9 +7792,9 @@ function YearsDropdown(props) {
     var years = [];
     // Dropdown should appear only when both from/toDate is set
     if (!fromDate)
-        return React__default__default.createElement(React__default__default.Fragment, null);
+        return React__default.createElement(React__default.Fragment, null);
     if (!toDate)
-        return React__default__default.createElement(React__default__default.Fragment, null);
+        return React__default.createElement(React__default.Fragment, null);
     var fromYear = fromDate.getFullYear();
     var toYear = toDate.getFullYear();
     for (var year = fromYear; year <= toYear; year++) {
@@ -7424,7 +7805,7 @@ function YearsDropdown(props) {
         props.onChange(newMonth);
     };
     var DropdownComponent = (_a = components === null || components === void 0 ? void 0 : components.Dropdown) !== null && _a !== void 0 ? _a : Dropdown;
-    return (React__default__default.createElement(DropdownComponent, { name: "years", "aria-label": labelYearDropdown(), className: classNames.dropdown_year, style: styles.dropdown_year, onChange: handleChange, value: displayMonth.getFullYear(), caption: formatYearCaption(displayMonth, { locale: locale }) }, years.map(function (year) { return (React__default__default.createElement("option", { key: year.getFullYear(), value: year.getFullYear() }, formatYearCaption(year, { locale: locale }))); })));
+    return (React__default.createElement(DropdownComponent, { name: "years", "aria-label": labelYearDropdown(), className: classNames.dropdown_year, style: styles.dropdown_year, onChange: handleChange, value: displayMonth.getFullYear(), caption: formatYearCaption(displayMonth, { locale: locale }) }, years.map(function (year) { return (React__default.createElement("option", { key: year.getFullYear(), value: year.getFullYear() }, formatYearCaption(year, { locale: locale }))); })));
 }
 
 /**
@@ -7588,7 +7969,7 @@ function NavigationProvider(props) {
         nextMonth: nextMonth,
         isDateDisplayed: isDateDisplayed
     };
-    return (React__default__default.createElement(NavigationContext.Provider, { value: value }, props.children));
+    return (React__default.createElement(NavigationContext.Provider, { value: value }, props.children));
 }
 /**
  * Hook to access the {@link NavigationContextValue}. Use this hook to navigate
@@ -7615,27 +7996,27 @@ function CaptionDropdowns(props) {
         goToMonth(newMonth);
     };
     var CaptionLabelComponent = (_a = components === null || components === void 0 ? void 0 : components.CaptionLabel) !== null && _a !== void 0 ? _a : CaptionLabel;
-    var captionLabel = (React__default__default.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }));
-    return (React__default__default.createElement("div", { className: classNames.caption_dropdowns, style: styles.caption_dropdowns },
-        React__default__default.createElement("div", { className: classNames.vhidden }, captionLabel),
-        React__default__default.createElement(MonthsDropdown, { onChange: handleMonthChange, displayMonth: props.displayMonth }),
-        React__default__default.createElement(YearsDropdown, { onChange: handleMonthChange, displayMonth: props.displayMonth })));
+    var captionLabel = (React__default.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }));
+    return (React__default.createElement("div", { className: classNames.caption_dropdowns, style: styles.caption_dropdowns },
+        React__default.createElement("div", { className: classNames.vhidden }, captionLabel),
+        React__default.createElement(MonthsDropdown, { onChange: handleMonthChange, displayMonth: props.displayMonth }),
+        React__default.createElement(YearsDropdown, { onChange: handleMonthChange, displayMonth: props.displayMonth })));
 }
 
 /**
  * Render the "previous month" button in the navigation.
  */
 function IconLeft(props) {
-    return (React__default__default.createElement("svg", __assign({ width: "16px", height: "16px", viewBox: "0 0 120 120" }, props),
-        React__default__default.createElement("path", { d: "M69.490332,3.34314575 C72.6145263,0.218951416 77.6798462,0.218951416 80.8040405,3.34314575 C83.8617626,6.40086786 83.9268205,11.3179931 80.9992143,14.4548388 L80.8040405,14.6568542 L35.461,60 L80.8040405,105.343146 C83.8617626,108.400868 83.9268205,113.317993 80.9992143,116.454839 L80.8040405,116.656854 C77.7463184,119.714576 72.8291931,119.779634 69.6923475,116.852028 L69.490332,116.656854 L18.490332,65.6568542 C15.4326099,62.5991321 15.367552,57.6820069 18.2951583,54.5451612 L18.490332,54.3431458 L69.490332,3.34314575 Z", fill: "currentColor", fillRule: "nonzero" })));
+    return (React__default.createElement("svg", __assign({ width: "16px", height: "16px", viewBox: "0 0 120 120" }, props),
+        React__default.createElement("path", { d: "M69.490332,3.34314575 C72.6145263,0.218951416 77.6798462,0.218951416 80.8040405,3.34314575 C83.8617626,6.40086786 83.9268205,11.3179931 80.9992143,14.4548388 L80.8040405,14.6568542 L35.461,60 L80.8040405,105.343146 C83.8617626,108.400868 83.9268205,113.317993 80.9992143,116.454839 L80.8040405,116.656854 C77.7463184,119.714576 72.8291931,119.779634 69.6923475,116.852028 L69.490332,116.656854 L18.490332,65.6568542 C15.4326099,62.5991321 15.367552,57.6820069 18.2951583,54.5451612 L18.490332,54.3431458 L69.490332,3.34314575 Z", fill: "currentColor", fillRule: "nonzero" })));
 }
 
 /**
  * Render the "next month" button in the navigation.
  */
 function IconRight(props) {
-    return (React__default__default.createElement("svg", __assign({ width: "16px", height: "16px", viewBox: "0 0 120 120" }, props),
-        React__default__default.createElement("path", { d: "M49.8040405,3.34314575 C46.6798462,0.218951416 41.6145263,0.218951416 38.490332,3.34314575 C35.4326099,6.40086786 35.367552,11.3179931 38.2951583,14.4548388 L38.490332,14.6568542 L83.8333725,60 L38.490332,105.343146 C35.4326099,108.400868 35.367552,113.317993 38.2951583,116.454839 L38.490332,116.656854 C41.5480541,119.714576 46.4651794,119.779634 49.602025,116.852028 L49.8040405,116.656854 L100.804041,65.6568542 C103.861763,62.5991321 103.926821,57.6820069 100.999214,54.5451612 L100.804041,54.3431458 L49.8040405,3.34314575 Z", fill: "currentColor" })));
+    return (React__default.createElement("svg", __assign({ width: "16px", height: "16px", viewBox: "0 0 120 120" }, props),
+        React__default.createElement("path", { d: "M49.8040405,3.34314575 C46.6798462,0.218951416 41.6145263,0.218951416 38.490332,3.34314575 C35.4326099,6.40086786 35.367552,11.3179931 38.2951583,14.4548388 L38.490332,14.6568542 L83.8333725,60 L38.490332,105.343146 C35.4326099,108.400868 35.367552,113.317993 38.2951583,116.454839 L38.490332,116.656854 C41.5480541,119.714576 46.4651794,119.779634 49.602025,116.852028 L49.8040405,116.656854 L100.804041,65.6568542 C103.861763,62.5991321 103.926821,57.6820069 100.999214,54.5451612 L100.804041,54.3431458 L49.8040405,3.34314575 Z", fill: "currentColor" })));
 }
 
 /** Render a button HTML element applying the reset class name. */
@@ -7650,7 +8031,7 @@ var Button = forwardRef(function (props, ref) {
     if (props.style) {
         Object.assign(style, props.style);
     }
-    return (React__default__default.createElement("button", __assign({}, props, { ref: ref, type: "button", className: className, style: style })));
+    return (React__default.createElement("button", __assign({}, props, { ref: ref, type: "button", className: className, style: style })));
 });
 
 /** A component rendering the navigation buttons or the drop-downs. */
@@ -7658,7 +8039,7 @@ function Navigation(props) {
     var _a, _b;
     var _c = useDayPicker(), dir = _c.dir, locale = _c.locale, classNames = _c.classNames, styles = _c.styles, _d = _c.labels, labelPrevious = _d.labelPrevious, labelNext = _d.labelNext, components = _c.components;
     if (!props.nextMonth && !props.previousMonth) {
-        return React__default__default.createElement(React__default__default.Fragment, null);
+        return React__default.createElement(React__default.Fragment, null);
     }
     var previousLabel = labelPrevious(props.previousMonth, { locale: locale });
     var previousClassName = [
@@ -7672,9 +8053,9 @@ function Navigation(props) {
     ].join(' ');
     var IconRightComponent = (_a = components === null || components === void 0 ? void 0 : components.IconRight) !== null && _a !== void 0 ? _a : IconRight;
     var IconLeftComponent = (_b = components === null || components === void 0 ? void 0 : components.IconLeft) !== null && _b !== void 0 ? _b : IconLeft;
-    return (React__default__default.createElement("div", { className: classNames.nav, style: styles.nav },
-        !props.hidePrevious && (React__default__default.createElement(Button, { name: "previous-month", "aria-label": previousLabel, className: previousClassName, style: styles.nav_button_previous, disabled: !props.previousMonth, onClick: props.onPreviousClick }, dir === 'rtl' ? (React__default__default.createElement(IconRightComponent, { className: classNames.nav_icon, style: styles.nav_icon })) : (React__default__default.createElement(IconLeftComponent, { className: classNames.nav_icon, style: styles.nav_icon })))),
-        !props.hideNext && (React__default__default.createElement(Button, { name: "next-month", "aria-label": nextLabel, className: nextClassName, style: styles.nav_button_next, disabled: !props.nextMonth, onClick: props.onNextClick }, dir === 'rtl' ? (React__default__default.createElement(IconLeftComponent, { className: classNames.nav_icon, style: styles.nav_icon })) : (React__default__default.createElement(IconRightComponent, { className: classNames.nav_icon, style: styles.nav_icon }))))));
+    return (React__default.createElement("div", { className: classNames.nav, style: styles.nav },
+        !props.hidePrevious && (React__default.createElement(Button, { name: "previous-month", "aria-label": previousLabel, className: previousClassName, style: styles.nav_button_previous, disabled: !props.previousMonth, onClick: props.onPreviousClick }, dir === 'rtl' ? (React__default.createElement(IconRightComponent, { className: classNames.nav_icon, style: styles.nav_icon })) : (React__default.createElement(IconLeftComponent, { className: classNames.nav_icon, style: styles.nav_icon })))),
+        !props.hideNext && (React__default.createElement(Button, { name: "next-month", "aria-label": nextLabel, className: nextClassName, style: styles.nav_button_next, disabled: !props.nextMonth, onClick: props.onNextClick }, dir === 'rtl' ? (React__default.createElement(IconLeftComponent, { className: classNames.nav_icon, style: styles.nav_icon })) : (React__default.createElement(IconRightComponent, { className: classNames.nav_icon, style: styles.nav_icon }))))));
 }
 
 /**
@@ -7700,7 +8081,7 @@ function CaptionNavigation(props) {
             return;
         goToMonth(nextMonth);
     };
-    return (React__default__default.createElement(Navigation, { displayMonth: props.displayMonth, hideNext: hideNext, hidePrevious: hidePrevious, nextMonth: nextMonth, previousMonth: previousMonth, onPreviousClick: handlePreviousClick, onNextClick: handleNextClick }));
+    return (React__default.createElement(Navigation, { displayMonth: props.displayMonth, hideNext: hideNext, hidePrevious: hidePrevious, nextMonth: nextMonth, previousMonth: previousMonth, onPreviousClick: handlePreviousClick, onNextClick: handleNextClick }));
 }
 
 /**
@@ -7713,22 +8094,22 @@ function Caption(props) {
     var CaptionLabelComponent = (_a = components === null || components === void 0 ? void 0 : components.CaptionLabel) !== null && _a !== void 0 ? _a : CaptionLabel;
     var caption;
     if (disableNavigation) {
-        caption = (React__default__default.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }));
+        caption = (React__default.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }));
     }
     else if (captionLayout === 'dropdown') {
-        caption = (React__default__default.createElement(CaptionDropdowns, { displayMonth: props.displayMonth, id: props.id }));
+        caption = (React__default.createElement(CaptionDropdowns, { displayMonth: props.displayMonth, id: props.id }));
     }
     else if (captionLayout === 'dropdown-buttons') {
-        caption = (React__default__default.createElement(React__default__default.Fragment, null,
-            React__default__default.createElement(CaptionDropdowns, { displayMonth: props.displayMonth, id: props.id }),
-            React__default__default.createElement(CaptionNavigation, { displayMonth: props.displayMonth, id: props.id })));
+        caption = (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(CaptionDropdowns, { displayMonth: props.displayMonth, id: props.id }),
+            React__default.createElement(CaptionNavigation, { displayMonth: props.displayMonth, id: props.id })));
     }
     else {
-        caption = (React__default__default.createElement(React__default__default.Fragment, null,
-            React__default__default.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }),
-            React__default__default.createElement(CaptionNavigation, { displayMonth: props.displayMonth, id: props.id })));
+        caption = (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }),
+            React__default.createElement(CaptionNavigation, { displayMonth: props.displayMonth, id: props.id })));
     }
-    return (React__default__default.createElement("div", { className: classNames.caption, style: styles.caption }, caption));
+    return (React__default.createElement("div", { className: classNames.caption, style: styles.caption }, caption));
 }
 
 /** Render the Footer component (empty as default).*/
@@ -7736,10 +8117,10 @@ function Caption(props) {
 function Footer$1(props) {
     var _a = useDayPicker(), footer = _a.footer, styles = _a.styles, tfoot = _a.classNames.tfoot;
     if (!footer)
-        return React__default__default.createElement(React__default__default.Fragment, null);
-    return (React__default__default.createElement("tfoot", { className: tfoot, style: styles.tfoot },
-        React__default__default.createElement("tr", null,
-            React__default__default.createElement("td", { colSpan: 8 }, footer))));
+        return React__default.createElement(React__default.Fragment, null);
+    return (React__default.createElement("tfoot", { className: tfoot, style: styles.tfoot },
+        React__default.createElement("tr", null,
+            React__default.createElement("td", { colSpan: 8 }, footer))));
 }
 
 /**
@@ -7768,9 +8149,9 @@ ISOWeek) {
 function HeadRow() {
     var _a = useDayPicker(), classNames = _a.classNames, styles = _a.styles, showWeekNumber = _a.showWeekNumber, locale = _a.locale, weekStartsOn = _a.weekStartsOn, ISOWeek = _a.ISOWeek, formatWeekdayName = _a.formatters.formatWeekdayName, labelWeekday = _a.labels.labelWeekday;
     var weekdays = getWeekdays(locale, weekStartsOn, ISOWeek);
-    return (React__default__default.createElement("tr", { style: styles.head_row, className: classNames.head_row },
-        showWeekNumber && (React__default__default.createElement("td", { style: styles.head_cell, className: classNames.head_cell })),
-        weekdays.map(function (weekday, i) { return (React__default__default.createElement("th", { key: i, scope: "col", className: classNames.head_cell, style: styles.head_cell, "aria-label": labelWeekday(weekday, { locale: locale }) }, formatWeekdayName(weekday, { locale: locale }))); })));
+    return (React__default.createElement("tr", { style: styles.head_row, className: classNames.head_row },
+        showWeekNumber && (React__default.createElement("td", { style: styles.head_cell, className: classNames.head_cell })),
+        weekdays.map(function (weekday, i) { return (React__default.createElement("th", { key: i, scope: "col", className: classNames.head_cell, style: styles.head_cell, "aria-label": labelWeekday(weekday, { locale: locale }) }, formatWeekdayName(weekday, { locale: locale }))); })));
 }
 
 /** Render the table head. */
@@ -7778,14 +8159,14 @@ function Head() {
     var _a;
     var _b = useDayPicker(), classNames = _b.classNames, styles = _b.styles, components = _b.components;
     var HeadRowComponent = (_a = components === null || components === void 0 ? void 0 : components.HeadRow) !== null && _a !== void 0 ? _a : HeadRow;
-    return (React__default__default.createElement("thead", { style: styles.head, className: classNames.head },
-        React__default__default.createElement(HeadRowComponent, null)));
+    return (React__default.createElement("thead", { style: styles.head, className: classNames.head },
+        React__default.createElement(HeadRowComponent, null)));
 }
 
 /** Render the content of the day cell. */
 function DayContent(props) {
     var _a = useDayPicker(), locale = _a.locale, formatDay = _a.formatters.formatDay;
-    return React__default__default.createElement(React__default__default.Fragment, null, formatDay(props.date, { locale: locale }));
+    return React__default.createElement(React__default.Fragment, null, formatDay(props.date, { locale: locale }));
 }
 
 /**
@@ -7804,9 +8185,9 @@ function SelectMultipleProvider(props) {
                 disabled: []
             }
         };
-        return (React__default__default.createElement(SelectMultipleContext.Provider, { value: emptyContextValue }, props.children));
+        return (React__default.createElement(SelectMultipleContext.Provider, { value: emptyContextValue }, props.children));
     }
-    return (React__default__default.createElement(SelectMultipleProviderInternal, { initialProps: props.initialProps, children: props.children }));
+    return (React__default.createElement(SelectMultipleProviderInternal, { initialProps: props.initialProps, children: props.children }));
 }
 function SelectMultipleProviderInternal(_a) {
     var initialProps = _a.initialProps, children = _a.children;
@@ -7851,7 +8232,7 @@ function SelectMultipleProviderInternal(_a) {
         onDayClick: onDayClick,
         modifiers: modifiers
     };
-    return (React__default__default.createElement(SelectMultipleContext.Provider, { value: contextValue }, children));
+    return (React__default.createElement(SelectMultipleContext.Provider, { value: contextValue }, children));
 }
 /**
  * Hook to access the {@link SelectMultipleContextValue}.
@@ -7920,9 +8301,9 @@ function SelectRangeProvider(props) {
                 disabled: []
             }
         };
-        return (React__default__default.createElement(SelectRangeContext.Provider, { value: emptyContextValue }, props.children));
+        return (React__default.createElement(SelectRangeContext.Provider, { value: emptyContextValue }, props.children));
     }
-    return (React__default__default.createElement(SelectRangeProviderInternal, { initialProps: props.initialProps, children: props.children }));
+    return (React__default.createElement(SelectRangeProviderInternal, { initialProps: props.initialProps, children: props.children }));
 }
 function SelectRangeProviderInternal(_a) {
     var initialProps = _a.initialProps, children = _a.children;
@@ -7993,7 +8374,7 @@ function SelectRangeProviderInternal(_a) {
             });
         }
     }
-    return (React__default__default.createElement(SelectRangeContext.Provider, { value: { selected: selected, onDayClick: onDayClick, modifiers: modifiers } }, children));
+    return (React__default.createElement(SelectRangeContext.Provider, { value: { selected: selected, onDayClick: onDayClick, modifiers: modifiers } }, children));
 }
 /**
  * Hook to access the {@link SelectRangeContextValue}.
@@ -8093,7 +8474,7 @@ function ModifiersProvider(props) {
     var internalModifiers = getInternalModifiers(dayPicker, selectMultiple, selectRange);
     var customModifiers = getCustomModifiers(dayPicker.modifiers);
     var modifiers = __assign(__assign({}, internalModifiers), customModifiers);
-    return (React__default__default.createElement(ModifiersContext.Provider, { value: modifiers }, props.children));
+    return (React__default.createElement(ModifiersContext.Provider, { value: modifiers }, props.children));
 }
 /**
  * Return the modifiers used by DayPicker.
@@ -8391,7 +8772,7 @@ function FocusProvider(props) {
         focusStartOfWeek: function () { return moveFocus('startOfWeek', 'before'); },
         focusEndOfWeek: function () { return moveFocus('endOfWeek', 'after'); }
     };
-    return (React__default__default.createElement(FocusContext.Provider, { value: value }, props.children));
+    return (React__default.createElement(FocusContext.Provider, { value: value }, props.children));
 }
 /**
  * Hook to access the {@link FocusContextValue}. Use this hook to handle the
@@ -8439,9 +8820,9 @@ function SelectSingleProvider(props) {
         var emptyContextValue = {
             selected: undefined
         };
-        return (React__default__default.createElement(SelectSingleContext.Provider, { value: emptyContextValue }, props.children));
+        return (React__default.createElement(SelectSingleContext.Provider, { value: emptyContextValue }, props.children));
     }
-    return (React__default__default.createElement(SelectSingleProviderInternal, { initialProps: props.initialProps, children: props.children }));
+    return (React__default.createElement(SelectSingleProviderInternal, { initialProps: props.initialProps, children: props.children }));
 }
 function SelectSingleProviderInternal(_a) {
     var initialProps = _a.initialProps, children = _a.children;
@@ -8458,7 +8839,7 @@ function SelectSingleProviderInternal(_a) {
         selected: initialProps.selected,
         onDayClick: onDayClick
     };
-    return (React__default__default.createElement(SelectSingleContext.Provider, { value: contextValue }, children));
+    return (React__default.createElement(SelectSingleContext.Provider, { value: contextValue }, children));
 }
 /**
  * Hook to access the {@link SelectSingleContextValue}.
@@ -8728,7 +9109,7 @@ buttonRef) {
     var isHidden = Boolean((activeModifiers.outside && !dayPicker.showOutsideDays) ||
         activeModifiers.hidden);
     var DayContentComponent = (_c = (_b = dayPicker.components) === null || _b === void 0 ? void 0 : _b.DayContent) !== null && _c !== void 0 ? _c : DayContent;
-    var children = (React__default__default.createElement(DayContentComponent, { date: day, displayMonth: displayMonth, activeModifiers: activeModifiers }));
+    var children = (React__default.createElement(DayContentComponent, { date: day, displayMonth: displayMonth, activeModifiers: activeModifiers }));
     var divProps = {
         style: style,
         className: className,
@@ -8759,12 +9140,12 @@ function Day(props) {
     var buttonRef = useRef(null);
     var dayRender = useDayRender(props.date, props.displayMonth, buttonRef);
     if (dayRender.isHidden) {
-        return React__default__default.createElement("div", { role: "gridcell" });
+        return React__default.createElement("div", { role: "gridcell" });
     }
     if (!dayRender.isButton) {
-        return React__default__default.createElement("div", __assign({}, dayRender.divProps));
+        return React__default.createElement("div", __assign({}, dayRender.divProps));
     }
-    return React__default__default.createElement(Button, __assign({ name: "day", ref: buttonRef }, dayRender.buttonProps));
+    return React__default.createElement(Button, __assign({ name: "day", ref: buttonRef }, dayRender.buttonProps));
 }
 
 /**
@@ -8776,13 +9157,13 @@ function WeekNumber(props) {
     var _a = useDayPicker(), onWeekNumberClick = _a.onWeekNumberClick, styles = _a.styles, classNames = _a.classNames, locale = _a.locale, labelWeekNumber = _a.labels.labelWeekNumber, formatWeekNumber = _a.formatters.formatWeekNumber;
     var content = formatWeekNumber(Number(weekNumber), { locale: locale });
     if (!onWeekNumberClick) {
-        return (React__default__default.createElement("span", { className: classNames.weeknumber, style: styles.weeknumber }, content));
+        return (React__default.createElement("span", { className: classNames.weeknumber, style: styles.weeknumber }, content));
     }
     var label = labelWeekNumber(Number(weekNumber), { locale: locale });
     var handleClick = function (e) {
         onWeekNumberClick(weekNumber, dates, e);
     };
-    return (React__default__default.createElement(Button, { name: "week-number", "aria-label": label, className: classNames.weeknumber, style: styles.weeknumber, onClick: handleClick }, content));
+    return (React__default.createElement(Button, { name: "week-number", "aria-label": label, className: classNames.weeknumber, style: styles.weeknumber, onClick: handleClick }, content));
 }
 
 /** Render a row in the calendar, with the days and the week number. */
@@ -8793,13 +9174,13 @@ function Row(props) {
     var WeeknumberComponent = (_b = components === null || components === void 0 ? void 0 : components.WeekNumber) !== null && _b !== void 0 ? _b : WeekNumber;
     var weekNumberCell;
     if (showWeekNumber) {
-        weekNumberCell = (React__default__default.createElement("td", { className: classNames.cell, style: styles.cell },
-            React__default__default.createElement(WeeknumberComponent, { number: props.weekNumber, dates: props.dates })));
+        weekNumberCell = (React__default.createElement("td", { className: classNames.cell, style: styles.cell },
+            React__default.createElement(WeeknumberComponent, { number: props.weekNumber, dates: props.dates })));
     }
-    return (React__default__default.createElement("tr", { className: classNames.row, style: styles.row },
+    return (React__default.createElement("tr", { className: classNames.row, style: styles.row },
         weekNumberCell,
-        props.dates.map(function (date) { return (React__default__default.createElement("td", { className: classNames.cell, style: styles.cell, key: getUnixTime(date), role: "presentation" },
-            React__default__default.createElement(DayComponent, { displayMonth: props.displayMonth, date: date }))); })));
+        props.dates.map(function (date) { return (React__default.createElement("td", { className: classNames.cell, style: styles.cell, key: getUnixTime(date), role: "presentation" },
+            React__default.createElement(DayComponent, { displayMonth: props.displayMonth, date: date }))); })));
 }
 
 /** Return the weeks between two dates.  */
@@ -8867,10 +9248,10 @@ function Table(props) {
     var HeadComponent = (_a = components === null || components === void 0 ? void 0 : components.Head) !== null && _a !== void 0 ? _a : Head;
     var RowComponent = (_b = components === null || components === void 0 ? void 0 : components.Row) !== null && _b !== void 0 ? _b : Row;
     var FooterComponent = (_c = components === null || components === void 0 ? void 0 : components.Footer) !== null && _c !== void 0 ? _c : Footer$1;
-    return (React__default__default.createElement("table", { id: props.id, className: classNames.table, style: styles.table, role: "grid", "aria-labelledby": props['aria-labelledby'] },
-        !hideHead && React__default__default.createElement(HeadComponent, null),
-        React__default__default.createElement("tbody", { className: classNames.tbody, style: styles.tbody, role: "rowgroup" }, weeks.map(function (week) { return (React__default__default.createElement(RowComponent, { displayMonth: props.displayMonth, key: week.weekNumber, dates: week.dates, weekNumber: week.weekNumber })); })),
-        React__default__default.createElement(FooterComponent, { displayMonth: props.displayMonth })));
+    return (React__default.createElement("table", { id: props.id, className: classNames.table, style: styles.table, role: "grid", "aria-labelledby": props['aria-labelledby'] },
+        !hideHead && React__default.createElement(HeadComponent, null),
+        React__default.createElement("tbody", { className: classNames.tbody, style: styles.tbody, role: "rowgroup" }, weeks.map(function (week) { return (React__default.createElement(RowComponent, { displayMonth: props.displayMonth, key: week.weekNumber, dates: week.dates, weekNumber: week.weekNumber })); })),
+        React__default.createElement(FooterComponent, { displayMonth: props.displayMonth })));
 }
 
 /*
@@ -8914,8 +9295,8 @@ function canUseDOM() {
  * @param deps
  */
 var useIsomorphicLayoutEffect = canUseDOM()
-    ? React__default.useLayoutEffect
-    : React__default.useEffect;
+    ? React.useLayoutEffect
+    : React.useEffect;
 var serverHandoffComplete = false;
 var id = 0;
 function genId() {
@@ -8928,7 +9309,7 @@ function useId(providedId) {
     // If this instance isn't part of the initial render, we don't have to do the
     // double render/patch-up dance. We can just generate the ID and return it.
     var initialId = providedId !== null && providedId !== void 0 ? providedId : (serverHandoffComplete ? genId() : null);
-    var _b = React__default.useState(initialId), id = _b[0], setId = _b[1];
+    var _b = React.useState(initialId), id = _b[0], setId = _b[1];
     useIsomorphicLayoutEffect(function () {
         if (id === null) {
             // Patch the ID after render. We do this in `useLayoutEffect` to avoid any
@@ -8939,7 +9320,7 @@ function useId(providedId) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    React__default.useEffect(function () {
+    React.useEffect(function () {
         if (serverHandoffComplete === false) {
             // Flag all future uses of `useId` to skip the update dance. This is in
             // `useEffect` because it goes after `useLayoutEffect`, ensuring we don't
@@ -8982,9 +9363,9 @@ function Month(props) {
         style = __assign(__assign({}, style), styles.caption_between);
     }
     var CaptionComponent = (_b = components === null || components === void 0 ? void 0 : components.Caption) !== null && _b !== void 0 ? _b : Caption;
-    return (React__default__default.createElement("div", { key: props.displayIndex, className: className.join(' '), style: style },
-        React__default__default.createElement(CaptionComponent, { id: captionId, displayMonth: props.displayMonth }),
-        React__default__default.createElement(Table, { id: tableId, "aria-labelledby": captionId, displayMonth: props.displayMonth })));
+    return (React__default.createElement("div", { key: props.displayIndex, className: className.join(' '), style: style },
+        React__default.createElement(CaptionComponent, { id: captionId, displayMonth: props.displayMonth }),
+        React__default.createElement(Table, { id: tableId, "aria-labelledby": captionId, displayMonth: props.displayMonth })));
 }
 
 /** Render the container with the months according to the number of months to display. */
@@ -9026,20 +9407,20 @@ function Root(_a) {
         var _a;
         return __assign(__assign({}, attrs), (_a = {}, _a[key] = initialProps[key], _a));
     }, {});
-    return (React__default__default.createElement("div", __assign({ className: classNames.join(' '), style: style, dir: dayPicker.dir, id: dayPicker.id }, dataAttributes),
-        React__default__default.createElement("div", { className: dayPicker.classNames.months, style: dayPicker.styles.months }, navigation.displayMonths.map(function (month, i) { return (React__default__default.createElement(Month, { key: i, displayIndex: i, displayMonth: month })); }))));
+    return (React__default.createElement("div", __assign({ className: classNames.join(' '), style: style, dir: dayPicker.dir, id: dayPicker.id }, dataAttributes),
+        React__default.createElement("div", { className: dayPicker.classNames.months, style: dayPicker.styles.months }, navigation.displayMonths.map(function (month, i) { return (React__default.createElement(Month, { key: i, displayIndex: i, displayMonth: month })); }))));
 }
 
 /** Provide the value for all the context providers. */
 function RootProvider(props) {
     var children = props.children, initialProps = __rest(props, ["children"]);
-    return (React__default__default.createElement(DayPickerProvider, { initialProps: initialProps },
-        React__default__default.createElement(NavigationProvider, null,
-            React__default__default.createElement(SelectSingleProvider, { initialProps: initialProps },
-                React__default__default.createElement(SelectMultipleProvider, { initialProps: initialProps },
-                    React__default__default.createElement(SelectRangeProvider, { initialProps: initialProps },
-                        React__default__default.createElement(ModifiersProvider, null,
-                            React__default__default.createElement(FocusProvider, null, children))))))));
+    return (React__default.createElement(DayPickerProvider, { initialProps: initialProps },
+        React__default.createElement(NavigationProvider, null,
+            React__default.createElement(SelectSingleProvider, { initialProps: initialProps },
+                React__default.createElement(SelectMultipleProvider, { initialProps: initialProps },
+                    React__default.createElement(SelectRangeProvider, { initialProps: initialProps },
+                        React__default.createElement(ModifiersProvider, null,
+                            React__default.createElement(FocusProvider, null, children))))))));
 }
 
 /**
@@ -9130,8 +9511,8 @@ function RootProvider(props) {
  * ```
  */
 function DayPicker(props) {
-    return (React__default__default.createElement(RootProvider, __assign({}, props),
-        React__default__default.createElement(Root, { initialProps: props })));
+    return (React__default.createElement(RootProvider, __assign({}, props),
+        React__default.createElement(Root, { initialProps: props })));
 }
 
 var reactResponsive$1 = {exports: {}};
@@ -9145,7 +9526,7 @@ function requireReactResponsive () {
 	hasRequiredReactResponsive = 1;
 	(function (module, exports) {
 		(function webpackUniversalModuleDefinition(root, factory) {
-			module.exports = factory(React__default__default);
+			module.exports = factory(React__default);
 		})(reactResponsive, (__WEBPACK_EXTERNAL_MODULE_react__) => {
 		return /******/ (() => { // webpackBootstrap
 		/******/ 	var __webpack_modules__ = ({
@@ -10974,15 +11355,19 @@ var IconsSvg = function (_a) {
     var fill = _a.fill, size = _a.size, icon = _a.icon;
     switch (icon) {
         case 'spinner':
-            return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "".concat(size || 25), height: "".concat(size || 25), viewBox: "0 0 24 24", children: [jsx("style", { children: "\n      .spinner_z9k8 {\n      transform-origin: center;\n      animation: spinner_StKS .75s infinite linear;\n      }\n      @keyframes spinner_StKS {\n      100% {\n      transform: rotate(360deg);\n      }\n      }\n      " }), jsx("path", { d: "M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z", opacity: ".25", fill: fill }), jsx("path", { d: "M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z", className: "spinner_z9k8", fill: fill })] }));
+            return (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "".concat(size || 25), height: "".concat(size || 25), viewBox: "0 0 24 24" },
+                React__default.createElement("style", null, "\n      .spinner_z9k8 {\n      transform-origin: center;\n      animation: spinner_StKS .75s infinite linear;\n      }\n      @keyframes spinner_StKS {\n      100% {\n      transform: rotate(360deg);\n      }\n      }\n      "),
+                React__default.createElement("path", { d: "M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z", opacity: ".25", fill: fill }),
+                React__default.createElement("path", { d: "M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z", className: "spinner_z9k8", fill: fill })));
         case 'warning':
-            return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "".concat(size || 25), height: "".concat(size || 25), className: "svg-icon", style: {
+            return (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "".concat(size || 25), height: "".concat(size || 25), className: "svg-icon", style: {
                     verticalAlign: 'middle',
                     fill: fill,
                     overflow: 'hidden',
                     minWidth: '25px',
                     minHeight: '25px',
-                }, viewBox: "0 0 1024 1024", version: "1.1", children: jsx("path", { d: "M42.666667 896h938.666666L512 85.333333 42.666667 896z m512-128h-85.333334v-85.333333h85.333334v85.333333z m0-170.666667h-85.333334v-170.666666h85.333334v170.666666z" }) }));
+                }, viewBox: "0 0 1024 1024", version: "1.1" },
+                React__default.createElement("path", { d: "M42.666667 896h938.666666L512 85.333333 42.666667 896z m512-128h-85.333334v-85.333333h85.333334v85.333333z m0-170.666667h-85.333334v-170.666666h85.333334v170.666666z" })));
         default:
             return null;
     }
@@ -11221,728 +11606,423 @@ var handleCalendarModifiers = function (_a) {
             : [])), false),
         checkOutOnly: __spreadArray$1([], __read(((findLastPossibleRangeContextCheckOut === null || findLastPossibleRangeContextCheckOut === void 0 ? void 0 : findLastPossibleRangeContextCheckOut.checkIn) &&
             findLastPossibleRangeContextCheckOut.lastCheckOut
-            ? [
-                {
-                    from: addDays(findLastPossibleRangeContextCheckOut.checkIn, 1),
-                    to: findLastPossibleRangeContextCheckOut.lastCheckOut,
-                },
-            ]
-            : [])), false),
-    };
-};
-
-var handleRangeContextDisabledDates = function (_a) {
-    var rangeContext = _a.rangeContext, availableDates = _a.availableDates, calendarRange = _a.calendarRange;
-    var findFirstPossibleRangeContextCheckIn;
-    var findLastPossibleRangeContextCheckOut;
-    var firstPossibleRangeContextCheckIn = [];
-    var lastPossibleRangeContextCheckOut = [];
-    // Parse data
-    var rangeContextFrom = (rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.from) && endOfDay(rangeContext.from);
-    var rangeContextTo = (rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.to) && endOfDay(rangeContext.to);
-    var calendarRangeFrom = (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) && endOfDay(calendarRange.from);
-    if (rangeContext && (availableDates === null || availableDates === void 0 ? void 0 : availableDates.length)) {
-        // Find the first possible check-in after the last date gap till the range context
-        findFirstPossibleRangeContextCheckIn = availableDates === null || availableDates === void 0 ? void 0 : availableDates.find(function (date) {
-            return rangeContextFrom &&
-                endOfDay(date.checkIn) < rangeContextFrom &&
-                endOfDay(date.lastCheckOut) >= rangeContextFrom;
-        });
-        if (findFirstPossibleRangeContextCheckIn === null || findFirstPossibleRangeContextCheckIn === void 0 ? void 0 : findFirstPossibleRangeContextCheckIn.checkIn) {
-            firstPossibleRangeContextCheckIn.push({
-                before: findFirstPossibleRangeContextCheckIn.checkIn,
-            });
-        }
-        // Find the last possible checkout before the first date gap till the range context
-        findLastPossibleRangeContextCheckOut = availableDates === null || availableDates === void 0 ? void 0 : availableDates.find(function (date) {
-            return rangeContextTo && isEqual(rangeContextTo, endOfDay(date.checkIn));
-        });
-        if (findLastPossibleRangeContextCheckOut === null || findLastPossibleRangeContextCheckOut === void 0 ? void 0 : findLastPossibleRangeContextCheckOut.checkIn) {
-            lastPossibleRangeContextCheckOut.push({
-                after: findLastPossibleRangeContextCheckOut.lastCheckOut,
-            });
-        }
-    }
-    // Get possible check-out dates for current check-in
-    var currentSelectionAvailability = availableDates === null || availableDates === void 0 ? void 0 : availableDates.find(function (date) {
-        return calendarRangeFrom
-            ? isEqual(endOfDay(date.checkIn), calendarRangeFrom)
-            : false;
-    });
-    return {
-        findFirstPossibleRangeContextCheckIn: findFirstPossibleRangeContextCheckIn,
-        findLastPossibleRangeContextCheckOut: findLastPossibleRangeContextCheckOut,
-        firstPossibleRangeContextCheckIn: firstPossibleRangeContextCheckIn,
-        lastPossibleRangeContextCheckOut: lastPossibleRangeContextCheckOut,
-        currentSelectionAvailability: currentSelectionAvailability,
-    };
-};
-
-// Case: If the selected dates do not overlap with the rangeContext during continuous selection,
-//       set setCalendarHasError to true. This will display an error message and
-//       prevent the submission of the selected dates.
-var checkForContinuousSelection = function (_a) {
-    var setCalendarHasError = _a.setCalendarHasError, rangeContext = _a.rangeContext, calendarRange = _a.calendarRange, calendarHasError = _a.calendarHasError, disabledDates = _a.disabledDates;
-    var calendarRangeFrom = (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) && endOfDay(calendarRange.from);
-    var calendarRangeTo = (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) && endOfDay(calendarRange.to);
-    var rangeContextFrom = (rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.from) && endOfDay(rangeContext.from);
-    var rangeContextTo = (rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.to) && endOfDay(rangeContext.to);
-    // Checking if rangeFrom is equal to or before rangeContextTo
-    var startIsEqualOrBeforeRangeContextEnd = calendarRangeFrom && rangeContextTo
-        ? isBefore(calendarRangeFrom, rangeContextTo) ||
-            isEqual(calendarRangeFrom, rangeContextTo)
-        : null;
-    // Checking if rangeTo is equal to or after rangeContextFrom
-    var endIsEqualOrAfterRangeContextStart = calendarRangeTo && rangeContextFrom && rangeContextTo
-        ? isAfter(calendarRangeTo, rangeContextFrom) ||
-            isEqual(calendarRangeTo, rangeContextFrom)
-        : null;
-    // Check if selection overlapping unavailable dates
-    var selectionOverlappingUnavailableDate = disabledDates === null || disabledDates === void 0 ? void 0 : disabledDates.find(function (range) {
-        var rangeFrom = endOfDay(range.from);
-        var rangeTo = endOfDay(range.to);
-        return (rangeContextFrom &&
-            rangeContextTo &&
-            areIntervalsOverlapping({ start: rangeContextFrom, end: rangeContextTo }, { start: rangeFrom, end: rangeTo }) &&
-            calendarRangeFrom &&
-            calendarRangeTo &&
-            areIntervalsOverlapping({ start: calendarRangeFrom, end: calendarRangeTo }, { start: rangeFrom, end: rangeTo }));
-    });
-    useEffect(function () {
-        if ((rangeContext &&
-            calendarRangeFrom &&
-            !startIsEqualOrBeforeRangeContextEnd) ||
-            (rangeContext &&
-                calendarRangeTo &&
-                !endIsEqualOrAfterRangeContextStart) ||
-            selectionOverlappingUnavailableDate) {
-            !!(setCalendarHasError && !calendarHasError) && setCalendarHasError(true);
-        }
-    });
-};
-
-var useCalendarTooltips = function (_a) {
-    var showFeedback = _a.showFeedback;
-    return useEffect(function () {
-        if (typeof document === 'undefined' || !showFeedback)
-            return;
-        // Children
-        var calendarTooltip = document.querySelector('.will-calendar-tooltip');
-        var calendarTooltipCheckOut = document.querySelector('.will-calendar-tooltip-check-out');
-        var calendarTooltipOverlappingDate = document.querySelector('.will-calendar-tooltip-overlapping-date');
-        var loadingSpinner = document.querySelector('.will-filter-bar-calendar .will-calendar-spinner');
-        var calendarTooltipCheckInOnly = document.querySelector('.will-calendar-tooltip-check-in-only');
-        var calendarTooltipCheckOutOnly = document.querySelector('.will-calendar-tooltip-check-out-only');
-        // Parents
-        var calendarButtons = document.querySelectorAll('.will-filter-bar-calendar .rdp-cell:has(.booked):not(:has(.disabled-after-check-in))');
-        var calendarButtonsCheckOut = document.querySelectorAll('.will-filter-bar-calendar .rdp-cell:has(.booked.disabled-after-check-in)');
-        var calendarMonthContainer = document.querySelector('.will-filter-bar-calendar .rdp-months');
-        var calendarOverlappingDate = document.querySelectorAll('.will-filter-bar-calendar .rdp-cell:has(.overlapping-date)');
-        var calendarCheckInOnly = document.querySelectorAll('.will-filter-bar-calendar .rdp-cell:has(.check-in-only)');
-        var calendarCheckOutOnly = document.querySelectorAll('.will-filter-bar-calendar .rdp-cell:has(.check-out-only)');
-        // Append children to parents
-        var tooltipClonesCheckIn = [];
-        var tooltipClonesCheckOut = [];
-        var tooltipClonesCheckInOnly = [];
-        var tooltipClonesCheckOutOnly = [];
-        var tooltipClonesSpinner = [];
-        var tooltipClonesOverlappingDates = [];
-        if (calendarTooltip && calendarButtons.length > 0) {
-            calendarButtons.forEach(function (element) {
-                var tooltipClone = calendarTooltip.cloneNode(true);
-                element.appendChild(tooltipClone);
-                tooltipClonesCheckIn.push(tooltipClone);
-            });
-        }
-        if (calendarTooltipCheckOut && calendarButtonsCheckOut.length > 0) {
-            calendarButtonsCheckOut.forEach(function (element) {
-                var tooltipClone = calendarTooltipCheckOut.cloneNode(true);
-                element.appendChild(tooltipClone);
-                tooltipClonesCheckOut.push(tooltipClone);
-            });
-        }
-        if (calendarTooltipCheckOutOnly && calendarCheckOutOnly.length > 0) {
-            calendarCheckOutOnly.forEach(function (element) {
-                var tooltipClone = calendarTooltipCheckOutOnly.cloneNode(true);
-                element.appendChild(tooltipClone);
-                tooltipClonesCheckOutOnly.push(tooltipClone);
-            });
-        }
-        if (calendarTooltipCheckInOnly && calendarCheckInOnly.length > 0) {
-            calendarCheckInOnly.forEach(function (element) {
-                var tooltipClone = calendarTooltipCheckInOnly.cloneNode(true);
-                element.appendChild(tooltipClone);
-                tooltipClonesCheckInOnly.push(tooltipClone);
-            });
-        }
-        if (loadingSpinner && calendarMonthContainer) {
-            var tooltipClone = loadingSpinner.cloneNode(true);
-            calendarMonthContainer.appendChild(tooltipClone);
-            tooltipClonesSpinner.push(tooltipClone);
-        }
-        if (calendarTooltipOverlappingDate && calendarOverlappingDate.length > 0) {
-            calendarOverlappingDate.forEach(function (element) {
-                var tooltipClone = calendarTooltipOverlappingDate.cloneNode(true);
-                element.appendChild(tooltipClone);
-                tooltipClonesOverlappingDates.push(tooltipClone);
-            });
-        }
-        return function () {
-            tooltipClonesCheckIn.forEach(function (clone) { return clone.remove(); });
-            tooltipClonesCheckOut.forEach(function (clone) { return clone.remove(); });
-            tooltipClonesSpinner.forEach(function (clone) { return clone.remove(); });
-            tooltipClonesOverlappingDates.forEach(function (clone) { return clone.remove(); });
-            tooltipClonesCheckInOnly.forEach(function (clone) { return clone.remove(); });
-            tooltipClonesCheckOutOnly.forEach(function (clone) { return clone.remove(); });
-        };
-    });
+            ? [
+                {
+                    from: addDays(findLastPossibleRangeContextCheckOut.checkIn, 1),
+                    to: findLastPossibleRangeContextCheckOut.lastCheckOut,
+                },
+            ]
+            : [])), false),
+    };
 };
 
-var useCalendarLoadingSpinner = function (_a) {
-    var loadingData = _a.loadingData;
-    return useEffect(function () {
-        if (typeof document === 'undefined')
-            return;
-        var loadingSpinner = document.querySelector('.will-filter-bar-calendar .rdp-months .will-calendar-spinner');
-        if (loadingData) {
-            if (loadingSpinner)
-                loadingSpinner.style.display = 'flex';
+var handleRangeContextDisabledDates = function (_a) {
+    var rangeContext = _a.rangeContext, availableDates = _a.availableDates, calendarRange = _a.calendarRange;
+    var findFirstPossibleRangeContextCheckIn;
+    var findLastPossibleRangeContextCheckOut;
+    var firstPossibleRangeContextCheckIn = [];
+    var lastPossibleRangeContextCheckOut = [];
+    // Parse data
+    var rangeContextFrom = (rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.from) && endOfDay(rangeContext.from);
+    var rangeContextTo = (rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.to) && endOfDay(rangeContext.to);
+    var calendarRangeFrom = (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) && endOfDay(calendarRange.from);
+    if (rangeContext && (availableDates === null || availableDates === void 0 ? void 0 : availableDates.length)) {
+        // Find the first possible check-in after the last date gap till the range context
+        findFirstPossibleRangeContextCheckIn = availableDates === null || availableDates === void 0 ? void 0 : availableDates.find(function (date) {
+            return rangeContextFrom &&
+                endOfDay(date.checkIn) < rangeContextFrom &&
+                endOfDay(date.lastCheckOut) >= rangeContextFrom;
+        });
+        if (findFirstPossibleRangeContextCheckIn === null || findFirstPossibleRangeContextCheckIn === void 0 ? void 0 : findFirstPossibleRangeContextCheckIn.checkIn) {
+            firstPossibleRangeContextCheckIn.push({
+                before: findFirstPossibleRangeContextCheckIn.checkIn,
+            });
         }
-        else {
-            if (loadingSpinner)
-                loadingSpinner.style.display = 'none';
+        // Find the last possible checkout before the first date gap till the range context
+        findLastPossibleRangeContextCheckOut = availableDates === null || availableDates === void 0 ? void 0 : availableDates.find(function (date) {
+            return rangeContextTo && isEqual(rangeContextTo, endOfDay(date.checkIn));
+        });
+        if (findLastPossibleRangeContextCheckOut === null || findLastPossibleRangeContextCheckOut === void 0 ? void 0 : findLastPossibleRangeContextCheckOut.checkIn) {
+            lastPossibleRangeContextCheckOut.push({
+                after: findLastPossibleRangeContextCheckOut.lastCheckOut,
+            });
         }
+    }
+    // Get possible check-out dates for current check-in
+    var currentSelectionAvailability = availableDates === null || availableDates === void 0 ? void 0 : availableDates.find(function (date) {
+        return calendarRangeFrom
+            ? isEqual(endOfDay(date.checkIn), calendarRangeFrom)
+            : false;
     });
+    return {
+        findFirstPossibleRangeContextCheckIn: findFirstPossibleRangeContextCheckIn,
+        findLastPossibleRangeContextCheckOut: findLastPossibleRangeContextCheckOut,
+        firstPossibleRangeContextCheckIn: firstPossibleRangeContextCheckIn,
+        lastPossibleRangeContextCheckOut: lastPossibleRangeContextCheckOut,
+        currentSelectionAvailability: currentSelectionAvailability,
+    };
 };
 
-var useUpdateDisabledDates = function (_a) {
-    var disableCalendarDates = _a.disableCalendarDates, calendarRange = _a.calendarRange, updateCalendarMonthNavigation = _a.updateCalendarMonthNavigation, updateCalendarDefaultMonth = _a.updateCalendarDefaultMonth;
-    var _b = __read(useState(undefined), 2), overlappingDate = _b[0], setOverlappingDate = _b[1];
-    var _c = __read(useState([]), 2), lastPossibleCheckout = _c[0], setLatsPossibleCheckout = _c[1];
-    var newDisableCalendarDates = useMemo(function () {
-        var _a;
-        if (disableCalendarDates === null || disableCalendarDates === void 0 ? void 0 : disableCalendarDates.availableDates) {
-            var dateFormat_1 = 'dd-MM-yyyy';
-            var disabledDates = disableCalendarDates.disabledDates;
-            var _b = (disabledDates || []).reduce(function (acc, dateRange) {
-                var _a, _b;
-                var formattedFromDate = format(dateRange.from, dateFormat_1);
-                var formattedToDate = format(dateRange.to, dateFormat_1);
-                var hasTwoOverlappingDates = (_a = disableCalendarDates.availableDates) === null || _a === void 0 ? void 0 : _a.some(function (item) {
-                    return format(item.lastCheckOut, dateFormat_1) === formattedFromDate &&
-                        format(item.lastCheckOut, dateFormat_1) === formattedToDate;
-                });
-                var hasOneOverlappingDate = (_b = disableCalendarDates.availableDates) === null || _b === void 0 ? void 0 : _b.some(function (item) {
-                    return format(item.lastCheckOut, dateFormat_1) === formattedFromDate &&
-                        format(item.lastCheckOut, dateFormat_1) !== formattedToDate;
-                });
-                if (hasTwoOverlappingDates) {
-                    acc.newOverlappingDates.push(dateRange);
-                }
-                else if (hasOneOverlappingDate) {
-                    acc.newOverlappingDates.push(dateRange);
-                    acc.updatedDisabledDates.push(__assign$2(__assign$2({}, dateRange), { from: addDays(dateRange.from, 1) }));
-                }
-                else {
-                    acc.updatedDisabledDates.push(dateRange);
-                }
-                return acc;
-            }, { updatedDisabledDates: [], newOverlappingDates: [] }), updatedDisabledDates = _b.updatedDisabledDates, newOverlappingDates = _b.newOverlappingDates;
-            // Find last possible checkout ( disable all dates after the last possible checkout )
-            var lastPossibleCheckoutDate = (_a = disableCalendarDates.availableDates.at(-1)) === null || _a === void 0 ? void 0 : _a.lastCheckOut;
-            if (lastPossibleCheckoutDate) {
-                setLatsPossibleCheckout({ after: lastPossibleCheckoutDate });
-            }
-            // Extract overlapping dates ( dates that are only available for checkout )
-            if (newOverlappingDates.length) {
-                setOverlappingDate(__spreadArray$1([], __read(newOverlappingDates), false));
-            }
-            var newDisableCalendarDates_1 = __assign$2(__assign$2({}, disableCalendarDates), { disabledDates: updatedDisabledDates });
-            return newDisableCalendarDates_1;
-        }
-        return disableCalendarDates;
-    }, [
-        disableCalendarDates,
-        calendarRange,
-        updateCalendarMonthNavigation,
-        updateCalendarDefaultMonth,
-    ]);
-    return { newDisableCalendarDates: newDisableCalendarDates, overlappingDate: overlappingDate, lastPossibleCheckout: lastPossibleCheckout };
-};
-
-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$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 = 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
-    var t = useTranslation('common').t;
-    var calendarContainerRef = useAutoFocus(autoFocus);
-    var isTablet = reactResponsiveExports.useMediaQuery({ maxWidth: 960 });
-    var today = startOfDay(new Date());
-    var selectedStartDate = calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from;
-    var rangeContextStartDate = rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.from;
-    // Handle initial disable dates including overlapping availableDates.lastCheckOut and disabledDates.start
-    var _c = useUpdateDisabledDates({
-        disableCalendarDates: disableCalendarDates,
-        calendarRange: calendarRange,
-        updateCalendarMonthNavigation: updateCalendarMonthNavigation,
-        updateCalendarDefaultMonth: updateCalendarDefaultMonth,
-    }), newDisableCalendarDates = _c.newDisableCalendarDates, overlappingDate = _c.overlappingDate, lastPossibleCheckout = _c.lastPossibleCheckout;
-    // Handle disable dates by page
-    var disabledDatesByPage$1 = disabledDatesByPage({
-        today: today,
-        selectedPath: selectedPath,
-        newDisableCalendarDates: newDisableCalendarDates,
-    });
-    // Handle tooltip
-    useCalendarTooltips({
-        showFeedback: showFeedback,
-    });
-    // Handle loading spinner
-    useCalendarLoadingSpinner({
-        loadingData: loadingData,
-    });
-    // Handle the date selection and availability for selection logic.
-    var handleOnSelect = function (range) {
-        setCalendarHasError && calendarHasError && setCalendarHasError(false);
-        calendarSelectionRules({
-            range: range,
-            newDisableCalendarDates: newDisableCalendarDates,
-            setCalendarRange: setCalendarRange,
-            calendarRange: calendarRange,
-            overlappingDate: overlappingDate,
-            setCalendarHasError: setCalendarHasError,
-            rangeContext: rangeContext,
-        });
-        setUpdatedForSubmit && setUpdatedForSubmit(true);
-    };
-    // Handle disabled dates for range context
-    var _d = handleRangeContextDisabledDates({
-        rangeContext: rangeContext,
-        availableDates: newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.availableDates,
-        calendarRange: calendarRange,
-    }), findFirstPossibleRangeContextCheckIn = _d.findFirstPossibleRangeContextCheckIn, findLastPossibleRangeContextCheckOut = _d.findLastPossibleRangeContextCheckOut, firstPossibleRangeContextCheckIn = _d.firstPossibleRangeContextCheckIn, lastPossibleRangeContextCheckOut = _d.lastPossibleRangeContextCheckOut, currentSelectionAvailability = _d.currentSelectionAvailability;
-    // Handle check for continuous selection in the range context
-    checkForContinuousSelection({
-        setCalendarHasError: setCalendarHasError,
-        rangeContext: rangeContext,
-        calendarRange: calendarRange,
-        calendarHasError: calendarHasError,
-        disabledDates: newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.disabledDates,
+// Case: If the selected dates do not overlap with the rangeContext during continuous selection,
+//       set setCalendarHasError to true. This will display an error message and
+//       prevent the submission of the selected dates.
+var checkForContinuousSelection = function (_a) {
+    var setCalendarHasError = _a.setCalendarHasError, rangeContext = _a.rangeContext, calendarRange = _a.calendarRange, calendarHasError = _a.calendarHasError, disabledDates = _a.disabledDates;
+    var calendarRangeFrom = (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) && endOfDay(calendarRange.from);
+    var calendarRangeTo = (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) && endOfDay(calendarRange.to);
+    var rangeContextFrom = (rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.from) && endOfDay(rangeContext.from);
+    var rangeContextTo = (rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.to) && endOfDay(rangeContext.to);
+    // Checking if rangeFrom is equal to or before rangeContextTo
+    var startIsEqualOrBeforeRangeContextEnd = calendarRangeFrom && rangeContextTo
+        ? isBefore(calendarRangeFrom, rangeContextTo) ||
+            isEqual(calendarRangeFrom, rangeContextTo)
+        : null;
+    // Checking if rangeTo is equal to or after rangeContextFrom
+    var endIsEqualOrAfterRangeContextStart = calendarRangeTo && rangeContextFrom && rangeContextTo
+        ? isAfter(calendarRangeTo, rangeContextFrom) ||
+            isEqual(calendarRangeTo, rangeContextFrom)
+        : null;
+    // Check if selection overlapping unavailable dates
+    var selectionOverlappingUnavailableDate = disabledDates === null || disabledDates === void 0 ? void 0 : disabledDates.find(function (range) {
+        var rangeFrom = endOfDay(range.from);
+        var rangeTo = endOfDay(range.to);
+        return (rangeContextFrom &&
+            rangeContextTo &&
+            areIntervalsOverlapping({ start: rangeContextFrom, end: rangeContextTo }, { start: rangeFrom, end: rangeTo }) &&
+            calendarRangeFrom &&
+            calendarRangeTo &&
+            areIntervalsOverlapping({ start: calendarRangeFrom, end: calendarRangeTo }, { start: rangeFrom, end: rangeTo }));
     });
-    var disabledInsideSelectableRange = function () {
-        if (
-        // Range end already selected
-        (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) ||
-            // No current check-in availability
-            !currentSelectionAvailability ||
-            // No gap between check-in and first possible check-out, nothing to disable
-            addDays(currentSelectionAvailability.checkIn, 1) >=
-                currentSelectionAvailability.firstCheckOut) {
-            return [];
-        }
-        // Disable dates between current check-in and first possible check-out
-        return [
-            {
-                from: addDays(currentSelectionAvailability.checkIn, 1),
-                to: addDays(currentSelectionAvailability.firstCheckOut, -1),
-            },
-        ];
-    };
-    var base = disabledDatesByPage$1.length
-        ? disabledDatesByPage$1
-        : (disabledDates === null || disabledDates === void 0 ? void 0 : disabledDates.length)
-            ? disabledDates
-            : (newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.disabledDates) || [];
-    var disabled = disabledDatesByPage$1.length
-        ? base
-        : __spreadArray$1(__spreadArray$1(__spreadArray$1(__spreadArray$1([
-            lastPossibleCheckout
-        ], __read(base), false), __read(firstPossibleRangeContextCheckIn), false), __read(lastPossibleRangeContextCheckOut), false), __read(disabledInsideSelectableRange()), false);
-    return (jsx("div", { className: "will-filter-bar-calendar", ref: ref, children: jsxs("div", { className: "will-calendar-filter-container", ref: calendarContainerRef, children: [jsx(DayPicker, { id: "will-calendar", mode: "range", locale: language === 'en' ? enUS : fi, numberOfMonths: !isTablet ? 2 : 1, weekStartsOn: 1, selected: calendarRange, onSelect: function (range) { return handleOnSelect(range); }, captionLayout: "dropdown-buttons", defaultMonth: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) ||
-                        selectedStartDate ||
-                        rangeContextStartDate ||
-                        (((_b = newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.disabledDates) === null || _b === void 0 ? void 0 : _b.length)
-                            ? newDisableCalendarDates.disabledDates[0].from
-                            : today), disabled: disabled, fromMonth: today, onMonthChange: function (val) {
-                        requestDates === null || requestDates === void 0 ? void 0 : requestDates(val);
-                        setUpdateCalendarMonthNavigation === null || setUpdateCalendarMonthNavigation === void 0 ? void 0 : setUpdateCalendarMonthNavigation(function (prev) { return !prev; });
-                    }, classNames: {
-                        day_range_start: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) ? 'rdp-day_range_start' : '',
-                        day_range_end: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) ? 'rdp-day_range_end' : '',
-                    }, modifiersClassNames: {
-                        today: 'my-today',
-                        booked: 'booked',
-                        disabledAfterCheckIn: 'disabled-after-check-in',
-                        overlappingDate: 'overlapping-date',
-                        noActiveSelectionStart: 'no-active-selection-start',
-                        noActiveSelectionMid: 'no-active-selection-mid',
-                        noActiveSelectionEnd: 'no-active-selection-end',
-                        checkoutOptionsMid: 'rdp-day_selected rdp-day_range_middle checkout-option',
-                        checkInOnly: 'check-in-only',
-                        checkOutOnly: 'check-out-only',
-                    }, modifiers: 
-                    // This function handles conditions for applying the modifiersClassNames
-                    handleCalendarModifiers({
-                        calendarRange: calendarRange,
-                        disabledDates: disabled,
-                        overlappingDate: overlappingDate,
-                        rangeContext: rangeContext,
-                        findFirstPossibleRangeContextCheckIn: findFirstPossibleRangeContextCheckIn,
-                        findLastPossibleRangeContextCheckOut: findLastPossibleRangeContextCheckOut,
-                        currentSelectionLastCheckoutDate: currentSelectionAvailability,
-                    }) }, updateCalendarDefaultMonth), jsx("div", { className: 'will-calendar-tooltip', children: jsx("div", { children: t('noCheckIn') }) }), jsx("div", { className: 'will-calendar-tooltip-check-out', children: jsx("div", { children: t('noCheckOut') }) }), jsx("div", { className: 'will-calendar-tooltip-overlapping-date', children: jsx("div", { children: t('checkOutOnly') }) }), jsx("div", { className: 'will-calendar-tooltip-check-in-only', children: jsx("div", { children: t('checkInOnly') }) }), jsx("div", { className: 'will-calendar-tooltip-check-out-only', children: jsx("div", { children: t('checkOutOnly') }) }), jsx("div", { className: 'will-calendar-spinner', children: jsx(IconsSvg, { fill: (palette === null || palette === void 0 ? void 0 : palette.primary) || 'inherit', size: 50, icon: "spinner" }) })] }) }));
-});
-
-var parseGuests = function (_a) {
-    var guestLabel = _a.guestLabel, guestsLabel = _a.guestsLabel, guestsPlaceholder = _a.guestsPlaceholder, ageCategoryCounts = _a.ageCategoryCounts, ageCategories = _a.ageCategories;
-    var parsedData = Object.entries(ageCategoryCounts).reduce(function (acc, _a) {
-        var _b = __read(_a, 2), key = _b[0], value = _b[1];
-        var parts = key.split('-');
-        if (parts.length < 2)
-            return acc;
-        var ageCategoryId = parts[1];
-        var ageCategory = ageCategories.find(function (c) { return c.id === ageCategoryId; });
-        if (ageCategory && value) {
-            return {
-                total: acc.total + value,
-                html: __spreadArray$1(__spreadArray$1([], __read(acc.html), false), ["".concat(value)], false),
-            };
+    useEffect(function () {
+        if ((rangeContext &&
+            calendarRangeFrom &&
+            !startIsEqualOrBeforeRangeContextEnd) ||
+            (rangeContext &&
+                calendarRangeTo &&
+                !endIsEqualOrAfterRangeContextStart) ||
+            selectionOverlappingUnavailableDate) {
+            !!(setCalendarHasError && !calendarHasError) && setCalendarHasError(true);
         }
-        return acc;
-    }, { total: 0, html: [] });
-    var htmlString = parsedData.html.length > 1 ? parsedData.html.join(' + ') : '';
-    return {
-        content: parsedData.total
-            ? "<span class=\"will-guest-count\">".concat(parsedData.total, "</span> ").concat(parsedData.total > 1 ? guestsLabel : guestLabel).concat(htmlString ? " &nbsp; ( ".concat(htmlString, " )") : '')
-            : guestsPlaceholder,
-        data: parsedData,
-    };
+    });
 };
 
-var parseLocations = function (_a) {
-    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 = selectedLocations[0].label;
-        if (!translation) {
-            return locationsPlaceholder;
+var useCalendarTooltips = function (_a) {
+    var showFeedback = _a.showFeedback;
+    return useEffect(function () {
+        if (typeof document === 'undefined' || !showFeedback)
+            return;
+        // Children
+        var calendarTooltip = document.querySelector('.will-calendar-tooltip');
+        var calendarTooltipCheckOut = document.querySelector('.will-calendar-tooltip-check-out');
+        var calendarTooltipOverlappingDate = document.querySelector('.will-calendar-tooltip-overlapping-date');
+        var loadingSpinner = document.querySelector('.will-filter-bar-calendar .will-calendar-spinner');
+        var calendarTooltipCheckInOnly = document.querySelector('.will-calendar-tooltip-check-in-only');
+        var calendarTooltipCheckOutOnly = document.querySelector('.will-calendar-tooltip-check-out-only');
+        // Parents
+        var calendarButtons = document.querySelectorAll('.will-filter-bar-calendar .rdp-cell:has(.booked):not(:has(.disabled-after-check-in))');
+        var calendarButtonsCheckOut = document.querySelectorAll('.will-filter-bar-calendar .rdp-cell:has(.booked.disabled-after-check-in)');
+        var calendarMonthContainer = document.querySelector('.will-filter-bar-calendar .rdp-months');
+        var calendarOverlappingDate = document.querySelectorAll('.will-filter-bar-calendar .rdp-cell:has(.overlapping-date)');
+        var calendarCheckInOnly = document.querySelectorAll('.will-filter-bar-calendar .rdp-cell:has(.check-in-only)');
+        var calendarCheckOutOnly = document.querySelectorAll('.will-filter-bar-calendar .rdp-cell:has(.check-out-only)');
+        // Append children to parents
+        var tooltipClonesCheckIn = [];
+        var tooltipClonesCheckOut = [];
+        var tooltipClonesCheckInOnly = [];
+        var tooltipClonesCheckOutOnly = [];
+        var tooltipClonesSpinner = [];
+        var tooltipClonesOverlappingDates = [];
+        if (calendarTooltip && calendarButtons.length > 0) {
+            calendarButtons.forEach(function (element) {
+                var tooltipClone = calendarTooltip.cloneNode(true);
+                element.appendChild(tooltipClone);
+                tooltipClonesCheckIn.push(tooltipClone);
+            });
         }
-        return translation;
-    }
-    return "".concat(selectedLocations.length, " ").concat(locationsSelectedLabel);
-};
-
-var FilterSections;
-(function (FilterSections) {
-    FilterSections["CALENDAR"] = "calendar";
-    FilterSections["GUESTS"] = "guests";
-    FilterSections["CATEGORIES"] = "categories";
-    FilterSections["LOCATIONS"] = "locations";
-})(FilterSections || (FilterSections = {}));
-var Pages;
-(function (Pages) {
-    Pages["ROOMS"] = "/rooms";
-    Pages["EVENTS"] = "/events";
-    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(useState(Pages.EVENTS), 2), selectedPath = _b[0], setSelectedPath = _b[1];
-    var _c = __read(useState(false), 2), selectedFilter = _c[0], setSelectedFilter = _c[1];
-    var _d = __read(useState(), 2), calendarRange = _d[0], setCalendarRange = _d[1];
-    var _e = __read(useState(false), 2), innerLoading = _e[0], setInnerLoading = _e[1];
-    var _f = __read(useState(0), 2), categories = _f[0], setCategories = _f[1];
-    var _g = __read(useState({}), 2), ageCategoryCounts = _g[0], setAgeCategoryCounts = _g[1];
-    var _h = __read(useState([]), 2), selectedLocations = _h[0], setSelectedLocations = _h[1];
-    useEffect(function () {
-        var _a;
-        var urlSearchParams = new URLSearchParams(window.location.search);
-        var startDateParam = urlSearchParams.get('startDate');
-        var endDateParam = urlSearchParams.get('endDate');
-        // Get all locationId params from URL
-        var locationIdParams = urlSearchParams.getAll('locationId');
-        var ageCategoryCountsParam = JSON.parse(urlSearchParams.get('ageCategoryCounts') || '{}');
-        var parsedCategories = parseInt(urlSearchParams.get('categories') || '0', 10);
-        if (startDateParam && endDateParam) {
-            setCalendarRange({
-                from: new Date(startDateParam),
-                to: new Date(endDateParam),
+        if (calendarTooltipCheckOut && calendarButtonsCheckOut.length > 0) {
+            calendarButtonsCheckOut.forEach(function (element) {
+                var tooltipClone = calendarTooltipCheckOut.cloneNode(true);
+                element.appendChild(tooltipClone);
+                tooltipClonesCheckOut.push(tooltipClone);
             });
         }
-        setAgeCategoryCounts(ageCategoryCountsParam);
-        setCategories(parsedCategories);
-        // Set selected locations from URL - handle all locationIds
-        if (((_a = locations === null || locations === void 0 ? void 0 : locations.data) === null || _a === void 0 ? void 0 : _a.length) && locationIdParams.length) {
-            var matchedLocations = locations.data.filter(function (location) {
-                return locationIdParams.includes(location.id.toString());
+        if (calendarTooltipCheckOutOnly && calendarCheckOutOnly.length > 0) {
+            calendarCheckOutOnly.forEach(function (element) {
+                var tooltipClone = calendarTooltipCheckOutOnly.cloneNode(true);
+                element.appendChild(tooltipClone);
+                tooltipClonesCheckOutOnly.push(tooltipClone);
             });
-            setSelectedLocations(matchedLocations);
         }
-    }, []);
-    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; });
-        var findMatchingPath = function () {
-            var e_1, _a;
-            var paths = [Pages.EVENTS, Pages.ROOMS, Pages.SALES];
-            try {
-                for (var paths_1 = __values(paths), paths_1_1 = paths_1.next(); !paths_1_1.done; paths_1_1 = paths_1.next()) {
-                    var path = paths_1_1.value;
-                    if (window.location.pathname.includes(path)) {
-                        return path;
-                    }
-                }
-            }
-            catch (e_1_1) { e_1 = { error: e_1_1 }; }
-            finally {
-                try {
-                    if (paths_1_1 && !paths_1_1.done && (_a = paths_1.return)) _a.call(paths_1);
-                }
-                finally { if (e_1) throw e_1.error; }
-            }
-            return defaultTab ? defaultTab.path : Pages.EVENTS;
-        };
-        var currentPath = findMatchingPath();
-        setSelectedPath(currentPath);
-    }, []);
-    var updateGuestsCount = function (id, newCount) {
-        setAgeCategoryCounts(function (prevCounts) {
-            var _a;
-            return (__assign$2(__assign$2({}, prevCounts), (_a = {}, _a[id] = newCount, _a)));
-        });
-    };
-    var handleSelectedFilter = function (id) {
-        setSelectedFilter(id);
-    };
-    var handleSubmit = function () {
-        var e_2, _a;
-        var newParams = {
-            startDate: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from)
-                ? format(calendarRange.from, 'yyyy-MM-dd')
-                : '',
-            endDate: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) ? format(calendarRange.to, 'yyyy-MM-dd') : '',
-            //categories: categories.toString(),
-            ageCategoryCounts: handleAgeCategoryRules({
-                ageCategoryCounts: ageCategoryCounts,
-                ageCategories: ageCategories,
-            }),
-            selectedLocations: selectedLocations
-                .map(function (location) { return location.id.toString(); })
-                .join(','),
-        };
-        var querySearchParams = new URLSearchParams();
-        try {
-            for (var _b = __values(Object.entries(newParams)), _c = _b.next(); !_c.done; _c = _b.next()) {
-                var _d = __read(_c.value, 2), key = _d[0], value = _d[1];
-                if (value) {
-                    if (key === 'selectedLocations' && !!selectedLocations.length) {
-                        // Append all selected locationIds
-                        selectedLocations.forEach(function (location) {
-                            querySearchParams.append('locationId', location.id.toString());
-                        });
-                    }
-                    else {
-                        querySearchParams.append(key, value.toString());
-                    }
-                }
-            }
+        if (calendarTooltipCheckInOnly && calendarCheckInOnly.length > 0) {
+            calendarCheckInOnly.forEach(function (element) {
+                var tooltipClone = calendarTooltipCheckInOnly.cloneNode(true);
+                element.appendChild(tooltipClone);
+                tooltipClonesCheckInOnly.push(tooltipClone);
+            });
         }
-        catch (e_2_1) { e_2 = { error: e_2_1 }; }
-        finally {
-            try {
-                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-            }
-            finally { if (e_2) throw e_2.error; }
+        if (loadingSpinner && calendarMonthContainer) {
+            var tooltipClone = loadingSpinner.cloneNode(true);
+            calendarMonthContainer.appendChild(tooltipClone);
+            tooltipClonesSpinner.push(tooltipClone);
         }
-        handleSelectedFilter(false);
-        if (onSubmit && window.location.href.includes(selectedPath)) {
-            onSubmit(newParams);
+        if (calendarTooltipOverlappingDate && calendarOverlappingDate.length > 0) {
+            calendarOverlappingDate.forEach(function (element) {
+                var tooltipClone = calendarTooltipOverlappingDate.cloneNode(true);
+                element.appendChild(tooltipClone);
+                tooltipClonesOverlappingDates.push(tooltipClone);
+            });
+        }
+        return function () {
+            tooltipClonesCheckIn.forEach(function (clone) { return clone.remove(); });
+            tooltipClonesCheckOut.forEach(function (clone) { return clone.remove(); });
+            tooltipClonesSpinner.forEach(function (clone) { return clone.remove(); });
+            tooltipClonesOverlappingDates.forEach(function (clone) { return clone.remove(); });
+            tooltipClonesCheckInOnly.forEach(function (clone) { return clone.remove(); });
+            tooltipClonesCheckOutOnly.forEach(function (clone) { return clone.remove(); });
+        };
+    });
+};
+
+var useCalendarLoadingSpinner = function (_a) {
+    var loadingData = _a.loadingData;
+    return useEffect(function () {
+        if (typeof document === 'undefined')
+            return;
+        var loadingSpinner = document.querySelector('.will-filter-bar-calendar .rdp-months .will-calendar-spinner');
+        if (loadingData) {
+            if (loadingSpinner)
+                loadingSpinner.style.display = 'flex';
         }
         else {
-            var params = new URLSearchParams(querySearchParams !== null && querySearchParams !== void 0 ? querySearchParams : undefined);
-            var paramString = params.toString();
-            var path = "".concat(redirectUrl).concat(selectedPath);
-            setInnerLoading(true);
-            window.location.href = paramString ? "".concat(path, "?").concat(paramString) : path;
+            if (loadingSpinner)
+                loadingSpinner.style.display = 'none';
         }
-    };
-    var handleResetFilters = function () {
-        setAgeCategoryCounts({});
-        setCalendarRange(undefined);
-    };
-    return {
-        selectedFilter: selectedFilter,
-        ageCategoryCounts: ageCategoryCounts,
-        categories: categories,
-        calendarRange: calendarRange,
-        selectedPath: selectedPath,
-        innerLoading: innerLoading,
-        selectedLocations: selectedLocations,
-        setSelectedLocations: setSelectedLocations,
-        setCalendarRange: setCalendarRange,
-        setSelectedFilter: setSelectedFilter,
-        setAgeCategoryCounts: setAgeCategoryCounts,
-        setCategories: setCategories,
-        handleSelectedFilter: handleSelectedFilter,
-        handleSubmit: handleSubmit,
-        updateGuestsCount: updateGuestsCount,
-        handleResetFilters: handleResetFilters,
-        setSelectedPath: setSelectedPath,
-    };
+    });
 };
-////////////
-var handleAgeCategoryRules = function (_a) {
-    var ageCategoryCounts = _a.ageCategoryCounts, ageCategories = _a.ageCategories;
-    if (ageCategories === null || ageCategories === void 0 ? void 0 : ageCategories.length) {
-        ageCategories === null || ageCategories === void 0 ? void 0 : ageCategories.map(function (a) {
-            if (a.minVal) {
-                // Age categories rules
-                var ageCategory = ageCategoryCounts["guests-".concat(a.id)];
-                if (!ageCategory) {
-                    ageCategoryCounts["guests-".concat(a.id)] = a.minVal;
+
+var useUpdateDisabledDates = function (_a) {
+    var disableCalendarDates = _a.disableCalendarDates, calendarRange = _a.calendarRange, updateCalendarMonthNavigation = _a.updateCalendarMonthNavigation, updateCalendarDefaultMonth = _a.updateCalendarDefaultMonth;
+    var _b = __read(useState(undefined), 2), overlappingDate = _b[0], setOverlappingDate = _b[1];
+    var _c = __read(useState([]), 2), lastPossibleCheckout = _c[0], setLatsPossibleCheckout = _c[1];
+    var newDisableCalendarDates = useMemo(function () {
+        var _a;
+        if (disableCalendarDates === null || disableCalendarDates === void 0 ? void 0 : disableCalendarDates.availableDates) {
+            var dateFormat_1 = 'dd-MM-yyyy';
+            var disabledDates = disableCalendarDates.disabledDates;
+            var _b = (disabledDates || []).reduce(function (acc, dateRange) {
+                var _a, _b;
+                var formattedFromDate = format(dateRange.from, dateFormat_1);
+                var formattedToDate = format(dateRange.to, dateFormat_1);
+                var hasTwoOverlappingDates = (_a = disableCalendarDates.availableDates) === null || _a === void 0 ? void 0 : _a.some(function (item) {
+                    return format(item.lastCheckOut, dateFormat_1) === formattedFromDate &&
+                        format(item.lastCheckOut, dateFormat_1) === formattedToDate;
+                });
+                var hasOneOverlappingDate = (_b = disableCalendarDates.availableDates) === null || _b === void 0 ? void 0 : _b.some(function (item) {
+                    return format(item.lastCheckOut, dateFormat_1) === formattedFromDate &&
+                        format(item.lastCheckOut, dateFormat_1) !== formattedToDate;
+                });
+                if (hasTwoOverlappingDates) {
+                    acc.newOverlappingDates.push(dateRange);
+                }
+                else if (hasOneOverlappingDate) {
+                    acc.newOverlappingDates.push(dateRange);
+                    acc.updatedDisabledDates.push(__assign$2(__assign$2({}, dateRange), { from: addDays(dateRange.from, 1) }));
+                }
+                else {
+                    acc.updatedDisabledDates.push(dateRange);
                 }
+                return acc;
+            }, { updatedDisabledDates: [], newOverlappingDates: [] }), updatedDisabledDates = _b.updatedDisabledDates, newOverlappingDates = _b.newOverlappingDates;
+            // Find last possible checkout ( disable all dates after the last possible checkout )
+            var lastPossibleCheckoutDate = (_a = disableCalendarDates.availableDates.at(-1)) === null || _a === void 0 ? void 0 : _a.lastCheckOut;
+            if (lastPossibleCheckoutDate) {
+                setLatsPossibleCheckout({ after: lastPossibleCheckoutDate });
             }
-        });
-    }
-    return Object.entries(ageCategoryCounts).length
-        ? JSON.stringify(ageCategoryCounts)
-        : '';
+            // Extract overlapping dates ( dates that are only available for checkout )
+            if (newOverlappingDates.length) {
+                setOverlappingDate(__spreadArray$1([], __read(newOverlappingDates), false));
+            }
+            var newDisableCalendarDates_1 = __assign$2(__assign$2({}, disableCalendarDates), { disabledDates: updatedDisabledDates });
+            return newDisableCalendarDates_1;
+        }
+        return disableCalendarDates;
+    }, [
+        disableCalendarDates,
+        calendarRange,
+        updateCalendarMonthNavigation,
+        updateCalendarDefaultMonth,
+    ]);
+    return { newDisableCalendarDates: newDisableCalendarDates, overlappingDate: overlappingDate, lastPossibleCheckout: lastPossibleCheckout };
 };
 
-var useScrollInToView = function (_a) {
-    var selectedFilter = _a.selectedFilter;
-    var _b = __read(useState(true), 2), isMobile = _b[0], setIsMobile = _b[1];
-    var targetFilterBarRef = useRef(null);
-    useEffect(function () {
-        if (typeof window !== 'undefined' && window.innerWidth > 960) {
-            setIsMobile(false);
-            return;
-        }
-        if (targetFilterBarRef.current && selectedFilter) {
-            window.scrollTo({
-                behavior: 'smooth',
-                top: targetFilterBarRef.current.getBoundingClientRect().top -
-                    document.body.getBoundingClientRect().top -
-                    30,
-            });
+var css_248z$e = ".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$e);
+
+var css_248z$d = ".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$d);
+
+var Calendar = 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
+    var t = useTranslation('common').t;
+    var calendarContainerRef = useAutoFocus(autoFocus);
+    var isTablet = reactResponsiveExports.useMediaQuery({ maxWidth: 960 });
+    var today = startOfDay(new Date());
+    var selectedStartDate = calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from;
+    var rangeContextStartDate = rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.from;
+    // Handle initial disable dates including overlapping availableDates.lastCheckOut and disabledDates.start
+    var _c = useUpdateDisabledDates({
+        disableCalendarDates: disableCalendarDates,
+        calendarRange: calendarRange,
+        updateCalendarMonthNavigation: updateCalendarMonthNavigation,
+        updateCalendarDefaultMonth: updateCalendarDefaultMonth,
+    }), newDisableCalendarDates = _c.newDisableCalendarDates, overlappingDate = _c.overlappingDate, lastPossibleCheckout = _c.lastPossibleCheckout;
+    // Handle disable dates by page
+    var disabledDatesByPage$1 = disabledDatesByPage({
+        today: today,
+        selectedPath: selectedPath,
+        newDisableCalendarDates: newDisableCalendarDates,
+    });
+    // Handle tooltip
+    useCalendarTooltips({
+        showFeedback: showFeedback,
+    });
+    // Handle loading spinner
+    useCalendarLoadingSpinner({
+        loadingData: loadingData,
+    });
+    // Handle the date selection and availability for selection logic.
+    var handleOnSelect = function (range) {
+        setCalendarHasError && calendarHasError && setCalendarHasError(false);
+        calendarSelectionRules({
+            range: range,
+            newDisableCalendarDates: newDisableCalendarDates,
+            setCalendarRange: setCalendarRange,
+            calendarRange: calendarRange,
+            overlappingDate: overlappingDate,
+            setCalendarHasError: setCalendarHasError,
+            rangeContext: rangeContext,
+        });
+        setUpdatedForSubmit && setUpdatedForSubmit(true);
+    };
+    // Handle disabled dates for range context
+    var _d = handleRangeContextDisabledDates({
+        rangeContext: rangeContext,
+        availableDates: newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.availableDates,
+        calendarRange: calendarRange,
+    }), findFirstPossibleRangeContextCheckIn = _d.findFirstPossibleRangeContextCheckIn, findLastPossibleRangeContextCheckOut = _d.findLastPossibleRangeContextCheckOut, firstPossibleRangeContextCheckIn = _d.firstPossibleRangeContextCheckIn, lastPossibleRangeContextCheckOut = _d.lastPossibleRangeContextCheckOut, currentSelectionAvailability = _d.currentSelectionAvailability;
+    // Handle check for continuous selection in the range context
+    checkForContinuousSelection({
+        setCalendarHasError: setCalendarHasError,
+        rangeContext: rangeContext,
+        calendarRange: calendarRange,
+        calendarHasError: calendarHasError,
+        disabledDates: newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.disabledDates,
+    });
+    var disabledInsideSelectableRange = function () {
+        if (
+        // Range end already selected
+        (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) ||
+            // No current check-in availability
+            !currentSelectionAvailability ||
+            // No gap between check-in and first possible check-out, nothing to disable
+            addDays(currentSelectionAvailability.checkIn, 1) >=
+                currentSelectionAvailability.firstCheckOut) {
+            return [];
         }
-    }, [selectedFilter]);
-    return { isMobile: isMobile, targetFilterBarRef: targetFilterBarRef };
+        // Disable dates between current check-in and first possible check-out
+        return [
+            {
+                from: addDays(currentSelectionAvailability.checkIn, 1),
+                to: addDays(currentSelectionAvailability.firstCheckOut, -1),
+            },
+        ];
+    };
+    var base = disabledDatesByPage$1.length
+        ? disabledDatesByPage$1
+        : (disabledDates === null || disabledDates === void 0 ? void 0 : disabledDates.length)
+            ? disabledDates
+            : (newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.disabledDates) || [];
+    var disabled = disabledDatesByPage$1.length
+        ? base
+        : __spreadArray$1(__spreadArray$1(__spreadArray$1(__spreadArray$1([
+            lastPossibleCheckout
+        ], __read(base), false), __read(firstPossibleRangeContextCheckIn), false), __read(lastPossibleRangeContextCheckOut), false), __read(disabledInsideSelectableRange()), false);
+    return (React__default.createElement("div", { className: "will-filter-bar-calendar", ref: ref },
+        React__default.createElement("div", { className: "will-calendar-filter-container", ref: calendarContainerRef },
+            React__default.createElement(DayPicker, { key: updateCalendarDefaultMonth, id: "will-calendar", mode: "range", locale: language === 'en' ? enUS : fi, numberOfMonths: !isTablet ? 2 : 1, weekStartsOn: 1, selected: calendarRange, onSelect: function (range) { return handleOnSelect(range); }, captionLayout: "dropdown-buttons", defaultMonth: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) ||
+                    selectedStartDate ||
+                    rangeContextStartDate ||
+                    (((_b = newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.disabledDates) === null || _b === void 0 ? void 0 : _b.length)
+                        ? newDisableCalendarDates.disabledDates[0].from
+                        : today), disabled: disabled, fromMonth: today, onMonthChange: function (val) {
+                    requestDates === null || requestDates === void 0 ? void 0 : requestDates(val);
+                    setUpdateCalendarMonthNavigation === null || setUpdateCalendarMonthNavigation === void 0 ? void 0 : setUpdateCalendarMonthNavigation(function (prev) { return !prev; });
+                }, classNames: {
+                    day_range_start: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) ? 'rdp-day_range_start' : '',
+                    day_range_end: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) ? 'rdp-day_range_end' : '',
+                }, modifiersClassNames: {
+                    today: 'my-today',
+                    booked: 'booked',
+                    disabledAfterCheckIn: 'disabled-after-check-in',
+                    overlappingDate: 'overlapping-date',
+                    noActiveSelectionStart: 'no-active-selection-start',
+                    noActiveSelectionMid: 'no-active-selection-mid',
+                    noActiveSelectionEnd: 'no-active-selection-end',
+                    checkoutOptionsMid: 'rdp-day_selected rdp-day_range_middle checkout-option',
+                    checkInOnly: 'check-in-only',
+                    checkOutOnly: 'check-out-only',
+                }, modifiers: 
+                // This function handles conditions for applying the modifiersClassNames
+                handleCalendarModifiers({
+                    calendarRange: calendarRange,
+                    disabledDates: disabled,
+                    overlappingDate: overlappingDate,
+                    rangeContext: rangeContext,
+                    findFirstPossibleRangeContextCheckIn: findFirstPossibleRangeContextCheckIn,
+                    findLastPossibleRangeContextCheckOut: findLastPossibleRangeContextCheckOut,
+                    currentSelectionLastCheckoutDate: currentSelectionAvailability,
+                }) }),
+            React__default.createElement("div", { className: 'will-calendar-tooltip' },
+                React__default.createElement("div", null, t('noCheckIn'))),
+            React__default.createElement("div", { className: 'will-calendar-tooltip-check-out' },
+                React__default.createElement("div", null, t('noCheckOut'))),
+            React__default.createElement("div", { className: 'will-calendar-tooltip-overlapping-date' },
+                React__default.createElement("div", null, t('checkOutOnly'))),
+            React__default.createElement("div", { className: 'will-calendar-tooltip-check-in-only' },
+                React__default.createElement("div", null, t('checkInOnly'))),
+            React__default.createElement("div", { className: 'will-calendar-tooltip-check-out-only' },
+                React__default.createElement("div", null, t('checkOutOnly'))),
+            React__default.createElement("div", { className: 'will-calendar-spinner' },
+                React__default.createElement(IconsSvg, { fill: (palette === null || palette === void 0 ? void 0 : palette.primary) || 'inherit', size: 50, icon: "spinner" })))));
+});
+
+var css_248z$c = ".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$c);
+
+var SectionHeader = function (_a) {
+    var title = _a.title, action = _a.action;
+    return (React__default.createElement("div", { className: "will-filter-section-header" },
+        React__default.createElement("h3", { className: "will-filter-section-title" }, title),
+        action && React__default.createElement("div", { className: "will-filter-section-action" }, action)));
 };
 
-var css_248z$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";
+var css_248z$b = ".will-dates-filter-container {\n  padding: 0 16px;\n}\n";
 styleInject(css_248z$b);
 
-var SelectButton = forwardRef(function (_a, ref) {
-    var active = _a.active, label = _a.label, onClick = _a.onClick, description = _a.description, disabled = _a.disabled, ariaExpanded = _a.ariaExpanded, ariaControls = _a.ariaControls;
-    return (jsx("button", { ref: ref, className: "will-filter-bar-select-button ".concat(disabled ? 'disabled' : ''), onClick: disabled ? undefined : onClick, disabled: disabled, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, "aria-haspopup": "true", "aria-disabled": disabled, children: jsx("span", { className: "select-button-wrapper", children: jsxs("div", { children: [jsx("p", { className: "select-button-label", children: label }), jsx("p", { className: "select-button-description ".concat(active ? 'active' : ''), dangerouslySetInnerHTML: { __html: description } })] }) }) }));
+var Dates = forwardRef(function (_a, ref) {
+    var onClose = _a.onClose, autoFocus = _a.autoFocus, calendarRange = _a.calendarRange, setCalendarRange = _a.setCalendarRange, disableCalendarDates = _a.disableCalendarDates, selectedPath = _a.selectedPath, language = _a.language;
+    return (React__default.createElement("div", { id: "will-filter-bar-dates", ref: ref },
+        React__default.createElement(SectionHeader, { title: '', action: onClose && React__default.createElement(CloseButton, { handleClose: onClose }) }),
+        React__default.createElement("div", { className: "will-dates-filter-container" },
+            React__default.createElement(Calendar, { autoFocus: autoFocus, calendarRange: calendarRange, setCalendarRange: setCalendarRange, disableCalendarDates: disableCalendarDates, selectedPath: selectedPath, language: language }))));
 });
-SelectButton.displayName = 'SelectButton';
+Dates.displayName = 'Dates';
 
-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";
+var css_248z$a = ".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$a);
 
-var TabButton = function (_a) {
-    var onClick = _a.onClick, label = _a.label, active = _a.active, mode = _a.mode;
-    return (jsx("button", { className: "will-filter-bar-tab-button ".concat(mode || 'light', " ").concat(active && 'active', " "), onClick: onClick, children: label }));
-};
-
-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;
     useEffect(function () {
@@ -11958,77 +12038,57 @@ var GuestCount = function (_a) {
     var handleIncrement = function () {
         updateGuestsCount("guests-".concat(id), count + 1);
     };
-    return (jsxs("div", { className: "will-guests-filter-inner", style: { order: "".concat(sortOrder) }, children: [jsx("p", { className: "will-guests-filter-label", children: label }), jsxs("div", { className: "will-guests-filter-counter", children: [jsx("button", { className: "will-guests-filter-counter-button", onClick: handleDecrement, disabled: (minVal && count <= minVal) || !count, style: {
-                            cursor: (minVal && count <= minVal) || !count ? 'initial' : 'pointer',
-                            paddingBottom: '4px',
-                            opacity: (minVal && count <= minVal) || !count ? 0.4 : 1,
-                        }, children: jsx("svg", { width: "10", height: "10", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M4 10H16", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) }), jsx("span", { className: "will-guests-filter-count", children: count }), jsx("button", { className: "will-guests-filter-counter-button", onClick: handleIncrement, children: jsx("svg", { width: "15", height: "15", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M10 4V16M4 10H16", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) })] })] }));
-};
-
-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 (jsxs("div", { className: "will-filter-section-header", children: [jsx("h3", { className: "will-filter-section-title", children: title }), action && jsx("div", { className: "will-filter-section-action", children: action })] }));
-};
-
-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);
+    return (React__default.createElement("div", { className: "will-guests-filter-inner", style: { order: "".concat(sortOrder) } },
+        React__default.createElement("p", { className: "will-guests-filter-label" }, label),
+        React__default.createElement("div", { className: "will-guests-filter-counter" },
+            React__default.createElement("button", { className: "will-guests-filter-counter-button", onClick: handleDecrement, disabled: (minVal && count <= minVal) || !count, style: {
+                    cursor: (minVal && count <= minVal) || !count ? 'initial' : 'pointer',
+                    paddingBottom: '4px',
+                    opacity: (minVal && count <= minVal) || !count ? 0.4 : 1,
+                } },
+                React__default.createElement("svg", { width: "10", height: "10", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                    React__default.createElement("path", { d: "M4 10H16", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }))),
+            React__default.createElement("span", { className: "will-guests-filter-count" }, count),
+            React__default.createElement("button", { className: "will-guests-filter-counter-button", onClick: handleIncrement },
+                React__default.createElement("svg", { width: "15", height: "15", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                    React__default.createElement("path", { d: "M10 4V16M4 10H16", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }))))));
+};
+
+var css_248z$9 = "#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/**/\n.will-guest-count {\n  display: inline-block;\n  min-width: 10px;\n}\n";
+styleInject(css_248z$9);
 
 var Guests = forwardRef(function (_a, ref) {
     var ageCategories = _a.ageCategories, updateGuestsCount = _a.updateGuestsCount, ageCategoryCounts = _a.ageCategoryCounts, autoFocus = _a.autoFocus, onClose = _a.onClose;
     var t = useTranslation('filterBar').t;
     var containerRef = useAutoFocus(autoFocus);
-    return (jsxs("div", { className: "will-filter-bar-guests", ref: ref, children: [jsx(FilterSectionHeader, { title: t('guests.title'), action: onClose && jsx(CloseButton, { handleClose: onClose }) }), jsx("div", { className: "will-guests-filter-container", ref: containerRef, children: ageCategories === null || ageCategories === void 0 ? void 0 : ageCategories.map(function (category) { return (jsx(GuestCount, { id: category.id, label: category.name, minVal: category.minVal, sortOrder: category.sortOrder, updateGuestsCount: updateGuestsCount, count: ageCategoryCounts["guests-".concat(category.id)] || 0 }, category.id)); }) })] }));
+    return (React__default.createElement("div", { id: "will-filter-bar-guests", ref: ref },
+        React__default.createElement(SectionHeader, { title: t('guests.title'), action: onClose && React__default.createElement(CloseButton, { handleClose: onClose }) }),
+        React__default.createElement("div", { className: "will-guests-filter-container", ref: containerRef }, ageCategories === null || ageCategories === void 0 ? void 0 : ageCategories.map(function (category) { return (React__default.createElement(GuestCount, { key: category.id, id: category.id, label: category.name, minVal: category.minVal, sortOrder: category.sortOrder, updateGuestsCount: updateGuestsCount, count: ageCategoryCounts["guests-".concat(category.id)] || 0 })); }))));
 });
 Guests.displayName = 'Guests';
 
-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 jsx("div", { className: "will-filter-bar-divider" });
-};
-
-var css_248z$5 = ".will-filter-bar-categories {\n  text-align: center;\n}\n\n.will-categories-filter-title {\n  font-size: 16px;\n  text-transform: uppercase;\n  margin: 10px 0 30px 0;\n}\n\n.will-categories-filter-inner {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 20px;\n}\n\n.will-categories-filter-inner input {\n  cursor: pointer;\n  margin-right: 10px;\n}\n";
-styleInject(css_248z$5);
-
-var Categories = function (_a) {
-    _a.categories; var setCategories = _a.setCategories;
-    var t = useTranslation('filterBar').t;
-    var categoriesPlaceholder = [
-        'Weekend',
-        'Week',
-        'Summer camp',
-        'Winter camp',
-    ];
-    var _b = __read(useState(''), 2), selectedCategory = _b[0], setSelectedCategory = _b[1];
-    var handleCategoryChange = function (selectedCategory) {
-        setSelectedCategory(selectedCategory);
-        setCategories(selectedCategory);
-    };
-    return (jsxs("div", { className: "will-filter-bar-categories", children: [jsx("h3", { className: "will-categories-filter-title", children: t('categories.label') }), jsx("div", { className: "will-categories-filter-inner", children: categoriesPlaceholder.map(function (itm, idx) { return (jsxs("div", { children: [jsx("input", { type: "radio", value: itm, checked: selectedCategory === itm, onChange: function () { return handleCategoryChange(itm); } }), jsx("span", { children: itm })] }, idx)); }) })] }));
-};
-
-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$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 css_248z$8 = ".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$8);
 
 var ImageCard = forwardRef(function (_a, ref) {
     var title = _a.title, description = _a.description, imageUrl = _a.imageUrl, isSelected = _a.isSelected, onClick = _a.onClick;
     var ariaLabel = "".concat(title).concat(description ? ", ".concat(description) : '');
-    return (jsxs("div", { ref: ref, className: "will-image-card ".concat(isSelected ? 'is-selected' : ''), onClick: onClick, onKeyDown: function (e) {
+    return (React__default.createElement("div", { ref: ref, className: "will-image-card ".concat(isSelected ? 'is-selected' : ''), onClick: onClick, onKeyDown: function (e) {
             if (e.key === 'Enter' || e.key === ' ') {
                 e.preventDefault();
                 onClick === null || onClick === void 0 ? void 0 : onClick();
             }
-        }, role: "button", tabIndex: 0, "aria-pressed": isSelected, "aria-label": ariaLabel, children: [jsxs("div", { className: "will-image-card-content", children: [jsx("h3", { children: title }), description && jsx("p", { children: description })] }), jsx("div", { className: "will-image-card-image", children: imageUrl && jsx("img", { src: imageUrl, alt: title || 'Location image' }) })] }));
+        }, role: "button", tabIndex: 0, "aria-pressed": isSelected, "aria-label": ariaLabel },
+        React__default.createElement("div", { className: "will-image-card-content" },
+            React__default.createElement("h3", null, title),
+            description && React__default.createElement("p", null, description)),
+        React__default.createElement("div", { className: "will-image-card-image" }, imageUrl && React__default.createElement("img", { src: imageUrl, alt: title || 'Location image' }))));
 });
 ImageCard.displayName = 'ImageCard';
 
+var css_248z$7 = "#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$7);
+
 var Locations = 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;
@@ -12057,67 +12117,84 @@ var Locations = forwardRef(function (_a, ref) {
             onClose === null || onClose === void 0 ? void 0 : onClose();
         }
     };
-    return (jsxs("div", { className: "will-filter-bar-locations", ref: ref, children: [jsx(FilterSectionHeader, { title: t('locations.title'), action: onClose && jsx(CloseButton, { handleClose: onClose }) }), jsx("div", { className: "will-locations-filter-container", children: !!((locations === null || locations === void 0 ? void 0 : locations.length) && language) &&
-                    locations.map(function (location, index) {
-                        return (jsx(ImageCard, { ref: index === 0 ? firstCardRef : null, title: location.label, description: location.description, imageUrl: location.imageUrl, isSelected: selectedLocations.some(function (loc) { return loc.id === location.id; }), onClick: function () { return handleLocationClick(location); } }, location.id));
-                    }) })] }));
+    return (React__default.createElement("div", { id: "will-filter-bar-locations", ref: ref },
+        React__default.createElement(SectionHeader, { title: t('locations.title'), action: onClose && React__default.createElement(CloseButton, { handleClose: onClose }) }),
+        React__default.createElement("div", { className: "will-locations-filter-container" }, !!((locations === null || locations === void 0 ? void 0 : locations.length) && language) &&
+            locations.map(function (location, index) {
+                return (React__default.createElement(ImageCard, { key: location.id, ref: index === 0 ? firstCardRef : null, title: location.label, description: location.description, imageUrl: location.imageUrl, isSelected: selectedLocations.some(function (loc) { return loc.id === location.id; }), onClick: function () { return handleLocationClick(location); } }));
+            }))));
 });
 Locations.displayName = 'Locations';
 
-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$6 = "#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$6);
 
-var css_248z$1 = ".will-dates-filter-container {\n  padding: 0 16px;\n}\n";
-styleInject(css_248z$1);
+var Categories = function (_a) {
+    _a.categories; var setCategories = _a.setCategories;
+    var t = useTranslation('filterBar').t;
+    var categoriesPlaceholder = [
+        'Weekend',
+        'Week',
+        'Summer camp',
+        'Winter camp',
+    ];
+    var _b = __read(useState(''), 2), selectedCategory = _b[0], setSelectedCategory = _b[1];
+    var handleCategoryChange = function (selectedCategory) {
+        setSelectedCategory(selectedCategory);
+        setCategories(selectedCategory);
+    };
+    return (React__default.createElement("div", { id: "will-filter-bar-categories" },
+        React__default.createElement("h3", { className: "will-categories-filter-title" }, t('categories.label')),
+        React__default.createElement("div", { className: "will-categories-filter-inner" }, categoriesPlaceholder.map(function (itm, idx) { return (React__default.createElement("div", { key: idx },
+            React__default.createElement("input", { type: "radio", value: itm, checked: selectedCategory === itm, onChange: function () { return handleCategoryChange(itm); } }),
+            React__default.createElement("span", null, itm))); }))));
+};
+Categories.displayName = 'Categories';
 
-var Dates = forwardRef(function (_a, ref) {
-    var onClose = _a.onClose, autoFocus = _a.autoFocus, calendarRange = _a.calendarRange, setCalendarRange = _a.setCalendarRange, disableCalendarDates = _a.disableCalendarDates, selectedPath = _a.selectedPath, language = _a.language, filtersRef = _a.filtersRef;
-    return (jsxs("div", { className: "will-filter-bar-dates", ref: ref, children: [jsx(FilterSectionHeader, { title: '', action: onClose && jsx(CloseButton, { handleClose: onClose }) }), jsx("div", { className: "will-dates-filter-container", children: jsx(Calendar, { autoFocus: autoFocus, calendarRange: calendarRange, setCalendarRange: setCalendarRange, disableCalendarDates: disableCalendarDates, selectedPath: selectedPath, language: language, ref: filtersRef }) })] }));
-});
-Dates.displayName = 'Dates';
+var css_248z$5 = ".will-filter-bar-panels {\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-panels {\n    margin-top: 10px;\n    top: 0;\n    position: relative;\n  }\n}\n";
+styleInject(css_248z$5);
 
-function FilterBar(_a) {
-    var _b;
-    var _c = _a.language, language = _c === void 0 ? LANGUAGE_FALLBACK : _c, _d = _a.ageCategories, ageCategories = _d === void 0 ? AGE_CATEGORIES_FALLBACK : _d, _e = _a.redirectUrl, redirectUrl = _e === void 0 ? REDIRECT_URL_FALLBACK : _e, palette = _a.palette, onSubmit = _a.onSubmit, fullWidth = _a.fullWidth, disableCalendarDates = _a.disableCalendarDates, mode = _a.mode, tabs = _a.tabs, outerLoading = _a.outerLoading, locations = _a.locations;
-    var themePalette = useTheme({ palette: palette });
-    // Translations
-    useUpdateTranslations({ language: language });
-    var t = useTranslation('filterBar').t;
-    // Refs for SelectButtons
-    var locationsButtonRef = useRef(null);
-    var datesButtonRef = useRef(null);
-    var guestsButtonRef = useRef(null);
-    var previouslyFocusedButtonRef = useRef(null);
-    var headerRef = useRef(null);
-    // Dropdown positioning
-    var _f = __read(useState({}), 2), dropdownStyle = _f[0], setDropdownStyle = _f[1];
-    // Filters
-    var _g = useFilterBar({
-        redirectUrl: redirectUrl,
-        ageCategories: ageCategories,
-        onSubmit: onSubmit,
-        tabs: tabs,
-        locations: locations,
-    }), 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 _h = useScrollInToView({ selectedFilter: selectedFilter }), isMobile = _h.isMobile, targetFilterBarRef = _h.targetFilterBarRef;
+var FilterPanels = function () {
+    var _a = useFilterBar(), categories = _a.categories, calendarRange = _a.calendarRange, selectedFilter = _a.selectedFilter, selectedPath = _a.selectedPath, ageCategoryCounts = _a.ageCategoryCounts, selectedLocations = _a.selectedLocations, mode = _a.mode, tabs = _a.tabs, disableCalendarDates = _a.disableCalendarDates, ageCategories = _a.ageCategories, locations = _a.locations, language = _a.language, isMobile = _a.isMobile, panelRef = _a.panelRef, buttonRefs = _a.buttonRefs, targetFilterBarRef = _a.targetFilterBarRef, setSelectedLocations = _a.setSelectedLocations, setCalendarRange = _a.setCalendarRange, handleSelectedFilter = _a.handleSelectedFilter, updateGuestsCount = _a.updateGuestsCount, setCategories = _a.setCategories;
     // 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);
+    var localStyles = usePanelPosition({
+        selectedFilter: selectedFilter,
+        panelRef: panelRef,
+        targetFilterBarRef: targetFilterBarRef,
+        buttonRefs: buttonRefs,
+        isMobile: isMobile,
+    }).localStyles;
+    var renderContent = function () {
+        switch (selectedFilter) {
+            case FilterSections.CALENDAR:
+                return (React__default.createElement(Dates, { autoFocus: true, ref: filtersRef, onClose: function () { return handleSelectedFilter(false); }, calendarRange: calendarRange, setCalendarRange: setCalendarRange, disableCalendarDates: disableCalendarDates, selectedPath: selectedPath, language: language }));
+            case FilterSections.GUESTS:
+                return (React__default.createElement(Guests, { autoFocus: true, ref: filtersRef, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts, updateGuestsCount: updateGuestsCount, onClose: function () { return handleSelectedFilter(false); } }));
+            case FilterSections.CATEGORIES:
+                return (React__default.createElement(Categories, { categories: categories, setCategories: setCategories }));
+            case FilterSections.LOCATIONS:
+                return (React__default.createElement(Locations, { autoFocus: true, ref: filtersRef, locations: locations === null || locations === void 0 ? void 0 : locations.data, language: language, selectedLocations: selectedLocations, setSelectedLocations: setSelectedLocations, multiSelect: locations === null || locations === void 0 ? void 0 : locations.multiSelect, onClose: function () { return handleSelectedFilter(false); } }));
+            default:
+                return null;
         }
-        handleSelectedFilter(filter);
     };
+    return (selectedFilter && (React__default.createElement("div", { ref: panelRef, className: "will-filter-bar-panels ".concat(mode || 'light'), style: (!tabs || tabs.length < 2) && !isMobile
+            ? { top: 66 }
+            : __assign$2({}, localStyles) }, renderContent())));
+};
+
+var css_248z$4 = ".will-filter-bar-controls {\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-controls {\n    flex-direction: column;\n    padding: 20px;\n    border-radius: 25px;\n    overflow: hidden;\n  }\n}\n";
+styleInject(css_248z$4);
+
+var FilterControls = function () {
+    var _a;
+    var t = useTranslation('filterBar').t;
+    var _b = useFilterBar(), calendarRange = _b.calendarRange, selectedFilter = _b.selectedFilter, selectedPath = _b.selectedPath, ageCategoryCounts = _b.ageCategoryCounts, selectedLocations = _b.selectedLocations, mode = _b.mode, tabs = _b.tabs, ageCategories = _b.ageCategories, locations = _b.locations, innerLoading = _b.innerLoading, outerLoading = _b.outerLoading, handleSubmit = _b.handleSubmit, handleSelectedFilter = _b.handleSelectedFilter, 
+    // Refs
+    previouslyFocusedButtonRef = _b.previouslyFocusedButtonRef, buttonRefs = _b.buttonRefs, 
+    //
+    targetFilterBarRef = _b.targetFilterBarRef;
     // Store previously focused button and restore focus when closing
     useEffect(function () {
         if (!selectedFilter && previouslyFocusedButtonRef.current) {
@@ -12125,8 +12202,6 @@ function FilterBar(_a) {
             previouslyFocusedButtonRef.current = null;
         }
     }, [selectedFilter]);
-    // Display component after fully loaded
-    useAwaitRender();
     // Parsed data for filter section description
     var parsedDates = parseDates({ calendarRange: calendarRange });
     var parsedGuests = parseGuests({
@@ -12141,47 +12216,68 @@ function FilterBar(_a) {
         locationsPlaceholder: t('locations.placeholder'),
         locationsSelectedLabel: t('locations.selected'),
     });
-    return (jsxs("div", { className: "will-root ".concat(fullWidth ? 'is-full-width' : ''), style: themePalette, children: [tabs && tabs.length > 1 && (jsx("div", { className: "will-filter-bar-tabs", ref: targetFilterBarRef, children: tabs
-                    .sort(function (a, b) { return a.order - b.order; })
-                    .map(function (tab, idx) { return (jsx(TabButton, { label: tab.label || t("tabs.".concat(tab.path.substring(1))), onClick: function () {
-                        setSelectedPath(tab.path);
-                        handleResetFilters();
-                        handleSelectedFilter(false);
-                    }, active: selectedPath === tab.path, mode: mode }, "tab-".concat(idx))); }) })), jsxs("div", { className: "will-filter-bar-header ".concat(mode || 'light'), ref: function (el) {
-                    headerRef.current = el;
-                    if ((tabs === null || tabs === void 0 ? void 0 : tabs.length) === 1 && targetFilterBarRef) {
-                        targetFilterBarRef.current = el;
-                    }
-                }, children: [!!((_b = locations === null || locations === void 0 ? void 0 : locations.data) === null || _b === void 0 ? void 0 : _b.length) && (jsxs(Fragment, { children: [jsx(SelectButton, { ref: locationsButtonRef, label: t('locations.label'), description: parsedLocations, onClick: function () {
-                                    previouslyFocusedButtonRef.current = locationsButtonRef.current;
-                                    handleSelectedFilterWithPosition(FilterSections.LOCATIONS);
-                                }, active: !!selectedLocations.length, disabled: locations === null || locations === void 0 ? void 0 : locations.disabled, ariaExpanded: selectedFilter === FilterSections.LOCATIONS, ariaControls: "will-locations-filter" }), jsx(Divider, {})] })), jsx(SelectButton, { ref: datesButtonRef, label: t('calendar.label'), description: parsedDates
-                            ? parsedDates
-                            : selectedPath === Pages.ROOMS
-                                ? t('calendar.roomsLabelPlaceholder')
-                                : t('calendar.eventsLabelPlaceholder'), onClick: function () {
-                            previouslyFocusedButtonRef.current = datesButtonRef.current;
-                            handleSelectedFilterWithPosition(FilterSections.CALENDAR);
-                        }, active: !!parsedDates, ariaExpanded: selectedFilter === FilterSections.CALENDAR, ariaControls: "will-calendar-filter" }), selectedPath !== Pages.EVENTS && (jsxs(Fragment, { children: [jsx(Divider, {}), jsx(SelectButton, { ref: guestsButtonRef, label: t('guests.label'), description: parsedGuests.content, onClick: function () {
-                                    previouslyFocusedButtonRef.current = guestsButtonRef.current;
-                                    handleSelectedFilterWithPosition(FilterSections.GUESTS);
-                                }, active: !!parsedGuests.data.total, ariaExpanded: selectedFilter === FilterSections.GUESTS, ariaControls: "will-guests-filter" })] })), jsx(SubmitButton, { onClick: handleSubmit, startIcon: jsx(FaSearch, {}), label: t('common:search'), isLoading: innerLoading || outerLoading })] }), selectedFilter && (jsxs("div", { className: "will-filter-bar-container ".concat(mode || 'light'), style: __assign$2(__assign$2({}, ((!tabs || tabs.length < 2) && !isMobile ? { top: 66 } : {})), dropdownStyle), children: [selectedFilter === FilterSections.CALENDAR && (jsx("div", { id: "will-dates-filter", children: jsx(Dates, { autoFocus: true, ref: filtersRef, onClose: function () { return handleSelectedFilter(false); }, calendarRange: calendarRange, setCalendarRange: setCalendarRange, disableCalendarDates: disableCalendarDates, selectedPath: selectedPath, language: language, filtersRef: filtersRef }) })), selectedFilter === FilterSections.GUESTS && (jsx("div", { id: "will-guests-filter", children: jsx(Guests, { updateGuestsCount: updateGuestsCount, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts, ref: filtersRef, autoFocus: true, onClose: function () { return handleSelectedFilter(false); } }) })), selectedFilter === FilterSections.CATEGORIES && (jsx("div", { id: "will-categories-filter", children: jsx(Categories, { categories: categories, setCategories: setCategories }) })), selectedFilter === FilterSections.LOCATIONS && (jsx("div", { id: "will-locations-filter", children: jsx(Locations, { autoFocus: true, ref: filtersRef, locations: locations === null || locations === void 0 ? void 0 : locations.data, language: language, selectedLocations: selectedLocations, setSelectedLocations: setSelectedLocations, multiSelect: locations === null || locations === void 0 ? void 0 : locations.multiSelect, onClose: function () { return handleSelectedFilter(false); } }) }))] }))] }));
-}
+    return (React__default.createElement("div", { className: "will-filter-bar-controls ".concat(mode || 'light'), ref: (tabs === null || tabs === void 0 ? void 0 : tabs.length) === 1 ? targetFilterBarRef : null },
+        !!((_a = locations === null || locations === void 0 ? void 0 : locations.data) === null || _a === void 0 ? void 0 : _a.length) && (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(SelectButton, { ref: function (el) { return (buttonRefs.current[FilterSections.LOCATIONS] = el); }, label: t('locations.label'), description: parsedLocations, onClick: function (e) {
+                    previouslyFocusedButtonRef.current = e.currentTarget;
+                    handleSelectedFilter(FilterSections.LOCATIONS);
+                }, active: !!selectedLocations.length, disabled: locations === null || locations === void 0 ? void 0 : locations.disabled, ariaExpanded: selectedFilter === FilterSections.LOCATIONS, ariaControls: "will-filter-bar-locations" }),
+            React__default.createElement(Divider, null))),
+        React__default.createElement(SelectButton, { ref: function (el) { return (buttonRefs.current[FilterSections.CALENDAR] = el); }, label: t('calendar.label'), description: parsedDates
+                ? parsedDates
+                : selectedPath === Pages.ROOMS
+                    ? t('calendar.roomsLabelPlaceholder')
+                    : t('calendar.eventsLabelPlaceholder'), onClick: function (e) {
+                previouslyFocusedButtonRef.current = e.currentTarget;
+                handleSelectedFilter(FilterSections.CALENDAR);
+            }, active: !!parsedDates, ariaExpanded: selectedFilter === FilterSections.CALENDAR, ariaControls: "will-filter-bar-dates" }),
+        selectedPath !== Pages.EVENTS && (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(Divider, null),
+            React__default.createElement(SelectButton, { ref: function (el) { return (buttonRefs.current[FilterSections.GUESTS] = el); }, label: t('guests.label'), description: parsedGuests.content, onClick: function (e) {
+                    previouslyFocusedButtonRef.current = e.currentTarget;
+                    handleSelectedFilter(FilterSections.GUESTS);
+                }, active: !!parsedGuests.data.total, ariaExpanded: selectedFilter === FilterSections.GUESTS, ariaControls: "will-guests-filter" }))),
+        React__default.createElement(SubmitButton, { onClick: handleSubmit, startIcon: React__default.createElement(FaSearch, null), label: t('common:search'), isLoading: innerLoading || outerLoading })));
+};
+
+var css_248z$3 = ".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";
+styleInject(css_248z$3);
+
+var FilterTabs = function () {
+    var t = useTranslation('filterBar').t;
+    var _a = useFilterBar(), selectedPath = _a.selectedPath, mode = _a.mode, tabs = _a.tabs, handleSelectedFilter = _a.handleSelectedFilter, setSelectedPath = _a.setSelectedPath, handleResetFilters = _a.handleResetFilters, 
+    //
+    targetFilterBarRef = _a.targetFilterBarRef;
+    return (tabs &&
+        tabs.length > 1 && (React__default.createElement("div", { className: "will-filter-bar-tabs", ref: targetFilterBarRef }, tabs
+        .sort(function (a, b) { return a.order - b.order; })
+        .map(function (tab, idx) { return (React__default.createElement(TabButton, { key: "tab-".concat(idx), label: tab.label || t("tabs.".concat(tab.path.substring(1))), onClick: function () {
+            setSelectedPath(tab.path);
+            handleResetFilters();
+            handleSelectedFilter(false);
+        }, active: selectedPath === tab.path, mode: mode })); }))));
+};
+
+var css_248z$2 = "@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$2);
+
+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/* Common */\n\n.will-filter-bar-controls.dark,\n.will-filter-bar-panels.dark {\n  box-shadow: var(--will-box-shadow-dark);\n}\n\n.will-filter-bar-controls.light,\n.will-filter-bar-panels.light {\n  box-shadow: var(--will-box-shadow-light);\n}\n";
+styleInject(css_248z$1);
+
+var FilterBar = function (_a) {
+    var _b = _a.language, language = _b === void 0 ? LANGUAGE_FALLBACK : _b, ageCategories = _a.ageCategories, _c = _a.redirectUrl, redirectUrl = _c === void 0 ? REDIRECT_URL_FALLBACK : _c, palette = _a.palette, onSubmit = _a.onSubmit, fullWidth = _a.fullWidth, disableCalendarDates = _a.disableCalendarDates, mode = _a.mode, tabs = _a.tabs, outerLoading = _a.outerLoading, locations = _a.locations;
+    var themePalette = useTheme({ palette: palette });
+    // Translations
+    useUpdateTranslations({ language: language });
+    // Display component after fully loaded
+    useAwaitRender();
+    return (React__default.createElement(FilterBarProvider, { language: language, ageCategories: ageCategories, redirectUrl: redirectUrl, palette: palette, onSubmit: onSubmit, fullWidth: fullWidth, disableCalendarDates: disableCalendarDates, mode: mode, tabs: tabs, outerLoading: outerLoading, locations: locations },
+        React__default.createElement("div", { className: "will-root ".concat(fullWidth ? 'is-full-width' : ''), style: themePalette },
+            React__default.createElement(FilterTabs, null),
+            React__default.createElement(FilterControls, null),
+            React__default.createElement(FilterPanels, null))));
+};
 ////////////
-var AGE_CATEGORIES_FALLBACK = [
-    {
-        id: '1',
-        name: 'Adults',
-        sortOrder: 1,
-        minVal: 0,
-    },
-    {
-        id: '2',
-        name: 'Kids',
-        sortOrder: 2,
-        minVal: 0,
-    },
-];
 var REDIRECT_URL_FALLBACK = 'http://localhost:3000/';
 var LANGUAGE_FALLBACK = 'en';
 
@@ -12306,26 +12402,36 @@ var Footer = function (_a) {
     var nights = nightsCount({
         calendarRange: calendarRange,
     });
-    return (jsxs("div", { className: "will-calendar-footer-actions-wrapper", children: [jsxs("div", { className: "will-calendar-footer-dates", children: [calendarHasError ? (jsx("div", { className: "will-calendar-footer-error", children: calendarHasError &&
-                            renderCalendarErrorMessage({
-                                palette: palette,
-                                message: t("common:errors.calendarErrors.checkInAvailabilityError"),
-                            }) })) : (jsxs("div", { children: [jsx("span", { children: parseDate({
-                                    date: calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from,
-                                    dateFormat: 'EEEEEE d.M.yyyy',
-                                    language: language,
-                                }) || t('common:checkIn') }), jsx("span", { className: "will-calendar-footer-dates-separator", children: "-" }), jsx("span", { children: parseDate({
-                                    date: calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to,
-                                    dateFormat: 'EEEEEE d.M.yyyy',
-                                    language: language,
-                                }) || t('common:checkOut') })] })), jsx("span", { className: "will-calendar-footer-booked", children: !calendarHasError && nights
-                            ? "".concat(nights, " ").concat(t("common:".concat(nights === 1 ? 'night' : 'nights')))
-                            : '' })] }), jsx("div", { className: "will-calendar-footer-actions", children: jsx(SubmitButton, { onClick: handleClearDates, disabled: !(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from), label: t("common:clearDates"), variant: "text" }) })] }));
+    return (React__default.createElement("div", { className: "will-calendar-footer-actions-wrapper" },
+        React__default.createElement("div", { className: "will-calendar-footer-dates" },
+            calendarHasError ? (React__default.createElement("div", { className: "will-calendar-footer-error" }, calendarHasError &&
+                renderCalendarErrorMessage({
+                    palette: palette,
+                    message: t("common:errors.calendarErrors.checkInAvailabilityError"),
+                }))) : (React__default.createElement("div", null,
+                React__default.createElement("span", null, parseDate({
+                    date: calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from,
+                    dateFormat: 'EEEEEE d.M.yyyy',
+                    language: language,
+                }) || t('common:checkIn')),
+                React__default.createElement("span", { className: "will-calendar-footer-dates-separator" }, "-"),
+                React__default.createElement("span", null, parseDate({
+                    date: calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to,
+                    dateFormat: 'EEEEEE d.M.yyyy',
+                    language: language,
+                }) || t('common:checkOut')))),
+            React__default.createElement("span", { className: "will-calendar-footer-booked" }, !calendarHasError && nights
+                ? "".concat(nights, " ").concat(t("common:".concat(nights === 1 ? 'night' : 'nights')))
+                : '')),
+        React__default.createElement("div", { className: "will-calendar-footer-actions" },
+            React__default.createElement(SubmitButton, { onClick: handleClearDates, disabled: !(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from), label: t("common:clearDates"), variant: "text" }))));
 };
 /////////
 var renderCalendarErrorMessage = function (_a) {
     var message = _a.message, palette = _a.palette;
-    return (jsxs(Fragment, { children: [jsx(IconsSvg, { fill: (palette === null || palette === void 0 ? void 0 : palette.error) || 'inherit', size: 25, icon: "warning" }), jsx("span", { children: message || '' })] }));
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(IconsSvg, { fill: (palette === null || palette === void 0 ? void 0 : palette.error) || 'inherit', size: 25, icon: "warning" }),
+        React__default.createElement("span", null, message || '')));
 };
 
 var css_248z = ".will-root .will-calendar-wrapper {\n    box-shadow: var(--will-box-shadow-dark);\n    border-radius: 20px;\n    background-color: var(--will-white);\n    position: absolute;\n    top: 0;\n    left: 0;\n   \n}\n\n.will-root .will-calendar-wrapper .will-calendar-header,\n.will-root .will-calendar-wrapper .will-calendar-main,\n.will-root .will-calendar-wrapper .will-calendar-footer {\n   padding: 20px;\n}\n\n/* Header */\n\n.will-root .will-calendar-wrapper .will-calendar-header {\n    display: flex;\n    justify-content: space-between;\n    border-bottom: 1px solid var(--will-grey);\n    align-items: center;\n}\n\n/* Footer */\n\n.will-root .will-calendar-wrapper .will-calendar-footer {\n    border-top: 1px solid var(--will-grey);\n}\n\n/* Footer actions */\n\n.will-root .will-calendar-wrapper .will-calendar-footer-actions-wrapper {\n    display: flex;\n    justify-content: space-between;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-dates > div {\n    margin-bottom: 5px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-dates-separator {\n    margin: 0 15px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-dates .will-calendar-footer-booked {\n    display: flex;\n    min-height: 20.5px;\n    margin-top: 10px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-error {\n    display: flex;\n    max-width: 80%;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-error span {\n    display: inline-block;\n    margin-left: 10px;\n}\n\n@media (max-width: 960px) {\n    .will-root .will-calendar-wrapper {\n        width: -webkit-fill-available;\n        margin: 0 -6%;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-header,\n    .will-root .will-calendar-wrapper .will-calendar-main,\n    .will-root .will-calendar-wrapper .will-calendar-footer {\n        padding: 20px 10px;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-footer-actions-wrapper {\n        flex-direction: column;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-footer-dates  {\n        text-align: center;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-footer-dates .will-calendar-footer-booked {\n       justify-content: center;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-footer-actions {\n       flex-direction: column;\n       width: 100%;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-footer-actions button{\n        width: 100%;\n        margin-top: 10px;\n     }\n\n     .will-root .will-calendar-wrapper .will-calendar-footer-error {\n        max-width: 100%;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-footer-error span {\n        text-align: center;\n        margin-left: 5px;\n    }\n  }\n\n.will-root .will-calendar-wrapper .will-calendar-header .will-filter-bar-close-button {\n    position: initial;\n}";
@@ -12351,7 +12457,14 @@ function FilterCalendar(_a) {
     var filtersRef = useCloseFilterSection({
         handleSelectedFilter: setToggleCalendar,
     }).filtersRef;
-    return (jsx("div", { className: "will-root", style: themePalette, children: toggleCalendar && (jsxs("div", { className: "will-calendar-wrapper", ref: filtersRef, children: [jsxs("div", { className: "will-calendar-header", children: [jsx("h2", { children: t('filterBar:calendar.title') }), jsx(CloseButton, { handleClose: function () { return setToggleCalendar(false); } })] }), jsx("div", { className: "will-calendar-main", children: jsx(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange, calendarOffset: calendarOffset, selectedPath: '/rooms', language: language, disableCalendarDates: disableCalendarDates, requestDates: requestDates, disabledDates: disabledDates, updateCalendarMonthNavigation: updateCalendarMonthNavigation, setUpdateCalendarMonthNavigation: setUpdateCalendarMonthNavigation, updateCalendarDefaultMonth: updateCalendarDefaultMonth, loadingData: loadingData, showFeedback: showFeedback, noActiveSelection: noActiveSelection, palette: palette, setCalendarHasError: setCalendarHasError, setUpdatedForSubmit: setUpdatedForSubmit, rangeContext: rangeContext, calendarHasError: calendarHasError }) }), jsx("div", { className: "will-calendar-footer", children: jsx(Footer, { calendarHasError: calendarHasError, calendarRange: calendarRange, handleClearDates: handleClearDates, language: language, palette: palette }) })] })) }));
+    return (React__default.createElement("div", { className: "will-root", style: themePalette }, toggleCalendar && (React__default.createElement("div", { className: "will-calendar-wrapper", ref: filtersRef },
+        React__default.createElement("div", { className: "will-calendar-header" },
+            React__default.createElement("h2", null, t('filterBar:calendar.title')),
+            React__default.createElement(CloseButton, { handleClose: function () { return setToggleCalendar(false); } })),
+        React__default.createElement("div", { className: "will-calendar-main" },
+            React__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange, calendarOffset: calendarOffset, selectedPath: '/rooms', language: language, disableCalendarDates: disableCalendarDates, requestDates: requestDates, disabledDates: disabledDates, updateCalendarMonthNavigation: updateCalendarMonthNavigation, setUpdateCalendarMonthNavigation: setUpdateCalendarMonthNavigation, updateCalendarDefaultMonth: updateCalendarDefaultMonth, loadingData: loadingData, showFeedback: showFeedback, noActiveSelection: noActiveSelection, palette: palette, setCalendarHasError: setCalendarHasError, setUpdatedForSubmit: setUpdatedForSubmit, rangeContext: rangeContext, calendarHasError: calendarHasError })),
+        React__default.createElement("div", { className: "will-calendar-footer" },
+            React__default.createElement(Footer, { calendarHasError: calendarHasError, calendarRange: calendarRange, handleClearDates: handleClearDates, language: language, palette: palette }))))));
 }
 
 export { Button$1 as Button, FilterBar, FilterCalendar };