willba-component-library 0.1.3 → 0.1.5

package/README.md

@@ -1,57 +1,57 @@
-## Installation
-
-Willba-component-library is available as an [npm package](https://www.npmjs.com/package/willba-component-library).
-
-```sh
-// with npm
-npm install willba-component-library
-
-// with yarn
-yarn add willba-component-library
-```
-
-## Usage
-
-```jsx
-import React from 'react'
-import ReactDOM from 'react-dom'
-import { FilterBar } from 'willba-component-library'
-
-function App() {
-  return <FilterBar redirectUrl={'http://localhost:3000/'} />
-}
-
-ReactDOM.render(<App />, document.querySelector('#app'))
-```
-
-or you can add the willba-component-library using scripts:
-
-```html
-<div id="will-filter-bar" style="max-width: 1200px"></div>
-
-<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
-<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/willba-component-library@0.0.90/lib/index.umd.js"></script>
-
-<script>
-  const filterBarElement = React.createElement
-  const filterBarContainer = document.getElementById('will-filter-bar')
-  const WillFilterBar = WillbaComponentLibrary.FilterBar
-
-  ReactDOM.render(
-    filterBarElement(WillFilterBar, {
-      redirectUrl: 'http://localhost:3000/',
-    }),
-    filterBarContainer
-  )
-</script>
-```
-
-## 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.                                                                                        |
+## Installation
+
+Willba-component-library is available as an [npm package](https://www.npmjs.com/package/willba-component-library).
+
+```sh
+// with npm
+npm install willba-component-library
+
+// with yarn
+yarn add willba-component-library
+```
+
+## Usage
+
+```jsx
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { FilterBar } from 'willba-component-library'
+
+function App() {
+  return <FilterBar redirectUrl={'http://localhost:3000/'} />
+}
+
+ReactDOM.render(<App />, document.querySelector('#app'))
+```
+
+or you can add the willba-component-library using scripts:
+
+```html
+<div id="will-filter-bar" style="max-width: 1200px"></div>
+
+<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/willba-component-library@0/lib/index.umd.js"></script>
+
+<script>
+  const filterBarElement = React.createElement
+  const filterBarContainer = document.getElementById('will-filter-bar')
+  const WillFilterBar = WillbaComponentLibrary.FilterBar
+
+  ReactDOM.render(
+    filterBarElement(WillFilterBar, {
+      redirectUrl: 'http://localhost:3000/',
+    }),
+    filterBarContainer
+  )
+</script>
+```
+
+## 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.                                                                                        |

package/lib/index.esm.js

@@ -367,14 +367,14 @@ function useTranslation(ns) {
   });
 }
 
-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}";
+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 {\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";
+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) {
@@ -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 {\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";
+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";
 styleInject(css_248z$8);
 
 function SubmitButton(_a) {
@@ -7855,7 +7855,7 @@ var reactResponsiveExports = reactResponsive.exports;
 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}";
 styleInject(css_248z$7);
 
-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";
+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";
 styleInject(css_248z$6);
 
 var currentMonth = new Date();
@@ -7878,7 +7878,7 @@ function Calendar(_a) {
             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 }))));
 }
 
-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}";
+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}";
 styleInject(css_248z$5);
 
 function GuestCount(_a) {
@@ -7906,7 +7906,7 @@ function GuestCount(_a) {
             React__default__default.createElement("button", { className: "will-guests-filter-button", onClick: handleIncrement }, "+"))));
 }
 
-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}";
+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}";
 styleInject(css_248z$4);
 
 function Guests(_a) {
@@ -7919,7 +7919,7 @@ function Guests(_a) {
                 category.minVal })); }))));
 }
 
-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";
+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";
 styleInject(css_248z$3);
 
 function Categories(_a) {
@@ -8065,7 +8065,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\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";
 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');\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}";
+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}";
 styleInject(css_248z$1);
 
 const consoleLogger = {
@@ -10411,7 +10411,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 {\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";
+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";
 styleInject(css_248z);
 
 function CloseButton(_a) {