willba-component-library 0.1.6 → 0.1.11

package/lib/index.umd.js

@@ -480,7 +480,7 @@
 	  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$8 = ".will-filter-bar-submit-button {\r\n  width: auto;\r\n  height: auto;\r\n  background-color: var(--will-primary);\r\n  color: var(--will-white);\r\n  padding: 10px 20px;\r\n  border-radius: 20px;\r\n  cursor: pointer;\r\n  border: none;\r\n  white-space: nowrap;\r\n  text-transform: uppercase;\r\n  font-size: 12px;\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.will-filter-bar-submit-button span {\r\n margin-right: 10px;\r\n display: flex;\r\n}\r\n\r\n@media (max-width: 960px) {\r\n  .will-filter-bar-submit-button {\r\n    justify-content: center;\r\n    margin-bottom: 25px;\r\n  }\r\n}\r\n";
+	var css_248z$8 = ".will-filter-bar-submit-button {\r\n  width: auto;\r\n  height: auto;\r\n  background-color: var(--will-primary);\r\n  color: var(--will-white);\r\n  padding: 10px 20px;\r\n  border-radius: 20px;\r\n  cursor: pointer;\r\n  border: none;\r\n  white-space: nowrap;\r\n  text-transform: uppercase;\r\n  font-size: 12px;\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.will-filter-bar-submit-button span {\r\n margin-right: 10px;\r\n display: flex;\r\n}\r\n\r\n@media (max-width: 960px) {\r\n  .will-filter-bar-submit-button {\r\n    justify-content: center;\r\n    margin-bottom: 15px;\r\n  }\r\n}\r\n";
 	styleInject(css_248z$8);
 
 	function SubmitButton(_a) {
@@ -492,104 +492,14 @@
 	        t('submit.label')));
 	}
 
-	function buildFormatLongFn(args) {
-	  return function () {
-	    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-	    // TODO: Remove String()
-	    var width = options.width ? String(options.width) : args.defaultWidth;
-	    var format = args.formats[width] || args.formats[args.defaultWidth];
-	    return format;
-	  };
-	}
-
-	function buildLocalizeFn(args) {
-	  return function (dirtyIndex, options) {
-	    var context = options !== null && options !== void 0 && options.context ? String(options.context) : 'standalone';
-	    var valuesArray;
-	    if (context === 'formatting' && args.formattingValues) {
-	      var defaultWidth = args.defaultFormattingWidth || args.defaultWidth;
-	      var width = options !== null && options !== void 0 && options.width ? String(options.width) : defaultWidth;
-	      valuesArray = args.formattingValues[width] || args.formattingValues[defaultWidth];
-	    } else {
-	      var _defaultWidth = args.defaultWidth;
-	      var _width = options !== null && options !== void 0 && options.width ? String(options.width) : args.defaultWidth;
-	      valuesArray = args.values[_width] || args.values[_defaultWidth];
-	    }
-	    var index = args.argumentCallback ? args.argumentCallback(dirtyIndex) : dirtyIndex;
-	    // @ts-ignore: For some reason TypeScript just don't want to match it, no matter how hard we try. I challenge you to try to remove it!
-	    return valuesArray[index];
-	  };
-	}
-
-	function buildMatchFn(args) {
-	  return function (string) {
-	    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-	    var width = options.width;
-	    var matchPattern = width && args.matchPatterns[width] || args.matchPatterns[args.defaultMatchWidth];
-	    var matchResult = string.match(matchPattern);
-	    if (!matchResult) {
-	      return null;
-	    }
-	    var matchedString = matchResult[0];
-	    var parsePatterns = width && args.parsePatterns[width] || args.parsePatterns[args.defaultParseWidth];
-	    var key = Array.isArray(parsePatterns) ? findIndex(parsePatterns, function (pattern) {
-	      return pattern.test(matchedString);
-	    }) : findKey(parsePatterns, function (pattern) {
-	      return pattern.test(matchedString);
-	    });
-	    var value;
-	    value = args.valueCallback ? args.valueCallback(key) : key;
-	    value = options.valueCallback ? options.valueCallback(value) : value;
-	    var rest = string.slice(matchedString.length);
-	    return {
-	      value: value,
-	      rest: rest
-	    };
-	  };
-	}
-	function findKey(object, predicate) {
-	  for (var key in object) {
-	    if (object.hasOwnProperty(key) && predicate(object[key])) {
-	      return key;
-	    }
-	  }
-	  return undefined;
-	}
-	function findIndex(array, predicate) {
-	  for (var key = 0; key < array.length; key++) {
-	    if (predicate(array[key])) {
-	      return key;
-	    }
-	  }
-	  return undefined;
-	}
-
-	function buildMatchPatternFn(args) {
-	  return function (string) {
-	    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-	    var matchResult = string.match(args.matchPattern);
-	    if (!matchResult) return null;
-	    var matchedString = matchResult[0];
-	    var parseResult = string.match(args.parsePattern);
-	    if (!parseResult) return null;
-	    var value = args.valueCallback ? args.valueCallback(parseResult[0]) : parseResult[0];
-	    value = options.valueCallback ? options.valueCallback(value) : value;
-	    var rest = string.slice(matchedString.length);
-	    return {
-	      value: value,
-	      rest: rest
-	    };
-	  };
-	}
-
-	function _typeof(obj) {
+	function _typeof(o) {
 	  "@babel/helpers - typeof";
 
-	  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
-	    return typeof obj;
-	  } : function (obj) {
-	    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-	  }, _typeof(obj);
+	  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+	    return typeof o;
+	  } : function (o) {
+	    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+	  }, _typeof(o);
 	}
 
 	function toInteger(dirtyNumber) {
@@ -2699,6 +2609,16 @@
 	};
 	var formatDistance$1 = formatDistance;
 
+	function buildFormatLongFn(args) {
+	  return function () {
+	    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+	    // TODO: Remove String()
+	    var width = options.width ? String(options.width) : args.defaultWidth;
+	    var format = args.formats[width] || args.formats[args.defaultWidth];
+	    return format;
+	  };
+	}
+
 	var dateFormats = {
 	  full: 'EEEE, MMMM do, y',
 	  long: 'MMMM do, y',
@@ -2746,6 +2666,25 @@
 	};
 	var formatRelative$1 = formatRelative;
 
+	function buildLocalizeFn(args) {
+	  return function (dirtyIndex, options) {
+	    var context = options !== null && options !== void 0 && options.context ? String(options.context) : 'standalone';
+	    var valuesArray;
+	    if (context === 'formatting' && args.formattingValues) {
+	      var defaultWidth = args.defaultFormattingWidth || args.defaultWidth;
+	      var width = options !== null && options !== void 0 && options.width ? String(options.width) : defaultWidth;
+	      valuesArray = args.formattingValues[width] || args.formattingValues[defaultWidth];
+	    } else {
+	      var _defaultWidth = args.defaultWidth;
+	      var _width = options !== null && options !== void 0 && options.width ? String(options.width) : args.defaultWidth;
+	      valuesArray = args.values[_width] || args.values[_defaultWidth];
+	    }
+	    var index = args.argumentCallback ? args.argumentCallback(dirtyIndex) : dirtyIndex;
+	    // @ts-ignore: For some reason TypeScript just don't want to match it, no matter how hard we try. I challenge you to try to remove it!
+	    return valuesArray[index];
+	  };
+	}
+
 	var eraValues = {
 	  narrow: ['B', 'A'],
 	  abbreviated: ['BC', 'AD'],
@@ -2889,6 +2828,67 @@
 	};
 	var localize$1 = localize;
 
+	function buildMatchFn(args) {
+	  return function (string) {
+	    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+	    var width = options.width;
+	    var matchPattern = width && args.matchPatterns[width] || args.matchPatterns[args.defaultMatchWidth];
+	    var matchResult = string.match(matchPattern);
+	    if (!matchResult) {
+	      return null;
+	    }
+	    var matchedString = matchResult[0];
+	    var parsePatterns = width && args.parsePatterns[width] || args.parsePatterns[args.defaultParseWidth];
+	    var key = Array.isArray(parsePatterns) ? findIndex(parsePatterns, function (pattern) {
+	      return pattern.test(matchedString);
+	    }) : findKey(parsePatterns, function (pattern) {
+	      return pattern.test(matchedString);
+	    });
+	    var value;
+	    value = args.valueCallback ? args.valueCallback(key) : key;
+	    value = options.valueCallback ? options.valueCallback(value) : value;
+	    var rest = string.slice(matchedString.length);
+	    return {
+	      value: value,
+	      rest: rest
+	    };
+	  };
+	}
+	function findKey(object, predicate) {
+	  for (var key in object) {
+	    if (object.hasOwnProperty(key) && predicate(object[key])) {
+	      return key;
+	    }
+	  }
+	  return undefined;
+	}
+	function findIndex(array, predicate) {
+	  for (var key = 0; key < array.length; key++) {
+	    if (predicate(array[key])) {
+	      return key;
+	    }
+	  }
+	  return undefined;
+	}
+
+	function buildMatchPatternFn(args) {
+	  return function (string) {
+	    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+	    var matchResult = string.match(args.matchPattern);
+	    if (!matchResult) return null;
+	    var matchedString = matchResult[0];
+	    var parseResult = string.match(args.parsePattern);
+	    if (!parseResult) return null;
+	    var value = args.valueCallback ? args.valueCallback(parseResult[0]) : parseResult[0];
+	    value = options.valueCallback ? options.valueCallback(value) : value;
+	    var rest = string.slice(matchedString.length);
+	    return {
+	      value: value,
+	      rest: rest
+	    };
+	  };
+	}
+
 	var matchOrdinalNumberPattern = /^(\d+)(th|st|nd|rd)?/i;
 	var parseOrdinalNumberPattern = /\d+/i;
 	var matchEraPatterns = {
@@ -3978,7 +3978,12 @@
 	        }
 	    }
 	    return to.concat(ar || Array.prototype.slice.call(from));
-	}
+	}
+
+	typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+	    var e = new Error(message);
+	    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+	};
 
 	/** Returns true when the props are of type {@link DayPickerMultipleProps}. */
 	function isDayPickerMultiple(props) {
@@ -4525,7 +4530,7 @@
 	    var _b = useDayPicker(), classNames = _b.classNames, styles = _b.styles, components = _b.components;
 	    var goToMonth = useNavigation().goToMonth;
 	    var handleMonthChange = function (newMonth) {
-	        goToMonth(newMonth);
+	        goToMonth(addMonths(newMonth, props.displayIndex ? -props.displayIndex : 0));
 	    };
 	    var CaptionLabelComponent = (_a = components === null || components === void 0 ? void 0 : components.CaptionLabel) !== null && _a !== void 0 ? _a : CaptionLabel;
 	    var captionLabel = (React__default.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }));
@@ -4633,12 +4638,12 @@
 	    }
 	    else if (captionLayout === 'dropdown-buttons') {
 	        caption = (React__default.createElement(React__default.Fragment, null,
-	            React__default.createElement(CaptionDropdowns, { displayMonth: props.displayMonth, id: props.id }),
-	            React__default.createElement(CaptionNavigation, { displayMonth: props.displayMonth, id: props.id })));
+	            React__default.createElement(CaptionDropdowns, { displayMonth: props.displayMonth, displayIndex: props.displayIndex, id: props.id }),
+	            React__default.createElement(CaptionNavigation, { displayMonth: props.displayMonth, displayIndex: props.displayIndex, id: props.id })));
 	    }
 	    else {
 	        caption = (React__default.createElement(React__default.Fragment, null,
-	            React__default.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }),
+	            React__default.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth, displayIndex: props.displayIndex }),
 	            React__default.createElement(CaptionNavigation, { displayMonth: props.displayMonth, id: props.id })));
 	    }
 	    return (React__default.createElement("div", { className: classNames.caption, style: styles.caption }, caption));
@@ -4787,31 +4792,34 @@
 	 */
 	function addToRange(day, range) {
 	    var _a = range || {}, from = _a.from, to = _a.to;
-	    if (!from) {
-	        return { from: day, to: undefined };
-	    }
-	    if (!to && isSameDay(from, day)) {
+	    if (from && to) {
+	        if (isSameDay(to, day) && isSameDay(from, day)) {
+	            return undefined;
+	        }
+	        if (isSameDay(to, day)) {
+	            return { from: to, to: undefined };
+	        }
+	        if (isSameDay(from, day)) {
+	            return undefined;
+	        }
+	        if (isAfter(from, day)) {
+	            return { from: day, to: to };
+	        }
 	        return { from: from, to: day };
 	    }
-	    if (!to && isBefore(day, from)) {
-	        return { from: day, to: from };
+	    if (to) {
+	        if (isAfter(day, to)) {
+	            return { from: to, to: day };
+	        }
+	        return { from: day, to: to };
 	    }
-	    if (!to) {
+	    if (from) {
+	        if (isBefore(day, from)) {
+	            return { from: day, to: from };
+	        }
 	        return { from: from, to: day };
 	    }
-	    if (isSameDay(to, day) && isSameDay(from, day)) {
-	        return undefined;
-	    }
-	    if (isSameDay(to, day)) {
-	        return { from: to, to: undefined };
-	    }
-	    if (isSameDay(from, day)) {
-	        return undefined;
-	    }
-	    if (isAfter(from, day)) {
-	        return { from: day, to: to };
-	    }
-	    return { from: from, to: day };
+	    return { from: day, to: undefined };
 	}
 
 	/**
@@ -4872,6 +4880,10 @@
 	            }
 	        }
 	    }
+	    else if (selectedTo) {
+	        modifiers.range_start = [selectedTo];
+	        modifiers.range_end = [selectedTo];
+	    }
 	    if (min) {
 	        if (selectedFrom && !selectedTo) {
 	            modifiers.disabled.push({
@@ -4885,6 +4897,12 @@
 	                before: addDays(selectedFrom, min - 1)
 	            });
 	        }
+	        if (!selectedFrom && selectedTo) {
+	            modifiers.disabled.push({
+	                after: subDays(selectedTo, min - 1),
+	                before: addDays(selectedTo, min - 1)
+	            });
+	        }
 	    }
 	    if (max) {
 	        if (selectedFrom && !selectedTo) {
@@ -4905,6 +4923,14 @@
 	                after: addDays(selectedTo, offset)
 	            });
 	        }
+	        if (!selectedFrom && selectedTo) {
+	            modifiers.disabled.push({
+	                before: addDays(selectedTo, -max + 1)
+	            });
+	            modifiers.disabled.push({
+	                after: addDays(selectedTo, max - 1)
+	            });
+	        }
 	    }
 	    return (React__default.createElement(SelectRangeContext.Provider, { value: { selected: selected, onDayClick: onDayClick, modifiers: modifiers } }, children));
 	}
@@ -5051,22 +5077,22 @@
 	function isDateInRange(date, range) {
 	    var _a;
 	    var from = range.from, to = range.to;
-	    if (!from) {
-	        return false;
-	    }
-	    if (!to && isSameDay(from, date)) {
-	        return true;
+	    if (from && to) {
+	        var isRangeInverted = differenceInCalendarDays(to, from) < 0;
+	        if (isRangeInverted) {
+	            _a = [to, from], from = _a[0], to = _a[1];
+	        }
+	        var isInRange = differenceInCalendarDays(date, from) >= 0 &&
+	            differenceInCalendarDays(to, date) >= 0;
+	        return isInRange;
 	    }
-	    if (!to) {
-	        return false;
+	    if (to) {
+	        return isSameDay(to, date);
 	    }
-	    var isRangeInverted = differenceInCalendarDays(to, from) < 0;
-	    if (isRangeInverted) {
-	        _a = [to, from], from = _a[0], to = _a[1];
+	    if (from) {
+	        return isSameDay(from, date);
 	    }
-	    var isInRange = differenceInCalendarDays(date, from) >= 0 &&
-	        differenceInCalendarDays(to, date) >= 0;
-	    return isInRange;
+	    return false;
 	}
 
 	/** Returns true if `value` is a Date type. */
@@ -5782,7 +5808,7 @@
 	    var FooterComponent = (_c = components === null || components === void 0 ? void 0 : components.Footer) !== null && _c !== void 0 ? _c : Footer;
 	    return (React__default.createElement("table", { id: props.id, className: classNames.table, style: styles.table, role: "grid", "aria-labelledby": props['aria-labelledby'] },
 	        !hideHead && React__default.createElement(HeadComponent, null),
-	        React__default.createElement("tbody", { className: classNames.tbody, style: styles.tbody, role: "rowgroup" }, weeks.map(function (week) { return (React__default.createElement(RowComponent, { displayMonth: props.displayMonth, key: week.weekNumber, dates: week.dates, weekNumber: week.weekNumber })); })),
+	        React__default.createElement("tbody", { className: classNames.tbody, style: styles.tbody }, weeks.map(function (week) { return (React__default.createElement(RowComponent, { displayMonth: props.displayMonth, key: week.weekNumber, dates: week.dates, weekNumber: week.weekNumber })); })),
 	        React__default.createElement(FooterComponent, { displayMonth: props.displayMonth })));
 	}
 
@@ -5896,7 +5922,7 @@
 	    }
 	    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 },
-	        React__default.createElement(CaptionComponent, { id: captionId, displayMonth: props.displayMonth }),
+	        React__default.createElement(CaptionComponent, { id: captionId, displayMonth: props.displayMonth, displayIndex: props.displayIndex }),
 	        React__default.createElement(Table, { id: tableId, "aria-labelledby": captionId, displayMonth: props.displayMonth })));
 	}
 
@@ -7966,13 +7992,12 @@
 	}
 
 	function useTheme(_a) {
-	    var vendor = _a.vendor;
-	    var themeClass = vendor === 'Kisakallio'
-	        ? 'will-root-kis'
-	        : vendor === 'Pajulahti'
-	            ? 'will-root-paj'
-	            : '';
-	    return themeClass;
+	    var palette = _a.palette;
+	    var themePalette = {
+	        '--will-primary': palette === null || palette === void 0 ? void 0 : palette.primary,
+	        '--will-secondary': palette === null || palette === void 0 ? void 0 : palette.secondary,
+	    };
+	    return themePalette;
 	}
 
 	/******************************************************************************
@@ -8046,7 +8071,7 @@
 	                : '',
 	            endDate: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) ? format(calendarRange.to, 'yyyy-MM-dd') : '',
 	            categories: categories,
-	            ageCategoryCounts: JSON.stringify(ageCategoryCounts),
+	            //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];
@@ -8084,10 +8109,10 @@
 	    };
 	}
 
-	var css_248z$2 = ".will-root {\r\n  z-index: 99999;\r\n  width: 100%;\r\n  max-height: 100vh;\r\n  position: relative;\r\n \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,.8);\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: 960px) {\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: 960px) {\r\n  .will-root {   \r\n    overflow-y: auto;\r\n    padding: 40px 10px;\r\n    top: 15px;\r\n    z-index: 0;\r\n  }\r\n\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  .isMobileAbsolute {\r\n    position: absolute;\r\n    z-index: 99999;\r\n  }\r\n\r\n\r\n\r\n \r\n}\r\n\r\n";
+	var css_248z$2 = ".will-root {\r\n  z-index: 99999;\r\n  width: 100%;\r\n  max-height: 100vh;\r\n  position: relative;\r\n \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,.8);\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  transform: translateY(-50%);\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: 960px) {\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: 960px) {\r\n  .will-root {   \r\n    overflow-y: auto;\r\n    padding: 40px 10px;\r\n    top: 15px;\r\n    z-index: 0;\r\n  }\r\n\r\n  .will-filter-bar-container {\r\n    margin-top: 20px;\r\n    padding: 30px 40px;\r\n    position: relative;\r\n  }\r\n\r\n  .isMobileAbsolute {\r\n    position: absolute;\r\n    z-index: 99999;\r\n  }\r\n\r\n\r\n\r\n \r\n}\r\n\r\n";
 	styleInject(css_248z$2);
 
-	var css_248z$1 = "@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');\r\n\r\n.will-root * {\r\n  font-family: 'Montserrat', sans-serif;\r\n}\r\n\r\n.will-root {\r\n  \r\n  box-sizing: border-box;\r\n  font-size: 14px;\r\n  \r\n  color: #1E1E1E;\r\n\r\n  /* Pallete */\r\n  --will-primary: #374269;\r\n  --will-grey: #ABA7AF;\r\n  --will-white: #fff;\r\n  --will-onahau: #CDEEFF;\r\n  --will-text: #5A5959;\r\n\r\n  /* Confines */\r\n  --will-box-shadow: 0px 6px 11px 0px #a7a4a480;\r\n\r\n  /* Breakpoints */\r\n\r\n  --will-lg: 1140px;\r\n  --will-md: 960px;\r\n  --will-sm: 600px;\r\n  --will-xl: 1280px;\r\n  --will-xs: 0px;\r\n}\r\n\r\n/* Typography */\r\n\r\n.will-root h1, h2, h3, h4, h5, h6 {\r\n font-weight: 700;\r\n} \r\n\r\n.will-root p, h1, h2, h3, h4, h5, h6, span {\r\n  margin: 0;\r\n  padding: 0;\r\n} \r\n\r\n/* Overrides as themes */\r\n\r\n.will-root-kis {\r\n  --will-primary: #374269;\r\n}\r\n\r\n.will-root-paj {\r\n  --will-primary: #1897D8;\r\n}";
+	var css_248z$1 = "@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');\r\n\r\n.will-root * {\r\n  font-family: 'Montserrat', sans-serif;\r\n}\r\n\r\n.will-root {\r\n  \r\n  box-sizing: border-box;\r\n  font-size: 14px;\r\n  \r\n  color: #1E1E1E;\r\n\r\n  /* Pallete */\r\n  --will-primary: #374269;\r\n  --will-secondary: #374269;\r\n  --will-grey: #ABA7AF;\r\n  --will-white: #fff;\r\n  --will-onahau: #CDEEFF;\r\n  --will-text: #5A5959;\r\n\r\n  /* Confines */\r\n  --will-box-shadow: 0px 6px 11px 0px #a7a4a480;\r\n\r\n  /* Breakpoints */\r\n\r\n  --will-lg: 1140px;\r\n  --will-md: 960px;\r\n  --will-sm: 600px;\r\n  --will-xl: 1280px;\r\n  --will-xs: 0px;\r\n}\r\n\r\n/* Typography */\r\n\r\n.will-root h1, h2, h3, h4, h5, h6 {\r\n font-weight: 700;\r\n} \r\n\r\n.will-root p, h1, h2, h3, h4, h5, h6, span {\r\n  margin: 0;\r\n  padding: 0;\r\n}";
 	styleInject(css_248z$1);
 
 	const consoleLogger = {
@@ -8723,7 +8748,7 @@
 	      res = this.i18nFormat.parse(res, {
 	        ...this.options.interpolation.defaultVariables,
 	        ...options
-	      }, resolved.usedLng, resolved.usedNS, resolved.usedKey, {
+	      }, options.lng || this.language || resolved.usedLng, resolved.usedNS, resolved.usedKey, {
 	        resolved
 	      });
 	    } else if (!options.skipInterpolation) {
@@ -10042,12 +10067,14 @@
 	    const usedLng = typeof language === 'string' ? language : this.language;
 	    if (typeof language === 'function') usedCallback = language;
 	    if (!this.options.resources || this.options.partialBundledLanguages) {
-	      if (usedLng && usedLng.toLowerCase() === 'cimode') return usedCallback();
+	      if (usedLng && usedLng.toLowerCase() === 'cimode' && (!this.options.preload || this.options.preload.length === 0)) return usedCallback();
 	      const toLoad = [];
 	      const append = lng => {
 	        if (!lng) return;
+	        if (lng === 'cimode') return;
 	        const lngs = this.services.languageUtils.toResolveHierarchy(lng);
 	        lngs.forEach(l => {
+	          if (l === 'cimode') return;
 	          if (toLoad.indexOf(l) < 0) toLoad.push(l);
 	        });
 	      };
@@ -10433,7 +10460,7 @@
 	  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 512 512"},"child":[{"tag":"path","attr":{"d":"M331.3 308.7L278.6 256l52.7-52.7c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-52.7-52.7c-6.2-6.2-15.6-7.1-22.6 0-7.1 7.1-6 16.6 0 22.6l52.7 52.7-52.7 52.7c-6.7 6.7-6.4 16.3 0 22.6 6.4 6.4 16.4 6.2 22.6 0l52.7-52.7 52.7 52.7c6.2 6.2 16.4 6.2 22.6 0 6.3-6.2 6.3-16.4 0-22.6z"}},{"tag":"path","attr":{"d":"M256 76c48.1 0 93.3 18.7 127.3 52.7S436 207.9 436 256s-18.7 93.3-52.7 127.3S304.1 436 256 436c-48.1 0-93.3-18.7-127.3-52.7S76 304.1 76 256s18.7-93.3 52.7-127.3S207.9 76 256 76m0-28C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48z"}}]})(props);
 	}
 
-	var css_248z = ".will-filter-bar-close-button {\r\n  width: auto;\r\n  height: auto;\r\n  background-color: var(--will-grey);\r\n  color: var(--will-white);\r\n  padding: 2px 7px;\r\n  border-radius: 50%;\r\n  cursor: pointer;\r\n  border: none;\r\n  display: flex;\r\n  align-items: center;\r\n  font-size: 25px;\r\n  margin-left: 15px;\r\n  display: none;\r\n}\r\n\r\n@media (max-width: 960px) {\r\n  .will-filter-bar-close-button {\r\n    min-height: 35px;\r\n    border-radius: 25px;\r\n    margin-left:0;\r\n    margin-bottom: 25px;\r\n    display: flex;\r\n    justify-content: center;\r\n  }\r\n}\r\n";
+	var css_248z = ".will-filter-bar-close-button {\r\n  width: auto;\r\n  height: auto;\r\n  /* background-color: var(--will-grey); */\r\n  color: var(--will-grey);\r\n  padding: 2px 7px;\r\n  border-radius: 50%;\r\n  cursor: pointer;\r\n  border: none;\r\n  display: flex;\r\n  align-items: center;\r\n  font-size: 23px;\r\n  display: none;\r\n\r\n  position: absolute;\r\n  top: 10px;\r\n  right: 10px;\r\n\r\n}\r\n\r\n@media (max-width: 960px) {\r\n  .will-filter-bar-close-button {\r\n    min-height: 35px;\r\n    border-radius: 25px;\r\n    margin-left:0;\r\n   \r\n    display: flex;\r\n    justify-content: center;\r\n  }\r\n}\r\n";
 	styleInject(css_248z);
 
 	function CloseButton(_a) {
@@ -10443,27 +10470,39 @@
 	}
 
 	function FilterBar(_a) {
-	    var vendor = _a.vendor, 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;
-	    var themeClass = useTheme({ vendor: vendor });
+	    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 themePalette = useTheme({ palette: palette });
+	    // Translations
 	    var _d = React__default.useState(0); _d[0]; var setRerenderKey = _d[1];
 	    React__default.useEffect(function () {
 	        instance.changeLanguage(language);
 	        setRerenderKey(function (prevKey) { return prevKey + 1; });
 	    }, [language]);
 	    var t = useTranslation('filterBar').t;
-	    var _e = useFilterBar({ redirectUrl: redirectUrl }), selectedFilter = _e.selectedFilter, ageCategoryCounts = _e.ageCategoryCounts, categories = _e.categories, calendarRange = _e.calendarRange, setCalendarRange = _e.setCalendarRange, setCategories = _e.setCategories, handleSelectedFilter = _e.handleSelectedFilter, handleSubmit = _e.handleSubmit, updateGuestsCount = _e.updateGuestsCount, handleResetFilters = _e.handleResetFilters;
+	    // Filters
+	    var _e = useFilterBar({ redirectUrl: redirectUrl }), selectedFilter = _e.selectedFilter, ageCategoryCounts = _e.ageCategoryCounts, categories = _e.categories, calendarRange = _e.calendarRange, setCalendarRange = _e.setCalendarRange, setCategories = _e.setCategories, handleSelectedFilter = _e.handleSelectedFilter, handleSubmit = _e.handleSubmit, updateGuestsCount = _e.updateGuestsCount;
+	    // Scroll in to view
+	    var targetElementRef = React__default.useRef(null);
+	    React__default.useEffect(function () {
+	        if (targetElementRef.current) {
+	            targetElementRef.current.scrollIntoView({
+	                behavior: 'smooth',
+	                block: 'start',
+	            });
+	        }
+	    }, [selectedFilter]);
 	    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);
 	            } })),
-	        React__default.createElement("div", { className: "will-root ".concat(themeClass, " ").concat(selectedFilter ? 'isMobileAbsolute' : '') },
-	            React__default.createElement("div", { className: "will-filter-bar-header" },
+	        React__default.createElement("div", { className: "will-root ".concat(selectedFilter ? 'isMobileAbsolute' : ''), style: themePalette },
+	            React__default.createElement("div", { className: "will-filter-bar-header", ref: targetElementRef },
 	                React__default.createElement(SelectButton, { style: fontWigthBold(selectedFilter === 1 || selectedFilter === 2), label: t('calendar.startDate'), onClick: function () { return handleSelectedFilter(1); } }),
 	                React__default.createElement(Divider, null),
 	                React__default.createElement(SelectButton, { style: fontWigthBold(selectedFilter === 1 || selectedFilter === 2), label: t('calendar.endDate'), onClick: function () { return handleSelectedFilter(2); } }),
-	                React__default.createElement(SubmitButton, { onClick: handleSubmit }),
-	                React__default.createElement(CloseButton, { handleClose: handleResetFilters })),
+	                React__default.createElement(SubmitButton, { onClick: handleSubmit })),
 	            selectedFilter && (React__default.createElement("div", { className: "will-filter-bar-container" },
+	                React__default.createElement(CloseButton, { handleClose: function () { return handleSelectedFilter(false); } }),
 	                (selectedFilter === 1 || selectedFilter === 2) && (React__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange })),
 	                selectedFilter === 3 && (React__default.createElement(Guests, { updateGuestsCount: updateGuestsCount, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts })),
 	                selectedFilter === 4 && (React__default.createElement(Categories, { categories: categories, setCategories: setCategories })))))));