@seeqdev/qomponents 0.0.41 → 0.0.43

package/dist/Button/Button.test.js

@@ -1,49 +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();
-    });
-});
+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.types.js

@@ -1,4 +1,4 @@
-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 buttonTypes = ['button', 'reset', 'submit', 'link'];
+export const buttonSizes = ['sm', 'lg'];
+export const buttonVariants = ['outline', 'theme', 'theme-light', 'warning', 'danger', 'no-border'];
 //# sourceMappingURL=Button.types.js.map

package/dist/Button/index.js

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

package/dist/Checkbox/Checkbox.js

@@ -1,24 +1,24 @@
-import React from 'react';
-import '../styles.css';
-const alignment = 'tw-flex';
-const labelClasses = 'tw-ml-1.5 tw-text-sm tw--mt-0.5';
-const baseClasses = 'tw-border-1 tw-h-3.5 tw-w-3.5 focus:tw-ring-0 focus:tw-ring-offset-0 tw-outline-none focus:tw-outline-none' +
-    '  dark:tw-bg-sq-dark-background dark:tw-border-sq-dark-text dark:hover:tw-bg-sq-dark-background' +
-    ' checked:tw-text-white checked:tw-border-sq-text-color checked:hover:tw-border-sq-color-dark' +
-    ' checked:active:tw-border-sq-color-dark checked:focus:tw-border-sq-color-dark disabled:tw-border-sq-disabled-gray' +
-    ' dark:disabled:tw-border-sq-fairly-dark-gray dark:checked:focus:tw-bg-sq-dark-background';
-const checkboxClasses = `tw-form-checkbox tw-rounded ${baseClasses}`;
-const radioClasses = `tw-form-radio ${baseClasses}`;
-/**
- * Checkbox and Radio Box Component.
- */
-export const Checkbox = (props) => {
-    const { type = 'checkbox', value, disabled = false, label, onChange, onClick, onKeyDown, checked, defaultChecked, id, name, extraClassNames, extraLabelClassNames, testId, } = props;
-    const assignedId = id ?? 'checkbox_' + Math.random();
-    return (React.createElement("span", { className: `${alignment} ${extraClassNames}` },
-        React.createElement("input", { value: value, type: type, "data-testid": testId, name: name, id: assignedId, checked: checked, defaultChecked: defaultChecked, className: `${type === 'checkbox' ? checkboxClasses : radioClasses} ${disabled ? 'tw-cursor-not-allowed' : 'tw-cursor-pointer'}`, disabled: disabled, onClick: onClick, onChange: onChange, onKeyDown: onKeyDown }),
-        React.createElement("label", { htmlFor: assignedId, className: `${labelClasses} ${extraLabelClassNames} ${disabled
-                ? 'tw-cursor-not-allowed dark:tw-text-sq-fairly-dark-gray tw-text-sq-fairly-dark-gray'
-                : 'tw-cursor-pointer tw-text-sq-text-color dark:tw-text-sq-dark-text'}` }, label)));
-};
+import React from 'react';
+import '../styles.css';
+const alignment = 'tw-flex';
+const labelClasses = 'tw-ml-1.5 tw-text-sm tw--mt-0.5';
+const baseClasses = 'tw-border-1 tw-h-3.5 tw-w-3.5 focus:tw-ring-0 focus:tw-ring-offset-0 tw-outline-none focus:tw-outline-none' +
+    '  dark:tw-bg-sq-dark-background dark:tw-border-sq-dark-text dark:hover:tw-bg-sq-dark-background' +
+    ' checked:tw-text-white checked:tw-border-sq-text-color checked:hover:tw-border-sq-color-dark' +
+    ' checked:active:tw-border-sq-color-dark checked:focus:tw-border-sq-color-dark disabled:tw-border-sq-disabled-gray' +
+    ' dark:disabled:tw-border-sq-fairly-dark-gray dark:checked:focus:tw-bg-sq-dark-background';
+const checkboxClasses = `tw-form-checkbox tw-rounded ${baseClasses}`;
+const radioClasses = `tw-form-radio ${baseClasses}`;
+/**
+ * Checkbox and Radio Box Component.
+ */
+export const Checkbox = (props) => {
+    const { type = 'checkbox', value, disabled = false, label, onChange, onClick, onKeyDown, checked, defaultChecked, id, name, extraClassNames, extraLabelClassNames, testId, } = props;
+    const assignedId = id ?? 'checkbox_' + Math.random();
+    return (React.createElement("span", { className: `${alignment} ${extraClassNames}` },
+        React.createElement("input", { value: value, type: type, "data-testid": testId, name: name, id: assignedId, checked: checked, defaultChecked: defaultChecked, className: `${type === 'checkbox' ? checkboxClasses : radioClasses} ${disabled ? 'tw-cursor-not-allowed' : 'tw-cursor-pointer'}`, disabled: disabled, onClick: onClick, onChange: onChange, onKeyDown: onKeyDown }),
+        React.createElement("label", { htmlFor: assignedId, className: `${labelClasses} ${extraLabelClassNames} ${disabled
+                ? 'tw-cursor-not-allowed dark:tw-text-sq-fairly-dark-gray tw-text-sq-fairly-dark-gray'
+                : 'tw-cursor-pointer tw-text-sq-text-color dark:tw-text-sq-dark-text'}` }, label)));
+};
 //# sourceMappingURL=Checkbox.js.map

package/dist/Checkbox/Checkbox.stories.js

@@ -1,32 +1,32 @@
-import React from 'react';
-import { Checkbox } from './Checkbox';
-export default {
-    title: 'Checkbox',
-};
-export const AllCheckboxes = () => {
-    const getDisplay = (type) => (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "tw-p-4" },
-            React.createElement(Checkbox, { value: "a", type: type, checked: true, label: 'with Label' })),
-        React.createElement("div", { className: "tw-p-4" },
-            React.createElement(Checkbox, { value: "d", type: type, checked: false, disabled: true, label: React.createElement("div", null,
-                    "Disabled",
-                    React.createElement("br", null),
-                    "multi-Line") })),
-        React.createElement("div", { className: "tw-p-4" },
-            React.createElement(Checkbox, { value: "d", type: type, checked: true, disabled: true, label: "Disabled" })),
-        React.createElement("div", { className: "tw-p-4" },
-            React.createElement(Checkbox, { value: "b", type: type, checked: true })),
-        React.createElement("div", { className: "tw-p-4" },
-            React.createElement(Checkbox, { value: "c", type: type, checked: false }))));
-    const renderAllVariations = (type) => (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "tw-p-4 light" }, getDisplay(type)),
-        React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" }, getDisplay(type))));
-    return (React.createElement("div", { className: "tw-grid tw-grid-cols-2 tw-gap-4" },
-        React.createElement("div", null,
-            React.createElement("b", null, "Checkbox"),
-            renderAllVariations('checkbox')),
-        React.createElement("div", null,
-            React.createElement("b", null, "Radios"),
-            renderAllVariations('radio'))));
-};
+import React from 'react';
+import { Checkbox } from './Checkbox';
+export default {
+    title: 'Checkbox',
+};
+export const AllCheckboxes = () => {
+    const getDisplay = (type) => (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "tw-p-4" },
+            React.createElement(Checkbox, { value: "a", type: type, checked: true, label: 'with Label' })),
+        React.createElement("div", { className: "tw-p-4" },
+            React.createElement(Checkbox, { value: "d", type: type, checked: false, disabled: true, label: React.createElement("div", null,
+                    "Disabled",
+                    React.createElement("br", null),
+                    "multi-Line") })),
+        React.createElement("div", { className: "tw-p-4" },
+            React.createElement(Checkbox, { value: "d", type: type, checked: true, disabled: true, label: "Disabled" })),
+        React.createElement("div", { className: "tw-p-4" },
+            React.createElement(Checkbox, { value: "b", type: type, checked: true })),
+        React.createElement("div", { className: "tw-p-4" },
+            React.createElement(Checkbox, { value: "c", type: type, checked: false }))));
+    const renderAllVariations = (type) => (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "tw-p-4 light" }, getDisplay(type)),
+        React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" }, getDisplay(type))));
+    return (React.createElement("div", { className: "tw-grid tw-grid-cols-2 tw-gap-4" },
+        React.createElement("div", null,
+            React.createElement("b", null, "Checkbox"),
+            renderAllVariations('checkbox')),
+        React.createElement("div", null,
+            React.createElement("b", null, "Radios"),
+            renderAllVariations('radio'))));
+};
 //# sourceMappingURL=Checkbox.stories.js.map

package/dist/Checkbox/Checkbox.test.js

@@ -1,94 +1,94 @@
-import React from 'react';
-import '@testing-library/jest-dom';
-import { render, screen } from '@testing-library/react';
-import { Checkbox } from './Checkbox';
-import userEvent from '@testing-library/user-event';
-describe('Checkbox', () => {
-    class Context {
-        testId = 'checkboxTestId';
-        props = {
-            onChange: jest.fn(),
-            checked: false,
-            testId: this.testId,
-        };
-    }
-    let tc;
-    beforeEach(() => {
-        tc = new Context();
-    });
-    const renderCheckbox = (props) => render(React.createElement(Checkbox, { ...props }));
-    it('renders checkbox', () => {
-        renderCheckbox(tc.props);
-        expect(screen.getByTestId(tc.testId)).toBeInTheDocument();
-    });
-    it('renders radio', () => {
-        renderCheckbox({ ...tc.props, type: 'radio' });
-        expect(screen.getByTestId(tc.testId)).toHaveProperty('type', 'radio');
-    });
-    it('renders label', () => {
-        const label = 'look at this checkbox!';
-        renderCheckbox({ ...tc.props, label });
-        expect(screen.getByText(label)).toBeInTheDocument();
-    });
-    it('respects checked', () => {
-        renderCheckbox({ ...tc.props, checked: true });
-        expect(screen.getByTestId(tc.testId)).toBeChecked();
-    });
-    it('calls onChange handler', async () => {
-        const onChange = jest.fn();
-        renderCheckbox({ ...tc.props, onChange });
-        await userEvent.click(screen.getByTestId(tc.testId));
-        expect(onChange).toHaveBeenCalled();
-    });
-    it('calls onKeyDown handler', async () => {
-        const onKeyDown = jest.fn();
-        renderCheckbox({ ...tc.props, onKeyDown });
-        await userEvent.type(screen.getByTestId(tc.testId), 'a');
-        expect(onKeyDown).toHaveBeenCalled();
-    });
-    it('calls onClickHandler handler', async () => {
-        const onClick = jest.fn();
-        renderCheckbox({ ...tc.props, onClick });
-        await userEvent.click(screen.getByTestId(tc.testId));
-        expect(onClick).toHaveBeenCalled();
-    });
-    it('respects disabled', () => {
-        renderCheckbox({ ...tc.props, disabled: true });
-        expect(screen.getByTestId(tc.testId)).not.toBeEnabled();
-    });
-    it('renders label clickable', async () => {
-        const label = 'amazing checkbox';
-        const onClick = jest.fn();
-        renderCheckbox({ ...tc.props, label, onClick });
-        expect(screen.getByTestId(tc.testId)).not.toBeChecked();
-        await userEvent.click(screen.getByText(label));
-        expect(onClick).toHaveBeenCalled();
-    });
-    it('respects id', () => {
-        const id = 'checkboxId';
-        renderCheckbox({ ...tc.props, id });
-        expect(screen.getByTestId(tc.testId)).toHaveProperty('id', id);
-    });
-    it('respects name', () => {
-        const name = 'checkboxName';
-        renderCheckbox({ ...tc.props, name });
-        expect(screen.getByTestId(tc.testId)).toHaveProperty('name', name);
-    });
-    it('respects name', () => {
-        const value = 'priceless';
-        renderCheckbox({ ...tc.props, value });
-        expect(screen.getByTestId(tc.testId)).toHaveProperty('value', value);
-    });
-    it('applies extraClassNames', () => {
-        const extraClassNames = 'extra styling so fancy';
-        renderCheckbox({ ...tc.props, extraClassNames });
-        expect(screen.getByTestId(tc.testId).parentNode).toHaveClass(extraClassNames);
-    });
-    it('applies extraLabelClassNames', () => {
-        const extraLabelClassNames = 'special label';
-        const label = 'amazing checkbox';
-        renderCheckbox({ ...tc.props, extraLabelClassNames, label });
-        expect(screen.getByText(label)).toHaveClass(extraLabelClassNames);
-    });
-});
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { Checkbox } from './Checkbox';
+import userEvent from '@testing-library/user-event';
+describe('Checkbox', () => {
+    class Context {
+        testId = 'checkboxTestId';
+        props = {
+            onChange: jest.fn(),
+            checked: false,
+            testId: this.testId,
+        };
+    }
+    let tc;
+    beforeEach(() => {
+        tc = new Context();
+    });
+    const renderCheckbox = (props) => render(React.createElement(Checkbox, { ...props }));
+    it('renders checkbox', () => {
+        renderCheckbox(tc.props);
+        expect(screen.getByTestId(tc.testId)).toBeInTheDocument();
+    });
+    it('renders radio', () => {
+        renderCheckbox({ ...tc.props, type: 'radio' });
+        expect(screen.getByTestId(tc.testId)).toHaveProperty('type', 'radio');
+    });
+    it('renders label', () => {
+        const label = 'look at this checkbox!';
+        renderCheckbox({ ...tc.props, label });
+        expect(screen.getByText(label)).toBeInTheDocument();
+    });
+    it('respects checked', () => {
+        renderCheckbox({ ...tc.props, checked: true });
+        expect(screen.getByTestId(tc.testId)).toBeChecked();
+    });
+    it('calls onChange handler', async () => {
+        const onChange = jest.fn();
+        renderCheckbox({ ...tc.props, onChange });
+        await userEvent.click(screen.getByTestId(tc.testId));
+        expect(onChange).toHaveBeenCalled();
+    });
+    it('calls onKeyDown handler', async () => {
+        const onKeyDown = jest.fn();
+        renderCheckbox({ ...tc.props, onKeyDown });
+        await userEvent.type(screen.getByTestId(tc.testId), 'a');
+        expect(onKeyDown).toHaveBeenCalled();
+    });
+    it('calls onClickHandler handler', async () => {
+        const onClick = jest.fn();
+        renderCheckbox({ ...tc.props, onClick });
+        await userEvent.click(screen.getByTestId(tc.testId));
+        expect(onClick).toHaveBeenCalled();
+    });
+    it('respects disabled', () => {
+        renderCheckbox({ ...tc.props, disabled: true });
+        expect(screen.getByTestId(tc.testId)).not.toBeEnabled();
+    });
+    it('renders label clickable', async () => {
+        const label = 'amazing checkbox';
+        const onClick = jest.fn();
+        renderCheckbox({ ...tc.props, label, onClick });
+        expect(screen.getByTestId(tc.testId)).not.toBeChecked();
+        await userEvent.click(screen.getByText(label));
+        expect(onClick).toHaveBeenCalled();
+    });
+    it('respects id', () => {
+        const id = 'checkboxId';
+        renderCheckbox({ ...tc.props, id });
+        expect(screen.getByTestId(tc.testId)).toHaveProperty('id', id);
+    });
+    it('respects name', () => {
+        const name = 'checkboxName';
+        renderCheckbox({ ...tc.props, name });
+        expect(screen.getByTestId(tc.testId)).toHaveProperty('name', name);
+    });
+    it('respects name', () => {
+        const value = 'priceless';
+        renderCheckbox({ ...tc.props, value });
+        expect(screen.getByTestId(tc.testId)).toHaveProperty('value', value);
+    });
+    it('applies extraClassNames', () => {
+        const extraClassNames = 'extra styling so fancy';
+        renderCheckbox({ ...tc.props, extraClassNames });
+        expect(screen.getByTestId(tc.testId).parentNode).toHaveClass(extraClassNames);
+    });
+    it('applies extraLabelClassNames', () => {
+        const extraLabelClassNames = 'special label';
+        const label = 'amazing checkbox';
+        renderCheckbox({ ...tc.props, extraLabelClassNames, label });
+        expect(screen.getByText(label)).toHaveClass(extraLabelClassNames);
+    });
+});
 //# sourceMappingURL=Checkbox.test.js.map

package/dist/Checkbox/Checkbox.types.js

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

package/dist/Checkbox/index.js

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

package/dist/Icon/Icon.js

@@ -1,63 +1,63 @@
-import React from 'react';
-import '../styles.css';
-import { DEFAULT_TOOL_TIP_DELAY } from '../Tooltip/Tooltip.types';
-const colorClassesThemeLight = {
-    'theme': 'tw-text-sq-color-dark',
-    'white': 'tw-text-white',
-    'dark-gray': 'tw-text-sq-fairly-dark-gray',
-    'warning': 'tw-text-sq-warning-color',
-    'darkish-gray': 'tw-text-sq-darkish-gray',
-    'gray': 'tw-text-sq-disabled-gray',
-    'color': '',
-    'info': 'tw-text-sq-link',
-    'text': 'tw-text-sq-text-color',
-    'inherit': '',
-    'danger': 'tw-text-sq-danger-color',
-    'theme-light': 'tw-text-sq-color-light',
-    'success': 'tw-text-sq-success-color',
-};
-const colorClassesThemeDark = {
-    'theme': 'dark:tw-text-sq-color-dark-dark',
-    'white': '',
-    'dark-gray': 'tw-text-sq-fairly-dark-gray',
-    'warning': '',
-    'darkish-gray': 'tw-text-sq-darkish-gray',
-    'gray': 'dark:tw-text-sq-dark-disabled-gray',
-    'color': '',
-    'info': 'dark:tw-text-sq-link-dark',
-    'text': 'dark:tw-text-sq-dark-text',
-    'inherit': '',
-    'danger': 'tw-text-sq-danger-color',
-    'theme-light': 'tw-text-sq-color-light',
-    'success': 'tw-text-sq-success-color',
-};
-/**
- * Icon:
- *  - access to Seeq custom icons by providing the desired icon
- *  - leverage "type" to style your icon
- */
-const Icon = ({ onClick, icon, iconPrefix = undefined, type = 'theme', extraClassNames, id, large, small, color, testId, customId, tooltip, tooltipPlacement, number, isHtmlTooltip = false, tooltipTestId, tooltipDelay = DEFAULT_TOOL_TIP_DELAY, }) => {
-    if ((type === 'color' && (color === undefined || color === '')) || (color && type !== 'color')) {
-        const errorMessage = color === undefined || color === ''
-            ? 'Icon with type="color" must have prop color specified.'
-            : 'Icon with prop color must have type="color".';
-        return React.createElement("div", { className: "tw-text-sq-danger-color" }, errorMessage);
-    }
-    const fontAwesomePrefix = iconPrefix ? iconPrefix : 'fa-sharp fa-regular';
-    const iconPrefixString = icon.startsWith('fc') ? 'fc' : fontAwesomePrefix;
-    const style = type === 'color' && color ? { color } : {};
-    const appliedClassNames = `${iconPrefixString} ${icon} ${small ? 'fa-sm' : ''} ${large ? 'fa-lg' : ''} 
-  ${colorClassesThemeLight[type]} ${colorClassesThemeDark[type]} ${onClick ? 'cursor-pointer' : ''} ${extraClassNames}`;
-    const tooltipData = tooltip
-        ? {
-            'data-qtip-text': tooltip,
-            'data-qtip-placement': tooltipPlacement,
-            'data-qtip-is-html': isHtmlTooltip,
-            'data-qtip-testid': tooltipTestId,
-            'data-qtip-delay': tooltipDelay,
-        }
-        : undefined;
-    return (React.createElement("i", { className: appliedClassNames, style: style, onClick: onClick, "data-testid": testId, "data-customid": customId, id: id, "data-number": number, ...tooltipData }));
-};
-export default Icon;
+import React from 'react';
+import '../styles.css';
+import { DEFAULT_TOOL_TIP_DELAY } from '../Tooltip/Tooltip.types';
+const colorClassesThemeLight = {
+    'theme': 'tw-text-sq-color-dark',
+    'white': 'tw-text-white',
+    'dark-gray': 'tw-text-sq-fairly-dark-gray',
+    'warning': 'tw-text-sq-warning-color',
+    'darkish-gray': 'tw-text-sq-darkish-gray',
+    'gray': 'tw-text-sq-disabled-gray',
+    'color': '',
+    'info': 'tw-text-sq-link',
+    'text': 'tw-text-sq-text-color',
+    'inherit': '',
+    'danger': 'tw-text-sq-danger-color',
+    'theme-light': 'tw-text-sq-color-light',
+    'success': 'tw-text-sq-success-color',
+};
+const colorClassesThemeDark = {
+    'theme': 'dark:tw-text-sq-color-dark-dark',
+    'white': '',
+    'dark-gray': 'tw-text-sq-fairly-dark-gray',
+    'warning': '',
+    'darkish-gray': 'tw-text-sq-darkish-gray',
+    'gray': 'dark:tw-text-sq-dark-disabled-gray',
+    'color': '',
+    'info': 'dark:tw-text-sq-link-dark',
+    'text': 'dark:tw-text-sq-dark-text',
+    'inherit': '',
+    'danger': 'tw-text-sq-danger-color',
+    'theme-light': 'tw-text-sq-color-light',
+    'success': 'tw-text-sq-success-color',
+};
+/**
+ * Icon:
+ *  - access to Seeq custom icons by providing the desired icon
+ *  - leverage "type" to style your icon
+ */
+const Icon = ({ onClick, icon, iconPrefix = undefined, type = 'theme', extraClassNames, id, large, small, color, testId, customId, tooltip, tooltipPlacement, number, isHtmlTooltip = false, tooltipTestId, tooltipDelay = DEFAULT_TOOL_TIP_DELAY, }) => {
+    if ((type === 'color' && (color === undefined || color === '')) || (color && type !== 'color')) {
+        const errorMessage = color === undefined || color === ''
+            ? 'Icon with type="color" must have prop color specified.'
+            : 'Icon with prop color must have type="color".';
+        return React.createElement("div", { className: "tw-text-sq-danger-color" }, errorMessage);
+    }
+    const fontAwesomePrefix = iconPrefix ? iconPrefix : 'fa-sharp fa-regular';
+    const iconPrefixString = icon.startsWith('fc') ? 'fc' : fontAwesomePrefix;
+    const style = type === 'color' && color ? { color } : {};
+    const appliedClassNames = `${iconPrefixString} ${icon} ${small ? 'fa-sm' : ''} ${large ? 'fa-lg' : ''} 
+  ${colorClassesThemeLight[type]} ${colorClassesThemeDark[type]} ${onClick ? 'cursor-pointer' : ''} ${extraClassNames}`;
+    const tooltipData = tooltip
+        ? {
+            'data-qtip-text': tooltip,
+            'data-qtip-placement': tooltipPlacement,
+            'data-qtip-is-html': isHtmlTooltip,
+            'data-qtip-testid': tooltipTestId,
+            'data-qtip-delay': tooltipDelay,
+        }
+        : undefined;
+    return (React.createElement("i", { className: appliedClassNames, style: style, onClick: onClick, "data-testid": testId, "data-customid": customId, id: id, "data-number": number, ...tooltipData }));
+};
+export default Icon;
 //# sourceMappingURL=Icon.js.map