willba-component-library 0.2.88 → 0.2.90

package/lib/index.umd.js

@@ -11726,16 +11726,6 @@
             setAgeCategoryCounts(ageCategoryCountsParam);
             setCategories(parsedCategories);
         }, []);
-        React__default.useEffect(function () {
-            // Handle hide scroll bar on mobile
-            if (typeof window === 'undefined')
-                return;
-            document.body.style.overflow =
-                selectedFilter && window.innerWidth < 960 ? 'hidden' : 'visible';
-            return function () {
-                document.body.style.overflow = 'visible';
-            };
-        }, [selectedFilter]);
         React__default.useEffect(function () {
             if (typeof window === 'undefined')
                 return;
@@ -11872,7 +11862,7 @@
         return { isMobile: isMobile, targetFilterBarRef: targetFilterBarRef };
     };
 
-    var css_248z$7 = ".will-filter-bar-select-button {\n  width: 100%;\n  height: auto;\n  background-color: transparent;\n  border: none;\n  padding: 0 20px;\n  border-radius: 20px;\n  cursor: pointer;\n  font-size: 14px;\n  text-align: initial;\n}\n\n.will-filter-bar-select-button .select-button-wrapper {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 10px;\n \n}\n\n.will-filter-bar-select-button .select-button-wrapper > div {\n  display: grid\n}\n\n.will-filter-bar-select-button .select-button-label {\n  font-weight: 600;\n}\n\n.will-filter-bar-select-button .select-button-description {\n  font-weight: 400;\n  opacity: 0.5;\n  white-space: nowrap;\n  min-height: 19px;\n }\n\n .will-filter-bar-select-button .select-button-description span {\n  font: inherit\n }\n\n .will-root.is-full-width .will-filter-bar-select-button .select-button-description {\n  overflow: hidden;\n  text-overflow: ellipsis;\n }\n\n .will-filter-bar-select-button .select-button-label.active,\n .will-filter-bar-select-button .select-button-description.active {\n  font-weight: 700;\n  font-size: 15px;\n  opacity: 1;\n\n }\n\n@media (max-width: 960px) {\n  .will-filter-bar-select-button {\n    padding: 15px 0;\n   }\n\n  .will-filter-bar-select-button:first-child {\n    padding: 0 0 15px 0;\n   }\n\n  .will-filter-bar-select-button .select-button-wrapper {\n    justify-content: center;\n    text-align: center;\n  }\n\n  .will-filter-bar-select-button .select-button-description {\n    white-space: wrap;\n   }\n\n  .will-filter-bar-select-button .select-button-divider {\n    display: none\n  }\n}\n\n\n";
+    var css_248z$7 = ".will-filter-bar-select-button {\n  width: 100%;\n  height: auto;\n  background-color: transparent;\n  border: none;\n  padding: 0 20px;\n  border-radius: 20px;\n  cursor: pointer;\n  font-size: 14px;\n  text-align: initial;\n}\n\n.will-filter-bar-select-button .select-button-wrapper {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 10px;\n \n}\n\n.will-filter-bar-select-button .select-button-wrapper > div {\n  display: grid\n}\n\n.will-filter-bar-select-button .select-button-label {\n  color: var(--will-black);\n  font-weight: 600;\n}\n\n.will-filter-bar-select-button .select-button-description {\n \n  color: var(--will-black);\n  font-weight: 400;\n  opacity: 0.5;\n  white-space: nowrap;\n  min-height: 19px;\n }\n\n .will-filter-bar-select-button .select-button-description span {\n  font: inherit\n }\n\n .will-root.is-full-width .will-filter-bar-select-button .select-button-description {\n  overflow: hidden;\n  text-overflow: ellipsis;\n }\n\n .will-filter-bar-select-button .select-button-label.active,\n .will-filter-bar-select-button .select-button-description.active {\n  font-weight: 700;\n  font-size: 15px;\n  opacity: 1;\n\n }\n\n@media (max-width: 960px) {\n  .will-filter-bar-select-button {\n    padding: 15px 0;\n   }\n\n  .will-filter-bar-select-button:first-child {\n    padding: 0 0 15px 0;\n   }\n\n  .will-filter-bar-select-button .select-button-wrapper {\n    justify-content: center;\n    text-align: center;\n  }\n\n  .will-filter-bar-select-button .select-button-description {\n    white-space: wrap;\n   }\n\n  .will-filter-bar-select-button .select-button-divider {\n    display: none\n  }\n}\n\n\n";
     styleInject(css_248z$7);
 
     var SelectButton = function (_a) {
@@ -11880,8 +11870,8 @@
         return (React__default.createElement("button", { className: "will-filter-bar-select-button", onClick: onClick },
             React__default.createElement("span", { className: "select-button-wrapper" },
                 React__default.createElement("div", null,
-                    React__default.createElement("span", { className: "select-button-label" }, label),
-                    React__default.createElement("span", { className: "select-button-description ".concat(active ? 'active' : ''), dangerouslySetInnerHTML: { __html: description } })))));
+                    React__default.createElement("p", { className: "select-button-label" }, label),
+                    React__default.createElement("p", { className: "select-button-description ".concat(active ? 'active' : ''), dangerouslySetInnerHTML: { __html: description } })))));
     };
 
     var css_248z$6 = ".will-filter-bar-tab-button {\n    width: auto;\n    height: auto;\n    padding: 10px 20px;\n    cursor: pointer;\n    border: none;\n    white-space: nowrap;\n    font-size: 16px;\n    display: flex;\n    align-items: center;\n    background-color: transparent;\n    user-select: none;\n    font-weight: 600;\n    border-radius: 50px;\n  }\n\n  .will-filter-bar-tab-button.light {\n    color: var(--will-white)\n  }\n\n  .will-filter-bar-tab-button.dark {\n    color: var(--will-black)\n  }\n\n  .will-filter-bar-tab-button.light.active,\n  .will-filter-bar-tab-button:hover {\n    background-color: var(--will-transparent-white);\n  }\n\n  .will-filter-bar-tab-button.dark.active,\n  .will-filter-bar-tab-button:hover {\n    background-color: var(--will-transparent-lavender);\n  }\n\n \n\n";
@@ -11892,7 +11882,7 @@
         return (React__default.createElement("button", { className: "will-filter-bar-tab-button ".concat(mode || 'light', " ").concat(active && 'active', " "), onClick: onClick }, label));
     };
 
-    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  justify-content: space-between;\n  margin-top: 30px;\n}\n\n.will-guests-filter-label {\n  display: block;\n  font-weight: 600;\n  margin-bottom: 10px;\n \n}\n\n.will-guests-filter-inner .will-guests-filter-counter {\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-counter-button {\n  -webkit-appearance: none;\n  appearance: none;\n  border-radius: 50%;\n  background-color: transparent;\n  border: 1px solid var(--will-grey);\n  width: 30px;\n  height: 30px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 20px;\n  cursor: pointer;\n  color: var(--will-black);\n}\n\n.will-guests-filter-counter-button:hover {\n  background-color: var(--will-onahau);\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 {\n  font-size: 18px;\n  color: var(--will-text)\n}\n\n.will-guests-filter-inner {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-top: 30px;\n}\n\n.will-guests-filter-label {\n  display: block;\n  font-weight: 600;\n  margin-bottom: 10px;\n \n}\n\n.will-guests-filter-inner .will-guests-filter-counter {\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-counter-button {\n  -webkit-appearance: none;\n  appearance: none;\n  outline: none;\n  border-radius: 50%;\n  background-color: transparent;\n  border: 1px solid var(--will-grey);\n  width: 30px;\n  height: 30px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 20px;\n  cursor: pointer;\n  color: var(--will-black);\n  position: relative;\n}\n\n.will-guests-filter-counter-button .counter-button-icon {\n  position: absolute;\n  top: 0;\n}\n\n.will-guests-filter-counter-button:hover {\n  background-color: var(--will-onahau);\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}";
     styleInject(css_248z$5);
 
     function GuestCount(_a) {
@@ -11917,9 +11907,11 @@
                         cursor: (minVal && count <= minVal) || !count ? 'initial' : 'pointer',
                         paddingBottom: '4px',
                         opacity: (minVal && count <= minVal) || !count ? 0.4 : 1,
-                    } }, "-"),
+                    } },
+                    React__default.createElement("span", { className: "counter-button-icon" }, "-")),
                 React__default.createElement("span", { className: "will-guests-filter-count" }, count),
-                React__default.createElement("button", { className: "will-guests-filter-counter-button", onClick: handleIncrement }, "+"))));
+                React__default.createElement("button", { className: "will-guests-filter-counter-button", onClick: handleIncrement },
+                    React__default.createElement("span", { className: "counter-button-icon" }, "+")))));
     }
 
     var css_248z$4 = ".will-filter-bar-guests {\n  text-align: initial;\n}\n\n.will-guests-filter-title {\n  font-size: 22px;\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-direction: column;\n  min-width: 400px;\n}\n\n\n@media (max-width: 960px) {\n  .will-guests-filter-title {\n    font-size: 18px;\n  }\n\n  .will-guests-filter-container {\n   margin-top: 15px;\n   min-width: 100%;\n  }\n}";
@@ -11964,7 +11956,7 @@
                 React__default.createElement("span", null, itm))); }))));
     };
 
-    var css_248z$1 = ".will-root {\n  z-index: 999;\n  width: fit-content;\n  min-width: 796px;\n  max-height: 100vh;\n  position: relative;\n}\n\n.will-root.is-full-width {\n  width: 100%;\n  min-width: auto;\n}\n\n.will-filter-bar {\n  box-sizing: border-box;\n  position: relative;\n}\n\n/* Tabs */\n\n.will-filter-bar-tabs {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  z-index: 222;\n  background: transparent;\n  padding: 10px;\n  gap: 10px\n}\n\n/* Header */\n.will-filter-bar-header {\n  display: flex;\n  justify-content: space-between;\n  padding: 10px;\n  position: relative;\n  z-index: 222;\n  border-radius: 40px;\n  background-color: var(--will-white);\n  \n}\n\n\n\n@media (max-width: 960px) {\n  .will-filter-bar-header {\n    flex-direction: column;\n    padding: 20px;\n    border-radius: 25px;\n  }\n}\n\n/* Container */\n\n.will-filter-bar-container {\n  background-color: var(--will-white);\n  min-height: 100px;\n  padding: 40px 20px ;\n  position: absolute;\n  top: 125px;\n  z-index: 111;\n  border-radius: 25px;\n  box-shadow: var(--will-box-shadow);\n}\n\n@media (max-width: 960px) {\n  .will-root { \n    width: 100%;\n    min-width: auto;\n    max-height: 100vh;  \n    z-index: 3;\n  }\n\n  .will-filter-bar-container {\n    margin-top: 10px;\n    top:0;\n    padding: 30px 20px;\n    position: relative;\n  }\n}\n\n/* Common */\n\n.will-filter-bar-header.dark,\n.will-filter-bar-container.dark {\n  box-shadow: var(--will-box-shadow-dark)\n}\n\n.will-filter-bar-header.light,\n.will-filter-bar-container.light {\n  box-shadow: var(--will-box-shadow-light)\n}\n\n";
+    var css_248z$1 = ".will-root {\n  z-index: 999;\n  width: fit-content;\n  min-width: 796px;\n  max-height: 100vh;\n  position: relative;\n}\n\n.will-root.is-full-width {\n  width: 100%;\n  min-width: auto;\n}\n\n.will-filter-bar {\n  box-sizing: border-box;\n  position: relative;\n}\n\n/* Tabs */\n\n.will-filter-bar-tabs {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  z-index: 222;\n  background: transparent;\n  padding: 10px;\n  gap: 10px\n}\n\n/* Header */\n.will-filter-bar-header {\n  display: flex;\n  justify-content: space-between;\n  padding: 10px;\n  position: relative;\n  z-index: 222;\n  border-radius: 40px;\n  background-color: var(--will-white);\n  \n}\n\n\n\n@media (max-width: 960px) {\n  .will-filter-bar-header {\n    flex-direction: column;\n    padding: 20px;\n    border-radius: 25px;\n  }\n}\n\n/* Container */\n\n.will-filter-bar-container {\n  background-color: var(--will-white);\n  min-height: 100px;\n  padding: 40px 20px ;\n  position: absolute;\n  top: 125px;\n  z-index: 111;\n  border-radius: 25px;\n  box-shadow: var(--will-box-shadow);\n}\n\n@media (max-width: 960px) {\n  .will-root { \n    width: 100%;\n    min-width: auto;\n    max-height: 100vh;  \n    z-index: 3;\n  }\n\n  .will-filter-bar-container {\n    margin-top: 10px;\n    top:0;\n    padding: 45px 20px;\n    position: relative;\n  }\n}\n\n/* Common */\n\n.will-filter-bar-header.dark,\n.will-filter-bar-container.dark {\n  box-shadow: var(--will-box-shadow-dark)\n}\n\n.will-filter-bar-header.light,\n.will-filter-bar-container.light {\n  box-shadow: var(--will-box-shadow-light)\n}\n\n";
     styleInject(css_248z$1);
 
     function FilterBar(_a) {