@jetbrains/ring-ui 5.0.0-beta.9 → 5.0.3

package/dist/list/list.js

@@ -1,4 +1,5 @@
 import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import React, { Component, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -33,9 +34,10 @@ import '../link/clickableLink.js';
 import '../_helpers/link.js';
 import '../avatar/avatar.js';
 import '../global/url.js';
+import 'core-js/modules/es.string.replace.js';
 import '../avatar/fallback-avatar.js';
 import '../checkbox/checkbox.js';
-import '@jetbrains/icons/checkmark';
+import '@jetbrains/icons/checkmark-14px';
 import '@jetbrains/icons/remove-10px';
 import '../icon/icon.js';
 import '../icon/icon__constants.js';
@@ -44,9 +46,6 @@ import '../icon/icon__svg.js';
 import '../_helpers/checkbox.js';
 import '../global/get-event-key.js';
 
-const scheduleScrollListener = scheduleRAF();
-const scheduleHoverListener = scheduleRAF();
-
 function noop() {}
 
 const warnEmptyKey = deprecate(() => {}, 'No key passed for list item with non-string label. It is considered as a bad practice and has been deprecated, please provide a key.');
@@ -103,13 +102,17 @@ class List extends Component {
       scrolledToBottom: false
     });
 
+    _defineProperty(this, "scheduleScrollListener", scheduleRAF());
+
+    _defineProperty(this, "scheduleHoverListener", scheduleRAF());
+
     _defineProperty(this, "virtualizedList", void 0);
 
     _defineProperty(this, "unmounted", void 0);
 
     _defineProperty(this, "container", void 0);
 
-    _defineProperty(this, "hoverHandler", memoize(index => () => scheduleHoverListener(() => {
+    _defineProperty(this, "hoverHandler", memoize(index => () => this.scheduleHoverListener(() => {
       if (this.state.disabledHover) {
         return;
       }
@@ -138,19 +141,19 @@ class List extends Component {
       switch (item.rgItemType) {
         case Type.SEPARATOR:
         case Type.TITLE:
-          return `${item.rgItemType}${isFirst ? '_first' : ''}${item.description ? '_desc' : ''}`;
+          return "".concat(item.rgItemType).concat(isFirst ? '_first' : '').concat(item.description ? '_desc' : '');
 
         case Type.MARGIN:
           return Type.MARGIN;
 
         case Type.CUSTOM:
-          return `${Type.CUSTOM}_${item.key}`;
+          return "".concat(Type.CUSTOM, "_").concat(item.key);
 
         case Type.ITEM:
         case Type.LINK:
         default:
           if (item.details) {
-            return `${Type.ITEM}_${item.details}`;
+            return "".concat(Type.ITEM, "_").concat(item.details);
           }
 
           return Type.ITEM;
@@ -295,7 +298,7 @@ class List extends Component {
       });
     });
 
-    _defineProperty(this, "scrollEndHandler", () => scheduleScrollListener(() => {
+    _defineProperty(this, "scrollEndHandler", () => this.scheduleScrollListener(() => {
       const innerContainer = this.inner;
 
       if (innerContainer) {
@@ -339,7 +342,7 @@ class List extends Component {
       const itemId = this.getId(item); // top and bottom margins
 
       if (index === 0 || index === this.props.data.length + 1 || item.rgItemType === Type.MARGIN) {
-        itemKey = key || `${Type.MARGIN}_${index}`;
+        itemKey = key || "".concat(Type.MARGIN, "_").concat(index);
         el = /*#__PURE__*/React.createElement("div", {
           style: {
             height: Dimension.MARGIN
@@ -419,7 +422,7 @@ class List extends Component {
             break;
 
           default:
-            throw new Error(`Unknown menu element type: ${itemProps.rgItemType}`);
+            throw new Error("Unknown menu element type: ".concat(itemProps.rgItemType));
         }
 
         el = /*#__PURE__*/React.createElement(ItemComponent, itemProps);
@@ -525,24 +528,28 @@ class List extends Component {
       }
     }
 
-    if (activeIndex == null && prevState.activeIndex == null && shouldActivateFirstItem(nextProps)) {
+    return nextState;
+  }
+
+  componentDidMount() {
+    document.addEventListener('mousemove', this.onDocumentMouseMove);
+    document.addEventListener('keydown', this.onDocumentKeyDown, true);
+    const {
+      data,
+      activeIndex
+    } = this.props;
+
+    if (activeIndex == null && shouldActivateFirstItem(this.props)) {
       const firstActivatableIndex = data.findIndex(isActivatable);
 
       if (firstActivatableIndex >= 0) {
-        Object.assign(nextState, {
+        this.setState({
           activeIndex: firstActivatableIndex,
           activeItem: data[firstActivatableIndex],
           needScrollToActive: true
         });
       }
     }
-
-    return nextState;
-  }
-
-  componentDidMount() {
-    document.addEventListener('mousemove', this.onDocumentMouseMove);
-    document.addEventListener('keydown', this.onDocumentKeyDown, true);
   }
 
   shouldComponentUpdate(nextProps, nextState) {
@@ -617,14 +624,14 @@ class List extends Component {
 
     if (identificator && !isString) {
       warnEmptyKey();
-      `${itemProps.rgItemType}_${JSON.stringify(identificator)}`;
+      "".concat(itemProps.rgItemType, "_").concat(JSON.stringify(identificator));
     }
 
-    return `${itemProps.rgItemType}_${identificator}`;
+    return "".concat(itemProps.rgItemType, "_").concat(identificator);
   }
 
   getId(item) {
-    return item != null ? `${this.id}:${item.key || this._deprecatedGenerateKeyFromContent(item)}` : undefined;
+    return item != null ? "".concat(this.id, ":").concat(item.key || this._deprecatedGenerateKeyFromContent(item)) : undefined;
   }
 
   get inner() {

package/dist/list/list__custom.js

@@ -1,4 +1,5 @@
 import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';

package/dist/list/list__item.js

@@ -1,4 +1,5 @@
 import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -9,9 +10,10 @@ import Icon from '../icon/icon.js';
 import getUID from '../global/get-uid.js';
 import { m as modules_3b67a421 } from '../_helpers/list.js';
 import '../global/url.js';
+import 'core-js/modules/es.string.replace.js';
 import '../global/dom.js';
 import '../avatar/fallback-avatar.js';
-import '@jetbrains/icons/checkmark';
+import '@jetbrains/icons/checkmark-14px';
 import '@jetbrains/icons/remove-10px';
 import '../_helpers/checkbox.js';
 import 'util-deprecate';
@@ -20,7 +22,7 @@ import '../_helpers/icon.js';
 import '../icon/icon__svg.js';
 import '../global/memoize.js';
 
-var modules_5b0fb3e8 = {"unit":"8px","footer-height":"64px","breakpoint-small":"640px","breakpoint-middle":"960px","breakpoint-large":"1200px","extra-small-screen-media":"(max-width:639px)","small-screen-media":"(min-width:640px) and (max-width:959px)","middle-screen-media":"(min-width:960px) and (max-width:1199px)","large-screen-media":"(min-width:1200px)","clearfix":"clearfix_rui_33bf","font":"font_rui_33bf","font-lower":"fontLower_rui_33bf font_rui_33bf","font-smaller":"fontSmaller_rui_33bf fontLower_rui_33bf font_rui_33bf","font-smaller-lower":"fontSmallerLower_rui_33bf fontSmaller_rui_33bf fontLower_rui_33bf font_rui_33bf","font-larger-lower":"fontLargerLower_rui_33bf fontLower_rui_33bf font_rui_33bf","font-larger":"fontLarger_rui_33bf fontLargerLower_rui_33bf fontLower_rui_33bf font_rui_33bf","thin-font":"thinFont_rui_33bf","monospace-font":"monospaceFont_rui_33bf","ellipsis":"ellipsis_rui_33bf","resetButton":"resetButton_rui_33bf"};
+var modules_5b0fb3e8 = {"unit":"8px","footer-height":"64px","breakpoint-small":"640px","breakpoint-middle":"960px","breakpoint-large":"1200px","extra-small-screen-media":"(max-width: 639px)","small-screen-media":"(min-width: 640px) and (max-width: 959px)","middle-screen-media":"(min-width: 960px) and (max-width: 1199px)","large-screen-media":"(min-width: 1200px)","clearfix":"clearfix_rui_8bff","font":"font_rui_8bff","font-lower":"font-lower_rui_8bff font_rui_8bff","font-smaller":"font-smaller_rui_8bff font-lower_rui_8bff font_rui_8bff","font-smaller-lower":"font-smaller-lower_rui_8bff font-smaller_rui_8bff font-lower_rui_8bff font_rui_8bff","font-larger-lower":"font-larger-lower_rui_8bff font-lower_rui_8bff font_rui_8bff","font-larger":"font-larger_rui_8bff font-larger-lower_rui_8bff font-lower_rui_8bff font_rui_8bff","thin-font":"thin-font_rui_8bff","monospace-font":"monospace-font_rui_8bff","ellipsis":"ellipsis_rui_8bff","resetButton":"resetButton_rui_8bff"};
 
 /**
  * @constructor
@@ -88,7 +90,7 @@ class ListItem extends PureComponent {
       [modules_3b67a421.padded]: icon !== undefined || checkbox !== undefined || glyph !== undefined
     });
     const style = {
-      paddingLeft: `${(Number(level) || 0) * RING_UNIT + DEFAULT_PADDING + (showCheckbox ? CHECKBOX_WIDTH : 0)}px`
+      paddingLeft: "".concat((Number(level) || 0) * RING_UNIT + DEFAULT_PADDING + (showCheckbox ? CHECKBOX_WIDTH : 0), "px")
     };
     let computedTitle = null;
 
@@ -160,7 +162,7 @@ class ListItem extends PureComponent {
     }), icon && /*#__PURE__*/React.createElement("div", {
       className: modules_3b67a421.icon,
       style: {
-        backgroundImage: `url("${icon}")`
+        backgroundImage: "url(\"".concat(icon, "\")")
       }
     }), rightNodes)), details && /*#__PURE__*/React.createElement("div", {
       className: detailsClasses

package/dist/list/list__link.js

@@ -7,6 +7,7 @@ import joinDataTestAttributes from '../global/data-tests.js';
 import { m as modules_3b67a421 } from '../_helpers/list.js';
 import 'focus-visible';
 import '../global/memoize.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import '../link/clickableLink.js';
 import '../_helpers/link.js';
 
@@ -31,6 +32,7 @@ class ListLink extends PureComponent {
       LinkComponent,
       compact,
       hoverClassName,
+      children,
       ...restProps
     } = this.props;
     const classes = classNames(modules_3b67a421.item, className, {
@@ -45,7 +47,7 @@ class ListLink extends PureComponent {
       hover: hover && !disabled,
       className: classes,
       "data-test": joinDataTestAttributes('ring-list-link', dataTest)
-    }), label);
+    }), label !== null && label !== void 0 ? label : children);
   }
 
 }

package/dist/list/list__users-groups-source.js

@@ -1,4 +1,5 @@
 import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import GroupIcon from '@jetbrains/icons/group';
 import HubSourceUsersGroups from '../hub-source/hub-source__users-groups.js';
 import List from './list.js';
@@ -32,9 +33,10 @@ import '../_helpers/list.js';
 import './list__item.js';
 import '../avatar/avatar.js';
 import '../global/url.js';
+import 'core-js/modules/es.string.replace.js';
 import '../avatar/fallback-avatar.js';
 import '../checkbox/checkbox.js';
-import '@jetbrains/icons/checkmark';
+import '@jetbrains/icons/checkmark-14px';
 import '@jetbrains/icons/remove-10px';
 import '../icon/icon.js';
 import '../icon/icon__constants.js';
@@ -56,7 +58,7 @@ const defaultOptions = {
   getPluralForUserCount: count => {
     // eslint-disable-next-line @typescript-eslint/no-magic-numbers
     const plural = count % 10 !== 1 || count % 100 === 11;
-    return `${count} member${plural ? 's' : ''}`;
+    return "".concat(count, " member").concat(plural ? 's' : '');
   }
 };
 var Filter;

package/dist/loader/loader.js

@@ -1,4 +1,5 @@
 import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import joinDataTestAttributes from '../global/data-tests.js';

package/dist/loader/loader__core.js

@@ -1,7 +1,8 @@
 import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
 import { getPixelRatio } from '../global/dom.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 
-var modules_00b5ad26 = {"unit":"8px","canvas":"canvas_rui_e88a","animate":"animate_rui_e88a","rotation-keyframes":"rotationKeyframes_rui_e88a","text":"text_rui_e88a"};
+var modules_00b5ad26 = {"unit":"8px","canvas":"canvas_rui_47a4","animate":"animate_rui_47a4","rotation-keyframes":"rotation-keyframes_rui_47a4","text":"text_rui_47a4"};
 
 const INITIAL_TICKS = 100;
 
@@ -44,7 +45,7 @@ class Particle {
 
   draw(ctx) {
     const alpha = this.life >= 0 ? this.life : 0;
-    ctx.fillStyle = `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, ${alpha})`;
+    ctx.fillStyle = "rgba(".concat(this.color.r, ", ").concat(this.color.g, ", ").concat(this.color.b, ", ").concat(alpha, ")");
     ctx.beginPath();
     ctx.arc(this.x + this.radius, this.y + this.radius, this.radius, 0, Math.PI * 2);
     ctx.fill();
@@ -127,8 +128,8 @@ class LoaderCore {
     this.canvas.width = canvasSize;
     this.canvas.height = canvasSize; //Fixate canvas physical size to avoid real size scaling
 
-    this.canvas.style.width = `${this.props.size}px`;
-    this.canvas.style.height = `${this.props.size}px`;
+    this.canvas.style.width = "".concat(this.props.size, "px");
+    this.canvas.style.height = "".concat(this.props.size, "px");
     this.ctx = this.canvas.getContext('2d');
     (_this$ctx = this.ctx) === null || _this$ctx === void 0 ? void 0 : _this$ctx.scale(pixelRatio, pixelRatio);
     this.height = this.props.size;

package/dist/loader-inline/loader-inline.js

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import joinDataTestAttributes from '../global/data-tests.js';
 import { m as modules_e49a3529 } from '../_helpers/loader-inline.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 
 /**
  * @name Loader Inline

package/dist/loader-inline-ng/loader-inline-ng.js

@@ -7,7 +7,7 @@ import { m as modules_e49a3529 } from '../_helpers/loader-inline.js';
 
 const angularModule = angular.module('Ring.loader-inline', []);
 angularModule.component('rgLoaderInline', {
-  template: `<div data-test="ring-loader-inline-ng" class="${modules_e49a3529.loader}"></div>`
+  template: "<div data-test=\"ring-loader-inline-ng\" class=\"".concat(modules_e49a3529.loader, "\"></div>")
 });
 var loaderInlineNg = angularModule.name;
 

package/dist/loader-ng/loader-ng.js

@@ -1,4 +1,5 @@
 import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import angular from 'angular';
 import RingAngularComponent from '../global/ring-angular-component.js';
 import LoaderCore from '../loader/loader__core.js';

package/dist/loader-screen/loader-screen.js

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import Loader from '../loader/loader.js';
 import { m as modules_122a82e9 } from '../_helpers/loader-screen.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import '../global/data-tests.js';
 import '../loader/loader__core.js';
 import '../global/dom.js';

package/dist/loader-screen-ng/loader-screen-ng.js

@@ -2,6 +2,7 @@ import angular from 'angular';
 import loaderNg from '../loader-ng/loader-ng.js';
 import { m as modules_122a82e9 } from '../_helpers/loader-screen.js';
 import '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import '../global/ring-angular-component.js';
 import '../loader/loader__core.js';
 import '../global/dom.js';
@@ -86,12 +87,7 @@ angularModule.directive('rgLoaderScreen', function rgLoaderScreenDirective() {
     scope: {
       message: '@rgLoaderScreen'
     },
-    template: `
-<div class="${modules_122a82e9.loaderScreen}" ng-if="$root.isLoaderVisible()">
-  <rg-loader class="${modules_122a82e9.loader}"
-    message="{{$root.isInitialLoading() ? message : ''}}"></rg-loader>
-</div>
-    `
+    template: "\n<div class=\"".concat(modules_122a82e9.loaderScreen, "\" ng-if=\"$root.isLoaderVisible()\">\n  <rg-loader class=\"").concat(modules_122a82e9.loader, "\"\n    message=\"{{$root.isInitialLoading() ? message : ''}}\"></rg-loader>\n</div>\n    ")
   };
 });
 var loaderScreenNg = angularModule.name;

package/dist/login-dialog/login-dialog.js

@@ -1,4 +1,5 @@
 import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Dialog from '../dialog/dialog.js';
@@ -26,6 +27,7 @@ import 'util-deprecate';
 import '../icon/icon__constants.js';
 import '../_helpers/icon.js';
 import '../icon/icon__svg.js';
+import 'core-js/modules/es.string.replace.js';
 import '../global/memoize.js';
 import '../link/clickableLink.js';
 import '../global/controls-height.js';
@@ -46,7 +48,7 @@ import '../auth/response-parser.js';
 import 'es6-error';
 import '../global/url.js';
 
-var modules_45da1992 = {"unit":"8px","iFrame":"iFrame_rui_6e5b","dialogContent":"dialogContent_rui_6e5b","nonOpaqueLoader":"nonOpaqueLoader_rui_6e5b","fallbackLinkContainer":"fallbackLinkContainer_rui_6e5b"};
+var modules_45da1992 = {"unit":"8px","iFrame":"iFrame_rui_ea70","dialogContent":"dialogContent_rui_ea70","nonOpaqueLoader":"nonOpaqueLoader_rui_ea70","fallbackLinkContainer":"fallbackLinkContainer_rui_ea70"};
 
 const HUB_AUTH_PAGE_LOGIN_STARTED = 'HUB_AUTH_PAGE_LOGIN_STARTED';
 const HUB_AUTH_PAGE_LOGIN_DIMENSIONS = 'HUB_AUTH_PAGE_LOGIN_DIMENSIONS';

package/dist/login-dialog/service.js

@@ -1,6 +1,8 @@
 import React from 'react';
-import { unmountComponentAtNode, render } from 'react-dom';
+import { unmountComponentAtNode, render } from '../global/react-render-adapter.js';
 import LoginDialog from './login-dialog.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'react-dom';
 import '../_helpers/_rollupPluginBabelHelpers.js';
 import 'prop-types';
 import '../dialog/dialog.js';
@@ -31,6 +33,7 @@ import 'util-deprecate';
 import '../icon/icon__constants.js';
 import '../_helpers/icon.js';
 import '../icon/icon__svg.js';
+import 'core-js/modules/es.string.replace.js';
 import '../global/memoize.js';
 import '../link/clickableLink.js';
 import '../global/controls-height.js';

package/dist/markdown/code.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Code from '../code/code.js';
 import '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import 'classnames';
 import 'highlight.js/lib/core';
 import '../global/normalize-indent.js';

package/dist/markdown/link.js

@@ -5,6 +5,7 @@ import '../_helpers/_rollupPluginBabelHelpers.js';
 import 'focus-visible';
 import 'classnames';
 import '../global/memoize.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import '../global/data-tests.js';
 import '../link/clickableLink.js';
 import '../_helpers/link.js';

package/dist/markdown/markdown.js

@@ -1,4 +1,5 @@
 import { a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import ReactMarkdown from 'react-markdown';
@@ -21,7 +22,7 @@ import '../_helpers/link.js';
 import '../heading/heading.js';
 import 'util-deprecate';
 
-var modules_9c709e64 = {"unit":"8px","p-margin":"10px","inline":"inline_rui_06b6","markdown":"markdown_rui_06b6 font_rui_750f"};
+var modules_9c709e64 = {"unit":"8px","p-margin":"10px","inline":"inline_rui_e3b3","markdown":"markdown_rui_e3b3 font_rui_8bff"};
 
 /**
   * @name Markdown

package/dist/message/message.js

@@ -1,4 +1,5 @@
 import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -8,6 +9,7 @@ import { Directions } from '../popup/popup.consts.js';
 import Icon from '../icon/icon.js';
 import { Button } from '../button/button.js';
 import { T as Theme, m as modules_59717246, a as ThemeProvider } from '../_helpers/theme.js';
+import 'core-js/modules/es.string.replace.js';
 import 'react-dom';
 import '../global/get-uid.js';
 import '../global/schedule-raf.js';
@@ -32,71 +34,75 @@ import '../link/clickableLink.js';
 import '../global/controls-height.js';
 import '../_helpers/button__classes.js';
 
-var modules_8b837449 = {"unit":"8px","padding":"12px","container":"container_rui_07ce","message":"message_rui_07ce","icon":"icon_rui_07ce","title":"title_rui_07ce fontLower_rui_750f font_rui_750f","description":"description_rui_07ce fontSmallerLower_rui_750f fontSmaller_rui_750f fontLower_rui_750f font_rui_750f","button":"button_rui_07ce","tail":"tail_rui_07ce"};
+var modules_8b837449 = {"unit":"8px","padding":"12px","container":"container_rui_f3db","message":"message_rui_f3db","icon":"icon_rui_f3db","title":"title_rui_f3db font-lower_rui_8bff font_rui_8bff","description":"description_rui_f3db","button":"button_rui_f3db","tail":"tail_rui_f3db"};
 
 /**
   * @name Message
   */
 
 const UNIT = 8;
+const TAIL_SIZE = 11;
 
 const getTailOffsets = offset => ({
   [Directions.BOTTOM_RIGHT]: {
     top: 0,
-    left: offset - UNIT,
-    transform: 'rotate(180deg)'
+    left: offset + UNIT,
+    transform: 'rotate(135deg)'
   },
   [Directions.BOTTOM_LEFT]: {
     top: 0,
-    right: offset - UNIT,
-    transform: 'rotate(180deg)'
+    right: offset - UNIT - TAIL_SIZE,
+    transform: 'rotate(135deg)'
   },
   [Directions.BOTTOM_CENTER]: {
     top: 0,
-    left: offset - UNIT,
-    transform: 'rotate(180deg)'
+    left: offset + UNIT,
+    transform: 'rotate(135deg)'
   },
   [Directions.TOP_RIGHT]: {
-    bottom: -UNIT + 1,
-    left: offset - UNIT
+    bottom: -TAIL_SIZE,
+    left: offset - UNIT,
+    transform: 'rotate(-45deg)'
   },
   [Directions.TOP_LEFT]: {
-    bottom: -UNIT + 1,
-    right: offset - UNIT
+    bottom: -TAIL_SIZE,
+    right: offset + UNIT - TAIL_SIZE,
+    transform: 'rotate(-45deg)'
   },
   [Directions.TOP_CENTER]: {
-    bottom: -UNIT + 1,
-    left: offset - UNIT
+    bottom: -TAIL_SIZE,
+    left: offset - UNIT,
+    transform: 'rotate(-45deg)'
   },
   [Directions.RIGHT_TOP]: {
-    bottom: offset - UNIT,
-    left: -UNIT,
-    transform: 'rotate(90deg)'
+    bottom: offset + UNIT - TAIL_SIZE,
+    left: 0,
+    transform: 'rotate(45deg)'
   },
   [Directions.RIGHT_BOTTOM]: {
-    top: offset,
-    left: -UNIT,
-    transform: 'rotate(90deg)'
+    top: offset - UNIT,
+    left: 0,
+    transform: 'rotate(45deg)'
   },
   [Directions.RIGHT_CENTER]: {
-    top: offset,
-    left: -UNIT,
-    transform: 'rotate(90deg)'
+    top: offset - UNIT,
+    left: 0,
+    transform: 'rotate(45deg)'
   },
   [Directions.LEFT_TOP]: {
-    bottom: offset - UNIT,
-    right: -UNIT,
-    transform: 'rotate(-90deg)'
+    bottom: offset - UNIT - TAIL_SIZE,
+    right: -TAIL_SIZE,
+    transform: 'rotate(-135deg)'
   },
   [Directions.LEFT_BOTTOM]: {
-    top: offset,
-    right: -UNIT,
-    transform: 'rotate(-90deg)'
+    top: offset + UNIT,
+    right: -TAIL_SIZE,
+    transform: 'rotate(-135deg)'
   },
   [Directions.LEFT_CENTER]: {
-    top: offset,
-    right: -UNIT,
-    transform: 'rotate(-90deg)'
+    top: offset + UNIT,
+    right: -TAIL_SIZE,
+    transform: 'rotate(-135deg)'
   }
 });
 /**
@@ -192,7 +198,7 @@ class Message extends Component {
     }), icon && /*#__PURE__*/React.createElement(Icon, {
       className: modules_8b837449.icon,
       glyph: icon
-    }), /*#__PURE__*/React.createElement("h1", {
+    }), title && /*#__PURE__*/React.createElement("h1", {
       "data-test": "rgMessageTitle",
       className: modules_8b837449.title
     }, title), children && /*#__PURE__*/React.createElement("div", {
@@ -227,7 +233,7 @@ Message.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   tailClassName: PropTypes.string,
-  title: PropTypes.string.isRequired,
+  title: PropTypes.string,
   icon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
   directions: PropTypes.arrayOf(PropTypes.string),
   direction: PropTypes.string,

package/dist/old-browsers-message/old-browsers-message.js

@@ -1,4 +1,5 @@
 import { isBrowserInWhiteList } from './white-list.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import '../global/sniffer.js';
 import 'sniffr';
 
@@ -34,7 +35,7 @@ function changeSmileClickListener(event) {
       return '\\\\ (x_x) //';
     }
 
-    return `{{ (${getRandomEye()}_${getRandomEye()}) }}`;
+    return "{{ (".concat(getRandomEye(), "_").concat(getRandomEye(), ") }}");
   }
 
   target.innerHTML = getRandomSmile();

package/dist/old-browsers-message/old-browsers-message__stop.js

@@ -1,4 +1,5 @@
 export { stop as default } from './old-browsers-message.js';
 import './white-list.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import '../global/sniffer.js';
 import 'sniffr';

package/dist/old-browsers-message/white-list.js

@@ -1,3 +1,4 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
 import sniffr from '../global/sniffer.js';
 import 'sniffr';