@mailstep/design-system 0.7.67 → 0.7.68-beta.0

package/ui/Elements/Logo/Logo.js

@@ -40,8 +40,8 @@ import warehouseManager3 from './assets/warehouse/manager3.svg';
 import warehouseManager from './assets/warehouse/manager.svg';
 import styled from '@xstyled/styled-components';
 var defaultSizes = {
-    small: '30px',
-    medium: '46px',
+    small: '30px', // cca 100px width on full logo
+    medium: '46px', // cca 150px width on full logo
     big: '61px' // cca 200px width on full logo
 };
 var variantMap = {
@@ -76,7 +76,7 @@ var StyledImage = styled.img(templateObject_1 || (templateObject_1 = __makeTempl
     return width || 'auto';
 }, function (_a) {
     var height = _a.height, width = _a.width, size = _a.size;
-    return height || (width ? 'auto' : size ? defaultSizes[size] : defaultSizes['medium']);
+    return height || (width ? 'auto' : size ? defaultSizes[size] : defaultSizes.medium);
 });
 var Logo = function (_a) {
     var _b = _a.brand, brand = _b === void 0 ? 'mailship' : _b, variant = _a.variant, size = _a.size, width = _a.width, height = _a.height, rest = __rest(_a, ["brand", "variant", "size", "width", "height"]);

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

@@ -1,4 +1,5 @@
-import Logo from './Logo';
+import { default as Logo } from './Logo';
+
 export { Logo };
 export type { Brand, Variant } from './types';
 export default Logo;

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

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-import type { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react';
+
 declare const meta: {
     title: string;
-    component: ({ brand, variant, size, width, height, ...rest }: import("../types").LogoProps) => JSX.Element | null;
+    component: import('react').FC<import('../types').LogoProps>;
     parameters: {
         backgrounds: {
             default: string;

package/ui/Elements/MultiSelect/MultiSelect.d.ts

@@ -1,6 +1,8 @@
+import { default as React } from 'react';
 import { SelectProps } from '../Select/types';
+
 type Props = {
     checkAllButton?: boolean;
 } & Omit<SelectProps, 'isMulti'>;
-declare const SelectFilter: ({ checkAllButton, ...restProps }: Props) => JSX.Element;
+declare const SelectFilter: React.FC<Props>;
 export default SelectFilter;

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

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

package/ui/Elements/Pagination/Pagination.d.ts

@@ -1,3 +1,5 @@
+import { default as React } from 'react';
+
 export type PaginationProps = {
     page?: number;
     itemCount?: number;
@@ -7,5 +9,5 @@ export type PaginationProps = {
     onPageChange?: (number: number, rows: number) => void;
     customPaginationHandler?: (page: number, rows: number) => void;
 };
-declare const Pagination: ({ onPageChange, itemPerPage, itemCount, page, radius, rate, customPaginationHandler, }: PaginationProps) => JSX.Element;
+declare const Pagination: React.FC<PaginationProps>;
 export default Pagination;

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

@@ -1,4 +1,5 @@
-import Pagination from './Pagination';
+import { default as Pagination } from './Pagination';
+
 export type { PaginationProps } from './Pagination';
 export { Pagination };
 export default Pagination;

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

@@ -1,8 +1,9 @@
-import type { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react';
 import { PaginationProps } from '../';
+
 declare const meta: {
     title: string;
-    component: ({ onPageChange, itemPerPage, itemCount, page, radius, rate, customPaginationHandler, }: PaginationProps) => JSX.Element;
+    component: import('react').FC<PaginationProps>;
     tags: string[];
     argTypes: {};
 };

package/ui/Elements/Pagination/styled.d.ts

@@ -1,15 +1,14 @@
-/// <reference types="react" />
-export declare const Wrapper: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => import("react").ReactElement<any, "div">, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
-export declare const Btn: import("styled-components").StyledComponent<"button", import("@xstyled/system").Theme, {
+export declare const Wrapper: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import('react').ReactElement<any, string>, import('@xstyled/system').Theme, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, "color">;
+export declare const Btn: import('styled-components').StyledComponent<"button", import('@xstyled/system').Theme, {
     disabled: boolean;
 }, never>;
-export declare const ArrowIcon: import("styled-components").StyledComponent<({ icon, fill, style, size, className, secondaryColor, fixedWidth, spinning }: import("../Icon").IconProps) => JSX.Element, import("@xstyled/system").Theme, {
+export declare const ArrowIcon: import('styled-components').StyledComponent<import('react').FC<import('../Icon').IconProps>, import('@xstyled/system').Theme, {
     isActive: boolean;
 }, never>;
-export declare const GoIcon: import("styled-components").StyledComponent<({ icon, fill, style, size, className, secondaryColor, fixedWidth, spinning }: import("../Icon").IconProps) => JSX.Element, import("@xstyled/system").Theme, {
+export declare const GoIcon: import('styled-components').StyledComponent<import('react').FC<import('../Icon').IconProps>, import('@xstyled/system').Theme, {
     isActive: boolean;
 }, never>;
-export declare const DotsWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const PageBtn: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {
+export declare const DotsWrapper: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const PageBtn: import('styled-components').StyledComponent<"span", import('@xstyled/system').Theme, {
     isCurrent: boolean;
 }, never>;

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

@@ -1,5 +1,6 @@
-/// <reference types="react" />
-export declare const Portal: ({ children }: {
-    children: JSX.Element;
-}) => import("react").ReactPortal;
+import { FC, ReactNode } from 'react';
+
+export declare const Portal: FC<{
+    children?: ReactNode;
+}>;
 export default Portal;

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

@@ -1,3 +1,5 @@
+import { FC } from 'react';
+
 type Props = {
     progress?: number;
     status?: 'loading' | 'finished' | 'error';
@@ -5,5 +7,5 @@ type Props = {
     noText?: boolean;
     variant?: 'normal' | 'thin';
 };
-declare const ProgressBar: ({ progress, status, errorMessage, noText, variant }: Props) => JSX.Element;
+declare const ProgressBar: FC<Props>;
 export default ProgressBar;

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

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

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

@@ -1,13 +1,14 @@
-import type { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react';
+
 declare const meta: {
     title: string;
-    component: ({ progress, status, errorMessage, noText, variant }: {
-        progress?: number | undefined;
-        status?: "loading" | "error" | "finished" | undefined;
-        errorMessage?: string | undefined;
-        noText?: boolean | undefined;
-        variant?: "normal" | "thin" | undefined;
-    }) => JSX.Element;
+    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/system').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/system').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/system').Theme, {}, never>;

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

@@ -1,3 +1,5 @@
+import { FC } from 'react';
 import { SelectProps } from './types';
-declare const Select: ({ label, name, value, options, defaultOptions, loadOptions, onChange, onBlur, error, isInvalid, isLoading, isDarkPlaceholderText, spaceAround, disabled, onInputChange, isSearchable, isMulti, className, useSimplifiedOptions, showSelectAllButton, showResetGridButton, shortValues, style, optionVariant, multiLabelVariant, containerVariant, placeholder, placeholderIcon, innerRef, maxMenuHeight, getOptionValue, resetGrid, ...passTroughProps }: SelectProps) => JSX.Element;
+
+declare const Select: FC<SelectProps>;
 export default Select;

package/ui/Elements/Select/Select.js

@@ -9,6 +9,42 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+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 = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["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)
@@ -22,13 +58,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 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 { 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...' }); };
@@ -46,7 +82,7 @@ var Select = function (_a) {
             onChange === null || onChange === void 0 ? void 0 : onChange(emptyOptions);
         }
     }, [onChange]);
-    var icon = containerVariant === 'search' ? 'search' : placeholderIcon ? placeholderIcon : undefined;
+    var icon = containerVariant === 'search' ? 'search' : placeholderIcon || undefined;
     var modifiedMaxMenuHeight = showResetGridButton && showSelectAllButton && maxMenuHeight ? maxMenuHeight - 30 : maxMenuHeight;
     var _j = useStylesAndComponents(style, optionVariant, multiLabelVariant, containerVariant, useSimplifiedOptions, showSelectAllButton, showResetGridButton), customComponents = _j[0], customTheme = _j[1], customStyles = _j[2];
     var RenderComponent = isAsync ? StyledAsyncSelect : StyledReactSelect;
@@ -62,7 +98,12 @@ var Select = function (_a) {
     var theme = useTheme();
     // strip extra params
     var handleLoadOptions = useMemo(function () {
-        return loadOptions ? function (fulltext) { return loadOptions(fulltext); } : undefined;
+        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, 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, shortValues: shortValues }))] }), error && _jsx(ErrorMessage, { children: error })] }));
 };

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

@@ -1,4 +1,5 @@
 import { SelectProps, CustomTheme } from '../types';
+
 type Props = {
     onCustomSelectAll: () => void;
     onCustomDeselectAll: () => void;

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

@@ -1,2 +1,2 @@
-declare const SelectedIndicator: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+declare const SelectedIndicator: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
 export default SelectedIndicator;

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

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-declare const SimplifiedOption: import("react").MemoExoticComponent<(props: any) => any>;
+declare const SimplifiedOption: import('react').MemoExoticComponent<(props: any) => any>;
 export default SimplifiedOption;

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

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

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

@@ -1,5 +1,6 @@
-import ReactSelect from 'react-select';
-import AsyncSelect from 'react-select/async';
-export declare const Wrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const StyledReactSelect: import("styled-components").StyledComponent<ReactSelect, import("@xstyled/system").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, never>;
-export declare const StyledAsyncSelect: import("styled-components").StyledComponent<AsyncSelect, import("@xstyled/system").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, never>;
+import { default as ReactSelect } from 'react-select';
+import { default as AsyncSelect } from 'react-select/async';
+
+export declare const Wrapper: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const StyledReactSelect: import('styled-components').StyledComponent<ReactSelect, import('@xstyled/system').Theme, import('@xstyled/util').Props<import('@xstyled/system').Theme> & import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, never>;
+export declare const StyledAsyncSelect: import('styled-components').StyledComponent<AsyncSelect, import('@xstyled/system').Theme, import('@xstyled/util').Props<import('@xstyled/system').Theme> & import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, never>;

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

@@ -1,3 +1,4 @@
-import { type StylesConfig, type SelectComponentsConfig } from 'react-select';
-import { type SelectProps } from '../types';
-export declare const useStylesAndComponents: (style?: SelectProps['style'], optionVariant?: SelectProps['optionVariant'], multiLabelVariant?: SelectProps['multiLabelVariant'], containerVariant?: SelectProps['containerVariant'], useSimplifiedOptions?: SelectProps['useSimplifiedOptions'], showSelectAllButton?: SelectProps['showSelectAllButton'], showResetGridButton?: SelectProps['showResetGridButton']) => [SelectComponentsConfig<unknown, boolean, any>, any, StylesConfig];
+import { StylesConfig, SelectComponentsConfig } from 'react-select';
+import { SelectProps } from '../types';
+
+export declare const useStylesAndComponents: (style?: SelectProps["style"], optionVariant?: SelectProps["optionVariant"], multiLabelVariant?: SelectProps["multiLabelVariant"], containerVariant?: SelectProps["containerVariant"], useSimplifiedOptions?: SelectProps["useSimplifiedOptions"], showSelectAllButton?: SelectProps["showSelectAllButton"], showResetGridButton?: SelectProps["showResetGridButton"]) => [SelectComponentsConfig<unknown, boolean, any>, any, StylesConfig];

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

@@ -1,5 +1,6 @@
 import { SelectProps, StylesConfig, CustomTheme } from '../types';
+
 export declare const CustomStyles: StylesConfig<State>;
 type ThemeGetter = (theme: any) => CustomTheme;
-export declare const getCustomTheme: (theme: any, optionVariant: Required<SelectProps>['optionVariant'], useFilterSubvariant: boolean) => ThemeGetter;
+export declare const getCustomTheme: (theme: any, optionVariant: Required<SelectProps>["optionVariant"], useFilterSubvariant: boolean) => ThemeGetter;
 export {};

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

@@ -1,6 +1,7 @@
-import { RefObject } from 'react';
+import { RefObject, ReactNode } from 'react';
 import { Theme, ControlProps, CSSObjectWithLabel } from 'react-select';
 import { SpaceAround } from '../SpaceAround/types';
+
 export type Option<Value = string | number> = {
     value: Value;
     label: string | number;
@@ -16,8 +17,8 @@ export type SelectProps = {
     name?: string;
     value?: number | string | string[] | Option | Option[];
     placeholder?: string;
-    loadingMessage?: (inputValue: string) => string | JSX.Element;
-    noOptionsMessage?: (inputValue: string) => string | JSX.Element;
+    loadingMessage?: (inputValue: string) => string | ReactNode;
+    noOptionsMessage?: (inputValue: string) => string | ReactNode;
     filterOption?: (option: Option) => boolean;
     options?: Option[];
     loadOptions?: (text: string) => Promise<Option[]>;

package/ui/Elements/SimpleLink/SimpleLink.d.ts

@@ -1,6 +1,7 @@
-import React from 'react';
+import { default as React } from 'react';
 import { Link as ReactLink } from 'react-router-dom';
 import { TextVariant } from '../Text/types';
+
 export type ToObjectType = {
     pathname?: string;
     search?: string;
@@ -17,5 +18,5 @@ export type Props = {
     $decorate?: boolean;
     variant?: TextVariant;
 };
-declare const StyledLink: import("styled-components").StyledComponent<typeof ReactLink, import("@xstyled/system").Theme, Props, never>;
+declare const StyledLink: import('styled-components').StyledComponent<typeof ReactLink, import('@xstyled/system').Theme, Props, never>;
 export default StyledLink;

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

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

package/ui/Elements/SingleSelect/SingleSelect.d.ts

@@ -1,10 +1,10 @@
+import { default as React } from 'react';
 import { SelectProps, Option } from '../Select/types';
-type FieldValueType = string | number | (string | number)[] | null;
+
+type FieldValueType = string | number | Array<string | number> | null;
 export type Props = Omit<SelectProps, 'onChange' | 'loadOptions'> & {
     onChange?: (event: {
-        target: {
-            [key: string]: FieldValueType;
-        };
+        target: Record<string, FieldValueType>;
     }) => void;
     onValueChange?: Function;
     asyncLoadMinChars?: number;
@@ -17,5 +17,5 @@ export type Props = Omit<SelectProps, 'onChange' | 'loadOptions'> & {
     form?: any;
     shouldReloadOptions?: boolean;
 };
-declare const SingleSelect: (props: Props) => JSX.Element;
+declare const SingleSelect: React.FC<Props>;
 export default SingleSelect;

package/ui/Elements/SingleSelect/SingleSelect.js

@@ -19,8 +19,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 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;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["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.");
@@ -92,25 +92,31 @@ var SingleSelect = function (props) {
             })
             : i18n._({ id: 'components.dropdown.noOptions', message: 'No options' });
     }, [loadOptions, asyncLoadMinChars]);
-    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(i18n._({ id: 'components.dropdown.newOption', message: 'new value' }), ")"),
-                    inputValue: inputValue
-                }
-            ], false));
-        }
-        else if (!loadOptions || inputValue.length < asyncLoadMinChars) {
-            return Promise.resolve([]);
-        }
-        else {
-            return loadOptions(inputValue, false);
-        }
-    }, [onCreateOption, loadOptions, asyncLoadMinChars, options]);
+    var handleLoadOptions = useCallback(function (inputValue) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!onCreateOption) return [3 /*break*/, 4];
+                    if (!!inputValue.trim()) return [3 /*break*/, 2];
+                    return [4 /*yield*/, Promise.resolve(options || [])];
+                case 1: return [2 /*return*/, _a.sent()];
+                case 2: return [4 /*yield*/, Promise.resolve(__spreadArray(__spreadArray([], (options || []), true), [
+                        {
+                            value: CREATE,
+                            label: "".concat(inputValue, " (").concat(i18n._({ id: 'components.dropdown.newOption', message: 'new value' }), ")"),
+                            inputValue: inputValue
+                        }
+                    ], false))];
+                case 3: return [2 /*return*/, _a.sent()];
+                case 4:
+                    if (!(!loadOptions || inputValue.length < asyncLoadMinChars)) return [3 /*break*/, 6];
+                    return [4 /*yield*/, Promise.resolve([])];
+                case 5: return [2 /*return*/, _a.sent()];
+                case 6: return [4 /*yield*/, loadOptions(inputValue, false)];
+                case 7: return [2 /*return*/, _a.sent()];
+            }
+        });
+    }); }, [onCreateOption, loadOptions, asyncLoadMinChars, options]);
     var _f = useState(options || []), loadedDefaultOptions = _f[0], setLoadedDefaultOptions = _f[1];
     useEffect(function () {
         if (loadOptions && preload && !props.value)
@@ -124,7 +130,9 @@ var SingleSelect = function (props) {
             setStoredSelectedOption(selectedOption);
         }
         if (loadOptions && !initialOptions && props.value) {
-            loadOptions(String(props.value), true).then(function (selectedOptions) { return setStoredSelectedOption((selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions[0]) || null); });
+            loadOptions(String(props.value), true).then(function (selectedOptions) {
+                setStoredSelectedOption((selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions[0]) || null);
+            });
         }
         // ignored because of props.value, this only finds option for initial value
         // eslint-disable-next-line react-hooks/exhaustive-deps

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

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

package/ui/Elements/SpaceAround/SpaceAround.d.ts

@@ -1,3 +1,5 @@
+import { default as React } from 'react';
 import { Props } from './types';
-declare const SpaceAroundWrap: ({ children, spaceBetween, spaceAround, ...rest }: Props) => JSX.Element;
+
+declare const SpaceAroundWrap: React.FC<Props>;
 export default SpaceAroundWrap;

package/ui/Elements/SpaceAround/SpaceAround.js

@@ -25,8 +25,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import styled, { x, css, useTheme } from '@xstyled/styled-components';
-import { th } from '@xstyled/styled-components';
+import styled, { x, css, useTheme, 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', ")");

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

@@ -1,4 +1,5 @@
-import SpaceAroundWrap from './SpaceAround';
+import { default as SpaceAroundWrap } from './SpaceAround';
+
 export type { SpaceAround } from './types';
 export { SpaceAroundWrap };
 export default SpaceAroundWrap;

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

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-import type { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react';
+
 declare const meta: {
     title: string;
-    component: ({ children, spaceBetween, spaceAround, ...rest }: import("../types").Props) => JSX.Element;
+    component: import('react').FC<import('../types').Props>;
     tags: string[];
     argTypes: {};
 };

package/ui/Elements/SpaceAround/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type SpaceAroundProps = {
     marginTop?: number;
     marginRight?: number;

package/ui/Elements/Spinner/Spinner.d.ts

@@ -1,4 +1,6 @@
-import { ISpinner } from './types';
+import { FC } from 'react';
+import { SpinnerProps } from './types';
+
 export declare const appearanceToColorMap: {
     error: string;
     concept: string;
@@ -10,5 +12,5 @@ export declare const appearanceToColorMap: {
     waiting: string;
 };
 export declare const appearanceToFontColorMap: Record<string, string>;
-export declare const Spinner: ISpinner;
+export declare const Spinner: FC<SpinnerProps>;
 export default Spinner;

package/ui/Elements/Spinner/Spinner.js

@@ -8,7 +8,7 @@ export var appearanceToColorMap = {
     processing: 'blue2',
     success: 'green',
     warning: 'yellow1',
-    waiting: 'gray1',
+    waiting: 'gray1'
 };
 export var appearanceToFontColorMap = {
     error: 'white',
@@ -18,7 +18,7 @@ export var appearanceToFontColorMap = {
     processing: 'white',
     success: 'white',
     warning: 'blue2',
-    waiting: 'white',
+    waiting: 'white'
 };
 export var Spinner = function (_a) {
     var _b = _a.variant, variant = _b === void 0 ? 'default' : _b, appearance = _a.appearance;

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

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

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

@@ -1,7 +1,8 @@
-import type { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react';
+
 declare const meta: {
     title: string;
-    component: import("../types").ISpinner;
+    component: import('react').FC<import('../types').SpinnerProps>;
     tags: string[];
     argTypes: {};
 };

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

@@ -1,4 +1,4 @@
-export declare const Svg: import("styled-components").StyledComponent<"svg", import("@xstyled/system").Theme, {
-    $variant: 'default' | 'sm';
+export declare const Svg: import('styled-components').StyledComponent<"svg", import('@xstyled/system').Theme, {
+    $variant: "default" | "sm";
 }, never>;
-export declare const Circle: import("styled-components").StyledComponent<"circle", import("@xstyled/system").Theme, {}, never>;
+export declare const Circle: import('styled-components').StyledComponent<"circle", import('@xstyled/system').Theme, {}, never>;