@seeqdev/qomponents 0.0.108 → 0.0.109

package/dist/Select/Select.js

@@ -1,174 +1,174 @@
-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, onMenuOpen, onMenuClose, components, onMenuInputFocus, onInputChange, inputValue, }) => {
-    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,
-        onMenuOpen,
-        onMenuClose,
-        components,
-        onMenuInputFocus,
-        onInputChange,
-        inputValue,
-        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, onMenuOpen, onMenuClose, components, onMenuInputFocus, onInputChange, inputValue, }) => {
+    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,
+        onMenuOpen,
+        onMenuClose,
+        components,
+        onMenuInputFocus,
+        onInputChange,
+        inputValue,
+        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

package/dist/Select/Select.stories.js

@@ -1,80 +1,80 @@
-import React from 'react';
-import Select from './Select';
-import TextField from '../TextField';
-export default {
-    title: 'Select',
-};
-export const AllSelectVariants = () => {
-    const options = [
-        { value: 'a', label: 'Chocolate' },
-        { value: 'b', label: 'Strawberry' },
-        { value: 'c', label: 'Vanilla' },
-        { value: 'd', label: 'Rocky Road' },
-        { value: 'e', label: 'Crazy Cow' },
-        { value: 'f', label: 'Almond Joy' },
-        { value: 'g', label: 'All of the above' },
-    ];
-    const colorOptions = [
-        { value: 'h', label: 'pink' },
-        { value: 'i', label: 'purple' },
-        { value: 'j', label: 'green' },
-        { value: 'k', label: 'red' },
-    ];
-    const groupedOptions = [
-        {
-            label: 'Ice Cream Flavors',
-            options: options,
-        },
-        {
-            label: 'Colors',
-            options: colorOptions,
-        },
-    ];
-    const customColorOption = (dropdownProps) => {
-        return (React.createElement("div", { style: { color: dropdownProps.data.label } }, dropdownProps.data.label));
-    };
-    const allSelects = () => (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "tw-p-5" },
-            React.createElement(Select, { id: "hello", onChange: () => { }, options: options, placeholder: "single value" })),
-        React.createElement("div", { className: "tw-p-5" },
-            React.createElement(Select, { id: "hello", onChange: () => { }, options: options, placeholder: "single value - small", small: true })),
-        React.createElement("div", { className: "tw-p-5" },
-            React.createElement(Select, { id: "disabled", onChange: () => { }, options: options, placeholder: "disabled", isDisabled: true })),
-        React.createElement("div", { className: "tw-p-5" },
-            React.createElement(Select, { id: "error", onChange: () => { }, options: options, placeholder: "error", showError: true })),
-        React.createElement("div", { className: "tw-p-5" },
-            React.createElement(Select, { onChange: () => { }, options: options, placeholder: "stays open", closeMenuOnSelect: false, creatable: true })),
-        React.createElement("div", { className: "tw-p-5" },
-            React.createElement(Select, { onChange: () => { }, options: groupedOptions, placeholder: "grouped" })),
-        React.createElement("div", { className: "tw-p-5" },
-            React.createElement(Select, { onChange: () => { }, options: options, creatable: true, placeholder: "create option" })),
-        React.createElement("div", { className: "tw-p-5" },
-            React.createElement(Select, { onChange: () => { }, options: options, isClearable: true, placeholder: "clearable" })),
-        React.createElement("div", { className: "tw-p-5" },
-            React.createElement(Select, { onChange: () => { }, options: options, placeholder: "multi-select", isMulti: true, isSearchable: false })),
-        React.createElement("div", { className: "tw-p-5" },
-            React.createElement(Select, { onChange: () => { }, placeholder: "type to search", options: options, isSearchable: true })),
-        React.createElement("div", { className: "tw-p-5 tw-flex tw-flex-row" },
-            React.createElement(Select, { onChange: () => { }, placeholder: "type to search", options: options, inputGroup: "left", extraClassNames: "tw-w-[200px]" }),
-            React.createElement(TextField, { onChange: () => { }, placeholder: "text goes here", inputGroup: "right" })),
-        React.createElement("div", { className: "tw-p-5" },
-            React.createElement(Select, { onChange: () => { }, options: colorOptions, placeholder: "custom option", components: { Option: (dropdownProps) => customColorOption(dropdownProps) } }))));
-    const renderAllVariations = () => (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "tw-grid tw-gap-4" },
-            allSelects(),
-            React.createElement("div", { className: "tw-dark tw-bg-sq-dark-background" }, allSelects()))));
-    return (React.createElement("div", { className: "tw-grid tw-grid-cols-4 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()),
-        React.createElement("div", { className: "color_vantage" },
-            React.createElement("b", null, "Vantage Colors"),
-            renderAllVariations())));
-};
+import React from 'react';
+import Select from './Select';
+import TextField from '../TextField';
+export default {
+    title: 'Select',
+};
+export const AllSelectVariants = () => {
+    const options = [
+        { value: 'a', label: 'Chocolate' },
+        { value: 'b', label: 'Strawberry' },
+        { value: 'c', label: 'Vanilla' },
+        { value: 'd', label: 'Rocky Road' },
+        { value: 'e', label: 'Crazy Cow' },
+        { value: 'f', label: 'Almond Joy' },
+        { value: 'g', label: 'All of the above' },
+    ];
+    const colorOptions = [
+        { value: 'h', label: 'pink' },
+        { value: 'i', label: 'purple' },
+        { value: 'j', label: 'green' },
+        { value: 'k', label: 'red' },
+    ];
+    const groupedOptions = [
+        {
+            label: 'Ice Cream Flavors',
+            options: options,
+        },
+        {
+            label: 'Colors',
+            options: colorOptions,
+        },
+    ];
+    const customColorOption = (dropdownProps) => {
+        return (React.createElement("div", { style: { color: dropdownProps.data.label } }, dropdownProps.data.label));
+    };
+    const allSelects = () => (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "tw-p-5" },
+            React.createElement(Select, { id: "hello", onChange: () => { }, options: options, placeholder: "single value" })),
+        React.createElement("div", { className: "tw-p-5" },
+            React.createElement(Select, { id: "hello", onChange: () => { }, options: options, placeholder: "single value - small", small: true })),
+        React.createElement("div", { className: "tw-p-5" },
+            React.createElement(Select, { id: "disabled", onChange: () => { }, options: options, placeholder: "disabled", isDisabled: true })),
+        React.createElement("div", { className: "tw-p-5" },
+            React.createElement(Select, { id: "error", onChange: () => { }, options: options, placeholder: "error", showError: true })),
+        React.createElement("div", { className: "tw-p-5" },
+            React.createElement(Select, { onChange: () => { }, options: options, placeholder: "stays open", closeMenuOnSelect: false, creatable: true })),
+        React.createElement("div", { className: "tw-p-5" },
+            React.createElement(Select, { onChange: () => { }, options: groupedOptions, placeholder: "grouped" })),
+        React.createElement("div", { className: "tw-p-5" },
+            React.createElement(Select, { onChange: () => { }, options: options, creatable: true, placeholder: "create option" })),
+        React.createElement("div", { className: "tw-p-5" },
+            React.createElement(Select, { onChange: () => { }, options: options, isClearable: true, placeholder: "clearable" })),
+        React.createElement("div", { className: "tw-p-5" },
+            React.createElement(Select, { onChange: () => { }, options: options, placeholder: "multi-select", isMulti: true, isSearchable: false })),
+        React.createElement("div", { className: "tw-p-5" },
+            React.createElement(Select, { onChange: () => { }, placeholder: "type to search", options: options, isSearchable: true })),
+        React.createElement("div", { className: "tw-p-5 tw-flex tw-flex-row" },
+            React.createElement(Select, { onChange: () => { }, placeholder: "type to search", options: options, inputGroup: "left", extraClassNames: "tw-w-[200px]" }),
+            React.createElement(TextField, { onChange: () => { }, placeholder: "text goes here", inputGroup: "right" })),
+        React.createElement("div", { className: "tw-p-5" },
+            React.createElement(Select, { onChange: () => { }, options: colorOptions, placeholder: "custom option", components: { Option: (dropdownProps) => customColorOption(dropdownProps) } }))));
+    const renderAllVariations = () => (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "tw-grid tw-gap-4" },
+            allSelects(),
+            React.createElement("div", { className: "tw-dark tw-bg-sq-dark-background" }, allSelects()))));
+    return (React.createElement("div", { className: "tw-grid tw-grid-cols-4 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()),
+        React.createElement("div", { className: "color_vantage" },
+            React.createElement("b", null, "Vantage Colors"),
+            renderAllVariations())));
+};
 //# sourceMappingURL=Select.stories.js.map