willba-component-library 0.3.14 → 0.3.16

package/lib/index.umd.js

@@ -213,8 +213,8 @@
       }
     }
 
-    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
@@ -225,440 +225,100 @@
         return (React.createElement("button", { type: "button", className: classNames('storybook-button', "storybook-button--".concat(size), "storybook-button--".concat(type)), style: textColor ? { color: textColor } : {}, onClick: onClick }, "".concat(label, " ").concat(theState)));
     };
 
-    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(React.useState(false), 2), initialRenderComplete = _a[0], setInitialRenderComplete = _a[1];
+        React.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 = React.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 = React.useRef();
-      React.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
-      } = React.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] = React.useState(getT);
-      let joinedNS = namespaces.join();
-      if (props.lng) joinedNS = `${props.lng}${joinedNS}`;
-      const previousJoinedNS = usePrevious(joinedNS);
-      const isMounted = React.useRef(true);
-      React.useEffect(() => {
-        const {
-          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 = React.useRef(true);
-      React.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.createContext && React.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.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.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.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.createElement("title", null, title), props.children);
-      };
-      return IconContext !== undefined ? React.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(React.useState(false), 2), initialRenderComplete = _a[0], setInitialRenderComplete = _a[1];
-        React.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
@@ -2723,96 +2383,355 @@
         instance.createInstance = I18n.createInstance;
         return instance;
       }
-      cloneInstance(options = {}, callback = noop) {
-        const forkResourceStore = options.forkResourceStore;
-        if (forkResourceStore) delete options.forkResourceStore;
-        const mergedOptions = {
-          ...this.options,
-          ...options,
-          ...{
-            isClone: true
+      cloneInstance(options = {}, callback = noop) {
+        const forkResourceStore = options.forkResourceStore;
+        if (forkResourceStore) delete options.forkResourceStore;
+        const mergedOptions = {
+          ...this.options,
+          ...options,
+          ...{
+            isClone: true
+          }
+        };
+        const clone = new I18n(mergedOptions);
+        if (options.debug !== undefined || options.prefix !== undefined) {
+          clone.logger = clone.logger.clone(options);
+        }
+        const membersToCopy = ['store', 'services', 'language'];
+        membersToCopy.forEach(m => {
+          clone[m] = this[m];
+        });
+        clone.services = {
+          ...this.services
+        };
+        clone.services.utils = {
+          hasLoadedNamespace: clone.hasLoadedNamespace.bind(clone)
+        };
+        if (forkResourceStore) {
+          const clonedData = Object.keys(this.store.data).reduce((prev, l) => {
+            prev[l] = {
+              ...this.store.data[l]
+            };
+            prev[l] = Object.keys(prev[l]).reduce((acc, n) => {
+              acc[n] = {
+                ...prev[l][n]
+              };
+              return acc;
+            }, prev[l]);
+            return prev;
+          }, {});
+          clone.store = new ResourceStore(clonedData, mergedOptions);
+          clone.services.resourceStore = clone.store;
+        }
+        if (options.interpolation) {
+          const defOpts = get();
+          const mergedInterpolation = {
+            ...defOpts.interpolation,
+            ...this.options.interpolation,
+            ...options.interpolation
+          };
+          const mergedForInterpolator = {
+            ...mergedOptions,
+            interpolation: mergedInterpolation
+          };
+          clone.services.interpolator = new Interpolator(mergedForInterpolator);
+        }
+        clone.translator = new Translator(clone.services, mergedOptions);
+        clone.translator.on('*', (event, ...args) => {
+          clone.emit(event, ...args);
+        });
+        clone.init(mergedOptions, callback);
+        clone.translator.options = mergedOptions;
+        clone.translator.backendConnector.services.utils = {
+          hasLoadedNamespace: clone.hasLoadedNamespace.bind(clone)
+        };
+        return clone;
+      }
+      toJSON() {
+        return {
+          options: this.options,
+          store: this.store,
+          language: this.language,
+          languages: this.languages,
+          resolvedLanguage: this.resolvedLanguage
+        };
+      }
+    }
+    const instance = I18n.createInstance();
+
+    instance.createInstance;
+    instance.dir;
+    instance.init;
+    instance.loadResources;
+    instance.reloadResources;
+    instance.use;
+    instance.changeLanguage;
+    instance.getFixedT;
+    instance.t;
+    instance.exists;
+    instance.setDefaultNamespace;
+    instance.hasLoadedNamespace;
+    instance.loadNamespaces;
+    instance.loadLanguages;
+
+    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 = React.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 = React.useRef();
+      React.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
+      } = React.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] = React.useState(getT);
+      let joinedNS = namespaces.join();
+      if (props.lng) joinedNS = `${props.lng}${joinedNS}`;
+      const previousJoinedNS = usePrevious(joinedNS);
+      const isMounted = React.useRef(true);
+      React.useEffect(() => {
+        const {
+          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);
+            });
           }
-        };
-        const clone = new I18n(mergedOptions);
-        if (options.debug !== undefined || options.prefix !== undefined) {
-          clone.logger = clone.logger.clone(options);
         }
-        const membersToCopy = ['store', 'services', 'language'];
-        membersToCopy.forEach(m => {
-          clone[m] = this[m];
-        });
-        clone.services = {
-          ...this.services
-        };
-        clone.services.utils = {
-          hasLoadedNamespace: clone.hasLoadedNamespace.bind(clone)
-        };
-        if (forkResourceStore) {
-          const clonedData = Object.keys(this.store.data).reduce((prev, l) => {
-            prev[l] = {
-              ...this.store.data[l]
-            };
-            prev[l] = Object.keys(prev[l]).reduce((acc, n) => {
-              acc[n] = {
-                ...prev[l][n]
-              };
-              return acc;
-            }, prev[l]);
-            return prev;
-          }, {});
-          clone.store = new ResourceStore(clonedData, mergedOptions);
-          clone.services.resourceStore = clone.store;
+        if (ready && previousJoinedNS && previousJoinedNS !== joinedNS && isMounted.current) {
+          setT(getT);
         }
-        if (options.interpolation) {
-          const defOpts = get();
-          const mergedInterpolation = {
-            ...defOpts.interpolation,
-            ...this.options.interpolation,
-            ...options.interpolation
-          };
-          const mergedForInterpolator = {
-            ...mergedOptions,
-            interpolation: mergedInterpolation
-          };
-          clone.services.interpolator = new Interpolator(mergedForInterpolator);
+        function boundReset() {
+          if (isMounted.current) setT(getT);
         }
-        clone.translator = new Translator(clone.services, mergedOptions);
-        clone.translator.on('*', (event, ...args) => {
-          clone.emit(event, ...args);
-        });
-        clone.init(mergedOptions, callback);
-        clone.translator.options = mergedOptions;
-        clone.translator.backendConnector.services.utils = {
-          hasLoadedNamespace: clone.hasLoadedNamespace.bind(clone)
-        };
-        return clone;
-      }
-      toJSON() {
-        return {
-          options: this.options,
-          store: this.store,
-          language: this.language,
-          languages: this.languages,
-          resolvedLanguage: this.resolvedLanguage
+        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 = React.useRef(true);
+      React.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());
+        }
+      });
     }
-    const instance = I18n.createInstance();
-
-    instance.createInstance;
-    instance.dir;
-    instance.init;
-    instance.loadResources;
-    instance.reloadResources;
-    instance.use;
-    instance.changeLanguage;
-    instance.getFixedT;
-    instance.t;
-    instance.exists;
-    instance.setDefaultNamespace;
-    instance.hasLoadedNamespace;
-    instance.loadNamespaces;
-    instance.loadLanguages;
 
     var locations$1 = {
     	label: "Location",
@@ -3020,28 +2939,134 @@
         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 (React.createElement("button", { className: "will-filter-bar-submit-button ".concat(variant || 'default'), onClick: onClick, disabled: disabled || isLoading },
-            isLoading ? (React.createElement("span", null, React.createElement(FaSpinner, { style: { animation: 'spin 1s linear infinite' } }))) : (startIcon && React.createElement("span", null, startIcon)),
-            label || 'Label'));
+    var SelectButton = React.forwardRef(function (_a, ref) {
+        var active = _a.active, label = _a.label, onClick = _a.onClick, description = _a.description, disabled = _a.disabled, ariaExpanded = _a.ariaExpanded, ariaControls = _a.ariaControls;
+        return (React.createElement("button", { ref: ref, className: "will-filter-bar-select-button ".concat(disabled ? 'disabled' : ''), onClick: function (e) { return (disabled ? undefined : onClick(e)); }, disabled: disabled, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, "aria-haspopup": "true", "aria-disabled": disabled },
+            React.createElement("span", { className: "select-button-wrapper" },
+                React.createElement("div", null,
+                    React.createElement("p", { className: "select-button-label" }, label),
+                    React.createElement("p", { className: "select-button-description ".concat(active ? 'active' : '') }, 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.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.createElement("div", { className: "will-filter-bar-divider" });
+    };
 
-    var CloseButton = function (_a) {
-        var handleClose = _a.handleClose;
-        return (React.createElement("button", { className: "will-filter-bar-close-button", onClick: handleClose },
-            React.createElement(IoIosCloseCircleOutline, null)));
+    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(React.useState(true), 2), isMobile = _b[0], setIsMobile = _b[1];
+        var targetFilterBarRef = React.useRef(null);
+        React.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(React.useState(Pages.EVENTS), 2), selectedPath = _b[0], setSelectedPath = _b[1];
+        var _c = __read(React.useState(false), 2), selectedFilter = _c[0], setSelectedFilter = _c[1];
+        var _d = __read(React.useState(), 2), calendarRange = _d[0], setCalendarRange = _d[1];
+        var _e = __read(React.useState(false), 2), innerLoading = _e[0], setInnerLoading = _e[1];
+        var _f = __read(React.useState(0), 2), categories = _f[0], setCategories = _f[1];
+        var _g = __read(React.useState({}), 2), ageCategoryCounts = _g[0], setAgeCategoryCounts = _g[1];
+        var _h = __read(React.useState([]), 2), selectedLocations = _h[0], setSelectedLocations = _h[1];
+        React.useEffect(function () {
+            var _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) {
@@ -6625,37 +6650,379 @@
       return date;
     }
 
-    /**
-     * @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);
+    /**
+     * @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);
+
+      // 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.createElement(React.Fragment, null,
+                React.createElement("span", { className: "will-guest-count" }, parsedData.total),
+                ' ',
+                parsedData.total > 1 ? guestsLabel : guestLabel,
+                breakdown && React.createElement(React.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;
+        React.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 = React.useRef({});
+        var panelRef = React.useRef(null);
+        var previouslyFocusedButtonRef = React.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(React.useState({}), 2), localStyles = _b[0], setLocalStyles = _b[1];
+        React.useLayoutEffect(function () {
+            if (!selectedFilter || typeof selectedFilter !== 'string' || isMobile) {
+                setLocalStyles({});
+                return;
+            }
+            var panel = panelRef.current;
+            var container = targetFilterBarRef.current;
+            var button = buttonRefs.current[selectedFilter];
+            if (!panel || !container || !button)
+                return;
+            var panelRect = panel.getBoundingClientRect();
+            var containerRect = container.getBoundingClientRect();
+            var buttonRect = button.getBoundingClientRect();
+            var buttonLeft = buttonRect.left - containerRect.left;
+            var left = Math.max(0, Math.min(buttonLeft, containerRect.width - panelRect.width));
+            setLocalStyles({ left: left });
+        }, [selectedFilter, isMobile]);
+        return { localStyles: localStyles };
+    };
+
+    var FilterBarContext = React.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 = React.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.createElement(FilterBarContext.Provider, { value: contextValue }, children));
+    };
+    var useFilterBar = function () {
+        var context = React.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.createContext && React.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.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.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.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.createElement("title", null, title), props.children);
+      };
+      return IconContext !== undefined ? React.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);
+    }
+
+    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);
+
+    var SubmitButton = function (_a) {
+        var onClick = _a.onClick, startIcon = _a.startIcon, label = _a.label, disabled = _a.disabled, isLoading = _a.isLoading, variant = _a.variant;
+        return (React.createElement("button", { className: "will-filter-bar-submit-button ".concat(variant || 'default'), onClick: onClick, disabled: disabled || isLoading },
+            isLoading ? (React.createElement("span", null, React.createElement(FaSpinner, { style: { animation: 'spin 1s linear infinite' } }))) : (startIcon && React.createElement("span", null, startIcon)),
+            label || 'Label'));
+    };
 
-      // 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;
+    // 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.createElement("button", { className: "will-filter-bar-close-button", onClick: handleClose },
+            React.createElement(IoIosCloseCircleOutline, null)));
+    };
+
     function futureSeconds(text) {
       return text.replace(/sekuntia?/, 'sekunnin');
     }
@@ -11498,11 +11865,11 @@
         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$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$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 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 = React.forwardRef(function (_a, ref) {
         var _b;
@@ -11572,413 +11939,100 @@
                 // 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 (React.createElement("div", { className: "will-filter-bar-calendar", ref: ref },
-            React.createElement("div", { className: "will-calendar-filter-container", ref: calendarContainerRef },
-                React.createElement(DayPicker, { key: updateCalendarDefaultMonth, id: "will-calendar", mode: "range", locale: language === 'en' ? enUS : fi, numberOfMonths: !isTablet ? 2 : 1, weekStartsOn: 1, selected: calendarRange, onSelect: function (range) { return handleOnSelect(range); }, captionLayout: "dropdown-buttons", defaultMonth: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) ||
-                        selectedStartDate ||
-                        rangeContextStartDate ||
-                        (((_b = newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.disabledDates) === null || _b === void 0 ? void 0 : _b.length)
-                            ? newDisableCalendarDates.disabledDates[0].from
-                            : today), disabled: disabled, fromMonth: today, onMonthChange: function (val) {
-                        requestDates === null || requestDates === void 0 ? void 0 : requestDates(val);
-                        setUpdateCalendarMonthNavigation === null || setUpdateCalendarMonthNavigation === void 0 ? void 0 : setUpdateCalendarMonthNavigation(function (prev) { return !prev; });
-                    }, classNames: {
-                        day_range_start: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) ? 'rdp-day_range_start' : '',
-                        day_range_end: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) ? 'rdp-day_range_end' : '',
-                    }, modifiersClassNames: {
-                        today: 'my-today',
-                        booked: 'booked',
-                        disabledAfterCheckIn: 'disabled-after-check-in',
-                        overlappingDate: 'overlapping-date',
-                        noActiveSelectionStart: 'no-active-selection-start',
-                        noActiveSelectionMid: 'no-active-selection-mid',
-                        noActiveSelectionEnd: 'no-active-selection-end',
-                        checkoutOptionsMid: 'rdp-day_selected rdp-day_range_middle checkout-option',
-                        checkInOnly: 'check-in-only',
-                        checkOutOnly: 'check-out-only',
-                    }, modifiers: 
-                    // This function handles conditions for applying the modifiersClassNames
-                    handleCalendarModifiers({
-                        calendarRange: calendarRange,
-                        disabledDates: disabled,
-                        overlappingDate: overlappingDate,
-                        rangeContext: rangeContext,
-                        findFirstPossibleRangeContextCheckIn: findFirstPossibleRangeContextCheckIn,
-                        findLastPossibleRangeContextCheckOut: findLastPossibleRangeContextCheckOut,
-                        currentSelectionLastCheckoutDate: currentSelectionAvailability,
-                    }) }),
-                React.createElement("div", { className: 'will-calendar-tooltip' },
-                    React.createElement("div", null, t('noCheckIn'))),
-                React.createElement("div", { className: 'will-calendar-tooltip-check-out' },
-                    React.createElement("div", null, t('noCheckOut'))),
-                React.createElement("div", { className: 'will-calendar-tooltip-overlapping-date' },
-                    React.createElement("div", null, t('checkOutOnly'))),
-                React.createElement("div", { className: 'will-calendar-tooltip-check-in-only' },
-                    React.createElement("div", null, t('checkInOnly'))),
-                React.createElement("div", { className: 'will-calendar-tooltip-check-out-only' },
-                    React.createElement("div", null, t('checkOutOnly'))),
-                React.createElement("div", { className: 'will-calendar-spinner' },
-                    React.createElement(IconsSvg, { fill: (palette === null || palette === void 0 ? void 0 : palette.primary) || 'inherit', size: 50, icon: "spinner" })))));
-    });
-
-    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),
-                };
-            }
-            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;
-            }
-            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;
-        if (isMobile) {
-            return {};
-        }
-        if (!headerRef.current)
-            return {};
-        var containerRect = headerRef.current.getBoundingClientRect();
-        var containerLeft = 0;
-        switch (filterSection) {
-            case FilterSections.LOCATIONS:
-                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:
-                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) {
-                        return {
-                            left: 'auto',
-                            right: containerLeft,
-                            width: 'auto',
-                            maxWidth: "".concat(containerRect.width, "px"),
-                        };
-                    }
-                    else {
-                        return {
-                            left: relativeLeft,
-                            right: 'auto',
-                            width: 'auto',
-                        };
-                    }
-                }
-                break;
-            case FilterSections.GUESTS:
-                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) {
-                        return {
-                            left: 'auto',
-                            right: containerLeft,
-                            width: 'auto',
-                            maxWidth: "".concat(containerRect.width, "px"),
-                        };
-                    }
-                    else {
-                        return {
-                            left: relativeLeft,
-                            right: 'auto',
-                            width: 'auto',
-                        };
-                    }
-                }
-                break;
-            default:
-                return {};
-        }
-        return {};
-    };
-
-    var useFilterBar = function (_a) {
-        var redirectUrl = _a.redirectUrl, ageCategories = _a.ageCategories, onSubmit = _a.onSubmit, tabs = _a.tabs, locations = _a.locations;
-        var _b = __read(React.useState(Pages.EVENTS), 2), selectedPath = _b[0], setSelectedPath = _b[1];
-        var _c = __read(React.useState(false), 2), selectedFilter = _c[0], setSelectedFilter = _c[1];
-        var _d = __read(React.useState(), 2), calendarRange = _d[0], setCalendarRange = _d[1];
-        var _e = __read(React.useState(false), 2), innerLoading = _e[0], setInnerLoading = _e[1];
-        var _f = __read(React.useState(0), 2), categories = _f[0], setCategories = _f[1];
-        var _g = __read(React.useState({}), 2), ageCategoryCounts = _g[0], setAgeCategoryCounts = _g[1];
-        var _h = __read(React.useState([]), 2), selectedLocations = _h[0], setSelectedLocations = _h[1];
-        React.useEffect(function () {
-            var _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),
-                });
-            }
-            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());
-                });
-                setSelectedLocations(matchedLocations);
-            }
-        }, []);
-        React.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());
-                        }
-                    }
-                }
-            }
-            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; }
-            }
-            handleSelectedFilter(false);
-            if (onSubmit && window.location.href.includes(selectedPath)) {
-                onSubmit(newParams);
-            }
-            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;
+                return [];
             }
+            // Disable dates between current check-in and first possible check-out
+            return [
+                {
+                    from: addDays(currentSelectionAvailability.checkIn, 1),
+                    to: addDays(currentSelectionAvailability.firstCheckOut, -1),
+                },
+            ];
         };
-        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;
-                    }
-                }
-            });
-        }
-        return Object.entries(ageCategoryCounts).length
-            ? JSON.stringify(ageCategoryCounts)
-            : '';
-    };
+        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.createElement("div", { className: "will-filter-bar-calendar", ref: ref },
+            React.createElement("div", { className: "will-calendar-filter-container", ref: calendarContainerRef },
+                React.createElement(DayPicker, { key: updateCalendarDefaultMonth, id: "will-calendar", mode: "range", locale: language === 'en' ? enUS : fi, numberOfMonths: !isTablet ? 2 : 1, weekStartsOn: 1, selected: calendarRange, onSelect: function (range) { return handleOnSelect(range); }, captionLayout: "dropdown-buttons", defaultMonth: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) ||
+                        selectedStartDate ||
+                        rangeContextStartDate ||
+                        (((_b = newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.disabledDates) === null || _b === void 0 ? void 0 : _b.length)
+                            ? newDisableCalendarDates.disabledDates[0].from
+                            : today), disabled: disabled, fromMonth: today, onMonthChange: function (val) {
+                        requestDates === null || requestDates === void 0 ? void 0 : requestDates(val);
+                        setUpdateCalendarMonthNavigation === null || setUpdateCalendarMonthNavigation === void 0 ? void 0 : setUpdateCalendarMonthNavigation(function (prev) { return !prev; });
+                    }, classNames: {
+                        day_range_start: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) ? 'rdp-day_range_start' : '',
+                        day_range_end: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) ? 'rdp-day_range_end' : '',
+                    }, modifiersClassNames: {
+                        today: 'my-today',
+                        booked: 'booked',
+                        disabledAfterCheckIn: 'disabled-after-check-in',
+                        overlappingDate: 'overlapping-date',
+                        noActiveSelectionStart: 'no-active-selection-start',
+                        noActiveSelectionMid: 'no-active-selection-mid',
+                        noActiveSelectionEnd: 'no-active-selection-end',
+                        checkoutOptionsMid: 'rdp-day_selected rdp-day_range_middle checkout-option',
+                        checkInOnly: 'check-in-only',
+                        checkOutOnly: 'check-out-only',
+                    }, modifiers: 
+                    // This function handles conditions for applying the modifiersClassNames
+                    handleCalendarModifiers({
+                        calendarRange: calendarRange,
+                        disabledDates: disabled,
+                        overlappingDate: overlappingDate,
+                        rangeContext: rangeContext,
+                        findFirstPossibleRangeContextCheckIn: findFirstPossibleRangeContextCheckIn,
+                        findLastPossibleRangeContextCheckOut: findLastPossibleRangeContextCheckOut,
+                        currentSelectionLastCheckoutDate: currentSelectionAvailability,
+                    }) }),
+                React.createElement("div", { className: 'will-calendar-tooltip' },
+                    React.createElement("div", null, t('noCheckIn'))),
+                React.createElement("div", { className: 'will-calendar-tooltip-check-out' },
+                    React.createElement("div", null, t('noCheckOut'))),
+                React.createElement("div", { className: 'will-calendar-tooltip-overlapping-date' },
+                    React.createElement("div", null, t('checkOutOnly'))),
+                React.createElement("div", { className: 'will-calendar-tooltip-check-in-only' },
+                    React.createElement("div", null, t('checkInOnly'))),
+                React.createElement("div", { className: 'will-calendar-tooltip-check-out-only' },
+                    React.createElement("div", null, t('checkOutOnly'))),
+                React.createElement("div", { className: 'will-calendar-spinner' },
+                    React.createElement(IconsSvg, { fill: (palette === null || palette === void 0 ? void 0 : palette.primary) || 'inherit', size: 50, icon: "spinner" })))));
+    });
 
-    var useScrollInToView = function (_a) {
-        var selectedFilter = _a.selectedFilter;
-        var _b = __read(React.useState(true), 2), isMobile = _b[0], setIsMobile = _b[1];
-        var targetFilterBarRef = React.useRef(null);
-        React.useEffect(function () {
-            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 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.createElement("div", { className: "will-filter-section-header" },
+            React.createElement("h3", { className: "will-filter-section-title" }, title),
+            action && React.createElement("div", { className: "will-filter-section-action" }, action)));
     };
 
-    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 16px 16px;\n}\n";
     styleInject(css_248z$b);
 
-    var SelectButton = React.forwardRef(function (_a, ref) {
-        var active = _a.active, label = _a.label, onClick = _a.onClick, description = _a.description, disabled = _a.disabled, ariaExpanded = _a.ariaExpanded, ariaControls = _a.ariaControls;
-        return (React.createElement("button", { ref: ref, className: "will-filter-bar-select-button ".concat(disabled ? 'disabled' : ''), onClick: disabled ? undefined : onClick, disabled: disabled, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, "aria-haspopup": "true", "aria-disabled": disabled },
-            React.createElement("span", { className: "select-button-wrapper" },
-                React.createElement("div", null,
-                    React.createElement("p", { className: "select-button-label" }, label),
-                    React.createElement("p", { className: "select-button-description ".concat(active ? 'active' : ''), dangerouslySetInnerHTML: { __html: description } })))));
+    var Dates = React.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.createElement("div", { id: "will-filter-bar-dates", ref: ref },
+            React.createElement(SectionHeader, { title: '', action: onClose && React.createElement(CloseButton, { handleClose: onClose }) }),
+            React.createElement("div", { className: "will-dates-filter-container" },
+                React.createElement(Calendar, { autoFocus: autoFocus, calendarRange: calendarRange, setCalendarRange: setCalendarRange, disableCalendarDates: disableCalendarDates, selectedPath: selectedPath, language: language }))));
     });
-    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 (React.createElement("button", { className: "will-filter-bar-tab-button ".concat(mode || 'light', " ").concat(active && 'active', " "), onClick: onClick }, label));
-    };
-
-    var css_248z$9 = ".will-guests-filter-label,\n.will-guests-filter-count {\n  font-size: 18px;\n  color: var(--will-text);\n}\n\n.will-guests-filter-inner {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.will-guests-filter-label {\n  display: block;\n  font-weight: 600;\n  margin-bottom: 10px;\n}\n\n.will-guests-filter-inner .will-guests-filter-counter {\n  display: flex;\n  align-items: center;\n}\n\n.will-guests-filter-count {\n  margin: 0 10px;\n  min-width: 30px;\n  text-align: center;\n}\n\n.will-guests-filter-counter-button {\n  border-radius: 50%;\n  background-color: transparent;\n  border: 1px solid var(--will-grey);\n  width: 30px;\n  height: 30px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 20px;\n  cursor: pointer;\n  color: var(--will-black);\n\n  padding: 0;\n  margin: 0;\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n.will-guests-filter-counter-button:hover {\n  background-color: var(--will-onahau);\n}\n\n@media (max-width: 960px) {\n  .will-guests-filter-inner {\n    width: 100%;\n    margin: 15px 0;\n    justify-content: space-between;\n  }\n}\n";
-    styleInject(css_248z$9);
-
     var GuestCount = function (_a) {
         var label = _a.label, sortOrder = _a.sortOrder, id = _a.id, updateGuestsCount = _a.updateGuestsCount, count = _a.count, minVal = _a.minVal;
         React.useEffect(function () {
@@ -12010,65 +12064,21 @@
                         React.createElement("path", { d: "M10 4V16M4 10H16", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }))))));
     };
 
-    var css_248z$8 = ".will-filter-section-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px;\n}\n\n.will-filter-section-title {\n  font-size: 22px;\n  margin: 0;\n}\n\n.will-filter-section-action {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.will-filter-section-action .will-filter-bar-close-button {\n  position: relative;\n  top: auto;\n  right: auto;\n  margin: 0;\n}\n\n@media (max-width: 960px) {\n  .will-filter-section-title {\n    font-size: 18px;\n  }\n}\n";
-    styleInject(css_248z$8);
-
-    var FilterSectionHeader = function (_a) {
-        var title = _a.title, action = _a.action;
-        return (React.createElement("div", { className: "will-filter-section-header" },
-            React.createElement("h3", { className: "will-filter-section-title" }, title),
-            action && React.createElement("div", { className: "will-filter-section-action" }, action)));
-    };
-
-    var css_248z$7 = ".will-filter-bar-guests {\n  text-align: initial;\n}\n\n.will-guests-filter-container {\n  display: flex;\n  flex-direction: column;\n  min-width: 400px;\n  gap: 20px;\n  padding: 16px;\n}\n\n@media (max-width: 960px) {\n  .will-guests-filter-container {\n    margin-top: 15px;\n    min-width: 100%;\n  }\n}\n";
-    styleInject(css_248z$7);
+    var 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: 0 16px 16px 16px;\n}\n\n@media (max-width: 960px) {\n  .will-guests-filter-container {\n    min-width: auto;\n  }\n}\n\n/**/\n.will-guest-count {\n  display: inline-block;\n  min-width: 10px;\n}\n";
+    styleInject(css_248z$9);
 
     var Guests = React.forwardRef(function (_a, ref) {
         var ageCategories = _a.ageCategories, updateGuestsCount = _a.updateGuestsCount, ageCategoryCounts = _a.ageCategoryCounts, autoFocus = _a.autoFocus, onClose = _a.onClose;
         var t = useTranslation('filterBar').t;
         var containerRef = useAutoFocus(autoFocus);
-        return (React.createElement("div", { className: "will-filter-bar-guests", ref: ref },
-            React.createElement(FilterSectionHeader, { title: t('guests.title'), action: onClose && React.createElement(CloseButton, { handleClose: onClose }) }),
+        return (React.createElement("div", { id: "will-filter-bar-guests", ref: ref },
+            React.createElement(SectionHeader, { title: t('guests.title'), action: onClose && React.createElement(CloseButton, { handleClose: onClose }) }),
             React.createElement("div", { className: "will-guests-filter-container", ref: containerRef }, ageCategories === null || ageCategories === void 0 ? void 0 : ageCategories.map(function (category) { return (React.createElement(GuestCount, { key: category.id, id: category.id, label: category.name, minVal: category.minVal, sortOrder: category.sortOrder, updateGuestsCount: updateGuestsCount, count: ageCategoryCounts["guests-".concat(category.id)] || 0 })); }))));
     });
     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 React.createElement("div", { className: "will-filter-bar-divider" });
-    };
-
-    var css_248z$5 = ".will-filter-bar-categories {\n  text-align: center;\n}\n\n.will-categories-filter-title {\n  font-size: 16px;\n  text-transform: uppercase;\n  margin: 10px 0 30px 0;\n}\n\n.will-categories-filter-inner {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 20px;\n}\n\n.will-categories-filter-inner input {\n  cursor: pointer;\n  margin-right: 10px;\n}\n";
-    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(React.useState(''), 2), selectedCategory = _b[0], setSelectedCategory = _b[1];
-        var handleCategoryChange = function (selectedCategory) {
-            setSelectedCategory(selectedCategory);
-            setCategories(selectedCategory);
-        };
-        return (React.createElement("div", { className: "will-filter-bar-categories" },
-            React.createElement("h3", { className: "will-categories-filter-title" }, t('categories.label')),
-            React.createElement("div", { className: "will-categories-filter-inner" }, categoriesPlaceholder.map(function (itm, idx) { return (React.createElement("div", { key: idx },
-                React.createElement("input", { type: "radio", value: itm, checked: selectedCategory === itm, onChange: function () { return handleCategoryChange(itm); } }),
-                React.createElement("span", null, itm))); }))));
-    };
-
-    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 = React.forwardRef(function (_a, ref) {
         var title = _a.title, description = _a.description, imageUrl = _a.imageUrl, isSelected = _a.isSelected, onClick = _a.onClick;
@@ -12086,6 +12096,9 @@
     });
     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  flex-direction: column;\n  min-width: 400px;\n  padding-bottom: 16px;\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 = React.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;
@@ -12114,8 +12127,8 @@
                 onClose === null || onClose === void 0 ? void 0 : onClose();
             }
         };
-        return (React.createElement("div", { className: "will-filter-bar-locations", ref: ref },
-            React.createElement(FilterSectionHeader, { title: t('locations.title'), action: onClose && React.createElement(CloseButton, { handleClose: onClose }) }),
+        return (React.createElement("div", { id: "will-filter-bar-locations", ref: ref },
+            React.createElement(SectionHeader, { title: t('locations.title'), action: onClose && React.createElement(CloseButton, { handleClose: onClose }) }),
             React.createElement("div", { className: "will-locations-filter-container" }, !!((locations === null || locations === void 0 ? void 0 : locations.length) && language) &&
                 locations.map(function (location, index) {
                     return (React.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); } }));
@@ -12123,63 +12136,75 @@
     });
     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(React.useState(''), 2), selectedCategory = _b[0], setSelectedCategory = _b[1];
+        var handleCategoryChange = function (selectedCategory) {
+            setSelectedCategory(selectedCategory);
+            setCategories(selectedCategory);
+        };
+        return (React.createElement("div", { id: "will-filter-bar-categories" },
+            React.createElement("h3", { className: "will-categories-filter-title" }, t('categories.label')),
+            React.createElement("div", { className: "will-categories-filter-inner" }, categoriesPlaceholder.map(function (itm, idx) { return (React.createElement("div", { key: idx },
+                React.createElement("input", { type: "radio", value: itm, checked: selectedCategory === itm, onChange: function () { return handleCategoryChange(itm); } }),
+                React.createElement("span", null, itm))); }))));
+    };
+    Categories.displayName = 'Categories';
 
-    var Dates = React.forwardRef(function (_a, ref) {
-        var onClose = _a.onClose, autoFocus = _a.autoFocus, calendarRange = _a.calendarRange, setCalendarRange = _a.setCalendarRange, disableCalendarDates = _a.disableCalendarDates, selectedPath = _a.selectedPath, language = _a.language, filtersRef = _a.filtersRef;
-        return (React.createElement("div", { className: "will-filter-bar-dates", ref: ref },
-            React.createElement(FilterSectionHeader, { title: '', action: onClose && React.createElement(CloseButton, { handleClose: onClose }) }),
-            React.createElement("div", { className: "will-dates-filter-container" },
-                React.createElement(Calendar, { autoFocus: autoFocus, calendarRange: calendarRange, setCalendarRange: setCalendarRange, disableCalendarDates: disableCalendarDates, selectedPath: selectedPath, language: language, ref: filtersRef }))));
-    });
-    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 = React.useRef(null);
-        var datesButtonRef = React.useRef(null);
-        var guestsButtonRef = React.useRef(null);
-        var previouslyFocusedButtonRef = React.useRef(null);
-        var headerRef = React.useRef(null);
-        // Dropdown positioning
-        var _f = __read(React.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.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.createElement(Guests, { autoFocus: true, ref: filtersRef, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts, updateGuestsCount: updateGuestsCount, onClose: function () { return handleSelectedFilter(false); } }));
+                case FilterSections.CATEGORIES:
+                    return (React.createElement(Categories, { categories: categories, setCategories: setCategories }));
+                case FilterSections.LOCATIONS:
+                    return (React.createElement(Locations, { autoFocus: true, ref: filtersRef, locations: locations === null || locations === void 0 ? void 0 : locations.data, language: language, selectedLocations: selectedLocations, setSelectedLocations: setSelectedLocations, multiSelect: locations === null || locations === void 0 ? void 0 : locations.multiSelect, onClose: function () { return handleSelectedFilter(false); } }));
+                default:
+                    return null;
             }
-            handleSelectedFilter(filter);
         };
+        return (selectedFilter && (React.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
         React.useEffect(function () {
             if (!selectedFilter && previouslyFocusedButtonRef.current) {
@@ -12187,8 +12212,6 @@
                 previouslyFocusedButtonRef.current = null;
             }
         }, [selectedFilter]);
-        // Display component after fully loaded
-        useAwaitRender();
         // Parsed data for filter section description
         var parsedDates = parseDates({ calendarRange: calendarRange });
         var parsedGuests = parseGuests({
@@ -12203,66 +12226,68 @@
             locationsPlaceholder: t('locations.placeholder'),
             locationsSelectedLabel: t('locations.selected'),
         });
-        return (React.createElement("div", { className: "will-root ".concat(fullWidth ? 'is-full-width' : ''), style: themePalette },
-            tabs && tabs.length > 1 && (React.createElement("div", { className: "will-filter-bar-tabs", ref: targetFilterBarRef }, tabs
-                .sort(function (a, b) { return a.order - b.order; })
-                .map(function (tab, idx) { return (React.createElement(TabButton, { key: "tab-".concat(idx), label: tab.label || t("tabs.".concat(tab.path.substring(1))), onClick: function () {
-                    setSelectedPath(tab.path);
-                    handleResetFilters();
-                    handleSelectedFilter(false);
-                }, active: selectedPath === tab.path, mode: mode })); }))),
-            React.createElement("div", { className: "will-filter-bar-header ".concat(mode || 'light'), ref: function (el) {
-                    headerRef.current = el;
-                    if ((tabs === null || tabs === void 0 ? void 0 : tabs.length) === 1 && targetFilterBarRef) {
-                        targetFilterBarRef.current = el;
-                    }
-                } },
-                !!((_b = locations === null || locations === void 0 ? void 0 : locations.data) === null || _b === void 0 ? void 0 : _b.length) && (React.createElement(React.Fragment, null,
-                    React.createElement(SelectButton, { ref: locationsButtonRef, label: t('locations.label'), description: parsedLocations, onClick: function () {
-                            previouslyFocusedButtonRef.current = locationsButtonRef.current;
-                            handleSelectedFilterWithPosition(FilterSections.LOCATIONS);
-                        }, active: !!selectedLocations.length, disabled: locations === null || locations === void 0 ? void 0 : locations.disabled, ariaExpanded: selectedFilter === FilterSections.LOCATIONS, ariaControls: "will-locations-filter" }),
-                    React.createElement(Divider, null))),
-                React.createElement(SelectButton, { ref: datesButtonRef, label: t('calendar.label'), description: parsedDates
-                        ? parsedDates
-                        : selectedPath === Pages.ROOMS
-                            ? t('calendar.roomsLabelPlaceholder')
-                            : t('calendar.eventsLabelPlaceholder'), onClick: function () {
-                        previouslyFocusedButtonRef.current = datesButtonRef.current;
-                        handleSelectedFilterWithPosition(FilterSections.CALENDAR);
-                    }, active: !!parsedDates, ariaExpanded: selectedFilter === FilterSections.CALENDAR, ariaControls: "will-calendar-filter" }),
-                selectedPath !== Pages.EVENTS && (React.createElement(React.Fragment, null,
-                    React.createElement(Divider, null),
-                    React.createElement(SelectButton, { ref: guestsButtonRef, label: t('guests.label'), description: parsedGuests.content, onClick: function () {
-                            previouslyFocusedButtonRef.current = guestsButtonRef.current;
-                            handleSelectedFilterWithPosition(FilterSections.GUESTS);
-                        }, active: !!parsedGuests.data.total, ariaExpanded: selectedFilter === FilterSections.GUESTS, ariaControls: "will-guests-filter" }))),
-                React.createElement(SubmitButton, { onClick: handleSubmit, startIcon: React.createElement(FaSearch, null), label: t('common:search'), isLoading: innerLoading || outerLoading })),
-            selectedFilter && (React.createElement("div", { className: "will-filter-bar-container ".concat(mode || 'light'), style: __assign$2(__assign$2({}, ((!tabs || tabs.length < 2) && !isMobile ? { top: 66 } : {})), dropdownStyle) },
-                selectedFilter === FilterSections.CALENDAR && (React.createElement("div", { id: "will-dates-filter" },
-                    React.createElement(Dates, { autoFocus: true, ref: filtersRef, onClose: function () { return handleSelectedFilter(false); }, calendarRange: calendarRange, setCalendarRange: setCalendarRange, disableCalendarDates: disableCalendarDates, selectedPath: selectedPath, language: language, filtersRef: filtersRef }))),
-                selectedFilter === FilterSections.GUESTS && (React.createElement("div", { id: "will-guests-filter" },
-                    React.createElement(Guests, { updateGuestsCount: updateGuestsCount, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts, ref: filtersRef, autoFocus: true, onClose: function () { return handleSelectedFilter(false); } }))),
-                selectedFilter === FilterSections.CATEGORIES && (React.createElement("div", { id: "will-categories-filter" },
-                    React.createElement(Categories, { categories: categories, setCategories: setCategories }))),
-                selectedFilter === FilterSections.LOCATIONS && (React.createElement("div", { id: "will-locations-filter" },
-                    React.createElement(Locations, { autoFocus: true, ref: filtersRef, locations: locations === null || locations === void 0 ? void 0 : locations.data, language: language, selectedLocations: selectedLocations, setSelectedLocations: setSelectedLocations, multiSelect: locations === null || locations === void 0 ? void 0 : locations.multiSelect, onClose: function () { return handleSelectedFilter(false); } })))))));
-    }
+        return (React.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.createElement(React.Fragment, null,
+                React.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.createElement(Divider, null))),
+            React.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.createElement(React.Fragment, null,
+                React.createElement(Divider, null),
+                React.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.createElement(SubmitButton, { onClick: handleSubmit, startIcon: React.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.createElement("div", { className: "will-filter-bar-tabs", ref: targetFilterBarRef }, tabs
+            .sort(function (a, b) { return a.order - b.order; })
+            .map(function (tab, idx) { return (React.createElement(TabButton, { key: "tab-".concat(idx), label: tab.label || 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.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.createElement("div", { className: "will-root ".concat(fullWidth ? 'is-full-width' : ''), style: themePalette },
+                React.createElement(FilterTabs, null),
+                React.createElement(FilterControls, null),
+                React.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';