@itcase/ui 1.1.9 → 1.1.11

package/dist/cjs/components.js

@@ -1,64 +1,65 @@
 'use strict';
 
-var Accordion = require('./Accordion-DcZ9P5kP.js');
-var Avatar = require('./Avatar-C8tufLEH.js');
-var index = require('./components/Badge.js');
-var Breadcrumbs = require('./Breadcrumbs-HubY1qZQ.js');
-var Button = require('./Button-3GkRq8Pv.js');
-var index$1 = require('./components/Caption.js');
-var index$2 = require('./components/Card.js');
-var index$3 = require('./components/Cell.js');
-var index$4 = require('./components/Checkbox.js');
-var index$5 = require('./components/Chips.js');
-var index$6 = require('./components/Choice.js');
-var index$7 = require('./components/Code.js');
-var ContextMenuItem = require('./ContextMenuItem-DmbSoGn1.js');
-var index$8 = require('./components/CookiesWarning.js');
-var index$9 = require('./components/DadataHintField.js');
-var index$a = require('./components/DatePicker.js');
-var Divider = require('./Divider-CIYsHYud.js');
-var Dot = require('./Dot-vDSigHDs.js');
-var index$b = require('./components/Drawer.js');
-var DropdownItem = require('./DropdownItem-Bl-Ghc_6.js');
-var FlexItem = require('./FlexItem-BnORv6q3.js');
-var SelectField = require('./SelectField-BJTu7BXO.js');
-var GridRow = require('./GridRow-mzs0CkNG.js');
-var Group = require('./Group-4zWTDvKx.js');
-var Icon = require('./Icon-UBahY607.js');
-var index$c = require('./components/Image.js');
-var index$d = require('./components/Input.js');
-var index$e = require('./components/InputPassword.js');
-var index$f = require('./components/Label.js');
-var index$g = require('./components/LanguageSelector.js');
-var Link = require('./Link-BoShjCEw.js');
-var ListItem = require('./ListItem-MrHApmF3.js');
-var index$h = require('./components/Loader.js');
-var index$i = require('./components/Logo.js');
-var index$j = require('./components/Menu.js');
-var index$k = require('./components/MenuItem.js');
-var ModalLoader = require('./ModalLoader-4mmV5G4E.js');
-var NotificationList = require('./NotificationList-DnI8DqyE.js');
-var index$l = require('./components/Page.js');
-var index$m = require('./components/Pagination.js');
-var index$n = require('./components/Radio.js');
-var index$o = require('./components/RangeSlider.js');
-var index$p = require('./components/Response.js');
-var index$q = require('./components/Scrollbar.js');
-var SearchResult = require('./SearchResult-bTwR5A-g.js');
-var index$r = require('./components/Segmented.js');
-var index$s = require('./components/Select.js');
-var SiteMenuButton = require('./SiteMenuButton-BGi0gR1z.js');
-var index$t = require('./components/Swiper.js');
-var index$u = require('./components/Switch.js');
-var TabGroup = require('./TabGroup-DIWmGIp2.js');
-var Text = require('./Text-D7Aq1i5R.js');
-var index$v = require('./components/Textarea.js');
-var index$w = require('./components/Tile.js');
-var index$x = require('./components/Title.js');
-var index$y = require('./components/Tooltip.js');
-var index$z = require('./components/Video.js');
-var index$A = require('./components/Wrapper.js');
-require('./jsx-runtime-BCmQOGxJ.js');
+var Accordion = require('./Accordion-BPSF6By2.js');
+var Avatar = require('./Avatar-qFiPDVgu.js');
+var Badge = require('./Badge-zYZKun4n.js');
+var Breadcrumbs = require('./Breadcrumbs-BIhuwcTG.js');
+var Button = require('./Button-C4_FRFZe.js');
+var Caption = require('./Caption-f-OM1D-G.js');
+var Card = require('./Card--te6xVsm.js');
+var Cell = require('./Cell-zxHVzKan.js');
+var Checkbox = require('./Checkbox-B-1dwjii.js');
+var Chips = require('./Chips-BcJttN22.js');
+var Choice = require('./Choice-CPPQ2o2L.js');
+var Code = require('./Code-ByEr4h2R.js');
+var ContextMenuItem = require('./ContextMenuItem-BME-EZ-y.js');
+var CookiesWarning = require('./CookiesWarning-CfEwpkS8.js');
+var DadataHintField = require('./DadataHintField-DQHPRLs0.js');
+var DatePicker = require('./DatePicker-BiCqQFyi.js');
+var Divider = require('./Divider-D92wY8Fn.js');
+var Dot = require('./Dot-CKWexdtn.js');
+var Drawer = require('./Drawer-BGZBaR2Q.js');
+var DropdownItem = require('./DropdownItem-bjpmcFH1.js');
+var FlexItem = require('./FlexItem-2KlvlTJY.js');
+var SwitchField = require('./SwitchField-CdpEiqFv.js');
+var GridRow = require('./GridRow-OxLsh_2P.js');
+var Group = require('./Group-C9BxTKs-.js');
+var Icon = require('./Icon-DzJtiBBk.js');
+var Image = require('./Image-CCx6QWZj.js');
+var Input = require('./Input-BqKlyvEt.js');
+var InputPassword = require('./InputPassword-DHgR_QTK.js');
+var Label = require('./Label-BcwjtIk7.js');
+var LanguageSelector = require('./LanguageSelector-C3i2JJCM.js');
+var Link = require('./Link-3qPujNn9.js');
+var ListItem = require('./ListItem-CvMoKXM-.js');
+var Loader = require('./Loader-2vQxF_aO.js');
+var Logo = require('./Logo-YADZn1N4.js');
+var Menu = require('./Menu-CDlB7QNf.js');
+var MenuItem = require('./MenuItem-4uVtNhb4.js');
+var ModalLoader = require('./ModalLoader-A2KkSC3x.js');
+var NotificationList = require('./NotificationList-BTvz_kvZ.js');
+var index = require('./components/Page.js');
+var Pagination = require('./Pagination-B0-KGWSv.js');
+var Radio = require('./Radio-Cvbuwkx3.js');
+var RangeSlider = require('./RangeSlider-Dy53bTyY.js');
+var Response = require('./Response-XesiDp89.js');
+var Scrollbar = require('./Scrollbar-DOujlQOb.js');
+var SearchResult = require('./SearchResult-D147g0-n.js');
+var Segmented = require('./Segmented-BHblcvck.js');
+var index$1 = require('./components/Select.js');
+var SiteMenuButton = require('./SiteMenuButton-ChUD4CgP.js');
+var Swiper = require('./Swiper-DHjkfpbP.js');
+var Switch = require('./Switch-K1p9h3aF.js');
+var TabGroup = require('./TabGroup-Vn5oELiY.js');
+var Text = require('./Text-C8vlKWNN.js');
+var Textarea = require('./Textarea-WIGhhrgu.js');
+var Tile = require('./Tile-j8EfyWDg.js');
+var Title = require('./Title-C3lN-EvU.js');
+var Tooltip = require('./Tooltip-CnnungCh.js');
+var Video = require('./Video-B_xqvgag.js');
+var Wrapper = require('./Wrapper-DravIzND.js');
+require('./_tslib-CKiUdo7p.js');
+require('./jsx-runtime-BBxmckJR.js');
 require('react');
 require('clsx');
 require('lodash/castArray');
@@ -72,90 +73,64 @@ require('./hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('./hooks/styleAttributes.js');
-require('./constants/componentProps/shape.js');
-require('./constants/componentProps/direction.js');
-require('./constants/componentProps/fill.js');
-require('./constants/componentProps/position.js');
-require('./constants/componentProps/width.js');
-require('./constants/componentProps/fillGradient.js');
-require('./constants/componentProps/captionPosition.js');
-require('./constants/componentProps/size.js');
-require('./constants/componentProps/horizontalResizeMode.js');
-require('./constants/componentProps/textSize.js');
-require('./constants/componentProps/textColor.js');
-require('./constants/componentProps/textAlign.js');
-require('./constants/componentProps/borderType.js');
 require('js-cookie');
 require('crypto');
 require('react-dom');
-require('./floating-ui.dom-C34fOuI9.js');
-require('./constants/componentProps/type.js');
-require('./constants/componentProps/underline.js');
+require('./floating-ui.dom-CW7i9VDu.js');
 require('react-inlinesvg');
-require('./constants/componentProps/borderColor.js');
-require('./constants/componentProps/resizeMode.js');
-require('./constants/componentProps/textStyle.js');
-require('./constants/componentProps/textWeight.js');
-require('./constants/componentProps/align.js');
-require('./constants/componentProps/alignDirection.js');
-require('./constants/componentProps/textColorActive.js');
-require('./constants/componentProps/textColorHover.js');
-require('./constants/componentProps/textGradient.js');
-require('./constants/componentProps/textWrap.js');
-require('./components/Overlay.js');
+require('./Overlay-18bnPZPd.js');
 require('./context/Notifications.js');
 require('uuid');
+require('./constants/componentProps/alignDirection.js');
+require('./constants/componentProps/align.js');
+require('./constants/componentProps/fill.js');
+require('./constants/componentProps/horizontalResizeMode.js');
+require('./constants/componentProps/position.js');
 require('./constants/componentProps/verticalResizeMode.js');
 require('lodash/ceil');
 require('react-paginate');
 require('rc-slider');
-require('./constants/componentProps/borderWidth.js');
-require('./constants/componentProps/fillHover.js');
-require('./constants/componentProps/titleSize.js');
 require('react-scrollbars-custom');
 require('react-select');
-require('./constants/componentProps/stacking.js');
-require('./constants/componentProps/wrap.js');
-require('./constants/componentProps/borderColorHover.js');
 
 
 
 exports.Accordion = Accordion.Accordion;
 exports.AccordionItem = Accordion.AccordionItem;
 exports.Avatar = Avatar.Avatar;
-exports.Badge = index.Badge;
-exports.badgeConfig = index.badgeConfig;
+exports.Badge = Badge.Badge;
+exports.badgeConfig = Badge.badgeConfig;
 exports.Breadcrumbs = Breadcrumbs.Breadcrumbs;
 exports.BreadcrumbsItem = Breadcrumbs.BreadcrumbsItem;
 exports.Button = Button.Button;
 exports.buttonConfig = Button.buttonConfig;
-exports.Caption = index$1.Caption;
-exports.Card = index$2.Card;
-exports.Cell = index$3.Cell;
-exports.Checkbox = index$4.Checkbox;
-exports.checkboxConfig = index$4.checkboxConfig;
-exports.Chips = index$5.Chips;
-exports.chipsConfig = index$5.chipsConfig;
-exports.Choice = index$6.Choice;
-exports.choiceConfig = index$6.choiceConfig;
-exports.Code = index$7.Code;
+exports.Caption = Caption.Caption;
+exports.Card = Card.Card;
+exports.Cell = Cell.Cell;
+exports.Checkbox = Checkbox.Checkbox;
+exports.checkboxConfig = Checkbox.checkboxConfig;
+exports.Chips = Chips.Chips;
+exports.chipsConfig = Chips.chipsConfig;
+exports.Choice = Choice.Choice;
+exports.choiceConfig = Choice.choiceConfig;
+exports.Code = Code.Code;
 exports.ContextMenu = ContextMenuItem.ContextMenu;
 exports.ContextMenuItem = ContextMenuItem.ContextMenuItem;
-exports.CookiesWarning = index$8.CookiesWarning;
-exports.DadataHintField = index$9.DadataHintField;
-exports.DatePickerInput = index$a.DatePickerInput;
+exports.CookiesWarning = CookiesWarning.CookiesWarning;
+exports.DadataHintField = DadataHintField.DadataHintField;
+exports.DatePickerInput = DatePicker.DatePickerInput;
 exports.Divider = Divider.Divider;
 exports.Dot = Dot.Dot;
-exports.Drawer = index$b.Drawer;
+exports.Drawer = Drawer.Drawer;
 exports.Dropdown = DropdownItem.Dropdown;
 exports.DropdownItem = DropdownItem.DropdownItem;
 exports.Flex = FlexItem.Flex;
 exports.FlexItem = FlexItem.FlexItem;
-exports.ChoiceField = SelectField.ChoiceField;
-exports.FormField = SelectField.FormField;
-exports.PasswordField = SelectField.PasswordField;
-exports.SelectField = SelectField.SelectField;
-exports.SwitchField = SelectField.SwitchField;
+exports.ChoiceField = SwitchField.ChoiceField;
+exports.FormField = SwitchField.FormField;
+exports.PasswordField = SwitchField.PasswordField;
+exports.SelectField = SwitchField.SelectField;
+exports.SwitchField = SwitchField.SwitchField;
 exports.Grid = GridRow.Grid;
 exports.GridItem = GridRow.GridItem;
 exports.GridRow = GridRow.GridRow;
@@ -163,72 +138,72 @@ exports.Group = Group.Group;
 exports.groupConfig = Group.groupConfig;
 exports.Icon = Icon.Icon;
 exports.iconConfig = Icon.iconConfig;
-exports.Image = index$c.Image;
-exports.Input = index$d.Input;
-exports.inputConfig = index$d.inputConfig;
-exports.inputPasswordConfig = index$e.inputPasswordConfig;
-exports.Label = index$f.Label;
-exports.labelConfig = index$f.labelConfig;
-exports.LanguageSelector = index$g.LanguageSelector;
+exports.Image = Image.Image;
+exports.Input = Input.Input;
+exports.inputConfig = Input.inputConfig;
+exports.inputPasswordConfig = InputPassword.inputPasswordConfig;
+exports.Label = Label.Label;
+exports.labelConfig = Label.labelConfig;
+exports.LanguageSelector = LanguageSelector.LanguageSelector;
 exports.Link = Link.Link;
 exports.LinkWrapper = Link.LinkWrapper;
 exports.linkConfig = Link.linkConfig;
 exports.List = ListItem.List;
 exports.ListItem = ListItem.ListItem;
-exports.Loader = index$h.Loader;
-exports.loaderConfig = index$h.loaderConfig;
-exports.Logo = index$i.Logo;
-exports.Menu = index$j.Menu;
-exports.MenuItem = index$k.MenuItem;
-exports.menuItemConfig = index$k.menuItemConfig;
+exports.Loader = Loader.Loader;
+exports.loaderConfig = Loader.loaderConfig;
+exports.Logo = Logo.Logo;
+exports.Menu = Menu.Menu;
+exports.MenuItem = MenuItem.MenuItem;
+exports.menuItemConfig = MenuItem.menuItemConfig;
 exports.Modal = ModalLoader.Modal;
 exports.ModalLoader = ModalLoader.ModalLoader;
 exports.NotificationItem = NotificationList.NotificationItem;
 exports.NotificationList = NotificationList.NotificationList;
 exports.notificationItemConfig = NotificationList.notificationItemConfig;
-exports.Page = index$l.Page;
-exports.Pagination = index$m.Pagination;
-exports.Radio = index$n.Radio;
-exports.radioConfig = index$n.radioConfig;
-exports.RangeSlider = index$o.RangeSlider;
-exports.Response = index$p.Response;
-exports.responseConfig = index$p.responseConfig;
-exports.Scrollbar = index$q.Scrollbar;
+exports.Page = index.Page;
+exports.Pagination = Pagination.Pagination;
+exports.Radio = Radio.Radio;
+exports.radioConfig = Radio.radioConfig;
+exports.RangeSlider = RangeSlider.RangeSlider;
+exports.Response = Response.Response;
+exports.responseConfig = Response.responseConfig;
+exports.Scrollbar = Scrollbar.Scrollbar;
 exports.SearchInput = SearchResult.SearchInput;
 exports.SearchResult = SearchResult.SearchResult;
-exports.Segmented = index$r.Segmented;
-exports.segmentedConfig = index$r.segmentedConfig;
-exports.Select = index$s.Select;
-exports.SelectClearIndicator = index$s.SelectClearIndicator;
-exports.SelectControl = index$s.SelectControl;
-exports.SelectDropdownIndicator = index$s.SelectDropdownIndicator;
-exports.SelectGroupHeading = index$s.SelectGroupHeading;
-exports.SelectIndicatorsContainer = index$s.SelectIndicatorsContainer;
-exports.SelectInput = index$s.SelectInput;
-exports.SelectMenu = index$s.SelectMenu;
-exports.SelectMultiValueContainer = index$s.SelectMultiValueContainer;
-exports.SelectMultiValueLabel = index$s.SelectMultiValueLabel;
-exports.SelectMultiValueRemove = index$s.SelectMultiValueRemove;
-exports.SelectOption = index$s.SelectOption;
-exports.SelectPlaceholder = index$s.SelectPlaceholder;
-exports.SelectSingleValue = index$s.SelectSingleValue;
-exports.SelectValueContainer = index$s.SelectValueContainer;
-exports.selectConfig = index$s.selectConfig;
+exports.Segmented = Segmented.Segmented;
+exports.segmentedConfig = Segmented.segmentedConfig;
+exports.Select = index$1.Select;
+exports.SelectClearIndicator = index$1.SelectClearIndicator;
+exports.SelectControl = index$1.SelectControl;
+exports.SelectDropdownIndicator = index$1.SelectDropdownIndicator;
+exports.SelectGroupHeading = index$1.SelectGroupHeading;
+exports.SelectIndicatorsContainer = index$1.SelectIndicatorsContainer;
+exports.SelectInput = index$1.SelectInput;
+exports.SelectMenu = index$1.SelectMenu;
+exports.SelectMultiValueContainer = index$1.SelectMultiValueContainer;
+exports.SelectMultiValueLabel = index$1.SelectMultiValueLabel;
+exports.SelectMultiValueRemove = index$1.SelectMultiValueRemove;
+exports.SelectOption = index$1.SelectOption;
+exports.SelectPlaceholder = index$1.SelectPlaceholder;
+exports.SelectSingleValue = index$1.SelectSingleValue;
+exports.SelectValueContainer = index$1.SelectValueContainer;
+exports.selectConfig = index$1.selectConfig;
 exports.SiteMenu = SiteMenuButton.SiteMenu;
 exports.SiteMenuButton = SiteMenuButton.SiteMenuButton;
-exports.Swiper = index$t.Swiper;
-exports.Switch = index$u.Switch;
+exports.Swiper = Swiper.Swiper;
+exports.Switch = Switch.Switch;
 exports.Tab = TabGroup.Tab;
 exports.TabGroup = TabGroup.TabGroup;
 exports.tabConfig = TabGroup.tabConfig;
 exports.Text = Text.Text;
 exports.textConfig = Text.textConfig;
-exports.Textarea = index$v.Textarea;
-exports.textareaConfig = index$v.textareaConfig;
-exports.Tile = index$w.Tile;
-exports.Title = index$x.Title;
-exports.titleConfig = index$x.titleConfig;
-exports.Tooltip = index$y.Tooltip;
-exports.tooltipConfig = index$y.tooltipConfig;
-exports.Video = index$z.Video;
-exports.Wrapper = index$A.Wrapper;
+exports.Textarea = Textarea.Textarea;
+exports.textareaConfig = Textarea.textareaConfig;
+exports.Tile = Tile.Tile;
+exports.Title = Title.Title;
+exports.titleConfig = Title.titleConfig;
+exports.Tooltip = Tooltip.Tooltip;
+exports.tooltipConfig = Tooltip.tooltipConfig;
+exports.Video = Video.Video;
+exports.Wrapper = Wrapper.Wrapper;

package/dist/cjs/constants/componentProps/iconSize.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const iconSizeProps = [null, /* eslint-disable */
-'14', 14, '16', 16, '24', 24, '32', 32, '40', 40, '60', 60, '64', 64, '144', 144
+'12', 12, '14', 14, '16', 16, '24', 24, '32', 32, '40', 40, '60', 60, '64', 64, '144', 144
 /* eslint-enable */];
 
 exports.default = iconSizeProps;

package/dist/cjs/constants/componentProps/sizePX.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const sizePXProps = [null, /* eslint-disable */
-'14', 14, '16', 16, '24', 24, '32', 32, '40', 40, '48', 48, '56', 56, '60', 60, '64', 64, '72', 72, '80', 80, '96', 96, '112', 112, '144', 144, '240', 240
+'14', 14, '16', 16, '20', 20, '24', 24, '32', 32, '40', 40, '48', 48, '56', 56, '60', 60, '64', 64, '72', 72, '80', 80, '96', 96, '112', 112, '144', 144, '240', 240
 /* eslint-enable */];
 
 exports.default = sizePXProps;

package/dist/cjs/constants.js

@@ -35,7 +35,6 @@ var sizePX = require('./constants/componentProps/sizePX.js');
 var size = require('./constants/componentProps/size.js');
 var stacking = require('./constants/componentProps/stacking.js');
 var state = require('./constants/componentProps/state.js');
-var strokeColor = require('./constants/componentProps/strokeColor.js');
 var textAlign = require('./constants/componentProps/textAlign.js');
 var textColorActive = require('./constants/componentProps/textColorActive.js');
 var textColorHover = require('./constants/componentProps/textColorHover.js');
@@ -91,7 +90,6 @@ exports.sizePXProps = sizePX.default;
 exports.sizeProps = size.default;
 exports.stackingProps = stacking.default;
 exports.stateProps = state.default;
-exports.strokeColorProps = strokeColor.default;
 exports.textAlignProps = textAlign.default;
 exports.textColorActiveProps = textColorActive.default;
 exports.textColorHoverProps = textColorHover.default;

package/dist/cjs/context/Notifications.js

@@ -23,61 +23,53 @@ const NotificationsAPIContext = /*#__PURE__*/React.createContext({
   notificationStatuses: STATUSES
 });
 function NotificationsProvider(props) {
-  const [notifications, setNotifications] = React.useState([]);
-  const hideNotifications = React.useCallback(id => {
-    setNotifications(prevState => {
-      const currentNotification = prevState.find(notification => notification.id === id);
-      if (currentNotification) {
-        if (typeof currentNotification.onClose === 'function') {
-          currentNotification.onClose();
+  const {
+    children,
+    initialNotificationsList = []
+  } = props;
+  const [notificationsList, setNotificationsList] = React.useState(() => {
+    // We need to set id to every notification item and original list also be have new id's
+    return (initialNotificationsList || []).map(notificationItem => {
+      return createNotification(notificationItem, notificationItem.onClose);
+    });
+  });
+  const hideNotifications = React.useCallback(targetId => {
+    // If not target, then nothing to hide
+    if (!targetId) {
+      return;
+    }
+    setNotificationsList(prevState => {
+      const newState = prevState.filter(notificationItem => {
+        // Check on need to hide, if current notification is target for hide
+        const isNeedToHide = String(notificationItem.id) === String(targetId);
+        // Callback for close if exists
+        if (isNeedToHide && typeof notificationItem.onClose === 'function') {
+          notificationItem.onClose();
         }
-        return prevState.filter(notification => notification.id !== id);
-      }
-      return prevState;
+        // Save in state if no need to hide
+        return !isNeedToHide;
+      });
+      // Set new notifications list without target item to state
+      return newState;
     });
   }, []);
   const showNotification = React.useCallback((notification, onClose) => {
-    let id = uuid.v4().split('-')[0];
-    let title = '';
-    let text = '';
-    let status = STATUSES.warning;
-    let closeByTime = 4500;
-    let textColor = '';
-    if (typeof notification === 'string') {
-      text = notification;
-    } else if (typeof notification === 'object') {
-      id = notification.id ?? id;
-      title = notification.title ?? title;
-      text = notification.text ?? text;
-      status = notification.status ?? status;
-      closeByTime = notification.closeByTime ?? closeByTime;
-    }
-    switch (status) {
-      case 'success':
-        textColor = 'successTextPrimary';
-        break;
-      case 'info':
-        textColor = 'infoTextPrimary';
-        break;
-      case 'error':
-        textColor = 'errorTextPrimary';
-        break;
-      case 'warning':
-        textColor = 'warningTextPrimary';
-        break;
-    }
-    setNotifications(prevState => [...prevState, {
-      id: id,
-      title: title,
-      text: text,
-      status: status,
-      textColor: textColor,
-      onClose: onClose
-    }]);
-    if (closeByTime) {
-      setTimeout(() => hideNotifications(id), closeByTime);
+    const newNotificationItem = createNotification(notification, onClose);
+    setNotificationsList(prevState => {
+      const newState = prevState.slice();
+      const existsNotificationIndex = newState.findIndex(notificationItem => String(notificationItem.id) === String(newNotificationItem.id));
+      if (existsNotificationIndex === -1) {
+        return [...newState, newNotificationItem];
+      }
+      clearTimeout(newState[existsNotificationIndex]._closeTimeout);
+      newState[existsNotificationIndex]._closeTimeout = null;
+      newState[existsNotificationIndex] = newNotificationItem;
+      return newState;
+    });
+    if (newNotificationItem.closeByTime) {
+      newNotificationItem._closeTimeout = setTimeout(() => hideNotifications(newNotificationItem.id), newNotificationItem.closeByTime);
     }
-    return id;
+    return newNotificationItem;
     // eslint-disable-next-line
   }, []);
   const notificationsAPI = React.useMemo(() => ({
@@ -88,14 +80,24 @@ function NotificationsProvider(props) {
   // Functions is never changes, no sense to set as dependencies
   // eslint-disable-next-line
   []);
+  React.useEffect(() => {
+    // Set timeout for initial notifications list one time on first render
+    notificationsList.forEach(notificationItem => {
+      if (notificationItem.closeByTime) {
+        setTimeout(() => hideNotifications(notificationItem.id), notificationItem.closeByTime);
+      }
+    });
+    // eslint-disable-next-line
+  }, []);
   return /*#__PURE__*/React__default.default.createElement(NotificationsAPIContext.Provider, {
     value: notificationsAPI
   }, /*#__PURE__*/React__default.default.createElement(NotificationsContext.Provider, {
-    value: notifications
-  }, props.children));
+    value: notificationsList
+  }, children));
 }
 NotificationsProvider.propTypes = {
-  children: PropTypes__default.default.any
+  children: PropTypes__default.default.any,
+  initialNotificationsList: PropTypes__default.default.array
 };
 function useNotifications() {
   return React.useContext(NotificationsContext);
@@ -103,6 +105,47 @@ function useNotifications() {
 function useNotificationsAPI() {
   return React.useContext(NotificationsAPIContext);
 }
+function createNotification(notification, onClose) {
+  // Default notification item properties
+  let id = uuid.v4().split('-')[0];
+  let title = '';
+  let text = '';
+  let status = STATUSES.warning;
+  let closeByTime = 4500;
+  let textColor = '';
+  if (typeof notification === 'string') {
+    text = notification;
+  } else if (typeof notification === 'object') {
+    id = notification.id ?? id;
+    title = notification.title ?? title;
+    text = notification.text ?? text;
+    status = notification.status ?? status;
+    closeByTime = notification.closeByTime ?? closeByTime;
+  }
+  switch (status) {
+    case 'success':
+      textColor = 'successTextPrimary';
+      break;
+    case 'info':
+      textColor = 'infoTextPrimary';
+      break;
+    case 'error':
+      textColor = 'errorTextPrimary';
+      break;
+    case 'warning':
+      textColor = 'warningTextPrimary';
+      break;
+  }
+  return {
+    id: id,
+    title: title,
+    text: text,
+    status: status,
+    textColor: textColor,
+    closeByTime: closeByTime,
+    onClose: onClose
+  };
+}
 NotificationsProvider.__docgenInfo = {
   "description": "",
   "methods": [],
@@ -114,6 +157,13 @@ NotificationsProvider.__docgenInfo = {
         "name": "any"
       },
       "required": false
+    },
+    "initialNotificationsList": {
+      "description": "",
+      "type": {
+        "name": "array"
+      },
+      "required": false
     }
   }
 };