willba-component-library 0.1.70 → 0.1.73

package/lib/index.umd.js

@@ -470,7 +470,7 @@
         return themePalette;
     }
 
-    var css_248z$b = "@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  /* Palette */\n  --will-primary: #374269;\n  --will-secondary: #374269;\n  --will-grey: #ABA7AF;\n  --will-white: #fff;\n  --will-black: #000;\n  --will-onahau: #CDEEFF;\n  --will-text: #5A5959;\n  --will-transparent-white: rgba(255, 255, 255, 0.30);\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}";
+    var css_248z$b = "@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  /* Palette */\n  --will-primary: #374269;\n  --will-secondary: #374269;\n  --will-grey: #ABA7AF;\n  --will-white: #fff;\n  --will-black: #000;\n  --will-onahau: #CDEEFF;\n  --will-text: #5A5959;\n  --will-transparent-white: rgba(255, 255, 255, 0.30);\n  --will-transparent-black: rgba(171, 167, 175, 0.30);\n\n  /* Confines */\n  --will-box-shadow-dark: 0px 2px 12px 2px #a1a1a180;\n  --will-box-shadow-light: 0px 2px 12px 2px #bcb9b980;\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}";
     styleInject(css_248z$b);
 
     function _typeof(o) {
@@ -3960,7 +3960,7 @@
     })(Pages || (Pages = {}));
 
     var useFilterBar = function (_a) {
-        var redirectUrl = _a.redirectUrl, currentViewApply = _a.currentViewApply, ageCategories = _a.ageCategories, onSubmit = _a.onSubmit;
+        var redirectUrl = _a.redirectUrl, currentViewApply = _a.currentViewApply, ageCategories = _a.ageCategories, onSubmit = _a.onSubmit, defaultTab = _a.defaultTab;
         var _b = __read(React__default.useState(Pages.EVENTS), 2), selectedPath = _b[0], setSelectedPath = _b[1];
         var _c = __read(React__default.useState(false), 2), selectedFilter = _c[0], setSelectedFilter = _c[1];
         var _d = __read(React__default.useState(), 2), calendarRange = _d[0], setCalendarRange = _d[1];
@@ -3995,9 +3995,12 @@
             // Handle default selected tab
             if (typeof window === 'undefined')
                 return;
-            var currentPath = window.location.pathname.includes(Pages.EVENTS)
+            console.log(defaultTab);
+            var currentPath = defaultTab === Pages.EVENTS ||
+                window.location.pathname.includes(Pages.EVENTS)
                 ? Pages.EVENTS
-                : window.location.pathname.includes(Pages.ROOMS)
+                : defaultTab === Pages.ROOMS ||
+                    window.location.pathname.includes(Pages.ROOMS)
                     ? Pages.ROOMS
                     : Pages.EVENTS;
             setSelectedPath(currentPath);
@@ -6656,12 +6659,12 @@
             t('submit.label')));
     };
 
-    var css_248z$7 = ".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    color: var(--will-white)\n  }\n\n \n  .will-filter-bar-tab-button:hover {\n    background-color: var(--will-transparent-white);\n  }\n\n  .will-filter-bar-tab-button.active {\n    background-color: var(--will-transparent-white);\n   \n  }";
+    var css_248z$7 = ".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-black);\n  }\n\n \n\n";
     styleInject(css_248z$7);
 
     var TabButton = function (_a) {
-        var onClick = _a.onClick, label = _a.label, active = _a.active;
-        return (React__default.createElement("button", { className: "will-filter-bar-tab-button ".concat(active && 'active'), onClick: onClick }, label));
+        var onClick = _a.onClick, label = _a.label, active = _a.active, mode = _a.mode;
+        return (React__default.createElement("button", { className: "will-filter-bar-tab-button ".concat(mode || 'dark', " ").concat(active && 'active', " "), onClick: onClick }, label));
     };
 
     var css_248z$6 = ".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  border-radius: 50%;\n  border: none;\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}\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}";
@@ -11067,22 +11070,20 @@
     styleInject(css_248z$3);
 
     var Calendar = React__default.forwardRef(function (_a, ref) {
-        var calendarRange = _a.calendarRange, setCalendarRange = _a.setCalendarRange; _a.calendarOffset; _a.selectedPath; var locale = _a.locale;
+        var _b;
+        var calendarRange = _a.calendarRange, setCalendarRange = _a.setCalendarRange, calendarOffset = _a.calendarOffset, selectedPath = _a.selectedPath, locale = _a.locale;
         var isTablet = reactResponsiveExports.useMediaQuery({ maxWidth: 960 });
         React__default.useEffect(function () {
             if (!calendarRange)
                 setCalendarRange(undefined);
         }, []);
         var today = startOfDay(new Date());
-        // const daysToOffsetCalendar =
-        //   calendarOffset && typeof calendarOffset === 'object'
-        //     ? Object.entries(calendarOffset).find(
-        //         (page) => selectedPath.substring(1) === page[0]
-        //       )
-        //     : null
+        var daysToOffsetCalendar = calendarOffset
+            ? (_b = Object.entries(calendarOffset)) === null || _b === void 0 ? void 0 : _b.find(function (page) { return selectedPath.substring(1) === page[0]; })
+            : null;
         var disabledDays = [
             {
-                from: addDays(today, -2),
+                from: addDays(today, !!(daysToOffsetCalendar === null || daysToOffsetCalendar === void 0 ? void 0 : daysToOffsetCalendar.length) ? daysToOffsetCalendar[1] : -2),
                 to: addDays(today, -100),
             },
         ];
@@ -11127,11 +11128,11 @@
                 React__default.createElement("span", null, itm))); }))));
     };
 
-    var css_248z = ".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  box-shadow: 0px 3px 10px 0px lightgrey; \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";
+    var css_248z = ".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";
     styleInject(css_248z);
 
     function FilterBar(_a) {
-        var language = _a.language, _b = _a.ageCategories, ageCategories = _b === void 0 ? AGE_CATEGORIES_FALLBACK : _b, _c = _a.redirectUrl, redirectUrl = _c === void 0 ? REDIRECT_URL_FALLBACK : _c, palette = _a.palette, currentViewApply = _a.currentViewApply, onSubmit = _a.onSubmit, fullWidth = _a.fullWidth, calendarOffset = _a.calendarOffset;
+        var language = _a.language, _b = _a.ageCategories, ageCategories = _b === void 0 ? AGE_CATEGORIES_FALLBACK : _b, _c = _a.redirectUrl, redirectUrl = _c === void 0 ? REDIRECT_URL_FALLBACK : _c, palette = _a.palette, currentViewApply = _a.currentViewApply, onSubmit = _a.onSubmit, fullWidth = _a.fullWidth, calendarOffset = _a.calendarOffset, mode = _a.mode, defaultTab = _a.defaultTab;
         var themePalette = useTheme({ palette: palette });
         // Translations
         useUpdateTranslations({ language: language });
@@ -11142,6 +11143,7 @@
             currentViewApply: currentViewApply,
             ageCategories: ageCategories,
             onSubmit: onSubmit,
+            defaultTab: defaultTab,
         }), selectedFilter = _d.selectedFilter, ageCategoryCounts = _d.ageCategoryCounts, categories = _d.categories, calendarRange = _d.calendarRange, selectedPath = _d.selectedPath, setCalendarRange = _d.setCalendarRange, setCategories = _d.setCategories, handleSelectedFilter = _d.handleSelectedFilter, handleSubmit = _d.handleSubmit, updateGuestsCount = _d.updateGuestsCount, setSelectedPath = _d.setSelectedPath, handleResetFilters = _d.handleResetFilters;
         // Default selected tab when tabs are hidden
         React__default.useEffect(function () {
@@ -11174,11 +11176,11 @@
             !currentViewApply && (React__default.createElement("div", { className: "will-filter-bar-tabs", ref: !currentViewApply ? targetFilterBarRef : null },
                 React__default.createElement(TabButton, { label: t('tabs.events'), onClick: function () {
                         setSelectedPath(Pages.EVENTS), handleResetFilters();
-                    }, active: selectedPath === Pages.EVENTS }),
+                    }, active: selectedPath === Pages.EVENTS, mode: mode }),
                 React__default.createElement(TabButton, { label: t('tabs.rooms'), onClick: function () {
                         setSelectedPath(Pages.ROOMS), handleResetFilters();
-                    }, active: selectedPath === Pages.ROOMS }))),
-            React__default.createElement("div", { className: "will-filter-bar-header", ref: currentViewApply ? targetFilterBarRef : null },
+                    }, active: selectedPath === Pages.ROOMS, mode: mode }))),
+            React__default.createElement("div", { className: "will-filter-bar-header ".concat(mode || 'dark'), ref: currentViewApply ? targetFilterBarRef : null },
                 React__default.createElement(SelectButton, { label: t('calendar.label'), description: parsedDates
                         ? parsedDates
                         : selectedPath === Pages.ROOMS
@@ -11188,7 +11190,7 @@
                     React__default.createElement(Divider, null),
                     React__default.createElement(SelectButton, { label: t('guests.label'), description: parsedGuests.content, onClick: function () { return handleSelectedFilter(FilterSections.GUESTS); }, active: !!parsedGuests.data.total }))),
                 React__default.createElement(SubmitButton, { onClick: handleSubmit })),
-            selectedFilter && (React__default.createElement("div", { className: "will-filter-bar-container", style: currentViewApply && !isMobile ? { top: 66 } : {} },
+            selectedFilter && (React__default.createElement("div", { className: "will-filter-bar-container ".concat(mode || 'dark'), style: currentViewApply && !isMobile ? { top: 66 } : {} },
                 React__default.createElement(CloseButton, { handleClose: function () { return handleSelectedFilter(false); } }),
                 selectedFilter === FilterSections.CALENDAR && (React__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange, ref: filtersRef, calendarOffset: calendarOffset, selectedPath: selectedPath, locale: language })),
                 selectedFilter === FilterSections.GUESTS && (React__default.createElement(Guests, { updateGuestsCount: updateGuestsCount, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts, ref: filtersRef })),