willba-component-library 0.0.39 → 0.0.41

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/lib/index.esm.js CHANGED
@@ -94,8 +94,8 @@ function styleInject(css, ref) {
94
94
  }
95
95
  }
96
96
 
97
- var css_248z$9 = ".storybook-button {\r\n font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\r\n font-weight: 700;\r\n border: 0;\r\n border-radius: 3em;\r\n cursor: pointer;\r\n display: inline-block;\r\n line-height: 1;\r\n}\r\n.storybook-button--primary {\r\n color: white;\r\n background-color: #1ea7fd;\r\n}\r\n.storybook-button--secondary {\r\n color: #333;\r\n background-color: transparent;\r\n box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;\r\n}\r\n.storybook-button--small {\r\n font-size: 12px;\r\n padding: 10px 16px;\r\n}\r\n.storybook-button--medium {\r\n font-size: 14px;\r\n padding: 11px 20px;\r\n}\r\n.storybook-button--large {\r\n font-size: 16px;\r\n padding: 12px 24px;\r\n}";
98
- styleInject(css_248z$9);
97
+ var css_248z$b = ".storybook-button {\r\n font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\r\n font-weight: 700;\r\n border: 0;\r\n border-radius: 3em;\r\n cursor: pointer;\r\n display: inline-block;\r\n line-height: 1;\r\n}\r\n.storybook-button--primary {\r\n color: white;\r\n background-color: #1ea7fd;\r\n}\r\n.storybook-button--secondary {\r\n color: #333;\r\n background-color: transparent;\r\n box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;\r\n}\r\n.storybook-button--small {\r\n font-size: 12px;\r\n padding: 10px 16px;\r\n}\r\n.storybook-button--medium {\r\n font-size: 14px;\r\n padding: 11px 20px;\r\n}\r\n.storybook-button--large {\r\n font-size: 16px;\r\n padding: 12px 24px;\r\n}";
98
+ styleInject(css_248z$b);
99
99
 
100
100
  /**
101
101
  * Primary UI component for user interaction
@@ -365,23 +365,23 @@ function useTranslation(ns) {
365
365
  });
366
366
  }
367
367
 
368
- var css_248z$8 = ".filter-bar-divider {\n width: 1px;\n margin: 0 10px;\n height: 35px;\n background-color: #384265;\n}";
369
- styleInject(css_248z$8);
368
+ var css_248z$a = ".filter-bar-divider {\n width: 1px;\n margin: 0 10px;\n height: 35px;\n background-color: #384265;\n}";
369
+ styleInject(css_248z$a);
370
370
 
371
371
  function Divider() {
372
372
  return React__default__default.createElement("div", { className: "filter-bar-divider" });
373
373
  }
374
374
 
375
- var css_248z$7 = ".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}\n";
376
- styleInject(css_248z$7);
375
+ var css_248z$9 = ".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}\n";
376
+ styleInject(css_248z$9);
377
377
 
378
378
  function SelectButton(_a) {
379
379
  var label = _a.label, onClick = _a.onClick;
380
380
  return (React__default__default.createElement("button", { className: "filter-bar-select-button", onClick: onClick }, label));
381
381
  }
382
382
 
383
- var css_248z$6 = ".filter-bar-submit-button {\n width: auto;\n height: auto;\n background-color: #384265;\n color: #fff;\n padding: 10px 20px;\n border-radius: 20px;\n cursor: pointer;\n border: none;\n white-space: nowrap;\n}";
384
- styleInject(css_248z$6);
383
+ var css_248z$8 = ".filter-bar-submit-button {\n width: auto;\n height: auto;\n background-color: #384265;\n color: #fff;\n padding: 10px 20px;\n border-radius: 20px;\n cursor: pointer;\n border: none;\n white-space: nowrap;\n}";
384
+ styleInject(css_248z$8);
385
385
 
386
386
  function SubmitButton(_a) {
387
387
  var onClick = _a.onClick;
@@ -5943,11 +5943,11 @@ function DayPicker(props) {
5943
5943
  React__default__default.createElement(Root, { initialProps: props })));
5944
5944
  }
5945
5945
 
5946
- var css_248z$5 = ".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}";
5947
- styleInject(css_248z$5);
5946
+ 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}";
5947
+ styleInject(css_248z$7);
5948
5948
 
5949
- var css_248z$4 = ".filter-bar-calendar {\n display: flex;\n justify-content: center;\n}";
5950
- styleInject(css_248z$4);
5949
+ var css_248z$6 = ".filter-bar-calendar {\n display: flex;\n justify-content: center;\n}";
5950
+ styleInject(css_248z$6);
5951
5951
 
5952
5952
  var currentMonth = new Date();
5953
5953
  function Calendar(_a) {
@@ -5964,8 +5964,8 @@ function Calendar(_a) {
5964
5964
  React__default__default.createElement(DayPicker, { id: "test", mode: "range", numberOfMonths: 2, defaultMonth: currentMonth, selected: calendarRange, onSelect: setCalendarRange })));
5965
5965
  }
5966
5966
 
5967
- var css_248z$3 = ".filter-bar-guests {\n text-align: initial;\n}\n\n.guests-filter-container {\n display: flex;\n margin-top: 30px;\n}\n\n.guests-filter-inner {\n display: flex;\n align-items: center;\n}\n\n.guests-filter-inner:not(:last-child) {\n margin-right: 50px;\n}\n\n.guests-filter-inner > span {\n display: block;\n margin-right: 20px;\n font-weight: bold;\n}\n\n.guests-filter-inner > div {\n display: flex;\n align-items: center;\n}\n\n.guests-filter-inner > div > span {\n margin: 0 10px;\n}\n\n.guests-filter-inner > div button {\n border-radius: 50%;\n border: none;\n background-color: #CDEEFF;\n width: 25px;\n height: 25px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 20px;\n}";
5968
- styleInject(css_248z$3);
5967
+ var css_248z$5 = ".filter-bar-guests {\n text-align: initial;\n}\n\n.guests-filter-container {\n display: flex;\n margin-top: 30px;\n}\n\n.guests-filter-inner {\n display: flex;\n align-items: center;\n}\n\n.guests-filter-inner:not(:last-child) {\n margin-right: 50px;\n}\n\n.guests-filter-inner > span {\n display: block;\n margin-right: 20px;\n font-weight: bold;\n}\n\n.guests-filter-inner > div {\n display: flex;\n align-items: center;\n}\n\n.guests-filter-inner > div > span {\n margin: 0 10px;\n}\n\n.guests-filter-inner > div button {\n border-radius: 50%;\n border: none;\n background-color: #CDEEFF;\n width: 25px;\n height: 25px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 20px;\n}";
5968
+ styleInject(css_248z$5);
5969
5969
 
5970
5970
  function Guests(_a) {
5971
5971
  var guestsAdults = _a.guestsAdults, guestsKids = _a.guestsKids, decrementAdults = _a.decrementAdults, incrementAdults = _a.incrementAdults, decrementKids = _a.decrementKids, incrementKids = _a.incrementKids;
@@ -5988,8 +5988,8 @@ function Guests(_a) {
5988
5988
  React__default__default.createElement("button", { onClick: incrementKids }, "+"))))));
5989
5989
  }
5990
5990
 
5991
- var css_248z$2 = ".filter-bar-categories {\n text-align: center;\n}\n\n.categories-filter-inner {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 20px;\n}\n\n.categories-filter-inner input {\n cursor: pointer;\n margin-right: 10px;\n}\n";
5992
- styleInject(css_248z$2);
5991
+ var css_248z$4 = ".filter-bar-categories {\n text-align: center;\n}\n\n.categories-filter-inner {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 20px;\n}\n\n.categories-filter-inner input {\n cursor: pointer;\n margin-right: 10px;\n}\n";
5992
+ styleInject(css_248z$4);
5993
5993
 
5994
5994
  function Categories(_a) {
5995
5995
  _a.categories; var setCategories = _a.setCategories;
@@ -6058,11 +6058,105 @@ function useFilterBar() {
6058
6058
  };
6059
6059
  }
6060
6060
 
6061
- var css_248z$1 = ".filter-bar {\r\n box-sizing: border-box;\r\n max-width: 1100px;\r\n position: relative;\r\n}\r\n\r\n.filter-bar-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 10px 20px;\r\n position: relative;\r\n z-index: 222;\r\n \r\n border-radius: 40px;\r\n background-color: #fff;\r\n box-shadow: 0px 6px 11px 0px #a7a4a480;\r\n}\r\n\r\n.filter-bar-container {\r\n background-color: #fff;\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: 40px;\r\n width: -webkit-fill-available;\r\n box-shadow: var(--box-shadow);\r\n}";
6062
- styleInject(css_248z$1);
6061
+ /******************************************************************************
6062
+ Copyright (c) Microsoft Corporation.
6063
+
6064
+ Permission to use, copy, modify, and/or distribute this software for any
6065
+ purpose with or without fee is hereby granted.
6066
+
6067
+ THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
6068
+ REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
6069
+ AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
6070
+ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
6071
+ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
6072
+ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
6073
+ PERFORMANCE OF THIS SOFTWARE.
6074
+ ***************************************************************************** */
6075
+ /* global Reflect, Promise, SuppressedError, Symbol */
6076
+
6077
+
6078
+ function __awaiter(thisArg, _arguments, P, generator) {
6079
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
6080
+ return new (P || (P = Promise))(function (resolve, reject) {
6081
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
6082
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6083
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
6084
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
6085
+ });
6086
+ }
6087
+
6088
+ function __generator(thisArg, body) {
6089
+ var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
6090
+ return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
6091
+ function verb(n) { return function (v) { return step([n, v]); }; }
6092
+ function step(op) {
6093
+ if (f) throw new TypeError("Generator is already executing.");
6094
+ while (g && (g = 0, op[0] && (_ = 0)), _) try {
6095
+ if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
6096
+ if (y = 0, t) op = [op[0] & 2, t.value];
6097
+ switch (op[0]) {
6098
+ case 0: case 1: t = op; break;
6099
+ case 4: _.label++; return { value: op[1], done: false };
6100
+ case 5: _.label++; y = op[1]; op = [0]; continue;
6101
+ case 7: op = _.ops.pop(); _.trys.pop(); continue;
6102
+ default:
6103
+ if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
6104
+ if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
6105
+ if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
6106
+ if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
6107
+ if (t[2]) _.ops.pop();
6108
+ _.trys.pop(); continue;
6109
+ }
6110
+ op = body.call(thisArg, _);
6111
+ } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
6112
+ if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
6113
+ }
6114
+ }
6115
+
6116
+ typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
6117
+ var e = new Error(message);
6118
+ return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
6119
+ };
6063
6120
 
6064
- var css_248z = ":root {\n --primary-color: #3498db;\n --font-size: 16px;\n --box-shadow: 0px 6px 11px 0px #a7a4a480\n}\n\n* {\n box-sizing: border-box;\n}\n\nhtml {\n background-color: aqua;\n}";
6065
- styleInject(css_248z);
6121
+ function useTheme(_a) {
6122
+ var vendor = _a.vendor;
6123
+ var _b = useState(null), cssModule = _b[0], setCssModule = _b[1];
6124
+ useEffect(function () {
6125
+ function importCss() {
6126
+ return __awaiter(this, void 0, void 0, function () {
6127
+ var kisakallioCss, pajulahtiCss;
6128
+ return __generator(this, function (_a) {
6129
+ switch (_a.label) {
6130
+ case 0:
6131
+ if (!(vendor === 'Kisakallio')) return [3 /*break*/, 2];
6132
+ return [4 /*yield*/, Promise.resolve().then(function () { return Kisakallio; })];
6133
+ case 1:
6134
+ kisakallioCss = _a.sent();
6135
+ setCssModule(kisakallioCss.default);
6136
+ return [3 /*break*/, 5];
6137
+ case 2:
6138
+ if (!(vendor === 'Pajulahti')) return [3 /*break*/, 4];
6139
+ return [4 /*yield*/, Promise.resolve().then(function () { return Pajulahti; })];
6140
+ case 3:
6141
+ pajulahtiCss = _a.sent();
6142
+ setCssModule(pajulahtiCss.default);
6143
+ return [3 /*break*/, 5];
6144
+ case 4: return [2 /*return*/];
6145
+ case 5: return [2 /*return*/];
6146
+ }
6147
+ });
6148
+ });
6149
+ }
6150
+ importCss();
6151
+ }, [vendor]);
6152
+ return cssModule;
6153
+ }
6154
+
6155
+ var css_248z$3 = ".filter-bar {\r\n box-sizing: border-box;\r\n max-width: 1100px;\r\n position: relative;\r\n}\r\n\r\n.filter-bar-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 10px 20px;\r\n position: relative;\r\n z-index: 222;\r\n \r\n border-radius: 40px;\r\n background-color: #fff;\r\n box-shadow: 0px 6px 11px 0px #a7a4a480;\r\n}\r\n\r\n.filter-bar-container {\r\n background-color: #fff;\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: 40px;\r\n width: -webkit-fill-available;\r\n box-shadow: var(--box-shadow);\r\n}";
6156
+ styleInject(css_248z$3);
6157
+
6158
+ var css_248z$2 = ":root {\n --primary-color: #3498db;\n --font-size: 16px;\n --box-shadow: 0px 6px 11px 0px #a7a4a480\n}\n\n* {\n box-sizing: border-box;\n}\n\nhtml {\n background-color: aqua;\n}";
6159
+ styleInject(css_248z$2);
6066
6160
 
6067
6161
  const consoleLogger = {
6068
6162
  type: 'logger',
@@ -8391,14 +8485,16 @@ instance.use(initReactI18next).init({
8391
8485
  });
8392
8486
 
8393
8487
  function FilterBar(_a) {
8394
- // useTheme({ vendor })
8395
- _a.vendor; var language = _a.language;
8488
+ var vendor = _a.vendor, language = _a.language;
8489
+ useTheme({ vendor: vendor });
8490
+ var _b = useState(0); _b[0]; var setRerenderKey = _b[1];
8396
8491
  useEffect(function () {
8397
8492
  instance.changeLanguage(language);
8493
+ // Trigger a re-render by updating the rerenderKey
8494
+ setRerenderKey(function (prevKey) { return prevKey + 1; });
8398
8495
  }, [language]);
8399
8496
  var t = useTranslation('filterBar').t;
8400
- console.log(language, t('calendar.startDate'));
8401
- var _b = useFilterBar(), selectedFilter = _b.selectedFilter, guestsAdults = _b.guestsAdults, guestsKids = _b.guestsKids, categories = _b.categories, calendarRange = _b.calendarRange, setCalendarRange = _b.setCalendarRange, setGuestsAdults = _b.setGuestsAdults, setGuestsKids = _b.setGuestsKids, setCategories = _b.setCategories, handleSelectedFilter = _b.handleSelectedFilter, handleSubmit = _b.handleSubmit;
8497
+ var _c = useFilterBar(), selectedFilter = _c.selectedFilter, guestsAdults = _c.guestsAdults, guestsKids = _c.guestsKids, categories = _c.categories, calendarRange = _c.calendarRange, setCalendarRange = _c.setCalendarRange, setGuestsAdults = _c.setGuestsAdults, setGuestsKids = _c.setGuestsKids, setCategories = _c.setCategories, handleSelectedFilter = _c.handleSelectedFilter, handleSubmit = _c.handleSubmit;
8402
8498
  return (React__default__default.createElement("div", { className: "filter-bar" },
8403
8499
  React__default__default.createElement("div", { className: "filter-bar-header" },
8404
8500
  React__default__default.createElement(SelectButton, { label: t('calendar.startDate'), onClick: function () { return handleSelectedFilter(1); } }),
@@ -8415,5 +8511,25 @@ function FilterBar(_a) {
8415
8511
  selectedFilter === 4 && (React__default__default.createElement(Categories, { categories: categories, setCategories: setCategories }))))));
8416
8512
  }
8417
8513
 
8514
+ var css_248z$1 = "html {\n background-color: blue;\n}";
8515
+ var stylesheet$1="html {\n background-color: blue;\n}";
8516
+ styleInject(css_248z$1);
8517
+
8518
+ var Kisakallio = /*#__PURE__*/Object.freeze({
8519
+ __proto__: null,
8520
+ default: css_248z$1,
8521
+ stylesheet: stylesheet$1
8522
+ });
8523
+
8524
+ var css_248z = "html {\n background-color: red;\n}";
8525
+ var stylesheet="html {\n background-color: red;\n}";
8526
+ styleInject(css_248z);
8527
+
8528
+ var Pajulahti = /*#__PURE__*/Object.freeze({
8529
+ __proto__: null,
8530
+ default: css_248z,
8531
+ stylesheet: stylesheet
8532
+ });
8533
+
8418
8534
  export { Button$1 as Button, FilterBar };
8419
8535
  //# sourceMappingURL=index.esm.js.map