@expressms/smartapp-ui 1.0.7 → 1.1.1

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

@@ -16,7 +16,7 @@ import { ReactComponent as CancelIcon } from '../../assets/icons/cancel-cross.sv
 import Button from '../Button';
 import Input from '../Input';
 import { TButtonColor, TButtonType } from '../Button/types';
-import { getIconColor } from '../../helpers';
+import { getColor } from '../../helpers';
 import { DEFAULT_GRAY_ICON_COLOR } from '../../constants';
 import '../../styles/stories.module.scss';
 var ActionModal = function (_a) {
@@ -37,6 +37,6 @@ var ActionModal = function (_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(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); } }) }))] })) })) })));
+    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: getColor(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/AttachedFile/AttachedFile.js

@@ -14,14 +14,14 @@ import classNames from 'classnames';
 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 { getColor } 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({
+    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({
                     '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));
+                }) }, { 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));
 };
 export default AttachedFile;

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

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

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

@@ -14,26 +14,26 @@ import { AvatarFontSizes } from './types';
 import '../../styles/stories.module.scss';
 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
-        ? (_d = (_c = (_b = username === null || username === void 0 ? void 0 : username.split(' ')) === null || _b === void 0 ? void 0 : _b.map(function (n) { return n[0]; })) === null || _c === void 0 ? void 0 : _c.join('.')) === null || _d === void 0 ? void 0 : _d.toUpperCase()
+    var username = _a.username, avatar = _a.avatar, _e = _a.onClick, onClick = _e === void 0 ? function () { return undefined; } : _e, _f = _a.size, size = _f === void 0 ? 44 : _f;
+    var initials = username.split(' ').length <= 2
+        ? (_d = (_c = (_b = username === null || username === void 0 ? void 0 : username.split(' ')) === null || _b === void 0 ? void 0 : _b.map(function (n) { return n[0]; })) === null || _c === void 0 ? void 0 : _c.join('')) === null || _d === void 0 ? void 0 : _d.toUpperCase()
         : username[0].toUpperCase();
     var getFontSizeAvatar = function () {
-        if (typeof widthHeight === 'number') {
-            switch (widthHeight) {
-                case (widthHeight = 24): {
-                    return AvatarFontSizes.small;
-                }
-                case (widthHeight = 32): {
-                    return AvatarFontSizes.average;
-                }
-                case (widthHeight = 44): {
-                    return AvatarFontSizes.high;
-                }
+        switch (size) {
+            case (size = 24): {
+                return AvatarFontSizes.small;
+            }
+            case (size = 32): {
+                return AvatarFontSizes.average;
+            }
+            case (size = 44): {
+                return AvatarFontSizes.high;
+            }
+            case (size = 100): {
+                return AvatarFontSizes.greatest;
             }
         }
-        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 })));
+    return (_jsx("div", __assign({ style: { width: "".concat(size, "px"), height: "".concat(size, "px"), fontSize: getFontSizeAvatar() }, onClick: onClick, className: "smartapp-avatar" }, { children: avatar ? _jsx("img", { src: avatar, alt: "avatar" }) : initials })));
 };
 export default Avatar;

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

@@ -1,10 +1,12 @@
 export interface IAvatarProps {
     username: string;
+    avatar?: string;
     onClick?: () => void;
-    widthHeight?: 24 | 32 | 44;
+    size?: 24 | 32 | 44 | 100;
 }
 export declare enum AvatarFontSizes {
     small = "12px",
     average = "14px",
-    high = "18px"
+    high = "18px",
+    greatest = "42px"
 }

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

@@ -3,4 +3,5 @@ export var AvatarFontSizes;
     AvatarFontSizes["small"] = "12px";
     AvatarFontSizes["average"] = "14px";
     AvatarFontSizes["high"] = "18px";
+    AvatarFontSizes["greatest"] = "42px";
 })(AvatarFontSizes || (AvatarFontSizes = {}));

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

@@ -11,11 +11,11 @@ var __assign = (this && this.__assign) || function () {
 };
 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 { getColor } from '../../helpers';
 import { DEFAULT_BLUE_ICON_COLOR } from '../../constants';
 import '../../styles/stories.module.scss';
 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" })] })) })));
+    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: getColor(iconColor, DEFAULT_BLUE_ICON_COLOR) } }) : _jsx("span", { className: "checkmark" })] })) })));
 };
 export default CheckBox;

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

@@ -12,11 +12,11 @@ var __assign = (this && this.__assign) || function () {
 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 { getIconColor } from '../../helpers';
+import { getColor } 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) } }) }))] })));
+    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) } }) }))] })));
 };
 export default Chips;

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

@@ -27,14 +27,14 @@ 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] })));
+    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, { size: 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(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, { size: 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 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;

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

@@ -15,7 +15,7 @@ import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 import { ReactComponent as OrderIcon } from '../../assets/icons/order.svg';
 import { ReactComponent as DeleteIcon } from '../../assets/icons/close.svg';
 import CheckBox from '../Checkbox';
-import { getIconColor } from '../../helpers';
+import { getColor } from '../../helpers';
 import { DEFAULT_BLUE_ICON_COLOR, DEFAULT_GRAY_ICON_COLOR } from '../../constants';
 import '../../styles/stories.module.scss';
 var DragAndDrop = function (_a) {
@@ -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, checked: instanceOption.isCompleted, iconColor: 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: getIconColor(orderColor, DEFAULT_GRAY_ICON_COLOR) } }), onClickDeleteOption && _jsx(DeleteIcon, { className: "cp", style: { color: getIconColor(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, checked: instanceOption.isCompleted, iconColor: 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)); }) }))); } })) })) })));
 };
 export default DragAndDrop;

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

@@ -11,11 +11,11 @@ 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 { getIconColor } from '../../helpers';
+import { getColor } from '../../helpers';
 import { DEFAULT_GRAY_ICON_COLOR } 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: getIconColor(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, DEFAULT_GRAY_ICON_COLOR) } }) })), _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.d.ts

@@ -1,4 +1,4 @@
 import { IHeaderProps } from './types';
 import '../../styles/stories.module.scss';
-declare const Header: ({ title, isBack, isRemove, onClickBack, onClickRemove, arrowColor, trashColor, }: IHeaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const Header: ({ title, isBack, isRemove, refreshIcon, onClickBack, onClickRemove, arrowColor, trashColor, platform, headerHeight, textSize, textColor, backgroundColor, }: IHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export default Header;

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

@@ -10,13 +10,27 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
 import { ReactComponent as ArrowBackIcon } from '../../assets/icons/arrow-back.svg';
 import { ReactComponent as TrashIcon } from '../../assets/icons/trash.svg';
-import { getIconColor } from '../../helpers';
-import { DEFAULT_BLACK_ICON_COLOR, DEFAULT_RED_ICON_COLOR } from '../../constants';
+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 '../../styles/stories.module.scss';
 var Header = function (_a) {
-    var _b = _a.title, title = _b === void 0 ? '' : _b, _c = _a.isBack, isBack = _c === void 0 ? false : _c, _d = _a.isRemove, isRemove = _d === void 0 ? false : _d, _e = _a.onClickBack, onClickBack = _e === void 0 ? function () { return undefined; } : _e, _f = _a.onClickRemove, onClickRemove = _f === void 0 ? function () { return undefined; } : _f, arrowColor = _a.arrowColor, trashColor = _a.trashColor;
-    return (_jsxs("div", __assign({ className: "smartapp-header" }, { children: [_jsxs("div", __assign({ className: "smartapp-header__info" }, { children: [isBack && (_jsx(ArrowBackIcon, { style: { color: getIconColor(arrowColor, DEFAULT_BLACK_ICON_COLOR) }, onClick: onClickBack, className: "smartapp-header__info--arrow-back" })), title && _jsx("p", __assign({ className: "smartapp-header__info--title" }, { children: title }))] })), isRemove && (_jsx("div", __assign({ onClick: onClickRemove, className: "smartapp-header__trash" }, { children: _jsx(TrashIcon, { style: { color: getIconColor(trashColor, DEFAULT_RED_ICON_COLOR) } }) })))] })));
+    var _b;
+    var _c = _a.title, title = _c === void 0 ? '' : _c, _d = _a.isBack, isBack = _d === void 0 ? false : _d, _e = _a.isRemove, isRemove = _e === void 0 ? false : _e, refreshIcon = _a.refreshIcon, _f = _a.onClickBack, onClickBack = _f === void 0 ? function () { return undefined; } : _f, _g = _a.onClickRemove, onClickRemove = _g === void 0 ? function () { return undefined; } : _g, arrowColor = _a.arrowColor, trashColor = _a.trashColor, _h = _a.platform, platform = _h === void 0 ? PLATFORM.web : _h, headerHeight = _a.headerHeight, _j = _a.textSize, textSize = _j === void 0 ? 'default' : _j, textColor = _a.textColor, backgroundColor = _a.backgroundColor;
+    var getHeaderStyles = function () { return ({
+        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),
+    }); };
+    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 () { } }));
+    };
+    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)] }))] })));
 };
 export default Header;

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

@@ -1,9 +1,19 @@
+export type TRefreshIcon = {
+    isEnabled: boolean;
+    onClick: () => void;
+};
 export interface IHeaderProps {
     title?: string;
     isBack?: boolean;
     isRemove?: boolean;
+    refreshIcon?: TRefreshIcon;
     onClickBack?: () => void;
     onClickRemove?: () => void;
     arrowColor?: string;
     trashColor?: string;
+    platform?: 'web' | 'ios' | 'android';
+    headerHeight?: number;
+    textSize?: 'small' | 'default' | 'large';
+    textColor?: string;
+    backgroundColor?: string;
 }

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, title }: ILoaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const Loader: ({ isLoader, isFullScreen, isTextItalic, title, textSize, width, iconSize, backgroundColor, }: ILoaderProps) => import("react/jsx-runtime").JSX.Element;
 export default Loader;

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

@@ -11,9 +11,24 @@ 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 '../../styles/stories.module.scss';
 var Loader = function (_a) {
-    var _b = _a.isLoader, isLoader = _b === void 0 ? false : _b, title = _a.title;
-    return (_jsx("div", __assign({ className: "smartapp-loader-wrapper" }, { children: _jsxs("div", __assign({ className: "smartapp-loader" }, { children: [_jsx(ColorRing, { visible: isLoader, height: "32", width: "32", ariaLabel: "blocks-loading", wrapperStyle: {}, wrapperClass: "blocks-wrapper", colors: ['#4799E3', '#4799E3', '#4799E3', '#4799E3', '#4799E3'] }), title && _jsx("p", __assign({ className: "smartapp-loader__title" }, { children: title }))] })) })));
+    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 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;
+        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 }))] })) })));
 };
 export default Loader;

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

@@ -1,4 +1,10 @@
 export interface ILoaderProps {
     isLoader: boolean;
+    isFullScreen?: boolean;
+    isTextItalic?: boolean;
     title?: string;
+    textSize?: 'small' | 'default' | 'large';
+    width?: number;
+    iconSize?: number;
+    backgroundColor?: string;
 }

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

@@ -13,7 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
 import { ReactComponent as LogoutIcon } from '../../assets/icons/logout.svg';
 import { ReactComponent as AddProfileIcon } from '../../assets/icons/plus.svg';
-import { getIconColor } from '../../helpers';
+import { getColor } from '../../helpers';
 import { DEFAULT_BLUE_ICON_COLOR, DEFAULT_BLUE_LIGHT_ICON_COLOR } from '../../constants';
 import '../../styles/stories.module.scss';
 var Profile = function (_a) {
@@ -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: getIconColor(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: getIconColor(addProfileColor, DEFAULT_BLUE_ICON_COLOR),
-                                        color: getIconColor(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, 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)
                                     } }) })), _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/Stories/Stories.js

@@ -16,9 +16,11 @@ import { isNull, sortBy } from 'lodash';
 import Stories from 'react-insta-stories';
 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 { STORY_BACKGROUND_TYPES } from './types';
-import { BUTTON_PADDING, DEFAULT_FONT_FAMILY, MAX_PADDING_FOR_IMAGE, PLATFORM, } from '../../constants';
+import { STORY_BACKGROUND_TYPES, STORY_TYPE, } from './types';
+import { BUTTON_PADDING, DEFAULT_BACKGROUND_BUTTON_COLOR, DEFAULT_FONT_FAMILY, DEFAULT_TEXT_BUTTON_COLOR, MAX_PADDING_FOR_IMAGE, PLATFORM, } from '../../constants';
+import { getColor, isAndroidPlatform, isIosPlatform, isWebPlatform } from '../../helpers';
 import '../../styles/stories.module.scss';
 var storyItemBaseStyles = {
     height: '100%',
@@ -27,9 +29,9 @@ var storyItemBaseStyles = {
 var progressContainerStyles = function (platform) { return ({
     gap: '12px',
     width: '100%',
-    maxWidth: platform === PLATFORM.ios || platform === PLATFORM.android ? '139px' : '198px',
+    maxWidth: isIosPlatform(platform) || isAndroidPlatform(platform) ? '139px' : '198px',
     filter: 'none',
-    paddingTop: platform === PLATFORM.web ? '22px' : platform === PLATFORM.ios ? '21px' : '26px',
+    paddingTop: isWebPlatform(platform) ? '22px' : isIosPlatform(platform) ? '21px' : '26px',
     paddingLeft: '0',
     paddingRight: '0',
     paddingBottom: '0',
@@ -63,12 +65,10 @@ var StoriesComponent = function (_a) {
         var id = _a.id;
         return id === activeStoryId;
     });
-    var getStoryStyles = function (story) {
-        var _a, _b;
-        if (((_a = story === null || story === void 0 ? void 0 : story.backgroundSource) === null || _a === void 0 ? void 0 : _a.type) === STORY_BACKGROUND_TYPES.color) {
-            return __assign(__assign({}, storyItemBaseStyles), { background: story.backgroundSource.value });
-        }
-        return __assign(__assign({}, storyItemBaseStyles), { backgroundImage: "url(".concat((_b = story === null || story === void 0 ? void 0 : story.backgroundSource) === null || _b === void 0 ? void 0 : _b.value, ")"), backgroundSize: 'cover' });
+    var getStoryStyles = function (_a) {
+        var type = _a.type, value = _a.value;
+        return type === STORY_BACKGROUND_TYPES.color
+            ? __assign(__assign({}, storyItemBaseStyles), { background: value }) : __assign(__assign({}, storyItemBaseStyles), { backgroundImage: "url(".concat(value, ")"), backgroundSize: 'cover' });
     };
     var changeActiveGroupStories = function (groupStoriesItem) {
         setActiveGroupStories(groupStoriesItem);
@@ -99,10 +99,12 @@ var StoriesComponent = function (_a) {
         }
     };
     var onPrevious = function () { return activeStoryId === stories[0].id && handlePrevious(); };
-    var onStoryStart = function () {
+    var onStoryStart = function (storyIndex) {
+        var isVideoStory = stories[storyIndex].type === STORY_TYPE.video;
+        isVideoStory && setActiveStoryId(stories[storyIndex].id);
         var story = stories.find(function (_a) {
             var id = _a.id;
-            return id === activeStoryId;
+            return id === stories[storyIndex].id;
         });
         var isLastStory = stories.at(-1).id === story.id;
         if (!story.viewed && changeStoryToViewed) {
@@ -112,44 +114,94 @@ var StoriesComponent = function (_a) {
             changeGroupStoriesToViewed(activeGroupStories);
         }
     };
-    var getStories = function () { return stories.map(function (story) { return ({
-        content: function () {
-            // eslint-disable-next-line react-hooks/rules-of-hooks
-            useEffect(function () {
-                setActiveStoryId(story.id);
-                var storyWrapper = document.querySelector('.smartapp-stories');
-                var storyWrapperHeight = (storyWrapper === null || storyWrapper === void 0 ? void 0 : storyWrapper.getBoundingClientRect().height) || 0;
-                var storyContent = document.querySelector('.smartapp-stories__story');
-                var storyContentHeight = (storyContent === null || storyContent === void 0 ? void 0 : storyContent.getBoundingClientRect().height) || 0;
-                var buttonElement = document.querySelector('.smartapp-stories__story--button');
-                var buttonElementHeight = buttonElement ? (buttonElement.getBoundingClientRect().height + BUTTON_PADDING) : 0;
-                var padding = (storyWrapperHeight - storyContentHeight - buttonElementHeight) / 2;
-                var paddingTop = (padding > MAX_PADDING_FOR_IMAGE && story.image) ? "".concat(MAX_PADDING_FOR_IMAGE, "px") : "".concat(padding, "px");
-                storyContent === null || storyContent === void 0 ? void 0 : storyContent.style.setProperty('--padding', paddingTop);
-            }, []);
-            return (_jsx("div", __assign({ style: getStoryStyles(story) }, { children: _jsxs("div", __assign({ style: { fontFamily: "".concat(fontFamily, ", sans-serif") }, className: "smartapp-stories__story" }, { children: [story.image && _jsx("div", __assign({ className: "smartapp-stories__story--image" }, { children: _jsx("img", { src: story.image, alt: "" }) })), story.title && _jsx("div", __assign({ className: "smartapp-stories__story--title" }, { children: story.title })), story.body && _jsx("div", __assign({ className: "smartapp-stories__story--body" }, { children: story.body })), story.button && (_jsx("div", __assign({ className: classNames('smartapp-stories__story--button', "smartapp-stories__story--button__".concat(platform)), onClick: story.button.action }, { children: story.button.text })))] })) }), story.id));
-        },
-    }); }); };
+    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 () {
+                // eslint-disable-next-line react-hooks/rules-of-hooks
+                useEffect(function () {
+                    setActiveStoryId(id);
+                    var storyWrapper = document.querySelector('.smartapp-stories');
+                    var storyWrapperHeight = (storyWrapper === null || storyWrapper === void 0 ? void 0 : storyWrapper.getBoundingClientRect().height) || 0;
+                    var storyContent = document.querySelector('.smartapp-stories__story');
+                    var storyContentHeight = (storyContent === null || storyContent === void 0 ? void 0 : storyContent.getBoundingClientRect().height) || 0;
+                    var buttonElement = document.querySelector('.smartapp-stories__story--button');
+                    var buttonElementHeight = buttonElement ? (buttonElement.getBoundingClientRect().height + BUTTON_PADDING) : 0;
+                    var padding = (storyWrapperHeight - storyContentHeight - buttonElementHeight) / 2;
+                    var paddingTop = (padding > MAX_PADDING_FOR_IMAGE && image) ? "".concat(MAX_PADDING_FOR_IMAGE, "px") : "".concat(padding, "px");
+                    storyContent === null || storyContent === void 0 ? void 0 : storyContent.style.setProperty('--padding', paddingTop);
+                }, []);
+                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));
+            },
+        });
+    };
+    var getVideoContent = function (_a) {
+        var url = _a.url;
+        return ({
+            type: STORY_TYPE.video,
+            url: url,
+        });
+    };
+    var getStories = function () { return stories.map(function (story) { return story.type === STORY_TYPE.image ? getImageContent(story) : getVideoContent(story); }); };
     var swipeableHandlers = useSwipeable({
         trackMouse: true,
         onSwipedLeft: function () { return handleNext(); },
         onSwipedRight: function () { return handlePrevious(); },
     });
     useEffect(function () {
-        var _a;
         var sortedStories = sortStoriesByOrder((groupStories === null || groupStories === void 0 ? void 0 : groupStories.stories) || []);
         setActiveGroupStories(groupStories);
         setStories(sortedStories);
-        setActiveStoryId((groupStories === null || groupStories === void 0 ? void 0 : groupStories.stories) ? (_a = sortedStories[0]) === null || _a === void 0 ? void 0 : _a.id : null);
     }, [groupStories]);
     useEffect(function () {
-        var _a, _b;
+        var video = document.querySelector('video');
+        var pauseVideosOnBackground = function () {
+            var backgroundVideos = document.querySelectorAll("#background_video_".concat(activeStoryId));
+            backgroundVideos.forEach(function (video) { return video.pause(); });
+        };
+        var playVideosOnBackground = function () {
+            var backgroundVideos = document.querySelectorAll("#background_video_".concat(activeStoryId));
+            backgroundVideos.forEach(function (video) { return video.play(); });
+        };
+        video === null || video === void 0 ? void 0 : video.addEventListener("play", playVideosOnBackground);
+        video === null || video === void 0 ? void 0 : video.addEventListener("pause", pauseVideosOnBackground);
+        return function () {
+            video === null || video === void 0 ? void 0 : video.removeEventListener("play", playVideosOnBackground);
+            video === null || video === void 0 ? void 0 : video.removeEventListener("pause", pauseVideosOnBackground);
+        };
+    }, [activeStoryId]);
+    useEffect(function () {
         var popupElement = document.querySelector('.smartapp-stories-content');
-        var background = ((_a = activeStory === null || activeStory === void 0 ? void 0 : activeStory.backgroundSource) === null || _a === void 0 ? void 0 : _a.type) === STORY_BACKGROUND_TYPES.color
-            ? activeStory.backgroundSource.value
-            : "url(".concat((_b = activeStory === null || activeStory === void 0 ? void 0 : activeStory.backgroundSource) === null || _b === void 0 ? void 0 : _b.value, ")");
-        popupElement === null || popupElement === void 0 ? void 0 : popupElement.style.setProperty('--background', background);
-    }, [activeStory]);
+        var videoWrapper = document.querySelector('.smartapp-stories-content > div > div > div:nth-child(2) > div');
+        if (activeStory) {
+            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, ")");
+                !isEmpty(prevBackgroundVideos) && prevBackgroundVideos.forEach(function (video) { return video.remove(); });
+                isWebPlatform(platform) && (popupElement === null || popupElement === void 0 ? void 0 : popupElement.style.setProperty('--background', background));
+            }
+            else {
+                var prevBackgroundVideos = document.querySelectorAll(".smartapp-stories-content__background-video");
+                !isEmpty(prevBackgroundVideos) && prevBackgroundVideos.forEach(function (video) { return video.remove(); });
+                var video = document.createElement('video');
+                video.id = "background_video_".concat(activeStory.id);
+                video.src = activeStory.url;
+                video.playsInline = true;
+                video.autoplay = true;
+                video.muted = true;
+                video.classList.add('smartapp-stories-content__background-video');
+                if (isWebPlatform(platform)) {
+                    popupElement === null || popupElement === void 0 ? void 0 : popupElement.style.removeProperty('--background');
+                    popupElement === null || popupElement === void 0 ? void 0 : popupElement.appendChild(video);
+                }
+                videoWrapper === null || videoWrapper === void 0 ? void 0 : videoWrapper.appendChild(video.cloneNode(true));
+            }
+        }
+    }, [platform, activeStory]);
     if (isNull(activeGroupStories)) {
         return null;
     }
@@ -157,6 +209,7 @@ var StoriesComponent = function (_a) {
                         'smartapp-stories': true
                     },
                     _b["smartapp-stories__".concat(platform)] = true,
+                    _b['smartapp-stories__video'] = (activeStory === null || activeStory === void 0 ? void 0 : activeStory.type) === STORY_TYPE.video,
                     _b['smartapp-stories__animate-right'] = isAnimateToRight,
                     _b['smartapp-stories__animate-left'] = isAnimateToLeft,
                     _b)) }, swipeableHandlers, { children: _jsx(Stories, { defaultInterval: 6000, width: "100%", height: "100%", stories: getStories(), onStoryStart: onStoryStart, onPrevious: onPrevious, onAllStoriesEnd: handleNext, progressContainerStyles: progressContainerStyles(platform), progressWrapperStyles: progressWrapperStyles, progressStyles: progressStyles }, activeGroupStories.id) })), _jsx(CloseStoriesIcon, { className: classNames((_c = {