@mailstep/design-system 0.8.1 → 0.8.4-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.8.1",
+  "version": "0.8.4-beta.1",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",
@@ -39,16 +39,9 @@
     "@lingui/core": "3.17.2",
     "@lingui/react": "3.17.2",
     "@popperjs/core": "^2.11.8",
-    "@storybook/addon-controls": "^8.4.7",
-    "@storybook/addon-designs": "^8.0.4",
-    "@storybook/addon-essentials": "^8.4.7",
-    "@storybook/addon-interactions": "^8.4.7",
-    "@storybook/addon-links": "^8.4.7",
-    "@storybook/blocks": "^8.4.7",
-    "@storybook/react": "^8.4.7",
-    "@storybook/react-webpack5": "^8.4.7",
-    "@storybook/test": "^8.4.7",
-    "@storybook/types": "^8.4.7",
+    "@storybook/addon-designs": "^11.1.2",
+    "@storybook/addon-links": "10.2.8",
+    "@storybook/react-webpack5": "10.2.8",
     "@svgr/rollup": "^8.0.1",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/faker": "^4.1.11",
@@ -79,7 +72,7 @@
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-perf": "^3.3.2",
-    "eslint-plugin-storybook": "^0.11.1",
+    "eslint-plugin-storybook": "10.2.8",
     "faker": "^5.1.0",
     "immer": "9.0.7",
     "lodash": "^4.17.21",
@@ -100,7 +93,7 @@
     "react-use-draggable-scroll": "^0.4.7",
     "redux": ">=4.0.5",
     "reselect": "5.0.0-alpha.2",
-    "storybook": "^8.4.7",
+    "storybook": "10.2.8",
     "string-width": "6.1.0",
     "styled-components": "^5.3.10",
     "swiper": "^11.0.3",
@@ -109,7 +102,8 @@
     "vite": "^5.0.10",
     "vite-plugin-dts": "^3.6.4",
     "vite-plugin-static-copy": "^1.0.0",
-    "webpack": "^5.82.1"
+    "webpack": "^5.82.1",
+    "@storybook/addon-docs": "10.2.8"
   },
   "peerDependencies": {
     "@dnd-kit/core": "^6.3.1",

package/ui/Blocks/CommonGrid/components/Filters/GridSelect/GridSelect.js

@@ -1,3 +1,14 @@
+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);
+};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -58,6 +69,7 @@ var SelectFilter = function (_a) {
         onChange === null || onChange === void 0 ? void 0 : onChange(!isArray(options) || !(options === null || options === void 0 ? void 0 : options.length) ? null : options);
     }, [onChange]);
     var isAsync = !!asyncLoadKey;
+    var isNotEq = useMemo(function () { return isOptionArray(value) ? value.some(function (option) { return option.isNotEq; }) : false; }, [value]);
     var handleLoadOptions = useCallback(function (fulltext) { return __awaiter(void 0, void 0, void 0, function () {
         var data;
         return __generator(this, function (_a) {
@@ -75,9 +87,16 @@ var SelectFilter = function (_a) {
             }
         });
     }); }, [asyncLoadKey, onAsyncLoadFilterOptions]);
+    var handleIconClick = useCallback(function () {
+        if (!value || !isOptionArray(value))
+            return;
+        var newOptions = value === null || value === void 0 ? void 0 : value.map(function (option) { return (__assign(__assign({}, option), { isNotEq: !isNotEq })); });
+        onChange(newOptions);
+    }, [value, isNotEq, onChange]);
     var defaultOptions = useMemo(function () { return (isMulti && isAsync && isOptionArray(value) ? uniqBy(__spreadArray(__spreadArray([], loadedOptions, true), value, true), 'value') : undefined); }, [isAsync, value, loadedOptions]);
+    console.log('value', value);
     if (isMulti) {
-        return (_jsx(Select, { maxMenuHeight: 250, onChange: handleOnMultiChange, value: isOptionArray(value) ? value.map(function (option) { return String(option.value); }) : value, options: defaultOptions || options, showSelectAllButton: checkAllButton, style: "gridFilter", loadOptions: isAsync ? handleLoadOptions : undefined, defaultOptions: defaultOptions, placeholder: isAsync ? i18n._({ id: 'dataGrid.filterCell', message: 'Type to filter' }) : undefined, noOptionsMessage: function () { return null; }, containerVariant: isAsync ? 'search' : undefined, optionVariant: "checkbox", multiLabelVariant: "count", isMulti: true }));
+        return (_jsx(Select, { maxMenuHeight: 250, onChange: handleOnMultiChange, value: isOptionArray(value) ? value.map(function (option) { return String(option.value); }) : value, options: defaultOptions || options, showSelectAllButton: checkAllButton, style: "gridFilter", loadOptions: isAsync ? handleLoadOptions : undefined, defaultOptions: defaultOptions, placeholder: isAsync ? i18n._({ id: 'dataGrid.filterCell', message: 'Type to filter' }) : undefined, noOptionsMessage: function () { return null; }, containerVariant: isAsync ? 'search' : undefined, placeholderIcon: isNotEq ? 'notEqual' : 'equals', onIconClick: handleIconClick, optionVariant: "checkbox", multiLabelVariant: "count", isMulti: true }));
     }
     return (_jsx(SingleSelect, { maxMenuHeight: 250, onChange: onChange, value: value, options: options, style: "gridFilter", loadOptions: isAsync ? handleLoadOptions : undefined, placeholder: isAsync ? i18n._({ id: 'dataGrid.filterCell', message: 'Type to filter' }) : undefined, isClearable: isClearable }));
 };

package/ui/Blocks/CornerDialog/stories/CornerDialog.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-webpack5';
 
 declare const meta: {
     title: string;

package/ui/Blocks/ImageList/stories/ImageList.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-webpack5';
 
 declare const meta: {
     title: string;

package/ui/Blocks/LanguageSwitch/stories/LanguageSwith.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-webpack5';
 
 declare const meta: {
     title: string;

package/ui/Blocks/LightBox/stories/LightBox.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-webpack5';
 
 declare const meta: {
     title: string;

package/ui/Blocks/Modal/stories/Modal.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-webpack5';
 
 declare const meta: {
     title: string;

package/ui/Blocks/SideMenu/styles.js

@@ -140,7 +140,7 @@ export var TooltipWrap = styled.div(templateObject_16 || (templateObject_16 = __
     return ($lightMode ? th.color('red20') : th.color('blue2'));
 });
 export var OverflowWithEllipsis = styled.span(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  max-width: 140px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"], ["\n  max-width: 140px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
-export var TopLevelWrap = styled.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  background-color: ", ";\n  border-right: 1px solid ", ";\n  height: -webkit-fill-available;\n  transition: width 0.5s ease;\n  width: ", ";\n\n  z-index: 5;\n  position: absolute;\n  top: ", ";\n  height: ", ";\n\n  display: flex;\n  flex-direction: column;\n\n  @media (min-width: 1024px) {\n    top: inherit;\n    z-index: 2;\n  }\n"], ["\n  background-color: ", ";\n  border-right: 1px solid ", ";\n  height: -webkit-fill-available;\n  transition: width 0.5s ease;\n  width: ", ";\n\n  z-index: 5;\n  position: absolute;\n  top: ", ";\n  height: ", ";\n\n  display: flex;\n  flex-direction: column;\n\n  @media (min-width: 1024px) {\n    top: inherit;\n    z-index: 2;\n  }\n"])), function (_a) {
+export var TopLevelWrap = styled.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  background-color: ", ";\n  border-right: 1px solid ", ";\n  height: -webkit-fill-available;\n  transition: width 0.5s ease;\n  width: ", ";\n\n  z-index: 7;\n  position: absolute;\n  top: ", ";\n  height: ", ";\n\n  display: flex;\n  flex-direction: column;\n\n  @media (min-width: 1024px) {\n    top: inherit;\n    z-index: 2;\n  }\n"], ["\n  background-color: ", ";\n  border-right: 1px solid ", ";\n  height: -webkit-fill-available;\n  transition: width 0.5s ease;\n  width: ", ";\n\n  z-index: 7;\n  position: absolute;\n  top: ", ";\n  height: ", ";\n\n  display: flex;\n  flex-direction: column;\n\n  @media (min-width: 1024px) {\n    top: inherit;\n    z-index: 2;\n  }\n"])), function (_a) {
     var lightMode = _a.lightMode;
     return (lightMode ? 'white' : th('colors.blue3'));
 }, th('colors.lightGray6'), function (_a) {
@@ -158,5 +158,5 @@ export var BodyWrap = styled.div(templateObject_20 || (templateObject_20 = __mak
     var isCompact = _a.isCompact;
     return (isCompact ? '24px 9px' : '24px 22px');
 });
-export var Overlay = styled.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  z-index: 4;\n  height: 100%;\n  width: 100%;\n  background-color: ", ";\n  @media (min-width: 1024px) {\n    display: none;\n  }\n"], ["\n  position: fixed;\n  top: 0;\n  z-index: 4;\n  height: 100%;\n  width: 100%;\n  background-color: ", ";\n  @media (min-width: 1024px) {\n    display: none;\n  }\n"])), createRgba('blue2', 0.6));
+export var Overlay = styled.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  z-index: 6;\n  height: 100%;\n  width: 100%;\n  background-color: ", ";\n  @media (min-width: 1024px) {\n    display: none;\n  }\n"], ["\n  position: fixed;\n  top: 0;\n  z-index: 6;\n  height: 100%;\n  width: 100%;\n  background-color: ", ";\n  @media (min-width: 1024px) {\n    display: none;\n  }\n"])), createRgba('blue2', 0.6));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21;

package/ui/Blocks/Tabs/stories/Tabs.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-webpack5';
 
 declare const meta: {
     title: string;

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

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-webpack5';
 
 declare const meta: {
     title: string;

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

@@ -1,6 +1,6 @@
 declare const meta: {
     title: string;
-    component: import('react').FC<import('../AsyncSelect').AsyncSelectProps>;
+    component: import('react').FC<import('..').AsyncSelectProps>;
     tags: string[];
     argTypes: {};
 };

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

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-webpack5';
 
 declare const meta: {
     title: string;

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

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-webpack5';
 
 declare const meta: {
     title: string;

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

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-webpack5';
 
 declare const meta: {
     title: string;

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

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-webpack5';
 
 declare const meta: {
     title: string;

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

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-webpack5';
 
 declare const meta: {
     title: string;

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

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-webpack5';
 
 declare const meta: {
     title: string;

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

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-webpack5';
 
 declare const meta: {
     title: string;

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

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-webpack5';
 
 declare const meta: {
     title: string;

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

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-webpack5';
 
 declare const meta: {
     title: string;

package/ui/Elements/Icon/Icon.js

@@ -265,7 +265,7 @@ var Icon = function (_a) {
     }, [icon, style, namedIcon]);
     var flipProp = (namedIcon && Array.isArray(namedIcon) && namedIcon[1]) || undefined;
     var IconComponent = icons[icon];
-    return (_jsx(FaIconSizing, { size: size, className: className !== null && className !== void 0 ? className : '', "$colorSecondary": colorSecondary, "$fixedWidth": fixedWidth, children: IconComponent ? _jsx(IconComponent, { fill: colorFill, stroke: colorStroke }) : (_jsx(FontAwesomeIcon, { color: colorFill, flip: flipProp, icon: iconProp, className: "faIcon ".concat(fixedWidth ? 'fa-fw' : '', " ").concat(spinning ? 'fa-spin' : '') })) }));
+    return (_jsx(FaIconSizing, { size: size, className: className !== null && className !== void 0 ? className : '', "$colorSecondary": colorSecondary, "$fixedWidth": fixedWidth, children: IconComponent ? _jsx(IconComponent, { fill: colorFill, stroke: colorStroke, width: size, height: size }) : (_jsx(FontAwesomeIcon, { color: colorFill, flip: flipProp, icon: iconProp, className: "faIcon ".concat(fixedWidth ? 'fa-fw' : '', " ").concat(spinning ? 'fa-spin' : '') })) }));
 };
 export default Icon;
 var templateObject_1;

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

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { SvgProps } from '../types';
+
+export declare const CircleHalfStroke: FC<SvgProps>;

package/ui/Elements/Icon/icons/CircleHalfStroke.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 CircleHalfStroke = function (props) { return (_jsx("svg", __assign({ width: "18", height: "18", viewBox: "0 0 512 512", fill: "currentColor" }, props, { children: _jsx("path", { d: "M448 256c0-106-86-192-192-192l0 384c106 0 192-86 192-192zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z" }) }))); };

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

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { SvgProps } from '../types';
+
+export declare const Moon: FC<SvgProps>;

package/ui/Elements/Icon/icons/Moon.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 Moon = function (props) { return (_jsx("svg", __assign({ width: "18", height: "18", viewBox: "0 0 384 512", fill: "currentColor" }, props, { children: _jsx("path", { d: "M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z" }) }))); };

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

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { SvgProps } from '../types';
+
+export declare const ShieldUser: FC<SvgProps>;

package/ui/Elements/Icon/icons/ShieldUser.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 ShieldUser = function (props) { return (_jsx("svg", __assign({ viewBox: "0 0 640 640" }, props, { children: _jsx("path", { d: "M320.3 64C322.3 64 324.3 64.2 326.2 64.6C326.4 64.6 326.7 64.7 326.9 64.8C327.7 65 328.5 65.2 329.3 65.4C329.5 65.5 329.8 65.6 330 65.6C330.7 65.8 331.4 66.1 332.1 66.4L332.4 66.5L521.7 146.7L525.7 148.6C544.3 158.1 558.1 176.6 559.8 199L560 203.9C559.5 303.1 518.7 484.6 346.3 567.1C331.7 574.1 315 574.9 299.9 569.7L293.5 567.1C121.3 484.7 80.5 303.2 80 204C79.9 177.8 96.4 156.1 118.3 146.8L307.6 66.5C307.7 66.5 307.8 66.4 307.9 66.4C308.6 66.1 309.3 65.9 310 65.6C310.2 65.5 310.5 65.4 310.7 65.4C311.5 65.1 312.4 65 313.2 64.8C313.4 64.8 313.6 64.7 313.9 64.6C315.8 64.2 317.8 64 319.8 64L320.4 64zM288 336C243.8 336 208 371.8 208 416C208 424.8 215.2 432 224 432L416 432C424.8 432 432 424.8 432 416C432 371.8 396.2 336 352 336L288 336zM320 184C289.1 184 264 209.1 264 240C264 270.9 289.1 296 320 296C350.9 296 376 270.9 376 240C376 209.1 350.9 184 320 184z" }) }))); };

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

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { SvgProps } from '../types';
+
+export declare const Sun: FC<SvgProps>;

package/ui/Elements/Icon/icons/Sun.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 Sun = function (props) { return (_jsx("svg", __assign({ width: "18", height: "18", viewBox: "0 0 512 512", fill: "currentColor" }, props, { children: _jsx("path", { d: "M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM160 256a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zm224 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z" }) }))); };

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

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { SvgProps } from '../types';
+
+export declare const UserCowboy: FC<SvgProps>;

package/ui/Elements/Icon/icons/UserCowboy.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 UserCowboy = function (props) { return (_jsx("svg", __assign({ viewBox: "0 0 640 640" }, props, { children: _jsx("path", { d: "M516.7 100.7C506.1 111.3 478.1 130.3 433.7 143.9C423.9 90.2 403.8 32 369.7 32C360.8 32 352 35.8 344.2 40C336.5 44.2 326.8 48 320.1 48C313.4 48 303.7 44.2 296 40C288.1 35.7 279.4 32 270.5 32C236.4 32 216.3 90.2 206.5 143.9C162.1 130.3 134.1 111.4 123.5 100.7C118 95.2 109.2 94.4 102.8 99C96.4 103.6 94.3 112.1 97.8 119.1C109.4 142.2 139.8 176.1 192.1 199.1L192.1 208C192.1 278.7 249.4 336 320.1 336C390.8 336 448.1 278.7 448.1 208L448.1 199.1C500.4 176.2 530.9 142.3 542.4 119.1C545.9 112.1 543.8 103.6 537.4 99C531 94.4 522.3 95.1 516.7 100.7zM399.7 215.2C396.1 256 361.8 288 320 288C278.2 288 243.9 256 240.3 215.1C263.8 220.7 290.3 224 320 224C349.7 224 376.2 220.7 399.7 215.1zM276.6 384C185.7 384 112 457.7 112 548.6C112 563.7 124.3 576 139.4 576L500.5 576C515.6 576 527.9 563.7 527.9 548.6C527.9 457.7 454.2 384 363.3 384L276.4 384z" }) }))); };

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

@@ -78,3 +78,8 @@ export { MachinePackingForbidden } from './MachinePackingForbidden';
 export { Valuable } from './Valuable';
 export { MobilePhone } from './MobilePhone';
 export { Reload } from './Reload';
+export { Sun } from './Sun';
+export { Moon } from './Moon';
+export { CircleHalfStroke } from './CircleHalfStroke';
+export { ShieldUser } from './ShieldUser';
+export { UserCowboy } from './UserCowboy';

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

@@ -78,3 +78,8 @@ export { MachinePackingForbidden } from './MachinePackingForbidden';
 export { Valuable } from './Valuable';
 export { MobilePhone } from './MobilePhone';
 export { Reload } from './Reload';
+export { Sun } from './Sun';
+export { Moon } from './Moon';
+export { CircleHalfStroke } from './CircleHalfStroke';
+export { ShieldUser } from './ShieldUser';
+export { UserCowboy } from './UserCowboy';

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

@@ -1,11 +1,11 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-webpack5';
 
 declare const meta: {
     title: string;
     component: import('react').FC<{
         badge: "warning";
     } & import('..').IconProps>;
-    decorators: ((Story: import('@storybook/core/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+    decorators: ((Story: import('storybook/internal/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         badge: "warning";
         icon: string;
         style?: "normal" | "light" | "solid" | undefined;

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

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-webpack5';
 
 declare const meta: {
     title: string;

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

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-webpack5';
 
 declare const meta: {
     title: string;

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

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-webpack5';
 
 declare const meta: {
     title: string;

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

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-webpack5';
 
 declare const meta: {
     title: string;

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

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-webpack5';
 
 declare const meta: {
     title: string;

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

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-webpack5';
 
 declare const meta: {
     title: string;

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

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-webpack5';
 import { PaginationProps } from '../';
 
 declare const meta: {

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

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-webpack5';
 
 declare const meta: {
     title: string;

package/ui/Elements/Select/Select.js

@@ -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, 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"]);
+    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 isAsync = !!loadOptions;
     if (showSelectAllButton && !isMulti) {
         console.error('CheckboxSelect incompatible props');
@@ -83,7 +83,7 @@ var Select = function (_a) {
             onChange === null || onChange === void 0 ? void 0 : onChange(emptyOptions);
         }
     }, [onChange]);
-    var icon = containerVariant === 'search' ? 'search' : placeholderIcon || undefined;
+    var icon = containerVariant === 'search' && !placeholderIcon ? '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 RenderComponent = isAsync ? StyledAsyncSelect : StyledReactSelect;
@@ -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, 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, resetGrid: resetGrid, onCustomSelectAll: setAllOptions, onCustomDeselectAll: unsetAllOptions, selectAllButton: showSelectAllButton, resetGridButton: showResetGridButton, maxMenuHeight: modifiedMaxMenuHeight, getOptionValue: getOptionValue, loadingMessage: loadingMessage, shortValues: shortValues }))] }), error && _jsx(ErrorMessage, { children: error })] }));
 };
 export default Select;

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

@@ -34,12 +34,13 @@ var IconDiv = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateO
     return (hasValue ? 'black' : '#a3b3c1');
 });
 var IconValueContainer = function (props) {
-    var _a;
+    var _a, _b;
     // 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;
     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 }))] }));
+    var onIconClick = (_b = rest.selectProps) === null || _b === void 0 ? void 0 : _b.onIconClick;
+    return (_jsxs(_Fragment, { children: [icon && (_jsx(IconDiv, { className: "inputIcon", hasValue: hasValue, onClick: onIconClick, children: _jsx(Icon, { icon: icon }) })), _jsx(components.ValueContainer, __assign({}, rest, { children: children }))] }));
 };
 export default IconValueContainer;
 var templateObject_1;

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

@@ -7,6 +7,7 @@ export type Option<Value = string | number> = {
     label: string | number;
     isDisabled?: boolean;
     isFixed?: boolean;
+    isNotEq?: boolean;
     color?: string;
     index?: number;
     inputValue?: string;
@@ -54,6 +55,7 @@ export type SelectProps = {
     getOptionValue?: Function;
     systemTheme?: Theme;
     menuPlacement?: string;
+    onIconClick?: Function;
 };
 export type BaseColors = {
     primary: string;

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

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-webpack5';
 
 declare const meta: {
     title: string;

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

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-webpack5';
 
 declare const meta: {
     title: string;

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

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-webpack5';
 
 declare const meta: {
     title: string;

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

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-webpack5';
 
 declare const meta: {
     title: string;

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

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-webpack5';
 
 declare const meta: {
     title: string;

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

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-webpack5';
 
 declare const meta: {
     title: string;

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

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-webpack5';
 
 declare const meta: {
     title: string;

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

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-webpack5';
 
 declare const meta: {
     title: string;

package/ui/Forms/Checkbox/stories/Checkbox.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-webpack5';
 
 declare const meta: {
     title: string;

package/ui/Forms/Checkbox/styles.d.ts

@@ -1,7 +1,7 @@
 export declare const FakeInput: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     size: string | number;
 }, never>;
-export declare const CheckIcon: import('styled-components').StyledComponent<import('react').FC<import('../../Elements/Icon').IconProps>, import('@xstyled/system').Theme, {
+export declare const CheckIcon: import('styled-components').StyledComponent<import('react').FC<import('../..').IconProps>, import('@xstyled/system').Theme, {
     size: string | number;
 }, never>;
 export declare const CheckboxWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {

package/ui/Forms/Input/stories/Input.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-webpack5';
 import { default as React } from 'react';
 
 declare const meta: {