@jetbrains/ring-ui 7.0.71 → 7.0.73

package/components/grid/col.d.ts

@@ -13,5 +13,5 @@ export interface ColProps {
     className?: string | null | undefined;
 }
 export default class Col extends Component<ColProps> {
-    render(): import("react/jsx-runtime").JSX.Element;
+    render(): import("react").JSX.Element;
 }

package/components/grid/{col.js → col.jsx}

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { Component } from 'react';
 import classNames from 'classnames';
 import styles from './grid.css';
@@ -28,6 +27,8 @@ export default class Col extends Component {
         const classes = classNames(styles.col, className, getClassNames(restProps), {
             [styles.reverse]: reverse,
         });
-        return (_jsx("div", { className: classes, "data-test": 'ring-grid-column', children: children }));
+        return (<div className={classes} data-test='ring-grid-column'>
+        {children}
+      </div>);
     }
 }

package/components/grid/grid.d.ts

@@ -3,7 +3,7 @@ import { Component, type HTMLAttributes } from 'react';
  * @name Grid
  */
 export declare class Grid extends Component<HTMLAttributes<HTMLDivElement>> {
-    render(): import("react/jsx-runtime").JSX.Element;
+    render(): import("react").JSX.Element;
 }
 export { default as Row } from './row';
 export { default as Col } from './col';

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

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { Component } from 'react';
 import classNames from 'classnames';
 import styles from './grid.css';
@@ -9,7 +8,9 @@ export class Grid extends Component {
     render() {
         const { children, className, ...restProps } = this.props;
         const classes = classNames(styles['container-fluid'], className);
-        return (_jsx("div", { "data-test": 'ring-grid', ...restProps, className: classes, children: children }));
+        return (<div data-test='ring-grid' {...restProps} className={classes}>
+        {children}
+      </div>);
     }
 }
 export { default as Row } from './row';

package/components/grid/row.d.ts

@@ -17,6 +17,6 @@ export interface RowProps {
     className?: string | null | undefined;
 }
 export default class Row extends Component<RowProps> {
-    render(): import("react/jsx-runtime").JSX.Element;
+    render(): import("react").JSX.Element;
 }
 export {};

package/components/grid/{row.js → row.jsx}

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { Component } from 'react';
 import classNames from 'classnames';
 import styles from './grid.css';
@@ -34,6 +33,8 @@ export default class Row extends Component {
         const classes = classNames(className, styles.row, getModifierClassNames(restProps), {
             [styles.reverse]: reverse,
         });
-        return (_jsx("div", { className: classes, "data-test": 'ring-grid-row', children: children }));
+        return (<div className={classes} data-test='ring-grid-row'>
+        {children}
+      </div>);
     }
 }

package/components/group/group.d.ts

@@ -3,5 +3,5 @@ import { Component, type HTMLAttributes } from 'react';
  * @name Group
  */
 export default class Group extends Component<HTMLAttributes<HTMLSpanElement>> {
-    render(): import("react/jsx-runtime").JSX.Element;
+    render(): import("react").JSX.Element;
 }

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

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { Component } from 'react';
 import classNames from 'classnames';
 import styles from './group.css';
@@ -9,6 +8,8 @@ export default class Group extends Component {
     render() {
         const { children, className, ...restProps } = this.props;
         const classes = classNames(styles.group, className);
-        return (_jsx("span", { "data-test": 'ring-group', ...restProps, className: classes, children: children }));
+        return (<span data-test='ring-group' {...restProps} className={classes}>
+        {children}
+      </span>);
     }
 }

package/components/header/header-icon.d.ts

@@ -6,5 +6,5 @@ export interface HeaderIconSpecificProps {
     rotatable?: boolean | null | undefined;
 }
 export default class HeaderIcon extends Component<ButtonAttrs & HeaderIconSpecificProps> {
-    render(): import("react/jsx-runtime").JSX.Element;
+    render(): import("react").JSX.Element;
 }

package/components/header/{header-icon.js → header-icon.jsx}

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { Component } from 'react';
 import classNames from 'classnames';
 import Button from '../button/button';
@@ -10,6 +9,6 @@ export default class HeaderIcon extends Component {
             [styles.rotatable]: rotatable,
             [styles.rotated]: rotatable && restProps.active,
         });
-        return _jsx(Button, { ...restProps, className: classes });
+        return <Button {...restProps} className={classes}/>;
     }
 }

package/components/header/header.d.ts

@@ -17,7 +17,7 @@ declare class Header extends Component<HeaderProps> {
         theme: Theme;
         vertical: boolean;
     };
-    render(): import("react/jsx-runtime").JSX.Element;
+    render(): import("react").JSX.Element;
 }
 export type HeaderAttrs = React.JSX.LibraryManagedAttributes<typeof Header, HeaderProps>;
 export default Header;

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

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { Component } from 'react';
 import classNames from 'classnames';
 import Theme, { ThemeProvider } from '../global/theme';
@@ -21,9 +20,11 @@ class Header extends Component {
             [styles.headerSpaced]: spaced && !vertical,
         });
         const overrideOuterTheme = theme !== Theme.LIGHT;
-        const header = (_jsx("header", { ...restProps, className: classes, children: children }));
+        const header = (<header {...restProps} className={classes}>
+        {children}
+      </header>);
         if (overrideOuterTheme) {
-            return _jsx(ThemeProvider, { theme: theme, children: header });
+            return <ThemeProvider theme={theme}>{header}</ThemeProvider>;
         }
         return header;
     }

package/components/header/links.d.ts

@@ -1,2 +1,2 @@
 import { type HTMLAttributes } from 'react';
-export default function Links({ className, ...restProps }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export default function Links({ className, ...restProps }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;

package/components/header/{links.js → links.jsx}

@@ -1,8 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
 import ScrollableSection from '../scrollable-section/scrollable-section';
 import styles from './header.css';
 // currently only supports vertical header
 export default function Links({ className, ...restProps }) {
-    return _jsx(ScrollableSection, { ...restProps, className: classNames(styles.links, className) });
+    return <ScrollableSection {...restProps} className={classNames(styles.links, className)}/>;
 }

package/components/header/logo.d.ts

@@ -6,5 +6,5 @@ export default class Logo extends PureComponent<IconAttrs> {
         suppressSizeWarning: boolean;
     };
     static Size: typeof Size;
-    render(): import("react/jsx-runtime").JSX.Element;
+    render(): import("react").JSX.Element;
 }

package/components/header/{logo.js → logo.jsx}

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { PureComponent } from 'react';
 import classNames from 'classnames';
 import Icon, { Size } from '../icon/icon';
@@ -12,6 +11,8 @@ export default class Logo extends PureComponent {
     render() {
         const { className, ...restProps } = this.props;
         const classes = classNames(styles.logo, className);
-        return (_jsx("div", { className: classes, children: _jsx(Icon, { ...restProps }) }));
+        return (<div className={classes}>
+        <Icon {...restProps}/>
+      </div>);
     }
 }

package/components/header/{profile.js → profile.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 Avatar, { Size } from '../avatar/avatar';
 import Button from '../button/button';
@@ -14,7 +14,13 @@ export default class Profile extends PureComponent {
         closeOnSelect: true,
         renderPopupItems: items => items,
         size: Size.Size32,
-        renderGuest: ({ loading, onLogin, className, translations }) => (_jsx(I18nContext.Consumer, { children: ({ translate }) => (_jsx("div", { className: classNames(styles.profileEmpty, className), children: _jsx(Button, { primary: true, "data-test": 'ring-header-login-button', disabled: loading, loader: loading, onClick: onLogin, children: translations?.login ?? translate('login') }) })) })),
+        renderGuest: ({ loading, onLogin, className, translations }) => (<I18nContext.Consumer>
+        {({ translate }) => (<div className={classNames(styles.profileEmpty, className)}>
+            <Button primary data-test='ring-header-login-button' disabled={loading} loader={loading} onClick={onLogin}>
+              {translations?.login ?? translate('login')}
+            </Button>
+          </div>)}
+      </I18nContext.Consumer>),
     };
     static contextType = I18nContext;
     static Size = Size;
@@ -22,7 +28,9 @@ export default class Profile extends PureComponent {
         const { className, activeClassName, closeOnSelect, hasUpdates, onLogout, user, profileUrl, LinkComponent, onSwitchUser, renderPopupItems, onRevertPostponement, showApplyChangedUser, showName, showLogIn, showLogOut, showSwitchUser, renderGuest, translations, size, round, loading, onLogin, menuProps, onShow, onHide, ...props } = this.props;
         const { translate } = this.context;
         if (!user) {
-            return (_jsx("div", { ...props, className: classNames(styles.profileEmpty, className), children: _jsx(Avatar, { size: size, round: round }) }));
+            return (<div {...props} className={classNames(styles.profileEmpty, className)}>
+          <Avatar size={size} round={round}/>
+        </div>);
         }
         if (user.guest) {
             return renderGuest(this.props);
@@ -30,7 +38,12 @@ export default class Profile extends PureComponent {
         const avatarWrapper = classNames(styles.avatarWrapper, {
             [styles.hasUpdates]: hasUpdates,
         });
-        const anchor = (_jsxs("button", { type: 'button', className: styles.anchorClassName, children: [_jsx("span", { className: avatarWrapper, children: _jsx(Avatar, { url: user.profile && user.profile.avatar && user.profile.avatar.url, size: size, round: round, username: user.name }) }), showName && _jsx("span", { children: user.name })] }));
+        const anchor = (<button type='button' className={styles.anchorClassName}>
+        <span className={avatarWrapper}>
+          <Avatar url={user.profile && user.profile.avatar && user.profile.avatar.url} size={size} round={round} username={user.name}/>
+        </span>
+        {showName && <span>{user.name}</span>}
+      </button>);
         const items = [
             showApplyChangedUser && {
                 rgItemType,
@@ -63,12 +76,12 @@ export default class Profile extends PureComponent {
                 onClick: onLogout,
             },
         ].filter(isTruthy);
-        return (_jsx(DropdownMenu, { ...props, onShow: onShow, onHide: onHide, title: user.name, anchor: anchor, data: renderPopupItems(items), "data-test": 'ring-profile', className: classNames(styles.profile, className), activeClassName: activeClassName, menuProps: {
+        return (<DropdownMenu {...props} onShow={onShow} onHide={onHide} title={user.name} anchor={anchor} data={renderPopupItems(items)} data-test='ring-profile' className={classNames(styles.profile, className)} activeClassName={activeClassName} menuProps={{
                 closeOnSelect,
                 left: -2,
                 top: -8,
                 sidePadding: 32,
                 ...menuProps,
-            } }));
+            }}/>);
     }
 }

package/components/header/services-link.d.ts

@@ -11,5 +11,5 @@ export interface ServicesLinkProps extends Partial<LinkProps> {
     service: Service;
 }
 export default class ServicesLink extends PureComponent<ServicesLinkProps> {
-    render(): import("react/jsx-runtime").JSX.Element;
+    render(): import("react").JSX.Element;
 }

package/components/header/services-link.jsx

@@ -0,0 +1,16 @@
+import { PureComponent } from 'react';
+import Link from '../link/link';
+import styles from './services.css';
+export default class ServicesLink extends PureComponent {
+    render() {
+        const { service, ...props } = this.props;
+        return (<Link target='_self' href={service.homeUrl} {...props}>
+        {service.iconUrl
+                ? [
+                    <span key='icon' className={styles.itemLogo} style={{ backgroundImage: `url(${service.iconUrl})` }}/>,
+                    <div key='text'>{service.name}</div>,
+                ]
+                : service.name}
+      </Link>);
+    }
+}

package/components/header/services.d.ts

@@ -15,5 +15,5 @@ export default class Services extends PureComponent<ServicesProps> {
     };
     static Link: typeof ServicesLink;
     serviceIsActive: (service: Service) => boolean;
-    render(): import("react/jsx-runtime").JSX.Element;
+    render(): import("react").JSX.Element;
 }

package/components/header/{services.js → services.jsx}

@@ -1,16 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PureComponent } from 'react';
 import servicesIcon from '@jetbrains/icons/services-20px';
 import classNames from 'classnames';
 import Dropdown from '../dropdown/dropdown';
 import Popup from '../popup/popup';
 import Theme from '../global/theme';
-import darkStyles from '../global/variables_dark.css';
 import HeaderIcon from './header-icon';
 import ServicesLink from './services-link';
+import darkStyles from '../global/variables_dark.css';
 import styles from './services.css';
 const makeAnchor = (loading) => {
-    const Anchor = ({ active }) => (_jsx(HeaderIcon, { loader: loading, active: active, icon: servicesIcon, "aria-label": 'Services' }));
+    const Anchor = ({ active }) => (<HeaderIcon loader={loading} active={active} icon={servicesIcon} aria-label='Services'/>);
     return Anchor;
 };
 export default class Services extends PureComponent {
@@ -27,18 +26,24 @@ export default class Services extends PureComponent {
     render() {
         const { clientId, loading, services, initShown, theme, ...props } = this.props;
         if (!services) {
-            return _jsx(HeaderIcon, { ...props, loader: loading, active: loading, icon: servicesIcon, "aria-label": 'Services' });
+            return <HeaderIcon {...props} loader={loading} active={loading} icon={servicesIcon} aria-label='Services'/>;
         }
         const sortedServices = [...services].sort(Services.sort);
         const servicesWithIcons = sortedServices.filter(service => service.iconUrl && service.homeUrl);
         const servicesWithOutIcons = sortedServices.filter(service => !service.iconUrl && service.homeUrl);
         const separatorIsRequired = servicesWithIcons.length !== 0 && servicesWithOutIcons.length !== 0;
-        return (_jsx(Dropdown, { ...props, anchor: makeAnchor(loading), initShown: initShown, children: _jsxs(Popup, { className: classNames(styles.services, { [darkStyles.dark]: theme === Theme.DARK }), top: -3, children: [servicesWithIcons.map(service => {
-                        const isActive = this.serviceIsActive(service);
-                        return (_jsx(Services.Link, { active: isActive, className: isActive ? styles.activeItem : styles.item, service: service }, service.id));
-                    }), separatorIsRequired && _jsx("div", { className: styles.line }, 'separator'), servicesWithOutIcons.map(service => {
-                        const isActive = this.serviceIsActive(service);
-                        return (_jsx(Services.Link, { active: isActive, className: isActive ? styles.activeItemStacked : styles.itemStacked, service: service }, service.id));
-                    })] }) }));
+        return (<Dropdown {...props} anchor={makeAnchor(loading)} initShown={initShown}>
+        <Popup className={classNames(styles.services, { [darkStyles.dark]: theme === Theme.DARK })} top={-3}>
+          {servicesWithIcons.map(service => {
+                const isActive = this.serviceIsActive(service);
+                return (<Services.Link active={isActive} className={isActive ? styles.activeItem : styles.item} key={service.id} service={service}/>);
+            })}
+          {separatorIsRequired && <div className={styles.line} key='separator'/>}
+          {servicesWithOutIcons.map(service => {
+                const isActive = this.serviceIsActive(service);
+                return (<Services.Link active={isActive} className={isActive ? styles.activeItemStacked : styles.itemStacked} key={service.id} service={service}/>);
+            })}
+        </Popup>
+      </Dropdown>);
     }
 }

package/components/header/smart-profile.d.ts

@@ -22,6 +22,6 @@ export default class SmartProfile extends PureComponent<SmartProfileProps, Smart
     onRevertPostponement: () => void;
     requestUser(): Promise<void>;
     checkUserCertificateMismatch(user: AuthUser): void;
-    render(): import("react/jsx-runtime").JSX.Element;
+    render(): import("react").JSX.Element;
 }
 export {};

package/components/header/{smart-profile.js → smart-profile.jsx}

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 /* eslint-disable no-underscore-dangle */
 import { PureComponent } from 'react';
 import alertService from '../alert-service/alert-service';
@@ -76,6 +75,6 @@ export default class SmartProfile extends PureComponent {
         const { user, loading, isLogoutPostponed, isUserChangePostponed } = this.state;
         const { auth, profileUrl, ...props } = this.props;
         const url = profileUrl || (user ? `${auth.config.serverUri}users/${user.id}` : '');
-        return (_jsx(Profile, { onLogin: this.login, onLogout: this.logout, onSwitchUser: this.switchUser, loading: loading, user: user, profileUrl: url, showApplyChangedUser: isUserChangePostponed, showLogIn: isLogoutPostponed, showLogOut: !isLogoutPostponed, showSwitchUser: auth._canShowDialogs() && !isLogoutPostponed && !isUserChangePostponed, onRevertPostponement: this.onRevertPostponement, ...props }));
+        return (<Profile onLogin={this.login} onLogout={this.logout} onSwitchUser={this.switchUser} loading={loading} user={user} profileUrl={url} showApplyChangedUser={isUserChangePostponed} showLogIn={isLogoutPostponed} showLogOut={!isLogoutPostponed} showSwitchUser={auth._canShowDialogs() && !isLogoutPostponed && !isUserChangePostponed} onRevertPostponement={this.onRevertPostponement} {...props}/>);
     }
 }

package/components/header/smart-services.d.ts

@@ -18,5 +18,5 @@ export default class SmartServices extends Component<SmartServicesProps> {
     stopLoading: () => void;
     getServicesContent: () => void;
     getServices(fields: string): Promise<Service[]> | undefined;
-    render(): import("react/jsx-runtime").JSX.Element | null;
+    render(): import("react").JSX.Element | null;
 }

package/components/header/{smart-services.js → smart-services.jsx}

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { Component } from 'react';
 import HTTP from '../http/http';
 import Services from './services';
@@ -44,6 +43,6 @@ export default class SmartServices extends Component {
         if (!visible) {
             return null;
         }
-        return (_jsx(Services, { ...props, clientId: auth.config.clientId, initShown: true, loading: loading, onClick: this.getServicesContent, services: services }));
+        return (<Services {...props} clientId={auth.config.clientId} initShown loading={loading} onClick={this.getServicesContent} services={services}/>);
     }
 }

package/components/header/tray.d.ts

@@ -1,4 +1,4 @@
 import { Component, type HTMLAttributes } from 'react';
 export default class Tray extends Component<HTMLAttributes<HTMLElement>> {
-    render(): import("react/jsx-runtime").JSX.Element;
+    render(): import("react").JSX.Element;
 }

package/components/header/{tray.js → tray.jsx}

@@ -1,12 +1,13 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { Children, Component } from 'react';
 import classNames from 'classnames';
 import styles from './header.css';
-const wrapChild = (child) => child && _jsx("div", { className: styles.trayItem, children: child });
+const wrapChild = (child) => child && <div className={styles.trayItem}>{child}</div>;
 export default class Tray extends Component {
     render() {
         const { children, className, ...restProps } = this.props;
         const classes = classNames(styles.tray, className);
-        return (_jsx("div", { ...restProps, className: classes, children: Children.map(children, wrapChild) }));
+        return (<div {...restProps} className={classes}>
+        {Children.map(children, wrapChild)}
+      </div>);
     }
 }

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

@@ -1,5 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { memo } from 'react';
+import { memo, useEffect } from 'react';
 import classNames from 'classnames';
 import deprecate from 'util-deprecate';
 import styles from './heading.css';
@@ -13,26 +12,34 @@ export var Levels;
     Levels[Levels["H3"] = 3] = "H3";
     Levels[Levels["H4"] = 4] = "H4";
 })(Levels || (Levels = {}));
-const fallbackHeading = deprecate(() => 'h3', 'Headings of level 5 and higher are replaced with h3');
+const warnFallbackHeading = deprecate(() => { }, 'Headings of level 5 and higher are replaced with h3');
 const HeadingMemo = memo(function Heading({ children, className, level = Levels.H1, ...restProps }) {
     const classes = classNames(styles.heading, className);
-    const Tag = level <= Levels.H4 ? `h${level}` : fallbackHeading();
-    return (_jsx(Tag, { ...restProps, className: classes, children: children }));
+    const isSupportedLevel = level <= Levels.H4;
+    useEffect(() => {
+        if (!isSupportedLevel) {
+            warnFallbackHeading();
+        }
+    }, [isSupportedLevel]);
+    const Tag = isSupportedLevel ? `h${level}` : 'h3';
+    return (<Tag {...restProps} className={classes}>
+      {children}
+    </Tag>);
 });
 const Heading = HeadingMemo;
 Heading.Levels = Levels;
 export default Heading;
 const H1 = memo(function H1(props) {
-    return _jsx(Heading, { ...props, level: Levels.H1 });
+    return <Heading {...props} level={Levels.H1}/>;
 });
 const H2 = memo(function H2(props) {
-    return _jsx(Heading, { ...props, level: Levels.H2 });
+    return <Heading {...props} level={Levels.H2}/>;
 });
 const H3 = memo(function H3(props) {
-    return _jsx(Heading, { ...props, level: Levels.H3 });
+    return <Heading {...props} level={Levels.H3}/>;
 });
 const H4 = memo(function H4({ className, bold, ...restProps }) {
     const classes = classNames(className, { [styles.bold]: bold });
-    return _jsx(Heading, { ...restProps, className: classes, level: Levels.H4 });
+    return <Heading {...restProps} className={classes} level={Levels.H4}/>;
 });
 export { H1, H2, H3, H4 };

package/components/i18n/{i18n-context.js → i18n-context.jsx}

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from 'react';
 import * as React from 'react';
 import { getTranslations, setTranslations, translate } from './i18n';
@@ -10,5 +9,5 @@ export const I18nContextHolder = ({ children, messages }) => {
     useEffect(() => {
         setTranslations(messages);
     }, [messages]);
-    return _jsx(I18nContext.Provider, { value: { messages, translate }, children: children });
+    return <I18nContext.Provider value={{ messages, translate }}>{children}</I18nContext.Provider>;
 };

package/components/icon/icon-svg.d.ts

@@ -2,6 +2,6 @@ import { type SVGAttributes } from 'react';
 export interface IconSVGProps extends SVGAttributes<SVGSVGElement> {
     src: string;
 }
-declare function IconSVG({ src, className, ...rest }: IconSVGProps): import("react/jsx-runtime").JSX.Element;
+declare function IconSVG({ src, className, ...rest }: IconSVGProps): import("react").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof IconSVG>;
 export default _default;

package/components/icon/{icon-svg.js → icon-svg.jsx}

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 // Inspired by https://github.com/sairion/svg-inline-react
 import { memo } from 'react';
 import classNames from 'classnames';
@@ -51,8 +50,8 @@ function IconSVG({ src, className, ...rest }) {
         [styles.compatibilityMode]: isCompatibilityMode(src),
     }, className);
     const { props, html } = getSVGFromSource(src);
-    return (_jsx("svg", { ...props, ...rest, className: glyphClasses, dangerouslySetInnerHTML: {
+    return (<svg {...props} {...rest} className={glyphClasses} dangerouslySetInnerHTML={{
             __html: html,
-        } }));
+        }}/>);
 }
 export default memo(IconSVG);

package/components/icon/icon.d.ts

@@ -38,7 +38,7 @@ export default class Icon extends PureComponent<IconProps> {
         width: number | undefined;
         height: number | undefined;
     } | undefined;
-    render(): import("react/jsx-runtime").JSX.Element | null;
+    render(): import("react").JSX.Element | null;
 }
 export type IconAttrs = React.JSX.LibraryManagedAttributes<typeof Icon, IconProps>;
 export { Color, Size };

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

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @name Icon
  */
@@ -6,8 +5,8 @@ import { PureComponent } from 'react';
 import classNames from 'classnames';
 import deprecate from 'util-deprecate';
 import { Color, Size } from './icon.constants';
-import styles from './icon.css';
 import IconSVG from './icon-svg';
+import styles from './icon.css';
 const warnSize = deprecate(() => { }, `\`size\`, \`width\` and \`height\` props are not recommended to use in Ring UI \`Icon\` component. The intrinsic sizes of SVG icon (\`width\` and \`height\` SVG attributes) are used instead.
 
 We strongly recommend to use icons handcrafted for particular sizes. If your icon doesn't exist in the desired size, please ask your designer to draw one. "Responsive" checkmark should be unchecked when exporting icon.'`);
@@ -52,7 +51,9 @@ export default class Icon extends PureComponent {
             [styles[color]]: !!color,
             [styles.loading]: loading,
         }, className);
-        return (_jsx("span", { "data-test": 'ring-icon', ...restProps, className: classes, children: typeof Glyph === 'string' ? (_jsx(IconSVG, { src: Glyph, style: this.getStyle() })) : (_jsx(Glyph, { className: styles.glyph, style: this.getStyle() })) }));
+        return (<span data-test='ring-icon' {...restProps} className={classes}>
+        {typeof Glyph === 'string' ? (<IconSVG src={Glyph} style={this.getStyle()}/>) : (<Glyph className={styles.glyph} style={this.getStyle()}/>)}
+      </span>);
     }
 }
 export { Color, Size };

package/components/input/input.d.ts

@@ -72,7 +72,7 @@ export declare class Input extends PureComponent<InputProps> {
     clear: (e: React.MouseEvent<HTMLButtonElement>) => void;
     handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
     handleTextareaChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
-    render(): import("react/jsx-runtime").JSX.Element;
+    render(): React.JSX.Element;
 }
 export type ContainerProps<P extends InputProps> = React.JSX.LibraryManagedAttributes<typeof Input, P>;
 export type InputSpecificAttrs = ContainerProps<InputSpecificProps>;

package/components/input/{input.js → input.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 closeIcon from '@jetbrains/icons/close-12px';
 import Button from '../button/button';
@@ -120,7 +120,21 @@ export class Input extends PureComponent {
             'aria-label': typeof label === 'string' && label ? label : placeholder,
             'data-enabled-shortcuts': Array.isArray(enableShortcuts) ? enableShortcuts.join(',') : null,
         };
-        return (_jsx(I18nContext.Consumer, { children: ({ translate }) => (_jsxs("div", { className: classes, "data-test": 'ring-input', children: [label && (_jsx(ControlLabel, { htmlFor: this.getId(), disabled: disabled, type: labelType, children: label })), _jsxs("div", { className: styles.container, children: [icon && _jsx(Icon, { glyph: icon, className: styles.icon }), beforeInput, multiline ? (_jsx("textarea", { onChange: this.handleTextareaChange, rows: 1, ...commonProps, ...restProps })) : (_jsx("input", { onChange: this.handleInputChange, ...commonProps, ...restProps })), clearable && !disabled && (_jsx(Button, { title: translations?.clear ?? translate('clear'), "data-test": 'ring-input-clear', className: styles.clear, icon: closeIcon, onClick: this.clear })), afterInput] }), error ? (_jsx("div", { className: styles.errorText, children: error })) : (help && _jsx(ControlHelp, { className: styles.helpText, children: help }))] })) }));
+        return (<I18nContext.Consumer>
+        {({ translate }) => (<div className={classes} data-test='ring-input'>
+            {label && (<ControlLabel htmlFor={this.getId()} disabled={disabled} type={labelType}>
+                {label}
+              </ControlLabel>)}
+            <div className={styles.container}>
+              {icon && <Icon glyph={icon} className={styles.icon}/>}
+              {beforeInput}
+              {multiline ? (<textarea onChange={this.handleTextareaChange} rows={1} {...commonProps} {...restProps}/>) : (<input onChange={this.handleInputChange} {...commonProps} {...restProps}/>)}
+              {clearable && !disabled && (<Button title={translations?.clear ?? translate('clear')} data-test='ring-input-clear' className={styles.clear} icon={closeIcon} onClick={this.clear}/>)}
+              {afterInput}
+            </div>
+            {error ? (<div className={styles.errorText}>{error}</div>) : (help && <ControlHelp className={styles.helpText}>{help}</ControlHelp>)}
+          </div>)}
+      </I18nContext.Consumer>);
     }
 }
 export default Input;

package/components/island/{adaptive-island-hoc.js → adaptive-island-hoc.jsx}

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { Component, createContext } from 'react';
 import { interpolateLinear } from '../global/linear-function';
 const TITLE_RESIZE_END = 20;
@@ -18,7 +17,11 @@ export default function adaptiveIslandHOC(ComposedComponent) {
             }
         };
         render() {
-            return (_jsx(PhaseContext.Provider, { value: this.state.phase, children: _jsx(ScrollHandlerContext.Provider, { value: this.onContentScroll, children: _jsx(ComposedComponent, { ...this.props }) }) }));
+            return (<PhaseContext.Provider value={this.state.phase}>
+          <ScrollHandlerContext.Provider value={this.onContentScroll}>
+            <ComposedComponent {...this.props}/>
+          </ScrollHandlerContext.Provider>
+        </PhaseContext.Provider>);
         }
     };
 }

package/components/island/content.d.ts

@@ -27,7 +27,7 @@ declare class Content extends Component<IslandContentInnerProps> {
     calculateScrollPosition: () => void;
     scrollableNode?: HTMLElement | null;
     setScrollableNodeAndCalculatePosition: (node: HTMLElement | null) => void;
-    render(): import("react/jsx-runtime").JSX.Element;
+    render(): import("react").JSX.Element;
 }
 declare const ContentWrapper: import("react").ForwardRefExoticComponent<IslandContentProps & import("react").RefAttributes<Content>>;
 export default ContentWrapper;