@mailstep/design-system 0.8.26 → 0.8.27-beta.0

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

@@ -1,4 +1,3 @@
-import { StylesConfig, SelectComponentsConfig } from 'react-select';
-import { SelectProps } from '../types';
-
+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"]) => [SelectComponentsConfig<unknown, boolean, any>, any, StylesConfig];

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

@@ -0,0 +1,41 @@
+import { ChevronOption } from "../components/ChevronOption.js";
+import ConnectedMenu from "../components/ConnectedMenu.js";
+import CountMultiValue from "../components/CountMultiValue.js";
+import { CustomInput } from "../components/CustomInput.js";
+import { DropdownIndicator } from "../components/DropdownIndicator.js";
+import IconValueContainer from "../components/IconValueContainer.js";
+import SimplifiedOption from "../components/SimplifiedOption.js";
+import { CustomStyles, getCustomTheme } from "./selectStyles.js";
+import { useMemo } from "react";
+import { useTheme } from "@xstyled/styled-components";
+//#region packages/ui/Elements/Select/themes/index.ts
+const useStylesAndComponents = (style = "form", optionVariant = "default", multiLabelVariant = "default", containerVariant = "default", useSimplifiedOptions = false, showSelectAllButton = false) => {
+	const systemTheme = useTheme();
+	return useMemo(() => {
+		const components = { ValueContainer: IconValueContainer };
+		components.DropdownIndicator = DropdownIndicator;
+		if (multiLabelVariant === "count") components.MultiValue = CountMultiValue;
+		if (containerVariant === "search") components.DropdownIndicator = null;
+		if (showSelectAllButton) components.MenuList = ConnectedMenu;
+		components.Input = CustomInput;
+		const themes = getCustomTheme(systemTheme, optionVariant, style === "gridFilter");
+		const styles = CustomStyles;
+		components.Option = ChevronOption;
+		if (useSimplifiedOptions) components.Option = SimplifiedOption;
+		return [
+			components,
+			themes,
+			styles
+		];
+	}, [
+		multiLabelVariant,
+		containerVariant,
+		showSelectAllButton,
+		style,
+		useSimplifiedOptions,
+		systemTheme,
+		optionVariant
+	]);
+};
+//#endregion
+export { useStylesAndComponents };

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

@@ -1,5 +1,4 @@
-import { SelectProps, StylesConfig, CustomTheme } from '../types';
-
+import { type SelectProps, type StylesConfig, type 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;

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

@@ -0,0 +1,197 @@
+import { th } from "/home/linomorfed/Projects/design-system/node_modules/@xstyled/system/dist/index.mjs";
+//#region packages/ui/Elements/Select/themes/selectStyles.ts
+const CustomStyles = {
+	control: (styles, { selectProps, theme, isFocused, isDisabled }) => {
+		const colors = theme.colors;
+		return {
+			...styles,
+			borderColor: selectProps.isInvalid ? colors.primary : isFocused ? colors.inputTextColor : colors.inputBorderColor,
+			backgroundColor: isDisabled ? colors.menuHoverBackgroundColor : colors.whiteBackgroundColor,
+			boxShadow: theme.focusBoxShadow,
+			borderRadius: theme.borderRadius,
+			"& input": {
+				fontWeight: theme.textWeightNormal,
+				fontFamily: theme.font
+			},
+			"&:hover": {
+				...styles["&:hover"] ?? {},
+				borderColor: colors.inputBorderHoverColor
+			},
+			fontSize: "14px",
+			minWidth: "min-content",
+			".inputIcon": { color: isDisabled ? colors.defaultControlColor : selectProps.value ? colors.inputTextColor : colors.defaultControlColor }
+		};
+	},
+	valueContainer: (styles, { theme }) => {
+		return {
+			...styles,
+			width: "50px",
+			paddingLeft: "7px",
+			flexWrap: theme.flexWrap
+		};
+	},
+	singleValue: (styles, { selectProps, theme, isDisabled }) => {
+		return {
+			...styles,
+			position: "absolute",
+			top: "50%",
+			transform: "translateY(-50%)",
+			color: selectProps.isInvalid ? theme.colors.primary : isDisabled ? theme.colors.disabledTextColor : theme.colors.inputTextColor,
+			fontSize: "14px",
+			fontWeight: theme.textWeightNormal
+		};
+	},
+	multiValue: (styles, state) => {
+		const { theme } = state;
+		return {
+			...styles,
+			color: theme.colors.inputTextColor,
+			fontWeight: theme.textWeightNormal,
+			backgroundColor: "#E7EBEF",
+			borderRadius: "4px",
+			"& svg": { color: theme.colors.inputTextColor },
+			" > div": { fontSize: "12px" }
+		};
+	},
+	multiValueLabel: (styles) => ({
+		...styles,
+		fontSize: "unset",
+		padding: "5px"
+	}),
+	multiValueRemove: (styles, { theme }) => ({
+		...styles,
+		color: theme.colors.inputBorderColor
+	}),
+	placeholder: (styles, state) => {
+		const { theme, selectProps } = state;
+		return {
+			...styles,
+			fontSize: "14px",
+			fontWeight: theme.textWeightNormal,
+			textOverflow: "ellipsis",
+			whiteSpace: "nowrap",
+			overflow: "hidden",
+			maxWidth: "calc(100% - 8px)",
+			color: selectProps.isDarkPlaceholderText ? theme.colors.inputTextColor : theme.colors.placeholderTextColor
+		};
+	},
+	loadingMessage: (styles, { theme }) => ({
+		...styles,
+		color: theme.colors.optionTextColor
+	}),
+	noOptionsMessage: (styles, { theme }) => ({
+		...styles,
+		color: theme.colors.optionTextColor
+	}),
+	input: (styles, { theme }) => ({
+		...styles,
+		color: theme.colors.inputTextColor
+	}),
+	option: (styles, { isSelected, theme, isDisabled, selectProps }) => {
+		const defaultColor = theme.colors.optionTextColor;
+		return {
+			color: isSelected ? theme.colors.primary : defaultColor,
+			backgroundColor: isSelected ? theme.colors.activeOptionBackground : void 0,
+			fontWeight: theme.textWeightNormal,
+			fontSize: "14px",
+			cursor: !isDisabled ? "pointer" : "default",
+			display: "flex",
+			flexDirection: "row",
+			alignItems: "center",
+			padding: "7px 10px",
+			minHeight: "36px",
+			marginRight: "4px",
+			marginBottom: "2px",
+			lineHeight: "22px",
+			borderRadius: th.radius("ml")({ theme: selectProps?.systemTheme }),
+			"&:hover": { backgroundColor: isSelected ? theme.colors.hoverToActiveOptionBackground : !isDisabled ? theme.colors.menuHoverBackgroundColor : void 0 }
+		};
+	},
+	menu: (styles, state) => {
+		const { theme } = state;
+		return {
+			...styles,
+			boxShadow: "0 2px 20px 0 rgba(0, 0, 0, 0.10);",
+			marginTop: "4px",
+			paddingTop: "0",
+			borderRadius: "10px",
+			zIndex: 3,
+			minWidth: "max-content",
+			backgroundColor: theme.colors.whiteBackgroundColor
+		};
+	},
+	menuList: (styles, { theme }) => {
+		return {
+			...styles,
+			margin: "8px 4px 8px 8px",
+			"::-webkit-scrollbar-thumb": {
+				border: "none",
+				borderRadius: "4px",
+				height: "47px",
+				backgroundColor: theme.colors.defaultControlColor,
+				"&:hover": { backgroundColor: theme.colors.dropdownIndicatorColor }
+			},
+			"::-webkit-scrollbar": { width: "10px" },
+			"::-webkit-scrollbar-track": {
+				backgroundColor: theme.colors.menuHoverBackgroundColor,
+				borderRadius: "6px"
+			}
+		};
+	},
+	dropdownIndicator: (styles) => {
+		return {
+			...styles,
+			justifyContent: "center",
+			alignItems: "center",
+			padding: "0px 7px 0px 0px"
+		};
+	},
+	clearIndicator: (styles, state) => {
+		const { theme, selectProps } = state;
+		return {
+			...styles,
+			justifyContent: "center",
+			alignItems: "center",
+			padding: theme.narrowIndicators && selectProps.containerVariant !== "search" ? "0px" : "0px 4px",
+			color: theme.colors.clearIndicatorColor,
+			cursor: "pointer"
+		};
+	},
+	indicatorSeparator: () => ({ display: "none" })
+};
+const getCustomTheme = (theme, optionVariant, useFilterSubvariant) => {
+	const inputTextColor = th.color("blue2")({ theme });
+	const customColors = {
+		primary: th.color("red1")({ theme }),
+		inputTextColor,
+		whiteBackgroundColor: th.color("white")({ theme }),
+		optionTextColor: th.color("blue2")({ theme }),
+		menuHoverBackgroundColor: th.color("bgLightGray1")({ theme }),
+		inputDisabledColor: th.color("lightGray1")({ theme }),
+		inputBorderColor: th.color("lightGray3")({ theme }),
+		placeholderTextColor: th.color("lightGray3")({ theme }),
+		clearIndicatorColor: th.color("lightGray4")({ theme }),
+		defaultControlColor: th.color("lightGray5")({ theme }),
+		disabledTextColor: th.color("lightGray6")({ theme }),
+		dropdownIndicatorColor: th.color("gray1")({ theme }),
+		inputBorderHoverColor: th.color("gray5")({ theme }),
+		activeOptionBackground: th.color("red20")({ theme }),
+		hoverToActiveOptionBackground: th.color("red30")({ theme })
+	};
+	return (reactSelectTheme) => {
+		return {
+			...reactSelectTheme,
+			colors: customColors,
+			focusBoxShadow: null,
+			height: "38px",
+			flexWrap: useFilterSubvariant ? "nowrap" : "wrap",
+			textWeightNormal: th.fontWeight("normal")({ theme }),
+			optionVariant,
+			borderRadius: th.radius("lg")({ theme }),
+			font: th.font("primary")({ theme }),
+			narrowIndicators: !!useFilterSubvariant
+		};
+	};
+};
+//#endregion
+export { CustomStyles, getCustomTheme };

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

@@ -1,7 +1,6 @@
-import { RefObject, ReactNode } from 'react';
-import { Theme, ControlProps, CSSObjectWithLabel } from 'react-select';
-import { SpaceAround } from '../SpaceAround/types';
-
+import type { RefObject, ReactNode } from 'react';
+import { type Theme, type ControlProps, type CSSObjectWithLabel } from 'react-select';
+import { type SpaceAround } from '../SpaceAround/types';
 export type Option<Value = string | number> = {
     value: Value;
     label: string | number;

package/ui/Elements/Select/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,7 +1,6 @@
-import { default as React } from 'react';
+import React from 'react';
 import { Link as ReactLink } from 'react-router-dom';
 import { TextVariant } from '../Text/types';
-
 export type ToObjectType = {
     pathname?: string;
     search?: string;
@@ -18,5 +17,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/SimpleLink.js

@@ -0,0 +1,35 @@
+import styled$1, { css } from "@xstyled/styled-components";
+import { Link } from "react-router-dom";
+//#region packages/ui/Elements/SimpleLink/SimpleLink.tsx
+const StyledLink = styled$1(Link)`
+  color: inherit;
+  cursor: pointer;
+
+  :visited {
+    color: inherit;
+  }
+  :hover {
+    color: inherit;
+  }
+  :active {
+    color: inherit;
+  }
+  :focus {
+    outline: none;
+  }
+
+  ${({ disabled }) => disabled ? css`
+          pointer-events: none;
+          opacity: 0.5;
+        ` : null}
+
+  ${({ $decorate }) => $decorate ? css`
+          text-decoration: underline;
+        ` : null}
+
+  ${({ variant }) => variant ? css`
+          font-weight: ${variant};
+        ` : null}
+`;
+//#endregion
+export { StyledLink as default };

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

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

package/ui/Elements/SimpleLink/index.js

@@ -0,0 +1,5 @@
+import StyledLink from "./SimpleLink.js";
+//#region packages/ui/Elements/SimpleLink/index.ts
+var SimpleLink_default = StyledLink;
+//#endregion
+export { StyledLink as SimpleLink, SimpleLink_default as default };

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

@@ -1,6 +1,5 @@
-import { default as React } from 'react';
-import { SelectProps, Option } from '../Select/types';
-
+import React from 'react';
+import { type SelectProps, type Option } from '../Select/types';
 export type FieldValueType = string | number | Array<string | number> | null;
 export type Props = Omit<SelectProps, 'onChange' | 'loadOptions'> & {
     onChange?: (event: {

package/ui/Elements/SingleSelect/SingleSelect.js

@@ -0,0 +1,150 @@
+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 "/home/linomorfed/Projects/design-system/node_modules/nanoid/index.js";
+import omit from "lodash/fp/omit.js";
+//#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);
+};
+const getOptionValue = (selectedOption) => {
+	if (selectedOption === null) return null;
+	else if (Array.isArray(selectedOption)) return selectedOption.map((option) => option.value);
+	else return selectedOption.value;
+};
+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
+	});
+};
+//#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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,33 @@
+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
+	});
+};
+//#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

@@ -0,0 +1,5 @@
+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.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,39 @@
+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"
+};
+const 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"
+		})
+	});
+};
+//#endregion
+export { Spinner, Spinner as default, appearanceToColorMap, appearanceToFontColorMap };

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,5 @@
+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: {};
 };