willba-component-library 0.1.4 → 0.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/README.md +57 -57
  2. package/lib/index.esm.js +9 -11
  3. package/lib/index.esm.js.map +1 -1
  4. package/lib/index.js +9 -11
  5. package/lib/index.js.map +1 -1
  6. package/lib/index.umd.js +9 -11
  7. package/lib/index.umd.js.map +1 -1
  8. package/package.json +51 -51
  9. package/src/components/FilterBar/FilterBar.tsx +4 -3
  10. package/src/components/FilterBar/FilterBarTypes.ts +25 -25
  11. package/src/components/FilterBar/components/calendar/Calendar.css +76 -76
  12. package/src/components/FilterBar/components/calendar/Calendar.tsx +54 -54
  13. package/src/components/FilterBar/components/categories/Categories.css +21 -21
  14. package/src/components/FilterBar/components/categories/Categories.tsx +41 -41
  15. package/src/components/FilterBar/components/close-button/CloseButton.css +26 -26
  16. package/src/components/FilterBar/components/close-button/CloseButton.tsx +16 -16
  17. package/src/components/FilterBar/components/divider/Divider.css +14 -14
  18. package/src/components/FilterBar/components/divider/Divider.tsx +7 -7
  19. package/src/components/FilterBar/components/guests/GuestCount/GuestCount.css +53 -53
  20. package/src/components/FilterBar/components/guests/GuestCount/GuestCount.tsx +51 -51
  21. package/src/components/FilterBar/components/guests/Guests.css +27 -27
  22. package/src/components/FilterBar/components/guests/Guests.tsx +38 -38
  23. package/src/components/FilterBar/components/select-button/SelectButton.css +20 -20
  24. package/src/components/FilterBar/components/select-button/SelectButton.tsx +15 -15
  25. package/src/components/FilterBar/components/submit-button/SubmitButton.css +27 -27
  26. package/src/components/FilterBar/components/submit-button/SubmitButton.tsx +18 -18
  27. package/src/components/FilterBar/hooks/useFilterBar.tsx +106 -106
  28. package/src/i18n.ts +25 -25
  29. package/src/locales/en/filterBar.json +20 -20
  30. package/src/locales/fi/filterBar.json +20 -20
  31. package/src/themes/Default.css +51 -51
  32. package/src/themes/useTheme.tsx +14 -14
package/lib/index.umd.js CHANGED
@@ -389,14 +389,14 @@
389
389
  });
390
390
  }
391
391
 
392
- var css_248z$a = ".will-filter-bar-divider {\n width: 1px;\n margin: 0 10px;\n height: 35px;\n background-color: #384265;\n}\n\n@media (max-width: 960px) {\n .will-filter-bar-divider {\n width: 100%;\n margin: 0 10px;\n height: 1px;\n background-color: #384265;\n }\n}";
392
+ 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}";
393
393
  styleInject(css_248z$a);
394
394
 
395
395
  function Divider() {
396
396
  return React__default.createElement("div", { className: "will-filter-bar-divider" });
397
397
  }
398
398
 
399
- var css_248z$9 = ".will-filter-bar-select-button {\n width: 100%;\n height: auto;\n background-color: transparent;\n border: none;\n padding: 10px 20px;\n border-radius: 20px;\n cursor: pointer;\n font-size: 15px;\n text-align: initial;\n}\n\n@media (max-width: 960px) {\n .will-filter-bar-select-button {\n margin: 15px 0;\n text-align: center;\n }\n}\n\n\n";
399
+ 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";
400
400
  styleInject(css_248z$9);
401
401
 
402
402
  function SelectButton(_a) {
@@ -480,7 +480,7 @@
480
480
  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);
481
481
  }
482
482
 
483
- var css_248z$8 = ".will-filter-bar-submit-button {\n width: auto;\n height: auto;\n background-color: var(--will-primary);\n color: var(--will-white);\n padding: 10px 20px;\n border-radius: 20px;\n cursor: pointer;\n border: none;\n white-space: nowrap;\n text-transform: uppercase;\n font-size: 12px;\n display: flex;\n align-items: center;\n}\n\n.will-filter-bar-submit-button span {\n margin-right: 10px;\n display: flex;\n}\n\n@media (max-width: 960px) {\n .will-filter-bar-submit-button {\n justify-content: center;\n margin-bottom: 25px;\n }\n}\n";
483
+ 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";
484
484
  styleInject(css_248z$8);
485
485
 
486
486
  function SubmitButton(_a) {
@@ -7877,7 +7877,7 @@
7877
7877
  var css_248z$7 = ".rdp {\n --rdp-cell-size: 40px;\n --rdp-caption-font-size: 18px;\n --rdp-accent-color: #0000ff;\n --rdp-background-color: #e7edff;\n --rdp-accent-color-dark: #3003e1;\n --rdp-background-color-dark: #180270;\n --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */\n --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */\n\n margin: 1em;\n}\n\n/* Hide elements for devices that are not screen readers */\n.rdp-vhidden {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n background: transparent;\n border: 0;\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n position: absolute !important;\n top: 0;\n width: 1px !important;\n height: 1px !important;\n padding: 0 !important;\n overflow: hidden !important;\n clip: rect(1px, 1px, 1px, 1px) !important;\n border: 0 !important;\n}\n\n/* Buttons */\n.rdp-button_reset {\n appearance: none;\n position: relative;\n margin: 0;\n padding: 0;\n cursor: default;\n color: inherit;\n background: none;\n font: inherit;\n\n -moz-appearance: none;\n -webkit-appearance: none;\n}\n\n.rdp-button_reset:focus-visible {\n /* Make sure to reset outline only when :focus-visible is supported */\n outline: none;\n}\n\n.rdp-button {\n border: 2px solid transparent;\n}\n\n.rdp-button[disabled]:not(.rdp-day_selected) {\n opacity: 0.25;\n}\n\n.rdp-button:not([disabled]) {\n cursor: pointer;\n}\n\n.rdp-button:focus-visible:not([disabled]) {\n color: inherit;\n background-color: var(--rdp-background-color);\n border: var(--rdp-outline);\n}\n\n.rdp-button:hover:not([disabled]):not(.rdp-day_selected) {\n background-color: var(--rdp-background-color);\n}\n\n.rdp-months {\n display: flex;\n}\n\n.rdp-month {\n margin: 0 1em;\n}\n\n.rdp-month:first-child {\n margin-left: 0;\n}\n\n.rdp-month:last-child {\n margin-right: 0;\n}\n\n.rdp-table {\n margin: 0;\n max-width: calc(var(--rdp-cell-size) * 7);\n border-collapse: collapse;\n}\n\n.rdp-with_weeknumber .rdp-table {\n max-width: calc(var(--rdp-cell-size) * 8);\n border-collapse: collapse;\n}\n\n.rdp-caption {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0;\n text-align: left;\n}\n\n.rdp-multiple_months .rdp-caption {\n position: relative;\n display: block;\n text-align: center;\n}\n\n.rdp-caption_dropdowns {\n position: relative;\n display: inline-flex;\n}\n\n.rdp-caption_label {\n position: relative;\n z-index: 1;\n display: inline-flex;\n align-items: center;\n margin: 0;\n padding: 0 0.25em;\n white-space: nowrap;\n color: currentColor;\n border: 0;\n border: 2px solid transparent;\n font-family: inherit;\n font-size: var(--rdp-caption-font-size);\n font-weight: bold;\n}\n\n.rdp-nav {\n white-space: nowrap;\n}\n\n.rdp-multiple_months .rdp-caption_start .rdp-nav {\n position: absolute;\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n}\n\n.rdp-multiple_months .rdp-caption_end .rdp-nav {\n position: absolute;\n top: 50%;\n right: 0;\n transform: translateY(-50%);\n}\n\n.rdp-nav_button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--rdp-cell-size);\n height: var(--rdp-cell-size);\n padding: 0.25em;\n border-radius: 100%;\n}\n\n/* ---------- */\n/* Dropdowns */\n/* ---------- */\n\n.rdp-dropdown_year,\n.rdp-dropdown_month {\n position: relative;\n display: inline-flex;\n align-items: center;\n}\n\n.rdp-dropdown {\n appearance: none;\n position: absolute;\n z-index: 2;\n top: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n margin: 0;\n padding: 0;\n cursor: inherit;\n opacity: 0;\n border: none;\n background-color: transparent;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n}\n\n.rdp-dropdown[disabled] {\n opacity: unset;\n color: unset;\n}\n\n.rdp-dropdown:focus-visible:not([disabled]) + .rdp-caption_label {\n background-color: var(--rdp-background-color);\n border: var(--rdp-outline);\n border-radius: 6px;\n}\n\n.rdp-dropdown_icon {\n margin: 0 0 0 5px;\n}\n\n.rdp-head {\n border: 0;\n}\n\n.rdp-head_row,\n.rdp-row {\n height: 100%;\n}\n\n.rdp-head_cell {\n vertical-align: middle;\n font-size: 0.75em;\n font-weight: 700;\n text-align: center;\n height: 100%;\n height: var(--rdp-cell-size);\n padding: 0;\n text-transform: uppercase;\n}\n\n.rdp-tbody {\n border: 0;\n}\n\n.rdp-tfoot {\n margin: 0.5em;\n}\n\n.rdp-cell {\n width: var(--rdp-cell-size);\n height: 100%;\n height: var(--rdp-cell-size);\n padding: 0;\n text-align: center;\n}\n\n.rdp-weeknumber {\n font-size: 0.75em;\n}\n\n.rdp-weeknumber,\n.rdp-day {\n display: flex;\n overflow: hidden;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: var(--rdp-cell-size);\n max-width: var(--rdp-cell-size);\n height: var(--rdp-cell-size);\n margin: 0;\n border: 2px solid transparent;\n border-radius: 100%;\n}\n\n.rdp-day_today:not(.rdp-day_outside) {\n font-weight: bold;\n}\n\n.rdp-day_selected,\n.rdp-day_selected:focus-visible,\n.rdp-day_selected:hover {\n color: white;\n opacity: 1;\n background-color: var(--rdp-accent-color);\n}\n\n.rdp-day_outside {\n opacity: 0.5;\n}\n\n.rdp-day_selected:focus-visible {\n /* Since the background is the same use again the outline */\n outline: var(--rdp-outline);\n outline-offset: 2px;\n z-index: 1;\n}\n\n.rdp:not([dir='rtl']) .rdp-day_range_start:not(.rdp-day_range_end) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.rdp:not([dir='rtl']) .rdp-day_range_end:not(.rdp-day_range_start) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.rdp[dir='rtl'] .rdp-day_range_start:not(.rdp-day_range_end) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.rdp[dir='rtl'] .rdp-day_range_end:not(.rdp-day_range_start) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.rdp-day_range_end.rdp-day_range_start {\n border-radius: 100%;\n}\n\n.rdp-day_range_middle {\n border-radius: 0;\n}";
7878
7878
  styleInject(css_248z$7);
7879
7879
 
7880
- var css_248z$6 = "/* .will-filter-bar-calendar {} */\n\n.will-calendar-filter-header {\n padding: 15px 0;\n border-bottom: 1px solid var(--will-grey);\n}\n\n.will-calendar-filter-title {\n font-size: 16px;\n text-transform: uppercase;\n margin: 10px 0;\n text-align: left;\n}\n\n.will-calendar-filter-container {\n display: flex;\n justify-content: center;\n padding-top: 20px;\n}\n\n/* Calendar overrides */\n\n.will-calendar-filter-container .DayPicker {\n font-size: 25px; /* Adjust this value to make the DayPicker bigger */\n}\n\n.will-calendar-filter-container .rdp-month {\n position: relative;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_start {\n padding-left: 70px;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_end {\n padding-right: 70px;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav {\n border: 1px solid var(--will-primary);\n border-radius: 50%;\n left: 25;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav svg {\n color: var(--will-primary);\n}\n\n\n.will-calendar-filter-container .rdp-month .rdp-caption {\n position: initial;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-caption > .rdp-caption_label,\n.will-calendar-filter-container .rdp-table .rdp-head {\n opacity: .6;\n}\n\n.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day {\n opacity: 0.7;\n}\n\n.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day.rdp-day_selected {\n background-color: var(--will-primary);\n opacity: 1;\n}\n\n@media (max-width: 960px) {\n .will-calendar-filter-container .rdp-month .rdp-nav {\n border: none;\n border-radius: initial;\n \n }\n}\n\n\n";
7880
+ var css_248z$6 = "/* .will-filter-bar-calendar {} */\r\n\r\n.will-calendar-filter-header {\r\n padding: 15px 0;\r\n border-bottom: 1px solid var(--will-grey);\r\n}\r\n\r\n.will-calendar-filter-title {\r\n font-size: 16px;\r\n text-transform: uppercase;\r\n margin: 10px 0;\r\n text-align: left;\r\n}\r\n\r\n.will-calendar-filter-container {\r\n display: flex;\r\n justify-content: center;\r\n padding-top: 20px;\r\n}\r\n\r\n/* Calendar overrides */\r\n\r\n.will-calendar-filter-container .DayPicker {\r\n font-size: 25px; /* Adjust this value to make the DayPicker bigger */\r\n}\r\n\r\n.will-calendar-filter-container .rdp-month {\r\n position: relative;\r\n}\r\n\r\n.will-calendar-filter-container .rdp-month.rdp-caption_start {\r\n padding-left: 70px;\r\n}\r\n\r\n.will-calendar-filter-container .rdp-month.rdp-caption_end {\r\n padding-right: 70px;\r\n}\r\n\r\n.will-calendar-filter-container .rdp-month .rdp-nav {\r\n border: 1px solid var(--will-primary);\r\n border-radius: 50%;\r\n left: 25;\r\n}\r\n\r\n.will-calendar-filter-container .rdp-month .rdp-nav svg {\r\n color: var(--will-primary);\r\n}\r\n\r\n\r\n.will-calendar-filter-container .rdp-month .rdp-caption {\r\n position: initial;\r\n}\r\n\r\n.will-calendar-filter-container .rdp-month .rdp-caption > .rdp-caption_label,\r\n.will-calendar-filter-container .rdp-table .rdp-head {\r\n opacity: .6;\r\n}\r\n\r\n.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day {\r\n opacity: 0.7;\r\n}\r\n\r\n.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day.rdp-day_selected {\r\n background-color: var(--will-primary);\r\n opacity: 1;\r\n}\r\n\r\n@media (max-width: 960px) {\r\n .will-calendar-filter-container .rdp-month .rdp-nav {\r\n border: none;\r\n border-radius: initial;\r\n \r\n }\r\n}\r\n\r\n\r\n";
7881
7881
  styleInject(css_248z$6);
7882
7882
 
7883
7883
  var currentMonth = new Date();
@@ -7900,7 +7900,7 @@
7900
7900
  React__default.createElement(DayPicker, { id: "will-calendar", mode: "range", showOutsideDays: true, fixedWeeks: true, numberOfMonths: !isTablet ? 2 : 1, weekStartsOn: 1, max: 31, defaultMonth: currentMonth, selected: calendarRange, onSelect: setCalendarRange }))));
7901
7901
  }
7902
7902
 
7903
- var css_248z$5 = ".will-guests-filter-label, .will-guests-filter-count {\n font-size: 18px;\n color: var(--will-text)\n}\n\n.will-guests-filter-inner {\n display: flex;\n align-items: center;\n}\n\n.will-guests-filter-inner {\n margin-top: 30px;\n margin-right: 50px;\n}\n\n.will-guests-filter-label {\n display: block;\n margin-right: 20px;\n font-weight: bold;\n \n}\n\n.will-guests-filter-inner > div {\n display: flex;\n align-items: center;\n}\n\n.will-guests-filter-count {\n margin: 0 10px;\n min-width: 30px;\n text-align: center;\n}\n\n.will-guests-filter-button {\n border-radius: 50%;\n border: none;\n background-color: var(--will-onahau);\n width: 25px;\n height: 25px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 20px;\n cursor: pointer;\n}\n\n@media (max-width: 960px) {\n\n .will-guests-filter-inner {\n width: 100%;\n margin: 15px 0;\n justify-content: space-between;\n }\n}";
7903
+ 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}";
7904
7904
  styleInject(css_248z$5);
7905
7905
 
7906
7906
  function GuestCount(_a) {
@@ -7928,7 +7928,7 @@
7928
7928
  React__default.createElement("button", { className: "will-guests-filter-button", onClick: handleIncrement }, "+"))));
7929
7929
  }
7930
7930
 
7931
- var css_248z$4 = ".will-filter-bar-guests {\n text-align: initial;\n}\n\n.will-guests-filter-title {\n font-size: 16px;\n text-transform: uppercase;\n margin: 10px 0;\n}\n\n.will-guests-filter-subtitle {\n font-size: 15px;\n font-weight: 500;\n color:var(--will-text)\n}\n\n\n.will-guests-filter-container {\n display: flex;\n flex-wrap: wrap;\n}\n\n\n@media (max-width: 960px) {\n .will-guests-filter-container {\n margin-top: 15px;\n }\n}";
7931
+ var css_248z$4 = ".will-filter-bar-guests {\r\n text-align: initial;\r\n}\r\n\r\n.will-guests-filter-title {\r\n font-size: 16px;\r\n text-transform: uppercase;\r\n margin: 10px 0;\r\n}\r\n\r\n.will-guests-filter-subtitle {\r\n font-size: 15px;\r\n font-weight: 500;\r\n color:var(--will-text)\r\n}\r\n\r\n\r\n.will-guests-filter-container {\r\n display: flex;\r\n flex-wrap: wrap;\r\n}\r\n\r\n\r\n@media (max-width: 960px) {\r\n .will-guests-filter-container {\r\n margin-top: 15px;\r\n }\r\n}";
7932
7932
  styleInject(css_248z$4);
7933
7933
 
7934
7934
  function Guests(_a) {
@@ -7941,7 +7941,7 @@
7941
7941
  category.minVal })); }))));
7942
7942
  }
7943
7943
 
7944
- var css_248z$3 = ".will-filter-bar-categories {\n text-align: center;\n}\n\n.will-categories-filter-title {\n font-size: 16px;\n text-transform: uppercase;\n margin: 10px 0 30px 0;\n}\n\n.will-categories-filter-inner {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 20px;\n}\n\n.will-categories-filter-inner input {\n cursor: pointer;\n margin-right: 10px;\n}\n";
7944
+ var css_248z$3 = ".will-filter-bar-categories {\r\n text-align: center;\r\n}\r\n\r\n.will-categories-filter-title {\r\n font-size: 16px;\r\n text-transform: uppercase;\r\n margin: 10px 0 30px 0;\r\n}\r\n\r\n.will-categories-filter-inner {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 20px;\r\n}\r\n\r\n.will-categories-filter-inner input {\r\n cursor: pointer;\r\n margin-right: 10px;\r\n}\r\n";
7945
7945
  styleInject(css_248z$3);
7946
7946
 
7947
7947
  function Categories(_a) {
@@ -8087,7 +8087,7 @@
8087
8087
  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";
8088
8088
  styleInject(css_248z$2);
8089
8089
 
8090
- var css_248z$1 = "@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');\n\n.will-root * {\n font-family: 'Montserrat', sans-serif;\n}\n\n.will-root {\n \n box-sizing: border-box;\n font-size: 14px;\n \n color: #1E1E1E;\n\n /* Pallete */\n --will-primary: #374269;\n --will-grey: #ABA7AF;\n --will-white: #fff;\n --will-onahau: #CDEEFF;\n --will-text: #5A5959;\n\n /* Confines */\n --will-box-shadow: 0px 6px 11px 0px #a7a4a480;\n\n /* Breakpoints */\n\n --will-lg: 1140px;\n --will-md: 960px;\n --will-sm: 600px;\n --will-xl: 1280px;\n --will-xs: 0px;\n}\n\n/* Typography */\n\n.will-root h1, h2, h3, h4, h5, h6 {\n font-weight: 700;\n} \n\n.will-root p, h1, h2, h3, h4, h5, h6, span {\n margin: 0;\n padding: 0;\n} \n\n/* Overrides as themes */\n\n.will-root-kis {\n --will-primary: #374269;\n}\n\n.will-root-paj {\n --will-primary: #1897D8;\n}";
8090
+ 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}";
8091
8091
  styleInject(css_248z$1);
8092
8092
 
8093
8093
  const consoleLogger = {
@@ -10433,7 +10433,7 @@
10433
10433
  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);
10434
10434
  }
10435
10435
 
10436
- var css_248z = ".will-filter-bar-close-button {\n width: auto;\n height: auto;\n background-color: var(--will-grey);\n color: var(--will-white);\n padding: 2px 7px;\n border-radius: 50%;\n cursor: pointer;\n border: none;\n display: flex;\n align-items: center;\n font-size: 25px;\n margin-left: 15px;\n display: none;\n}\n\n@media (max-width: 960px) {\n .will-filter-bar-close-button {\n min-height: 35px;\n border-radius: 25px;\n margin-left:0;\n margin-bottom: 25px;\n display: flex;\n justify-content: center;\n }\n}\n";
10436
+ 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";
10437
10437
  styleInject(css_248z);
10438
10438
 
10439
10439
  function CloseButton(_a) {
@@ -10461,8 +10461,6 @@
10461
10461
  React__default.createElement(SelectButton, { style: fontWigthBold(selectedFilter === 1 || selectedFilter === 2), label: t('calendar.startDate'), onClick: function () { return handleSelectedFilter(1); } }),
10462
10462
  React__default.createElement(Divider, null),
10463
10463
  React__default.createElement(SelectButton, { style: fontWigthBold(selectedFilter === 1 || selectedFilter === 2), label: t('calendar.endDate'), onClick: function () { return handleSelectedFilter(2); } }),
10464
- React__default.createElement(Divider, null),
10465
- React__default.createElement(SelectButton, { label: t('guests.label'), onClick: function () { return handleSelectedFilter(3); }, style: fontWigthBold(selectedFilter === 3) }),
10466
10464
  React__default.createElement(SubmitButton, { onClick: handleSubmit }),
10467
10465
  React__default.createElement(CloseButton, { handleClose: handleResetFilters })),
10468
10466
  selectedFilter && (React__default.createElement("div", { className: "will-filter-bar-container" },