@expressms/smartapp-ui 0.0.8 → 1.0.0

package/build/main//321/201omponents/ActionModal/ActionModal.d.ts

@@ -1,4 +1,4 @@
 import { IActionModalProps } from './types';
 import '../../styles/stories.module.scss';
-declare function ActionModal({ title, buttonName, confirmButtonFunction, isModalOpen, placeholder, cancelButtonFunction, defaultValue, }: IActionModalProps): import("react/jsx-runtime").JSX.Element;
+declare const ActionModal: ({ isModalOpen, title, buttonName, confirmButtonFunction, cancelButtonFunction, placeholder, defaultValue, iconColor, }: IActionModalProps) => import("react/jsx-runtime").JSX.Element;
 export default ActionModal;

package/build/main//321/201omponents/ActionModal/ActionModal.js

@@ -11,13 +11,16 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
-import { ReactComponent as CancelCross } from '../../assets/icons/cancel-cross.svg';
 import Popup from 'reactjs-popup';
-import { Button } from '../index';
-import '../../styles/stories.module.scss';
+import { ReactComponent as CancelIcon } from '../../assets/icons/cancel-cross.svg';
+import Button from '../Button';
 import Input from '../Input';
-function ActionModal(_a) {
-    var title = _a.title, buttonName = _a.buttonName, confirmButtonFunction = _a.confirmButtonFunction, isModalOpen = _a.isModalOpen, placeholder = _a.placeholder, cancelButtonFunction = _a.cancelButtonFunction, _b = _a.defaultValue, defaultValue = _b === void 0 ? '' : _b;
+import { TButtonColor, TButtonType } from '../Button/types';
+import { getIconColor } from '../../helpers';
+import { DEFAULT_GRAY_ICON_COLOR } from '../../constants';
+import '../../styles/stories.module.scss';
+var ActionModal = function (_a) {
+    var isModalOpen = _a.isModalOpen, title = _a.title, buttonName = _a.buttonName, confirmButtonFunction = _a.confirmButtonFunction, cancelButtonFunction = _a.cancelButtonFunction, placeholder = _a.placeholder, _b = _a.defaultValue, defaultValue = _b === void 0 ? '' : _b, iconColor = _a.iconColor;
     var _c = useState(defaultValue), value = _c[0], setValue = _c[1];
     var ref = useRef();
     useEffect(function () {
@@ -34,6 +37,6 @@ function ActionModal(_a) {
     var onChange = function (value) {
         setValue(value);
     };
-    return (_jsx(Popup, __assign({ closeOnDocumentClick: true, modal: true, open: isModalOpen }, { children: _jsx("div", __assign({ ref: ref, className: "smartapp-action-modal" }, { children: _jsxs("div", __assign({ className: "smartapp-action-modal__content" }, { children: [_jsx("p", __assign({ className: "smartapp-action-modal__content--title" }, { children: title })), _jsx("div", __assign({ onClick: cancelButtonFunction, className: "smartapp-action-modal__content__cancel-cross" }, { children: _jsx(CancelCross, {}) })), _jsx("div", __assign({ className: "smartapp-action-modal__content--input" }, { children: _jsx(Input, { defaultValue: value, onChange: onChange, placeholder: placeholder }) })), _jsx("div", __assign({ className: "smartapp-action-modal__content--buttons" }, { children: _jsx(Button, { title: buttonName, typeButton: "low", onClickFunction: function () { return confirmButtonFunction(value); }, color: "blue" }) }))] })) })) })));
-}
+    return (_jsx(Popup, __assign({ closeOnDocumentClick: true, modal: true, open: isModalOpen }, { children: _jsx("div", __assign({ ref: ref, className: "smartapp-action-modal" }, { children: _jsxs("div", __assign({ className: "smartapp-action-modal__content" }, { children: [_jsx("p", __assign({ className: "smartapp-action-modal__content--title" }, { children: title })), _jsx("div", __assign({ onClick: cancelButtonFunction, className: "smartapp-action-modal__content__cancel-cross" }, { children: _jsx(CancelIcon, { style: { color: getIconColor(iconColor, DEFAULT_GRAY_ICON_COLOR) } }) })), _jsx("div", __assign({ className: "smartapp-action-modal__content--input" }, { children: _jsx(Input, { defaultValue: value, placeholder: placeholder, onChange: onChange }) })), _jsx("div", __assign({ className: "smartapp-action-modal__content--buttons" }, { children: _jsx(Button, { title: buttonName, typeButton: TButtonType.low, color: TButtonColor.blue, onClickFunction: function () { return confirmButtonFunction(value); } }) }))] })) })) })));
+};
 export default ActionModal;

package/build/main//321/201omponents/ActionModal/types.d.ts

@@ -1,9 +1,10 @@
 export interface IActionModalProps {
+    isModalOpen: boolean;
     title: string;
     buttonName: string;
     confirmButtonFunction: (str?: string) => void;
-    isModalOpen: boolean;
     cancelButtonFunction: () => void;
     placeholder?: string;
     defaultValue?: string;
+    iconColor?: string;
 }

package/build/main//321/201omponents/AttachedFile/AttachedFile.d.ts

@@ -1,4 +1,4 @@
-import { IAttachedFile } from './types';
+import { IAttachedFileProps } from './types';
 import '../../styles/stories.module.scss';
-declare function AttachedFile({ fileName, weight, weightType, isSpaceBetween, onClickDownloadFile, onClickRemoveFile, isRemoveFile, isDownloadFile, width, }: IAttachedFile): import("react/jsx-runtime").JSX.Element;
+declare const AttachedFile: ({ fileName, weight, weightType, isSpaceBetween, onClickDownloadFile, onClickRemoveFile, isRemoveFile, isDownloadFile, width, fileColor, downloadColor, removeColor, }: IAttachedFileProps) => import("react/jsx-runtime").JSX.Element;
 export default AttachedFile;

package/build/main//321/201omponents/AttachedFile/AttachedFile.js

@@ -10,13 +10,18 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ReactComponent as File } from '../../assets/icons/file.svg';
-import { ReactComponent as Close } from '../../assets/icons/close.svg';
-import { ReactComponent as Download } from '../../assets/icons/download.svg';
-import '../../styles/stories.module.scss';
 import classNames from 'classnames';
-function AttachedFile(_a) {
-    var fileName = _a.fileName, weight = _a.weight, weightType = _a.weightType, _b = _a.isSpaceBetween, isSpaceBetween = _b === void 0 ? false : _b, _c = _a.onClickDownloadFile, onClickDownloadFile = _c === void 0 ? undefined : _c, _d = _a.onClickRemoveFile, onClickRemoveFile = _d === void 0 ? undefined : _d, _e = _a.isRemoveFile, isRemoveFile = _e === void 0 ? false : _e, _f = _a.isDownloadFile, isDownloadFile = _f === void 0 ? false : _f, _g = _a.width, width = _g === void 0 ? 100 : _g;
-    return (_jsxs("div", __assign({ style: { width: "".concat(width, "%") }, className: "smartapp-attached-file" }, { children: [_jsx("div", __assign({ className: "smartapp-attached-file--icon" }, { children: _jsx(File, {}) })), _jsxs("div", __assign({ className: classNames({ 'smartapp-attached-file__value': true }, { 'justify-space-between': isSpaceBetween }) }, { children: [_jsxs("div", __assign({ className: "smartapp-attached-file__value--info" }, { children: [_jsx("p", __assign({ className: "smartapp-attached-file__value--info__name" }, { children: fileName })), _jsx("p", __assign({ className: "smartapp-attached-file__value--info__weight" }, { children: "".concat(weight, " ").concat(weightType) }))] })), _jsxs("div", __assign({ className: "smartapp-attached-file__value--icons" }, { children: [onClickRemoveFile && isRemoveFile && (_jsx("div", __assign({ onClick: function () { return onClickRemoveFile(fileName); }, className: "smartapp-attached-file__value--icons__close" }, { children: _jsx(Close, {}) }))), onClickDownloadFile && isDownloadFile && (_jsx("div", __assign({ onClick: function () { return onClickDownloadFile(fileName); }, className: "smartapp-attached-file__value--icons__download" }, { children: _jsx(Download, {}) })))] }))] }))] }), weight));
-}
+import { ReactComponent as FileIcon } from '../../assets/icons/file.svg';
+import { ReactComponent as RemoveIcon } from '../../assets/icons/close.svg';
+import { ReactComponent as DownloadIcon } from '../../assets/icons/download.svg';
+import { getIconColor } from '../../helpers';
+import { DEFAULT_BLUE_ICON_COLOR, DEFAULT_GRAY_ICON_COLOR } from '../../constants';
+import '../../styles/stories.module.scss';
+var AttachedFile = function (_a) {
+    var fileName = _a.fileName, weight = _a.weight, weightType = _a.weightType, _b = _a.isSpaceBetween, isSpaceBetween = _b === void 0 ? false : _b, _c = _a.onClickDownloadFile, onClickDownloadFile = _c === void 0 ? undefined : _c, _d = _a.onClickRemoveFile, onClickRemoveFile = _d === void 0 ? undefined : _d, _e = _a.isRemoveFile, isRemoveFile = _e === void 0 ? false : _e, _f = _a.isDownloadFile, isDownloadFile = _f === void 0 ? false : _f, _g = _a.width, width = _g === void 0 ? 100 : _g, fileColor = _a.fileColor, downloadColor = _a.downloadColor, removeColor = _a.removeColor;
+    return (_jsxs("div", __assign({ style: { width: "".concat(width, "%") }, className: "smartapp-attached-file" }, { children: [_jsx("div", __assign({ className: "smartapp-attached-file--icon" }, { children: _jsx(FileIcon, { style: { color: getIconColor(fileColor, DEFAULT_GRAY_ICON_COLOR) } }) })), _jsxs("div", __assign({ className: classNames({
+                    'smartapp-attached-file__value': true,
+                    'justify-space-between': isSpaceBetween,
+                }) }, { children: [_jsxs("div", __assign({ className: "smartapp-attached-file__value--info" }, { children: [_jsx("p", __assign({ className: "smartapp-attached-file__value--info__name" }, { children: fileName })), _jsx("p", __assign({ className: "smartapp-attached-file__value--info__weight" }, { children: "".concat(weight, " ").concat(weightType) }))] })), _jsxs("div", __assign({ className: "smartapp-attached-file__value--icons" }, { children: [onClickRemoveFile && isRemoveFile && (_jsx("div", __assign({ onClick: function () { return onClickRemoveFile(fileName); }, className: "smartapp-attached-file__value--icons__close" }, { children: _jsx(RemoveIcon, { style: { color: getIconColor(removeColor, DEFAULT_BLUE_ICON_COLOR) } }) }))), onClickDownloadFile && isDownloadFile && (_jsx("div", __assign({ onClick: function () { return onClickDownloadFile(fileName); }, className: "smartapp-attached-file__value--icons__download" }, { children: _jsx(DownloadIcon, { style: { color: getIconColor(downloadColor, DEFAULT_BLUE_ICON_COLOR) } }) })))] }))] }))] }), weight));
+};
 export default AttachedFile;

package/build/main//321/201omponents/AttachedFile/types.d.ts

@@ -1,5 +1,5 @@
 import { IntRange } from '../types';
-export interface IAttachedFile {
+export interface IAttachedFileProps {
     fileName: string;
     weight: number;
     weightType: string;
@@ -9,4 +9,7 @@ export interface IAttachedFile {
     isRemoveFile?: boolean;
     isDownloadFile?: boolean;
     width?: IntRange<1, 101>;
+    fileColor?: string;
+    downloadColor?: string;
+    removeColor?: string;
 }

package/build/main//321/201omponents/Avatar/Avatar.d.ts

@@ -1,4 +1,4 @@
-import { IAvatar } from './types';
+import { IAvatarProps } from './types';
 import '../../styles/stories.module.scss';
-declare function Avatar({ username, onClick, widthHeight }: IAvatar): import("react/jsx-runtime").JSX.Element;
+declare const Avatar: ({ username, onClick, widthHeight }: IAvatarProps) => import("react/jsx-runtime").JSX.Element;
 export default Avatar;

package/build/main//321/201omponents/Avatar/Avatar.js

@@ -12,7 +12,7 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { AvatarFontSizes } from './types';
 import '../../styles/stories.module.scss';
-function Avatar(_a) {
+var Avatar = function (_a) {
     var _b, _c, _d;
     var username = _a.username, _e = _a.onClick, onClick = _e === void 0 ? function () { return undefined; } : _e, _f = _a.widthHeight, widthHeight = _f === void 0 ? 44 : _f;
     var initials = (username === null || username === void 0 ? void 0 : username.split(' ').length) <= 2
@@ -35,5 +35,5 @@ function Avatar(_a) {
         return AvatarFontSizes.high;
     };
     return (_jsx("div", __assign({ style: { width: "".concat(widthHeight, "px"), height: "".concat(widthHeight, "px"), fontSize: getFontSizeAvatar() }, onClick: onClick, className: "smartapp-avatar" }, { children: initials })));
-}
+};
 export default Avatar;

package/build/main//321/201omponents/Avatar/types.d.ts

@@ -1,7 +1,7 @@
-export interface IAvatar {
+export interface IAvatarProps {
     username: string;
     onClick?: () => void;
-    widthHeight?: 44 | 24 | 32;
+    widthHeight?: 24 | 32 | 44;
 }
 export declare enum AvatarFontSizes {
     small = "12px",

package/build/main//321/201omponents/Button/Button.d.ts

@@ -1,4 +1,4 @@
 import { IButtonProps } from './types';
 import '../../styles/stories.module.scss';
-declare const Button: (props: IButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const Button: ({ title, isDisabled, typeButton, color, width, onClickFunction }: IButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default Button;

package/build/main//321/201omponents/Button/Button.js

@@ -10,10 +10,11 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import cn from 'classnames';
+import classNames from 'classnames';
+import { TButtonType, TButtonColor } from './types';
 import '../../styles/stories.module.scss';
-var Button = function (props) {
-    var title = props.title, _a = props.isDisabled, isDisabled = _a === void 0 ? false : _a, _b = props.typeButton, typeButton = _b === void 0 ? 'standart' : _b, _c = props.color, color = _c === void 0 ? 'white' : _c, _d = props.width, width = _d === void 0 ? 100 : _d, _e = props.onClickFunction, onClickFunction = _e === void 0 ? function () { return undefined; } : _e;
-    return (_jsx("button", __assign({ onClick: function () { return onClickFunction(); }, className: cn(typeButton ? 'smartapp-button__' + typeButton : null, color ? 'smartapp-button__color--' + color : null, isDisabled && 'smartapp-button__disabled'), style: { width: "".concat(width, "%") } }, { children: title })));
+var Button = function (_a) {
+    var title = _a.title, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, _c = _a.typeButton, typeButton = _c === void 0 ? TButtonType.standard : _c, _d = _a.color, color = _d === void 0 ? TButtonColor.white : _d, _e = _a.width, width = _e === void 0 ? 100 : _e, _f = _a.onClickFunction, onClickFunction = _f === void 0 ? function () { return undefined; } : _f;
+    return (_jsx("button", __assign({ className: classNames(typeButton ? 'smartapp-button__' + typeButton : null, color ? 'smartapp-button__color--' + color : null, isDisabled && 'smartapp-button__disabled'), style: { width: "".concat(width, "%") }, onClick: onClickFunction }, { children: title })));
 };
 export default Button;

package/build/main//321/201omponents/Button/types.d.ts

@@ -1,10 +1,17 @@
 import { IntRange } from '../types';
-export type TButtonType = 'standart' | 'low';
-export type TButtonColor = 'white' | 'blue' | 'red';
+export declare enum TButtonType {
+    standard = "standard",
+    low = "low"
+}
+export declare enum TButtonColor {
+    white = "white",
+    blue = "blue",
+    red = "red"
+}
 export interface IButtonProps {
     title: string;
     isDisabled?: boolean;
-    typeButton: TButtonType;
+    typeButton?: TButtonType;
     color?: TButtonColor;
     onClickFunction?: () => void;
     width?: IntRange<1, 101>;

package/build/main//321/201omponents/Button/types.js

@@ -1 +1,11 @@
-export {};
+export var TButtonType;
+(function (TButtonType) {
+    TButtonType["standard"] = "standard";
+    TButtonType["low"] = "low";
+})(TButtonType || (TButtonType = {}));
+export var TButtonColor;
+(function (TButtonColor) {
+    TButtonColor["white"] = "white";
+    TButtonColor["blue"] = "blue";
+    TButtonColor["red"] = "red";
+})(TButtonColor || (TButtonColor = {}));

package/build/main//321/201omponents/Calendar/Calendar.d.ts

@@ -1,4 +1,4 @@
-import '../../styles/stories.module.scss';
 import { ICalendarProps } from './types';
-declare function CalendarDatepicker({ placeholder, initialCurrentDate, initialCurrentDateRange, minDate, onChangeCurrentDate, onChangeCurrentDateRange, calendarComponentClassName, calendarInputClassName, isRange, width, }: ICalendarProps): import("react/jsx-runtime").JSX.Element;
+import '../../styles/stories.module.scss';
+declare const CalendarDatepicker: ({ placeholder, initialCurrentDate, initialCurrentDateRange, minDate, onChangeCurrentDate, onChangeCurrentDateRange, calendarComponentClassName, calendarInputClassName, isRange, width, }: ICalendarProps) => import("react/jsx-runtime").JSX.Element;
 export default CalendarDatepicker;

package/build/main//321/201omponents/Calendar/Calendar.js

@@ -11,15 +11,15 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
+import classNames from 'classnames';
 import DatePicker, { registerLocale } from 'react-datepicker';
 import ru from 'date-fns/locale/ru';
 import en from 'date-fns/locale/en-US';
 import '../../styles/stories.module.scss';
-import classNames from 'classnames';
 registerLocale('ru', ru);
 registerLocale('en', en);
-function CalendarDatepicker(_a) {
-    var _b = _a.placeholder, placeholder = _b === void 0 ? 'Введите дату' : _b, initialCurrentDate = _a.initialCurrentDate, initialCurrentDateRange = _a.initialCurrentDateRange, _c = _a.minDate, minDate = _c === void 0 ? null : _c, _d = _a.onChangeCurrentDate, onChangeCurrentDate = _d === void 0 ? function (date) { return undefined; } : _d, _e = _a.onChangeCurrentDateRange, onChangeCurrentDateRange = _e === void 0 ? function (period) { return undefined; } : _e, calendarComponentClassName = _a.calendarComponentClassName, calendarInputClassName = _a.calendarInputClassName, _f = _a.isRange, isRange = _f === void 0 ? false : _f, width = _a.width;
+var CalendarDatepicker = function (_a) {
+    var _b = _a.placeholder, placeholder = _b === void 0 ? 'Введите дату' : _b, initialCurrentDate = _a.initialCurrentDate, initialCurrentDateRange = _a.initialCurrentDateRange, _c = _a.minDate, minDate = _c === void 0 ? null : _c, _d = _a.onChangeCurrentDate, onChangeCurrentDate = _d === void 0 ? function () { return undefined; } : _d, _e = _a.onChangeCurrentDateRange, onChangeCurrentDateRange = _e === void 0 ? function () { return undefined; } : _e, calendarComponentClassName = _a.calendarComponentClassName, calendarInputClassName = _a.calendarInputClassName, _f = _a.isRange, isRange = _f === void 0 ? false : _f, width = _a.width;
     var _g = useState(initialCurrentDate ? initialCurrentDate : null), currentDate = _g[0], setCurrentDate = _g[1];
     var _h = useState(initialCurrentDateRange ? initialCurrentDateRange : [null, null]), currentDateRange = _h[0], setCurrentDateRange = _h[1];
     var startDate = currentDateRange[0], endDate = currentDateRange[1];
@@ -42,8 +42,6 @@ function CalendarDatepicker(_a) {
             }), onChange: function (period) { return onChangeDateRange(period); } })) : (_jsx(DatePicker, { selected: currentDate, dateFormat: "dd.MM.yyyy", locale: ru, placeholderText: placeholder, minDate: minDate, className: classNames({
                 'smartapp-calendar-input': !calendarComponentClassName,
                 calendarComponentClassName: calendarComponentClassName,
-            }), onChange: function (date) {
-                onChangeDate(date);
-            } })) })));
-}
+            }), onChange: function (date) { return onChangeDate(date); } })) })));
+};
 export default CalendarDatepicker;

package/build/main//321/201omponents/Checkbox/Checkbox.d.ts

@@ -1,4 +1,4 @@
 import { ICheckBoxProps } from './types';
 import '../../styles/stories.module.scss';
-declare function CheckBox({ id, onChange, disabled, checked }: ICheckBoxProps): import("react/jsx-runtime").JSX.Element;
+declare const CheckBox: ({ id, disabled, checked, iconColor, onChange }: ICheckBoxProps) => import("react/jsx-runtime").JSX.Element;
 export default CheckBox;

package/build/main//321/201omponents/Checkbox/Checkbox.js

@@ -10,9 +10,12 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ReactComponent as CheckIcon } from '../../assets/icons/check-mark.svg';
+import { getIconColor } from '../../helpers';
+import { DEFAULT_BLUE_ICON_COLOR } from '../../constants';
 import '../../styles/stories.module.scss';
-function CheckBox(_a) {
-    var id = _a.id, _b = _a.onChange, onChange = _b === void 0 ? function () { return undefined; } : _b, disabled = _a.disabled, checked = _a.checked;
-    return (_jsx("div", __assign({ className: "smartapp-check-box" }, { children: _jsx("div", __assign({ className: "smartapp-check-box__container" }, { children: _jsxs("label", __assign({ htmlFor: "cb-".concat(id) }, { children: [_jsx("input", { id: "cb-".concat(id), disabled: disabled, checked: checked, onChange: function () { return onChange(); }, className: "smartapp-check-box__container__custom-check-box", type: "checkbox", name: "marker" }), _jsx("span", { className: "checkmark" })] })) }), "cb-".concat(id, "}")) })));
-}
+var CheckBox = function (_a) {
+    var id = _a.id, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.checked, checked = _c === void 0 ? false : _c, iconColor = _a.iconColor, _d = _a.onChange, onChange = _d === void 0 ? function () { return undefined; } : _d;
+    return (_jsx("div", __assign({ className: "smartapp-check-box" }, { children: _jsxs("label", __assign({ htmlFor: "cb-".concat(id) }, { children: [_jsx("input", { id: "cb-".concat(id), type: "checkbox", className: "smartapp-check-box__custom-check-box", disabled: disabled, checked: checked, onChange: onChange }), checked ? _jsx(CheckIcon, { style: { color: getIconColor(iconColor, DEFAULT_BLUE_ICON_COLOR) } }) : _jsx("span", { className: "checkmark" })] })) })));
+};
 export default CheckBox;

package/build/main//321/201omponents/Checkbox/types.d.ts

@@ -1,6 +1,7 @@
 export interface ICheckBoxProps {
     id: string;
-    onChange?: () => void;
     disabled?: boolean;
     checked?: boolean;
+    iconColor?: string;
+    onChange?: () => void;
 }

package/build/main//321/201omponents/Chips/Chips.d.ts

@@ -1,4 +1,4 @@
 import { IChipsProps } from './types';
 import '../../styles/stories.module.scss';
-declare function Chips({ name, onCancelFunction }: IChipsProps): import("react/jsx-runtime").JSX.Element;
+declare const Chips: ({ name, iconColor, onCancelFunction }: IChipsProps) => import("react/jsx-runtime").JSX.Element;
 export default Chips;

package/build/main//321/201omponents/Chips/Chips.js

@@ -10,11 +10,13 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ReactComponent as Cancel } from '../../assets/icons/cancel-cross.svg';
-import '../../styles/stories.module.scss';
+import { ReactComponent as CancelIcon } from '../../assets/icons/cancel-cross.svg';
 import Avatar from '../Avatar';
-function Chips(_a) {
-    var name = _a.name, _b = _a.onCancelFunction, onCancelFunction = _b === void 0 ? function () { return undefined; } : _b;
-    return (_jsxs("div", __assign({ className: "smartapp-chips" }, { children: [_jsxs("div", __assign({ className: "smartapp-chips__info" }, { children: [_jsx(Avatar, { username: name, widthHeight: 24 }), _jsx("p", __assign({ className: "smartapp-chips__info--name" }, { children: name }))] })), _jsx("div", __assign({ onClick: function () { return onCancelFunction(name); }, className: "smartapp-chips__cancel-icon" }, { children: _jsx(Cancel, {}) }))] })));
-}
+import { getIconColor } from '../../helpers';
+import { DEFAULT_GRAY_ICON_COLOR } from '../../constants';
+import '../../styles/stories.module.scss';
+var Chips = function (_a) {
+    var name = _a.name, iconColor = _a.iconColor, _b = _a.onCancelFunction, onCancelFunction = _b === void 0 ? function () { return undefined; } : _b;
+    return (_jsxs("div", __assign({ className: "smartapp-chips" }, { children: [_jsxs("div", __assign({ className: "smartapp-chips__info" }, { children: [_jsx(Avatar, { username: name, widthHeight: 24 }), _jsx("p", __assign({ className: "smartapp-chips__info--name" }, { children: name }))] })), _jsx("div", __assign({ onClick: function () { return onCancelFunction(name); }, className: "smartapp-chips__cancel-icon" }, { children: _jsx(CancelIcon, { style: { color: getIconColor(iconColor, DEFAULT_GRAY_ICON_COLOR) } }) }))] })));
+};
 export default Chips;

package/build/main//321/201omponents/Chips/types.d.ts

@@ -1,4 +1,5 @@
 export interface IChipsProps {
     name: string;
+    iconColor?: string;
     onCancelFunction?: (name?: string) => void;
 }

package/build/main//321/201omponents/ConfirmationModal/ConfirmationModal.d.ts

@@ -1,4 +1,4 @@
 import { IConfirmationModalProps } from './types';
 import '../../styles/stories.module.scss';
-declare function ConfirmationModal({ title, text, cancelButtonName, confirmButtonName, cancelButtonFunction, confirmButtonFunction, isModalOpen, }: IConfirmationModalProps): import("react/jsx-runtime").JSX.Element;
+declare const ConfirmationModal: ({ title, text, cancelButtonName, confirmButtonName, cancelButtonFunction, confirmButtonFunction, isModalOpen, }: IConfirmationModalProps) => import("react/jsx-runtime").JSX.Element;
 export default ConfirmationModal;

package/build/main//321/201omponents/ConfirmationModal/ConfirmationModal.js

@@ -12,10 +12,11 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
 import Popup from 'reactjs-popup';
-import { Button } from '../index';
+import Button from '../Button';
+import { TButtonColor, TButtonType } from '../Button/types';
 import '../../styles/stories.module.scss';
-function ConfirmationModal(_a) {
-    var title = _a.title, text = _a.text, cancelButtonName = _a.cancelButtonName, confirmButtonName = _a.confirmButtonName, _b = _a.cancelButtonFunction, cancelButtonFunction = _b === void 0 ? function () { return undefined; } : _b, confirmButtonFunction = _a.confirmButtonFunction, isModalOpen = _a.isModalOpen;
+var ConfirmationModal = function (_a) {
+    var title = _a.title, text = _a.text, cancelButtonName = _a.cancelButtonName, confirmButtonName = _a.confirmButtonName, cancelButtonFunction = _a.cancelButtonFunction, confirmButtonFunction = _a.confirmButtonFunction, isModalOpen = _a.isModalOpen;
     var ref = useRef();
     useEffect(function () {
         var checkIfClickedOutside = function (e) {
@@ -28,6 +29,6 @@ function ConfirmationModal(_a) {
             document === null || document === void 0 ? void 0 : document.removeEventListener('click', checkIfClickedOutside, true);
         };
     }, [isModalOpen, cancelButtonFunction]);
-    return (_jsx(Popup, __assign({ closeOnDocumentClick: true, modal: true, open: isModalOpen }, { children: _jsx("div", __assign({ ref: ref, className: "smartapp-confirmation-modal" }, { children: _jsxs("div", __assign({ className: "smartapp-confirmation-modal__content" }, { children: [_jsx("p", __assign({ className: "smartapp-confirmation-modal__content--title" }, { children: title })), _jsx("p", __assign({ className: "smartapp-confirmation-modal__content--text" }, { children: text })), _jsxs("div", __assign({ className: "smartapp-confirmation-modal__content--buttons" }, { children: [_jsx(Button, { width: 50, title: cancelButtonName, typeButton: "low", onClickFunction: cancelButtonFunction, color: "white" }), _jsx(Button, { width: 50, title: confirmButtonName, typeButton: "low", onClickFunction: confirmButtonFunction, color: "red" })] }))] })) })) })));
-}
+    return (_jsx(Popup, __assign({ closeOnDocumentClick: true, modal: true, open: isModalOpen }, { children: _jsx("div", __assign({ ref: ref, className: "smartapp-confirmation-modal" }, { children: _jsxs("div", __assign({ className: "smartapp-confirmation-modal__content" }, { children: [_jsx("p", __assign({ className: "smartapp-confirmation-modal__content--title" }, { children: title })), _jsx("p", __assign({ className: "smartapp-confirmation-modal__content--text" }, { children: text })), _jsxs("div", __assign({ className: "smartapp-confirmation-modal__content--buttons" }, { children: [_jsx(Button, { width: 50, title: cancelButtonName, typeButton: TButtonType.low, onClickFunction: cancelButtonFunction, color: TButtonColor.white }), _jsx(Button, { width: 50, title: confirmButtonName, typeButton: TButtonType.low, onClickFunction: confirmButtonFunction, color: TButtonColor.red })] }))] })) })) })));
+};
 export default ConfirmationModal;

package/build/main//321/201omponents/CustomSelect/CustomSelect.d.ts

@@ -1,4 +1,4 @@
-import { ICustomSelect } from './types';
+import { ICustomSelectProps } from './types';
 import '../../styles/stories.module.scss';
-declare function CustomSelect({ options, defaultValue, placeholder, onChange, width }: ICustomSelect): import("react/jsx-runtime").JSX.Element;
+declare const CustomSelect: ({ options, defaultValue, placeholder, onChange, width }: ICustomSelectProps) => import("react/jsx-runtime").JSX.Element;
 export default CustomSelect;

package/build/main//321/201omponents/CustomSelect/CustomSelect.js

@@ -12,7 +12,8 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } from "react/jsx-runtime";
 import Select from 'react-select';
 import '../../styles/stories.module.scss';
-function CustomSelect(_a) {
+var IndicatorSeparator = function () { return null; };
+var CustomSelect = function (_a) {
     var options = _a.options, defaultValue = _a.defaultValue, placeholder = _a.placeholder, onChange = _a.onChange, _b = _a.width, width = _b === void 0 ? 100 : _b;
     var customStyles = {
         option: function (provided, state) { return (__assign(__assign({}, provided), { cursor: 'pointer', background: '#ffffff', color: (state === null || state === void 0 ? void 0 : state.isSelected) ? '#4799E3' : '#000000', width: "".concat(width, "%"), textOverflow: 'ellipsis', '&:focus': {
@@ -31,6 +32,6 @@ function CustomSelect(_a) {
         /* @ts-ignore */
         , { 
             /* @ts-ignore */
-            onChange: function (option) { return onChange(option); }, options: options, defaultValue: defaultValue, styles: customStyles, placeholder: _jsx("div", __assign({ className: "smartapp-custom-select__placeholder" }, { children: placeholder })), components: { IndicatorSeparator: function () { return null; } } }) })));
-}
+            onChange: function (option) { return onChange(option); }, options: options, defaultValue: defaultValue, styles: customStyles, placeholder: _jsx("div", __assign({ className: "smartapp-custom-select__placeholder" }, { children: placeholder })), components: { IndicatorSeparator: IndicatorSeparator } }) })));
+};
 export default CustomSelect;

package/build/main//321/201omponents/CustomSelect/types.d.ts

@@ -3,7 +3,7 @@ export type TCustomSelectOption = {
     label: string;
     value: string;
 };
-export type ICustomSelect = {
+export type ICustomSelectProps = {
     options: TCustomSelectOption[];
     onChange: (option: TCustomSelectOption) => void;
     placeholder: string;

package/build/main//321/201omponents/CustomSelectPriority/CustomSelectPriority.d.ts

@@ -1,4 +1,4 @@
-import { ICustomSelectPriority } from './types';
+import { ICustomSelectPriorityProps } from './types';
 import '../../styles/stories.module.scss';
-declare function CustomSelectPriority({ options, defaultValue, placeholder, onChange, width }: ICustomSelectPriority): import("react/jsx-runtime").JSX.Element;
+declare const CustomSelectPriority: ({ options, defaultValue, placeholder, onChange, width }: ICustomSelectPriorityProps) => import("react/jsx-runtime").JSX.Element;
 export default CustomSelectPriority;

package/build/main//321/201omponents/CustomSelectPriority/CustomSelectPriority.js

@@ -22,9 +22,21 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import Select, { components } from 'react-select';
-import { ReactComponent as Ellipse } from '../../assets/icons/ellipse.svg';
+import { ReactComponent as EllipseIcon } from '../../assets/icons/ellipse.svg';
 import '../../styles/stories.module.scss';
-function CustomSelectPriority(_a) {
+var Control = function (_a) {
+    var _b, _c, _d, _e;
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (_jsxs(components.Control, __assign({}, props, { children: [((_c = (_b = props === null || props === void 0 ? void 0 : props.selectProps) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.color) && (_jsx(_Fragment, { children: _jsx("span", __assign({ style: { marginLeft: '8px' } }, { children: _jsx(EllipseIcon, { style: { color: (_e = (_d = props === null || props === void 0 ? void 0 : props.selectProps) === null || _d === void 0 ? void 0 : _d.value) === null || _e === void 0 ? void 0 : _e.color } }) })) })), children] })));
+};
+var Option = function (_a) {
+    var _b, _c;
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (_jsxs(components.Option, __assign({}, props, { children: [((_b = props === null || props === void 0 ? void 0 : props.data) === null || _b === void 0 ? void 0 : _b.color) && (_jsx("span", __assign({ style: { marginRight: '8px' } }, { children: _jsx(EllipseIcon, { style: { color: (_c = props === null || props === void 0 ? void 0 : props.data) === null || _c === void 0 ? void 0 : _c.color, paddingBottom: '1px' } }) }))), children] })));
+};
+var DropdownIndicator = function (props) { return (_jsx(components.DropdownIndicator, __assign({}, props))); };
+var IndicatorSeparator = function () { return null; };
+var CustomSelectPriority = function (_a) {
     var options = _a.options, defaultValue = _a.defaultValue, placeholder = _a.placeholder, onChange = _a.onChange, _b = _a.width, width = _b === void 0 ? 100 : _b;
     var customStyles = {
         option: function (provided, state) {
@@ -38,23 +50,10 @@ function CustomSelectPriority(_a) {
         },
         control: function (provided) { return (__assign(__assign({}, provided), { width: "".concat(width, "%"), textOverflow: 'ellipsis' })); },
     };
-    var DropdownIndicator = function (props) {
-        return _jsx(components.DropdownIndicator, __assign({}, props));
-    };
-    var Control = function (_a) {
-        var _b, _c, _d, _e;
-        var children = _a.children, props = __rest(_a, ["children"]);
-        return (_jsxs(components.Control, __assign({}, props, { children: [((_c = (_b = props === null || props === void 0 ? void 0 : props.selectProps) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.color) && (_jsx(_Fragment, { children: _jsx("span", __assign({ style: { marginLeft: '8px' } }, { children: _jsx(Ellipse, { color: (_e = (_d = props === null || props === void 0 ? void 0 : props.selectProps) === null || _d === void 0 ? void 0 : _d.value) === null || _e === void 0 ? void 0 : _e.color }) })) })), children] })));
-    };
-    var Option = function (_a) {
-        var _b, _c;
-        var children = _a.children, props = __rest(_a, ["children"]);
-        return (_jsxs(components.Option, __assign({}, props, { children: [((_b = props === null || props === void 0 ? void 0 : props.data) === null || _b === void 0 ? void 0 : _b.color) && (_jsx("span", __assign({ style: { marginRight: '8px' } }, { children: _jsx(Ellipse, { style: { paddingBottom: '1px' }, color: (_c = props === null || props === void 0 ? void 0 : props.data) === null || _c === void 0 ? void 0 : _c.color }) }))), children] })));
-    };
     return (_jsx("div", __assign({ className: "smartapp-custom-select" }, { children: _jsx(Select
         /* @ts-ignore */
         , { 
             /* @ts-ignore */
-            onChange: function (option) { return onChange(option); }, options: options, defaultValue: defaultValue, styles: customStyles, placeholder: _jsx("div", __assign({ className: "smartapp-custom-select__placeholder" }, { children: placeholder })), components: { Option: Option, Control: Control, DropdownIndicator: DropdownIndicator, IndicatorSeparator: function () { return null; } } }) })));
-}
+            onChange: function (option) { return onChange(option); }, options: options, defaultValue: defaultValue, styles: customStyles, placeholder: _jsx("div", __assign({ className: "smartapp-custom-select__placeholder" }, { children: placeholder })), components: { Option: Option, Control: Control, DropdownIndicator: DropdownIndicator, IndicatorSeparator: IndicatorSeparator } }) })));
+};
 export default CustomSelectPriority;

package/build/main//321/201omponents/CustomSelectPriority/types.d.ts

@@ -4,7 +4,7 @@ export type TCustomSelectOptionPriority = {
     value: string;
     color: string;
 };
-export interface ICustomSelectPriority {
+export interface ICustomSelectPriorityProps {
     options: TCustomSelectOptionPriority[];
     onChange: (option: TCustomSelectOptionPriority) => void;
     placeholder: string;

package/build/main//321/201omponents/CustomSelectProfiles/CustomSelectProfiles.d.ts

@@ -1,4 +1,4 @@
-import { ICustomSelectProfiles } from './types';
+import { ICustomSelectProfilesProps } from './types';
 import '../../styles/stories.module.scss';
-declare function CustomSelectPriority({ options, defaultValue, placeholder, onChange, width }: ICustomSelectProfiles): import("react/jsx-runtime").JSX.Element;
+declare const CustomSelectPriority: ({ options, defaultValue, placeholder, onChange, width }: ICustomSelectProfilesProps) => import("react/jsx-runtime").JSX.Element;
 export default CustomSelectPriority;

package/build/main//321/201omponents/CustomSelectProfiles/CustomSelectProfiles.js

@@ -22,9 +22,21 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Select, { components } from 'react-select';
-import '../../styles/stories.module.scss';
 import Avatar from '../Avatar';
-function CustomSelectPriority(_a) {
+import '../../styles/stories.module.scss';
+var Control = function (_a) {
+    var _b, _c, _d;
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (_jsxs(components.Control, __assign({}, props, { children: [((_b = props.selectProps) === null || _b === void 0 ? void 0 : _b.value) && (_jsx("div", __assign({ className: "smartapp-custom-select__control" }, { children: _jsx("span", { children: _jsx(Avatar, { widthHeight: 32, username: (_d = (_c = props === null || props === void 0 ? void 0 : props.selectProps) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.username }) }) }))), children] })));
+};
+var Option = function (_a) {
+    var _b, _c, _d;
+    var props = __rest(_a, []);
+    return (_jsx(components.Option, __assign({}, props, { children: _jsxs("div", __assign({ className: "smartapp-custom-select__option" }, { children: [_jsx("div", __assign({ className: "smartapp-custom-select__option--avatar" }, { children: _jsx(Avatar, { widthHeight: 32, username: (_b = props === null || props === void 0 ? void 0 : props.data) === null || _b === void 0 ? void 0 : _b.username }) })), _jsxs("div", __assign({ className: "smartapp-custom-select__option--info" }, { children: [_jsxs("p", __assign({ className: "smartapp-custom-select__option--info__title" }, { children: [(_c = props === null || props === void 0 ? void 0 : props.data) === null || _c === void 0 ? void 0 : _c.username, " "] })), _jsxs("p", __assign({ className: "smartapp-custom-select__option--info__email" }, { children: [(_d = props === null || props === void 0 ? void 0 : props.data) === null || _d === void 0 ? void 0 : _d.email, " "] }))] }))] })) })));
+};
+var DropdownIndicator = function (props) { return (_jsx(components.DropdownIndicator, __assign({}, props))); };
+var IndicatorSeparator = function () { return null; };
+var CustomSelectPriority = function (_a) {
     var options = _a.options, defaultValue = _a.defaultValue, placeholder = _a.placeholder, onChange = _a.onChange, _b = _a.width, width = _b === void 0 ? 100 : _b;
     var customStyles = {
         option: function (provided, state) { return (__assign(__assign({}, provided), { cursor: 'pointer', color: '#000000', background: state.isSelected ? 'rgba(71, 153, 227, 0.1)' : '#ffffff', display: 'flex', textOverflow: 'ellipsis', width: "".concat(width, "%"), padding: '10px 0', '&:focus': {
@@ -35,23 +47,10 @@ function CustomSelectPriority(_a) {
             } })); },
         control: function (provided) { return (__assign(__assign({}, provided), { width: "".concat(width, "%"), textOverflow: 'ellipsis', padding: '5px 0 5px 5px' })); },
     };
-    var DropdownIndicator = function (props) {
-        return _jsx(components.DropdownIndicator, __assign({}, props));
-    };
-    var Control = function (_a) {
-        var _b, _c, _d;
-        var children = _a.children, props = __rest(_a, ["children"]);
-        return (_jsxs(components.Control, __assign({}, props, { children: [((_b = props.selectProps) === null || _b === void 0 ? void 0 : _b.value) && (_jsx("div", __assign({ className: "smartapp-custom-select__control" }, { children: _jsx("span", { children: _jsx(Avatar, { widthHeight: 32, username: (_d = (_c = props === null || props === void 0 ? void 0 : props.selectProps) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.username }) }) }))), children] })));
-    };
-    var Option = function (_a) {
-        var _b, _c, _d;
-        var props = __rest(_a, []);
-        return (_jsx(components.Option, __assign({}, props, { children: _jsxs("div", __assign({ className: "smartapp-custom-select__option" }, { children: [_jsx("div", __assign({ className: "smartapp-custom-select__option--avatar" }, { children: _jsx(Avatar, { widthHeight: 32, username: (_b = props === null || props === void 0 ? void 0 : props.data) === null || _b === void 0 ? void 0 : _b.username }) })), _jsxs("div", __assign({ className: "smartapp-custom-select__option--info" }, { children: [_jsxs("p", __assign({ className: "smartapp-custom-select__option--info__title" }, { children: [(_c = props === null || props === void 0 ? void 0 : props.data) === null || _c === void 0 ? void 0 : _c.username, " "] })), _jsxs("p", __assign({ className: "smartapp-custom-select__option--info__email" }, { children: [(_d = props === null || props === void 0 ? void 0 : props.data) === null || _d === void 0 ? void 0 : _d.email, " "] }))] }))] })) })));
-    };
     return (_jsx("div", __assign({ className: "smartapp-custom-select" }, { children: _jsx(Select
         /* @ts-ignore */
         , { 
             /* @ts-ignore */
-            onChange: function (option) { return onChange(option); }, options: options, defaultValue: defaultValue, styles: customStyles, getOptionLabel: function (option) { return option.username; }, getOptionValue: function (option) { return option.email; }, placeholder: _jsx("div", __assign({ className: "smartapp-custom-select__placeholder" }, { children: placeholder })), components: { Option: Option, Control: Control, DropdownIndicator: DropdownIndicator, IndicatorSeparator: function () { return null; } } }) })));
-}
+            onChange: function (option) { return onChange(option); }, options: options, defaultValue: defaultValue, styles: customStyles, getOptionLabel: function (option) { return option.username; }, getOptionValue: function (option) { return option.email; }, placeholder: _jsx("div", __assign({ className: "smartapp-custom-select__placeholder" }, { children: placeholder })), components: { Option: Option, Control: Control, DropdownIndicator: DropdownIndicator, IndicatorSeparator: IndicatorSeparator } }) })));
+};
 export default CustomSelectPriority;

package/build/main//321/201omponents/CustomSelectProfiles/types.d.ts

@@ -1,12 +1,13 @@
 import { IntRange } from '../types';
-export type TCustomSelectOptionProfiles = {
+type TCustomSelectOptionProfiles = {
     username: string;
     email: string;
 };
-export interface ICustomSelectProfiles {
+export interface ICustomSelectProfilesProps {
     options: TCustomSelectOptionProfiles[];
     onChange: (option: TCustomSelectOptionProfiles) => void;
     placeholder?: string;
     defaultValue?: TCustomSelectOptionProfiles;
     width?: IntRange<1, 101>;
 }
+export {};

package/build/main//321/201omponents/DragAndDrop/DragAndDrop.d.ts

@@ -1,4 +1,4 @@
-import { IDragAndDrop } from './types';
+import { IDragAndDropProps } from './types';
 import '../../styles/stories.module.scss';
-declare function DragAndDrop({ options, onDragEndFunction, onChangeIsCompletedOption, onChangeOption, onClickDeleteOption, placeholder, width, }: IDragAndDrop): import("react/jsx-runtime").JSX.Element;
+declare const DragAndDrop: ({ placeholder, options, onDragEndFunction, onChangeIsCompletedOption, onChangeOption, onClickDeleteOption, width, checkboxColor, orderColor, deleteColor, }: IDragAndDropProps) => import("react/jsx-runtime").JSX.Element;
 export default DragAndDrop;