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

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

@@ -1,42 +1,41 @@
-import { useMemo } from 'react';
-import ChevronOption from '../components/ChevronOption';
-import ConnectedMenu from '../components/ConnectedMenu';
-import CountMultiValue from '../components/CountMultiValue';
-import CustomInput from '../components/CustomInput';
-import DropdownIndicator from '../components/DropdownIndicator';
-import IconValueContainer from '../components/IconValueContainer';
-import SimplifiedOption from '../components/SimplifiedOption';
-import { useTheme } from '@xstyled/styled-components';
-import { getCustomTheme as getFormCustomTheme, CustomStyles as SelectCustomStyles } from './selectStyles';
-export var useStylesAndComponents = function (style, optionVariant, multiLabelVariant, containerVariant, useSimplifiedOptions, showSelectAllButton) {
-    if (style === void 0) { style = 'form'; }
-    if (optionVariant === void 0) { optionVariant = 'default'; }
-    if (multiLabelVariant === void 0) { multiLabelVariant = 'default'; }
-    if (containerVariant === void 0) { containerVariant = 'default'; }
-    if (useSimplifiedOptions === void 0) { useSimplifiedOptions = false; }
-    if (showSelectAllButton === void 0) { showSelectAllButton = false; }
-    var systemTheme = useTheme();
-    return useMemo(function () {
-        var 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;
-        var themes = getFormCustomTheme(systemTheme, optionVariant, style === 'gridFilter');
-        var styles = SelectCustomStyles;
-        components.Option = ChevronOption;
-        // performance reasons
-        if (useSimplifiedOptions)
-            components.Option = SimplifiedOption;
-        return [components, themes, styles];
-    }, [multiLabelVariant, containerVariant, showSelectAllButton, style, useSimplifiedOptions, systemTheme, optionVariant]);
+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,6 +1,5 @@
-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;
+export declare const getCustomTheme: (theme: any, optionVariant: Required<SelectProps>["optionVariant"], useFilterSubvariant: boolean) => ThemeGetter;
 export {};

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

@@ -1,150 +1,200 @@
-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 { th } from "@xstyled/system";
+//#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.backgroundColorDisabled : colors.backgroundColor,
+			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: theme.colors.multiValueBackgroundColor,
+			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",
+			color: theme.colors.optionTextColor,
+			backgroundColor: theme.colors.menuBackgroundColor
+		};
+	},
+	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" })
 };
-import { th } from '@xstyled/system';
-// style object https://react-select.com/styles
-export var CustomStyles = {
-    control: function (styles, _a) {
-        var _b;
-        var selectProps = _a.selectProps, theme = _a.theme, isFocused = _a.isFocused, isDisabled = _a.isDisabled;
-        var colors = theme.colors;
-        return __assign(__assign({}, styles), { borderColor: selectProps.isInvalid ? colors.primary : isFocused ? colors.inputTextColor : colors.inputBorderColor, backgroundColor: isDisabled ? colors.backgroundColorDisabled : colors.backgroundColor, boxShadow: theme.focusBoxShadow, borderRadius: theme.borderRadius, '& input': {
-                fontWeight: theme.textWeightNormal,
-                fontFamily: theme.font
-            }, '&:hover': __assign(__assign({}, ((_b = styles['&:hover']) !== null && _b !== void 0 ? _b : {})), { borderColor: colors.inputBorderHoverColor }), fontSize: '14px', minWidth: 'min-content', '.inputIcon': {
-                color: isDisabled ? colors.defaultControlColor : selectProps.value ? colors.inputTextColor : colors.defaultControlColor
-            } });
-    },
-    valueContainer: function (styles, _a) {
-        var theme = _a.theme;
-        return __assign(__assign({}, styles), { width: '50px', paddingLeft: '7px', flexWrap: theme.flexWrap });
-    },
-    singleValue: function (styles, _a) {
-        var selectProps = _a.selectProps, theme = _a.theme, isDisabled = _a.isDisabled;
-        return __assign(__assign({}, 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: function (styles, state) {
-        var theme = state.theme;
-        return __assign(__assign({}, styles), { color: theme.colors.inputTextColor, fontWeight: theme.textWeightNormal, backgroundColor: theme.colors.multiValueBackgroundColor, borderRadius: '4px', '& svg': {
-                color: theme.colors.inputTextColor
-            }, ' > div': {
-                fontSize: '12px'
-            } });
-    },
-    multiValueLabel: function (styles) { return (__assign(__assign({}, styles), { fontSize: 'unset', padding: '5px' })); },
-    multiValueRemove: function (styles, _a) {
-        var theme = _a.theme;
-        return (__assign(__assign({}, styles), { color: theme.colors.inputBorderColor }));
-    },
-    placeholder: function (styles, state) {
-        var theme = state.theme, selectProps = state.selectProps;
-        return __assign(__assign({}, 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: function (styles, _a) {
-        var theme = _a.theme;
-        return (__assign(__assign({}, styles), { color: theme.colors.optionTextColor }));
-    },
-    noOptionsMessage: function (styles, _a) {
-        var theme = _a.theme;
-        return (__assign(__assign({}, styles), { color: theme.colors.optionTextColor }));
-    },
-    input: function (styles, _a) {
-        var theme = _a.theme;
-        return (__assign(__assign({}, styles), { color: theme.colors.inputTextColor }));
-    },
-    option: function (styles, _a) {
-        var isSelected = _a.isSelected, theme = _a.theme, isDisabled = _a.isDisabled, selectProps = _a.selectProps;
-        var defaultColor = theme.colors.optionTextColor;
-        return {
-            color: isSelected ? theme.colors.primary : defaultColor,
-            backgroundColor: isSelected ? theme.colors.activeOptionBackground : undefined,
-            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 === null || selectProps === void 0 ? void 0 : selectProps.systemTheme }),
-            '&:hover': {
-                backgroundColor: isSelected
-                    ? theme.colors.hoverToActiveOptionBackground
-                    : !isDisabled
-                        ? theme.colors.menuHoverBackgroundColor
-                        : undefined
-            }
-        };
-    },
-    menu: function (styles, state) {
-        var theme = state.theme;
-        return __assign(__assign({}, styles), { boxShadow: '0 2px 20px 0 rgba(0, 0, 0, 0.10);', marginTop: '4px', paddingTop: '0', borderRadius: '10px', zIndex: 3, minWidth: 'max-content', color: theme.colors.optionTextColor, backgroundColor: theme.colors.menuBackgroundColor });
-    },
-    menuList: function (styles, _a) {
-        var theme = _a.theme;
-        return __assign(__assign({}, 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: function (styles) {
-        return __assign(__assign({}, styles), { justifyContent: 'center', alignItems: 'center', padding: '0px 7px 0px 0px' });
-    },
-    clearIndicator: function (styles, state) {
-        var theme = state.theme, selectProps = state.selectProps;
-        return __assign(__assign({}, styles), { justifyContent: 'center', alignItems: 'center', padding: theme.narrowIndicators && selectProps.containerVariant !== 'search' ? '0px' : '0px 4px', color: theme.colors.clearIndicatorColor, cursor: 'pointer' });
-    },
-    indicatorSeparator: function () { return ({
-        display: 'none'
-    }); }
-};
-export var getCustomTheme = function (theme, optionVariant, useFilterSubvariant) {
-    var customColors = {
-        primary: th.color('red1')({ theme: theme }),
-        inputTextColor: th.color('blue1')({ theme: theme }),
-        backgroundColor: th.color('white')({ theme: theme }),
-        backgroundColorDisabled: th.color('neutral20')({ theme: theme }),
-        multiValueBackgroundColor: th.color('lightGray7')({ theme: theme }),
-        menuBackgroundColor: th.color('white')({ theme: theme }),
-        optionTextColor: th.color('textPrimary')({ theme: theme }),
-        menuHoverBackgroundColor: th.color('neutral20')({ theme: theme }),
-        inputDisabledColor: th.color('lightGray1')({ theme: theme }),
-        inputBorderColor: th.color('lightGray3')({ theme: theme }),
-        placeholderTextColor: th.color('lightGray3')({ theme: theme }),
-        clearIndicatorColor: th.color('lightGray4')({ theme: theme }),
-        defaultControlColor: th.color('lightGray5')({ theme: theme }),
-        disabledTextColor: th.color('lightGray6')({ theme: theme }),
-        dropdownIndicatorColor: th.color('gray1')({ theme: theme }),
-        inputBorderHoverColor: th.color('gray5')({ theme: theme }),
-        activeOptionBackground: th.color('red20')({ theme: theme }),
-        hoverToActiveOptionBackground: th.color('red30')({ theme: theme })
-    };
-    return function (reactSelectTheme) {
-        return __assign(__assign({}, reactSelectTheme), { colors: customColors, focusBoxShadow: null, height: '38px', flexWrap: useFilterSubvariant ? 'nowrap' : 'wrap', textWeightNormal: th.fontWeight('normal')({ theme: theme }), optionVariant: optionVariant, borderRadius: th.radius('lg')({ theme: theme }), font: th.font('primary')({ theme: theme }), narrowIndicators: !!useFilterSubvariant });
-    };
+const getCustomTheme = (theme, optionVariant, useFilterSubvariant) => {
+	const customColors = {
+		primary: th.color("red1")({ theme }),
+		inputTextColor: th.color("blue1")({ theme }),
+		backgroundColor: th.color("white")({ theme }),
+		backgroundColorDisabled: th.color("neutral20")({ theme }),
+		multiValueBackgroundColor: th.color("lightGray7")({ theme }),
+		menuBackgroundColor: th.color("white")({ theme }),
+		optionTextColor: th.color("textPrimary")({ theme }),
+		menuHoverBackgroundColor: th.color("neutral20")({ 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/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/styled-components").Theme, Props, never>;
 export default StyledLink;

package/ui/Elements/SimpleLink/SimpleLink.js

@@ -1,21 +1,35 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { Link as ReactLink } from 'react-router-dom';
-import styled, { css } from '@xstyled/styled-components';
-var StyledLink = styled(ReactLink)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: inherit;\n  cursor: pointer;\n\n  :visited {\n    color: inherit;\n  }\n  :hover {\n    color: inherit;\n  }\n  :active {\n    color: inherit;\n  }\n  :focus {\n    outline: none;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  color: inherit;\n  cursor: pointer;\n\n  :visited {\n    color: inherit;\n  }\n  :hover {\n    color: inherit;\n  }\n  :active {\n    color: inherit;\n  }\n  :focus {\n    outline: none;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_a) {
-    var disabled = _a.disabled;
-    return disabled
-        ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          pointer-events: none;\n          opacity: 0.5;\n        "], ["\n          pointer-events: none;\n          opacity: 0.5;\n        "]))) : null;
-}, function (_a) {
-    var $decorate = _a.$decorate;
-    return $decorate
-        ? css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          text-decoration: underline;\n        "], ["\n          text-decoration: underline;\n        "]))) : null;
-}, function (_a) {
-    var variant = _a.variant;
-    return variant
-        ? css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          font-weight: ", ";\n        "], ["\n          font-weight: ", ";\n        "])), variant) : null;
-});
-export default StyledLink;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+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

@@ -1,3 +1,5 @@
-import SimpleLink from './SimpleLink';
-export { SimpleLink };
-export default SimpleLink;
+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: {