willba-component-library 0.0.79 → 0.0.80

package/lib/index.umd.js

@@ -118,8 +118,8 @@
 	  }
 	}
 
-	var css_248z$9 = ".storybook-button {\r\n  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\r\n  font-weight: 700;\r\n  border: 0;\r\n  border-radius: 3em;\r\n  cursor: pointer;\r\n  display: inline-block;\r\n  line-height: 1;\r\n}\r\n.storybook-button--primary {\r\n  color: white;\r\n  background-color: #1ea7fd;\r\n}\r\n.storybook-button--secondary {\r\n  color: #333;\r\n  background-color: transparent;\r\n  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;\r\n}\r\n.storybook-button--small {\r\n  font-size: 12px;\r\n  padding: 10px 16px;\r\n}\r\n.storybook-button--medium {\r\n  font-size: 14px;\r\n  padding: 11px 20px;\r\n}\r\n.storybook-button--large {\r\n  font-size: 16px;\r\n  padding: 12px 24px;\r\n}";
-	styleInject(css_248z$9);
+	var css_248z$a = ".storybook-button {\r\n  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\r\n  font-weight: 700;\r\n  border: 0;\r\n  border-radius: 3em;\r\n  cursor: pointer;\r\n  display: inline-block;\r\n  line-height: 1;\r\n}\r\n.storybook-button--primary {\r\n  color: white;\r\n  background-color: #1ea7fd;\r\n}\r\n.storybook-button--secondary {\r\n  color: #333;\r\n  background-color: transparent;\r\n  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;\r\n}\r\n.storybook-button--small {\r\n  font-size: 12px;\r\n  padding: 10px 16px;\r\n}\r\n.storybook-button--medium {\r\n  font-size: 14px;\r\n  padding: 11px 20px;\r\n}\r\n.storybook-button--large {\r\n  font-size: 16px;\r\n  padding: 12px 24px;\r\n}";
+	styleInject(css_248z$a);
 
 	/**
 	 * Primary UI component for user interaction
@@ -389,15 +389,15 @@
 	  });
 	}
 
-	var css_248z$8 = ".will-filter-bar-divider {\n  width: 1px;\n  margin: 0 10px;\n  height: 35px;\n  background-color: #384265;\n}\n\n@media (max-width: 1024px) {\n  .will-filter-bar-divider {\n    width: 100%;\n    margin: 0 10px;\n    height: 1px;\n    background-color: #384265;\n  }\n}";
-	styleInject(css_248z$8);
+	var css_248z$9 = ".will-filter-bar-divider {\n  width: 1px;\n  margin: 0 10px;\n  height: 35px;\n  background-color: #384265;\n}\n\n@media (max-width: 1024px) {\n  .will-filter-bar-divider {\n    width: 100%;\n    margin: 0 10px;\n    height: 1px;\n    background-color: #384265;\n  }\n}";
+	styleInject(css_248z$9);
 
 	function Divider() {
 	    return React__default.createElement("div", { className: "will-filter-bar-divider" });
 	}
 
-	var css_248z$7 = ".will-filter-bar-select-button {\n  width: 100%;\n  height: auto;\n  background-color: transparent;\n  border: none;\n  padding: 10px 20px;\n  border-radius: 20px;\n  cursor: pointer;\n  font-size: 15px;\n  text-align: initial;\n}\n\n@media (max-width: 1024px) {\n  .will-filter-bar-select-button {\n    margin: 15px 0;\n    text-align: center;\n  }\n}\n\n\n";
-	styleInject(css_248z$7);
+	var css_248z$8 = ".will-filter-bar-select-button {\n  width: 100%;\n  height: auto;\n  background-color: transparent;\n  border: none;\n  padding: 10px 20px;\n  border-radius: 20px;\n  cursor: pointer;\n  font-size: 15px;\n  text-align: initial;\n}\n\n@media (max-width: 1024px) {\n  .will-filter-bar-select-button {\n    margin: 15px 0;\n    text-align: center;\n  }\n}\n\n\n";
+	styleInject(css_248z$8);
 
 	function SelectButton(_a) {
 	    var label = _a.label, onClick = _a.onClick, style = _a.style;
@@ -413,15 +413,15 @@
 	};
 	var IconContext = React__default.createContext && React__default.createContext(DefaultContext);
 
-	var __assign$1 = undefined && undefined.__assign || function () {
-	  __assign$1 = Object.assign || function (t) {
+	var __assign$2 = undefined && undefined.__assign || function () {
+	  __assign$2 = 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);
+	  return __assign$2.apply(this, arguments);
 	};
 	var __rest$1 = undefined && undefined.__rest || function (s, e) {
 	  var t = {};
@@ -433,7 +433,7 @@
 	};
 	function Tree2Element(tree) {
 	  return tree && tree.map(function (node, i) {
-	    return React__default.createElement(node.tag, __assign$1({
+	    return React__default.createElement(node.tag, __assign$2({
 	      key: i
 	    }, node.attr), Tree2Element(node.child));
 	  });
@@ -441,8 +441,8 @@
 	function GenIcon(data) {
 	  // eslint-disable-next-line react/display-name
 	  return function (props) {
-	    return React__default.createElement(IconBase, __assign$1({
-	      attr: __assign$1({}, data.attr)
+	    return React__default.createElement(IconBase, __assign$2({
+	      attr: __assign$2({}, data.attr)
 	    }, props), Tree2Element(data.child));
 	  };
 	}
@@ -456,13 +456,13 @@
 	    var className;
 	    if (conf.className) className = conf.className;
 	    if (props.className) className = (className ? className + " " : "") + props.className;
-	    return React__default.createElement("svg", __assign$1({
+	    return React__default.createElement("svg", __assign$2({
 	      stroke: "currentColor",
 	      fill: "currentColor",
 	      strokeWidth: "0"
 	    }, conf.attr, attr, svgProps, {
 	      className: className,
-	      style: __assign$1(__assign$1({
+	      style: __assign$2(__assign$2({
 	        color: props.color || conf.color
 	      }, conf.style), props.style),
 	      height: computedSize,
@@ -480,8 +480,8 @@
 	  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);
 	}
 
-	var css_248z$6 = ".will-filter-bar-submit-button {\n  width: auto;\n  height: auto;\n  background-color: var(--will-primary);\n  color: var(--will-white);\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}\n\n.will-filter-bar-submit-button span {\n margin-right: 10px;\n display: flex;\n}\n\n@media (max-width: 1024px) {\n  .will-filter-bar-submit-button {\n    justify-content: center;\n    margin-bottom: 25px;\n  }\n}\n";
-	styleInject(css_248z$6);
+	var css_248z$7 = ".will-filter-bar-submit-button {\n  width: auto;\n  height: auto;\n  background-color: var(--will-primary);\n  color: var(--will-white);\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}\n\n.will-filter-bar-submit-button span {\n margin-right: 10px;\n display: flex;\n}\n\n@media (max-width: 1024px) {\n  .will-filter-bar-submit-button {\n    justify-content: center;\n    margin-bottom: 25px;\n  }\n}\n";
+	styleInject(css_248z$7);
 
 	function SubmitButton(_a) {
 	    var onClick = _a.onClick;
@@ -3947,15 +3947,15 @@
 	PERFORMANCE OF THIS SOFTWARE.
 	***************************************************************************** */
 
-	var __assign = function() {
-	    __assign = Object.assign || function __assign(t) {
+	var __assign$1 = function() {
+	    __assign$1 = 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);
+	    return __assign$1.apply(this, arguments);
 	};
 
 	function __rest(s, e) {
@@ -4232,7 +4232,7 @@
 	        isDayPickerRange(initialProps)) {
 	        onSelect = initialProps.onSelect;
 	    }
-	    var value = __assign(__assign(__assign({}, defaultContextValues), initialProps), { captionLayout: captionLayout, classNames: __assign(__assign({}, defaultContextValues.classNames), initialProps.classNames), components: __assign({}, initialProps.components), formatters: __assign(__assign({}, defaultContextValues.formatters), initialProps.formatters), fromDate: fromDate, labels: __assign(__assign({}, defaultContextValues.labels), initialProps.labels), mode: initialProps.mode || defaultContextValues.mode, modifiers: __assign(__assign({}, defaultContextValues.modifiers), initialProps.modifiers), modifiersClassNames: __assign(__assign({}, defaultContextValues.modifiersClassNames), initialProps.modifiersClassNames), onSelect: onSelect, styles: __assign(__assign({}, defaultContextValues.styles), initialProps.styles), toDate: toDate });
+	    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 });
 	    return (React__default.createElement(DayPickerContext.Provider, { value: value }, props.children));
 	}
 	/**
@@ -4259,7 +4259,7 @@
 	 * Render the icon in the styled drop-down.
 	 */
 	function IconDropdown(props) {
-	    return (React__default.createElement("svg", __assign({ width: "8px", height: "8px", viewBox: "0 0 120 120", "data-testid": "iconDropdown" }, props),
+	    return (React__default.createElement("svg", __assign$1({ 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" })));
 	}
 
@@ -4539,7 +4539,7 @@
 	 * Render the "previous month" button in the navigation.
 	 */
 	function IconLeft(props) {
-	    return (React__default.createElement("svg", __assign({ width: "16px", height: "16px", viewBox: "0 0 120 120" }, props),
+	    return (React__default.createElement("svg", __assign$1({ 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" })));
 	}
 
@@ -4547,7 +4547,7 @@
 	 * Render the "next month" button in the navigation.
 	 */
 	function IconRight(props) {
-	    return (React__default.createElement("svg", __assign({ width: "16px", height: "16px", viewBox: "0 0 120 120" }, props),
+	    return (React__default.createElement("svg", __assign$1({ 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" })));
 	}
 
@@ -4559,11 +4559,11 @@
 	        classNamesArr.push(props.className);
 	    }
 	    var className = classNamesArr.join(' ');
-	    var style = __assign(__assign({}, styles.button_reset), styles.button);
+	    var style = __assign$1(__assign$1({}, styles.button_reset), styles.button);
 	    if (props.style) {
 	        Object.assign(style, props.style);
 	    }
-	    return (React__default.createElement("button", __assign({}, props, { ref: ref, type: "button", className: className, style: style })));
+	    return (React__default.createElement("button", __assign$1({}, props, { ref: ref, type: "button", className: className, style: style })));
 	});
 
 	/** A component rendering the navigation buttons or the drop-downs. */
@@ -5005,7 +5005,7 @@
 	    var selectRange = useSelectRange();
 	    var internalModifiers = getInternalModifiers(dayPicker, selectMultiple, selectRange);
 	    var customModifiers = getCustomModifiers(dayPicker.modifiers);
-	    var modifiers = __assign(__assign({}, internalModifiers), customModifiers);
+	    var modifiers = __assign$1(__assign$1({}, internalModifiers), customModifiers);
 	    return (React__default.createElement(ModifiersContext.Provider, { value: modifiers }, props.children));
 	}
 	/**
@@ -5244,7 +5244,7 @@
 	            direction: direction,
 	            context: context,
 	            modifiers: modifiers,
-	            retry: __assign(__assign({}, retry), { count: retry.count + 1 })
+	            retry: __assign$1(__assign$1({}, retry), { count: retry.count + 1 })
 	        });
 	    }
 	}
@@ -5588,10 +5588,10 @@
 
 	/** Return the style for the Day element, according to the given active modifiers. */
 	function getDayStyle(dayPicker, activeModifiers) {
-	    var style = __assign({}, dayPicker.styles.day);
+	    var style = __assign$1({}, dayPicker.styles.day);
 	    Object.keys(activeModifiers).forEach(function (modifier) {
 	        var _a;
-	        style = __assign(__assign({}, style), (_a = dayPicker.modifiersStyles) === null || _a === void 0 ? void 0 : _a[modifier]);
+	        style = __assign$1(__assign$1({}, style), (_a = dayPicker.modifiersStyles) === null || _a === void 0 ? void 0 : _a[modifier]);
 	    });
 	    return style;
 	}
@@ -5652,7 +5652,7 @@
 	        isSameDay(focusContext.focusTarget, day) &&
 	        !activeModifiers.outside;
 	    var isFocused = focusContext.focusedDay && isSameDay(focusContext.focusedDay, day);
-	    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 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 dayRender = {
 	        isButton: isButton,
 	        isHidden: isHidden,
@@ -5675,9 +5675,9 @@
 	        return React__default.createElement("div", { role: "gridcell" });
 	    }
 	    if (!dayRender.isButton) {
-	        return React__default.createElement("div", __assign({}, dayRender.divProps));
+	        return React__default.createElement("div", __assign$1({}, dayRender.divProps));
 	    }
-	    return React__default.createElement(Button, __assign({ name: "day", ref: buttonRef }, dayRender.buttonProps));
+	    return React__default.createElement(Button, __assign$1({ name: "day", ref: buttonRef }, dayRender.buttonProps));
 	}
 
 	/**
@@ -5884,15 +5884,15 @@
 	    }
 	    if (isStart) {
 	        className.push(classNames.caption_start);
-	        style = __assign(__assign({}, style), styles.caption_start);
+	        style = __assign$1(__assign$1({}, style), styles.caption_start);
 	    }
 	    if (isEnd) {
 	        className.push(classNames.caption_end);
-	        style = __assign(__assign({}, style), styles.caption_end);
+	        style = __assign$1(__assign$1({}, style), styles.caption_end);
 	    }
 	    if (isCenter) {
 	        className.push(classNames.caption_between);
-	        style = __assign(__assign({}, style), styles.caption_between);
+	        style = __assign$1(__assign$1({}, 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 },
@@ -5932,14 +5932,14 @@
 	    if (dayPicker.showWeekNumber) {
 	        classNames.push(dayPicker.classNames.with_weeknumber);
 	    }
-	    var style = __assign(__assign({}, dayPicker.styles.root), dayPicker.style);
+	    var style = __assign$1(__assign$1({}, 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(__assign({}, attrs), (_a = {}, _a[key] = initialProps[key], _a));
+	        return __assign$1(__assign$1({}, attrs), (_a = {}, _a[key] = initialProps[key], _a));
 	    }, {});
-	    return (React__default.createElement("div", __assign({ className: classNames.join(' '), style: style, dir: dayPicker.dir, id: dayPicker.id }, dataAttributes),
+	    return (React__default.createElement("div", __assign$1({ 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 })); }))));
 	}
 
@@ -6043,7 +6043,7 @@
 	 * ```
 	 */
 	function DayPicker(props) {
-	    return (React__default.createElement(RootProvider, __assign({}, props),
+	    return (React__default.createElement(RootProvider, __assign$1({}, props),
 	        React__default.createElement(Root, { initialProps: props })));
 	}
 
@@ -7874,11 +7874,11 @@
 
 	var reactResponsiveExports = reactResponsive.exports;
 
-	var css_248z$5 = ".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$5);
+	var css_248z$6 = ".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$6);
 
-	var css_248z$4 = "/* .will-filter-bar-calendar {} */\n\n.will-calendar-filter-header {\n  padding: 15px 0;\n  border-bottom: 1px solid var(--will-grey);\n}\n\n.will-calendar-filter-title {\n  font-size: 16px;\n  text-transform: uppercase;\n  margin: 10px 0;\n}\n\n.will-calendar-filter-container {\n  display: flex;\n  justify-content: center;\n  padding-top: 20px;\n}\n\n/* Calendar overrides */\n\n.will-calendar-filter-container .DayPicker {\n  font-size: 25px; /* Adjust this value to make the DayPicker bigger */\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  left: 25;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav svg {\n  color: var(--will-primary);\n}\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: .6;\n}\n\n.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day {\n  opacity: 0.7;\n}\n\n.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day.rdp-day_selected {\n  background-color: var(--will-primary);\n  opacity: 1;\n}\n\n@media (max-width: 1024px) {\n  .will-calendar-filter-container .rdp-month .rdp-nav {\n    border: none;\n    border-radius: initial;\n    \n  }\n}\n\n\n";
-	styleInject(css_248z$4);
+	var css_248z$5 = "/* .will-filter-bar-calendar {} */\n\n.will-calendar-filter-header {\n  padding: 15px 0;\n  border-bottom: 1px solid var(--will-grey);\n}\n\n.will-calendar-filter-title {\n  font-size: 16px;\n  text-transform: uppercase;\n  margin: 10px 0;\n  text-align: left;\n}\n\n.will-calendar-filter-container {\n  display: flex;\n  justify-content: center;\n  padding-top: 20px;\n}\n\n/* Calendar overrides */\n\n.will-calendar-filter-container .DayPicker {\n  font-size: 25px; /* Adjust this value to make the DayPicker bigger */\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  left: 25;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav svg {\n  color: var(--will-primary);\n}\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: .6;\n}\n\n.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day {\n  opacity: 0.7;\n}\n\n.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day.rdp-day_selected {\n  background-color: var(--will-primary);\n  opacity: 1;\n}\n\n@media (max-width: 1024px) {\n  .will-calendar-filter-container .rdp-month .rdp-nav {\n    border: none;\n    border-radius: initial;\n    \n  }\n}\n\n\n";
+	styleInject(css_248z$5);
 
 	var currentMonth = new Date();
 	function Calendar(_a) {
@@ -7900,34 +7900,44 @@
 	            React__default.createElement(DayPicker, { id: "will-calendar", mode: "range", showOutsideDays: true, fixedWeeks: true, numberOfMonths: !isTablet ? 2 : 1, weekStartsOn: 1, max: 31, defaultMonth: currentMonth, selected: calendarRange, onSelect: setCalendarRange }))));
 	}
 
-	var css_248z$3 = ".will-filter-bar-guests {\n  text-align: initial;\n}\n\n.will-guests-filter-title {\n  font-size: 16px;\n  text-transform: uppercase;\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-label, .will-guests-filter-count {\n  font-size: 18px;\n  color: var(--will-text)\n}\n\n.will-guests-filter-container {\n  display: flex;\n  margin-top: 30px;\n}\n\n.will-guests-filter-inner {\n  display: flex;\n  align-items: center;\n}\n\n.will-guests-filter-inner:not(:last-child) {\n  margin-right: 50px;\n}\n\n.will-guests-filter-label {\n  display: block;\n  margin-right: 20px;\n  font-weight: bold;\n}\n\n.will-guests-filter-inner > div {\n  display: flex;\n  align-items: center;\n}\n\n.will-guests-filter-count {\n  margin: 0 15px;\n}\n\n.will-guests-filter-button {\n  border-radius: 50%;\n  border: none;\n  background-color: var(--will-onahau);\n  width: 25px;\n  height: 25px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 20px;\n  cursor: pointer;\n}";
+	var css_248z$4 = ".will-guests-filter-label, .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}\n\n.will-guests-filter-inner {\n  margin-top: 30px;\n  margin-right: 50px;\n}\n\n.will-guests-filter-label {\n  display: block;\n  margin-right: 20px;\n  font-weight: bold;\n \n}\n\n.will-guests-filter-inner > div {\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-button {\n  border-radius: 50%;\n  border: none;\n  background-color: var(--will-onahau);\n  width: 25px;\n  height: 25px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 20px;\n  cursor: pointer;\n}\n\n@media (max-width: 1024px) {\n\n  .will-guests-filter-inner {\n    width: 100%;\n    margin: 15px 0;\n    justify-content: space-between;\n  }\n}";
+	styleInject(css_248z$4);
+
+	function GuestCount(_a) {
+	    var label = _a.label, updateGuestsCount = _a.updateGuestsCount;
+	    useTranslation('filterBar').t;
+	    var _b = React__default.useState(0), count = _b[0], setCount = _b[1];
+	    var handleDecrement = function () {
+	        if (count > 0) {
+	            setCount(count - 1);
+	            updateGuestsCount(label, count - 1);
+	        }
+	    };
+	    var handleIncrement = function () {
+	        setCount(count + 1);
+	        updateGuestsCount(label, count + 1);
+	    };
+	    return (React__default.createElement("div", { className: "will-guests-filter-inner" },
+	        React__default.createElement("span", { className: "will-guests-filter-label" }, label),
+	        React__default.createElement("div", null,
+	            React__default.createElement("button", { className: "will-guests-filter-button", onClick: handleDecrement, disabled: count < 2, style: {
+	                    cursor: count < 2 ? 'initial' : 'pointer',
+	                    paddingBottom: '4px',
+	                } }, "-"),
+	            React__default.createElement("span", { className: "will-guests-filter-count" }, count),
+	            React__default.createElement("button", { className: "will-guests-filter-button", onClick: handleIncrement }, "+"))));
+	}
+
+	var css_248z$3 = ".will-filter-bar-guests {\n  text-align: initial;\n}\n\n.will-guests-filter-title {\n  font-size: 16px;\n  text-transform: uppercase;\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-wrap: wrap;\n}\n\n\n@media (max-width: 1024px) {\n  .will-guests-filter-container {\n   margin-top: 15px;\n  }\n}";
 	styleInject(css_248z$3);
 
 	function Guests(_a) {
-	    var guestsAdults = _a.guestsAdults, guestsKids = _a.guestsKids, decrementAdults = _a.decrementAdults, incrementAdults = _a.incrementAdults, decrementKids = _a.decrementKids, incrementKids = _a.incrementKids;
+	    var ageCategories = _a.ageCategories, updateGuestsCount = _a.updateGuestsCount;
 	    var t = useTranslation('filterBar').t;
 	    return (React__default.createElement("div", { className: "will-filter-bar-guests" },
 	        React__default.createElement("h3", { className: "will-guests-filter-title" }, t('guests.title')),
 	        React__default.createElement("p", { className: "will-guests-filter-subtitle" }, t('guests.subtitle')),
-	        React__default.createElement("div", { className: "will-guests-filter-container" },
-	            React__default.createElement("div", { className: "will-guests-filter-inner" },
-	                React__default.createElement("span", { className: "will-guests-filter-label" }, t('guests.adultsLabel')),
-	                React__default.createElement("div", null,
-	                    React__default.createElement("button", { className: "will-guests-filter-button", onClick: decrementAdults, disabled: guestsAdults < 2, style: {
-	                            cursor: guestsAdults < 2 ? 'initial' : 'pointer',
-	                            paddingBottom: '4px',
-	                        } }, "-"),
-	                    React__default.createElement("span", { className: "will-guests-filter-count" }, guestsAdults),
-	                    React__default.createElement("button", { className: "will-guests-filter-button", onClick: incrementAdults }, "+"))),
-	            React__default.createElement("div", { className: "will-guests-filter-inner" },
-	                React__default.createElement("span", { className: "will-guests-filter-label" }, t('guests.kidsLabel')),
-	                React__default.createElement("div", null,
-	                    React__default.createElement("button", { className: "will-guests-filter-button", onClick: decrementKids, disabled: guestsKids < 1, style: {
-	                            cursor: guestsKids < 1 ? 'initial' : 'pointer',
-	                            paddingBottom: '4px',
-	                        } }, "-"),
-	                    React__default.createElement("span", { className: "will-guests-filter-count" }, guestsKids),
-	                    React__default.createElement("button", { className: "will-guests-filter-button", onClick: incrementKids }, "+"))))));
+	        React__default.createElement("div", { className: "will-guests-filter-container" }, ageCategories === null || ageCategories === void 0 ? void 0 : ageCategories.map(function (category) { return (React__default.createElement(GuestCount, { key: category.id, label: category.name, updateGuestsCount: updateGuestsCount })); }))));
 	}
 
 	var css_248z$2 = ".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";
@@ -7964,18 +7974,58 @@
 	    return themeClass;
 	}
 
-	function useFilterBar() {
+	/******************************************************************************
+	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(ageCategories) {
 	    var _a = React__default.useState(false), selectedFilter = _a[0], setSelectedFilter = _a[1];
 	    var _b = React__default.useState(), calendarRange = _b[0], setCalendarRange = _b[1];
-	    var _c = React__default.useState(1), guestsAdults = _c[0], setGuestsAdults = _c[1];
-	    var _d = React__default.useState(0), guestsKids = _d[0], setGuestsKids = _d[1];
-	    var _e = React__default.useState(0), categories = _e[0], setCategories = _e[1];
+	    var _c = React__default.useState(0), categories = _c[0], setCategories = _c[1];
+	    //
+	    var _d = React__default.useState({}), ageCategoryCounts = _d[0], setAgeCategoryCounts = _d[1];
+	    var updateGuestsCount = function (label, newCount) {
+	        setAgeCategoryCounts(function (prevCounts) {
+	            var _a;
+	            return (__assign(__assign({}, prevCounts), (_a = {}, _a[label] = newCount, _a)));
+	        });
+	    };
+	    //
 	    React__default.useEffect(function () {
 	        var urlSearchParams = new URLSearchParams(window.location.search);
 	        var startDateParam = urlSearchParams.get('startDate');
 	        var endDateParam = urlSearchParams.get('endDate');
-	        var parsedGuestsAdults = parseInt(urlSearchParams.get('guestsAdults') || '1', 10);
-	        var parsedGuestsKids = parseInt(urlSearchParams.get('guestsKids') || '0', 10);
+	        parseInt(urlSearchParams.get('guestsAdults') || '1', 10);
+	        parseInt(urlSearchParams.get('guestsKids') || '0', 10);
 	        var parsedCategories = parseInt(urlSearchParams.get('categories') || '0', 10);
 	        if (startDateParam && endDateParam) {
 	            setCalendarRange({
@@ -7983,8 +8033,8 @@
 	                to: new Date(endDateParam),
 	            });
 	        }
-	        setGuestsAdults(parsedGuestsAdults);
-	        setGuestsKids(parsedGuestsKids);
+	        // setGuestsAdults(parsedGuestsAdults)
+	        // setGuestsKids(parsedGuestsKids)
 	        setCategories(parsedCategories);
 	    }, []);
 	    var handleSelectedFilter = function (id) {
@@ -7997,9 +8047,8 @@
 	                ? format(calendarRange.from, 'yyyy-MM-dd')
 	                : '',
 	            endDate: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) ? format(calendarRange.to, 'yyyy-MM-dd') : '',
-	            guestsAdults: guestsAdults,
-	            guestsKids: guestsKids,
 	            categories: categories,
+	            ageCategoryCounts: JSON.stringify(ageCategoryCounts),
 	        };
 	        for (var _i = 0, _a = Object.entries(params); _i < _a.length; _i++) {
 	            var _b = _a[_i], key = _b[0], value = _b[1];
@@ -8014,26 +8063,25 @@
 	    React__default.useEffect(function () {
 	        document.body.style.overflow = selectedFilter ? 'hidden' : 'visible';
 	        return function () {
-	            document.body.style.overflow = 'visible'; // Reset overflow when component unmounts
+	            document.body.style.overflow = 'visible';
 	        };
 	    }, [selectedFilter]);
 	    return {
 	        selectedFilter: selectedFilter,
-	        guestsAdults: guestsAdults,
-	        guestsKids: guestsKids,
+	        ageCategoryCounts: ageCategoryCounts,
 	        categories: categories,
 	        calendarRange: calendarRange,
 	        setCalendarRange: setCalendarRange,
 	        setSelectedFilter: setSelectedFilter,
-	        setGuestsAdults: setGuestsAdults,
-	        setGuestsKids: setGuestsKids,
+	        setAgeCategoryCounts: setAgeCategoryCounts,
 	        setCategories: setCategories,
 	        handleSelectedFilter: handleSelectedFilter,
 	        handleSubmit: handleSubmit,
+	        updateGuestsCount: updateGuestsCount,
 	    };
 	}
 
-	var css_248z$1 = ".will-root {\r\n  position: relative;\r\n  z-index: 99999;\r\n  width: 100%;\r\n}\r\n\r\n.will-filter-bar {\r\n  box-sizing: border-box;\r\n  position: relative;\r\n}\r\n\r\n.will-filter-bar-underlay {\r\n  background-color: rgba(0,0,0,.6);\r\n  position: absolute;\r\n  top:0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  cursor: pointer;\r\n  min-height: 100vh;\r\n  z-index: 88888;\r\n}\r\n\r\n/* Header */\r\n.will-filter-bar-header {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  padding: 10px 20px;\r\n  position: relative;\r\n  z-index: 222;\r\n  \r\n  \r\n  border-radius: 40px;\r\n  background-color: var(--will-white);\r\n  box-shadow: var(--will-box-shadow);\r\n}\r\n\r\n@media (max-width: 1024px) {\r\n  .will-filter-bar-header {\r\n    flex-direction: column;\r\n    padding: 20px;\r\n  }\r\n}\r\n\r\n/* Container */\r\n\r\n.will-filter-bar-container {\r\n  background-color: var(--will-white);\r\n  min-height: 100px;\r\n \r\n  padding: 90px 40px 30px 40px;\r\n  position: absolute;\r\n  top: 0;\r\n  z-index: 111;\r\n  border-radius: 25px;\r\n  width: -webkit-fill-available;\r\n  box-shadow: var(--will-box-shadow);\r\n}\r\n\r\n@media (max-width: 1024px) {\r\n  .will-filter-bar-container {\r\n    margin-top: 20px;\r\n    padding: 30px 40px;\r\n    position: initial;\r\n  }\r\n}\r\n\r\n";
+	var css_248z$1 = ".will-root {\r\n  z-index: 99999;\r\n  width: 100%;\r\n  max-height: calc(100vh - 56px);\r\n  position: relative;\r\n}\r\n\r\n.will-filter-bar {\r\n  box-sizing: border-box;\r\n  position: relative;\r\n}\r\n\r\n.will-filter-bar-underlay {\r\n  background-color: rgba(0,0,0,.6);\r\n  position: absolute;\r\n  top:0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  cursor: pointer;\r\n  min-height: 200vh;\r\n  z-index: 88888;\r\n}\r\n\r\n/* Header */\r\n.will-filter-bar-header {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  padding: 10px 20px;\r\n  position: relative;\r\n  z-index: 222;\r\n  \r\n  \r\n  border-radius: 40px;\r\n  background-color: var(--will-white);\r\n  box-shadow: var(--will-box-shadow);\r\n}\r\n\r\n@media (max-width: 1024px) {\r\n  .will-filter-bar-header {\r\n    flex-direction: column;\r\n    padding: 20px;\r\n  }\r\n}\r\n\r\n/* Container */\r\n\r\n.will-filter-bar-container {\r\n  background-color: var(--will-white);\r\n  min-height: 100px;\r\n \r\n  padding: 90px 40px 30px 40px;\r\n  position: absolute;\r\n  top: 0;\r\n  z-index: 111;\r\n  border-radius: 25px;\r\n  width: -webkit-fill-available;\r\n  box-shadow: var(--will-box-shadow);\r\n}\r\n\r\n@media (max-width: 1024px) {\r\n  .will-filter-bar-container {\r\n    margin-top: 20px;\r\n    padding: 30px 40px;\r\n    position: initial;\r\n  }\r\n}\r\n\r\n";
 	styleInject(css_248z$1);
 
 	var css_248z = "@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  /* Pallete */\n  --will-primary: #374269;\n  --will-grey: #ABA7AF;\n  --will-white: #fff;\n  --will-onahau: #CDEEFF;\n  --will-text: #5A5959;\n \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} \n\n/* Overrides as themes */\n\n.will-root-kis {\n  --will-primary: #374269;\n}\n\n.will-root-paj {\n  --will-primary: #1897D8;\n}";
@@ -10378,7 +10426,7 @@
 	});
 
 	function FilterBar(_a) {
-	    var vendor = _a.vendor, language = _a.language;
+	    var vendor = _a.vendor, language = _a.language, ageCategories = _a.ageCategories;
 	    var themeClass = useTheme({ vendor: vendor });
 	    var _b = React__default.useState(0); _b[0]; var setRerenderKey = _b[1];
 	    React__default.useEffect(function () {
@@ -10387,7 +10435,7 @@
 	        setRerenderKey(function (prevKey) { return prevKey + 1; });
 	    }, [language]);
 	    var t = useTranslation('filterBar').t;
-	    var _c = useFilterBar(), selectedFilter = _c.selectedFilter, guestsAdults = _c.guestsAdults, guestsKids = _c.guestsKids, categories = _c.categories, calendarRange = _c.calendarRange, setCalendarRange = _c.setCalendarRange, setGuestsAdults = _c.setGuestsAdults, setGuestsKids = _c.setGuestsKids, setCategories = _c.setCategories, handleSelectedFilter = _c.handleSelectedFilter, handleSubmit = _c.handleSubmit;
+	    var _c = useFilterBar(), selectedFilter = _c.selectedFilter, categories = _c.categories, calendarRange = _c.calendarRange, setCalendarRange = _c.setCalendarRange, setCategories = _c.setCategories, handleSelectedFilter = _c.handleSelectedFilter, handleSubmit = _c.handleSubmit, updateGuestsCount = _c.updateGuestsCount;
 	    return (React__default.createElement(React__default.Fragment, null,
 	        selectedFilter && (React__default.createElement("div", { className: "will-filter-bar will-filter-bar-underlay", onClick: function () {
 	                handleSelectedFilter(false);
@@ -10402,7 +10450,7 @@
 	                React__default.createElement(SubmitButton, { onClick: handleSubmit })),
 	            selectedFilter && (React__default.createElement("div", { className: "will-filter-bar-container" },
 	                (selectedFilter === 1 || selectedFilter === 2) && (React__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange })),
-	                selectedFilter === 3 && (React__default.createElement(Guests, { guestsAdults: guestsAdults, guestsKids: guestsKids, decrementAdults: function () { return setGuestsAdults(guestsAdults - 1); }, incrementAdults: function () { return setGuestsAdults(guestsAdults + 1); }, decrementKids: function () { return setGuestsKids(guestsKids - 1); }, incrementKids: function () { return setGuestsKids(guestsKids + 1); } })),
+	                selectedFilter === 3 && (React__default.createElement(Guests, { updateGuestsCount: updateGuestsCount, ageCategories: ageCategories })),
 	                selectedFilter === 4 && (React__default.createElement(Categories, { categories: categories, setCategories: setCategories })))))));
 	}
 	var fontWigthBold = function (input) {