@expressms/smartapp-ui 1.1.6 → 1.1.8

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

@@ -1,11 +1,11 @@
 import { IntRange } from '../types';
-export interface IActionModalProps {
+import { ICommonProps } from '../../constants';
+export interface IActionModalProps extends ICommonProps {
     isModalOpen: boolean;
     title: string;
     buttonName: string;
     confirmButtonFunction: (str: string) => void;
     cancelButtonFunction: () => void;
-    platform?: 'web' | 'ios' | 'android';
     placeholder?: string;
     defaultValue?: string;
     isButtonDisabled?: boolean;

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

@@ -15,13 +15,13 @@ 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 { getColor } from '../../helpers';
-import { DEFAULT_BLUE_ICON_COLOR, DEFAULT_GRAY_ICON_COLOR } from '../../constants';
+import { COLORS } 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: getColor(fileColor, DEFAULT_GRAY_ICON_COLOR) } }) })), _jsxs("div", __assign({ className: classNames({
+    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: getColor(fileColor, COLORS.gray) } }) })), _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: getColor(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: getColor(downloadColor, DEFAULT_BLUE_ICON_COLOR) } }) })))] }))] }))] }), weight));
+                }) }, { 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: getColor(removeColor, COLORS.blue) } }) }))), onClickDownloadFile && isDownloadFile && (_jsx("div", __assign({ onClick: function () { return onClickDownloadFile(fileName); }, className: "smartapp-attached-file__value--icons__download" }, { children: _jsx(DownloadIcon, { style: { color: getColor(downloadColor, COLORS.blue) } }) })))] }))] }))] }), weight));
 };
 export default AttachedFile;

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: ({ title, isDisabled, typeButton, color, width, onClickFunction }: IButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const Button: ({ title, isDisabled, typeButton, color, width, theme, onClickFunction }: IButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default Button;

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

@@ -12,9 +12,10 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { TButtonType, TButtonColor } from './types';
+import { THEME } from '../../constants';
 import '../../styles/stories.module.scss';
 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 })));
+    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.theme, theme = _f === void 0 ? THEME.default : _f, _g = _a.onClickFunction, onClickFunction = _g === void 0 ? function () { return undefined; } : _g;
+    return (_jsx("button", __assign({ className: classNames("smartapp-button__".concat(typeButton), "smartapp-button__color--".concat(color), "smartapp-button__".concat(theme, "--").concat(color), 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,4 +1,5 @@
 import { IntRange } from '../types';
+import { IThemeProps } from '../../constants';
 export declare enum TButtonType {
     standard = "standard",
     low = "low"
@@ -8,7 +9,7 @@ export declare enum TButtonColor {
     blue = "blue",
     red = "red"
 }
-export interface IButtonProps {
+export interface IButtonProps extends IThemeProps {
     title: string;
     isDisabled?: boolean;
     typeButton?: 'standard' | 'low';

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

@@ -13,13 +13,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from 'react';
 import { ReactComponent as CheckIcon } from '../../assets/icons/check-mark.svg';
 import { getColor } from '../../helpers';
-import { DEFAULT_BLUE_ICON_COLOR, DEFAULT_BLUE_ICON_HOVER_COLOR } from '../../constants';
+import { COLORS } from '../../constants';
 import '../../styles/stories.module.scss';
 var CheckBox = function (_a) {
     var id = _a.id, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, _c = _a.isChecked, isChecked = _c === void 0 ? false : _c, checkedColor = _a.checkedColor, checkedHoverColor = _a.checkedHoverColor, _d = _a.onChange, onChange = _d === void 0 ? function () { return undefined; } : _d;
     useEffect(function () {
-        document.documentElement.style.setProperty('--checkbox-hover-color', getColor(checkedHoverColor, DEFAULT_BLUE_ICON_HOVER_COLOR));
+        document.documentElement.style.setProperty('--checkbox-hover-color', getColor(checkedHoverColor, COLORS.darkBlue));
     }, [checkedHoverColor]);
-    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: isDisabled, checked: isChecked, onChange: onChange }), isChecked ? _jsx(CheckIcon, { style: { color: getColor(checkedColor, DEFAULT_BLUE_ICON_COLOR) } }) : _jsx("span", { className: "checkmark" })] })) })));
+    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: isDisabled, checked: isChecked, onChange: onChange }), isChecked ? _jsx(CheckIcon, { style: { color: getColor(checkedColor, COLORS.blue) } }) : _jsx("span", { className: "checkmark" })] })) })));
 };
 export default CheckBox;

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

@@ -13,10 +13,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ReactComponent as CancelIcon } from '../../assets/icons/cancel-cross.svg';
 import Avatar from '../Avatar';
 import { getColor } from '../../helpers';
-import { DEFAULT_GRAY_ICON_COLOR } from '../../constants';
+import { COLORS } 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, size: 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: getColor(iconColor, DEFAULT_GRAY_ICON_COLOR) } }) }))] })));
+    return (_jsxs("div", __assign({ className: "smartapp-chips" }, { children: [_jsxs("div", __assign({ className: "smartapp-chips__info" }, { children: [_jsx(Avatar, { username: name, size: 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: getColor(iconColor, COLORS.gray) } }) }))] })));
 };
 export default Chips;

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

@@ -14,14 +14,14 @@ import { useEffect, useRef } from 'react';
 import Popup from 'reactjs-popup';
 import Button from '../Button';
 import { TButtonColor, TButtonType } from '../Button/types';
-import { DEFAULT_POPUP_BACKGROUND_COLOR, PLATFORM } from '../../constants';
+import { COLORS, PLATFORM } from '../../constants';
 import { getClassNames, getColor, isMobilePlatform } from '../../helpers';
 import '../../styles/stories.module.scss';
 var ConfirmationModal = function (_a) {
     var isModalOpen = _a.isModalOpen, title = _a.title, text = _a.text, cancelButtonName = _a.cancelButtonName, confirmButtonName = _a.confirmButtonName, cancelButtonFunction = _a.cancelButtonFunction, confirmButtonFunction = _a.confirmButtonFunction, _b = _a.platform, platform = _b === void 0 ? PLATFORM.web : _b, backgroundColor = _a.backgroundColor;
     var ref = useRef(null);
     useEffect(function () {
-        document.documentElement.style.setProperty('--confirmation-modal-background', getColor(backgroundColor, DEFAULT_POPUP_BACKGROUND_COLOR));
+        document.documentElement.style.setProperty('--confirmation-modal-background', getColor(backgroundColor, COLORS.lightBlue));
     }, [backgroundColor]);
     useEffect(function () {
         var checkIfClickedOutside = function (e) {
@@ -29,9 +29,9 @@ var ConfirmationModal = function (_a) {
                 cancelButtonFunction();
             }
         };
-        document === null || document === void 0 ? void 0 : document.addEventListener('click', checkIfClickedOutside, true);
+        document === null || document === void 0 ? void 0 : document.addEventListener('mousedown', checkIfClickedOutside, true);
         return function () {
-            document === null || document === void 0 ? void 0 : document.removeEventListener('click', checkIfClickedOutside, true);
+            document === null || document === void 0 ? void 0 : document.removeEventListener('mousedown', checkIfClickedOutside, true);
         };
     }, [isModalOpen, cancelButtonFunction]);
     return (_jsx(Popup, __assign({ className: getClassNames('confirmation-modal', '-', platform), closeOnDocumentClick: true, modal: true, open: isModalOpen }, { children: _jsx("div", __assign({ ref: ref, className: getClassNames('smartapp-confirmation-modal', '__', platform) }, { children: _jsxs("div", __assign({ className: getClassNames('smartapp-confirmation-modal__content', '--', platform) }, { children: [title && _jsx("p", __assign({ className: "smartapp-confirmation-modal__content--title" }, { children: title })), _jsx("p", __assign({ className: "smartapp-confirmation-modal__content--text" }, { children: text })), isMobilePlatform(platform) && _jsx("div", { className: "smartapp-confirmation-modal__content--delimiter" }), _jsxs("div", __assign({ className: "smartapp-confirmation-modal__content--buttons" }, { children: [_jsx(Button, { width: 50, title: cancelButtonName, typeButton: TButtonType.standard, onClickFunction: cancelButtonFunction, color: TButtonColor.white }), _jsx(Button, { width: 50, title: confirmButtonName, typeButton: TButtonType.standard, onClickFunction: confirmButtonFunction, color: TButtonColor.blue })] }))] })) })) })));

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

@@ -1,4 +1,5 @@
-export interface IConfirmationModalProps {
+import { IPlatformProps } from '../../constants';
+export interface IConfirmationModalProps extends IPlatformProps {
     isModalOpen: boolean;
     title?: string;
     text: string;
@@ -6,6 +7,5 @@ export interface IConfirmationModalProps {
     confirmButtonName: string;
     cancelButtonFunction: () => void;
     confirmButtonFunction: (option?: any) => void;
-    platform?: 'web' | 'ios' | 'android';
     backgroundColor?: string;
 }

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

@@ -16,7 +16,7 @@ import { ReactComponent as OrderIcon } from '../../assets/icons/order.svg';
 import { ReactComponent as DeleteIcon } from '../../assets/icons/close.svg';
 import CheckBox from '../Checkbox';
 import { getColor } from '../../helpers';
-import { DEFAULT_BLUE_ICON_COLOR, DEFAULT_GRAY_ICON_COLOR } from '../../constants';
+import { COLORS } from '../../constants';
 import '../../styles/stories.module.scss';
 var DragAndDrop = function (_a) {
     var placeholder = _a.placeholder, options = _a.options, onDragEndFunction = _a.onDragEndFunction, onChangeIsCompletedOption = _a.onChangeIsCompletedOption, onChangeOption = _a.onChangeOption, onClickDeleteOption = _a.onClickDeleteOption, width = _a.width, checkboxColor = _a.checkboxColor, orderColor = _a.orderColor, deleteColor = _a.deleteColor;
@@ -50,6 +50,6 @@ var DragAndDrop = function (_a) {
         var newOptions = reorderOptions(options, result.source.index, result.destination.index);
         onDragEndFunction(newOptions);
     };
-    return (_jsx("div", __assign({ style: { width: "".concat(width, "%") }, className: "smartapp-drag-drop" }, { children: _jsx(DragDropContext, __assign({ onDragStart: onDragStart, onDragEnd: onDragEnd }, { children: _jsx(Droppable, __assign({ droppableId: "droppable" }, { children: function (provided) { return (_jsx("div", __assign({}, provided.droppableProps, { ref: provided.innerRef, className: "smartapp-drag-drop__container" }, { children: options === null || options === void 0 ? void 0 : options.map(function (instanceOption, index) { return (_jsx(Draggable, __assign({ draggableId: instanceOption.id, index: index }, { children: function (provided) { return (_jsxs("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { className: "smartapp-drag-drop__container--instance" }, { children: [_jsxs("div", __assign({ className: "smartapp-drag-drop__container--instance__info" }, { children: [isCheckbox(instanceOption) && onChangeIsCompletedOption && (_jsx(CheckBox, { id: instanceOption.id, isChecked: instanceOption.isCompleted, checkedColor: checkboxColor, onChange: function () { return onChangeIsCompletedOption(instanceOption); } })), onChangeOption ? (_jsx("input", { onChange: function (e) { return onChangeOption && onChangeOption(e, instanceOption); }, defaultValue: instanceOption.defaultValue, className: "smartapp-drag-drop__container--instance__info--name", type: "text", enterKeyHint: "enter", placeholder: placeholder }, instanceOption === null || instanceOption === void 0 ? void 0 : instanceOption.id)) : (_jsx("p", __assign({ className: "smartapp-drag-drop__container--instance__info--name" }, { children: instanceOption.defaultValue })))] })), _jsxs("div", __assign({ className: "smartapp-drag-drop__container--instance__icons" }, { children: [_jsx(OrderIcon, { style: { color: getColor(orderColor, DEFAULT_GRAY_ICON_COLOR) } }), onClickDeleteOption && _jsx(DeleteIcon, { className: "cp", style: { color: getColor(deleteColor, DEFAULT_BLUE_ICON_COLOR) }, onClick: function () { return onClickDeleteOption(instanceOption); } })] }))] }))); } }), instanceOption.id)); }) }))); } })) })) })));
+    return (_jsx("div", __assign({ style: { width: "".concat(width, "%") }, className: "smartapp-drag-drop" }, { children: _jsx(DragDropContext, __assign({ onDragStart: onDragStart, onDragEnd: onDragEnd }, { children: _jsx(Droppable, __assign({ droppableId: "droppable" }, { children: function (provided) { return (_jsx("div", __assign({}, provided.droppableProps, { ref: provided.innerRef, className: "smartapp-drag-drop__container" }, { children: options === null || options === void 0 ? void 0 : options.map(function (instanceOption, index) { return (_jsx(Draggable, __assign({ draggableId: instanceOption.id, index: index }, { children: function (provided) { return (_jsxs("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { className: "smartapp-drag-drop__container--instance" }, { children: [_jsxs("div", __assign({ className: "smartapp-drag-drop__container--instance__info" }, { children: [isCheckbox(instanceOption) && onChangeIsCompletedOption && (_jsx(CheckBox, { id: instanceOption.id, isChecked: instanceOption.isCompleted, checkedColor: checkboxColor, onChange: function () { return onChangeIsCompletedOption(instanceOption); } })), onChangeOption ? (_jsx("input", { onChange: function (e) { return onChangeOption && onChangeOption(e, instanceOption); }, defaultValue: instanceOption.defaultValue, className: "smartapp-drag-drop__container--instance__info--name", type: "text", enterKeyHint: "enter", placeholder: placeholder }, instanceOption === null || instanceOption === void 0 ? void 0 : instanceOption.id)) : (_jsx("p", __assign({ className: "smartapp-drag-drop__container--instance__info--name" }, { children: instanceOption.defaultValue })))] })), _jsxs("div", __assign({ className: "smartapp-drag-drop__container--instance__icons" }, { children: [_jsx(OrderIcon, { style: { color: getColor(orderColor, COLORS.gray) } }), onClickDeleteOption && _jsx(DeleteIcon, { className: "cp", style: { color: getColor(deleteColor, COLORS.blue) }, onClick: function () { return onClickDeleteOption(instanceOption); } })] }))] }))); } }), instanceOption.id)); }) }))); } })) })) })));
 };
 export default DragAndDrop;

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

@@ -12,10 +12,10 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ReactComponent as ErrorIcon } from '../../assets/icons/error.svg';
 import { getColor } from '../../helpers';
-import { DEFAULT_GRAY_ICON_COLOR } from '../../constants';
+import { COLORS } from '../../constants';
 import '../../styles/stories.module.scss';
 var Error = function (_a) {
     var _b = _a.title, title = _b === void 0 ? 'Ошибка' : _b, _c = _a.text, text = _c === void 0 ? 'Попробуйте еще раз' : _c, _d = _a.width, width = _d === void 0 ? 100 : _d, iconColor = _a.iconColor;
-    return (_jsxs("div", __assign({ className: "smartapp-error", style: { width: "".concat(width, "%") } }, { children: [_jsx("div", __assign({ className: "smartapp-error__icon" }, { children: _jsx(ErrorIcon, { style: { color: getColor(iconColor, DEFAULT_GRAY_ICON_COLOR) } }) })), _jsx("p", __assign({ className: "smartapp-error__title" }, { children: title })), _jsx("p", __assign({ className: "smartapp-error__text" }, { children: text }))] })));
+    return (_jsxs("div", __assign({ className: "smartapp-error", style: { width: "".concat(width, "%") } }, { children: [_jsx("div", __assign({ className: "smartapp-error__icon" }, { children: _jsx(ErrorIcon, { style: { color: getColor(iconColor, COLORS.gray) } }) })), _jsx("p", __assign({ className: "smartapp-error__title" }, { children: title })), _jsx("p", __assign({ className: "smartapp-error__text" }, { children: text }))] })));
 };
 export default Error;

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

@@ -15,7 +15,7 @@ import { ReactComponent as ArrowBackIcon } from '../../assets/icons/arrow-back.s
 import { ReactComponent as TrashIcon } from '../../assets/icons/trash.svg';
 import { ReactComponent as RefreshIcon } from '../../assets/icons/refresh.svg';
 import { getColor } from '../../helpers';
-import { DEFAULT_BLACK_ICON_COLOR, DEFAULT_HEADER_BACKGROUND_COLOR, DEFAULT_HEADER_TEXT_COLOR, DEFAULT_RED_ICON_COLOR, FONT_SIZE, LINE_HEIGHT, PLATFORM, } from '../../constants';
+import { COLORS, FONT_SIZE, LINE_HEIGHT, PLATFORM } from '../../constants';
 import '../../styles/stories.module.scss';
 var Header = function (_a) {
     var _b;
@@ -24,13 +24,13 @@ var Header = function (_a) {
         height: headerHeight && "".concat(headerHeight - 29, "px"),
         fontSize: FONT_SIZE[textSize],
         lineHeight: LINE_HEIGHT[textSize],
-        color: getColor(textColor, DEFAULT_HEADER_TEXT_COLOR),
-        background: getColor(backgroundColor, DEFAULT_HEADER_BACKGROUND_COLOR),
+        color: getColor(textColor, COLORS.black),
+        background: getColor(backgroundColor, COLORS.white),
     }); };
     var renderRefreshIcon = function (_a) {
-        var isEnabled = _a.isEnabled, onClick = _a.onClick;
-        return (_jsx(RefreshIcon, { className: classNames({ 'smartapp-header__icons--refresh': isEnabled }), onClick: !isEnabled ? onClick : function () { } }));
+        var isEnabled = _a.isEnabled, color = _a.color, onClick = _a.onClick;
+        return (_jsx(RefreshIcon, { className: classNames({ 'smartapp-header__icons--refresh': isEnabled }), style: { color: getColor(color, COLORS.gray) }, onClick: !isEnabled ? onClick : function () { } }));
     };
-    return (_jsxs("div", __assign({ className: classNames((_b = { 'smartapp-header': true }, _b["smartapp-header__".concat(platform)] = true, _b)), style: getHeaderStyles() }, { children: [_jsxs("div", __assign({ className: "smartapp-header__info" }, { children: [isBack && (_jsx(ArrowBackIcon, { style: { color: getColor(arrowColor, DEFAULT_BLACK_ICON_COLOR) }, onClick: onClickBack, className: "smartapp-header__info--arrow-back" })), title && _jsx("p", __assign({ className: "smartapp-header__info--title" }, { children: title }))] })), _jsxs("div", __assign({ className: "smartapp-header__icons" }, { children: [isRemove && (_jsx("div", __assign({ onClick: onClickRemove, className: "smartapp-header__icons--trash" }, { children: _jsx(TrashIcon, { style: { color: getColor(trashColor, DEFAULT_RED_ICON_COLOR) } }) }))), refreshIcon && renderRefreshIcon(refreshIcon), customIcon] }))] })));
+    return (_jsxs("div", __assign({ className: classNames((_b = { 'smartapp-header': true }, _b["smartapp-header__".concat(platform)] = true, _b)), style: getHeaderStyles() }, { children: [_jsxs("div", __assign({ className: "smartapp-header__info" }, { children: [isBack && (_jsx(ArrowBackIcon, { style: { color: getColor(arrowColor, COLORS.black) }, onClick: onClickBack, className: "smartapp-header__info--arrow-back" })), title && _jsx("p", __assign({ className: "smartapp-header__info--title" }, { children: title }))] })), _jsxs("div", __assign({ className: "smartapp-header__icons" }, { children: [isRemove && (_jsx("div", __assign({ onClick: onClickRemove, className: "smartapp-header__icons--trash" }, { children: _jsx(TrashIcon, { style: { color: getColor(trashColor, COLORS.red) } }) }))), refreshIcon && renderRefreshIcon(refreshIcon), customIcon] }))] })));
 };
 export default Header;

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

@@ -1,9 +1,11 @@
 import { ReactElement } from 'react';
+import { IPlatformProps } from '../../constants';
 export type TRefreshIcon = {
     isEnabled: boolean;
+    color?: string;
     onClick: () => void;
 };
-export interface IHeaderProps {
+export interface IHeaderProps extends IPlatformProps {
     title?: string;
     isBack?: boolean;
     isRemove?: boolean;
@@ -13,7 +15,6 @@ export interface IHeaderProps {
     onClickRemove?: () => void;
     arrowColor?: string;
     trashColor?: string;
-    platform?: 'web' | 'ios' | 'android';
     headerHeight?: number;
     textSize?: 'small' | 'default' | 'large';
     textColor?: string;

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

@@ -1,4 +1,4 @@
 import { IInputProps } from './types';
 import '../../styles/stories.module.scss';
-declare const Input: ({ isPassword, isClearable, autoFocus, title, placeholder, defaultValue, error, textSize, width, className, onChange, onEnterPress, onClearClick, }: IInputProps) => import("react/jsx-runtime").JSX.Element;
+declare const Input: ({ isPassword, isClearable, autoFocus, title, placeholder, defaultValue, error, textSize, width, className, theme, onChange, onEnterPress, onClearClick, }: IInputProps) => import("react/jsx-runtime").JSX.Element;
 export default Input;

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

@@ -15,13 +15,13 @@ import classNames from 'classnames';
 import { ReactComponent as IconEye } from '../../assets/icons/icon-eye.svg';
 import { ReactComponent as IconEyeClosed } from '../../assets/icons/icon-eye-off.svg';
 import { ReactComponent as ClearIcon } from '../../assets/icons/clear.svg';
-import { ENTER_KEY, FONT_SIZE, INPUT_TYPE_PASSWORD, INPUT_TYPE_TEXT, LINE_HEIGHT } from '../../constants';
+import { ENTER_KEY, FONT_SIZE, INPUT_TYPE_PASSWORD, INPUT_TYPE_TEXT, LINE_HEIGHT, THEME } from '../../constants';
 import '../../styles/stories.module.scss';
 var Input = function (_a) {
     var _b;
-    var _c = _a.isPassword, isPassword = _c === void 0 ? false : _c, _d = _a.isClearable, isClearable = _d === void 0 ? false : _d, _e = _a.autoFocus, autoFocus = _e === void 0 ? false : _e, title = _a.title, placeholder = _a.placeholder, defaultValue = _a.defaultValue, error = _a.error, _f = _a.textSize, textSize = _f === void 0 ? 'small' : _f, _g = _a.width, width = _g === void 0 ? 100 : _g, _h = _a.className, className = _h === void 0 ? '' : _h, onChange = _a.onChange, onEnterPress = _a.onEnterPress, onClearClick = _a.onClearClick;
+    var _c = _a.isPassword, isPassword = _c === void 0 ? false : _c, _d = _a.isClearable, isClearable = _d === void 0 ? false : _d, _e = _a.autoFocus, autoFocus = _e === void 0 ? false : _e, title = _a.title, placeholder = _a.placeholder, defaultValue = _a.defaultValue, error = _a.error, _f = _a.textSize, textSize = _f === void 0 ? 'small' : _f, _g = _a.width, width = _g === void 0 ? 100 : _g, _h = _a.className, className = _h === void 0 ? '' : _h, _j = _a.theme, theme = _j === void 0 ? THEME.default : _j, onChange = _a.onChange, onEnterPress = _a.onEnterPress, onClearClick = _a.onClearClick;
     var inputRef = useRef(null);
-    var _j = useState(false), isPasswordShown = _j[0], setIsPasswordShown = _j[1];
+    var _k = useState(false), isPasswordShown = _k[0], setIsPasswordShown = _k[1];
     useEffect(function () {
         var inputElement = inputRef.current;
         if (inputElement && inputElement.value.length) {
@@ -52,6 +52,6 @@ var Input = function (_a) {
         setIsPasswordShown(!isPasswordShown);
         !((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value.length) && ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.focus());
     };
-    return (_jsxs("div", __assign({ style: { width: "".concat(width, "%") }, className: classNames((_b = { 'smartapp-input': true }, _b[className] = className, _b)) }, { children: [title && _jsx("p", __assign({ className: "smartapp-input__title" }, { children: title })), _jsxs("div", __assign({ className: "smartapp-input__container" }, { children: [_jsx("input", { ref: inputRef, className: classNames('smartapp-input__container--field', { 'smartapp-input__container--field__with-clear-button': isClearable }), style: getTextStyles(), type: getInputType(), defaultValue: defaultValue, autoFocus: autoFocus, placeholder: placeholder, onKeyDown: handleKeyDown, onChange: function (e) { return onChange(e.target.value); } }), isPassword && (_jsx("button", __assign({ className: "smartapp-input__container--eye-button", type: "button", onClick: function () { return onClickButton(); } }, { children: isPasswordShown ? _jsx(IconEye, {}) : _jsx(IconEyeClosed, {}) }))), isClearable && _jsx(ClearIcon, { className: "smartapp-input__container--clear-icon", onClick: onClearClick })] })), error && _jsx("div", __assign({ className: "smartapp-input__error" }, { children: error }))] })));
+    return (_jsxs("div", __assign({ style: { width: "".concat(width, "%") }, className: classNames('smartapp-input', "smartapp-input__".concat(theme), (_b = {}, _b[className] = className, _b)) }, { children: [title && _jsx("p", __assign({ className: "smartapp-input__title" }, { children: title })), _jsxs("div", __assign({ className: "smartapp-input__container" }, { children: [_jsx("input", { ref: inputRef, className: classNames('smartapp-input__container--field', { 'smartapp-input__container--field__with-clear-button': isClearable }), style: getTextStyles(), type: getInputType(), defaultValue: defaultValue, autoFocus: autoFocus, placeholder: placeholder, onKeyDown: handleKeyDown, onChange: function (e) { return onChange(e.target.value); } }), isPassword && (_jsx("button", __assign({ className: "smartapp-input__container--eye-button", type: "button", onClick: function () { return onClickButton(); } }, { children: isPasswordShown ? _jsx(IconEye, {}) : _jsx(IconEyeClosed, {}) }))), isClearable && _jsx(ClearIcon, { className: "smartapp-input__container--clear-icon", onClick: onClearClick })] })), error && _jsx("div", __assign({ className: "smartapp-input__error" }, { children: error }))] })));
 };
 export default Input;

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

@@ -1,5 +1,6 @@
 import { IntRange } from '../types';
-export interface IInputProps {
+import { IThemeProps } from '../../constants';
+export interface IInputProps extends IThemeProps {
     isPassword?: boolean;
     isClearable?: boolean;
     autoFocus?: boolean;

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

@@ -1,4 +1,4 @@
 import { ILoaderProps } from './types';
 import '../../styles/stories.module.scss';
-declare const Loader: ({ isLoader, isFullScreen, isTextItalic, title, textSize, width, iconSize, backgroundColor, }: ILoaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const Loader: ({ isLoader, isFullScreen, isTextItalic, title, textSize, width, iconSize, backgroundColor, theme, }: ILoaderProps) => import("react/jsx-runtime").JSX.Element;
 export default Loader;

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

@@ -12,23 +12,26 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ColorRing } from 'react-loader-spinner';
 import classNames from 'classnames';
-import { DEFAULT_GRAY_LOADER_BACKGROUND_COLOR, DEFAULT_WHITE_LOADER_BACKGROUND_COLOR, FONT_SIZE, LINE_HEIGHT, } from '../../constants';
-import { getColor } from '../../helpers';
+import { COLORS, FONT_SIZE, LINE_HEIGHT, THEME } from '../../constants';
+import { getClassNames, getColor } from '../../helpers';
 import '../../styles/stories.module.scss';
 var Loader = function (_a) {
-    var _b = _a.isLoader, isLoader = _b === void 0 ? false : _b, _c = _a.isFullScreen, isFullScreen = _c === void 0 ? true : _c, _d = _a.isTextItalic, isTextItalic = _d === void 0 ? false : _d, title = _a.title, _e = _a.textSize, textSize = _e === void 0 ? 'small' : _e, _f = _a.width, width = _f === void 0 ? 150 : _f, _g = _a.iconSize, iconSize = _g === void 0 ? 32 : _g, backgroundColor = _a.backgroundColor;
+    var _b = _a.isLoader, isLoader = _b === void 0 ? false : _b, _c = _a.isFullScreen, isFullScreen = _c === void 0 ? true : _c, _d = _a.isTextItalic, isTextItalic = _d === void 0 ? false : _d, title = _a.title, _e = _a.textSize, textSize = _e === void 0 ? 'small' : _e, _f = _a.width, width = _f === void 0 ? 150 : _f, _g = _a.iconSize, iconSize = _g === void 0 ? 32 : _g, backgroundColor = _a.backgroundColor, _h = _a.theme, theme = _h === void 0 ? THEME.default : _h;
+    var isDarkTheme = theme === THEME.dark;
     var getTextStyles = function () { return ({
         fontSize: FONT_SIZE[textSize],
         fontStyle: isTextItalic ? 'italic' : 'normal',
         lineHeight: LINE_HEIGHT[textSize],
     }); };
     var getBackgroundColor = function () {
-        var defaultColor = isFullScreen ? DEFAULT_GRAY_LOADER_BACKGROUND_COLOR : DEFAULT_WHITE_LOADER_BACKGROUND_COLOR;
+        var defaultColor = isDarkTheme
+            ? COLORS.white3
+            : (isFullScreen ? COLORS.lightGray : COLORS.white);
         return getColor(backgroundColor, defaultColor);
     };
     return (_jsx("div", __assign({ className: classNames({
             'smartapp-loader-wrapper': true,
             'smartapp-loader-wrapper__full-screen': isFullScreen,
-        }), style: { background: getBackgroundColor() } }, { children: _jsxs("div", __assign({ className: "smartapp-loader", style: { width: "".concat(width, "px") } }, { children: [_jsx(ColorRing, { visible: isLoader, height: iconSize, width: iconSize, ariaLabel: "blocks-loading", wrapperStyle: {}, wrapperClass: "blocks-wrapper", colors: ['#4799E3', '#4799E3', '#4799E3', '#4799E3', '#4799E3'] }), title && _jsx("p", __assign({ className: "smartapp-loader__title", style: getTextStyles() }, { children: title }))] })) })));
+        }), style: { background: getBackgroundColor() } }, { children: _jsxs("div", __assign({ className: "smartapp-loader", style: { width: "".concat(width, "px") } }, { children: [_jsx(ColorRing, { visible: isLoader, height: iconSize, width: iconSize, ariaLabel: "blocks-loading", wrapperStyle: {}, wrapperClass: "blocks-wrapper", colors: ['#4799E3', '#4799E3', '#4799E3', '#4799E3', '#4799E3'] }), title && _jsx("p", __assign({ className: getClassNames('smartapp-loader__title', '--', theme), style: getTextStyles() }, { children: title }))] })) })));
 };
 export default Loader;

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

@@ -1,4 +1,5 @@
-export interface ILoaderProps {
+import { IThemeProps } from '../../constants';
+export interface ILoaderProps extends IThemeProps {
     isLoader: boolean;
     isFullScreen?: boolean;
     isTextItalic?: boolean;

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

@@ -1,4 +1,4 @@
 import { IModalProps } from './types';
 import '../../styles/stories.module.scss';
-declare const Modal: ({ isModalOpen, content, handleCloseModal, title, platform, iconColor, backgroundColor }: IModalProps) => import("react/jsx-runtime").JSX.Element;
+declare const Modal: ({ isModalOpen, content, handleCloseModal, title, theme, platform, iconColor, backgroundColor, }: IModalProps) => import("react/jsx-runtime").JSX.Element;
 export default Modal;

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

@@ -13,14 +13,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
 import Popup from 'reactjs-popup';
 import { ReactComponent as CloseIcon } from '../../assets/icons/cancel-cross.svg';
-import { DEFAULT_GRAY_ICON_COLOR, DEFAULT_POPUP_BACKGROUND_COLOR, PLATFORM } from '../../constants';
-import { getClassNames, getColor } from '../../helpers';
+import { COLORS, PLATFORM, THEME } from '../../constants';
+import { getClassNames, getColor, getDefaultColorForCloseIcon } from '../../helpers';
 import '../../styles/stories.module.scss';
 var Modal = function (_a) {
-    var isModalOpen = _a.isModalOpen, content = _a.content, handleCloseModal = _a.handleCloseModal, title = _a.title, _b = _a.platform, platform = _b === void 0 ? PLATFORM.web : _b, iconColor = _a.iconColor, backgroundColor = _a.backgroundColor;
+    var isModalOpen = _a.isModalOpen, content = _a.content, handleCloseModal = _a.handleCloseModal, title = _a.title, _b = _a.theme, theme = _b === void 0 ? THEME.default : _b, _c = _a.platform, platform = _c === void 0 ? PLATFORM.web : _c, iconColor = _a.iconColor, backgroundColor = _a.backgroundColor;
     var ref = useRef(null);
     useEffect(function () {
-        document.documentElement.style.setProperty('--modal-background', getColor(backgroundColor, DEFAULT_POPUP_BACKGROUND_COLOR));
+        document.documentElement.style.setProperty('--modal-background', getColor(backgroundColor, COLORS.lightBlue));
     }, [backgroundColor]);
     useEffect(function () {
         var checkIfClickedOutside = function (e) {
@@ -28,11 +28,11 @@ var Modal = function (_a) {
                 handleCloseModal();
             }
         };
-        document === null || document === void 0 ? void 0 : document.addEventListener('click', checkIfClickedOutside, true);
+        document === null || document === void 0 ? void 0 : document.addEventListener('mousedown', checkIfClickedOutside, true);
         return function () {
-            document === null || document === void 0 ? void 0 : document.removeEventListener('click', checkIfClickedOutside, true);
+            document === null || document === void 0 ? void 0 : document.removeEventListener('mousedown', checkIfClickedOutside, true);
         };
     }, [isModalOpen, handleCloseModal]);
-    return (_jsx(Popup, __assign({ className: getClassNames('modal', '-', platform), closeOnDocumentClick: true, modal: true, open: isModalOpen }, { children: _jsx("div", __assign({ ref: ref, className: getClassNames('smartapp-modal', '__', platform) }, { children: _jsxs("div", __assign({ className: getClassNames('smartapp-modal__content', '--', platform) }, { children: [title && _jsx("p", __assign({ className: "smartapp-modal__content--title" }, { children: title })), _jsx("div", __assign({ onClick: handleCloseModal, className: "smartapp-modal__content--close-icon" }, { children: _jsx(CloseIcon, { style: { color: getColor(iconColor, DEFAULT_GRAY_ICON_COLOR) } }) })), content] })) })) })));
+    return (_jsx(Popup, __assign({ className: getClassNames('modal', '-', platform), closeOnDocumentClick: true, modal: true, open: isModalOpen }, { children: _jsx("div", __assign({ ref: ref, className: getClassNames('smartapp-modal', '__', [theme, platform]) }, { children: _jsxs("div", __assign({ className: getClassNames('smartapp-modal__content', '--', platform) }, { children: [title && _jsx("p", __assign({ className: "smartapp-modal__content--title" }, { children: title })), _jsx("div", __assign({ onClick: handleCloseModal, className: "smartapp-modal__content--close-icon" }, { children: _jsx(CloseIcon, { style: { color: getColor(iconColor, getDefaultColorForCloseIcon(theme)) } }) })), content] })) })) })));
 };
 export default Modal;

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

@@ -1,10 +1,10 @@
 import { ReactElement } from 'react';
-export interface IModalProps {
+import { ICommonProps } from '../../constants';
+export interface IModalProps extends ICommonProps {
     isModalOpen: boolean;
     content: ReactElement;
     handleCloseModal: () => void;
     title?: string;
-    platform?: 'web' | 'ios' | 'android';
     iconColor?: string;
     backgroundColor?: string;
 }

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

@@ -1,10 +1,10 @@
 import { ReactElement } from 'react';
-export interface INotificationProps {
+import { IPlatformProps } from '../../constants';
+export interface INotificationProps extends IPlatformProps {
     isShown: boolean;
     type?: 'success' | 'info' | 'warning' | 'error';
     isAutoHidden?: boolean;
     hideDuration?: number;
-    platform?: 'web' | 'ios' | 'android';
     message: string | ReactElement;
     action?: {
         text?: string;

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

@@ -14,7 +14,7 @@ import { useEffect, useRef } from 'react';
 import { ReactComponent as LogoutIcon } from '../../assets/icons/logout.svg';
 import { ReactComponent as AddProfileIcon } from '../../assets/icons/plus.svg';
 import { getColor } from '../../helpers';
-import { DEFAULT_BLUE_ICON_COLOR, DEFAULT_BLUE_LIGHT_ICON_COLOR } from '../../constants';
+import { COLORS } from '../../constants';
 import '../../styles/stories.module.scss';
 var Profile = function (_a) {
     var _b, _c, _d;
@@ -33,9 +33,9 @@ var Profile = function (_a) {
             document.removeEventListener('mousedown', checkIfClickedOutside);
         };
     }, [isShowProfile, onChange]);
-    return (_jsxs("div", __assign({ ref: ref, className: "smartapp-profile__container" }, { children: [_jsx("div", __assign({ onClick: function () { return onChange(!isShowProfile); }, className: "smartapp-profile__avatar" }, { children: initials })), isShowProfile && (_jsxs("div", __assign({ style: { width: "".concat(width, "%") }, className: "smartapp-profile" }, { children: [_jsxs("div", __assign({ className: "smartapp-profile__current-profile" }, { children: [_jsxs("div", __assign({ className: "smartapp-profile__current-profile--info" }, { children: [_jsx("div", __assign({ className: "smartapp-profile__avatar" }, { children: initials })), _jsxs("div", __assign({ className: "smartapp-profile__current-profile--info__data" }, { children: [_jsx("p", __assign({ className: "smartapp-profile__current-profile--info__data--username" }, { children: username })), email && _jsx("p", __assign({ className: "smartapp-profile__current-profile--info__data--email" }, { children: email }))] }))] })), _jsx("div", __assign({ onClick: onClickLogout, className: "smartapp-profile__current-profile--logout" }, { children: _jsx(LogoutIcon, { style: { color: getColor(logoutColor, DEFAULT_BLUE_ICON_COLOR) } }) }))] })), isMultipleProfile && (_jsxs("div", __assign({ onClick: onClickAddProfile, className: "smartapp-profile__add-profile" }, { children: [_jsx("div", __assign({ className: "smartapp-profile__add-profile--icon" }, { children: _jsx(AddProfileIcon, { style: {
-                                        stroke: getColor(addProfileColor, DEFAULT_BLUE_ICON_COLOR),
-                                        color: getColor(addProfileBackgroundColor, DEFAULT_BLUE_LIGHT_ICON_COLOR)
+    return (_jsxs("div", __assign({ ref: ref, className: "smartapp-profile__container" }, { children: [_jsx("div", __assign({ onClick: function () { return onChange(!isShowProfile); }, className: "smartapp-profile__avatar" }, { children: initials })), isShowProfile && (_jsxs("div", __assign({ style: { width: "".concat(width, "%") }, className: "smartapp-profile" }, { children: [_jsxs("div", __assign({ className: "smartapp-profile__current-profile" }, { children: [_jsxs("div", __assign({ className: "smartapp-profile__current-profile--info" }, { children: [_jsx("div", __assign({ className: "smartapp-profile__avatar" }, { children: initials })), _jsxs("div", __assign({ className: "smartapp-profile__current-profile--info__data" }, { children: [_jsx("p", __assign({ className: "smartapp-profile__current-profile--info__data--username" }, { children: username })), email && _jsx("p", __assign({ className: "smartapp-profile__current-profile--info__data--email" }, { children: email }))] }))] })), _jsx("div", __assign({ onClick: onClickLogout, className: "smartapp-profile__current-profile--logout" }, { children: _jsx(LogoutIcon, { style: { color: getColor(logoutColor, COLORS.blue) } }) }))] })), isMultipleProfile && (_jsxs("div", __assign({ onClick: onClickAddProfile, className: "smartapp-profile__add-profile" }, { children: [_jsx("div", __assign({ className: "smartapp-profile__add-profile--icon" }, { children: _jsx(AddProfileIcon, { style: {
+                                        stroke: getColor(addProfileColor, COLORS.blue),
+                                        color: getColor(addProfileBackgroundColor, COLORS.lighterBlue)
                                     } }) })), _jsx("p", __assign({ className: "smartapp-profile__add-profile--title" }, { children: "\u0414\u043E\u0431\u0430\u0432\u044C\u0442\u0435 \u0430\u043A\u043A\u0430\u0443\u043D\u0442" }))] })))] })))] })));
 };
 export default Profile;

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

@@ -11,14 +11,14 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from 'react';
-import { DEFAULT_BLUE_ICON_COLOR, DEFAULT_BLUE_ICON_HOVER_COLOR } from '../../constants';
+import { COLORS } from '../../constants';
 import { getColor } from '../../helpers';
 import '../../styles/stories.module.scss';
 var RadioButton = function (_a) {
     var id = _a.id, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, _c = _a.isChecked, isChecked = _c === void 0 ? false : _c, checkedColor = _a.checkedColor, checkedHoverColor = _a.checkedHoverColor, onChange = _a.onChange;
     useEffect(function () {
-        document.documentElement.style.setProperty('--radio-button-color', getColor(checkedColor, DEFAULT_BLUE_ICON_COLOR));
-        document.documentElement.style.setProperty('--radio-button-hover-color', getColor(checkedHoverColor, DEFAULT_BLUE_ICON_HOVER_COLOR));
+        document.documentElement.style.setProperty('--radio-button-color', getColor(checkedColor, COLORS.blue));
+        document.documentElement.style.setProperty('--radio-button-hover-color', getColor(checkedHoverColor, COLORS.darkBlue));
     }, [checkedColor, checkedHoverColor]);
     return (_jsx("div", __assign({ className: "smartapp-radio-button" }, { children: _jsx("label", __assign({ htmlFor: "smartapp-radio-button-".concat(id), onClick: onChange }, { children: _jsx("input", { type: "radio", id: "smartapp-radio-button-".concat(id), checked: isChecked, disabled: isDisabled }) })) })));
 };

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

@@ -18,8 +18,9 @@ import Popup from 'reactjs-popup';
 import { useSwipeable } from 'react-swipeable';
 import { isEmpty } from 'lodash';
 import { ReactComponent as CloseStoriesIcon } from '../../assets/icons/close-stories.svg';
+import { ReactComponent as LoaderIcon } from '../../assets/icons/story-loader.svg';
 import { STORY_BACKGROUND_TYPES, STORY_TYPE, } from './types';
-import { DEFAULT_BACKGROUND_BUTTON_COLOR, DEFAULT_FONT_FAMILY, DEFAULT_TEXT_BUTTON_COLOR, NUMBER_OF_STORIES_FOR_ROUND_INDICATORS, PLATFORM, } from '../../constants';
+import { COLORS, DEFAULT_FONT_FAMILY, NUMBER_OF_STORIES_FOR_ROUND_INDICATORS, PLATFORM, } from '../../constants';
 import { getColor, isIosPlatform, isWebPlatform } from '../../helpers';
 import '../../styles/stories.module.scss';
 var storyItemBaseStyles = {
@@ -65,9 +66,14 @@ var StoriesComponent = function (_a) {
         var id = _a.id;
         return id === activeStoryId;
     });
+    var isColorOnBackground = function (type) { return type === STORY_BACKGROUND_TYPES.color; };
+    var isImageOnBackground = function (_a) {
+        var type = _a.type;
+        return type === STORY_BACKGROUND_TYPES.image;
+    };
     var getStoryStyles = function (_a) {
         var type = _a.type, value = _a.value;
-        return type === STORY_BACKGROUND_TYPES.color
+        return isColorOnBackground(type)
             ? __assign(__assign({}, storyItemBaseStyles), { background: value }) : __assign(__assign({}, storyItemBaseStyles), { backgroundImage: "url(".concat(value, ")"), backgroundSize: 'cover' });
     };
     var changeActiveGroupStories = function (groupStoriesItem) {
@@ -127,15 +133,31 @@ var StoriesComponent = function (_a) {
     var getImageContent = function (_a) {
         var id = _a.id, title = _a.title, body = _a.body, backgroundSource = _a.backgroundSource, button = _a.button, image = _a.image;
         return ({
-            content: function () {
+            content: function (_a) {
+                var action = _a.action;
+                // eslint-disable-next-line react-hooks/rules-of-hooks
+                var _b = useState(false), isImageLoaded = _b[0], setIsImageLoaded = _b[1];
+                var isLoaderVisible = image && (!isImageLoaded || isAnimateToLeft || isAnimateToRight);
                 // eslint-disable-next-line react-hooks/rules-of-hooks
                 useLayoutEffect(function () {
                     setActiveStoryId(id);
                 }, []);
-                return (_jsx("div", __assign({ style: getStoryStyles(backgroundSource) }, { children: _jsxs("div", __assign({ style: { fontFamily: "".concat(fontFamily, ", sans-serif") }, className: "smartapp-stories__story" }, { children: [image && _jsx("div", __assign({ className: "smartapp-stories__story--image" }, { children: _jsx("img", { src: image, alt: "" }) })), title && _jsx("div", __assign({ className: "smartapp-stories__story--title" }, { children: title })), body && _jsx("div", __assign({ className: "smartapp-stories__story--body" }, { children: body })), button && (_jsx("div", __assign({ style: {
-                                    color: getColor(button.textColor, DEFAULT_TEXT_BUTTON_COLOR),
-                                    background: getColor(button.backgroundColor, DEFAULT_BACKGROUND_BUTTON_COLOR),
-                                }, className: classNames('smartapp-stories__story--button', "smartapp-stories__story--button__".concat(platform)), onClick: button.action }, { children: button.text })))] })) }), id));
+                // eslint-disable-next-line react-hooks/rules-of-hooks
+                useLayoutEffect(function () {
+                    var timeoutId;
+                    timeoutId = setTimeout(function () { return action(isLoaderVisible ? 'pause' : 'play'); }, 0);
+                    return function () { return clearTimeout(timeoutId); };
+                }, [isLoaderVisible, action]);
+                var handleImageLoad = function () {
+                    setTimeout(function () {
+                        action('play');
+                        setIsImageLoaded(true);
+                    }, 0);
+                };
+                return (_jsx("div", __assign({ style: getStoryStyles(backgroundSource) }, { children: _jsxs("div", __assign({ style: { fontFamily: "".concat(fontFamily, ", sans-serif") }, className: classNames('smartapp-stories__story', { 'smartapp-stories__story--image-bg': isImageOnBackground(backgroundSource) }) }, { children: [_jsxs("div", __assign({ style: { opacity: isLoaderVisible ? '0' : '1' } }, { children: [image && (_jsx("div", __assign({ className: "smartapp-stories__story--image" }, { children: _jsx("img", { src: image, alt: "", onLoad: handleImageLoad }) }))), title && _jsx("div", __assign({ className: "smartapp-stories__story--title" }, { children: title })), body && _jsx("div", __assign({ className: "smartapp-stories__story--body" }, { children: body })), button && (_jsx("div", __assign({ style: {
+                                            color: getColor(button.textColor, COLORS.black),
+                                            background: getColor(button.backgroundColor, COLORS.white),
+                                        }, className: classNames('smartapp-stories__story--button', "smartapp-stories__story--button__".concat(platform)), onClick: button.action }, { children: button.text })))] })), isLoaderVisible && (_jsx("div", __assign({ className: 'smartapp-stories__story--loader' }, { children: _jsx(LoaderIcon, {}) })))] })) }), id));
             },
         });
     };
@@ -204,7 +226,7 @@ var StoriesComponent = function (_a) {
             if (activeStory.type === STORY_TYPE.image) {
                 var _a = activeStory.backgroundSource, type = _a.type, value = _a.value;
                 var prevBackgroundVideos = document.querySelectorAll(".smartapp-stories-content__background-video");
-                var background = type === STORY_BACKGROUND_TYPES.color ? value : "url(".concat(value, ")");
+                var background = isColorOnBackground(type) ? value : "url(".concat(value, ")");
                 !isEmpty(prevBackgroundVideos) && prevBackgroundVideos.forEach(function (video) { return video.remove(); });
                 isWebPlatform(platform) && (popupElement === null || popupElement === void 0 ? void 0 : popupElement.style.setProperty('--background', background));
             }

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

@@ -1,3 +1,4 @@
+import { IPlatformProps } from '../../constants';
 export declare enum STORY_BACKGROUND_TYPES {
     color = "color",
     image = "image"
@@ -6,8 +7,9 @@ export declare enum STORY_TYPE {
     image = "image",
     video = "video"
 }
+export type TBackgroundType = 'color' | 'image';
 export type TBackgroundSource = {
-    type: 'color' | 'image';
+    type: TBackgroundType;
     value: string;
 };
 type TCommonStoryItem = {
@@ -38,8 +40,7 @@ export type TGroupStories = {
     viewed: boolean;
     stories: TStoryItem[];
 };
-export interface IStoriesProps {
-    platform?: 'web' | 'ios' | 'android';
+export interface IStoriesProps extends IPlatformProps {
     fontFamily?: string;
     groupStories: TGroupStories | null;
     allGroupsStories: TGroupStories[];

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

@@ -24,13 +24,13 @@ import classNames from 'classnames';
 import Color from 'color';
 import { normal } from 'color-blend';
 import { ReactComponent as LoaderIcon } from '../../assets/icons/loader.svg';
-import { DEFAULT_BLUE_ICON_COLOR, DEFAULT_FONT_FAMILY, THEME } from '../../constants';
+import { COLORS, DEFAULT_FONT_FAMILY, THEME } from '../../constants';
 import { getColor } from '../../helpers';
 import '../../styles/stories.module.scss';
 var SyncLoader = function (_a) {
     var isLoading = _a.isLoading, _b = _a.theme, theme = _b === void 0 ? THEME.default : _b, color = _a.color, _c = _a.fontFamily, fontFamily = _c === void 0 ? DEFAULT_FONT_FAMILY : _c;
     var isDarkTheme = theme === THEME.dark;
-    var loaderColor = getColor(color, DEFAULT_BLUE_ICON_COLOR);
+    var loaderColor = getColor(color, COLORS.blue);
     var getBackgroundStyles = function () {
         var _a = Color(loaderColor).rgb().object(), red = _a.r, green = _a.g, blue = _a.b;
         var backgroundColorRGBA = { r: red, g: green, b: blue, a: 0.2 };