@quillsql/react 2.12.37 → 2.12.38

package/dist/esm/components/UiComponents.js

@@ -0,0 +1,571 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useContext, useEffect, useRef, useState, } from 'react';
+import { XIcon } from '../assets';
+import { ThemeContext } from '../Context';
+import { useTheme } from '../hooks';
+import QuillTable from './QuillTable';
+import ChartSkeleton, { QuillLoadingSkeleton } from './Chart/ChartSkeleton';
+/**
+ * The fallback TextInput element for Quill.
+ */
+export const QuillTextInput = ({ id, value, width, label, placeholder, onChange, }) => {
+    const [theme] = useContext(ThemeContext);
+    return (_jsxs("label", { style: {
+            position: 'relative',
+            borderRadius: '6px',
+            width: width,
+            minWidth: width,
+        }, children: [label && (_jsx("div", { style: {
+                    fontSize: 14,
+                    color: theme.secondaryTextColor,
+                    fontFamily: theme.fontFamily,
+                    paddingBottom: 5,
+                    fontWeight: 600,
+                }, children: label })), _jsx("input", { style: {
+                    display: 'flex',
+                    height: 40,
+                    minHeight: 40,
+                    maxHeight: 40,
+                    borderRadius: 6,
+                    border: '1px solid #E7E7E7',
+                    fontSize: 14,
+                    boxSizing: 'border-box',
+                    paddingLeft: 13,
+                    backgroundColor: theme?.backgroundColor,
+                    color: theme?.primaryTextColor,
+                    fontFamily: theme?.fontFamily,
+                    width: width,
+                    minWidth: width,
+                }, id: id, value: value, placeholder: placeholder, onChange: onChange })] }));
+};
+export const MemoizedButton = ({ label, onClick, disabled, icon, }) => {
+    const [theme] = useContext(ThemeContext);
+    return (_jsxs("button", { className: "quill-button", onClick: onClick, disabled: disabled, style: {
+            fontFamily: theme?.fontFamily,
+            fontSize: '14px',
+            display: 'flex',
+            flexDirection: 'row',
+            whiteSpace: 'nowrap',
+            alignItems: 'center',
+            gap: 6,
+            borderRadius: 6,
+            color: 'white',
+            height: 38,
+            border: '1px solid transparent',
+            fontWeight: theme.buttonFontWeight ?? 600,
+            boxSizing: 'content-box',
+            paddingLeft: 16,
+            paddingRight: 16,
+            cursor: 'pointer',
+        }, children: [_jsx("style", { children: `
+      .quill-button {
+        background-color: #212121;
+      }
+      .quill-button:hover {
+        background-color: rgba(56, 65, 81, 0.9);
+      }` }), icon, label] }));
+};
+export const MemoizedSecondaryButton = ({ label, onClick, icon, }) => {
+    const theme = useTheme();
+    return (_jsxs("button", { className: "quill-secondary-button", onClick: onClick, style: {
+            fontFamily: theme?.fontFamily,
+            color: theme?.primaryTextColor,
+            height: '38px', // 40px - 2px for top and bottom border
+            border: '1px solid #E7E7E7',
+            fontWeight: 500,
+            borderRadius: '6px',
+            paddingLeft: '16px',
+            paddingRight: '16px',
+            boxSizing: 'content-box',
+            fontSize: '14px',
+            cursor: 'pointer',
+            whiteSpace: 'nowrap',
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 6,
+        }, children: [_jsx("style", { children: `
+      .quill-secondary-button {
+        background-color: white;
+      }
+      .quill-secondary-button:hover {
+        background-color: #F4F4F5;
+      }` }), icon, label] }));
+};
+export const MemoizedHeader = ({ label }) => {
+    const [theme] = useContext(ThemeContext);
+    return (_jsx("h1", { style: {
+            fontSize: 16,
+            fontWeight: 600,
+            fontFamily: theme?.fontFamily,
+            color: theme?.primaryTextColor || '#384151',
+            userSelect: 'none',
+            margin: 0,
+            paddingBottom: 0,
+        }, children: label }));
+};
+export const MemoizedSubHeader = ({ label }) => {
+    const theme = useTheme();
+    return (_jsx("h2", { style: {
+            fontSize: 14,
+            fontWeight: 600,
+            fontFamily: theme?.fontFamily,
+            color: theme?.secondaryTextColor || '#575E6A',
+            userSelect: 'none',
+            margin: 0,
+            paddingTop: 6,
+            paddingBottom: 6,
+        }, children: label }));
+};
+export const MemoizedLabel = ({ label }) => {
+    const [theme] = useContext(ThemeContext);
+    return (_jsx("h1", { style: {
+            fontSize: 14,
+            fontWeight: 600,
+            fontFamily: theme?.fontFamily,
+            color: theme?.secondaryTextColor || '#575E6A',
+            userSelect: 'none',
+            margin: 0,
+        }, children: label }));
+};
+export const MemoizedCheckbox = ({ isChecked, label, onChange, }) => {
+    const theme = useTheme();
+    return (_jsxs("label", { style: {
+            display: 'flex',
+            width: '100%',
+            whiteSpace: 'nowrap',
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
+            gap: 4,
+        }, children: [_jsx("input", { type: "checkbox", checked: isChecked, onChange: onChange, style: { width: '14px', height: '14px', margin: 'auto 0' } }), _jsx("span", { style: {
+                    display: 'block',
+                    marginTop: 'auto',
+                    marginBottom: 'auto',
+                    marginLeft: '6px',
+                    whiteSpace: 'nowrap',
+                    textOverflow: 'ellipsis',
+                    overflow: 'hidden',
+                    fontFamily: theme?.fontFamily,
+                    color: theme?.primaryTextColor,
+                }, children: label })] }));
+};
+export const DEFAULT_TAB_OPTIONS = [
+    { label: 'or', value: 'OR' },
+    { label: 'and', value: 'AND' },
+];
+export const QuillTabs = ({ options = DEFAULT_TAB_OPTIONS, value, onChange, }) => (_jsx("div", { style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderRadius: '0.25rem',
+        outlineStyle: 'none',
+        background: '#F9FAFB',
+        padding: '5px',
+    }, children: options.map((option, index) => (_jsx("button", { onClick: () => {
+            // Manually create a synthetic ChangeEvent and pass it to callback
+            const changeEvent = { target: { value: option.value } };
+            onChange(changeEvent);
+        }, style: {
+            borderRadius: '0.25rem',
+            borderWidth: '1px',
+            outlineStyle: 'none',
+            transitionProperty: 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform',
+            transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
+            transitionDuration: '300ms',
+            margin: '0px',
+            paddingTop: '0.375rem',
+            paddingBottom: '0.375rem',
+            paddingLeft: '0.75rem',
+            paddingRight: '0.75rem',
+            ...(option.value === value
+                ? {
+                    fontWeight: 700,
+                    backgroundColor: '#ffffff',
+                    boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+                    color: '#212121',
+                    borderColor: '#e7e7e7',
+                }
+                : {
+                    borderColor: 'transparent',
+                    fontWeight: 500,
+                    backgroundColor: 'transparent',
+                    color: '#606572',
+                }),
+        }, children: option.label }, index))) }));
+export const MemoizedText = ({ label }) => {
+    const [theme] = useContext(ThemeContext);
+    return (_jsx("p", { style: {
+            fontSize: 12,
+            fontWeight: 400,
+            margin: 0,
+            color: '#575E6A',
+            userSelect: 'none',
+            fontFamily: theme?.fontFamily,
+            whiteSpace: 'nowrap',
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
+        }, children: label }));
+};
+/**
+ * The one, true Quill popover component.
+ */
+export const MemoizedPopover = ({ isOpen, setIsOpen, triggerLabel, popoverTitle = undefined, popoverChildren, containerStyle, }) => {
+    const [theme] = useContext(ThemeContext);
+    const [rightAlignment, setRightAlignment] = useState('auto');
+    const modalRef = useRef(null);
+    const popoverRef = useRef(null);
+    useEffect(() => {
+        const listener = (event) => {
+            if (modalRef?.current && !modalRef?.current?.contains(event.target)) {
+                if (setIsOpen)
+                    setIsOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', listener);
+        return () => {
+            document.removeEventListener('mousedown', listener);
+        };
+    }, [modalRef, setIsOpen]);
+    useEffect(() => {
+        updatePopoverPosition();
+        window.addEventListener('resize', updatePopoverPosition);
+        return () => {
+            window.removeEventListener('resize', updatePopoverPosition);
+        };
+    }, [popoverRef.current, rightAlignment]);
+    const updatePopoverPosition = () => {
+        if (popoverRef.current && modalRef.current) {
+            const popoverRect = popoverRef.current.getBoundingClientRect();
+            const modalRect = modalRef.current.getBoundingClientRect();
+            if (rightAlignment === 'auto' &&
+                window.innerWidth - popoverRect.right < 1 &&
+                popoverRect.left > popoverRect.width // need enough space on left too
+            ) {
+                setRightAlignment(0);
+            }
+            else if (rightAlignment === 0 &&
+                window.innerWidth - popoverRect.right + modalRect.width >
+                    popoverRect.width) {
+                setRightAlignment('auto');
+            }
+        }
+    };
+    return (_jsxs("div", { style: containerStyle, children: [triggerLabel, isOpen && (_jsx("div", { id: "quill-popover-modal", ref: modalRef, style: { position: 'relative' }, children: _jsxs("div", { ref: popoverRef, style: {
+                        background: theme?.backgroundColor || 'white',
+                        position: 'absolute',
+                        boxShadow: '0px 1px 12px 0px #E7E7E705',
+                        border: theme
+                            ? `${theme.borderWidth || 1}px solid ${theme.borderColor || '#E7E7E7'}`
+                            : '1px solid #E7E7E7',
+                        boxSizing: 'content-box',
+                        zIndex: 999,
+                        // top: 12,
+                        borderRadius: 6,
+                        padding: 20,
+                        right: rightAlignment,
+                    }, children: [popoverTitle && (_jsx("h1", { style: {
+                                fontWeight: '600',
+                                fontSize: 18,
+                                margin: 0,
+                                textAlign: 'left',
+                                marginBottom: 5,
+                                color: theme?.primaryTextColor,
+                                fontFamily: theme?.fontFamily,
+                            }, children: popoverTitle })), popoverChildren] }) }))] }));
+};
+export function MemoizedModal({ isOpen, setIsOpen, title, children, width, height, }) {
+    const [theme] = useContext(ThemeContext);
+    if (!isOpen) {
+        // @ts-ignore
+        return null;
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("div", { style: {
+                    position: 'fixed',
+                    top: '0',
+                    right: '0',
+                    bottom: '0',
+                    left: '0',
+                    zIndex: '50',
+                    backgroundColor: 'rgba(255, 255, 255, 0.8)',
+                    backdropFilter: 'blur(5px)',
+                }, onClick: () => setIsOpen(false) }), _jsx("div", { style: {
+                    position: 'fixed',
+                    left: '50%',
+                    top: '50%',
+                    zIndex: '50',
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    transform: 'translateX(-50%) translateY(-50%)',
+                    background: 'white',
+                    borderRadius: 8,
+                    borderStyle: 'solid',
+                    borderWidth: 1,
+                    borderColor: '#E7E7E7',
+                    overflow: 'scroll',
+                    width: width ?? 'auto',
+                    height: height ?? 'auto',
+                    maxWidth: 'calc(100vw - 82px)',
+                    maxHeight: 'calc(100vh - 82px)',
+                }, children: _jsxs("div", { style: {
+                        width: '100%',
+                        height: '100%',
+                        overflowY: 'scroll',
+                        backgroundColor: '#ffffff',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        position: 'relative',
+                        fontFamily: theme?.fontFamily,
+                    }, children: [_jsxs("div", { id: "quill-modal-header", style: {
+                                boxSizing: 'border-box',
+                                display: 'flex',
+                                flexDirection: 'row',
+                                width: '100%',
+                                justifyContent: 'space-between',
+                                alignItems: 'center',
+                                padding: 10,
+                            }, children: [_jsx("h2", { style: {
+                                        fontSize: 18,
+                                        fontWeight: '600',
+                                        // width: '90%',
+                                        textAlign: 'left',
+                                        paddingLeft: 10,
+                                        color: theme?.primaryTextColor,
+                                    }, children: title }), _jsx(MemoizedDeleteButton, { onClick: () => setIsOpen(false) })] }), _jsx("div", { style: {
+                                height: 'calc(100% - 60px)', // full height minus title
+                                width: '100%', // full width minus margin
+                            }, children: children })] }) })] }));
+}
+export const MemoizedDeleteButton = ({ onClick, }) => (_jsxs("button", { className: "quill-delete-button", type: "button", onClick: onClick, style: {
+        height: 40,
+        width: 40,
+        border: 'none',
+        cursor: 'pointer',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 6,
+    }, children: [_jsx("style", { children: `
+  .quill-delete-button {
+      background-color: white;
+  }
+  .quill-delete-button:hover {
+    background-color: #F4F4F5;
+  }` }), _jsx(XIcon, { height: "20", width: "20", fill: "#6C727F" })] }));
+export const LoadingSpinner = () => (_jsx("div", { style: {
+        height: '100%',
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+    }, children: _jsxs("svg", { width: "24", height: "24", children: [_jsx("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)", strokeDashoffset: "calc(2 * 3.14 * 9.375 / 6)", stroke: "#364153", fill: "none", transform: "rotate(-90 12 12)", children: _jsx("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "-180 12 12", to: "180 12 12", dur: "0.8s", repeatCount: "indefinite" }) }), _jsx("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 1 / 3)", strokeDashoffset: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)", stroke: '#ADB1B9', fill: "none", transform: "rotate(90 12 12)", children: _jsx("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "0 12 12", to: "360 12 12", dur: "0.8s", repeatCount: "indefinite" }) })] }) }));
+export const QuillTableSQLEditorComponent = ({ rows, columns, isLoading = false, rowCount, onPageChange, onSortChange, }) => {
+    const [sort, setSort] = useState({ field: '', direction: '' });
+    const [page, setPage] = useState(0);
+    if (isLoading) {
+        return (_jsx("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                margin: 'auto',
+                width: '100%',
+                height: '100%',
+            }, children: _jsx(LoadingSpinner, {}) }));
+    }
+    return (_jsx(QuillTable, { rows: rows, columns: columns, rowsPerPage: 20, rowCount: rowCount, onPageChange: (page) => {
+            setPage(page);
+            onPageChange && onPageChange(page);
+        }, onSortChange: (sort) => {
+            setSort(sort);
+            setPage(0);
+            onSortChange && onSortChange(sort);
+        }, sort: sort, currentPage: page, isLoading: isLoading }));
+};
+export const QuillTableComponent = ({ rows, columns, isLoading = false, rowCount, onPageChange, onSortChange, }) => {
+    const [sort, setSort] = useState({ field: '', direction: '' });
+    const [page, setPage] = useState(0);
+    const [initialLoad, setInitialLoad] = useState(true);
+    useEffect(() => {
+        if (initialLoad && !isLoading) {
+            setInitialLoad(false);
+        }
+    }, [isLoading]);
+    if (initialLoad) {
+        return (_jsx("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                margin: 'auto',
+                width: '100%',
+                height: '100%',
+            }, children: _jsx(ChartSkeleton, {}) }));
+    }
+    return (_jsx(QuillTable, { rows: rows, columns: columns, rowsPerPage: 20, rowCount: rowCount, onPageChange: (page) => {
+            setPage(page);
+            onPageChange && onPageChange(page);
+        }, onSortChange: (sort) => {
+            setSort(sort);
+            setPage(0);
+            onSortChange && onSortChange(sort);
+        }, sort: sort, currentPage: page, isLoading: isLoading }));
+};
+export const QuillEmptyDashboardComponent = () => _jsx("div", {});
+const defaultFilterContainerStyles = {
+    display: 'flex',
+    width: '100%',
+    marginBottom: 25,
+    height: 66,
+};
+export const QuillLoadingDashboardComponent = ({ containerStyle, chartContainerStyle, LoadingComponent = QuillLoadingSkeleton, }) => {
+    return (_jsxs("div", { style: { ...containerStyle, overflow: 'hidden' }, children: [_jsx("div", { style: defaultFilterContainerStyles, children: _jsx(LoadingComponent, {}) }), _jsx("div", { style: {
+                    display: 'grid',
+                    gridTemplateColumns: 'repeat(auto-fill,minmax(400px, 1fr))',
+                    gridTemplateRows: `repeat(${170}px)`,
+                    gap: 40,
+                }, children: Array.from({ length: 4 }).map((_, index) => (_jsx("div", { style: chartContainerStyle, children: _jsx(LoadingComponent, {}, index) }, index))) })] }));
+};
+export const QuillChartBuilderInputRowContainer = ({ children, }) => {
+    return (_jsx("div", { style: {
+            display: 'flex',
+            flexDirection: 'row',
+            gap: 12,
+        }, children: children }));
+};
+export const QuillChartBuilderInputColumnContainer = ({ children, }) => {
+    return (_jsx("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 10,
+        }, children: children }));
+};
+export const QuillPivotRowContainer = ({ children, }) => {
+    return (_jsx("div", { style: {
+            display: 'flex',
+            flexDirection: 'row',
+            gap: 16,
+        }, children: children }));
+};
+export const QuillPivotColumnContainer = ({ children, }) => {
+    return (_jsx("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 16,
+        }, children: children }));
+};
+export const QuillFilterContainerComponent = ({ children, }) => {
+    return (_jsx("div", { style: {
+            width: '100%',
+            marginBottom: 25,
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'flex-end',
+            flexWrap: 'wrap',
+            gap: 12,
+        }, children: children }));
+};
+export const QuillUserFilterModalComponent = ({ isOpen, setIsOpen, children, triggerLabel, title, }) => {
+    const [theme] = useContext(ThemeContext);
+    const [rightAlignment, setRightAlignment] = useState('auto');
+    const modalRef = useRef(null);
+    const popoverRef = useRef(null);
+    useEffect(() => {
+        const listener = (event) => {
+            if (modalRef?.current && !modalRef?.current?.contains(event.target)) {
+                if (setIsOpen)
+                    setIsOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', listener);
+        return () => {
+            document.removeEventListener('mousedown', listener);
+        };
+    }, [modalRef, setIsOpen]);
+    useEffect(() => {
+        updatePopoverPosition();
+        window.addEventListener('resize', updatePopoverPosition);
+        return () => {
+            window.removeEventListener('resize', updatePopoverPosition);
+        };
+    }, [popoverRef.current, rightAlignment]);
+    const updatePopoverPosition = () => {
+        if (popoverRef.current && modalRef.current) {
+            const popoverRect = popoverRef.current.getBoundingClientRect();
+            const modalRect = modalRef.current.getBoundingClientRect();
+            if (rightAlignment === 'auto' &&
+                window.innerWidth - popoverRect.right < 1 &&
+                popoverRect.left > popoverRect.width // need enough space on left too
+            ) {
+                setRightAlignment(0);
+            }
+            else if (rightAlignment === 0 &&
+                window.innerWidth - popoverRect.right + modalRect.width >
+                    popoverRect.width) {
+                setRightAlignment('auto');
+            }
+        }
+    };
+    return (_jsxs("div", { style: { position: 'relative', marginLeft: 10 }, children: [_jsx(MemoizedSecondaryButton, { onClick: () => setIsOpen(true), label: triggerLabel || '' }), isOpen && (_jsx("div", { id: "quill-popover-modal", ref: modalRef, style: { position: 'relative', top: 10 }, children: _jsxs("div", { ref: popoverRef, style: {
+                        background: theme?.backgroundColor || 'white',
+                        position: 'absolute',
+                        boxShadow: '0px 1px 12px 0px #E7E7E705',
+                        border: theme
+                            ? `${theme.borderWidth || 1}px solid ${theme.borderColor || '#E7E7E7'}`
+                            : '1px solid #E7E7E7',
+                        boxSizing: 'content-box',
+                        zIndex: 999,
+                        // top: 12,
+                        borderRadius: 6,
+                        padding: 15,
+                        right: rightAlignment,
+                    }, children: [_jsx("h1", { style: {
+                                fontWeight: '600',
+                                fontSize: 18,
+                                margin: 0,
+                                textAlign: 'left',
+                                marginBottom: 5,
+                                color: theme?.primaryTextColor,
+                                fontFamily: theme?.fontFamily,
+                            }, children: title }), children] }) }))] }));
+};
+export const QuillChartBuilderFormContainer = ({ children, }) => {
+    return (_jsx("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 24,
+            overflow: 'auto',
+            // paddingTop: 8, // material only
+        }, children: children }));
+};
+export const QuillErrorMessageComponent = ({ errorMessage, containerStyle, }) => {
+    const theme = useTheme();
+    return (_jsx("div", { style: {
+            borderRadius: 8,
+            backgroundColor: '#FF9494',
+            paddingLeft: '12px',
+            paddingRight: '8px',
+            height: 30,
+            display: 'flex',
+            alignItems: 'center',
+            fontSize: 13,
+            fontWeight: 'bold',
+            fontFamily: theme?.fontFamily,
+            color: 'white',
+            ...containerStyle,
+        }, children: errorMessage }));
+};
+export const QuillColumnSearchEmptyState = () => {
+    const theme = useTheme();
+    return _jsx("div", { style: { fontFamily: theme?.fontFamily }, children: "No results found" });
+};
+export const QuillLoadingComponent = () => {
+    const theme = useTheme();
+    return (_jsxs("div", { style: {
+            width: 250,
+            minWidth: 250,
+            height: '100%',
+            paddingLeft: 20,
+            paddingRight: 30,
+            paddingTop: 40,
+            display: 'flex',
+            margin: '0px auto',
+            justifyContent: 'center',
+        }, children: [_jsx("div", { style: { height: 100 } }), _jsxs("svg", { width: "24", height: "24", children: [_jsx("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)", strokeDashoffset: "calc(2 * 3.14 * 9.375 / 6)", stroke: theme?.primaryTextColor || '#364153', fill: "none", transform: "rotate(-90 12 12)", children: _jsx("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "-180 12 12", to: "180 12 12", dur: "0.8s", repeatCount: "indefinite" }) }), _jsx("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 1 / 3)", strokeDashoffset: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)", stroke: '#ADB1B9', fill: "none", transform: "rotate(90 12 12)", children: _jsx("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "0 12 12", to: "360 12 12", dur: "0.8s", repeatCount: "indefinite" }) })] })] }));
+};

package/dist/esm/components/selectUtils.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface SelectItemProps {
+    value: string;
+    text?: string;
+}
+export declare function constructValueToNameMapping(children: React.ReactElement[] | React.ReactElement): Map<string, string>;
+export declare function getFilteredOptions(searchQuery: string, options: SelectItemProps[]): SelectItemProps[];
+export declare const hasValue: (value: string | null | undefined) => boolean;
+//# sourceMappingURL=selectUtils.d.ts.map

package/dist/esm/components/selectUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectUtils.d.ts","sourceRoot":"","sources":["../../../src/components/selectUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,2BAA2B,CACzC,QAAQ,EAAE,KAAK,CAAC,YAAY,EAAE,GAAG,KAAK,CAAC,YAAY,uBAUpD;AAED,wBAAgB,kBAAkB,CAChC,WAAW,EAAE,MAAM,EACnB,OAAO,EAAE,eAAe,EAAE,GACzB,eAAe,EAAE,CAOnB;AAED,eAAO,MAAM,QAAQ,UAAW,MAAM,GAAG,IAAI,GAAG,SAAS,YACF,CAAC"}

package/dist/esm/components/selectUtils.js

@@ -0,0 +1,17 @@
+import React from 'react';
+export function constructValueToNameMapping(children) {
+    const valueToNameMapping = new Map();
+    React.Children.map(children, (child) => {
+        valueToNameMapping.set(child.props.value, child.props.text ?? child.props.value);
+    });
+    return valueToNameMapping;
+}
+export function getFilteredOptions(searchQuery, options) {
+    return searchQuery === ''
+        ? options
+        : options.filter((option) => {
+            const optionText = option.text ?? option.value;
+            return optionText.toLowerCase().includes(searchQuery.toLowerCase());
+        });
+}
+export const hasValue = (value) => value !== null && value !== undefined && value !== '';

package/dist/esm/contexts/BaseColorContext.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+declare const BaseColorContext: import("react").Context<string>;
+export default BaseColorContext;
+//# sourceMappingURL=BaseColorContext.d.ts.map

package/dist/esm/contexts/BaseColorContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseColorContext.d.ts","sourceRoot":"","sources":["../../../src/contexts/BaseColorContext.tsx"],"names":[],"mappings":";AAEA,QAAA,MAAM,gBAAgB,iCAAgC,CAAC;AAEvD,eAAe,gBAAgB,CAAC"}

package/dist/esm/contexts/BaseColorContext.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+const BaseColorContext = createContext('blue');
+export default BaseColorContext;

package/dist/esm/contexts/HoveredValueContext.d.ts

@@ -0,0 +1,8 @@
+import { Dispatch, SetStateAction } from 'react';
+export interface HoveredValueContextValue {
+    hoveredValue: any | undefined;
+    setHoveredValue?: Dispatch<SetStateAction<any>>;
+}
+declare const HoveredValueContext: import("react").Context<HoveredValueContextValue>;
+export default HoveredValueContext;
+//# sourceMappingURL=HoveredValueContext.d.ts.map

package/dist/esm/contexts/HoveredValueContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HoveredValueContext.d.ts","sourceRoot":"","sources":["../../../src/contexts/HoveredValueContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAiB,MAAM,OAAO,CAAC;AAEhE,MAAM,WAAW,wBAAwB;IACvC,YAAY,EAAE,GAAG,GAAG,SAAS,CAAC;IAC9B,eAAe,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;CACjD;AAED,QAAA,MAAM,mBAAmB,mDAEvB,CAAC;AAEH,eAAe,mBAAmB,CAAC"}

package/dist/esm/contexts/HoveredValueContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+const HoveredValueContext = createContext({
+    hoveredValue: undefined,
+});
+export default HoveredValueContext;

package/dist/esm/contexts/RootStylesContext.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+declare const RootStylesContext: import("react").Context<string | undefined>;
+export default RootStylesContext;
+//# sourceMappingURL=RootStylesContext.d.ts.map

package/dist/esm/contexts/RootStylesContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RootStylesContext.d.ts","sourceRoot":"","sources":["../../../src/contexts/RootStylesContext.tsx"],"names":[],"mappings":";AAEA,QAAA,MAAM,iBAAiB,6CAA+C,CAAC;AAEvE,eAAe,iBAAiB,CAAC"}

package/dist/esm/contexts/RootStylesContext.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+const RootStylesContext = createContext(undefined);
+export default RootStylesContext;

package/dist/esm/contexts/SelectedValueContext.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export interface SelectedValueContextValue {
+    selectedValue: any;
+    handleValueChange: ((value: any) => void) | undefined;
+}
+declare const SelectedValueContext: import("react").Context<SelectedValueContextValue>;
+export default SelectedValueContext;
+//# sourceMappingURL=SelectedValueContext.d.ts.map

package/dist/esm/contexts/SelectedValueContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectedValueContext.d.ts","sourceRoot":"","sources":["../../../src/contexts/SelectedValueContext.tsx"],"names":[],"mappings":";AAEA,MAAM,WAAW,yBAAyB;IACxC,aAAa,EAAE,GAAG,CAAC;IACnB,iBAAiB,EAAE,CAAC,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CACvD;AAED,QAAA,MAAM,oBAAoB,oDAGxB,CAAC;AAEH,eAAe,oBAAoB,CAAC"}