@mailstep/design-system 0.6.2-beta.1 → 0.6.2-beta.3

package/ui/Elements/ProgressBar/ProgressBar.js

@@ -1,9 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { StyledProgressBar, Progress, ProgressDescription } from './styles';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styles_1 = require("./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, "%") })] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledProgressBar, { status: status, variant: variant, children: [(0, jsx_runtime_1.jsx)(styles_1.Progress, { progress: progress, status: status }), !noText && (0, jsx_runtime_1.jsx)(styles_1.ProgressDescription, { children: status === 'error' && errorMessage ? errorMessage : "".concat(progress, "%") })] }));
 };
-export default ProgressBar;
+exports.default = ProgressBar;

package/ui/Elements/ProgressBar/index.js

@@ -1,3 +1,9 @@
-import ProgressBar from './ProgressBar';
-export { ProgressBar };
-export default ProgressBar;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressBar = void 0;
+var ProgressBar_1 = __importDefault(require("./ProgressBar"));
+exports.ProgressBar = ProgressBar_1.default;
+exports.default = ProgressBar_1.default;

package/ui/Elements/ProgressBar/stories/ProgressBar.stories.js

@@ -1,24 +1,30 @@
-import ProgressBar from '../ProgressBar';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Error = exports.Finished = exports.Loading = void 0;
+var ProgressBar_1 = __importDefault(require("../ProgressBar"));
 var meta = {
     title: 'Elements/ProgressBar',
-    component: ProgressBar,
+    component: ProgressBar_1.default,
     tags: ['autodocs'],
     argTypes: {},
 };
-export default meta;
-export var Loading = {
+exports.default = meta;
+exports.Loading = {
     args: {
         progress: 10,
         status: "loading"
     },
 };
-export var Finished = {
+exports.Finished = {
     args: {
         progress: 100,
         status: "finished"
     },
 };
-export var Error = {
+exports.Error = {
     args: {
         progress: 30,
         status: "error",

package/ui/Elements/ProgressBar/styles.js

@@ -1,19 +1,45 @@
+"use strict";
 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) {
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressDescription = exports.Progress = exports.StyledProgressBar = void 0;
+var styled_components_1 = __importStar(require("@xstyled/styled-components"));
+var styled_components_2 = require("@xstyled/styled-components");
+var utils_1 = require("../../utils");
+exports.StyledProgressBar = styled_components_1.default.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"); }, (0, styled_components_2.th)('colors.white'), function (props) {
+    return props.status === 'finished' ? (0, utils_1.createRgba)(props.theme.colors.success, 0.4) : "".concat((0, styled_components_2.th)('colors.red1'));
+}, function (props) { return (props.status === 'finished' ? "".concat((0, styled_components_2.th)('colors.success')) : "".concat((0, styled_components_2.th)('colors.red1'))); });
+var slide = (0, styled_components_1.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 = (0, styled_components_1.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 (0, utils_1.createRgba)(props.theme.colors.success, 0.4); }, function (props) { return (0, utils_1.createRgba)(props.theme.colors.success, 0.4); }, (0, styled_components_2.th)('colors.success'), (0, styled_components_2.th)('colors.success'));
+var StyledStatusLoading = (0, styled_components_1.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"])), (0, styled_components_2.th)('colors.red1'), (0, styled_components_2.th)('colors.red1'), (0, styled_components_2.th)('colors.red1'), (0, styled_components_2.th)('colors.red1'));
+var StyledStatusError = (0, styled_components_1.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"])), (0, styled_components_2.th)('colors.red1'), (0, styled_components_2.th)('colors.red1'), (0, styled_components_2.th)('colors.red1'), (0, styled_components_2.th)('colors.red1'));
+exports.Progress = styled_components_1.default.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"])));
+exports.ProgressDescription = styled_components_1.default.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.js

@@ -1,3 +1,4 @@
+"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -20,38 +21,42 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo } from 'react';
-import { Wrapper, StyledReactSelect, StyledAsyncSelect } from './styles';
-import { useStylesAndComponents } from './themes';
-import { useTheme } from '@xstyled/styled-components';
-import SpaceAroundWrap from '../SpaceAround';
-import { FieldLabel } from '../Label';
-import { ErrorMessage } from '../ErrorMessage';
-import { i18n } from '@lingui/core';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styles_1 = require("./styles");
+var themes_1 = require("./themes");
+var styled_components_1 = require("@xstyled/styled-components");
+var SpaceAround_1 = __importDefault(require("../SpaceAround"));
+var Label_1 = require("../Label");
+var ErrorMessage_1 = require("../ErrorMessage");
+var core_1 = require("@lingui/core");
 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 noOptionsMessage = function () { return core_1.i18n._({ id: 'select.noOptions', message: 'no options' }); };
+var loadingMessage = function () { return core_1.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.showResetGridButton, showResetGridButton = _g === void 0 ? false : _g, 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, resetGrid = _a.resetGrid, passTroughProps = __rest(_a, ["label", "name", "value", "options", "defaultOptions", "loadOptions", "onChange", "onBlur", "error", "isInvalid", "isLoading", "isDarkPlaceholderText", "spaceAround", "disabled", "onInputChange", "isSearchable", "isMulti", "className", "useSimplifiedOptions", "showSelectAllButton", "showResetGridButton", "style", "optionVariant", "multiLabelVariant", "containerVariant", "placeholder", "placeholderIcon", "innerRef", "maxMenuHeight", "getOptionValue", "resetGrid"]);
     var isAsync = !!loadOptions;
     if (showSelectAllButton && (loadOptions || !isMulti)) {
         console.error('CheckboxSelect incompatible props');
     }
-    var setAllOptions = useCallback(function () {
+    var setAllOptions = (0, react_1.useCallback)(function () {
         onChange === null || onChange === void 0 ? void 0 : onChange((options || []));
     }, [onChange, options]);
-    var unsetAllOptions = useCallback(function () {
+    var unsetAllOptions = (0, react_1.useCallback)(function () {
         if (typeof onChange === 'function') {
             onChange === null || onChange === void 0 ? void 0 : onChange(emptyOptions);
         }
     }, [onChange]);
     var icon = containerVariant === 'search' ? 'search' : placeholderIcon ? placeholderIcon : undefined;
     var modifiedMaxMenuHeight = showResetGridButton && showSelectAllButton && maxMenuHeight ? maxMenuHeight - 30 : maxMenuHeight;
-    var _h = useStylesAndComponents(style, optionVariant, multiLabelVariant, containerVariant, useSimplifiedOptions, showSelectAllButton, showResetGridButton), customComponents = _h[0], customTheme = _h[1], customStyles = _h[2];
-    var RenderComponent = isAsync ? StyledAsyncSelect : StyledReactSelect;
+    var _h = (0, themes_1.useStylesAndComponents)(style, optionVariant, multiLabelVariant, containerVariant, useSimplifiedOptions, showSelectAllButton, showResetGridButton), customComponents = _h[0], customTheme = _h[1], customStyles = _h[2];
+    var RenderComponent = isAsync ? styles_1.StyledAsyncSelect : styles_1.StyledReactSelect;
     var selectedOption;
-    var localGetOptionValue = useMemo(function () { return getOptionValue || (function (option) { return option === null || option === void 0 ? void 0 : option.value; }); }, [getOptionValue]);
+    var localGetOptionValue = (0, react_1.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;
@@ -59,11 +64,11 @@ var Select = function (_a) {
     else if (value !== undefined) {
         selectedOption = (defaultOptions || options).find(function (option) { return localGetOptionValue(option) === value; }) || null;
     }
-    var theme = useTheme();
+    var theme = (0, styled_components_1.useTheme)();
     // strip extra params
-    var handleLoadOptions = useMemo(function () {
+    var handleLoadOptions = (0, react_1.useMemo)(function () {
         return loadOptions ? function (fulltext) { return loadOptions(fulltext); } : 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, hideSelectedOptions: !!(isMulti && multiLabelVariant != 'count'), onInputChange: onInputChange, isSearchable: isAsync || isSearchable, isMulti: isMulti, classNamePrefix: "react-select", components: customComponents, closeMenuOnSelect: isMulti ? false : undefined }, passTroughProps, { ref: innerRef, tabIndex: null, systemTheme: theme, resetGrid: resetGrid, onCustomSelectAll: setAllOptions, onCustomDeselectAll: unsetAllOptions, selectAllButton: showSelectAllButton, resetGridButton: showResetGridButton, maxMenuHeight: modifiedMaxMenuHeight, getOptionValue: getOptionValue, noOptionsMessage: noOptionsMessage, loadingMessage: loadingMessage }))] }), error && _jsx(ErrorMessage, { children: error })] }));
+    return ((0, jsx_runtime_1.jsxs)(SpaceAround_1.default, { spaceAround: spaceAround, className: className, children: [(0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { children: [label && (0, jsx_runtime_1.jsx)(Label_1.FieldLabel, { htmlFor: name, children: label }), (0, jsx_runtime_1.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 || core_1.i18n._({ id: 'components.dropdown.placeholder', message: 'Select...' }), styles: customStyles, theme: customTheme, icon: icon, hideSelectedOptions: !!(isMulti && multiLabelVariant != 'count'), onInputChange: onInputChange, isSearchable: isAsync || isSearchable, isMulti: isMulti, classNamePrefix: "react-select", components: customComponents, closeMenuOnSelect: isMulti ? false : undefined }, passTroughProps, { ref: innerRef, tabIndex: null, systemTheme: theme, resetGrid: resetGrid, onCustomSelectAll: setAllOptions, onCustomDeselectAll: unsetAllOptions, selectAllButton: showSelectAllButton, resetGridButton: showResetGridButton, maxMenuHeight: modifiedMaxMenuHeight, getOptionValue: getOptionValue, noOptionsMessage: noOptionsMessage, loadingMessage: loadingMessage }))] }), error && (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, { children: error })] }));
 };
-export default Select;
+exports.default = Select;

package/ui/Elements/Select/index.js

@@ -1,2 +1,7 @@
-import Select from './Select';
-export default Select;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var Select_1 = __importDefault(require("./Select"));
+exports.default = Select_1.default;

package/ui/Elements/Select/styles.js

@@ -1,12 +1,18 @@
+"use strict";
 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 from '@xstyled/styled-components';
-import ReactSelect from 'react-select';
-import AsyncSelect from 'react-select/async';
-import { system } from '@xstyled/system';
-export var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
-export var StyledReactSelect = styled(ReactSelect)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n  font-size: 14px;\n"], ["\n  ", ";\n  font-size: 14px;\n"])), system);
-export var StyledAsyncSelect = styled(AsyncSelect)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", ";\n  font-size: 14px;\n"], ["\n  ", ";\n  font-size: 14px;\n"])), system);
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledAsyncSelect = exports.StyledReactSelect = exports.Wrapper = void 0;
+var styled_components_1 = __importDefault(require("@xstyled/styled-components"));
+var react_select_1 = __importDefault(require("react-select"));
+var async_1 = __importDefault(require("react-select/async"));
+var system_1 = require("@xstyled/system");
+exports.Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+exports.StyledReactSelect = (0, styled_components_1.default)(react_select_1.default)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n  font-size: 14px;\n"], ["\n  ", ";\n  font-size: 14px;\n"])), system_1.system);
+exports.StyledAsyncSelect = (0, styled_components_1.default)(async_1.default)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", ";\n  font-size: 14px;\n"], ["\n  ", ";\n  font-size: 14px;\n"])), system_1.system);
 var templateObject_1, templateObject_2, templateObject_3;

package/ui/Elements/Select/themes/CustomComponents.js

@@ -1,3 +1,4 @@
+"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
@@ -13,6 +14,29 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 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)
@@ -24,73 +48,81 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo, memo, useState, useEffect, useRef } from 'react';
-import { components } from 'react-select';
-import styled, { th } from '@xstyled/styled-components';
-import { components as selectComponents } from 'react-select';
-import { Trans } from '@lingui/react';
-import Icon from '../../Icon/Icon';
-import { Paragraph3 } from '../../Typography/Typography';
-import Checkbox from '../../../Forms/Checkbox/Checkbox';
-import Toggle from '../../Toggle/Toggle';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropdownIndicator = exports.CustomInput = exports.ConnectedMenu = exports.ChevronOption = exports.CountMultiValue = exports.IconValueContainer = exports.SimplifiedOption = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_select_1 = require("react-select");
+var styled_components_1 = __importStar(require("@xstyled/styled-components"));
+var react_select_2 = require("react-select");
+var react_2 = require("@lingui/react");
+var Icon_1 = __importDefault(require("../../Icon/Icon"));
+var Typography_1 = require("../../Typography/Typography");
+var Checkbox_1 = __importDefault(require("../../../Forms/Checkbox/Checkbox"));
+var Toggle_1 = __importDefault(require("../../Toggle/Toggle"));
 // Option for big lists
 var SimplifiedOptionInner = function (props) {
     var styles = props.getStyles('option', props);
     var data = props.data, selectOption = props.selectOption, innerProps = props.innerProps;
-    var handleClick = useCallback(function () { return selectOption(data); }, [data, selectOption]);
-    return (_jsx("div", { style: styles, onClick: handleClick, onMouseOver: innerProps.onMouseOver, onMouseMove: innerProps.onMouseMove, children: props.label }));
+    var handleClick = (0, react_1.useCallback)(function () { return selectOption(data); }, [data, selectOption]);
+    return ((0, jsx_runtime_1.jsx)("div", { style: styles, onClick: handleClick, onMouseOver: innerProps.onMouseOver, onMouseMove: innerProps.onMouseMove, children: props.label }));
 };
-export var SimplifiedOption = memo(SimplifiedOptionInner, function (prevProps, nextProps) { var _a, _b; return prevProps.isFocused === nextProps.isFocused && ((_a = prevProps.data) === null || _a === void 0 ? void 0 : _a.label) === ((_b = nextProps.data) === null || _b === void 0 ? void 0 : _b.label); });
+exports.SimplifiedOption = (0, react_1.memo)(SimplifiedOptionInner, function (prevProps, nextProps) { var _a, _b; return prevProps.isFocused === nextProps.isFocused && ((_a = prevProps.data) === null || _a === void 0 ? void 0 : _a.label) === ((_b = nextProps.data) === null || _b === void 0 ? void 0 : _b.label); });
 // Value container with icon
-var IconDiv = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-left: 12px;\n  align-self: center;\n"], ["\n  padding-left: 12px;\n  align-self: center;\n"])));
-export var IconValueContainer = function (props) {
+var IconDiv = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-left: 12px;\n  align-self: center;\n"], ["\n  padding-left: 12px;\n  align-self: center;\n"])));
+var IconValueContainer = function (props) {
     var _a;
     // eslint-disable-next-line react/prop-types
     var children = props.children, rest = __rest(props, ["children"]);
     var icon = (_a = rest.selectProps) === null || _a === void 0 ? void 0 : _a.icon;
-    return (_jsxs(_Fragment, { children: [icon && (_jsx(IconDiv, { className: "inputIcon", children: _jsx(Icon, { icon: icon }) })), _jsx(components.ValueContainer, __assign({}, rest, { children: children }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon && ((0, jsx_runtime_1.jsx)(IconDiv, { className: "inputIcon", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { icon: icon }) })), (0, jsx_runtime_1.jsx)(react_select_1.components.ValueContainer, __assign({}, rest, { children: children }))] }));
 };
+exports.IconValueContainer = IconValueContainer;
 // MultiValue container replacement with count of selected options
-export var CountMultiValue = function (props) {
+var CountMultiValue = function (props) {
     var _a, _b;
     var selectVal = props.selectProps.value;
     var inputVal = props.selectProps.inputValue;
-    var transValues = useMemo(function () { return ({ count: selectVal.length }); }, [selectVal.length]);
+    var transValues = (0, react_1.useMemo)(function () { return ({ count: selectVal.length }); }, [selectVal.length]);
     if (!inputVal && ((_a = props.data) === null || _a === void 0 ? void 0 : _a.value) == ((_b = selectVal[0]) === null || _b === void 0 ? void 0 : _b.value)) {
-        return (_jsx(selectComponents.SingleValue, __assign({}, props, { children: selectVal.length > 1 ? (_jsx(Trans, { id: "datagrid.filterCell.optionsSelectedLabel", message: '{count} options', values: transValues })) : (props.children) })));
+        return ((0, jsx_runtime_1.jsx)(react_select_2.components.SingleValue, __assign({}, props, { children: selectVal.length > 1 ? ((0, jsx_runtime_1.jsx)(react_2.Trans, { id: "datagrid.filterCell.optionsSelectedLabel", message: '{count} options', values: transValues })) : (props.children) })));
     }
     else {
         return null;
     }
 };
+exports.CountMultiValue = CountMultiValue;
 // Option with chevron form new design
-var ChevronDiv = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-self: center;\n  display: flex;\n"], ["\n  align-self: center;\n  display: flex;\n"])));
-var SelectedIndicator = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding-right: 12px;\n"], ["\n  padding-right: 12px;\n"])));
-export var ChevronOption = function (props) {
+var ChevronDiv = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-self: center;\n  display: flex;\n"], ["\n  align-self: center;\n  display: flex;\n"])));
+var SelectedIndicator = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding-right: 12px;\n"], ["\n  padding-right: 12px;\n"])));
+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 })] })));
+    return ((0, jsx_runtime_1.jsxs)(react_select_2.components.Option, __assign({}, props, { children: [(showCheckbox || showToggle) && ((0, jsx_runtime_1.jsxs)(SelectedIndicator, { children: [showCheckbox && (0, jsx_runtime_1.jsx)(Checkbox_1.default, { checked: isSelected, size: 2, readOnly: true }), showToggle && (0, jsx_runtime_1.jsx)(Toggle_1.default, { name: "", onChange: selectOption, checked: isSelected, spaceAround: false, variant: 'grid' })] })), (0, jsx_runtime_1.jsx)("span", { className: "label", "data-cy": "dropdownModalOption".concat(data.index), children: children })] })));
 };
+exports.ChevronOption = ChevronOption;
 // menu with check all and reset config button
-var SelectAll = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  margin: 4px 18px -10px 8px;\n  padding: ", ";\n  font-weight: 400;\n  background-color: ", ";\n  color: blue2;\n  border-radius: 6px;\n  height: 36px;\n  :hover {\n    cursor: pointer;\n    background-color: bgLightGray1;\n  }\n"], ["\n  display: flex;\n  margin: 4px 18px -10px 8px;\n  padding: ", ";\n  font-weight: 400;\n  background-color: ", ";\n  color: blue2;\n  border-radius: 6px;\n  height: 36px;\n  :hover {\n    cursor: pointer;\n    background-color: bgLightGray1;\n  }\n"])), function (_a) {
+var SelectAll = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  margin: 4px 18px -10px 8px;\n  padding: ", ";\n  font-weight: 400;\n  background-color: ", ";\n  color: blue2;\n  border-radius: 6px;\n  height: 36px;\n  :hover {\n    cursor: pointer;\n    background-color: bgLightGray1;\n  }\n"], ["\n  display: flex;\n  margin: 4px 18px -10px 8px;\n  padding: ", ";\n  font-weight: 400;\n  background-color: ", ";\n  color: blue2;\n  border-radius: 6px;\n  height: 36px;\n  :hover {\n    cursor: pointer;\n    background-color: bgLightGray1;\n  }\n"])), function (_a) {
     var additionalPadding = _a.additionalPadding;
     return (additionalPadding ? '8px 27px 8px 10px' : '8px 10px');
 }, function (_a) {
     var isSelected = _a.isSelected;
-    return (isSelected ? th.color('red20') : 'transparent');
+    return (isSelected ? styled_components_1.th.color('red20') : 'transparent');
 });
-var ConfigWrap = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  text-align: center;\n  cursor: pointer;\n  color: red1;\n  text-decoration: underline;\n  margin: 0 30px 0 20px;\n  padding-bottom: 7px;\n  :first-letter {\n    text-transform: capitalize;\n  }\n  :hover {\n    color: red3;\n  }\n"], ["\n  text-align: center;\n  cursor: pointer;\n  color: red1;\n  text-decoration: underline;\n  margin: 0 30px 0 20px;\n  padding-bottom: 7px;\n  :first-letter {\n    text-transform: capitalize;\n  }\n  :hover {\n    color: red3;\n  }\n"])));
-export var ConnectedMenu = function (props) {
+var ConfigWrap = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  text-align: center;\n  cursor: pointer;\n  color: red1;\n  text-decoration: underline;\n  margin: 0 30px 0 20px;\n  padding-bottom: 7px;\n  :first-letter {\n    text-transform: capitalize;\n  }\n  :hover {\n    color: red3;\n  }\n"], ["\n  text-align: center;\n  cursor: pointer;\n  color: red1;\n  text-decoration: underline;\n  margin: 0 30px 0 20px;\n  padding-bottom: 7px;\n  :first-letter {\n    text-transform: capitalize;\n  }\n  :hover {\n    color: red3;\n  }\n"])));
+var ConnectedMenu = function (props) {
     var theme = props.theme;
     var _a = props.selectProps, resetGrid = _a.resetGrid, onCustomSelectAll = _a.onCustomSelectAll, onCustomDeselectAll = _a.onCustomDeselectAll, value = _a.value, options = _a.options, resetGridButton = _a.resetGridButton, selectAllButton = _a.selectAllButton, maxMenuHeight = _a.maxMenuHeight;
     var showCheckbox = !!(theme.optionVariant === 'checkbox');
     var showToggle = !!(theme.optionVariant === 'toggle');
-    var _b = useState(false), isSelected = _b[0], setIsSelected = _b[1];
-    var _c = useState(false), additionalPadding = _c[0], setAdditionalPadding = _c[1];
-    var ref = useRef(null);
-    useEffect(function () {
+    var _b = (0, react_1.useState)(false), isSelected = _b[0], setIsSelected = _b[1];
+    var _c = (0, react_1.useState)(false), additionalPadding = _c[0], setAdditionalPadding = _c[1];
+    var ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
         var _a;
         // if the height of all options is higher than maxMenuHeight and the slider is displayed => the indentation needs to be increased
         ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) && setAdditionalPadding(ref.current.offsetHeight * options.length > maxMenuHeight);
@@ -101,7 +133,7 @@ export var ConnectedMenu = function (props) {
         else
             return;
     }, [additionalPadding, maxMenuHeight, options.length, value]);
-    var selectAll = useCallback(function () {
+    var selectAll = (0, react_1.useCallback)(function () {
         if (!isSelected) {
             setIsSelected(true);
             onCustomSelectAll();
@@ -111,15 +143,18 @@ export var ConnectedMenu = function (props) {
             onCustomDeselectAll();
         }
     }, [isSelected, onCustomDeselectAll, onCustomSelectAll]);
-    return (_jsxs(selectComponents.Menu, __assign({}, props, { children: [selectAllButton && (_jsxs(SelectAll, { isSelected: isSelected, onClick: selectAll, ref: ref, additionalPadding: additionalPadding, children: [(showCheckbox || showToggle) && (_jsxs(SelectedIndicator, { children: [showCheckbox && _jsx(Checkbox, { checked: isSelected, size: 2, readOnly: true }), showToggle && _jsx(Toggle, { name: "", checked: isSelected, spaceAround: false, variant: 'grid' })] })), _jsx(Trans, { id: "datagrid.filterCell.selectAllLabel", message: 'select all' })] })), props.children, resetGridButton && (_jsx(ConfigWrap, { onClick: resetGrid, children: _jsx(Paragraph3, { variant: "semiBold", children: _jsx(Trans, { id: "dataGrid.buttonClearConfig", message: "Reset config" }) }) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(react_select_2.components.Menu, __assign({}, props, { children: [selectAllButton && ((0, jsx_runtime_1.jsxs)(SelectAll, { isSelected: isSelected, onClick: selectAll, ref: ref, additionalPadding: additionalPadding, children: [(showCheckbox || showToggle) && ((0, jsx_runtime_1.jsxs)(SelectedIndicator, { children: [showCheckbox && (0, jsx_runtime_1.jsx)(Checkbox_1.default, { checked: isSelected, size: 2, readOnly: true }), showToggle && (0, jsx_runtime_1.jsx)(Toggle_1.default, { name: "", checked: isSelected, spaceAround: false, variant: 'grid' })] })), (0, jsx_runtime_1.jsx)(react_2.Trans, { id: "datagrid.filterCell.selectAllLabel", message: 'select all' })] })), props.children, resetGridButton && ((0, jsx_runtime_1.jsx)(ConfigWrap, { onClick: resetGrid, children: (0, jsx_runtime_1.jsx)(Typography_1.Paragraph3, { variant: "semiBold", children: (0, jsx_runtime_1.jsx)(react_2.Trans, { id: "dataGrid.buttonClearConfig", message: "Reset config" }) }) }))] })));
 };
-export var CustomInput = function (props) {
+exports.ConnectedMenu = ConnectedMenu;
+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 }));
+    return (0, jsx_runtime_1.jsx)(react_select_2.components.Input, __assign({}, props, { "data-cy": value }));
 };
-export var DropdownIndicator = function (props) {
+exports.CustomInput = CustomInput;
+var DropdownIndicator = function (props) {
     var _a = props.selectProps, menuIsOpen = _a.menuIsOpen, name = _a.name;
-    return (_jsx(selectComponents.DropdownIndicator, __assign({}, props, { children: _jsx(ChevronDiv, { className: "chevron", "data-cy": "".concat(name, "ChevronBtn"), children: _jsx(Icon, { icon: menuIsOpen ? 'goUp' : 'goDown', size: '100%' }) }) })));
+    return ((0, jsx_runtime_1.jsx)(react_select_2.components.DropdownIndicator, __assign({}, props, { children: (0, jsx_runtime_1.jsx)(ChevronDiv, { className: "chevron", "data-cy": "".concat(name, "ChevronBtn"), children: (0, jsx_runtime_1.jsx)(Icon_1.default, { icon: menuIsOpen ? 'goUp' : 'goDown', size: '100%' }) }) })));
 };
+exports.DropdownIndicator = DropdownIndicator;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/ui/Elements/Select/themes/baseStyles.js

@@ -1,3 +1,4 @@
+"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -9,9 +10,14 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import createRgba from '../../../utils/CreateRgba/createRgba';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.baseStylesConfig = void 0;
+var createRgba_1 = __importDefault(require("../../../utils/CreateRgba/createRgba"));
 // style object https://react-select.com/styles
-export var baseStylesConfig = {
+exports.baseStylesConfig = {
     control: function (styles, _a) {
         var _b;
         var selectProps = _a.selectProps, theme = _a.theme, isFocused = _a.isFocused, isDisabled = _a.isDisabled;
@@ -28,19 +34,19 @@ export var baseStylesConfig = {
     },
     dropdownIndicator: function (styles, _a) {
         var theme = _a.theme;
-        return (__assign(__assign({}, styles), { justifyContent: 'center', alignItems: 'center', padding: '0 4px', color: createRgba(theme.colors.inputTextColor, 0.25) }));
+        return (__assign(__assign({}, styles), { justifyContent: 'center', alignItems: 'center', padding: '0 4px', color: (0, createRgba_1.default)(theme.colors.inputTextColor, 0.25) }));
     },
     clearIndicator: function (styles, _a) {
         var theme = _a.theme;
-        return (__assign(__assign({}, styles), { justifyContent: 'center', alignItems: 'center', padding: '0 4px', color: createRgba(theme.colors.inputTextColor, 0.25) }));
+        return (__assign(__assign({}, styles), { justifyContent: 'center', alignItems: 'center', padding: '0 4px', color: (0, createRgba_1.default)(theme.colors.inputTextColor, 0.25) }));
     },
     loadingIndicator: function (styles, _a) {
         var theme = _a.theme;
-        return (__assign(__assign({}, styles), { justifyContent: 'center', alignItems: 'center', padding: '0 4px', color: createRgba(theme.colors.inputTextColor, 0.25) }));
+        return (__assign(__assign({}, styles), { justifyContent: 'center', alignItems: 'center', padding: '0 4px', color: (0, createRgba_1.default)(theme.colors.inputTextColor, 0.25) }));
     },
     indicatorSeparator: function (styles, _a) {
         var theme = _a.theme;
-        return (__assign(__assign({}, styles), { backgroundColor: createRgba(theme.colors.inputTextColor, 0.25) }));
+        return (__assign(__assign({}, styles), { backgroundColor: (0, createRgba_1.default)(theme.colors.inputTextColor, 0.25) }));
     },
     input: function (styles, _a) {
         var theme = _a.theme;