@mailstep/design-system 0.8.30 → 0.8.31-beta.2

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

@@ -1,197 +1,150 @@
-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.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 __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);
 };
-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
-		};
-	};
+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 });
+    };
 };
-//#endregion
-export { CustomStyles, getCustomTheme };

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

@@ -1,6 +1,7 @@
-import type { RefObject, ReactNode } from 'react';
-import { type Theme, type ControlProps, type CSSObjectWithLabel } from 'react-select';
-import { type SpaceAround } from '../SpaceAround/types';
+import { RefObject, ReactNode } from 'react';
+import { Theme, ControlProps, CSSObjectWithLabel } from 'react-select';
+import { SpaceAround } from '../SpaceAround/types';
+
 export type Option<Value = string | number> = {
     value: Value;
     label: string | number;
@@ -60,7 +61,10 @@ export type BaseColors = {
     optionTextColor: string;
     inputDisabledColor: string;
     inputBorderColor: string;
-    whiteBackgroundColor: string;
+    backgroundColor: string;
+    backgroundColorDisabled: string;
+    multiValueBackgroundColor: string;
+    menuBackgroundColor: string;
     inputTextColor: string;
     placeholderTextColor: string;
     activeOptionBackground: string;

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

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

@@ -1,35 +1,21 @@
-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 };
+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;

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

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

package/ui/Elements/SimpleLink/index.js

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

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

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