@mailstep/design-system 0.8.30 → 0.8.31-beta.2

package/ui/Elements/ProgressBar/styles.js

@@ -1,72 +1,19 @@
-import { createRgba } from "../../utils/CreateRgba/createRgba.js";
-import "../../utils/index.js";
-import styled$1, { css, keyframes, th } from "@xstyled/styled-components";
-//#region packages/ui/Elements/ProgressBar/styles.ts
-const StyledProgressBar = styled$1.div`
-  position: relative;
-  display: flex;
-  width: 100%;
-  min-width: 250px;
-  height: ${(props) => props.variant === "thin" ? `12px` : `35px`};
-  color: ${th("colors.white")};
-  background-color: ${(props) => props.status === "finished" ? createRgba(props.theme.colors.success, .4) : `${th("colors.red1")}`};
-  justify-content: center;
-  border: slim;
-  border-color: ${(props) => props.status === "finished" ? `${th("colors.success")}` : `${th("colors.red1")}`};
-  border-radius: md;
-  overflow: hidden;
-`;
-const slide = keyframes`
-0%{
-  background-position-x: 0%;
-}
-100% {
-  background-position-x: 500px;
-}
-`;
-const StyledStatusFinished = css`
-  background: repeating-linear-gradient(
-    -45deg,
-    ${(props) => createRgba(props.theme.colors.success, .4)},
-    ${(props) => createRgba(props.theme.colors.success, .4)} 10px,
-    ${th("colors.success")} 10px,
-    ${th("colors.success")} 22.1px
-  );
-  background-size: 4000px 50px;
-`;
-const StyledStatusLoading = css`
-  background: repeating-linear-gradient(
-    -45deg,
-    ${th("colors.red1")},
-    ${th("colors.red1")} 10px,
-    ${th("colors.red1")} 10px,
-    ${th("colors.red1")} 22.1px
-  );
-  background-size: 4000px 50px;
-`;
-const StyledStatusError = css`
-  background: repeating-linear-gradient(
-    -45deg,
-    ${th("colors.red1")},
-    ${th("colors.red1")} 10px,
-    ${th("colors.red1")} 10px,
-    ${th("colors.red1")} 22.1px
-  );
-  background-size: 4000px 50px;
-`;
-const Progress = styled$1.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: ${(props) => `${props.progress}%`};
-  height: 35px;
-  animation: ${slide} 20s linear infinite;
-  transition: width 500ms;
-  ${(props) => props.status === "finished" ? StyledStatusFinished : props.status === "error" ? StyledStatusError : StyledStatusLoading}
-`;
-const ProgressDescription = styled$1.span`
-  position: relative;
-  align-self: center;
-`;
-//#endregion
-export { Progress, ProgressDescription, StyledProgressBar };
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled, { keyframes, css } from '@xstyled/styled-components';
+import { th } from '@xstyled/styled-components';
+import { createRgba } from '../../utils';
+export var StyledProgressBar = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  width: 100%;\n  min-width: 250px;\n  height: ", ";\n  color: ", ";\n  background-color: ", ";\n  justify-content: center;\n  border: slim;\n  border-color: ", ";\n  border-radius: md;\n  overflow: hidden;\n"], ["\n  position: relative;\n  display: flex;\n  width: 100%;\n  min-width: 250px;\n  height: ", ";\n  color: ", ";\n  background-color: ", ";\n  justify-content: center;\n  border: slim;\n  border-color: ", ";\n  border-radius: md;\n  overflow: hidden;\n"])), function (props) { return (props.variant === 'thin' ? "12px" : "35px"); }, th('colors.white'), function (props) {
+    return props.status === 'finished' ? createRgba(props.theme.colors.success, 0.4) : "".concat(th('colors.red1'));
+}, function (props) { return (props.status === 'finished' ? "".concat(th('colors.success')) : "".concat(th('colors.red1'))); });
+var slide = keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n0%{\n  background-position-x: 0%;\n}\n100% {\n  background-position-x: 500px;\n}\n"], ["\n0%{\n  background-position-x: 0%;\n}\n100% {\n  background-position-x: 500px;\n}\n"])));
+var StyledStatusFinished = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background: repeating-linear-gradient(\n    -45deg,\n    ", ",\n    ", " 10px,\n    ", " 10px,\n    ", " 22.1px\n  );\n  background-size: 4000px 50px;\n"], ["\n  background: repeating-linear-gradient(\n    -45deg,\n    ", ",\n    ", " 10px,\n    ", " 10px,\n    ", " 22.1px\n  );\n  background-size: 4000px 50px;\n"])), function (props) { return createRgba(props.theme.colors.success, 0.4); }, function (props) { return createRgba(props.theme.colors.success, 0.4); }, th('colors.success'), th('colors.success'));
+var StyledStatusLoading = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background: repeating-linear-gradient(\n    -45deg,\n    ", ",\n    ", " 10px,\n    ", " 10px,\n    ", " 22.1px\n  );\n  background-size: 4000px 50px;\n"], ["\n  background: repeating-linear-gradient(\n    -45deg,\n    ", ",\n    ", " 10px,\n    ", " 10px,\n    ", " 22.1px\n  );\n  background-size: 4000px 50px;\n"])), th('colors.red1'), th('colors.red1'), th('colors.red1'), th('colors.red1'));
+var StyledStatusError = css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background: repeating-linear-gradient(\n    -45deg,\n    ", ",\n    ", " 10px,\n    ", " 10px,\n    ", " 22.1px\n  );\n  background-size: 4000px 50px;\n"], ["\n  background: repeating-linear-gradient(\n    -45deg,\n    ", ",\n    ", " 10px,\n    ", " 10px,\n    ", " 22.1px\n  );\n  background-size: 4000px 50px;\n"])), th('colors.red1'), th('colors.red1'), th('colors.red1'), th('colors.red1'));
+export var Progress = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: ", ";\n  height: 35px;\n  animation: ", " 20s linear infinite;\n  transition: width 500ms;\n  ", "\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: ", ";\n  height: 35px;\n  animation: ", " 20s linear infinite;\n  transition: width 500ms;\n  ", "\n"])), function (props) { return "".concat(props.progress, "%"); }, slide, function (props) {
+    return props.status === 'finished' ? StyledStatusFinished : props.status === 'error' ? StyledStatusError : StyledStatusLoading;
+});
+export var ProgressDescription = styled.span(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: relative;\n  align-self: center;\n"], ["\n  position: relative;\n  align-self: center;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/ui/Elements/Select/Select.d.ts

@@ -1,4 +1,5 @@
-import type { FC } from 'react';
-import { type SelectProps } from './types';
+import { FC } from 'react';
+import { SelectProps } from './types';
+
 declare const Select: FC<SelectProps>;
 export default Select;

package/ui/Elements/Select/Select.js

@@ -1,97 +1,111 @@
-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 { useTheme } from "@xstyled/styled-components";
-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 __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
-//#endregion
-export { Select as default };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = 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 };
+    }
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 () { return i18n._({ id: 'select.noOptions', message: 'no options' }); };
+var loadingMessage = function () { return i18n._({ id: 'components.dropdown.loading', message: 'Loading...' }); };
+var Select = function (_a) {
+    var label = _a.label, name = _a.name, _b = _a.value, value = _b === void 0 ? '' : _b, _c = _a.options, options = _c === void 0 ? emptyOptions : _c, defaultOptions = _a.defaultOptions, loadOptions = _a.loadOptions, onChange = _a.onChange, onBlur = _a.onBlur, error = _a.error, isInvalid = _a.isInvalid, isLoading = _a.isLoading, isDarkPlaceholderText = _a.isDarkPlaceholderText, _d = _a.spaceAround, spaceAround = _d === void 0 ? false : _d, disabled = _a.disabled, onInputChange = _a.onInputChange, isSearchable = _a.isSearchable, isMulti = _a.isMulti, className = _a.className, _e = _a.useSimplifiedOptions, useSimplifiedOptions = _e === void 0 ? false : _e, _f = _a.showSelectAllButton, showSelectAllButton = _f === void 0 ? false : _f, _g = _a.shortValues, shortValues = _g === void 0 ? true : _g, _h = _a.shortVariant, shortVariant = _h === void 0 ? 'block' : _h, style = _a.style, optionVariant = _a.optionVariant, multiLabelVariant = _a.multiLabelVariant, containerVariant = _a.containerVariant, placeholder = _a.placeholder, placeholderIcon = _a.placeholderIcon, innerRef = _a.innerRef, maxMenuHeight = _a.maxMenuHeight, getOptionValue = _a.getOptionValue, onIconClick = _a.onIconClick, passTroughProps = __rest(_a, ["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 (_a) {
+        var options = _a.options;
+        onChange === null || onChange === void 0 ? void 0 : onChange((options || []));
+    }, [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 || undefined;
+    var modifiedMaxMenuHeight = showSelectAllButton && maxMenuHeight ? maxMenuHeight - 30 : maxMenuHeight;
+    var _j = useStylesAndComponents(style, optionVariant, multiLabelVariant, containerVariant, useSimplifiedOptions, showSelectAllButton), customComponents = _j[0], customTheme = _j[1], customStyles = _j[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 !== undefined) {
+        selectedOption = (defaultOptions || options).find(function (option) { return localGetOptionValue(option) === value; }) || null;
+    }
+    var theme = useTheme();
+    // strip extra params
+    var handleLoadOptions = useMemo(function () {
+        return loadOptions ? function (fulltext) { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, loadOptions(fulltext)];
+                case 1: return [2 /*return*/, _a.sent()];
+            }
+        }); }); } : undefined;
+    }, [loadOptions]);
+    return (_jsxs(SpaceAroundWrap, { spaceAround: spaceAround, className: className, children: [_jsxs(Wrapper, { children: [label && _jsx(FieldLabel, { htmlFor: name, children: label }), _jsx(RenderComponent, __assign({ id: name, name: name, options: options, loadOptions: handleLoadOptions, defaultOptions: defaultOptions, value: selectedOption, onChange: onChange, onBlur: onBlur, isDisabled: disabled || isLoading, isLoading: isLoading, isInvalid: isInvalid !== undefined ? 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 : undefined, 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 && _jsx(ErrorMessage, { children: error })] }));
+};
+export default Select;

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

@@ -1,31 +1,23 @@
-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 } 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 __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
-//#endregion
-export { ChevronOption, ChevronOption as default };
+import { jsx as _jsx, jsxs as _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';
+export var ChevronOption = function (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 (_jsxs(selectComponents.Option, __assign({}, props, { children: [(showCheckbox || showToggle) && (_jsxs(SelectedIndicator, { children: [showCheckbox && _jsx(Checkbox, { checked: isSelected, size: 2, readOnly: true }), showToggle && _jsx(Toggle, { name: "", onChange: selectOption, checked: isSelected, spaceAround: false, variant: 'grid' })] })), _jsx("span", { className: "label", "data-cy": "dropdownModalOption".concat(data.index), children: children })] })));
+};
+export default ChevronOption;

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

@@ -1,26 +1,27 @@
-import SelectAll from "./SelectAll.js";
-import { useMemo } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { components } from "react-select";
-//#region packages/ui/Elements/Select/components/ConnectedMenu.tsx
-const ConnectedMenu = (props) => {
-	const { theme } = props;
-	const { onCustomSelectAll, onCustomDeselectAll, value, selectAllButton, maxMenuHeight, isLoading } = props.selectProps;
-	const filteredOptions = useMemo(() => props.children?.map?.(({ props: { value, label } }) => ({
-		label,
-		value
-	})), [props.children]);
-	return /* @__PURE__ */ jsxs(components.MenuList, {
-		...props,
-		children: [selectAllButton && !isLoading && /* @__PURE__ */ jsx(SelectAll, {
-			theme,
-			onCustomSelectAll,
-			onCustomDeselectAll,
-			value,
-			options: filteredOptions,
-			maxMenuHeight
-		}), props.children]
-	});
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
-//#endregion
-export { ConnectedMenu as default };
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { components as selectComponents } from 'react-select';
+import SelectAll from '../components/SelectAll';
+var ConnectedMenu = function (props) {
+    var theme = props.theme;
+    var _a = props.selectProps, onCustomSelectAll = _a.onCustomSelectAll, onCustomDeselectAll = _a.onCustomDeselectAll, value = _a.value, selectAllButton = _a.selectAllButton, maxMenuHeight = _a.maxMenuHeight, isLoading = _a.isLoading;
+    // because the filterd options (filterd by the search input) are not passed to the menu list (there are all options),
+    // we need to specify them here by children
+    var filteredOptions = useMemo(function () { var _a, _b; return (_b = (_a = props.children) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.call(_a, function (_a) {
+        var _b = _a.props, value = _b.value, label = _b.label;
+        return ({ label: label, value: value });
+    }); }, [props.children]);
+    return (_jsxs(selectComponents.MenuList, __assign({}, props, { children: [selectAllButton && !isLoading && (_jsx(SelectAll, { theme: theme, onCustomSelectAll: onCustomSelectAll, onCustomDeselectAll: onCustomDeselectAll, value: value, options: filteredOptions, maxMenuHeight: maxMenuHeight })), props.children] })));
+};
+export default ConnectedMenu;

package/ui/Elements/Select/components/CountMultiValue.d.ts

@@ -1,4 +1,5 @@
-import { type MultiValueProps } from 'react-select';
+import { MultiValueProps } from 'react-select';
+
 type CountMultiValueProps = MultiValueProps & {
     data: unknown;
     selectProps: MultiValueProps<unknown, boolean, any>['selectProps'] & {

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

@@ -1,42 +1,46 @@
-import styled$1, { th } from "@xstyled/styled-components";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { components } from "react-select";
-//#region packages/ui/Elements/Select/components/CountMultiValue.tsx
-const StyledNumber = styled$1.div`
-  background: ${th.color("lightGray7")};
-  height: 25px;
-  justify-content: center;
-  align-items: center;
-  display: flex;
-  border-radius: md;
-  padding: 2px 6px;
-`;
-const JoinedMultiValue = styled$1.div`
-  white-space: nowrap;
-  position: absolute;
-  color: gray3;
-  padding-left: ${({ isFocused }) => isFocused ? "8px" : "0"};
-`;
-const CountMultiValue = (props) => {
-	const shortValues = props.selectProps.shortValues;
-	const selectVal = props.selectProps.value;
-	const inputVal = props.selectProps.inputValue;
-	const shortVariant = props.selectProps.shortVariant;
-	const isFirst = props.data?.value === selectVal[0]?.value;
-	const menuIsOpen = props.selectProps.menuIsOpen;
-	if (!shortValues) return /* @__PURE__ */ jsx(components.MultiValue, {
-		...props,
-		children: props.children
-	});
-	if (!isFirst || inputVal) return null;
-	if (shortVariant === "join") return /* @__PURE__ */ jsxs(JoinedMultiValue, {
-		isFocused: menuIsOpen,
-		children: [selectVal.length > 1 ? `(${Number(selectVal.length)}) ` : "", selectVal.map((option) => option.label).join(", ")]
-	});
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(components.MultiValue, {
-		...props,
-		children: props.children
-	}), selectVal.length > 1 ? /* @__PURE__ */ jsxs(StyledNumber, { children: ["+", selectVal.length - 1] }) : null] });
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
 };
-//#endregion
-export { CountMultiValue as default };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { components as selectComponents } from 'react-select';
+import styled, { th } from '@xstyled/styled-components';
+// MultiValue container with count of selected options
+var StyledNumber = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 25px;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  border-radius: md;\n  padding: 2px 6px;\n"], ["\n  background-color: ", ";\n  height: 25px;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  border-radius: md;\n  padding: 2px 6px;\n"])), th.color('lightGray7'));
+var JoinedMultiValue = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  white-space: nowrap;\n  position: absolute;\n  color: gray;\n  padding-left: ", ";\n"], ["\n  white-space: nowrap;\n  position: absolute;\n  color: gray;\n  padding-left: ", ";\n"])), function (_a) {
+    var isFocused = _a.isFocused;
+    return (isFocused ? '8px' : '0');
+});
+var CountMultiValue = function (props) {
+    var _a;
+    var shortValues = props.selectProps.shortValues;
+    var selectVal = props.selectProps.value;
+    var inputVal = props.selectProps.inputValue;
+    var shortVariant = props.selectProps.shortVariant;
+    var data = props.data;
+    var isFirst = (data === null || data === void 0 ? void 0 : data.value) === ((_a = selectVal[0]) === null || _a === void 0 ? void 0 : _a.value);
+    var menuIsOpen = props.selectProps.menuIsOpen;
+    if (!shortValues) {
+        return _jsx(selectComponents.MultiValue, __assign({}, props, { children: props.children }));
+    }
+    if (!isFirst || inputVal) {
+        return null;
+    }
+    if (shortVariant === 'join') {
+        return (_jsxs(JoinedMultiValue, { isFocused: menuIsOpen, children: [selectVal.length > 1 ? "(".concat(Number(selectVal.length), ") ") : '', selectVal.map(function (option) { return option.label; }).join(', ')] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(selectComponents.MultiValue, __assign({}, props, { children: props.children })), selectVal.length > 1 ? _jsxs(StyledNumber, { children: ["+", selectVal.length - 1] }) : null] }));
+};
+export default CountMultiValue;
+var templateObject_1, templateObject_2;

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

@@ -1,13 +1,19 @@
-import { jsx } from "react/jsx-runtime";
-import { components } from "react-select";
-//#region packages/ui/Elements/Select/components/CustomInput.tsx
-const CustomInput = (props) => {
-	const { name } = props.selectProps;
-	const value = !!name ? `${name}Inp` : props.id;
-	return /* @__PURE__ */ jsx(components.Input, {
-		...props,
-		"data-cy": value
-	});
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
-//#endregion
-export { CustomInput, CustomInput as default };
+import { jsx as _jsx } from "react/jsx-runtime";
+import { components as selectComponents } from 'react-select';
+export var CustomInput = function (props) {
+    var name = props.selectProps.name;
+    var value = !!name ? "".concat(name, "Inp") : props.id;
+    return _jsx(selectComponents.Input, __assign({}, props, { "data-cy": value }));
+};
+export default CustomInput;

package/ui/Elements/Select/components/DropdownIndicator.d.ts

@@ -1,4 +1,5 @@
-import { type DropdownIndicatorProps } from 'react-select';
+import { DropdownIndicatorProps } from 'react-select';
+
 type DropdownIndicatorCustomProps = DropdownIndicatorProps & {
     theme: any;
 };

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

@@ -1,30 +1,29 @@
-import { ArrowDown } from "../../Icon/icons/ArrowDown.js";
-import { ArrowUp } from "../../Icon/icons/ArrowUp.js";
-import styled$1 from "@xstyled/styled-components";
-import { jsx } from "react/jsx-runtime";
-import { components } from "react-select";
-//#region packages/ui/Elements/Select/components/DropdownIndicator.tsx
-const ChevronDiv = styled$1.div`
-  align-self: center;
-  display: flex;
-`;
-const DropdownIndicator = (props) => {
-	const { menuIsOpen, name } = props.selectProps;
-	const iconColor = props.theme.colors.placeholderTextColor;
-	return /* @__PURE__ */ jsx(components.DropdownIndicator, {
-		...props,
-		children: /* @__PURE__ */ jsx(ChevronDiv, {
-			className: "chevron",
-			"data-cy": `${name || ""}ChevronBtn`,
-			children: menuIsOpen ? /* @__PURE__ */ jsx(ArrowUp, {
-				width: "16px",
-				stroke: iconColor
-			}) : /* @__PURE__ */ jsx(ArrowDown, {
-				width: "16px",
-				stroke: iconColor
-			})
-		})
-	});
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
 };
-//#endregion
-export { DropdownIndicator, DropdownIndicator as default };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { components as selectComponents } from 'react-select';
+import { ArrowDown } from '../../Icon/icons/ArrowDown';
+import { ArrowUp } from '../../Icon/icons/ArrowUp';
+import styled from '@xstyled/styled-components';
+// Option with chevron form new design
+var ChevronDiv = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-self: center;\n  display: flex;\n"], ["\n  align-self: center;\n  display: flex;\n"])));
+export var DropdownIndicator = function (props) {
+    var _a = props.selectProps, menuIsOpen = _a.menuIsOpen, name = _a.name;
+    var iconColor = props.theme.colors.placeholderTextColor;
+    return (_jsx(selectComponents.DropdownIndicator, __assign({}, props, { children: _jsx(ChevronDiv, { className: "chevron", "data-cy": "".concat(name || '', "ChevronBtn"), children: menuIsOpen ? _jsx(ArrowUp, { width: "16px", stroke: iconColor }) : _jsx(ArrowDown, { width: "16px", stroke: iconColor }) }) })));
+};
+export default DropdownIndicator;
+var templateObject_1;