@jetbrains/ring-ui-built 7.0.0-beta.1 → 7.0.0-beta.3

package/components/auth-dialog/auth-dialog.js

@@ -1,7 +1,7 @@
-import { _ as _defineProperty, a as _inherits, b as _createClass, e as _classCallCheck, f as _callSuper, g as _asyncToGenerator, h as _regeneratorRuntime } from '../_helpers/_rollupPluginBabelHelpers.js';
-import 'core-js/modules/es.array.concat.js';
+import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/es.regexp.exec.js';
 import 'core-js/modules/es.string.replace.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -13,8 +13,6 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import ContentWrapper from '../island/content.js';
 import '../global/data-tests.js';
 import 'core-js/modules/es.array.reduce.js';
-import 'core-js/modules/es.object.entries.js';
-import 'core-js/modules/es.object.to-string.js';
 import '../island/adaptive-island-hoc.js';
 import '../global/linear-function.js';
 import '../_helpers/island.js';
@@ -24,28 +22,13 @@ import '../global/schedule-raf.js';
 import 'react-dom';
 import '@jetbrains/icons/close';
 import '../global/get-uid.js';
-import 'core-js/modules/es.regexp.to-string.js';
 import '../shortcuts/shortcuts.js';
-import 'core-js/modules/es.array.map.js';
 import '../shortcuts/core.js';
-import 'core-js/modules/es.array.find-index.js';
-import 'core-js/modules/es.array.includes.js';
-import 'core-js/modules/es.array.slice.js';
-import 'core-js/modules/es.array.splice.js';
-import 'core-js/modules/es.object.assign.js';
-import 'core-js/modules/es.string.includes.js';
-import 'core-js/modules/es.string.match.js';
 import 'combokeys';
 import '../global/sniffer.js';
 import 'sniffr';
 import '../tab-trap/tab-trap.js';
-import 'core-js/modules/es.array.filter.js';
 import '../global/dom.js';
-import 'core-js/modules/es.array.iterator.js';
-import 'core-js/modules/es.set.js';
-import 'core-js/modules/es.string.split.js';
-import 'core-js/modules/web.dom-collections.for-each.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import '../popup/popup.target.js';
 import '../_helpers/dialog__body-scroll-preventer.js';
 import 'scrollbar-width';
@@ -54,10 +37,7 @@ import '../icon/icon.js';
 import 'util-deprecate';
 import '../icon/icon__constants.js';
 import '../_helpers/icon__svg.js';
-import 'core-js/modules/es.string.starts-with.js';
 import '../global/memoize.js';
-import 'core-js/modules/es.map.js';
-import 'core-js/modules/es.weak-map.js';
 import '../link/clickableLink.js';
 import '../global/controls-height.js';
 import '../_helpers/button__classes.js';
@@ -65,138 +45,107 @@ import '../_helpers/heading.js';
 
 var modules_ae521deb = {"light":"light_rui_2ac4","dialog":"dialog_rui_e5f9","content":"content_rui_e5f9 font_rui_f295","button":"button_rui_e5f9","firstButton":"firstButton_rui_e5f9 button_rui_e5f9","title":"title_rui_e5f9","logo":"logo_rui_e5f9","error":"error_rui_e5f9"};
 
-var AuthDialog = /*#__PURE__*/function (_Component) {
-  function AuthDialog() {
-    var _this;
-    _classCallCheck(this, AuthDialog);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, AuthDialog, [].concat(args));
-    _defineProperty(_this, "state", {
+class AuthDialog extends Component {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "state", {
       retrying: false
     });
-    _defineProperty(_this, "onEscPress", function () {
-      if (_this.props.cancelOnEsc) {
-        _this.props.onCancel();
+    _defineProperty(this, "onEscPress", () => {
+      if (this.props.cancelOnEsc) {
+        this.props.onCancel();
+      }
+    });
+    _defineProperty(this, "onRetryPress", async () => {
+      if (!this.props.onTryAgain || this.state.retrying) {
+        return;
+      }
+      this.setState({
+        retrying: true
+      });
+      try {
+        await this.props.onTryAgain();
+      } catch (e) {
+        // do nothing, error is handled in onTryAgain
+      } finally {
+        this.setState({
+          retrying: false
+        });
       }
     });
-    _defineProperty(_this, "onRetryPress", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            if (!(!_this.props.onTryAgain || _this.state.retrying)) {
-              _context.next = 2;
-              break;
-            }
-            return _context.abrupt("return");
-          case 2:
-            _this.setState({
-              retrying: true
-            });
-            _context.prev = 3;
-            _context.next = 6;
-            return _this.props.onTryAgain();
-          case 6:
-            _context.next = 10;
-            break;
-          case 8:
-            _context.prev = 8;
-            _context.t0 = _context["catch"](3);
-          case 10:
-            _context.prev = 10;
-            _this.setState({
-              retrying: false
-            });
-            return _context.finish(10);
-          case 13:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee, null, [[3, 8, 10, 13]]);
-    })));
-    return _this;
   }
-  _inherits(AuthDialog, _Component);
-  return _createClass(AuthDialog, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      window.addEventListener('online', this.onRetryPress);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      window.removeEventListener('online', this.onRetryPress);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var _this$props = this.props,
-        show = _this$props.show,
-        className = _this$props.className,
-        errorMessage = _this$props.errorMessage,
-        serviceImage = _this$props.serviceImage,
-        serviceName = _this$props.serviceName,
-        loginCaption = _this$props.loginCaption,
-        loginToCaption = _this$props.loginToCaption,
-        confirmLabel = _this$props.confirmLabel,
-        cancelLabel = _this$props.cancelLabel,
-        tryAgainLabel = _this$props.tryAgainLabel,
-        onConfirm = _this$props.onConfirm,
-        onCancel = _this$props.onCancel,
-        onTryAgain = _this$props.onTryAgain;
-      var retrying = this.state.retrying;
-      var defaultTitle = serviceName ? loginToCaption : loginCaption;
-      var title = (this.props.title || defaultTitle).replace('%serviceName%', serviceName !== null && serviceName !== void 0 ? serviceName : '').replace('{{serviceName}}', serviceName !== null && serviceName !== void 0 ? serviceName : '');
-      return /*#__PURE__*/jsx(Dialog, {
-        label: title,
-        "data-test": "ring-auth-dialog",
-        className: className,
-        contentClassName: classNames(className, modules_ae521deb.dialog),
-        onEscPress: this.onEscPress,
-        show: show,
-        trapFocus: true,
-        children: /*#__PURE__*/jsx(ContentWrapper, {
-          children: /*#__PURE__*/jsxs("div", {
-            className: modules_ae521deb.content,
-            children: [serviceImage && /*#__PURE__*/jsx("img", {
-              alt: "".concat(serviceName, " logo"),
-              className: modules_ae521deb.logo,
-              src: serviceImage
-            }), /*#__PURE__*/jsx(H2, {
-              className: modules_ae521deb.title,
-              children: title
-            }), errorMessage && /*#__PURE__*/jsx("div", {
-              className: modules_ae521deb.error,
-              children: errorMessage
-            }), /*#__PURE__*/jsx(Button, {
-              primary: true,
-              className: modules_ae521deb.firstButton,
-              "data-test": "auth-dialog-confirm-button",
-              onClick: onConfirm,
-              children: confirmLabel
-            }), onTryAgain && /*#__PURE__*/jsx(Button, {
-              className: modules_ae521deb.button,
-              "data-test": "auth-dialog-retry-button",
-              onClick: function onClick() {
-                return _this2.onRetryPress();
-              },
-              loader: retrying,
-              disabled: retrying,
-              children: tryAgainLabel
-            }), /*#__PURE__*/jsx(Button, {
-              className: modules_ae521deb.button,
-              "data-test": "auth-dialog-cancel-button",
-              onClick: onCancel,
-              children: cancelLabel
-            })]
-          })
+  componentDidMount() {
+    window.addEventListener('online', this.onRetryPress);
+  }
+  componentWillUnmount() {
+    window.removeEventListener('online', this.onRetryPress);
+  }
+  render() {
+    const {
+      show,
+      className,
+      errorMessage,
+      serviceImage,
+      serviceName,
+      loginCaption,
+      loginToCaption,
+      confirmLabel,
+      cancelLabel,
+      tryAgainLabel,
+      onConfirm,
+      onCancel,
+      onTryAgain
+    } = this.props;
+    const {
+      retrying
+    } = this.state;
+    const defaultTitle = serviceName ? loginToCaption : loginCaption;
+    const title = (this.props.title || defaultTitle).replace('%serviceName%', serviceName !== null && serviceName !== void 0 ? serviceName : '').replace('{{serviceName}}', serviceName !== null && serviceName !== void 0 ? serviceName : '');
+    return /*#__PURE__*/jsx(Dialog, {
+      label: title,
+      "data-test": "ring-auth-dialog",
+      className: className,
+      contentClassName: classNames(className, modules_ae521deb.dialog),
+      onEscPress: this.onEscPress,
+      show: show,
+      trapFocus: true,
+      children: /*#__PURE__*/jsx(ContentWrapper, {
+        children: /*#__PURE__*/jsxs("div", {
+          className: modules_ae521deb.content,
+          children: [serviceImage && /*#__PURE__*/jsx("img", {
+            alt: "".concat(serviceName, " logo"),
+            className: modules_ae521deb.logo,
+            src: serviceImage
+          }), /*#__PURE__*/jsx(H2, {
+            className: modules_ae521deb.title,
+            children: title
+          }), errorMessage && /*#__PURE__*/jsx("div", {
+            className: modules_ae521deb.error,
+            children: errorMessage
+          }), /*#__PURE__*/jsx(Button, {
+            primary: true,
+            className: modules_ae521deb.firstButton,
+            "data-test": "auth-dialog-confirm-button",
+            onClick: onConfirm,
+            children: confirmLabel
+          }), onTryAgain && /*#__PURE__*/jsx(Button, {
+            className: modules_ae521deb.button,
+            "data-test": "auth-dialog-retry-button",
+            onClick: () => this.onRetryPress(),
+            loader: retrying,
+            disabled: retrying,
+            children: tryAgainLabel
+          }), /*#__PURE__*/jsx(Button, {
+            className: modules_ae521deb.button,
+            "data-test": "auth-dialog-cancel-button",
+            onClick: onCancel,
+            children: cancelLabel
+          })]
         })
-      });
-    }
-  }]);
-}(Component);
+      })
+    });
+  }
+}
 _defineProperty(AuthDialog, "propTypes", {
   className: PropTypes.string,
   title: PropTypes.string,
@@ -222,8 +171,8 @@ _defineProperty(AuthDialog, "defaultProps", {
   cancelOnEsc: true,
   confirmLabel: 'Log in',
   cancelLabel: 'Remain a guest',
-  onConfirm: function onConfirm() {},
-  onCancel: function onCancel() {}
+  onConfirm: () => {},
+  onCancel: () => {}
 });
 
 export { AuthDialog as default };

package/components/auth-dialog-service/auth-dialog-service.js

@@ -1,19 +1,17 @@
-import { d as _objectSpread2 } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { b as _objectSpread2 } from '../_helpers/_rollupPluginBabelHelpers.js';
 import { createRoot } from 'react-dom/client';
 import { ControlsHeightContext, getGlobalControlsHeight } from '../global/controls-height.js';
 import AuthDialog from '../auth-dialog/auth-dialog.js';
 import { jsx } from 'react/jsx-runtime';
 import 'react';
-import 'core-js/modules/es.array.concat.js';
 import 'core-js/modules/es.regexp.exec.js';
 import 'core-js/modules/es.string.replace.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import 'prop-types';
 import 'classnames';
 import '../island/island.js';
 import '../global/data-tests.js';
 import 'core-js/modules/es.array.reduce.js';
-import 'core-js/modules/es.object.entries.js';
-import 'core-js/modules/es.object.to-string.js';
 import '../island/adaptive-island-hoc.js';
 import '../global/linear-function.js';
 import '../_helpers/island.js';
@@ -25,38 +23,20 @@ import '../dialog/dialog.js';
 import 'react-dom';
 import '@jetbrains/icons/close';
 import '../global/get-uid.js';
-import 'core-js/modules/es.regexp.to-string.js';
 import '../shortcuts/shortcuts.js';
-import 'core-js/modules/es.array.map.js';
 import '../shortcuts/core.js';
-import 'core-js/modules/es.array.find-index.js';
-import 'core-js/modules/es.array.includes.js';
-import 'core-js/modules/es.array.slice.js';
-import 'core-js/modules/es.array.splice.js';
-import 'core-js/modules/es.object.assign.js';
-import 'core-js/modules/es.string.includes.js';
-import 'core-js/modules/es.string.match.js';
 import 'combokeys';
 import '../global/sniffer.js';
 import 'sniffr';
 import '../tab-trap/tab-trap.js';
-import 'core-js/modules/es.array.filter.js';
 import '../global/dom.js';
-import 'core-js/modules/es.array.iterator.js';
-import 'core-js/modules/es.set.js';
-import 'core-js/modules/es.string.split.js';
-import 'core-js/modules/web.dom-collections.for-each.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import '../button/button.js';
 import '@jetbrains/icons/chevron-down';
 import '../icon/icon.js';
 import 'util-deprecate';
 import '../icon/icon__constants.js';
 import '../_helpers/icon__svg.js';
-import 'core-js/modules/es.string.starts-with.js';
 import '../global/memoize.js';
-import 'core-js/modules/es.map.js';
-import 'core-js/modules/es.weak-map.js';
 import '../link/clickableLink.js';
 import '../_helpers/button__classes.js';
 import '../popup/popup.target.js';
@@ -65,8 +45,8 @@ import 'scrollbar-width';
 import '../heading/heading.js';
 import '../_helpers/heading.js';
 
-var containerElement = document.createElement('div');
-var reactRoot = createRoot(containerElement);
+const containerElement = document.createElement('div');
+const reactRoot = createRoot(containerElement);
 /**
  * Renders AuthDialog into virtual node to skip maintaining container
  */
@@ -77,11 +57,11 @@ function renderAuthDialog(props) {
   }));
 }
 function showAuthDialog() {
-  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   renderAuthDialog(_objectSpread2(_objectSpread2({}, props), {}, {
     show: true
   }));
-  return function () {
+  return () => {
     renderAuthDialog({
       show: false
     });

package/components/avatar/avatar-example-datauri.js

@@ -1,4 +1,4 @@
 // Taken from https://hub.jetbrains.com/api/rest/avatar/default?username=Jet%20Brains&dpr=2&size=56
-var avatarDataUri = "data:image/svg+xml,".concat(encodeURIComponent("\n<svg viewBox=\"0 0 40 40\" xmlns=\"http://www.w3.org/2000/svg\">\n    <defs>\n        <linearGradient id=\"gradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop stop-color=\"#D50F6B\" offset=\"0\"/>\n            <stop stop-color=\"#E73AE8\" offset=\"1\"/>\n        </linearGradient>\n    </defs>\n    <g>\n        <rect fill=\"url(#gradient)\"\n              x=\"0\" y=\"0\" width=\"40\" height=\"40\"\n              rx=\"3\" ry=\"3\"/>\n        <text x=\"5\" y=\"19\"\n              font-family=\"Arial, Helvetica, sans-serif\"\n              font-size=\"15px\"\n              letter-spacing=\"1\"\n              fill=\"#FFFFFF\">\n            <tspan>JB</tspan>\n            <tspan x=\"6\" y=\"28\">_</tspan>\n        </text>\n    </g>\n</svg>\n"));
+const avatarDataUri = "data:image/svg+xml,".concat(encodeURIComponent("\n<svg viewBox=\"0 0 40 40\" xmlns=\"http://www.w3.org/2000/svg\">\n    <defs>\n        <linearGradient id=\"gradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop stop-color=\"#D50F6B\" offset=\"0\"/>\n            <stop stop-color=\"#E73AE8\" offset=\"1\"/>\n        </linearGradient>\n    </defs>\n    <g>\n        <rect fill=\"url(#gradient)\"\n              x=\"0\" y=\"0\" width=\"40\" height=\"40\"\n              rx=\"3\" ry=\"3\"/>\n        <text x=\"5\" y=\"19\"\n              font-family=\"Arial, Helvetica, sans-serif\"\n              font-size=\"15px\"\n              letter-spacing=\"1\"\n              fill=\"#FFFFFF\">\n            <tspan>JB</tspan>\n            <tspan x=\"6\" y=\"28\">_</tspan>\n        </text>\n    </g>\n</svg>\n"));
 
 export { avatarDataUri };

package/components/avatar/avatar.js

@@ -1,5 +1,5 @@
-import { _ as _defineProperty, a as _inherits, b as _createClass, c as _objectWithoutProperties, d as _objectSpread2, i as _slicedToArray, e as _classCallCheck, f as _callSuper } from '../_helpers/_rollupPluginBabelHelpers.js';
-import 'core-js/modules/es.array.concat.js';
+import { _ as _defineProperty, a as _objectWithoutProperties, b as _objectSpread2 } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -7,28 +7,13 @@ import { isDataURI, parseQueryString, encodeURL } from '../global/url.js';
 import { getPixelRatio } from '../global/dom.js';
 import FallbackAvatar from './fallback-avatar.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import 'core-js/modules/es.array.index-of.js';
 import 'core-js/modules/es.regexp.exec.js';
-import 'core-js/modules/es.string.match.js';
 import 'core-js/modules/es.string.replace.js';
-import 'core-js/modules/es.array.filter.js';
-import 'core-js/modules/es.array.iterator.js';
-import 'core-js/modules/es.object.assign.js';
-import 'core-js/modules/es.object.entries.js';
-import 'core-js/modules/es.object.to-string.js';
-import 'core-js/modules/es.set.js';
-import 'core-js/modules/es.string.split.js';
-import 'core-js/modules/web.dom-collections.for-each.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import 'core-js/modules/es.array.from.js';
-import 'core-js/modules/es.array.map.js';
-import 'core-js/modules/es.array.slice.js';
 import '../global/get-uid.js';
-import 'core-js/modules/es.regexp.to-string.js';
 
 var modules_61ca8c75 = {"light":"light_rui_2ac4","avatar":"avatar_rui_006c","subavatar":"subavatar_rui_006c","empty":"empty_rui_006c"};
 
-var _excluded = ["size", "url", "dpr", "style", "round", "subavatar", "subavatarSize", "username", "skipParams"];
+const _excluded = ["size", "url", "dpr", "style", "round", "subavatar", "subavatarSize", "username", "skipParams"];
 var Size;
 (function (Size) {
   Size[Size["Size18"] = 18] = "Size18";
@@ -40,126 +25,112 @@ var Size;
   Size[Size["Size48"] = 48] = "Size48";
   Size[Size["Size56"] = 56] = "Size56";
 })(Size || (Size = {}));
-var Avatar = /*#__PURE__*/function (_PureComponent) {
-  function Avatar() {
-    var _this;
-    _classCallCheck(this, Avatar);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, Avatar, [].concat(args));
-    _defineProperty(_this, "state", {
+class Avatar extends PureComponent {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "state", {
       errorUrl: ''
     });
-    _defineProperty(_this, "handleError", function () {
-      _this.setState({
-        errorUrl: _this.props.url
+    _defineProperty(this, "handleError", () => {
+      this.setState({
+        errorUrl: this.props.url
       });
     });
-    _defineProperty(_this, "handleSuccess", function () {
-      _this.setState({
+    _defineProperty(this, "handleSuccess", () => {
+      this.setState({
         errorUrl: ''
       });
     });
-    return _this;
   }
-  _inherits(Avatar, _PureComponent);
-  return _createClass(Avatar, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        size = _this$props.size,
-        url = _this$props.url,
-        dpr = _this$props.dpr,
-        style = _this$props.style,
-        round = _this$props.round,
-        subavatar = _this$props.subavatar,
-        subavatarSize = _this$props.subavatarSize,
-        username = _this$props.username,
-        skipParams = _this$props.skipParams,
-        restProps = _objectWithoutProperties(_this$props, _excluded);
-      var sizeString = "".concat(size, "px");
-      var subavatarSizeString = "".concat(subavatarSize, "px");
-      var borderRadius = size <= Size.Size18 ? 'var(--ring-border-radius-small)' : 'var(--ring-border-radius)';
-      var styleObj = _objectSpread2({
-        borderRadius: round ? '50%' : borderRadius,
-        height: sizeString,
-        width: sizeString
-      }, style);
-      var styleObjGroup = _objectSpread2({
-        borderRadius: '2px',
-        height: subavatarSizeString,
-        width: subavatarSizeString
-      }, style);
-      if (!url || this.state.errorUrl === url) {
-        return /*#__PURE__*/jsx("span", _objectSpread2(_objectSpread2({}, restProps), {}, {
-          "data-test": "avatar",
-          className: classNames(modules_61ca8c75.avatar, this.props.className, {
-            [modules_61ca8c75.empty]: username == null
-          }),
-          style: styleObj,
-          children: username != null && /*#__PURE__*/jsx(FallbackAvatar, {
-            size: size,
-            round: round,
-            username: username
-          })
-        }));
-      }
-      var src = url;
-      if (!skipParams && !isDataURI(url)) {
-        var _url$split = url.split('?'),
-          _url$split2 = _slicedToArray(_url$split, 2),
-          urlStart = _url$split2[0],
-          query = _url$split2[1];
-        var queryParams = _objectSpread2(_objectSpread2({}, parseQueryString(query)), {}, {
-          dpr,
-          size
-        });
-        src = encodeURL(urlStart, queryParams);
-      }
-      var subavatarSrc = null;
-      if (subavatar && !isDataURI(subavatar)) {
-        var _subavatar$split = subavatar.split('?'),
-          _subavatar$split2 = _slicedToArray(_subavatar$split, 2),
-          _urlStart = _subavatar$split2[0],
-          _query = _subavatar$split2[1];
-        var _queryParams = _objectSpread2(_objectSpread2({}, parseQueryString(_query)), {}, {
-          dpr,
-          subavatarSizeString
-        });
-        subavatarSrc = skipParams ? subavatar : encodeURL(_urlStart, _queryParams);
-        return /*#__PURE__*/jsxs("div", {
-          children: [/*#__PURE__*/jsx("img", _objectSpread2(_objectSpread2({}, restProps), {}, {
-            onError: this.handleError,
-            onLoad: this.handleSuccess,
-            className: classNames(modules_61ca8c75.avatar, this.props.className),
-            style: styleObj,
-            src: src,
-            alt: "User avatar"
-          })), /*#__PURE__*/jsx("img", _objectSpread2(_objectSpread2({}, restProps), {}, {
-            "data-test": "avatar",
-            onError: this.handleError,
-            onLoad: this.handleSuccess,
-            className: classNames(modules_61ca8c75.subavatar),
-            style: styleObjGroup,
-            src: subavatarSrc,
-            alt: "Subavatar"
-          }))]
-        });
-      } else {
-        return /*#__PURE__*/jsx("img", _objectSpread2(_objectSpread2({}, restProps), {}, {
-          "data-test": "avatar",
+  render() {
+    const _this$props = this.props,
+      {
+        size,
+        url,
+        dpr,
+        style,
+        round,
+        subavatar,
+        subavatarSize,
+        username,
+        skipParams
+      } = _this$props,
+      restProps = _objectWithoutProperties(_this$props, _excluded);
+    const sizeString = "".concat(size, "px");
+    const subavatarSizeString = "".concat(subavatarSize, "px");
+    const borderRadius = size <= Size.Size18 ? 'var(--ring-border-radius-small)' : 'var(--ring-border-radius)';
+    const styleObj = _objectSpread2({
+      borderRadius: round ? '50%' : borderRadius,
+      height: sizeString,
+      width: sizeString
+    }, style);
+    const styleObjGroup = _objectSpread2({
+      borderRadius: '2px',
+      height: subavatarSizeString,
+      width: subavatarSizeString
+    }, style);
+    if (!url || this.state.errorUrl === url) {
+      return /*#__PURE__*/jsx("span", _objectSpread2(_objectSpread2({}, restProps), {}, {
+        "data-test": "avatar",
+        className: classNames(modules_61ca8c75.avatar, this.props.className, {
+          [modules_61ca8c75.empty]: username == null
+        }),
+        style: styleObj,
+        children: username != null && /*#__PURE__*/jsx(FallbackAvatar, {
+          size: size,
+          round: round,
+          username: username
+        })
+      }));
+    }
+    let src = url;
+    if (!skipParams && !isDataURI(url)) {
+      const [urlStart, query] = url.split('?');
+      const queryParams = _objectSpread2(_objectSpread2({}, parseQueryString(query)), {}, {
+        dpr,
+        size
+      });
+      src = encodeURL(urlStart, queryParams);
+    }
+    let subavatarSrc = null;
+    if (subavatar && !isDataURI(subavatar)) {
+      const [urlStart, query] = subavatar.split('?');
+      const queryParams = _objectSpread2(_objectSpread2({}, parseQueryString(query)), {}, {
+        dpr,
+        subavatarSizeString
+      });
+      subavatarSrc = skipParams ? subavatar : encodeURL(urlStart, queryParams);
+      return /*#__PURE__*/jsxs("div", {
+        children: [/*#__PURE__*/jsx("img", _objectSpread2(_objectSpread2({}, restProps), {}, {
           onError: this.handleError,
           onLoad: this.handleSuccess,
           className: classNames(modules_61ca8c75.avatar, this.props.className),
           style: styleObj,
           src: src,
           alt: "User avatar"
-        }));
-      }
+        })), /*#__PURE__*/jsx("img", _objectSpread2(_objectSpread2({}, restProps), {}, {
+          "data-test": "avatar",
+          onError: this.handleError,
+          onLoad: this.handleSuccess,
+          className: classNames(modules_61ca8c75.subavatar),
+          style: styleObjGroup,
+          src: subavatarSrc,
+          alt: "Subavatar"
+        }))]
+      });
+    } else {
+      return /*#__PURE__*/jsx("img", _objectSpread2(_objectSpread2({}, restProps), {}, {
+        "data-test": "avatar",
+        onError: this.handleError,
+        onLoad: this.handleSuccess,
+        className: classNames(modules_61ca8c75.avatar, this.props.className),
+        style: styleObj,
+        src: src,
+        alt: "User avatar"
+      }));
     }
-  }]);
-}(PureComponent);
+  }
+}
 _defineProperty(Avatar, "propTypes", {
   dpr: PropTypes.number,
   className: PropTypes.string,