@quillsql/admin 1.4.0 → 1.6.0

package/dist/cjs/components/QuillSelect.js

@@ -0,0 +1,137 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuillSelectComponent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const useOnClickOutside_1 = __importDefault(require("../hooks/useOnClickOutside"));
+const react_1 = require("react");
+const Admin_1 = require("../Admin");
+function QuillSelectComponent({ options, value, onChange, theme = Admin_1.theme, label, }) {
+    const [showModal, setShowModal] = (0, react_1.useState)(false);
+    const modalRef = (0, react_1.useRef)(null);
+    (0, useOnClickOutside_1.default)(modalRef, (e) => {
+        setShowModal(false);
+    });
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            position: 'relative',
+            width: 200,
+            minWidth: 200,
+            borderRadius: '6px',
+        }, children: [label && ((0, jsx_runtime_1.jsx)("div", { style: {
+                    fontSize: 14,
+                    color: theme.primaryTextColor,
+                    fontFamily: theme.fontFamily,
+                    paddingBottom: 5,
+                    fontWeight: 600,
+                }, children: label })), (0, jsx_runtime_1.jsxs)("button", { style: {
+                    fontFamily: theme.fontFamily,
+                    color: theme.primaryTextColor,
+                    width: '100%',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    fontWeight: 'inherit',
+                    lineHeight: 'inherit',
+                    padding: '8px 12px',
+                    fontSize: 14,
+                    margin: 0,
+                    boxSizing: 'border-box',
+                    borderWidth: 1,
+                    borderStyle: 'solid',
+                    borderColor: theme.borderColor,
+                    borderRadius: 6,
+                    paddingTop: 9,
+                    paddingBottom: 9,
+                    height: 40,
+                    minHeight: 40,
+                    maxHeight: 40,
+                }, className: "quill-select-button", onClick: () => setShowModal((showModal) => !showModal), children: [(0, jsx_runtime_1.jsx)("style", { children: ` .quill-select-button { background: ${theme.backgroundColor}; } .quill-select-button:hover { background: ${theme.hoverBackgroundColor}; }` }), (0, jsx_runtime_1.jsx)("span", { style: {
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                            overflow: 'hidden',
+                        }, children: options.find((elem) => elem.value === value)?.label || 'Select' }), (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", "data-slot": "icon", height: 20, width: 20, style: { minHeight: 20, minWidth: 20 }, children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z", clipRule: "evenodd" }) })] }), showModal && ((0, jsx_runtime_1.jsxs)("div", { ref: modalRef, style: {
+                    position: 'absolute',
+                    width: '100%',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    boxSizing: 'border-box',
+                    borderWidth: 1,
+                    borderStyle: 'solid',
+                    borderColor: theme.borderColor,
+                    borderRadius: 6,
+                    background: 'white',
+                    marginTop: 12,
+                    zIndex: 100,
+                    paddingTop: 6,
+                    paddingBottom: 6,
+                    paddingLeft: 6,
+                    paddingRight: 6,
+                    boxShadow: '0px 1px 12px 0px rgba(56, 65, 81, 0.1)',
+                    fontFamily: theme.fontFamily,
+                    maxHeight: '50vh',
+                    overflow: 'scroll',
+                }, children: [(0, jsx_runtime_1.jsxs)("button", { style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                            padding: '8px 8px',
+                            margin: 0,
+                            boxSizing: 'border-box',
+                            borderWidth: 0,
+                            fontSize: 14,
+                            borderStyle: 'solid',
+                            borderColor: theme.borderColor,
+                            borderRadius: 4,
+                            fontFamily: theme.fontFamily,
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                            overflow: 'hidden',
+                            height: 34,
+                            minHeight: 34,
+                        }, className: "quill-option", onClick: () => {
+                            onChange('');
+                            setShowModal(false);
+                        }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
+                .quill-option {
+                  background: white;
+                }
+                  .quill-option:hover {
+                    background: #F4F4F5;
+                  }
+                ` }), 'Select'] }), options.map((option) => ((0, jsx_runtime_1.jsxs)("button", { style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                            padding: '8px 8px',
+                            margin: 0,
+                            boxSizing: 'border-box',
+                            borderWidth: 0,
+                            fontSize: 14,
+                            borderStyle: 'solid',
+                            borderColor: theme.borderColor,
+                            borderRadius: 4,
+                            fontFamily: theme.fontFamily,
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                            height: 34,
+                            minHeight: 34,
+                            overflow: 'hidden',
+                        }, className: "quill-option", onClick: () => {
+                            onChange(option.value);
+                            setShowModal(false);
+                        }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
+                .quill-option {
+                  background: white;
+                }
+                  .quill-option:hover {
+                    background: #F4F4F5;
+                  }
+                ` }), (0, jsx_runtime_1.jsx)("span", { style: {
+                                    textOverflow: 'ellipsis',
+                                    whiteSpace: 'nowrap',
+                                    overflow: 'hidden',
+                                }, children: option.label })] }, option.value)))] }))] }));
+}
+exports.QuillSelectComponent = QuillSelectComponent;

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

@@ -0,0 +1,7 @@
+import { QuillTheme } from '@quillsql/react';
+export declare function SegmentedControl({ onChange, value, theme, }: {
+    onChange: (e: any) => void;
+    value: string;
+    theme: QuillTheme;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SegmentedControl.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,KAAK,EACL,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,UAAU,CAAC;CACnB,2CA0EA"}

package/dist/cjs/components/SegmentedControl.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SegmentedControl = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function SegmentedControl({ onChange, value, theme, }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            background: '#F5F5F6',
+            maxWidth: 209,
+            padding: 4,
+            borderRadius: 6,
+            height: 40,
+        }, children: [(0, jsx_runtime_1.jsx)("button", { className: "quill-tab", onClick: () => onChange('default'), style: {
+                    border: value === 'default' ? '1px solid #E7E7E7' : '1px solid transparent',
+                    outline: 'none',
+                    width: '100%',
+                    borderRadius: 4,
+                    padding: 10,
+                    boxShadow: value === 'default'
+                        ? '0px 1px 4px 0px rgba(56, 65, 81, 0.08)'
+                        : undefined,
+                    color: value === 'default'
+                        ? 'rgba(56, 65, 81, 1)'
+                        : 'rgba(56, 65, 81, 0.85)',
+                    fontWeight: value === 'default' ? 600 : 500,
+                    fontSize: 14,
+                    fontFamily: theme?.fontFamily,
+                    height: '40px',
+                    boxSizing: 'border-box',
+                    backgroundColor: value === 'default' ? 'white' : 'transparent',
+                }, children: 'Default' }), (0, jsx_runtime_1.jsx)("button", { className: "quill-tab2", onClick: () => onChange('multiselect'), style: {
+                    border: value === 'multiselect'
+                        ? '1px solid #E7E7E7'
+                        : '1px solid transparent',
+                    boxShadow: value === 'multiselect'
+                        ? '0px 1px 4px 0px rgba(56, 65, 81, 0.08)'
+                        : undefined,
+                    outline: 'none',
+                    width: '100%',
+                    borderRadius: 4,
+                    color: value === 'multiselect'
+                        ? 'rgba(56, 65, 81, 1)'
+                        : 'rgba(56, 65, 81, 0.85)',
+                    padding: 10,
+                    fontWeight: value === 'multiselect' ? 600 : 500,
+                    fontSize: 14,
+                    fontFamily: theme?.fontFamily,
+                    height: '40px',
+                    backgroundColor: value === 'multiselect' ? 'white' : 'transparent',
+                }, children: 'Multiselect' })] }));
+}
+exports.SegmentedControl = SegmentedControl;

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

@@ -1,3 +1,4 @@
+import { ReactNode, CSSProperties } from 'react';
 export interface Option {
     value: string;
     label: string;
@@ -8,29 +9,22 @@ export interface SelectComponentProps {
     options: Option[];
     disabled?: boolean;
     label?: string;
+    theme?: any;
+    style?: CSSProperties;
 }
 export interface TextInputComponentProps {
     onChange: (e: any) => void;
     value: string;
     id: string;
-    placeholder: string;
-}
-export interface ButtonComponentProps {
-    onClick: () => void;
-    label: string;
-    primary?: boolean;
+    width?: string;
+    label?: string;
+    placeholder?: string;
 }
 export interface TableComponentProps {
     rows: any[];
     columns: any[];
     height: string;
 }
-export interface TextInputComponentProps {
-    onChange: (e: any) => void;
-    value: string;
-    id: string;
-    width?: string;
-}
 export interface ModalComponentProps {
     children: any;
     isOpen: boolean;
@@ -53,23 +47,18 @@ export interface DeleteButtonProps {
     style: any;
 }
 export declare const MemoizedTextInput: ({ value, onChange, placeholder, id, width, }: TextInputComponentProps) => import("react/jsx-runtime").JSX.Element;
-export declare const MemoizedButton: ({ label, onClick, primary, style, width, }: {
+export declare const MemoizedButton: ({ label, onClick, isLoading, primary, style, width, }: {
     label: any;
     onClick: any;
+    isLoading?: boolean | undefined;
     primary?: boolean | undefined;
     style?: {} | undefined;
     width?: string | undefined;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const MemoizedSecondaryButton: ({ label, onClick }: {
+export declare const MemoizedSecondaryButton: ({ label, onClick, isLoading, }: {
     label: any;
     onClick: any;
-}) => import("react/jsx-runtime").JSX.Element;
-export declare const MemoizedSelect: ({ value, onChange, options, disabled, label, }: {
-    value: any;
-    onChange: any;
-    options: any;
-    disabled?: boolean | undefined;
-    label: any;
+    isLoading?: boolean | undefined;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const MemoizedHeader: ({ children }: {
     children: any;
@@ -101,14 +90,14 @@ export declare function MemoizedPopover({ onClose, parentRef, children, style, o
     isOpen: any;
     setIsOpen: any;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function MemoizedModal({ isOpen, onClose, setIsOpen, title, children, theme, }: {
-    isOpen: any;
-    onClose: any;
-    setIsOpen: any;
-    title: any;
-    children: any;
-    theme: any;
-}): import("react/jsx-runtime").JSX.Element | null;
+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;
 export declare const MemoizedDeleteButton: ({ onClick, style }: {
     onClick: any;
     style: any;

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

@@ -1 +1 @@
-{"version":3,"file":"UiComponents.d.ts","sourceRoot":"","sources":["../../../src/components/UiComponents.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"UiComponents.d.ts","sourceRoot":"","sources":["../../../src/components/UiComponents.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/UiComponents.js

@@ -1,35 +1,39 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LoadingSpinner = exports.MemoizedDeleteButton = exports.MemoizedModal = exports.MemoizedPopover = exports.MemoizedText = exports.MemoizedLabel = exports.MemoizedHeader = exports.MemoizedSelect = exports.MemoizedSecondaryButton = exports.MemoizedButton = exports.MemoizedTextInput = void 0;
+exports.LoadingSpinner = exports.MemoizedDeleteButton = exports.MemoizedModal = exports.MemoizedPopover = exports.MemoizedText = exports.MemoizedLabel = exports.MemoizedHeader = exports.MemoizedSecondaryButton = exports.MemoizedButton = exports.MemoizedTextInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 //@ts-nocheck
 const react_1 = require("react");
 const assets_1 = require("../assets");
 const react_2 = require("@quillsql/react");
+const useOnClickOutside_1 = __importDefault(require("../hooks/useOnClickOutside"));
 const MemoizedTextInput = ({ value, onChange, placeholder, id, width, }) => {
     const [theme] = (0, react_1.useContext)(react_2.ThemeContext);
     return ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative', width: width }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
-    .quill-text-input {
+      .quill-text-input {
         background-color: white;
         height: 40px;
-       width: 180px;
-       color: #384151;
-       border: 1px solid #e7e7e7;
-       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: (event) => onChange(event.target.value), placeholder: placeholder, style: {
+        width: 180px;
+        color: #384151;
+        border: 1px solid #e7e7e7;
+        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: theme?.fontFamily,
                     width: width ? 'calc(100% - 24px)' : '180px',
                 } })] }));
 };
 exports.MemoizedTextInput = MemoizedTextInput;
-const MemoizedButton = ({ label, onClick, primary = true, style = {}, width = 'auto', }) => {
+const MemoizedButton = ({ label, onClick, isLoading = false, primary = true, style = {}, width = 'auto', }) => {
     const [theme] = (0, react_1.useContext)(react_2.ThemeContext);
     return ((0, jsx_runtime_1.jsxs)("button", { className: "quill-button", onClick: onClick, style: { fontFamily: theme?.fontFamily, ...style, width: width }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
     .quill-button {
@@ -42,18 +46,17 @@ const MemoizedButton = ({ label, onClick, primary = true, style = {}, width = 'a
        box-sizing: content-box;
        padding-left: 16px;
        padding-right: 16px;
-       overflow: hidden;
+       white-space: nowrap;
        font-size: 15px;
        cursor: pointer;
     }
     .quill-button:hover {
       background-color: rgba(56, 65, 81, 0.9);
       border-radius: 6px;
-      overflow: hidden;
-    }` }), label] }));
+    }` }), isLoading ? ((0, jsx_runtime_1.jsx)("div", { style: { padding: '0px 16px' }, children: (0, jsx_runtime_1.jsx)(exports.LoadingSpinner, {}) })) : (label)] }));
 };
 exports.MemoizedButton = MemoizedButton;
-const MemoizedSecondaryButton = ({ label, onClick }) => {
+const MemoizedSecondaryButton = ({ label, onClick, isLoading = false, }) => {
     const [theme] = (0, react_1.useContext)(react_2.ThemeContext);
     return ((0, jsx_runtime_1.jsxs)("button", { className: "quill-secondary-button", onClick: onClick, style: { fontFamily: theme?.fontFamily }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
     .quill-secondary-button {
@@ -74,37 +77,9 @@ const MemoizedSecondaryButton = ({ label, onClick }) => {
     }
     .quill-secondary-button:hover {
       background-color: rgba(56, 65, 81, 0.09);
-    }` }), label] }));
+    }` }), isLoading ? ((0, jsx_runtime_1.jsx)("div", { style: { padding: '0px 16px' }, children: (0, jsx_runtime_1.jsx)(exports.LoadingSpinner, {}) })) : (label)] }));
 };
 exports.MemoizedSecondaryButton = MemoizedSecondaryButton;
-const MemoizedSelect = ({ value, onChange, options, disabled = false, label, }) => {
-    const [theme] = (0, react_1.useContext)(react_2.ThemeContext);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: {
-            position: 'relative',
-            maxWidth: 206,
-        }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
-    .quill-select {
-        background-color: white;
-        height: 42px;
-        color: #384151;
-        width: 206px;
-       border: 1px solid #e7e7e7;
-       border-radius: 6px;
-       text-align: left;
-       box-shadow: 0px 1px 4px 0px rgba(56, 65, 81, 0.08);
-       padding-left: 12px;
-       padding-right: 12px;
-    }` }), (0, jsx_runtime_1.jsx)("select", { style: { WebkitAppearance: 'none', fontFamily: theme?.fontFamily }, className: "quill-select", value: value, disabled: disabled, onChange: (event) => onChange(event.target.value), children: options.map((option) => ((0, jsx_runtime_1.jsx)("option", { className: "quill-option", value: option.value, children: option.label }, option.value))) }), (0, jsx_runtime_1.jsx)(assets_1.ArrowDownHeadIcon, { style: {
-                    height: '20px',
-                    width: '20px',
-                    flex: 'none',
-                    position: 'absolute',
-                    right: 8,
-                    top: 11,
-                    color: '#6C727F',
-                }, "aria-hidden": "true" })] }));
-};
-exports.MemoizedSelect = MemoizedSelect;
 const MemoizedHeader = ({ children }) => ((0, jsx_runtime_1.jsx)("h1", { style: {
         fontSize: 16,
         fontWeight: 600,
@@ -130,25 +105,9 @@ const MemoizedText = ({ children }) => ((0, jsx_runtime_1.jsx)("p", { style: {
         userSelect: 'none',
     }, children: children }));
 exports.MemoizedText = MemoizedText;
-const useOnClickOutside = (ref, handler) => {
-    (0, react_1.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 = (0, react_1.useRef)(null);
-    useOnClickOutside(modalRef, (e) => {
+    (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)
@@ -178,12 +137,13 @@ function MemoizedPopover({ onClose, parentRef, children, style = {}, onClick, la
                         top: showTrigger ? 12 : 0,
                         borderRadius: 6,
                         padding: 20,
-                        overflow: 'scroll',
+                        overflow: 'auto',
                         ...style,
                     }, children: children }) }))] }));
 }
 exports.MemoizedPopover = MemoizedPopover;
-function MemoizedModal({ isOpen, onClose, setIsOpen, title, children, theme, }) {
+function MemoizedModal({ isOpen, setIsOpen, title, children, width, height, }) {
+    const [theme] = (0, react_1.useContext)(react_2.ThemeContext);
     if (!isOpen) {
         return null;
     }
@@ -196,15 +156,11 @@ function MemoizedModal({ isOpen, onClose, setIsOpen, title, children, theme, })
                     zIndex: '50',
                     backgroundColor: 'rgba(255, 255, 255, 0.8)',
                     backdropFilter: 'blur(5px)',
-                }, onClick: onClose }), (0, jsx_runtime_1.jsx)("div", { style: {
-                    // position: "absolute",
+                }, onClick: () => setIsOpen(false) }), (0, jsx_runtime_1.jsx)("div", { style: {
                     position: 'fixed',
                     left: '50%',
                     top: '50%',
                     zIndex: '50',
-                    // width: "100%",
-                    maxWidth: 1024,
-                    maxHeight: '90vh',
                     display: 'flex',
                     justifyContent: 'center',
                     alignItems: 'center',
@@ -214,19 +170,20 @@ function MemoizedModal({ isOpen, onClose, setIsOpen, title, children, theme, })
                     borderStyle: 'solid',
                     borderWidth: 1,
                     borderColor: '#e7e7e7',
-                    overflow: 'hidden',
-                    // zIndex: 1000,
+                    overflow: 'scroll',
+                    width: width ?? 'auto',
+                    height: height ?? 'auto',
+                    maxWidth: 'calc(100vw - 82px)',
+                    maxHeight: 'calc(100vh - 82px)',
                 }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
-                        // width: "80%",
-                        maxHeight: '90vh',
+                        height: '100%',
+                        width: '100%',
+                        maxWidth: 'calc(100vw - 82px)',
+                        maxHeight: 'calc(100vh - 82px)',
                         overflowY: 'scroll',
-                        // maxWidth: "700px",
                         backgroundColor: '#ffffff',
-                        // padding: "20px",
-                        // borderRadius: "8px",
                         display: 'flex',
                         flexDirection: 'column',
-                        alignItems: 'center',
                         position: 'relative',
                         fontFamily: theme?.fontFamily,
                     }, children: [(0, jsx_runtime_1.jsxs)("div", { id: "quill-modal-header", style: {
@@ -243,12 +200,12 @@ function MemoizedModal({ isOpen, onClose, setIsOpen, title, children, theme, })
                                         textAlign: 'left',
                                         paddingTop: 18,
                                         color: theme?.primaryTextColor,
-                                    }, children: title }), (0, jsx_runtime_1.jsx)(exports.MemoizedDeleteButton, { onClick: onClose, style: { marginRight: 10, marginTop: 10 } })] }), children] }) })] }));
+                                    }, children: title }), (0, jsx_runtime_1.jsx)("div", { style: { marginRight: 10, marginTop: 10 }, children: (0, jsx_runtime_1.jsx)(exports.MemoizedDeleteButton, { onClick: () => setIsOpen(false) }) })] }), children] }) })] }));
 }
 exports.MemoizedModal = MemoizedModal;
 const MemoizedDeleteButton = ({ onClick, style }) => ((0, jsx_runtime_1.jsxs)("button", { className: "quill-delete-button", type: "button", onClick: onClick, style: {
-        height: 42,
-        width: 42,
+        height: 40,
+        width: 40,
         border: 'none',
         cursor: 'pointer',
         display: 'flex',

package/dist/cjs/forms/client_onboard/ConnectSchema.d.ts

@@ -1,7 +1,7 @@
 import { CSSProperties } from 'react';
 import { SchemaDetails } from '../../utils/schema';
 import { ConnectionError, ConnectionType } from '../../utils/databases';
-export default function ConnectSchema({ containerStyle, header1Style, header2Style, allSchemaInfo, environmentDetails, propogateSchemaDetails, initialError, clientId, parentRef, }: {
+export default function ConnectSchema({ containerStyle, header1Style, header2Style, allSchemaInfo, environmentDetails, propogateSchemaDetails, initialError, clientId, parentRef, state, }: {
     containerStyle?: CSSProperties;
     header1Style?: CSSProperties;
     header2Style?: CSSProperties;
@@ -11,5 +11,6 @@ export default function ConnectSchema({ containerStyle, header1Style, header2Sty
     propogateSchemaDetails: (schemaDetails?: SchemaDetails) => void;
     clientId: string;
     parentRef: any;
+    state: any;
 }): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ConnectSchema.d.ts.map

package/dist/cjs/forms/client_onboard/ConnectSchema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConnectSchema.d.ts","sourceRoot":"","sources":["../../../../src/forms/client_onboard/ConnectSchema.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAA+B,MAAM,OAAO,CAAC;AAI1E,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAQnD,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAExE,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,kBAAkB,EAClB,sBAAsB,EACtB,YAAY,EACZ,QAAQ,EACR,SAAS,GACV,EAAE;IACD,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,kBAAkB,CAAC,EAAE,cAAc,CAAC;IACpC,YAAY,CAAC,EAAE,eAAe,CAAC;IAC/B,sBAAsB,EAAE,CAAC,aAAa,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IAChE,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,GAAG,CAAC;CAChB,2CAiSA"}
+{"version":3,"file":"ConnectSchema.d.ts","sourceRoot":"","sources":["../../../../src/forms/client_onboard/ConnectSchema.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAA+B,MAAM,OAAO,CAAC;AAI1E,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAUnD,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAExE,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,kBAAkB,EAClB,sBAAsB,EACtB,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,KAAK,GACN,EAAE;IACD,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,kBAAkB,CAAC,EAAE,cAAc,CAAC;IACpC,YAAY,CAAC,EAAE,eAAe,CAAC;IAC/B,sBAAsB,EAAE,CAAC,aAAa,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IAChE,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,GAAG,CAAC;IACf,KAAK,EAAE,GAAG,CAAC;CACZ,2CAubA"}