@quillsql/react 2.10.38 → 2.11.0

package/dist/esm/components/ReportBuilder/ui.js

@@ -0,0 +1,366 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useContext, useEffect, useRef, useState } from 'react';
+import { MemoizedSelect, MemoizedCheckbox, MemoizedHeader, MemoizedLabel, MemoizedTabs, LoadingSpinner, } from '../UiComponents';
+import MemoizedQuillTable from '../QuillTable';
+import { ThemeContext } from '../../Context';
+import { isNodeEmptyCollection } from './util';
+import { downloadCSV } from '../../utils/csv';
+/**
+ * This file is a collection of basic UI components that conform to the shape
+ * expected by the Report Builder. Where possible, we use our existing
+ * components and wrap them in a thin shim to make the interface match if
+ * needed.
+ */
+export const QuillButton = ({ children, ...props }) => {
+    const [theme] = useContext(ThemeContext);
+    return (_jsx("button", { ...props, style: {
+            borderRadius: '6px',
+            backgroundColor: '#000000',
+            opacity: 1,
+            paddingLeft: '16px',
+            paddingRight: '16px',
+            fontSize: '14px',
+            fontWeight: 600,
+            color: '#FFFFFF',
+            cursor: 'pointer',
+            outline: 'none',
+            border: 'none',
+            fontFamily: theme?.fontFamily,
+            height: 38,
+            whiteSpace: 'nowrap',
+            ...props.style,
+        }, children: children }));
+};
+export const QuillSecondaryButton = ({ children, ...props }) => {
+    const [theme] = useContext(ThemeContext);
+    return (_jsx("button", { ...props, style: {
+            borderRadius: '6px',
+            backgroundColor: theme?.secondaryButtonColor || '#F5F5F5',
+            opacity: 1,
+            paddingLeft: '16px',
+            paddingRight: '16px',
+            fontSize: '14px',
+            fontWeight: 600,
+            color: theme?.primaryTextColor,
+            cursor: 'pointer',
+            outline: 'none',
+            border: 'none',
+            fontFamily: theme?.fontFamily,
+            height: 38,
+            whiteSpace: 'nowrap',
+            ...props.style,
+        }, children: children }));
+};
+export const QuillTextInput = (props) => {
+    const [theme] = useContext(ThemeContext);
+    return (_jsx("input", { ...props, style: {
+            color: theme?.primaryTextColor,
+            backgroundColor: theme?.backgroundColor || 'white',
+            fontFamily: theme?.fontFamily,
+            fontWeight: 'medium',
+            borderWidth: '1px',
+            borderColor: theme?.borderColor || '#E7E7E7',
+            borderStyle: 'solid',
+            borderRadius: '6px',
+            boxShadow: 'rgba(0, 0, 0, 0.1) 0px 1px 5px 0px',
+            padding: '0 12px',
+            display: 'block',
+            minHeight: 32,
+            ...props.style,
+        } }));
+};
+export const QuillReportBuilderTable = ({ rows, columns, error, ...props }) => {
+    const reformattedColumns = columns.map((c) => ({ label: c, field: c }));
+    return (_jsx("div", { style: { height: '100%', overflow: 'auto' }, children: _jsx(MemoizedQuillTable, { rows: rows, columns: reformattedColumns, rowsPerPage: 10, showDownloadCSVButton: rows?.length > 0, downloadCSV: () => downloadCSV({ rows, fields: reformattedColumns, name: 'my_report' }), emptyStateLabel: error || 'No results', ...props }) }));
+};
+export const QuillTag = forwardRef(({ label, onClick, children, onClickDelete, hideDelete = false, ..._props }, forwardedRef) => {
+    const [theme] = useContext(ThemeContext);
+    return (_jsxs("div", { style: {
+            boxShadow: '0px 1px 4px #e2e8f005',
+            border: '1px solid #e2e8f0',
+            borderRadius: 6,
+            display: 'flex',
+            flexDirection: 'row',
+            width: '100%',
+            padding: '4px 8px',
+            alignItems: 'center',
+            backgroundColor: 'white',
+            fontSize: 14,
+        }, ref: forwardedRef, onClick: onClick, children: [label ?? children, !hideDelete && (_jsx("div", { style: {
+                    marginLeft: 'auto',
+                    marginRight: '8px',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'center',
+                }, children: _jsx("button", { onClick: onClickDelete, style: { margin: -4 }, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: theme?.secondaryButtonColor || 'currentColor', style: { width: 16, height: 16 }, children: _jsx("path", { d: "M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" }) }) }) }))] }));
+});
+// A heading element in the sidebar (eg. "Filters")
+export const QuillSidebarHeading = ({ label }) => (_jsx(MemoizedHeader, { children: label }));
+// A sub-heading element in the sidebar (eg. "Filters")
+export const QuillSidebarSubHeading = ({ label }) => (_jsx(MemoizedLabel, { children: label }));
+// The gray thing on the left.
+export const QuillSidebar = forwardRef(({ children, ...props }, forwardedRef) => (_jsx("div", { style: {
+        overflow: 'visible',
+        padding: '12px',
+        width: '25%',
+        height: '100%',
+        maxWidth: '300px',
+    }, ref: forwardedRef, ...props, children: children })));
+// A big wrapper around the main content (ie. Input, Button, and Table)
+export const CustomContainer = forwardRef(({ children, ...props }, forwardedRef) => (_jsx("div", { style: {
+        position: 'sticky',
+        top: 0,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '12px',
+        borderLeftWidth: '1px',
+        overflowY: 'auto',
+        padding: '1rem',
+        flexGrow: 1,
+        width: '75%',
+        height: '100%',
+    }, ref: forwardedRef, ...props, children: children })));
+export const QuillSelect = ({ onChange, ...props }) => {
+    const handleOnChange = (value) => {
+        if (!onChange)
+            return;
+        const option = props.options.find((opt) => opt.value === value);
+        if (option) {
+            onChange(option.value);
+        }
+    };
+    return _jsx(MemoizedSelect, { ...props, onChange: handleOnChange });
+};
+export function MemoizedPopover({ onClose, children, style = {}, trigger, isOpen, }) {
+    const modalRef = useRef(null);
+    useEffect(() => {
+        const listener = (event) => {
+            if (modalRef?.current && !modalRef?.current?.contains(event.target)) {
+                onClose(event);
+            }
+        };
+        document.addEventListener('mousedown', listener);
+        return () => {
+            document.removeEventListener('mousedown', listener);
+        };
+    }, [modalRef, onClose]);
+    return (_jsxs("div", { children: [trigger, isOpen && (_jsx("div", { id: "quill-popover-modal", ref: modalRef, style: { position: 'relative' }, children: _jsx("div", { style: {
+                        background: 'white',
+                        position: 'absolute',
+                        boxShadow: '0px 1px 12px 0px rgba(56, 65, 81, 0.1)',
+                        border: '1px solid #e7e7e7',
+                        boxSizing: 'content-box',
+                        zIndex: 999,
+                        top: 12,
+                        borderRadius: 6,
+                        padding: 20,
+                        overflow: 'auto',
+                        ...style,
+                    }, children: children }) }))] }));
+}
+export const QuillPopover = forwardRef(({ children, trigger, isOpen, onClose = () => { }, title = undefined }, ref) => {
+    return (_jsxs(MemoizedPopover, { isOpen: isOpen, onClose: onClose, trigger: trigger, parentRef: ref, ref: ref, children: [title && (_jsx("h1", { style: {
+                    fontWeight: '600',
+                    fontSize: 18,
+                    margin: 0,
+                    textAlign: 'left',
+                    paddingBottom: 12,
+                }, children: title })), children] }));
+});
+// The six-dot grab-handle icon.
+export const QuillHandleButton = () => {
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            gap: 2,
+            flexDirection: 'row',
+            paddingTop: 8,
+            paddingBottom: 8,
+            paddingLeft: 8,
+            paddingRight: 8,
+            borderRadius: 4,
+        }, className: "handle", children: [_jsx("style", { children: `.handle{background:white;} .handle:hover{background:rgba(0,0,0,0.03);}` }), _jsxs("div", { style: { display: 'flex', gap: 2, flexDirection: 'column' }, children: [_jsx("div", { style: {
+                            width: 3,
+                            height: 3,
+                            borderRadius: 3,
+                            background: '#9CA0A7',
+                        } }), _jsx("div", { style: {
+                            width: 3,
+                            height: 3,
+                            borderRadius: 3,
+                            background: '#9CA0A7',
+                        } }), _jsx("div", { style: {
+                            width: 3,
+                            height: 3,
+                            borderRadius: 3,
+                            background: '#9CA0A7',
+                        } })] }), _jsxs("div", { style: { display: 'flex', gap: 2, flexDirection: 'column' }, children: [_jsx("div", { style: {
+                            width: 3,
+                            height: 3,
+                            borderRadius: 3,
+                            background: '#9CA0A7',
+                        } }), _jsx("div", { style: {
+                            width: 3,
+                            height: 3,
+                            borderRadius: 3,
+                            background: '#9CA0A7',
+                        } }), _jsx("div", { style: {
+                            width: 3,
+                            height: 3,
+                            borderRadius: 3,
+                            background: '#9CA0A7',
+                        } })] })] }));
+};
+export const QuillSelectColumn = ({ label, selected, setSelected, children, }) => {
+    return (_jsxs("div", { title: label, style: {
+            boxShadow: '0px 1px 4px #e2e8f005',
+            paddingTop: 4,
+            paddingBottom: 4,
+            paddingLeft: 5,
+            border: '1px solid #e2e8f0',
+            borderRadius: 4,
+            display: 'flex',
+            alignItems: 'center',
+            backgroundColor: 'white',
+        }, children: [_jsx("div", { children: children }), _jsxs("label", { style: {
+                    display: 'flex',
+                    gap: 2,
+                    whiteSpace: 'nowrap',
+                    textOverflow: 'ellipsis',
+                    overflow: 'hidden',
+                }, children: [_jsx(MemoizedCheckbox, { checked: selected, onChange: () => setSelected() }), _jsx("span", { style: {
+                            marginLeft: 6,
+                            display: 'block',
+                            whiteSpace: 'nowrap',
+                            textOverflow: 'ellipsis',
+                            overflow: 'hidden',
+                        }, children: label })] })] }));
+};
+// A draggable card with a grab-handle and a column name
+export const QuillDraggableColumn = ({ label, children, onDelete }) => {
+    const [theme] = useContext(ThemeContext);
+    return (_jsxs("div", { style: {
+            boxShadow: '0px 1px 4px #e2e8f005',
+            border: '1px solid #e2e8f0',
+            borderRadius: 6,
+            display: 'flex',
+            alignItems: 'center',
+            backgroundColor: 'white',
+        }, children: [_jsx("div", { children: children }), _jsx("div", { style: {
+                    marginLeft: 2,
+                    marginRight: 'auto',
+                    fontSize: 14,
+                    display: 'block',
+                    whiteSpace: 'nowrap',
+                    textOverflow: 'ellipsis',
+                }, children: label }), _jsx("button", { onClick: onDelete, style: { paddingRight: 8, margin: -4 }, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: theme?.secondaryButtonColor || 'currentColor', style: { width: 16, height: 16 }, children: _jsx("path", { d: "M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" }) }) })] }));
+};
+// Three dots animated bouncing
+export const QuillButtonLoadingState = () => {
+    return _jsx(QuillButton, { children: "Loading..." });
+};
+// Loading state for the table
+export const QuillTableLoadingState = () => {
+    return (_jsx("div", { style: { display: 'flex', flexDirection: 'column', margin: 'auto' }, children: _jsx(LoadingSpinner, {}) }));
+};
+export const DEFAULT_TAB_OPTIONS = [
+    { label: 'or', value: 'OR' },
+    { label: 'and', value: 'AND' },
+];
+export const QuillTabs = forwardRef(({ options = DEFAULT_TAB_OPTIONS, ...props }, ref) => (_jsx(MemoizedTabs, { ref: ref, options: options, ...props })));
+export const EditPopover = ({ onSave, onDelete, Button, renderNode, activeEditItem, }) => {
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 12,
+        }, children: [activeEditItem && renderNode(activeEditItem), _jsxs("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    justifyContent: 'end',
+                    gap: 8,
+                    width: '100%',
+                }, children: [_jsx(QuillSecondaryButton, { onClick: onDelete, children: "Delete" }), _jsx(Button, { onClick: onSave, children: "Save" })] })] }));
+};
+export const QuillFilterPopover = ({ filterLabel, onClickDeleteFilter, popoverTitle, popoverChildren, isOpen, setIsOpen, }) => {
+    return (_jsx(QuillPopover, { isOpen: isOpen, title: popoverTitle, trigger: _jsx(QuillTag, { label: filterLabel, onClickDelete: onClickDeleteFilter, onClick: () => {
+                setIsOpen((isOpen) => !isOpen);
+            } }), onClose: () => {
+            setIsOpen(false);
+        }, children: popoverChildren }));
+};
+export const TagWrapper = ({ isCard, isRow, editPopoverKey, keyPrefix, formData, activeEditItem, setEditPopoverKey, setActiveEditItem, setActivePath, setOpenPopover, setIsPending, clearCheckboxes, fetchSqlQuery, handleDelete, setCheckboxes, handleReplaceSubtree, FilterPopover, getByKey, EditPopover, Button, renderNode, children, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    useEffect(() => {
+        if (isOpen) {
+            // open
+            setActiveEditItem(getByKey(formData, keyPrefix));
+            setActivePath(keyPrefix);
+            setIsPending(true);
+            setEditPopoverKey(keyPrefix);
+            setCheckboxes(getByKey(formData, keyPrefix));
+        }
+        else {
+            // closed
+            setEditPopoverKey(null);
+            setIsPending(false);
+            setActiveEditItem(null);
+            setActivePath(null);
+            setOpenPopover(null);
+            clearCheckboxes();
+        }
+    }, [isOpen]);
+    if (isCard && isRow) {
+        const handleClickDelete = (e) => {
+            e.stopPropagation(); // don't call onClick handler
+            setIsPending(false);
+            handleDelete(keyPrefix);
+            setActiveEditItem(null);
+            setActivePath(null);
+            setOpenPopover(null);
+            setEditPopoverKey(null);
+            clearCheckboxes();
+        };
+        return (_jsx("div", { style: { width: '100%' }, children: _jsx(FilterPopover, { isOpen: editPopoverKey === keyPrefix, popoverTitle: "Edit Filter", filterLabel: children, onClickDeleteFilter: handleClickDelete, setIsOpen: setIsOpen, popoverChildren: _jsx(EditPopover, { Button: Button, renderNode: renderNode, activeEditItem: activeEditItem, onSave: () => {
+                        if (isNodeEmptyCollection(activeEditItem)) {
+                            setIsPending(false);
+                            setActiveEditItem(null);
+                            setActivePath(null);
+                            setOpenPopover(null);
+                            setEditPopoverKey(null);
+                            handleDelete(keyPrefix);
+                            fetchSqlQuery();
+                            clearCheckboxes();
+                        }
+                        else {
+                            setEditPopoverKey(null);
+                            setIsPending(false);
+                            handleReplaceSubtree(keyPrefix, activeEditItem, false);
+                            setActiveEditItem(null);
+                            setActivePath(null);
+                            setOpenPopover(null);
+                            clearCheckboxes();
+                        }
+                    }, onDelete: () => {
+                        setIsPending(false);
+                        setActiveEditItem(null);
+                        setActivePath(null);
+                        setOpenPopover(null);
+                        setEditPopoverKey(null);
+                        handleDelete(keyPrefix);
+                        fetchSqlQuery();
+                        clearCheckboxes();
+                    } }) }) })); // Make sure to close the <Tag> correctly
+    }
+    else if (isRow) {
+        return _jsx("div", { children: children });
+    }
+    else {
+        return _jsx(_Fragment, { children: children });
+    }
+};
+export const AddFilterPopover = ({ onSave, Button, renderNode, activeEditItem, }) => {
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 12 }, children: [activeEditItem && renderNode(activeEditItem), _jsx("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    justifyContent: 'end',
+                }, children: _jsx(Button, { onMouseUp: onSave, children: "Add filter" }) })] }));
+};

package/dist/esm/components/ReportBuilder/util.d.ts

@@ -0,0 +1,76 @@
+/**
+ * A node that is "in" or "not in" where none of the variants are selected.
+ */
+export declare const isNodeEmptyCollection: (node: any) => boolean;
+export declare function isTopLevelBoolean(node: any): boolean;
+export declare function hasTopLevelOrBoolean(ast: any): boolean;
+export declare const isDateTrunc: (node: any) => boolean;
+export declare const isColumnReferenceish: (node: any) => any;
+export declare function generateColumnExpr(name: any): {
+    type: string;
+    expr: {
+        type: string;
+        table: null;
+        column: any;
+    };
+    as: null;
+};
+export declare const isColumnDateish: (col: any) => any;
+export declare function areObjectsEqualish(left: any, right: any): boolean;
+export declare function formatDateComparisonNode(node: any): string | null;
+export declare function getInTheCurrentIntervalSentence(node: any, databaseType: string): string | null;
+export declare function getInTheLastIntervalSentence(node: any, databaseType: string): string | null;
+export declare function getInThePreviousIntervalSentence(node: any, databaseType: string): string | null;
+export declare const isInTheLastInterval: (node: any, databaseType: string) => boolean;
+export declare const isInTheLastIntervalBigQuery: (node: any) => boolean;
+export declare const isTheCurrentInterval: (node: any, databaseType: string) => boolean;
+export declare const isThePreviousInterval: (node: any, databaseType: string) => any;
+export declare const isTheCurrentIntervalBigQuery: (node: any) => boolean;
+/**
+ * Returns whether this node is the root of a binary expression
+ * where the left child is a string but really should be
+ * interpreted as a column name.
+ */
+export declare const isColumnComparison: (node: any) => any;
+export declare const newUTCDate: (dateString: string) => Date;
+/**
+ * Takes the right side of a dateTruncEquals expression (ie. the suffix)
+ * and returns a pretty string representation of what that value means.
+ *
+ * eg. date_trunc('year', TIMESTAMP '2023-01-01') would be "in 2023"
+ * eg. date_trunc('month', TIMESTAMP '2023-01-01') would be "in Jan 2023"
+ * eg. date_trunc('quarter', TIMESTAMP '2023-01-01') would be "in Q1 2023"
+ */
+export declare function dateTruncSuffixToString(node: any, databaseType?: string): string;
+/**
+ * Takes an extract binary expression and returns a string version
+ * of what the AST means.
+ *
+ * eg. extract(YEAR FROM "created_at") = 2023 would be "in 2023"
+ * eg. extract(MONTH FROM "created_at") = 1 would be "in January"
+ * eg. TODO: add more variants as they come up
+ */
+export declare function extractSuffixToString(node: any): string;
+export declare function tryConvertDateEquality(node: any, databaseType?: string): string | undefined;
+/**
+ * Returns whether this node is an equality of a date column with a
+ * date trunc.
+ */
+export declare const isDateTruncEquals: (node: any) => boolean;
+/**
+ * Returns whether this node is an equality of a date column with extract.
+ */
+export declare const isExtractEquals: (node: any) => boolean;
+export declare function showNodeAsRow(node: any, ast: any): boolean;
+export declare function getPostgresBasicType(column: any): 'string' | 'number' | 'date' | undefined;
+export declare const deepCopy: (obj: any) => any;
+export declare const trimEndS: (s: string) => string;
+export declare const getDateFilterInfo: (node: any) => {
+    dateColumn: any;
+    dateColumnPath: string;
+    dateFilterType: string;
+    intervalCount: number | null | undefined;
+    intervalType: any;
+    intervalPaths: any;
+};
+//# sourceMappingURL=util.d.ts.map

package/dist/esm/components/ReportBuilder/util.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/util.ts"],"names":[],"mappings":"AAMA;;GAEG;AACH,eAAO,MAAM,qBAAqB,SAAU,GAAG,YAW9C,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,GAAG,WAa1C;AAED,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,GAAG,WAK5C;AAGD,eAAO,MAAM,WAAW,SAAU,GAAG,YAuBpC,CAAC;AAKF,eAAO,MAAM,oBAAoB,SAAU,GAAG,QAE7C,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,GAAG;;;;;;;;EAU3C;AAKD,eAAO,MAAM,eAAe,QAAS,GAAG,QAMvC,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,WAiBvD;AAED,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,GAAG,iBAQjD;AAED,wBAAgB,+BAA+B,CAC7C,IAAI,EAAE,GAAG,EACT,YAAY,EAAE,MAAM,GACnB,MAAM,GAAG,IAAI,CAOf;AAQD,wBAAgB,4BAA4B,CAC1C,IAAI,EAAE,GAAG,EACT,YAAY,EAAE,MAAM,GACnB,MAAM,GAAG,IAAI,CAWf;AAED,wBAAgB,gCAAgC,CAC9C,IAAI,EAAE,GAAG,EACT,YAAY,EAAE,MAAM,GACnB,MAAM,GAAG,IAAI,CAOf;AAMD,eAAO,MAAM,mBAAmB,SAAU,GAAG,gBAAgB,MAAM,YA4BlE,CAAC;AAIF,eAAO,MAAM,2BAA2B,SAAU,GAAG,YAUpD,CAAC;AAIF,eAAO,MAAM,oBAAoB,SACzB,GAAG,gBACK,MAAM,KACnB,OAmBF,CAAC;AAEF,eAAO,MAAM,qBAAqB,SAAU,GAAG,gBAAgB,MAAM,QAYpE,CAAC;AAEF,eAAO,MAAM,4BAA4B,SAAU,GAAG,KAAG,OAUxD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,SAAU,GAAG,QA4B3C,CAAC;AAGF,eAAO,MAAM,UAAU,eAAgB,MAAM,SAe5C,CAAC;AAmBF;;;;;;;GAOG;AACH,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,GAAG,EAAE,YAAY,CAAC,EAAE,MAAM,UAsBvE;AAED;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,GAAG,UAgB9C;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,GAAG,EAAE,YAAY,CAAC,EAAE,MAAM,sBAetE;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,SAAU,GAAG,YAU1C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,SAAU,GAAG,YAOxC,CAAC;AAEF,wBAAgB,aAAa,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,WAehD;AAED,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,GAAG,GACV,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAyB1C;AAED,eAAO,MAAM,QAAQ,QAAS,GAAG,QAAoC,CAAC;AAEtE,eAAO,MAAM,QAAQ,MAAO,MAAM,WAA2C,CAAC;AA4L9E,eAAO,MAAM,iBAAiB,SAAU,GAAG;;;;;;;CAc1C,CAAC"}