@quillsql/admin 1.7.1 → 1.7.3

package/dist/cjs/components/UiComponents.d.ts

@@ -1,110 +0,0 @@
-import React, { ReactNode, CSSProperties, ChangeEvent } from 'react';
-import { QuillTheme } from '@quillsql/react';
-export interface Option {
-    value: string;
-    label: string;
-}
-export interface SelectComponentProps {
-    onChange: (value: string) => void;
-    value: string;
-    options: Option[];
-    disabled?: boolean;
-    isLoading?: boolean;
-    label?: string;
-    theme?: any;
-    style?: CSSProperties;
-    hideEmptyOption?: boolean;
-}
-export interface TextInputComponentProps {
-    onChange: (e: any) => void;
-    value: string;
-    id: string;
-    width?: string;
-    label?: string;
-    placeholder?: string;
-}
-export interface TableComponentProps {
-    rows: any[];
-    columns: any[];
-    height: string;
-}
-export interface ModalComponentProps {
-    children: any;
-    isOpen: boolean;
-    onClose?: () => void;
-    title?: string;
-    theme?: QuillTheme;
-    style?: CSSProperties;
-}
-export interface HeaderProps {
-    children: any;
-}
-export interface LabelProps {
-    children: any;
-}
-export interface TextProps {
-    children: any;
-}
-export interface DeleteButtonProps {
-    onClick: () => void;
-    style: any;
-}
-export declare const MemoizedTextInput: ({ value, onChange, placeholder, id, width, }: TextInputComponentProps) => import("react/jsx-runtime").JSX.Element;
-export declare const MemoizedButton: ({ label, onClick, isLoading, primary, style, width, disabled, tooltipText, }: any) => import("react/jsx-runtime").JSX.Element;
-export declare const MemoizedSecondaryButton: ({ label, onClick, isLoading, }: any) => import("react/jsx-runtime").JSX.Element;
-export declare const MemoizedHeader: ({ children }: any) => import("react/jsx-runtime").JSX.Element;
-export declare const MemoizedLabel: ({ children }: any) => import("react/jsx-runtime").JSX.Element;
-export declare const MemoizedText: ({ children }: any) => import("react/jsx-runtime").JSX.Element;
-export interface PopoverComponentProps {
-    children: any;
-    onClose?: () => void;
-    parentRef?: any;
-    style?: any;
-    onClick?: () => void;
-    showTrigger?: boolean;
-    isOpen: boolean;
-    setIsOpen: (isOpen: boolean) => void;
-}
-export declare function MemoizedPopover({ onClose, parentRef, children, style, onClick, label, showTrigger, isOpen, setIsOpen, }: any): import("react/jsx-runtime").JSX.Element;
-export interface TabsComponentProps {
-    options: {
-        label: string;
-        value: string;
-    }[];
-    value: string;
-    onChange: (event: ChangeEvent<HTMLSelectElement>) => void;
-}
-export declare const QuillTabs: ({ options, value, onChange, }: TabsComponentProps) => import("react/jsx-runtime").JSX.Element;
-export declare function MemoizedModal({ isOpen, setIsOpen, title, children, width, height, }: {
-    isOpen: boolean;
-    setIsOpen: (isOpen: boolean) => void;
-    title?: string;
-    children: ReactNode;
-    width?: number;
-    height?: number;
-}): JSX.Element | null;
-export declare const MemoizedDeleteButton: ({ onClick, style }: any) => import("react/jsx-runtime").JSX.Element;
-export declare const LoadingSpinner: ({ scale }: {
-    scale?: number;
-}) => import("react/jsx-runtime").JSX.Element;
-export declare const QuillErrorMessageComponent: ({ containerStyle, errorMessage, }: {
-    containerStyle?: CSSProperties;
-    errorMessage: string;
-}) => import("react/jsx-runtime").JSX.Element;
-export declare const OverflowContainer: ({ children }: any) => import("react/jsx-runtime").JSX.Element;
-export declare const QuillToolTip: ({ children, text, enabled, containerStyle, textStyle, displayBelow, }: {
-    children: ReactNode;
-    text: string;
-    enabled: boolean;
-    containerStyle?: CSSProperties;
-    textStyle?: CSSProperties;
-    displayBelow?: boolean;
-}) => string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
-export declare const QuillPortal: ({ children, containerStyle, anchorRef, showModal, setShowModal, }: {
-    children: ReactNode;
-    containerStyle?: CSSProperties;
-    anchorRef: React.RefObject<HTMLElement>;
-    showModal: boolean;
-    setShowModal: (showModal: boolean) => void;
-}) => React.ReactPortal;
-//# sourceMappingURL=UiComponents.d.ts.map

package/dist/cjs/components/UiComponents.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"UiComponents.d.ts","sourceRoot":"","sources":["../../../src/components/UiComponents.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,SAAS,EAKT,aAAa,EACb,WAAW,EACZ,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,UAAU,EAAgB,MAAM,iBAAiB,CAAC;AAQ3D,MAAM,WAAW,MAAM;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,GAAG,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,GAAG,CAAC;CACf;AAED,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,GAAG,CAAC;CACf;AAED,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE,GAAG,CAAC;CACf;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,eAAO,MAAM,iBAAiB,GAAI,8CAM/B,uBAAuB,4CAkCzB,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,8EAS5B,GAAG,4CAoEL,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,gCAIrC,GAAG,4CAqCL,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,cAAc,GAAG,4CAa/C,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,cAAc,GAAG,4CAY9C,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,cAAc,GAAG,4CAY7C,CAAC;AAEF,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,GAAG,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACtC;AAED,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,SAAS,EACT,QAAQ,EACR,KAAU,EACV,OAAO,EACP,KAAK,EACL,WAAkB,EAClB,MAAM,EACN,SAAS,GACV,EAAE,GAAG,2CAiEL;AAED,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC3D;AAED,eAAO,MAAM,SAAS,GAAI,+BAOvB,kBAAkB,4CAoDpB,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,KAAK,EACL,MAAM,GACP,EAAE;IACD,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAoGrB;AAED,eAAO,MAAM,oBAAoB,GAAI,oBAAoB,GAAG,4CA2B3D,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,WAAe;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,4CAkD/D,CAAC;AAEF,eAAO,MAAM,0BAA0B,GAAI,mCAGxC;IACD,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,YAAY,EAAE,MAAM,CAAC;CACtB,4CAsBA,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,cAAc,GAAG,4CA6FlD,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,uEAO1B;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,uHA2EA,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,mEAMzB;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACxC,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5C,sBA2GA,CAAC"}

package/dist/cjs/components/UiComponents.js

@@ -1,561 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.QuillPortal = exports.QuillToolTip = exports.OverflowContainer = exports.QuillErrorMessageComponent = exports.LoadingSpinner = exports.MemoizedDeleteButton = exports.QuillTabs = exports.MemoizedText = exports.MemoizedLabel = exports.MemoizedHeader = exports.MemoizedSecondaryButton = exports.MemoizedButton = exports.MemoizedTextInput = void 0;
-exports.MemoizedPopover = MemoizedPopover;
-exports.MemoizedModal = MemoizedModal;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const useAdmin_1 = require("../hooks/useAdmin");
-const assets_1 = require("../assets");
-const react_2 = require("@quillsql/react");
-const useOnClickOutside_1 = __importStar(require("../hooks/useOnClickOutside"));
-const QuillToolTipPortal_1 = require("./QuillToolTipPortal");
-const react_dom_1 = require("react-dom");
-const ui_1 = require("../utils/ui");
-const MemoizedTextInput = ({ value, onChange, placeholder, id, width, }) => {
-    const { state } = (0, useAdmin_1.useAdmin)();
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative', width: width }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
-      .quill-text-input {
-        background-color: white;
-        height: 40px;
-        width: 180px;
-        color: #384151;
-        border: 1px solid ${state.theme.borderColor};
-        border-radius: 6px;
-        text-align: left;
-        box-shadow: 0px 1px 4px 0px rgba(56, 65, 81, 0.08);
-        padding-left: 12px;
-        padding-right: 12px;
-        padding-top: 0px;
-        padding-bottom: 0px;
-        box-sizing: content-box;
-    }` }), (0, jsx_runtime_1.jsx)("input", { id: id, className: "quill-text-input", type: "text", value: value, onChange: onChange, placeholder: placeholder, style: {
-                    fontFamily: state.theme?.fontFamily,
-                    width: width ? 'calc(100% - 24px)' : '180px',
-                } })] }));
-};
-exports.MemoizedTextInput = MemoizedTextInput;
-const MemoizedButton = ({ label, onClick, isLoading = false, primary = true, style = {}, width = 'auto', disabled = false, tooltipText = '', }) => {
-    const { state } = (0, useAdmin_1.useAdmin)();
-    return ((0, jsx_runtime_1.jsx)(QuillToolTipPortal_1.QuillToolTipPortal, { text: tooltipText, enabled: tooltipText !== '', children: (0, jsx_runtime_1.jsxs)("button", { className: disabled ? 'quill-button-disabled' : 'quill-button', onClick: disabled ? undefined : onClick, style: {
-                fontFamily: state.theme?.fontFamily,
-                height: 40,
-                display: 'flex',
-                border: 'none',
-                fontWeight: 500,
-                borderRadius: 6,
-                boxSizing: 'content-box',
-                paddingLeft: 16,
-                paddingRight: 16,
-                whiteSpace: 'nowrap',
-                fontSize: 15,
-                cursor: disabled ? 'default' : 'pointer',
-                position: 'relative',
-                justifyContent: 'center',
-                alignItems: 'center',
-                ...style,
-                width: width,
-            }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
-        .quill-button {
-          background-color: ${primary ? state.theme?.primaryButtonColor : 'white'};
-          color: ${primary
-                        ? (state.theme?.primaryButtonTextColor ?? 'white')
-                        : state.theme?.secondaryTextColor}
-        }
-        .quill-button-disabled {
-          background-color: ${primary ? state.theme?.primaryButtonColor : 'white'};
-          opacity: 0.5;
-          color: ${primary
-                        ? (state.theme?.primaryButtonTextColor ?? 'white')
-                        : state.theme?.secondaryTextColor}
-        }
-        .quill-button:hover {
-          background-color: ${primary ? state.theme?.hoverPrimaryButtonColor : 'rgba(56, 65, 81, 0.9)'};
-          color: ${primary
-                        ? (state.theme?.hoverPrimaryButtonTextColor ?? 'white')
-                        : state.theme?.secondaryTextColor}
-        }` }), isLoading ? ((0, jsx_runtime_1.jsx)("div", { style: { position: 'absolute' }, children: (0, jsx_runtime_1.jsx)(exports.LoadingSpinner, {}) })) : null, (0, jsx_runtime_1.jsx)("div", { style: {
-                        visibility: isLoading ? 'hidden' : 'visible',
-                    }, children: label })] }) }));
-};
-exports.MemoizedButton = MemoizedButton;
-const MemoizedSecondaryButton = ({ label, onClick, isLoading = false, }) => {
-    const { state } = (0, useAdmin_1.useAdmin)();
-    return ((0, jsx_runtime_1.jsxs)("button", { className: "quill-secondary-button", onClick: onClick, style: { fontFamily: state.theme?.fontFamily }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
-    .quill-secondary-button {
-        background-color: #F5F5F6;
-        background-color: white;
-        color: #212121';
-        color: rgba(56, 65, 81, 0.75);
-        height: 40px;
-       border: 1px solid transparent;
-       font-weight: 500;
-       border-radius: 6px;
-       padding-left: 16px;
-       border: 1px solid #e7e7e7;
-       padding-right: 16px;
-       box-sizing: content-box;
-       font-size: 15px;
-       cursor: pointer;
-    }
-    .quill-secondary-button:hover {
-      background-color: rgba(56, 65, 81, 0.09);
-    }` }), isLoading ? ((0, jsx_runtime_1.jsx)("div", { style: { padding: '0px 16px' }, children: (0, jsx_runtime_1.jsx)(exports.LoadingSpinner, {}) })) : (label)] }));
-};
-exports.MemoizedSecondaryButton = MemoizedSecondaryButton;
-const MemoizedHeader = ({ children }) => ((0, jsx_runtime_1.jsx)("h1", { style: {
-        fontSize: 16,
-        fontWeight: 600,
-        color: '#384151',
-        userSelect: 'none',
-        margin: 0,
-        padding: 0,
-    }, children: children }));
-exports.MemoizedHeader = MemoizedHeader;
-const MemoizedLabel = ({ children }) => ((0, jsx_runtime_1.jsx)("h1", { style: {
-        fontSize: 14,
-        fontWeight: 600,
-        color: '#575E6A',
-        userSelect: 'none',
-        paddingBottom: 5,
-    }, children: children }));
-exports.MemoizedLabel = MemoizedLabel;
-const MemoizedText = ({ children }) => ((0, jsx_runtime_1.jsx)("p", { style: {
-        fontSize: 12,
-        fontWeight: 400,
-        margin: 0,
-        color: '#575E6A',
-        userSelect: 'none',
-    }, children: children }));
-exports.MemoizedText = MemoizedText;
-function MemoizedPopover({ onClose, parentRef, children, style = {}, onClick, label, showTrigger = true, isOpen, setIsOpen, }) {
-    const modalRef = (0, react_1.useRef)(null);
-    const { state } = (0, useAdmin_1.useAdmin)();
-    (0, useOnClickOutside_1.default)(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();
-        }
-    }, isOpen);
-    const handleCloseModal = () => {
-        setIsOpen(false);
-        if (onClose) {
-            onClose();
-        }
-    };
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [showTrigger && ((0, jsx_runtime_1.jsx)(exports.MemoizedSecondaryButton, { onClick: (e) => {
-                    setIsOpen((isOpen) => !isOpen);
-                    if (onClick) {
-                        onClick(e);
-                    }
-                }, label: label })), isOpen && ((0, jsx_runtime_1.jsx)("div", { id: "quill-popover-modal", ref: modalRef, style: { position: 'relative' }, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                        background: state.theme?.backgroundColor,
-                        position: 'absolute',
-                        boxShadow: '0px 1px 12px 0px rgba(56, 65, 81, 0.1)',
-                        border: '1px solid #e7e7e7',
-                        boxSizing: 'content-box',
-                        zIndex: 1,
-                        top: showTrigger ? 12 : 0,
-                        borderRadius: 6,
-                        padding: 20,
-                        overflow: 'auto',
-                        ...style,
-                    }, children: children }) }))] }));
-}
-const QuillTabs = ({ options = [
-    { label: 'or', value: 'OR' },
-    { label: 'and', value: 'AND' },
-], value, onChange, }) => ((0, jsx_runtime_1.jsx)("div", { style: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        borderRadius: '0.25rem',
-        outlineStyle: 'none',
-        background: '#F9FAFB',
-        padding: '5px',
-    }, children: options.map((option, index) => ((0, jsx_runtime_1.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))) }));
-exports.QuillTabs = QuillTabs;
-function MemoizedModal({ isOpen, setIsOpen, title, children, width, height, }) {
-    const { state } = (0, useAdmin_1.useAdmin)();
-    (0, react_1.useEffect)(() => {
-        // Prevent scrolling in the background when the modal is open
-        if (isOpen) {
-            document.body.style.overflow = 'hidden';
-        }
-        return () => {
-            // Re-enable scrolling when the modal is closed/unmounted
-            document.body.style.overflow = 'unset';
-        };
-    }, [isOpen]);
-    if (!isOpen) {
-        return null;
-    }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.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) }), (0, jsx_runtime_1.jsx)("div", { style: {
-                    position: 'fixed',
-                    left: '50%',
-                    top: '50%',
-                    zIndex: '50',
-                    display: 'flex',
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                    transform: 'translateX(-50%) translateY(-50%)',
-                    background: state.theme?.backgroundColor,
-                    borderRadius: 8,
-                    borderStyle: 'solid',
-                    borderWidth: 1,
-                    borderColor: '#e7e7e7',
-                    width: width ?? 'auto',
-                    height: height ?? 'auto',
-                    overflow: 'auto',
-                    maxWidth: 'calc(100vw - 82px)',
-                    maxHeight: 'calc(100vh - 82px)',
-                }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
-                        height: '100%',
-                        width: '100%',
-                        maxWidth: 'calc(100vw - 82px)',
-                        maxHeight: 'calc(100vh - 82px)',
-                        backgroundColor: '#ffffff',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        position: 'relative',
-                        fontFamily: state.theme?.fontFamily,
-                    }, children: [(0, jsx_runtime_1.jsxs)("div", { id: "quill-modal-header", style: {
-                                display: 'flex',
-                                flexDirection: 'row',
-                                width: '100%',
-                                justifyContent: 'space-between',
-                                alignItems: 'center',
-                            }, children: [(0, jsx_runtime_1.jsx)("h2", { style: {
-                                        fontSize: 18,
-                                        fontWeight: '600',
-                                        marginLeft: 20,
-                                        // width: '90%',
-                                        textAlign: 'left',
-                                        color: state.theme?.primaryTextColor,
-                                    }, children: title }), (0, jsx_runtime_1.jsx)("div", { style: { marginRight: 10, marginTop: 10 }, children: (0, jsx_runtime_1.jsx)(exports.MemoizedDeleteButton, { onClick: () => setIsOpen(false), style: {} }) })] }), children] }) })] }));
-}
-const MemoizedDeleteButton = ({ onClick, style }) => ((0, jsx_runtime_1.jsxs)("button", { title: "Delete", className: "quill-delete-button", type: "button", onClick: onClick, style: {
-        height: 40,
-        width: 40,
-        border: 'none',
-        cursor: onClick ? 'pointer' : 'default',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        borderRadius: 6,
-        ...style,
-    }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
-  .quill-delete-button {
-      background-color: white;
-  }
-  .quill-delete-button:hover {
-    background-color: rgba(56, 65, 81, 0.03);
-  }` }), (0, jsx_runtime_1.jsx)(assets_1.XIcon, { height: "20", width: "20", fill: "#6C727F" })] }));
-exports.MemoizedDeleteButton = MemoizedDeleteButton;
-const LoadingSpinner = ({ scale = 1 }) => {
-    const { state: { theme }, } = (0, useAdmin_1.useAdmin)();
-    return ((0, jsx_runtime_1.jsxs)("svg", { width: "24", height: "24", style: { scale: scale }, children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "19.63 39.25" // calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)
-                , strokeDashoffset: "9.81" // calc(2 * 3.14 * 9.375 / 6)
-                , stroke: theme?.primaryTextColor ?? '#364153', fill: "none", transform: "rotate(-90 12 12)", children: (0, jsx_runtime_1.jsx)("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "-180 12 12", to: "180 12 12", dur: "0.8s", repeatCount: "indefinite" }) }), (0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "19.63 19.63" // calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 1 / 3)
-                , strokeDashoffset: "19.63 39.25" // 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: (0, jsx_runtime_1.jsx)("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "0 12 12", to: "360 12 12", dur: "0.8s", repeatCount: "indefinite" }) })] }));
-};
-exports.LoadingSpinner = LoadingSpinner;
-const QuillErrorMessageComponent = ({ containerStyle, errorMessage, }) => {
-    const { state } = (0, useAdmin_1.useAdmin)();
-    return ((0, jsx_runtime_1.jsx)("div", { style: {
-            borderRadius: 8,
-            backgroundColor: '#FF9494',
-            paddingLeft: '12px',
-            paddingRight: '8px',
-            height: 30,
-            display: 'flex',
-            alignItems: 'center',
-            fontSize: 13,
-            fontWeight: 'bold',
-            fontFamily: state.theme?.fontFamily,
-            color: 'white',
-            ...containerStyle,
-        }, children: errorMessage }));
-};
-exports.QuillErrorMessageComponent = QuillErrorMessageComponent;
-const OverflowContainer = ({ children }) => {
-    const containerRef = (0, react_1.useRef)(null);
-    const [showTopShadow, setShowTopShadow] = (0, react_1.useState)(false);
-    const [showBottomShadow, setShowBottomShadow] = (0, react_1.useState)(false);
-    const checkOverflow = () => {
-        const container = containerRef.current;
-        if (container) {
-            const { scrollTop, scrollHeight, clientHeight } = container;
-            setShowTopShadow(scrollTop > 0);
-            setShowBottomShadow(scrollHeight > clientHeight && scrollTop < scrollHeight - clientHeight);
-        }
-    };
-    (0, react_1.useEffect)(() => {
-        const container = containerRef.current;
-        if (container) {
-            checkOverflow();
-            const topObserver = new IntersectionObserver(([entry]) => setShowTopShadow(!entry?.isIntersecting), { root: container, threshold: 0 });
-            const bottomObserver = new IntersectionObserver(([entry]) => setShowBottomShadow(!entry?.isIntersecting), { root: container, threshold: 0 });
-            const topSentinel = document.createElement('div');
-            const bottomSentinel = document.createElement('div');
-            container.insertBefore(topSentinel, container.firstChild);
-            container.appendChild(bottomSentinel);
-            topObserver.observe(topSentinel);
-            bottomObserver.observe(bottomSentinel);
-            return () => {
-                topObserver.disconnect();
-                bottomObserver.disconnect();
-                container.removeChild(topSentinel);
-                container.removeChild(bottomSentinel);
-            };
-        }
-    }, []);
-    const containerStyle = {
-        position: 'relative',
-        overflowY: 'auto',
-        overscrollBehavior: 'none',
-    };
-    const shadowStyle = {
-        position: 'sticky',
-        left: 0,
-        right: 0,
-        height: '8px',
-        marginTop: '-8px',
-        pointerEvents: 'none',
-        zIndex: 1,
-        transition: 'opacity 0.3s ease',
-    };
-    const topShadowStyle = {
-        top: 0,
-        background: 'linear-gradient(to bottom, rgba(56, 65, 81, 0.08), rgba(0,0,0,0))',
-        opacity: showTopShadow ? 1 : 0,
-        ...shadowStyle,
-    };
-    const bottomShadowStyle = {
-        bottom: 0,
-        background: 'linear-gradient(to top, rgba(56, 65, 81, 0.08), rgba(0,0,0,0))',
-        opacity: showBottomShadow ? 1 : 0,
-        ...shadowStyle,
-    };
-    return ((0, jsx_runtime_1.jsxs)("div", { style: containerStyle, ref: containerRef, onScroll: checkOverflow, onTouchMove: checkOverflow, onMouseMove: checkOverflow, children: [(0, jsx_runtime_1.jsx)("div", { style: topShadowStyle }), children, (0, jsx_runtime_1.jsx)("div", { style: bottomShadowStyle })] }));
-};
-exports.OverflowContainer = OverflowContainer;
-const QuillToolTip = ({ children, text, enabled = true, containerStyle = {}, textStyle = {}, displayBelow = false, }) => {
-    const [theme] = (0, react_1.useContext)(react_2.ThemeContext);
-    return enabled ? ((0, jsx_runtime_1.jsxs)("div", { className: "tooltip-container", style: { ...containerStyle }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
-        .tooltip-container {
-          position: relative;
-          display: inline-block;
-        }
-
-        /* Tooltip text */
-        .tooltip-container .tooltip-text {
-          visibility: visible;
-          width: auto;
-          background-color: #ffffff;
-          color: #212121;
-          text-align: center;
-          border-radius: 5px;
-          padding: 5px;
-          position: absolute;
-          z-index: 10;
-          ${displayBelow ? 'top: 125%;' : 'bottom: 125%;'}
-          opacity: 0;
-          transition: opacity 0.3s;
-          font-family: ${theme?.fontFamily};
-          font-size: small;
-          white-space: nowrap;
-          border-width: 1px;
-          border-style: solid;
-          border-color: #e7e7e7;
-          padding: 10px;
-        }
-
-        /* Tooltip arrow */
-        .tooltip-container .tooltip-text::before,
-        .tooltip-container .tooltip-text::after {
-          content: "";
-          position: absolute;
-          ${displayBelow ? 'bottom: 100%;' : 'top: 100%;'}
-          left: 50%;
-          border: solid transparent;
-          height: 0;
-          width: 0;
-          pointer-events: none;
-          transform: translateX(-50%);
-        }
-
-        .tooltip-container .tooltip-text::before {
-          border-color: rgba(231, 231, 231, 0);
-          ${displayBelow ? 'border-bottom-color: #e7e7e7;' : 'border-top-color: #e7e7e7;'}
-          border-width: 6px;
-        }
-
-        .tooltip-container .tooltip-text::after {
-          border-color: rgba(255, 255, 255, 0);
-          ${displayBelow ? 'border-bottom-color: #ffffff;' : 'border-top-color: #ffffff;'}
-          border-width: 5px;
-        }
-
-        /* Show the tooltip when hovering over the button */
-        .tooltip-container:hover .tooltip-text {
-          visibility: visible;
-          opacity: 1;
-        }` }), children, (0, jsx_runtime_1.jsx)("div", { className: "tooltip-text", style: { ...textStyle }, children: text })] })) : (children);
-};
-exports.QuillToolTip = QuillToolTip;
-const QuillPortal = ({ children, containerStyle, anchorRef, showModal, setShowModal, }) => {
-    const modalRef = (0, react_1.useRef)(null);
-    const [popoverPosition, setPopoverPosition] = (0, react_1.useState)(undefined);
-    const [z, setZ] = (0, react_1.useState)(10);
-    const scrollableParentRef = (0, react_1.useRef)(document.body);
-    const updatePosition = () => {
-        if (anchorRef.current) {
-            requestAnimationFrame(() => {
-                const rect = anchorRef?.current?.getBoundingClientRect();
-                if (rect) {
-                    const viewportHeight = window.innerHeight;
-                    // Calculate available space below the element with a 64px bottom margin
-                    const availableHeight = viewportHeight - rect.bottom - 64;
-                    setPopoverPosition({
-                        top: rect.bottom + window.scrollY,
-                        left: rect.left + window.scrollX,
-                        width: rect.width,
-                        maxHeight: availableHeight,
-                    });
-                }
-            });
-        }
-    };
-    (0, react_1.useEffect)(() => {
-        let resizeObserver;
-        let mutationObserver;
-        if (showModal && anchorRef.current) {
-            updatePosition();
-            setZ((0, useOnClickOutside_1.getEffectiveZIndex)(anchorRef.current) + 1);
-            resizeObserver = new ResizeObserver(() => updatePosition());
-            resizeObserver.observe(anchorRef.current);
-            mutationObserver = new MutationObserver(() => updatePosition());
-            mutationObserver.observe(anchorRef.current, {
-                attributes: true,
-                subtree: true,
-            });
-            // Track scrolling of the nearest scrollable ancestor
-            scrollableParentRef.current = (0, ui_1.getScrollableParent)(anchorRef.current);
-            scrollableParentRef.current.addEventListener('scroll', updatePosition, {
-                passive: true,
-            });
-            const handleResize = () => requestAnimationFrame(updatePosition);
-            window.addEventListener('resize', handleResize, { passive: true });
-            return () => {
-                resizeObserver.disconnect();
-                mutationObserver.disconnect();
-                scrollableParentRef.current.removeEventListener('scroll', updatePosition);
-                window.removeEventListener('resize', handleResize);
-            };
-        }
-    }, [showModal]);
-    (0, useOnClickOutside_1.default)(modalRef, (event) => {
-        if (!anchorRef.current?.contains(event.target))
-            setShowModal(false);
-    }, showModal);
-    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { style: {
-            position: 'absolute',
-            top: `${popoverPosition?.top ?? 0}px`,
-            left: `${popoverPosition?.left ?? 0}px`,
-            width: `${popoverPosition?.width ?? 0}px`,
-            maxHeight: `${Math.max(popoverPosition?.maxHeight ?? 0, 100)}px`,
-            visibility: popoverPosition ? 'visible' : 'hidden',
-            // display: 'flex',
-            // flexDirection: 'column',
-            // boxSizing: 'border-box',
-            // borderWidth: 1,
-            // borderStyle: 'solid',
-            // borderColor: theme?.borderColor,
-            // borderRadius: 6,
-            // background: theme?.backgroundColor,
-            // marginTop: 12,
-            zIndex: z,
-            // padding: 6,
-            // fontFamily: theme?.fontFamily,
-            // overflow: 'scroll',
-            // fontSize: 14,
-            ...containerStyle,
-        }, ref: modalRef, "data-portal-ignore": "true", children: children }), document.body);
-};
-exports.QuillPortal = QuillPortal;