@seeqdev/qomponents 0.0.185 → 0.0.186

package/dist/src/Modal/Modal.js

@@ -1,86 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useState } from 'react';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
-import classNames from 'classnames';
-import '../styles.css';
-import Button from '../Button';
-import Icon from '../Icon';
-import TextField from '../TextField';
-const Dialog = DialogPrimitive.Root;
-const DialogPortal = DialogPrimitive.Portal;
-const DialogClose = DialogPrimitive.Close;
-const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(DialogPortal, { children: [
-        _jsx("div", { className: "tw-select-none tw-fixed tw-w-full tw-h-full tw-opacity-50 tw-inset-0 tw-z-[1009] tw-bg-sq-dark-background\n    data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0\n    data-[state=open]:fade-in-0 " }), _jsxs(DialogPrimitive.Content, { ref: ref, className: `tw-fixed tw-left-[50%] tw-top-0 tw-my-6 tw-translate-x-[-50%] tw-z-[1010] tw-grid
-       tw-gap-4 tw-border tw-bg-sq-white dark:tw-bg-sq-dark-background tw-p-6 tw-shadow-lg tw-duration-200
-       tw-rounded-lg ${className}`, ...props, children: [
-                _jsx(DialogPrimitive.DialogTitle, { className: "tw-hidden" }), children] })
-    ] })));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
-const DialogHeader = (props) => (_jsx("div", { className: "tw-w-full tw-justify-between", children: _jsx("div", { ...props }) }));
-DialogHeader.displayName = 'DialogHeader';
-const DialogFooter = (props) => _jsx("div", { ...props });
-DialogFooter.displayName = 'DialogFooter';
-const DialogTitle = React.forwardRef((props, ref) => _jsx(DialogPrimitive.Title, { ref: ref, ...props }));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
-const DialogDescription = React.forwardRef((props, ref) => _jsx(DialogPrimitive.Description, { ref: ref, ...props }));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
-const Modal = ({ titleIcon, title = 'Modal title example', titleSuffixLabel, subtitle, children, open = false, onClose, customButton = false, customButtonLabel = 'Back', onClickCustomButton, submitButtonLabel = 'Submit', cancelButtonLabel = 'Cancel', disableSubmitButton = false, stopPropagationSubmitButton = false, onSubmit, isTitleEditable = false, onTitleChanged, inputExtraClassNames, hideCloseIcon = false, size = 'xl', titleIconPosition = 'left', hideFooterButtons = false, hideSubmitButton = false, hideCancelButton = false, testId = 'modal', modalFooter, dialogClassName, titlePlaceholder, titleRequired, titleError, submitButtonTooltip, cancelButtonTooltip, disableCustomButton, customHeader, middleFooterSection = _jsx(_Fragment, {}), customButtonVariant = 'outline', submitButtonVariant = 'theme', keepFocusInsideModal = true, onPointerDownOutside, onInteractOutside, }) => {
-    const [isLoading, setIsLoading] = useState(false);
-    // the Dialog is adding pointerEvents: none to body and the dropdowns from the modal does not work anymore
-    useEffect(() => {
-        if (open) {
-            // Pushing the change to the end of the call stack
-            const timer = setTimeout(() => {
-                document.body.style.pointerEvents = '';
-            }, 0);
-            return () => clearTimeout(timer);
-        }
-        else {
-            document.body.style.pointerEvents = 'auto';
-        }
-    }, [open]);
-    const handleSubmit = async (e) => {
-        if (!onSubmit)
-            return;
-        try {
-            setIsLoading(true);
-            await onSubmit(e);
-        }
-        finally {
-            setIsLoading(false);
-        }
-    };
-    const renderTitle = () => {
-        let titleIconElement = _jsx(_Fragment, {});
-        if (titleIcon) {
-            if (typeof titleIcon === 'string') {
-                titleIconElement = (_jsx(Icon, { icon: titleIcon, testId: "modalTitleIcon", extraClassNames: "tw-flex tw-text-xl tw-mt-1" }));
-            }
-            else {
-                titleIconElement = _jsx("div", { className: "tw-mt-1.5", children: titleIcon });
-            }
-        }
-        return (_jsxs(_Fragment, { children: [titleIcon && titleIconPosition === 'left' ? _jsx("div", { className: "tw-flex tw-mr-2", children: titleIconElement }) : _jsx(_Fragment, {}), _jsx(DialogTitle, { asChild: true, children: isTitleEditable ? (_jsxs("div", { className: "tw-flex tw-w-full tw-items-center", children: [
-                            _jsx(TextField, { extraClassNames: inputExtraClassNames, value: title, type: "text", testId: "modalTitle", onChange: onTitleChanged, placeholder: titlePlaceholder, required: titleRequired, showError: !!titleError }), titleError && _jsx("p", { className: "tw-text-sq-danger-color tw-min-w-fit tw-pl-2 tw-mb-0", children: titleError })] })) : (customHeader ?? (_jsxs("div", { "data-testid": "modalTitle", className: "modal-title", children: [
-                            _jsxs("div", { className: "tw-flex tw-items-center", children: [
-                                    _jsx("h3", { children: title }), titleSuffixLabel && _jsx("span", { className: "tw-text-xl tw-pl-0.5", children: titleSuffixLabel })] }), subtitle && (_jsx("div", { className: "tw-italic tw-text-sm tw-text-left tw-mt-1", "data-testid": "modal-subtitle", children: subtitle }))] }))) }), titleIcon && titleIconPosition === 'right' ? _jsx("div", { className: "tw-flex tw-ml-4", children: titleIconElement }) : _jsx(_Fragment, {})] }));
-    };
-    return open ? (_jsx(Dialog, { open: true, onOpenChange: onClose, modal: keepFocusInsideModal, children: _jsxs(DialogContent, { onPointerDownOutside: (e) => (onPointerDownOutside ? onPointerDownOutside(e) : e.preventDefault()), onInteractOutside: (e) => (onInteractOutside ? onInteractOutside(e) : e.preventDefault()), "data-testid": testId, className: classNames(`modalContent tw-w-full !tw-p-0 tw-border-none tw-shadow-none dark:tw-text-sq-dark-text !tw-gap-0`, {
-                'tw-max-w-xs': size === 'xs',
-                'tw-max-w-sm': size === 'sm',
-                'tw-max-w-md': size === 'md',
-                'tw-max-w-lg': size === 'lg',
-                'tw-max-w-xl': size === 'xl',
-                'tw-max-w-2xl': size === '2xl',
-                'tw-max-w-3xl': size === '3xl',
-                'tw-max-w-4xl': size === '4xl',
-                'tw-max-w-5xl': size === '5xl',
-                'tw-max-w-6xl': size === '6xl',
-            }, dialogClassName), children: [
-                _jsxs(DialogHeader, { className: "modal-header tw-flex tw-w-full tw-justify-between tw-border-sq-disabled-gray\n          dark:tw-border-sq-dark-disabled-gray tw-border-0 tw-border-b tw-px-6 tw-py-4", children: [
-                        _jsx("div", { className: "tw-flex tw-w-full", children: renderTitle() }), !hideCloseIcon && (_jsx(DialogClose, { autoFocus: false, className: "[&:has(:focus-visible)]:none tw-opacity-70 tw-bg-transparent hover:tw-opacity-100  close tw-text-base tw-cursor-pointer tw-ml-4", "data-testid": "closeButton", children: _jsx("span", { className: "tw-cursor-pointer", children: "\u00D7" }) }))] }), _jsx(DialogDescription, { className: "modal-body tw-px-6 tw-py-4 tw-overflow-y-auto", asChild: true, children: children }), !hideFooterButtons && (_jsx(DialogFooter, { className: "modal-footer tw-px-6 tw-py-4", children: modalFooter ?? (_jsxs("div", { className: "tw-flex tw-w-full tw-justify-between", "data-testid": "modalFooter", children: [
-                            _jsx("div", { className: "tw-flex tw-justify-start", children: customButton && (_jsx(Button, { label: customButtonLabel, onClick: onClickCustomButton, disabled: disableCustomButton, extraClassNames: "tw-justify-start tw-min-w-[100px]", testId: "customButton", variant: customButtonVariant })) }), _jsxs("div", { className: "tw-flex tw-justify-end", children: [
-                                    _jsx("div", { className: "tw-flex tw-items-center", children: middleFooterSection }), !hideCancelButton && (_jsx(DialogClose, { asChild: true, children: _jsx(Button, { label: cancelButtonLabel, extraClassNames: "tw-mr-5 tw-min-w-[100px]", tooltip: cancelButtonTooltip, variant: "outline", stopPropagation: false, testId: "cancelButton" }) })), !hideSubmitButton && (_jsx(Button, { label: submitButtonLabel, onClick: handleSubmit, disabled: disableSubmitButton || isLoading, variant: submitButtonVariant, stopPropagation: stopPropagationSubmitButton, tooltip: submitButtonTooltip, icon: isLoading ? 'fc-loading-notch tw-animate-spin' : undefined, iconPosition: "left", testId: "submitButton", extraClassNames: "tw-min-w-[100px]" }))] })
-                        ] })) }))] }) })) : (_jsx(_Fragment, {}));
-};
-export default Modal;

package/dist/src/Modal/Modal.stories.js

@@ -1,79 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import Modal from './Modal';
-import Button from '../Button';
-export default {
-    title: 'Modal',
-};
-const modalBody = (_jsx("div", { children: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum." }));
-const waitUntil = async (timeout) => {
-    return new Promise((resolve) => {
-        setTimeout(() => resolve('yes'), timeout);
-    });
-};
-const ModalComponent = ({ bodyClass = '', title: originalTitle, titleIcon, isTitleEditable, children, hideCloseIcon, disableSubmitButton, size, buttonLabel = 'Open Modal', customButton, customButtonLabel, submitButtonVariant, onSubmit, }) => {
-    const [open, setOpen] = useState(false);
-    const [title, setTitle] = useState(originalTitle);
-    useEffect(() => {
-        return () => {
-            document.body.className = '';
-        };
-    }, []);
-    const onClose = () => {
-        document.body.className = '';
-        setOpen(false);
-    };
-    return (_jsxs("div", { className: "tw-p-4", children: [
-            _jsx(Button, { onClick: () => {
-                    document.body.className = bodyClass;
-                    setOpen(true);
-                }, label: buttonLabel }), _jsx(Modal, { open: open, onClose: onClose, title: title, titleIcon: titleIcon, isTitleEditable: isTitleEditable, onTitleChanged: (event) => setTitle(event.target.value), hideCloseIcon: hideCloseIcon, disableSubmitButton: disableSubmitButton, size: size, onSubmit: onSubmit, customButton: customButton, submitButtonVariant: submitButtonVariant, onPointerDownOutside: onClose, customButtonLabel: customButtonLabel, children: children })
-        ] }));
-};
-export const AllModalsVariants = () => {
-    const colors = ['Topic', 'Analysis', 'Datalab', 'Vantage'];
-    const sizes = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl'];
-    return (_jsx("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4", children: colors.map((color) => (_jsxs("div", { children: [
-                _jsxs("b", { children: [color, " colors"] }), _jsx("div", { className: "tw-p-4 light", children: sizes.map((size) => (_jsx(ModalComponent, { bodyClass: `color_${color.toLowerCase()}`, title: "Modal example", children: modalBody, size: size, buttonLabel: `Open ${size} size modal` }, `${size}_${color}`))) }), _jsx("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background", children: sizes.map((size) => (_jsx(ModalComponent, { bodyClass: `color_${color.toLowerCase()} tw-dark color_${color.toLowerCase()}_dark`, title: "Modal example", children: modalBody, size: size, buttonLabel: `Open ${size} size modal` }, `${size}_${color}_dark`))) })
-            ] }, color))) }));
-};
-export const ModalsWithDisabledSubmit = () => (_jsxs("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4", children: [
-        _jsxs("div", { children: [
-                _jsx("b", { children: "Topic Colors" }), _jsx("div", { className: "tw-p-4 light", children: _jsx(ModalComponent, { bodyClass: "color_topic", title: "Disabled submit button example", disableSubmitButton: true, children: modalBody }) }), _jsx("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background", children: _jsx(ModalComponent, { bodyClass: "color_topic tw-dark color_analysis_dark", title: "Disabled submit button example", disableSubmitButton: true, children: modalBody }) })
-            ] }), _jsxs("div", { children: [
-                _jsx("b", { children: "Analysis Colors" }), _jsx("div", { className: "tw-p-4 light", children: _jsx(ModalComponent, { bodyClass: "color_analysis", title: "Disabled submit button example", disableSubmitButton: true, children: modalBody }) }), _jsx("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background", children: _jsx(ModalComponent, { bodyClass: "color_analysis tw-dark color_analysis_dark", title: "Disabled submit button example", disableSubmitButton: true, children: modalBody }) })
-            ] }), _jsxs("div", { children: [
-                _jsx("b", { children: "Datalab Colors" }), _jsx("div", { className: "tw-p-4 light", children: _jsx(ModalComponent, { bodyClass: "color_datalab", title: "Disabled submit button example", disableSubmitButton: true, children: modalBody }) }), _jsx("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background", children: _jsx(ModalComponent, { bodyClass: "color_datalab tw-dark color_analysis_dark", title: "Disabled submit button example", disableSubmitButton: true, children: modalBody }) })
-            ] }), _jsxs("div", { children: [
-                _jsx("b", { children: "Vantage Colors" }), _jsx("div", { className: "tw-p-4 light", children: _jsx(ModalComponent, { bodyClass: "color_vantage", title: "Disabled submit button example", disableSubmitButton: true, children: modalBody }) }), _jsx("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background", children: _jsx(ModalComponent, { bodyClass: "color_vantage tw-dark color_vantage_dark", title: "Disabled submit button example", disableSubmitButton: true, children: modalBody }) })
-            ] })
-    ] }));
-export const ModalsWithEditableTitle = () => {
-    const colors = ['Topic', 'Analysis', 'Datalab', 'Vantage'];
-    const sizes = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl'];
-    return (_jsx("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4", children: colors.map((color) => (_jsxs("div", { children: [
-                _jsxs("b", { children: [color, " colors"] }), _jsx("div", { className: "tw-p-4 light", children: sizes.map((size) => (_jsx(ModalComponent, { bodyClass: `color_${color.toLowerCase()}`, title: "Editable title example", isTitleEditable: true, titleIcon: "fc-check", children: modalBody, size: size, buttonLabel: `Open ${size} size modal` }, `${size}_${color}`))) }), _jsx("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background", children: sizes.map((size) => (_jsx(ModalComponent, { bodyClass: `color_${color.toLowerCase()} tw-dark color_${color.toLowerCase()}_dark`, title: "Editable title example", isTitleEditable: true, titleIcon: "fc-check", children: modalBody, size: size, buttonLabel: `Open ${size} size modal` }, `${size}_${color}_dark`))) })
-            ] }, color))) }));
-};
-export const ModalsWithCustomButton = () => (_jsxs("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4", children: [
-        _jsxs("div", { children: [
-                _jsx("b", { children: "Topic Colors" }), _jsx("div", { className: "tw-p-4 light", children: _jsx(ModalComponent, { bodyClass: "color_topic", title: "Modal with custom button", children: modalBody, customButton: true, customButtonLabel: "Back" }) }), _jsx("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background", children: _jsx(ModalComponent, { bodyClass: "color_topic tw-dark color_analysis_dark", title: "Modal with custom button", children: modalBody, customButton: true, customButtonLabel: "Back" }) })
-            ] }), _jsxs("div", { children: [
-                _jsx("b", { children: "Analysis Colors" }), _jsx("div", { className: "tw-p-4 light", children: _jsx(ModalComponent, { bodyClass: "color_analysis", title: "Modal with custom button", children: modalBody, customButton: true, customButtonLabel: "Back" }) }), _jsx("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background", children: _jsx(ModalComponent, { bodyClass: "color_analysis tw-dark color_analysis_dark", title: "Modal with custom button", children: modalBody, customButton: true, customButtonLabel: "Back" }) })
-            ] }), _jsxs("div", { children: [
-                _jsx("b", { children: "Datalab Colors" }), _jsx("div", { className: "tw-p-4 light", children: _jsx(ModalComponent, { bodyClass: "color_datalab", title: "Modal with custom button", children: modalBody, customButton: true, customButtonLabel: "Back" }) }), _jsx("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background", children: _jsx(ModalComponent, { bodyClass: "color_datalab tw-dark color_analysis_dark", title: "Modal with custom button", children: modalBody, customButton: true, customButtonLabel: "Back" }) })
-            ] }), _jsxs("div", { children: [
-                _jsx("b", { children: "Vantage Colors" }), _jsx("div", { className: "tw-p-4 light", children: _jsx(ModalComponent, { bodyClass: "color_vantage", title: "Modal with custom button", children: modalBody, customButton: true, customButtonLabel: "Back" }) }), _jsx("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background", children: _jsx(ModalComponent, { bodyClass: "color_vantage tw-dark color_vantage_dark", title: "Modal with custom button", children: modalBody, customButton: true, customButtonLabel: "Back" }) })
-            ] })
-    ] }));
-export const ModalsWithVariantButton = () => (_jsxs("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4", children: [
-        _jsxs("div", { children: [
-                _jsx("b", { children: "Topic Colors" }), _jsx("div", { className: "tw-p-4 light", children: _jsx(ModalComponent, { bodyClass: "color_topic", title: "Modal with custom button", children: modalBody, customButton: true, customButtonLabel: "Back", submitButtonVariant: "theme" }) }), _jsx("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background", children: _jsx(ModalComponent, { bodyClass: "color_topic tw-dark color_analysis_dark", title: "Modal with custom button", children: modalBody, customButton: true, customButtonLabel: "Back", submitButtonVariant: "theme-light" }) })
-            ] }), _jsxs("div", { children: [
-                _jsx("b", { children: "Analysis Colors" }), _jsx("div", { className: "tw-p-4 light", children: _jsx(ModalComponent, { bodyClass: "color_analysis", title: "Modal with custom button", children: modalBody, customButton: true, customButtonLabel: "Back", submitButtonVariant: "warning" }) }), _jsx("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background", children: _jsx(ModalComponent, { bodyClass: "color_analysis tw-dark color_analysis_dark", title: "Modal with custom button", children: modalBody, customButton: true, submitButtonVariant: "danger", customButtonLabel: "Back" }) })
-            ] }), _jsxs("div", { children: [
-                _jsx("b", { children: "Datalab Colors" }), _jsx("div", { className: "tw-p-4 light", children: _jsx(ModalComponent, { bodyClass: "color_datalab", title: "Modal with custom button", children: modalBody, customButton: true, customButtonLabel: "Back", submitButtonVariant: "outline" }) }), _jsx("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background", children: _jsx(ModalComponent, { bodyClass: "color_datalab tw-dark color_analysis_dark", title: "Modal with custom button", children: modalBody, customButton: true, submitButtonVariant: "no-border", customButtonLabel: "Back" }) })
-            ] }), _jsxs("div", { children: [
-                _jsx("b", { children: "Vantage Colors" }), _jsx("div", { className: "tw-p-4 light", children: _jsx(ModalComponent, { bodyClass: "color_vantage", title: "Modal with custom button", children: modalBody, customButton: true, submitButtonVariant: "theme", customButtonLabel: "Back" }) }), _jsx("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background", children: _jsx(ModalComponent, { bodyClass: "color_vantage tw-dark color_vantage_dark", title: "Modal with custom button", children: modalBody, submitButtonVariant: "outline", customButton: true, customButtonLabel: "Back" }) })
-            ] })
-    ] }));

package/dist/src/Modal/Modal.test.js

@@ -1,107 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import '@testing-library/jest-dom';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import Modal from './Modal';
-describe('Modal', () => {
-    class Context {
-        props = {
-            onTitleChanged: jest.fn(),
-            disableSubmitButton: false,
-            title: 'Testing Modal Dialog',
-            children: _jsx("div", { children: "Modal content" }),
-            open: true,
-        };
-    }
-    let tc;
-    beforeEach(() => {
-        tc = new Context();
-    });
-    const renderModal = (props) => render(_jsx(Modal, { ...props }));
-    describe('renders Modal', () => {
-        it("doesn't render the modal if the open state is false", () => {
-            const open = false;
-            renderModal({ ...tc.props, open });
-            expect(screen.queryByTestId('modal')).not.toBeInTheDocument();
-        });
-        it('renders the modal if the open state is true', () => {
-            renderModal(tc.props);
-            expect(screen.getByTestId('modal')).toBeInTheDocument();
-            expect(screen.getByTestId('modal')).toHaveClass('tw-max-w-xl');
-        });
-        it('calls onClose modal when close button is clicked', async () => {
-            const onClose = jest.fn();
-            const { getByTestId } = renderModal({ ...tc.props, onClose });
-            expect(screen.getByTestId('modal')).toBeInTheDocument();
-            await userEvent.click(getByTestId('closeButton'));
-            expect(onClose).toHaveBeenCalled();
-        });
-        it('hides close button', () => {
-            const hideCloseIcon = true;
-            const { queryByTestId } = renderModal({ ...tc.props, hideCloseIcon });
-            expect(queryByTestId('closeButton')).not.toBeInTheDocument();
-        });
-        it('renders modal size based on the size prop', () => {
-            const size = 'lg';
-            renderModal({ ...tc.props, size });
-            expect(screen.getByTestId('modal')).toHaveClass('tw-max-w-lg');
-        });
-        it('renders not editable title', () => {
-            renderModal(tc.props);
-            expect(screen.getByTestId('modalTitle')).not.toHaveAttribute('value');
-        });
-        it('renders editable title', () => {
-            const isTitleEditable = true;
-            const { getByTestId } = renderModal({ ...tc.props, isTitleEditable });
-            expect(getByTestId('modalTitle')).toHaveAttribute('value');
-        });
-        it('calls onChange when title is modified', async () => {
-            const isTitleEditable = true;
-            const { getByTestId } = renderModal({ ...tc.props, isTitleEditable });
-            await userEvent.type(getByTestId('modalTitle'), 'a');
-            expect(tc.props.onTitleChanged).toHaveBeenCalled();
-        });
-        it('displays icon title', () => {
-            const titleIcon = 'fc-check';
-            const { getByTestId } = renderModal({ ...tc.props, titleIcon });
-            expect(getByTestId('modalTitleIcon')).toBeInTheDocument();
-        });
-        it('calls onSubmit when submit button is clicked', async () => {
-            const onSubmit = jest.fn();
-            const { getByTestId } = renderModal({ ...tc.props, onSubmit });
-            expect(getByTestId('submitButton')).not.toBeDisabled();
-            await userEvent.click(getByTestId('submitButton'));
-            expect(onSubmit).toHaveBeenCalled();
-        });
-        it('displays the disabled submit button', async () => {
-            const onSubmit = jest.fn();
-            const disableSubmitButton = true;
-            const { getByTestId } = renderModal({ ...tc.props, onSubmit, disableSubmitButton });
-            expect(getByTestId('submitButton')).toBeDisabled();
-            await userEvent.click(getByTestId('submitButton'));
-            expect(onSubmit).not.toHaveBeenCalled();
-        });
-        it('calls onClose when cancel button is clicked', async () => {
-            const onClose = jest.fn();
-            const { getByTestId } = renderModal({ ...tc.props, onClose });
-            expect(getByTestId('cancelButton')).not.toBeDisabled();
-            await userEvent.click(getByTestId('cancelButton'));
-            expect(onClose).toHaveBeenCalled();
-        });
-        it('displays custom button', () => {
-            const customButton = true;
-            const customButtonLabel = 'Back';
-            const { getByTestId } = renderModal({ ...tc.props, customButton, customButtonLabel });
-            expect(getByTestId('customButton')).toBeInTheDocument();
-        });
-        it('calls onClickCustomButton when custom button is clicked', async () => {
-            const customButton = true;
-            const customButtonLabel = 'Back';
-            const onClickCustomButton = jest.fn();
-            const { getByTestId } = renderModal({ ...tc.props, customButtonLabel, customButton, onClickCustomButton });
-            expect(getByTestId('customButton')).toBeInTheDocument();
-            await userEvent.click(getByTestId('customButton'));
-            expect(onClickCustomButton).toHaveBeenCalled();
-        });
-    });
-});

package/dist/src/Modal/Modal.types.js

@@ -1 +0,0 @@
-export {};

package/dist/src/Modal/index.js

@@ -1 +0,0 @@
-export { default } from './Modal';

package/dist/src/ProgressBar/ProgressBar.js

@@ -1,71 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createElement as _createElement } from "react";
-import React, { useEffect, useRef } from 'react';
-import * as Progress from '@radix-ui/react-progress';
-import { getQTipData } from '../Tooltip/qTip.utilities';
-import tinycolor from 'tinycolor2';
-const baseLabelClasses = 'tw-left-1 tw-text-xs tw-text-sq-text-color dark:tw-text-sq-dark-text tw-items-center tw-h-[18px]';
-const ProgressIndicator = (props) => {
-    const { value, color = undefined, testId, label, extraClasses = '', labelClasses = '', valuesLength, max, index, totalValue, ...tooltipProps } = props;
-    const tooltipData = getQTipData(tooltipProps);
-    const previousWidth = useRef(0);
-    const indicatorElementRef = useRef(null);
-    const [textColorClass, setTextColorClass] = React.useState('');
-    const [animatedWidth, setAnimatedWidth] = React.useState(previousWidth.current);
-    // Determine which corners to round based on position and total value
-    let roundedCorners = '';
-    if (totalValue >= max) {
-        // If progress is 100%, round both ends
-        if (index === 0 && valuesLength === 1) {
-            roundedCorners = 'tw-rounded-[15px]';
-        }
-        else if (index === 0) {
-            roundedCorners = 'tw-rounded-l-[15px]';
-        }
-        else if (index === valuesLength - 1) {
-            roundedCorners = 'tw-rounded-r-[15px]';
-        }
-    }
-    else {
-        // Otherwise, only round the leftmost indicator
-        if (index === 0) {
-            roundedCorners = 'tw-rounded-l-[15px]';
-        }
-    }
-    useEffect(() => {
-        const timeout = setTimeout(() => {
-            const newWidth = (Number(value) / Number(max)) * 100;
-            setAnimatedWidth(newWidth);
-            previousWidth.current = newWidth;
-        }, 100);
-        return () => clearTimeout(timeout);
-    }, [value]);
-    const bgColor = color || undefined;
-    const bgClass = color ? '' : 'tw-bg-sq-color-dark';
-    const computeTextClass = (elem) => {
-        const computedStyle = getComputedStyle(elem);
-        const backgroundColor = computedStyle.backgroundColor;
-        const textColorClass = tinycolor(backgroundColor).isDark()
-            ? 'tw-text-sq-white dark:tw-text-sq-white'
-            : 'tw-text-sq-text-color dark:tw-text-sq-text-color';
-        setTextColorClass(textColorClass);
-    };
-    useEffect(() => {
-        if (indicatorElementRef.current) {
-            computeTextClass(indicatorElementRef.current);
-        }
-    }, [!!indicatorElementRef.current]);
-    return (_createElement(Progress.Indicator, { className: `tw-ease-[cubic-bezier(0.65, 0, 0.35, 1)] tw-w-full tw-h-[18px] tw-duration-[660ms] tw-flex tw-justify-center tw-items-center ${valuesLength === 1 ? '' : 'tw-overflow-hidden'} ${roundedCorners} ${bgClass} ${extraClasses}`, ...tooltipData, "data-qtip-text": tooltipProps.tooltip ? tooltipProps.tooltip : `${value}%`, "data-testid": `progress-bar-indicator-${testId ? testId : value}`, key: `${index}-${value}`, ref: indicatorElementRef, style: {
-            // Background color will default to the theme color if undefined
-            backgroundColor: bgColor,
-            animation: 'width 660ms forwards',
-            width: `${animatedWidth}%`,
-        } }, label ? (_jsx("span", { className: `${baseLabelClasses} ${labelClasses} ${textColorClass} ${valuesLength === 1 ? 'tw-absolute tw-z-50' : ''}`, children: label })) : undefined));
-};
-const ProgressBar = ({ values = [], max = 100, containerExtraClasses = '', zeroValueLabel = 'No progress yet', }) => {
-    const totalValue = values.reduce((acc, { value }) => acc + value, 0);
-    return (_jsx(Progress.Root, { className: `tw-relative tw-h-[18px] tw-w-full tw-overflow-hidden tw-rounded-[15px] tw-bg-sq-dark-gray dark:tw-bg-sq-dark-disabled-gray tw-flex tw-flex-1 ${containerExtraClasses}`, max: max, value: totalValue, children: totalValue > 0 ? (values.map((props, i) => {
-            return (_createElement(ProgressIndicator, { ...props, max: max, valuesLength: values.length, index: i, totalValue: totalValue, key: i }));
-        })) : (_jsx("div", { className: `${baseLabelClasses} tw-mx-auto tw-overflow-hidden`, children: zeroValueLabel })) }));
-};
-export default ProgressBar;

package/dist/src/ProgressBar/ProgressBar.stories.js

@@ -1,46 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect } from 'react';
-import ProgressBar from './ProgressBar';
-import { QTip } from '../Tooltip';
-export default {
-    title: 'ProgressBar',
-};
-export const AllProgressBars = () => {
-    const [values, setValues] = React.useState([
-        { value: 20, label: 'RGB' },
-        { value: 15, color: 'brown', label: 'Brown' },
-        { value: 40, color: '#435abc', label: 'Hex' },
-    ]);
-    useEffect(() => {
-        const timeout = setTimeout(() => {
-            setValues([
-                { value: 40, label: 'RGB' },
-                { value: 5, color: 'brown', label: 'Brown' },
-                { value: 50, color: '#435abc', label: 'Hex' },
-            ]);
-        }, 2000);
-        return () => clearTimeout(timeout);
-    });
-    const renderAllVariations = () => (_jsxs(_Fragment, { children: [
-            _jsxs("div", { className: "tw-p-4 light", children: [
-                    _jsx("div", { className: "tw-p-4", children: _jsx(ProgressBar, { max: 100, values: [{ value: 40 }] }) }), _jsx("div", { className: "tw-p-4", children: _jsx(ProgressBar, { max: 100, values: [{ value: 10 }] }) }), _jsx("div", { className: "tw-p-4", children: _jsx(ProgressBar, { values: [{ value: 0 }], max: 100 }) }), _jsx("div", { className: "tw-p-4", children: _jsx(ProgressBar, { values: [{ value: 70, tooltip: 'this is an indicator tooltip' }], max: 100, containerExtraClasses: "tw-bg-sq-text-color" }) }), _jsx("div", { className: "tw-p-4", children: _jsx(ProgressBar, { values: [
-                                { value: 20, label: 'RGB' },
-                                { value: 15, color: 'brown', label: 'Brown' },
-                                { value: 40, color: '#435abc', label: 'Hex' },
-                            ], max: 100, containerExtraClasses: "tw-bg-sq-text-color" }) }), _jsx("div", { className: "tw-p-4", children: _jsx(ProgressBar, { values: [{ value: 5, label: 'A very long text' }], max: 100 }) }), _jsx("div", { className: "tw-p-4", children: _jsx(ProgressBar, { values: values, max: 100, containerExtraClasses: "tw-bg-sq-text-color" }) }), _jsx("div", { className: "tw-p-4", children: _jsx(ProgressBar, { values: [{ value: 0, label: 'zero label' }], max: 100 }) }), _jsx("div", { className: "tw-p-4", children: _jsx(ProgressBar, { values: [{ value: 0 }], zeroValueLabel: "default zero level label deliberately long to test overflow", max: 100 }) })
-                ] }), _jsxs("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background", children: [
-                    _jsx("div", { className: "tw-p-4", children: _jsx(ProgressBar, { max: 100, values: [{ value: 40 }] }) }), _jsx("div", { className: "tw-p-4", children: _jsx(ProgressBar, { max: 100, values: [{ value: 10 }] }) }), _jsx("div", { className: "tw-p-4", children: _jsx(ProgressBar, { values: [{ value: 0 }], max: 100 }) }), _jsx("div", { className: "tw-p-4", children: _jsx(ProgressBar, { values: [{ value: 70, tooltip: 'this is an indicator tooltip' }], max: 100, containerExtraClasses: "tw-bg-sq-text-color" }) }), _jsx("div", { className: "tw-p-4", children: _jsx(ProgressBar, { values: [
-                                { value: 20, color: 'rgb(44,200,190)', label: 'RGB' },
-                                { value: 15, color: 'brown', label: 'Brown' },
-                                { value: 40, color: '#435abc', label: 'Hex' },
-                            ], max: 100, containerExtraClasses: "tw-bg-sq-text-color" }) }), _jsx("div", { className: "tw-p-4", children: _jsx(ProgressBar, { values: values, max: 100, containerExtraClasses: "tw-bg-sq-text-color" }) }), _jsx("div", { className: "tw-p-4", children: _jsx(ProgressBar, { values: [{ value: 0, label: 'zero label' }], max: 100, containerExtraClasses: "tw-bg-sq-text-color" }) }), _jsx("div", { className: "tw-p-4", children: _jsx(ProgressBar, { values: [{ value: 0 }], zeroValueLabel: "default zero level label is made deliberately long to test overflow", max: 100, containerExtraClasses: "tw-bg-sq-text-color" }) })
-                ] })
-        ] }));
-    return (_jsxs("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4", children: [
-            _jsx(QTip, {}), _jsxs("div", { className: "color_topic", children: [
-                    _jsx("b", { children: "Topic Colors" }), renderAllVariations()] }), _jsxs("div", { className: "color_analysis", children: [
-                    _jsx("b", { children: "Analysis Colors" }), renderAllVariations()] }), _jsxs("div", { className: "color_datalab", children: [
-                    _jsx("b", { children: "Datalab Colors" }), renderAllVariations()] }), _jsxs("div", { className: "color_vantage", children: [
-                    _jsx("b", { children: "Vantage Colors" }), renderAllVariations()] })
-        ] }));
-};

package/dist/src/ProgressBar/ProgressBar.test.js

@@ -1,42 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { render, screen, waitFor } from '@testing-library/react';
-import ProgressBar from './ProgressBar';
-import userEvent from '@testing-library/user-event';
-describe('ProgressBar', () => {
-    it('renders without crashing', () => {
-        render(_jsx(ProgressBar, { values: [{ value: 50 }] }));
-        const progressBar = screen.getByRole('progressbar');
-        expect(progressBar).toBeInTheDocument();
-    });
-    it('displays the correct progress value', () => {
-        render(_jsx(ProgressBar, { values: [{ value: 75 }] }));
-        const progressBarIndicator = screen.getByRole('progressbar').firstChild;
-        waitFor(() => {
-            expect(progressBarIndicator).toHaveStyle('transform: translateX(-25%)');
-        });
-    });
-    it('applies the correct max value', () => {
-        render(_jsx(ProgressBar, { values: [{ value: 50 }], max: 200 }));
-        const progressBar = screen.getByRole('progressbar');
-        expect(progressBar).toHaveAttribute('data-max', '200');
-    });
-    it('displays the tooltip with the correct label', () => {
-        render(_jsx(ProgressBar, { values: [{ value: 50, tooltip: 'Progress' }] }));
-        userEvent.hover(screen.getByTestId('progress-bar-indicator-50'));
-        waitFor(() => {
-            expect(screen.getByText('Progress')).toBeInTheDocument();
-        });
-    });
-    it('displays the no progress level for zero value', () => {
-        render(_jsx(ProgressBar, { values: [{ value: 0, tooltip: '0%' }], zeroValueLabel: "No progress" }));
-        waitFor(() => {
-            expect(screen.getByText('No progress')).toBeInTheDocument();
-        });
-    });
-    it('applies the multiple values of the Progress bar', () => {
-        render(_jsx(ProgressBar, { values: [{ value: 20 }, { value: 15 }, { value: 40 }], max: 200 }));
-        for (const val of [20, 15, 40]) {
-            expect(screen.getByTestId(`progress-bar-indicator-${val}`)).toBeInTheDocument();
-        }
-    });
-});

package/dist/src/ProgressBar/ProgressBar.types.js

@@ -1 +0,0 @@
-export {};

package/dist/src/ProgressBar/index.js

@@ -1 +0,0 @@
-export { default } from './ProgressBar';

package/dist/src/SeeqActionDropdown/SeeqActionDropdown.js

@@ -1,41 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
-import { getQTipData } from '../Tooltip/qTip.utilities';
-import { InsertSeeqContent, SeeqActionDropdownItem, ViewWorkbench } from './variants';
-const borderStyles = [
-    'tw-border-solid',
-    'tw-border',
-    'tw-rounded-md',
-    'tw-border-sq-disabled-gray',
-    'dark:tw-border-gray-500',
-].join(' ');
-const bgStyles = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
-const disabledClasses = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
-const renderItem = (variant, item) => {
-    switch (variant) {
-        case 'create-workbench':
-            return _jsx(SeeqActionDropdownItem, { ...item });
-        case 'view-workbench':
-            return _jsx(ViewWorkbench, { ...item });
-        case 'insert-seeq-content':
-            return _jsx(InsertSeeqContent, { ...item });
-        default:
-            return _jsx(SeeqActionDropdownItem, { ...item });
-    }
-};
-const SeeqActionDropdown = ({ seeqActionDropdownItems, trigger, id, extraClassNames, containerTestId, disabled = false, align = 'end', placement = 'bottom', placementOffset = 5, alignOffset = -35, hasArrow = false, onOpenChange, isOpen, setFocusOnTriggerOnClose = true, keepFocusInsideDropdown = true, variant, ...tooltipProps }) => {
-    const tooltipData = getQTipData(tooltipProps);
-    return (_jsxs(DropdownMenu.Root, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown, children: [
-            _jsx(DropdownMenu.Trigger, { id: id, "data-testid": id, className: `tw-border-none focus-visible:tw-outline-none focus:tw-outline-none focus-within:tw-outline-none`, asChild: true, disabled: disabled, children: _jsx("div", { ...tooltipData, className: `tw-bg-transparent tw-flex tw-flex-col tw-items-center focus-visible:tw-outline-none focus:tw-outline-none focus-within:tw-outline-none ${disabled ? disabledClasses : ''} ${extraClassNames || ''}`, children: trigger }) }), _jsx(DropdownMenu.Content, { sideOffset: placementOffset, side: placement, align: align, alignOffset: alignOffset, asChild: true, onCloseAutoFocus: (e) => !setFocusOnTriggerOnClose && e.preventDefault(), className: "focus-visible:tw-outline-none tw-outline-none", children: _jsxs("div", { "data-testid": containerTestId, className: bgStyles +
-                        ' tw-relative tw-z-[1200] tw-min-w-6 tw-py-2 focus-visible:tw-outline-none tw-outline-none' +
-                        ' data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out' +
-                        ' forceFont data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade ' +
-                        borderStyles, children: [hasArrow && (_jsx(DropdownMenu.Arrow, { asChild: true, children: _jsx("div", { className: " tw-fill-transparent tw-bg-white tw-w-[15px] tw-h-[15px] tw-rotate-45 dark:tw-bg-sq-dark-background tw-border-b tw-border-r tw-border-sq-disabled-gray dark:tw-border-gray-500 tw-mt-[-7px]" }) })), seeqActionDropdownItems.map((item, index) => {
-                            return (_jsxs("div", { children: [
-                                    _jsx(DropdownMenu.Item, { onSelect: (e) => {
-                                            item.action(e);
-                                        }, className: `tw-cursor-pointer tw-flex dark:tw-text-sq-white hover:tw-bg-sq-gray-highlight dark:hover:tw-bg-sq-gray-highlight-dark tw-relative tw-select-none tw-outline-none data-[disabled]:tw-text-sq-disabled-gray data-[disabled]:tw-pointer-events-none`, "data-testid": item.testId, disabled: !item.enabled, children: renderItem(variant, item) }), item.divider && (_jsx(DropdownMenu.Separator, { "data-testid": `dropdown-divider-${index}`, className: "tw-h-[1px] tw-bg-sq-disabled-gray dark:tw-bg-gray-500 tw-my-[8px]" }))] }, item.display + index));
-                        })] }) })
-        ] }));
-};
-export default SeeqActionDropdown;

package/dist/src/SeeqActionDropdown/SeeqActionDropdown.stories.js

@@ -1,73 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { QTip } from '../Tooltip/Qtip';
-import Button from '../Button/Button';
-import SeeqActionDropdown from './SeeqActionDropdown';
-export default {
-    title: 'Seeq Action Dropdown',
-};
-const options = [
-    {
-        display: 'New Workbook',
-        text: 'This is a workbook to show details about your data. You can make changes to your account',
-        icon: 'fc-analysis',
-        id: 'newWorkbook',
-        enabled: true,
-        iconExtraClassNames: 'workbenchDisplay',
-        action: () => { },
-    },
-    {
-        display: 'New Report Binder',
-        text: 'This is a data tab to show details about your data. You can make changes to your account',
-        icon: 'fc-report',
-        enabled: true,
-        action: () => { },
-        id: 'newReportBinder',
-    },
-    {
-        display: 'New Datalab',
-        text: 'This is a data tab to show details about your data. You can make changes to your account',
-        icon: 'fc-seeq-datalab',
-        id: 'newDataLab',
-        enabled: false,
-        action: () => { },
-        divider: true,
-    },
-    {
-        display: 'Folder',
-        icon: 'fc-folder',
-        action: () => { },
-        id: 'newFolder',
-    },
-    {
-        display: 'SvgIcon',
-        icon: 'svgpath:M0 8.8153a8.8153 8.8153 90 1117.6306 0A8.8153 8.8153 90 110 8.8153zM9.9172 3.3057a1.1019 1.1019' +
-            ' 90 10-2.2038 0 1.1019 1.1019 90 102.2038 0zM8.8153 14.3249c1.2155 0 2.2038-.9883 2.2038-2.2038 0-.5992-.2376-1.1398-.6233-1.5358L12.6031 5.5681c.1825-.4167-.0069-.9056-.4235-1.0881s-.9056.0069-1.0881.4235L8.8807 9.9172c-.0207 0-.0448 0-.0654 0-1.2155 0-2.2038.9883-2.2038 2.2038s.9883 2.2038 2.2038 2.2038zM6.0605 4.9586a1.1019 1.1019 90 10-2.2038 0 1.1019 1.1019 90 102.2038 0zM3.3057 9.9172a1.1019 1.1019 90 100-2.2038 1.1019 1.1019 90 100 2.2038zm12.121-1.1019a1.1019 1.1019 90 10-2.2038 0 1.1019 1.1019 90 102.2038 0z',
-        action: () => { },
-        id: 'svgIcon',
-    },
-];
-export const AllSeeqActionDropdownVariants = () => {
-    const [openDropdown, setOpenDropdown] = React.useState('');
-    const allSeeqActionDropdowns = (color, isDark) => (_jsxs("div", { className: isDark ? 'tw-dark tw-bg-sq-dark-background' : '', children: [
-            _jsx("div", { className: "tw-p-5 ", children: _jsx(SeeqActionDropdown, { trigger: _jsx(Button, { label: "New", icon: "fa-plus", variant: "theme" }), "data-testid": "homeScreenNewButton", id: "seeqActionDropdownItem", align: "start", alignOffset: 0, placementOffset: 0, variant: "create-workbench", seeqActionDropdownItems: options }, "seeqActionDropdownItem") }), _jsxs("div", { className: "tw-p-5 ", children: [
-                    _jsx("div", { className: "dark:tw-text-white tw-text-xs", children: "New workbench with arrow" }), _jsx(SeeqActionDropdown, { trigger: _jsx(Button, { label: "New", icon: "fa-plus", variant: "theme" }), "data-testid": "homeScreenNewButton", id: "seeqActionDropdownItem", align: "start", alignOffset: 0, hasArrow: true, variant: "create-workbench", placementOffset: 0, seeqActionDropdownItems: options }, "seeqActionDropdownItem")
-                ] }), _jsxs("div", { className: "tw-p-5 ", children: [
-                    _jsx("div", { className: "dark:tw-text-white tw-text-xs", children: "New workbench with center align" }), _jsx(SeeqActionDropdown, { trigger: _jsx(Button, { label: "New", icon: "fa-plus", variant: "theme" }), "data-testid": "homeScreenNewButton", id: "seeqActionDropdownItem", align: "center", alignOffset: 0, hasArrow: true, variant: "create-workbench", placementOffset: 0, seeqActionDropdownItems: options }, "seeqActionDropdownItem")
-                ] }), _jsxs("div", { className: "tw-p-5 ", children: [
-                    _jsx("div", { className: "dark:tw-text-white tw-text-xs", children: "New workbench with disabled button" }), _jsx(SeeqActionDropdown, { trigger: _jsx(Button, { label: "New", icon: "fa-plus", variant: "theme" }), "data-testid": "homeScreenNewButton", id: "seeqActionDropdownItem", align: "center", disabled: true, variant: "create-workbench", alignOffset: 0, hasArrow: true, placementOffset: 0, seeqActionDropdownItems: options }, "seeqActionDropdownItem")
-                ] }), _jsxs("div", { className: "tw-p-5 ", children: [
-                    _jsx("div", { className: "dark:tw-text-white tw-text-xs", children: "View workbench" }), _jsx(SeeqActionDropdown, { trigger: _jsx(Button, { label: "View", icon: "fa-plus", variant: "theme" }), "data-testid": "homeScreenNewButton", id: "seeqActionDropdownItem", align: "center", variant: "view-workbench", alignOffset: 0, placementOffset: 0, seeqActionDropdownItems: options }, "seeqActionDropdownItem")
-                ] }), _jsxs("div", { className: "tw-p-5 ", children: [
-                    _jsx("div", { className: "dark:tw-text-white tw-text-xs", children: "Insert seeq content" }), _jsx(SeeqActionDropdown, { trigger: _jsx(Button, { label: "Insert", icon: "fc-plus", variant: "theme" }), "data-testid": "homeScreenNewButton", id: "seeqActionDropdownItem", align: "center", variant: "insert-seeq-content", alignOffset: 0, placementOffset: 0, seeqActionDropdownItems: options }, "seeqActionDropdownItem")
-                ] })
-        ] }));
-    const renderAllVariations = (color) => (_jsxs("div", { className: "tw-grid tw-grid-cols-2 tw-gap-4 tw-p-4", children: [allSeeqActionDropdowns(color), allSeeqActionDropdowns(color, true)] }));
-    return (_jsxs("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4", children: [
-            _jsx(QTip, {}), _jsxs("div", { className: "color_topic", children: [
-                    _jsx("b", { children: "Topic Colors" }), renderAllVariations('topic')] }), _jsxs("div", { className: "color_analysis", children: [
-                    _jsx("b", { children: "Analysis Colors" }), renderAllVariations('analysis')] }), _jsxs("div", { className: "color_datalab", children: [
-                    _jsx("b", { children: "Datalab Colors" }), renderAllVariations('datalab')] }), _jsxs("div", { className: "color_vantage", children: [
-                    _jsx("b", { children: "Vantage Colors" }), renderAllVariations('vantage')] })
-        ] }));
-};