@quillsql/react 2.10.30 → 2.10.31

package/dist/esm/Dashboard.js

@@ -1,490 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useEffect, useState, useCallback, memo, } from 'react';
-import Chart from './Chart';
-import { PRIMARY_RANGE, COMPARISON_RANGE, defaultOptionsV2, COMPARISON_OPTIONS, getRangeFromPresetOptions, } from './DateRangePicker/dateRangePickerUtils';
-import { ClientContext, DashboardContext, ThemeContext, DashboardFiltersContext, DateFilterContext, useComparisonRange, useDateFilter, } from './Context';
-import { ArrowDownHeadIcon } from './assets';
-import { useDashboard } from './hooks/useDashboard';
-import { hashCode } from './utils/crypto';
-import DashboardSectionContainer from './components/Dashboard/DashboardSectionContainer';
-import QuillMetricComponent from './components/Dashboard/MetricComponent';
-import QuillTableComponent from './components/Dashboard/TableComponent';
-import QuillChartComponent from './components/Dashboard/ChartComponent';
-import DashboardSection from './components/Dashboard/DashboardSection';
-import { styleToProps } from './utils/styles';
-import { cleanDashboardItem } from './utils/dashboard';
-import { QuillDateRangePicker } from './DateRangePicker/QuillDateRangePicker';
-import DataLoader from './components/Dashboard/DataLoader';
-import { QuillSelectComponent } from './components/QuillSelect';
-import ChartSkeleton from './components/Chart/ChartSkeleton';
-export function DashboardFilter({ filter, onChangeFilter, SelectComponent, DateRangePickerComponent, theme, }) {
-    const { comparisonRange, setComparisonRange } = useComparisonRange();
-    const { setDateFilter } = useDateFilter();
-    const [filterValue, setFilterValue] = useState(null);
-    useEffect(() => {
-        if (filter.filterType === 'string') {
-            setFilterValue(filter.selectedValue);
-        }
-        if (filter.filterType == 'date_range') {
-            setDateFilter(filter.preset.label);
-            if (filter?.comparisonRange?.value) {
-                const newComparisonRange = COMPARISON_OPTIONS.find((option) => {
-                    return option.value === filter.comparisonRange.value;
-                });
-                setComparisonRange(newComparisonRange);
-            }
-            else {
-                setComparisonRange(null);
-            }
-        }
-    }, [filter]);
-    if (filter.filterType === 'string') {
-        return (_jsx(QuillSelectComponent, { theme: theme, label: filter.label, value: filterValue, onChange: (e) => {
-                onChangeFilter(filter, e);
-            }, options: [
-                ...filter.options.map((elem) => {
-                    return {
-                        label: elem[filter.labelField],
-                        value: elem[filter.field],
-                    };
-                }),
-            ] }));
-    }
-    if (filter.filterType == 'date_range') {
-        return (_jsxs("div", { style: {
-                display: 'flex',
-                flexDirection: 'row',
-                alignItems: 'flex-end',
-            }, children: [_jsx(DateRangePickerComponent, { label: filter.label, dateRange: { startDate: filter.startDate, endDate: filter.endDate }, preset: filter.preset.label, onChangeDateRange: (value) => {
-                        onChangeFilter(filter, {
-                            startDate: value.startDate,
-                            endDate: value.endDate,
-                        });
-                    }, onChangePreset: (value) => {
-                        onChangeFilter(filter, { preset: value });
-                    }, presetOptions: filter.options.map((option) => {
-                        return { label: option.label, value: option.label };
-                    }) }), comparisonRange && (_jsx("div", { children: _jsxs("div", { style: {
-                            display: 'flex',
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                        }, children: [_jsx("div", { style: {
-                                    paddingLeft: 16,
-                                    paddingRight: 12,
-                                    color: theme?.secondaryTextColor,
-                                    fontFamily: theme?.fontFamily,
-                                    fontSize: 14,
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    flex: 1,
-                                    minWidth: 80,
-                                    justifyContent: 'center',
-                                }, children: "compared to" }), _jsx(QuillSelectComponent, { theme: theme, value: comparisonRange.value, onChange: (e) => {
-                                    onChangeFilter(filter, null, COMPARISON_OPTIONS.find((option) => {
-                                        return option.value === e;
-                                    }));
-                                }, options: COMPARISON_OPTIONS.map((compareOption) => {
-                                    return {
-                                        value: compareOption.value,
-                                        label: compareOption.text,
-                                    };
-                                }) })] }) }))] }));
-    }
-    return null;
-}
-const QuillDropdownComponent = ({ onChange, value, label, options, }) => {
-    const [theme] = useContext(ThemeContext);
-    const handleOnChange = useCallback((event) => {
-        onChange(event.target.value);
-    }, [onChange]);
-    return (_jsxs("div", { children: [label && (_jsx("div", { style: {
-                    marginBottom: 6,
-                    fontWeight: theme.labelFontWeight || '600',
-                    color: theme.secondaryTextColor,
-                    fontFamily: theme.fontFamily,
-                    fontSize: 14,
-                }, children: label })), _jsxs("div", { style: { position: 'relative', height: 38 }, children: [_jsxs("select", { onChange: handleOnChange, value: value ?? '', id: 'reportbuilderdropdown', 
-                        // defaultValue="Select"
-                        style: {
-                            width: '100%',
-                            WebkitAppearance: 'none',
-                            minWidth: 230,
-                            outline: 'none',
-                            textAlign: 'left',
-                            whiteSpace: 'nowrap',
-                            overflow: 'hidden',
-                            textOverflow: 'ellipsis',
-                            borderRadius: 6,
-                            paddingLeft: 12,
-                            paddingRight: 12,
-                            height: 38,
-                            borderWidth: theme.borderWidth,
-                            borderColor: theme.borderColor,
-                            background: theme.backgroundColor,
-                            color: theme.primaryTextColor,
-                            boxShadow: '0 1px 2px 0 rgba(0,0,0,.05)',
-                            fontFamily: theme.fontFamily,
-                            fontSize: 14,
-                            fontWeight: 500,
-                            boxSizing: 'border-box',
-                        }, children: [_jsx("option", { value: "", children: "Select" }), options.map((option, index) => (_jsx("option", { value: option.value, children: option.label }, option.label + index)))] }), _jsx(ArrowDownHeadIcon, { style: {
-                            height: '20px',
-                            width: '20px',
-                            flex: 'none',
-                            position: 'absolute',
-                            right: 8,
-                            top: 9,
-                            color: theme?.secondaryTextColor,
-                        }, "aria-hidden": "true" })] })] }));
-};
-const MemoizedDropdown = memo(QuillDropdownComponent);
-const areEqual = (prevProps, nextProps) => {
-    // This function returns true if passing nextProps to render would return
-    // the same result as passing prevProps to render, otherwise it returns false
-    return (prevProps.dateRange.startDate === nextProps.dateRange.startDate &&
-        prevProps.dateRange.endDate === nextProps.dateRange.endDate);
-};
-const MemoizedDateRangePicker = memo(QuillDateRangePicker, areEqual);
-const QuillEmptyDashboardComponent = () => _jsx("div", {});
-const defaultChartContainerStyles = {
-    display: 'flex',
-    width: '100%',
-    minHeight: 300,
-    height: 300,
-};
-/**
- * Quill Dashboard.
- */
-export default function Dashboard({ name, containerStyle, chartContainerStyle = defaultChartContainerStyles, metricContainerStyle, maxColumnWidth, rowHeight, onClickDashboardItem, hideFilters, dateRangeFilterDisabled = false, SelectComponent, EmptyDashboardComponent = QuillEmptyDashboardComponent, DateRangePickerComponent, FilterButtonComponent, FilterModalComponent, onChangeLoading, MetricComponent = QuillMetricComponent, ChartComponent = QuillChartComponent, TableComponent = QuillTableComponent, SkeletonComponent = ChartSkeleton, DashboardSectionContainerComponent = DashboardSectionContainer, DashboardSectionComponent = DashboardSection, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, }) {
-    const { dateFilter } = useDateFilter();
-    const { dispatch } = useContext(DashboardContext);
-    const { isLoading: isDataLoading, data, reload, } = useDashboard(name);
-    const [dashboardSections, setDashboardSections] = useState(null);
-    const [presetFilters, setPresetFilters] = useState(null);
-    const { dashboard } = useContext(DashboardContext);
-    const [client] = useContext(ClientContext);
-    const [isLoading, setIsLoading] = useState(isDataLoading);
-    const [theme] = useContext(ThemeContext);
-    const [initialLoad, setInitialLoad] = useState(true);
-    const { dashboardFilters, dashboardFiltersDispatch } = useContext(DashboardFiltersContext);
-    const { setDateFilter } = useContext(DateFilterContext);
-    useEffect(() => {
-        setIsLoading(isDataLoading);
-    }, [isDataLoading]);
-    useEffect(() => {
-        if (!data)
-            return;
-        onDashboardDataChange(data);
-    }, [data]);
-    useEffect(() => {
-        reload();
-    }, [name, client]);
-    const onDashboardDataChange = (resp) => {
-        setDashboardSections(resp.sections);
-        setInitialLoad(false);
-        const bigFilterObj = {};
-        if (resp.dateFilter && Object.keys(resp.dateFilter).length) {
-            let presetsOptions = defaultOptionsV2;
-            if (resp.dateFilter.presetRanges) {
-                presetsOptions = resp.dateFilter.presetRanges.map((elem) => {
-                    if (!elem.isStatic) {
-                        return {
-                            label: elem.label,
-                            value: elem.value,
-                            startDate: PRIMARY_RANGE[elem.value].start,
-                            endDate: PRIMARY_RANGE[elem.value].end,
-                        };
-                    }
-                    return {
-                        label: elem.label,
-                        value: elem.value,
-                        startDate: new Date(elem.startDate),
-                        endDate: new Date(elem.endDate),
-                    };
-                });
-            }
-            setPresetFilters(presetsOptions);
-            const key = resp.dateFilter?.primaryRange?.value || 'LAST_6_MONTHS';
-            const primaryPreset = presetsOptions.find((option) => {
-                return option.value === key;
-            });
-            const filter = {
-                startDate: primaryPreset.startDate,
-                endDate: primaryPreset.endDate,
-                filterType: 'date_range',
-                options: presetsOptions.map((elem) => {
-                    return {
-                        label: elem.label,
-                        value: elem.value,
-                    };
-                }),
-                field: 'date_range',
-                label: 'Date',
-                preset: {
-                    label: primaryPreset.label,
-                },
-            };
-            if (resp.dateFilter.comparison) {
-                filter.comparison = true;
-                const compKey = resp.dateFilter.defaultComparisonRange ?? 'PREV_PERIOD';
-                const range = { start: filter.startDate, end: filter.endDate };
-                filter.comparisonRange = {
-                    startDate: COMPARISON_RANGE[compKey](range)?.start,
-                    endDate: COMPARISON_RANGE[compKey](range)?.end,
-                    value: compKey,
-                };
-            }
-            else {
-                filter.comparison = false;
-            }
-            if (hashCode(JSON.stringify(dashboardFilters?.date_range ?? '')) !==
-                hashCode(JSON.stringify(filter))) {
-                dashboardFiltersDispatch({
-                    type: 'ADD_DASHBOARD_FILTER',
-                    id: 'date_range',
-                    data: filter,
-                });
-            }
-            bigFilterObj[filter.field] = filter;
-            setDateFilter(presetsOptions.find((opt) => opt.value === resp.dateFilter.defaultPrimaryRange)?.label ?? null);
-        }
-        if (resp.filters && resp.filters.length) {
-            Object.values(resp.filters)
-                .filter((filter) => filter.filterType !== 'date')
-                .forEach((filter) => {
-                bigFilterObj[filter.field] = processFilter(filter);
-            });
-        }
-        if (hashCode(JSON.stringify(dashboardFilters)) !==
-            hashCode(JSON.stringify(bigFilterObj))) {
-            dashboardFiltersDispatch({
-                type: 'ADD_DASHBOARD_FILTERS',
-                id: 'tons',
-                data: bigFilterObj,
-            });
-        }
-    };
-    const handleOnClickDashboardItem = (elem) => {
-        if (dashboard[elem._id]?._id && onClickDashboardItem) {
-            onClickDashboardItem(dashboard[elem._id]);
-        }
-        else if (onClickDashboardItem) {
-            dispatch({
-                type: 'UPDATE_DASHBOARD_ITEM',
-                id: elem._id,
-                data: { ...elem, filtersApplied: dashboardFilters },
-            });
-            onClickDashboardItem({
-                ...dashboard[elem._id],
-                _id: elem._id,
-                error_id: elem._id,
-                name: elem.name,
-                query: elem.queryString,
-            });
-        }
-    };
-    function removeQuotes(str) {
-        if (str.startsWith('"') && str.endsWith('"')) {
-            return str.slice(1, -1);
-        }
-        else {
-            return str;
-        }
-    }
-    const processFilter = (filter, value = null) => {
-        //for dateObjects only, since values are arrays for dateObjects
-        const { selectedValue: _, ...filterWithoutSelectedValue } = filter; // _ is a throwaway variable
-        let selectedValue;
-        let selectedElem;
-        if (filter.filterType === 'string') {
-            selectedElem = filter.options.find((elem) => elem[removeQuotes(filter.field)] === value);
-            if (selectedElem) {
-                selectedValue = selectedElem[removeQuotes(filter.field)];
-            }
-            return {
-                ...filterWithoutSelectedValue,
-                ...(selectedValue ? { selectedValue } : {}),
-            };
-        }
-        if (filter.filterType === 'date' || filter.filterType === 'date_range') {
-            return {
-                startDate: value ? value[0] : filter.startDate,
-                endDate: value ? value[1] : filter.endDate,
-                filterType: 'date_range',
-                label: 'Date',
-                field: 'date_range',
-                options: filter.options,
-            };
-        }
-    };
-    const updateFilter = (filter, value = null, comparison = null) => {
-        //for dateObjects only, since values are arrays for dateObjects
-        const { selectedValue: _, ...filterWithoutSelectedValue } = filter; // _ is a throwaway variable
-        let selectedValue;
-        let selectedElem;
-        if (filter.filterType === 'string') {
-            selectedElem = filter.options.find((elem) => elem[removeQuotes(filter.field)] === value);
-            if (selectedElem) {
-                selectedValue = selectedElem[removeQuotes(filter.field)];
-            }
-            dashboardFiltersDispatch({
-                type: 'ADD_DASHBOARD_FILTER',
-                id: filter.field,
-                data: {
-                    ...filterWithoutSelectedValue,
-                    ...(selectedValue ? { selectedValue } : {}),
-                },
-            });
-            return;
-        }
-        if (filter.filterType === 'date' || filter.filterType === 'date_range') {
-            if (comparison ||
-                (filter.comparison && filter.comparisonRange.value !== 'NO_COMPARISON')) {
-                let preset = '';
-                if (comparison) {
-                    preset = filter.preset.label;
-                }
-                const key = comparison?.value || filter.comparisonRange.value;
-                let primaryRange = {
-                    start: value ? value.startDate : filter.startDate,
-                    end: value ? value.endDate : filter.endDate,
-                };
-                if (value && value.preset) {
-                    preset = value.preset;
-                    primaryRange = getRangeFromPresetOptions(value.preset, presetFilters);
-                }
-                dashboardFiltersDispatch({
-                    type: 'ADD_DASHBOARD_FILTER',
-                    id: 'date_range',
-                    data: {
-                        startDate: primaryRange.start,
-                        endDate: primaryRange.end,
-                        filterType: 'date_range',
-                        label: 'Date',
-                        field: 'date_range',
-                        preset: { label: preset },
-                        options: filter.options,
-                        comparison: true,
-                        comparisonRange: {
-                            startDate: COMPARISON_RANGE[key](primaryRange)
-                                ?.start,
-                            endDate: COMPARISON_RANGE[key](primaryRange)?.end,
-                            value: key,
-                        },
-                    },
-                });
-            }
-            else {
-                const primaryRange = value.preset
-                    ? getRangeFromPresetOptions(value.preset, presetFilters)
-                    : {
-                        start: value.startDate || filter.startDate,
-                        end: value.endDate || filter.endDate,
-                    };
-                const preset = value.preset ? value.preset : '';
-                dashboardFiltersDispatch({
-                    type: 'ADD_DASHBOARD_FILTER',
-                    id: 'date_range',
-                    data: {
-                        ...filter,
-                        preset: { label: preset },
-                        startDate: primaryRange.start,
-                        endDate: primaryRange.end,
-                        filterType: 'date_range',
-                        field: 'date_range',
-                        options: filter.options,
-                        label: 'Date',
-                    },
-                });
-            }
-        }
-    };
-    useEffect(() => {
-        if (dashboardSections && dashboard) {
-            const totalNumberOfItems = Object.values(dashboardSections).reduce((count, arr) => count + arr.length, 0);
-            const itemsLoaded = Object.keys(dashboard).length;
-            if (totalNumberOfItems === itemsLoaded && isLoading) {
-                setIsLoading(false);
-            }
-        }
-    }, [dashboard, dashboardSections, isLoading]);
-    useEffect(() => {
-        if (onChangeLoading) {
-            onChangeLoading(isLoading);
-        }
-    }, [isLoading, onChangeLoading]);
-    if (isLoading || initialLoad)
-        return null;
-    if (!dashboardSections || Object.keys(dashboardSections).length == 0)
-        return _jsx(EmptyDashboardComponent, {});
-    const sortByOrdering = (a, b) => {
-        if (a.order === undefined && b.order === undefined)
-            return 0; // both items don't have the 'order' field
-        if (a.order === undefined)
-            return 1; // only 'a' doesn't have the 'order' field, place 'a' last
-        if (b.order === undefined)
-            return -1; // only 'b' doesn't have the 'order' field, place 'b' last
-        return a.order - b.order; // both items have the 'order' field, sort numerically
-    };
-    const sortedFilters = Object.values(dashboardFilters)
-        .sort((filter) => (filter.filterType === 'date_range' ? -1 : 1))
-        .filter((f) => !dateRangeFilterDisabled || f.filterType !== 'date_range');
-    const metrics = (section) => dashboardSections[section]
-        .filter(({ chartType }) => chartType === 'metric')
-        .sort(sortByOrdering);
-    const charts = (section) => dashboardSections[section]
-        .filter(({ chartType }) => !['metric', 'table'].includes(chartType))
-        .sort(sortByOrdering);
-    const tables = (section) => dashboardSections[section]
-        .filter(({ chartType }) => chartType === 'table')
-        .sort(sortByOrdering);
-    return (_jsxs("div", { ...styleToProps(containerStyle), children: [!hideFilters && (_jsx("div", { style: {
-                    display: 'flex',
-                    boxSizing: 'content-box',
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                }, children: _jsx("div", { style: {
-                        width: '100%',
-                        marginBottom: 25,
-                        display: 'flex',
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 12,
-                    }, children: sortedFilters.map((filter, index) => (_jsx(DashboardFilter, { filter: filter, onChangeFilter: updateFilter, theme: theme, SelectComponent: SelectComponent ? SelectComponent : MemoizedDropdown, DateRangePickerComponent: DateRangePickerComponent
-                            ? DateRangePickerComponent
-                            : MemoizedDateRangePicker }, index))) }) })), Object.keys(dashboardSections)
-                .sort(function (a, b) {
-                return a.length - b.length;
-            })
-                .map((section, sectionIndex) => {
-                return (_jsxs(DashboardSectionContainerComponent, { children: [section && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx("div", { style: { height: sectionIndex > 0 ? 25 : 0 } }), _jsx("h1", { style: {
-                                        fontSize: 22,
-                                        color: theme.primaryTextColor,
-                                        fontFamily: theme.fontFamily,
-                                        fontWeight: 'bold',
-                                        marginBottom: 16,
-                                        textAlign: 'left',
-                                        marginTop: 12,
-                                    }, children: section })] })), metrics(section).length > 0 && (_jsx(DashboardSectionComponent, { children: metrics(section).map((item, index) => {
-                                return (_jsx(MetricComponent, { style: { minHeight: '180px' }, theme: theme, dashboardItem: cleanDashboardItem(dashboard[item._id] ?? item, dashboardFilters), onClickDashboardItem: onClickDashboardItem
-                                        ? () => handleOnClickDashboardItem(item)
-                                        : void null, children: _jsx(Chart, { containerStyle: {
-                                            display: 'flex',
-                                            width: '100%',
-                                            // height: '100%',
-                                        }, chartId: item._id, colors: theme.chartColors?.length
-                                            ? theme.chartColors
-                                            : undefined, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid }) }, item.name + '' + index));
-                            }) })), charts(section).length > 0 && (_jsx(DashboardSectionComponent, { children: charts(section).map((item, index) => (_jsx(ChartComponent, { theme: theme, dashboardItem: cleanDashboardItem(dashboard[item._id] ?? item, dashboardFilters), onClickDashboardItem: onClickDashboardItem
-                                    ? () => handleOnClickDashboardItem(item)
-                                    : void null, children: _jsx(Chart, { containerStyle: chartContainerStyle, chartId: item._id, colors: theme.chartColors?.length
-                                        ? theme.chartColors
-                                        : undefined, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid }) }, item.name + '' + index))) })), tables(section).length > 0 && (_jsx("div", { style: {
-                                boxSizing: 'content-box',
-                                width: `100%`,
-                                gap: 20,
-                                display: 'flex',
-                                flexDirection: 'column',
-                            }, children: tables(section).map((item, index) => (_jsx(DataLoader, { id: item._id, name: item.name, TableComponent: TableComponent, SkeletonComponent: SkeletonComponent, handleOnClickDashboardItem: handleOnClickDashboardItem, onClickDashboardItem: onClickDashboardItem, theme: theme }, `${item.name}${index}`))) }))] }, section + '' + sectionIndex));
-            })] }));
-}

package/dist/esm/DateRangePicker/Calendar.d.ts

@@ -1,17 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-export declare const colStartClasses: string[];
-export interface CalendarProps {
-    enableYearPagination: boolean;
-    anchorDate: Date;
-    setStartOfCurrMonth: Dispatch<SetStateAction<Date | null>>;
-    startDate: Date | null;
-    endDate: Date | null;
-    minDate: Date | null;
-    maxDate: Date | null;
-    onDateClick: (date: Date) => void;
-    locale: Locale;
-    theme: any;
-}
-export declare function Calendar({ enableYearPagination, anchorDate, setStartOfCurrMonth, startDate, endDate, minDate, maxDate, onDateClick, locale, theme, }: CalendarProps): import("react/jsx-runtime").JSX.Element;
-export default Calendar;
-//# sourceMappingURL=Calendar.d.ts.map

package/dist/esm/DateRangePicker/Calendar.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../src/DateRangePicker/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,QAAQ,EAAE,cAAc,EAAwB,MAAM,OAAO,CAAC;AAyB9E,eAAO,MAAM,eAAe,UAQ3B,CAAC;AAmWF,MAAM,WAAW,aAAa;IAC5B,oBAAoB,EAAE,OAAO,CAAC;IAC9B,UAAU,EAAE,IAAI,CAAC;IACjB,mBAAmB,EAAE,QAAQ,CAAC,cAAc,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC;IAC3D,SAAS,EAAE,IAAI,GAAG,IAAI,CAAC;IACvB,OAAO,EAAE,IAAI,GAAG,IAAI,CAAC;IACrB,OAAO,EAAE,IAAI,GAAG,IAAI,CAAC;IACrB,OAAO,EAAE,IAAI,GAAG,IAAI,CAAC;IACrB,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,wBAAgB,QAAQ,CAAC,EACvB,oBAAoB,EACpB,UAAU,EACV,mBAAmB,EACnB,SAAS,EACT,OAAO,EACP,OAAO,EACP,OAAO,EACP,WAAW,EACX,MAAM,EACN,KAAK,GACN,EAAE,aAAa,2CA6Bf;AAED,eAAe,QAAQ,CAAC"}