willba-component-library 0.1.13 → 0.1.15
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/.nvmrc +1 -1
- package/.storybook/main.ts +19 -19
- package/.storybook/preview.ts +15 -15
- package/README.md +57 -57
- package/lib/index.esm.js +13 -13
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +13 -13
- package/lib/index.js.map +1 -1
- package/lib/index.umd.js +13 -13
- package/lib/index.umd.js.map +1 -1
- package/package.json +51 -51
- package/prettier.config.js +6 -6
- package/rollup.config.mjs +61 -61
- package/src/components/Button/Button.stories.tsx +34 -34
- package/src/components/Button/Button.tsx +56 -56
- package/src/components/Button/button.css +29 -29
- package/src/components/Button/index.ts +1 -1
- package/src/components/FilterBar/FilterBar.css +83 -83
- package/src/components/FilterBar/FilterBar.stories.tsx +47 -47
- package/src/components/FilterBar/FilterBar.tsx +180 -180
- package/src/components/FilterBar/FilterBarTypes.ts +25 -25
- package/src/components/FilterBar/components/buttons/close-button/CloseButton.css +33 -33
- package/src/components/FilterBar/components/buttons/close-button/CloseButton.tsx +16 -16
- package/src/components/FilterBar/components/buttons/select-button/SelectButton.css +36 -36
- package/src/components/FilterBar/components/buttons/select-button/SelectButton.tsx +24 -24
- package/src/components/FilterBar/components/buttons/submit-button/SubmitButton.css +27 -27
- package/src/components/FilterBar/components/buttons/submit-button/SubmitButton.tsx +18 -18
- package/src/components/FilterBar/components/calendar/Calendar.css +76 -76
- package/src/components/FilterBar/components/calendar/Calendar.tsx +52 -52
- package/src/components/FilterBar/components/categories/Categories.css +21 -21
- package/src/components/FilterBar/components/categories/Categories.tsx +41 -41
- package/src/components/FilterBar/components/divider/Divider.css +14 -14
- package/src/components/FilterBar/components/divider/Divider.tsx +7 -7
- package/src/components/FilterBar/components/guests/GuestCount/GuestCount.css +53 -53
- package/src/components/FilterBar/components/guests/GuestCount/GuestCount.tsx +51 -51
- package/src/components/FilterBar/components/guests/Guests.css +27 -27
- package/src/components/FilterBar/components/guests/Guests.tsx +38 -38
- package/src/components/FilterBar/hooks/useFilterBar.tsx +106 -106
- package/src/components/FilterBar/index.ts +1 -1
- package/src/i18n.ts +25 -25
- package/src/index.ts +4 -4
- package/src/locales/en/filterBar.json +20 -20
- package/src/locales/fi/filterBar.json +20 -20
- package/src/themes/Default.css +42 -42
- package/src/themes/useTheme.tsx +24 -24
- package/stories/Button.stories.ts +50 -50
- package/stories/Button.tsx +48 -48
- package/stories/Configure.mdx +364 -364
- package/stories/Header.stories.ts +27 -27
- package/stories/Header.tsx +56 -56
- package/stories/Page.stories.ts +29 -29
- package/stories/Page.tsx +73 -73
- package/stories/assets/accessibility.svg +4 -4
- package/stories/assets/discord.svg +15 -15
- package/stories/assets/github.svg +3 -3
- package/stories/assets/tutorials.svg +12 -12
- package/stories/assets/youtube.svg +4 -4
- package/stories/button.css +30 -30
- package/stories/header.css +32 -32
- package/stories/page.css +69 -69
- package/tsconfig.json +27 -27
- package/lib/components/FilterBar/components/close-button/CloseButton.d.ts +0 -7
- package/lib/components/FilterBar/components/select-button/SelectButton.d.ts +0 -3
- package/lib/components/FilterBar/components/submit-button/SubmitButton.d.ts +0 -3
package/lib/index.umd.js
CHANGED
|
@@ -118,7 +118,7 @@
|
|
|
118
118
|
}
|
|
119
119
|
}
|
|
120
120
|
|
|
121
|
-
var css_248z$b = ".storybook-button {\
|
|
121
|
+
var css_248z$b = ".storybook-button {\n font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n font-weight: 700;\n border: 0;\n border-radius: 3em;\n cursor: pointer;\n display: inline-block;\n line-height: 1;\n}\n.storybook-button--primary {\n color: white;\n background-color: #1ea7fd;\n}\n.storybook-button--secondary {\n color: #333;\n background-color: transparent;\n box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;\n}\n.storybook-button--small {\n font-size: 12px;\n padding: 10px 16px;\n}\n.storybook-button--medium {\n font-size: 14px;\n padding: 11px 20px;\n}\n.storybook-button--large {\n font-size: 16px;\n padding: 12px 24px;\n}";
|
|
122
122
|
styleInject(css_248z$b);
|
|
123
123
|
|
|
124
124
|
/**
|
|
@@ -3829,14 +3829,14 @@
|
|
|
3829
3829
|
return date;
|
|
3830
3830
|
}
|
|
3831
3831
|
|
|
3832
|
-
var css_248z$a = ".will-filter-bar-divider {\
|
|
3832
|
+
var css_248z$a = ".will-filter-bar-divider {\n width: 1px;\n margin: 0 10px;\n height: 35px;\n background-color: #384265;\n}\n\n@media (max-width: 960px) {\n .will-filter-bar-divider {\n width: 100%;\n margin: 0 10px;\n height: 1px;\n background-color: #384265;\n }\n}";
|
|
3833
3833
|
styleInject(css_248z$a);
|
|
3834
3834
|
|
|
3835
3835
|
function Divider() {
|
|
3836
3836
|
return React__default.createElement("div", { className: "will-filter-bar-divider" });
|
|
3837
3837
|
}
|
|
3838
3838
|
|
|
3839
|
-
var css_248z$9 = ".will-filter-bar-select-button {\
|
|
3839
|
+
var css_248z$9 = ".will-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 font-size: 15px;\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@media (max-width: 960px) {\n .will-filter-bar-select-button {\n margin: 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-divider {\n display: none\n }\n}\n\n\n";
|
|
3840
3840
|
styleInject(css_248z$9);
|
|
3841
3841
|
|
|
3842
3842
|
function SelectButton(_a) {
|
|
@@ -3927,7 +3927,7 @@
|
|
|
3927
3927
|
return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 512 512"},"child":[{"tag":"path","attr":{"d":"M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"}}]})(props);
|
|
3928
3928
|
}
|
|
3929
3929
|
|
|
3930
|
-
var css_248z$8 = ".will-filter-bar-submit-button {\
|
|
3930
|
+
var css_248z$8 = ".will-filter-bar-submit-button {\n width: auto;\n height: auto;\n background-color: var(--will-primary);\n color: var(--will-white);\n padding: 10px 20px;\n border-radius: 20px;\n cursor: pointer;\n border: none;\n white-space: nowrap;\n text-transform: uppercase;\n font-size: 12px;\n display: flex;\n align-items: center;\n}\n\n.will-filter-bar-submit-button span {\n margin-right: 10px;\n display: flex;\n}\n\n@media (max-width: 960px) {\n .will-filter-bar-submit-button {\n justify-content: center;\n margin-bottom: 15px;\n }\n}\n";
|
|
3931
3931
|
styleInject(css_248z$8);
|
|
3932
3932
|
|
|
3933
3933
|
function SubmitButton(_a) {
|
|
@@ -7910,7 +7910,7 @@
|
|
|
7910
7910
|
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}";
|
|
7911
7911
|
styleInject(css_248z$7);
|
|
7912
7912
|
|
|
7913
|
-
var css_248z$6 = "/* .will-filter-bar-calendar {} */\
|
|
7913
|
+
var css_248z$6 = "/* .will-filter-bar-calendar {} */\n\n.will-calendar-filter-header {\n padding: 15px 0;\n border-bottom: 1px solid var(--will-grey);\n}\n\n.will-calendar-filter-title {\n font-size: 16px;\n text-transform: uppercase;\n margin: 10px 0;\n text-align: left;\n}\n\n.will-calendar-filter-container {\n display: flex;\n justify-content: center;\n padding-top: 20px;\n}\n\n/* Calendar overrides */\n\n.will-calendar-filter-container .DayPicker {\n font-size: 25px; /* Adjust this value to make the DayPicker bigger */\n}\n\n.will-calendar-filter-container .rdp-month {\n position: relative;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_start {\n padding-left: 70px;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_end {\n padding-right: 70px;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav {\n border: 1px solid var(--will-primary);\n border-radius: 50%;\n left: 25;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav svg {\n color: var(--will-primary);\n}\n\n\n.will-calendar-filter-container .rdp-month .rdp-caption {\n position: initial;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-caption > .rdp-caption_label,\n.will-calendar-filter-container .rdp-table .rdp-head {\n opacity: .6;\n}\n\n.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day {\n opacity: 0.7;\n}\n\n.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day.rdp-day_selected {\n background-color: var(--will-primary);\n opacity: 1;\n}\n\n@media (max-width: 960px) {\n .will-calendar-filter-container .rdp-month .rdp-nav {\n border: none;\n border-radius: initial;\n \n }\n}\n\n\n";
|
|
7914
7914
|
styleInject(css_248z$6);
|
|
7915
7915
|
|
|
7916
7916
|
var currentMonth = new Date();
|
|
@@ -7931,7 +7931,7 @@
|
|
|
7931
7931
|
React__default.createElement(DayPicker, { id: "will-calendar", mode: "range", showOutsideDays: true, numberOfMonths: !isTablet ? 2 : 1, weekStartsOn: 1, defaultMonth: currentMonth, selected: calendarRange, onSelect: setCalendarRange }))));
|
|
7932
7932
|
}
|
|
7933
7933
|
|
|
7934
|
-
var css_248z$5 = ".will-guests-filter-label, .will-guests-filter-count {\
|
|
7934
|
+
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}\n\n.will-guests-filter-inner {\n margin-top: 30px;\n margin-right: 50px;\n}\n\n.will-guests-filter-label {\n display: block;\n margin-right: 20px;\n font-weight: bold;\n \n}\n\n.will-guests-filter-inner > div {\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-button {\n border-radius: 50%;\n border: none;\n background-color: var(--will-onahau);\n width: 25px;\n height: 25px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 20px;\n cursor: pointer;\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}";
|
|
7935
7935
|
styleInject(css_248z$5);
|
|
7936
7936
|
|
|
7937
7937
|
function GuestCount(_a) {
|
|
@@ -7959,7 +7959,7 @@
|
|
|
7959
7959
|
React__default.createElement("button", { className: "will-guests-filter-button", onClick: handleIncrement }, "+"))));
|
|
7960
7960
|
}
|
|
7961
7961
|
|
|
7962
|
-
var css_248z$4 = ".will-filter-bar-guests {\
|
|
7962
|
+
var css_248z$4 = ".will-filter-bar-guests {\n text-align: initial;\n}\n\n.will-guests-filter-title {\n font-size: 16px;\n text-transform: uppercase;\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-wrap: wrap;\n}\n\n\n@media (max-width: 960px) {\n .will-guests-filter-container {\n margin-top: 15px;\n }\n}";
|
|
7963
7963
|
styleInject(css_248z$4);
|
|
7964
7964
|
|
|
7965
7965
|
function Guests(_a) {
|
|
@@ -7972,7 +7972,7 @@
|
|
|
7972
7972
|
category.minVal })); }))));
|
|
7973
7973
|
}
|
|
7974
7974
|
|
|
7975
|
-
var css_248z$3 = ".will-filter-bar-categories {\
|
|
7975
|
+
var css_248z$3 = ".will-filter-bar-categories {\n text-align: center;\n}\n\n.will-categories-filter-title {\n font-size: 16px;\n text-transform: uppercase;\n margin: 10px 0 30px 0;\n}\n\n.will-categories-filter-inner {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 20px;\n}\n\n.will-categories-filter-inner input {\n cursor: pointer;\n margin-right: 10px;\n}\n";
|
|
7976
7976
|
styleInject(css_248z$3);
|
|
7977
7977
|
|
|
7978
7978
|
function Categories(_a) {
|
|
@@ -8114,10 +8114,10 @@
|
|
|
8114
8114
|
};
|
|
8115
8115
|
}
|
|
8116
8116
|
|
|
8117
|
-
var css_248z$2 = ".will-root {\
|
|
8117
|
+
var css_248z$2 = ".will-root {\n z-index: 99999;\n width: 100%;\n max-height: 100vh;\n position: relative;\n \n}\n\n.will-filter-bar {\n box-sizing: border-box;\n position: relative;\n}\n\n.will-filter-bar-underlay {\n background-color: rgba(0,0,0,.8);\n position: absolute;\n /* top:0; */\n left: 0;\n width: 100%;\n height: 100%;\n cursor: pointer;\n min-height: 500vh;\n z-index: 88888;\n\n transform: translateY(-50%);\n}\n\n/* Header */\n.will-filter-bar-header {\n display: flex;\n justify-content: space-between;\n padding: 10px 20px;\n position: relative;\n z-index: 222;\n \n \n border-radius: 40px;\n background-color: var(--will-white);\n box-shadow: var(--will-box-shadow);\n}\n\n@media (max-width: 960px) {\n .will-filter-bar-header {\n flex-direction: column;\n padding: 20px;\n }\n}\n\n/* Container */\n\n.will-filter-bar-container {\n background-color: var(--will-white);\n min-height: 100px;\n \n padding: 90px 40px 30px 40px;\n position: absolute;\n top: 0;\n z-index: 111;\n border-radius: 25px;\n width: -webkit-fill-available;\n box-shadow: var(--will-box-shadow);\n}\n\n@media (max-width: 960px) {\n .will-root { \n overflow-y: auto;\n padding: 40px 10px;\n top: 15px;\n z-index: 0;\n }\n\n .will-filter-bar-container {\n margin-top: 20px;\n padding: 30px 40px;\n position: relative;\n }\n\n .will-root.isMobileAbsolute {\n position: relative;\n z-index: 99999;\n }\n}\n\n";
|
|
8118
8118
|
styleInject(css_248z$2);
|
|
8119
8119
|
|
|
8120
|
-
var css_248z$1 = "@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');\
|
|
8120
|
+
var css_248z$1 = "@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 /* Pallete */\n --will-primary: #374269;\n --will-secondary: #374269;\n --will-grey: #ABA7AF;\n --will-white: #fff;\n --will-onahau: #CDEEFF;\n --will-text: #5A5959;\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}";
|
|
8121
8121
|
styleInject(css_248z$1);
|
|
8122
8122
|
|
|
8123
8123
|
const consoleLogger = {
|
|
@@ -10465,7 +10465,7 @@
|
|
|
10465
10465
|
return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 512 512"},"child":[{"tag":"path","attr":{"d":"M331.3 308.7L278.6 256l52.7-52.7c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-52.7-52.7c-6.2-6.2-15.6-7.1-22.6 0-7.1 7.1-6 16.6 0 22.6l52.7 52.7-52.7 52.7c-6.7 6.7-6.4 16.3 0 22.6 6.4 6.4 16.4 6.2 22.6 0l52.7-52.7 52.7 52.7c6.2 6.2 16.4 6.2 22.6 0 6.3-6.2 6.3-16.4 0-22.6z"}},{"tag":"path","attr":{"d":"M256 76c48.1 0 93.3 18.7 127.3 52.7S436 207.9 436 256s-18.7 93.3-52.7 127.3S304.1 436 256 436c-48.1 0-93.3-18.7-127.3-52.7S76 304.1 76 256s18.7-93.3 52.7-127.3S207.9 76 256 76m0-28C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48z"}}]})(props);
|
|
10466
10466
|
}
|
|
10467
10467
|
|
|
10468
|
-
var css_248z = ".will-filter-bar-close-button {\
|
|
10468
|
+
var css_248z = ".will-filter-bar-close-button {\n width: auto;\n height: auto;\n /* background-color: var(--will-grey); */\n color: var(--will-grey);\n padding: 2px 7px;\n border-radius: 50%;\n cursor: pointer;\n border: none;\n display: flex;\n align-items: center;\n font-size: 23px;\n /* display: none; */\n\n position: absolute;\n top: 80px;\n right: 20px;\n\n min-height: 35px;\n}\n\n@media (max-width: 960px) {\n .will-filter-bar-close-button {\n top: 10px;\n right: 10px;\n\n border-radius: 25px;\n margin-left:0;\n \n display: flex;\n justify-content: center;\n }\n}\n";
|
|
10469
10469
|
styleInject(css_248z);
|
|
10470
10470
|
|
|
10471
10471
|
function CloseButton(_a) {
|
|
@@ -10505,10 +10505,10 @@
|
|
|
10505
10505
|
React__default.createElement("div", { className: "will-root ".concat(selectedFilter ? 'isMobileAbsolute' : ''), style: themePalette },
|
|
10506
10506
|
React__default.createElement("div", { className: "will-filter-bar-header", ref: targetFilterBarRef },
|
|
10507
10507
|
React__default.createElement(SelectButton, { style: fontWigthBold(selectedFilter === 1 || selectedFilter === 2), label: t('calendar.startDate'), onClick: function () { return handleSelectedFilter(1); }, date: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from)
|
|
10508
|
-
? format(calendarRange.from, 'dd
|
|
10508
|
+
? format(calendarRange.from, 'dd.MM.yyyy')
|
|
10509
10509
|
: null }),
|
|
10510
10510
|
React__default.createElement(Divider, null),
|
|
10511
|
-
React__default.createElement(SelectButton, { style: fontWigthBold(selectedFilter === 1 || selectedFilter === 2), label: t('calendar.endDate'), onClick: function () { return handleSelectedFilter(2); }, date: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) ? format(calendarRange.to, 'dd
|
|
10511
|
+
React__default.createElement(SelectButton, { style: fontWigthBold(selectedFilter === 1 || selectedFilter === 2), label: t('calendar.endDate'), onClick: function () { return handleSelectedFilter(2); }, date: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) ? format(calendarRange.to, 'dd.MM.yyyy') : null }),
|
|
10512
10512
|
React__default.createElement(SubmitButton, { onClick: handleSubmit })),
|
|
10513
10513
|
selectedFilter && (React__default.createElement("div", { className: "will-filter-bar-container" },
|
|
10514
10514
|
React__default.createElement(CloseButton, { handleClose: function () { return handleSelectedFilter(false); } }),
|