@jetbrains/ring-ui 7.0.14 → 7.0.16

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { PureComponent } from 'react';
+import { PureComponent, Children } from 'react';
 import classNames from 'classnames';
 import dataTests from '../global/data-tests';
 import ControlLabel from '../control-label/control-label';
@@ -12,7 +12,9 @@ import styles from './button-group.css';
 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);
+        const classes = classNames(split ? styles.split : styles.buttonGroup, className, {
+            [styles.disabled]: Children.toArray(this.props.children).every(child => child != null && typeof child === 'object' && 'props' in child && child.props.disabled),
+        });
         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 })] }));
     }
 }

package/components/checkbox/checkbox.css

@@ -5,7 +5,7 @@
 }
 
 :global(.ring-ui-theme-dark) {
-  --ring-checkbox-disabled-check-color: var(--ring-icon-color);
+  --ring-checkbox-disabled-check-color: var(--ring-disabled-color);
 }
 
 .checkbox {

package/components/confirm/confirm.d.ts

@@ -33,4 +33,4 @@ export default class Confirm extends PureComponent<ConfirmProps> {
     onEscPress: () => void;
     render(): import("react/jsx-runtime").JSX.Element;
 }
-export type ConfirmAttributes = JSX.LibraryManagedAttributes<typeof Confirm, ConfirmProps>;
+export type ConfirmAttributes = React.JSX.LibraryManagedAttributes<typeof Confirm, ConfirmProps>;

package/components/contenteditable/contenteditable.d.ts

@@ -20,7 +20,7 @@ declare class ContentEditableBase extends Component<ContentEditableBaseProps> {
     componentDidUpdate(prevProps: ContentEditableBaseProps): void;
     render(): import("react/jsx-runtime").JSX.Element;
 }
-type ContentEditableBaseAttrs = JSX.LibraryManagedAttributes<typeof ContentEditableBase, ContentEditableBaseProps>;
+type ContentEditableBaseAttrs = React.JSX.LibraryManagedAttributes<typeof ContentEditableBase, ContentEditableBaseProps>;
 export type ContentEditableProps = Omit<ContentEditableBaseAttrs, '__html'>;
 declare const ContentEditable: ({ children, ...props }: ContentEditableProps) => import("react/jsx-runtime").JSX.Element;
 export default ContentEditable;

package/components/data-list/data-list.css

@@ -75,7 +75,7 @@
 }
 
 .collapseIcon.collapseIcon {
-  color: var(--ring-icon-secondary-color);
+  color: var(--ring-secondary-color);
 }
 
 .loadingOverlay {

package/components/date-picker/date-picker.css

@@ -115,7 +115,7 @@
 .calendarIcon {
   margin-right: calc(var(--ring-unit) / 2);
 
-  color: var(--ring-icon-color);
+  color: var(--ring-secondary-color);
 }
 
 .anchor {
@@ -141,7 +141,7 @@
 .chevronDownIcon {
   margin-left: auto;
 
-  color: var(--ring-icon-secondary-color);
+  color: var(--ring-secondary-color);
 }
 
 .fromInput {

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

@@ -47,4 +47,4 @@ export default class DatePicker extends PureComponent<DatePickerProps> {
     getAnchorText: () => string;
     render(): import("react/jsx-runtime").JSX.Element;
 }
-export type DatePickerAttrs = JSX.LibraryManagedAttributes<typeof DatePicker, DatePickerProps>;
+export type DatePickerAttrs = React.JSX.LibraryManagedAttributes<typeof DatePicker, DatePickerProps>;

package/components/dialog/dialog.css

@@ -86,28 +86,12 @@
   color: var(--ring-icon-hover-color);
 }
 
-.clickableOverlay:hover + * .closeIconInside {
-  color: var(--ring-icon-hover-color);
-}
-
-.clickableOverlay:hover + * .closeIconOutside {
-  color: var(--ring-main-hover-color);
-}
-
-.closeButton:hover .closeIconInside {
-  color: var(--ring-icon-hover-color);
-}
-
-.closeButton:hover .closeIconOutside {
-  color: var(--ring-main-hover-color);
-}
-
-.clickableOverlay:active + * .closeIcon {
-  color: var(--ring-main-color);
+.clickableOverlay:hover + * .closeIcon {
+  color: var(--ring-link-hover-color);
 }
 
-.closeButton:active .closeIcon {
-  color: var(--ring-main-color);
+.closeButton:hover .closeIcon {
+  color: var(--ring-link-hover-color);
 }
 
 .closeButton.closeButton {

package/components/dialog/dialog.d.ts

@@ -47,4 +47,4 @@ export default class Dialog extends PureComponent<DialogProps> {
     nativeDialog: React.RefObject<HTMLDialogElement>;
     render(): false | import("react/jsx-runtime").JSX.Element;
 }
-export type DialogAttrs = JSX.LibraryManagedAttributes<typeof Dialog, DialogProps>;
+export type DialogAttrs = React.JSX.LibraryManagedAttributes<typeof Dialog, DialogProps>;

package/components/dialog/dialog.js

@@ -9,7 +9,8 @@ import dataTests from '../global/data-tests';
 import Shortcuts from '../shortcuts/shortcuts';
 import TabTrap from '../tab-trap/tab-trap';
 import Button from '../button/button';
-import { PopupTarget } from '../popup/popup.target';
+import { PopupTarget, PopupTargetContext } from '../popup/popup.target';
+import { getPopupContainer } from '../popup/popup';
 import { preventerFactory as scrollPreventerFactory } from './dialog__body-scroll-preventer';
 import styles from './dialog.css';
 /**
@@ -123,7 +124,18 @@ export default class Dialog extends PureComponent {
         if (native) {
             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(_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));
+        return (show && (_jsx(PopupTargetContext.Consumer, { children: contextTarget => {
+                let targetElement = document.body;
+                if (portalTarget instanceof HTMLElement) {
+                    targetElement = portalTarget;
+                }
+                else if (contextTarget != null) {
+                    const container = getPopupContainer(contextTarget);
+                    if (container != null) {
+                        targetElement = container;
+                    }
+                }
+                return 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] })) }), targetElement);
+            } })));
     }
 }

package/components/dropdown/dropdown.d.ts

@@ -13,13 +13,15 @@ export interface DropdownChildProps {
     onContextMenu?: () => void | undefined;
     dontCloseOnAnchorClick: boolean;
 }
+export type DropdownChildrenFunction = (props: Omit<PopupAttrs, 'children'>) => ReactNode;
+export type DropdownChildren = ReactElement<PopupAttrs> | DropdownChildrenFunction;
 export interface DropdownProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
     /**
      * Can be string, React element, or a function accepting an object with {active, pinned} properties and returning a React element
      * React element should render some interactive HTML element like `button` or `a`
      */
     anchor: ReactElement | readonly ReactElement[] | string | ((props: AnchorProps) => ReactNode);
-    children: ReactElement<PopupAttrs> | ((props: Omit<PopupAttrs, 'children'>) => ReactNode);
+    children: DropdownChildren;
     initShown: boolean;
     disabled?: boolean | null | undefined;
     clickMode: boolean;
@@ -66,5 +68,5 @@ export default class Dropdown extends Component<DropdownProps, DropdownState> {
     _clearTimer(): void;
     render(): import("react/jsx-runtime").JSX.Element;
 }
-export type DropdownAttrs = JSX.LibraryManagedAttributes<typeof Dropdown, DropdownProps>;
+export type DropdownAttrs = React.JSX.LibraryManagedAttributes<typeof Dropdown, DropdownProps>;
 export { Anchor };

package/components/dropdown-menu/dropdown-menu.d.ts

@@ -1,19 +1,21 @@
-import { ReactElement, ReactNodeArray, HTMLAttributes, SyntheticEvent, Ref } from 'react';
+import { ReactElement, HTMLAttributes, SyntheticEvent, Ref, ReactNode } from 'react';
 import { SelectHandlerParams } from '../list/list';
-import { AnchorProps, DropdownAttrs } from '../dropdown/dropdown';
+import { AnchorProps, DropdownAttrs, DropdownChildrenFunction } from '../dropdown/dropdown';
 import PopupMenu, { PopupMenuAttrs } from '../popup-menu/popup-menu';
 import { ListDataItem } from '../list/consts';
 export interface DropdownAnchorWrapperProps extends AnchorProps {
-    anchor: ReactElement | ReactNodeArray | string | ((props: AnchorProps, ariaProps: HTMLAttributes<HTMLElement>) => ReactElement | null);
+    anchor: ReactElement | ReactNode[] | string | ((props: AnchorProps, ariaProps: HTMLAttributes<HTMLElement>) => ReactElement | null);
     activeListItemId?: string | null | undefined;
     listId?: string | undefined;
 }
+type OnSelectHandler<T> = ((item: ListDataItem<T>, event: Event | SyntheticEvent, params?: SelectHandlerParams) => void) | undefined;
 export interface DropdownMenuProps<T = unknown> extends Omit<DropdownAttrs, 'anchor' | 'onSelect' | 'children'> {
-    anchor: ReactElement | ReactNodeArray | string | ((props: AnchorProps, ariaProps: HTMLAttributes<HTMLElement>) => ReactElement | null);
+    anchor: ReactElement | ReactNode[] | string | ((props: AnchorProps, ariaProps: HTMLAttributes<HTMLElement>) => ReactElement | null);
     data?: readonly ListDataItem<T>[] | undefined;
     ariaLabel?: string | null | undefined;
-    onSelect?: ((item: ListDataItem<T>, event: Event | SyntheticEvent, params?: SelectHandlerParams) => void) | undefined;
+    onSelect?: OnSelectHandler<T>;
     menuProps?: PopupMenuAttrs<T> | null | undefined;
+    children?: DropdownChildrenFunction;
 }
 declare const _default: (<T = unknown>(props: DropdownMenuProps<T> & {
     ref?: Ref<PopupMenu>;

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useMemo, cloneElement, } from 'react';
+import { forwardRef, useMemo, cloneElement } from 'react';
 import List, { ActiveItemContext } from '../list/list';
 import Dropdown from '../dropdown/dropdown';
 import PopupMenu from '../popup-menu/popup-menu';
@@ -26,8 +26,24 @@ function DropdownAnchorWrapper({ anchor, pinned, active, activeListItemId, listI
     }
     return _jsx("div", { ...anchorAriaProps, children: anchor });
 }
-const DropdownMenu = forwardRef(function DropdownMenu({ id, anchor, ariaLabel, data, onSelect, menuProps, ...restDropdownProps }, forwardedRef) {
+function renderDropdownMenuChildren({ children, popupMenuProps }) {
+    if (!children) {
+        return _jsx(PopupMenu, { ...popupMenuProps });
+    }
+    return (popupProps) => children({ ...popupProps, ...popupMenuProps });
+}
+const DropdownMenu = forwardRef(function DropdownMenu({ id, anchor, ariaLabel, data, onSelect, menuProps, children, ...restDropdownProps }, forwardedRef) {
     const listId = useMemo(() => id || getUID('dropdown-menu-list'), [id]);
-    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 }) }) }));
+    const popupMenuProps = useMemo(() => ({
+        ref: forwardedRef,
+        id: listId,
+        ariaLabel: ariaLabel || defaultAriaLabel,
+        closeOnSelect: true,
+        activateFirstItem: true,
+        data,
+        onSelect,
+        ...menuProps,
+    }), [ariaLabel, data, forwardedRef, listId, menuProps, onSelect]);
+    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: renderDropdownMenuChildren({ children, popupMenuProps }) }) }));
 });
 export default Object.assign(DropdownMenu, { ListProps: List.ListProps });

package/components/editable-heading/editable-heading.css

@@ -123,7 +123,7 @@
     margin-bottom: 1px;
 
     border-bottom-width: 2px;
-    border-bottom-color: var(--ring-icon-error-color);
+    border-bottom-color: var(--ring-error-color);
   }
 }
 

package/components/error-message/error-message.css

@@ -33,5 +33,5 @@
 .icon {
   margin: 0 16px 24px 0;
 
-  color: var(--ring-icon-secondary-color);
+  color: var(--ring-secondary-color);
 }

package/components/global/focus-sensor-hoc.d.ts

@@ -14,6 +14,6 @@ export interface FocusSensorAddProps<T extends HTMLElement> {
     onFocusRestore: () => void;
 }
 type RestProps<P, T extends HTMLElement> = Omit<P, keyof FocusSensorAddProps<T>>;
-export type FocusSensorProps<P extends FocusSensorAddProps<T>, T extends HTMLElement, C extends ComponentType<P>> = RestProps<JSX.LibraryManagedAttributes<C, P>, T> & FocusSensorOuterProps<T>;
+export type FocusSensorProps<P extends FocusSensorAddProps<T>, T extends HTMLElement, C extends ComponentType<P>> = RestProps<React.JSX.LibraryManagedAttributes<C, P>, T> & FocusSensorOuterProps<T>;
 export default function focusSensorHOC<T extends HTMLElement, P extends FocusSensorAddProps<T>, C extends ComponentType<P>>(ComposedComponent: C): ComponentType<FocusSensorProps<P, T, typeof ComposedComponent>>;
 export {};

package/components/global/variables.css

@@ -9,36 +9,48 @@
   --ring-line-color: rgb(var(--ring-line-components)); /* #dfe1e5 */
   --ring-borders-components: 211, 213, 219;
   --ring-borders-color: rgb(var(--ring-borders-components)); /* #d3d5db */
-  --ring-icon-components: 129, 133, 148;
-  --ring-icon-color: rgb(var(--ring-icon-components)); /* #818594 */
+  --ring-icon-components: 108, 112, 126;
+  --ring-icon-color: rgb(var(--ring-icon-components)); /* #6C707E */ /* TODO: remove in 8.0 in favor of --ring-secondary-color */
   --ring-icon-white-components: 255, 255, 255;
-  --ring-icon-white-color: rgb(var(--ring-icon-white-components)); /* #FFFFFF */
-  --ring-icon-secondary-components: 129, 133, 148;
-  --ring-icon-secondary-color: rgb(var(--ring-icon-secondary-components)); /* #818594 */
+  --ring-icon-white-color: rgb(var(--ring-icon-white-components)); /* #FFFFFF */ /* TODO: remove in 8.0 in favor of --ring-white-text-color */
+  --ring-icon-secondary-components: 108, 112, 126;
+  --ring-icon-secondary-color: rgb(var(--ring-icon-secondary-components)); /* #6C707E */ /* TODO: remove in 8.0 in favor of --ring-secondary-color */
   --ring-border-disabled-components: 235, 236, 240;
   --ring-border-disabled-color: rgb(var(--ring-border-disabled-components)); /* #ebecf0 */
   --ring-border-selected-disabled-components: 201, 204, 214;
   --ring-border-selected-disabled-color: rgb(var(--ring-border-selected-disabled-components)); /* #c9ccd6 */
   --ring-border-disabled-active-components: 171, 213, 246;
   --ring-border-disabled-active-color: rgb(var(--ring-border-disabled-active-components)); /* #abd5f6 */
-  --ring-icon-disabled-components: 211, 213, 219;
-  --ring-icon-disabled-color: rgb(var(--ring-icon-disabled-components)); /* #d3d5db */
+  --ring-icon-disabled-components: 168, 173, 189;
+  --ring-icon-disabled-color: rgb(var(--ring-icon-disabled-components)); /* #A8ADBD */ /* TODO: remove in 8.0 in favor of --ring-disabled-color */
   --ring-border-hover-components: 160, 189, 248;
   --ring-border-hover-color: rgb(var(--ring-border-hover-components)); /* #a0bdf8 */
+  --ring-border-hover-success-components: 197, 229, 204;
+  --ring-border-hover-success-color: rgb(var(--ring-border-hover-success-components)); /* #C5E5CC */
+  --ring-border-hover-error-components: 250, 212, 216;
+  --ring-border-hover-error-color: rgb(var(--ring-border-hover-error-components)); /* #FAD4D8 */
   --ring-icon-hover-components: 90, 93, 107;
-  --ring-icon-hover-color: rgb(var(--ring-icon-hover-components)); /* #5a5d6b */
+  --ring-icon-hover-color: rgb(var(--ring-icon-hover-components)); /* #5a5d6b */ /* TODO: remove in 8.0 */
   --ring-main-components: 53, 116, 240;
   --ring-main-color: rgb(var(--ring-main-components)); /* #3574f0 */
   --ring-action-link-components: 46, 85, 163;
-  --ring-action-link-color: rgb(var(--ring-action-link-components)); /* #2E55A3 */
+  --ring-action-link-color: rgb(var(--ring-action-link-components)); /* #2E55A3 */ /* TODO: remove in 8.0 in favor of --ring-link-color */
   --ring-main-hover-components: 51, 105, 214;
   --ring-main-hover-color: rgb(var(--ring-main-hover-components)); /* #3369d6 */
-  --ring-icon-error-components: 219, 59, 75;
-  --ring-icon-error-color: rgb(var(--ring-icon-error-components)); /* #db3b4b */
-  --ring-icon-warning-components: 255, 175, 15;
-  --ring-icon-warning-color: rgb(var(--ring-icon-warning-components)); /* #ffaf0f */
-  --ring-icon-success-components: 85, 167, 106;
-  --ring-icon-success-color: rgb(var(--ring-icon-success-components)); /* #55a76a */
+  --ring-main-success-components: 32, 138, 60;
+  --ring-main-success-color: rgb(var(--ring-main-success-components)); /* #208A3C */
+  --ring-main-success-hover-components: 31, 128, 57;
+  --ring-main-success-hover-color: rgb(var(--ring-main-success-hover-components)); /* #1F8039 */
+  --ring-main-error-components: 204, 54, 69;
+  --ring-main-error-color: rgb(var(--ring-main-error-components)); /* #CC3645 */
+  --ring-main-error-hover-components: 188, 48, 62;
+  --ring-main-error-hover-color: rgb(var(--ring-main-error-hover-components)); /* #BC303E */
+  --ring-icon-error-components: 204, 54, 69;
+  --ring-icon-error-color: rgb(var(--ring-icon-error-components)); /* #CC3645 */ /* TODO: remove in 8.0 in favor of --ring-error-color */
+  --ring-icon-warning-components: 164, 103, 4;
+  --ring-icon-warning-color: rgb(var(--ring-icon-warning-components)); /* #A46704 */ /* TODO: remove in 8.0 in favor of --ring-warning-color */
+  --ring-icon-success-components: 31, 117, 54;
+  --ring-icon-success-color: rgb(var(--ring-icon-success-components)); /* #1F7536 */ /* TODO: remove in 8.0 in favor of --ring-success-color */
   --ring-pale-control-components: 194, 214, 252;
   --ring-pale-control-color: rgb(var(--ring-pale-control-components)); /* #C2D6FC */
   --ring-popup-border-components: 0, 28, 54;
@@ -48,9 +60,9 @@
   --ring-popup-secondary-shadow-color: rgba(var(--ring-popup-border-components), 0.04);
   --ring-message-shadow-color: rgba(var(--ring-popup-border-components), 0.3);
   --ring-pinned-shadow-components: 108, 112, 126;
-  --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-pinned-shadow-color: rgb(var(--ring-pinned-shadow-components)); /* #6C707E */ /* TODO remove in 8.0 */
+  --ring-button-danger-hover-components: 219, 59, 75;
+  --ring-button-danger-hover-color: rgb(var(--ring-button-danger-hover-components)); /* #DB3B4B */
   --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;
@@ -62,7 +74,7 @@
   --ring-search-components: 112, 156, 245;
   --ring-search-color: rgb(var(--ring-search-components)); /* #709CF5 */
   --ring-hint-components: 46, 85, 163;
-  --ring-hint-color: rgb(var(--ring-hint-components)); /* #2E55A3 */
+  --ring-hint-color: rgb(var(--ring-hint-components)); /* #2E55A3 */ /* TODO: remove in 8.0 */
   --ring-link-components: 46, 85, 163;
   --ring-link-color: rgb(var(--ring-link-components)); /* #2E55A3 */
   --ring-link-hover-components: 34, 60, 114;
@@ -115,7 +127,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: rgba(var(--ring-white-text-components), 0.4);
+  --ring-button-loader-background: rgba(var(--ring-white-text-components), 0.4); /* TODO remove in 8.0 */
   --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

@@ -7,39 +7,51 @@
   --ring-line-color: rgb(var(--ring-line-components)); /* #43454A */
   --ring-borders-components: 111, 115, 122;
   --ring-borders-color: rgb(var(--ring-borders-components)); /* #6F737A */
-  --ring-icon-components: 134, 138, 145;
-  --ring-icon-color: rgb(var(--ring-icon-components)); /* #868A91 */
-  --ring-icon-secondary-components: 134, 138, 145;
-  --ring-icon-secondary-color: rgb(var(--ring-icon-secondary-components)); /* #868A91 */
+  --ring-icon-components: 157, 160, 168;
+  --ring-icon-color: rgb(var(--ring-icon-components)); /* #9DA0A8 */ /* TODO: remove in 8.0 in favor of --ring-secondary-color */
+  --ring-icon-secondary-components: 157, 160, 168;
+  --ring-icon-secondary-color: rgb(var(--ring-icon-secondary-components)); /* #9DA0A8 */ /* TODO: remove in 8.0 in favor of --ring-secondary-color */
   --ring-border-disabled-components: 78, 81, 87;
   --ring-border-disabled-color: rgb(var(--ring-border-disabled-components)); /* #4E5157 */
   --ring-border-selected-disabled-components: 90, 93, 99;
   --ring-border-selected-disabled-color: rgb(var(--ring-border-selected-disabled-components)); /* #5A5D63 */
   --ring-border-disabled-active-components: 23, 73, 113;
   --ring-border-disabled-active-color: rgb(var(--ring-border-disabled-active-components)); /* #174971 */
-  --ring-icon-disabled-components: 78, 81, 87;
-  --ring-icon-disabled-color: rgb(var(--ring-icon-disabled-components)); /* #4E5157 */
+  --ring-icon-disabled-components: 111, 115, 122;
+  --ring-icon-disabled-color: rgb(var(--ring-icon-disabled-components)); /* #6F737A */ /* TODO: remove in 8.0 in favor of --ring-disabled-color */
   --ring-border-hover-components: 55, 95, 173;
   --ring-border-hover-color: rgb(var(--ring-border-hover-components)); /* #375FAD */
+  --ring-border-hover-success-components: 78, 128, 82;
+  --ring-border-hover-success-color: rgb(var(--ring-border-hover-success-components)); /* #4E8052 */
+  --ring-border-hover-error-components: 156, 78, 78;
+  --ring-border-hover-error-color: rgb(var(--ring-border-hover-error-components)); /* #9C4E4E */
   --ring-main-components: 53, 116, 240;
   --ring-main-color: rgb(var(--ring-main-components)); /* #3574F0 */
   --ring-action-link-components: 153, 187, 255;
-  --ring-action-link-color: rgb(var(--ring-action-link-components)); /* #99BBFF */
+  --ring-action-link-color: rgb(var(--ring-action-link-components)); /* #99BBFF */ /* TODO: remove in 8.0 in favor of --ring-link-color */
   --ring-main-hover-components: 54, 106, 207;
   --ring-main-hover-color: rgb(var(--ring-main-hover-components)); /* #366ACF */
-  --ring-icon-error-components: 219, 92, 92;
-  --ring-icon-error-color: rgb(var(--ring-icon-error-components)); /* #DB5C5C */
-  --ring-icon-warning-components: 214, 174, 88;
-  --ring-icon-warning-color: rgb(var(--ring-icon-warning-components)); /* #D6AE58 */
-  --ring-icon-success-components: 95, 173, 101;
-  --ring-icon-success-color: rgb(var(--ring-icon-success-components)); /* #5FAD65 */
+  --ring-main-success-components: 87, 150, 92;
+  --ring-main-success-color: rgb(var(--ring-main-success-components)); /* #57965C */
+  --ring-main-success-hover-components: 78, 128, 82;
+  --ring-main-success-hover-color: rgb(var(--ring-main-success-hover-components)); /* #4E8052 */
+  --ring-main-error-components: 189, 87, 87;
+  --ring-main-error-color: rgb(var(--ring-main-error-components)); /* #BD5757 */
+  --ring-main-error-hover-components: 156, 78, 78;
+  --ring-main-error-hover-color: rgb(var(--ring-main-error-hover-components)); /* #9C4E4E */
+  --ring-icon-error-components: 227, 119, 116;
+  --ring-icon-error-color: rgb(var(--ring-icon-error-components)); /* #E37774 */ /* TODO: remove in 8.0 in favor of --ring-error-color */
+  --ring-icon-warning-components: 242, 197, 92;
+  --ring-icon-warning-color: rgb(var(--ring-icon-warning-components)); /* #F2C55C */ /* TODO: remove in 8.0 in favor of --ring-warning-color */
+  --ring-icon-success-components: 115, 189, 121;
+  --ring-icon-success-color: rgb(var(--ring-icon-success-components)); /* #73BD79 */ /* TODO: remove in 8.0 in favor of --ring-success-color */
   --ring-popup-border-components: 57, 59, 64;
   --ring-popup-border-color: rgb(var(--ring-popup-border-components)); /* #393B40 */
   --ring-popup-shadow-color: rgba(0, 0, 0, 0.31);
   --ring-popup-secondary-shadow-color: rgba(0, 0, 0, 0.37);
   --ring-message-shadow-color: rgba(var(--ring-popup-border-components), 0.3);
   --ring-pinned-shadow-components: 0, 0, 0;
-  --ring-pinned-shadow-color: rgb(var(--ring-pinned-shadow-components)); /* #000 */
+  --ring-pinned-shadow-color: rgb(var(--ring-pinned-shadow-components)); /* #000 */ /* TODO remove in 8.0 */
   --ring-button-danger-hover-color: var(--ring-error-color);
   --ring-button-primary-border-components: 153, 187, 255;
   --ring-button-primary-border-color: rgb(var(--ring-button-primary-border-components)); /* #99BBFF */
@@ -50,7 +62,7 @@
 
   /* Text */
   --ring-hint-components: 134, 138, 145;
-  --ring-hint-color: rgb(var(--ring-hint-components)); /* #868A91 */
+  --ring-hint-color: rgb(var(--ring-hint-components)); /* #868A91 */ /* TODO: remove in 8.0 */
   --ring-link-components: 153, 187, 255;
   --ring-link-color: rgb(var(--ring-link-components)); /* #99BBFF */
   --ring-link-hover-components: 107, 155, 250;

package/components/header/header.d.ts

@@ -19,7 +19,7 @@ declare class Header extends Component<HeaderProps> {
     };
     render(): import("react/jsx-runtime").JSX.Element;
 }
-export type HeaderAttrs = JSX.LibraryManagedAttributes<typeof Header, HeaderProps>;
+export type HeaderAttrs = React.JSX.LibraryManagedAttributes<typeof Header, HeaderProps>;
 export default Header;
 export { default as Logo } from './logo';
 export { default as Tray } from './tray';

package/components/header/profile.d.ts

@@ -13,7 +13,7 @@ export interface ProfileTranslations {
     logout?: string | null | undefined;
     certificateMismatch?: string | null | undefined;
 }
-export interface ProfileProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+export interface ProfileProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect' | 'children'> {
     closeOnSelect: boolean;
     renderPopupItems: (items: ListDataItem[]) => readonly ListDataItem[];
     translations?: ProfileTranslations | null | undefined;
@@ -46,4 +46,4 @@ export default class Profile extends PureComponent<ProfileProps> {
     static Size: typeof Size;
     render(): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null | undefined;
 }
-export type ProfileAttrs = JSX.LibraryManagedAttributes<typeof Profile, ProfileProps>;
+export type ProfileAttrs = React.JSX.LibraryManagedAttributes<typeof Profile, ProfileProps>;

package/components/icon/icon.css

@@ -45,15 +45,15 @@
 }
 
 .gray {
-  color: var(--ring-icon-secondary-color);
+  color: var(--ring-secondary-color);
 }
 
 .hover {
-  color: var(--ring-icon-hover-color);
+  color: var(--ring-link-hover-color);
 }
 
 .green {
-  color: var(--ring-icon-success-color);
+  color: var(--ring-success-color);
 }
 
 .magenta {
@@ -61,7 +61,7 @@
 }
 
 .red {
-  color: var(--ring-icon-error-color);
+  color: var(--ring-error-color);
 }
 
 .blue {

package/components/icon/icon.d.ts

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

package/components/input/input-legacy.css

@@ -60,7 +60,7 @@ Input
   }
 
   .error & {
-    border-color: var(--ring-icon-error-color);
+    border-color: var(--ring-error-color);
   }
 
   &:focus {
@@ -91,7 +91,7 @@ Input
 }
 
 :global(.ring-input_error) {
-  border-color: var(--ring-icon-error-color);
+  border-color: var(--ring-error-color);
 }
 
 :global(.ring-input_filter-popup) {

package/components/input/input.css

@@ -61,7 +61,7 @@
   }
 
   .error & {
-    border-color: var(--ring-icon-error-color);
+    border-color: var(--ring-error-color);
   }
 
   &:focus {
@@ -111,7 +111,7 @@
 
   pointer-events: none;
 
-  color: var(--ring-icon-secondary-color);
+  color: var(--ring-secondary-color);
 
   [dir="rtl"] & {
     right: var(--ring-unit);
@@ -121,7 +121,7 @@
 
 .clear {
   position: absolute;
-  top: calc(var(--ring-input-padding-block) + 1px);
+  top: calc(var(--ring-input-padding-block) + 3px);
   right: var(--ring-input-padding-inline);
 
   height: auto;

package/components/input/input.d.ts

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

package/components/link/link.css

@@ -6,6 +6,7 @@
   transition: color var(--ring-fast-ease);
 
   color: var(--ring-link-color);
+  border-radius: var(--ring-border-radius);
 
   outline: none;
 

package/components/list/list.css

@@ -225,7 +225,7 @@
 
   margin-right: var(--ring-unit);
 
-  color: var(--ring-icon-secondary-color);
+  color: var(--ring-secondary-color);
 }
 
 .avatar {

package/components/list/list.d.ts

@@ -166,4 +166,4 @@ export default class List<T = unknown> extends Component<ListProps<T>, ListState
     /** @override */
     render(): import("react/jsx-runtime").JSX.Element;
 }
-export type ListAttrs<T = unknown> = JSX.LibraryManagedAttributes<typeof List, ListProps<T>>;
+export type ListAttrs<T = unknown> = React.JSX.LibraryManagedAttributes<typeof List, ListProps<T>>;

package/components/loader-inline/loader-inline.d.ts

@@ -8,5 +8,5 @@ export interface LoaderInlineProps extends HTMLAttributes<HTMLDivElement> {
 declare class LoaderInline extends PureComponent<LoaderInlineProps> {
     render(): import("react/jsx-runtime").JSX.Element;
 }
-export type LoaderInlineAtrrs = JSX.LibraryManagedAttributes<typeof LoaderInline, LoaderInlineProps>;
+export type LoaderInlineAtrrs = React.JSX.LibraryManagedAttributes<typeof LoaderInline, LoaderInlineProps>;
 export default LoaderInline;

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

@@ -33,4 +33,4 @@ export default class LoginDialog extends Component<LoginDialogProps> {
     onMessage: (event: MessageEvent) => void;
     render(): import("react/jsx-runtime").JSX.Element;
 }
-export type LoginDialogAttrs = JSX.LibraryManagedAttributes<typeof LoginDialog, LoginDialogProps>;
+export type LoginDialogAttrs = React.JSX.LibraryManagedAttributes<typeof LoginDialog, LoginDialogProps>;

package/components/message/message.d.ts

@@ -51,5 +51,5 @@ export default class Message extends Component<MessageProps> {
     getTailOffset(): number;
     render(): import("react/jsx-runtime").JSX.Element;
 }
-export type MessageAttrs = JSX.LibraryManagedAttributes<typeof Message, MessageProps>;
+export type MessageAttrs = React.JSX.LibraryManagedAttributes<typeof Message, MessageProps>;
 export {};

package/components/pager/pager.d.ts

@@ -76,5 +76,5 @@ export default class Pager extends PureComponent<PagerProps> {
     getPagerContent(): import("react/jsx-runtime").JSX.Element;
     render(): import("react/jsx-runtime").JSX.Element;
 }
-export type PagerAttrs = JSX.LibraryManagedAttributes<typeof Pager, PagerProps>;
+export type PagerAttrs = React.JSX.LibraryManagedAttributes<typeof Pager, PagerProps>;
 export {};