willba-component-library 0.0.41 → 0.0.42
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 +65 -131
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +65 -131
- package/lib/index.js.map +1 -1
- package/lib/index.umd.js +65 -131
- package/lib/index.umd.js.map +1 -1
- package/lib/themes/useTheme.d.ts +2 -1
- package/package.json +1 -1
- package/src/components/FilterBar/FilterBar.tsx +2 -2
- package/src/themes/useTheme.tsx +50 -17
- package/src/themes/cssModules.d.ts +0 -5
package/lib/index.umd.js
CHANGED
|
@@ -116,8 +116,8 @@
|
|
|
116
116
|
}
|
|
117
117
|
}
|
|
118
118
|
|
|
119
|
-
var css_248z$
|
|
120
|
-
styleInject(css_248z$
|
|
119
|
+
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}";
|
|
120
|
+
styleInject(css_248z$9);
|
|
121
121
|
|
|
122
122
|
/**
|
|
123
123
|
* Primary UI component for user interaction
|
|
@@ -387,23 +387,23 @@
|
|
|
387
387
|
});
|
|
388
388
|
}
|
|
389
389
|
|
|
390
|
-
var css_248z$
|
|
391
|
-
styleInject(css_248z$
|
|
390
|
+
var css_248z$8 = ".filter-bar-divider {\n width: 1px;\n margin: 0 10px;\n height: 35px;\n background-color: #384265;\n}";
|
|
391
|
+
styleInject(css_248z$8);
|
|
392
392
|
|
|
393
393
|
function Divider() {
|
|
394
394
|
return React__default.createElement("div", { className: "filter-bar-divider" });
|
|
395
395
|
}
|
|
396
396
|
|
|
397
|
-
var css_248z$
|
|
398
|
-
styleInject(css_248z$
|
|
397
|
+
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";
|
|
398
|
+
styleInject(css_248z$7);
|
|
399
399
|
|
|
400
400
|
function SelectButton(_a) {
|
|
401
401
|
var label = _a.label, onClick = _a.onClick;
|
|
402
402
|
return (React__default.createElement("button", { className: "filter-bar-select-button", onClick: onClick }, label));
|
|
403
403
|
}
|
|
404
404
|
|
|
405
|
-
var css_248z$
|
|
406
|
-
styleInject(css_248z$
|
|
405
|
+
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}";
|
|
406
|
+
styleInject(css_248z$6);
|
|
407
407
|
|
|
408
408
|
function SubmitButton(_a) {
|
|
409
409
|
var onClick = _a.onClick;
|
|
@@ -5965,11 +5965,11 @@
|
|
|
5965
5965
|
React__default.createElement(Root, { initialProps: props })));
|
|
5966
5966
|
}
|
|
5967
5967
|
|
|
5968
|
-
var css_248z$
|
|
5969
|
-
styleInject(css_248z$
|
|
5968
|
+
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}";
|
|
5969
|
+
styleInject(css_248z$5);
|
|
5970
5970
|
|
|
5971
|
-
var css_248z$
|
|
5972
|
-
styleInject(css_248z$
|
|
5971
|
+
var css_248z$4 = ".filter-bar-calendar {\n display: flex;\n justify-content: center;\n}";
|
|
5972
|
+
styleInject(css_248z$4);
|
|
5973
5973
|
|
|
5974
5974
|
var currentMonth = new Date();
|
|
5975
5975
|
function Calendar(_a) {
|
|
@@ -5986,8 +5986,8 @@
|
|
|
5986
5986
|
React__default.createElement(DayPicker, { id: "test", mode: "range", numberOfMonths: 2, defaultMonth: currentMonth, selected: calendarRange, onSelect: setCalendarRange })));
|
|
5987
5987
|
}
|
|
5988
5988
|
|
|
5989
|
-
var css_248z$
|
|
5990
|
-
styleInject(css_248z$
|
|
5989
|
+
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}";
|
|
5990
|
+
styleInject(css_248z$3);
|
|
5991
5991
|
|
|
5992
5992
|
function Guests(_a) {
|
|
5993
5993
|
var guestsAdults = _a.guestsAdults, guestsKids = _a.guestsKids, decrementAdults = _a.decrementAdults, incrementAdults = _a.incrementAdults, decrementKids = _a.decrementKids, incrementKids = _a.incrementKids;
|
|
@@ -6010,8 +6010,8 @@
|
|
|
6010
6010
|
React__default.createElement("button", { onClick: incrementKids }, "+"))))));
|
|
6011
6011
|
}
|
|
6012
6012
|
|
|
6013
|
-
var css_248z$
|
|
6014
|
-
styleInject(css_248z$
|
|
6013
|
+
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";
|
|
6014
|
+
styleInject(css_248z$2);
|
|
6015
6015
|
|
|
6016
6016
|
function Categories(_a) {
|
|
6017
6017
|
_a.categories; var setCategories = _a.setCategories;
|
|
@@ -6080,105 +6080,59 @@
|
|
|
6080
6080
|
};
|
|
6081
6081
|
}
|
|
6082
6082
|
|
|
6083
|
-
|
|
6084
|
-
|
|
6085
|
-
|
|
6086
|
-
|
|
6087
|
-
|
|
6088
|
-
|
|
6089
|
-
|
|
6090
|
-
|
|
6091
|
-
|
|
6092
|
-
|
|
6093
|
-
|
|
6094
|
-
|
|
6095
|
-
|
|
6096
|
-
|
|
6097
|
-
|
|
6098
|
-
|
|
6099
|
-
|
|
6100
|
-
|
|
6101
|
-
|
|
6102
|
-
|
|
6103
|
-
|
|
6104
|
-
|
|
6105
|
-
|
|
6106
|
-
|
|
6107
|
-
|
|
6108
|
-
|
|
6109
|
-
|
|
6110
|
-
function
|
|
6111
|
-
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
6112
|
-
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
6113
|
-
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
6114
|
-
function step(op) {
|
|
6115
|
-
if (f) throw new TypeError("Generator is already executing.");
|
|
6116
|
-
while (g && (g = 0, op[0] && (_ = 0)), _) try {
|
|
6117
|
-
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;
|
|
6118
|
-
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
6119
|
-
switch (op[0]) {
|
|
6120
|
-
case 0: case 1: t = op; break;
|
|
6121
|
-
case 4: _.label++; return { value: op[1], done: false };
|
|
6122
|
-
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
6123
|
-
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
6124
|
-
default:
|
|
6125
|
-
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
6126
|
-
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
6127
|
-
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
6128
|
-
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
6129
|
-
if (t[2]) _.ops.pop();
|
|
6130
|
-
_.trys.pop(); continue;
|
|
6131
|
-
}
|
|
6132
|
-
op = body.call(thisArg, _);
|
|
6133
|
-
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
6134
|
-
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
6135
|
-
}
|
|
6136
|
-
}
|
|
6137
|
-
|
|
6138
|
-
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
6139
|
-
var e = new Error(message);
|
|
6140
|
-
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
6141
|
-
};
|
|
6142
|
-
|
|
6143
|
-
function useTheme(_a) {
|
|
6083
|
+
// import React, { useEffect, useState } from 'react'
|
|
6084
|
+
// type ThemeProps = {
|
|
6085
|
+
// vendor?: string
|
|
6086
|
+
// }
|
|
6087
|
+
// export default function useTheme({ vendor }: ThemeProps) {
|
|
6088
|
+
// const [cssLoaded, setCssLoaded] = useState(false)
|
|
6089
|
+
// useEffect(() => {
|
|
6090
|
+
// async function loadThemeCSS() {
|
|
6091
|
+
// try {
|
|
6092
|
+
// let cssUrl = ''
|
|
6093
|
+
// if (vendor === 'Kisakallio') {
|
|
6094
|
+
// cssUrl = './Kisakallio.css'
|
|
6095
|
+
// } else if (vendor === 'Pajulahti') {
|
|
6096
|
+
// cssUrl = './Pajulahti.css'
|
|
6097
|
+
// } else {
|
|
6098
|
+
// cssUrl = './Default.css'
|
|
6099
|
+
// }
|
|
6100
|
+
// await loadCSS(cssUrl)
|
|
6101
|
+
// setCssLoaded(true)
|
|
6102
|
+
// } catch (error) {
|
|
6103
|
+
// console.error('Error loading CSS:', error)
|
|
6104
|
+
// }
|
|
6105
|
+
// }
|
|
6106
|
+
// loadThemeCSS()
|
|
6107
|
+
// }, [vendor])
|
|
6108
|
+
// return cssLoaded
|
|
6109
|
+
// }
|
|
6110
|
+
function MyComponent(_a) {
|
|
6144
6111
|
var vendor = _a.vendor;
|
|
6145
|
-
var _b = React__default.useState(null), cssModule = _b[0], setCssModule = _b[1];
|
|
6146
6112
|
React__default.useEffect(function () {
|
|
6147
|
-
|
|
6148
|
-
|
|
6149
|
-
|
|
6150
|
-
|
|
6151
|
-
|
|
6152
|
-
case 0:
|
|
6153
|
-
if (!(vendor === 'Kisakallio')) return [3 /*break*/, 2];
|
|
6154
|
-
return [4 /*yield*/, Promise.resolve().then(function () { return Kisakallio; })];
|
|
6155
|
-
case 1:
|
|
6156
|
-
kisakallioCss = _a.sent();
|
|
6157
|
-
setCssModule(kisakallioCss.default);
|
|
6158
|
-
return [3 /*break*/, 5];
|
|
6159
|
-
case 2:
|
|
6160
|
-
if (!(vendor === 'Pajulahti')) return [3 /*break*/, 4];
|
|
6161
|
-
return [4 /*yield*/, Promise.resolve().then(function () { return Pajulahti; })];
|
|
6162
|
-
case 3:
|
|
6163
|
-
pajulahtiCss = _a.sent();
|
|
6164
|
-
setCssModule(pajulahtiCss.default);
|
|
6165
|
-
return [3 /*break*/, 5];
|
|
6166
|
-
case 4: return [2 /*return*/];
|
|
6167
|
-
case 5: return [2 /*return*/];
|
|
6168
|
-
}
|
|
6169
|
-
});
|
|
6170
|
-
});
|
|
6113
|
+
if (vendor === 'Kisakallio') {
|
|
6114
|
+
addCSSFile('./Kisakallio.css');
|
|
6115
|
+
}
|
|
6116
|
+
else {
|
|
6117
|
+
addCSSFile('./Default.css');
|
|
6171
6118
|
}
|
|
6172
|
-
importCss();
|
|
6173
6119
|
}, [vendor]);
|
|
6174
|
-
|
|
6175
|
-
|
|
6120
|
+
// Rest of your component code
|
|
6121
|
+
return React__default.createElement("div", null, "My Component");
|
|
6122
|
+
}
|
|
6123
|
+
var addCSSFile = function (href) {
|
|
6124
|
+
var link = document.createElement('link');
|
|
6125
|
+
link.rel = 'stylesheet';
|
|
6126
|
+
link.type = 'text/css';
|
|
6127
|
+
link.href = href;
|
|
6128
|
+
document.head.appendChild(link);
|
|
6129
|
+
};
|
|
6176
6130
|
|
|
6177
|
-
var css_248z$
|
|
6178
|
-
styleInject(css_248z$
|
|
6131
|
+
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}";
|
|
6132
|
+
styleInject(css_248z$1);
|
|
6179
6133
|
|
|
6180
|
-
var css_248z
|
|
6181
|
-
styleInject(css_248z
|
|
6134
|
+
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}";
|
|
6135
|
+
styleInject(css_248z);
|
|
6182
6136
|
|
|
6183
6137
|
const consoleLogger = {
|
|
6184
6138
|
type: 'logger',
|
|
@@ -8508,7 +8462,7 @@
|
|
|
8508
8462
|
|
|
8509
8463
|
function FilterBar(_a) {
|
|
8510
8464
|
var vendor = _a.vendor, language = _a.language;
|
|
8511
|
-
|
|
8465
|
+
var cssLoaded = MyComponent({ vendor: vendor });
|
|
8512
8466
|
var _b = React__default.useState(0); _b[0]; var setRerenderKey = _b[1];
|
|
8513
8467
|
React__default.useEffect(function () {
|
|
8514
8468
|
instance.changeLanguage(language);
|
|
@@ -8517,7 +8471,7 @@
|
|
|
8517
8471
|
}, [language]);
|
|
8518
8472
|
var t = useTranslation('filterBar').t;
|
|
8519
8473
|
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;
|
|
8520
|
-
return (React__default.createElement("div", { className: "filter-bar" },
|
|
8474
|
+
return (React__default.createElement("div", { className: "filter-bar ".concat(cssLoaded ? 'dynamic-theme-class' : '') },
|
|
8521
8475
|
React__default.createElement("div", { className: "filter-bar-header" },
|
|
8522
8476
|
React__default.createElement(SelectButton, { label: t('calendar.startDate'), onClick: function () { return handleSelectedFilter(1); } }),
|
|
8523
8477
|
React__default.createElement(Divider, null),
|
|
@@ -8533,26 +8487,6 @@
|
|
|
8533
8487
|
selectedFilter === 4 && (React__default.createElement(Categories, { categories: categories, setCategories: setCategories }))))));
|
|
8534
8488
|
}
|
|
8535
8489
|
|
|
8536
|
-
var css_248z$1 = "html {\n background-color: blue;\n}";
|
|
8537
|
-
var stylesheet$1="html {\n background-color: blue;\n}";
|
|
8538
|
-
styleInject(css_248z$1);
|
|
8539
|
-
|
|
8540
|
-
var Kisakallio = /*#__PURE__*/Object.freeze({
|
|
8541
|
-
__proto__: null,
|
|
8542
|
-
default: css_248z$1,
|
|
8543
|
-
stylesheet: stylesheet$1
|
|
8544
|
-
});
|
|
8545
|
-
|
|
8546
|
-
var css_248z = "html {\n background-color: red;\n}";
|
|
8547
|
-
var stylesheet="html {\n background-color: red;\n}";
|
|
8548
|
-
styleInject(css_248z);
|
|
8549
|
-
|
|
8550
|
-
var Pajulahti = /*#__PURE__*/Object.freeze({
|
|
8551
|
-
__proto__: null,
|
|
8552
|
-
default: css_248z,
|
|
8553
|
-
stylesheet: stylesheet
|
|
8554
|
-
});
|
|
8555
|
-
|
|
8556
8490
|
exports.Button = Button$1;
|
|
8557
8491
|
exports.FilterBar = FilterBar;
|
|
8558
8492
|
|