@mailstep/design-system 0.8.31-beta.3 → 0.8.31

package/ui/Elements/Pagination/styled.js

@@ -1,26 +1,64 @@
-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, { x } from '@xstyled/styled-components';
-import { th } from '@xstyled/system';
-import Icon from '../Icon';
-export var Wrapper = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n\n  & > *:not(:last-child) {\n    margin-right: 1px;\n    @media (min-width: 1024px) {\n      margin-right: 4px;\n    }\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n\n  & > *:not(:last-child) {\n    margin-right: 1px;\n    @media (min-width: 1024px) {\n      margin-right: 4px;\n    }\n  }\n"])));
-export var Btn = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: transparent;\n  border: none;\n  cursor: ", ";\n  opacity: ", ";\n"], ["\n  background-color: transparent;\n  border: none;\n  cursor: ", ";\n  opacity: ", ";\n"])), function (_a) {
-    var disabled = _a.disabled;
-    return (disabled ? 'default' : 'pointer');
-}, function (_a) {
-    var disabled = _a.disabled;
-    return (disabled ? 0 : 1);
-});
-export var ArrowIcon = styled(Icon)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 50%;\n  aspect-ratio: 1 / 1;\n  width: 16px;\n  display: flex;\n  align-items: center;\n  color: blue2;\n\n  &:hover {\n    color: blue2;\n  }\n"], ["\n  border-radius: 50%;\n  aspect-ratio: 1 / 1;\n  width: 16px;\n  display: flex;\n  align-items: center;\n  color: blue2;\n\n  &:hover {\n    color: blue2;\n  }\n"])));
-export var GoIcon = styled(ArrowIcon)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 0 8px;\n  font-size: 12px;\n  & > svg {\n    width: 10px;\n  }\n"], ["\n  margin: 0 8px;\n  font-size: 12px;\n  & > svg {\n    width: 10px;\n  }\n"])));
-export var DotsWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  color: gray1;\n"], ["\n  color: gray1;\n"])));
-export var PageBtn = styled.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: 18px;\n  min-width: 18px;\n  display: flex;\n  border-radius: 50%;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  margin: 0 4px;\n  color: ", ";\n  font-size: 14px;\n  font-weight: ", ";\n  font-family: ", ";\n  line-height: 1em;\n\n  &:hover {\n    color: blue2;\n  }\n"], ["\n  height: 18px;\n  min-width: 18px;\n  display: flex;\n  border-radius: 50%;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  margin: 0 4px;\n  color: ", ";\n  font-size: 14px;\n  font-weight: ", ";\n  font-family: ", ";\n  line-height: 1em;\n\n  &:hover {\n    color: blue2;\n  }\n"])), function (_a) {
-    var isCurrent = _a.isCurrent;
-    return (isCurrent ? th.color('red1') : th.color('gray1'));
-}, function (_a) {
-    var isCurrent = _a.isCurrent;
-    return (isCurrent ? th.fontWeight('semiBold') : th.fontWeight('normal'));
-}, th('fonts.primary'));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+import Icon_default from "../Icon/index.js";
+import styled$1, { x } from "@xstyled/styled-components";
+import { th as th$1 } from "@xstyled/system";
+//#region packages/ui/Elements/Pagination/styled.tsx
+const Wrapper = styled$1(x.div)`
+  display: inline-flex;
+  align-items: center;
+
+  & > *:not(:last-child) {
+    margin-right: 1px;
+    @media (min-width: 1024px) {
+      margin-right: 4px;
+    }
+  }
+`;
+const Btn = styled$1.button`
+  background-color: transparent;
+  border: none;
+  cursor: ${({ disabled }) => disabled ? "default" : "pointer"};
+  opacity: ${({ disabled }) => disabled ? 0 : 1};
+`;
+const ArrowIcon = styled$1(Icon_default)`
+  border-radius: 50%;
+  aspect-ratio: 1 / 1;
+  width: 16px;
+  display: flex;
+  align-items: center;
+  color: blue2;
+
+  &:hover {
+    color: blue2;
+  }
+`;
+const GoIcon = styled$1(ArrowIcon)`
+  margin: 0 8px;
+  font-size: 12px;
+  & > svg {
+    width: 10px;
+  }
+`;
+const DotsWrapper = styled$1.div`
+  color: gray1;
+`;
+const PageBtn = styled$1.span`
+  height: 18px;
+  min-width: 18px;
+  display: flex;
+  border-radius: 50%;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  margin: 0 4px;
+  color: ${({ isCurrent }) => isCurrent ? th$1.color("red1") : th$1.color("gray1")};
+  font-size: 14px;
+  font-weight: ${({ isCurrent }) => isCurrent ? th$1.fontWeight("semiBold") : th$1.fontWeight("normal")};
+  font-family: ${th$1("fonts.primary")};
+  line-height: 1em;
+
+  &:hover {
+    color: blue2;
+  }
+`;
+//#endregion
+export { ArrowIcon, Btn, DotsWrapper, GoIcon, PageBtn, Wrapper };

package/ui/Elements/Portal/index.d.ts

@@ -1,5 +1,4 @@
-import { FC, ReactNode } from 'react';
-
+import { type FC, type ReactNode } from 'react';
 export declare const Portal: FC<{
     children?: ReactNode;
 }>;

package/ui/Elements/Portal/index.js

@@ -1,24 +1,23 @@
-import { useEffect, useState } from 'react';
-import ReactDom from 'react-dom';
-export var Portal = function (_a) {
-    var children = _a.children;
-    var container = useState(function () { return document.createElement('div'); })[0];
-    useEffect(function () {
-        try {
-            document.body.appendChild(container);
-        }
-        catch (e) {
-            console.log(e);
-        }
-        return function () {
-            try {
-                document.body.removeChild(container);
-            }
-            catch (e) {
-                console.log(e);
-            }
-        };
-    }, []);
-    return ReactDom.createPortal(children, container);
+import { useEffect, useState } from "react";
+import ReactDom from "react-dom";
+//#region packages/ui/Elements/Portal/index.ts
+const Portal = ({ children }) => {
+	const [container] = useState(() => document.createElement("div"));
+	useEffect(() => {
+		try {
+			document.body.appendChild(container);
+		} catch (e) {
+			console.log(e);
+		}
+		return () => {
+			try {
+				document.body.removeChild(container);
+			} catch (e) {
+				console.log(e);
+			}
+		};
+	}, []);
+	return ReactDom.createPortal(children, container);
 };
-export default Portal;
+//#endregion
+export { Portal, Portal as default };

package/ui/Elements/ProgressBar/ProgressBar.d.ts

@@ -1,5 +1,4 @@
-import { FC } from 'react';
-
+import { type FC } from 'react';
 type Props = {
     progress?: number;
     status?: 'loading' | 'finished' | 'error';

package/ui/Elements/ProgressBar/ProgressBar.js

@@ -1,9 +1,17 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { StyledProgressBar, Progress, ProgressDescription } from './styles';
-var ProgressBar = function (_a) {
-    var _b = _a.progress, progress = _b === void 0 ? 0 : _b, status = _a.status, errorMessage = _a.errorMessage, noText = _a.noText, variant = _a.variant;
-    if (progress > 100 || progress < 0)
-        console.warn('Progress value should be number between 0 and 100.');
-    return (_jsxs(StyledProgressBar, { status: status, variant: variant, children: [_jsx(Progress, { progress: progress, status: status }), !noText && _jsx(ProgressDescription, { children: status === 'error' && errorMessage ? errorMessage : "".concat(progress, "%") })] }));
+import { Progress, ProgressDescription, StyledProgressBar } from "./styles.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Elements/ProgressBar/ProgressBar.tsx
+const ProgressBar = ({ progress = 0, status, errorMessage, noText, variant }) => {
+	if (progress > 100 || progress < 0) console.warn("Progress value should be number between 0 and 100.");
+	return /* @__PURE__ */ jsxs(StyledProgressBar, {
+		status,
+		variant,
+		children: [/* @__PURE__ */ jsx(Progress, {
+			progress,
+			status
+		}), !noText && /* @__PURE__ */ jsx(ProgressDescription, { children: status === "error" && errorMessage ? errorMessage : `${progress}%` })]
+	});
 };
-export default ProgressBar;
+//#endregion
+export { ProgressBar as default };

package/ui/Elements/ProgressBar/index.d.ts

@@ -1,4 +1,3 @@
-import { default as ProgressBar } from './ProgressBar';
-
+import ProgressBar from './ProgressBar';
 export { ProgressBar };
 export default ProgressBar;

package/ui/Elements/ProgressBar/index.js

@@ -1,3 +1,5 @@
-import ProgressBar from './ProgressBar';
-export { ProgressBar };
-export default ProgressBar;
+import ProgressBar from "./ProgressBar.js";
+//#region packages/ui/Elements/ProgressBar/index.ts
+var ProgressBar_default = ProgressBar;
+//#endregion
+export { ProgressBar, ProgressBar_default as default };

package/ui/Elements/ProgressBar/stories/ProgressBar.stories.d.ts

@@ -1,13 +1,12 @@
-import { StoryObj } from '@storybook/react-webpack5';
-
+import type { StoryObj } from '@storybook/react-webpack5';
 declare const meta: {
     title: string;
-    component: import('react').FC<{
-        progress?: number | undefined;
-        status?: "error" | "loading" | "finished" | undefined;
-        errorMessage?: string | undefined;
-        noText?: boolean | undefined;
-        variant?: "normal" | "thin" | undefined;
+    component: import("react").FC<{
+        progress?: number;
+        status?: "loading" | "finished" | "error";
+        errorMessage?: string;
+        noText?: boolean;
+        variant?: "normal" | "thin";
     }>;
     tags: string[];
     argTypes: {};

package/ui/Elements/ProgressBar/styles.d.ts

@@ -1,9 +1,9 @@
-export declare const StyledProgressBar: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const StyledProgressBar: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     status: string | null | undefined;
-    variant?: "normal" | "thin" | undefined;
+    variant?: "normal" | "thin";
 }, never>;
-export declare const Progress: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const Progress: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     progress: number;
     status: string | null | undefined;
 }, never>;
-export declare const ProgressDescription: import('styled-components').StyledComponent<"span", import('@xstyled/system').Theme, {}, never>;
+export declare const ProgressDescription: import("styled-components").StyledComponent<"span", import("@xstyled/styled-components").Theme, {}, never>;

package/ui/Elements/ProgressBar/styles.js

@@ -1,19 +1,72 @@
-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;
+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 };

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

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

package/ui/Elements/Select/Select.js

@@ -1,111 +1,97 @@
-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 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 __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;
+//#endregion
+export { Select as default };

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

@@ -1,23 +1,31 @@
-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 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
+		})]
+	});
 };
-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;
+//#endregion
+export { ChevronOption, ChevronOption as default };