@expressms/smartapp-ui 1.1.4 → 1.1.6

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

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

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

@@ -10,12 +10,16 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 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 } from '../../constants';
+import { DEFAULT_BLUE_ICON_COLOR, DEFAULT_BLUE_ICON_HOVER_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: getColor(iconColor, DEFAULT_BLUE_ICON_COLOR) } }) : _jsx("span", { className: "checkmark" })] })) })));
+    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));
+    }, [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" })] })) })));
 };
 export default CheckBox;

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

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

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

@@ -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: 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, 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/Header/Header.d.ts

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

@@ -19,7 +19,7 @@ import { DEFAULT_BLACK_ICON_COLOR, DEFAULT_HEADER_BACKGROUND_COLOR, DEFAULT_HEAD
 import '../../styles/stories.module.scss';
 var Header = function (_a) {
     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 _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, customIcon = _a.customIcon, _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],
@@ -31,6 +31,6 @@ var Header = 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)] }))] })));
+    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] }))] })));
 };
 export default Header;

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

@@ -1,3 +1,4 @@
+import { ReactElement } from 'react';
 export type TRefreshIcon = {
     isEnabled: boolean;
     onClick: () => void;
@@ -7,6 +8,7 @@ export interface IHeaderProps {
     isBack?: boolean;
     isRemove?: boolean;
     refreshIcon?: TRefreshIcon;
+    customIcon?: ReactElement;
     onClickBack?: () => void;
     onClickRemove?: () => void;
     arrowColor?: 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: ({ onChange, title, placeholder, defaultValue, error, width, className, autoFocus, isPassword, }: IInputProps) => import("react/jsx-runtime").JSX.Element;
+declare const Input: ({ isPassword, isClearable, autoFocus, title, placeholder, defaultValue, error, textSize, width, className, onChange, onEnterPress, onClearClick, }: IInputProps) => import("react/jsx-runtime").JSX.Element;
 export default Input;

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

@@ -14,13 +14,14 @@ import { useRef, useState, useEffect } from 'react';
 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 { INPUT_TYPE_PASSWORD, INPUT_TYPE_TEXT } from '../../constants';
+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 '../../styles/stories.module.scss';
 var Input = function (_a) {
     var _b;
-    var onChange = _a.onChange, title = _a.title, placeholder = _a.placeholder, defaultValue = _a.defaultValue, error = _a.error, _c = _a.width, width = _c === void 0 ? 100 : _c, _d = _a.className, className = _d === void 0 ? '' : _d, _e = _a.autoFocus, autoFocus = _e === void 0 ? false : _e, _f = _a.isPassword, isPassword = _f === void 0 ? false : _f;
-    var _g = useState(false), isPasswordShown = _g[0], setPasswordShown = _g[1];
+    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 inputRef = useRef(null);
+    var _j = useState(false), isPasswordShown = _j[0], setIsPasswordShown = _j[1];
     useEffect(function () {
         var inputElement = inputRef.current;
         if (inputElement && inputElement.value.length) {
@@ -30,17 +31,27 @@ var Input = function (_a) {
             inputElement.focus();
         }
     }, [isPasswordShown]);
+    var getTextStyles = function () { return ({
+        fontSize: FONT_SIZE[textSize],
+        lineHeight: LINE_HEIGHT[textSize],
+    }); };
     var getInputType = function () {
         if (isPassword) {
             return isPasswordShown ? INPUT_TYPE_TEXT : INPUT_TYPE_PASSWORD;
         }
         return INPUT_TYPE_TEXT;
     };
+    var handleKeyDown = function (_a) {
+        var key = _a.key;
+        if (key === ENTER_KEY && onEnterPress) {
+            onEnterPress();
+        }
+    };
     var onClickButton = function () {
         var _a, _b;
-        setPasswordShown(!isPasswordShown);
+        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: "smartapp-input__container--field", type: getInputType(), defaultValue: defaultValue, autoFocus: autoFocus, placeholder: placeholder, 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, {}) })))] })), error && _jsx("div", __assign({ className: "smartapp-input__error" }, { children: error }))] })));
+    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 }))] })));
 };
 export default Input;

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

@@ -1,12 +1,16 @@
 import { IntRange } from '../types';
 export interface IInputProps {
-    onChange: (str: string) => void;
+    isPassword?: boolean;
+    isClearable?: boolean;
     autoFocus?: boolean;
     title?: string;
     placeholder?: string;
     defaultValue?: string;
     error?: string;
+    textSize?: 'small' | 'default' | 'large';
     width?: IntRange<1, 101>;
     className?: string;
-    isPassword?: boolean;
+    onChange: (str: string) => void;
+    onEnterPress?: () => void;
+    onClearClick?: () => void;
 }

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

@@ -0,0 +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;
+export default Modal;

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

@@ -0,0 +1,38 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, 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 '../../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 ref = useRef(null);
+    useEffect(function () {
+        document.documentElement.style.setProperty('--modal-background', getColor(backgroundColor, DEFAULT_POPUP_BACKGROUND_COLOR));
+    }, [backgroundColor]);
+    useEffect(function () {
+        var checkIfClickedOutside = function (e) {
+            if (isModalOpen && ref.current && !ref.current.contains(e.target)) {
+                handleCloseModal();
+            }
+        };
+        document === null || document === void 0 ? void 0 : document.addEventListener('click', checkIfClickedOutside, true);
+        return function () {
+            document === null || document === void 0 ? void 0 : document.removeEventListener('click', 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] })) })) })));
+};
+export default Modal;

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

@@ -0,0 +1 @@
+export { default } from './Modal';

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

@@ -0,0 +1 @@
+export { default } from './Modal';

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

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

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,4 @@
+import { INotificationProps } from './types';
+import '../../styles/stories.module.scss';
+declare const Notification: ({ isShown, type, isAutoHidden, hideDuration, platform, message, action, hideNotification, }: INotificationProps) => import("react/jsx-runtime").JSX.Element;
+export default Notification;

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

@@ -0,0 +1,40 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import Popup from 'reactjs-popup';
+import { ReactComponent as NotificationSuccessIcon } from '../../assets/icons/notification-success.svg';
+import { ReactComponent as NotificationInfoIcon } from '../../assets/icons/notification-info.svg';
+import { ReactComponent as NotificationWarningIcon } from '../../assets/icons/notification-warning.svg';
+import { ReactComponent as NotificationErrorIcon } from '../../assets/icons/notification-error.svg';
+import { CANCEL_ACTION_TEXT, PLATFORM } from '../../constants';
+import { getClassNames } from '../../helpers';
+import '../../styles/stories.module.scss';
+var NOTIFICATION_ICONS = {
+    success: _jsx(NotificationSuccessIcon, {}),
+    info: _jsx(NotificationInfoIcon, {}),
+    warning: _jsx(NotificationWarningIcon, {}),
+    error: _jsx(NotificationErrorIcon, {}),
+};
+var Notification = function (_a) {
+    var isShown = _a.isShown, _b = _a.type, type = _b === void 0 ? 'success' : _b, _c = _a.isAutoHidden, isAutoHidden = _c === void 0 ? true : _c, _d = _a.hideDuration, hideDuration = _d === void 0 ? 3000 : _d, _e = _a.platform, platform = _e === void 0 ? PLATFORM.web : _e, message = _a.message, action = _a.action, hideNotification = _a.hideNotification;
+    useEffect(function () {
+        if (isShown && isAutoHidden) {
+            var timeout_1 = setTimeout(function () {
+                hideNotification();
+            }, hideDuration);
+            return function () { return clearTimeout(timeout_1); };
+        }
+    }, [isShown, isAutoHidden, hideDuration, hideNotification]);
+    return (_jsx(Popup, __assign({ className: getClassNames('notification', '-', platform), open: isShown, closeOnDocumentClick: false, closeOnEscape: false }, { children: _jsxs("div", __assign({ className: getClassNames('smartapp-notification', '__', type) }, { children: [NOTIFICATION_ICONS[type], _jsxs("div", __assign({ className: "smartapp-notification__content" }, { children: [_jsx("div", { children: message }), action && (_jsx("div", __assign({ className: "smartapp-notification__content--action", onClick: action.onClick }, { children: action.text || CANCEL_ACTION_TEXT })))] }))] })) })));
+};
+export default Notification;

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

@@ -0,0 +1 @@
+export { default } from './Notification';

package/build/main//321/201omponents/Notification/index.js

@@ -0,0 +1 @@
+export { default } from './Notification';

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

@@ -0,0 +1,14 @@
+import { ReactElement } from 'react';
+export interface INotificationProps {
+    isShown: boolean;
+    type?: 'success' | 'info' | 'warning' | 'error';
+    isAutoHidden?: boolean;
+    hideDuration?: number;
+    platform?: 'web' | 'ios' | 'android';
+    message: string | ReactElement;
+    action?: {
+        text?: string;
+        onClick: () => void;
+    };
+    hideNotification: () => void;
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,4 @@
+import { IRadioButtonProps } from './types';
+import '../../styles/stories.module.scss';
+declare const RadioButton: ({ id, isDisabled, isChecked, checkedColor, checkedHoverColor, onChange, }: IRadioButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default RadioButton;

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

@@ -0,0 +1,25 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { DEFAULT_BLUE_ICON_COLOR, DEFAULT_BLUE_ICON_HOVER_COLOR } 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));
+    }, [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 }) })) })));
+};
+export default RadioButton;

package/build/main//321/201omponents/RadioButton/index.d.ts

@@ -0,0 +1 @@
+export { default } from './RadioButton';

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

@@ -0,0 +1 @@
+export { default } from './RadioButton';

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

@@ -0,0 +1,8 @@
+export interface IRadioButtonProps {
+    id: string;
+    isDisabled?: boolean;
+    isChecked?: boolean;
+    checkedColor?: string;
+    checkedHoverColor?: string;
+    onChange: () => void;
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useLayoutEffect, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
 import classNames from 'classnames';
 import { isNull, sortBy } from 'lodash';
 import Stories from 'react-insta-stories';
@@ -19,17 +19,16 @@ import { useSwipeable } from 'react-swipeable';
 import { isEmpty } from 'lodash';
 import { ReactComponent as CloseStoriesIcon } from '../../assets/icons/close-stories.svg';
 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 { DEFAULT_BACKGROUND_BUTTON_COLOR, DEFAULT_FONT_FAMILY, DEFAULT_TEXT_BUTTON_COLOR, NUMBER_OF_STORIES_FOR_ROUND_INDICATORS, PLATFORM, } from '../../constants';
+import { getColor, isIosPlatform, isWebPlatform } from '../../helpers';
 import '../../styles/stories.module.scss';
 var storyItemBaseStyles = {
     height: '100%',
     width: '100%',
 };
-var progressContainerStyles = function (platform) { return ({
-    gap: '12px',
+var progressContainerStyles = function (platform, storiesCount) { return ({
+    gap: storiesCount >= NUMBER_OF_STORIES_FOR_ROUND_INDICATORS ? '8px' : '12px',
     width: '100%',
-    maxWidth: isIosPlatform(platform) || isAndroidPlatform(platform) ? '139px' : '198px',
     filter: 'none',
     paddingTop: isWebPlatform(platform) ? '22px' : isIosPlatform(platform) ? '21px' : '26px',
     paddingLeft: '0',
@@ -41,6 +40,7 @@ var progressWrapperStyles = {
     borderRadius: '51px',
     background: 'rgba(255, 255, 255, 0.4)',
     margin: 0,
+    overflow: 'hidden',
 };
 var progressStyles = {
     height: '4px',
@@ -113,10 +113,10 @@ var StoriesComponent = function (_a) {
             changeGroupStoriesToViewed(activeGroupStories);
         }
     };
-    var getCurrentStoryIndex = function () { return stories.findIndex(function (_a) {
+    var getCurrentStoryIndex = useCallback(function () { return (stories.findIndex(function (_a) {
         var id = _a.id;
         return id === activeStoryId;
-    }); };
+    })); }, [stories, activeStoryId]);
     var onPrevious = function () {
         activeStoryId === stories[0].id ? handlePrevious() : onStoryStart(getCurrentStoryIndex() - 1);
     };
@@ -131,15 +131,6 @@ var StoriesComponent = function (_a) {
                 // eslint-disable-next-line react-hooks/rules-of-hooks
                 useLayoutEffect(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),
@@ -193,6 +184,19 @@ var StoriesComponent = function (_a) {
             video === null || video === void 0 ? void 0 : video.removeEventListener("pause", pauseVideosOnBackground);
         };
     }, [activeStoryId]);
+    useEffect(function () {
+        var currentStoryIndex = getCurrentStoryIndex();
+        var indicatorsContainer = document.querySelector('.smartapp-stories > div:first-of-type > div:first-of-type');
+        var indicators = Array.from((indicatorsContainer === null || indicatorsContainer === void 0 ? void 0 : indicatorsContainer.children) || []);
+        indicators.forEach(function (indicator, index) {
+            if (indicators.length >= NUMBER_OF_STORIES_FOR_ROUND_INDICATORS) {
+                indicator.style.width = index !== currentStoryIndex ? '4px' : '48px';
+            }
+            else {
+                indicator.style.width = '38px';
+            }
+        });
+    }, [getCurrentStoryIndex]);
     useEffect(function () {
         var popupElement = document.querySelector('.smartapp-stories-content');
         var videoWrapper = document.querySelector('.smartapp-stories-content > div > div > div:nth-child(2) > div');
@@ -226,7 +230,7 @@ var StoriesComponent = function (_a) {
                     _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, onNext: onNext, onAllStoriesEnd: handleNext, progressContainerStyles: progressContainerStyles(platform), progressWrapperStyles: progressWrapperStyles, progressStyles: progressStyles }, activeGroupStories.id) })), _jsx(CloseStoriesIcon, { className: classNames((_c = {
+                    _b)) }, swipeableHandlers, { children: _jsx(Stories, { defaultInterval: 6000, width: "100%", height: "100%", stories: getStories(), onStoryStart: onStoryStart, onPrevious: onPrevious, onNext: onNext, onAllStoriesEnd: handleNext, progressContainerStyles: progressContainerStyles(platform, stories.length), progressWrapperStyles: progressWrapperStyles, progressStyles: progressStyles }, activeGroupStories.id) })), _jsx(CloseStoriesIcon, { className: classNames((_c = {
                         'smartapp-stories__icon': true
                     },
                     _c["smartapp-stories__icon--".concat(platform)] = true,

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

@@ -1,4 +1,4 @@
 import { IToggleProps } from './types';
 import '../../styles/stories.module.scss';
-declare const Toggle: ({ id, checked, onClick }: IToggleProps) => import("react/jsx-runtime").JSX.Element;
+declare const Toggle: ({ id, isDisabled, isChecked, checkedColor, checkedHoverColor, onClick, }: IToggleProps) => import("react/jsx-runtime").JSX.Element;
 export default Toggle;

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

@@ -10,9 +10,18 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import classNames from 'classnames';
+import { DEFAULT_BLUE_ICON_COLOR, DEFAULT_BLUE_ICON_HOVER_COLOR } from '../../constants';
+import { getColor } from '../../helpers';
 import '../../styles/stories.module.scss';
 var Toggle = function (_a) {
-    var _b = _a.id, id = _b === void 0 ? 'toggle' : _b, _c = _a.checked, checked = _c === void 0 ? false : _c, _d = _a.onClick, onClick = _d === void 0 ? function () { return undefined; } : _d;
-    return (_jsx("div", __assign({ className: "smartapp-toggle-wrapper" }, { children: _jsxs("label", __assign({ className: "smartapp-toggle", htmlFor: "smartapp-toggle-".concat(id), onClick: function () { return onClick(); } }, { children: [_jsx("input", { type: "checkbox", id: "smartapp-toggle-".concat(id), checked: checked, disabled: true }), _jsx("span", { className: "smartapp-slider round" })] })) })));
+    var _b = _a.id, id = _b === void 0 ? 'toggle' : _b, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isChecked, isChecked = _d === void 0 ? false : _d, checkedColor = _a.checkedColor, checkedHoverColor = _a.checkedHoverColor, _e = _a.onClick, onClick = _e === void 0 ? function () { return undefined; } : _e;
+    var handleClick = function () { return !isDisabled && onClick(); };
+    useEffect(function () {
+        document.documentElement.style.setProperty('--toggle-color', getColor(checkedColor, DEFAULT_BLUE_ICON_COLOR));
+        document.documentElement.style.setProperty('--toggle-hover-color', getColor(checkedHoverColor, DEFAULT_BLUE_ICON_HOVER_COLOR));
+    }, [checkedColor, checkedHoverColor]);
+    return (_jsx("div", __assign({ className: "smartapp-toggle-wrapper" }, { children: _jsxs("label", __assign({ htmlFor: "smartapp-toggle-".concat(id), className: "smartapp-toggle", onClick: handleClick }, { children: [_jsx("input", { type: "checkbox", id: "smartapp-toggle-".concat(id), checked: isChecked, disabled: true }), _jsx("span", { className: classNames('smartapp-slider', { 'smartapp-slider__disabled': isDisabled }) })] })) })));
 };
 export default Toggle;

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

@@ -1,5 +1,8 @@
 export interface IToggleProps {
     id?: string;
-    checked?: boolean;
+    isDisabled?: boolean;
+    isChecked?: boolean;
+    checkedColor?: string;
+    checkedHoverColor?: string;
     onClick?: () => void;
 }

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

@@ -19,3 +19,6 @@ export { default as Switcher } from './Switcher';
 export { default as Toggle } from './Toggle';
 export { default as Stories } from './Stories';
 export { default as SyncLoader } from './SyncLoader';
+export { default as Modal } from './Modal';
+export { default as Notification } from './Notification';
+export { default as RadioButton } from './RadioButton';

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

@@ -19,3 +19,6 @@ export { default as Switcher } from './Switcher';
 export { default as Toggle } from './Toggle';
 export { default as Stories } from './Stories';
 export { default as SyncLoader } from './SyncLoader';
+export { default as Modal } from './Modal';
+export { default as Notification } from './Notification';
+export { default as RadioButton } from './RadioButton';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expressms/smartapp-ui",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "description": "SmartApp UI library",
   "license": "MIT",
   "main": "build/main/index.js",