willba-component-library 0.1.28 → 0.1.29

package/lib/index.js

@@ -3,24 +3,86 @@
 var React__default = require('react');
 
 function _interopNamespaceDefault(e) {
-	var n = Object.create(null);
-	if (e) {
-		Object.keys(e).forEach(function (k) {
-			if (k !== 'default') {
-				var d = Object.getOwnPropertyDescriptor(e, k);
-				Object.defineProperty(n, k, d.get ? d : {
-					enumerable: true,
-					get: function () { return e[k]; }
-				});
-			}
-		});
-	}
-	n.default = e;
-	return Object.freeze(n);
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
 }
 
 var React__default__namespace = /*#__PURE__*/_interopNamespaceDefault(React__default);
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
+
+var __assign$2 = function() {
+    __assign$2 = Object.assign || function __assign(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$2.apply(this, arguments);
+};
+
+function __values(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+}
+
+function __read(o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 function getDefaultExportFromCjs (x) {
@@ -124,7 +186,7 @@ styleInject(css_248z$c);
  */
 var Button$1 = function (_a) {
     var _b = _a.type, type = _b === void 0 ? "primary" : _b, textColor = _a.textColor, _c = _a.size, size = _c === void 0 ? "medium" : _c, onClick = _a.onClick, label = _a.label;
-    var _d = React__default.useState(4), theState = _d[0]; _d[1];
+    var _d = __read(React__default.useState(4), 2), theState = _d[0]; _d[1];
     return (React__default.createElement("button", { type: "button", className: classNames("storybook-button", "storybook-button--".concat(size), "storybook-button--".concat(type)), style: textColor ? { color: textColor } : {}, onClick: onClick }, "".concat(label, " ").concat(theState)));
 };
 
@@ -420,15 +482,15 @@ var DefaultContext = {
 };
 var IconContext = React__default.createContext && React__default.createContext(DefaultContext);
 
-var __assign$2 = undefined && undefined.__assign || function () {
-  __assign$2 = Object.assign || function (t) {
+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$2.apply(this, arguments);
+  return __assign$1.apply(this, arguments);
 };
 var __rest$1 = undefined && undefined.__rest || function (s, e) {
   var t = {};
@@ -440,7 +502,7 @@ var __rest$1 = undefined && undefined.__rest || function (s, e) {
 };
 function Tree2Element(tree) {
   return tree && tree.map(function (node, i) {
-    return React__default.createElement(node.tag, __assign$2({
+    return React__default.createElement(node.tag, __assign$1({
       key: i
     }, node.attr), Tree2Element(node.child));
   });
@@ -448,8 +510,8 @@ function Tree2Element(tree) {
 function GenIcon(data) {
   // eslint-disable-next-line react/display-name
   return function (props) {
-    return React__default.createElement(IconBase, __assign$2({
-      attr: __assign$2({}, data.attr)
+    return React__default.createElement(IconBase, __assign$1({
+      attr: __assign$1({}, data.attr)
     }, props), Tree2Element(data.child));
   };
 }
@@ -463,13 +525,13 @@ function IconBase(props) {
     var className;
     if (conf.className) className = conf.className;
     if (props.className) className = (className ? className + " " : "") + props.className;
-    return React__default.createElement("svg", __assign$2({
+    return React__default.createElement("svg", __assign$1({
       stroke: "currentColor",
       fill: "currentColor",
       strokeWidth: "0"
     }, conf.attr, attr, svgProps, {
       className: className,
-      style: __assign$2(__assign$2({
+      style: __assign$1(__assign$1({
         color: props.color || conf.color
       }, conf.style), props.style),
       height: computedSize,
@@ -3954,15 +4016,15 @@ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
 
-var __assign$1 = function() {
-    __assign$1 = Object.assign || function __assign(t) {
+var __assign = function() {
+    __assign = Object.assign || function __assign(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);
+    return __assign.apply(this, arguments);
 };
 
 function __rest(s, e) {
@@ -4244,7 +4306,7 @@ function DayPickerProvider(props) {
         isDayPickerRange(initialProps)) {
         onSelect = initialProps.onSelect;
     }
-    var value = __assign$1(__assign$1(__assign$1({}, defaultContextValues), initialProps), { captionLayout: captionLayout, classNames: __assign$1(__assign$1({}, defaultContextValues.classNames), initialProps.classNames), components: __assign$1({}, initialProps.components), formatters: __assign$1(__assign$1({}, defaultContextValues.formatters), initialProps.formatters), fromDate: fromDate, labels: __assign$1(__assign$1({}, defaultContextValues.labels), initialProps.labels), mode: initialProps.mode || defaultContextValues.mode, modifiers: __assign$1(__assign$1({}, defaultContextValues.modifiers), initialProps.modifiers), modifiersClassNames: __assign$1(__assign$1({}, defaultContextValues.modifiersClassNames), initialProps.modifiersClassNames), onSelect: onSelect, styles: __assign$1(__assign$1({}, defaultContextValues.styles), initialProps.styles), toDate: toDate });
+    var value = __assign(__assign(__assign({}, defaultContextValues), initialProps), { captionLayout: captionLayout, classNames: __assign(__assign({}, defaultContextValues.classNames), initialProps.classNames), components: __assign({}, initialProps.components), formatters: __assign(__assign({}, defaultContextValues.formatters), initialProps.formatters), fromDate: fromDate, labels: __assign(__assign({}, defaultContextValues.labels), initialProps.labels), mode: initialProps.mode || defaultContextValues.mode, modifiers: __assign(__assign({}, defaultContextValues.modifiers), initialProps.modifiers), modifiersClassNames: __assign(__assign({}, defaultContextValues.modifiersClassNames), initialProps.modifiersClassNames), onSelect: onSelect, styles: __assign(__assign({}, defaultContextValues.styles), initialProps.styles), toDate: toDate });
     return (React__default.createElement(DayPickerContext.Provider, { value: value }, props.children));
 }
 /**
@@ -4271,7 +4333,7 @@ function CaptionLabel(props) {
  * Render the icon in the styled drop-down.
  */
 function IconDropdown(props) {
-    return (React__default.createElement("svg", __assign$1({ width: "8px", height: "8px", viewBox: "0 0 120 120", "data-testid": "iconDropdown" }, props),
+    return (React__default.createElement("svg", __assign({ width: "8px", height: "8px", viewBox: "0 0 120 120", "data-testid": "iconDropdown" }, props),
         React__default.createElement("path", { d: "M4.22182541,48.2218254 C8.44222828,44.0014225 15.2388494,43.9273804 19.5496459,47.9996989 L19.7781746,48.2218254 L60,88.443 L100.221825,48.2218254 C104.442228,44.0014225 111.238849,43.9273804 115.549646,47.9996989 L115.778175,48.2218254 C119.998577,52.4422283 120.07262,59.2388494 116.000301,63.5496459 L115.778175,63.7781746 L67.7781746,111.778175 C63.5577717,115.998577 56.7611506,116.07262 52.4503541,112.000301 L52.2218254,111.778175 L4.22182541,63.7781746 C-0.0739418023,59.4824074 -0.0739418023,52.5175926 4.22182541,48.2218254 Z", fill: "currentColor", fillRule: "nonzero" })));
 }
 
@@ -4551,7 +4613,7 @@ function CaptionDropdowns(props) {
  * Render the "previous month" button in the navigation.
  */
 function IconLeft(props) {
-    return (React__default.createElement("svg", __assign$1({ width: "16px", height: "16px", viewBox: "0 0 120 120" }, props),
+    return (React__default.createElement("svg", __assign({ width: "16px", height: "16px", viewBox: "0 0 120 120" }, props),
         React__default.createElement("path", { d: "M69.490332,3.34314575 C72.6145263,0.218951416 77.6798462,0.218951416 80.8040405,3.34314575 C83.8617626,6.40086786 83.9268205,11.3179931 80.9992143,14.4548388 L80.8040405,14.6568542 L35.461,60 L80.8040405,105.343146 C83.8617626,108.400868 83.9268205,113.317993 80.9992143,116.454839 L80.8040405,116.656854 C77.7463184,119.714576 72.8291931,119.779634 69.6923475,116.852028 L69.490332,116.656854 L18.490332,65.6568542 C15.4326099,62.5991321 15.367552,57.6820069 18.2951583,54.5451612 L18.490332,54.3431458 L69.490332,3.34314575 Z", fill: "currentColor", fillRule: "nonzero" })));
 }
 
@@ -4559,7 +4621,7 @@ function IconLeft(props) {
  * Render the "next month" button in the navigation.
  */
 function IconRight(props) {
-    return (React__default.createElement("svg", __assign$1({ width: "16px", height: "16px", viewBox: "0 0 120 120" }, props),
+    return (React__default.createElement("svg", __assign({ width: "16px", height: "16px", viewBox: "0 0 120 120" }, props),
         React__default.createElement("path", { d: "M49.8040405,3.34314575 C46.6798462,0.218951416 41.6145263,0.218951416 38.490332,3.34314575 C35.4326099,6.40086786 35.367552,11.3179931 38.2951583,14.4548388 L38.490332,14.6568542 L83.8333725,60 L38.490332,105.343146 C35.4326099,108.400868 35.367552,113.317993 38.2951583,116.454839 L38.490332,116.656854 C41.5480541,119.714576 46.4651794,119.779634 49.602025,116.852028 L49.8040405,116.656854 L100.804041,65.6568542 C103.861763,62.5991321 103.926821,57.6820069 100.999214,54.5451612 L100.804041,54.3431458 L49.8040405,3.34314575 Z", fill: "currentColor" })));
 }
 
@@ -4571,11 +4633,11 @@ var Button = React__default.forwardRef(function (props, ref) {
         classNamesArr.push(props.className);
     }
     var className = classNamesArr.join(' ');
-    var style = __assign$1(__assign$1({}, styles.button_reset), styles.button);
+    var style = __assign(__assign({}, styles.button_reset), styles.button);
     if (props.style) {
         Object.assign(style, props.style);
     }
-    return (React__default.createElement("button", __assign$1({}, props, { ref: ref, type: "button", className: className, style: style })));
+    return (React__default.createElement("button", __assign({}, props, { ref: ref, type: "button", className: className, style: style })));
 });
 
 /** A component rendering the navigation buttons or the drop-downs. */
@@ -5038,7 +5100,7 @@ function ModifiersProvider(props) {
     var selectRange = useSelectRange();
     var internalModifiers = getInternalModifiers(dayPicker, selectMultiple, selectRange);
     var customModifiers = getCustomModifiers(dayPicker.modifiers);
-    var modifiers = __assign$1(__assign$1({}, internalModifiers), customModifiers);
+    var modifiers = __assign(__assign({}, internalModifiers), customModifiers);
     return (React__default.createElement(ModifiersContext.Provider, { value: modifiers }, props.children));
 }
 /**
@@ -5277,7 +5339,7 @@ function getNextFocus(focusedDay, options) {
             direction: direction,
             context: context,
             modifiers: modifiers,
-            retry: __assign$1(__assign$1({}, retry), { count: retry.count + 1 })
+            retry: __assign(__assign({}, retry), { count: retry.count + 1 })
         });
     }
 }
@@ -5621,10 +5683,10 @@ function getDayClassNames(dayPicker, activeModifiers) {
 
 /** Return the style for the Day element, according to the given active modifiers. */
 function getDayStyle(dayPicker, activeModifiers) {
-    var style = __assign$1({}, dayPicker.styles.day);
+    var style = __assign({}, dayPicker.styles.day);
     Object.keys(activeModifiers).forEach(function (modifier) {
         var _a;
-        style = __assign$1(__assign$1({}, style), (_a = dayPicker.modifiersStyles) === null || _a === void 0 ? void 0 : _a[modifier]);
+        style = __assign(__assign({}, style), (_a = dayPicker.modifiersStyles) === null || _a === void 0 ? void 0 : _a[modifier]);
     });
     return style;
 }
@@ -5685,7 +5747,7 @@ buttonRef) {
         isSameDay(focusContext.focusTarget, day) &&
         !activeModifiers.outside;
     var isFocused = focusContext.focusedDay && isSameDay(focusContext.focusedDay, day);
-    var buttonProps = __assign$1(__assign$1(__assign$1({}, divProps), (_a = { disabled: activeModifiers.disabled, role: 'gridcell' }, _a['aria-selected'] = activeModifiers.selected, _a.tabIndex = isFocused || isFocusTarget ? 0 : -1, _a)), eventHandlers);
+    var buttonProps = __assign(__assign(__assign({}, divProps), (_a = { disabled: activeModifiers.disabled, role: 'gridcell' }, _a['aria-selected'] = activeModifiers.selected, _a.tabIndex = isFocused || isFocusTarget ? 0 : -1, _a)), eventHandlers);
     var dayRender = {
         isButton: isButton,
         isHidden: isHidden,
@@ -5708,9 +5770,9 @@ function Day(props) {
         return React__default.createElement("div", { role: "gridcell" });
     }
     if (!dayRender.isButton) {
-        return React__default.createElement("div", __assign$1({}, dayRender.divProps));
+        return React__default.createElement("div", __assign({}, dayRender.divProps));
     }
-    return React__default.createElement(Button, __assign$1({ name: "day", ref: buttonRef }, dayRender.buttonProps));
+    return React__default.createElement(Button, __assign({ name: "day", ref: buttonRef }, dayRender.buttonProps));
 }
 
 /**
@@ -5917,15 +5979,15 @@ function Month(props) {
     }
     if (isStart) {
         className.push(classNames.caption_start);
-        style = __assign$1(__assign$1({}, style), styles.caption_start);
+        style = __assign(__assign({}, style), styles.caption_start);
     }
     if (isEnd) {
         className.push(classNames.caption_end);
-        style = __assign$1(__assign$1({}, style), styles.caption_end);
+        style = __assign(__assign({}, style), styles.caption_end);
     }
     if (isCenter) {
         className.push(classNames.caption_between);
-        style = __assign$1(__assign$1({}, style), styles.caption_between);
+        style = __assign(__assign({}, style), styles.caption_between);
     }
     var CaptionComponent = (_b = components === null || components === void 0 ? void 0 : components.Caption) !== null && _b !== void 0 ? _b : Caption;
     return (React__default.createElement("div", { key: props.displayIndex, className: className.join(' '), style: style },
@@ -5965,14 +6027,14 @@ function Root(_a) {
     if (dayPicker.showWeekNumber) {
         classNames.push(dayPicker.classNames.with_weeknumber);
     }
-    var style = __assign$1(__assign$1({}, dayPicker.styles.root), dayPicker.style);
+    var style = __assign(__assign({}, dayPicker.styles.root), dayPicker.style);
     var dataAttributes = Object.keys(initialProps)
         .filter(function (key) { return key.startsWith('data-'); })
         .reduce(function (attrs, key) {
         var _a;
-        return __assign$1(__assign$1({}, attrs), (_a = {}, _a[key] = initialProps[key], _a));
+        return __assign(__assign({}, attrs), (_a = {}, _a[key] = initialProps[key], _a));
     }, {});
-    return (React__default.createElement("div", __assign$1({ className: classNames.join(' '), style: style, dir: dayPicker.dir, id: dayPicker.id }, dataAttributes),
+    return (React__default.createElement("div", __assign({ className: classNames.join(' '), style: style, dir: dayPicker.dir, id: dayPicker.id }, dataAttributes),
         React__default.createElement("div", { className: dayPicker.classNames.months, style: dayPicker.styles.months }, navigation.displayMonths.map(function (month, i) { return (React__default.createElement(Month, { key: i, displayIndex: i, displayMonth: month })); }))));
 }
 
@@ -6076,7 +6138,7 @@ function RootProvider(props) {
  * ```
  */
 function DayPicker(props) {
-    return (React__default.createElement(RootProvider, __assign$1({}, props),
+    return (React__default.createElement(RootProvider, __assign({}, props),
         React__default.createElement(Root, { initialProps: props })));
 }
 
@@ -7964,7 +8026,7 @@ function GuestCount(_a) {
             React__default.createElement("button", { className: "will-guests-filter-counter-button", onClick: handleIncrement }, "+"))));
 }
 
-var css_248z$5 = ".will-filter-bar-guests {\n  text-align: initial;\n}\n\n.will-guests-filter-title {\n  font-size: 22px;\n  margin: 10px 0;\n}\n\n.will-guests-filter-subtitle {\n  font-size: 15px;\n  font-weight: 500;\n  color:var(--will-text)\n}\n\n\n.will-guests-filter-container {\n  display: flex;\n  flex-direction: column;\n}\n\n\n@media (max-width: 960px) {\n  .will-guests-filter-title {\n    font-size: 18px;\n  }\n\n  .will-guests-filter-container {\n   margin-top: 15px;\n  }\n}";
+var css_248z$5 = ".will-filter-bar-guests {\n  text-align: initial;\n}\n\n.will-guests-filter-title {\n  font-size: 22px;\n  margin: 10px 0;\n}\n\n.will-guests-filter-subtitle {\n  font-size: 15px;\n  font-weight: 500;\n  color:var(--will-text)\n}\n\n\n.will-guests-filter-container {\n  display: flex;\n  flex-direction: column;\n  min-width: 400px;\n}\n\n\n@media (max-width: 960px) {\n  .will-guests-filter-title {\n    font-size: 18px;\n  }\n\n  .will-guests-filter-container {\n   margin-top: 15px;\n   min-width: 100%;\n  }\n}";
 styleInject(css_248z$5);
 
 function Guests(_a) {
@@ -7986,7 +8048,7 @@ function Categories(_a) {
         'Summer camp',
         'Winter camp',
     ];
-    var _b = React__default.useState(''), selectedCategory = _b[0], setSelectedCategory = _b[1];
+    var _b = __read(React__default.useState(''), 2), selectedCategory = _b[0], setSelectedCategory = _b[1];
     var handleCategoryChange = function (selectedCategory) {
         setSelectedCategory(selectedCategory);
         setCategories(selectedCategory);
@@ -8007,52 +8069,13 @@ function useTheme(_a) {
     return themePalette;
 }
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol */
-
-
-var __assign = function() {
-    __assign = Object.assign || function __assign(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.apply(this, arguments);
-};
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
 function useFilterBar(_a) {
-    var redirectUrl = _a.redirectUrl;
-    var _b = React__default.useState('/events'), selectedPath = _b[0], setSelectedPath = _b[1];
-    var _c = React__default.useState(false), selectedFilter = _c[0], setSelectedFilter = _c[1];
-    var _d = React__default.useState(), calendarRange = _d[0], setCalendarRange = _d[1];
-    var _e = React__default.useState(0), categories = _e[0], setCategories = _e[1];
-    var _f = React__default.useState({}), ageCategoryCounts = _f[0], setAgeCategoryCounts = _f[1];
-    var updateGuestsCount = function (id, newCount) {
-        setAgeCategoryCounts(function (prevCounts) {
-            var _a;
-            return (__assign(__assign({}, prevCounts), (_a = {}, _a[id] = newCount, _a)));
-        });
-    };
+    var redirectUrl = _a.redirectUrl, currentViewApply = _a.currentViewApply;
+    var _b = __read(React__default.useState('/events'), 2), selectedPath = _b[0], setSelectedPath = _b[1];
+    var _c = __read(React__default.useState(false), 2), selectedFilter = _c[0], setSelectedFilter = _c[1];
+    var _d = __read(React__default.useState(), 2), calendarRange = _d[0], setCalendarRange = _d[1];
+    var _e = __read(React__default.useState(0), 2), categories = _e[0], setCategories = _e[1];
+    var _f = __read(React__default.useState({}), 2), ageCategoryCounts = _f[0], setAgeCategoryCounts = _f[1];
     React__default.useEffect(function () {
         var urlSearchParams = new URLSearchParams(window.location.search);
         var startDateParam = urlSearchParams.get('startDate');
@@ -8068,31 +8091,6 @@ function useFilterBar(_a) {
         setAgeCategoryCounts(ageCategoryCountsParam);
         setCategories(parsedCategories);
     }, []);
-    var handleSelectedFilter = function (id) {
-        setSelectedFilter(id);
-    };
-    var handleSubmit = function () {
-        var queryParams = new URLSearchParams();
-        var params = {
-            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,
-            ageCategoryCounts: Object.entries(ageCategoryCounts).length
-                ? JSON.stringify(ageCategoryCounts)
-                : '',
-        };
-        console.log(params);
-        for (var _i = 0, _a = Object.entries(params); _i < _a.length; _i++) {
-            var _b = _a[_i], key = _b[0], value = _b[1];
-            if (value) {
-                queryParams.append(key, value.toString());
-            }
-        }
-        window.location.href = "".concat(redirectUrl, "/").concat(selectedPath).concat(queryParams ? "?".concat(queryParams.toString()) : '');
-        handleSelectedFilter(false);
-    };
     React__default.useEffect(function () {
         if (typeof window === 'undefined')
             return;
@@ -8113,6 +8111,97 @@ function useFilterBar(_a) {
             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_1, _a, e_2, _b, e_3, _c;
+        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,
+            ageCategoryCounts: Object.entries(ageCategoryCounts).length
+                ? JSON.stringify(ageCategoryCounts)
+                : '',
+        };
+        // const getQueryParams = () => {
+        //   const currentSearchParams = new URLSearchParams(window.location.search)
+        //   const params: { [key: string]: string } = {}
+        //   for (const [key, value] of currentSearchParams.entries()) {
+        //     params[key] = value
+        //   }
+        //   return params
+        // }
+        if (currentViewApply) {
+            var currentSearchParams = new URLSearchParams(window.location.search);
+            var updatedParams = new URLSearchParams();
+            try {
+                for (var _d = __values(currentSearchParams.entries()), _e = _d.next(); !_e.done; _e = _d.next()) {
+                    var _f = __read(_e.value, 2), key = _f[0], value = _f[1];
+                    updatedParams.append(key, value);
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_e && !_e.done && (_a = _d.return)) _a.call(_d);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            try {
+                for (var _g = __values(Object.entries(newParams)), _h = _g.next(); !_h.done; _h = _g.next()) {
+                    var _j = __read(_h.value, 2), key = _j[0], value = _j[1];
+                    if (value) {
+                        updatedParams.set(key, value.toString());
+                    }
+                    else {
+                        updatedParams.delete(key);
+                    }
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (_h && !_h.done && (_b = _g.return)) _b.call(_g);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
+            console.log(currentSearchParams.toString(), updatedParams.toString());
+            // Get the current URL without the query string
+            var baseUrl = window.location.origin + window.location.pathname;
+            // Construct the updated URL with the modified query parameters
+            var updatedUrl = "".concat(baseUrl, "?").concat(updatedParams.toString());
+            // Replace the current URL with the updated URL in the browser's history
+            return (window.location.href = updatedUrl);
+        }
+        else {
+            var querySearchParams = new URLSearchParams();
+            try {
+                for (var _k = __values(Object.entries(newParams)), _l = _k.next(); !_l.done; _l = _k.next()) {
+                    var _m = __read(_l.value, 2), key = _m[0], value = _m[1];
+                    if (value) {
+                        querySearchParams.append(key, value.toString());
+                    }
+                }
+            }
+            catch (e_3_1) { e_3 = { error: e_3_1 }; }
+            finally {
+                try {
+                    if (_l && !_l.done && (_c = _k.return)) _c.call(_k);
+                }
+                finally { if (e_3) throw e_3.error; }
+            }
+            return (window.location.href = "".concat(redirectUrl, "/").concat(selectedPath).concat(querySearchParams ? "?".concat(querySearchParams.toString()) : ''));
+        }
+    };
     var handleResetFilters = function () {
         setAgeCategoryCounts({});
         handleSubmit();
@@ -8136,7 +8225,7 @@ function useFilterBar(_a) {
     };
 }
 
-var css_248z$3 = ".will-root {\n  z-index: 99999;\n  width: 100%;\n  max-height: 100vh;\n  position: relative;\n}\n\n.will-filter-bar {\n  box-sizing: border-box;\n  position: relative;\n}\n\n.will-filter-bar-underlay {\n  background-color: transparent;\n  position: absolute;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n  min-height: 500vh;\n  z-index: 88888;\n  transform: translateY(-50%);\n}\n\n/* Tabs */\n\n.will-filter-bar-tabs {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  z-index: 222;\n  background: transparent;\n  padding: 10px;\n  gap: 10px\n}\n\n/* Header */\n.will-filter-bar-header {\n  display: flex;\n  justify-content: space-between;\n  padding: 10px;\n  position: relative;\n  z-index: 222;\n  border-radius: 40px;\n  background-color: var(--will-white); \n}\n\n@media (max-width: 960px) {\n  .will-filter-bar-header {\n    flex-direction: column;\n    padding: 20px;\n    border-radius: 25px;\n  }\n}\n\n/* Container */\n\n.will-filter-bar-container {\n  background-color: var(--will-white);\n  min-height: 100px;\n  padding: 40px 20px ;\n  position: absolute;\n  top: 125px;\n  z-index: 111;\n  border-radius: 25px;\n  box-shadow: var(--will-box-shadow);\n}\n\n@media (max-width: 960px) {\n  .will-root {   \n    overflow-y: auto;\n    padding: 40px 10px;\n    top: 15px;\n    z-index: 0;\n  }\n\n  .will-filter-bar-container {\n    margin-top: 10px;\n    top:0;\n    padding: 30px 20px;\n    position: relative;\n  }\n\n  .will-root.isMobileAbsolute {\n    position: relative;\n    z-index: 99999;\n  }\n}\n\n";
+var css_248z$3 = ".will-root {\n  z-index: 99999;\n  width: 100%;\n  max-height: 100vh;\n  position: relative;\n}\n\n.will-filter-bar {\n  box-sizing: border-box;\n  position: relative;\n}\n\n.will-filter-bar-underlay {\n  background-color: transparent;\n  position: absolute;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n  min-height: 500vh;\n  z-index: 88888;\n  transform: translateY(-50%);\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  box-shadow: 0px 3px 10px 0px lightgrey; \n}\n\n@media (max-width: 960px) {\n  .will-filter-bar-header {\n    flex-direction: column;\n    padding: 20px;\n    border-radius: 25px;\n  }\n}\n\n/* Container */\n\n.will-filter-bar-container {\n  background-color: var(--will-white);\n  min-height: 100px;\n  padding: 40px 20px ;\n  position: absolute;\n  top: 125px;\n  z-index: 111;\n  border-radius: 25px;\n  box-shadow: var(--will-box-shadow);\n}\n\n@media (max-width: 960px) {\n  .will-root {   \n    overflow-y: auto;\n    padding: 40px 10px;\n    top: 15px;\n    z-index: 0;\n  }\n\n  .will-filter-bar-container {\n    margin-top: 10px;\n    top:0;\n    padding: 30px 20px;\n    position: relative;\n  }\n\n  .will-root.isMobileAbsolute {\n    position: relative;\n    z-index: 99999;\n  }\n}\n\n";
 styleInject(css_248z$3);
 
 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-white: #fff;\n  --will-black: #000;\n  --will-onahau: #CDEEFF;\n  --will-text: #5A5959;\n  --will-transparent-white: rgba(255, 255, 255, 0.30);\n\n  /* Confines */\n  --will-box-shadow: 0px 6px 11px 0px #a7a4a480;\n\n  /* Breakpoints */\n\n  --will-lg: 1140px;\n  --will-md: 960px;\n  --will-sm: 600px;\n  --will-xl: 1280px;\n  --will-xs: 0px;\n}\n\n/* Typography */\n\n.will-root h1, h2, h3, h4, h5, h6 {\n font-weight: 700;\n} \n\n.will-root p, h1, h2, h3, h4, h5, h6, span {\n  margin: 0;\n  padding: 0;\n}";
@@ -10515,22 +10604,28 @@ function SubmitButton(_a) {
 }
 
 function FilterBar(_a) {
-    var language = _a.language, _b = _a.ageCategories, ageCategories = _b === void 0 ? AGE_CATEGORIES_FALLBACK : _b, _c = _a.redirectUrl, redirectUrl = _c === void 0 ? REDIRECT_URL_FALLBACK : _c, palette = _a.palette;
+    var language = _a.language, _b = _a.ageCategories, ageCategories = _b === void 0 ? AGE_CATEGORIES_FALLBACK : _b, _c = _a.redirectUrl, redirectUrl = _c === void 0 ? REDIRECT_URL_FALLBACK : _c, palette = _a.palette, currentViewApply = _a.currentViewApply;
     var themePalette = useTheme({ palette: palette });
     // Translations
-    var _d = React__default.useState(0); _d[0]; var setRerenderKey = _d[1];
+    var _d = __read(React__default.useState(0), 2); _d[0]; var setRerenderKey = _d[1];
+    var _e = __read(React__default.useState(true), 2), isMobile = _e[0], setIsMobile = _e[1];
     React__default.useEffect(function () {
         instance.changeLanguage(language);
         setRerenderKey(function (prevKey) { return prevKey + 1; });
     }, [language]);
     var t = useTranslation('filterBar').t;
     // Filters
-    var _e = useFilterBar({ redirectUrl: redirectUrl }), selectedFilter = _e.selectedFilter, ageCategoryCounts = _e.ageCategoryCounts, categories = _e.categories, calendarRange = _e.calendarRange, selectedPath = _e.selectedPath, setCalendarRange = _e.setCalendarRange, setCategories = _e.setCategories, handleSelectedFilter = _e.handleSelectedFilter, handleSubmit = _e.handleSubmit, updateGuestsCount = _e.updateGuestsCount, setSelectedPath = _e.setSelectedPath;
+    var _f = useFilterBar({ redirectUrl: redirectUrl, currentViewApply: currentViewApply }), selectedFilter = _f.selectedFilter, ageCategoryCounts = _f.ageCategoryCounts, categories = _f.categories, calendarRange = _f.calendarRange, selectedPath = _f.selectedPath, setCalendarRange = _f.setCalendarRange, setCategories = _f.setCategories, handleSelectedFilter = _f.handleSelectedFilter, handleSubmit = _f.handleSubmit, updateGuestsCount = _f.updateGuestsCount, setSelectedPath = _f.setSelectedPath;
     // Scroll in to view
     var targetFilterBarRef = React__default.useRef(null);
     React__default.useEffect(function () {
-        if (window !== undefined && window.innerWidth > 960)
+        if (currentViewApply === 'roomFilters') {
+            setSelectedPath('/rooms');
+        }
+        if (window !== undefined && window.innerWidth > 960) {
+            setIsMobile(false);
             return;
+        }
         if (targetFilterBarRef.current && selectedFilter) {
             window.scrollTo({
                 behavior: 'smooth',
@@ -10545,16 +10640,16 @@ function FilterBar(_a) {
                 handleSelectedFilter(false);
             } })),
         React__default.createElement("div", { className: "will-root ".concat(selectedFilter ? 'isMobileAbsolute' : ''), style: themePalette },
-            React__default.createElement("div", { className: "will-filter-bar-tabs", ref: targetFilterBarRef },
+            !currentViewApply && (React__default.createElement("div", { className: "will-filter-bar-tabs", ref: targetFilterBarRef },
                 React__default.createElement(SubmitButton, { label: t('tabs.events'), onClick: function () { return setSelectedPath('/events'); }, active: selectedPath === '/events' }),
-                React__default.createElement(SubmitButton, { label: t('tabs.rooms'), onClick: function () { return setSelectedPath('/rooms'); }, active: selectedPath === '/rooms' })),
+                React__default.createElement(SubmitButton, { label: t('tabs.rooms'), onClick: function () { return setSelectedPath('/rooms'); }, active: selectedPath === '/rooms' }))),
             React__default.createElement("div", { className: "will-filter-bar-header" },
                 React__default.createElement(SelectButton, { label: 'When', description: 'Add Check-in and -out', onClick: function () { return handleSelectedFilter(1); }, style: fontWeightBold(selectedFilter === 1) }),
                 selectedPath === '/rooms' && (React__default.createElement(React__default.Fragment, null,
                     React__default.createElement(Divider, null),
                     React__default.createElement(SelectButton, { label: 'Who', description: 'Add Guests', onClick: function () { return handleSelectedFilter(2); }, style: fontWeightBold(selectedFilter === 2) }))),
                 React__default.createElement(SubmitButton$1, { onClick: handleSubmit })),
-            selectedFilter && (React__default.createElement("div", { className: "will-filter-bar-container" },
+            selectedFilter && (React__default.createElement("div", { className: "will-filter-bar-container", style: currentViewApply && !isMobile ? { top: 66 } : {} },
                 React__default.createElement(CloseButton, { handleClose: function () { return handleSelectedFilter(false); } }),
                 selectedFilter === 1 && (React__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange })),
                 selectedFilter === 2 && (React__default.createElement(Guests, { updateGuestsCount: updateGuestsCount, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts })),