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.
- package/README.md +57 -57
- package/lib/index.esm.js +9 -11
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +9 -11
- package/lib/index.js.map +1 -1
- package/lib/index.umd.js +9 -11
- package/lib/index.umd.js.map +1 -1
- package/package.json +51 -51
- package/src/components/FilterBar/FilterBar.tsx +4 -3
- package/src/components/FilterBar/FilterBarTypes.ts +25 -25
- package/src/components/FilterBar/components/calendar/Calendar.css +76 -76
- package/src/components/FilterBar/components/calendar/Calendar.tsx +54 -54
- package/src/components/FilterBar/components/categories/Categories.css +21 -21
- package/src/components/FilterBar/components/categories/Categories.tsx +41 -41
- package/src/components/FilterBar/components/close-button/CloseButton.css +26 -26
- package/src/components/FilterBar/components/close-button/CloseButton.tsx +16 -16
- package/src/components/FilterBar/components/divider/Divider.css +14 -14
- package/src/components/FilterBar/components/divider/Divider.tsx +7 -7
- package/src/components/FilterBar/components/guests/GuestCount/GuestCount.css +53 -53
- package/src/components/FilterBar/components/guests/GuestCount/GuestCount.tsx +51 -51
- package/src/components/FilterBar/components/guests/Guests.css +27 -27
- package/src/components/FilterBar/components/guests/Guests.tsx +38 -38
- package/src/components/FilterBar/components/select-button/SelectButton.css +20 -20
- package/src/components/FilterBar/components/select-button/SelectButton.tsx +15 -15
- package/src/components/FilterBar/components/submit-button/SubmitButton.css +27 -27
- package/src/components/FilterBar/components/submit-button/SubmitButton.tsx +18 -18
- package/src/components/FilterBar/hooks/useFilterBar.tsx +106 -106
- package/src/i18n.ts +25 -25
- package/src/locales/en/filterBar.json +20 -20
- package/src/locales/fi/filterBar.json +20 -20
- package/src/themes/Default.css +51 -51
- 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" },
|