willba-component-library 0.1.11 → 0.1.13

package/README.md

@@ -49,9 +49,9 @@ or you can add the willba-component-library using scripts:
 
 ## Props of FilterBar
 
-| Name          | Value         | Description                                                                                                              |
-| ------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------ |
-| redirectUrl   | `"string"`    | Define the URL where the component showld redirect on filtering.                                                         |
-| language      | `"fi" , "en"` | Specify the language, available languages Finnish and English.                                                           |
-| ageCategories | `[{}]`        | Specify age categories for guests filter: [{id: string, name: string, minAge: number , maxAge: number , minVal: number}] |
-| vendor        | `"string"`    | Add vendor name for custom theme.                                                                                        |
+| Name          | Value         | Description                                                                                                               |
+| ------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------- |
+| redirectUrl   | `"string"`    | Define the URL where the component showld redirect on filtering.                                                          |
+| language      | `"fi" , "en"` | Specify the language, available languages Finnish and English.                                                            |
+| ageCategories | `[{}]`        | Specify age categories for guests: filter: [{id: string, name: string, minAge: number , maxAge: number , minVal: number}] |
+| palette       | `{}`          | Override color: palette: {primary: string, secondary: string}.                                                            |

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

@@ -8,6 +8,6 @@ export interface FilterBarProps {
     language?: string;
     ageCategories?: AgeCategoryType[];
     redirectUrl: string;
-    palette: Palette;
+    palette?: Palette;
 }
 export default function FilterBar({ language, ageCategories, redirectUrl, palette, }: FilterBarProps): React.JSX.Element;

package/lib/components/FilterBar/components/buttons/close-button/CloseButton.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import './CloseButton.css';
+interface CloseButtonPropsType {
+    handleClose: () => void;
+}
+export default function CloseButton({ handleClose }: CloseButtonPropsType): React.JSX.Element;
+export {};

package/lib/components/FilterBar/components/buttons/select-button/SelectButton.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import './SelectButton.css';
+export default function SelectButton({ label, onClick, style, date }: any): React.JSX.Element;

package/lib/components/FilterBar/components/buttons/submit-button/SubmitButton.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import './SubmitButton.css';
+export default function SubmitButton({ onClick }: any): React.JSX.Element;

package/lib/index.d.ts

@@ -45,7 +45,7 @@ interface FilterBarProps {
     language?: string;
     ageCategories?: AgeCategoryType[];
     redirectUrl: string;
-    palette: Palette;
+    palette?: Palette;
 }
 declare function FilterBar({ language, ageCategories, redirectUrl, palette, }: FilterBarProps): React.JSX.Element;
 

package/lib/index.esm.js

@@ -367,109 +367,6 @@ function useTranslation(ns) {
   });
 }
 
-var css_248z$a = ".will-filter-bar-divider {\r\n  width: 1px;\r\n  margin: 0 10px;\r\n  height: 35px;\r\n  background-color: #384265;\r\n}\r\n\r\n@media (max-width: 960px) {\r\n  .will-filter-bar-divider {\r\n    width: 100%;\r\n    margin: 0 10px;\r\n    height: 1px;\r\n    background-color: #384265;\r\n  }\r\n}";
-styleInject(css_248z$a);
-
-function Divider() {
-    return React__default__default.createElement("div", { className: "will-filter-bar-divider" });
-}
-
-var css_248z$9 = ".will-filter-bar-select-button {\r\n  width: 100%;\r\n  height: auto;\r\n  background-color: transparent;\r\n  border: none;\r\n  padding: 10px 20px;\r\n  border-radius: 20px;\r\n  cursor: pointer;\r\n  font-size: 15px;\r\n  text-align: initial;\r\n}\r\n\r\n@media (max-width: 960px) {\r\n  .will-filter-bar-select-button {\r\n    margin: 15px 0;\r\n    text-align: center;\r\n  }\r\n}\r\n\r\n\r\n";
-styleInject(css_248z$9);
-
-function SelectButton(_a) {
-    var label = _a.label, onClick = _a.onClick, style = _a.style;
-    return (React__default__default.createElement("button", { className: "will-filter-bar-select-button", onClick: onClick, style: style }, label));
-}
-
-var DefaultContext = {
-  color: undefined,
-  size: undefined,
-  className: undefined,
-  style: undefined,
-  attr: undefined
-};
-var IconContext = React__default__default.createContext && React__default__default.createContext(DefaultContext);
-
-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$2.apply(this, arguments);
-};
-var __rest$1 = undefined && undefined.__rest || function (s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
-function Tree2Element(tree) {
-  return tree && tree.map(function (node, i) {
-    return React__default__default.createElement(node.tag, __assign$2({
-      key: i
-    }, node.attr), Tree2Element(node.child));
-  });
-}
-function GenIcon(data) {
-  // eslint-disable-next-line react/display-name
-  return function (props) {
-    return React__default__default.createElement(IconBase, __assign$2({
-      attr: __assign$2({}, data.attr)
-    }, props), Tree2Element(data.child));
-  };
-}
-function IconBase(props) {
-  var elem = function (conf) {
-    var attr = props.attr,
-      size = props.size,
-      title = props.title,
-      svgProps = __rest$1(props, ["attr", "size", "title"]);
-    var computedSize = size || conf.size || "1em";
-    var className;
-    if (conf.className) className = conf.className;
-    if (props.className) className = (className ? className + " " : "") + props.className;
-    return React__default__default.createElement("svg", __assign$2({
-      stroke: "currentColor",
-      fill: "currentColor",
-      strokeWidth: "0"
-    }, conf.attr, attr, svgProps, {
-      className: className,
-      style: __assign$2(__assign$2({
-        color: props.color || conf.color
-      }, conf.style), props.style),
-      height: computedSize,
-      width: computedSize,
-      xmlns: "http://www.w3.org/2000/svg"
-    }), title && React__default__default.createElement("title", null, title), props.children);
-  };
-  return IconContext !== undefined ? React__default__default.createElement(IconContext.Consumer, null, function (conf) {
-    return elem(conf);
-  }) : elem(DefaultContext);
-}
-
-// THIS FILE IS AUTO GENERATED
-function FaSearch (props) {
-  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 512 512"},"child":[{"tag":"path","attr":{"d":"M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"}}]})(props);
-}
-
-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) {
-    var onClick = _a.onClick;
-    var t = useTranslation('filterBar').t;
-    return (React__default__default.createElement("button", { className: "will-filter-bar-submit-button", onClick: onClick },
-        React__default__default.createElement("span", null,
-            React__default__default.createElement(FaSearch, null)),
-        t('submit.label')));
-}
-
 function _typeof(o) {
   "@babel/helpers - typeof";
 
@@ -3910,6 +3807,116 @@ function setYear(dirtyDate, dirtyYear) {
   return date;
 }
 
+var css_248z$a = ".will-filter-bar-divider {\r\n  width: 1px;\r\n  margin: 0 10px;\r\n  height: 35px;\r\n  background-color: #384265;\r\n}\r\n\r\n@media (max-width: 960px) {\r\n  .will-filter-bar-divider {\r\n    width: 100%;\r\n    margin: 0 10px;\r\n    height: 1px;\r\n    background-color: #384265;\r\n  }\r\n}";
+styleInject(css_248z$a);
+
+function Divider() {
+    return React__default__default.createElement("div", { className: "will-filter-bar-divider" });
+}
+
+var css_248z$9 = ".will-filter-bar-select-button {\r\n  width: 100%;\r\n  height: auto;\r\n  background-color: transparent;\r\n  border: none;\r\n  padding: 10px 20px;\r\n  border-radius: 20px;\r\n  cursor: pointer;\r\n  font-size: 15px;\r\n  text-align: initial;\r\n}\r\n\r\n.will-filter-bar-select-button .select-button-wrapper {\r\n  display: flex;\r\n  align-items: center;\r\n  flex-wrap: wrap;\r\n  gap: 10px;\r\n \r\n}\r\n\r\n@media (max-width: 960px) {\r\n  .will-filter-bar-select-button {\r\n    margin: 15px 0;\r\n  }\r\n\r\n  .will-filter-bar-select-button .select-button-wrapper {\r\n    justify-content: center;\r\n    text-align: center;\r\n  }\r\n\r\n  .will-filter-bar-select-button .select-button-divider {\r\n    display: none\r\n  }\r\n}\r\n\r\n\r\n";
+styleInject(css_248z$9);
+
+function SelectButton(_a) {
+    var label = _a.label, onClick = _a.onClick, style = _a.style, date = _a.date;
+    return (React__default__default.createElement("button", { className: "will-filter-bar-select-button", onClick: onClick, style: style },
+        React__default__default.createElement("span", { className: "select-button-wrapper" },
+            React__default__default.createElement("span", { className: "select-button-label" }, label),
+            !!date && (React__default__default.createElement(React__default__default.Fragment, null,
+                React__default__default.createElement("span", { className: "select-button-divider" }, "|"),
+                React__default__default.createElement("span", { className: "select-button-date" },
+                    " ",
+                    date))))));
+}
+
+var DefaultContext = {
+  color: undefined,
+  size: undefined,
+  className: undefined,
+  style: undefined,
+  attr: undefined
+};
+var IconContext = React__default__default.createContext && React__default__default.createContext(DefaultContext);
+
+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$2.apply(this, arguments);
+};
+var __rest$1 = undefined && undefined.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+function Tree2Element(tree) {
+  return tree && tree.map(function (node, i) {
+    return React__default__default.createElement(node.tag, __assign$2({
+      key: i
+    }, node.attr), Tree2Element(node.child));
+  });
+}
+function GenIcon(data) {
+  // eslint-disable-next-line react/display-name
+  return function (props) {
+    return React__default__default.createElement(IconBase, __assign$2({
+      attr: __assign$2({}, data.attr)
+    }, props), Tree2Element(data.child));
+  };
+}
+function IconBase(props) {
+  var elem = function (conf) {
+    var attr = props.attr,
+      size = props.size,
+      title = props.title,
+      svgProps = __rest$1(props, ["attr", "size", "title"]);
+    var computedSize = size || conf.size || "1em";
+    var className;
+    if (conf.className) className = conf.className;
+    if (props.className) className = (className ? className + " " : "") + props.className;
+    return React__default__default.createElement("svg", __assign$2({
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0"
+    }, conf.attr, attr, svgProps, {
+      className: className,
+      style: __assign$2(__assign$2({
+        color: props.color || conf.color
+      }, conf.style), props.style),
+      height: computedSize,
+      width: computedSize,
+      xmlns: "http://www.w3.org/2000/svg"
+    }), title && React__default__default.createElement("title", null, title), props.children);
+  };
+  return IconContext !== undefined ? React__default__default.createElement(IconContext.Consumer, null, function (conf) {
+    return elem(conf);
+  }) : elem(DefaultContext);
+}
+
+// THIS FILE IS AUTO GENERATED
+function FaSearch (props) {
+  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 512 512"},"child":[{"tag":"path","attr":{"d":"M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"}}]})(props);
+}
+
+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) {
+    var onClick = _a.onClick;
+    var t = useTranslation('filterBar').t;
+    return (React__default__default.createElement("button", { className: "will-filter-bar-submit-button", onClick: onClick },
+        React__default__default.createElement("span", null,
+            React__default__default.createElement(FaSearch, null)),
+        t('submit.label')));
+}
+
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -7887,7 +7894,7 @@ styleInject(css_248z$6);
 var currentMonth = new Date();
 function Calendar(_a) {
     var calendarRange = _a.calendarRange, setCalendarRange = _a.setCalendarRange;
-    var t = useTranslation('filterBar').t;
+    //const { t } = useTranslation('filterBar')
     var isTablet = reactResponsiveExports.useMediaQuery({ maxWidth: 960 });
     var defaultCalendarSelected = {
         from: currentMonth,
@@ -7898,10 +7905,8 @@ function Calendar(_a) {
             setCalendarRange(defaultCalendarSelected);
     }, []);
     return (React__default__default.createElement("div", { className: "will-filter-bar-calendar" },
-        React__default__default.createElement("div", { className: "will-calendar-filter-header" },
-            React__default__default.createElement("h3", { className: "will-calendar-filter-title" }, t('calendar.title'))),
         React__default__default.createElement("div", { className: "will-calendar-filter-container" },
-            React__default__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 }))));
+            React__default__default.createElement(DayPicker, { id: "will-calendar", mode: "range", showOutsideDays: true, numberOfMonths: !isTablet ? 2 : 1, weekStartsOn: 1, defaultMonth: currentMonth, selected: calendarRange, onSelect: setCalendarRange }))));
 }
 
 var css_248z$5 = ".will-guests-filter-label, .will-guests-filter-count {\r\n  font-size: 18px;\r\n  color: var(--will-text)\r\n}\r\n\r\n.will-guests-filter-inner {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.will-guests-filter-inner {\r\n  margin-top: 30px;\r\n  margin-right: 50px;\r\n}\r\n\r\n.will-guests-filter-label {\r\n  display: block;\r\n  margin-right: 20px;\r\n  font-weight: bold;\r\n \r\n}\r\n\r\n.will-guests-filter-inner > div {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.will-guests-filter-count {\r\n  margin: 0 10px;\r\n  min-width: 30px;\r\n  text-align: center;\r\n}\r\n\r\n.will-guests-filter-button {\r\n  border-radius: 50%;\r\n  border: none;\r\n  background-color: var(--will-onahau);\r\n  width: 25px;\r\n  height: 25px;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  font-size: 20px;\r\n  cursor: pointer;\r\n}\r\n\r\n@media (max-width: 960px) {\r\n\r\n  .will-guests-filter-inner {\r\n    width: 100%;\r\n    margin: 15px 0;\r\n    justify-content: space-between;\r\n  }\r\n}";
@@ -8087,7 +8092,7 @@ 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  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";
+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  .will-root.isMobileAbsolute {\r\n    position: relative;\r\n    z-index: 99999;\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-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}";
@@ -10438,7 +10443,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-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";
+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: 80px;\r\n  right: 20px;\r\n\r\n  min-height: 35px;\r\n}\r\n\r\n@media (max-width: 960px) {\r\n  .will-filter-bar-close-button {\r\n    top: 10px;\r\n    right: 10px;\r\n\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) {
@@ -10460,12 +10465,14 @@ function FilterBar(_a) {
     // 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);
+    var targetFilterBarRef = useRef(null);
     useEffect(function () {
-        if (targetElementRef.current) {
-            targetElementRef.current.scrollIntoView({
+        if (targetFilterBarRef.current && selectedFilter) {
+            window.scrollTo({
                 behavior: 'smooth',
-                block: 'start',
+                top: targetFilterBarRef.current.getBoundingClientRect().top -
+                    document.body.getBoundingClientRect().top -
+                    30,
             });
         }
     }, [selectedFilter]);
@@ -10474,10 +10481,12 @@ function FilterBar(_a) {
                 handleSelectedFilter(false);
             } })),
         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("div", { className: "will-filter-bar-header", ref: targetFilterBarRef },
+                React__default__default.createElement(SelectButton, { style: fontWigthBold(selectedFilter === 1 || selectedFilter === 2), label: t('calendar.startDate'), onClick: function () { return handleSelectedFilter(1); }, date: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from)
+                        ? format(calendarRange.from, 'dd-MM-yyyy')
+                        : null }),
                 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(SelectButton, { style: fontWigthBold(selectedFilter === 1 || selectedFilter === 2), label: t('calendar.endDate'), onClick: function () { return handleSelectedFilter(2); }, date: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) ? format(calendarRange.to, 'dd-MM-yyyy') : null }),
                 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); } }),