@jetbrains/ring-ui 7.0.11 → 7.0.13

package/components/date-picker/months.js

@@ -1,3 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
 import { useEffect, useMemo, useRef } from 'react';
 import { addMonths } from 'date-fns/addMonths';
 import { getDay } from 'date-fns/getDay';
@@ -81,12 +83,7 @@ export default function Months(props) {
             }
         };
     }, [handleWheel]);
-    return (<div className={styles.months} ref={componentRef}>
-      <div style={{
-            top: Math.floor(calHeight * HALF - monthHeight(months[0]) - monthHeight(months[1]) + offset),
-        }} className={styles.days}>
-        {months.map(date => (<Month {...props} month={date} key={+date}/>))}
-      </div>
-      <MonthNames {...props}/>
-    </div>);
+    return (_jsxs("div", { className: styles.months, ref: componentRef, children: [_jsx("div", { style: {
+                    top: Math.floor(calHeight * HALF - monthHeight(months[0]) - monthHeight(months[1]) + offset),
+                }, className: styles.days, children: months.map(date => (_createElement(Month, { ...props, month: date, key: +date }))) }), _jsx(MonthNames, { ...props })] }));
 }

package/components/date-picker/weekdays.d.ts

@@ -2,5 +2,5 @@ import type { Locale } from 'date-fns';
 interface WeekdaysProps {
     locale: Locale | undefined;
 }
-export default function Weekdays(props: WeekdaysProps): import("react").JSX.Element;
+export default function Weekdays(props: WeekdaysProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/date-picker/weekdays.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { getDay } from 'date-fns/getDay';
 import { format } from 'date-fns/format';
@@ -8,11 +9,7 @@ import styles from './date-picker.css';
 export default function Weekdays(props) {
     const days = shiftWeekArray(Object.values(weekdays), getWeekStartsOn(props.locale)).map(value => startOfDay(setDay(new Date(), value)));
     const { locale } = props;
-    return (<div className={styles.weekdays}>
-      {days.map(day => (<span className={classNames(styles.weekday, {
+    return (_jsx("div", { className: styles.weekdays, children: days.map(day => (_jsx("span", { className: classNames(styles.weekday, {
                 [styles.weekend]: [weekdays.SA, weekdays.SU].includes(getDay(day)),
-            })} key={+day}>
-          {format(day, 'EEEEEE', { locale })}
-        </span>))}
-    </div>);
+            }), children: format(day, 'EEEEEE', { locale }) }, +day))) }));
 }

package/components/date-picker/years.d.ts

@@ -14,6 +14,6 @@ export default class Years extends PureComponent<CalendarProps> {
     setYear(date: number): void;
     componentRef: import("react").RefObject<HTMLDivElement>;
     handleWheel: (e: WheelEvent) => void;
-    render(): import("react").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
 export {};

package/components/date-picker/years.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { createRef, PureComponent } from 'react';
 import classNames from 'classnames';
 import { addYears } from 'date-fns/addYears';
@@ -64,18 +65,14 @@ export default class Years extends PureComponent {
             years.push(year);
         }
         const pxToDate = linearFunction(0, Number(years[0]), yearDuration / yearHeight);
-        return (<div className={styles.years} ref={this.componentRef} style={{
+        return (_jsx("div", { className: styles.years, ref: this.componentRef, style: {
                 transition: this.stoppedScrolling ? 'top .2s ease-out 0s' : 'none',
                 top: Math.floor(calHeight * HALF - pxToDate.x(Number(date))),
-            }}>
-        {years.map(item => (<button type="button" key={+item} className={classNames(styles.year, {
+            }, children: years.map(item => (_jsx("button", { type: "button", className: classNames(styles.year, {
                     [styles.currentYear]: isSameYear(item, date),
                     [styles.today]: isThisYear(item),
-                })} onClick={function handleClick() {
+                }), onClick: function handleClick() {
                     onScrollChange(Number(setYear(scrollDate, getYear(item))));
-                }}>
-            {format(item, 'yyyy')}
-          </button>))}
-      </div>);
+                }, children: format(item, 'yyyy') }, +item))) }));
     }
 }

package/components/dialog/dialog.d.ts

@@ -45,6 +45,6 @@ export default class Dialog extends PureComponent<DialogProps> {
     dialog?: HTMLElement | null;
     dialogRef: (tabTrap: TabTrap | null) => void;
     nativeDialog: React.RefObject<HTMLDialogElement>;
-    render(): false | React.JSX.Element;
+    render(): false | import("react/jsx-runtime").JSX.Element;
 }
 export type DialogAttrs = JSX.LibraryManagedAttributes<typeof Dialog, DialogProps>;

package/components/dialog/dialog.js

@@ -1,5 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { createRef, PureComponent } from 'react';
-import * as React from 'react';
 import { createPortal } from 'react-dom';
 import classNames from 'classnames';
 import closeIcon from '@jetbrains/icons/close';
@@ -111,40 +111,19 @@ export default class Dialog extends PureComponent {
         const { show, showCloseButton, onOverlayClick, onCloseAttempt, onEscPress, onCloseClick, children, className, contentClassName, trapFocus, 'data-test': dataTest, closeButtonInside, portalTarget, label, closeButtonTitle, dense, shortcutOptions, native, modal, preventBodyScroll, ...restProps } = this.props;
         const classes = classNames(styles.container, className);
         const shortcutsMap = this.getShortcutsMap();
-        const content = (<>
-        <Shortcuts map={shortcutsMap} scope={this.state.shortcutsScope} options={this.props.shortcutOptions}/>
-        {(onOverlayClick !== noop || onCloseAttempt !== noop) && (<div 
-            // click handler is duplicated in close button
-            role="presentation" className={styles.clickableOverlay} onClick={this.handleClick} data-test="ring-dialog-overlay"/>)}
-        <div className={styles.innerContainer}>
-          <AdaptiveIsland className={classNames(styles.content, contentClassName, { [styles.dense]: dense })} data-test="ring-dialog" role="dialog" aria-label={label}>
-            {children}
-            {showCloseButton && (<Button icon={closeIcon} data-test="ring-dialog-close-button" className={classNames(styles.closeButton, {
-                    [styles.closeButtonOutside]: !closeButtonInside,
-                    [styles.closeButtonInside]: closeButtonInside,
-                })} iconClassName={classNames(styles.closeIcon, {
-                    [styles.closeIconOutside]: !closeButtonInside,
-                    [styles.closeIconInside]: closeButtonInside,
-                })} onClick={this.onCloseClick} title={closeButtonTitle} aria-label={closeButtonTitle || 'close dialog'}/>)}
-          </AdaptiveIsland>
-        </div>
-      </>);
+        const content = (_jsxs(_Fragment, { children: [_jsx(Shortcuts, { map: shortcutsMap, scope: this.state.shortcutsScope, options: this.props.shortcutOptions }), (onOverlayClick !== noop || onCloseAttempt !== noop) && (_jsx("div", { 
+                    // click handler is duplicated in close button
+                    role: "presentation", className: styles.clickableOverlay, onClick: this.handleClick, "data-test": "ring-dialog-overlay" })), _jsx("div", { className: styles.innerContainer, children: _jsxs(AdaptiveIsland, { className: classNames(styles.content, contentClassName, { [styles.dense]: dense }), "data-test": "ring-dialog", role: "dialog", "aria-label": label, children: [children, showCloseButton && (_jsx(Button, { icon: closeIcon, "data-test": "ring-dialog-close-button", className: classNames(styles.closeButton, {
+                                    [styles.closeButtonOutside]: !closeButtonInside,
+                                    [styles.closeButtonInside]: closeButtonInside,
+                                }), iconClassName: classNames(styles.closeIcon, {
+                                    [styles.closeIconOutside]: !closeButtonInside,
+                                    [styles.closeIconInside]: closeButtonInside,
+                                }), onClick: this.onCloseClick, title: closeButtonTitle, "aria-label": closeButtonTitle || 'close dialog' }))] }) })] }));
         if (native) {
-            return (<dialog className={classNames(styles.nativeDialog, className)} ref={this.nativeDialog}>
-          <PopupTarget id={this.uid} className={styles.popupTarget}>
-            {target => (<>
-                {content}
-                {target}
-              </>)}
-          </PopupTarget>
-        </dialog>);
+            return (_jsx("dialog", { className: classNames(styles.nativeDialog, className), ref: this.nativeDialog, children: _jsx(PopupTarget, { id: this.uid, className: styles.popupTarget, children: target => (_jsxs(_Fragment, { children: [content, target] })) }) }));
         }
         return (show &&
-            createPortal(<PopupTarget id={this.uid} className={styles.popupTarget}>
-          {target => (<TabTrap trapDisabled={!trapFocus} data-test={dataTests('ring-dialog-container', dataTest)} ref={this.dialogRef} className={classes} role="presentation" {...restProps}>
-              {content}
-              {target}
-            </TabTrap>)}
-        </PopupTarget>, portalTarget instanceof HTMLElement ? portalTarget : document.body));
+            createPortal(_jsx(PopupTarget, { id: this.uid, className: styles.popupTarget, children: target => (_jsxs(TabTrap, { trapDisabled: !trapFocus, "data-test": dataTests('ring-dialog-container', dataTest), ref: this.dialogRef, className: classes, role: "presentation", ...restProps, children: [content, target] })) }), portalTarget instanceof HTMLElement ? portalTarget : document.body));
     }
 }

package/components/dropdown/anchor.d.ts

@@ -1,3 +1,3 @@
 import { ButtonAttrs } from '../button/button';
-declare const _default: import("react").MemoExoticComponent<({ children, className, ...restProps }: ButtonAttrs) => import("react").JSX.Element>;
+declare const _default: import("react").MemoExoticComponent<({ children, className, ...restProps }: ButtonAttrs) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

package/components/dropdown/anchor.js

@@ -1,8 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { memo } from 'react';
 import classNames from 'classnames';
 import Button from '../button/button';
 import styles from './dropdown.css';
-const Anchor = ({ children, className, ...restProps }) => (<Button data-test-ring-dropdown-anchor inline dropdown className={classNames(styles.anchor, className)} {...restProps}>
-    {children}
-  </Button>);
+const Anchor = ({ children, className, ...restProps }) => (_jsx(Button, { "data-test-ring-dropdown-anchor": true, inline: true, dropdown: true, className: classNames(styles.anchor, className), ...restProps, children: children }));
 export default memo(Anchor);

package/components/dropdown/dropdown.d.ts

@@ -64,7 +64,7 @@ export default class Dropdown extends Component<DropdownProps, DropdownState> {
     toggle(show?: boolean): void;
     _toggle(show: boolean, pinned?: boolean): void;
     _clearTimer(): void;
-    render(): React.JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
 export type DropdownAttrs = JSX.LibraryManagedAttributes<typeof Dropdown, DropdownProps>;
 export { Anchor };

package/components/dropdown/dropdown.js

@@ -1,5 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cloneElement, Component } from 'react';
-import * as React from 'react';
 import classNames from 'classnames';
 import dataTests from '../global/data-tests';
 import { isArray } from '../global/typescript-utils';
@@ -105,7 +105,7 @@ export default class Dropdown extends Component {
         const active = hoverMode ? pinned : show;
         switch (typeof anchor) {
             case 'string':
-                anchorElement = <Anchor active={active}>{anchor}</Anchor>;
+                anchorElement = _jsx(Anchor, { active: active, children: anchor });
                 break;
             case 'function':
                 anchorElement = anchor({ active: show, pinned });
@@ -125,14 +125,11 @@ export default class Dropdown extends Component {
             onContextMenu: hoverMode ? this.handlePopupInteraction : undefined,
             dontCloseOnAnchorClick: true,
         };
-        return (<div data-test={dataTests('ring-dropdown', dataTest)} {...restProps} onClick={clickMode ? this.onClick : undefined} 
-        // anchorElement should be a `button` or an `a`
-        role="presentation" onMouseEnter={hoverMode ? this.onMouseEnter : undefined} onMouseLeave={hoverMode ? this.onMouseLeave : undefined} className={classes}>
-        {anchorElement}
-        {typeof children === 'function'
-                ? children(childProps)
-                : cloneElement(children, childProps)}
-      </div>);
+        return (_jsxs("div", { "data-test": dataTests('ring-dropdown', dataTest), ...restProps, onClick: clickMode ? this.onClick : undefined, 
+            // anchorElement should be a `button` or an `a`
+            role: "presentation", onMouseEnter: hoverMode ? this.onMouseEnter : undefined, onMouseLeave: hoverMode ? this.onMouseLeave : undefined, className: classes, children: [anchorElement, typeof children === 'function'
+                    ? children(childProps)
+                    : cloneElement(children, childProps)] }));
     }
 }
 export { Anchor };

package/components/dropdown-menu/dropdown-menu.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useMemo, cloneElement, } from 'react';
 import List, { ActiveItemContext } from '../list/list';
 import Dropdown from '../dropdown/dropdown';
@@ -15,7 +16,7 @@ function DropdownAnchorWrapper({ anchor, pinned, active, activeListItemId, listI
     const anchorProps = useMemo(() => ({ active, pinned, ...restProps, ...anchorAriaProps }), [pinned, active, restProps, anchorAriaProps]);
     const anchorComponentProps = useMemo(() => ({ ...anchorProps, pinned: `${anchorProps.pinned}` }), [anchorProps]);
     if (typeof anchor === 'string') {
-        return <Anchor {...anchorComponentProps}>{anchor}</Anchor>;
+        return _jsx(Anchor, { ...anchorComponentProps, children: anchor });
     }
     if (typeof anchor === 'function') {
         return anchor({ active, pinned, ...restProps }, anchorAriaProps);
@@ -23,16 +24,10 @@ function DropdownAnchorWrapper({ anchor, pinned, active, activeListItemId, listI
     if (!isArray(anchor)) {
         return cloneElement(anchor, typeof anchor.type === 'string' ? anchorAriaProps : anchorComponentProps);
     }
-    return <div {...anchorAriaProps}>{anchor}</div>;
+    return _jsx("div", { ...anchorAriaProps, children: anchor });
 }
 const DropdownMenu = forwardRef(function DropdownMenu({ id, anchor, ariaLabel, data, onSelect, menuProps, ...restDropdownProps }, forwardedRef) {
     const listId = useMemo(() => id || getUID('dropdown-menu-list'), [id]);
-    return (<ActiveItemContext.Provider>
-      <Dropdown anchor={({ pinned, active, ...restAnchorProps }) => (<ActiveItemContext.ValueContext.Consumer>
-            {activeItemId => (<DropdownAnchorWrapper anchor={anchor} pinned={pinned} active={active} activeListItemId={activeItemId} listId={listId} {...restAnchorProps}/>)}
-          </ActiveItemContext.ValueContext.Consumer>)} {...restDropdownProps}>
-        <PopupMenu ref={forwardedRef} id={listId} ariaLabel={ariaLabel || defaultAriaLabel} closeOnSelect activateFirstItem data={data} onSelect={onSelect} {...menuProps}/>
-      </Dropdown>
-    </ActiveItemContext.Provider>);
+    return (_jsx(ActiveItemContext.Provider, { children: _jsx(Dropdown, { anchor: ({ pinned, active, ...restAnchorProps }) => (_jsx(ActiveItemContext.ValueContext.Consumer, { children: activeItemId => (_jsx(DropdownAnchorWrapper, { anchor: anchor, pinned: pinned, active: active, activeListItemId: activeItemId, listId: listId, ...restAnchorProps })) })), ...restDropdownProps, children: _jsx(PopupMenu, { ref: forwardedRef, id: listId, ariaLabel: ariaLabel || defaultAriaLabel, closeOnSelect: true, activateFirstItem: true, data: data, onSelect: onSelect, ...menuProps }) }) }));
 });
 export default Object.assign(DropdownMenu, { ListProps: List.ListProps });

package/components/editable-heading/editable-heading.d.ts

@@ -28,6 +28,6 @@ export type EditableHeadingProps = Omit<InputHTMLAttributes<HTMLInputElement | H
     renderMenu?: () => React.ReactNode;
     translations?: EditableHeadingTranslations;
 };
-export declare const EditableHeading: (props: EditableHeadingProps) => React.JSX.Element;
-declare const _default: React.MemoExoticComponent<(props: EditableHeadingProps) => React.JSX.Element>;
+export declare const EditableHeading: (props: EditableHeadingProps) => import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<(props: EditableHeadingProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

package/components/editable-heading/editable-heading.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect } from 'react';
 import * as React from 'react';
 import classNames from 'classnames';
@@ -110,35 +111,6 @@ export const EditableHeading = (props) => {
             window.removeEventListener('mouseup', onMouseUp);
         };
     }, [onMouseMove, onMouseUp]);
-    return (<>
-      <div className={classes}>
-        {!disabled && isEditing ? (<>
-            <Shortcuts map={shortcutsMap} scope={shortcutsScope} disabled={isShortcutsDisabled}/>
-
-            {!multiline ? (<input className={inputClasses} value={children} autoFocus={autoFocus} data-test={dataTest} disabled={isSaving} onChange={onChange} {...restProps} onFocus={onInputFocus} onBlur={onInputBlur}/>) : (<div className={classNames(styles.textareaWrapper, inputStyles[`size${size}`])}>
-                <textarea ref={textAreaRef} className={inputClasses} value={children} autoFocus={autoFocus} data-test={dataTest} disabled={isSaving} onChange={onInputChange} {...restProps} onFocus={onInputFocus} onBlur={onInputBlur} onScroll={onInputScroll} style={{ maxHeight: maxInputRows ? `${maxInputRows}lh` : '' }}/>
-                {!isScrolledToBottom && <div className={styles.textareaFade}/>}
-              </div>)}
-          </>) : (<button type="button" className={styles.headingWrapperButton} onMouseDown={onHeadingMouseDown}>
-            <Heading className={headingClasses} level={level} data-test={dataTest}>
-              {children}
-            </Heading>
-          </button>)}
-
-        {!isEditing && renderMenu()}
-
-        {isEditing && !embedded && (<>
-            <Button className={styles.button} primary disabled={isSaveDisabled} loader={isSaving} onClick={onSave}>
-              {translations.save}
-            </Button>
-
-            <Button className={styles.button} disabled={isCancelDisabled} onClick={onCancel}>
-              {translations.cancel}
-            </Button>
-          </>)}
-      </div>
-
-      {isEditing && error && <div className={classNames(styles.errorText, inputStyles[`size${size}`])}>{error}</div>}
-    </>);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: classes, children: [!disabled && isEditing ? (_jsxs(_Fragment, { children: [_jsx(Shortcuts, { map: shortcutsMap, scope: shortcutsScope, disabled: isShortcutsDisabled }), !multiline ? (_jsx("input", { className: inputClasses, value: children, autoFocus: autoFocus, "data-test": dataTest, disabled: isSaving, onChange: onChange, ...restProps, onFocus: onInputFocus, onBlur: onInputBlur })) : (_jsxs("div", { className: classNames(styles.textareaWrapper, inputStyles[`size${size}`]), children: [_jsx("textarea", { ref: textAreaRef, className: inputClasses, value: children, autoFocus: autoFocus, "data-test": dataTest, disabled: isSaving, onChange: onInputChange, ...restProps, onFocus: onInputFocus, onBlur: onInputBlur, onScroll: onInputScroll, style: { maxHeight: maxInputRows ? `${maxInputRows}lh` : '' } }), !isScrolledToBottom && _jsx("div", { className: styles.textareaFade })] }))] })) : (_jsx("button", { type: "button", className: styles.headingWrapperButton, onMouseDown: onHeadingMouseDown, children: _jsx(Heading, { className: headingClasses, level: level, "data-test": dataTest, children: children }) })), !isEditing && renderMenu(), isEditing && !embedded && (_jsxs(_Fragment, { children: [_jsx(Button, { className: styles.button, primary: true, disabled: isSaveDisabled, loader: isSaving, onClick: onSave, children: translations.save }), _jsx(Button, { className: styles.button, disabled: isCancelDisabled, onClick: onCancel, children: translations.cancel })] }))] }), isEditing && error && _jsx("div", { className: classNames(styles.errorText, inputStyles[`size${size}`]), children: error })] }));
 };
 export default React.memo(EditableHeading);

package/components/error-bubble/error-bubble.d.ts

@@ -8,5 +8,5 @@ export type ErrorBubbleProps<P> = Partial<P> & {
  * @name Error Bubble
  */
 export default class ErrorBubble<P> extends PureComponent<ErrorBubbleProps<P>> {
-    render(): import("react").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }

package/components/error-bubble/error-bubble.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, cloneElement, PureComponent } from 'react';
 import classNames from 'classnames';
 import Popup from '../popup/popup';
@@ -10,13 +11,6 @@ export default class ErrorBubble extends PureComponent {
     render() {
         const { children, className, ...restProps } = this.props;
         const errorBubbleClasses = classNames(styles.errorBubble, className);
-        return (<div className={styles.errorBubbleWrapper} data-test="ring-error-bubble-wrapper">
-        {Children.map(children, (child) => cloneElement(child, { ...child.props, ...restProps }))}
-        {restProps.error && (<Popup trapFocus={false} className={styles.errorBubblePopup} hidden={false} attached={false} directions={[Directions.RIGHT_CENTER, Directions.RIGHT_BOTTOM, Directions.RIGHT_TOP]}>
-            <div className={errorBubbleClasses} data-test="ring-error-bubble">
-              {restProps.error}
-            </div>
-          </Popup>)}
-      </div>);
+        return (_jsxs("div", { className: styles.errorBubbleWrapper, "data-test": "ring-error-bubble-wrapper", children: [Children.map(children, (child) => cloneElement(child, { ...child.props, ...restProps })), restProps.error && (_jsx(Popup, { trapFocus: false, className: styles.errorBubblePopup, hidden: false, attached: false, directions: [Directions.RIGHT_CENTER, Directions.RIGHT_BOTTOM, Directions.RIGHT_TOP], children: _jsx("div", { className: errorBubbleClasses, "data-test": "ring-error-bubble", children: restProps.error }) }))] }));
     }
 }

package/components/error-message/error-message.d.ts

@@ -13,5 +13,5 @@ export interface ErrorMessageProps {
  * @name Error Message
  */
 export default class ErrorMessage extends Component<ErrorMessageProps> {
-    render(): import("react").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }

package/components/error-message/error-message.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 Icon from '../icon/icon';
@@ -11,15 +12,6 @@ export default class ErrorMessage extends Component {
     render() {
         const { className, icon, code, message, description, children, 'data-test': dataTest } = this.props;
         const classes = classNames(styles.errorMessage, className);
-        return (<div className={classes} data-test={dataTests('ring-error-message', dataTest)}>
-        {icon && <Icon className={styles.icon} glyph={icon} size={Size.Size64} suppressSizeWarning/>}
-        <div className={styles.content}>
-          <div className={styles.title} data-test="ring-error-message-title">
-            {code && `${code}:`} {message}
-          </div>
-          {description && <div className={styles.description}>{description}</div>}
-          {children}
-        </div>
-      </div>);
+        return (_jsxs("div", { className: classes, "data-test": dataTests('ring-error-message', dataTest), children: [icon && _jsx(Icon, { className: styles.icon, glyph: icon, size: Size.Size64, suppressSizeWarning: true }), _jsxs("div", { className: styles.content, children: [_jsxs("div", { className: styles.title, "data-test": "ring-error-message-title", children: [code && `${code}:`, " ", message] }), description && _jsx("div", { className: styles.description, children: description }), children] })] }));
     }
 }

package/components/footer/footer.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @name Footer
  */
@@ -11,9 +12,7 @@ const FooterColumn = memo(function FooterColumn({ position, children }) {
         [styles.columnCenter]: position === 'center',
         [styles.columnRight]: position === 'right',
     });
-    return (<div className={classes}>
-      <ul className={styles.columnItem}>{children}</ul>
-    </div>);
+    return (_jsx("div", { className: classes, children: _jsx("ul", { className: styles.columnItem, children: children }) }));
 });
 /**
  * Return copyright string
@@ -45,30 +44,24 @@ const FooterLine = memo(function FooterLine(props) {
         }
         const element = (item.copyright ? copyright(item.copyright) : '') + (item.label || item);
         if (item.url) {
-            return (<Link href={item.url} target={item.target} key={item.url + item.title} title={item.title}>
-          {element}
-        </Link>);
+            return (_jsx(Link, { href: item.url, target: item.target, title: item.title, children: element }, item.url + item.title));
         }
         return element;
     }
-    return <li className={styles.line}>{items.map(renderItem)}</li>;
+    return _jsx("li", { className: styles.line, children: items.map(renderItem) });
 });
 const Footer = memo(function Footer({ floating, className, left, center, right }) {
     function content(elements, position) {
         if (!elements) {
             return false;
         }
-        return (<FooterColumn key={position} position={position}>
-        {elements.map((item, idx) => (<FooterLine 
+        return (_jsx(FooterColumn, { position: position, children: elements.map((item, idx) => (_jsx(FooterLine
             // eslint-disable-next-line react/no-array-index-key
-            key={idx} item={item}/>))}
-      </FooterColumn>);
+            , { item: item }, idx))) }, position));
     }
     const classes = classNames(styles.footer, className, {
         [styles.footerFloating]: floating,
     });
-    return (<footer className={classes} data-test="ring-footer">
-      {[content(left, 'left'), content(center, 'center'), content(right, 'right')]}
-    </footer>);
+    return (_jsx("footer", { className: classes, "data-test": "ring-footer", children: [content(left, 'left'), content(center, 'center'), content(right, 'right')] }));
 });
 export default Footer;

package/components/global/create-stateful-context.d.ts

@@ -11,7 +11,7 @@ export default function createStatefulContext<T>(initialValue: T, name?: string)
     ValueContext: import("react").Context<T>;
     UpdateContext: import("react").Context<Update<T>>;
     Provider: {
-        ({ children }: ProviderProps): import("react").JSX.Element;
+        ({ children }: ProviderProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     useUpdate: (value: T, skipUpdate?: boolean) => void;

package/components/global/create-stateful-context.js

@@ -1,12 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, memo, useContext, useEffect, useState } from 'react';
 export default function createStatefulContext(initialValue, name = '') {
     const ValueContext = createContext(initialValue);
     const UpdateContext = createContext(() => { });
     function Provider({ children }) {
         const [value, update] = useState(initialValue);
-        return (<ValueContext.Provider value={value}>
-        <UpdateContext.Provider value={update}>{children}</UpdateContext.Provider>
-      </ValueContext.Provider>);
+        return (_jsx(ValueContext.Provider, { value: value, children: _jsx(UpdateContext.Provider, { value: update, children: children }) }));
     }
     Provider.displayName = `${name}Provider`;
     function useUpdate(value, skipUpdate) {

package/components/global/focus-sensor-hoc.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Component } from 'react';
 import { createComposedRef } from './composeRefs';
 export default function focusSensorHOC(ComposedComponent) {
@@ -70,7 +71,7 @@ export default function focusSensorHOC(ComposedComponent) {
         };
         render() {
             const { autofocus, focused, onFocus, onBlur, innerRef, scrollOnTableFocus, ...rest } = this.props;
-            return (<ComposedComponent {...rest} innerRef={this.composedRef(innerRef, this.onRefUpdate)} focused={this.state.focused} onFocusReset={this.onFocusReset} onFocusRestore={this.onFocusRestore}/>);
+            return (_jsx(ComposedComponent, { ...rest, innerRef: this.composedRef(innerRef, this.onRefUpdate), focused: this.state.focused, onFocusReset: this.onFocusReset, onFocusRestore: this.onFocusRestore }));
         }
     }
     FocusSensor.defaultProps = {

package/components/global/react-dom-renderer.d.ts

@@ -7,5 +7,5 @@ export default class Renderer extends Component<RendererProps> {
     componentDidMount(): void;
     node?: HTMLElement | null;
     nodeRef: (node: HTMLElement | null) => void;
-    render(): import("react").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }

package/components/global/react-dom-renderer.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Component } from 'react';
 export default class Renderer extends Component {
     componentDidMount() {
@@ -14,6 +15,6 @@ export default class Renderer extends Component {
     };
     render() {
         const { className } = this.props;
-        return <div className={className} ref={this.nodeRef}/>;
+        return _jsx("div", { className: className, ref: this.nodeRef });
     }
 }

package/components/global/rerender-hoc.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Component, forwardRef } from 'react';
 import { createComposedRef } from './composeRefs';
 export default function rerenderHOC(ComposedComponent) {
@@ -6,10 +7,10 @@ export default function rerenderHOC(ComposedComponent) {
         composedRef = createComposedRef();
         render() {
             const ref = this.composedRef(this.props.forwardedRef);
-            return (<ComposedComponent {...this.state} ref={instance => ref(instance != null ? { ...instance, rerender: this.setState.bind(this) } : null)}/>);
+            return (_jsx(ComposedComponent, { ...this.state, ref: instance => ref(instance != null ? { ...instance, rerender: this.setState.bind(this) } : null) }));
         }
     }
     return forwardRef(function RerendererForwardRef(props, ref) {
-        return <Rerenderer props={props} forwardedRef={ref}/>;
+        return _jsx(Rerenderer, { props: props, forwardedRef: ref });
     });
 }

package/components/global/theme.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState, useEffect, forwardRef, useContext, createContext, } from 'react';
 import classNames from 'classnames';
 import { createPortal } from 'react-dom';
@@ -50,7 +51,7 @@ export function applyTheme(theme, container) {
     }
 }
 const DefaultWrapper = forwardRef(function Wrapper(props, ref) {
-    return <div {...props} ref={ref}/>;
+    return _jsx("div", { ...props, ref: ref });
 });
 export const ThemeProvider = forwardRef(function ThemeProvider({ theme = Theme.AUTO, className, passToPopups, children, WrapperComponent = DefaultWrapper, target, ...restProps }, ref) {
     const systemTheme = useTheme();
@@ -64,15 +65,6 @@ export const ThemeProvider = forwardRef(function ThemeProvider({ theme = Theme.A
     }, [resolvedTheme, target]);
     const themeClasses = useThemeClasses(theme);
     const parentTarget = useContext(PopupTargetContext);
-    return (<ThemeContext.Provider value={themeValue}>
-      <WrapperComponent ref={ref} className={target != null ? undefined : classNames(className, themeClasses)} {...restProps}>
-        {passToPopups ? (<PopupTarget id={id}>
-            {popupTarget => (<>
-                {children}
-                {createPortal(<div className={themeClasses}>{popupTarget}</div>, (parentTarget && getPopupContainer(parentTarget)) || document.body)}
-              </>)}
-          </PopupTarget>) : (children)}
-      </WrapperComponent>
-    </ThemeContext.Provider>);
+    return (_jsx(ThemeContext.Provider, { value: themeValue, children: _jsx(WrapperComponent, { ref: ref, className: target != null ? undefined : classNames(className, themeClasses), ...restProps, children: passToPopups ? (_jsx(PopupTarget, { id: id, children: popupTarget => (_jsxs(_Fragment, { children: [children, createPortal(_jsx("div", { className: themeClasses, children: popupTarget }), (parentTarget && getPopupContainer(parentTarget)) || document.body)] })) })) : (children) }) }));
 });
 export default Theme;

package/components/global/variables.css

@@ -51,8 +51,8 @@
   --ring-pinned-shadow-color: rgb(var(--ring-pinned-shadow-components)); /* #6C707E */
   --ring-button-danger-hover-components: var(--ring-icon-error-color);
   --ring-button-danger-hover-color: var(--ring-icon-error-color);
-  --ring-button-primary-border-components: 49, 95, 189;
-  --ring-button-primary-border-color: rgb(var(--ring-button-primary-border-components)); /* #315FBD */
+  --ring-button-primary-border-components: 46, 85, 163;
+  --ring-button-primary-border-color: rgb(var(--ring-button-primary-border-components)); /* #2E55A3 */
   --ring-dialog-overlay-components: 0, 0, 0;
   --ring-dialog-overlay-opacity: 0.4;
   --ring-popup-shadow: 0 2px 8px var(--ring-popup-shadow-color), 0 1px 2px var(--ring-popup-secondary-shadow-color);
@@ -115,8 +115,7 @@
   --ring-disabled-selected-background-color: rgb(var(--ring-disabled-selected-background-components)); /* #EBECF0 */
   --ring-button-danger-active-components: 250, 212, 216;
   --ring-button-danger-active-color: rgb(var(--ring-button-danger-active-components)); /* #FAD4D8 */
-  --ring-button-loader-background-components: 70, 130, 250;
-  --ring-button-loader-background: rgb(var(--ring-button-loader-background-components)); /* #4682FA */
+  --ring-button-loader-background: rgba(var(--ring-white-text-components), 0.4);
   --ring-button-primary-background-components: 53, 116, 240;
   --ring-button-primary-background-color: rgb(var(--ring-button-primary-background-components)); /* #3574F0 */
   --ring-table-loader-background-color: rgba(var(--ring-content-background-components), 0.5); /* #FFFFFF50 */

package/components/global/variables_dark.css

@@ -41,8 +41,8 @@
   --ring-pinned-shadow-components: 0, 0, 0;
   --ring-pinned-shadow-color: rgb(var(--ring-pinned-shadow-components)); /* #000 */
   --ring-button-danger-hover-color: var(--ring-error-color);
-  --ring-button-primary-border-components: 53, 116, 240;
-  --ring-button-primary-border-color: rgb(var(--ring-button-primary-border-components)); /* #3574F0 */
+  --ring-button-primary-border-components: 153, 187, 255;
+  --ring-button-primary-border-color: rgb(var(--ring-button-primary-border-components)); /* #99BBFF */
   --ring-dialog-overlay-components: 0, 0, 0;
   --ring-dialog-overlay-opacity: 0.7;
   --ring-popup-shadow: 0 2px 8px var(--ring-popup-shadow-color), 0 1px 2px var(--ring-popup-secondary-shadow-color);

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

package/components/grid/col.js

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

package/components/grid/grid.d.ts

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