@seeqdev/qomponents 0.0.71 → 0.0.72

package/dist/Button/Button.stories.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import Button from './Button';
+import { buttonVariants } from './Button.types';
+export default {
+    title: 'Button',
+};
+export const AllButtonVariants = () => {
+    const renderAllVariations = () => (React.createElement(React.Fragment, null, buttonVariants.map((variant) => (React.createElement("div", { key: `{variant_${variant}`, className: "tw-grid tw-grid-cols-2 tw-gap-4" },
+        React.createElement("div", { className: "tw-p-4" },
+            React.createElement(Button, { label: `Variant: ${variant}`, onClick: () => { }, variant: variant })),
+        React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
+            React.createElement(Button, { label: `Variant: ${variant}`, onClick: () => { }, variant: variant })))))));
+    return (React.createElement("div", { className: "tw-grid tw-grid-cols-3 tw-gap-4" },
+        React.createElement("div", { className: "color_topic" },
+            React.createElement("b", null, "Topic Colors"),
+            renderAllVariations()),
+        React.createElement("div", { className: "color_analysis" },
+            React.createElement("b", null, "Analysis Colors"),
+            renderAllVariations()),
+        React.createElement("div", { className: "color_datalab" },
+            React.createElement("b", null, "Datalab Colors"),
+            renderAllVariations())));
+};
+export const ButtonWithTooltip = () => {
+    const renderButtonWithTooltip = () => (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "tw-p-4" },
+            React.createElement(Button, { tooltip: "Helpful tooltip", variant: "theme", label: "Hover me" })),
+        React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
+            React.createElement(Button, { tooltip: "Helpful tooltip", variant: "theme", label: "Hover me" }))));
+    return (React.createElement("div", { className: "tw-grid tw-grid-cols-3 tw-gap-4" },
+        React.createElement("div", { className: "color_topic" },
+            React.createElement("b", null, "Topic Colors"),
+            renderButtonWithTooltip()),
+        React.createElement("div", { className: "color_analysis" },
+            React.createElement("b", null, "Analysis Colors"),
+            renderButtonWithTooltip()),
+        React.createElement("div", { className: "color_datalab" },
+            React.createElement("b", null, "Datalab Colors"),
+            renderButtonWithTooltip())));
+};
+export const ButtonWithIcon = () => {
+    const renderButtonWithIcon = () => (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "tw-p-4" },
+            React.createElement(Button, { icon: "fc-search-power", variant: "theme", label: "With Icon" })),
+        React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
+            React.createElement(Button, { icon: "fc-search-power", variant: "theme", label: "With Icon" }))));
+    const renderButtonWithIconOnRight = () => (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "tw-p-4" },
+            React.createElement(Button, { icon: "fc-search-power", iconPosition: "right", variant: "theme", label: "With Icon On Right" })),
+        React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
+            React.createElement(Button, { icon: "fc-search-power", iconPosition: "right", variant: "theme", label: "With Icon On Right" }))));
+    return (React.createElement("div", { className: "tw-grid tw-grid-cols-3 tw-gap-4" },
+        React.createElement("div", { className: "color_topic" },
+            React.createElement("b", null, "Topic Colors"),
+            renderButtonWithIcon()),
+        React.createElement("div", { className: "color_analysis" },
+            React.createElement("b", null, "Analysis Colors"),
+            renderButtonWithIcon()),
+        React.createElement("div", { className: "color_datalab" },
+            React.createElement("b", null, "Datalab Colors"),
+            renderButtonWithIcon()),
+        React.createElement("div", { className: "color_topic" }, renderButtonWithIconOnRight()),
+        React.createElement("div", { className: "color_analysis" }, renderButtonWithIconOnRight()),
+        React.createElement("div", { className: "color_datalab" }, renderButtonWithIconOnRight())));
+};
+export const DisabledButton = () => {
+    const renderDisabledButton = () => (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "tw-p-4" },
+            React.createElement(Button, { disabled: true, variant: "theme", label: "Disabled Button" }),
+            React.createElement(Button, { extraClassNames: "tw-m-5", disabled: true, label: "Disabled Button" })),
+        React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
+            React.createElement(Button, { disabled: true, variant: "theme", label: "Disabled Button" }),
+            React.createElement(Button, { extraClassNames: "tw-m-5", disabled: true, label: "Disabled Button" }))));
+    return (React.createElement("div", { className: "tw-grid tw-grid-cols-3 tw-gap-4" },
+        React.createElement("div", { className: "color_topic" },
+            React.createElement("b", null, "Topic Colors"),
+            renderDisabledButton()),
+        React.createElement("div", { className: "color_analysis" },
+            React.createElement("b", null, "Analysis Colors"),
+            renderDisabledButton()),
+        React.createElement("div", { className: "color_datalab" },
+            React.createElement("b", null, "Datalab Colors"),
+            renderDisabledButton())));
+};
+//# sourceMappingURL=Button.stories.js.map

package/dist/Button/Button.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../src/Button/Button.stories.tsx"],"names":[],"mappings":"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"}

package/dist/Button/Button.test.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Button from './Button';
+describe('Button', () => {
+    class Context {
+        testId = 'buttonTestId';
+        label = 'button label';
+        props = {
+            label: this.label,
+            onClick: jest.fn(),
+            testId: this.testId,
+        };
+    }
+    let tc;
+    beforeEach(() => {
+        tc = new Context();
+    });
+    const renderButton = (props) => render(React.createElement(Button, { ...props }));
+    it('renders button label', () => {
+        renderButton(tc.props);
+        expect(screen.getByText(tc.label)).toBeInTheDocument();
+    });
+    it('calls on click', async () => {
+        renderButton(tc.props);
+        await userEvent.click(screen.getByTestId(tc.testId));
+        expect(tc.props.onClick).toHaveBeenCalled();
+    });
+    it('renders disabled button', () => {
+        renderButton({ ...tc.props, disabled: true });
+        expect(screen.getByText(tc.label)).toBeDisabled();
+    });
+    it('respects stopPropagation default', async () => {
+        const callOnPropagation = jest.fn();
+        render(React.createElement("div", { onClick: callOnPropagation },
+            React.createElement(Button, { ...tc.props })));
+        await userEvent.click(screen.getByTestId(tc.testId));
+        expect(callOnPropagation).not.toHaveBeenCalled();
+    });
+    it('propagates click event if not told not to', async () => {
+        const callOnPropagation = jest.fn();
+        render(React.createElement("div", { onClick: callOnPropagation },
+            React.createElement(Button, { ...{ ...tc.props, stopPropagation: false } })));
+        await userEvent.click(screen.getByTestId(tc.testId));
+        expect(callOnPropagation).toHaveBeenCalled();
+    });
+});
+//# sourceMappingURL=Button.test.js.map

package/dist/Button/Button.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.test.js","sourceRoot":"","sources":["../../src/Button/Button.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,2BAA2B,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,SAAS,MAAM,6BAA6B,CAAC;AAEpD,OAAO,MAAM,MAAM,UAAU,CAAC;AAG9B,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;IACtB,MAAM,OAAO;QACX,MAAM,GAAG,cAAc,CAAC;QACxB,KAAK,GAAG,cAAc,CAAC;QACvB,KAAK,GAAgB;YACnB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE;YAClB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC;KACH;IAED,IAAI,EAAW,CAAC;IAChB,UAAU,CAAC,GAAG,EAAE;QACd,EAAE,GAAG,IAAI,OAAO,EAAE,CAAC;IACrB,CAAC,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,CAAC,KAAkB,EAAE,EAAE,CAAC,MAAM,CAAC,oBAAC,MAAM,OAAK,KAAK,GAAI,CAAC,CAAC;IAE3E,EAAE,CAAC,sBAAsB,EAAE,GAAG,EAAE;QAC9B,YAAY,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;QACvB,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACzD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gBAAgB,EAAE,KAAK,IAAI,EAAE;QAC9B,YAAY,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;QACvB,MAAM,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;QACrD,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,gBAAgB,EAAE,CAAC;IAC9C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yBAAyB,EAAE,GAAG,EAAE;QACjC,YAAY,CAAC,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;QAC9C,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC;IACpD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kCAAkC,EAAE,KAAK,IAAI,EAAE;QAChD,MAAM,iBAAiB,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QACpC,MAAM,CACJ,6BAAK,OAAO,EAAE,iBAAiB;YAC7B,oBAAC,MAAM,OAAK,EAAE,CAAC,KAAK,GAAI,CACpB,CACP,CAAC;QACF,MAAM,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;QACrD,MAAM,CAAC,iBAAiB,CAAC,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC;IACnD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2CAA2C,EAAE,KAAK,IAAI,EAAE;QACzD,MAAM,iBAAiB,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QACpC,MAAM,CACJ,6BAAK,OAAO,EAAE,iBAAiB;YAC7B,oBAAC,MAAM,OAAK,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,GAAI,CACnD,CACP,CAAC;QACF,MAAM,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;QACrD,MAAM,CAAC,iBAAiB,CAAC,CAAC,gBAAgB,EAAE,CAAC;IAC/C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/Button/Button.types.d.ts

@@ -4,9 +4,11 @@ import React from 'react';
 export declare const buttonTypes: readonly ["button", "reset", "submit", "link"];
 export declare const buttonSizes: readonly ["sm", "lg"];
 export declare const buttonVariants: readonly ["outline", "theme", "theme-light", "warning", "danger", "no-border"];
+export declare const iconPositions: string[];
 export type ButtonType = typeof buttonTypes[number];
 export type ButtonSize = typeof buttonSizes[number];
 export type ButtonVariant = typeof buttonVariants[number];
+export type IconPosition = typeof iconPositions[number];
 export interface ButtonProps {
     /** function to call when clicking the button (takes no parameters) */
     onClick?: (e: React.MouseEvent) => void;
@@ -23,10 +25,12 @@ export interface ButtonProps {
     extraClassNames?: string;
     /** icon class to be used if an icon should go before the text (i.e. fc-zoom) */
     icon?: string;
-    /** icon color option (text, white, theme, color, default is "text") */
+    /** icon color option (text, white, theme, color; default is "text") */
     iconStyle?: IconType;
     /** color of the icon if it is custom (required if iconStyle is "color") */
     iconColor?: string;
+    /** where the icon should be positioned relative to the provided text (left or right; default is left) */
+    iconPosition?: IconPosition;
     /** normally we want for Icon to prefix FontAwesome icons with the fa-sharp fa-regular prefix however there are a
      *  select few icons that are not pulled from that set. For those we need to pass specific prefixes instead.*/
     iconPrefix?: string;

package/dist/Button/Button.types.js

@@ -0,0 +1,5 @@
+export const buttonTypes = ['button', 'reset', 'submit', 'link'];
+export const buttonSizes = ['sm', 'lg'];
+export const buttonVariants = ['outline', 'theme', 'theme-light', 'warning', 'danger', 'no-border'];
+export const iconPositions = ['left', 'right'];
+//# sourceMappingURL=Button.types.js.map

package/dist/Button/Button.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.types.js","sourceRoot":"","sources":["../../src/Button/Button.types.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAU,CAAC;AAC1E,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,CAAU,CAAC;AACjD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,SAAS,EAAE,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,CAAU,CAAC;AAC7G,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC"}

package/dist/Button/index.js

@@ -0,0 +1,2 @@
+export { default } from "./Button";
+//# sourceMappingURL=index.js.map

package/dist/Button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC"}

package/dist/ButtonWithDropdown/ButtonWithDropdown.js

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import Icon from '../Icon';
+import { getQTipData } from '../Tooltip/qTip.utilities';
+const borderStyles = [
+    'tw-border-solid',
+    'tw-border',
+    'tw-rounded-sm',
+    '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 ButtonWithDropdown = ({ dropdownItems, triggerIcon, id, extraClassNames, containerTestId, disabled = false, align = 'end', placement = 'bottom', placementOffset = 5, alignOffset = -35, hasArrow = false, onOpenChange, isOpen, setFocusOnTriggerOnClose = true, keepFocusInsideDropdown = true, ...tooltipProps }) => {
+    const tooltipData = getQTipData(tooltipProps);
+    return (React.createElement(DropdownMenu.Root, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown },
+        React.createElement(DropdownMenu.Trigger, { id: id, className: `tw-border-none focus-visible:tw-outline-none focus:tw-outline-none focus-within:tw-outline-none`, disabled: disabled },
+            React.createElement("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 || ''}` }, triggerIcon)),
+        React.createElement(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" },
+            React.createElement("div", { "data-testid": containerTestId, className: bgStyles +
+                    ' tw-relative tw-z-[1000] 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 },
+                hasArrow && (React.createElement(DropdownMenu.Arrow, { asChild: true },
+                    React.createElement("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]" }))),
+                dropdownItems.map((item, index) => {
+                    if (item.isLabel) {
+                        return (React.createElement(DropdownMenu.Label, { key: (item.label || '') + index, className: item.containerExtraClassNames },
+                            item.icon && (React.createElement(Icon, { icon: item.icon, testId: item.iconTestId, type: "text", color: item.iconColor, extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]" })),
+                            React.createElement("div", { "data-testid": item.labelTestId, className: "tw-text-[13px] tw-text-sq-text-color dark:tw-text-sq-white tw-ml-1" }, item.label)));
+                    }
+                    if (Array.isArray(item.subMenuItems) && item.subMenuItems.length > 0) {
+                        return (React.createElement(DropdownMenu.Sub, { key: item.label + index },
+                            React.createElement(DropdownMenu.SubTrigger, { id: id, className: `tw-cursor-pointer tw-flex tw-justify-between dark:tw-text-sq-white hover:tw-bg-sq-gray-highlight dark:hover:tw-bg-sq-gray-highlight-dark tw-leading-none tw-items-center tw-h-[27px] tw-pl-[19px] tw-relative tw-select-none tw-outline-none data-[disabled]:tw-text-sq-disabled-gray data-[disabled]:tw-pointer-events-none ${item.containerExtraClassNames || ''}`, "data-testid": item.testId, disabled: item.disabled },
+                                React.createElement("div", { className: "tw-flex" },
+                                    item.icon && (React.createElement(Icon, { icon: item.icon, extraClassNames: `tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px] ${item.iconExtraClassNames || ''}` })),
+                                    React.createElement("div", { "data-testid": item.labelTestId, "data-customid": item.labelCustomId, className: `tw-text-[13px] tw-ml-1 ${item.labelClasses}` }, item.label)),
+                                React.createElement(Icon, { small: true, icon: "fc-arrow-dropdown -tw-rotate-90", extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px] tw-ml-4 tw-text-[8px] tw-justify-center tw-flex" })),
+                            React.createElement(DropdownMenu.SubContent, { className: "focus-visible:tw-outline-none tw-outline-none" },
+                                React.createElement("div", { "data-testid": containerTestId, className: bgStyles +
+                                        ' tw-relative tw-z-[1000] 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 }, item.subMenuItems.map((subItem, subIndex) => {
+                                    return (React.createElement(DropdownMenu.Item, { key: subItem.label + subIndex, onSelect: subItem.onClick, "data-qtip-text": subItem.tooltip, 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-leading-none tw-items-center tw-h-[27px] tw-px-[19px] tw-relative tw-select-none tw-outline-none data-[disabled]:tw-text-sq-disabled-gray data-[disabled]:tw-pointer-events-none", disabled: subItem.disabled },
+                                        subItem.iconClass && (React.createElement(Icon, { icon: subItem.iconClass, extraClassNames: `tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]` })),
+                                        React.createElement("div", { className: `tw-text-[13px] tw-ml-1` }, subItem.label)));
+                                })))));
+                    }
+                    return (React.createElement("div", { key: item.label + index },
+                        React.createElement(DropdownMenu.Item, { key: item.label + index, "data-customid": item.itemCustomId, onSelect: (e) => {
+                                item.onClick(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-leading-none tw-items-center tw-h-[27px] tw-px-[19px] tw-relative tw-select-none tw-outline-none data-[disabled]:tw-text-sq-disabled-gray data-[disabled]:tw-pointer-events-none ${item.containerExtraClassNames || ''}`, "data-testid": item.testId, disabled: item.disabled },
+                            item.icon && (React.createElement(Icon, { icon: item.icon, testId: item.iconTestId, type: (item.iconType || 'text'), color: item.iconColor, customId: item.iconCustomId, extraClassNames: `tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px] ${item.iconExtraClassNames || ''}` })),
+                            React.createElement("div", { "data-testid": item.labelTestId, "data-customid": item.labelCustomId, className: `tw-text-[13px] tw-ml-1 ${item.labelClasses}` }, item.label)),
+                        item.hasDivider && (React.createElement(DropdownMenu.Separator, { "data-testid": `dropdown-divider-${index}`, className: "tw-h-[1px] tw-bg-sq-disabled-gray dark:tw-bg-gray-500 tw-my-[8px]" }))));
+                })))));
+};
+export default ButtonWithDropdown;
+//# sourceMappingURL=ButtonWithDropdown.js.map

package/dist/ButtonWithDropdown/ButtonWithDropdown.js.map

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

package/dist/ButtonWithDropdown/ButtonWithDropdown.stories.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import ButtonWithDropdown from './ButtonWithDropdown';
+import Icon from '../Icon';
+import { QTip } from '../Tooltip/Qtip';
+export default {
+    title: 'Button with Dropdown',
+};
+export const AllButtonWithDropdownVariants = () => {
+    const [openDropdown, setOpenDropdown] = React.useState('');
+    const allButtonWithDropdowns = (color, isDark) => (React.createElement("div", { className: isDark ? 'tw-dark tw-bg-sq-dark-background' : '' },
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement(ButtonWithDropdown, { onOpenChange: (isOpen) => setOpenDropdown(isOpen ? `dropdown-1-${color}-${isDark ? 'dark' : 'light'}` : ''), isOpen: openDropdown === `dropdown-1-${color}-${isDark ? 'dark' : 'light'}`, triggerIcon: React.createElement(Icon, { icon: "fc-more", type: "text", extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]" }), containerTestId: "basic-dropdown1", tooltip: "This is a small dropdown.", tooltipDelay: 0, tooltipPlacement: "top", dropdownItems: [
+                    { label: 'Orange', icon: 'fc-data-file', onClick: () => setOpenDropdown('') },
+                    { label: 'Mango', icon: 'fc-user-community', onClick: () => setOpenDropdown('') },
+                    { label: 'Guava', icon: 'fc-user-community', onClick: () => setOpenDropdown('') },
+                    { label: 'Banana', icon: 'fc-user-community', onClick: () => setOpenDropdown('') },
+                ] })),
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement(ButtonWithDropdown, { triggerIcon: React.createElement(Icon, { icon: "fc-more", type: "text", extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]" }), onOpenChange: (isOpen) => setOpenDropdown(isOpen ? `dropdown-2-${color}-${isDark ? 'dark' : 'light'}` : ''), isOpen: openDropdown === `dropdown-2-${color}-${isDark ? 'dark' : 'light'}`, dropdownItems: [
+                    { label: 'Orange', icon: 'fc-data-file', onClick: () => setOpenDropdown(''), hasDivider: true },
+                    { label: 'Mango', icon: 'fc-user-community', onClick: () => setOpenDropdown('') },
+                    { label: 'Guava', icon: 'fc-user-community', onClick: () => setOpenDropdown(''), hasDivider: true },
+                    { label: 'Banana', icon: 'fc-user-community', onClick: () => setOpenDropdown('') },
+                ], containerTestId: "basic-dropdown1", tooltip: "This is a normal dropdown.", tooltipDelay: 0, tooltipPlacement: "top" })),
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement("div", { className: "dark:tw-text-white tw-text-xs" }, "Dropdown with arrow"),
+            React.createElement(ButtonWithDropdown, { triggerIcon: React.createElement(Icon, { icon: "fc-more", type: "text", extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]" }), onOpenChange: (isOpen) => setOpenDropdown(isOpen ? `dropdown-3-${color}-${isDark ? 'dark' : 'light'}` : ''), isOpen: openDropdown === `dropdown-3-${color}-${isDark ? 'dark' : 'light'}`, dropdownItems: [
+                    { label: 'Orange', icon: 'fc-data-file', onClick: () => setOpenDropdown(''), hasDivider: true },
+                    { label: 'Mango', icon: 'fc-user-community', onClick: () => setOpenDropdown('') },
+                    { label: 'Guava', icon: 'fc-user-community', onClick: () => setOpenDropdown(''), hasDivider: true },
+                    { label: 'Banana', icon: 'fc-user-community', onClick: () => setOpenDropdown('') },
+                ], containerTestId: "basic-dropdown1", hasArrow: true, tooltip: "This is a normal dropdown aligned to the end", tooltipDelay: 0, tooltipPlacement: "top" })),
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement("div", { className: "dark:tw-text-white tw-text-xs" }, "Dropdown aligned at center"),
+            React.createElement(ButtonWithDropdown, { triggerIcon: React.createElement(Icon, { icon: "fc-more", type: "text", extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]" }), onOpenChange: (isOpen) => setOpenDropdown(isOpen ? `dropdown-4-${color}-${isDark ? 'dark' : 'light'}` : ''), isOpen: openDropdown === `dropdown-4-${color}-${isDark ? 'dark' : 'light'}`, dropdownItems: [
+                    { label: 'Orange', icon: 'fc-data-file', onClick: () => setOpenDropdown(''), hasDivider: true },
+                    { label: 'Mango', icon: 'fc-user-community', onClick: () => setOpenDropdown('') },
+                    { label: 'Guava', icon: 'fc-user-community', onClick: () => setOpenDropdown(''), hasDivider: true },
+                    { label: 'Banana', icon: 'fc-user-community', onClick: () => setOpenDropdown('') },
+                ], containerTestId: "basic-dropdown1", hasArrow: true, tooltip: "This is a normal dropdown aligned to the center", align: "center", tooltipDelay: 0, tooltipPlacement: "top" })),
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement("div", { className: "dark:tw-text-white tw-text-xs" }, "Dropdown aligned at start"),
+            React.createElement(ButtonWithDropdown, { triggerIcon: React.createElement(Icon, { icon: "fc-more", type: "text", extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]" }), onOpenChange: (isOpen) => setOpenDropdown(isOpen ? `dropdown-5-${color}-${isDark ? 'dark' : 'light'}` : ''), isOpen: openDropdown === `dropdown-5-${color}-${isDark ? 'dark' : 'light'}`, dropdownItems: [
+                    { label: 'Orange', icon: 'fc-data-file', onClick: () => setOpenDropdown(''), hasDivider: true },
+                    { label: 'Mango', icon: 'fc-user-community', onClick: () => setOpenDropdown('') },
+                    { label: 'Guava', icon: 'fc-user-community', onClick: () => setOpenDropdown(''), hasDivider: true },
+                    { label: 'Banana', icon: 'fc-user-community', onClick: () => setOpenDropdown('') },
+                ], containerTestId: "basic-dropdown1", hasArrow: true, tooltip: "This is a normal dropdown aligned to the center", align: "start", tooltipDelay: 0, tooltipPlacement: "top" })),
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement(ButtonWithDropdown, { triggerIcon: React.createElement(Icon, { icon: "fc-gears-2", type: "text", extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]" }), dropdownItems: [], onOpenChange: (isOpen) => setOpenDropdown(isOpen ? `dropdown-6-${color}-${isDark ? 'dark' : 'light'}` : ''), isOpen: openDropdown === `dropdown-6-${color}-${isDark ? 'dark' : 'light'}`, containerTestId: "basic-dropdown2", tooltip: "This is a disabled dropdown.", tooltipDelay: 0, tooltipPlacement: "top", disabled: true })),
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement(ButtonWithDropdown, { onOpenChange: (isOpen) => setOpenDropdown(isOpen ? `dropdown-7-${color}-${isDark ? 'dark' : 'light'}` : ''), isOpen: openDropdown === `dropdown-7-${color}-${isDark ? 'dark' : 'light'}`, triggerIcon: React.createElement(Icon, { icon: "fc-more", type: "text", extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]" }), containerTestId: "basic-dropdown7", tooltip: "This is a dropdown with submenu", tooltipDelay: 0, tooltipPlacement: "top", dropdownItems: [
+                    { label: 'Orange', icon: 'fc-data-file', onClick: () => setOpenDropdown('') },
+                    { label: 'Mango', icon: 'fc-user-community', onClick: () => setOpenDropdown('') },
+                    {
+                        label: 'Guava',
+                        icon: 'fc-user-community',
+                        onClick: () => setOpenDropdown(''),
+                        subMenuItems: [
+                            { label: 'Orange', iconClass: 'fc-data-file', onClick: () => setOpenDropdown('') },
+                            { label: 'Mango', iconClass: 'fc-user-community', onClick: () => setOpenDropdown('') },
+                        ],
+                    },
+                    { label: 'Banana', icon: 'fc-user-community', onClick: () => setOpenDropdown('') },
+                ] }))));
+    const renderAllVariations = (color) => (React.createElement("div", { className: "tw-grid tw-grid-cols-2 tw-gap-4 tw-p-4" },
+        allButtonWithDropdowns(color),
+        allButtonWithDropdowns(color, true)));
+    return (React.createElement("div", { className: "tw-grid tw-grid-cols-3 tw-gap-4" },
+        React.createElement(QTip, null),
+        React.createElement("div", { className: "color_topic" },
+            React.createElement("b", null, "Topic Colors"),
+            renderAllVariations('topic')),
+        React.createElement("div", { className: "color_analysis" },
+            React.createElement("b", null, "Analysis Colors"),
+            renderAllVariations('analysis')),
+        React.createElement("div", { className: "color_datalab" },
+            React.createElement("b", null, "Datalab Colors"),
+            renderAllVariations('datalab'))));
+};
+//# sourceMappingURL=ButtonWithDropdown.stories.js.map

package/dist/ButtonWithDropdown/ButtonWithDropdown.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonWithDropdown.stories.js","sourceRoot":"","sources":["../../src/ButtonWithDropdown/ButtonWithDropdown.stories.tsx"],"names":[],"mappings":"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"}

package/dist/ButtonWithDropdown/ButtonWithDropdown.test.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import ButtonWithDropdown from './ButtonWithDropdown';
+import Icon from '../Icon';
+describe('ButtonWithDropdown', () => {
+    const mockOnClick = jest.fn();
+    const testId = 'trigger-icon';
+    class Context {
+        props = {
+            triggerIcon: (React.createElement(Icon, { icon: "fc-more", type: "text", testId: testId, extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]" })),
+            containerTestId: 'basic-dropdown1',
+            tooltip: 'This is a small dropdown.',
+            tooltipDelay: 0,
+            tooltipPlacement: 'top',
+            isHtmlTooltip: false,
+            dropdownItems: [
+                { label: 'Orange', icon: 'fc-data-file', onClick: mockOnClick },
+                { label: 'Mango', icon: 'fc-user-community', onClick: mockOnClick },
+                { label: 'Guava', icon: 'fc-user-community', onClick: mockOnClick },
+                { label: 'Banana', icon: 'fc-user-community', onClick: mockOnClick },
+            ],
+        };
+    }
+    let tc;
+    beforeEach(() => {
+        tc = new Context();
+        jest.clearAllMocks();
+    });
+    const renderButtonWithDropdown = (props) => render(React.createElement(ButtonWithDropdown, { ...props }));
+    const openDropdown = async () => {
+        const popover = screen.getByTestId(testId);
+        await userEvent.click(popover);
+    };
+    test('renders trigger and opens dropdown content on trigger click', async () => {
+        renderButtonWithDropdown(tc.props);
+        expect(screen.getByTestId('trigger-icon')).toBeInTheDocument();
+        await openDropdown();
+        expect(screen.getByText('Orange')).toBeInTheDocument();
+    });
+    test('renders dividers correctly', async () => {
+        tc.props.dropdownItems[1].hasDivider = true;
+        renderButtonWithDropdown(tc.props);
+        expect(screen.getByTestId('trigger-icon')).toBeInTheDocument();
+        await openDropdown();
+        expect(screen.getByText('Orange')).toBeInTheDocument();
+        expect(screen.getByTestId('dropdown-divider-1')).toBeInTheDocument();
+    });
+    test('calls onClick handler when dropdown item is selected', async () => {
+        renderButtonWithDropdown(tc.props);
+        await openDropdown();
+        const item1 = screen.getByText('Orange');
+        await userEvent.click(item1);
+        expect(mockOnClick).toHaveBeenCalledTimes(1);
+    });
+    test('closes dropdown when item is clicked', async () => {
+        renderButtonWithDropdown(tc.props);
+        await openDropdown();
+        const item1 = screen.getByText('Orange');
+        await userEvent.click(item1);
+        expect(mockOnClick).toHaveBeenCalledTimes(1);
+        expect(screen.queryByText('Orange')).not.toBeInTheDocument();
+    });
+    test('does not open when disabled', async () => {
+        tc.props.disabled = true;
+        renderButtonWithDropdown(tc.props);
+        await openDropdown();
+        expect(screen.queryByText('Orange')).not.toBeInTheDocument();
+    });
+});
+//# sourceMappingURL=ButtonWithDropdown.test.js.map

package/dist/ButtonWithDropdown/ButtonWithDropdown.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonWithDropdown.test.js","sourceRoot":"","sources":["../../src/ButtonWithDropdown/ButtonWithDropdown.test.tsx"],"names":[],"mappings":"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"}

package/dist/ButtonWithDropdown/ButtonWithDropdown.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ButtonWithDropdown.types.js.map

package/dist/ButtonWithDropdown/ButtonWithDropdown.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonWithDropdown.types.js","sourceRoot":"","sources":["../../src/ButtonWithDropdown/ButtonWithDropdown.types.ts"],"names":[],"mappings":""}

package/dist/ButtonWithDropdown/index.js

@@ -0,0 +1,2 @@
+export { default } from './ButtonWithDropdown';
+//# sourceMappingURL=index.js.map

package/dist/ButtonWithDropdown/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ButtonWithDropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/ButtonWithPopover/ButtonWithPopover.js

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { getQTipData } from '../Tooltip/qTip.utilities';
+const bgStyles = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
+const borderStyles = [
+    'tw-border-solid',
+    'tw-border',
+    'tw-rounded-sm',
+    'tw-border-sq-disabled-gray',
+    'dark:tw-border-gray-500',
+].join(' ');
+const disabledClasses = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
+const ButtonWithPopover = ({ children, trigger, id, hasArrow, extraTriggerClassNames, extraPopoverClassNames, containerTestId, onInteractOutside, onPointerDownOutside, isTriggerAsChild = false, shouldTriggerFullWidth = false, disabled = false, align = 'end', alignOffset = -35, placement = 'bottom', placementOffset = 2, isHoverEnabled = false, hoverOpenDelay = 300, onOpenChange, isOpen, isCloseOnContentClick = false, setFocusOnTriggerOnClose = true, isPortal = false, ...tooltipProps }) => {
+    const tooltipData = getQTipData(tooltipProps);
+    let timeout;
+    const [isHoveredOpen, setIsHoveredOpen] = React.useState(false);
+    const onHoverStart = () => {
+        if (isHoverEnabled) {
+            timeout = setTimeout(() => {
+                setIsHoveredOpen(true);
+                onOpenChange && onOpenChange(true);
+            }, hoverOpenDelay);
+        }
+    };
+    const onHoverEnd = () => {
+        if (isHoverEnabled) {
+            timeout = setTimeout(() => {
+                setIsHoveredOpen(false);
+                onOpenChange && onOpenChange(false);
+            }, 200);
+        }
+    };
+    React.useEffect(() => () => timeout && clearTimeout(timeout), []);
+    const renderContent = () => {
+        return (React.createElement(PopoverPrimitive.Content, { sideOffset: placementOffset, align: align, side: placement, onInteractOutside: onInteractOutside, onPointerDownOutside: onPointerDownOutside, alignOffset: isHoverEnabled ? -10 : alignOffset, asChild: true, onClick: () => isCloseOnContentClick && onOpenChange && onOpenChange(false), className: "focus-visible:tw-outline-none tw-outline-none tw-w-full tw-h-full" },
+            React.createElement("div", { "data-testid": containerTestId, className: `${bgStyles} ${borderStyles} tw-relative tw-z-[1000] tw-min-w-6 focus-visible:tw-outline-none tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out
+         data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade tw-text-sq-text-color
+        ${extraPopoverClassNames || ''}` },
+                hasArrow && (React.createElement(PopoverPrimitive.Arrow, { asChild: true },
+                    React.createElement("div", { className: " tw-fill-transparent tw-bg-white tw-w-[15px] tw-h-[15px] tw-mt-[-7px] 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" }))),
+                children)));
+    };
+    const renderPopover = (popoverOpenState) => {
+        return (React.createElement(PopoverPrimitive.Root, { open: popoverOpenState, defaultOpen: false, onOpenChange: onOpenChange },
+            trigger ? (React.createElement(PopoverPrimitive.Trigger, { id: id, asChild: isTriggerAsChild, className: `focus-visible:tw-outline-none tw-outline-none ${shouldTriggerFullWidth ? 'tw-w-full tw-h-full' : ''}`, disabled: disabled },
+                React.createElement("div", { ...tooltipData, onMouseOver: onHoverStart, onMouseOut: onHoverEnd, className: `tw-bg-transparent focus-visible:tw-outline-none tw-outline-none ${disabled ? disabledClasses : ''} ${shouldTriggerFullWidth ? 'tw-flex tw-flex-col tw-items-center tw-justify-center' : 'tw-inline'} ${extraTriggerClassNames || ''}` }, trigger))) : (React.createElement(PopoverPrimitive.Trigger, { asChild: true },
+                React.createElement("div", null))),
+            isPortal ? React.createElement(PopoverPrimitive.Portal, null, renderContent()) : renderContent()));
+    };
+    return isHoverEnabled ? renderPopover(isHoveredOpen) : renderPopover(isOpen);
+};
+export default ButtonWithPopover;
+//# sourceMappingURL=ButtonWithPopover.js.map

package/dist/ButtonWithPopover/ButtonWithPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonWithPopover.js","sourceRoot":"","sources":["../../src/ButtonWithPopover/ButtonWithPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAE5D,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExD,MAAM,QAAQ,GAAG,CAAC,gBAAgB,EAAE,+BAA+B,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAE/E,MAAM,YAAY,GAAG;IACnB,iBAAiB;IACjB,WAAW;IACX,eAAe;IACf,4BAA4B;IAC5B,yBAAyB;CAC1B,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAEZ,MAAM,eAAe,GAAG,CAAC,eAAe,EAAE,uBAAuB,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAE7E,MAAM,iBAAiB,GAAoD,CAAC,EAC1E,QAAQ,EACR,OAAO,EACP,EAAE,EACF,QAAQ,EACR,sBAAsB,EACtB,sBAAsB,EACtB,eAAe,EACf,iBAAiB,EACjB,oBAAoB,EACpB,gBAAgB,GAAG,KAAK,EACxB,sBAAsB,GAAG,KAAK,EAC9B,QAAQ,GAAG,KAAK,EAChB,KAAK,GAAG,KAAK,EACb,WAAW,GAAG,CAAC,EAAE,EACjB,SAAS,GAAG,QAAQ,EACpB,eAAe,GAAG,CAAC,EACnB,cAAc,GAAG,KAAK,EACtB,cAAc,GAAG,GAAG,EACpB,YAAY,EACZ,MAAM,EACN,qBAAqB,GAAG,KAAK,EAC7B,wBAAwB,GAAG,IAAI,EAC/B,QAAQ,GAAG,KAAK,EAChB,GAAG,YAAY,EAChB,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC;IAC9C,IAAI,OAAuB,CAAC;IAC5B,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAU,KAAK,CAAC,CAAC;IAEzE,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,IAAI,cAAc,EAAE;YAClB,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBACxB,gBAAgB,CAAC,IAAI,CAAC,CAAC;gBACvB,YAAY,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC;YACrC,CAAC,EAAE,cAAc,CAAC,CAAC;SACpB;IACH,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,cAAc,EAAE;YAClB,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBACxB,gBAAgB,CAAC,KAAK,CAAC,CAAC;gBACxB,YAAY,IAAI,YAAY,CAAC,KAAK,CAAC,CAAC;YACtC,CAAC,EAAE,GAAG,CAAC,CAAC;SACT;IACH,CAAC,CAAC;IAEF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,OAAO,IAAI,YAAY,CAAC,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC;IAElE,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,OAAO,CACL,oBAAC,gBAAgB,CAAC,OAAO,IACvB,UAAU,EAAE,eAAe,EAC3B,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,SAAS,EACf,iBAAiB,EAAE,iBAAiB,EACpC,oBAAoB,EAAE,oBAAoB,EAC1C,WAAW,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,EAC/C,OAAO,QACP,OAAO,EAAE,GAAG,EAAE,CAAC,qBAAqB,IAAI,YAAY,IAAI,YAAY,CAAC,KAAK,CAAC,EAC3E,SAAS,EAAC,mEAAmE;YAC7E,4CACe,eAAe,EAC5B,SAAS,EAAE,GAAG,QAAQ,IAAI,YAAY;;UAEtC,sBAAsB,IAAI,EAAE,EAAE;gBAC7B,QAAQ,IAAI,CACX,oBAAC,gBAAgB,CAAC,KAAK,IAAC,OAAO;oBAC7B,6BAAK,SAAS,EAAC,6LAA6L,GAAG,CACxL,CAC1B;gBACA,QAAQ,CACL,CACmB,CAC5B,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,gBAA0B,EAAE,EAAE;QACnD,OAAO,CACL,oBAAC,gBAAgB,CAAC,IAAI,IAAC,IAAI,EAAE,gBAAgB,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,EAAE,YAAY;YAC1F,OAAO,CAAC,CAAC,CAAC,CACT,oBAAC,gBAAgB,CAAC,OAAO,IACvB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,gBAAgB,EACzB,SAAS,EAAE,iDACT,sBAAsB,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EACnD,EAAE,EACF,QAAQ,EAAE,QAAQ;gBAClB,gCACM,WAAW,EACf,WAAW,EAAE,YAAY,EACzB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,mEACT,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAC/B,IAAI,sBAAsB,CAAC,CAAC,CAAC,uDAAuD,CAAC,CAAC,CAAC,WAAW,IAChG,sBAAsB,IAAI,EAC5B,EAAE,IACD,OAAO,CACJ,CACmB,CAC5B,CAAC,CAAC,CAAC,CACF,oBAAC,gBAAgB,CAAC,OAAO,IAAC,OAAO;gBAC/B,gCAAO,CACkB,CAC5B;YACA,QAAQ,CAAC,CAAC,CAAC,oBAAC,gBAAgB,CAAC,MAAM,QAAE,aAAa,EAAE,CAA2B,CAAC,CAAC,CAAC,aAAa,EAAE,CAC5E,CACzB,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,cAAc,CAAC,CAAC,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;AAC/E,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}