@mailstep/design-system 0.6.5-beta.2 → 0.6.6

package/ui/Elements/Icon/icons/ArrowUp.js

@@ -0,0 +1,13 @@
+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 { jsx as _jsx } from "react/jsx-runtime";
+export var ArrowUp = function (props) { return (_jsx("svg", __assign({ width: "12", height: "7", viewBox: "0 0 12 7", fill: "none", stroke: "#22394E", xmlns: "http://www.w3.org/2000/svg" }, props, { children: _jsx("path", { d: "M1 6L5.64645 1.35355C5.84171 1.15829 6.15829 1.15829 6.35355 1.35355L11 6", strokeWidth: "2", strokeLinecap: "round" }) }))); };

package/ui/Elements/Icon/icons/Cancel.js

@@ -10,4 +10,4 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-export var Cancel = function (props) { return (_jsx("svg", __assign({ width: "11", height: "11", viewBox: "0 0 11 11", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: _jsx("path", { id: "cancel", fillRule: "evenodd", clipRule: "evenodd", d: "M1.61873 0.375917C1.26726 0.0244455 0.697412 0.0244455 0.34594 0.375917C-0.00553197 0.727389 -0.00553197 1.29724 0.34594 1.64871L4.21225 5.51502L0.34594 9.38133C-0.00553159 9.7328 -0.00553156 10.3026 0.34594 10.6541C0.697412 11.0056 1.26726 11.0056 1.61873 10.6541L5.48504 6.78781L9.35135 10.6541C9.70282 11.0056 10.2727 11.0056 10.6241 10.6541C10.9756 10.3026 10.9756 9.7328 10.6241 9.38133L6.75783 5.51502L10.6241 1.64871C10.9756 1.29724 10.9756 0.727391 10.6241 0.375919C10.2727 0.024447 9.70282 0.024447 9.35135 0.375919L5.48504 4.24223L1.61873 0.375917Z", fill: "#22394E" }) }))); };
+export var Cancel = function (props) { return (_jsx("svg", __assign({ width: "11", height: "11", viewBox: "0 0 11 11", fill: "#22394E", xmlns: "http://www.w3.org/2000/svg" }, props, { children: _jsx("path", { id: "cancel", fillRule: "evenodd", clipRule: "evenodd", d: "M1.61873 0.375917C1.26726 0.0244455 0.697412 0.0244455 0.34594 0.375917C-0.00553197 0.727389 -0.00553197 1.29724 0.34594 1.64871L4.21225 5.51502L0.34594 9.38133C-0.00553159 9.7328 -0.00553156 10.3026 0.34594 10.6541C0.697412 11.0056 1.26726 11.0056 1.61873 10.6541L5.48504 6.78781L9.35135 10.6541C9.70282 11.0056 10.2727 11.0056 10.6241 10.6541C10.9756 10.3026 10.9756 9.7328 10.6241 9.38133L6.75783 5.51502L10.6241 1.64871C10.9756 1.29724 10.9756 0.727391 10.6241 0.375919C10.2727 0.024447 9.70282 0.024447 9.35135 0.375919L5.48504 4.24223L1.61873 0.375917Z" }) }))); };

package/ui/Elements/Icon/icons/index.d.ts

@@ -53,3 +53,5 @@ export { ShoppingBag } from './ShoppingBag';
 export { Truck } from './Truck';
 export { TwoUsers } from './TwoUsers';
 export { Integrations } from './Integrations';
+export { ArrowDown } from './ArrowDown';
+export { ArrowUp } from './ArrowUp';

package/ui/Elements/Icon/icons/index.js

@@ -53,3 +53,5 @@ export { ShoppingBag } from './ShoppingBag';
 export { Truck } from './Truck';
 export { TwoUsers } from './TwoUsers';
 export { Integrations } from './Integrations';
+export { ArrowDown } from './ArrowDown';
+export { ArrowUp } from './ArrowUp';

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

@@ -34,6 +34,8 @@ import Icon from '../../Icon/Icon';
 import { Paragraph3 } from '../../Typography/Typography';
 import Checkbox from '../../../Forms/Checkbox/Checkbox';
 import Toggle from '../../Toggle/Toggle';
+import { ArrowDown } from '../../Icon/icons/ArrowDown';
+import { ArrowUp } from '../../Icon/icons/ArrowUp';
 // Option for big lists
 var SimplifiedOptionInner = function (props) {
     var styles = props.getStyles('option', props);
@@ -43,13 +45,17 @@ var SimplifiedOptionInner = function (props) {
 };
 export var SimplifiedOption = memo(SimplifiedOptionInner, function (prevProps, nextProps) { var _a, _b; return prevProps.isFocused === nextProps.isFocused && ((_a = prevProps.data) === null || _a === void 0 ? void 0 : _a.label) === ((_b = nextProps.data) === null || _b === void 0 ? void 0 : _b.label); });
 // Value container with icon
-var IconDiv = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-left: 12px;\n  align-self: center;\n"], ["\n  padding-left: 12px;\n  align-self: center;\n"])));
+var IconDiv = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-left: 12px;\n  align-self: center;\n  & > * {\n    color: ", ";\n  }\n"], ["\n  padding-left: 12px;\n  align-self: center;\n  & > * {\n    color: ", ";\n  }\n"])), function (_a) {
+    var hasValue = _a.hasValue;
+    return (hasValue ? 'black' : '#a3b3c1');
+});
 export var IconValueContainer = function (props) {
     var _a;
     // eslint-disable-next-line react/prop-types
     var children = props.children, rest = __rest(props, ["children"]);
     var icon = (_a = rest.selectProps) === null || _a === void 0 ? void 0 : _a.icon;
-    return (_jsxs(_Fragment, { children: [icon && (_jsx(IconDiv, { className: "inputIcon", children: _jsx(Icon, { icon: icon }) })), _jsx(components.ValueContainer, __assign({}, rest, { children: children }))] }));
+    var hasValue = rest.hasValue;
+    return (_jsxs(_Fragment, { children: [icon && (_jsx(IconDiv, { className: "inputIcon", hasValue: hasValue, children: _jsx(Icon, { icon: icon }) })), _jsx(components.ValueContainer, __assign({}, rest, { children: children }))] }));
 };
 // MultiValue container replacement with count of selected options
 export var CountMultiValue = function (props) {
@@ -74,12 +80,18 @@ export var ChevronOption = function (props) {
     return (_jsxs(selectComponents.Option, __assign({}, props, { children: [(showCheckbox || showToggle) && (_jsxs(SelectedIndicator, { children: [showCheckbox && _jsx(Checkbox, { checked: isSelected, size: 2, readOnly: true }), showToggle && _jsx(Toggle, { name: "", onChange: selectOption, checked: isSelected, spaceAround: false, variant: 'grid' })] })), _jsx("span", { className: "label", "data-cy": "dropdownModalOption".concat(data.index), children: children })] })));
 };
 // menu with check all and reset config button
-var SelectAll = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  margin: 4px 18px -10px 8px;\n  padding: ", ";\n  font-weight: 400;\n  background-color: ", ";\n  color: blue2;\n  border-radius: 6px;\n  height: 36px;\n  :hover {\n    cursor: pointer;\n    background-color: bgLightGray1;\n  }\n"], ["\n  display: flex;\n  margin: 4px 18px -10px 8px;\n  padding: ", ";\n  font-weight: 400;\n  background-color: ", ";\n  color: blue2;\n  border-radius: 6px;\n  height: 36px;\n  :hover {\n    cursor: pointer;\n    background-color: bgLightGray1;\n  }\n"])), function (_a) {
+var SelectAll = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  margin: 4px 18px -10px 8px;\n  padding: ", ";\n  font-weight: 400;\n  background-color: ", ";\n  color: ", ";\n  border-radius: 6px;\n  height: 36px;\n  :hover {\n    cursor: pointer;\n    background-color: ", ";\n  }\n"], ["\n  display: flex;\n  margin: 4px 18px -10px 8px;\n  padding: ", ";\n  font-weight: 400;\n  background-color: ", ";\n  color: ", ";\n  border-radius: 6px;\n  height: 36px;\n  :hover {\n    cursor: pointer;\n    background-color: ", ";\n  }\n"])), function (_a) {
     var additionalPadding = _a.additionalPadding;
     return (additionalPadding ? '8px 27px 8px 10px' : '8px 10px');
 }, function (_a) {
     var isSelected = _a.isSelected;
     return (isSelected ? th.color('red20') : 'transparent');
+}, function (_a) {
+    var isSelected = _a.isSelected;
+    return (isSelected ? th.color('red1') : th.color('textPrimary'));
+}, function (_a) {
+    var isSelected = _a.isSelected;
+    return (isSelected ? th.color('red30') : th.color('bgLightGray1'));
 });
 var ConfigWrap = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  text-align: center;\n  cursor: pointer;\n  color: red1;\n  text-decoration: underline;\n  margin: 0 30px 0 20px;\n  padding-bottom: 7px;\n  :first-letter {\n    text-transform: capitalize;\n  }\n  :hover {\n    color: red3;\n  }\n"], ["\n  text-align: center;\n  cursor: pointer;\n  color: red1;\n  text-decoration: underline;\n  margin: 0 30px 0 20px;\n  padding-bottom: 7px;\n  :first-letter {\n    text-transform: capitalize;\n  }\n  :hover {\n    color: red3;\n  }\n"])));
 export var ConnectedMenu = function (props) {
@@ -120,6 +132,6 @@ export var CustomInput = function (props) {
 };
 export var DropdownIndicator = function (props) {
     var _a = props.selectProps, menuIsOpen = _a.menuIsOpen, name = _a.name;
-    return (_jsx(selectComponents.DropdownIndicator, __assign({}, props, { children: _jsx(ChevronDiv, { className: "chevron", "data-cy": "".concat(name, "ChevronBtn"), children: _jsx(Icon, { icon: menuIsOpen ? 'goUp' : 'goDown', size: '100%' }) }) })));
+    return (_jsx(selectComponents.DropdownIndicator, __assign({}, props, { children: _jsx(ChevronDiv, { className: "chevron", "data-cy": "".concat(name, "ChevronBtn"), children: menuIsOpen ? _jsx(ArrowUp, { width: "16px" }) : _jsx(ArrowDown, { width: "16px" }) }) })));
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -1,5 +1,5 @@
 import { SimplifiedOption, IconValueContainer, CountMultiValue, ChevronOption, DropdownIndicator, CustomInput, ConnectedMenu, } from './CustomComponents';
-import { getCustomTheme as getFormCustomTheme, CustomStyles as FormCustomStyles } from './formStyles';
+import { getCustomTheme as getFormCustomTheme, CustomStyles as SelectCustomStyles } from './selectStyles';
 import { useTheme } from '@xstyled/styled-components';
 import { useMemo } from 'react';
 export var useStylesAndComponents = function (style, optionVariant, multiLabelVariant, containerVariant, useSimplifiedOptions, showSelectAllButton, showResetGridButton) {
@@ -23,7 +23,7 @@ export var useStylesAndComponents = function (style, optionVariant, multiLabelVa
         }
         components.Input = CustomInput;
         var themes = getFormCustomTheme(systemTheme, optionVariant, style == 'gridFilter');
-        var styles = FormCustomStyles;
+        var styles = SelectCustomStyles;
         components.Option = ChevronOption;
         components.DropdownIndicator = DropdownIndicator;
         // performance reasons

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

@@ -0,0 +1,42 @@
+import { SelectProps } from '../types';
+import { ControlProps, CSSObjectWithLabel } from 'react-select';
+type BaseColors = {
+    primary: string;
+    optionTextColor: string;
+    inputDisabledColor: string;
+    inputBorderColor: string;
+    whiteBackgroundColor: string;
+    inputTextColor: string;
+    placeholderTextColor: string;
+    activeOptionBackground: string;
+    disabledTextColor: string;
+    inputBorderHoverColor: string;
+    menuHoverBackgroundColor: string;
+    dropdownIndicatorColor: string;
+    hoverToActiveOptionBackground: string;
+    defaultControlColor: string;
+};
+type BaseState<ThemeType = BaseColors> = {
+    theme: ThemeType;
+    isSelected: boolean;
+    isFocused: boolean;
+    isDisabled: boolean;
+    isMulti: boolean;
+    selectProps: SelectProps;
+} & ControlProps;
+type StylesConfig<T = BaseState> = Record<string, (styles: CSSObjectWithLabel, state: T) => CSSObjectWithLabel>;
+type CustomTheme = {
+    colors: BaseColors;
+    height: string | number;
+    focusBoxShadow?: string;
+    textWeightNormal: string;
+    optionVariant: Required<SelectProps>['optionVariant'];
+    borderRadius: string;
+    font: string;
+    narrowIndicators: boolean;
+};
+type State = BaseState<CustomTheme>;
+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 {};

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

@@ -0,0 +1,145 @@
+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';
+// 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: colors.whiteBackgroundColor, 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', minHeight: theme.height, minWidth: selectProps.isMulti ? 'min-content' : 'max-content', '.inputIcon': {
+                color: isDisabled ? colors.defaultControlColor : !!selectProps.value ? colors.inputTextColor : colors.defaultControlColor,
+            } });
+    },
+    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: '#E7EBEF', 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',
+            height: '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: '-0', paddingTop: '0', borderRadius: '10px', zIndex: 3, minWidth: 'max-content', backgroundColor: theme.colors.whiteBackgroundColor });
+    },
+    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, state) {
+        var theme = state.theme, isDisabled = state.isDisabled;
+        return __assign(__assign({}, styles), { justifyContent: 'center', alignItems: 'center', '& svg': {
+                stroke: isDisabled ? theme.colors.dropdownIndicatorColor : theme.colors.inputTextColor,
+            }, padding: '0px 5px 0px 0px', '@media (min-width: 1024px)': {
+                padding: '0px 10px 0px 1px',
+            } });
+    },
+    clearIndicator: function (styles, state) {
+        var theme = state.theme;
+        return __assign(__assign({}, styles), { justifyContent: 'center', alignItems: 'center', padding: theme.narrowIndicators ? '0px 0px 0px 2px' : '0px 4px', color: theme.colors.dropdownIndicatorColor });
+    },
+};
+export var getCustomTheme = function (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 }),
+        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: useFilterSubvariant ? '32px' : '38px', textWeightNormal: th.fontWeight('normal')({ theme: theme }), optionVariant: optionVariant, borderRadius: th.radius('lg')({ theme: theme }), font: th.font('primary')({ theme: theme }), narrowIndicators: !!useFilterSubvariant });
+    };
+};

package/ui/ThemeProvider/themes/default.js

@@ -64,7 +64,7 @@ var defaultTheme = {
         yellow2: '#F2E871',
         red10: '#FFF6F4',
         red20: '#FFEBE6',
-        red30: '#fec1cb',
+        red30: '#FFDAD1',
         red50: '#ff7c7b',
         red70: '#CF2013',
         red1: '#DB2B19',