@mailstep/design-system 0.8.16-beta.2 → 0.8.16-beta.20

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export type CardProps = {
     children: React.ReactNode;
     display?: Display;

package/ui/Elements/CheckedCircle/storries/CheckedCircle.stories.d.ts

@@ -3,8 +3,8 @@ import { StoryObj } from '@storybook/react-webpack5';
 declare const meta: {
     title: string;
     component: import('react').FC<{
-        checked?: boolean;
-        color?: string;
+        checked?: boolean | undefined;
+        color?: string | undefined;
     }>;
     tags: string[];
     argTypes: {};

package/ui/Elements/DatePicker/Datetime/components/FooterRow.d.ts

@@ -1,3 +1,3 @@
 export declare const FooterRow: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
-    disabled?: boolean;
+    disabled?: boolean | undefined;
 }, never>;

package/ui/Elements/DatePicker/Datetime/views/DaysView.js

@@ -24,7 +24,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 // @ts-nocheck
 import React from 'react';
 import { DateRepeater } from '../components/DateRepeater';

package/ui/Elements/DatePicker/styles.d.ts

@@ -1 +1,2 @@
-export declare const DatePickerBase: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import('react').ReactElement<any, string>, import('@xstyled/system').Theme, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, "color">;
+/// <reference types="react" />
+export declare const DatePickerBase: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements, "color">) => import('react').ReactElement<any, string>, import('@xstyled/system').Theme, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, "color">;

package/ui/Elements/DropdownMenu/components/DefaultItem.js

@@ -4,7 +4,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled, { css } from '@xstyled/styled-components';
-var StyledListItem = styled.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 8px 10px;\n  font-size: 14px;\n  color: typoPrimary;\n  font-weight: normal;\n\n  :hover {\n    background-color: bgLightGray1;\n    cursor: pointer;\n  }\n\n  ", ";\n"], ["\n  padding: 8px 10px;\n  font-size: 14px;\n  color: typoPrimary;\n  font-weight: normal;\n\n  :hover {\n    background-color: bgLightGray1;\n    cursor: pointer;\n  }\n\n  ", ";\n"])), function (props) {
+var StyledListItem = styled.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 8px 10px;\n  font-size: 14px;\n  color: typoPrimary;\n  font-weight: normal;\n  display: flex;\n\n  :hover {\n    background-color: bgLightGray1;\n    cursor: pointer;\n  }\n\n  ", ";\n"], ["\n  padding: 8px 10px;\n  font-size: 14px;\n  color: typoPrimary;\n  font-weight: normal;\n  display: flex;\n\n  :hover {\n    background-color: bgLightGray1;\n    cursor: pointer;\n  }\n\n  ", ";\n"])), function (props) {
     return props.hasSeparator && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      border-top: slim;\n      border-color: lightGray2;\n    "], ["\n      border-top: slim;\n      border-color: lightGray2;\n    "])));
 });
 var IconWrap = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-right: 10px;\n"], ["\n  margin-right: 10px;\n"])));

package/ui/Elements/Icon/Icon.js

@@ -146,12 +146,12 @@ export var iconDictionary = {
     chevronDown: faChevronDown,
     chevronRight: farChevronRight,
     clock: faClock,
-    complaint: faFileAlt, // 'file-lines'
+    complaint: faFileAlt,
     computerMouseScrollwheel: faComputerMouseScrollwheel,
     mailLight: faEnvelopeLight,
     eshop: faStore,
-    expedition: faShippingFast, // 'truck-fast'
-    equals: faEquals, // 'truck-fast'
+    expedition: faShippingFast,
+    equals: faEquals,
     fluxCapacitor: faFluxCapacitor,
     wineGlassCrack: faWineGlassCrack,
     paperPlane: faPaperPlane,
@@ -181,10 +181,10 @@ export var iconDictionary = {
     boxChecked: faBoxCircleCheck,
     shelves: faShelves,
     reservation: faHandHoldingBox,
-    return: [faShareSquare, 'horizontal'], // 'fa-share-from-square'
-    search: faSearch, // 'magnifying-glass'
+    return: [faShareSquare, 'horizontal'],
+    search: faSearch,
     supplier: farTriangleExclamation,
-    transfer: faExchange, // 'arrow-right-arrow-left'
+    transfer: faExchange,
     users: faUsersGear,
     warning: farTriangleExclamation,
     close: fasXmark,

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

@@ -10,4 +10,4 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export var FlagHU = function (props) { return (_jsxs("svg", __assign({ width: "28", height: "20" }, props, { children: [_jsx("path", { d: "M0 0h1200v600H0", fill: "#477050" }), _jsx("path", { d: "M0 0h1200v400H0", fill: "#fff" }), _jsx("path", { d: "M0 0h1200v200H0", fill: "#ce2939" })] }))); };
+export var FlagHU = function (props) { return (_jsxs("svg", __assign({ width: "28", height: "20", viewBox: "0 0 9 6" }, props, { children: [_jsx("rect", { fill: "#477050", width: "9", height: "6" }), _jsx("rect", { fill: "#FFF", width: "9", height: "4" }), _jsx("rect", { fill: "#ce2939", width: "9", height: "2" })] }))); };

package/ui/Elements/Icon/stories/BadgeIcon.stories.d.ts

@@ -11,7 +11,7 @@ declare const meta: {
         style?: "normal" | "light" | "solid" | undefined;
         fill?: string | undefined;
         stroke?: string | undefined;
-        size?: number | string | undefined;
+        size?: string | number | undefined;
         className?: string | undefined;
         fixedWidth?: boolean | undefined;
         spinning?: boolean | undefined;

package/ui/Elements/Label/Label.d.ts

@@ -1,4 +1,4 @@
 export declare const Label: import('styled-components').StyledComponent<"label", import('@xstyled/system').Theme, {
-    fontSize?: number | string;
+    fontSize?: string | number | undefined;
 }, never>;
 export declare const FieldLabel: import('styled-components').StyledComponent<"label", import('@xstyled/system').Theme, {}, never>;

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

@@ -3,7 +3,7 @@ import { StoryObj } from '@storybook/react-webpack5';
 declare const meta: {
     title: string;
     component: import('styled-components').StyledComponent<"label", import('@xstyled/system').Theme, {
-        fontSize?: number | string;
+        fontSize?: string | number | undefined;
     }, never>;
     tags: string[];
     argTypes: {};

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

@@ -4,18 +4,18 @@ declare const meta: {
     title: string;
     component: import('react').FC<{
         as?: any;
-        children?: React.ReactNode;
-        to?: string | {
-            pathname?: string;
-            search?: string;
-            hash?: string;
-            state?: object;
-        } | Function;
-        target?: string;
-        color?: string;
-        size?: number | "inherit";
-        disabled?: boolean;
-        onClick?: Function;
+        children?: import('react').ReactNode;
+        to?: string | Function | {
+            pathname?: string | undefined;
+            search?: string | undefined;
+            hash?: string | undefined;
+            state?: object | undefined;
+        } | undefined;
+        target?: string | undefined;
+        color?: string | undefined;
+        size?: number | "inherit" | undefined;
+        disabled?: boolean | undefined;
+        onClick?: Function | undefined;
     }>;
     tags: string[];
     argTypes: {};

package/ui/Elements/Logo/Logo.js

@@ -41,8 +41,8 @@ import warehouseManager3 from './assets/warehouse/manager3.svg';
 import warehouseManager from './assets/warehouse/manager.svg';
 import styled from '@xstyled/styled-components';
 var defaultSizes = {
-    small: '30px', // cca 100px width on full logo
-    medium: '46px', // cca 150px width on full logo
+    small: '30px',
+    medium: '46px',
     big: '61px' // cca 200px width on full logo
 };
 var variantMap = {

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

@@ -1,4 +1,5 @@
-export declare const Wrapper: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import('react').ReactElement<any, string>, import('@xstyled/system').Theme, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, "color">;
+/// <reference types="react" />
+export declare const Wrapper: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements, "color">) => import('react').ReactElement<any, string>, import('@xstyled/system').Theme, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, "color">;
 export declare const Btn: import('styled-components').StyledComponent<"button", import('@xstyled/system').Theme, {
     disabled: boolean;
 }, never>;

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

@@ -3,11 +3,11 @@ import { StoryObj } from '@storybook/react-webpack5';
 declare const meta: {
     title: string;
     component: import('react').FC<{
-        progress?: number;
-        status?: "loading" | "finished" | "error";
-        errorMessage?: string;
-        noText?: boolean;
-        variant?: "normal" | "thin";
+        progress?: number | undefined;
+        status?: "error" | "loading" | "finished" | undefined;
+        errorMessage?: string | undefined;
+        noText?: boolean | undefined;
+        variant?: "normal" | "thin" | undefined;
     }>;
     tags: string[];
     argTypes: {};

package/ui/Elements/ProgressBar/styles.d.ts

@@ -1,6 +1,6 @@
 export declare const StyledProgressBar: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     status: string | null | undefined;
-    variant?: "normal" | "thin";
+    variant?: "normal" | "thin" | undefined;
 }, never>;
 export declare const Progress: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     progress: number;

package/ui/Elements/Select/Select.js

@@ -19,8 +19,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
@@ -69,7 +69,7 @@ var emptyOptions = [];
 var noOptionsMessage = function () { return i18n._({ id: 'select.noOptions', message: 'no options' }); };
 var loadingMessage = function () { return i18n._({ id: 'components.dropdown.loading', message: 'Loading...' }); };
 var Select = function (_a) {
-    var label = _a.label, name = _a.name, _b = _a.value, value = _b === void 0 ? '' : _b, _c = _a.options, options = _c === void 0 ? emptyOptions : _c, defaultOptions = _a.defaultOptions, loadOptions = _a.loadOptions, onChange = _a.onChange, onBlur = _a.onBlur, error = _a.error, isInvalid = _a.isInvalid, isLoading = _a.isLoading, isDarkPlaceholderText = _a.isDarkPlaceholderText, _d = _a.spaceAround, spaceAround = _d === void 0 ? false : _d, disabled = _a.disabled, onInputChange = _a.onInputChange, isSearchable = _a.isSearchable, isMulti = _a.isMulti, className = _a.className, _e = _a.useSimplifiedOptions, useSimplifiedOptions = _e === void 0 ? false : _e, _f = _a.showSelectAllButton, showSelectAllButton = _f === void 0 ? false : _f, _g = _a.showResetGridButton, showResetGridButton = _g === void 0 ? false : _g, _h = _a.shortValues, shortValues = _h === void 0 ? true : _h, style = _a.style, optionVariant = _a.optionVariant, multiLabelVariant = _a.multiLabelVariant, containerVariant = _a.containerVariant, placeholder = _a.placeholder, placeholderIcon = _a.placeholderIcon, innerRef = _a.innerRef, maxMenuHeight = _a.maxMenuHeight, getOptionValue = _a.getOptionValue, resetGrid = _a.resetGrid, onIconClick = _a.onIconClick, passTroughProps = __rest(_a, ["label", "name", "value", "options", "defaultOptions", "loadOptions", "onChange", "onBlur", "error", "isInvalid", "isLoading", "isDarkPlaceholderText", "spaceAround", "disabled", "onInputChange", "isSearchable", "isMulti", "className", "useSimplifiedOptions", "showSelectAllButton", "showResetGridButton", "shortValues", "style", "optionVariant", "multiLabelVariant", "containerVariant", "placeholder", "placeholderIcon", "innerRef", "maxMenuHeight", "getOptionValue", "resetGrid", "onIconClick"]);
+    var label = _a.label, name = _a.name, _b = _a.value, value = _b === void 0 ? '' : _b, _c = _a.options, options = _c === void 0 ? emptyOptions : _c, defaultOptions = _a.defaultOptions, loadOptions = _a.loadOptions, onChange = _a.onChange, onBlur = _a.onBlur, error = _a.error, isInvalid = _a.isInvalid, isLoading = _a.isLoading, isDarkPlaceholderText = _a.isDarkPlaceholderText, _d = _a.spaceAround, spaceAround = _d === void 0 ? false : _d, disabled = _a.disabled, onInputChange = _a.onInputChange, isSearchable = _a.isSearchable, isMulti = _a.isMulti, className = _a.className, _e = _a.useSimplifiedOptions, useSimplifiedOptions = _e === void 0 ? false : _e, _f = _a.showSelectAllButton, showSelectAllButton = _f === void 0 ? false : _f, _g = _a.shortValues, shortValues = _g === void 0 ? true : _g, _h = _a.shortVariant, shortVariant = _h === void 0 ? 'block' : _h, style = _a.style, optionVariant = _a.optionVariant, multiLabelVariant = _a.multiLabelVariant, containerVariant = _a.containerVariant, placeholder = _a.placeholder, placeholderIcon = _a.placeholderIcon, innerRef = _a.innerRef, maxMenuHeight = _a.maxMenuHeight, getOptionValue = _a.getOptionValue, onIconClick = _a.onIconClick, passTroughProps = __rest(_a, ["label", "name", "value", "options", "defaultOptions", "loadOptions", "onChange", "onBlur", "error", "isInvalid", "isLoading", "isDarkPlaceholderText", "spaceAround", "disabled", "onInputChange", "isSearchable", "isMulti", "className", "useSimplifiedOptions", "showSelectAllButton", "shortValues", "shortVariant", "style", "optionVariant", "multiLabelVariant", "containerVariant", "placeholder", "placeholderIcon", "innerRef", "maxMenuHeight", "getOptionValue", "onIconClick"]);
     var isAsync = !!loadOptions;
     if (showSelectAllButton && !isMulti) {
         console.error('CheckboxSelect incompatible props');
@@ -84,8 +84,8 @@ var Select = function (_a) {
         }
     }, [onChange]);
     var icon = containerVariant === 'search' && !placeholderIcon && placeholderIcon !== null ? 'search' : placeholderIcon || undefined;
-    var modifiedMaxMenuHeight = showResetGridButton && showSelectAllButton && maxMenuHeight ? maxMenuHeight - 30 : maxMenuHeight;
-    var _j = useStylesAndComponents(style, optionVariant, multiLabelVariant, containerVariant, useSimplifiedOptions, showSelectAllButton, showResetGridButton), customComponents = _j[0], customTheme = _j[1], customStyles = _j[2];
+    var modifiedMaxMenuHeight = showSelectAllButton && maxMenuHeight ? maxMenuHeight - 30 : maxMenuHeight;
+    var _j = useStylesAndComponents(style, optionVariant, multiLabelVariant, containerVariant, useSimplifiedOptions, showSelectAllButton), customComponents = _j[0], customTheme = _j[1], customStyles = _j[2];
     var RenderComponent = isAsync ? StyledAsyncSelect : StyledReactSelect;
     var selectedOption;
     var localGetOptionValue = useMemo(function () { return getOptionValue || (function (option) { return option === null || option === void 0 ? void 0 : option.value; }); }, [getOptionValue]);
@@ -106,6 +106,6 @@ var Select = function (_a) {
             }
         }); }); } : undefined;
     }, [loadOptions]);
-    return (_jsxs(SpaceAroundWrap, { spaceAround: spaceAround, className: className, children: [_jsxs(Wrapper, { children: [label && _jsx(FieldLabel, { htmlFor: name, children: label }), _jsx(RenderComponent, __assign({ id: name, name: name, options: options, loadOptions: handleLoadOptions, defaultOptions: defaultOptions, value: selectedOption, onChange: onChange, onBlur: onBlur, isDisabled: disabled || isLoading, isLoading: isLoading, isInvalid: isInvalid !== undefined ? isInvalid : !!error, isDarkPlaceholderText: isDarkPlaceholderText, placeholder: placeholder || i18n._({ id: 'components.dropdown.placeholder', message: 'Select...' }), styles: customStyles, theme: customTheme, icon: icon, onIconClick: onIconClick, hideSelectedOptions: !!(isMulti && multiLabelVariant != 'count'), onInputChange: onInputChange, isSearchable: isAsync || isSearchable, isMulti: isMulti, classNamePrefix: "react-select", components: customComponents, closeMenuOnSelect: isMulti ? false : undefined, noOptionsMessage: noOptionsMessage }, passTroughProps, { ref: innerRef, tabIndex: null, systemTheme: theme, resetGrid: resetGrid, onCustomSelectAll: setAllOptions, onCustomDeselectAll: unsetAllOptions, selectAllButton: showSelectAllButton, resetGridButton: showResetGridButton, maxMenuHeight: modifiedMaxMenuHeight, getOptionValue: getOptionValue, loadingMessage: loadingMessage, shortValues: shortValues }))] }), error && _jsx(ErrorMessage, { children: error })] }));
+    return (_jsxs(SpaceAroundWrap, { spaceAround: spaceAround, className: className, children: [_jsxs(Wrapper, { children: [label && _jsx(FieldLabel, { htmlFor: name, children: label }), _jsx(RenderComponent, __assign({ id: name, name: name, options: options, loadOptions: handleLoadOptions, defaultOptions: defaultOptions, value: selectedOption, onChange: onChange, onBlur: onBlur, isDisabled: disabled || isLoading, isLoading: isLoading, isInvalid: isInvalid !== undefined ? isInvalid : !!error, isDarkPlaceholderText: isDarkPlaceholderText, placeholder: placeholder || i18n._({ id: 'components.dropdown.placeholder', message: 'Select...' }), styles: customStyles, theme: customTheme, icon: icon, onIconClick: onIconClick, hideSelectedOptions: !!(isMulti && multiLabelVariant !== 'count'), onInputChange: onInputChange, isSearchable: isAsync || isSearchable, isMulti: isMulti, classNamePrefix: "react-select", components: customComponents, closeMenuOnSelect: isMulti ? false : undefined, noOptionsMessage: noOptionsMessage }, passTroughProps, { ref: innerRef, tabIndex: null, systemTheme: theme, onCustomSelectAll: setAllOptions, onCustomDeselectAll: unsetAllOptions, selectAllButton: showSelectAllButton, maxMenuHeight: modifiedMaxMenuHeight, getOptionValue: getOptionValue, loadingMessage: loadingMessage, shortValues: shortValues, shortVariant: shortVariant, containerVariant: containerVariant }))] }), error && _jsx(ErrorMessage, { children: error })] }));
 };
 export default Select;

package/ui/Elements/Select/components/ConnectedMenu.js

@@ -12,17 +12,16 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { components as selectComponents } from 'react-select';
-import ResetAll from '../components/ResetAll';
 import SelectAll from '../components/SelectAll';
 var ConnectedMenu = function (props) {
     var theme = props.theme;
-    var _a = props.selectProps, resetGrid = _a.resetGrid, onCustomSelectAll = _a.onCustomSelectAll, onCustomDeselectAll = _a.onCustomDeselectAll, value = _a.value, resetGridButton = _a.resetGridButton, selectAllButton = _a.selectAllButton, maxMenuHeight = _a.maxMenuHeight, isLoading = _a.isLoading;
+    var _a = props.selectProps, onCustomSelectAll = _a.onCustomSelectAll, onCustomDeselectAll = _a.onCustomDeselectAll, value = _a.value, selectAllButton = _a.selectAllButton, maxMenuHeight = _a.maxMenuHeight, isLoading = _a.isLoading;
     // because the filterd options (filterd by the search input) are not passed to the menu list (there are all options),
     // we need to specify them here by children
     var filteredOptions = useMemo(function () { var _a, _b; return (_b = (_a = props.children) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.call(_a, function (_a) {
         var _b = _a.props, value = _b.value, label = _b.label;
         return ({ label: label, value: value });
     }); }, [props.children]);
-    return (_jsxs(selectComponents.MenuList, __assign({}, props, { children: [selectAllButton && !isLoading && (_jsx(SelectAll, { theme: theme, onCustomSelectAll: onCustomSelectAll, onCustomDeselectAll: onCustomDeselectAll, value: value, options: filteredOptions, maxMenuHeight: maxMenuHeight })), props.children, resetGridButton && _jsx(ResetAll, { onReset: resetGrid })] })));
+    return (_jsxs(selectComponents.MenuList, __assign({}, props, { children: [selectAllButton && !isLoading && (_jsx(SelectAll, { theme: theme, onCustomSelectAll: onCustomSelectAll, onCustomDeselectAll: onCustomDeselectAll, value: value, options: filteredOptions, maxMenuHeight: maxMenuHeight })), props.children] })));
 };
 export default ConnectedMenu;

package/ui/Elements/Select/components/CountMultiValue.d.ts

@@ -1,2 +1,11 @@
-declare const CountMultiValue: (props: any) => any;
+import { MultiValueProps } from 'react-select';
+
+type CountMultiValueProps = MultiValueProps & {
+    data: unknown;
+    selectProps: MultiValueProps<unknown, boolean, any>['selectProps'] & {
+        shortValues?: boolean;
+        shortVariant?: 'block' | 'join';
+    };
+};
+declare const CountMultiValue: (props: CountMultiValueProps) => React.ReactNode;
 export default CountMultiValue;

package/ui/Elements/Select/components/CountMultiValue.js

@@ -17,21 +17,30 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { components as selectComponents } from 'react-select';
 import styled, { th } from '@xstyled/styled-components';
 // MultiValue container with count of selected options
-var StyledNumber = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: ", ";\n  height: 25px;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  border-radius: md;\n  padding: 2px 6px;\n"], ["\n  background: ", ";\n  height: 25px;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  border-radius: md;\n  padding: 2px 6px;\n"])), th.color('lightGray7'));
+var StyledNumber = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 25px;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  border-radius: md;\n  padding: 2px 6px;\n"], ["\n  background-color: ", ";\n  height: 25px;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  border-radius: md;\n  padding: 2px 6px;\n"])), th.color('lightGray7'));
+var JoinedMultiValue = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  white-space: nowrap;\n  position: absolute;\n  color: gray3;\n  padding-left: ", ";\n"], ["\n  white-space: nowrap;\n  position: absolute;\n  color: gray3;\n  padding-left: ", ";\n"])), function (_a) {
+    var isFocused = _a.isFocused;
+    return (isFocused ? '8px' : '0');
+});
 var CountMultiValue = function (props) {
-    var _a, _b;
+    var _a;
     var shortValues = props.selectProps.shortValues;
     var selectVal = props.selectProps.value;
     var inputVal = props.selectProps.inputValue;
+    var shortVariant = props.selectProps.shortVariant;
+    var data = props.data;
+    var isFirst = (data === null || data === void 0 ? void 0 : data.value) === ((_a = selectVal[0]) === null || _a === void 0 ? void 0 : _a.value);
+    var menuIsOpen = props.selectProps.menuIsOpen;
     if (!shortValues) {
         return _jsx(selectComponents.MultiValue, __assign({}, props, { children: props.children }));
     }
-    if (!inputVal && ((_a = props.data) === null || _a === void 0 ? void 0 : _a.value) == ((_b = selectVal[0]) === null || _b === void 0 ? void 0 : _b.value)) {
-        return (_jsxs(_Fragment, { children: [_jsx(selectComponents.MultiValue, __assign({}, props, { children: props.children })), selectVal.length > 1 ? _jsxs(StyledNumber, { children: ["+", selectVal.length - 1] }) : null] }));
-    }
-    else {
+    if (!isFirst || inputVal) {
         return null;
     }
+    if (shortVariant === 'join') {
+        return (_jsxs(JoinedMultiValue, { isFocused: menuIsOpen, children: [selectVal.length > 1 ? "(".concat(Number(selectVal.length), ") ") : '', selectVal.map(function (option) { return option.label; }).join(', ')] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(selectComponents.MultiValue, __assign({}, props, { children: props.children })), selectVal.length > 1 ? _jsxs(StyledNumber, { children: ["+", selectVal.length - 1] }) : null] }));
 };
 export default CountMultiValue;
-var templateObject_1;
+var templateObject_1, templateObject_2;

package/ui/Elements/Select/components/DropdownIndicator.d.ts

@@ -1,2 +1,7 @@
-export declare const DropdownIndicator: (props: any) => any;
+import { DropdownIndicatorProps } from 'react-select';
+
+type DropdownIndicatorCustomProps = DropdownIndicatorProps & {
+    theme: any;
+};
+export declare const DropdownIndicator: (props: DropdownIndicatorCustomProps) => any;
 export default DropdownIndicator;

package/ui/Elements/Select/components/DropdownIndicator.js

@@ -15,14 +15,15 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { components as selectComponents } from 'react-select';
-import styled from '@xstyled/styled-components';
 import { ArrowDown } from '../../Icon/icons/ArrowDown';
 import { ArrowUp } from '../../Icon/icons/ArrowUp';
+import styled from '@xstyled/styled-components';
 // Option with chevron form new design
 var ChevronDiv = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-self: center;\n  display: flex;\n"], ["\n  align-self: center;\n  display: flex;\n"])));
 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: menuIsOpen ? _jsx(ArrowUp, { width: "16px" }) : _jsx(ArrowDown, { width: "16px" }) }) })));
+    var iconColor = props.theme.colors.placeholderTextColor;
+    return (_jsx(selectComponents.DropdownIndicator, __assign({}, props, { children: _jsx(ChevronDiv, { className: "chevron", "data-cy": "".concat(name || '', "ChevronBtn"), children: menuIsOpen ? _jsx(ArrowUp, { width: "16px", stroke: iconColor }) : _jsx(ArrowDown, { width: "16px", stroke: iconColor }) }) })));
 };
 export default DropdownIndicator;
 var templateObject_1;

package/ui/Elements/Select/components/IconValueContainer.js

@@ -29,7 +29,7 @@ import { components } from 'react-select';
 import Icon from '../../Icon/Icon';
 import styled from '@xstyled/styled-components';
 // Value container with icon
-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 IconDiv = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-left: 7px;\n  margin-right: -3px;\n  align-self: center;\n  & > * {\n    color: ", ";\n  }\n"], ["\n  padding-left: 7px;\n  margin-right: -3px;\n  align-self: center;\n  & > * {\n    color: ", ";\n  }\n"])), function (_a) {
     var hasValue = _a.hasValue;
     return (hasValue ? 'black' : '#a3b3c1');
 });

package/ui/Elements/Select/components/SimplifiedOption.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const SimplifiedOption: import('react').MemoExoticComponent<(props: any) => any>;
 export default SimplifiedOption;

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

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+
+declare const meta: {
+    title: string;
+    component: FC<import('../types').SelectProps>;
+    argTypes: {};
+};
+export default meta;
+export declare const Default: FC;
+export declare const MultiSelect: FC;

package/ui/Elements/Select/stories/Select.stories.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Select from '../Select';
+var meta = {
+    title: 'Forms/Select',
+    component: Select,
+    argTypes: {}
+};
+export default meta;
+var options = [
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+    { value: '3', label: 'Option 3' }
+];
+export var Default = function () { return (_jsx(Select, { label: "Primary Select", onChange: console.log, options: options })); };
+export var MultiSelect = function () { return (_jsx(Select, { label: "Multi Select Input", onChange: console.log, options: options, isMulti: true, value: ['1', '2'] })); };

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

@@ -1,4 +1,4 @@
 import { StylesConfig, SelectComponentsConfig } from 'react-select';
 import { SelectProps } from '../types';
 
-export declare const useStylesAndComponents: (style?: SelectProps["style"], optionVariant?: SelectProps["optionVariant"], multiLabelVariant?: SelectProps["multiLabelVariant"], containerVariant?: SelectProps["containerVariant"], useSimplifiedOptions?: SelectProps["useSimplifiedOptions"], showSelectAllButton?: SelectProps["showSelectAllButton"], showResetGridButton?: SelectProps["showResetGridButton"]) => [SelectComponentsConfig<unknown, boolean, any>, any, StylesConfig];
+export declare const useStylesAndComponents: (style?: SelectProps['style'], optionVariant?: SelectProps['optionVariant'], multiLabelVariant?: SelectProps['multiLabelVariant'], containerVariant?: SelectProps['containerVariant'], useSimplifiedOptions?: SelectProps['useSimplifiedOptions'], showSelectAllButton?: SelectProps['showSelectAllButton']) => [SelectComponentsConfig<unknown, boolean, any>, any, StylesConfig];

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

@@ -8,14 +8,13 @@ import IconValueContainer from '../components/IconValueContainer';
 import SimplifiedOption from '../components/SimplifiedOption';
 import { useTheme } from '@xstyled/styled-components';
 import { getCustomTheme as getFormCustomTheme, CustomStyles as SelectCustomStyles } from './selectStyles';
-export var useStylesAndComponents = function (style, optionVariant, multiLabelVariant, containerVariant, useSimplifiedOptions, showSelectAllButton, showResetGridButton) {
+export var useStylesAndComponents = function (style, optionVariant, multiLabelVariant, containerVariant, useSimplifiedOptions, showSelectAllButton) {
     if (style === void 0) { style = 'form'; }
     if (optionVariant === void 0) { optionVariant = 'default'; }
     if (multiLabelVariant === void 0) { multiLabelVariant = 'default'; }
     if (containerVariant === void 0) { containerVariant = 'default'; }
     if (useSimplifiedOptions === void 0) { useSimplifiedOptions = false; }
     if (showSelectAllButton === void 0) { showSelectAllButton = false; }
-    if (showResetGridButton === void 0) { showResetGridButton = false; }
     var systemTheme = useTheme();
     return useMemo(function () {
         var components = {
@@ -28,25 +27,16 @@ export var useStylesAndComponents = function (style, optionVariant, multiLabelVa
         if (containerVariant === 'search') {
             components.DropdownIndicator = null;
         }
-        if (showResetGridButton || showSelectAllButton) {
+        if (showSelectAllButton) {
             components.MenuList = ConnectedMenu;
         }
         components.Input = CustomInput;
-        var themes = getFormCustomTheme(systemTheme, optionVariant, style == 'gridFilter');
+        var themes = getFormCustomTheme(systemTheme, optionVariant, style === 'gridFilter');
         var styles = SelectCustomStyles;
         components.Option = ChevronOption;
         // performance reasons
         if (useSimplifiedOptions)
             components.Option = SimplifiedOption;
         return [components, themes, styles];
-    }, [
-        multiLabelVariant,
-        containerVariant,
-        showResetGridButton,
-        showSelectAllButton,
-        style,
-        useSimplifiedOptions,
-        systemTheme,
-        optionVariant
-    ]);
+    }, [multiLabelVariant, containerVariant, showSelectAllButton, style, useSimplifiedOptions, systemTheme, optionVariant]);
 };

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

@@ -2,5 +2,5 @@ import { SelectProps, StylesConfig, CustomTheme } from '../types';
 
 export declare const CustomStyles: StylesConfig<State>;
 type ThemeGetter = (theme: any) => CustomTheme;
-export declare const getCustomTheme: (theme: any, optionVariant: Required<SelectProps>["optionVariant"], useFilterSubvariant: boolean) => ThemeGetter;
+export declare const getCustomTheme: (theme: any, optionVariant: Required<SelectProps>['optionVariant'], useFilterSubvariant: boolean) => ThemeGetter;
 export {};

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

@@ -16,16 +16,16 @@ export var CustomStyles = {
         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.menuHoverBackgroundColor : colors.whiteBackgroundColor, boxShadow: theme.focusBoxShadow, borderRadius: theme.borderRadius, '& input': {
+        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,
+                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,
+                color: isDisabled ? colors.defaultControlColor : selectProps.value ? colors.inputTextColor : colors.defaultControlColor
             } });
     },
     valueContainer: function (styles, _a) {
         var theme = _a.theme;
-        return __assign(__assign({}, styles), { width: '50px', flexWrap: theme.flexWrap });
+        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;
@@ -37,10 +37,10 @@ export var CustomStyles = {
     },
     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,
+        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',
+                fontSize: '12px'
             } });
     },
     multiValueLabel: function (styles) { return (__assign(__assign({}, styles), { fontSize: 'unset', padding: '5px' })); },
@@ -87,64 +87,63 @@ export var CustomStyles = {
                     ? theme.colors.hoverToActiveOptionBackground
                     : !isDisabled
                         ? theme.colors.menuHoverBackgroundColor
-                        : undefined,
-            },
+                        : 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', backgroundColor: theme.colors.whiteBackgroundColor });
+        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.textPrimary, backgroundColor: theme.colors.menuBackgroundColor });
     },
     menuList: function (styles, _a) {
         var theme = _a.theme;
-        return __assign(__assign({}, styles), { margin: '8px 4px 8px 8px', '::-webkit-scrollbar-thumb': {
+        return __assign(__assign({}, styles), { margin: '8px 4px 8px 8px', color: theme.colors.textPrimary, '::-webkit-scrollbar-thumb': {
                 border: 'none',
                 borderRadius: '4px',
                 height: '47px',
                 backgroundColor: theme.colors.defaultControlColor,
                 '&:hover': {
-                    backgroundColor: theme.colors.dropdownIndicatorColor,
-                },
+                    backgroundColor: theme.colors.dropdownIndicatorColor
+                }
             }, '::-webkit-scrollbar': {
-                width: '10px',
+                width: '10px'
             }, '::-webkit-scrollbar-track': {
                 backgroundColor: theme.colors.menuHoverBackgroundColor,
-                borderRadius: '6px',
+                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',
-            } });
+    dropdownIndicator: function (styles) {
+        return __assign(__assign({}, styles), { justifyContent: 'center', alignItems: 'center', padding: '0px 7px 0px 0px' });
     },
     clearIndicator: function (styles, state) {
-        var theme = state.theme;
-        return __assign(__assign({}, styles), { justifyContent: 'center', alignItems: 'center', padding: theme.narrowIndicators ? '0px 4px 0px 0px' : '0px 4px', color: theme.colors.dropdownIndicatorColor });
+        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',
+        display: 'none'
     }); }
 };
 export var getCustomTheme = function (theme, optionVariant, useFilterSubvariant) {
-    var inputTextColor = th.color('blue2')({ theme: theme });
     var customColors = {
+        textPrimary: th.color('textPrimary')({ theme: theme }),
         primary: th.color('red1')({ theme: theme }),
-        inputTextColor: inputTextColor,
-        whiteBackgroundColor: th.color('white')({ 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('blue2')({ theme: theme }),
-        menuHoverBackgroundColor: th.color('bgLightGray1')({ 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 }),
+        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 });