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

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

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10,12 +9,10 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getCustomTheme = exports.CustomStyles = void 0;
-var baseStyles_1 = require("./baseStyles");
-var system_1 = require("@xstyled/system");
+import { baseStylesConfig } from './baseStyles.js';
+import { th } from '@xstyled/system';
 // style object https://react-select.com/styles
-exports.CustomStyles = __assign(__assign({}, baseStyles_1.baseStylesConfig), { control: function (styles, _a) {
+export var CustomStyles = __assign(__assign({}, baseStylesConfig), { control: function (styles, _a) {
         var _b;
         var selectProps = _a.selectProps, theme = _a.theme, isFocused = _a.isFocused, isDisabled = _a.isDisabled;
         var colors = theme.colors;
@@ -31,7 +28,7 @@ exports.CustomStyles = __assign(__assign({}, baseStyles_1.baseStylesConfig), { c
     }, multiValue: function (styles, state) {
         var _a;
         var theme = state.theme;
-        var base = (_a = baseStyles_1.baseStylesConfig.multiValue) === null || _a === void 0 ? void 0 : _a.call(baseStyles_1.baseStylesConfig, styles, state);
+        var base = (_a = baseStylesConfig.multiValue) === null || _a === void 0 ? void 0 : _a.call(baseStylesConfig, styles, state);
         return __assign(__assign({}, base), { fontSize: '9px', fontWeight: theme.textWeightSemiBold });
     }, multiValueRemove: function (styles, _a) {
         var _b;
@@ -40,7 +37,7 @@ exports.CustomStyles = __assign(__assign({}, baseStyles_1.baseStylesConfig), { c
     }, placeholder: function (styles, state) {
         var _a;
         var theme = state.theme;
-        var base = (_a = baseStyles_1.baseStylesConfig.placeholder) === null || _a === void 0 ? void 0 : _a.call(baseStyles_1.baseStylesConfig, styles, state);
+        var base = (_a = baseStylesConfig.placeholder) === null || _a === void 0 ? void 0 : _a.call(baseStylesConfig, styles, state);
         return __assign(__assign({}, base), { fontSize: '14px', fontWeight: theme.textWeightSemiBold });
     }, option: function (styles, _a) {
         var isSelected = _a.isSelected, theme = _a.theme, isDisabled = _a.isDisabled, selectProps = _a.selectProps;
@@ -60,47 +57,46 @@ exports.CustomStyles = __assign(__assign({}, baseStyles_1.baseStylesConfig), { c
             marginRight: '4px',
             marginBottom: '2px',
             lineHeight: '22px',
-            borderRadius: system_1.th.radius('ml')({ theme: selectProps === null || selectProps === void 0 ? void 0 : selectProps.systemTheme }),
+            borderRadius: th.radius('ml')({ theme: selectProps === null || selectProps === void 0 ? void 0 : selectProps.systemTheme }),
             '&:hover': { backgroundColor: !isDisabled ? theme.colors.menuHoverBackgroundColor : undefined },
         };
     }, menu: function (styles, state) {
         var _a;
-        var base = (_a = baseStyles_1.baseStylesConfig.menu) === null || _a === void 0 ? void 0 : _a.call(baseStyles_1.baseStylesConfig, styles, state);
+        var base = (_a = baseStylesConfig.menu) === null || _a === void 0 ? void 0 : _a.call(baseStylesConfig, styles, state);
         return __assign(__assign({}, base), { boxShadow: '0 2px 20px 0 rgba(0, 0, 0, 0.10);', marginTop: '-0', paddingTop: '0', borderRadius: '10px', zIndex: 3 });
     }, dropdownIndicator: function (styles, state) {
         var _a;
-        var base = (_a = baseStyles_1.baseStylesConfig.dropdownIndicator) === null || _a === void 0 ? void 0 : _a.call(baseStyles_1.baseStylesConfig, styles, state);
+        var base = (_a = baseStylesConfig.dropdownIndicator) === null || _a === void 0 ? void 0 : _a.call(baseStylesConfig, styles, state);
         var theme = state.theme, isFocused = state.isFocused;
         return __assign(__assign({}, base), { color: isFocused ? theme.colors.inputTextColor : theme.colors.dropdownIndicatorColor, padding: '0px 5px 0px 0px', '@media (min-width: 1024px)': {
                 padding: '0px 5px 0px 1px',
             } });
     }, clearIndicator: function (styles, state) {
         var _a;
-        var base = (_a = baseStyles_1.baseStylesConfig.clearIndicator) === null || _a === void 0 ? void 0 : _a.call(baseStyles_1.baseStylesConfig, styles, state);
+        var base = (_a = baseStylesConfig.clearIndicator) === null || _a === void 0 ? void 0 : _a.call(baseStylesConfig, styles, state);
         var theme = state.theme;
         return __assign(__assign({}, base), { padding: theme.narrowIndicators ? '0px 0px 0px 2px' : '0px 4px' });
     }, 
     // invisible indicator separator
     indicatorSeparator: function () { return ({ display: 'none' }); } });
-var getCustomTheme = function (theme, optionVariant, useFilterSubvariant) {
-    var inputTextColor = system_1.th.color('blue2')({ theme: theme });
+export var getCustomTheme = function (theme, optionVariant, useFilterSubvariant) {
+    var inputTextColor = th.color('blue2')({ theme: theme });
     var customColors = {
-        primary: system_1.th.color('red1')({ theme: theme }),
+        primary: th.color('red1')({ theme: theme }),
         inputTextColor: inputTextColor,
-        valueTextColor: system_1.th.color('gray')({ theme: theme }),
-        placeholderTextColor: system_1.th.color('lightGray3')({ theme: theme }),
-        optionTextColor: system_1.th.color('blue2')({ theme: theme }),
-        inputDisabledColor: system_1.th.color('lightGray1')({ theme: theme }),
+        valueTextColor: th.color('gray')({ theme: theme }),
+        placeholderTextColor: th.color('lightGray3')({ theme: theme }),
+        optionTextColor: th.color('blue2')({ theme: theme }),
+        inputDisabledColor: th.color('lightGray1')({ theme: theme }),
         inputBackgroundColor: "white",
-        inputBorderColor: system_1.th.color('lightGray3')({ theme: theme }),
-        inputBorderHoverColor: system_1.th.color('gray5')({ theme: theme }),
-        activeOptionBackground: system_1.th.color('red20')({ theme: theme }),
-        menuBackgroundColor: system_1.th.color('white')({ theme: theme }),
-        menuHoverBackgroundColor: system_1.th.color('bgLightGray1')({ theme: theme }),
-        dropdownIndicatorColor: system_1.th.color('gray1')({ theme: theme }),
+        inputBorderColor: th.color('lightGray3')({ theme: theme }),
+        inputBorderHoverColor: th.color('gray5')({ theme: theme }),
+        activeOptionBackground: th.color('red20')({ theme: theme }),
+        menuBackgroundColor: th.color('white')({ theme: theme }),
+        menuHoverBackgroundColor: th.color('bgLightGray1')({ theme: theme }),
+        dropdownIndicatorColor: th.color('gray1')({ theme: theme }),
     };
     return function (reactSelectTheme) {
-        return __assign(__assign({}, reactSelectTheme), { colors: customColors, focusBoxShadow: null, height: useFilterSubvariant ? '32px' : '38px', textWeightRegular: system_1.th.fontWeight('regular')({ theme: theme }), textWeightSemiBold: system_1.th.fontWeight('semiBold')({ theme: theme }), textWeightBold: system_1.th.fontWeight('bold')({ theme: theme }), optionVariant: optionVariant, borderRadius: system_1.th.radius('lg')({ theme: theme }), font: system_1.th.font('primary')({ theme: theme }), narrowIndicators: !!useFilterSubvariant });
+        return __assign(__assign({}, reactSelectTheme), { colors: customColors, focusBoxShadow: null, height: useFilterSubvariant ? '32px' : '38px', textWeightRegular: th.fontWeight('regular')({ theme: theme }), textWeightSemiBold: th.fontWeight('semiBold')({ theme: theme }), textWeightBold: th.fontWeight('bold')({ theme: theme }), optionVariant: optionVariant, borderRadius: th.radius('lg')({ theme: theme }), font: th.font('primary')({ theme: theme }), narrowIndicators: !!useFilterSubvariant });
     };
 };
-exports.getCustomTheme = getCustomTheme;

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

@@ -1,37 +1,34 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStylesAndComponents = void 0;
-var CustomComponents_1 = require("./CustomComponents");
-var formStyles_1 = require("./formStyles");
-var styled_components_1 = require("@xstyled/styled-components");
-var react_1 = require("react");
-var useStylesAndComponents = function (style, optionVariant, multiLabelVariant, containerVariant, useSimplifiedOptions, showSelectAllButton, showResetGridButton) {
+import { SimplifiedOption, IconValueContainer, CountMultiValue, ChevronOption, DropdownIndicator, CustomInput, ConnectedMenu, } from './CustomComponents.js';
+import { getCustomTheme as getFormCustomTheme, CustomStyles as FormCustomStyles } from './formStyles.js';
+import { useTheme } from '@xstyled/styled-components';
+import { useMemo } from 'react';
+export var useStylesAndComponents = function (style, optionVariant, multiLabelVariant, containerVariant, useSimplifiedOptions, showSelectAllButton, showResetGridButton) {
     if (style === void 0) { style = 'form'; }
     if (optionVariant === void 0) { optionVariant = 'default'; }
     if (multiLabelVariant === void 0) { multiLabelVariant = 'default'; }
     if (containerVariant === void 0) { containerVariant = 'default'; }
-    var systemTheme = (0, styled_components_1.useTheme)();
-    return (0, react_1.useMemo)(function () {
+    var systemTheme = useTheme();
+    return useMemo(function () {
         var components = {
-            ValueContainer: CustomComponents_1.IconValueContainer,
+            ValueContainer: IconValueContainer,
         };
         if (multiLabelVariant === 'count') {
-            components.MultiValue = CustomComponents_1.CountMultiValue;
+            components.MultiValue = CountMultiValue;
         }
         if (containerVariant === 'search') {
             components.DropdownIndicator = null;
         }
         if (showResetGridButton || showSelectAllButton) {
-            components.Menu = CustomComponents_1.ConnectedMenu;
+            components.Menu = ConnectedMenu;
         }
-        components.Input = CustomComponents_1.CustomInput;
-        var themes = (0, formStyles_1.getCustomTheme)(systemTheme, optionVariant, style == 'gridFilter');
-        var styles = formStyles_1.CustomStyles;
-        components.Option = CustomComponents_1.ChevronOption;
-        components.DropdownIndicator = CustomComponents_1.DropdownIndicator;
+        components.Input = CustomInput;
+        var themes = getFormCustomTheme(systemTheme, optionVariant, style == 'gridFilter');
+        var styles = FormCustomStyles;
+        components.Option = ChevronOption;
+        components.DropdownIndicator = DropdownIndicator;
         // performance reasons
         if (useSimplifiedOptions)
-            components.Option = CustomComponents_1.SimplifiedOption;
+            components.Option = SimplifiedOption;
         return [components, themes, styles];
     }, [
         multiLabelVariant,
@@ -44,4 +41,3 @@ var useStylesAndComponents = function (style, optionVariant, multiLabelVariant,
         optionVariant,
     ]);
 };
-exports.useStylesAndComponents = useStylesAndComponents;

package/ui/Elements/Select/types.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/ui/Elements/SimpleLink/SimpleLink.js

@@ -1,42 +1,17 @@
-"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;
 };
-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 });
-var react_router_dom_1 = require("react-router-dom");
-var styled_components_1 = __importStar(require("@xstyled/styled-components"));
-var StyledLink = (0, styled_components_1.default)(react_router_dom_1.Link)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: inherit;\n  cursor: pointer;\n\n  :visited {\n    color: inherit;\n  }\n  :hover {\n    color: inherit;\n  }\n  :active {\n    color: inherit;\n  }\n  :focus {\n    outline: none;\n  }\n\n  ", "\n\n  ", "\n"], ["\n  color: inherit;\n  cursor: pointer;\n\n  :visited {\n    color: inherit;\n  }\n  :hover {\n    color: inherit;\n  }\n  :active {\n    color: inherit;\n  }\n  :focus {\n    outline: none;\n  }\n\n  ", "\n\n  ", "\n"])), function (_a) {
+import { Link as ReactLink } from 'react-router-dom';
+import styled, { css } from '@xstyled/styled-components';
+var StyledLink = styled(ReactLink)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: inherit;\n  cursor: pointer;\n\n  :visited {\n    color: inherit;\n  }\n  :hover {\n    color: inherit;\n  }\n  :active {\n    color: inherit;\n  }\n  :focus {\n    outline: none;\n  }\n\n  ", "\n\n  ", "\n"], ["\n  color: inherit;\n  cursor: pointer;\n\n  :visited {\n    color: inherit;\n  }\n  :hover {\n    color: inherit;\n  }\n  :active {\n    color: inherit;\n  }\n  :focus {\n    outline: none;\n  }\n\n  ", "\n\n  ", "\n"])), function (_a) {
     var disabled = _a.disabled;
     return disabled
-        ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          pointer-events: none;\n          opacity: 0.5;\n        "], ["\n          pointer-events: none;\n          opacity: 0.5;\n        "]))) : null;
+        ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          pointer-events: none;\n          opacity: 0.5;\n        "], ["\n          pointer-events: none;\n          opacity: 0.5;\n        "]))) : null;
 }, function (_a) {
     var $decorate = _a.$decorate;
     return $decorate
-        ? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          text-decoration: underline;\n        "], ["\n          text-decoration: underline;\n        "]))) : null;
+        ? css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          text-decoration: underline;\n        "], ["\n          text-decoration: underline;\n        "]))) : null;
 });
-exports.default = StyledLink;
+export default StyledLink;
 var templateObject_1, templateObject_2, templateObject_3;

package/ui/Elements/SimpleLink/index.js

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

package/ui/Elements/SingleSelect/SingleSelect.js

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -55,19 +54,15 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-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 react_select_1 = require("react-select");
-var Select_1 = __importDefault(require("../Select"));
-var omit_1 = __importDefault(require("lodash/fp/omit"));
-var nanoid_1 = require("nanoid");
-var core_1 = require("@lingui/core");
-var CREATE = "_create_".concat((0, nanoid_1.nanoid)(), "_");
-var defaultFilterOption = (0, react_select_1.createFilter)();
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { createFilter } from 'react-select';
+import Select from '../Select/index.js';
+import omit from 'lodash/fp/omit';
+import { nanoid } from 'nanoid';
+import { i18n } from '@lingui/core';
+var CREATE = "_create_".concat(nanoid(), "_");
+var defaultFilterOption = createFilter();
 var creatableFilterOption = function (option, rawInput) {
     if ((option === null || option === void 0 ? void 0 : option.value) == CREATE)
         return true;
@@ -84,27 +79,27 @@ var getOptionValue = function (selectedOption) {
         return selectedOption.value;
     }
 };
-var loadingMessage = function () { return core_1.i18n._({ id: 'components.dropdown.loading', message: 'Loading...' }); };
+var loadingMessage = function () { return i18n._({ id: 'components.dropdown.loading', message: 'Loading...' }); };
 var SingleSelect = function (props) {
-    var name = props.name, onChange = props.onChange, onBlur = props.onBlur, onValueChange = props.onValueChange, loadOptions = props.loadOptions, _a = props.asyncLoadMinChars, asyncLoadMinChars = _a === void 0 ? 0 : _a, isLocked = props.isLocked, _b = props.lockedText, lockedText = _b === void 0 ? core_1.i18n._({ id: 'components.dropdown.notReact', message: 'Select related values first...' }) : _b, disabled = props.disabled, _c = props.placeholder, placeholder = _c === void 0 ? core_1.i18n._({ id: 'components.dropdown.placeholder', message: 'Select...' }) : _c, preload = props.preload, initialOptions = props.initialOptions, onCreateOption = props.onCreateOption, options = props.options, filterOption = props.filterOption;
-    var _d = (0, react_1.useState)(false), isCreating = _d[0], setIsCreating = _d[1];
+    var name = props.name, onChange = props.onChange, onBlur = props.onBlur, onValueChange = props.onValueChange, loadOptions = props.loadOptions, _a = props.asyncLoadMinChars, asyncLoadMinChars = _a === void 0 ? 0 : _a, isLocked = props.isLocked, _b = props.lockedText, lockedText = _b === void 0 ? i18n._({ id: 'components.dropdown.notReact', message: 'Select related values first...' }) : _b, disabled = props.disabled, _c = props.placeholder, placeholder = _c === void 0 ? i18n._({ id: 'components.dropdown.placeholder', message: 'Select...' }) : _c, preload = props.preload, initialOptions = props.initialOptions, onCreateOption = props.onCreateOption, options = props.options, filterOption = props.filterOption;
+    var _d = useState(false), isCreating = _d[0], setIsCreating = _d[1];
     var asAsync = !!loadOptions || !!onCreateOption;
-    var noOptionsMessage = (0, react_1.useCallback)(function (inputValue) {
+    var noOptionsMessage = useCallback(function (inputValue) {
         return loadOptions && inputValue.length < asyncLoadMinChars
-            ? core_1.i18n._({
+            ? i18n._({
                 id: 'components.dropdown.writeMoreChars',
                 message: 'Write at least ${asyncLoadMinChars} characters.',
             })
-            : core_1.i18n._({ id: 'components.dropdown.noOptions', message: 'No options' });
+            : i18n._({ id: 'components.dropdown.noOptions', message: 'No options' });
     }, [loadOptions, asyncLoadMinChars]);
-    var handleLoadOptions = (0, react_1.useCallback)(function (inputValue) {
+    var handleLoadOptions = useCallback(function (inputValue) {
         if (onCreateOption) {
             if (!inputValue.trim())
                 return Promise.resolve(options || []);
             return Promise.resolve(__spreadArray(__spreadArray([], (options || []), true), [
                 {
                     value: CREATE,
-                    label: "".concat(inputValue, " (").concat(core_1.i18n._({ id: 'components.dropdown.newOption', message: 'new value' }), ")"),
+                    label: "".concat(inputValue, " (").concat(i18n._({ id: 'components.dropdown.newOption', message: 'new value' }), ")"),
                     inputValue: inputValue,
                 },
             ], false));
@@ -116,14 +111,14 @@ var SingleSelect = function (props) {
             return loadOptions(inputValue, false);
         }
     }, [onCreateOption, loadOptions, asyncLoadMinChars, options]);
-    var _e = (0, react_1.useState)(options || []), loadedDefaultOptions = _e[0], setLoadedDefaultOptions = _e[1];
-    (0, react_1.useEffect)(function () {
+    var _e = useState(options || []), loadedDefaultOptions = _e[0], setLoadedDefaultOptions = _e[1];
+    useEffect(function () {
         if (loadOptions && preload && !props.value)
             loadOptions('', false).then(setLoadedDefaultOptions);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [loadOptions]); // this is intentional
-    var _f = (0, react_1.useState)(null), storedSelectedOption = _f[0], setStoredSelectedOption = _f[1];
-    (0, react_1.useEffect)(function () {
+    var _f = useState(null), storedSelectedOption = _f[0], setStoredSelectedOption = _f[1];
+    useEffect(function () {
         if (initialOptions && initialOptions.length) {
             var selectedOption = initialOptions.find(function (option) { return option.value == props.value; }) || null;
             setStoredSelectedOption(selectedOption);
@@ -134,7 +129,7 @@ var SingleSelect = function (props) {
         // ignored because of props.value, this only finds option for initial value
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [initialOptions, setStoredSelectedOption]);
-    var handleChange = (0, react_1.useCallback)(function (option) { return __awaiter(void 0, void 0, void 0, function () {
+    var handleChange = useCallback(function (option) { return __awaiter(void 0, void 0, void 0, function () {
         var value, newOption;
         var _a, _b, _c, _d;
         return __generator(this, function (_e) {
@@ -143,7 +138,7 @@ var SingleSelect = function (props) {
                     if (!(onCreateOption && (option === null || option === void 0 ? void 0 : option.value) == CREATE)) return [3 /*break*/, 4];
                     if (!((option === null || option === void 0 ? void 0 : option.inputValue) && ((_b = (_a = option === null || option === void 0 ? void 0 : option.inputValue) === null || _a === void 0 ? void 0 : _a.trim()) === null || _b === void 0 ? void 0 : _b.length) < 2)) return [3 /*break*/, 1];
                     props === null || props === void 0 ? void 0 : props.form.setFieldTouched(name, true, true);
-                    props === null || props === void 0 ? void 0 : props.form.setFieldError(name, core_1.i18n._({ id: 'form.general.min2Chars', message: 'Minimal length is 2 characters.' }));
+                    props === null || props === void 0 ? void 0 : props.form.setFieldError(name, i18n._({ id: 'form.general.min2Chars', message: 'Minimal length is 2 characters.' }));
                     return [2 /*return*/];
                 case 1:
                     setIsCreating(true);
@@ -175,7 +170,7 @@ var SingleSelect = function (props) {
             }
         });
     }); }, [onCreateOption, loadOptions, onChange, onValueChange, props === null || props === void 0 ? void 0 : props.form, name]);
-    var handleBlur = (0, react_1.useCallback)(function (option) {
+    var handleBlur = useCallback(function (option) {
         if (onBlur) {
             onBlur({
                 target: {
@@ -189,7 +184,7 @@ var SingleSelect = function (props) {
     var omitted = ['onValueChange', 'placeholder', 'options', 'loadOptions', 'asyncLoadMinChars'];
     var displayLockedText = isLocked && !disabled;
     var placeholderValue = displayLockedText ? lockedText : placeholder;
-    var defaultOptions = (0, react_1.useMemo)(function () {
+    var defaultOptions = useMemo(function () {
         if (!asAsync)
             return undefined; // relates only to asAsync true
         var staticOptions = onCreateOption ? options : loadedDefaultOptions;
@@ -197,6 +192,6 @@ var SingleSelect = function (props) {
             return staticOptions || undefined;
         return staticOptions ? __spreadArray(__spreadArray([], staticOptions, true), [storedSelectedOption], false) : [storedSelectedOption];
     }, [asAsync, loadedDefaultOptions, onCreateOption, options, storedSelectedOption]);
-    return ((0, jsx_runtime_1.jsx)(Select_1.default, __assign({}, (0, omit_1.default)(omitted, props), { filterOption: (filterOption || creatableFilterOption), disabled: disabled || isLocked, onChange: handleChange, onBlur: handleBlur, placeholder: placeholderValue, loadingMessage: loadingMessage, noOptionsMessage: noOptionsMessage, loadOptions: asAsync ? handleLoadOptions : undefined, containerVariant: asAsync ? 'search' : undefined, defaultOptions: defaultOptions, options: !asAsync ? options : undefined, isLoading: isCreating || props.isLoading })));
+    return (_jsx(Select, __assign({}, omit(omitted, props), { filterOption: (filterOption || creatableFilterOption), disabled: disabled || isLocked, onChange: handleChange, onBlur: handleBlur, placeholder: placeholderValue, loadingMessage: loadingMessage, noOptionsMessage: noOptionsMessage, loadOptions: asAsync ? handleLoadOptions : undefined, containerVariant: asAsync ? 'search' : undefined, defaultOptions: defaultOptions, options: !asAsync ? options : undefined, isLoading: isCreating || props.isLoading })));
 };
-exports.default = SingleSelect;
+export default SingleSelect;

package/ui/Elements/SingleSelect/index.js

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

package/ui/Elements/SpaceAround/SpaceAround.js

@@ -1,4 +1,3 @@
-"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;
@@ -14,29 +13,6 @@ 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)
@@ -48,17 +24,16 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var styled_components_1 = __importStar(require("@xstyled/styled-components"));
-var styled_components_2 = require("@xstyled/styled-components");
-var Wrapper = (0, styled_components_1.default)(styled_components_1.x.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: ", ";\n  position: relative;\n  box-sizing: border-box;\n  ", ";\n  ", ";\n"], ["\n  width: ", ";\n  position: relative;\n  box-sizing: border-box;\n  ", ";\n  ", ";\n"])), function (_a) {
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled, { x, css, useTheme } from '@xstyled/styled-components';
+import { th } from '@xstyled/styled-components';
+var Wrapper = styled(x.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: ", ";\n  position: relative;\n  box-sizing: border-box;\n  ", ";\n  ", ";\n"], ["\n  width: ", ";\n  position: relative;\n  box-sizing: border-box;\n  ", ";\n  ", ";\n"])), function (_a) {
     var $marginLeft = _a.$marginLeft, $marginRight = _a.$marginRight;
     return "calc(100% - ".concat($marginLeft || '0px', " - ").concat($marginRight || '0px', ")");
 }, function (_a) {
     var $spaceAround = _a.$spaceAround;
     return $spaceAround
-        ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          margin-top: ", ";\n          margin-right: ", ";\n          margin-bottom: ", ";\n          margin-left: ", ";\n        "], ["\n          margin-top: ", ";\n          margin-right: ", ";\n          margin-bottom: ", ";\n          margin-left: ", ";\n        "])), $spaceAround === true || typeof ($spaceAround === null || $spaceAround === void 0 ? void 0 : $spaceAround.marginTop) === 'undefined' ? 1 : $spaceAround.marginTop, $spaceAround === true || typeof ($spaceAround === null || $spaceAround === void 0 ? void 0 : $spaceAround.marginRight) === 'undefined'
+        ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          margin-top: ", ";\n          margin-right: ", ";\n          margin-bottom: ", ";\n          margin-left: ", ";\n        "], ["\n          margin-top: ", ";\n          margin-right: ", ";\n          margin-bottom: ", ";\n          margin-left: ", ";\n        "])), $spaceAround === true || typeof ($spaceAround === null || $spaceAround === void 0 ? void 0 : $spaceAround.marginTop) === 'undefined' ? 1 : $spaceAround.marginTop, $spaceAround === true || typeof ($spaceAround === null || $spaceAround === void 0 ? void 0 : $spaceAround.marginRight) === 'undefined'
             ? 1
             : $spaceAround.marginRight, $spaceAround === true || typeof ($spaceAround === null || $spaceAround === void 0 ? void 0 : $spaceAround.marginBottom) === 'undefined'
             ? 2
@@ -66,14 +41,14 @@ var Wrapper = (0, styled_components_1.default)(styled_components_1.x.div)(templa
 }, function (_a) {
     var $spaceBetween = _a.$spaceBetween;
     return $spaceBetween
-        ? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          display: flex;\n          justify-content: space-between;\n        "], ["\n          display: flex;\n          justify-content: space-between;\n        "]))) : '';
+        ? css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          display: flex;\n          justify-content: space-between;\n        "], ["\n          display: flex;\n          justify-content: space-between;\n        "]))) : '';
 });
 var SpaceAroundWrap = function (_a) {
     var children = _a.children, _b = _a.spaceBetween, spaceBetween = _b === void 0 ? false : _b, _c = _a.spaceAround, spaceAround = _c === void 0 ? true : _c, rest = __rest(_a, ["children", "spaceBetween", "spaceAround"]);
-    var theme = (0, styled_components_1.useTheme)();
-    var themeMarginLeft = typeof spaceAround !== 'boolean' && (spaceAround === null || spaceAround === void 0 ? void 0 : spaceAround.marginLeft) ? styled_components_2.th.space(spaceAround === null || spaceAround === void 0 ? void 0 : spaceAround.marginLeft)({ theme: theme }) : 0;
-    var themeMarginRight = typeof spaceAround !== 'boolean' && (spaceAround === null || spaceAround === void 0 ? void 0 : spaceAround.marginRight) ? styled_components_2.th.space(spaceAround === null || spaceAround === void 0 ? void 0 : spaceAround.marginRight)({ theme: theme }) : 0;
-    return ((0, jsx_runtime_1.jsx)(Wrapper, __assign({ "$spaceAround": spaceAround, "$spaceBetween": spaceBetween, "$marginRight": themeMarginRight, "$marginLeft": themeMarginLeft }, rest, { children: children })));
+    var theme = useTheme();
+    var themeMarginLeft = typeof spaceAround !== 'boolean' && (spaceAround === null || spaceAround === void 0 ? void 0 : spaceAround.marginLeft) ? th.space(spaceAround === null || spaceAround === void 0 ? void 0 : spaceAround.marginLeft)({ theme: theme }) : 0;
+    var themeMarginRight = typeof spaceAround !== 'boolean' && (spaceAround === null || spaceAround === void 0 ? void 0 : spaceAround.marginRight) ? th.space(spaceAround === null || spaceAround === void 0 ? void 0 : spaceAround.marginRight)({ theme: theme }) : 0;
+    return (_jsx(Wrapper, __assign({ "$spaceAround": spaceAround, "$spaceBetween": spaceBetween, "$marginRight": themeMarginRight, "$marginLeft": themeMarginLeft }, rest, { children: children })));
 };
-exports.default = SpaceAroundWrap;
+export default SpaceAroundWrap;
 var templateObject_1, templateObject_2, templateObject_3;

package/ui/Elements/SpaceAround/index.js

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

package/ui/Elements/SpaceAround/stories/SpaceAround.stories.js

@@ -1,22 +1,19 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ManyPages = exports.Default = void 0;
-var __1 = require("../");
+import { SpaceAroundWrap } from '../index.js';
 var meta = {
     title: 'Elements/SpaceAround',
-    component: __1.SpaceAroundWrap,
+    component: SpaceAroundWrap,
     tags: ['autodocs'],
     argTypes: {},
 };
-exports.default = meta;
-exports.Default = {
+export default meta;
+export var Default = {
     args: {
         children: 'This is a content',
         spaceBetween: false,
         spaceAround: true,
     },
 };
-exports.ManyPages = {
+export var ManyPages = {
     args: {
         children: 'This is a content',
         spaceBetween: true,

package/ui/Elements/SpaceAround/types.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/ui/Elements/Spinner/Spinner.js

@@ -1,9 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Spinner = exports.appearanceToFontColorMap = exports.appearanceToColorMap = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var styles_1 = require("./styles");
-exports.appearanceToColorMap = {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Svg, Circle } from './styles.js';
+export var appearanceToColorMap = {
     error: 'red1',
     concept: 'bgLightGray1',
     done: 'darkGreen',
@@ -13,7 +10,7 @@ exports.appearanceToColorMap = {
     warning: 'yellow1',
     waiting: 'gray1',
 };
-exports.appearanceToFontColorMap = {
+export var appearanceToFontColorMap = {
     error: 'white',
     concept: 'blue2',
     done: 'white',
@@ -23,10 +20,9 @@ exports.appearanceToFontColorMap = {
     warning: 'blue2',
     waiting: 'white',
 };
-var Spinner = function (_a) {
+export var Spinner = function (_a) {
     var _b = _a.variant, variant = _b === void 0 ? 'default' : _b, appearance = _a.appearance;
-    var color = appearance ? exports.appearanceToFontColorMap[appearance] : 'blue2';
-    return ((0, jsx_runtime_1.jsx)(styles_1.Svg, { viewBox: "22 22 44 44", "$variant": variant, children: (0, jsx_runtime_1.jsx)(styles_1.Circle, { cx: "44", cy: "44", r: "20.2", fill: "none", strokeWidth: "3.6", color: color }) }));
+    var color = appearance ? appearanceToFontColorMap[appearance] : 'blue2';
+    return (_jsx(Svg, { viewBox: "22 22 44 44", "$variant": variant, children: _jsx(Circle, { cx: "44", cy: "44", r: "20.2", fill: "none", strokeWidth: "3.6", color: color }) }));
 };
-exports.Spinner = Spinner;
-exports.default = exports.Spinner;
+export default Spinner;

package/ui/Elements/Spinner/index.js

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