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

package/ui/Elements/SingleSelect/SingleSelect.js

@@ -1,200 +1,150 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
+import 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 __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 getOptionValue = (selectedOption) => {
+	if (selectedOption === null) return null;
+	else if (Array.isArray(selectedOption)) return selectedOption.map((option) => option.value);
+	else return selectedOption.value;
 };
-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 };
-    }
+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 __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;
+//#endregion
+export { SingleSelect as default };

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

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

package/ui/Elements/SingleSelect/index.js

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

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

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

package/ui/Elements/SpaceAround/SpaceAround.js

@@ -1,53 +1,33 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
+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 __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;
+//#endregion
+export { SpaceAroundWrap as default };

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

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

package/ui/Elements/SpaceAround/index.js

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

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

@@ -1,8 +1,7 @@
-import { StoryObj } from '@storybook/react-webpack5';
-
+import type { 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/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,6 +1,5 @@
-import { FC } from 'react';
-import { SpinnerProps } from './types';
-
+import { type FC } from 'react';
+import { type SpinnerProps } from './types';
 export declare const appearanceToColorMap: {
     error: string;
     concept: string;

package/ui/Elements/Spinner/Spinner.js

@@ -1,28 +1,39 @@
-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'
+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"
 };
-export var appearanceToFontColorMap = {
-    error: 'white',
-    concept: 'blue2',
-    done: 'white',
-    info: 'blue2',
-    processing: 'white',
-    success: 'white',
-    warning: 'blue2',
-    waiting: 'white'
+const appearanceToFontColorMap = {
+	error: "white",
+	concept: "blue2",
+	done: "white",
+	info: "blue2",
+	processing: "white",
+	success: "white",
+	warning: "blue2",
+	waiting: "white"
 };
-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 }) }));
+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 default Spinner;
+//#endregion
+export { Spinner, Spinner as default, appearanceToColorMap, appearanceToFontColorMap };

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

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

package/ui/Elements/Spinner/index.js

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

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

@@ -1,8 +1,7 @@
-import { StoryObj } from '@storybook/react-webpack5';
-
+import type { 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: {};
 };

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/styled-components").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/styled-components").Theme, {}, never>;