@jetbrains/ring-ui 7.0.10 → 7.0.12

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(): React.JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
 export { default as Container } from './container';

package/components/alert/alert.js

@@ -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,13 +114,11 @@ export default class Alert extends PureComponent {
      * @private
      */
     _getCaption() {
-        return (<span className={classNames(styles.caption, this.props.captionClassName, {
+        return (_jsx("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">
-        {this.props.children}
-      </span>);
+            }), onClick: this._handleCaptionsLinksClick, 
+            // We only process clicks on `a` elements, see above
+            role: "presentation", children: this.props.children }));
     }
     /**
      * @private
@@ -129,10 +127,10 @@ export default class Alert extends PureComponent {
     _getIcon() {
         const glyph = TypeToIcon[this.props.type];
         if (glyph) {
-            return <Icon glyph={glyph} className={styles.icon} color={TypeToIconColor[this.props.type] || Color.DEFAULT}/>;
+            return _jsx(Icon, { glyph: glyph, className: styles.icon, color: TypeToIconColor[this.props.type] || Color.DEFAULT });
         }
         else if (this.props.type === AlertType.LOADING) {
-            return <Loader className={styles.loader}/>;
+            return _jsx(Loader, { className: styles.loader });
         }
         return '';
     }
@@ -151,11 +149,7 @@ export default class Alert extends PureComponent {
         });
         const height = this.state.height;
         const style = height ? { marginBottom: -height } : undefined;
-        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>);
+        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 })) : ('')] }));
     }
 }
 export { default as Container } from './container';

package/components/alert/container.js

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

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

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

package/components/alert-service/alert-service.js

@@ -1,3 +1,4 @@
+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';
@@ -15,16 +16,12 @@ class AlertService {
     }
     renderAlertContainer(alerts) {
         if (alerts.length === 0) {
-            return <span />;
+            return _jsx("span", {});
         }
-        return (<AlertContainer>
-        {alerts.map(alert => {
+        return (_jsx(AlertContainer, { children: alerts.map(alert => {
                 const { message, key, ...rest } = alert;
-                return (<Alert key={key} {...rest}>
-              {message}
-            </Alert>);
-            })}
-      </AlertContainer>);
+                return (_jsx(Alert, { ...rest, children: message }, key));
+            }) }));
     }
     /**
      * Renders alert container into virtual node to skip maintaining container

package/components/auth/down-notification.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import alertService from '../alert-service/alert-service';
 import Alert from '../alert/alert';
 import Link from '../link/link';
@@ -18,15 +18,7 @@ function renderAlert(message, type = Alert.Type.WARNING) {
 }
 function Message({ translations, onCheckAgain }) {
     const { backendIsNotAvailable, checkAgain, errorMessage } = translations;
-    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>);
+    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 })] }));
 }
 export default function onBackendDown({ onCheckAgain, translations }) {
     async function checkAgainWithoutClosing(e) {
@@ -37,9 +29,9 @@ export default function onBackendDown({ onCheckAgain, translations }) {
             await onCheckAgain();
         }
         catch (err) {
-            renderAlert(<Message translations={translations} onCheckAgain={checkAgainWithoutClosing}/>);
+            renderAlert(_jsx(Message, { translations: translations, onCheckAgain: checkAgainWithoutClosing }));
         }
     }
-    renderAlert(<Message translations={translations} onCheckAgain={checkAgainWithoutClosing}/>);
+    renderAlert(_jsx(Message, { translations: translations, onCheckAgain: checkAgainWithoutClosing }));
     return () => alertService.remove(key);
 }

package/components/auth/iframe-flow.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import loginDialogService from '../login-dialog/service';
 import Link from '../link/link';
 import AuthResponseParser from './response-parser';
@@ -22,9 +23,7 @@ export default class IFrameFlow {
         const authRequest = await this._requestBuilder.prepareAuthRequest(
         // eslint-disable-next-line camelcase
         { request_credentials: 'required', auth_mode: 'bypass_to_login' }, { nonRedirect: false });
-        const renderFallbackLink = () => (<Link href={authRequest.url} target="_self">
-        {this._translations.nothingHappensLink}
-      </Link>);
+        const renderFallbackLink = () => (_jsx(Link, { href: authRequest.url, target: "_self", children: this._translations.nothingHappensLink }));
         return new Promise((resolve, reject) => {
             this.hideDialog = loginDialogService({
                 url: authRequest.url,

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.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Component } from 'react';
 import classNames from 'classnames';
 import { Content } from '../island/island';
@@ -53,23 +54,6 @@ export default class AuthDialog extends Component {
         const title = (this.props.title || defaultTitle)
             .replace('%serviceName%', serviceName ?? '')
             .replace('{{serviceName}}', serviceName ?? '');
-        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>);
+        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 })] }) }) }));
     }
 }

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

@@ -1,3 +1,4 @@
+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';
@@ -10,9 +11,7 @@ export const reactRoot = createRoot(containerElement);
  * Renders AuthDialog into virtual node to skip maintaining container
  */
 function renderAuthDialog(props) {
-    reactRoot.render(<ControlsHeightContext.Provider value={getGlobalControlsHeight()}>
-      <AuthDialog {...props}/>
-    </ControlsHeightContext.Provider>);
+    reactRoot.render(_jsx(ControlsHeightContext.Provider, { value: getGlobalControlsHeight(), children: _jsx(AuthDialog, { ...props }) }));
 }
 export default function showAuthDialog(props = {}) {
     renderAuthDialog({

package/components/avatar/avatar.d.ts

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

package/components/avatar/avatar.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PureComponent } from 'react';
 import classNames from 'classnames';
 import { encodeURL, isDataURI, parseQueryString } from '../global/url';
@@ -52,9 +53,7 @@ export default class Avatar extends PureComponent {
             ...style,
         };
         if (!url || this.state.errorUrl === url) {
-            return (<span {...restProps} data-test="avatar" className={classNames(styles.avatar, this.props.className, { [styles.empty]: username == null })} style={styleObj}>
-          {username != null && <FallbackAvatar size={size} round={round} username={username}/>}
-        </span>);
+            return (_jsx("span", { ...restProps, "data-test": "avatar", className: classNames(styles.avatar, this.props.className, { [styles.empty]: username == null }), style: styleObj, children: username != null && _jsx(FallbackAvatar, { size: size, round: round, username: username }) }));
         }
         let src = url;
         if (!skipParams && !isDataURI(url)) {
@@ -75,13 +74,10 @@ export default class Avatar extends PureComponent {
                 subavatarSizeString,
             };
             subavatarSrc = skipParams ? subavatar : encodeURL(urlStart, queryParams);
-            return (<div>
-          <img {...restProps} onError={this.handleError} onLoad={this.handleSuccess} className={classNames(styles.avatar, this.props.className)} 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 (_jsxs("div", { children: [_jsx("img", { ...restProps, onError: this.handleError, onLoad: this.handleSuccess, className: classNames(styles.avatar, this.props.className), 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" })] }));
         }
         else {
-            return (<img {...restProps} data-test="avatar" onError={this.handleError} onLoad={this.handleSuccess} className={classNames(styles.avatar, this.props.className)} style={styleObj} src={src} alt="User avatar"/>);
+            return (_jsx("img", { ...restProps, "data-test": "avatar", onError: this.handleError, onLoad: this.handleSuccess, className: classNames(styles.avatar, this.props.className), 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.Element;
+export default function FallbackAvatar({ username, size, round }: FallbackAvatarProps): import("react/jsx-runtime").JSX.Element;

package/components/avatar/fallback-avatar.js

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

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.Element[];
+export default function Breadcrumbs({ separatorClassName, children }: BreadcrumbsSeparatorAttrs): import("react/jsx-runtime").JSX.Element[];

package/components/breadcrumbs/breadcrumbs.js

@@ -1,11 +1,9 @@
+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
-    <Fragment key={index}>
-      {index > 0 && <span className={classNames(styles.separator, separatorClassName)}>{'/'}</span>}
-      {child}
-    </Fragment>));
+    _jsxs(Fragment, { children: [index > 0 && _jsx("span", { className: classNames(styles.separator, separatorClassName), children: '/' }), child] }, index)));
 }

package/components/button/button.css

@@ -255,7 +255,7 @@
 
   &.heightM {
     --ring-button-padding-block: calc(var(--ring-unit) * 0.75);
-    --ring-button-padding-inline: var(--ring-unit);
+    --ring-button-padding-inline: calc(var(--ring-unit) * 0.75);
   }
 
   &.heightL {

package/components/button/button.d.ts

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

package/components/button/button.js

@@ -1,5 +1,5 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { createRef, PureComponent } from 'react';
-import * as React from 'react';
 import classNames from 'classnames';
 import chevronDown from '@jetbrains/icons/chevron-down';
 import chevron12pxDown from '@jetbrains/icons/chevron-12px-down';
@@ -35,21 +35,14 @@ export class Button extends PureComponent {
             inline: isInline,
             height: height ?? this.context,
         });
-        const content = (<>
-        {icon && (<Icon className={classNames(styles.icon, iconClassName)} glyph={icon} size={iconSize} loading={loader && isInline} suppressSizeWarning={iconSuppressSizeWarning}/>)}
-        {children}
-        {dropdown && <Icon glyph={isInline ? chevron12pxDown : chevronDown} className={styles.dropdownIcon}/>}
-      </>);
+        const content = (_jsxs(_Fragment, { children: [icon && (_jsx(Icon, { className: classNames(styles.icon, iconClassName), glyph: icon, size: iconSize, loading: loader && isInline, suppressSizeWarning: iconSuppressSizeWarning })), children, dropdown && _jsx(Icon, { glyph: isInline ? chevron12pxDown : chevronDown, className: styles.dropdownIcon })] }));
         const commonProps = {
             tabIndex: loader ? -1 : 0,
             ...props,
             className: classes,
-            children: (<>
-          {loader && !isInline && <div className={styles.loaderBackground}/>}
-          {content}
-        </>),
+            children: (_jsxs(_Fragment, { children: [loader && !isInline && _jsx("div", { className: styles.loaderBackground }), content] })),
         };
-        return commonProps.href != null ? (<ClickableLink {...commonProps}/>) : (<button ref={this.buttonRef} type="button" {...commonProps}/>);
+        return commonProps.href != null ? (_jsx(ClickableLink, { ...commonProps })) : (_jsx("button", { ref: this.buttonRef, type: "button", ...commonProps }));
     }
 }
 export { Size as IconSize };

package/components/button-group/button-group.d.ts

@@ -10,6 +10,6 @@ export interface ButtonGroupProps extends HTMLAttributes<HTMLElement> {
  * @name Button Group
  */
 export default class ButtonGroup extends PureComponent<ButtonGroupProps> {
-    render(): import("react").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
 export { Caption };

package/components/button-group/button-group.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { PureComponent } from 'react';
 import classNames from 'classnames';
 import dataTests from '../global/data-tests';
@@ -12,11 +13,7 @@ export default class ButtonGroup extends PureComponent {
     render() {
         const { className, split, 'data-test': dataTest, label, help, ...restProps } = this.props;
         const classes = classNames(split ? styles.split : styles.buttonGroup, className);
-        return (<>
-        {label && <ControlLabel>{label}</ControlLabel>}
-        <div {...restProps} data-test={dataTests('ring-button-group', dataTest)} className={classes}/>
-        {help && <ControlHelp className={styles.help}>{help}</ControlHelp>}
-      </>);
+        return (_jsxs(_Fragment, { children: [label && _jsx(ControlLabel, { children: label }), _jsx("div", { ...restProps, "data-test": dataTests('ring-button-group', dataTest), className: classes }), help && _jsx(ControlHelp, { className: styles.help, children: help })] }));
     }
 }
 export { Caption };

package/components/button-group/caption.d.ts

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

package/components/button-group/caption.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { PureComponent } from 'react';
 import classNames from 'classnames';
 import styles from './button-group.css';
@@ -5,6 +6,6 @@ export default class Caption extends PureComponent {
     render() {
         const { className } = this.props;
         const classes = classNames(styles.caption, className);
-        return <span {...this.props} className={classes}/>;
+        return _jsx("span", { ...this.props, className: classes });
     }
 }

package/components/button-set/button-set.d.ts

@@ -6,5 +6,5 @@ export interface ButtonSetProps extends HTMLAttributes<HTMLElement> {
  * @name Button Set
  */
 export default class ButtonSet extends PureComponent<ButtonSetProps> {
-    render(): import("react").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }

package/components/button-set/button-set.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { PureComponent } from 'react';
 import classNames from 'classnames';
 import dataTests from '../global/data-tests';
@@ -9,8 +10,6 @@ export default class ButtonSet extends PureComponent {
     render() {
         const { className, 'data-test': dataTest, children, ...restProps } = this.props;
         const classes = classNames(styles.buttonSet, className);
-        return (<div {...restProps} data-test={dataTests('ring-button-set', dataTest)} className={classes}>
-        {children}
-      </div>);
+        return (_jsx("div", { ...restProps, "data-test": dataTests('ring-button-set', dataTest), className: classes, children: children }));
     }
 }

package/components/button-toolbar/button-toolbar.d.ts

@@ -6,5 +6,5 @@ export interface ButtonToolbarProps extends HTMLAttributes<HTMLElement> {
  * @name Button Toolbar
  */
 export default class ButtonToolbar extends PureComponent<ButtonToolbarProps> {
-    render(): import("react").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }

package/components/button-toolbar/button-toolbar.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { PureComponent } from 'react';
 import classNames from 'classnames';
 import dataTests from '../global/data-tests';
@@ -9,6 +10,6 @@ export default class ButtonToolbar extends PureComponent {
     render() {
         const { className, 'data-test': dataTest, ...restProps } = this.props;
         const classes = classNames(styles.buttonToolbar, className);
-        return <div {...restProps} data-test={dataTests('ring-button-toolbar', dataTest)} className={classes}/>;
+        return _jsx("div", { ...restProps, "data-test": dataTests('ring-button-toolbar', dataTest), className: classes });
     }
 }

package/components/checkbox/checkbox.css

@@ -1,5 +1,13 @@
 @import "../global/variables.css";
 
+:root {
+  --ring-checkbox-disabled-check-color: var(--ring-white-text-color);
+}
+
+:global(.ring-ui-theme-dark) {
+  --ring-checkbox-disabled-check-color: var(--ring-icon-color);
+}
+
 .checkbox {
   --ring-checkbox-size: 14px;
 
@@ -114,13 +122,13 @@
 
   &[disabled]:checked + .cellWrapper .cell,
   &[disabled]:indeterminate + .cellWrapper .cell {
-    border-color: var(--ring-border-selected-disabled-color);
-    background-color: var(--ring-border-selected-disabled-color);
+    border-color: var(--ring-border-disabled-active-color);
+    background-color: var(--ring-border-disabled-active-color);
   }
 
   &[disabled]:checked + .cellWrapper .check,
   &[disabled]:indeterminate + .cellWrapper .minus {
-    color: var(--ring-disabled-background-color);
+    color: var(--ring-checkbox-disabled-check-color);
   }
 
   &:indeterminate:indeterminate + .cellWrapper .check {

package/components/checkbox/checkbox.d.ts

@@ -24,5 +24,5 @@ export default class Checkbox extends PureComponent<CheckboxProps> {
     input?: HTMLInputElement | null;
     inputRef: (el: HTMLInputElement | null) => void;
     composedInputRef: import("memoize-one").MemoizedFn<(...refs: (Ref<HTMLInputElement> | undefined)[]) => (value: HTMLInputElement | null) => void>;
-    render(): import("react").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }

package/components/checkbox/checkbox.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PureComponent } from 'react';
 import classNames from 'classnames';
 import checkmarkIcon from '@jetbrains/icons/checkmark-12px';
@@ -41,18 +42,6 @@ export default class Checkbox extends PureComponent {
         const containerClasses = classNames(styles.checkbox, containerClassName);
         const cellClasses = classNames(styles.cell, cellClassName);
         const labelClasses = classNames(styles.label, labelClassName);
-        return (<label className={containerClasses} style={containerStyle} data-test="ring-checkbox">
-        <input {...restProps} data-checked={restProps.checked} ref={this.composedInputRef(this.inputRef, inputRef)} type="checkbox" className={classes}/>
-        <div className={styles.cellWrapper}>
-          <span className={cellClasses}>
-            <Icon glyph={checkmarkIcon} className={styles.check}/>
-            <Icon glyph={minusIcon} className={styles.minus}/>
-          </span>
-        </div>
-        <span className={labelClasses}>
-          {label || children}
-          {help && <ControlHelp>{help}</ControlHelp>}
-        </span>
-      </label>);
+        return (_jsxs("label", { className: containerClasses, style: containerStyle, "data-test": "ring-checkbox", children: [_jsx("input", { ...restProps, "data-checked": restProps.checked, ref: this.composedInputRef(this.inputRef, inputRef), type: "checkbox", className: classes }), _jsx("div", { className: styles.cellWrapper, children: _jsxs("span", { className: cellClasses, children: [_jsx(Icon, { glyph: checkmarkIcon, className: styles.check }), _jsx(Icon, { glyph: minusIcon, className: styles.minus })] }) }), _jsxs("span", { className: labelClasses, children: [label || children, help && _jsx(ControlHelp, { children: help })] })] }));
     }
 }

package/components/code/code.d.ts

@@ -25,7 +25,7 @@ export default class Code extends PureComponent<CodeProps> {
     highlight(): Promise<void>;
     get codeRef(): HTMLElement | null | undefined;
     get initCodeRef(): import("react").RefObject<HTMLElement> | ((ref: HTMLElement | null) => void);
-    render(): import("react").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
 declare const code: (strings: TemplateStringsArray, ...interpolations: unknown[]) => void;
 export { code, highlight };

package/components/code/code.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { PureComponent } from 'react';
 import classNames from 'classnames';
 import highlight from 'highlight.js/lib/core';
@@ -68,14 +69,10 @@ export default class Code extends PureComponent {
             [styles.inline]: inline,
             [styles.softWrap]: softWrap,
         });
-        return (<Tag className={classes} data-test="ring-code">
-        <code 
-        // should be focusable because it can be scrollable
-        tabIndex={inline ? -1 : 0} ref={this.initCodeRef} className={highlightStyles.highlightContainer}>
-          {normalizeIndent(code)}
-        </code>
-      </Tag>);
+        return (_jsx(Tag, { className: classes, "data-test": "ring-code", children: _jsx("code", { 
+                // should be focusable because it can be scrollable
+                tabIndex: inline ? -1 : 0, ref: this.initCodeRef, className: highlightStyles.highlightContainer, children: normalizeIndent(code) }) }));
     }
 }
-const code = trivialTemplateTag((source) => <Code code={source}/>);
+const code = trivialTemplateTag((source) => _jsx(Code, { code: source }));
 export { code, highlight };

package/components/collapse/collapse-content.js

@@ -1,4 +1,5 @@
-import React, { useState, useEffect, useRef, useContext, useMemo } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useContext, useMemo } from 'react';
 import classNames from 'classnames';
 import dataTests from '../global/data-tests';
 import { getRect } from '../global/dom';
@@ -70,11 +71,6 @@ export const CollapseContent = ({ children, minHeight = DEFAULT_HEIGHT, 'data-te
     }, [duration, height, collapsed, minHeight]);
     const fadeShouldBeVisible = useMemo(() => Boolean(minHeight && showFade), [minHeight, showFade]);
     const shouldRenderContent = disableAnimation ? !collapsed : !shouldHideContent;
-    return (<div ref={containerRef} id={`collapse-content-${id}`} data-test={dataTests(COLLAPSE_CONTENT_CONTAINER_TEST_ID)} className={classNames(styles.container, { [styles.transition]: !disableAnimation })} style={style}>
-      <div ref={contentRef} data-test={dataTests(COLLAPSE_CONTENT_TEST_ID, dataTest)}>
-        {shouldRenderContent ? children : null}
-      </div>
-      {fadeShouldBeVisible && <div className={styles.fade}/>}
-    </div>);
+    return (_jsxs("div", { ref: containerRef, id: `collapse-content-${id}`, "data-test": dataTests(COLLAPSE_CONTENT_CONTAINER_TEST_ID), className: classNames(styles.container, { [styles.transition]: !disableAnimation }), style: style, children: [_jsx("div", { ref: contentRef, "data-test": dataTests(COLLAPSE_CONTENT_TEST_ID, dataTest), children: shouldRenderContent ? children : null }), fadeShouldBeVisible && _jsx("div", { className: styles.fade })] }));
 };
 export default CollapseContent;