@jetbrains/ring-ui 7.0.72 → 7.0.73

package/babel.config.js

@@ -4,6 +4,20 @@ module.exports = function config(api) {
   api.cache(true);
 
   return {
+    plugins: [
+      [
+        'babel-plugin-react-compiler',
+        {
+          target: '18', // should be the minimal supported version from peerDependencies
+        },
+      ],
+      [
+        'babel-plugin-transform-define',
+        {
+          SUPPORTED_BROWSERS: browserslist(),
+        },
+      ],
+    ],
     presets: [
       [
         '@jetbrains/babel-preset-jetbrains',
@@ -17,14 +31,6 @@ module.exports = function config(api) {
         },
       ],
     ],
-    plugins: [
-      [
-        'babel-plugin-transform-define',
-        {
-          SUPPORTED_BROWSERS: browserslist(),
-        },
-      ],
-    ],
     env: {
       test: {
         plugins: ['require-context-hook'],

package/components/alert/alert.d.ts

@@ -92,6 +92,6 @@ export default class Alert extends PureComponent<AlertProps, State> {
      */
     private _getIcon;
     storeAlertRef: (node: HTMLDivElement | null) => void;
-    render(): import("react/jsx-runtime").JSX.Element;
+    render(): React.JSX.Element;
 }
 export { default as Container } from './container';

package/components/alert/{alert.js → alert.jsx}

@@ -1,5 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PureComponent } from 'react';
+import * as React from 'react';
 import classNames from 'classnames';
 import exceptionIcon from '@jetbrains/icons/exception';
 import checkmarkIcon from '@jetbrains/icons/checkmark';
@@ -114,11 +114,13 @@ export default class Alert extends PureComponent {
      * @private
      */
     _getCaption() {
-        return (_jsx("span", { className: classNames(styles.caption, this.props.captionClassName, {
+        return (<span className={classNames(styles.caption, this.props.captionClassName, {
                 [styles.withCloseButton]: this.props.closeable,
-            }), onClick: this._handleCaptionsLinksClick, 
-            // We only process clicks on `a` elements, see above
-            role: 'presentation', children: this.props.children }));
+            })} onClick={this._handleCaptionsLinksClick} 
+        // We only process clicks on `a` elements, see above
+        role='presentation'>
+        {this.props.children}
+      </span>);
     }
     /**
      * @private
@@ -127,10 +129,10 @@ export default class Alert extends PureComponent {
     _getIcon() {
         const glyph = TypeToIcon[this.props.type];
         if (glyph) {
-            return _jsx(Icon, { glyph: glyph, className: styles.icon, color: TypeToIconColor[this.props.type] || Color.DEFAULT });
+            return <Icon glyph={glyph} className={styles.icon} color={TypeToIconColor[this.props.type] || Color.DEFAULT}/>;
         }
         if (this.props.type === AlertType.LOADING) {
-            return _jsx(Loader, { className: styles.loader });
+            return <Loader className={styles.loader}/>;
         }
         return '';
     }
@@ -149,7 +151,11 @@ export default class Alert extends PureComponent {
         });
         const height = this.state.height;
         const style = height ? { marginBottom: -height } : undefined;
-        return (_jsxs(ThemeProvider, { theme: theme, className: classes, "data-test": dataTests('alert', dataTest), "data-test-type": type, style: style, ref: this.storeAlertRef, children: [this._getIcon(), this._getCaption(), this.props.closeable ? (_jsx(Button, { icon: closeIcon, className: classNames(styles.close, closeButtonClassName), "data-test": 'alert-close', "aria-label": 'close alert', onClick: this.closeRequest })) : ('')] }));
+        return (<ThemeProvider theme={theme} className={classes} data-test={dataTests('alert', dataTest)} data-test-type={type} style={style} ref={this.storeAlertRef}>
+        {this._getIcon()}
+        {this._getCaption()}
+        {this.props.closeable ? (<Button icon={closeIcon} className={classNames(styles.close, closeButtonClassName)} data-test='alert-close' aria-label='close alert' onClick={this.closeRequest}/>) : ('')}
+      </ThemeProvider>);
     }
 }
 export { default as Container } from './container';

package/components/alert/{container.js → container.jsx}

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { Children, cloneElement, PureComponent, isValidElement } from 'react';
 import { createPortal } from 'react-dom';
 import classNames from 'classnames';
@@ -11,7 +10,8 @@ export default class Alerts extends PureComponent {
         if (!show) {
             return null;
         }
-        return createPortal(_jsx("div", { "data-test": 'alert-container', className: classes, "aria-live": 'polite', ...restProps, children: Children.map(children, child => {
+        return createPortal(<div data-test='alert-container' className={classes} aria-live='polite' {...restProps}>
+        {Children.map(children, child => {
                 if (!isValidElement(child)) {
                     return child;
                 }
@@ -19,6 +19,7 @@ export default class Alerts extends PureComponent {
                 return cloneElement(child, {
                     className: alertClassNames,
                 });
-            }) }), document.body);
+            })}
+      </div>, document.body);
     }
 }

package/components/alert-service/alert-service.d.ts

@@ -15,7 +15,7 @@ export declare class AlertService {
     containerElement: HTMLDivElement;
     reactRoot: import("react-dom/client").Root;
     _getShowingAlerts(): AlertItem[];
-    renderAlertContainer(alerts: readonly AlertItem[]): import("react/jsx-runtime").JSX.Element;
+    renderAlertContainer(alerts: readonly AlertItem[]): import("react").JSX.Element;
     /**
      * Renders alert container into virtual node to skip maintaining container
      */

package/components/alert-service/{alert-service.js → alert-service.jsx}

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { createRoot } from 'react-dom/client';
 import getUID from '../global/get-uid';
 import Alert, { ANIMATION_TIME, Container as AlertContainer } from '../alert/alert';
@@ -17,12 +16,16 @@ export class AlertService {
     }
     renderAlertContainer(alerts) {
         if (alerts.length === 0) {
-            return _jsx("span", {});
+            return <span />;
         }
-        return (_jsx(AlertContainer, { children: alerts.map(alert => {
+        return (<AlertContainer>
+        {alerts.map(alert => {
                 const { message, key, ...rest } = alert;
-                return (_jsx(Alert, { ...rest, children: message }, key));
-            }) }));
+                return (<Alert key={key} {...rest}>
+              {message}
+            </Alert>);
+            })}
+      </AlertContainer>);
     }
     /**
      * Renders alert container into virtual node to skip maintaining container

package/components/auth/auth-core.js

@@ -9,13 +9,12 @@ import AuthResponseParser from './response-parser';
 import AuthRequestBuilder from './request-builder';
 import BackgroundFlow from './background-flow';
 import TokenValidator from './token-validator';
-/* eslint-disable @typescript-eslint/no-magic-numbers */
+/* eslint-disable no-magic-numbers */
 export const DEFAULT_EXPIRES_TIMEOUT = 40 * 60;
 export const DEFAULT_BACKGROUND_TIMEOUT = 10 * 1000;
 const DEFAULT_BACKEND_CHECK_TIMEOUT = 10 * 1000;
 const BACKGROUND_REDIRECT_TIMEOUT = 20 * 1000;
 const DEFAULT_WAIT_FOR_REDIRECT_TIMEOUT = 5 * 1000;
-/* eslint-enable @typescript-eslint/no-magic-numbers */
 export const USER_CHANGED_EVENT = 'userChange';
 export const DOMAIN_USER_CHANGED_EVENT = 'domainUser';
 export const LOGOUT_EVENT = 'logout';
@@ -480,11 +479,11 @@ class Auth {
         const actualTranslations = translations ?? getTranslations();
         this._createInitDeferred();
         const closeDialog = () => {
-            /* eslint-disable @typescript-eslint/no-use-before-define */
+            /* eslint-disable no-use-before-define */
             stopTokenListening?.();
             stopMessageListening?.();
             hide?.();
-            /* eslint-enable @typescript-eslint/no-use-before-define */
+            /* eslint-enable no-use-before-define */
         };
         const onConfirm = () => {
             if (!embeddedLogin) {
@@ -540,7 +539,7 @@ class Auth {
         this._createInitDeferred();
         const done = () => {
             this._initDeferred?.resolve?.();
-            // eslint-disable-next-line @typescript-eslint/no-use-before-define
+            // eslint-disable-next-line no-use-before-define
             hide?.();
         };
         const hide = this._authDialogService?.({
@@ -595,11 +594,11 @@ class Auth {
         let timerId;
         return new Promise((resolve, reject) => {
             const done = () => {
-                /* eslint-disable @typescript-eslint/no-use-before-define */
+                /* eslint-disable no-use-before-define */
                 hide();
                 window.removeEventListener('online', onCheckAgain);
                 stopListeningCloseMessage?.();
-                /* eslint-enable @typescript-eslint/no-use-before-define */
+                /* eslint-enable no-use-before-define */
                 this._storage?.sendMessage(Auth.CLOSE_BACKEND_DOWN_MESSAGE, Date.now());
                 clearTimeout(timerId);
             };

package/components/auth/{down-notification.js → down-notification.jsx}

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
 import alertService from '../alert-service/alert-service';
 import Alert from '../alert/alert';
 import Link from '../link/link';
@@ -18,7 +18,15 @@ function renderAlert(message, type = Alert.Type.WARNING) {
 }
 function Message({ translations, onCheckAgain }) {
     const { backendIsNotAvailable, checkAgain, errorMessage } = translations;
-    return (_jsxs("div", { "data-test": 'ring-backend-down-notification', children: [_jsx(Group, { children: _jsx("div", { className: styles.title, children: backendIsNotAvailable }) }), _jsxs("span", { className: styles.error, children: [errorMessage, " "] }), _jsx(Link, { onClick: onCheckAgain, "data-test": 'check-again', children: checkAgain })] }));
+    return (<div data-test='ring-backend-down-notification'>
+      <Group>
+        <div className={styles.title}>{backendIsNotAvailable}</div>
+      </Group>
+      <span className={styles.error}>{errorMessage} </span>
+      <Link onClick={onCheckAgain} data-test='check-again'>
+        {checkAgain}
+      </Link>
+    </div>);
 }
 export default function onBackendDown({ onCheckAgain, translations }) {
     async function checkAgainWithoutClosing(e) {
@@ -29,9 +37,9 @@ export default function onBackendDown({ onCheckAgain, translations }) {
             await onCheckAgain();
         }
         catch (err) {
-            renderAlert(_jsx(Message, { translations: translations, onCheckAgain: checkAgainWithoutClosing }));
+            renderAlert(<Message translations={translations} onCheckAgain={checkAgainWithoutClosing}/>);
         }
     }
-    renderAlert(_jsx(Message, { translations: translations, onCheckAgain: checkAgainWithoutClosing }));
+    renderAlert(<Message translations={translations} onCheckAgain={checkAgainWithoutClosing}/>);
     return () => alertService.remove(key);
 }

package/components/auth/{iframe-flow.js → iframe-flow.jsx}

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import loginDialogService from '../login-dialog/service';
 import Link from '../link/link';
 import AuthResponseParser from './response-parser';
@@ -21,13 +20,15 @@ export default class IFrameFlow {
      */
     async _load() {
         const authRequest = await this._requestBuilder.prepareAuthRequest({ request_credentials: 'required', auth_mode: 'bypass_to_login' }, { nonRedirect: false });
-        const renderFallbackLink = () => (_jsx(Link, { href: authRequest.url, target: '_self', children: this._translations.nothingHappensLink }));
+        const renderFallbackLink = () => (<Link href={authRequest.url} target='_self'>
+        {this._translations.nothingHappensLink}
+      </Link>);
         return new Promise((resolve, reject) => {
             this.hideDialog = loginDialogService({
                 url: authRequest.url,
                 loader: true,
                 onCancel: () => {
-                    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                    // eslint-disable-next-line no-use-before-define
                     cleanUp();
                     this.stop();
                 },
@@ -36,14 +37,14 @@ export default class IFrameFlow {
             this.reject = reject;
             const removeTokenListener = this._storage.onTokenChange(token => {
                 if (token) {
-                    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                    // eslint-disable-next-line no-use-before-define
                     cleanUp();
                     resolve(token.accessToken);
                 }
             });
             const removeStateListener = this._storage.onStateChange(authRequest.stateId, state => {
                 if (state && state.error) {
-                    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                    // eslint-disable-next-line no-use-before-define
                     cleanUp();
                     reject(new AuthResponseParser.AuthError(state));
                 }

package/components/auth/storage.js

@@ -12,7 +12,7 @@ import Storage from '../storage/storage';
  * @property {string[]} scopes
  */
 const DEFAULT_STATE_QUOTA = 102400; // 100 kb ~~ 200 tabs with a large list of scopes
-// eslint-disable-next-line @typescript-eslint/no-magic-numbers
+// eslint-disable-next-line no-magic-numbers
 const DEFAULT_STATE_TTL = 1000 * 60 * 60 * 24; // nobody will need auth state after a day
 const UPDATE_USER_TIMEOUT = 1000;
 export default class AuthStorage {

package/components/auth/token-validator.js

@@ -30,7 +30,7 @@ export default class TokenValidator {
     /**
      * @const {number}
      */
-    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    // eslint-disable-next-line no-magic-numbers
     static DEFAULT_REFRESH_BEFORE = 10 * 60; // 20 min in s
     /**
      * Error class for auth token validation

package/components/auth/window-flow.js

@@ -39,10 +39,10 @@ export default class WindowFlow {
                     return;
                 }
                 cleanRun = true;
-                /* eslint-disable @typescript-eslint/no-use-before-define */
+                /* eslint-disable no-use-before-define */
                 removeStateListener();
                 removeTokenListener();
-                /* eslint-enable @typescript-eslint/no-use-before-define */
+                /* eslint-enable no-use-before-define */
                 this._loginWindow?.close();
                 clearTimeout(this._timeoutId);
             };

package/components/auth-dialog/auth-dialog.d.ts

@@ -38,5 +38,5 @@ export default class AuthDialog extends Component<AuthDialogProps> {
     componentWillUnmount(): void;
     onEscPress: () => void;
     onRetryPress: () => Promise<void>;
-    render(): import("react/jsx-runtime").JSX.Element;
+    render(): import("react").JSX.Element;
 }

package/components/auth-dialog/{auth-dialog.js → auth-dialog.jsx}

@@ -1,4 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Component } from 'react';
 import classNames from 'classnames';
 import { Content } from '../island/island';
@@ -54,6 +53,23 @@ export default class AuthDialog extends Component {
         const title = (this.props.title || defaultTitle)
             .replace('%serviceName%', serviceName ?? '')
             .replace('{{serviceName}}', serviceName ?? '');
-        return (_jsx(Dialog, { label: title, "data-test": 'ring-auth-dialog', className: className, contentClassName: classNames(className, styles.dialog), onEscPress: this.onEscPress, show: show, trapFocus: true, children: _jsx(Content, { children: _jsxs("div", { className: styles.content, children: [serviceImage && _jsx("img", { alt: `${serviceName} logo`, className: styles.logo, src: serviceImage }), _jsx(H2, { className: styles.title, children: title }), errorMessage && _jsx("div", { className: styles.error, children: errorMessage }), _jsx(Button, { primary: true, className: styles.firstButton, "data-test": 'auth-dialog-confirm-button', onClick: onConfirm, children: confirmLabel }), onTryAgain && (_jsx(Button, { className: styles.button, "data-test": 'auth-dialog-retry-button', onClick: () => this.onRetryPress(), loader: retrying, disabled: retrying, children: tryAgainLabel })), _jsx(Button, { className: styles.button, "data-test": 'auth-dialog-cancel-button', onClick: onCancel, children: cancelLabel })] }) }) }));
+        return (<Dialog label={title} data-test='ring-auth-dialog' className={className} contentClassName={classNames(className, styles.dialog)} onEscPress={this.onEscPress} show={show} trapFocus>
+        <Content>
+          <div className={styles.content}>
+            {serviceImage && <img alt={`${serviceName} logo`} className={styles.logo} src={serviceImage}/>}
+            <H2 className={styles.title}>{title}</H2>
+            {errorMessage && <div className={styles.error}>{errorMessage}</div>}
+            <Button primary className={styles.firstButton} data-test='auth-dialog-confirm-button' onClick={onConfirm}>
+              {confirmLabel}
+            </Button>
+            {onTryAgain && (<Button className={styles.button} data-test='auth-dialog-retry-button' onClick={() => this.onRetryPress()} loader={retrying} disabled={retrying}>
+                {tryAgainLabel}
+              </Button>)}
+            <Button className={styles.button} data-test='auth-dialog-cancel-button' onClick={onCancel}>
+              {cancelLabel}
+            </Button>
+          </div>
+        </Content>
+      </Dialog>);
     }
 }

package/components/auth-dialog-service/{auth-dialog-service.js → auth-dialog-service.jsx}

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { createRoot } from 'react-dom/client';
 import { ControlsHeightContext, getGlobalControlsHeight } from '../global/controls-height';
 import AuthDialog from '../auth-dialog/auth-dialog';
@@ -11,7 +10,9 @@ export const reactRoot = createRoot(containerElement);
  * Renders AuthDialog into virtual node to skip maintaining container
  */
 function renderAuthDialog(props) {
-    reactRoot.render(_jsx(ControlsHeightContext.Provider, { value: getGlobalControlsHeight(), children: _jsx(AuthDialog, { ...props }) }));
+    reactRoot.render(<ControlsHeightContext.Provider value={getGlobalControlsHeight()}>
+      <AuthDialog {...props}/>
+    </ControlsHeightContext.Provider>);
 }
 export default function showAuthDialog(props = {}) {
     renderAuthDialog({

package/components/avatar/avatar-info.d.ts

@@ -5,5 +5,5 @@ interface InfoAvatarProps {
     children?: ReactNode;
 }
 export declare const fontSizes: Record<Size, number>;
-export default function AvatarInfo({ size, children }: InfoAvatarProps): import("react/jsx-runtime").JSX.Element;
+export default function AvatarInfo({ size, children }: InfoAvatarProps): import("react").JSX.Element;
 export {};

package/components/avatar/{avatar-info.js → avatar-info.jsx}

@@ -1,7 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
-import styles from './avatar.css';
 import { Size } from './avatar-size';
+import styles from './avatar.css';
 export const fontSizes = {
     [Size.Size16]: 9,
     [Size.Size18]: 9,
@@ -15,5 +14,7 @@ export const fontSizes = {
 };
 export default function AvatarInfo({ size, children }) {
     const fontSize = fontSizes[size];
-    return (_jsx("span", { style: { fontSize }, className: classNames(styles.avatarInfo), children: children }));
+    return (<span style={{ fontSize }} className={classNames(styles.avatarInfo)}>
+      {children}
+    </span>);
 }

package/components/avatar/avatar.d.ts

@@ -24,6 +24,6 @@ export default class Avatar extends PureComponent<AvatarProps> {
     };
     handleError: () => void;
     handleSuccess: () => void;
-    render(): import("react/jsx-runtime").JSX.Element;
+    render(): import("react").JSX.Element;
 }
 export type AvatarAttrs = React.JSX.LibraryManagedAttributes<typeof Avatar, AvatarProps>;

package/components/avatar/{avatar.js → avatar.jsx}

@@ -1,14 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PureComponent } from 'react';
 import classNames from 'classnames';
 import deprecate from 'util-deprecate';
 import { encodeURL, isDataURI, parseQueryString } from '../global/url';
 import { getPixelRatio } from '../global/dom';
 import memoize from '../global/memoize';
-import styles from './avatar.css';
 import FallbackAvatar from './fallback-avatar';
 import { Size } from './avatar-size';
 import AvatarInfo from './avatar-info';
+import styles from './avatar.css';
 export { Size };
 const warnSize = memoize((size) => deprecate(() => { }, `Avatar: Size${size} is deprecated and will be removed in 8.0. The supported sizes are: Size20, Size24, Size28, Size32, Size40.`));
 export default class Avatar extends PureComponent {
@@ -49,9 +48,12 @@ export default class Avatar extends PureComponent {
             [styles.round]: round,
         });
         if (!url || this.state.errorUrl === url) {
-            return (_jsxs("span", { ...restProps, "data-test": 'avatar', className: classNames(classes, {
+            return (<span {...restProps} data-test='avatar' className={classNames(classes, {
                     [styles.empty]: (username === null || username === undefined) && (info === null || info === undefined),
-                }), style: styleObj, children: [username && _jsx(FallbackAvatar, { size: size, round: round, username: username }), info && _jsx(AvatarInfo, { size: size, children: info })] }));
+                })} style={styleObj}>
+          {username && <FallbackAvatar size={size} round={round} username={username}/>}
+          {info && <AvatarInfo size={size}>{info}</AvatarInfo>}
+        </span>);
         }
         let src = url;
         if (!skipParams && !isDataURI(url)) {
@@ -72,8 +74,11 @@ export default class Avatar extends PureComponent {
                 subavatarSizeString,
             };
             subavatarSrc = skipParams ? subavatar : encodeURL(urlStart, queryParams);
-            return (_jsxs("div", { children: [_jsx("img", { ...restProps, onError: this.handleError, onLoad: this.handleSuccess, className: classNames(classes, styles.avatarShadow), style: styleObj, src: src, alt: 'User avatar' }), _jsx("img", { ...restProps, "data-test": 'avatar', onError: this.handleError, onLoad: this.handleSuccess, className: classNames(styles.subavatar), style: styleObjGroup, src: subavatarSrc, alt: 'Subavatar' })] }));
+            return (<div>
+          <img {...restProps} onError={this.handleError} onLoad={this.handleSuccess} className={classNames(classes, styles.avatarShadow)} style={styleObj} src={src} alt='User avatar'/>
+          <img {...restProps} data-test='avatar' onError={this.handleError} onLoad={this.handleSuccess} className={classNames(styles.subavatar)} style={styleObjGroup} src={subavatarSrc} alt='Subavatar'/>
+        </div>);
         }
-        return (_jsx("img", { ...restProps, "data-test": 'avatar', onError: this.handleError, onLoad: this.handleSuccess, className: classNames(classes, styles.avatarShadow), style: styleObj, src: src, alt: 'User avatar' }));
+        return (<img {...restProps} data-test='avatar' onError={this.handleError} onLoad={this.handleSuccess} className={classNames(classes, styles.avatarShadow)} style={styleObj} src={src} alt='User avatar'/>);
     }
 }

package/components/avatar/fallback-avatar.d.ts

@@ -4,4 +4,4 @@ export interface FallbackAvatarProps {
     size: Size;
     round: boolean | null | undefined;
 }
-export default function FallbackAvatar({ username, size, round }: FallbackAvatarProps): import("react/jsx-runtime").JSX.Element;
+export default function FallbackAvatar({ username, size, round }: FallbackAvatarProps): import("react").JSX.Element;

package/components/avatar/{fallback-avatar.js → fallback-avatar.jsx}

@@ -1,4 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import getUID from '../global/get-uid';
 import { Size } from './avatar-size';
@@ -186,5 +185,20 @@ export default function FallbackAvatar({ username, size, round }) {
     const underscore = sizes.underscore;
     const radius = round ? '50%' : sizes.radius;
     const gradientId = useMemo(() => getUID('gradient-'), []);
-    return (_jsxs("svg", { viewBox: `0 0 ${size} ${size}`, xmlns: 'http://www.w3.org/2000/svg', children: [_jsx("defs", { children: _jsxs("linearGradient", { id: gradientId, x1: '1', y1: '1', x2: '0', y2: '0', children: [_jsx("stop", { stopColor: fromColor, offset: '0' }), _jsx("stop", { stopColor: toColor, offset: '0.8' })] }) }), _jsxs("g", { children: [_jsx("rect", { fill: `url(#${gradientId})`, x: '0', y: '0', width: size, height: size, rx: radius, ry: radius }), _jsx("text", { x: sizes.text.x, y: sizes.text.y, fontFamily: "var(--ring-font-family, 'Arial, Helvetica, sans-serif')", fontSize: sizes.fontSize, fontWeight: '600', letterSpacing: sizes.letterSpacing, fill: '#FFFFFF', dominantBaseline: sizes.dominantBaseline, textAnchor: sizes.textAnchor, cursor: 'default', children: _jsx("tspan", { children: extractLetters(username) }) }), underscore && (_jsx("rect", { fill: '#FFFFFF', x: underscore.x, y: underscore.y, width: underscore.width, height: underscore.height })), _jsx("title", { children: username })] })] }));
+    return (<svg viewBox={`0 0 ${size} ${size}`} xmlns='http://www.w3.org/2000/svg'>
+      <defs>
+        <linearGradient id={gradientId} x1='1' y1='1' x2='0' y2='0'>
+          <stop stopColor={fromColor} offset='0'/>
+          <stop stopColor={toColor} offset='0.8'/>
+        </linearGradient>
+      </defs>
+      <g>
+        <rect fill={`url(#${gradientId})`} x='0' y='0' width={size} height={size} rx={radius} ry={radius}/>
+        <text x={sizes.text.x} y={sizes.text.y} fontFamily="var(--ring-font-family, 'Arial, Helvetica, sans-serif')" fontSize={sizes.fontSize} fontWeight='600' letterSpacing={sizes.letterSpacing} fill='#FFFFFF' dominantBaseline={sizes.dominantBaseline} textAnchor={sizes.textAnchor} cursor='default'>
+          <tspan>{extractLetters(username)}</tspan>
+        </text>
+        {underscore && (<rect fill='#FFFFFF' x={underscore.x} y={underscore.y} width={underscore.width} height={underscore.height}/>)}
+        <title>{username}</title>
+      </g>
+    </svg>);
 }

package/components/avatar-stack/avatar-stack.d.ts

@@ -12,4 +12,4 @@ export interface AvatarProps<T = unknown> extends HTMLAttributes<HTMLDivElement>
     extraItems?: readonly ListDataItem<T>[] | null | undefined;
     dropdownMenuProps?: DropdownMenuProps<T> | null | undefined;
 }
-export default function AvatarStack({ children, className, size, extraItems, dropdownMenuProps, ...restProps }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+export default function AvatarStack({ children, className, size, extraItems, dropdownMenuProps, ...restProps }: AvatarProps): import("react").JSX.Element;

package/components/avatar-stack/avatar-stack.jsx

@@ -0,0 +1,24 @@
+import { Children, useState } from 'react';
+import classNames from 'classnames';
+import DropdownMenu from '../dropdown-menu/dropdown-menu';
+import Avatar, { Size } from '../avatar/avatar';
+import { fontSizes } from '../avatar/avatar-info';
+import styles from './avatar-stack.css';
+export default function AvatarStack({ children, className, size = Size.Size20, extraItems, dropdownMenuProps, ...restProps }) {
+    const [dropdownOpen, setDropdownOpen] = useState(false);
+    return (<div className={classNames(styles.avatarStack, className, styles[`size${size}`], {
+            [styles.hovered]: dropdownOpen,
+        })} {...restProps} style={{ height: size, ...restProps.style }}>
+      {Children.map(children, (child, index) => (<div className={styles.item} style={{ '--ring-avatar-stack-index': index }}>
+          {child}
+        </div>))}
+      {extraItems?.length ? (<DropdownMenu hoverMode hoverShowTimeOut={10} onShow={() => setDropdownOpen(true)} onHide={() => setDropdownOpen(false)} className={styles.extra} style={{
+                width: size,
+                height: size,
+                '--ring-avatar-stack-index': Children.count(children),
+                fontSize: fontSizes[size],
+            }} anchor={(<button type='button' className={styles.extraButton}>
+              <Avatar size={size} info={<span className={styles.extraText}>{`+${extraItems.length}`}</span>}/>
+            </button>)} data={extraItems} menuProps={{ offset: 4, ...dropdownMenuProps?.menuProps }} {...dropdownMenuProps}/>) : null}
+    </div>);
+}

package/components/banner/banner.d.ts

@@ -14,6 +14,6 @@ export interface BannerProps {
     ['data-test']?: string;
     translations?: BannerTranslations;
 }
-export declare function Banner(props: BannerProps): import("react/jsx-runtime").JSX.Element;
+export declare function Banner(props: BannerProps): React.JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Banner>;
 export default _default;

package/components/banner/{banner.js → banner.jsx}

@@ -1,4 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import classnames from 'classnames';
 import infoIcon from '@jetbrains/icons/info-filled';
@@ -24,7 +23,7 @@ export function Banner(props) {
     else if (mode === 'warning') {
         icon = warningIcon;
     }
-    return (_jsxs("div", { className: classnames({
+    return (<div className={classnames({
             [styles.banner]: true,
             [styles.inline]: inline,
             [styles.info]: mode === 'info',
@@ -33,6 +32,19 @@ export function Banner(props) {
             [styles.warning]: mode === 'warning',
             [styles.purple]: mode === 'purple',
             [styles.grey]: mode === 'grey',
-        }, className), "data-test": dataTest, children: [withIcon && _jsx(Icon, { glyph: icon, className: styles.icon }), _jsxs("div", { children: [title && _jsx("div", { className: styles.title, children: title }), _jsx("div", { className: styles.description, children: children })] }), onClose && (_jsx(Tooltip, { title: closeButtonTitle ?? translations.close, className: styles.closeButtonWrapper, children: _jsx(Link, { className: styles.closeButton, pseudo: true, onClick: onClose, "aria-label": 'Close', children: _jsx(Icon, { glyph: closeIcon }) }) }))] }));
+        }, className)} data-test={dataTest}>
+      {withIcon && <Icon glyph={icon} className={styles.icon}/>}
+
+      <div>
+        {title && <div className={styles.title}>{title}</div>}
+        <div className={styles.description}>{children}</div>
+      </div>
+
+      {onClose && (<Tooltip title={closeButtonTitle ?? translations.close} className={styles.closeButtonWrapper}>
+          <Link className={styles.closeButton} pseudo onClick={onClose} aria-label='Close'>
+            <Icon glyph={closeIcon}/>
+          </Link>
+        </Tooltip>)}
+    </div>);
 }
 export default React.memo(Banner);

package/components/breadcrumbs/breadcrumbs.d.ts

@@ -3,4 +3,4 @@ export interface BreadcrumbsSeparatorAttrs {
     separatorClassName?: string | null | undefined;
     children?: ReactNode;
 }
-export default function Breadcrumbs({ separatorClassName, children }: BreadcrumbsSeparatorAttrs): import("react/jsx-runtime").JSX.Element[];
+export default function Breadcrumbs({ separatorClassName, children }: BreadcrumbsSeparatorAttrs): import("react").JSX.Element[];

package/components/breadcrumbs/{breadcrumbs.js → breadcrumbs.jsx}

@@ -1,9 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { Children, Fragment } from 'react';
 import styles from './breadcrumbs.css';
 export default function Breadcrumbs({ separatorClassName, children }) {
     return Children.toArray(children).map((child, index) => (
     // eslint-disable-next-line react/no-array-index-key
-    _jsxs(Fragment, { children: [index > 0 && _jsx("span", { className: classNames(styles.separator, separatorClassName), children: '/' }), child] }, index)));
+    <Fragment key={index}>
+      {index > 0 && <span className={classNames(styles.separator, separatorClassName)}>{'/'}</span>}
+      {child}
+    </Fragment>));
 }

package/components/button/button.d.ts

@@ -54,7 +54,7 @@ export declare class Button extends PureComponent<ButtonProps> {
     static contextType: React.Context<ControlsHeight | (() => ControlsHeight)>;
     context: React.ContextType<typeof ControlsHeightContext>;
     buttonRef: React.RefObject<HTMLButtonElement | null>;
-    render(): import("react/jsx-runtime").JSX.Element;
+    render(): React.JSX.Element;
 }
 export { Size as IconSize };
 export type ContainerProps<T extends ButtonProps> = React.JSX.LibraryManagedAttributes<typeof Button, T>;