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

package/ui/Elements/SingleSelect/SingleSelect.js

@@ -1,150 +1,200 @@
-import Select_default from "../Select/index.js";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { jsx } from "react/jsx-runtime";
-import { i18n } from "@lingui/core";
-import { createFilter } from "react-select";
-import { nanoid } from "nanoid";
-import omit from "lodash/fp/omit";
-//#region packages/ui/Elements/SingleSelect/SingleSelect.tsx
-const CREATE = `_create_${nanoid()}_`;
-const defaultFilterOption = createFilter();
-const creatableFilterOption = (option, rawInput) => {
-	if (option?.value === CREATE) return true;
-	return defaultFilterOption(option, rawInput);
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
-const getOptionValue = (selectedOption) => {
-	if (selectedOption === null) return null;
-	else if (Array.isArray(selectedOption)) return selectedOption.map((option) => option.value);
-	else return selectedOption.value;
+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());
+    });
 };
-const loadingMessage = () => i18n._({
-	id: "components.dropdown.loading",
-	message: "Loading..."
-});
-const SingleSelect = (props) => {
-	const { name, onChange, onBlur, onValueChange, loadOptions, asyncLoadMinChars = 0, isLocked, lockedText = i18n._({
-		id: "components.dropdown.notReact",
-		message: "Select related values first..."
-	}), disabled, placeholder = i18n._({
-		id: "components.dropdown.placeholder",
-		message: "Select..."
-	}), preload, initialOptions, onCreateOption, options, filterOption, shouldReloadOptions = false } = props;
-	const [isCreating, setIsCreating] = useState(false);
-	const asAsync = !!loadOptions || !!onCreateOption;
-	const noOptionsMessage = useCallback((inputValue) => {
-		if (!loadOptions) return i18n._({
-			id: "components.dropdown.noOptions",
-			message: "No options"
-		});
-		if (inputValue.length < asyncLoadMinChars) return i18n._({
-			id: "components.dropdown.writeMoreChars",
-			message: `Write at least ${asyncLoadMinChars} characters.`
-		});
-		return i18n._({
-			id: "dataGrid.filterCell",
-			message: "Type to filter"
-		});
-	}, [loadOptions, asyncLoadMinChars]);
-	const handleLoadOptions = useCallback(async (inputValue) => {
-		if (onCreateOption) {
-			if (!inputValue.trim()) return await Promise.resolve(options || []);
-			return await Promise.resolve([...options || [], {
-				value: CREATE,
-				label: `${inputValue} (${i18n._({
-					id: "components.dropdown.newOption",
-					message: "new value"
-				})})`,
-				inputValue
-			}]);
-		} else if (!loadOptions || inputValue.length < asyncLoadMinChars) return await Promise.resolve([]);
-		else return await loadOptions(inputValue, false);
-	}, [
-		onCreateOption,
-		loadOptions,
-		asyncLoadMinChars,
-		options
-	]);
-	const [loadedDefaultOptions, setLoadedDefaultOptions] = useState(options || []);
-	useEffect(() => {
-		if (loadOptions && preload && !props.value) loadOptions("", false).then(setLoadedDefaultOptions).catch(console.error);
-	}, [loadOptions]);
-	const [storedSelectedOption, setStoredSelectedOption] = useState(null);
-	useEffect(() => {
-		if (initialOptions?.length) setStoredSelectedOption(initialOptions.find((option) => option.value === props.value) || null);
-		if (loadOptions && !initialOptions && props.value) loadOptions(String(props.value), true).then((selectedOptions) => {
-			setStoredSelectedOption(selectedOptions?.[0] || null);
-		}).catch(console.error);
-	}, [initialOptions, setStoredSelectedOption]);
-	useEffect(() => {
-		if (shouldReloadOptions) setLoadedDefaultOptions(options || []);
-	}, [options]);
-	const handleChange = useCallback(async (option) => {
-		let value;
-		if (onCreateOption && option?.value === CREATE) if (option?.inputValue && option?.inputValue?.trim()?.length < 2) {
-			props?.form.setFieldTouched(name, true, true);
-			props?.form.setFieldError(name, i18n._({
-				id: "form.general.min2Chars",
-				message: "Minimal length is 2 characters."
-			}));
-			return;
-		} else {
-			setIsCreating(true);
-			value = getOptionValue(await onCreateOption(option?.inputValue?.trim() ?? ""));
-			setIsCreating(false);
-		}
-		else {
-			value = getOptionValue(option);
-			loadOptions && setStoredSelectedOption(option);
-		}
-		if (onChange) onChange({ target: {
-			name: name ?? "",
-			type: "change",
-			value
-		} });
-		if (onValueChange) onValueChange(value);
-	}, [
-		onCreateOption,
-		loadOptions,
-		onChange,
-		onValueChange,
-		props?.form,
-		name
-	]);
-	const omitted = [
-		"onValueChange",
-		"placeholder",
-		"options",
-		"loadOptions",
-		"asyncLoadMinChars"
-	];
-	const placeholderValue = isLocked && !disabled ? lockedText : placeholder;
-	const defaultOptions = useMemo(() => {
-		if (!asAsync) return void 0;
-		const staticOptions = onCreateOption ? options : loadedDefaultOptions;
-		if (!storedSelectedOption) return staticOptions || void 0;
-		return staticOptions ? [...staticOptions, storedSelectedOption] : [storedSelectedOption];
-	}, [
-		asAsync,
-		loadedDefaultOptions,
-		onCreateOption,
-		options,
-		storedSelectedOption
-	]);
-	return /* @__PURE__ */ jsx(Select_default, {
-		...omit(omitted, props),
-		filterOption: filterOption || creatableFilterOption,
-		disabled: disabled || isLocked,
-		onChange: handleChange,
-		onBlur,
-		placeholder: placeholderValue,
-		loadingMessage,
-		noOptionsMessage,
-		loadOptions: asAsync ? handleLoadOptions : void 0,
-		containerVariant: asAsync ? "search" : void 0,
-		defaultOptions,
-		options: !asAsync ? options : void 0,
-		isLoading: isCreating || props.isLoading
-	});
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
 };
-//#endregion
-export { SingleSelect as default };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { nanoid } from 'nanoid';
+import { createFilter } from 'react-select';
+import Select from '../Select';
+import { i18n } from '@lingui/core';
+import omit from 'lodash/fp/omit';
+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;
+    return defaultFilterOption(option, rawInput);
+};
+var getOptionValue = function (selectedOption) {
+    if (selectedOption === null) {
+        return null;
+    }
+    else if (Array.isArray(selectedOption)) {
+        return selectedOption.map(function (option) { return option.value; });
+    }
+    else {
+        return selectedOption.value;
+    }
+};
+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 ? 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, _d = props.shouldReloadOptions, shouldReloadOptions = _d === void 0 ? false : _d;
+    var _e = useState(false), isCreating = _e[0], setIsCreating = _e[1];
+    var asAsync = !!loadOptions || !!onCreateOption;
+    var noOptionsMessage = useCallback(function (inputValue) {
+        if (!loadOptions)
+            return i18n._({ id: 'components.dropdown.noOptions', message: 'No options' });
+        if (inputValue.length < asyncLoadMinChars)
+            return i18n._({ id: 'components.dropdown.writeMoreChars', message: "Write at least ".concat(asyncLoadMinChars, " characters.") });
+        return i18n._({ id: 'dataGrid.filterCell', message: 'Type to filter' });
+    }, [loadOptions, asyncLoadMinChars]);
+    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)
+            loadOptions('', false).then(setLoadedDefaultOptions).catch(console.error);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [loadOptions]); // this is intentional
+    var _g = useState(null), storedSelectedOption = _g[0], setStoredSelectedOption = _g[1];
+    useEffect(function () {
+        if (initialOptions === null || initialOptions === void 0 ? void 0 : initialOptions.length) {
+            var selectedOption = initialOptions.find(function (option) { return option.value === props.value; }) || null;
+            setStoredSelectedOption(selectedOption);
+        }
+        if (loadOptions && !initialOptions && props.value) {
+            loadOptions(String(props.value), true)
+                .then(function (selectedOptions) {
+                setStoredSelectedOption((selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions[0]) || null);
+            })
+                .catch(console.error);
+        }
+        // ignored because of props.value, this only finds option for initial value
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [initialOptions, setStoredSelectedOption]);
+    useEffect(function () {
+        if (shouldReloadOptions) {
+            setLoadedDefaultOptions(options || []);
+        }
+    }, [options]);
+    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) {
+            switch (_e.label) {
+                case 0:
+                    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, i18n._({ id: 'form.general.min2Chars', message: 'Minimal length is 2 characters.' }));
+                    return [2 /*return*/];
+                case 1:
+                    setIsCreating(true);
+                    return [4 /*yield*/, onCreateOption((_d = (_c = option === null || option === void 0 ? void 0 : option.inputValue) === null || _c === void 0 ? void 0 : _c.trim()) !== null && _d !== void 0 ? _d : '')];
+                case 2:
+                    newOption = _e.sent();
+                    value = getOptionValue(newOption);
+                    setIsCreating(false);
+                    _e.label = 3;
+                case 3: return [3 /*break*/, 5];
+                case 4:
+                    value = getOptionValue(option);
+                    loadOptions && setStoredSelectedOption(option);
+                    _e.label = 5;
+                case 5:
+                    if (onChange) {
+                        onChange({
+                            target: {
+                                name: name !== null && name !== void 0 ? name : '',
+                                type: 'change',
+                                value: value
+                            }
+                        });
+                    }
+                    if (onValueChange) {
+                        onValueChange(value);
+                    }
+                    return [2 /*return*/];
+            }
+        });
+    }); }, [onCreateOption, loadOptions, onChange, onValueChange, props === null || props === void 0 ? void 0 : props.form, name]);
+    var omitted = ['onValueChange', 'placeholder', 'options', 'loadOptions', 'asyncLoadMinChars'];
+    var displayLockedText = isLocked && !disabled;
+    var placeholderValue = displayLockedText ? lockedText : placeholder;
+    var defaultOptions = useMemo(function () {
+        if (!asAsync)
+            return undefined; // relates only to asAsync true
+        var staticOptions = onCreateOption ? options : loadedDefaultOptions;
+        if (!storedSelectedOption)
+            return staticOptions || undefined;
+        return staticOptions ? __spreadArray(__spreadArray([], staticOptions, true), [storedSelectedOption], false) : [storedSelectedOption];
+    }, [asAsync, loadedDefaultOptions, onCreateOption, options, storedSelectedOption]);
+    return (_jsx(Select, __assign({}, omit(omitted, props), { filterOption: (filterOption || creatableFilterOption), disabled: disabled || isLocked, onChange: handleChange, onBlur: onBlur, placeholder: placeholderValue, loadingMessage: loadingMessage, noOptionsMessage: noOptionsMessage, loadOptions: asAsync ? handleLoadOptions : undefined, containerVariant: asAsync ? 'search' : undefined, defaultOptions: defaultOptions, options: !asAsync ? options : undefined, isLoading: isCreating || props.isLoading })));
+};
+export default SingleSelect;

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/SingleSelect/index.js

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

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

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

package/ui/Elements/SpaceAround/SpaceAround.js

@@ -1,33 +1,53 @@
-import "react";
-import styled$1, { css, th, useTheme, x } from "@xstyled/styled-components";
-import { jsx } from "react/jsx-runtime";
-//#region packages/ui/Elements/SpaceAround/SpaceAround.tsx
-const Wrapper = styled$1(x.div)`
-  width: ${({ $marginLeft, $marginRight }) => `calc(100% - ${$marginLeft || "0px"} - ${$marginRight || "0px"})`};
-  position: relative;
-  box-sizing: border-box;
-  ${({ $spaceAround }) => $spaceAround ? css`
-          margin-top: ${$spaceAround === true || typeof $spaceAround?.marginTop === "undefined" ? 1 : $spaceAround.marginTop};
-          margin-right: ${$spaceAround === true || typeof $spaceAround?.marginRight === "undefined" ? 1 : $spaceAround.marginRight};
-          margin-bottom: ${$spaceAround === true || typeof $spaceAround?.marginBottom === "undefined" ? 2 : $spaceAround.marginBottom};
-          margin-left: ${$spaceAround === true || typeof $spaceAround?.marginLeft === "undefined" ? 0 : $spaceAround.marginLeft};
-        ` : ""};
-  ${({ $spaceBetween }) => $spaceBetween ? css`
-          display: flex;
-          justify-content: space-between;
-        ` : ""};
-`;
-const SpaceAroundWrap = ({ children, spaceBetween = false, spaceAround = true, ...rest }) => {
-	const theme = useTheme();
-	const themeMarginLeft = typeof spaceAround !== "boolean" && spaceAround?.marginLeft ? th.space(spaceAround?.marginLeft)({ theme }) : 0;
-	return /* @__PURE__ */ jsx(Wrapper, {
-		$spaceAround: spaceAround,
-		$spaceBetween: spaceBetween,
-		$marginRight: typeof spaceAround !== "boolean" && spaceAround?.marginRight ? th.space(spaceAround?.marginRight)({ theme }) : 0,
-		$marginLeft: themeMarginLeft,
-		...rest,
-		children
-	});
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
 };
-//#endregion
-export { SpaceAroundWrap as default };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+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', ")");
+}, function (_a) {
+    var $spaceAround = _a.$spaceAround;
+    return $spaceAround
+        ? 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
+            : $spaceAround.marginBottom, $spaceAround === true || typeof ($spaceAround === null || $spaceAround === void 0 ? void 0 : $spaceAround.marginLeft) === 'undefined' ? 0 : $spaceAround.marginLeft) : '';
+}, function (_a) {
+    var $spaceBetween = _a.$spaceBetween;
+    return $spaceBetween
+        ? 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 = 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 })));
+};
+export default SpaceAroundWrap;
+var templateObject_1, templateObject_2, templateObject_3;

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/index.js

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

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

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

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

@@ -0,0 +1,22 @@
+import { SpaceAroundWrap } from '../';
+var meta = {
+    title: 'Elements/SpaceAround',
+    component: SpaceAroundWrap,
+    tags: ['autodocs'],
+    argTypes: {},
+};
+export default meta;
+export var Default = {
+    args: {
+        children: 'This is a content',
+        spaceBetween: false,
+        spaceAround: true,
+    },
+};
+export var ManyPages = {
+    args: {
+        children: 'This is a content',
+        spaceBetween: true,
+        spaceAround: false,
+    },
+};

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

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

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

@@ -1,5 +1,6 @@
-import { type FC } from 'react';
-import { type SpinnerProps } from './types';
+import { FC } from 'react';
+import { SpinnerProps } from './types';
+
 export declare const appearanceToColorMap: {
     error: string;
     concept: string;

package/ui/Elements/Spinner/Spinner.js

@@ -1,39 +1,28 @@
-import { Circle, Svg } from "./styles.js";
-import { jsx } from "react/jsx-runtime";
-//#region packages/ui/Elements/Spinner/Spinner.tsx
-const appearanceToColorMap = {
-	error: "red1",
-	concept: "bgLightGray1",
-	done: "darkGreen",
-	info: "lightGray6",
-	processing: "blue2",
-	success: "green",
-	warning: "yellow1",
-	waiting: "gray1"
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Svg, Circle } from './styles';
+export var appearanceToColorMap = {
+    error: 'red1',
+    concept: 'bgLightGray1',
+    done: 'darkGreen',
+    info: 'lightGray6',
+    processing: 'blue2',
+    success: 'green',
+    warning: 'yellow1',
+    waiting: 'gray1'
 };
-const appearanceToFontColorMap = {
-	error: "white",
-	concept: "blue2",
-	done: "white",
-	info: "blue2",
-	processing: "white",
-	success: "white",
-	warning: "blue2",
-	waiting: "white"
+export var appearanceToFontColorMap = {
+    error: 'white',
+    concept: 'blue2',
+    done: 'white',
+    info: 'blue2',
+    processing: 'white',
+    success: 'white',
+    warning: 'blue2',
+    waiting: 'white'
 };
-const Spinner = ({ variant = "default", appearance }) => {
-	return /* @__PURE__ */ jsx(Svg, {
-		viewBox: "22 22 44 44",
-		$variant: variant,
-		children: /* @__PURE__ */ jsx(Circle, {
-			cx: "44",
-			cy: "44",
-			r: "20.2",
-			fill: "none",
-			strokeWidth: "3.6",
-			color: appearance ? appearanceToFontColorMap[appearance] : "blue2"
-		})
-	});
+export var Spinner = function (_a) {
+    var _b = _a.variant, variant = _b === void 0 ? 'default' : _b, appearance = _a.appearance;
+    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 }) }));
 };
-//#endregion
-export { Spinner, Spinner as default, appearanceToColorMap, appearanceToFontColorMap };
+export default Spinner;

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/index.js

@@ -1,5 +1,3 @@
-import { Spinner } from "./Spinner.js";
-//#region packages/ui/Elements/Spinner/index.ts
-var Spinner_default = Spinner;
-//#endregion
-export { Spinner, Spinner_default as default };
+import 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-webpack5';
+import { StoryObj } from '@storybook/react-webpack5';
+
 declare const meta: {
     title: string;
-    component: import("react").FC<import("../types").SpinnerProps>;
+    component: import('react').FC<import('../types').SpinnerProps>;
     tags: string[];
     argTypes: {};
 };