@quillsql/admin 1.3.3 → 1.3.6

package/dist/esm/components/DropDownMenuWithLabel.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function DropdownMenuWithLabel({ items, setSelected, selected, theme, label, disabled = false, secondaryTextColor = '#6e6e6e', }) {
+    return (_jsxs("div", { children: [_jsx("h1", { style: {
+                    fontSize: '14px',
+                    paddingTop: '0px',
+                    marginTop: '0px',
+                    marginBottom: '4px',
+                    fontWeight: '600',
+                    color: secondaryTextColor,
+                    userSelect: 'none',
+                }, children: label }), _jsx("div", { style: { display: 'flex', flexDirection: 'column' }, children: _jsxs("div", { style: {
+                        position: 'relative',
+                        fontFamily: theme?.fontFamily,
+                        fontSize: 14,
+                        fontWeight: 500,
+                    }, children: [_jsxs("select", { style: {
+                                width: '100%',
+                                minWidth: 250,
+                                maxWidth: 250,
+                                outline: 'none',
+                                textAlign: 'left',
+                                whiteSpace: 'nowrap',
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                borderRadius: 6,
+                                WebkitAppearance: 'none',
+                                paddingLeft: 12,
+                                paddingRight: 12,
+                                height: 38,
+                                borderWidth: 1,
+                                borderColor: '#e7e7e7',
+                                background: 'white',
+                                color: '#212121',
+                                boxShadow: '0 1px 2px 0 rgba(0,0,0,.05)',
+                                fontFamily: theme?.fontFamily,
+                            }, disabled: disabled, onChange: (e) => {
+                                setSelected(items.find((item) => item === e.target.value));
+                            }, value: selected || '', children: [_jsx("option", { value: "", children: items && items.length !== 0 ? 'Select' : 'N/A' }), items.slice(0, 50).map((item) => (_jsx("option", { value: item, children: item }, item)))] }), _jsxs("svg", { style: {
+                                height: '20px',
+                                width: '20px',
+                                flex: 'none',
+                                position: 'absolute',
+                                right: 8,
+                                top: 9,
+                                color: '#565656',
+                            }, "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", visibility: disabled ? 'hidden' : 'visible', children: [_jsx("path", { fill: "none", d: "M0 0h24v24H0z" }), _jsx("path", { fill: "currentColor", d: "M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z" })] })] }) })] }));
+}

package/dist/esm/components/EmptyDashboardComponent/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export default function EmptyDashboardComponent(): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/EmptyDashboardComponent/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/EmptyDashboardComponent/index.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,uBAAuB,IAAI,GAAG,CAAC,OAAO,CA+E7D"}

package/dist/esm/components/EmptyDashboardComponent/index.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAdmin } from '../../AdminProvider';
+export default function EmptyDashboardComponent() {
+    const { state } = useAdmin();
+    return (_jsx("div", { style: {
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+        }, children: _jsxs("div", { style: {
+                height: 80,
+                width: 260,
+                borderRadius: 6,
+                marginTop: 100,
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: 20,
+            }, className: "hover-dash-rect", onClick: () => {
+                if (state.navigateToDashboardBuilder) {
+                    state.navigateToDashboardBuilder();
+                }
+            }, children: [_jsx("style", { children: ` .hover-dash-rect { background: white; border: 1px dashed #e7e7e7; } .hover-dash-rect:hover { background: white; box-shadow: 0px 1px 24px 0px rgba(0, 0, 0, 0.07); border: 1px solid #e7e7e7; } ` }), _jsxs("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        width: 260,
+                    }, children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#565656", height: 26, width: 26, children: [_jsx("path", { fillRule: "evenodd", d: "M2.25 13.5a8.25 8.25 0 0 1 8.25-8.25.75.75 0 0 1 .75.75v6.75H18a.75.75 0 0 1 .75.75 8.25 8.25 0 0 1-16.5 0Z", clipRule: "evenodd" }), _jsx("path", { fillRule: "evenodd", d: "M12.75 3a.75.75 0 0 1 .75-.75 8.25 8.25 0 0 1 8.25 8.25.75.75 0 0 1-.75.75h-7.5a.75.75 0 0 1-.75-.75V3Z", clipRule: "evenodd" })] }), _jsx("div", { style: {
+                                fontSize: 14,
+                                fontWeight: 500,
+                                color: '#565656',
+                                // border: '1px solid #e7e7e7',
+                                paddingTop: 8,
+                                paddingBottom: 8,
+                                paddingRight: 12,
+                                paddingLeft: 12,
+                                borderRadius: 4,
+                                cursor: 'pointer',
+                            }, className: "quill-hover-button", children: "Create your first chart" })] })] }) }));
+}

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

@@ -0,0 +1,13 @@
+interface EnvSelectPopoverProps {
+    clients: any[];
+    setClient: (client: any) => void;
+    client: any;
+    theme: any;
+    environment: string;
+    setEnvironment: (environment: string) => void;
+    handlePromote?: (client: any) => void;
+    showPromote?: boolean;
+}
+export default function EnvSelectPopover({ clients, setClient, client, theme, environment, setEnvironment, handlePromote, showPromote, }: EnvSelectPopoverProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=EnvSelectPopover.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EnvSelectPopover.d.ts","sourceRoot":"","sources":["../../../src/components/EnvSelectPopover.tsx"],"names":[],"mappings":"AAIA,UAAU,qBAAqB;IAC7B,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,SAAS,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACjC,MAAM,EAAE,GAAG,CAAC;IACZ,KAAK,EAAE,GAAG,CAAC;IACX,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACtC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,OAAO,EACP,SAAS,EACT,MAAM,EACN,KAAK,EACL,WAAW,EACX,cAAc,EACd,aAAa,EACb,WAAW,GACZ,EAAE,qBAAqB,2CAsTvB"}

package/dist/esm/components/EnvSelectPopover.js

@@ -0,0 +1,222 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+import { ArrowDownHeadIcon } from '../icons';
+import { useAdmin } from '../AdminProvider';
+export default function EnvSelectPopover({ clients, setClient, client, theme, environment, setEnvironment, handlePromote, showPromote, }) {
+    const { state, dispatch } = useAdmin();
+    const [isOpen, setIsOpen] = useState(false);
+    const [hoveredItemId, setHoveredItemId] = useState(null);
+    const [isPromoteHovered, setIsPromoteHovered] = useState(false);
+    const handleItemClick = (selectedClient) => {
+        if (state.activeQuery) {
+            const message = 'Are you sure? Changing environment will exit edit mode and your changes will not be saved.';
+            if (!confirm(message))
+                return;
+            dispatch({ type: 'SET_ACTIVE_QUERY', payload: '' });
+            dispatch({ type: 'SET_ACTIVE_EDIT_ITEM', payload: null });
+        }
+        setClient(selectedClient);
+        setIsOpen(false);
+    };
+    const handlePromoteClick = (e, client) => {
+        e.preventDefault();
+        if (handlePromote) {
+            handlePromote(client);
+        }
+    };
+    const popoverRef = useRef(null);
+    const handleOutsideClick = (event) => {
+        if (popoverRef.current && !popoverRef.current.contains(event.target)) {
+            setIsOpen(false);
+        }
+    };
+    useEffect(() => {
+        if (isOpen) {
+            document.addEventListener('mousedown', handleOutsideClick);
+        }
+        else {
+            document.removeEventListener('mousedown', handleOutsideClick);
+        }
+        return () => {
+            document.removeEventListener('mousedown', handleOutsideClick); // Cleanup
+        };
+    }, [isOpen]);
+    const dropdownStyles = {
+        position: 'relative',
+        display: 'inline-block',
+        fontFamily: theme.fontFamily,
+        fontSize: 14,
+    };
+    const separatorStyle = {
+        borderBottom: '1px solid #e7e7e7',
+    };
+    const triggerButtonStyles = {
+        width: '100%',
+        minWidth: 230,
+        maxWidth: 230,
+        outline: 'none',
+        textAlign: 'left',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        borderRadius: 6,
+        WebkitAppearance: 'none',
+        paddingLeft: 12,
+        paddingRight: 12,
+        height: 38,
+        borderTop: '1px solid #e7e7e7',
+        borderLeft: '1px solid #e7e7e7',
+        borderRight: '1px solid #e7e7e7',
+        borderBottom: '1px solid #e7e7e7',
+        background: theme.backgroundColor,
+        color: theme.primaryTextColor,
+        // boxShadow: "0 1px 2px 0 rgba(0,0,0,.05)",
+        fontFamily: theme.fontFamily,
+        fontWeight: 500,
+    };
+    const dropdownContentStyles = {
+        display: isOpen ? 'flex' : 'none',
+        flexDirection: 'column',
+        background: '#FFFFFF',
+        // background: "#F7F8FA",
+        position: 'absolute',
+        boxShadow: '0px 1px 12px 0px rgba(56, 65, 81, 0.1)',
+        border: '1px solid #e7e7e7',
+        boxSizing: 'border-box',
+        zIndex: 1,
+        borderRadius: 6,
+        padding: 8,
+        maxHeight: 420,
+        width: 230,
+        marginTop: 8,
+        gap: 5,
+        overflowY: 'scroll',
+    };
+    const itemStyles = {
+        // padding: "10px",
+        height: 42,
+        paddingLeft: 10,
+        paddingRight: 4,
+        paddingTop: 6,
+        paddingBottom: 6,
+        cursor: 'pointer',
+        fontSize: '14px',
+        color: theme.primaryTextColor,
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        fontWeight: '500',
+    };
+    const itemHoverStyles = {
+        backgroundColor: 'rgba(56, 65, 81, 0.04)',
+        borderRadius: 6,
+    };
+    const selectedItemStyles = {
+        backgroundColor: 'rgba(56, 65, 81, 0.04)',
+        borderRadius: 6,
+        // boxShadow: "0 1px 6px 0 rgba(56, 65, 81, 0.09)",
+        fontWeight: '500',
+        // border: "1px solid #e7e7e7",
+    };
+    const promoteStyles = {
+        color: theme.primaryTextColor,
+        cursor: 'pointer',
+        fontSize: '13px',
+        border: isPromoteHovered ? '1px solid #e7e7e7' : '1px solid transparent',
+        backgroundColor: isPromoteHovered ? 'white' : undefined,
+        boxShadow: isPromoteHovered
+            ? '0px 1px 12px 0px rgba(56, 65, 81, 0.1)'
+            : undefined,
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingLeft: 7,
+        paddingRight: 9,
+        paddingTop: 6,
+        paddingBottom: 6,
+        borderRadius: 4,
+        gap: 3,
+    };
+    const clientStyles = {
+        color: theme.primaryTextColor,
+        cursor: 'pointer',
+        fontSize: '13px',
+        border: '1px solid transparent',
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingLeft: 7,
+        paddingRight: 9,
+        paddingTop: 6,
+        paddingBottom: 6,
+        borderRadius: 4,
+        gap: 3,
+    };
+    const itemTextStyles = {
+        // marginRight: "30px",
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+    };
+    if (client && client._id === '642ee580e45ecb91213b44aa') {
+        return (_jsxs("div", { style: {
+                background: '#f7f7f7',
+                borderRadius: 6,
+                height: 38,
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+                paddingLeft: 4,
+                paddingRight: 4,
+            }, children: [_jsx("button", { style: {
+                        background: environment === 'PRODUCTION' ? 'white' : undefined,
+                        color: environment === 'PRODUCTION' ? '#384151' : '#677389',
+                        fontWeight: environment === 'PRODUCTION' ? '600' : '500',
+                        borderRadius: 4,
+                        paddingLeft: 6,
+                        paddingRight: 6,
+                        paddingTop: 3,
+                        paddingBottom: 3,
+                        fontSize: 16,
+                    }, onClick: () => setEnvironment('PRODUCTION'), children: "Production" }), _jsx("button", { style: {
+                        background: environment === 'STAGING' ? 'white' : undefined,
+                        color: environment === 'STAGING' ? '#384151' : '#677389',
+                        fontWeight: environment === 'STAGING' ? '600' : '500',
+                        borderRadius: 4,
+                        paddingLeft: 6,
+                        paddingRight: 6,
+                        paddingTop: 3,
+                        paddingBottom: 3,
+                        fontSize: 16,
+                    }, onClick: () => setEnvironment('STAGING'), children: "Staging" })] }));
+    }
+    return (_jsxs("div", { style: dropdownStyles, ref: popoverRef, children: [_jsx("button", { 
+                // onMouseEnter={() => setIsOpen(true)}
+                onClick: () => setIsOpen((isOpen) => !isOpen), style: triggerButtonStyles, children: client ? client.name : 'Select environment' }), _jsx("div", { style: dropdownContentStyles, children: !!clients.length &&
+                    clients.map((item) => (_jsxs("div", { onClick: client && client._id !== item._id
+                            ? () => handleItemClick(item)
+                            : undefined, style: {
+                            ...itemStyles,
+                            ...(hoveredItemId === item._id ? itemHoverStyles : {}),
+                            ...(client && client._id === item._id
+                                ? selectedItemStyles
+                                : {}),
+                        }, onMouseEnter: () => setHoveredItemId(item._id), onMouseLeave: () => setHoveredItemId(null), children: [_jsx("span", { onClick: client && client._id === item._id
+                                    ? () => handleItemClick(item)
+                                    : undefined, style: {
+                                    ...clientStyles,
+                                    visibility: showPromote ? 'visible' : 'hidden',
+                                }, children: item.name }), client && client._id === item._id && (_jsxs("div", { onClick: (e) => handlePromoteClick(e, item), style: {
+                                    ...promoteStyles,
+                                    visibility: showPromote ? 'visible' : 'hidden',
+                                }, onMouseEnter: () => setIsPromoteHovered(true), onMouseLeave: () => setIsPromoteHovered(false), children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor", height: "16px", width: "16px", children: [_jsx("path", { d: "M7.25 10.25a.75.75 0 0 0 1.5 0V4.56l2.22 2.22a.75.75 0 1 0 1.06-1.06l-3.5-3.5a.75.75 0 0 0-1.06 0l-3.5 3.5a.75.75 0 0 0 1.06 1.06l2.22-2.22v5.69Z" }), _jsx("path", { d: "M3.5 9.75a.75.75 0 0 0-1.5 0v1.5A2.75 2.75 0 0 0 4.75 14h6.5A2.75 2.75 0 0 0 14 11.25v-1.5a.75.75 0 0 0-1.5 0v1.5c0 .69-.56 1.25-1.25 1.25h-6.5c-.69 0-1.25-.56-1.25-1.25v-1.5Z" })] }), "Promote"] }))] }, item._id))) }), _jsx(ArrowDownHeadIcon, { style: {
+                    height: '20px',
+                    width: '20px',
+                    flex: 'none',
+                    position: 'absolute',
+                    right: 8,
+                    top: 9.5,
+                    color: '#6C727F',
+                }, "aria-hidden": "true" })] }));
+}

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

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from 'react';
+export default function InputLabel(props: PropsWithChildren): JSX.Element;
+//# sourceMappingURL=InputLabel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputLabel.d.ts","sourceRoot":"","sources":["../../../src/components/InputLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAK,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAcxE"}

package/dist/esm/components/InputLabel.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function InputLabel(props) {
+    return (_jsx("div", { style: {
+            fontFamily: 'Inter; Helvetica',
+            color: '#6C727F',
+            fontSize: 14,
+            fontWeight: '600',
+            marginBottom: 2,
+        }, children: props.children }));
+}

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

@@ -0,0 +1,12 @@
+interface OrgSelectProps {
+    parentRef: any;
+    environment: string;
+    setEnvironment: (environment: string) => void;
+    organizations: any[];
+    theme: any;
+    organizationId: string;
+    setOrganizationId: (organizationId: string | null) => void;
+}
+export default function OrgSelect({ environment, setEnvironment, organizations, theme, organizationId, setOrganizationId, parentRef, }: OrgSelectProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=OrgSelect.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OrgSelect.d.ts","sourceRoot":"","sources":["../../../src/components/OrgSelect.tsx"],"names":[],"mappings":"AAWA,UAAU,cAAc;IACtB,SAAS,EAAE,GAAG,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,aAAa,EAAE,GAAG,EAAE,CAAC;IACrB,KAAK,EAAE,GAAG,CAAC;IACX,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,EAAE,CAAC,cAAc,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC5D;AA0ND,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,WAAW,EACX,cAAc,EACd,aAAa,EACb,KAAK,EACL,cAAc,EACd,iBAAiB,EACjB,SAAS,GACV,EAAE,cAAc,2CAiGhB"}

package/dist/esm/components/OrgSelect.js

@@ -0,0 +1,193 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState, } from 'react';
+import { ArrowDownHeadIcon } from '../icons';
+import { useAdmin } from '../AdminProvider';
+const useOnClickOutside = (ref, handler) => {
+    useEffect(() => {
+        const listener = (event) => {
+            if (!ref.current || ref.current.contains(event.target)) {
+                return;
+            }
+            handler(event);
+        };
+        document.addEventListener('mousedown', listener);
+        document.addEventListener('touchstart', listener);
+        return () => {
+            document.removeEventListener('mousedown', listener);
+            document.removeEventListener('touchstart', listener);
+        };
+    }, [ref, handler]);
+};
+function MemoizedPopover({ onClose, parentRef, children, style = {}, onClick, label, showTrigger = true, isOpen, setIsOpen, }) {
+    const modalRef = useRef(null);
+    useOnClickOutside(modalRef, (e) => {
+        // Exclude click on trigger button (e.g. Dropdown Button) from outside click handler
+        const isTriggerElem = parentRef
+            ? parentRef.current?.contains(e.target)
+            : false;
+        if (isTriggerElem) {
+            handleCloseModal();
+        }
+    });
+    const handleCloseModal = () => {
+        setIsOpen(false);
+        if (onClose) {
+            onClose();
+        }
+    };
+    return (_jsxs("div", { children: [showTrigger && (_jsxs("button", { 
+                //   onMouseEnter={() => setIsOpen(true)}
+                onClick: (e) => {
+                    setIsOpen(!isOpen);
+                    if (onClick) {
+                        onClick(e);
+                    }
+                }, style: {
+                    width: '100%',
+                    minWidth: 230,
+                    maxWidth: 230,
+                    outline: 'none',
+                    textAlign: 'left',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    borderRadius: 6,
+                    WebkitAppearance: 'none',
+                    borderTop: '1px solid #e7e7e7',
+                    borderLeft: '1px solid #e7e7e7',
+                    borderRight: '1px solid #e7e7e7',
+                    borderBottom: '1px solid #e7e7e7',
+                    paddingLeft: 12,
+                    paddingRight: 12,
+                    height: 38,
+                    background: 'white',
+                    color: '#384151',
+                    // boxShadow: "0 1px 2px 0 rgba(0,0,0,.05)",
+                    // fontFamily: theme.fontFamily,
+                    fontWeight: 500,
+                    fontSize: 14,
+                    position: 'relative',
+                }, children: [label, _jsx(ArrowDownHeadIcon, { style: {
+                            height: '20px',
+                            width: '20px',
+                            flex: 'none',
+                            position: 'absolute',
+                            right: 8,
+                            top: 8,
+                            color: '#6C727F',
+                        }, "aria-hidden": "true" })] })), 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: 1,
+                        top: showTrigger ? 8 : 0,
+                        borderRadius: 6,
+                        //   padding: 20,
+                        overflow: 'auto',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                        ...style,
+                    }, children: children }) }))] }));
+}
+const MemoizedTextInput = ({ value, onChange, placeholder, id, }) => {
+    return (_jsxs("div", { style: {
+            position: 'relative',
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            marginTop: 2,
+        }, children: [_jsx("style", { children: `
+      .quill-text-input {
+          background-color: white;
+          height: 40px;
+         width: 180px;
+         z-index: 2;
+         color: #384151;
+         border-radius: 4px;
+         text-align: left;
+         padding-right: 12px;
+         padding-top: 0px;
+         padding-bottom: 0px;
+         box-sizing: content-box;
+         margin-left: 6px;
+      }
+      .quill-text-input:focus {
+        outline: none;
+    }` }), _jsx("div", { style: { width: 6 } }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "rgba(56, 65, 81, 0.7)", height: "16", width: "16", children: _jsx("path", { fillRule: "evenodd", d: "M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z", clipRule: "evenodd" }) }), _jsx("input", { id: id, className: "quill-text-input", type: "text", value: value, onChange: (event) => onChange(event.target.value), placeholder: placeholder })] }));
+};
+export default function OrgSelect({ environment, setEnvironment, organizations, theme, organizationId, setOrganizationId, parentRef, }) {
+    useEffect(() => {
+        setEnvironment(environment);
+    }, [environment]);
+    const { state, dispatch } = useAdmin();
+    const [isOpen, setIsOpen] = useState(false);
+    const [searchQuery, setSearchQuery] = useState('');
+    const dropDownItems = organizations.map((org) => ({
+        name: org.name,
+        id: org.id,
+    }));
+    const handleSelectOrganization = (selectedItem) => {
+        if (state.activeQuery) {
+            const message = 'Are you sure? Changing organization will exit edit mode and your changes will not be saved.';
+            if (!confirm(message))
+                return;
+            dispatch({ type: 'SET_ACTIVE_QUERY', payload: '' });
+            dispatch({ type: 'SET_ACTIVE_EDIT_ITEM', payload: null });
+        }
+        setOrganizationId(selectedItem?.id || '');
+        setIsOpen(false);
+    };
+    const selectedOrganization = dropDownItems.find((item) => item.id === organizationId);
+    const filteredOrganizations = searchQuery === ''
+        ? dropDownItems
+        : dropDownItems.filter((org) => org.name
+            .toLowerCase()
+            .replace(/\s+/g, '')
+            .includes(searchQuery.toLowerCase().replace(/\s+/g, '')));
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx("h1", { style: {
+                    fontSize: '14px',
+                    paddingTop: '0px',
+                    marginTop: '0px',
+                    marginBottom: '4px',
+                    fontWeight: '600',
+                    color: theme.secondaryTextColor,
+                }, children: "Organization" }), _jsxs(MemoizedPopover, { parentRef: parentRef, label: selectedOrganization && selectedOrganization.name, isOpen: isOpen, onClose: () => setIsOpen(false), style: {
+                    boxSizing: 'border-box',
+                    fontSize: 14,
+                    //   padding: 11,
+                }, setIsOpen: setIsOpen, onClick: () => console.log(), children: [_jsx(MemoizedTextInput, { id: "quill-search-bar", placeholder: "Search", value: searchQuery, onChange: setSearchQuery }), _jsx("div", { style: { height: 9, width: 230, borderTop: '1px solid #e7e7e7' } }), _jsxs("div", { style: { gap: 2, maxHeight: '50vh' }, children: [filteredOrganizations.map((item, index) => (_jsx(OrgSelectRow, { setSelected: handleSelectOrganization, item: item }, index))), filteredOrganizations.length === 0 && (_jsx(OrgSelectRow, { item: { name: 'No organizations found' } }))] }), _jsx("div", { style: { height: 8, width: 230 } })] })] }));
+}
+function OrgSelectRow({ item, setSelected, }) {
+    return (_jsxs("div", { onClick: setSelected ? () => setSelected(item) : undefined, className: "quill-org-select", children: [_jsx("style", { children: `
+  .quill-org-select {
+      background-color: white;
+      height: 42px;
+      color: #384151;
+      width: 216px;
+     borderBottom: 1px solid #e7e7e7;
+     border-radius: 6px;
+     text-align: left;
+     padding-left: 10px;
+     padding-right: 12px;
+     display: flex;
+     flex-direction: row;
+     align-items: center;
+     cursor: pointer;
+     font-weight: 500;
+     font-size: 14px;
+     text-overflow: ellipsis;
+     white-space: nowrap;
+     overflow: hidden;
+  }
+  .quill-org-select:hover {
+    background-color: rgba(56, 65, 81, 0.04);
+  }` }), _jsx("div", { style: {
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    display: 'block',
+                }, children: item.name })] }));
+}

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

@@ -0,0 +1,8 @@
+import { CSSProperties } from 'react';
+export default function SqlViewTile({ query, name, header2Style, header1Style, }: {
+    query: string;
+    name: string;
+    header1Style?: CSSProperties;
+    header2Style?: CSSProperties;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SqlViewTile.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SqlViewTile.d.ts","sourceRoot":"","sources":["../../../src/components/SqlViewTile.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAI7C,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,YAAY,GACb,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,YAAY,CAAC,EAAE,aAAa,CAAC;CAC9B,2CAuEA"}

package/dist/esm/components/SqlViewTile.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import prismTheme from 'prism-react-renderer/themes/nightOwlLight';
+import Highlight, { defaultProps } from 'prism-react-renderer';
+export default function SqlViewTile({ query, name, header2Style, header1Style, }) {
+    return (_jsxs("div", { style: {
+            // height: '30px',
+            // width: '40px',
+            width: '100%',
+            height: 200,
+            display: 'flex',
+            flexDirection: 'column',
+            border: '1px solid #e7e7e7',
+            borderRadius: 6,
+            padding: '12px',
+            background: 'white',
+        }, children: [_jsx("h1", { style: {
+                    ...header1Style,
+                    maxWidth: '100%',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    fontSize: 15,
+                    color: '#212121',
+                }, children: name }), _jsx("div", { style: {
+                    backgroundColor: '#FBFBFB',
+                    height: '100%',
+                    borderRadius: 6,
+                    fontSize: 14,
+                    overflow: 'hidden',
+                    border: '1px solid #e7e7e7',
+                }, children: _jsx(Highlight, { ...defaultProps, theme: prismTheme, code: query, language: "sql", children: ({ className, style, tokens, getLineProps, getTokenProps }) => (_jsx("pre", { className: className, style: {
+                            ...style,
+                            textAlign: 'left',
+                            margin: '1em 0',
+                            padding: '0.5em',
+                            overflow: 'scroll',
+                            height: 130,
+                            maxWidth: 520,
+                        }, children: tokens.map((line, i) => (_jsx("div", { ...getLineProps({ line, key: i }), children: line.map((token, key) => (_jsx("span", { ...getTokenProps({ token, key }) }, key))) }, i))) })) }) })] }));
+}

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

@@ -0,0 +1,10 @@
+import { CSSProperties } from 'react';
+interface StepDisplayProps {
+    label: string;
+    completed: boolean;
+    header1Style: CSSProperties;
+    onClick?: () => void;
+}
+export default function StepDisplay({ label, completed, header1Style, onClick, }: StepDisplayProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=StepDisplay.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StepDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/StepDisplay.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAY,MAAM,OAAO,CAAC;AAGvD,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,aAAa,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,KAAK,EACL,SAAS,EACT,YAAY,EACZ,OAAO,GACR,EAAE,gBAAgB,2CA0ClB"}