@mailstep/design-system 0.8.27 → 0.8.28

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

@@ -1,305 +1,197 @@
-function _define_property(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-function _object_spread(target) {
-    for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[i] : {};
-        var ownKeys = Object.keys(source);
-        if (typeof Object.getOwnPropertySymbols === "function") {
-            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-            }));
-        }
-        ownKeys.forEach(function(key) {
-            _define_property(target, key, source[key]);
-        });
-    }
-    return target;
-}
-function ownKeys(object, enumerableOnly) {
-    var keys = Object.keys(object);
-    if (Object.getOwnPropertySymbols) {
-        var symbols = Object.getOwnPropertySymbols(object);
-        if (enumerableOnly) {
-            symbols = symbols.filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-            });
-        }
-        keys.push.apply(keys, symbols);
-    }
-    return keys;
-}
-function _object_spread_props(target, source) {
-    source = source != null ? source : {};
-    if (Object.getOwnPropertyDescriptors) {
-        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-        ownKeys(Object(source)).forEach(function(key) {
-            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-        });
-    }
-    return target;
-}
-import { th } from "@xstyled/system";
-var CustomStyles = {
-    control: function control(styles, param) {
-        var selectProps = param.selectProps, theme = param.theme, isFocused = param.isFocused, isDisabled = param.isDisabled;
-        var _styles_hover;
-        var colors = theme.colors;
-        return _object_spread_props(_object_spread({}, 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": _object_spread_props(_object_spread({}, (_styles_hover = styles["&:hover"]) !== null && _styles_hover !== void 0 ? _styles_hover : {}), {
-                borderColor: colors.inputBorderHoverColor
-            }),
-            fontSize: "14px",
-            minWidth: "min-content",
-            ".inputIcon": {
-                color: isDisabled ? colors.defaultControlColor : selectProps.value ? colors.inputTextColor : colors.defaultControlColor
-            }
-        });
-    },
-    valueContainer: function valueContainer(styles, param) {
-        var theme = param.theme;
-        return _object_spread_props(_object_spread({}, styles), {
-            width: "50px",
-            paddingLeft: "7px",
-            flexWrap: theme.flexWrap
-        });
-    },
-    singleValue: function singleValue(styles, param) {
-        var selectProps = param.selectProps, theme = param.theme, isDisabled = param.isDisabled;
-        return _object_spread_props(_object_spread({}, 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 multiValue(styles, state) {
-        var theme = state.theme;
-        return _object_spread_props(_object_spread({}, styles), {
-            color: theme.colors.inputTextColor,
-            fontWeight: theme.textWeightNormal,
-            backgroundColor: "#E7EBEF",
-            borderRadius: "4px",
-            "& svg": {
-                color: theme.colors.inputTextColor
-            },
-            " > div": {
-                fontSize: "12px"
-            }
-        });
-    },
-    multiValueLabel: function multiValueLabel(styles) {
-        return _object_spread_props(_object_spread({}, styles), {
-            fontSize: "unset",
-            padding: "5px"
-        });
-    },
-    multiValueRemove: function multiValueRemove(styles, param) {
-        var theme = param.theme;
-        return _object_spread_props(_object_spread({}, styles), {
-            color: theme.colors.inputBorderColor
-        });
-    },
-    placeholder: function placeholder(styles, state) {
-        var theme = state.theme, selectProps = state.selectProps;
-        return _object_spread_props(_object_spread({}, 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 loadingMessage(styles, param) {
-        var theme = param.theme;
-        return _object_spread_props(_object_spread({}, styles), {
-            color: theme.colors.optionTextColor
-        });
-    },
-    noOptionsMessage: function noOptionsMessage(styles, param) {
-        var theme = param.theme;
-        return _object_spread_props(_object_spread({}, styles), {
-            color: theme.colors.optionTextColor
-        });
-    },
-    input: function input(styles, param) {
-        var theme = param.theme;
-        return _object_spread_props(_object_spread({}, styles), {
-            color: theme.colors.inputTextColor
-        });
-    },
-    option: function option(styles, param) {
-        var isSelected = param.isSelected, theme = param.theme, isDisabled = param.isDisabled, selectProps = param.selectProps;
-        var 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 === null || selectProps === void 0 ? void 0 : selectProps.systemTheme
-            }),
-            "&:hover": {
-                backgroundColor: isSelected ? theme.colors.hoverToActiveOptionBackground : !isDisabled ? theme.colors.menuHoverBackgroundColor : void 0
-            }
-        };
-    },
-    menu: function menu(styles, state) {
-        var theme = state.theme;
-        return _object_spread_props(_object_spread({}, 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: function menuList(styles, param) {
-        var theme = param.theme;
-        return _object_spread_props(_object_spread({}, 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 dropdownIndicator(styles) {
-        return _object_spread_props(_object_spread({}, styles), {
-            justifyContent: "center",
-            alignItems: "center",
-            padding: "0px 7px 0px 0px"
-        });
-    },
-    clearIndicator: function clearIndicator(styles, state) {
-        var theme = state.theme, selectProps = state.selectProps;
-        return _object_spread_props(_object_spread({}, styles), {
-            justifyContent: "center",
-            alignItems: "center",
-            padding: theme.narrowIndicators && selectProps.containerVariant !== "search" ? "0px" : "0px 4px",
-            color: theme.colors.clearIndicatorColor,
-            cursor: "pointer"
-        });
-    },
-    indicatorSeparator: function indicatorSeparator() {
-        return {
-            display: "none"
-        };
-    }
+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" })
 };
-var getCustomTheme = function getCustomTheme(theme, optionVariant, useFilterSubvariant) {
-    var inputTextColor = th.color("blue2")({
-        theme: theme
-    });
-    var customColors = {
-        primary: th.color("red1")({
-            theme: theme
-        }),
-        inputTextColor: inputTextColor,
-        whiteBackgroundColor: th.color("white")({
-            theme: theme
-        }),
-        optionTextColor: th.color("blue2")({
-            theme: theme
-        }),
-        menuHoverBackgroundColor: th.color("bgLightGray1")({
-            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 _object_spread_props(_object_spread({}, 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 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.js

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

package/ui/Elements/SimpleLink/SimpleLink.js

@@ -1,64 +1,35 @@
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n          pointer-events: none;\n          opacity: 0.5;\n        "
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n          text-decoration: underline;\n        "
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n          font-weight: ",
-        ";\n        "
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject3() {
-    var data = _tagged_template_literal([
-        "\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"
-    ]);
-    _templateObject3 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import { Link as ReactLink } from "react-router-dom";
-import styled, { css } from "@xstyled/styled-components";
-var StyledLink = styled(ReactLink)(_templateObject3(), function(param) {
-    var disabled = param.disabled;
-    return disabled ? css(_templateObject()) : null;
-}, function(param) {
-    var $decorate = param.$decorate;
-    return $decorate ? css(_templateObject1()) : null;
-}, function(param) {
-    var variant = param.variant;
-    return variant ? css(_templateObject2(), variant) : null;
-});
-var SimpleLink_default = StyledLink;
-export { SimpleLink_default as default };
+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.js

@@ -1,3 +1,5 @@
-import SimpleLink from "./SimpleLink";
-var SimpleLink_default = SimpleLink;
-export { SimpleLink, SimpleLink_default as default };
+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 };