willba-component-library 0.1.7 → 0.1.11

package/README.md

@@ -37,12 +37,12 @@ or you can add the willba-component-library using scripts:
   const filterBarElement = React.createElement
   const filterBarContainer = document.getElementById('will-filter-bar')
   const WillFilterBar = WillbaComponentLibrary.FilterBar
+  const root = ReactDOM.createRoot(filterBarContainer)
 
-  ReactDOM.render(
+  root.render(
     filterBarElement(WillFilterBar, {
-      redirectUrl: 'http://localhost:3000/',
-    }),
-    filterBarContainer
+      redirectUrl: 'http://localhost:4000/',
+    })
   )
 </script>
 ```

package/lib/components/FilterBar/FilterBar.d.ts

@@ -1,12 +1,13 @@
 import React from 'react';
-import { AgeCategoryType } from './FilterBarTypes';
+import { Palette } from '../../themes/useTheme';
 import './FilterBar.css';
 import '../../themes/Default.css';
-interface FilterBarProps {
+import { AgeCategoryType } from './FilterBarTypes';
+export interface FilterBarProps {
     vendor?: string;
     language?: string;
     ageCategories?: AgeCategoryType[];
     redirectUrl: string;
+    palette: Palette;
 }
-export default function FilterBar({ vendor, language, ageCategories, redirectUrl, }: FilterBarProps): React.JSX.Element;
-export {};
+export default function FilterBar({ language, ageCategories, redirectUrl, palette, }: FilterBarProps): React.JSX.Element;

package/lib/index.d.ts

@@ -27,6 +27,11 @@ interface ButtonProps {
  */
 declare const Button: ({ type, textColor, size, onClick, label, }: ButtonProps) => React.JSX.Element;
 
+interface Palette {
+    primary: string;
+    secondary: string;
+}
+
 interface AgeCategoryType {
     id: string;
     name: string;
@@ -40,7 +45,8 @@ interface FilterBarProps {
     language?: string;
     ageCategories?: AgeCategoryType[];
     redirectUrl: string;
+    palette: Palette;
 }
-declare function FilterBar({ vendor, language, ageCategories, redirectUrl, }: FilterBarProps): React.JSX.Element;
+declare function FilterBar({ language, ageCategories, redirectUrl, palette, }: FilterBarProps): React.JSX.Element;
 
 export { Button, FilterBar };

package/lib/index.esm.js

@@ -458,7 +458,7 @@ function FaSearch (props) {
   return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 512 512"},"child":[{"tag":"path","attr":{"d":"M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"}}]})(props);
 }
 
-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) {
@@ -470,104 +470,14 @@ function SubmitButton(_a) {
         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) {
@@ -2677,6 +2587,16 @@ var formatDistance = function formatDistance(token, count, options) {
 };
 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',
@@ -2724,6 +2644,25 @@ var formatRelative = function formatRelative(token, _date, _baseDate, _options)
 };
 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'],
@@ -2867,6 +2806,67 @@ var localize = {
 };
 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 = {
@@ -3956,7 +3956,12 @@ function __spreadArray(to, from, pack) {
         }
     }
     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) {
@@ -4503,7 +4508,7 @@ function CaptionDropdowns(props) {
     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__default.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }));
@@ -4611,12 +4616,12 @@ function Caption(props) {
     }
     else if (captionLayout === 'dropdown-buttons') {
         caption = (React__default__default.createElement(React__default__default.Fragment, null,
-            React__default__default.createElement(CaptionDropdowns, { displayMonth: props.displayMonth, id: props.id }),
-            React__default__default.createElement(CaptionNavigation, { displayMonth: props.displayMonth, id: props.id })));
+            React__default__default.createElement(CaptionDropdowns, { displayMonth: props.displayMonth, displayIndex: props.displayIndex, id: props.id }),
+            React__default__default.createElement(CaptionNavigation, { displayMonth: props.displayMonth, displayIndex: props.displayIndex, id: props.id })));
     }
     else {
         caption = (React__default__default.createElement(React__default__default.Fragment, null,
-            React__default__default.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }),
+            React__default__default.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth, displayIndex: props.displayIndex }),
             React__default__default.createElement(CaptionNavigation, { displayMonth: props.displayMonth, id: props.id })));
     }
     return (React__default__default.createElement("div", { className: classNames.caption, style: styles.caption }, caption));
@@ -4765,31 +4770,34 @@ function useSelectMultiple() {
  */
 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 };
 }
 
 /**
@@ -4850,6 +4858,10 @@ function SelectRangeProviderInternal(_a) {
             }
         }
     }
+    else if (selectedTo) {
+        modifiers.range_start = [selectedTo];
+        modifiers.range_end = [selectedTo];
+    }
     if (min) {
         if (selectedFrom && !selectedTo) {
             modifiers.disabled.push({
@@ -4863,6 +4875,12 @@ function SelectRangeProviderInternal(_a) {
                 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) {
@@ -4883,6 +4901,14 @@ function SelectRangeProviderInternal(_a) {
                 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__default.createElement(SelectRangeContext.Provider, { value: { selected: selected, onDayClick: onDayClick, modifiers: modifiers } }, children));
 }
@@ -5029,22 +5055,22 @@ function isDayOfWeekType(value) {
 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. */
@@ -5760,7 +5786,7 @@ function Table(props) {
     var FooterComponent = (_c = components === null || components === void 0 ? void 0 : components.Footer) !== null && _c !== void 0 ? _c : Footer;
     return (React__default__default.createElement("table", { id: props.id, className: classNames.table, style: styles.table, role: "grid", "aria-labelledby": props['aria-labelledby'] },
         !hideHead && React__default__default.createElement(HeadComponent, null),
-        React__default__default.createElement("tbody", { className: classNames.tbody, style: styles.tbody, role: "rowgroup" }, weeks.map(function (week) { return (React__default__default.createElement(RowComponent, { displayMonth: props.displayMonth, key: week.weekNumber, dates: week.dates, weekNumber: week.weekNumber })); })),
+        React__default__default.createElement("tbody", { className: classNames.tbody, style: styles.tbody }, weeks.map(function (week) { return (React__default__default.createElement(RowComponent, { displayMonth: props.displayMonth, key: week.weekNumber, dates: week.dates, weekNumber: week.weekNumber })); })),
         React__default__default.createElement(FooterComponent, { displayMonth: props.displayMonth })));
 }
 
@@ -5874,7 +5900,7 @@ function Month(props) {
     }
     var CaptionComponent = (_b = components === null || components === void 0 ? void 0 : components.Caption) !== null && _b !== void 0 ? _b : Caption;
     return (React__default__default.createElement("div", { key: props.displayIndex, className: className.join(' '), style: style },
-        React__default__default.createElement(CaptionComponent, { id: captionId, displayMonth: props.displayMonth }),
+        React__default__default.createElement(CaptionComponent, { id: captionId, displayMonth: props.displayMonth, displayIndex: props.displayIndex }),
         React__default__default.createElement(Table, { id: tableId, "aria-labelledby": captionId, displayMonth: props.displayMonth })));
 }
 
@@ -7944,13 +7970,12 @@ function Categories(_a) {
 }
 
 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;
 }
 
 /******************************************************************************
@@ -8024,7 +8049,7 @@ function useFilterBar(_a) {
                 : '',
             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];
@@ -8062,10 +8087,10 @@ function useFilterBar(_a) {
     };
 }
 
-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 = {
@@ -8701,7 +8726,7 @@ class Translator extends EventEmitter {
       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) {
@@ -10020,12 +10045,14 @@ class I18n extends EventEmitter {
     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);
         });
       };
@@ -10411,7 +10438,7 @@ function IoIosCloseCircleOutline (props) {
   return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 512 512"},"child":[{"tag":"path","attr":{"d":"M331.3 308.7L278.6 256l52.7-52.7c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-52.7-52.7c-6.2-6.2-15.6-7.1-22.6 0-7.1 7.1-6 16.6 0 22.6l52.7 52.7-52.7 52.7c-6.7 6.7-6.4 16.3 0 22.6 6.4 6.4 16.4 6.2 22.6 0l52.7-52.7 52.7 52.7c6.2 6.2 16.4 6.2 22.6 0 6.3-6.2 6.3-16.4 0-22.6z"}},{"tag":"path","attr":{"d":"M256 76c48.1 0 93.3 18.7 127.3 52.7S436 207.9 436 256s-18.7 93.3-52.7 127.3S304.1 436 256 436c-48.1 0-93.3-18.7-127.3-52.7S76 304.1 76 256s18.7-93.3 52.7-127.3S207.9 76 256 76m0-28C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48z"}}]})(props);
 }
 
-var css_248z = ".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) {
@@ -10421,27 +10448,39 @@ function CloseButton(_a) {
 }
 
 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 = useState(0); _d[0]; var setRerenderKey = _d[1];
     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 = useRef(null);
+    useEffect(function () {
+        if (targetElementRef.current) {
+            targetElementRef.current.scrollIntoView({
+                behavior: 'smooth',
+                block: 'start',
+            });
+        }
+    }, [selectedFilter]);
     return (React__default__default.createElement(React__default__default.Fragment, null,
         selectedFilter && (React__default__default.createElement("div", { className: "will-filter-bar will-filter-bar-underlay", onClick: function () {
                 handleSelectedFilter(false);
             } })),
-        React__default__default.createElement("div", { className: "will-root ".concat(themeClass, " ").concat(selectedFilter ? 'isMobileAbsolute' : '') },
-            React__default__default.createElement("div", { className: "will-filter-bar-header" },
+        React__default__default.createElement("div", { className: "will-root ".concat(selectedFilter ? 'isMobileAbsolute' : ''), style: themePalette },
+            React__default__default.createElement("div", { className: "will-filter-bar-header", ref: targetElementRef },
                 React__default__default.createElement(SelectButton, { style: fontWigthBold(selectedFilter === 1 || selectedFilter === 2), label: t('calendar.startDate'), onClick: function () { return handleSelectedFilter(1); } }),
                 React__default__default.createElement(Divider, null),
                 React__default__default.createElement(SelectButton, { style: fontWigthBold(selectedFilter === 1 || selectedFilter === 2), label: t('calendar.endDate'), onClick: function () { return handleSelectedFilter(2); } }),
-                React__default__default.createElement(SubmitButton, { onClick: handleSubmit }),
-                React__default__default.createElement(CloseButton, { handleClose: handleResetFilters })),
+                React__default__default.createElement(SubmitButton, { onClick: handleSubmit })),
             selectedFilter && (React__default__default.createElement("div", { className: "will-filter-bar-container" },
+                React__default__default.createElement(CloseButton, { handleClose: function () { return handleSelectedFilter(false); } }),
                 (selectedFilter === 1 || selectedFilter === 2) && (React__default__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange })),
                 selectedFilter === 3 && (React__default__default.createElement(Guests, { updateGuestsCount: updateGuestsCount, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts })),
                 selectedFilter === 4 && (React__default__default.createElement(Categories, { categories: categories, setCategories: setCategories })))))));