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