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

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/Pagination/Pagination.d.ts

@@ -1,11 +1,9 @@
-export type PaginationProps = {
+export type Props = {
     page?: number;
     itemCount?: number;
     itemPerPage: number;
-    radius?: number;
-    rate?: number;
     onPageChange?: (number: number, rows: number) => void;
     customPaginationHandler?: (page: number, rows: number) => void;
 };
-declare const Pagination: ({ onPageChange, itemPerPage, itemCount, page, radius, rate, customPaginationHandler, }: PaginationProps) => JSX.Element;
+declare const Pagination: ({ onPageChange, itemPerPage, itemCount, page, customPaginationHandler }: Props) => JSX.Element;
 export default Pagination;

package/ui/Elements/Pagination/Pagination.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo } from 'react';
 import { Btn, GoIcon, Wrapper, PageBtn, DotsWrapper } from './styled';
 var Pagination = function (_a) {
-    var onPageChange = _a.onPageChange, _b = _a.itemPerPage, itemPerPage = _b === void 0 ? 3 : _b, _c = _a.itemCount, itemCount = _c === void 0 ? 0 : _c, page = _a.page, _d = _a.radius, radius = _d === void 0 ? 5 : _d, _e = _a.rate, rate = _e === void 0 ? 4 : _e, customPaginationHandler = _a.customPaginationHandler;
+    var onPageChange = _a.onPageChange, itemPerPage = _a.itemPerPage, itemCount = _a.itemCount, page = _a.page, customPaginationHandler = _a.customPaginationHandler;
     var setPage = useCallback(function (number) { return function () {
         if (customPaginationHandler) {
             customPaginationHandler(number, itemPerPage);
@@ -13,27 +13,31 @@ var Pagination = function (_a) {
         }
     }; }, [itemPerPage, onPageChange, customPaginationHandler]);
     var pageX = page !== null && page !== void 0 ? page : 1;
-    var pageCount = Math.max(Math.ceil(itemCount / itemPerPage), 1);
+    var pageCount = Math.max(Math.ceil((itemCount !== null && itemCount !== void 0 ? itemCount : 0) / (itemPerPage !== null && itemPerPage !== void 0 ? itemPerPage : 3)), 1);
     var arrayOfPages = useMemo(function () {
         var pageNumbers = Array.from({ length: pageCount }, function (_, i) { return i + 1; });
         // first and last page are still visible
         // if number of pages is less than 6 (display all pages without dots and duplication of first and last char)
-        if (pageCount < radius + 1) {
+        if (pageCount < 6) {
             return pageNumbers.slice(1, pageCount - 1);
-            // if current page is less than radius (display first radius pages)
+            // if current page is less than 5 (display first 5 pages)
         }
-        else if (pageX < radius) {
-            return pageNumbers.slice(1, Math.min(pageX + rate, radius));
-            // display last radius pages
+        else if (pageX < 5) {
+            return pageNumbers.slice(1, 5);
+            // display last 5 pages
         }
-        else if (pageX > pageCount - Math.floor(radius / 2)) {
-            return pageNumbers.slice(pageCount - rate - 1, pageCount - 1);
+        else if (pageX > pageCount - 4) {
+            return pageNumbers.slice(pageCount - 5, pageCount - 1);
+        }
+        else if (window.innerWidth < 768) {
+            // display dispersion of 1 chars from current page (part between dots)
+            return pageNumbers.slice(pageX - 2, pageX + 1);
         }
         else {
             // display dispersion of 2 chars from current page (part between dots)
-            return pageNumbers.slice(pageX - Math.ceil(radius / 2), Math.min(pageX + Math.floor(radius / 2), pageCount - 1));
+            return pageNumbers.slice(pageX - 3, pageX + 2);
         }
     }, [pageCount, pageX]);
-    return (_jsxs(Wrapper, { children: [_jsx(Btn, { disabled: pageX <= 1, onClick: setPage(pageX - 1), children: _jsx(GoIcon, { icon: "goLeft", isActive: pageX > 1 }) }), _jsx(PageBtn, { isCurrent: pageX === 1, onClick: setPage(1), children: 1 }), arrayOfPages[0] > 2 && _jsx(DotsWrapper, { children: "..." }), arrayOfPages === null || arrayOfPages === void 0 ? void 0 : arrayOfPages.map(function (number) { return (_jsx(PageBtn, { isCurrent: pageX === number, onClick: setPage(number !== null && number !== void 0 ? number : 1), children: number }, number)); }), arrayOfPages[arrayOfPages.length - 1] < pageCount - 1 && _jsx(DotsWrapper, { children: "..." }), pageCount !== 1 && (_jsx(PageBtn, { isCurrent: pageX === pageCount, onClick: setPage(pageCount), children: pageCount })), _jsx(Btn, { disabled: pageX >= pageCount, onClick: setPage(pageX + 1), children: _jsx(GoIcon, { icon: "goRight", isActive: pageX < pageCount }) })] }));
+    return (_jsxs(Wrapper, { children: [_jsx(Btn, { disabled: pageX <= 1, onClick: setPage(pageX - 1), children: _jsx(GoIcon, { icon: "goLeft", isActive: pageX > 1 }) }), _jsx(PageBtn, { isCurrent: pageX === 1, onClick: setPage(1), children: 1 }), pageX >= 5 && pageCount > 6 && _jsx(DotsWrapper, { children: "..." }), arrayOfPages === null || arrayOfPages === void 0 ? void 0 : arrayOfPages.map(function (number) { return (_jsx(PageBtn, { isCurrent: pageX === number, onClick: setPage(number !== null && number !== void 0 ? number : 1), children: number }, number)); }), pageX < pageCount - 3 && pageCount > 6 && _jsx(DotsWrapper, { children: "..." }), pageCount !== 1 && (_jsx(PageBtn, { isCurrent: pageX === pageCount, onClick: setPage(pageCount), children: pageCount })), _jsx(Btn, { disabled: pageX >= pageCount, onClick: setPage(pageX + 1), children: _jsx(GoIcon, { icon: "goRight", isActive: pageX < pageCount }) })] }));
 };
 export default Pagination;

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

@@ -1,4 +1,3 @@
 import Pagination from './Pagination';
-export type { PaginationProps } from './Pagination';
 export { Pagination };
 export default Pagination;

package/ui/Elements/Pagination/stories/Pagination.stories.d.ts

@@ -1,8 +1,8 @@
+/// <reference types="react" />
 import type { StoryObj } from '@storybook/react';
-import { PaginationProps } from '../';
 declare const meta: {
     title: string;
-    component: ({ onPageChange, itemPerPage, itemCount, page, radius, rate, customPaginationHandler, }: PaginationProps) => JSX.Element;
+    component: ({ onPageChange, itemPerPage, itemCount, page, customPaginationHandler }: import("../Pagination").Props) => JSX.Element;
     tags: string[];
     argTypes: {};
 };
@@ -10,4 +10,3 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const ManyPages: Story;
-export declare const Shorter: Story;

package/ui/Elements/Pagination/stories/Pagination.stories.js

@@ -1,16 +1,3 @@
-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";
-import { useState } from 'react';
 import { Pagination } from '../';
 var meta = {
     title: 'Elements/Pagination',
@@ -19,30 +6,17 @@ var meta = {
     argTypes: {},
 };
 export default meta;
-var withSetState = function (arg) {
-    var _a = useState(1), page = _a[0], setPage = _a[1];
-    return _jsx(Pagination, __assign({}, arg, { page: page, onPageChange: setPage }));
-};
 export var Default = {
     args: {
         itemCount: 100,
         itemPerPage: 8,
+        page: 1,
     },
-    render: withSetState,
 };
 export var ManyPages = {
     args: {
         itemCount: 1000,
         itemPerPage: 8,
+        page: 1,
     },
-    render: withSetState,
-};
-export var Shorter = {
-    args: {
-        itemCount: 100,
-        itemPerPage: 8,
-        radius: 3,
-        rate: 1,
-    },
-    render: withSetState,
 };

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/Elements/Spinner/styles.js

@@ -2,7 +2,8 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import styled, { th, keyframes } from '@xstyled/styled-components';
+import styled, { th } from '@xstyled/styled-components';
+import { keyframes } from 'styled-components';
 var KeyframesCircularDash = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    stroke-dasharray: 1px, 200px;\n    stroke-dashoffset: 0px;\n  }\n\n  50% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -15px;\n  }\n\n  100% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -125px;\n  }\n"], ["\n  0% {\n    stroke-dasharray: 1px, 200px;\n    stroke-dashoffset: 0px;\n  }\n\n  50% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -15px;\n  }\n\n  100% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -125px;\n  }\n"])));
 var KeyframesCircularRotate = keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  100% {\n    transform: rotate(360deg);\n  }\n"], ["\n  100% {\n    transform: rotate(360deg);\n  }\n"])));
 export var Svg = styled.svg(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: ", "px;\n  height: ", "px;\n  animation: ", " 1.4s linear infinite;\n"], ["\n  width: ", "px;\n  height: ", "px;\n  animation: ", " 1.4s linear infinite;\n"])), function (_a) {

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',