@expressms/smartapp-ui 1.1.5 → 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/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

@@ -20,3 +20,5 @@ 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

@@ -20,3 +20,5 @@ 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.5",
+  "version": "1.1.6",
   "description": "SmartApp UI library",
   "license": "MIT",
   "main": "build/main/index.js",