@jetbrains/ring-ui 5.0.0-beta.2 → 5.0.0-beta.22

package/components/loader-inline/loader-inline.css

@@ -1,7 +1,18 @@
 @import "../global/variables.css";
 
+@value dark from "../global/variables_dark.css";
 @value unit from "../global/global.css";
 
+:root {
+  /* stylelint-disable-next-line color-no-hex */
+  --ring-loader-inline-stops: #ff00eb, #bd3bff, #008eff, #58ba00, #f48700, #ff00eb;
+}
+
+.dark {
+  /* stylelint-disable-next-line color-no-hex */
+  --ring-loader-inline-stops: #ff2eef, #d178ff, #289fff, #88d444, #ffe000, #ff2eef;
+}
+
 @keyframes spin {
   0% {
     transform: rotate(0);
@@ -51,6 +62,9 @@
 
     content: "";
     animation: pulse 0.85s cubic-bezier(0.68, 0, 0.74, 0.74) infinite alternate;
+
+    background-image: conic-gradient(var(--ring-loader-inline-stops));
+    mask-image: radial-gradient(unit, transparent 71.875%, var(--ring-content-background-color) 71.875%);
   }
 }
 

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

@@ -1,7 +1,6 @@
-import React, { ComponentPropsWithRef, HTMLAttributes, PureComponent } from 'react';
+import { HTMLAttributes, PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import Theme, { ThemeProps } from '../global/theme';
-export interface LoaderInlineProps extends ThemeProps, HTMLAttributes<HTMLDivElement> {
+export interface LoaderInlineProps extends HTMLAttributes<HTMLDivElement> {
     'data-test'?: string | null | undefined;
 }
 /**
@@ -9,47 +8,11 @@ export interface LoaderInlineProps extends ThemeProps, HTMLAttributes<HTMLDivEle
  */
 declare class LoaderInline extends PureComponent<LoaderInlineProps> {
     static propTypes: {
-        theme: PropTypes.Requireable<Theme>;
         className: PropTypes.Requireable<string>;
         'data-test': PropTypes.Requireable<string>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     };
-    componentDidMount(): void;
-    static Theme: typeof Theme;
     render(): JSX.Element;
 }
-declare const ThemedLoaderInline: React.NamedExoticComponent<Omit<(Pick<LoaderInlineProps, "className" | "color" | "id" | "lang" | "style" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "dir" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "theme" | "data-test"> & Pick<PropTypes.InferProps<{
-    theme: PropTypes.Requireable<Theme>;
-    className: PropTypes.Requireable<string>;
-    'data-test': PropTypes.Requireable<string>;
-    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-}>, never> & Pick<LoaderInlineProps, "color" | "id" | "lang" | "style" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "dir" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is">) | (Pick<LoaderInlineProps, "className" | "color" | "id" | "lang" | "style" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "dir" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "theme" | "data-test"> & Pick<PropTypes.InferProps<React.WeakValidationMap<LoaderInlineProps> & {
-    theme: PropTypes.Requireable<Theme>;
-    className: PropTypes.Requireable<string>;
-    'data-test': PropTypes.Requireable<string>;
-    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-}>, "inlist"> & Pick<LoaderInlineProps, never>), "theme"> & import("../global/theme").ThemeOuterProps & React.RefAttributes<LoaderInline>> & {
-    readonly type: React.ForwardRefExoticComponent<Omit<(Pick<LoaderInlineProps, "className" | "color" | "id" | "lang" | "style" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "dir" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "theme" | "data-test"> & Pick<PropTypes.InferProps<{
-        theme: PropTypes.Requireable<Theme>;
-        className: PropTypes.Requireable<string>;
-        'data-test': PropTypes.Requireable<string>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    }>, never> & Pick<LoaderInlineProps, "color" | "id" | "lang" | "style" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "dir" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is">) | (Pick<LoaderInlineProps, "className" | "color" | "id" | "lang" | "style" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "dir" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "theme" | "data-test"> & Pick<PropTypes.InferProps<React.WeakValidationMap<LoaderInlineProps> & {
-        theme: PropTypes.Requireable<Theme>;
-        className: PropTypes.Requireable<string>;
-        'data-test': PropTypes.Requireable<string>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    }>, "inlist"> & Pick<LoaderInlineProps, never>), "theme"> & import("../global/theme").ThemeOuterProps & React.RefAttributes<LoaderInline>>;
-} & {
-    prototype: LoaderInline;
-    propTypes: {
-        theme: PropTypes.Requireable<Theme>;
-        className: PropTypes.Requireable<string>;
-        'data-test': PropTypes.Requireable<string>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    };
-    Theme: typeof Theme;
-    contextType?: React.Context<any> | undefined;
-};
-export declare type LoaderInlineAtrrs = ComponentPropsWithRef<typeof ThemedLoaderInline>;
-export default ThemedLoaderInline;
+export declare type LoaderInlineAtrrs = JSX.LibraryManagedAttributes<typeof LoaderInline, LoaderInlineProps>;
+export default LoaderInline;

package/components/loader-inline/{loader-inline.jsx → loader-inline.js}

@@ -1,27 +1,20 @@
 import React, { PureComponent } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import Theme, { withTheme } from '../global/theme';
 import dataTests from '../global/data-tests';
 import styles from './loader-inline.css';
-import injectStyles from './inject-styles';
 /**
  * @name Loader Inline
  */
 class LoaderInline extends PureComponent {
     static propTypes = {
-        theme: PropTypes.oneOf(Object.values(Theme)),
         className: PropTypes.string,
         'data-test': PropTypes.string,
         children: PropTypes.node
     };
-    componentDidMount() {
-        injectStyles();
-    }
-    static Theme = Theme;
     render() {
-        const { className, theme, 'data-test': dataTest, children, ...restProps } = this.props;
-        const classes = classNames(styles.loader, className, `${styles.loader}_${theme}`);
+        const { className, 'data-test': dataTest, children, ...restProps } = this.props;
+        const classes = classNames(styles.loader, className);
         const loader = (<div {...restProps} data-test={dataTests('ring-loader-inline', dataTest)} className={classes}/>);
         return children
             ? (<>
@@ -31,5 +24,4 @@ class LoaderInline extends PureComponent {
             : loader;
     }
 }
-const ThemedLoaderInline = withTheme()(LoaderInline);
-export default ThemedLoaderInline;
+export default LoaderInline;

package/components/loader-inline-ng/loader-inline-ng.js

@@ -1,8 +1,6 @@
 import angular from 'angular';
 
 import styles from '../loader-inline/loader-inline.css';
-import injectStyles from '../loader-inline/inject-styles';
-import Theme from '../global/theme';
 
 /**
  * @name Loader Inline Ng
@@ -11,23 +9,9 @@ import Theme from '../global/theme';
 
 const angularModule = angular.module('Ring.loader-inline', []);
 
-class LoaderController {
-  $onInit() {
-    injectStyles();
-
-    this.theme = this.theme || Theme.LIGHT;
-  }
-
-  getThemeClass = () => `${styles.loader}_${this.theme}`;
-}
-
 angularModule.
   component('rgLoaderInline', {
-    bindings: {
-      theme: '@?'
-    },
-    template: `<div data-test="ring-loader-inline-ng" class="${styles.loader}" ng-class="$ctrl.getThemeClass()"></div>`,
-    controller: LoaderController
+    template: `<div data-test="ring-loader-inline-ng" class="${styles.loader}"></div>`
   });
 
 export default angularModule.name;

package/components/loader-inline-ng/loader-inline-ng.test.js

@@ -22,18 +22,7 @@ describe('LoaderInline', () => {
 
   it('should render loader markup', () => {
     element.should.contain(`.${styles.loader}`);
-    element.should.contain(`.${styles.loader}_light`);
     element.should.contain('[data-test="ring-loader-inline-ng"]');
   });
 
-  it('should render light loader theme by default', () => {
-    element.should.contain(`.${styles.loader}_light`);
-  });
-
-  it('should render dark loader theme if passed', () => {
-    element = $compile('<rg-loader-inline theme="dark"></rg-loader-inline>')(scope)[0];
-    scope.$digest();
-    element.should.contain(`.${styles.loader}_dark`);
-  });
-
 });

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, unmountComponentAtNode } from 'react-dom';
+import { render, unmountComponentAtNode } from '../global/react-render-adapter';
 import LoginDialog from './login-dialog';
 const containerElement = document.createElement('div');
 /**

package/components/markdown/code.d.ts

@@ -1,16 +1,9 @@
 /// <reference types="react" />
-import PropTypes from 'prop-types';
-interface MarkdownCodeProps {
-    language?: string | null | undefined;
-    value?: string | null | undefined;
-    inline?: boolean | undefined;
+import { CodeProps } from 'react-markdown/lib/ast-to-react';
+declare module 'react-markdown/lib/complex-types' {
+    interface ReactMarkdownProps {
+        language?: string;
+    }
 }
-declare const MarkdownCode: {
-    ({ value, language, inline }: MarkdownCodeProps): JSX.Element;
-    propTypes: {
-        language: PropTypes.Requireable<string>;
-        value: PropTypes.Requireable<string>;
-        inline: PropTypes.Requireable<boolean>;
-    };
-};
+declare const MarkdownCode: ({ children, language, inline }: CodeProps) => JSX.Element;
 export default MarkdownCode;

package/components/markdown/{code.jsx → code.js}

@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Code from '../code/code';
-const MarkdownCode = ({ value, language, inline }) => (<Code language={language} code={value || ''} inline={inline}/>);
+const MarkdownCode = ({ children, language, inline }) => (<Code language={language} code={children?.join('') || ''} inline={inline}/>);
 MarkdownCode.propTypes = {
     language: PropTypes.string,
-    value: PropTypes.string,
+    children: PropTypes.array.isRequired,
     inline: PropTypes.bool
 };
 export default MarkdownCode;

package/components/markdown/heading.d.ts

@@ -1,15 +1,11 @@
-import { ReactNode } from 'react';
+/// <reference types="react" />
 import PropTypes from 'prop-types';
-import { Levels } from '../heading/heading';
-export interface MarkdownHeadingProps {
-    level?: Levels | undefined;
-    children?: ReactNode;
-}
+import { HeadingProps } from 'react-markdown/lib/ast-to-react';
 declare const MarkdownHeading: {
-    ({ level, children }: MarkdownHeadingProps): JSX.Element;
+    ({ level, children }: HeadingProps): JSX.Element;
     propTypes: {
-        level: PropTypes.Requireable<number>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        level: PropTypes.Validator<number>;
+        children: PropTypes.Validator<any[]>;
     };
 };
 export default MarkdownHeading;

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import Heading from '../heading/heading';
 const MarkdownHeading = ({ level, children }) => <Heading level={level}>{children}</Heading>;
 MarkdownHeading.propTypes = {
-    level: PropTypes.number,
-    children: PropTypes.node
+    level: PropTypes.number.isRequired,
+    children: PropTypes.array.isRequired
 };
 export default MarkdownHeading;

package/components/markdown/link.d.ts

@@ -1,16 +1,12 @@
-import { ReactNode } from 'react';
+/// <reference types="react" />
 import PropTypes from 'prop-types';
-export interface MarkdownLinkProps {
-    href?: string | undefined;
-    title?: string | undefined;
-    children?: ReactNode;
-}
+import { ReactMarkdownProps } from 'react-markdown/lib/complex-types';
 declare const MarkdownLink: {
-    ({ href, title, children }: MarkdownLinkProps): JSX.Element;
+    ({ href, title, children }: JSX.IntrinsicElements['a'] & ReactMarkdownProps): JSX.Element;
     propTypes: {
         href: PropTypes.Requireable<string>;
         title: PropTypes.Requireable<string>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        children: PropTypes.Validator<any[]>;
     };
 };
 export default MarkdownLink;

package/components/markdown/{link.jsx → link.js}

@@ -5,6 +5,6 @@ const MarkdownLink = ({ href, title, children }) => <Link href={href} title={tit
 MarkdownLink.propTypes = {
     href: PropTypes.string,
     title: PropTypes.string,
-    children: PropTypes.node
+    children: PropTypes.array.isRequired
 };
 export default MarkdownLink;

package/components/markdown/markdown.d.ts

@@ -1,10 +1,9 @@
 import { PureComponent } from 'react';
-import { ReactMarkdownProps } from 'react-markdown';
+import { Options } from 'react-markdown';
 export interface BaseMarkdownProps {
-    source: string;
     inline?: boolean | null | undefined;
 }
-export declare type MarkdownProps = ReactMarkdownProps & BaseMarkdownProps;
+export declare type MarkdownProps = Options & BaseMarkdownProps;
 /**
   * @name Markdown
 */

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

@@ -15,27 +15,30 @@ import styles from './markdown.css';
 */
 export default class Markdown extends PureComponent {
     render() {
-        const { className, renderers, inline, source, plugins = [], ...restProps } = this.props;
+        const { className, components, inline, children, plugins = [], ...restProps } = this.props;
         const classes = classNames(className, {
             [styles.markdown]: !inline,
             [styles.inline]: inline
         });
-        return (<ReactMarkdown className={classes} source={normalizeIndent(source)} plugins={[RemarkBreaks, RemarkGFM, ...plugins]} renderers={{
-                link: Link,
-                linkReference: Link,
+        return (<ReactMarkdown className={classes} plugins={[RemarkBreaks, RemarkGFM, ...plugins]} components={{
+                a: Link,
                 code: Code,
-                inlineCode: Code,
-                heading: Heading,
-                ...renderers
-            }} {...restProps}/>);
+                h1: Heading,
+                h2: Heading,
+                h3: Heading,
+                h4: Heading,
+                h5: Heading,
+                h6: Heading,
+                ...components
+            }} {...restProps}>{normalizeIndent(children)}</ReactMarkdown>);
     }
 }
 Markdown.propTypes = {
     inline: PropTypes.bool,
-    source: PropTypes.string,
+    children: PropTypes.string,
     className: PropTypes.string,
-    renderers: PropTypes.object,
+    components: PropTypes.object,
     plugins: PropTypes.array
 };
-const md = trivialTemplateTag(source => <Markdown {...{ source }}/>);
+const md = trivialTemplateTag(source => <Markdown>{source}</Markdown>);
 export { md };

package/components/message/message.css

@@ -3,6 +3,10 @@
 @value unit from "../global/global.css";
 @value padding: calc(unit * 1.5);
 
+.container {
+  display: inline;
+}
+
 .message {
   overflow: visible;
 
@@ -12,28 +16,9 @@
 
   text-align: left;
 
-  color: var(--ring-dark-text-color);
-
-  border: none;
-
-  background-color: var(--ring-message-background-color);
-
-  box-shadow: none;
-
-  &::before {
-    position: absolute;
-    z-index: var(--ring-invisible-element-z-index);
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+  color: var(--ring-active-text-color);
 
-    content: "";
-
-    border-radius: var(--ring-border-radius);
-
-    box-shadow: 0 2px 8px 0 var(--ring-message-shadow-color);
-  }
+  background-color: var(--ring-popup-background-color);
 }
 
 .icon {
@@ -51,11 +36,12 @@
 }
 
 .description {
-  composes: font-smaller-lower from "../global/global.css";
-
   margin: calc(unit / 2) 0 0;
 
-  color: var(--ring-dark-active-color);
+  color: var(--ring-text-color);
+
+  font-size: var(--ring-font-size-smaller);
+  line-height: var(--ring-line-height-lowest);
 }
 
 .button {
@@ -65,10 +51,14 @@
 .tail {
   position: absolute;
 
-  transform-origin: 50% 0;
+  box-sizing: border-box;
+  width: 11px;
+  height: 11px;
+
+  transform-origin: 0 0;
 
-  border-width: unit unit 0;
-  border-style: solid;
+  border: 1px solid;
+  border-color: transparent transparent var(--ring-popup-border-color) var(--ring-popup-border-color);
 
-  border-color: var(--ring-message-background-color) transparent transparent; /* stylelint-disable-line color-no-hex */
+  background-color: var(--ring-popup-background-color);
 }

package/components/message/message.d.ts

@@ -3,6 +3,7 @@ import Popup, { PopupAttrs } from '../popup/popup';
 import { Directions } from '../popup/popup.consts';
 import { IconType } from '../icon/icon';
 import { ButtonAttrs } from '../button/button';
+import Theme from '../global/theme';
 export interface MessageTranslations {
     gotIt: string;
     dismiss: string;
@@ -11,6 +12,7 @@ export interface MessageProps {
     icon: string | IconType | null;
     directions: readonly Directions[];
     translations: MessageTranslations;
+    theme: Theme;
     title?: string | null | undefined;
     children?: ReactNode;
     className?: string | null | undefined;
@@ -36,6 +38,7 @@ export default class Message extends Component<MessageProps> {
             gotIt: string;
             dismiss: string;
         };
+        theme: Theme;
     };
     state: MessageState;
     static Directions: typeof Directions;