@seeqdev/qomponents 0.0.41 → 0.0.43

package/dist/Icon/Icon.stories.js

@@ -1,40 +1,40 @@
-import React from 'react';
-import Icon from './Icon';
-import { iconTypes } from './Icon.types';
-export default {
-    title: 'Icons',
-};
-export const AllIcons = () => {
-    const renderAllVariations = () => {
-        return (React.createElement(React.Fragment, null,
-            React.createElement("br", null),
-            React.createElement("br", null),
-            iconTypes.map((iconType) => {
-                return (React.createElement("div", { key: `${iconType}` },
-                    React.createElement("b", null,
-                        "type=",
-                        iconType),
-                    React.createElement("br", null),
-                    React.createElement("div", null,
-                        React.createElement(Icon, { icon: "fc-announcements", small: true, extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'purple' : undefined }),
-                        React.createElement(Icon, { icon: "fc-announcements", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? '#928378' : undefined }),
-                        React.createElement(Icon, { icon: "fc-announcements", large: true, extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined })),
-                    React.createElement("div", { className: "tw-dark tw-bg-sq-dark-background" },
-                        React.createElement(Icon, { icon: "fc-announcements", small: true, extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'purple' : undefined }),
-                        React.createElement(Icon, { icon: "fc-announcements", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? '#928378' : undefined }),
-                        React.createElement(Icon, { icon: "fc-announcements", large: true, extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined })),
-                    React.createElement("br", null)));
-            })));
-    };
-    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())));
-};
+import React from 'react';
+import Icon from './Icon';
+import { iconTypes } from './Icon.types';
+export default {
+    title: 'Icons',
+};
+export const AllIcons = () => {
+    const renderAllVariations = () => {
+        return (React.createElement(React.Fragment, null,
+            React.createElement("br", null),
+            React.createElement("br", null),
+            iconTypes.map((iconType) => {
+                return (React.createElement("div", { key: `${iconType}` },
+                    React.createElement("b", null,
+                        "type=",
+                        iconType),
+                    React.createElement("br", null),
+                    React.createElement("div", null,
+                        React.createElement(Icon, { icon: "fc-announcements", small: true, extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'purple' : undefined }),
+                        React.createElement(Icon, { icon: "fc-announcements", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? '#928378' : undefined }),
+                        React.createElement(Icon, { icon: "fc-announcements", large: true, extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined })),
+                    React.createElement("div", { className: "tw-dark tw-bg-sq-dark-background" },
+                        React.createElement(Icon, { icon: "fc-announcements", small: true, extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'purple' : undefined }),
+                        React.createElement(Icon, { icon: "fc-announcements", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? '#928378' : undefined }),
+                        React.createElement(Icon, { icon: "fc-announcements", large: true, extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined })),
+                    React.createElement("br", null)));
+            })));
+    };
+    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())));
+};
 //# sourceMappingURL=Icon.stories.js.map

package/dist/Icon/Icon.test.js

@@ -1,55 +1,55 @@
-import React from 'react';
-import '@testing-library/jest-dom';
-import { render, screen } from '@testing-library/react';
-import Icon from './Icon';
-describe('Icon', () => {
-    class Context {
-        testId = 'iconTestId';
-        icon = 'testIcon';
-        props = {
-            icon: this.icon,
-            onClick: jest.fn(),
-            testId: this.testId,
-        };
-    }
-    let tc;
-    beforeEach(() => {
-        tc = new Context();
-    });
-    const renderIcon = (props) => render(React.createElement(Icon, { ...props }));
-    it('renders icon', () => {
-        renderIcon(tc.props);
-        expect(screen.getByTestId(tc.testId)).toHaveClass(tc.icon);
-    });
-    it('renders large icon', () => {
-        renderIcon({ ...tc.props, large: true });
-        expect(screen.getByTestId(tc.testId)).toHaveClass('fa-lg');
-    });
-    it('renders small icon', () => {
-        renderIcon({ ...tc.props, small: true });
-        expect(screen.getByTestId(tc.testId)).toHaveClass('fa-sm');
-    });
-    describe('icon types', () => {
-        it('renders the theme type by default', () => {
-            renderIcon(tc.props);
-            expect(screen.getByTestId(tc.testId)).toHaveClass('tw-text-sq-color-dark');
-        });
-        it('renders the white icon', () => {
-            renderIcon({ ...tc.props, type: 'white' });
-            expect(screen.getByTestId(tc.testId)).toHaveClass('tw-text-white');
-        });
-        it('renders the text-type icon', () => {
-            renderIcon({ ...tc.props, type: 'text' });
-            expect(screen.getByTestId(tc.testId)).toHaveClass('tw-text-sq-text-color');
-        });
-        it('renders the color-type icon', () => {
-            renderIcon({ ...tc.props, type: 'color', color: '#AABBFF' });
-            expect(screen.getByTestId(tc.testId)).toHaveStyle('color: #AABBFF');
-        });
-        it('renders a warning if type=color and no color is provided', () => {
-            renderIcon({ ...tc.props, type: 'color' });
-            expect(screen.getByText('Icon with type="color" must have prop color specified.')).toBeInTheDocument();
-        });
-    });
-});
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import Icon from './Icon';
+describe('Icon', () => {
+    class Context {
+        testId = 'iconTestId';
+        icon = 'testIcon';
+        props = {
+            icon: this.icon,
+            onClick: jest.fn(),
+            testId: this.testId,
+        };
+    }
+    let tc;
+    beforeEach(() => {
+        tc = new Context();
+    });
+    const renderIcon = (props) => render(React.createElement(Icon, { ...props }));
+    it('renders icon', () => {
+        renderIcon(tc.props);
+        expect(screen.getByTestId(tc.testId)).toHaveClass(tc.icon);
+    });
+    it('renders large icon', () => {
+        renderIcon({ ...tc.props, large: true });
+        expect(screen.getByTestId(tc.testId)).toHaveClass('fa-lg');
+    });
+    it('renders small icon', () => {
+        renderIcon({ ...tc.props, small: true });
+        expect(screen.getByTestId(tc.testId)).toHaveClass('fa-sm');
+    });
+    describe('icon types', () => {
+        it('renders the theme type by default', () => {
+            renderIcon(tc.props);
+            expect(screen.getByTestId(tc.testId)).toHaveClass('tw-text-sq-color-dark');
+        });
+        it('renders the white icon', () => {
+            renderIcon({ ...tc.props, type: 'white' });
+            expect(screen.getByTestId(tc.testId)).toHaveClass('tw-text-white');
+        });
+        it('renders the text-type icon', () => {
+            renderIcon({ ...tc.props, type: 'text' });
+            expect(screen.getByTestId(tc.testId)).toHaveClass('tw-text-sq-text-color');
+        });
+        it('renders the color-type icon', () => {
+            renderIcon({ ...tc.props, type: 'color', color: '#AABBFF' });
+            expect(screen.getByTestId(tc.testId)).toHaveStyle('color: #AABBFF');
+        });
+        it('renders a warning if type=color and no color is provided', () => {
+            renderIcon({ ...tc.props, type: 'color' });
+            expect(screen.getByText('Icon with type="color" must have prop color specified.')).toBeInTheDocument();
+        });
+    });
+});
 //# sourceMappingURL=Icon.test.js.map

package/dist/Icon/Icon.types.js

@@ -1,16 +1,16 @@
-export const iconTypes = [
-    'theme',
-    'white',
-    'dark-gray',
-    'darkish-gray',
-    'gray',
-    'color',
-    'info',
-    'text',
-    'warning',
-    'inherit',
-    'danger',
-    'theme-light',
-    'success',
-];
+export const iconTypes = [
+    'theme',
+    'white',
+    'dark-gray',
+    'darkish-gray',
+    'gray',
+    'color',
+    'info',
+    'text',
+    'warning',
+    'inherit',
+    'danger',
+    'theme-light',
+    'success',
+];
 //# sourceMappingURL=Icon.types.js.map

package/dist/Icon/index.js

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

package/dist/Select/Select.js

@@ -1,168 +1,168 @@
-import React from 'react';
-import '../styles.css';
-import { createFilter, default as ReactSelect } from 'react-select';
-import CreatableSelect from 'react-select/creatable';
-const baseClasses = ['focus:tw-ring-0', 'disabled:tw-cursor-not-allowed'].join(' ');
-const containerStyles = ['tw-bg-white', 'dark:tw-bg-sq-dark-background'].join(' ');
-const errorClasses = 'tw-border-sq-danger-color';
-const borderColorClasses = ['tw-border-sq-disabled-gray', 'dark:tw-border-sq-dark-disabled-gray'].join(' ');
-const borderStyles = [
-    'tw-border-solid',
-    'tw-border',
-    'hover:tw-border-sq-color-dark',
-    'focus:tw-border-sq-color-dark',
-    'active:tw-border-sq-color-dark',
-    'dark:hover:tw-border-sq-color-dark-dark',
-    'dark:focus:tw-border-sq-color-dark-dark',
-    'dark:active:tw-border-sq-color-dark-dark',
-].join(' ');
-const textStyles = ['tw-text-sq-text-color', 'dark:tw-text-sq-dark-text', 'tw-text-sm'].join(' ');
-const textActiveStyles = [
-    'hover:tw-text-sq-color-dark',
-    'focus:tw-text-sq-color-dark',
-    'active:tw-text-sq-color-dark',
-    'dark:tw-text-sq-dark-disabled-gray',
-    'dark:hover:tw-text-sq-color-dark-dark',
-    'dark:focus:tw-text-sq-color-dark-dark',
-    'dark:active:tw-text-sq-color-dark-dark',
-].join(' ');
-const menuStyles = [
-    'tw-border-solid',
-    'tw-border',
-    'tw-rounded-b',
-    'tw-border-sq-disabled-gray',
-    'dark:tw-border-sq-dark-disabled-gray',
-    'tw-whitespace-nowrap',
-    'tw-min-w-fit',
-    '!tw-z-[9999]',
-].join(' ');
-const menuListStyles = [
-    'tw-rounded-b',
-    'tw-bg-white',
-    'dark:tw-bg-sq-dark-background',
-    'tw-min-w-fit',
-    '!tw-z-[9999]',
-    'specSelectMenu',
-].join(' ');
-const groupHeadingStyles = [
-    'tw-bg-sq-light-gray',
-    'dark:tw-bg-sq-dark-disabled-gray',
-    'tw-text-sq-darkish-gray',
-    'tw-py-1',
-    'tw-px-2.5',
-    'specSelectGroupHeading',
-].join(' ');
-const optionStyles = [
-    'hover:tw-bg-sq-gray-highlight',
-    'hover:tw-cursor-pointer',
-    'dark:hover:tw-bg-sq-gray-highlight-dark',
-    'tw-py-1',
-    'tw-px-2.5',
-    'specSelectOption',
-].join(' ');
-const disabledClasses = ['tw-bg-sq-field-disabled-gray', 'tw-cursor-not-allowed'].join(' ');
-const dropDownIndicatorStyles = `tw-text-sq-disabled-gray ${textActiveStyles} specOpenIt`;
-const placeholderStyles = ['tw-text-gray-400', 'dark:tw-text-sq-dark-text-lighter', 'specOpenSelect'].join(' ');
-const multiValueStyles = [
-    'tw-bg-sq-disabled-gray',
-    'dark:tw-bg-sq-multi-gray-dark',
-    'tw-text-sm',
-    'tw-py-0.5',
-    'tw-px-1',
-    'tw-m-0.5',
-    'tw-rounded-sm',
-    'specOpenSelect',
-].join(' ');
-/**
- * Select Component
- *  - based on react-select (https://react-select.com/)
- *
- *  For ease of testing most of the elements of this select can be identified by classNames prefixed with "spec".
- *
- */
-const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no matching options', isSearchable = true, creatable = false, isMulti = false, isClearable = false, closeMenuOnSelect = true, id, inputId, menuPortalTarget, getOptionLabel, getSelectedValueLabel, getOptionValue, onChange, menuIsOpen, menuPlacement = 'auto', extraClassNames, inputGroup, filterConfig, filterOption, small = false, isDisabled = false, showError = false, isLoading = false, formatGroupLabel, onRemove, defaultValue, }) => {
-    const getOptionOrSelectedLabel = (option, { context }) => {
-        const getSelectedOptionLabel = getSelectedValueLabel ? getSelectedValueLabel : getOptionLabel;
-        if (getOptionLabel || getSelectedValueLabel) {
-            if (context === 'value') {
-                return getSelectedOptionLabel ? getSelectedOptionLabel(option) : option.label;
-            }
-            else {
-                return getOptionLabel ? getOptionLabel(option) : option.label;
-            }
-        }
-        else {
-            return option.label;
-        }
-    };
-    const interceptOnChange = (newValue, actionMeta) => {
-        if (isMulti && onRemove && actionMeta.action === 'remove-value') {
-            onRemove({ id: actionMeta.removedValue });
-            return;
-        }
-        onChange(newValue);
-    };
-    const props = {
-        id,
-        value,
-        inputId,
-        placeholder,
-        closeMenuOnSelect,
-        blurInputOnSelect: closeMenuOnSelect,
-        isSearchable: creatable ? true : isSearchable,
-        isMulti,
-        isClearable,
-        isLoading,
-        defaultValue,
-        noOptionsMessage: () => noOptionsMessage,
-        menuPortalTarget,
-        menuIsOpen,
-        onChange: interceptOnChange,
-        unstyled: true,
-        menuPlacement,
-        formatOptionLabel: getOptionOrSelectedLabel,
-        formatGroupLabel,
-        getOptionValue,
-        options,
-        isDisabled,
-        hideSelectedOptions: isMulti,
-        filterOption: filterOption ? filterOption : filterConfig ? createFilter(filterConfig) : undefined,
-        classNames: {
-            control: ({ menuIsOpen }) => {
-                let border = menuIsOpen ? 'tw-rounded-t-sm' : 'tw-rounded-sm';
-                // if it's on the left side of the input group make sure the right side is straight and not curved
-                if (inputGroup === 'left') {
-                    border = menuIsOpen ? 'tw-rounded-tl-sm' : 'tw-rounded-l-sm';
-                }
-                else if (inputGroup === 'right') {
-                    border = menuIsOpen ? 'tw-rounded-tr-sm' : 'tw-rounded-r-sm';
-                }
-                const appliedClasses = `${borderStyles} ${border}  ${showError ? errorClasses : borderColorClasses} ${small ? 'reactSelectMinHeightSmall' : 'reactSelectMinHeight'} `;
-                return `${appliedClasses} ${baseClasses} specSelectControl ${isDisabled ? disabledClasses : ''} ${small ? 'tw-pl-2 tw-pr-1' : 'tw-pl-2.5 tw-pr-1.5'}`;
-            },
-            placeholder: () => placeholderStyles,
-            container: () => `${textStyles} ${containerStyles} ${extraClassNames}`,
-            input: () => textStyles + ' specSelectInput',
-            menuList: () => menuListStyles,
-            menu: () => menuStyles,
-            menuPortal: () => '!tw-z-[9000]',
-            dropdownIndicator: () => dropDownIndicatorStyles,
-            option: ({ isSelected, isDisabled }) => {
-                let classes = optionStyles;
-                if (isDisabled) {
-                    classes += ' specDisabledOption ';
-                }
-                return isSelected ? classes + ' tw-bg-sq-colored-hover dark:tw-bg-sq-colored-hover-dark' : classes;
-            },
-            singleValue: () => 'specOpenSelect',
-            multiValue: () => multiValueStyles,
-            multiValueRemove: () => 'hover:tw-text-sq-danger-color specSelectMultiValueRemove',
-            clearIndicator: () => 'tw-text-sq-disabled-gray hover:tw-text-sq-danger-color specClearSelect',
-            group: () => 'specSelectGroup',
-            groupHeading: () => groupHeadingStyles,
-        },
-    };
-    return creatable ? React.createElement(CreatableSelect, { ...props }) : React.createElement(ReactSelect, { ...props });
-};
-export default Select;
+import React from 'react';
+import '../styles.css';
+import { createFilter, default as ReactSelect } from 'react-select';
+import CreatableSelect from 'react-select/creatable';
+const baseClasses = ['focus:tw-ring-0', 'disabled:tw-cursor-not-allowed'].join(' ');
+const containerStyles = ['tw-bg-white', 'dark:tw-bg-sq-dark-background'].join(' ');
+const errorClasses = 'tw-border-sq-danger-color';
+const borderColorClasses = ['tw-border-sq-disabled-gray', 'dark:tw-border-sq-dark-disabled-gray'].join(' ');
+const borderStyles = [
+    'tw-border-solid',
+    'tw-border',
+    'hover:tw-border-sq-color-dark',
+    'focus:tw-border-sq-color-dark',
+    'active:tw-border-sq-color-dark',
+    'dark:hover:tw-border-sq-color-dark-dark',
+    'dark:focus:tw-border-sq-color-dark-dark',
+    'dark:active:tw-border-sq-color-dark-dark',
+].join(' ');
+const textStyles = ['tw-text-sq-text-color', 'dark:tw-text-sq-dark-text', 'tw-text-sm'].join(' ');
+const textActiveStyles = [
+    'hover:tw-text-sq-color-dark',
+    'focus:tw-text-sq-color-dark',
+    'active:tw-text-sq-color-dark',
+    'dark:tw-text-sq-dark-disabled-gray',
+    'dark:hover:tw-text-sq-color-dark-dark',
+    'dark:focus:tw-text-sq-color-dark-dark',
+    'dark:active:tw-text-sq-color-dark-dark',
+].join(' ');
+const menuStyles = [
+    'tw-border-solid',
+    'tw-border',
+    'tw-rounded-b',
+    'tw-border-sq-disabled-gray',
+    'dark:tw-border-sq-dark-disabled-gray',
+    'tw-whitespace-nowrap',
+    'tw-min-w-fit',
+    '!tw-z-[9999]',
+].join(' ');
+const menuListStyles = [
+    'tw-rounded-b',
+    'tw-bg-white',
+    'dark:tw-bg-sq-dark-background',
+    'tw-min-w-fit',
+    '!tw-z-[9999]',
+    'specSelectMenu',
+].join(' ');
+const groupHeadingStyles = [
+    'tw-bg-sq-light-gray',
+    'dark:tw-bg-sq-dark-disabled-gray',
+    'tw-text-sq-darkish-gray',
+    'tw-py-1',
+    'tw-px-2.5',
+    'specSelectGroupHeading',
+].join(' ');
+const optionStyles = [
+    'hover:tw-bg-sq-gray-highlight',
+    'hover:tw-cursor-pointer',
+    'dark:hover:tw-bg-sq-gray-highlight-dark',
+    'tw-py-1',
+    'tw-px-2.5',
+    'specSelectOption',
+].join(' ');
+const disabledClasses = ['tw-bg-sq-field-disabled-gray', 'tw-cursor-not-allowed'].join(' ');
+const dropDownIndicatorStyles = `tw-text-sq-disabled-gray ${textActiveStyles} specOpenIt`;
+const placeholderStyles = ['tw-text-gray-400', 'dark:tw-text-sq-dark-text-lighter', 'specOpenSelect'].join(' ');
+const multiValueStyles = [
+    'tw-bg-sq-disabled-gray',
+    'dark:tw-bg-sq-multi-gray-dark',
+    'tw-text-sm',
+    'tw-py-0.5',
+    'tw-px-1',
+    'tw-m-0.5',
+    'tw-rounded-sm',
+    'specOpenSelect',
+].join(' ');
+/**
+ * Select Component
+ *  - based on react-select (https://react-select.com/)
+ *
+ *  For ease of testing most of the elements of this select can be identified by classNames prefixed with "spec".
+ *
+ */
+const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no matching options', isSearchable = true, creatable = false, isMulti = false, isClearable = false, closeMenuOnSelect = true, id, inputId, menuPortalTarget, getOptionLabel, getSelectedValueLabel, getOptionValue, onChange, menuIsOpen, menuPlacement = 'auto', extraClassNames, inputGroup, filterConfig, filterOption, small = false, isDisabled = false, showError = false, isLoading = false, formatGroupLabel, onRemove, defaultValue, }) => {
+    const getOptionOrSelectedLabel = (option, { context }) => {
+        const getSelectedOptionLabel = getSelectedValueLabel ? getSelectedValueLabel : getOptionLabel;
+        if (getOptionLabel || getSelectedValueLabel) {
+            if (context === 'value') {
+                return getSelectedOptionLabel ? getSelectedOptionLabel(option) : option.label;
+            }
+            else {
+                return getOptionLabel ? getOptionLabel(option) : option.label;
+            }
+        }
+        else {
+            return option.label;
+        }
+    };
+    const interceptOnChange = (newValue, actionMeta) => {
+        if (isMulti && onRemove && actionMeta.action === 'remove-value') {
+            onRemove({ id: actionMeta.removedValue });
+            return;
+        }
+        onChange(newValue);
+    };
+    const props = {
+        id,
+        value,
+        inputId,
+        placeholder,
+        closeMenuOnSelect,
+        blurInputOnSelect: closeMenuOnSelect,
+        isSearchable: creatable ? true : isSearchable,
+        isMulti,
+        isClearable,
+        isLoading,
+        defaultValue,
+        noOptionsMessage: () => noOptionsMessage,
+        menuPortalTarget,
+        menuIsOpen,
+        onChange: interceptOnChange,
+        unstyled: true,
+        menuPlacement,
+        formatOptionLabel: getOptionOrSelectedLabel,
+        formatGroupLabel,
+        getOptionValue,
+        options,
+        isDisabled,
+        hideSelectedOptions: isMulti,
+        filterOption: filterOption ? filterOption : filterConfig ? createFilter(filterConfig) : undefined,
+        classNames: {
+            control: ({ menuIsOpen }) => {
+                let border = menuIsOpen ? 'tw-rounded-t-sm' : 'tw-rounded-sm';
+                // if it's on the left side of the input group make sure the right side is straight and not curved
+                if (inputGroup === 'left') {
+                    border = menuIsOpen ? 'tw-rounded-tl-sm' : 'tw-rounded-l-sm';
+                }
+                else if (inputGroup === 'right') {
+                    border = menuIsOpen ? 'tw-rounded-tr-sm' : 'tw-rounded-r-sm';
+                }
+                const appliedClasses = `${borderStyles} ${border}  ${showError ? errorClasses : borderColorClasses} ${small ? 'reactSelectMinHeightSmall' : 'reactSelectMinHeight'} `;
+                return `${appliedClasses} ${baseClasses} specSelectControl ${isDisabled ? disabledClasses : ''} ${small ? 'tw-pl-2 tw-pr-1' : 'tw-pl-2.5 tw-pr-1.5'}`;
+            },
+            placeholder: () => placeholderStyles,
+            container: () => `${textStyles} ${containerStyles} ${extraClassNames}`,
+            input: () => textStyles + ' specSelectInput',
+            menuList: () => menuListStyles,
+            menu: () => menuStyles,
+            menuPortal: () => '!tw-z-[9000]',
+            dropdownIndicator: () => dropDownIndicatorStyles,
+            option: ({ isSelected, isDisabled }) => {
+                let classes = optionStyles;
+                if (isDisabled) {
+                    classes += ' specDisabledOption ';
+                }
+                return isSelected ? classes + ' tw-bg-sq-colored-hover dark:tw-bg-sq-colored-hover-dark' : classes;
+            },
+            singleValue: () => 'specOpenSelect',
+            multiValue: () => multiValueStyles,
+            multiValueRemove: () => 'hover:tw-text-sq-danger-color specSelectMultiValueRemove',
+            clearIndicator: () => 'tw-text-sq-disabled-gray hover:tw-text-sq-danger-color specClearSelect',
+            group: () => 'specSelectGroup',
+            groupHeading: () => groupHeadingStyles,
+        },
+    };
+    return creatable ? React.createElement(CreatableSelect, { ...props }) : React.createElement(ReactSelect, { ...props });
+};
+export default Select;
 //# sourceMappingURL=Select.js.map