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

package/ui/Elements/Portal/index.js

@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+import ReactDom from "react-dom";
+//#region packages/ui/Elements/Portal/index.ts
+const Portal = ({ children }) => {
+	const [container] = useState(() => document.createElement("div"));
+	useEffect(() => {
+		try {
+			document.body.appendChild(container);
+		} catch (e) {
+			console.log(e);
+		}
+		return () => {
+			try {
+				document.body.removeChild(container);
+			} catch (e) {
+				console.log(e);
+			}
+		};
+	}, []);
+	return ReactDom.createPortal(children, container);
+};
+//#endregion
+export { Portal, Portal as default };

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

@@ -1,5 +1,4 @@
-import { FC } from 'react';
-
+import { type FC } from 'react';
 type Props = {
     progress?: number;
     status?: 'loading' | 'finished' | 'error';

package/ui/Elements/ProgressBar/ProgressBar.js

@@ -0,0 +1,17 @@
+import { Progress, ProgressDescription, StyledProgressBar } from "./styles.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Elements/ProgressBar/ProgressBar.tsx
+const ProgressBar = ({ progress = 0, status, errorMessage, noText, variant }) => {
+	if (progress > 100 || progress < 0) console.warn("Progress value should be number between 0 and 100.");
+	return /* @__PURE__ */ jsxs(StyledProgressBar, {
+		status,
+		variant,
+		children: [/* @__PURE__ */ jsx(Progress, {
+			progress,
+			status
+		}), !noText && /* @__PURE__ */ jsx(ProgressDescription, { children: status === "error" && errorMessage ? errorMessage : `${progress}%` })]
+	});
+};
+//#endregion
+export { ProgressBar as default };

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

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

package/ui/Elements/ProgressBar/index.js

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

package/ui/Elements/ProgressBar/stories/ProgressBar.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<{
+    component: import("react").FC<{
         progress?: number;
         status?: "loading" | "finished" | "error";
         errorMessage?: string;

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";
 }, 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/ProgressBar/styles.js

@@ -0,0 +1,72 @@
+import { createRgba } from "../../utils/CreateRgba/createRgba.js";
+import "../../utils/index.js";
+import styled$1, { css, keyframes, th } from "@xstyled/styled-components";
+//#region packages/ui/Elements/ProgressBar/styles.ts
+const StyledProgressBar = styled$1.div`
+  position: relative;
+  display: flex;
+  width: 100%;
+  min-width: 250px;
+  height: ${(props) => props.variant === "thin" ? `12px` : `35px`};
+  color: ${th("colors.white")};
+  background-color: ${(props) => props.status === "finished" ? createRgba(props.theme.colors.success, .4) : `${th("colors.red1")}`};
+  justify-content: center;
+  border: slim;
+  border-color: ${(props) => props.status === "finished" ? `${th("colors.success")}` : `${th("colors.red1")}`};
+  border-radius: md;
+  overflow: hidden;
+`;
+const slide = keyframes`
+0%{
+  background-position-x: 0%;
+}
+100% {
+  background-position-x: 500px;
+}
+`;
+const StyledStatusFinished = css`
+  background: repeating-linear-gradient(
+    -45deg,
+    ${(props) => createRgba(props.theme.colors.success, .4)},
+    ${(props) => createRgba(props.theme.colors.success, .4)} 10px,
+    ${th("colors.success")} 10px,
+    ${th("colors.success")} 22.1px
+  );
+  background-size: 4000px 50px;
+`;
+const StyledStatusLoading = css`
+  background: repeating-linear-gradient(
+    -45deg,
+    ${th("colors.red1")},
+    ${th("colors.red1")} 10px,
+    ${th("colors.red1")} 10px,
+    ${th("colors.red1")} 22.1px
+  );
+  background-size: 4000px 50px;
+`;
+const StyledStatusError = css`
+  background: repeating-linear-gradient(
+    -45deg,
+    ${th("colors.red1")},
+    ${th("colors.red1")} 10px,
+    ${th("colors.red1")} 10px,
+    ${th("colors.red1")} 22.1px
+  );
+  background-size: 4000px 50px;
+`;
+const Progress = styled$1.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: ${(props) => `${props.progress}%`};
+  height: 35px;
+  animation: ${slide} 20s linear infinite;
+  transition: width 500ms;
+  ${(props) => props.status === "finished" ? StyledStatusFinished : props.status === "error" ? StyledStatusError : StyledStatusLoading}
+`;
+const ProgressDescription = styled$1.span`
+  position: relative;
+  align-self: center;
+`;
+//#endregion
+export { Progress, ProgressDescription, StyledProgressBar };

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

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

package/ui/Elements/Select/Select.js

@@ -0,0 +1,97 @@
+import ErrorMessage from "../ErrorMessage/ErrorMessage.js";
+import "../ErrorMessage/index.js";
+import { FieldLabel } from "../Label/Label.js";
+import "../Label/index.js";
+import SpaceAround_default from "../SpaceAround/index.js";
+import { StyledAsyncSelect, StyledReactSelect, Wrapper } from "./styles.js";
+import { useStylesAndComponents } from "./themes/index.js";
+import { useCallback, useMemo } from "react";
+import { useTheme } from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { i18n } from "@lingui/core";
+//#region packages/ui/Elements/Select/Select.tsx
+const emptyOptions = [];
+const noOptionsMessage = () => i18n._({
+	id: "select.noOptions",
+	message: "no options"
+});
+const loadingMessage = () => i18n._({
+	id: "components.dropdown.loading",
+	message: "Loading..."
+});
+const Select = ({ label, name, value = "", options = emptyOptions, defaultOptions, loadOptions, onChange, onBlur, error, isInvalid, isLoading, isDarkPlaceholderText, spaceAround = false, disabled, onInputChange, isSearchable, isMulti, className, useSimplifiedOptions = false, showSelectAllButton = false, shortValues = true, shortVariant = "block", style, optionVariant, multiLabelVariant, containerVariant, placeholder, placeholderIcon, innerRef, maxMenuHeight, getOptionValue, onIconClick, ...passTroughProps }) => {
+	const isAsync = !!loadOptions;
+	if (showSelectAllButton && !isMulti) console.error("CheckboxSelect incompatible props");
+	const setAllOptions = useCallback(({ options }) => {
+		onChange?.(options || []);
+	}, [onChange, options]);
+	const unsetAllOptions = useCallback(() => {
+		if (typeof onChange === "function") onChange?.(emptyOptions);
+	}, [onChange]);
+	const icon = containerVariant === "search" && !placeholderIcon && placeholderIcon !== null ? "search" : placeholderIcon || void 0;
+	const modifiedMaxMenuHeight = showSelectAllButton && maxMenuHeight ? maxMenuHeight - 30 : maxMenuHeight;
+	const [customComponents, customTheme, customStyles] = useStylesAndComponents(style, optionVariant, multiLabelVariant, containerVariant, useSimplifiedOptions, showSelectAllButton);
+	const RenderComponent = isAsync ? StyledAsyncSelect : StyledReactSelect;
+	let selectedOption;
+	const localGetOptionValue = useMemo(() => getOptionValue || ((option) => option?.value), [getOptionValue]);
+	if (Array.isArray(value)) {
+		selectedOption = (defaultOptions || options).filter((option) => value.includes(localGetOptionValue(option)));
+		selectedOption = selectedOption?.length ? selectedOption : null;
+	} else if (value !== void 0) selectedOption = (defaultOptions || options).find((option) => localGetOptionValue(option) === value) || null;
+	const theme = useTheme();
+	const handleLoadOptions = useMemo(() => {
+		return loadOptions ? async (fulltext) => await loadOptions(fulltext) : void 0;
+	}, [loadOptions]);
+	return /* @__PURE__ */ jsxs(SpaceAround_default, {
+		spaceAround,
+		className,
+		children: [/* @__PURE__ */ jsxs(Wrapper, { children: [label && /* @__PURE__ */ jsx(FieldLabel, {
+			htmlFor: name,
+			children: label
+		}), /* @__PURE__ */ jsx(RenderComponent, {
+			id: name,
+			name,
+			options,
+			loadOptions: handleLoadOptions,
+			defaultOptions,
+			value: selectedOption,
+			onChange,
+			onBlur,
+			isDisabled: disabled || isLoading,
+			isLoading,
+			isInvalid: isInvalid !== void 0 ? isInvalid : !!error,
+			isDarkPlaceholderText,
+			placeholder: placeholder || i18n._({
+				id: "components.dropdown.placeholder",
+				message: "Select..."
+			}),
+			styles: customStyles,
+			theme: customTheme,
+			icon,
+			onIconClick,
+			hideSelectedOptions: !!(isMulti && multiLabelVariant !== "count"),
+			onInputChange,
+			isSearchable: isAsync || isSearchable,
+			isMulti,
+			classNamePrefix: "react-select",
+			components: customComponents,
+			closeMenuOnSelect: isMulti ? false : void 0,
+			noOptionsMessage,
+			...passTroughProps,
+			ref: innerRef,
+			tabIndex: null,
+			systemTheme: theme,
+			onCustomSelectAll: setAllOptions,
+			onCustomDeselectAll: unsetAllOptions,
+			selectAllButton: showSelectAllButton,
+			maxMenuHeight: modifiedMaxMenuHeight,
+			getOptionValue,
+			loadingMessage,
+			shortValues,
+			shortVariant,
+			containerVariant
+		})] }), error && /* @__PURE__ */ jsx(ErrorMessage, { children: error })]
+	});
+};
+//#endregion
+export { Select as default };

package/ui/Elements/Select/components/ChevronOption.js

@@ -0,0 +1,31 @@
+import Checkbox_default from "../../../Forms/Checkbox/Checkbox.js";
+import Toggle from "../../Toggle/Toggle.js";
+import SelectedIndicator from "./SelectedIndicator.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { components } from "react-select";
+//#region packages/ui/Elements/Select/components/ChevronOption.tsx
+const ChevronOption = (props) => {
+	const { theme, isSelected, selectOption, children, data } = props;
+	const showCheckbox = !!(theme.optionVariant == "checkbox");
+	const showToggle = !!(theme.optionVariant == "toggle");
+	return /* @__PURE__ */ jsxs(components.Option, {
+		...props,
+		children: [(showCheckbox || showToggle) && /* @__PURE__ */ jsxs(SelectedIndicator, { children: [showCheckbox && /* @__PURE__ */ jsx(Checkbox_default, {
+			checked: isSelected,
+			size: 2,
+			readOnly: true
+		}), showToggle && /* @__PURE__ */ jsx(Toggle, {
+			name: "",
+			onChange: selectOption,
+			checked: isSelected,
+			spaceAround: false,
+			variant: "grid"
+		})] }), /* @__PURE__ */ jsx("span", {
+			className: "label",
+			"data-cy": `dropdownModalOption${data.index}`,
+			children
+		})]
+	});
+};
+//#endregion
+export { ChevronOption, ChevronOption as default };

package/ui/Elements/Select/components/ConnectedMenu.js

@@ -0,0 +1,26 @@
+import SelectAll from "./SelectAll.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { components } from "react-select";
+//#region packages/ui/Elements/Select/components/ConnectedMenu.tsx
+const ConnectedMenu = (props) => {
+	const { theme } = props;
+	const { onCustomSelectAll, onCustomDeselectAll, value, selectAllButton, maxMenuHeight, isLoading } = props.selectProps;
+	const filteredOptions = useMemo(() => props.children?.map?.(({ props: { value, label } }) => ({
+		label,
+		value
+	})), [props.children]);
+	return /* @__PURE__ */ jsxs(components.MenuList, {
+		...props,
+		children: [selectAllButton && !isLoading && /* @__PURE__ */ jsx(SelectAll, {
+			theme,
+			onCustomSelectAll,
+			onCustomDeselectAll,
+			value,
+			options: filteredOptions,
+			maxMenuHeight
+		}), props.children]
+	});
+};
+//#endregion
+export { ConnectedMenu as default };

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

@@ -1,5 +1,4 @@
-import { MultiValueProps } from 'react-select';
-
+import { type MultiValueProps } from 'react-select';
 type CountMultiValueProps = MultiValueProps & {
     data: unknown;
     selectProps: MultiValueProps<unknown, boolean, any>['selectProps'] & {

package/ui/Elements/Select/components/CountMultiValue.js

@@ -0,0 +1,42 @@
+import styled$1, { th } from "@xstyled/styled-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { components } from "react-select";
+//#region packages/ui/Elements/Select/components/CountMultiValue.tsx
+const StyledNumber = styled$1.div`
+  background: ${th.color("lightGray7")};
+  height: 25px;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  border-radius: md;
+  padding: 2px 6px;
+`;
+const JoinedMultiValue = styled$1.div`
+  white-space: nowrap;
+  position: absolute;
+  color: gray3;
+  padding-left: ${({ isFocused }) => isFocused ? "8px" : "0"};
+`;
+const CountMultiValue = (props) => {
+	const shortValues = props.selectProps.shortValues;
+	const selectVal = props.selectProps.value;
+	const inputVal = props.selectProps.inputValue;
+	const shortVariant = props.selectProps.shortVariant;
+	const isFirst = props.data?.value === selectVal[0]?.value;
+	const menuIsOpen = props.selectProps.menuIsOpen;
+	if (!shortValues) return /* @__PURE__ */ jsx(components.MultiValue, {
+		...props,
+		children: props.children
+	});
+	if (!isFirst || inputVal) return null;
+	if (shortVariant === "join") return /* @__PURE__ */ jsxs(JoinedMultiValue, {
+		isFocused: menuIsOpen,
+		children: [selectVal.length > 1 ? `(${Number(selectVal.length)}) ` : "", selectVal.map((option) => option.label).join(", ")]
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(components.MultiValue, {
+		...props,
+		children: props.children
+	}), selectVal.length > 1 ? /* @__PURE__ */ jsxs(StyledNumber, { children: ["+", selectVal.length - 1] }) : null] });
+};
+//#endregion
+export { CountMultiValue as default };

package/ui/Elements/Select/components/CustomInput.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import { components } from "react-select";
+//#region packages/ui/Elements/Select/components/CustomInput.tsx
+const CustomInput = (props) => {
+	const { name } = props.selectProps;
+	const value = !!name ? `${name}Inp` : props.id;
+	return /* @__PURE__ */ jsx(components.Input, {
+		...props,
+		"data-cy": value
+	});
+};
+//#endregion
+export { CustomInput, CustomInput as default };

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

@@ -1,5 +1,4 @@
-import { DropdownIndicatorProps } from 'react-select';
-
+import { type DropdownIndicatorProps } from 'react-select';
 type DropdownIndicatorCustomProps = DropdownIndicatorProps & {
     theme: any;
 };

package/ui/Elements/Select/components/DropdownIndicator.js

@@ -0,0 +1,30 @@
+import { ArrowDown } from "../../Icon/icons/ArrowDown.js";
+import { ArrowUp } from "../../Icon/icons/ArrowUp.js";
+import styled$1 from "@xstyled/styled-components";
+import { jsx } from "react/jsx-runtime";
+import { components } from "react-select";
+//#region packages/ui/Elements/Select/components/DropdownIndicator.tsx
+const ChevronDiv = styled$1.div`
+  align-self: center;
+  display: flex;
+`;
+const DropdownIndicator = (props) => {
+	const { menuIsOpen, name } = props.selectProps;
+	const iconColor = props.theme.colors.placeholderTextColor;
+	return /* @__PURE__ */ jsx(components.DropdownIndicator, {
+		...props,
+		children: /* @__PURE__ */ jsx(ChevronDiv, {
+			className: "chevron",
+			"data-cy": `${name || ""}ChevronBtn`,
+			children: menuIsOpen ? /* @__PURE__ */ jsx(ArrowUp, {
+				width: "16px",
+				stroke: iconColor
+			}) : /* @__PURE__ */ jsx(ArrowDown, {
+				width: "16px",
+				stroke: iconColor
+			})
+		})
+	});
+};
+//#endregion
+export { DropdownIndicator, DropdownIndicator as default };

package/ui/Elements/Select/components/IconValueContainer.js

@@ -0,0 +1,30 @@
+import Icon from "../../Icon/Icon.js";
+import styled$1 from "@xstyled/styled-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { components } from "react-select";
+//#region packages/ui/Elements/Select/components/IconValueContainer.tsx
+const IconDiv = styled$1.div`
+  padding-left: 7px;
+  margin-right: -3px;
+  align-self: center;
+  & > * {
+    color: ${({ hasValue }) => hasValue ? "black" : "#a3b3c1"};
+  }
+`;
+const IconValueContainer = (props) => {
+	const { children, ...rest } = props;
+	const icon = rest.selectProps?.icon;
+	const hasValue = rest.hasValue;
+	const onIconClick = rest.selectProps?.onIconClick;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [icon && /* @__PURE__ */ jsx(IconDiv, {
+		className: "inputIcon",
+		hasValue,
+		onMouseDown: onIconClick,
+		children: /* @__PURE__ */ jsx(Icon, { icon })
+	}), /* @__PURE__ */ jsx(components.ValueContainer, {
+		...rest,
+		children
+	})] });
+};
+//#endregion
+export { IconValueContainer as default };

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

@@ -1,5 +1,5 @@
-import { SelectProps, CustomTheme, Option } from '../types';
-
+import { SelectProps, CustomTheme } from '../types';
+import { Option } from '../types';
 type Props = {
     onCustomSelectAll: ({ options }: {
         options?: Option[];

package/ui/Elements/Select/components/SelectAll.js

@@ -0,0 +1,90 @@
+import Checkbox_default from "../../../Forms/Checkbox/Checkbox.js";
+import Toggle from "../../Toggle/Toggle.js";
+import SelectedIndicator from "./SelectedIndicator.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import styled$1, { th } from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Trans } from "@lingui/react";
+//#region packages/ui/Elements/Select/components/SelectAll.tsx
+const SelectAllWrap = styled$1.div`
+  display: flex;
+  margin: 0px 2px 1px 0px;
+  padding: ${({ additionalPadding }) => additionalPadding ? "8px 27px 8px 10px" : "10px 10px"};
+  font-weight: 400;
+  background-color: ${({ isSelected }) => isSelected ? th.color("red20") : "transparent"};
+  color: ${({ isSelected }) => isSelected ? th.color("red1") : th.color("textPrimary")};
+  border-radius: 6px;
+  height: 36px;
+  cursor: pointer;
+
+  :hover {
+    background-color: ${({ isSelected }) => isSelected ? th.color("red30") : th.color("bgLightGray1")};
+  }
+`;
+const SelectAll = ({ onCustomSelectAll, onCustomDeselectAll, value, options, maxMenuHeight, theme }) => {
+	const showCheckbox = !!(theme.optionVariant === "checkbox");
+	const showToggle = !!(theme.optionVariant === "toggle");
+	const ref = useRef(null);
+	const [additionalPadding, setAdditionalPadding] = useState(false);
+	const [isSelected, setIsSelected] = useState(false);
+	const handleSelectAll = useCallback(() => {
+		if (!isSelected) {
+			setIsSelected(true);
+			onCustomSelectAll({ options });
+		} else if (isSelected) {
+			setIsSelected(false);
+			onCustomDeselectAll();
+		}
+	}, [
+		isSelected,
+		onCustomDeselectAll,
+		onCustomSelectAll,
+		options
+	]);
+	useEffect(() => {
+		ref?.current?.offsetHeight && setAdditionalPadding(ref.current.offsetHeight * (options?.length || 0) > maxMenuHeight);
+	}, [
+		additionalPadding,
+		maxMenuHeight,
+		options?.length,
+		value
+	]);
+	useEffect(() => {
+		if (value && Array.isArray(value)) {
+			options?.length === value.length && setIsSelected(true);
+			options?.length !== value.length && setIsSelected(false);
+		}
+	}, [
+		maxMenuHeight,
+		options?.length,
+		value
+	]);
+	if (!options?.length) return null;
+	return /* @__PURE__ */ jsxs(SelectAllWrap, {
+		isSelected,
+		onClick: handleSelectAll,
+		ref,
+		additionalPadding,
+		children: [
+			(showCheckbox || showToggle) && /* @__PURE__ */ jsxs(SelectedIndicator, { children: [showCheckbox && /* @__PURE__ */ jsx(Checkbox_default, {
+				checked: isSelected,
+				size: 2,
+				readOnly: true
+			}), showToggle && /* @__PURE__ */ jsx(Toggle, {
+				name: "",
+				checked: isSelected,
+				spaceAround: false,
+				variant: "grid"
+			})] }),
+			/* @__PURE__ */ jsx(Trans, {
+				id: "datagrid.filterCell.selectAllLabel",
+				message: "select all"
+			}),
+			" (",
+			options?.length,
+			")"
+		]
+	});
+};
+//#endregion
+export { SelectAll as default };

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

@@ -0,0 +1,7 @@
+import styled$1 from "@xstyled/styled-components";
+//#region packages/ui/Elements/Select/components/SelectedIndicator.tsx
+const SelectedIndicator = styled$1.div`
+  padding-right: 12px;
+`;
+//#endregion
+export { SelectedIndicator as default };

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

@@ -1,2 +1,2 @@
-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/components/SimplifiedOption.js

@@ -0,0 +1,17 @@
+import { memo, useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Elements/Select/components/SimplifiedOption.tsx
+const SimplifiedOptionInner = (props) => {
+	const styles = props.getStyles("option", props);
+	const { data, selectOption, innerProps } = props;
+	return /* @__PURE__ */ jsx("div", {
+		style: styles,
+		onClick: useCallback(() => selectOption(data), [data, selectOption]),
+		onMouseOver: innerProps.onMouseOver,
+		onMouseMove: innerProps.onMouseMove,
+		children: props.label
+	});
+};
+const SimplifiedOption = memo(SimplifiedOptionInner, (prevProps, nextProps) => prevProps.isFocused === nextProps.isFocused && prevProps.data?.label === nextProps.data?.label);
+//#endregion
+export { SimplifiedOption as default };

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

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

package/ui/Elements/Select/index.js

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

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

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

package/ui/Elements/Select/styles.js

@@ -0,0 +1,19 @@
+import styled$1 from "@xstyled/styled-components";
+import { system as system$1 } from "/home/linomorfed/Projects/design-system/node_modules/@xstyled/system/dist/index.mjs";
+import ReactSelect from "react-select";
+import AsyncSelect from "react-select/async";
+//#region packages/ui/Elements/Select/styles.ts
+const Wrapper = styled$1.div`
+  display: flex;
+  flex-direction: column;
+`;
+const StyledReactSelect = styled$1(ReactSelect)`
+  ${system$1};
+  font-size: 14px;
+`;
+const StyledAsyncSelect = styled$1(AsyncSelect)`
+  ${system$1};
+  font-size: 14px;
+`;
+//#endregion
+export { StyledAsyncSelect, StyledReactSelect, Wrapper };