@mailstep/design-system 0.8.27 → 0.8.28

package/ui/Elements/Select/Select.js

@@ -1,445 +1,97 @@
-function _array_like_to_array(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
-    return arr2;
-}
-function _array_with_holes(arr) {
-    if (Array.isArray(arr)) return arr;
-}
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
-    try {
-        var info = gen[key](arg);
-        var value = info.value;
-    } catch (error) {
-        reject(error);
-        return;
-    }
-    if (info.done) {
-        resolve(value);
-    } else {
-        Promise.resolve(value).then(_next, _throw);
-    }
-}
-function _async_to_generator(fn) {
-    return function() {
-        var self = this, args = arguments;
-        return new Promise(function(resolve, reject) {
-            var gen = fn.apply(self, args);
-            function _next(value) {
-                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
-            }
-            function _throw(err) {
-                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
-            }
-            _next(undefined);
-        });
-    };
-}
-function _define_property(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-function _iterable_to_array_limit(arr, i) {
-    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-    if (_i == null) return;
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _s, _e;
-    try {
-        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
-            _arr.push(_s.value);
-            if (i && _arr.length === i) break;
-        }
-    } catch (err) {
-        _d = true;
-        _e = err;
-    } finally{
-        try {
-            if (!_n && _i["return"] != null) _i["return"]();
-        } finally{
-            if (_d) throw _e;
-        }
-    }
-    return _arr;
-}
-function _non_iterable_rest() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function _object_spread(target) {
-    for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[i] : {};
-        var ownKeys = Object.keys(source);
-        if (typeof Object.getOwnPropertySymbols === "function") {
-            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-            }));
-        }
-        ownKeys.forEach(function(key) {
-            _define_property(target, key, source[key]);
-        });
-    }
-    return target;
-}
-function ownKeys(object, enumerableOnly) {
-    var keys = Object.keys(object);
-    if (Object.getOwnPropertySymbols) {
-        var symbols = Object.getOwnPropertySymbols(object);
-        if (enumerableOnly) {
-            symbols = symbols.filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-            });
-        }
-        keys.push.apply(keys, symbols);
-    }
-    return keys;
-}
-function _object_spread_props(target, source) {
-    source = source != null ? source : {};
-    if (Object.getOwnPropertyDescriptors) {
-        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-        ownKeys(Object(source)).forEach(function(key) {
-            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-        });
-    }
-    return target;
-}
-function _object_without_properties(source, excluded) {
-    if (source == null) return {};
-    var target = {}, sourceKeys, key, i;
-    if (typeof Reflect !== "undefined" && Reflect.ownKeys) {
-        sourceKeys = Reflect.ownKeys(Object(source));
-        for(i = 0; i < sourceKeys.length; i++){
-            key = sourceKeys[i];
-            if (excluded.indexOf(key) >= 0) continue;
-            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-            target[key] = source[key];
-        }
-        return target;
-    }
-    target = _object_without_properties_loose(source, excluded);
-    if (Object.getOwnPropertySymbols) {
-        sourceKeys = Object.getOwnPropertySymbols(source);
-        for(i = 0; i < sourceKeys.length; i++){
-            key = sourceKeys[i];
-            if (excluded.indexOf(key) >= 0) continue;
-            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-            target[key] = source[key];
-        }
-    }
-    return target;
-}
-function _object_without_properties_loose(source, excluded) {
-    if (source == null) return {};
-    var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
-    for(i = 0; i < sourceKeys.length; i++){
-        key = sourceKeys[i];
-        if (excluded.indexOf(key) >= 0) continue;
-        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-        target[key] = source[key];
-    }
-    return target;
-}
-function _sliced_to_array(arr, i) {
-    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
-}
-function _unsupported_iterable_to_array(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _array_like_to_array(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
-}
-function _ts_generator(thisArg, body) {
-    var f, y, t, _ = {
-        label: 0,
-        sent: function() {
-            if (t[0] & 1) throw t[1];
-            return t[1];
-        },
-        trys: [],
-        ops: []
-    }, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype), d = Object.defineProperty;
-    return d(g, "next", {
-        value: verb(0)
-    }), d(g, "throw", {
-        value: verb(1)
-    }), d(g, "return", {
-        value: verb(2)
-    }), typeof Symbol === "function" && d(g, Symbol.iterator, {
-        value: function() {
-            return this;
-        }
-    }), g;
-    function verb(n) {
-        return function(v) {
-            return step([
-                n,
-                v
-            ]);
-        };
-    }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while(g && (g = 0, op[0] && (_ = 0)), _)try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [
-                op[0] & 2,
-                t.value
-            ];
-            switch(op[0]){
-                case 0:
-                case 1:
-                    t = op;
-                    break;
-                case 4:
-                    _.label++;
-                    return {
-                        value: op[1],
-                        done: false
-                    };
-                case 5:
-                    _.label++;
-                    y = op[1];
-                    op = [
-                        0
-                    ];
-                    continue;
-                case 7:
-                    op = _.ops.pop();
-                    _.trys.pop();
-                    continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
-                        _ = 0;
-                        continue;
-                    }
-                    if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
-                        _.label = op[1];
-                        break;
-                    }
-                    if (op[0] === 6 && _.label < t[1]) {
-                        _.label = t[1];
-                        t = op;
-                        break;
-                    }
-                    if (t && _.label < t[2]) {
-                        _.label = t[2];
-                        _.ops.push(op);
-                        break;
-                    }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop();
-                    continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) {
-            op = [
-                6,
-                e
-            ];
-            y = 0;
-        } finally{
-            f = t = 0;
-        }
-        if (op[0] & 5) throw op[1];
-        return {
-            value: op[0] ? op[1] : void 0,
-            done: true
-        };
-    }
-}
-import { jsx, jsxs } from "react/jsx-runtime";
+import ErrorMessage from "../ErrorMessage/ErrorMessage.js";
+import "../ErrorMessage/index.js";
+import { FieldLabel } from "../Label/Label.js";
+import "../Label/index.js";
+import SpaceAround_default from "../SpaceAround/index.js";
+import { StyledAsyncSelect, StyledReactSelect, Wrapper } from "./styles.js";
+import { useStylesAndComponents } from "./themes/index.js";
 import { useCallback, useMemo } from "react";
-import { ErrorMessage } from "../ErrorMessage";
-import { FieldLabel } from "../Label";
-import SpaceAroundWrap from "../SpaceAround";
-import { i18n } from "@lingui/core";
 import { useTheme } from "@xstyled/styled-components";
-import { Wrapper, StyledReactSelect, StyledAsyncSelect } from "./styles";
-import { useStylesAndComponents } from "./themes";
-var emptyOptions = [];
-var noOptionsMessage = function noOptionsMessage() {
-    return i18n._({
-        id: "select.noOptions",
-        message: "no options"
-    });
-};
-var loadingMessage = function loadingMessage() {
-    return i18n._({
-        id: "components.dropdown.loading",
-        message: "Loading..."
-    });
-};
-var Select = function Select(_0) {
-    var label = _0.label, name = _0.name, _0_value = _0.value, value = _0_value === void 0 ? "" : _0_value, _0_options = _0.options, options = _0_options === void 0 ? emptyOptions : _0_options, defaultOptions = _0.defaultOptions, loadOptions = _0.loadOptions, onChange = _0.onChange, onBlur = _0.onBlur, error = _0.error, isInvalid = _0.isInvalid, isLoading = _0.isLoading, isDarkPlaceholderText = _0.isDarkPlaceholderText, _0_spaceAround = _0.spaceAround, spaceAround = _0_spaceAround === void 0 ? false : _0_spaceAround, disabled = _0.disabled, onInputChange = _0.onInputChange, isSearchable = _0.isSearchable, isMulti = _0.isMulti, className = _0.className, _0_useSimplifiedOptions = _0.useSimplifiedOptions, useSimplifiedOptions = _0_useSimplifiedOptions === void 0 ? false : _0_useSimplifiedOptions, _0_showSelectAllButton = _0.showSelectAllButton, showSelectAllButton = _0_showSelectAllButton === void 0 ? false : _0_showSelectAllButton, _0_shortValues = _0.shortValues, shortValues = _0_shortValues === void 0 ? true : _0_shortValues, _0_shortVariant = _0.shortVariant, shortVariant = _0_shortVariant === void 0 ? "block" : _0_shortVariant, style = _0.style, optionVariant = _0.optionVariant, multiLabelVariant = _0.multiLabelVariant, containerVariant = _0.containerVariant, placeholder = _0.placeholder, placeholderIcon = _0.placeholderIcon, innerRef = _0.innerRef, maxMenuHeight = _0.maxMenuHeight, getOptionValue = _0.getOptionValue, onIconClick = _0.onIconClick, passTroughProps = _object_without_properties(_0, [
-        "label",
-        "name",
-        "value",
-        "options",
-        "defaultOptions",
-        "loadOptions",
-        "onChange",
-        "onBlur",
-        "error",
-        "isInvalid",
-        "isLoading",
-        "isDarkPlaceholderText",
-        "spaceAround",
-        "disabled",
-        "onInputChange",
-        "isSearchable",
-        "isMulti",
-        "className",
-        "useSimplifiedOptions",
-        "showSelectAllButton",
-        "shortValues",
-        "shortVariant",
-        "style",
-        "optionVariant",
-        "multiLabelVariant",
-        "containerVariant",
-        "placeholder",
-        "placeholderIcon",
-        "innerRef",
-        "maxMenuHeight",
-        "getOptionValue",
-        "onIconClick"
-    ]);
-    var isAsync = !!loadOptions;
-    if (showSelectAllButton && !isMulti) {
-        console.error("CheckboxSelect incompatible props");
-    }
-    var setAllOptions = useCallback(function(param) {
-        var options2 = param.options;
-        onChange === null || onChange === void 0 ? void 0 : onChange(options2 || []);
-    }, [
-        onChange,
-        options
-    ]);
-    var unsetAllOptions = useCallback(function() {
-        if (typeof onChange === "function") {
-            onChange === null || onChange === void 0 ? void 0 : onChange(emptyOptions);
-        }
-    }, [
-        onChange
-    ]);
-    var icon = containerVariant === "search" && !placeholderIcon && placeholderIcon !== null ? "search" : placeholderIcon || void 0;
-    var modifiedMaxMenuHeight = showSelectAllButton && maxMenuHeight ? maxMenuHeight - 30 : maxMenuHeight;
-    var _useStylesAndComponents = _sliced_to_array(useStylesAndComponents(style, optionVariant, multiLabelVariant, containerVariant, useSimplifiedOptions, showSelectAllButton), 3), customComponents = _useStylesAndComponents[0], customTheme = _useStylesAndComponents[1], customStyles = _useStylesAndComponents[2];
-    var RenderComponent = isAsync ? StyledAsyncSelect : StyledReactSelect;
-    var selectedOption;
-    var localGetOptionValue = useMemo(function() {
-        return getOptionValue || function(option) {
-            return option === null || option === void 0 ? void 0 : option.value;
-        };
-    }, [
-        getOptionValue
-    ]);
-    if (Array.isArray(value)) {
-        selectedOption = (defaultOptions || options).filter(function(option) {
-            return value.includes(localGetOptionValue(option));
-        });
-        selectedOption = (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.length) ? selectedOption : null;
-    } else if (value !== void 0) {
-        selectedOption = (defaultOptions || options).find(function(option) {
-            return localGetOptionValue(option) === value;
-        }) || null;
-    }
-    var theme = useTheme();
-    var handleLoadOptions = useMemo(function() {
-        return loadOptions ? function(fulltext) {
-            return _async_to_generator(function() {
-                return _ts_generator(this, function(_state) {
-                    switch(_state.label){
-                        case 0:
-                            return [
-                                4,
-                                loadOptions(fulltext)
-                            ];
-                        case 1:
-                            return [
-                                2,
-                                _state.sent()
-                            ];
-                    }
-                });
-            })();
-        } : void 0;
-    }, [
-        loadOptions
-    ]);
-    return /* @__PURE__ */ jsxs(SpaceAroundWrap, {
-        spaceAround: spaceAround,
-        className: className,
-        children: [
-            /* @__PURE__ */ jsxs(Wrapper, {
-                children: [
-                    label && /* @__PURE__ */ jsx(FieldLabel, {
-                        htmlFor: name,
-                        children: label
-                    }),
-                    /* @__PURE__ */ jsx(RenderComponent, _object_spread_props(_object_spread({
-                        id: name,
-                        name: name,
-                        options: options,
-                        loadOptions: handleLoadOptions,
-                        defaultOptions: defaultOptions,
-                        value: selectedOption,
-                        onChange: onChange,
-                        onBlur: onBlur,
-                        isDisabled: disabled || isLoading,
-                        isLoading: isLoading,
-                        isInvalid: isInvalid !== void 0 ? isInvalid : !!error,
-                        isDarkPlaceholderText: isDarkPlaceholderText,
-                        placeholder: placeholder || i18n._({
-                            id: "components.dropdown.placeholder",
-                            message: "Select..."
-                        }),
-                        styles: customStyles,
-                        theme: customTheme,
-                        icon: icon,
-                        onIconClick: onIconClick,
-                        hideSelectedOptions: !!(isMulti && multiLabelVariant !== "count"),
-                        onInputChange: onInputChange,
-                        isSearchable: isAsync || isSearchable,
-                        isMulti: isMulti,
-                        classNamePrefix: "react-select",
-                        components: customComponents,
-                        closeMenuOnSelect: isMulti ? false : void 0,
-                        noOptionsMessage: noOptionsMessage
-                    }, passTroughProps), {
-                        ref: innerRef,
-                        tabIndex: null,
-                        systemTheme: theme,
-                        onCustomSelectAll: setAllOptions,
-                        onCustomDeselectAll: unsetAllOptions,
-                        selectAllButton: showSelectAllButton,
-                        maxMenuHeight: modifiedMaxMenuHeight,
-                        getOptionValue: getOptionValue,
-                        loadingMessage: loadingMessage,
-                        shortValues: shortValues,
-                        shortVariant: shortVariant,
-                        containerVariant: containerVariant
-                    }))
-                ]
-            }),
-            error && /* @__PURE__ */ jsx(ErrorMessage, {
-                children: error
-            })
-        ]
-    });
+import { jsx, jsxs } from "react/jsx-runtime";
+import { i18n } from "@lingui/core";
+//#region packages/ui/Elements/Select/Select.tsx
+const emptyOptions = [];
+const noOptionsMessage = () => i18n._({
+	id: "select.noOptions",
+	message: "no options"
+});
+const loadingMessage = () => i18n._({
+	id: "components.dropdown.loading",
+	message: "Loading..."
+});
+const Select = ({ label, name, value = "", options = emptyOptions, defaultOptions, loadOptions, onChange, onBlur, error, isInvalid, isLoading, isDarkPlaceholderText, spaceAround = false, disabled, onInputChange, isSearchable, isMulti, className, useSimplifiedOptions = false, showSelectAllButton = false, shortValues = true, shortVariant = "block", style, optionVariant, multiLabelVariant, containerVariant, placeholder, placeholderIcon, innerRef, maxMenuHeight, getOptionValue, onIconClick, ...passTroughProps }) => {
+	const isAsync = !!loadOptions;
+	if (showSelectAllButton && !isMulti) console.error("CheckboxSelect incompatible props");
+	const setAllOptions = useCallback(({ options }) => {
+		onChange?.(options || []);
+	}, [onChange, options]);
+	const unsetAllOptions = useCallback(() => {
+		if (typeof onChange === "function") onChange?.(emptyOptions);
+	}, [onChange]);
+	const icon = containerVariant === "search" && !placeholderIcon && placeholderIcon !== null ? "search" : placeholderIcon || void 0;
+	const modifiedMaxMenuHeight = showSelectAllButton && maxMenuHeight ? maxMenuHeight - 30 : maxMenuHeight;
+	const [customComponents, customTheme, customStyles] = useStylesAndComponents(style, optionVariant, multiLabelVariant, containerVariant, useSimplifiedOptions, showSelectAllButton);
+	const RenderComponent = isAsync ? StyledAsyncSelect : StyledReactSelect;
+	let selectedOption;
+	const localGetOptionValue = useMemo(() => getOptionValue || ((option) => option?.value), [getOptionValue]);
+	if (Array.isArray(value)) {
+		selectedOption = (defaultOptions || options).filter((option) => value.includes(localGetOptionValue(option)));
+		selectedOption = selectedOption?.length ? selectedOption : null;
+	} else if (value !== void 0) selectedOption = (defaultOptions || options).find((option) => localGetOptionValue(option) === value) || null;
+	const theme = useTheme();
+	const handleLoadOptions = useMemo(() => {
+		return loadOptions ? async (fulltext) => await loadOptions(fulltext) : void 0;
+	}, [loadOptions]);
+	return /* @__PURE__ */ jsxs(SpaceAround_default, {
+		spaceAround,
+		className,
+		children: [/* @__PURE__ */ jsxs(Wrapper, { children: [label && /* @__PURE__ */ jsx(FieldLabel, {
+			htmlFor: name,
+			children: label
+		}), /* @__PURE__ */ jsx(RenderComponent, {
+			id: name,
+			name,
+			options,
+			loadOptions: handleLoadOptions,
+			defaultOptions,
+			value: selectedOption,
+			onChange,
+			onBlur,
+			isDisabled: disabled || isLoading,
+			isLoading,
+			isInvalid: isInvalid !== void 0 ? isInvalid : !!error,
+			isDarkPlaceholderText,
+			placeholder: placeholder || i18n._({
+				id: "components.dropdown.placeholder",
+				message: "Select..."
+			}),
+			styles: customStyles,
+			theme: customTheme,
+			icon,
+			onIconClick,
+			hideSelectedOptions: !!(isMulti && multiLabelVariant !== "count"),
+			onInputChange,
+			isSearchable: isAsync || isSearchable,
+			isMulti,
+			classNamePrefix: "react-select",
+			components: customComponents,
+			closeMenuOnSelect: isMulti ? false : void 0,
+			noOptionsMessage,
+			...passTroughProps,
+			ref: innerRef,
+			tabIndex: null,
+			systemTheme: theme,
+			onCustomSelectAll: setAllOptions,
+			onCustomDeselectAll: unsetAllOptions,
+			selectAllButton: showSelectAllButton,
+			maxMenuHeight: modifiedMaxMenuHeight,
+			getOptionValue,
+			loadingMessage,
+			shortValues,
+			shortVariant,
+			containerVariant
+		})] }), error && /* @__PURE__ */ jsx(ErrorMessage, { children: error })]
+	});
 };
-var Select_default = Select;
-export { Select_default as default };
+//#endregion
+export { Select as default };

package/ui/Elements/Select/components/ChevronOption.js

@@ -1,89 +1,31 @@
-function _define_property(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-function _object_spread(target) {
-    for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[i] : {};
-        var ownKeys = Object.keys(source);
-        if (typeof Object.getOwnPropertySymbols === "function") {
-            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-            }));
-        }
-        ownKeys.forEach(function(key) {
-            _define_property(target, key, source[key]);
-        });
-    }
-    return target;
-}
-function ownKeys(object, enumerableOnly) {
-    var keys = Object.keys(object);
-    if (Object.getOwnPropertySymbols) {
-        var symbols = Object.getOwnPropertySymbols(object);
-        if (enumerableOnly) {
-            symbols = symbols.filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-            });
-        }
-        keys.push.apply(keys, symbols);
-    }
-    return keys;
-}
-function _object_spread_props(target, source) {
-    source = source != null ? source : {};
-    if (Object.getOwnPropertyDescriptors) {
-        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-        ownKeys(Object(source)).forEach(function(key) {
-            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-        });
-    }
-    return target;
-}
+import Checkbox_default from "../../../Forms/Checkbox/Checkbox.js";
+import Toggle from "../../Toggle/Toggle.js";
+import SelectedIndicator from "./SelectedIndicator.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { components as selectComponents } from "react-select";
-import Checkbox from "../../../Forms/Checkbox/Checkbox";
-import Toggle from "../../Toggle/Toggle";
-import SelectedIndicator from "../components/SelectedIndicator";
-var ChevronOption = function ChevronOption(props) {
-    var theme = props.theme, isSelected = props.isSelected, selectOption = props.selectOption, children = props.children, data = props.data;
-    var showCheckbox = !!(theme.optionVariant == "checkbox");
-    var showToggle = !!(theme.optionVariant == "toggle");
-    return /* @__PURE__ */ jsxs(selectComponents.Option, _object_spread_props(_object_spread({}, props), {
-        children: [
-            (showCheckbox || showToggle) && /* @__PURE__ */ jsxs(SelectedIndicator, {
-                children: [
-                    showCheckbox && /* @__PURE__ */ jsx(Checkbox, {
-                        checked: isSelected,
-                        size: 2,
-                        readOnly: true
-                    }),
-                    showToggle && /* @__PURE__ */ jsx(Toggle, {
-                        name: "",
-                        onChange: selectOption,
-                        checked: isSelected,
-                        spaceAround: false,
-                        variant: "grid"
-                    })
-                ]
-            }),
-            /* @__PURE__ */ jsx("span", {
-                className: "label",
-                "data-cy": "dropdownModalOption".concat(data.index),
-                children: children
-            })
-        ]
-    }));
+import { components } from "react-select";
+//#region packages/ui/Elements/Select/components/ChevronOption.tsx
+const ChevronOption = (props) => {
+	const { theme, isSelected, selectOption, children, data } = props;
+	const showCheckbox = !!(theme.optionVariant == "checkbox");
+	const showToggle = !!(theme.optionVariant == "toggle");
+	return /* @__PURE__ */ jsxs(components.Option, {
+		...props,
+		children: [(showCheckbox || showToggle) && /* @__PURE__ */ jsxs(SelectedIndicator, { children: [showCheckbox && /* @__PURE__ */ jsx(Checkbox_default, {
+			checked: isSelected,
+			size: 2,
+			readOnly: true
+		}), showToggle && /* @__PURE__ */ jsx(Toggle, {
+			name: "",
+			onChange: selectOption,
+			checked: isSelected,
+			spaceAround: false,
+			variant: "grid"
+		})] }), /* @__PURE__ */ jsx("span", {
+			className: "label",
+			"data-cy": `dropdownModalOption${data.index}`,
+			children
+		})]
+	});
 };
-var ChevronOption_default = ChevronOption;
-export { ChevronOption, ChevronOption_default as default };
+//#endregion
+export { ChevronOption, ChevronOption as default };