@geotab/zenith 3.5.0 → 3.6.0-beta.0

package/esm/filtersBar/components/filtersBarDropdown/filtersBarDropdown.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo, useRef, useState } from "react";
+import { useCallback, useId, useMemo, useRef, useState } from "react";
 import { SidePanelCell } from "../../../sidePanel/sidePanelCell/sidePanelCell";
 import { Dropdown, TRANSLATIONS as DropdownTranslations } from "../../../dropdown/dropdown";
 import { FiltersBarSidePanelRadioGroup } from "../../filtersBarSidePanel/components/filtersBarSidePanelRadioGroup/filtersBarSidePanelRadioGroup";
 import { FiltersBarSidePanelCheckboxGroup } from "../../filtersBarSidePanel/components/filtersBarSidePanelCheckboxGroup/filtersBarSidePanelCheckboxGroup";
-import { useUniqueId } from "../../../commonHelpers/useUniqueId";
 import { PillBox } from "../../../pillBox/pillBox";
 import { classNames } from "../../../commonHelpers/classNames/classNames";
 import { useLanguage } from "../../../utils/localization/useLanguage";
@@ -21,11 +20,11 @@ export const FiltersBarDropdown = ({ sidePanelTitle, className, props, state, us
     const isCurrentAllSelected = useMemo(() => isFullSelectionMode ? state.isAllSelected : undefined, [isFullSelectionMode, state]);
     const [_, setNamedFnReady] = useState(false);
     const namedItemsFnRef = useRef(items => items.map(el => ({ id: el, name: "..." })));
-    const dropdownId = useUniqueId();
-    const checkBoxLabelledId = useUniqueId();
-    const radioGroupLabelledId = useUniqueId();
-    const dropdownLabelledId = useUniqueId();
     const sidePanelCellRef = useRef(null);
+    const dropdownId = useId();
+    const checkBoxLabelledId = useId();
+    const radioGroupLabelledId = useId();
+    const dropdownLabelledId = useId();
     const sortedItems = useMemo(() => sortDropdownItemArray(props.dataItems || [], props.sortFn), [props.sortFn, props.dataItems]);
     const handleFocusOnRemove = useCallback((newSelectedFirstItem) => {
         var _a, _b, _c;

package/esm/filtersBar/components/filtersBarGroupButton/filtersBarGroupButton.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useId } from "react";
 import { classNames } from "../../../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../../../commonHelpers/useUniqueId";
 import { GroupButton } from "../../../groupButton/groupButton";
 import { SidePanelCell } from "../../../sidePanel/sidePanelCell/sidePanelCell";
 export const FiltersBarGroupButton = ({ className, state, props, onChange: onChangeState, useSidePanelView, sidePanelTitle }) => {
     const groupData = props.groupData;
-    const groupButtonLabelledId = useUniqueId();
+    const groupButtonLabelledId = useId();
     const fullGroupData = groupData.map(item => (Object.assign(Object.assign({}, item), { selected: item.value === state.selectedValue })));
     const onChangeEvent = (event) => {
         const value = event.target.value;

package/esm/filtersBar/components/filtersBarGroupsFilter/filtersBarGroupsFilter.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { GroupsFilter } from "../../../groupsFilter/groupsFilter";
 import { SidePanelCell } from "../../../sidePanel/sidePanelCell/sidePanelCell";
-import { useUniqueId } from "../../../commonHelpers/useUniqueId";
+import { useId } from "react";
 export const FiltersBarGroupsFilter = ({ props, state, sidePanelTitle, useSidePanelView, onChange: onChangeState }) => {
     const component = _jsx(GroupsFilter, Object.assign({}, props, { fullSize: useSidePanelView, initialFilterState: state.value, onChange: (value) => onChangeState({ value }) }));
-    const groupFilterLabelledId = useUniqueId();
+    const groupFilterLabelledId = useId();
     if (!useSidePanelView) {
         return component;
     }

package/esm/filtersBar/components/filtersBarPeriodPicker/filtersBarPeriodPicker.d.ts

@@ -35,8 +35,8 @@ interface IFiltersBarPeriodPickerImp extends IFiltersBarItem<IDateRangeValueOpti
     checkError?: (isError: boolean) => void;
     sidePanelMaxGroupedItemsLength?: number;
     /**
-    * @deprecated - will be removed in future releases
-    */
+     * @deprecated - will be removed in future releases
+     */
     hasApplyButton?: boolean;
 }
 export interface IFiltersBarPeriodPicker extends Omit<IFiltersBarPeriodPickerImp, "onChange"> {
@@ -50,8 +50,8 @@ interface IFiltersBarPeriodPickerUnsetValueImp extends IFiltersBarItem<IPeriodPi
     checkError?: (isError: boolean) => void;
     sidePanelMaxGroupedItemsLength?: number;
     /**
-    * @deprecated - will be removed in future releases
-    */
+     * @deprecated - will be removed in future releases
+     */
     hasApplyButton?: boolean;
 }
 export interface IFiltersBarPeriodPickerUnsetValue extends Omit<IFiltersBarPeriodPickerUnsetValueImp, "onChange"> {

package/esm/filtersBar/components/filtersBarPeriodPicker/filtersBarPeriodPicker.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { memo, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { memo, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
 import { SidePanelCell } from "../../../sidePanel/sidePanelCell/sidePanelCell";
 import { classNames } from "../../../commonHelpers/classNames/classNames";
 import { CUSTOM_CALENDAR_ID, DateRangeInner } from "../../../dateRangeInner/dateRangeInner";
-import { useUniqueId } from "../../../commonHelpers/useUniqueId";
 import { useLanguage } from "../../../utils/localization/useLanguage";
-import { getOptionsPeriodMap, getRangeOptionsArray, getSelectedRangeFromValue } from "./getRangeOption";
+import { getOptionsPeriodMap, getRangeOptionsArray, getSelectedRangeFromValue, isDateValid, isValidDateFn } from "./getRangeOption";
 import { userFormatContext } from "../../../utils/userFormat/userFormatContext";
 import { normalizeDates } from "./normalizeDates";
 import { DateRangeRaw } from "../../../dateRangeRaw/dateRangeRaw";
@@ -14,54 +13,67 @@ export const FiltersBarPeriodPicker = ({ props, hasApplyButton, className, useSi
     const { options: optionsArg, withCalendar, timeSelect, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, lockStartDate, lockEndDate, classNamePopup } = props;
     const { translate } = useLanguage();
     const { toLocalDateTime, toReverseOffsetDateTime, weekStartsOnSunday } = useContext(userFormatContext);
-    const id = useUniqueId();
+    const id = useId();
     const optionsMap = useMemo(() => getOptionsPeriodMap(optionsArg, translate, toLocalDateTime, weekStartsOnSunday ? "Sunday" : "Monday", toReverseOffsetDateTime), [optionsArg, toLocalDateTime, toReverseOffsetDateTime, translate, weekStartsOnSunday]);
     const [selectedRange, setSelectedRange] = useState(getSelectedRangeFromValue(optionsMap, state));
-    const filterBarLabelledId = useUniqueId();
+    const filterBarLabelledId = useId();
     const [prevSelection, setPrevSelection] = useState(getSelectedRangeFromValue(optionsMap, state));
+    const datesValidation = useCallback(val => isValidDateFn(props.allowUnsetValue || false)(val), [props.allowUnsetValue]);
+    const isDatesValid = useRef(datesValidation(state));
     const getCustomRange = useCallback(() => ({ from: (prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.from) || new Date(), to: (prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.to) || new Date() }), [prevSelection]);
     const options = useMemo(() => getRangeOptionsArray(optionsArg, translate, toLocalDateTime, weekStartsOnSunday ? "Sunday" : "Monday", toReverseOffsetDateTime, withCalendar || false, prevSelection && prevSelection.label === CUSTOM_CALENDAR_ID, prevSelection ? getCustomRange : undefined), [optionsArg, translate, toLocalDateTime, weekStartsOnSunday, toReverseOffsetDateTime, withCalendar, prevSelection, getCustomRange]);
     const hasCustomOption = useMemo(() => options.find(option => option.id === CUSTOM_CALENDAR_ID) !== undefined, [options]);
-    const [customDate, setCustomDate] = useState(normalizeDates(state === null || state === void 0 ? void 0 : state.from.toISOString(), state === null || state === void 0 ? void 0 : state.to.toISOString(), disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter));
+    const [customDate, setCustomDate] = useState(normalizeDates(isDateValid(state === null || state === void 0 ? void 0 : state.from) ? state.from.toISOString() : undefined, isDateValid(state === null || state === void 0 ? void 0 : state.to) ? state.to.toISOString() : undefined, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter));
+    const handleDateRangeSelection = useCallback(
     // eslint-disable-next-line complexity
-    const handleDateRangeSelection = useCallback((val) => {
+    (val) => {
         var _a, _b;
         const selection = options.find(option => option.id === val);
         if (selection && val !== CUSTOM_CALENDAR_ID && selection.getRange) {
             const range = selection.getRange();
             const normalizedDates = normalizeDates(range.from.toISOString(), range.to.toISOString(), disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
-            const newRange = val === CUSTOM_CALENDAR_ID ?
-                { from: new Date(normalizedDates.from), to: new Date(normalizedDates.to) }
-                : range;
+            const newRange = val === CUSTOM_CALENDAR_ID ? { from: new Date(normalizedDates.from), to: new Date(normalizedDates.to) } : range;
             setCustomDate({ from: newRange.from.toISOString(), to: newRange.to.toISOString() });
             // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
             checkError && checkError(!range.from || !range.to);
             onChange(Object.assign({ label: selection.id }, newRange));
         }
         else {
-            const startDateForNormalize = ((_a = selection === null || selection === void 0 ? void 0 : selection.getRange) === null || _a === void 0 ? void 0 : _a.call(selection)) && (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label) !== val ? selection.getRange().from.toISOString() : state === null || state === void 0 ? void 0 : state.from.toISOString();
-            const endDateForNormalize = ((_b = selection === null || selection === void 0 ? void 0 : selection.getRange) === null || _b === void 0 ? void 0 : _b.call(selection)) && (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label) !== val ? selection.getRange().to.toISOString() : state === null || state === void 0 ? void 0 : state.to.toISOString();
-            const normalizedDates = normalizeDates(startDateForNormalize, endDateForNormalize, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
-            const newRange = val === CUSTOM_CALENDAR_ID ?
-                { from: new Date(normalizedDates.from), to: new Date(normalizedDates.to) }
-                : undefined;
+            const startDateForNormalize = ((_a = selection === null || selection === void 0 ? void 0 : selection.getRange) === null || _a === void 0 ? void 0 : _a.call(selection)) && (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label) !== val ? selection.getRange().from : state === null || state === void 0 ? void 0 : state.from;
+            const endDateForNormalize = ((_b = selection === null || selection === void 0 ? void 0 : selection.getRange) === null || _b === void 0 ? void 0 : _b.call(selection)) && (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label) !== val ? selection.getRange().to : state === null || state === void 0 ? void 0 : state.to;
+            if (!datesValidation(startDateForNormalize === undefined && endDateForNormalize === undefined ? undefined : { from: startDateForNormalize, to: endDateForNormalize })) {
+                console.error("Invalid Date objects provided to DateRange", { from: startDateForNormalize, to: endDateForNormalize });
+                return;
+            }
+            const normalizedDates = normalizeDates(startDateForNormalize === null || startDateForNormalize === void 0 ? void 0 : startDateForNormalize.toISOString(), endDateForNormalize === null || endDateForNormalize === void 0 ? void 0 : endDateForNormalize.toISOString(), disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
+            const newRange = val === CUSTOM_CALENDAR_ID ? { from: new Date(normalizedDates.from), to: new Date(normalizedDates.to) } : undefined;
             const newValueFrom = (newRange === null || newRange === void 0 ? void 0 : newRange.from) || new Date();
             const newValueTo = (newRange === null || newRange === void 0 ? void 0 : newRange.to) || new Date();
             setSelectedRange({ label: val, from: newValueFrom, to: newValueTo });
             setCustomDate({ from: newValueFrom.toISOString(), to: newValueTo.toISOString() });
             onChange({ label: val, from: newValueFrom, to: newValueTo });
         }
-    }, [options, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, checkError, onChange, selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label, state === null || state === void 0 ? void 0 : state.from, state === null || state === void 0 ? void 0 : state.to]);
+    }, [options, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, checkError, onChange, selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label, state === null || state === void 0 ? void 0 : state.from, state === null || state === void 0 ? void 0 : state.to, datesValidation]);
     useEffect(() => {
         const currentState = getSelectedRangeFromValue(optionsMap, state);
+        isDatesValid.current = datesValidation(state);
+        if (!datesValidation(state)) {
+            console.error("Invalid Date objects provided to DateRange", { from: state === null || state === void 0 ? void 0 : state.from, to: state === null || state === void 0 ? void 0 : state.to });
+            return;
+        }
         if ((prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.label) !== (currentState === null || currentState === void 0 ? void 0 : currentState.label)) {
             setSelectedRange(currentState);
             setPrevSelection(currentState);
         }
-        if (useSidePanelView && (defaultState === null || defaultState === void 0 ? void 0 : defaultState.label) === CUSTOM_CALENDAR_ID && (currentState === null || currentState === void 0 ? void 0 : currentState.label) === CUSTOM_CALENDAR_ID &&
+        if (useSidePanelView &&
+            (defaultState === null || defaultState === void 0 ? void 0 : defaultState.label) === CUSTOM_CALENDAR_ID &&
+            (currentState === null || currentState === void 0 ? void 0 : currentState.label) === CUSTOM_CALENDAR_ID &&
             (prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.label) === CUSTOM_CALENDAR_ID &&
-            defaultState.from.toISOString() === currentState.from.toISOString() && defaultState.to.toISOString() === currentState.to.toISOString()
-            && customDate.from && customDate.to && (customDate.from !== defaultState.from.toISOString() || customDate.to !== defaultState.to.toISOString())) {
+            defaultState.from.toISOString() === currentState.from.toISOString() &&
+            defaultState.to.toISOString() === currentState.to.toISOString() &&
+            customDate.from &&
+            customDate.to &&
+            (customDate.from !== defaultState.from.toISOString() || customDate.to !== defaultState.to.toISOString())) {
             const normalizedDates = normalizeDates(defaultState.from.toISOString(), defaultState.to.toISOString(), disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
             const newRange = { from: new Date(normalizedDates.from), to: new Date(normalizedDates.to) };
             const updatedState = { label: CUSTOM_CALENDAR_ID, from: newRange.from, to: newRange.to };
@@ -69,24 +81,50 @@ export const FiltersBarPeriodPicker = ({ props, hasApplyButton, className, useSi
             setPrevSelection(updatedState);
             setCustomDate({ from: newRange.from.toISOString(), to: newRange.to.toISOString() });
         }
-    }, [prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.label, state, defaultState, useSidePanelView, customDate.from, customDate.to,
-        disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, optionsMap]);
-    const handleCustomDate = useCallback((value) => {
+    }, [
+        prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.label,
+        state,
+        defaultState,
+        useSidePanelView,
+        customDate.from,
+        customDate.to,
+        disableFutureDates,
+        disablePastDates,
+        disableDatesBefore,
+        disableDatesAfter,
+        optionsMap,
+        datesValidation
+    ]);
+    const handleCustomDate = useCallback(value => {
         const isHasError = !value.from || !value.to;
         checkError && checkError(isHasError);
         setSelectedRange({ label: CUSTOM_CALENDAR_ID, from: lockStartDate || value.from, to: lockEndDate || (lockStartDate ? value.to || value.from : value.to) });
         setCustomDate({ from: lockStartDate || value.from, to: lockEndDate || (lockStartDate ? value.to || value.from : value.to) });
-        !isHasError && onChange({
-            label: CUSTOM_CALENDAR_ID,
-            from: new Date((lockStartDate || value.from)),
-            to: new Date((lockEndDate || (lockStartDate ? value.to || value.from : value.to)))
-        });
+        !isHasError &&
+            onChange({
+                label: CUSTOM_CALENDAR_ID,
+                from: new Date((lockStartDate || value.from)),
+                to: new Date((lockEndDate || (lockStartDate ? value.to || value.from : value.to)))
+            });
     }, [checkError, lockEndDate, lockStartDate, onChange]);
     const range = useMemo(() => ({ from: customDate.from, to: customDate.to }), [customDate.from, customDate.to]);
-    const component = useMemo(() => _jsx(_Fragment, { children: _jsx(DateRangeInnerMemo, { id: `${id}-daterange`, options: options, onOptionSelect: handleDateRangeSelection, onCalendarSelect: hasCustomOption ? handleCustomDate : undefined, selection: selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label, range: range, timeSelect: timeSelect, disableFutureDates: disableFutureDates, disablePastDates: disablePastDates, disableDatesBefore: disableDatesBefore, disableDatesAfter: disableDatesAfter }) }), [id, options, handleDateRangeSelection, hasCustomOption, handleCustomDate, selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label, range, timeSelect, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter]);
+    const component = useMemo(() => (_jsx(_Fragment, { children: _jsx(DateRangeInnerMemo, { id: `${id}-daterange`, options: options, onOptionSelect: handleDateRangeSelection, onCalendarSelect: hasCustomOption ? handleCustomDate : undefined, selection: selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label, range: range, timeSelect: timeSelect, disableFutureDates: disableFutureDates, disablePastDates: disablePastDates, disableDatesBefore: disableDatesBefore, disableDatesAfter: disableDatesAfter }) })), [
+        id,
+        options,
+        handleDateRangeSelection,
+        hasCustomOption,
+        handleCustomDate,
+        selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label,
+        range,
+        timeSelect,
+        disableFutureDates,
+        disablePastDates,
+        disableDatesBefore,
+        disableDatesAfter
+    ]);
     const popup = useMemo(() => {
         const commonProps = Object.assign(Object.assign({}, props), { hasApplyButton: useSidePanelView ? false : props.hasApplyButton || hasApplyButton, id: id, className: classNames(["zen-filters-bar-period-picker", useSidePanelView ? "zen-filters-bar-period-picker--full-width" : "", className !== null && className !== void 0 ? className : ""]), classNamePopup: classNames(["zen-filters-bar-period-picker__popup", useSidePanelView ? "zen-filters-bar-period-picker__popup--full-width" : "", classNamePopup || ""]), classNameWrapper: classNames([useSidePanelView ? "zen-filters-bar-period-picker-wrapper" : ""]), options: optionsArg });
-        return props.allowUnsetValue ? _jsx(DateRangeRaw, Object.assign({}, commonProps, { value: state, onChange: onChange, defaultValue: defaultState, allowUnsetValue: true })) : _jsx(DateRangeRaw, Object.assign({}, commonProps, { value: state, onChange: onChange, defaultValue: defaultState, allowUnsetValue: false }));
+        return props.allowUnsetValue ? (_jsx(DateRangeRaw, Object.assign({}, commonProps, { value: state, onChange: onChange, defaultValue: defaultState, allowUnsetValue: true }))) : (_jsx(DateRangeRaw, Object.assign({}, commonProps, { value: state, onChange: onChange, defaultValue: defaultState, allowUnsetValue: false })));
     }, [props, useSidePanelView, id, className, classNamePopup, optionsArg, state, onChange, defaultState, hasApplyButton]);
     if (!options.length && !hasCustomOption) {
         return "";
@@ -95,13 +133,6 @@ export const FiltersBarPeriodPicker = ({ props, hasApplyButton, className, useSi
         return popup;
     }
     const isUsePopup = options.length > sidePanelMaxGroupedItemsLength;
-    return _jsx(SidePanelCell, { role: "group", labelledBy: filterBarLabelledId, titleId: filterBarLabelledId, title: sidePanelTitle, withoutSidePaddings: !isUsePopup, children: isUsePopup ? popup : component });
+    return (_jsx(SidePanelCell, { role: "group", labelledBy: filterBarLabelledId, titleId: filterBarLabelledId, title: sidePanelTitle, withoutSidePaddings: !isUsePopup, children: isUsePopup ? popup : component }));
 };
-export const TRANSLATIONS = [
-    "Clear",
-    "Reset",
-    "Apply",
-    "Date range filter",
-    "The start date cannot be empty.",
-    "The end date cannot be empty."
-];
+export const TRANSLATIONS = ["Clear", "Reset", "Apply", "Date range filter", "The start date cannot be empty.", "The end date cannot be empty."];

package/esm/filtersBar/components/filtersBarPeriodPicker/getRangeOption.d.ts

@@ -36,6 +36,8 @@ export interface IDateRangeOptionsItem {
 }
 export declare const getRangeOptionsArray: (initialOptions: TDateRangeOption[], translate: (s: string) => string, toLocalDateTime: (date: Date | string) => Date, firstDayOfWeek?: TDayName, toReverseOffsetDateTime?: (date: Date | string) => Date, customLabel?: boolean, isPrevRangeCustom?: boolean, customGetRangeOptions?: () => IDateRange) => IDateRangeOptionsItem[];
 export declare const getOptionsPeriodMap: (initialOptions: TDateRangeOption[], translate: (s: string) => string, toLocalDateTime: (date: Date | string) => Date, firstDayOfWeek?: TDayName, toReverseOffsetDateTime?: (date: Date | string) => Date) => Map<string, IDateRangeOptionId>;
+export declare const isDateValid: (value: unknown) => value is Date;
+export declare const isValidDateFn: (allowUnsetVal: boolean) => (val: any) => boolean;
 export declare const getSelectedRangeFromValue: (optionsMap: Map<string, IDateRangeOptionId>, value?: IDateRangeValueOptionalLabel) => {
     label: string;
     from: Date;

package/esm/filtersBar/components/filtersBarPeriodPicker/getRangeOption.js

@@ -470,23 +470,23 @@ injectString("zh-Hans", "Last 30 days", "\u6700\u8FD1 30 \u5929");
 injectString("zh-TW", "Last 30 days", "\u904E\u53BB 30 \u5929");
 injectString("ro-RO", "Last 30 days", "Ultimele 30 de zile");
 const options = {
-  "Today": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => GET_TODAY_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime),
-  "Yesterday": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => GET_YESTERDAY_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime),
-  "ThisWeek": (translate, toLocalDateTime, firstDayOfWeek, toReverseOffsetDateTime) => GET_THIS_WEEK_OPTION(toLocalDateTime, translate, firstDayOfWeek, toReverseOffsetDateTime),
-  "NextWeek": (translate, toLocalDateTime, firstDayOfWeek, toReverseOffsetDateTime) => GET_NEXT_WEEK_OPTION(toLocalDateTime, translate, firstDayOfWeek, toReverseOffsetDateTime),
-  "LastWeek": (translate, toLocalDateTime, firstDayOfWeek, toReverseOffsetDateTime) => GET_LAST_WEEK_OPTION(toLocalDateTime, translate, firstDayOfWeek, toReverseOffsetDateTime),
-  "ThisMonth": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => GET_THIS_MONTH_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime),
-  "NextMonth": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => GET_NEXT_MONTH_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime),
-  "LastMonth": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => GET_LAST_MONTH_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime),
-  "LastSevenDays": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => GET_LAST_SEVEN_DAYS_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime),
-  "LastThirtyDays": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => GET_LAST_THIRTY_DAYS_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime),
-  "LastTwelveMonths": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => GET_LAST_TWELVE_MONTHS_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime),
-  "LastThreeMonths": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => GET_LAST_THREE_MONTH_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime),
-  "ThisQuarter": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => GET_THIS_QUARTER_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime),
-  "LastQuarter": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => GET_LAST_QUARTER_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime),
-  "LastYear": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => GET_LAST_YEAR_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime),
-  "ThisYear": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => GET_THIS_YEAR_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime),
-  "YearToDate": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => GET_YEAR_TO_DATE_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime)
+  Today: (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => GET_TODAY_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime),
+  Yesterday: (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => GET_YESTERDAY_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime),
+  ThisWeek: (translate, toLocalDateTime, firstDayOfWeek, toReverseOffsetDateTime) => GET_THIS_WEEK_OPTION(toLocalDateTime, translate, firstDayOfWeek, toReverseOffsetDateTime),
+  NextWeek: (translate, toLocalDateTime, firstDayOfWeek, toReverseOffsetDateTime) => GET_NEXT_WEEK_OPTION(toLocalDateTime, translate, firstDayOfWeek, toReverseOffsetDateTime),
+  LastWeek: (translate, toLocalDateTime, firstDayOfWeek, toReverseOffsetDateTime) => GET_LAST_WEEK_OPTION(toLocalDateTime, translate, firstDayOfWeek, toReverseOffsetDateTime),
+  ThisMonth: (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => GET_THIS_MONTH_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime),
+  NextMonth: (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => GET_NEXT_MONTH_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime),
+  LastMonth: (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => GET_LAST_MONTH_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime),
+  LastSevenDays: (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => GET_LAST_SEVEN_DAYS_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime),
+  LastThirtyDays: (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => GET_LAST_THIRTY_DAYS_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime),
+  LastTwelveMonths: (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => GET_LAST_TWELVE_MONTHS_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime),
+  LastThreeMonths: (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => GET_LAST_THREE_MONTH_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime),
+  ThisQuarter: (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => GET_THIS_QUARTER_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime),
+  LastQuarter: (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => GET_LAST_QUARTER_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime),
+  LastYear: (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => GET_LAST_YEAR_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime),
+  ThisYear: (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => GET_THIS_YEAR_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime),
+  YearToDate: (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => GET_YEAR_TO_DATE_OPTION(toLocalDateTime, translate, toReverseOffsetDateTime)
 };
 export function getRangeOption(option, translate, toLocalDateTime, firstDayOfWeek, toReverseOffsetDateTime) {
   if (typeof option === "string") {
@@ -503,9 +503,10 @@ export function getRangeOption(option, translate, toLocalDateTime, firstDayOfWee
 }
 const getSecondaryLabelOptions = translate => ["ThisWeek", "NextWeek", "LastWeek", "ThisMonth", "LastMonth", "NextMonth", "LastThreeMonths", "LastYear", "ThisYear", "ThisQuarter", "LastQuarter", "LastTwelveMonths", "YearToDate", translate("This week"), translate("Next week"), translate("Last week"), translate("This month"), translate("Last month"), translate("Next month"), translate("Last 3 months"), translate("Last year"), translate("This year"), translate("This quarter"), translate("Last quarter"), translate("Last 12 months"), translate("Year to date")];
 export const getRangeOptionsArray = (initialOptions, translate, toLocalDateTime, firstDayOfWeek, toReverseOffsetDateTime, customLabel, isPrevRangeCustom, customGetRangeOptions) => {
-  const optionsArray = initialOptions.map(opt => getRangeOption(opt, translate, toLocalDateTime, firstDayOfWeek, toReverseOffsetDateTime)).filter(option => !!option);
+  const optionsArray = initialOptions.map(opt => getRangeOption(opt, translate, toLocalDateTime, firstDayOfWeek, toReverseOffsetDateTime)).filter(option => option !== undefined);
   const hasCustomOption = customLabel || initialOptions.includes("Custom");
-  const customOptionIndex = optionsArray.findIndex(el => el.label === "Custom");
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  const customOptionIndex = optionsArray.findIndex(el => (el === null || el === void 0 ? void 0 : el.label) === "Custom");
   const secondaryLabelOptions = getSecondaryLabelOptions(translate);
   let customOption;
   if (customOptionIndex !== -1) {
@@ -527,7 +528,7 @@ export const getRangeOptionsArray = (initialOptions, translate, toLocalDateTime,
       hasSecondaryLabel: customOption ? customOption.hasSecondaryLabel || false : false
     });
   }
-  if (customOption && isPrevRangeCustom) {
+  if (customOption && isPrevRangeCustom && customGetRangeOptions) {
     customOption.getRange = customGetRangeOptions;
   }
   customOption && preparedOptions.push(Object.assign(Object.assign({}, customOption), {
@@ -557,10 +558,15 @@ export const getOptionsPeriodMap = (initialOptions, translate, toLocalDateTime,
   });
   return optionsMap;
 };
+export const isDateValid = value => value instanceof Date && !isNaN(value.getTime());
+export const isValidDateFn = allowUnsetVal => val => val !== undefined && isDateValid(val.from) && isDateValid(val.to) || val === undefined && allowUnsetVal;
 export const getSelectedRangeFromValue = (optionsMap, value) => {
   if (!value) {
     return undefined;
   }
+  if (!isDateValid(value.from) || !isDateValid(value.to)) {
+    return undefined;
+  }
   const currentOption = optionsMap.get(`${value.from.toISOString()}_${value.to.toISOString()}`);
   if (!currentOption || value.label === CUSTOM_CALENDAR_ID) {
     return {

package/esm/filtersBar/components/filtersBarRange/filtersBarRange.js

@@ -3,12 +3,12 @@ import { SidePanelCell } from "../../../sidePanel/sidePanelCell/sidePanelCell";
 import { Range } from "../../../range/range";
 import { FiltersBarSidePanelRange } from "../../filtersBarSidePanel/components/filtersBarSidePanelRange/filtersBarSidePanelRange";
 import { checkErrorType } from "../../../rangeRaw/utils/rangeHelper";
-import { useUniqueId } from "../../../commonHelpers/useUniqueId";
+import { useId } from "react";
 export const FiltersBarRange = ({ sidePanelTitle, props, state, useSidePanelView, onChange, checkError }) => {
     const component = _jsx(Range, Object.assign({}, props, { value: state.value, onChange: newValue => {
             onChange({ value: newValue });
         } }));
-    const rangeLabelledId = useUniqueId();
+    const rangeLabelledId = useId();
     if (!useSidePanelView) {
         return component;
     }

package/esm/filtersBar/components/filtersBarSearch/filtersBarSearch.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { SearchInputRaw } from "../../../searchInputRaw/searchInputRaw";
 import { SidePanelCell } from "../../../sidePanel/sidePanelCell/sidePanelCell";
-import { useUniqueId } from "../../../commonHelpers/useUniqueId";
+import { useId } from "react";
 export const FiltersBarSearchDisplayName = "FiltersBarSearch";
 export const FiltersBarSearch = ({ className, state, props, sidePanelTitle, useSidePanelView, onChange: onChangeState }) => {
-    const inputId = useUniqueId();
-    const filterBarLabelledId = useUniqueId();
+    const inputId = useId();
+    const filterBarLabelledId = useId();
     const component = _jsx(SearchInputRaw, Object.assign({}, props, { id: inputId, onChange: value => onChangeState({ value }), value: state.value, className: className }));
     if (!useSidePanelView) {
         return component;

package/esm/filtersBar/filtersBar.js

@@ -21,6 +21,7 @@ import { useSearchComponent } from "./filtersBarProviderSearch";
 import { useMobileTrigger } from "./filtersBarProviderTrigger";
 import { FOCUSABLE_SELECTOR } from "../utils/focusableSelector";
 import { FiltersBarDateInput } from "./components/filtersBarDateInput/filtersBarDateInput";
+import { useClientReady } from "../commonHelpers/hooks/useClientReady";
 /* eslint-enable @typescript-eslint/naming-convention */
 export const FiltersBarDisplayName = "FiltersBar";
 const getChildren = (children) => (!children
@@ -83,6 +84,7 @@ export const FiltersBar = ({ className, children, isAllFiltersVisible, hideAllFi
     const stateFromChildren = useMemo(() => getCurrentFiltersState(filterBarChildren), [filterBarChildren]);
     const [filtersBarState, dispatchFiltersBarState] = useReducer(filtersBarReducer, getInitialFiltersBarState(stateFromChildren, getDefaultFiltersState, onApplyAllFilters === undefined));
     const [sidePanelState, dispatchSidePanelState] = useReducer(sidePanelReducer, stateFromChildren);
+    const isClientReady = useClientReady();
     useEffect(() => {
         // need for dynamic items loading
         if (Object.keys(stateFromChildren).length > Object.keys(sidePanelState).length) {
@@ -114,11 +116,13 @@ export const FiltersBar = ({ className, children, isAllFiltersVisible, hideAllFi
                 return;
             }
             Children.forEach(filterBarChildren, (child) => {
-                dispatchSidePanelState({ type: StateActionType.Change, payload: { id: child.props.id, value: { state: child.props.state } } });
+                if (typeof child === "object" && "props" in child) {
+                    dispatchSidePanelState({ type: StateActionType.Change, payload: { id: child.props.id, value: { state: child.props.state } } });
+                }
             });
         }
     }, [filterBarChildren, memoizedShouldUpdate, sidePanelState, stateFromChildren]);
-    const searchChild = childrenArray.find(child => child && child.type === FiltersBarSearch);
+    const searchChild = childrenArray.find(child => child && typeof child === "object" && "type" in child && child.type === FiltersBarSearch);
     setSearchComponent(searchChild);
     useEffect(() => {
         setFiltersBarToggleAllFiltersFn(toggleAllFilters);
@@ -126,7 +130,9 @@ export const FiltersBar = ({ className, children, isAllFiltersVisible, hideAllFi
     const toggleAllFiltersCallback = useCallback((value) => {
         if (!isAllFiltersVisible && value) {
             Children.forEach(filterBarChildren, (child) => {
-                dispatchSidePanelState({ type: StateActionType.Change, payload: { id: child.props.id, value: { state: child.props.state } } });
+                if (typeof child === "object" && "props" in child) {
+                    dispatchSidePanelState({ type: StateActionType.Change, payload: { id: child.props.id, value: { state: child.props.state } } });
+                }
             });
         }
         toggleAllFilters(value);
@@ -180,7 +186,7 @@ export const FiltersBar = ({ className, children, isAllFiltersVisible, hideAllFi
         return getNumberOfChangedFilters(filtersBarState.childrenState, filtersBarState.prevChildrenState) > 0;
     }, [filtersBarState.childrenState, filtersBarState.prevChildrenState, getDefaultFiltersState, onApplyAllFilters]);
     const sidePanel = useMemo(() => {
-        const sidePanelChild = childrenArray.find(child => child && child.type === FiltersBarSidePanelContainer);
+        const sidePanelChild = childrenArray.find(child => child && typeof child === "object" && "type" in child && child.type === FiltersBarSidePanelContainer);
         if (!sidePanelChild) {
             return _jsx(FiltersBarSidePanel, { parentElement: parentElement, isOpen: isAllFiltersVisible, triggerRef: isMobile ? mobileTriggerRef || emptyFiltersRef : allFiltersRef, getDefaultFiltersState: getDefaultFiltersState, onClosePanel: onClosePanel, state: sidePanelState, onApplyAllFilters: handleApplyAllFilters(true), dispatch: dispatchSidePanelState, pillName: pillName, pillIcon: pillIcon, pillType: pillType, children: filterBarChildren });
         }
@@ -190,6 +196,9 @@ export const FiltersBar = ({ className, children, isAllFiltersVisible, hideAllFi
         pillName, pillIcon, pillType, sidePanelState, filterBarChildren]);
     const noActions = useMemo(() => isAllFiltersButtonHidden && (selectedQuantity === undefined && filtersBarState.currentNumberOfChangedFilters === 0 || selectedQuantity === 0)
         && (!isApplyButtonShown || onApplyAllFilters === undefined), [isAllFiltersButtonHidden, selectedQuantity, filtersBarState.currentNumberOfChangedFilters, isApplyButtonShown, onApplyAllFilters]);
+    if (!isClientReady) {
+        return null;
+    }
     return _jsxs(_Fragment, { children: [!isMobile && _jsxs("div", { ref: toolbarRef, className: classNames(["zen-filters-toolbar", noActions ? "zen-filters-toolbar--no-actions" : "", className !== null && className !== void 0 ? className : ""]), children: [_jsx(FiltersContainer, { children: filterBarChildren }), _jsx(FiltersBarActions, { allFiltersRef: allFiltersRef, onShowAllFilters: () => toggleAllFiltersCallback(true), onClearFilters: handleClearClick, selectedQuantity: selectedQuantity !== undefined ? selectedQuantity : filtersBarState.currentNumberOfChangedFilters, selectedQuantityToDisplay: selectedQuantity !== undefined ? selectedQuantity : filtersBarState.numberOfChangedFilters, hideAllFiltersButton: isAllFiltersButtonHidden, onApplyButtonClick: onApplyAllFilters ? handleApplyAllFilters(false) : undefined, isApplyButtonShown: isApplyButtonShown })] }), !isAllFiltersButtonHidden ? sidePanel : null] });
 };
 FiltersBar.Search = FiltersBarSearch;

package/esm/filtersBar/filtersBarProvider.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useRef } from "react";
+import { zen } from "../utils/zen";
 export const FiltersBarContext = createContext({
     setFiltersBarToggleAllFiltersFn: () => { },
     onUpdateNumberOfChangedFiltersFn: () => { }
@@ -7,10 +8,10 @@ export const FiltersBarContext = createContext({
 export const FiltersBarContextProvider = ({ value, children }) => {
     const filtersBarToggleAllFiltersRef = useRef(null);
     const setFiltersBarToggleFn = useCallback((fn) => {
-        var _a;
+        var _a, _b;
         if (((_a = filtersBarToggleAllFiltersRef.current) === null || _a === void 0 ? void 0 : _a.fn) !== fn) {
             filtersBarToggleAllFiltersRef.current = { fn: fn };
-            setTimeout(() => {
+            (_b = zen.setTimeout) === null || _b === void 0 ? void 0 : _b.call(zen, () => {
                 value.setFiltersBarToggleAllFiltersFn({ fn: fn });
             }, 0);
         }

package/esm/filtersBar/filtersBarProviderSearch.js

@@ -1,19 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useRef } from "react";
 import { getNumberOfChangedFilters } from "./utils/getNumberOfChangedFilters";
+import { zen } from "../utils/zen";
 export const SearchContext = createContext({
     setSearchComponent: () => { }
 });
 export const SearchContextProvider = ({ value, children }) => {
     const searchComponentRef = useRef(null);
     const setSearchComponentRef = useCallback((searchComponent) => {
+        var _a;
         const prevProps = searchComponentRef.current === null || !searchComponentRef.current ? undefined : searchComponentRef.current.props;
         const nextProps = !searchComponent ? undefined : searchComponent.props;
         const changedPropsNumber = prevProps && !nextProps || !prevProps && nextProps ? 1 :
             getNumberOfChangedFilters(prevProps || {}, nextProps || {});
         searchComponentRef.current = searchComponent;
         if (changedPropsNumber > 0) {
-            setTimeout(() => {
+            (_a = zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, () => {
                 value.setSearchComponent(searchComponent);
             }, 0);
         }

package/esm/filtersBar/filtersBarSidePanel/components/filtersBarSidePanelCheckboxGroup/filtersBarSidePanelCheckboxGroup.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Checkbox } from "../../../../checkbox/checkbox";
-import { useCallback } from "react";
-import { useUniqueId } from "../../../../commonHelpers/useUniqueId";
+import { useCallback, useId } from "react";
 export const FiltersBarSidePanelCheckboxGroup = ({ name, items, selectedItems, onChange }) => {
-    const reactId = useUniqueId();
+    const reactId = useId();
     const checkboxGroupName = name || reactId;
     const onChangeHandler = useCallback((event) => {
         const target = event.target;

package/esm/filtersBar/filtersBarSidePanel/components/filtersBarSidePanelRadioGroup/filtersBarSidePanelRadioGroup.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useUniqueId } from "../../../../commonHelpers/useUniqueId";
 import { RadioGroupRaw } from "../../../../radioGroupRaw/radioGroupRaw";
+import { useId } from "react";
 export const FiltersBarSidePanelRadioGroup = (props) => {
-    const name = useUniqueId();
+    const name = useId();
     return _jsx("div", { className: "zen-side-panel-radio-group", children: _jsx(RadioGroupRaw, Object.assign({}, props, { className: "zen-side-panel-radio-group__item", fullWidth: true, name: name })) });
 };

package/esm/filtersBar/filtersBarSidePanel/filtersBarSidePanel.js

@@ -7,7 +7,6 @@ import { themeContext } from "../../utils/theme/themeContext";
 import { FiltersBarRange } from "../components/filtersBarRange/filtersBarRange";
 import { FiltersBarPeriodPicker } from "../components/filtersBarPeriodPicker/filtersBarPeriodPicker";
 import { deepClone } from "../../commonHelpers/utils";
-import { createPortal } from "react-dom";
 import { Shield } from "../../shield/shield";
 import { SidePanel, SidePanelCloseReason } from "../../sidePanel/sidePanel";
 import { classNames } from "../../commonHelpers/classNames/classNames";
@@ -21,6 +20,8 @@ import { useUniqueId } from "../../commonHelpers/useUniqueId";
 import { useBodyScroll } from "../../utils/useBodyScroll";
 import { FooterButtons } from "../../footerButtons/footerButtons";
 import { Pill } from "../../pill/pill";
+import { createPortal } from "react-dom";
+import { zen } from "../../utils/zen";
 injectString("cs", "Reset All", "Obnovit v\u0161e");
 injectString("da-DK", "Reset All", "Nulstil alle");
 injectString("de", "Reset All", "Alles zur\xFCcksetzen");
@@ -173,7 +174,7 @@ export const FiltersBarSidePanel = ({
   dispatch,
   onApplyAllFilters
 }) => {
-  var _a;
+  var _a, _b, _c;
   const {
     translate
   } = useLanguage();
@@ -328,7 +329,7 @@ export const FiltersBarSidePanel = ({
             type: "tertiary-black",
             className: "zen-side-panel-filters-bar__close-button",
             icon: IconClose,
-            iconSize: "large",
+            iconSize: isMobile ? "huge" : "large",
             onClick: onClosePanel,
             iconPosition: ButtonIconPosition.Start,
             title: translate("Close")
@@ -383,7 +384,7 @@ export const FiltersBarSidePanel = ({
           })
         })]
       })
-    }), (_a = parentElement !== null && parentElement !== void 0 ? parentElement : document.fullscreenElement) !== null && _a !== void 0 ? _a : document.body)]
+    }), (_b = parentElement !== null && parentElement !== void 0 ? parentElement : (_a = zen.document) === null || _a === void 0 ? void 0 : _a.fullscreenElement) !== null && _b !== void 0 ? _b : (_c = zen.document) === null || _c === void 0 ? void 0 : _c.body)]
   });
 };
 export const FiltersBarSidePanelContainer = _ => _jsx(_Fragment, {});